@vadimcomanescu/nadicode-design-system 2.0.9 → 4.0.1

package/dist/chunk-BRICSLHJ.js

@@ -0,0 +1,30 @@
+import { LoginBlock } from './chunk-RGE5OQMZ.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx } from 'react/jsx-runtime';
+
+function SignupPageKit({
+  action,
+  googleAction,
+  error,
+  showSocial = true,
+  labels,
+  signInHref,
+  className,
+  cardClassName
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("min-h-dvh w-full bg-background px-4 py-12 md:px-8 md:py-20", className), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-5xl items-center justify-center", children: /* @__PURE__ */ jsx(
+    LoginBlock,
+    {
+      className: cn("w-full", cardClassName),
+      type: "signup",
+      action,
+      googleAction,
+      error,
+      showSocial,
+      labels,
+      signInHref
+    }
+  ) }) });
+}
+
+export { SignupPageKit };

package/dist/chunk-BYEHHZZN.js

@@ -0,0 +1,115 @@
+import { CrudFormPageKit } from './chunk-KWILREVQ.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function mapState(state) {
+  switch (state) {
+    case "validation-error":
+      return "validation-error";
+    case "saving":
+      return "submitting";
+    case "active-step":
+      return "dirty";
+    case "complete":
+      return "saved";
+    default:
+      return "pristine";
+  }
+}
+function OnboardingPageKit({
+  shell,
+  steps,
+  activeStepIndex,
+  state = "default",
+  validationMessage,
+  onStepChange,
+  onComplete,
+  canSkipOptionalStep = false,
+  onBack,
+  onContinueFromComplete,
+  completeTitle = "Onboarding complete",
+  completeDescription = "Your workspace is ready. Continue to your dashboard.",
+  className
+}) {
+  const hasSteps = steps.length > 0;
+  const boundedStepIndex = hasSteps ? Math.min(Math.max(activeStepIndex, 0), steps.length - 1) : 0;
+  const currentStep = hasSteps ? steps[boundedStepIndex] : null;
+  const isLastStep = hasSteps ? boundedStepIndex === steps.length - 1 : true;
+  if (state === "complete") {
+    return /* @__PURE__ */ jsx(
+      CrudFormPageKit,
+      {
+        shell,
+        title: "Onboarding",
+        description: "Complete state",
+        state: "saved",
+        sections: [
+          {
+            id: "complete",
+            title: completeTitle,
+            content: /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: completeTitle }) }),
+              /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "muted", children: completeDescription }),
+                onContinueFromComplete ? /* @__PURE__ */ jsx(Button, { onClick: onContinueFromComplete, children: "Continue" }) : null
+              ] })
+            ] })
+          }
+        ],
+        className
+      }
+    );
+  }
+  const title = currentStep ? `Onboarding \xB7 ${currentStep.title}` : "Onboarding";
+  const description = hasSteps ? `Step ${boundedStepIndex + 1} of ${steps.length}` : "Configure your workspace in a guided flow.";
+  return /* @__PURE__ */ jsx(
+    CrudFormPageKit,
+    {
+      shell,
+      title,
+      description,
+      state: mapState(state),
+      validationMessage,
+      sections: [
+        {
+          id: currentStep?.id ?? "no-steps",
+          title: currentStep?.title ?? "No steps configured",
+          description: currentStep?.description,
+          optional: currentStep?.optional,
+          content: currentStep ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 4, children: currentStep.title }),
+            currentStep.description ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: currentStep.description }) : null,
+            /* @__PURE__ */ jsx("div", { children: currentStep.content })
+          ] }) : /* @__PURE__ */ jsx(Typography, { variant: "muted", children: "Provide at least one onboarding step." })
+        }
+      ],
+      actions: {
+        secondary: onBack ? {
+          label: "Back",
+          onAction: onBack,
+          disabled: boundedStepIndex === 0
+        } : void 0,
+        tertiary: canSkipOptionalStep && currentStep?.optional ? {
+          label: "Skip optional step",
+          onAction: () => onComplete?.()
+        } : void 0,
+        primary: {
+          label: isLastStep ? "Complete" : "Next",
+          onAction: () => {
+            if (!hasSteps || isLastStep) {
+              onComplete?.();
+            } else {
+              onStepChange?.(boundedStepIndex + 1);
+            }
+          }
+        }
+      },
+      className
+    }
+  );
+}
+
+export { OnboardingPageKit };

package/dist/chunk-C33GUEDY.js

@@ -0,0 +1,149 @@
+import { NavigationShellPageKit } from './chunk-ZKLB5N3Q.js';
+import { ActivityFeedBlock } from './chunk-ZM2NODUK.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { MetricCard } from './chunk-BRXNGF5W.js';
+import { Heading } from './chunk-WI547C47.js';
+import { DataFreshness } from './chunk-WST5NLLC.js';
+import { ChartCard } from './chunk-HJZRSPWB.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-55HD4L6G.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var EMPTY_KPIS = [];
+var EMPTY_CHART_REGIONS = [];
+var EMPTY_ACTIVITY_ITEMS = [];
+function deriveRegionState(state, data) {
+  if (state) {
+    return state;
+  }
+  if (!data || data.length === 0) {
+    return "empty";
+  }
+  return "has-data";
+}
+function renderChartRegion(region) {
+  const state = deriveRegionState(region.state, region.data);
+  const isPartialDataState = state === "partial-data";
+  if (state === "error") {
+    return /* @__PURE__ */ jsxs(Card, { className: region.className, children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: region.title }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: region.errorMessage ?? "Chart region is unavailable."
+        }
+      ) })
+    ] }, region.id);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", region.className), children: [
+    isPartialDataState ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Some chart points are still loading, available data remains visible." }) : null,
+    /* @__PURE__ */ jsx(
+      ChartCard,
+      {
+        title: region.title,
+        description: region.description,
+        chart: region.chart,
+        data: state === "empty" ? [] : region.data,
+        loading: state === "loading",
+        emptyTitle: region.emptyTitle ?? "No chart data",
+        emptyDescription: region.emptyDescription ?? "This chart will populate once data is available."
+      }
+    )
+  ] }, region.id);
+}
+function DashboardPageKit({
+  shell,
+  title = "Dashboard overview",
+  description = "Track KPI performance, chart health, and recent activity from one route-level contract.",
+  kpis = EMPTY_KPIS,
+  kpiState,
+  chartRegions = EMPTY_CHART_REGIONS,
+  activityRegion,
+  lastUpdated,
+  className
+}) {
+  const freshnessTimestamp = lastUpdated ?? /* @__PURE__ */ new Date();
+  const resolvedKpiState = deriveRegionState(kpiState, kpis);
+  const resolvedActivityState = deriveRegionState(activityRegion?.state, activityRegion?.items ?? EMPTY_ACTIVITY_ITEMS);
+  const hasLoadingCharts = chartRegions.some((region) => deriveRegionState(region.state, region.data) === "loading");
+  const loadingKpis = Array.from({ length: Math.max(kpis.length, 4) }, (_, index) => /* @__PURE__ */ jsx(
+    MetricCard,
+    {
+      label: `Loading metric ${index + 1}`,
+      value: 0,
+      loading: true
+    },
+    `loading-kpi-${index}`
+  ));
+  return /* @__PURE__ */ jsx(NavigationShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
+        /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(DataFreshness, { lastUpdated: freshnessTimestamp, isLive: true })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "aria-label": "Dashboard KPI region", className: "space-y-3", children: [
+      resolvedKpiState === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading KPI metrics" }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: loadingKpis })
+      ] }) : null,
+      resolvedKpiState === "error" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: "KPI metrics are currently unavailable."
+        }
+      ) : null,
+      resolvedKpiState === "empty" ? /* @__PURE__ */ jsxs(Empty, { children: [
+        /* @__PURE__ */ jsx(EmptyTitle, { children: "No KPI data" }),
+        /* @__PURE__ */ jsx(EmptyDescription, { children: "Connect your data source to populate KPI cards." })
+      ] }) : null,
+      resolvedKpiState === "partial-data" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Some KPI metrics are temporarily unavailable." }) : null,
+      resolvedKpiState === "has-data" || resolvedKpiState === "partial-data" ? /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: kpis.map((kpi) => /* @__PURE__ */ jsx(
+        MetricCard,
+        {
+          ...kpi
+        },
+        `${kpi.label}-${String(kpi.value)}`
+      )) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "aria-label": "Dashboard chart regions", className: "grid gap-4 xl:grid-cols-2", children: [
+      hasLoadingCharts ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary xl:col-span-2", children: "Loading chart data" }) : null,
+      chartRegions.map((region) => renderChartRegion(region))
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "aria-label": "Dashboard activity region", children: [
+      resolvedActivityState === "loading" ? /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: activityRegion?.title ?? "Recent activity" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading activity feed" }) })
+      ] }) : null,
+      resolvedActivityState === "error" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: activityRegion?.errorMessage ?? "Activity feed is unavailable."
+        }
+      ) : null,
+      resolvedActivityState === "empty" ? /* @__PURE__ */ jsxs(Empty, { children: [
+        /* @__PURE__ */ jsx(EmptyTitle, { children: activityRegion?.emptyTitle ?? "No activity yet" }),
+        /* @__PURE__ */ jsx(EmptyDescription, { children: activityRegion?.emptyDescription ?? "Recent updates will appear once your team starts making changes." })
+      ] }) : null,
+      resolvedActivityState === "partial-data" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Recent activity is partially available while remaining events sync." }) : null,
+      resolvedActivityState === "has-data" || resolvedActivityState === "partial-data" ? /* @__PURE__ */ jsx(
+        ActivityFeedBlock,
+        {
+          title: activityRegion?.title ?? "Recent activity",
+          activities: activityRegion?.items,
+          className: "py-4 md:py-6"
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+
+export { DashboardPageKit };

package/dist/chunk-CUDMDYKE.js

@@ -0,0 +1,150 @@
+import { NavigationShellPageKit } from './chunk-ZKLB5N3Q.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { NativeSelect } from './chunk-UGV45DH3.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-PXDHNGTG.js';
+import { ChartCard } from './chunk-HJZRSPWB.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-55HD4L6G.js';
+import { Card, CardHeader, CardTitle, CardContent, CardDescription } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function deriveState(state, data) {
+  if (state) {
+    return state;
+  }
+  if (!data || data.length === 0) {
+    return "empty";
+  }
+  return "has-data";
+}
+function renderGridRegion(region) {
+  const state = deriveState(region.state, region.rows);
+  const isFilteredState = state === "filtered";
+  const isPartialDataState = state === "partial-data";
+  if (state === "loading") {
+    return /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: region.title }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading analytics table" }) })
+    ] }, region.id);
+  }
+  if (state === "error") {
+    return /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: region.title }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+          children: region.errorMessage ?? "Analytics table is unavailable."
+        }
+      ) })
+    ] }, region.id);
+  }
+  if (state === "empty" || isFilteredState) {
+    return /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: region.title }),
+        region.description ? /* @__PURE__ */ jsx(CardDescription, { children: region.description }) : null
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Empty, { children: [
+        /* @__PURE__ */ jsx(EmptyTitle, { children: region.emptyTitle ?? (isFilteredState ? "No rows for selected filters" : "No matching rows") }),
+        /* @__PURE__ */ jsx(EmptyDescription, { children: region.emptyDescription ?? (isFilteredState ? "Broaden filters or date range to restore table results." : "Adjust filters or date range to load analytics records.") })
+      ] }) })
+    ] }, region.id);
+  }
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: region.title }),
+      region.description ? /* @__PURE__ */ jsx(CardDescription, { children: region.description }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      isPartialDataState ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mb-3 text-text-secondary", children: "Showing available rows while some analytics dimensions are still syncing." }) : null,
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: region.columns.map((column) => /* @__PURE__ */ jsx(TableHead, { children: column }, `${region.id}-${column}`)) }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: region.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: region.columns.map((column) => /* @__PURE__ */ jsx(TableCell, { children: row[column] ?? "-" }, `${region.id}-row-${rowIndex}-${column}`)) }, `${region.id}-row-${rowIndex}`)) })
+      ] }) })
+    ] })
+  ] }, region.id);
+}
+function AnalyticsPageKit({
+  shell,
+  title = "Analytics reporting",
+  description = "Coordinate filters, chart surfaces, and tabular analysis from one stable page-kit contract.",
+  filters,
+  chartRegions,
+  gridRegions,
+  comparisonLabel,
+  onResetFilters,
+  className
+}) {
+  return /* @__PURE__ */ jsx(NavigationShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        "aria-label": "Analytics filters",
+        className: "rounded-lg border border-border/70 bg-surface/60 p-4",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-4", children: [
+          filters.map((filter) => /* @__PURE__ */ jsxs("div", { className: "min-w-[180px] flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `analytics-filter-${filter.id}`, className: "text-sm font-medium text-text-primary", children: filter.label }),
+            /* @__PURE__ */ jsx(
+              NativeSelect,
+              {
+                id: `analytics-filter-${filter.id}`,
+                "aria-label": filter.label,
+                value: filter.value,
+                onChange: (event) => filter.onChange?.(event.target.value),
+                children: filter.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, `${filter.id}-${option.value}`))
+              }
+            )
+          ] }, filter.id)),
+          comparisonLabel ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: comparisonLabel }) : null,
+          onResetFilters ? /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onResetFilters, children: "Reset filters" }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("section", { className: "grid gap-4 xl:grid-cols-2", children: chartRegions.map((region) => {
+      const state = deriveState(region.state, region.data);
+      const isFilteredState = state === "filtered";
+      const isPartialDataState = state === "partial-data";
+      if (state === "error") {
+        return /* @__PURE__ */ jsxs(Card, { className: region.className, children: [
+          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: region.title }) }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "alert",
+              className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+              children: region.errorMessage ?? "Analytics chart is unavailable."
+            }
+          ) })
+        ] }, region.id);
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        isPartialDataState ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Showing available chart data while some series are still syncing." }) : null,
+        /* @__PURE__ */ jsx(
+          ChartCard,
+          {
+            className: region.className,
+            title: region.title,
+            description: region.description,
+            chart: region.chart,
+            data: state === "empty" || isFilteredState ? [] : region.data,
+            loading: state === "loading",
+            emptyTitle: region.emptyTitle ?? (isFilteredState ? "No chart points for selected filters" : "No chart points"),
+            emptyDescription: region.emptyDescription ?? "Try adjusting filters to broaden the results."
+          }
+        )
+      ] }, region.id);
+    }) }),
+    /* @__PURE__ */ jsx("section", { className: "grid gap-4 xl:grid-cols-2", children: gridRegions.map((region) => renderGridRegion(region)) })
+  ] }) });
+}
+
+export { AnalyticsPageKit };

package/dist/chunk-CVTMWSNS.js

@@ -0,0 +1,145 @@
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { KanbanBoard, KanbanColumn, KanbanColumnHeader, KanbanItem, KanbanHandle } from './chunk-TYP2MR3Q.js';
+import { Empty, EmptyDescription } from './chunk-55HD4L6G.js';
+import { Avatar, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PRIORITY_STYLES = {
+  low: { dot: "bg-success", badge: "bg-success/10 text-success" },
+  medium: { dot: "bg-warning", badge: "bg-warning/10 text-warning" },
+  high: { dot: "bg-destructive", badge: "bg-destructive/10 text-destructive" },
+  critical: { dot: "bg-destructive", badge: "bg-destructive/20 text-destructive" }
+};
+var COLUMN_META = {
+  backlog: { label: "Backlog", color: "bg-text-tertiary" },
+  todo: { label: "To Do", color: "bg-accent" },
+  "in-progress": { label: "In Progress", color: "bg-warning" },
+  review: { label: "Review", color: "bg-info" },
+  done: { label: "Done", color: "bg-success" }
+};
+var INITIAL_COLUMNS = [
+  {
+    id: "backlog",
+    items: [
+      { id: "t1", title: "Design token audit", description: "Review all semantic tokens for contrast compliance", priority: "medium", assignee: "AK", tags: ["tokens", "a11y"] },
+      { id: "t2", title: "Update changelog", description: "Document v2.0 breaking changes", priority: "low", assignee: "VM", tags: ["docs"] },
+      { id: "t3", title: "Virtualized list primitive", description: "Research windowing for large data tables", priority: "low", assignee: "JR", tags: ["perf", "research"] }
+    ]
+  },
+  {
+    id: "todo",
+    items: [
+      { id: "t4", title: "Date range picker a11y", description: "Fix keyboard navigation between months", priority: "high", assignee: "AK", tags: ["a11y", "datepicker"] },
+      { id: "t5", title: "Carousel keyboard nav", description: "Arrow keys should cycle through slides", priority: "high", assignee: "VM", tags: ["a11y", "carousel"] }
+    ]
+  },
+  {
+    id: "in-progress",
+    items: [
+      { id: "t6", title: "Kanban board primitive", description: "dnd-kit compound component with glass styling", priority: "critical", assignee: "VM", tags: ["dnd", "new"] },
+      { id: "t7", title: "Bloom theme spring tuning", description: "Adjust bloom spring presets for more playful overshoot", priority: "medium", assignee: "JR", tags: ["motion", "bloom"] }
+    ]
+  },
+  {
+    id: "review",
+    items: [
+      { id: "t8", title: "Form wizard validation", description: "Zod schema per step with async validation support", priority: "high", assignee: "AK", tags: ["forms", "zod"] }
+    ]
+  },
+  {
+    id: "done",
+    items: [
+      { id: "t9", title: "Dark mode polish", description: "Fix washed-out glass panels in dark mode", priority: "medium", assignee: "VM", tags: ["theme", "glass"] },
+      { id: "t10", title: "Icon animation system", description: "77 animated icons with imperative handles", priority: "low", assignee: "JR", tags: ["icons", "motion"] }
+    ]
+  }
+];
+function TaskCard({ task, compact = false }) {
+  const ps = PRIORITY_STYLES[task.priority];
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1 space-y-2", compact && "w-[260px] p-3"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-text-primary leading-snug", children: task.title }),
+      !compact && /* @__PURE__ */ jsx("div", { className: cn("mt-0.5 h-2 w-2 shrink-0 rounded-full", ps.dot) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary line-clamp-2", children: task.description }),
+    !compact && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: task.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded bg-surface-secondary px-1.5 text-[10px] font-medium text-text-tertiary", children: tag }, tag)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("rounded px-1.5 text-[10px] uppercase tracking-wider", ps.badge), children: task.priority }),
+      !compact && /* @__PURE__ */ jsx(Avatar, { className: "h-5 w-5 text-[10px]", children: /* @__PURE__ */ jsx(AvatarFallback, { children: task.assignee }) })
+    ] })
+  ] });
+  if (compact) return content;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx(KanbanHandle, { "aria-label": `Move ${task.title}` }),
+    content
+  ] });
+}
+var getTaskId = (task) => task.id;
+var getTaskLabel = (task) => task.title;
+var renderOverlay = (task) => /* @__PURE__ */ jsx(TaskCard, { task, compact: true });
+function KanbanDemoBlock({ className }) {
+  const [columns, setColumns] = useState(INITIAL_COLUMNS);
+  const [moveLog, setMoveLog] = useState([]);
+  function handleMove(next, meta) {
+    setColumns([...next]);
+    const entry = `${meta.item.title}: ${meta.fromColumnId} \u2192 ${meta.toColumnId} (pos ${meta.toIndex})`;
+    setMoveLog((prev) => [entry, ...prev].slice(0, 10));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Heading, { level: 1, size: "display", children: "Kanban Board" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-1 text-text-secondary", children: "Drag tasks between columns. Uses handle-only drag with keyboard support." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      KanbanBoard,
+      {
+        value: columns,
+        onValueChange: handleMove,
+        getItemId: getTaskId,
+        getItemLabel: getTaskLabel,
+        renderOverlay,
+        className: "pb-4",
+        children: columns.map((col) => {
+          const colMeta = COLUMN_META[col.id] ?? { label: col.id, color: "bg-accent" };
+          return /* @__PURE__ */ jsxs(
+            KanbanColumn,
+            {
+              id: col.id,
+              items: col.items,
+              "aria-label": colMeta.label,
+              className: "w-[280px] shrink-0",
+              children: [
+                /* @__PURE__ */ jsxs(KanbanColumnHeader, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: cn("h-2 w-2 rounded-full", colMeta.color) }),
+                    /* @__PURE__ */ jsx("span", { children: colMeta.label })
+                  ] }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs tabular-nums", children: col.items.length })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: col.items.map((task) => /* @__PURE__ */ jsx(KanbanItem, { value: task, children: /* @__PURE__ */ jsx(TaskCard, { task }) }, task.id)) }),
+                col.items.length === 0 && /* @__PURE__ */ jsx(Empty, { className: "h-24 p-4", children: /* @__PURE__ */ jsx(EmptyDescription, { className: "text-xs", children: "Drop tasks here" }) })
+              ]
+            },
+            col.id
+          );
+        })
+      }
+    ),
+    moveLog.length > 0 && /* @__PURE__ */ jsxs("div", { className: "glass-panel rounded-lg p-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-2", children: "Move Log" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1 font-mono text-xs text-text-secondary", children: moveLog.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-text-tertiary", children: [
+          moveLog.length - i,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: entry })
+      ] }, i)) })
+    ] })
+  ] });
+}
+
+export { KanbanDemoBlock };