Kanban board with frame columns

<!--
  IconPlaceholder (иконки статуса колонки "circle"/"circle-dot"/
  "circle-check") заменена инлайновым `<svg>` (lucide-react v0.545.0).
  Доска в покое с фиксированным порядком карточек.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Badge } from "@/components/reui/badge"
import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
import { Kanban, KanbanBoard, KanbanColumn, KanbanColumnContent, KanbanItem, KanbanItemHandle, KanbanOverlay } from "@/components/reui/kanban"

interface Task {
  id: string
  title: string
  label: string
  labelVariant: "primary-light" | "success-light" | "warning-light" | "destructive-light" | "info-light"
}

const columnMeta: Record<string, { title: string; icon: "circle" | "circle-dot" | "circle-check" }> = {
  todo: { title: "To Do", icon: "circle" },
  doing: { title: "In Progress", icon: "circle-dot" },
  done: { title: "Done", icon: "circle-check" },
}

const columns = ref<Record<string, Task[]>>({
  todo: [
    { id: "1", title: "Design landing page", label: "Design", labelVariant: "info-light" },
    { id: "2", title: "Set up CI/CD pipeline", label: "DevOps", labelVariant: "warning-light" },
    { id: "3", title: "Write unit tests", label: "Testing", labelVariant: "success-light" },
  ],
  doing: [
    { id: "4", title: "Implement auth flow", label: "Backend", labelVariant: "primary-light" },
    { id: "5", title: "Create component library", label: "Frontend", labelVariant: "destructive-light" },
  ],
  done: [{ id: "6", title: "Project kickoff", label: "Planning", labelVariant: "info-light" }],
})
</script>

<template>
  <div>
    <Kanban v-model:value="columns" :get-item-value="(item: Task) => item.id">
      <KanbanBoard class="grid auto-rows-fr grid-cols-3">
        <KanbanColumn v-for="(tasks, columnId) in columns" :key="columnId" :value="columnId">
          <Frame spacing="sm" class="h-full">
            <FrameHeader class="flex flex-row items-center gap-2">
              <svg
                v-if="columnMeta[columnId]!.icon === 'circle'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="size-4"
              ><circle cx="12" cy="12" r="10" /></svg>
              <svg
                v-else-if="columnMeta[columnId]!.icon === 'circle-dot'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="text-muted-foreground size-4"
              ><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="1" /></svg>
              <svg
                v-else
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="size-4"
              ><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
              <FrameTitle>{{ columnMeta[columnId]!.title }}</FrameTitle>
              <Badge variant="outline" size="sm" class="ml-auto">{{ tasks.length }}</Badge>
            </FrameHeader>
            <KanbanColumnContent :value="columnId" class="flex flex-col gap-2 p-0.5">
              <KanbanItem v-for="task in tasks" :key="task.id" :value="task.id">
                <KanbanItemHandle>
                  <Frame variant="ghost" spacing="sm" class="p-0">
                    <FramePanel class="p-3">
                      <div class="flex flex-col gap-2">
                        <span class="text-sm font-medium">{{ task.title }}</span>
                        <Badge :variant="task.labelVariant" size="sm" class="w-fit">{{ task.label }}</Badge>
                      </div>
                    </FramePanel>
                  </Frame>
                </KanbanItemHandle>
              </KanbanItem>
            </KanbanColumnContent>
          </Frame>
        </KanbanColumn>
      </KanbanBoard>
      <KanbanOverlay class="bg-muted/10 rounded-md border-2 border-dashed" />
    </Kanban>
  </div>
</template>