@loykin/designkit 0.0.1-dev.0 → 0.0.1-dev.2

package/dist/index.cjs

@@ -23,7 +23,6 @@ var tooltip = require('@base-ui/react/tooltip');
 var slider = require('@base-ui/react/slider');
 var _switch = require('@base-ui/react/switch');
 var tabs = require('@base-ui/react/tabs');
-var gridkit = require('@loykin/gridkit');
 var zustand = require('zustand');
 
 function _interopNamespace(e) {
@@ -1987,517 +1986,6 @@ function TabsContent({ className, ...props }) {
     }
   );
 }
-
-// src/components/templates/definitions.ts
-var topBarOptions = [
-  {
-    key: "topBarShow",
-    label: "Top Bar",
-    type: "select",
-    choices: [
-      { value: "show", label: "Show" },
-      { value: "hide", label: "Hide" }
-    ],
-    defaultValue: "show"
-  },
-  {
-    key: "topBarVariant",
-    label: "Border",
-    type: "select",
-    choices: [
-      { value: "ghost", label: "None" },
-      { value: "default", label: "Line" }
-    ],
-    defaultValue: "ghost"
-  },
-  {
-    key: "topBarBg",
-    label: "Background",
-    type: "select",
-    choices: [
-      { value: "transparent", label: "Default" },
-      { value: "muted", label: "Muted" },
-      { value: "card", label: "Card" }
-    ],
-    defaultValue: "transparent"
-  }
-];
-var loginOptions = [
-  {
-    key: "loginLayout",
-    label: "Layout",
-    type: "select",
-    choices: [
-      { value: "centered", label: "Centered" },
-      { value: "split", label: "Split" }
-    ],
-    defaultValue: "centered"
-  },
-  {
-    key: "loginSide",
-    label: "Brand Side",
-    type: "select",
-    choices: [
-      { value: "left", label: "Left" },
-      { value: "right", label: "Right" }
-    ],
-    defaultValue: "left"
-  },
-  {
-    key: "loginCard",
-    label: "Card",
-    type: "select",
-    choices: [
-      { value: "card", label: "Card" },
-      { value: "plain", label: "None" }
-    ],
-    defaultValue: "card"
-  },
-  {
-    key: "loginBg",
-    label: "Background",
-    type: "select",
-    choices: [
-      { value: "default", label: "Muted" },
-      { value: "subtle", label: "Gradient" },
-      { value: "none", label: "None" }
-    ],
-    defaultValue: "default"
-  },
-  {
-    key: "loginCardWidth",
-    label: "Width",
-    type: "select",
-    choices: [
-      { value: "sm", label: "Narrow" },
-      { value: "md", label: "Medium" },
-      { value: "lg", label: "Wide" }
-    ],
-    defaultValue: "sm"
-  }
-];
-var TEMPLATE_DEFINITIONS = [
-  // ── DataGridView (nested under DataBodyTemplate) ─────────────────────────────
-  {
-    id: "table",
-    label: "Standard",
-    navigationSubgroupLabel: "Table",
-    group: "Table",
-    navigationGroup: "DataBodyTemplate",
-    layoutClassName: "layout-table",
-    exportComponent: "DataGridView",
-    exportKind: "data-grid",
-    preset: { radius: 0.125 },
-    options: topBarOptions,
-    preview: {
-      variant: "standard",
-      breadcrumb: "Data / Table",
-      title: "Users"
-    }
-  },
-  {
-    id: "table-infinity",
-    label: "Infinite Scroll",
-    group: "Table",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "table",
-    layoutClassName: "layout-table-infinity",
-    exportComponent: "DataGridView",
-    exportKind: "data-grid",
-    preset: { radius: 0.125 },
-    preview: {
-      variant: "infinity",
-      breadcrumb: "Data / Table / Infinite Scroll",
-      title: "Users",
-      description: "gridkit DataGridInfinity"
-    },
-    options: topBarOptions
-  },
-  {
-    id: "table-drag",
-    label: "Row Drag",
-    group: "Table",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "table",
-    layoutClassName: "layout-table-drag",
-    exportComponent: "DataGridView",
-    exportKind: "data-grid",
-    preset: { radius: 0.125 },
-    preview: {
-      variant: "drag",
-      breadcrumb: "Data / Table / Row Drag",
-      title: "Services",
-      description: "gridkit DataGridDrag"
-    },
-    options: topBarOptions
-  },
-  {
-    id: "table-card",
-    label: "Card Grid",
-    navigationSubgroupLabel: "Card",
-    group: "Table",
-    navigationGroup: "DataBodyTemplate",
-    layoutClassName: "layout-table-card",
-    exportComponent: "DataGridView",
-    exportKind: "data-grid-card",
-    preset: { radius: 0.375 },
-    preview: {
-      variant: "card",
-      breadcrumb: "Data / Table / Card Grid",
-      title: "User Cards",
-      description: "gridkit DataGridCard"
-    },
-    options: topBarOptions
-  },
-  {
-    id: "table-card-list",
-    label: "Card List",
-    group: "Table",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "table-card",
-    layoutClassName: "layout-table-card-list",
-    exportComponent: "DataGridView",
-    exportKind: "data-grid-card",
-    preset: { radius: 0.375 },
-    preview: {
-      variant: "card-list",
-      breadcrumb: "Data / Table / Card List",
-      title: "User Cards",
-      description: "gridkit DataGridCard list mode"
-    },
-    options: topBarOptions
-  },
-  // ── DataBodyTemplate ─────────────────────────────────────────────────────────
-  {
-    id: "databody",
-    label: "Standard",
-    navigationSubgroupLabel: "Data View",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    layoutClassName: "layout-databody",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "databody",
-    preset: { radius: 0.375 },
-    options: topBarOptions
-  },
-  {
-    id: "databody-detail",
-    label: "Detail",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "databody",
-    layoutClassName: "layout-databody-detail",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "databody",
-    preset: { radius: 0.375 },
-    options: topBarOptions
-  },
-  {
-    id: "databody-split",
-    label: "Split",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "databody",
-    layoutClassName: "layout-databody-split",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "databody",
-    preset: { radius: 0.375 },
-    options: topBarOptions
-  },
-  {
-    id: "tabbed",
-    label: "Tabbed",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "databody",
-    layoutClassName: "layout-tabbed",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "databody",
-    preset: { radius: 0.375 },
-    options: topBarOptions
-  },
-  {
-    id: "form",
-    label: "Form Horizontal",
-    navigationLabel: "Horizontal",
-    navigationSubgroupLabel: "Form",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    layoutClassName: "layout-form",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "databody",
-    preset: { radius: 0.5 },
-    options: topBarOptions
-  },
-  {
-    id: "form-stacked",
-    label: "Form Stacked",
-    navigationLabel: "Stacked",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "form",
-    layoutClassName: "layout-form-stacked",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "databody",
-    preset: { radius: 0.5 },
-    options: topBarOptions
-  },
-  {
-    id: "form-inline",
-    label: "Form Inline",
-    navigationLabel: "Inline",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    navigationParent: "form",
-    layoutClassName: "layout-form-inline",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "databody",
-    preset: { radius: 0.25 },
-    options: topBarOptions
-  },
-  {
-    id: "sectioned",
-    label: "Sectioned",
-    group: "Pages",
-    navigationGroup: "DataBodyTemplate",
-    layoutClassName: "layout-sectioned",
-    exportComponent: "DataBodyTemplate",
-    exportKind: "body-template",
-    preset: { radius: 0.5 },
-    options: topBarOptions
-  },
-  // ── Common ───────────────────────────────────────────────────────────────────
-  {
-    id: "typography",
-    label: "Typography",
-    navigationSubgroupLabel: "Typography",
-    group: "Design",
-    navigationGroup: "Common",
-    layoutClassName: "layout-typography",
-    exportComponent: "TypographyBodyTemplate",
-    exportKind: "body-template",
-    preset: { radius: 0.375 }
-  },
-  {
-    id: "colors",
-    label: "Colors",
-    navigationSubgroupLabel: "Colors",
-    group: "Design",
-    navigationGroup: "Common",
-    layoutClassName: "layout-colors",
-    exportComponent: "ColorsBodyTemplate",
-    exportKind: "body-template",
-    preset: { radius: 0.375 }
-  },
-  // ── FormWizardBodyTemplate ────────────────────────────────────────────────────
-  {
-    id: "form-wizard",
-    label: "Wizard",
-    group: "Pages",
-    navigationGroup: "FormWizardBodyTemplate",
-    layoutClassName: "layout-form-wizard",
-    exportComponent: "FormWizardBodyTemplate",
-    exportKind: "body-template",
-    preset: { radius: 0.5 },
-    options: topBarOptions
-  },
-  // ── LoginBodyTemplate ─────────────────────────────────────────────────────────
-  {
-    id: "login",
-    label: "Sign In",
-    navigationSubgroupLabel: "Auth",
-    group: "Auth",
-    navigationGroup: "LoginBodyTemplate",
-    layoutClassName: "layout-login",
-    exportComponent: "LoginBodyTemplate",
-    exportKind: "login",
-    preset: { radius: 0.5 },
-    options: loginOptions
-  },
-  {
-    id: "login-forgot",
-    label: "Forgot Password",
-    navigationLabel: "Forgot",
-    group: "Auth",
-    navigationGroup: "LoginBodyTemplate",
-    navigationParent: "login",
-    layoutClassName: "layout-login",
-    exportComponent: "LoginBodyTemplate",
-    exportKind: "login",
-    preset: { radius: 0.5 },
-    options: loginOptions
-  },
-  {
-    id: "login-reset",
-    label: "Reset Password",
-    navigationLabel: "Reset",
-    group: "Auth",
-    navigationGroup: "LoginBodyTemplate",
-    navigationParent: "login",
-    layoutClassName: "layout-login",
-    exportComponent: "LoginBodyTemplate",
-    exportKind: "login",
-    preset: { radius: 0.5 },
-    options: loginOptions
-  },
-  {
-    id: "login-otp",
-    label: "OTP Verification",
-    navigationLabel: "OTP",
-    group: "Auth",
-    navigationGroup: "LoginBodyTemplate",
-    navigationParent: "login",
-    layoutClassName: "layout-login",
-    exportComponent: "LoginBodyTemplate",
-    exportKind: "login",
-    preset: { radius: 0.5 },
-    options: loginOptions
-  }
-];
-function getTemplateDefinition(id) {
-  return TEMPLATE_DEFINITIONS.find((definition) => definition.id === id);
-}
-function createTemplateOverrides() {
-  return TEMPLATE_DEFINITIONS.reduce(
-    (acc, definition) => {
-      acc[definition.id] = { ...definition.preset };
-      return acc;
-    },
-    {}
-  );
-}
-function DataGridView({
-  data,
-  columns,
-  getRowId = (_row, index) => String(index),
-  variant = "standard",
-  tableHeight = "100%",
-  rowHeight = 36,
-  tableWidthMode = "fill-last",
-  enableSorting = true,
-  enableColumnFilters,
-  emptyMessage = "No rows found",
-  headerLeft: headerLeft3,
-  headerRight: headerRight3,
-  pagination,
-  footer,
-  infinity,
-  drag,
-  card
-}) {
-  const [orderedData, setOrderedData] = React2.useState(data);
-  React2.useEffect(() => {
-    setOrderedData(data);
-  }, [data]);
-  const dragColumnSize = drag?.dragColumnSize ?? 28;
-  const dragColumns = React2.useMemo(
-    () => [
-      {
-        id: "drag",
-        size: dragColumnSize,
-        minSize: dragColumnSize,
-        maxSize: dragColumnSize,
-        enableResizing: false,
-        enableSorting: false,
-        header: () => null,
-        cell: () => /* @__PURE__ */ jsxRuntime.jsx(gridkit.DragHandleCell, {}),
-        meta: { align: "center" }
-      },
-      ...columns
-    ],
-    [columns, dragColumnSize]
-  );
-  const handleRowReorder = (rows) => {
-    setOrderedData(rows);
-    drag?.onRowReorder?.(rows);
-  };
-  if (variant === "infinity") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      gridkit.DataGridInfinity,
-      {
-        data: infinity?.data ?? data,
-        columns,
-        getRowId,
-        tableHeight,
-        rowHeight,
-        enableSorting,
-        enableColumnFilters,
-        tableWidthMode,
-        headerLeft: headerLeft3,
-        headerRight: headerRight3,
-        hasNextPage: infinity?.hasNextPage ?? false,
-        isFetchingNextPage: infinity?.isFetchingNextPage ?? false,
-        fetchNextPage: infinity?.fetchNextPage ?? (() => void 0),
-        emptyMessage,
-        tableKey: infinity?.tableKey
-      }
-    );
-  }
-  if (variant === "drag") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      gridkit.DataGridDrag,
-      {
-        data: orderedData,
-        columns: dragColumns,
-        getRowId,
-        onRowReorder: handleRowReorder,
-        tableHeight,
-        rowHeight,
-        columnSizing: { drag: dragColumnSize },
-        tableWidthMode,
-        headerLeft: headerLeft3,
-        headerRight: headerRight3,
-        emptyMessage,
-        classNames: {
-          cell: "[&[data-col-id=drag]]:px-1",
-          headerCell: "[&[data-col-id=drag]]:px-1"
-        }
-      }
-    );
-  }
-  if (variant === "card" || variant === "card-list") {
-    if (!card?.renderCard) {
-      throw new Error("DataGridView card variants require card.renderCard.");
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      gridkit.DataGridCard,
-      {
-        data,
-        columns,
-        getRowId,
-        tableHeight,
-        rowHeight,
-        enableSorting,
-        enableColumnFilters,
-        tableWidthMode,
-        headerLeft: headerLeft3,
-        headerRight: headerRight3,
-        cardColumns: card?.cardColumns ?? (variant === "card-list" ? 1 : void 0),
-        minCardWidth: card?.minCardWidth ?? 220,
-        minColumns: card?.minColumns ?? (variant === "card-list" ? 1 : 2),
-        renderCard: card.renderCard
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    gridkit.DataGrid,
-    {
-      data,
-      columns,
-      getRowId,
-      tableHeight,
-      rowHeight,
-      enableSorting,
-      enableColumnFilters,
-      tableWidthMode,
-      headerLeft: headerLeft3,
-      headerRight: headerRight3,
-      pagination: pagination === false ? void 0 : pagination,
-      footer,
-      emptyMessage
-    }
-  );
-}
 function Root({ children, className, style }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2663,6 +2151,71 @@ var DataPage = Object.assign(Root, {
   GroupBody,
   Footer
 });
+var DashboardPanel = React2.forwardRef(function DashboardPanel2({
+  title,
+  description,
+  loading,
+  error,
+  transparent,
+  editable,
+  className,
+  style,
+  children,
+  headerRight
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "group flex h-full flex-col overflow-hidden",
+        transparent ? "" : "rounded-(--radius) border bg-card text-card-foreground",
+        editable && "ring-1 ring-border/60 ring-inset",
+        className
+      ),
+      style,
+      children: [
+        (title || headerRight || editable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 pl-3 pr-1.5 py-2", children: [
+          editable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 cursor-grab active:cursor-grabbing select-none text-muted-foreground/40 hover:text-muted-foreground/70 transition-colors -ml-1 px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripHorizontal, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-medium text-card-foreground", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: description })
+          ] }),
+          headerRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150", children: headerRight })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-h-0 p-3", children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-card/70 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }) }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error }) }),
+          !error && children
+        ] })
+      ]
+    }
+  );
+});
+function DashboardBodyTemplate({
+  theme,
+  className,
+  title,
+  description,
+  topBar,
+  toolbar,
+  variableBar,
+  children,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-dashboard", className), style: theme, children: [
+    topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
+    (title || toolbar) && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-(--dk-page-padding-y)", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-sm font-semibold truncate", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+      ] }),
+      toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 shrink-0", children: toolbar })
+    ] }) }),
+    variableBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 flex flex-wrap items-center gap-2 px-(--dk-page-padding-x) py-1.5", children: variableBar }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 min-h-0 overflow-auto px-[calc(var(--dk-page-padding-x)-0.5rem)] pt-0 pb-(--dk-page-padding-y)", contentClassName), children })
+  ] });
+}
 function DataBodyTab(_props) {
   return null;
 }
@@ -2941,437 +2494,297 @@ var DataBodyTemplate = Object.assign(Root2, {
   Row: DataBodyRow,
   Field: DataBodyField
 });
-function Breadcrumb({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
-    {
-      "aria-label": "breadcrumb",
-      "data-slot": "breadcrumb",
-      className: cn(className),
-      ...props
-    }
-  );
+function useIsNarrow() {
+  const [narrow, setNarrow] = React2.useState(false);
+  React2.useEffect(() => {
+    const mql = window.matchMedia("(max-width: 1023px)");
+    setNarrow(mql.matches);
+    const handler = (e) => setNarrow(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return narrow;
 }
-function BreadcrumbList({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "ol",
+function BrowseBodyTemplate({
+  theme,
+  className,
+  topBar,
+  title,
+  description,
+  actions,
+  sidebar,
+  sidebarTitle = "Filters",
+  sidebarWidth = "18rem",
+  toolbar,
+  footer,
+  contentClassName,
+  children
+}) {
+  const isNarrow = useIsNarrow();
+  const hasHeader = title || description || actions;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-browse", className), style: theme, children: [
+    topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
+    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, description }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: actions })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Content, { padding: "none", className: "flex flex-col overflow-hidden", children: [
+      (toolbar || isNarrow) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b px-(--dk-page-padding-x) py-2", children: [
+        isNarrow && /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            SheetTrigger,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", className: "shrink-0 gap-1.5" }),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+                sidebarTitle
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "flex flex-col gap-0 p-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { className: "shrink-0 border-b px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: sidebarTitle }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: sidebar }) })
+          ] })
+        ] }),
+        toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: toolbar })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
+        !isNarrow && /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            className: "shrink-0 overflow-hidden border-r",
+            style: { width: sidebarWidth },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-(--dk-page-padding-x) py-(--dk-page-padding-y)", children: sidebar }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0 flex-1 overflow-hidden px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
+              "[&_.dg-shell]:h-full [&_.dg-table-stack]:flex-1 [&_.dg-table-stack]:min-h-0",
+              "[&_.dg-card-container]:flex-1 [&_.dg-card-container]:min-h-0 [&_.dg-card-container]:overflow-auto",
+              contentClassName
+            ),
+            children
+          }
+        )
+      ] })
+    ] }),
+    footer && /* @__PURE__ */ jsxRuntime.jsx(DataPage.Footer, { children: footer })
+  ] });
+}
+function DetailBodyHeader({
+  eyebrow,
+  title,
+  description,
+  status,
+  actions,
+  compact,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Header, { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      eyebrow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("min-w-0 truncate font-semibold", compact ? "text-base" : "text-lg"), children: title }),
+        status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: status })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: actions })
+  ] });
+}
+function DetailBodyTab(_props) {
+  return null;
+}
+function isDetailBodyTab(node) {
+  return Boolean(node && typeof node === "object" && "type" in node && node.type === DetailBodyTab);
+}
+function DetailBodySection({
+  title,
+  description,
+  actions,
+  surface = "plain",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
     {
-      "data-slot": "breadcrumb-list",
       className: cn(
-        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        "min-h-0",
+        surface === "card" && "rounded-(--radius) border bg-card p-(--dk-panel-gap) text-card-foreground shadow-sm",
+        surface === "bordered" && "rounded-(--radius) border p-(--dk-panel-gap)",
         className
       ),
-      ...props
+      children: [
+        (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actions })
+        ] }),
+        children
+      ]
     }
   );
 }
-function BreadcrumbItem({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-item",
-      className: cn("inline-flex items-center gap-1", className),
-      ...props
-    }
-  );
+function renderChildren(nodes) {
+  return React2.Children.toArray(nodes).map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: child }, i));
 }
-function BreadcrumbLink({
+function DetailBodyTemplateRoot({
+  variant = "record",
+  theme,
   className,
-  render,
-  ...props
+  topBar,
+  header,
+  lead,
+  eyebrow,
+  title,
+  description,
+  status,
+  actions,
+  media,
+  aside,
+  summary,
+  stickyAside = true,
+  contentClassName,
+  mediaClassName,
+  asideClassName,
+  children
 }) {
-  return useRender.useRender({
-    defaultTagName: "a",
-    props: mergeProps.mergeProps(
+  const childArray = React2.useMemo(() => React2.Children.toArray(children), [children]);
+  const tabs = childArray.filter(isDetailBodyTab);
+  const hasTabs = tabs.length > 0;
+  const [activeTab, setActiveTab] = React2.useState(() => tabs[0]?.props.id ?? "");
+  const selectedTab = tabs.find((tab) => tab.props.id === activeTab) ?? tabs[0];
+  const summarySlot = summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 rounded-(--radius) border bg-card p-(--dk-panel-gap) text-card-foreground", children: summary }) : null;
+  const mediaSlot = media ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 overflow-hidden rounded-(--radius) border bg-card", mediaClassName), children: media }) : null;
+  const leadGridClass = variant === "media" ? "xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.65fr)]" : "xl:grid-cols-2";
+  const defaultHeader = eyebrow || title || description || status || actions ? /* @__PURE__ */ jsxRuntime.jsx(
+    DetailBodyHeader,
+    {
+      eyebrow,
+      title,
+      description,
+      status,
+      actions
+    }
+  ) : null;
+  const defaultLead = media || summary ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-(--dk-panel-gap)", leadGridClass), children: [
+    mediaSlot,
+    summarySlot
+  ] }) : null;
+  const body = hasTabs ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DataPage.Tabs, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+      DataPage.Tab,
       {
-        className: cn("transition-colors hover:text-foreground", className)
+        active: (selectedTab?.props.id ?? "") === tab.props.id,
+        count: tab.props.count,
+        disabled: tab.props.disabled,
+        onClick: () => setActiveTab(tab.props.id),
+        children: tab.props.label
       },
-      props
+      tab.props.id
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-(--dk-panel-gap)", children: selectedTab?.props.children })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-(--dk-panel-gap)", children: renderChildren(children) });
+  const leadSlot = lead ?? defaultLead;
+  const outsideAsideSlot = variant === "full" ? null : aside;
+  const insideAsideSlot = variant === "full" ? aside : null;
+  const hasRecordInspector = Boolean(leadSlot);
+  const hasFullLeadArea = Boolean(leadSlot || insideAsideSlot);
+  const layout = {
+    media: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      leadSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-(--dk-panel-gap)", children: leadSlot }),
+      body
+    ] }),
+    record: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid gap-(--dk-panel-gap)",
+          hasRecordInspector && "xl:grid-cols-[minmax(28rem,1fr)_minmax(14rem,18rem)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: body }),
+          hasRecordInspector && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-(--dk-panel-gap)", children: leadSlot })
+        ]
+      }
     ),
-    render,
-    state: {
-      slot: "breadcrumb-link"
-    }
-  });
-}
-function BreadcrumbPage({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "data-slot": "breadcrumb-page",
-      role: "link",
-      "aria-disabled": "true",
-      "aria-current": "page",
-      className: cn("font-normal text-foreground", className),
-      ...props
-    }
-  );
-}
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-separator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn("[&>svg]:size-3.5", className),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
-    }
-  );
-}
-function PageBreadcrumb({ items }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { className: "text-xs gap-1", children: items.map((item, i) => {
-    const isLast = i === items.length - 1;
-    const label = typeof item === "string" ? item : item.label;
-    const href = typeof item === "string" ? void 0 : item.href;
-    return /* @__PURE__ */ jsxRuntime.jsxs(React2__namespace.default.Fragment, { children: [
-      i > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: isLast ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { className: "text-xs", children: label }) : href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { href, className: "text-xs", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: label }) })
-    ] }, i);
-  }) }) });
-}
-function normalizeBreadcrumb(left) {
-  if (typeof left === "string") {
-    const items = left.split("/").map((s) => s.trim()).filter(Boolean);
-    return /* @__PURE__ */ jsxRuntime.jsx(PageBreadcrumb, { items });
-  }
-  return left;
-}
-var bgClassMap = {
-  muted: "bg-muted",
-  card: "bg-card",
-  transparent: ""
-};
-function buildTopBar(opts) {
-  if (opts.topBarShow === "hide") return void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    PageTopBar,
-    {
-      left: normalizeBreadcrumb(opts.left),
-      right: opts.right,
-      variant: opts.topBarVariant ?? "ghost",
-      className: bgClassMap[opts.topBarBg ?? "transparent"] ?? ""
-    }
-  );
-}
-function PageTopBar({
-  left,
-  right,
-  variant = "ghost",
-  height = "var(--dk-toolbar-height)",
-  className,
-  style,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex shrink-0 items-center justify-between gap-4 px-(--dk-page-padding-x)",
-        variant === "default" && "border-b",
-        className
+    full: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      hasFullLeadArea && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "mb-(--dk-panel-gap) grid gap-(--dk-panel-gap)",
+            insideAsideSlot && "xl:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]"
+          ),
+          children: [
+            leadSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-(--dk-panel-gap)", children: leadSlot }),
+            insideAsideSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 rounded-(--radius) border bg-card p-(--dk-panel-gap)", asideClassName), children: insideAsideSlot })
+          ]
+        }
       ),
-      style: { height, ...style },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center text-xs text-muted-foreground", children: normalizeBreadcrumb(left ?? children) }),
-        right && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: right })
-      ]
-    }
-  );
-}
-var users = [
-  {
-    id: "1",
-    name: "Sarah Kim",
-    email: "sarah@acme.com",
-    role: "Admin",
-    status: "active",
-    joined: "Jan 12, 2024"
-  },
-  {
-    id: "2",
-    name: "Marcus Lee",
-    email: "marcus@acme.com",
-    role: "Editor",
-    status: "active",
-    joined: "Feb 3, 2024"
-  },
-  {
-    id: "3",
-    name: "Ji-Yeon Park",
-    email: "jiyeon@acme.com",
-    role: "Viewer",
-    status: "inactive",
-    joined: "Mar 18, 2024"
-  },
-  {
-    id: "4",
-    name: "Alex Chen",
-    email: "alex@acme.com",
-    role: "Editor",
-    status: "pending",
-    joined: "Apr 7, 2024"
-  }
-];
-var statusVariant = { active: "default", pending: "secondary", inactive: "outline" };
-var userColumns = [
-  {
-    id: "name",
-    accessorKey: "name",
-    header: "Name",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: row.original.name })
-  },
-  {
-    id: "email",
-    accessorKey: "email",
-    header: "Email",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: row.original.email })
-  },
-  {
-    id: "role",
-    accessorKey: "role",
-    header: "Role",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-xs font-normal", children: row.original.role })
-  },
-  {
-    id: "status",
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant[row.original.status], className: "text-xs capitalize", children: row.original.status })
-  },
-  {
-    id: "joined",
-    accessorKey: "joined",
-    header: "Joined",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: row.original.joined })
-  }
-];
-var headerLeft = (table) => /* @__PURE__ */ jsxRuntime.jsx(gridkit.GlobalSearch, { table, placeholder: "Search..." });
-var headerRight = () => /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", className: "h-8 gap-1.5 text-xs", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-  "Add User"
-] });
-function UserTable() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    gridkit.DataGrid,
-    {
-      data: users,
-      columns: userColumns,
-      getRowId: (row) => row.id,
-      tableHeight: 420,
-      rowHeight: 36,
-      enableSorting: true,
-      tableWidthMode: "fill-last",
-      headerLeft,
-      headerRight,
-      pagination: { pageSize: 10 },
-      footer: (table) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-9 items-center justify-between px-1 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          users.length,
-          " results"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(gridkit.DataGridPaginationCompact, { table })
-      ] })
-    }
-  );
-}
-function UserCards() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    gridkit.DataGridCard,
-    {
-      data: users,
-      columns: userColumns,
-      getRowId: (row) => row.id,
-      tableHeight: 420,
-      rowHeight: 36,
-      enableSorting: true,
-      tableWidthMode: "fill-last",
-      headerLeft,
-      headerRight,
-      minCardWidth: 220,
-      minColumns: 2,
-      renderCard: (row) => /* @__PURE__ */ jsxRuntime.jsx(Card, { size: "sm", className: "h-full rounded-lg border border-border shadow-sm ring-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: row.original.name }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: row.original.email })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant[row.original.status], className: "text-xs capitalize", children: row.original.status })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 grid grid-cols-2 gap-3 text-xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Role" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 font-medium", children: row.original.role })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Joined" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 font-medium", children: row.original.joined })
-          ] })
-        ] })
-      ] }) })
-    }
-  );
-}
-var recentColumns = [
-  {
-    id: "name",
-    accessorKey: "name",
-    header: "Name",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: row.original.name })
-  },
-  {
-    id: "role",
-    accessorKey: "role",
-    header: "Role",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-xs font-normal", children: row.original.role })
-  },
-  {
-    id: "status",
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant[row.original.status], className: "text-xs capitalize", children: row.original.status })
-  },
-  {
-    id: "joined",
-    accessorKey: "joined",
-    header: "Joined",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: row.original.joined })
-  }
-];
-function OverviewContent() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DataBodyTemplate.Group,
-      {
-        layout: "horizontal",
-        title: "Workspace",
-        description: "Basic workspace information and plan details.",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Workspace name", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Acme Corp" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Plan", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-xs", children: "Pro" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Region", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "us-east-1" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "SSO", children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { defaultChecked: true }) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Group, { layout: "stacked", title: "Members", description: "Recently added members.", children: /* @__PURE__ */ jsxRuntime.jsx(
-      gridkit.DataGrid,
+      body
+    ] })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-detail", className), style: theme, "data-detail-variant": variant, children: [
+    topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
+    header ?? defaultHeader,
+    /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { padding: "none", className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        data: users,
-        columns: recentColumns,
-        getRowId: (row) => row.id,
-        tableHeight: 220,
-        rowHeight: 36,
-        tableWidthMode: "fill-last",
-        headerRight: () => /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", className: "h-8 gap-1.5 text-xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-          "Invite"
-        ] })
-      }
-    ) })
-  ] });
-}
-function CustomContent() {
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "rounded-lg border border-border ring-0", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "grid gap-3 p-4 md:grid-cols-3", children: ["Header", "Tabs", "Content"].map((label) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border bg-muted/30 p-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "ReactNode slot" })
-  ] }, label)) }) });
-}
-function DataBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DataBodyTemplate,
-    {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Design / Body Template" }),
-      title: "Body Template",
-      description: "Compound body shell with optional tabs and arbitrary content",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "overview", label: "Overview", children: /* @__PURE__ */ jsxRuntime.jsx(OverviewContent, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "table", label: "Table", count: users.length, children: /* @__PURE__ */ jsxRuntime.jsx(UserTable, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "cards", label: "Cards", count: users.length, children: /* @__PURE__ */ jsxRuntime.jsx(UserCards, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "custom", label: "Custom", children: /* @__PURE__ */ jsxRuntime.jsx(CustomContent, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "empty", label: "Empty", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            EmptyState,
-            {
-              icon: lucideReact.Users,
-              title: "No users yet",
-              description: "Add your first user to get started.",
-              action: { label: "Add User", onClick: () => {
-              } }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t" }),
+        className: cn(
+          "grid h-full min-h-0 grid-cols-1 overflow-hidden",
+          outsideAsideSlot && "lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]"
+        ),
+        children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            EmptyState,
+            "main",
             {
-              icon: lucideReact.Search,
-              title: "No results found",
-              description: "Try adjusting your search or filters.",
-              action: { label: "Clear filters", variant: "ghost", onClick: () => {
-              } }
+              className: cn(
+                "min-h-0 overflow-auto px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
+                contentClassName
+              ),
+              children: layout[variant]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            EmptyState,
+          outsideAsideSlot && /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("min-h-0 border-t bg-background lg:border-l lg:border-t-0", asideClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              icon: lucideReact.RefreshCw,
-              title: "Something went wrong",
-              description: "Failed to load data. Please try again.",
-              action: { label: "Retry", onClick: () => {
-              } }
+              className: cn(
+                "px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
+                stickyAside && "lg:sticky lg:top-0"
+              ),
+              children: outsideAsideSlot
             }
-          )
-        ] }) })
-      ]
-    }
-  );
-}
-function buildDataBodyTemplateCode({ themeProp, layoutClassName }) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      title="Page Title"`,
-    `    >`,
-    `      <DataBodyTemplate.Tab id="table" label="Table">`,
-    `        {/* table content */}`,
-    `      </DataBodyTemplate.Tab>`,
-    ``,
-    `      <DataBodyTemplate.Tab id="split" label="Split">`,
-    `        <DataBodyTemplate.Group layout="split">`,
-    `          <aside>{/* list content */}</aside>`,
-    `          <section>{/* detail content */}</section>`,
-    `        </DataBodyTemplate.Group>`,
-    `      </DataBodyTemplate.Tab>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
+          ) })
+        ]
+      }
+    ) })
+  ] });
 }
+var DetailBodyTemplate = Object.assign(DetailBodyTemplateRoot, {
+  Header: DetailBodyHeader,
+  Tab: DetailBodyTab,
+  Section: DetailBodySection
+});
 function FormWizardBodyTemplate({
   theme,
   title,
   topBar,
   variant = "plain",
-  steps: steps2,
+  steps,
   activeStep,
   onNext,
   onBack,
   onFinish
 }) {
-  const current = steps2[activeStep];
-  const isLast = activeStep === steps2.length - 1;
+  const current = steps[activeStep];
+  const isLast = activeStep === steps.length - 1;
   function handleStepSubmit(e) {
     e.preventDefault();
     if (isLast) onFinish?.();
@@ -3380,7 +2793,7 @@ function FormWizardBodyTemplate({
   return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: "layout-form-wizard", style: theme, children: [
     topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
     /* @__PURE__ */ jsxRuntime.jsx(DataPage.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-(--dk-page-padding-x) pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: steps2.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(React2.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-(--dk-page-padding-x) pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(React2.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -3444,210 +2857,13 @@ function FormWizardBodyTemplate({
           "Step ",
           activeStep + 1,
           " of ",
-          steps2.length
+          steps.length
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", form: current?.key, size: "sm", className: "h-8 text-xs", children: isLast ? "Finish" : "Continue" })
       ] })
     ] }) })
   ] });
 }
-var steps = [
-  {
-    key: "account",
-    title: "Your Details",
-    description: "Create your account credentials.",
-    content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-first-name", className: "text-xs", children: "First Name" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "wiz-first-name", defaultValue: "Sarah", className: "h-8 text-sm" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-last-name", className: "text-xs", children: "Last Name" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "wiz-last-name", defaultValue: "Kim", className: "h-8 text-sm" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-email", className: "text-xs", children: "Work Email" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "wiz-email", type: "email", defaultValue: "sarah@acme.com", className: "h-8 text-sm" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-password", className: "text-xs", children: "Password" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "wiz-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-8 text-sm" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "At least 8 characters." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-confirm-password", className: "text-xs", children: "Confirm Password" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "wiz-confirm-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-8 text-sm" })
-      ] })
-    ] })
-  },
-  {
-    key: "role",
-    title: "Your Role",
-    description: "Tell us about yourself so we can tailor your experience.",
-    content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-job-title", className: "text-xs", children: "Job Title" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "wiz-job-title", defaultValue: "Senior Frontend Engineer", className: "h-8 text-sm" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-department", className: "text-xs", children: "Department" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "engineering", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "engineering", children: "Engineering" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "design", children: "Design" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "product", children: "Product" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "marketing", children: "Marketing" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "ops", children: "Operations" })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "wiz-team-size", className: "text-xs", children: "Team Size" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "11-50", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "wiz-team-size", className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "1-10", children: "1\u201310" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "11-50", children: "11\u201350" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "51-200", children: "51\u2013200" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "200+", children: "200+" })
-          ] })
-        ] })
-      ] })
-    ] })
-  },
-  {
-    key: "preferences",
-    title: "Preferences",
-    description: "Configure your defaults. You can change these anytime.",
-    content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-xs", children: "Timezone" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "asia-seoul", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "asia-seoul", children: "Asia / Seoul" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "us-eastern", children: "US / Eastern" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "us-pacific", children: "US / Pacific" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "europe-london", children: "Europe / London" })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-xs", children: "Date Format" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "ymd", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "ymd", children: "YYYY-MM-DD" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "mdy", children: "MM/DD/YYYY" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "dmy", children: "DD/MM/YYYY" })
-            ] })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 pt-1", children: [
-        { label: "Email notifications", desc: "Get notified of important activity.", on: true },
-        { label: "Weekly digest", desc: "A weekly summary email every Monday.", on: false },
-        { label: "Browser push", desc: "Real-time desktop notifications.", on: true }
-      ].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: item.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: item.desc })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Switch, { defaultChecked: item.on })
-      ] }, item.label)) })
-    ] })
-  },
-  {
-    key: "review",
-    title: "Review & Confirm",
-    description: "Check your details before creating the account.",
-    content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border divide-y", children: [
-        { label: "Name", value: "Sarah Kim" },
-        { label: "Email", value: "sarah@acme.com" },
-        { label: "Department", value: "Engineering" },
-        { label: "Timezone", value: "Asia / Seoul" }
-      ].map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground w-28 shrink-0", children: row.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium flex-1", children: row.value }),
-        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-[10px] h-5", children: "Edit" })
-      ] }, row.label)) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5 pt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { id: "terms", className: "mt-0.5" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Label,
-          {
-            htmlFor: "terms",
-            className: "text-xs text-muted-foreground leading-relaxed cursor-pointer",
-            children: [
-              "I agree to the",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground underline underline-offset-2", children: "Terms of Service" }),
-              " ",
-              "and ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground underline underline-offset-2", children: "Privacy Policy" }),
-              "."
-            ]
-          }
-        )
-      ] })
-    ] })
-  }
-];
-function FormWizardBodyTemplateDemo({
-  theme,
-  variant,
-  topBarShow,
-  topBarVariant,
-  topBarBg
-}) {
-  const [activeStep, setActiveStep] = React2.useState(0);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    FormWizardBodyTemplate,
-    {
-      theme,
-      variant,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Pages / Form / Wizard" }),
-      title: "Create Account",
-      steps,
-      activeStep,
-      onNext: () => setActiveStep((s) => Math.min(s + 1, steps.length - 1)),
-      onBack: () => setActiveStep((s) => Math.max(s - 1, 0)),
-      onFinish: () => setActiveStep(0)
-    }
-  );
-}
-function buildFormWizardBodyTemplateCode({ themeProp }) {
-  return [
-    `import { useState } from 'react'`,
-    `import { FormWizardBodyTemplate, type FormWizardStep } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `const steps: FormWizardStep[] = [`,
-    `  { key: 'info',   title: 'Basic Info',    content: <div>{/* step 1 */}</div> },`,
-    `  { key: 'config', title: 'Configuration', content: <div>{/* step 2 */}</div> },`,
-    `  { key: 'review', title: 'Review',         content: <div>{/* step 3 */}</div> },`,
-    `]`,
-    "",
-    `export function MyPage() {`,
-    `  const [step, setStep] = useState(0)`,
-    `  return (`,
-    `    <FormWizardBodyTemplate${themeProp}`,
-    `      title="Setup Wizard"`,
-    `      steps={steps}`,
-    `      activeStep={step}`,
-    `      onNext={() => setStep((s) => Math.min(s + 1, steps.length - 1))}`,
-    `      onBack={() => setStep((s) => Math.max(s - 1, 0))}`,
-    `      onFinish={() => { /* handle finish */ }}`,
-    `    />`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
 var scaleRows = [
   { label: "Page title", className: "text-xl font-semibold", sample: "Customer Operations" },
   { label: "Section title", className: "text-base font-medium", sample: "Service Health" },
@@ -3736,7 +2952,7 @@ var useThemeStore = zustand.create((set) => ({
     density: "default",
     darkMode: false
   },
-  overrides: createTemplateOverrides(),
+  overrides: {},
   activeShell: "sidebar",
   activeTemplate: "table",
   setGlobal: (patch) => set((s) => ({ global: { ...s.global, ...patch } })),
@@ -4029,1490 +3245,149 @@ function LoginBodyTemplate({
     }
   );
 }
-var demoData = [
-  {
-    id: "1",
-    name: "Sarah Kim",
-    email: "sarah@acme.com",
-    role: "Admin",
-    status: "active",
-    joined: "Jan 12, 2024"
-  },
-  {
-    id: "2",
-    name: "Marcus Lee",
-    email: "marcus@acme.com",
-    role: "Editor",
-    status: "active",
-    joined: "Feb 3, 2024"
-  },
-  {
-    id: "3",
-    name: "Ji-Yeon Park",
-    email: "jiyeon@acme.com",
-    role: "Viewer",
-    status: "inactive",
-    joined: "Mar 18, 2024"
-  },
-  {
-    id: "4",
-    name: "Alex Chen",
-    email: "alex@acme.com",
-    role: "Editor",
-    status: "active",
-    joined: "Apr 7, 2024"
-  },
-  {
-    id: "5",
-    name: "Dana White",
-    email: "dana@acme.com",
-    role: "Viewer",
-    status: "pending",
-    joined: "Apr 29, 2024"
-  },
-  {
-    id: "6",
-    name: "Leo Torres",
-    email: "leo@acme.com",
-    role: "Admin",
-    status: "inactive",
-    joined: "May 1, 2024"
-  },
-  {
-    id: "7",
-    name: "Mina Seo",
-    email: "mina@acme.com",
-    role: "Editor",
-    status: "active",
-    joined: "May 2, 2024"
-  },
-  {
-    id: "8",
-    name: "Ryan Patel",
-    email: "ryan@acme.com",
-    role: "Viewer",
-    status: "active",
-    joined: "May 15, 2024"
-  },
-  {
-    id: "9",
-    name: "Yuna Choi",
-    email: "yuna@acme.com",
-    role: "Editor",
-    status: "pending",
-    joined: "Jun 3, 2024"
-  },
-  {
-    id: "10",
-    name: "Tom Fischer",
-    email: "tom@acme.com",
-    role: "Viewer",
-    status: "active",
-    joined: "Jun 20, 2024"
-  }
-];
-var demoInfiniteData = Array.from({ length: 120 }, (_, index) => {
-  const source = demoData[index % demoData.length];
-  const id = String(index + 1);
-  return {
-    ...source,
-    id,
-    name: `${source.name} ${id}`,
-    email: source.email.replace("@", `+${id}@`)
-  };
-});
-var statusVariant2 = { active: "default", pending: "secondary", inactive: "outline" };
-var demoColumns = [
-  {
-    id: "name",
-    accessorKey: "name",
-    header: "Name",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: row.original.name })
-  },
-  {
-    id: "email",
-    accessorKey: "email",
-    header: "Email",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: row.original.email })
-  },
-  {
-    id: "role",
-    accessorKey: "role",
-    header: "Role",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-xs font-normal", children: row.original.role })
-  },
-  {
-    id: "status",
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant2[row.original.status], className: "text-xs capitalize", children: row.original.status })
-  },
-  {
-    id: "joined",
-    accessorKey: "joined",
-    header: "Joined",
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: row.original.joined })
-  }
-];
-var headerLeft2 = (table) => /* @__PURE__ */ jsxRuntime.jsx(gridkit.GlobalSearch, { table, placeholder: "Search..." });
-var headerRight2 = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-  /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5" }),
-    "Export"
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", className: "h-8 gap-1.5 text-xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-    "Add User"
-  ] })
-] });
-function renderDemoCard(variant) {
-  return (row) => {
-    const user = row.original;
-    if (variant === "card-list") {
-      return /* @__PURE__ */ jsxRuntime.jsx(Card, { size: "sm", className: "rounded-lg border border-border shadow-sm ring-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex items-center justify-between gap-4 py-2.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: user.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-4 text-xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: user.role }),
-          /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant2[user.status], className: "text-xs capitalize", children: user.status }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-20 text-right text-muted-foreground", children: user.joined })
-        ] })
-      ] }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { size: "sm", className: "h-full rounded-lg border border-border shadow-sm ring-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "py-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: user.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant2[user.status], className: "text-xs capitalize", children: user.status })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 grid grid-cols-2 gap-3 text-xs", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Role" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 font-medium", children: user.role })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Joined" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 font-medium", children: user.joined })
-        ] })
-      ] })
-    ] }) });
-  };
-}
-function getDefaultLayoutClassName(variant) {
-  return variant === "standard" ? "layout-table" : `layout-table-${variant}`;
-}
-function DataGridTemplateDemo({
-  theme,
-  variant = "standard",
-  layoutClassName = getDefaultLayoutClassName(variant),
-  topBar,
-  title = "Users",
-  description,
-  topBarShow,
-  topBarVariant,
-  topBarBg
-}) {
-  const resolvedTopBar = topBarShow !== void 0 || topBarVariant !== void 0 || topBarBg !== void 0 ? buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Data / Table" }) : topBar ?? /* @__PURE__ */ jsxRuntime.jsx(PageTopBar, { left: "Data / Table" });
-  const [visibleCount, setVisibleCount] = React2.useState(40);
-  const [isFetching, setIsFetching] = React2.useState(false);
-  const visibleData = demoInfiniteData.slice(0, visibleCount);
-  const hasNextPage = visibleCount < demoInfiniteData.length;
-  React2.useEffect(() => {
-    setVisibleCount(40);
-  }, [variant]);
-  const fetchNextPage = () => {
-    if (isFetching || !hasNextPage) return;
-    setIsFetching(true);
-    window.setTimeout(() => {
-      setVisibleCount((count) => Math.min(count + 30, demoInfiniteData.length));
-      setIsFetching(false);
-    }, 250);
-  };
+function Breadcrumb({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DataBodyTemplate,
-    {
-      theme: { "--dg-card-padding": "0px", ...theme },
-      className: layoutClassName,
-      topBar: resolvedTopBar,
-      title,
-      description,
-      contentClassName: variant === "infinity" ? "pb-0" : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Body, { className: "[&_.dg-shell]:h-full [&_.dg-table-wrapper]:min-h-0 [&_.dg-table-wrapper]:flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-        DataGridView,
-        {
-          data: variant === "infinity" ? visibleData : demoData,
-          columns: demoColumns,
-          getRowId: (row) => row.id,
-          variant,
-          enableColumnFilters: variant === "infinity" || variant === "card" || variant === "card-list",
-          headerLeft: headerLeft2,
-          headerRight: headerRight2,
-          pagination: { pageSize: 10 },
-          footer: (table) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-9 items-center justify-between px-1 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              demoData.length,
-              " results"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(gridkit.DataGridPaginationCompact, { table })
-          ] }),
-          infinity: {
-            data: visibleData,
-            hasNextPage,
-            isFetchingNextPage: isFetching,
-            fetchNextPage,
-            tableKey: "table-infinity-template"
-          },
-          card: { renderCard: renderDemoCard(variant) }
-        }
-      ) })
-    }
-  );
-}
-function buildDataGridTemplateCode({
-  definition,
-  themeProp,
-  layoutClassName
-}) {
-  const variant = definition.preview?.variant;
-  const variantProp = variant && variant !== "standard" ? `
-        variant="${variant}"` : "";
-  const cN = "className";
-  const cardRenderCode = definition.exportKind === "data-grid-card" ? [
-    "",
-    `function renderCard(row: { original: User }) {`,
-    `  const user = row.original`,
-    `  return (`,
-    `    <div ${cN}="rounded-lg border bg-card p-3 text-card-foreground">`,
-    `      <p ${cN}="text-sm font-medium">{user.name}</p>`,
-    `      <p ${cN}="text-xs text-muted-foreground">{user.email}</p>`,
-    `    </div>`,
-    `  )`,
-    `}`
-  ].join("\n") : "";
-  const cardProp = definition.exportKind === "data-grid-card" ? `
-        card={{ renderCard }}` : "";
-  return [
-    `import { DataBodyTemplate, DataGridView, PageTopBar, type DataGridColumnDef } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `type User = Record<string, unknown> & { id: string; name: string; email: string }`,
-    ``,
-    `const data: User[] = []`,
-    `const columns: DataGridColumnDef<User>[] = [`,
-    `  { id: 'name', accessorKey: 'name', header: 'Name' },`,
-    `  { id: 'email', accessorKey: 'email', header: 'Email' },`,
-    `]`,
-    cardRenderCode,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      topBar={<PageTopBar left="Data / Users" />}`,
-    `      title="Users"`,
-    `    >`,
-    `      <DataBodyTemplate.Body>`,
-    `        <DataGridView${variantProp}`,
-    `          data={data}`,
-    `          columns={columns}`,
-    `          getRowId={(row) => row.id}${cardProp}`,
-    `          tableHeight={420}`,
-    `        />`,
-    `      </DataBodyTemplate.Body>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].filter(Boolean).join("\n");
-}
-function DetailBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DataBodyTemplate,
+    "nav",
     {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Users / Sarah Kim" }),
-      title: "Sarah Kim",
-      description: "sarah@acme.com",
-      actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", className: "h-8 text-xs", children: "Delete" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", className: "h-8 text-xs", children: "Edit" })
-      ] }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(DataBodyTemplate.Group, { layout: "inline", title: "Identity", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Full name", children: "Sarah Kim" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Email", children: "sarah@acme.com" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-xs font-normal", children: "Admin" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Status", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "text-xs capitalize", children: "Active" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Joined", children: "Jan 12, 2024" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DataBodyTemplate.Group, { layout: "inline", title: "Account", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Plan", children: "Business" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Seats used", children: "12 / 20" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Billing cycle", children: "Monthly" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Next renewal", children: "Jun 1, 2025" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Group, { layout: "inline", title: "Danger zone", danger: true, children: /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Field, { label: "Deactivate account", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            className: "h-7 text-xs text-destructive hover:text-destructive",
-            children: "Deactivate"
-          }
-        ) }) })
-      ]
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      className: cn(className),
+      ...props
     }
   );
 }
-function buildDetailBodyTemplateCode({ themeProp, layoutClassName }) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      breadcrumb="Users / Detail"`,
-    `      title="Sarah Kim"`,
-    `      actions={<button>Edit</button>}`,
-    `    >`,
-    `      <DataBodyTemplate.Group layout="inline" title="Identity">`,
-    `        <DataBodyTemplate.Field label="Name">Sarah Kim</DataBodyTemplate.Field>`,
-    `        <DataBodyTemplate.Field label="Email">sarah@acme.com</DataBodyTemplate.Field>`,
-    `      </DataBodyTemplate.Group>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-var users2 = [
-  { id: "1", name: "Sarah Kim", email: "sarah@acme.com", role: "Admin", status: "active" },
-  { id: "2", name: "Marcus Lee", email: "marcus@acme.com", role: "Editor", status: "active" },
-  { id: "3", name: "Ji-Yeon Park", email: "jiyeon@acme.com", role: "Viewer", status: "inactive" },
-  { id: "4", name: "Alex Chen", email: "alex@acme.com", role: "Editor", status: "pending" }
-];
-var statusVariant3 = { active: "default", pending: "secondary", inactive: "outline" };
-function SplitBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
-  const [active, setActive] = React2.useState(users2[0]);
+function BreadcrumbList({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DataBodyTemplate,
-    {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Users" }),
-      title: "Users",
-      actions: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", className: "h-8 text-xs", children: "Add User" }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(DataBodyTemplate.Group, { layout: "split", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5 p-2", children: users2.map((u) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setActive(u),
-            className: [
-              "block w-full rounded-lg px-3 py-2 text-left transition-colors",
-              u.id === active.id ? "bg-accent text-accent-foreground" : "hover:bg-muted"
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm font-medium", children: u.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-muted-foreground", children: u.email })
-            ]
-          },
-          u.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 p-(--dk-panel-gap)", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold", children: active.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: active.email })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant3[active.status], className: "text-xs capitalize", children: active.status })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border p-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Role" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm font-medium", children: active.role })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border p-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Status" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm font-medium capitalize", children: active.status })
-            ] })
-          ] })
-        ] })
-      ] })
-    }
-  );
-}
-function buildSplitBodyTemplateCode({ themeProp, layoutClassName }) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      title="Users"`,
-    `    >`,
-    `      <DataBodyTemplate.Group layout="split">`,
-    `        <aside>{/* list */}</aside>`,
-    `        <section>{/* detail */}</section>`,
-    `      </DataBodyTemplate.Group>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-var issues = [
-  {
-    id: "INC-001",
-    title: "API gateway returning 502 on /auth endpoints",
-    status: "open",
-    priority: "critical",
-    assignee: "Sarah K.",
-    created: "2h ago"
-  },
-  {
-    id: "INC-002",
-    title: "Memory leak in data-processor worker threads",
-    status: "in-progress",
-    priority: "high",
-    assignee: "Marcus L.",
-    created: "5h ago"
-  },
-  {
-    id: "INC-003",
-    title: "Dashboard charts not rendering in Safari 17",
-    status: "open",
-    priority: "medium",
-    assignee: "Ji-Yeon P.",
-    created: "1d ago"
-  },
-  {
-    id: "INC-004",
-    title: "Slow query on users table (>3s)",
-    status: "resolved",
-    priority: "high",
-    assignee: "Alex C.",
-    created: "2d ago"
-  },
-  {
-    id: "INC-005",
-    title: "Email notifications not sent for new signups",
-    status: "in-progress",
-    priority: "medium",
-    assignee: "Dana W.",
-    created: "3d ago"
-  },
-  {
-    id: "INC-006",
-    title: "CORS error on POST /api/v2/upload from mobile",
-    status: "open",
-    priority: "high",
-    assignee: "Leo T.",
-    created: "4d ago"
-  },
-  {
-    id: "INC-007",
-    title: "Cron expression parsing failure on scheduler",
-    status: "closed",
-    priority: "low",
-    assignee: "Mina S.",
-    created: "1w ago"
-  }
-];
-var statusIcon = {
-  open: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3.5 w-3.5 text-destructive" }),
-  "in-progress": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-yellow-500" }),
-  resolved: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3.5 w-3.5 text-primary" }),
-  closed: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-3.5 w-3.5 text-muted-foreground" })
-};
-var priorityVariant = {
-  critical: "destructive",
-  high: "default",
-  medium: "secondary",
-  low: "outline"
-};
-function IssueTable({ rows }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-24", children: "ID" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Title" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-24", children: "Priority" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-28", children: "Assignee" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-24", children: "Created" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-16" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: rows.map((issue) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "cursor-pointer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-mono text-xs text-muted-foreground", children: issue.id }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        statusIcon[issue.status],
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: issue.title })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: priorityVariant[issue.priority], className: "text-xs capitalize", children: issue.priority }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-xs text-muted-foreground", children: issue.assignee }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "text-xs text-muted-foreground", children: issue.created }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs", children: "View" }) })
-    ] }, issue.id)) })
-  ] });
-}
-var counts = {
-  open: issues.filter((i) => i.status === "open").length,
-  "in-progress": issues.filter((i) => i.status === "in-progress").length,
-  resolved: issues.filter((i) => i.status === "resolved").length,
-  closed: issues.filter((i) => i.status === "closed").length
-};
-function TabbedBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DataBodyTemplate,
-    {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Pages / Tabbed" }),
-      title: "Incidents",
-      description: "Incident queue grouped by status",
-      toolbarLeft: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Search\u2026", className: "pl-8 h-8 w-52 text-xs" })
-      ] }),
-      toolbarRight: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", className: "h-8 gap-1.5 text-xs", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-        "New Incident"
-      ] }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Summary, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-(--dk-panel-gap)", children: [
-          { label: "Open", count: counts.open, Icon: lucideReact.AlertCircle, cls: "text-destructive" },
-          {
-            label: "In Progress",
-            count: counts["in-progress"],
-            Icon: lucideReact.Clock,
-            cls: "text-yellow-500"
-          },
-          {
-            label: "Resolved",
-            count: counts.resolved,
-            Icon: lucideReact.CheckCircle2,
-            cls: "text-primary"
-          },
-          {
-            label: "Closed",
-            count: counts.closed,
-            Icon: lucideReact.XCircle,
-            cls: "text-muted-foreground"
-          }
-        ].map(({ label, count, Icon, cls }) => /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex items-center gap-[calc(var(--dk-panel-gap)*0.75)] p-[calc(var(--dk-panel-gap)*0.75)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: `h-5 w-5 ${cls}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-bold tabular-nums", children: count }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: label })
-          ] })
-        ] }) }, label)) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "all", label: "All", count: issues.length, children: /* @__PURE__ */ jsxRuntime.jsx(IssueTable, { rows: issues }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "open", label: "Open", count: counts.open, children: /* @__PURE__ */ jsxRuntime.jsx(IssueTable, { rows: issues.filter((i) => i.status === "open") }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "in-progress", label: "In Progress", count: counts["in-progress"], children: /* @__PURE__ */ jsxRuntime.jsx(IssueTable, { rows: issues.filter((i) => i.status === "in-progress") }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Tab, { id: "resolved", label: "Resolved", count: counts.resolved, children: /* @__PURE__ */ jsxRuntime.jsx(IssueTable, { rows: issues.filter((i) => i.status === "resolved") }) })
-      ]
-    }
-  );
-}
-function buildTabbedBodyTemplateCode({ themeProp, layoutClassName }) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      title="Incidents"`,
-    `    >`,
-    `      <DataBodyTemplate.Summary>`,
-    `        {/* summary content */}`,
-    `      </DataBodyTemplate.Summary>`,
-    ``,
-    `      <DataBodyTemplate.Tab id="all" label="All">`,
-    `        {/* tab content */}`,
-    `      </DataBodyTemplate.Tab>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function FormBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DataBodyTemplate,
-    {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Pages / Form" }),
-      title: "Account Settings",
-      description: "Manage your account preferences and security.",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "horizontal",
-            title: "Profile",
-            description: "Your public-facing name and contact info.",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", className: "text-xs", children: "First Name" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "first-name", defaultValue: "Sarah", className: "h-8 text-sm" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", className: "text-xs", children: "Last Name" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "last-name", defaultValue: "Kim", className: "h-8 text-sm" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "profile-email", className: "text-xs", children: "Email" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "profile-email", type: "email", defaultValue: "sarah@acme.com", className: "h-8 text-sm" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "profile-role", className: "text-xs", children: "Role" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "admin", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "profile-role", className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "admin", children: "Admin" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "editor", children: "Editor" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "viewer", children: "Viewer" })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "profile-bio", className: "text-xs", children: "Bio" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "textarea",
-                  {
-                    id: "profile-bio",
-                    className: "w-full h-20 rounded-(--radius) border border-input bg-background px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring",
-                    defaultValue: "Frontend engineer focused on design systems."
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", children: "Save Profile" }) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "horizontal",
-            title: "Notifications",
-            description: "Choose when and how you get notified.",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y", children: [
-              { label: "Comments on your posts", sub: "When someone replies to a thread", on: true },
-              { label: "Mentions", sub: "When someone @mentions you", on: true },
-              { label: "Weekly digest", sub: "A weekly summary of activity", on: false },
-              { label: "Security alerts", sub: "Login from new device", on: true },
-              { label: "Product updates", sub: "New features and improvements", on: false }
-            ].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: item.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: item.sub })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Switch, { defaultChecked: item.on })
-            ] }, item.label)) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "horizontal",
-            title: "Security",
-            description: "Password and authentication settings.",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), className: "space-y-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "current-password", className: "text-xs", children: "Current Password" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "current-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-8 text-sm" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "new-password", className: "text-xs", children: "New Password" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "new-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-8 text-sm" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "confirm-password", className: "text-xs", children: "Confirm" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "confirm-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-8 text-sm" })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", children: "Update Password" }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 rounded-(--radius) border", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Two-Factor Authentication" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Require OTP on every login" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-xs", children: "Disabled" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", className: "h-8 text-xs", children: "Enable" })
-                ] })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "horizontal",
-            title: "Danger Zone",
-            description: "Irreversible actions. Proceed with caution.",
-            danger: true,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 rounded-(--radius) border border-destructive/40 bg-destructive/5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Delete Account" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Permanently delete your account and all data." })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "h-8 text-xs", children: "Delete Account" })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-function buildFormBodyTemplateCode({ themeProp, layoutClassName }) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      title="Account Settings"`,
-    `    >`,
-    `      <DataBodyTemplate.Group layout="horizontal" title="Profile">`,
-    `        <form onSubmit={handleSubmit}>`,
-    `          {/* form fields */}`,
-    `          <button type="submit">Save Profile</button>`,
-    `        </form>`,
-    `      </DataBodyTemplate.Group>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function FormStackedBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DataBodyTemplate,
+    "ol",
     {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Pages / Form / Stacked" }),
-      title: "Settings",
-      description: "Manage your account and preferences.",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "stacked",
-            title: "Profile",
-            description: "How you appear to others on the platform.",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), className: "space-y-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "display-name", className: "text-xs", children: "Display Name" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "display-name", defaultValue: "Sarah Kim", className: "h-8 text-sm" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "stacked-email", className: "text-xs", children: "Email" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "stacked-email", type: "email", defaultValue: "sarah@acme.com", className: "h-8 text-sm", disabled: true }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Contact support to change your email address." })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "stacked-bio", className: "text-xs", children: "Bio" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "textarea",
-                  {
-                    id: "stacked-bio",
-                    className: "w-full h-20 resize-none rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
-                    defaultValue: "Frontend engineer focused on design systems."
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", children: "Save Profile" }) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "stacked",
-            title: "Appearance",
-            description: "Customize how the interface looks for you.",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), className: "space-y-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "theme-select", className: "text-xs", children: "Theme" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "system", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "theme-select", className: "h-8 text-sm w-44", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "system", children: "System" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "light", children: "Light" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "dark", children: "Dark" })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "language-select", className: "text-xs", children: "Language" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "en", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: "language-select", className: "h-8 text-sm w-44", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "en", children: "English" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "ko", children: "\uD55C\uAD6D\uC5B4" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "ja", children: "\u65E5\u672C\u8A9E" })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Compact mode" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Reduce spacing across the interface." })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(Switch, {})
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", children: "Save Appearance" }) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "stacked",
-            title: "Privacy & Data",
-            description: "Manage how your data is collected and used.",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: [
-              { label: "Usage analytics", desc: "Share anonymous usage data to improve the product.", on: true },
-              { label: "Crash reports", desc: "Automatically send crash logs to our team.", on: true },
-              { label: "Marketing emails", desc: "Receive updates on new features and promotions.", on: false }
-            ].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: item.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: item.desc })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Switch, { defaultChecked: item.on })
-            ] }, item.label)) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "stacked",
-            title: "Danger Zone",
-            description: "Irreversible actions. Proceed with caution.",
-            danger: true,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-[var(--radius)] border border-destructive/40 bg-destructive/5 px-4 py-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Delete Account" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Permanently remove all your data." })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "ml-4 h-8 shrink-0 text-xs", children: "Delete" })
-            ] })
-          }
-        )
-      ]
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      ),
+      ...props
     }
   );
 }
-function buildFormStackedBodyTemplateCode({
-  themeProp,
-  layoutClassName
-}) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      title="Settings"`,
-    `    >`,
-    `      <DataBodyTemplate.Group layout="stacked" title="Profile">`,
-    `        <form onSubmit={handleSubmit}>`,
-    `          {/* form fields */}`,
-    `          <button type="submit">Save Profile</button>`,
-    `        </form>`,
-    `      </DataBodyTemplate.Group>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function FormInlineBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
+function BreadcrumbItem({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DataBodyTemplate,
+    "li",
     {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Pages / Form / Inline" }),
-      title: "Edit User",
-      description: "Update user profile and access settings.",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), className: "contents", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(DataBodyTemplate.Group, { layout: "inline", title: "Identity", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Full Name", required: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { defaultValue: "Sarah", className: "h-8 text-sm", placeholder: "First" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { defaultValue: "Kim", className: "h-8 text-sm", placeholder: "Last" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            DataBodyTemplate.Row,
-            {
-              label: "Email",
-              description: "Used for login and notifications.",
-              required: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Input, { type: "email", defaultValue: "sarah@acme.com", className: "h-8 text-sm" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Username", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { defaultValue: "sarah.kim", className: "h-8 text-sm" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-[10px] h-6 shrink-0", children: "Available" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Phone", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { type: "tel", defaultValue: "+82 10-1234-5678", className: "h-8 text-sm" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DataBodyTemplate.Group, { layout: "inline", title: "Role & Access", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Role", required: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "admin", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "admin", children: "Admin" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "editor", children: "Editor" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "viewer", children: "Viewer" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "guest", children: "Guest" })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Department", children: /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "engineering", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "engineering", children: "Engineering" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "design", children: "Design" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "product", children: "Product" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "marketing", children: "Marketing" })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Active", description: "Inactive users cannot sign in.", children: /* @__PURE__ */ jsxRuntime.jsx(Switch, { defaultChecked: true }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Require 2FA", description: "Enforce two-factor authentication.", children: /* @__PURE__ */ jsxRuntime.jsx(Switch, {}) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DataBodyTemplate.Group, { layout: "inline", title: "Address", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Country", children: /* @__PURE__ */ jsxRuntime.jsxs(Select, { defaultValue: "kr", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "kr", children: "South Korea" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "us", children: "United States" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "jp", children: "Japan" }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "gb", children: "United Kingdom" })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "City", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { defaultValue: "Seoul", className: "h-8 text-sm" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Row, { label: "Postal Code", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { defaultValue: "04524", className: "h-8 text-sm w-36" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 px-(--dk-page-padding-x) pb-(--dk-page-padding-y)", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "reset", variant: "outline", size: "sm", className: "h-8 text-xs", children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", children: "Save" })
-        ] })
-      ] })
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex items-center gap-1", className),
+      ...props
     }
   );
 }
-function buildFormInlineBodyTemplateCode({
-  themeProp,
-  layoutClassName
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
 }) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      title="Edit User"`,
-    `    >`,
-    `      <form onSubmit={handleSubmit} className="contents">`,
-    `        <DataBodyTemplate.Group layout="inline" title="Identity">`,
-    `          <DataBodyTemplate.Row label="Field" required>`,
-    `            {/* input */}`,
-    `          </DataBodyTemplate.Row>`,
-    `        </DataBodyTemplate.Group>`,
-    `        <div className="flex justify-end gap-2 px-(--dk-page-padding-x) pb-(--dk-page-padding-y)">`,
-    `          <button type="reset">Cancel</button>`,
-    `          <button type="submit">Save</button>`,
-    `        </div>`,
-    `      </form>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function SectionedBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DataBodyTemplate,
-    {
-      theme,
-      topBar: buildTopBar({ topBarShow, topBarVariant, topBarBg, left: "Pages / Sectioned" }),
-      title: "Workspace Settings",
-      description: "Section navigation connected to body panels.",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Section, { id: "profile", label: "Profile", description: "Identity and contact", children: /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "stacked",
-            title: "Profile",
-            description: "Public workspace details.",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), className: "space-y-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "workspace-name", className: "text-xs", children: "Workspace Name" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "workspace-name", defaultValue: "Acme Corp", className: "h-8 text-sm" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Public profile" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Allow discovery in organization search." })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(Switch, { defaultChecked: true })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", className: "h-8 text-xs", children: "Save" }) })
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Section, { id: "security", label: "Security", description: "Password and access", children: /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "stacked",
-            title: "Security",
-            description: "Password and authentication.",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Require two-factor authentication" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Switch, {})
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplate.Section, { id: "billing", label: "Billing", description: "Plan and invoices", children: /* @__PURE__ */ jsxRuntime.jsx(
-          DataBodyTemplate.Group,
-          {
-            layout: "stacked",
-            title: "Billing",
-            description: "Plan and invoice settings.",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", className: "h-8 text-xs", children: "Manage Plan" })
-          }
-        ) })
-      ]
+  return useRender.useRender({
+    defaultTagName: "a",
+    props: mergeProps.mergeProps(
+      {
+        className: cn("transition-colors hover:text-foreground", className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link"
     }
-  );
+  });
 }
-function buildSectionedBodyTemplateCode({
-  themeProp,
-  layoutClassName
-}) {
-  return [
-    `import { DataBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function MyPage() {`,
-    `  return (`,
-    `    <DataBodyTemplate${themeProp}`,
-    `      className="${layoutClassName}"`,
-    `      title="Workspace Settings"`,
-    `      actions={<button type="button">Save</button>}`,
-    `    >`,
-    `      <DataBodyTemplate.Section id="profile" label="Profile" description="Identity and contact">`,
-    `        <DataBodyTemplate.Group layout="stacked" title="Profile">`,
-    `          {/* form fields */}`,
-    `        </DataBodyTemplate.Group>`,
-    `      </DataBodyTemplate.Section>`,
-    ``,
-    `      <DataBodyTemplate.Section id="security" label="Security" description="Password and access">`,
-    `        <DataBodyTemplate.Group layout="stacked" title="Security">`,
-    `          {/* security fields */}`,
-    `        </DataBodyTemplate.Group>`,
-    `      </DataBodyTemplate.Section>`,
-    `    </DataBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function LoginBodyTemplateDemo({
-  theme,
-  loginLayout,
-  loginSide,
-  loginCard,
-  loginBg,
-  loginCardWidth
-}) {
+function BreadcrumbPage({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LoginBodyTemplate,
+    "span",
     {
-      theme,
-      layout: loginLayout ?? "centered",
-      side: loginSide ?? "left",
-      card: loginCard ?? "card",
-      bg: loginBg ?? "default",
-      cardWidth: loginCardWidth ?? "sm",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: (e) => e.preventDefault(), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "Sign in" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Enter your email and password to continue." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", className: "text-xs", children: "Email" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "email", type: "email", placeholder: "you@example.com", className: "h-9" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "password", className: "text-xs", children: "Password" }),
-              /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-xs text-muted-foreground hover:text-foreground transition-colors", children: "Forgot password?" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-9" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { id: "remember" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "remember", className: "text-xs font-normal text-muted-foreground cursor-pointer", children: "Remember me for 30 days" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "w-full h-9", children: "Sign in" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
-          "Don't have an account?",
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-foreground hover:underline", children: "Sign up" })
-        ] })
-      ] })
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("font-normal text-foreground", className),
+      ...props
     }
   );
 }
-function buildLoginBodyTemplateCode({ themeProp }) {
-  return [
-    `import { LoginBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function LoginPage() {`,
-    `  return (`,
-    `    <LoginBodyTemplate${themeProp} layout="split">`,
-    `      <div className="space-y-6">`,
-    `        <div className="space-y-1.5">`,
-    `          <h1 className="text-2xl font-semibold">Sign in</h1>`,
-    `          <p className="text-sm text-muted-foreground">Enter your credentials.</p>`,
-    `        </div>`,
-    `        {/* form fields */}`,
-    `        <button type="submit" className="w-full">Sign in</button>`,
-    `      </div>`,
-    `    </LoginBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function LoginForgotDemo({
-  theme,
-  loginLayout,
-  loginSide,
-  loginCard,
-  loginBg,
-  loginCardWidth
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LoginBodyTemplate,
+    "li",
     {
-      theme,
-      layout: loginLayout ?? "centered",
-      side: loginSide ?? "left",
-      card: loginCard ?? "card",
-      bg: loginBg ?? "default",
-      cardWidth: loginCardWidth ?? "sm",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: (e) => e.preventDefault(), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "Forgot password?" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Enter your email and we'll send you a reset link." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", className: "text-xs", children: "Email" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "email", type: "email", placeholder: "you@example.com", className: "h-9" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "w-full h-9", children: "Send reset link" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "a",
-          {
-            href: "#",
-            className: "flex items-center justify-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-3.5 w-3.5" }),
-              "Back to sign in"
-            ]
-          }
-        )
-      ] })
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
     }
   );
 }
-function buildLoginForgotCode({ themeProp }) {
-  return [
-    `import { LoginBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function ForgotPasswordPage() {`,
-    `  return (`,
-    `    <LoginBodyTemplate${themeProp} layout="split">`,
-    `      <div className="space-y-6">`,
-    `        <div className="space-y-1.5">`,
-    `          <h1 className="text-2xl font-semibold">Forgot password?</h1>`,
-    `          <p className="text-sm text-muted-foreground">We'll send you a reset link.</p>`,
-    `        </div>`,
-    `        {/* email input */}`,
-    `        <button type="submit" className="w-full">Send reset link</button>`,
-    `      </div>`,
-    `    </LoginBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function LoginResetDemo({
-  theme,
-  loginLayout,
-  loginSide,
-  loginCard,
-  loginBg,
-  loginCardWidth
-}) {
+function PageBreadcrumb({ items }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { className: "text-xs gap-1", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    const label = typeof item === "string" ? item : item.label;
+    const href = typeof item === "string" ? void 0 : item.href;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React2__namespace.default.Fragment, { children: [
+      i > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: isLast ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { className: "text-xs", children: label }) : href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { href, className: "text-xs", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: label }) })
+    ] }, i);
+  }) }) });
+}
+function normalizeBreadcrumb(left) {
+  if (typeof left === "string") {
+    const items = left.split("/").map((s) => s.trim()).filter(Boolean);
+    return /* @__PURE__ */ jsxRuntime.jsx(PageBreadcrumb, { items });
+  }
+  return left;
+}
+var bgClassMap = {
+  muted: "bg-muted",
+  card: "bg-card",
+  transparent: ""
+};
+function buildTopBar(opts) {
+  if (opts.topBarShow === "hide") return void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LoginBodyTemplate,
+    PageTopBar,
     {
-      theme,
-      layout: loginLayout ?? "centered",
-      side: loginSide ?? "left",
-      card: loginCard ?? "card",
-      bg: loginBg ?? "default",
-      cardWidth: loginCardWidth ?? "sm",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: (e) => e.preventDefault(), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "Set new password" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Must be at least 8 characters." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "new-password", className: "text-xs", children: "New Password" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "new-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-9" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "confirm-password", className: "text-xs", children: "Confirm Password" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { id: "confirm-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", className: "h-9" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5 pt-1", children: ["At least 8 characters", "One uppercase letter", "One number"].map((rule) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3.5 w-3.5 shrink-0" }),
-            rule
-          ] }, rule)) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "w-full h-9", children: "Update password" })
-      ] })
+      left: normalizeBreadcrumb(opts.left),
+      right: opts.right,
+      variant: opts.topBarVariant ?? "ghost",
+      className: bgClassMap[opts.topBarBg ?? "transparent"] ?? ""
     }
   );
 }
-function buildLoginResetCode({ themeProp }) {
-  return [
-    `import { LoginBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function ResetPasswordPage() {`,
-    `  return (`,
-    `    <LoginBodyTemplate${themeProp} layout="split">`,
-    `      <div className="space-y-6">`,
-    `        <h1 className="text-2xl font-semibold">Set new password</h1>`,
-    `        {/* password inputs */}`,
-    `        <button type="submit" className="w-full">Update password</button>`,
-    `      </div>`,
-    `    </LoginBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-function LoginOtpDemo({
-  theme,
-  loginLayout,
-  loginSide,
-  loginCard,
-  loginBg,
-  loginCardWidth
+function PageTopBar({
+  left,
+  right,
+  variant = "ghost",
+  height = "var(--dk-toolbar-height)",
+  className,
+  style,
+  children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    LoginBodyTemplate,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      theme,
-      layout: loginLayout ?? "centered",
-      side: loginSide ?? "left",
-      card: loginCard ?? "card",
-      bg: loginBg ?? "default",
-      cardWidth: loginCardWidth ?? "sm",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: (e) => e.preventDefault(), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "Check your email" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
-            "We sent a 6-digit code to",
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: "sarah@acme.com" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              maxLength: 1,
-              className: "h-11 w-full text-center text-lg font-semibold tabular-nums p-0",
-              defaultValue: i < 3 ? ["4", "8", "2"][i] : ""
-            },
-            i
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground text-center", children: [
-            "Didn't receive it?",
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-foreground hover:underline", children: "Resend code" }),
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60", children: "(59s)" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "w-full h-9", children: "Verify" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "a",
-          {
-            href: "#",
-            className: "flex items-center justify-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-3.5 w-3.5" }),
-              "Back to sign in"
-            ]
-          }
-        )
-      ] })
+      className: cn(
+        "flex shrink-0 items-center justify-between gap-4 px-(--dk-page-padding-x)",
+        variant === "default" && "border-b",
+        className
+      ),
+      style: { height, ...style },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center text-xs text-muted-foreground", children: normalizeBreadcrumb(left ?? children) }),
+        right && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: right })
+      ]
     }
   );
 }
-function buildLoginOtpCode({ themeProp }) {
-  return [
-    `import { LoginBodyTemplate } from '@loykin/designkit'`,
-    `import '@loykin/designkit/styles'`,
-    "",
-    `export function OtpVerificationPage() {`,
-    `  return (`,
-    `    <LoginBodyTemplate${themeProp} layout="split">`,
-    `      <div className="space-y-6">`,
-    `        <h1 className="text-2xl font-semibold">Check your email</h1>`,
-    `        {/* otp inputs */}`,
-    `        <button type="submit" className="w-full">Verify</button>`,
-    `      </div>`,
-    `    </LoginBodyTemplate>`,
-    `  )`,
-    `}`
-  ].join("\n");
-}
-
-// src/components/templates/index.ts
-function DataGridTemplatePreview(props) {
-  return React2.createElement(DataGridTemplateDemo, props);
-}
-function createDataGridPreview(id) {
-  const definition = TEMPLATE_DEFINITIONS.find((item) => item.id === id);
-  return function DataGridPreview({
-    theme,
-    topBarShow,
-    topBarVariant,
-    topBarBg
-  }) {
-    return React2.createElement(DataGridTemplatePreview, {
-      theme,
-      variant: definition?.preview?.variant ?? "standard",
-      layoutClassName: definition?.layoutClassName ?? `layout-${id}`,
-      title: definition?.preview?.title ?? "Users",
-      description: definition?.preview?.description,
-      topBarShow,
-      topBarVariant,
-      topBarBg
-    });
-  };
-}
-var previewComponents = {
-  table: createDataGridPreview("table"),
-  "table-infinity": createDataGridPreview("table-infinity"),
-  "table-drag": createDataGridPreview("table-drag"),
-  "table-card": createDataGridPreview("table-card"),
-  "table-card-list": createDataGridPreview("table-card-list"),
-  databody: DataBodyTemplateDemo,
-  "databody-detail": DetailBodyTemplateDemo,
-  "databody-split": SplitBodyTemplateDemo,
-  tabbed: TabbedBodyTemplateDemo,
-  form: FormBodyTemplateDemo,
-  "form-stacked": FormStackedBodyTemplateDemo,
-  "form-wizard": FormWizardBodyTemplateDemo,
-  "form-inline": FormInlineBodyTemplateDemo,
-  sectioned: SectionedBodyTemplateDemo,
-  typography: TypographyBodyTemplate,
-  colors: ColorsBodyTemplate,
-  login: LoginBodyTemplateDemo,
-  "login-forgot": LoginForgotDemo,
-  "login-reset": LoginResetDemo,
-  "login-otp": LoginOtpDemo
-};
-var codeBuilders = {
-  table: buildDataGridTemplateCode,
-  "table-infinity": buildDataGridTemplateCode,
-  "table-drag": buildDataGridTemplateCode,
-  "table-card": buildDataGridTemplateCode,
-  "table-card-list": buildDataGridTemplateCode,
-  databody: buildDataBodyTemplateCode,
-  "databody-detail": buildDetailBodyTemplateCode,
-  "databody-split": buildSplitBodyTemplateCode,
-  tabbed: buildTabbedBodyTemplateCode,
-  form: buildFormBodyTemplateCode,
-  "form-stacked": buildFormStackedBodyTemplateCode,
-  "form-wizard": buildFormWizardBodyTemplateCode,
-  login: buildLoginBodyTemplateCode,
-  "login-forgot": buildLoginForgotCode,
-  "login-reset": buildLoginResetCode,
-  "login-otp": buildLoginOtpCode,
-  "form-inline": buildFormInlineBodyTemplateCode,
-  sectioned: buildSectionedBodyTemplateCode
-};
-var TEMPLATES = TEMPLATE_DEFINITIONS.map((definition) => ({
-  id: definition.id,
-  label: definition.label,
-  group: definition.group,
-  component: previewComponents[definition.id],
-  buildCode: codeBuilders[definition.id]
-}));
-var iconById = {
-  table: lucideReact.Table2,
-  "table-card": lucideReact.Layers,
-  databody: lucideReact.LayoutDashboard,
-  sectioned: lucideReact.FileText,
-  form: lucideReact.FileText,
-  "form-wizard": lucideReact.FileText,
-  typography: lucideReact.Type,
-  colors: lucideReact.Palette,
-  login: lucideReact.KeyRound
-};
-var navigationGroupIcon = {
-  DataBodyTemplate: lucideReact.LayoutDashboard,
-  FormWizardBodyTemplate: lucideReact.Layers,
-  LoginBodyTemplate: lucideReact.KeyRound
-};
-var navigationLabelOrder = ["Common", "DataBodyTemplate", "FormWizardBodyTemplate", "LoginBodyTemplate"];
-var TEMPLATE_NAVIGATION = navigationLabelOrder.map((groupId) => {
-  const definitions = TEMPLATE_DEFINITIONS.filter((d) => d.navigationGroup === groupId);
-  const parentDefinitions = definitions.filter((d) => !d.navigationParent);
-  const label = groupId;
-  return {
-    label,
-    items: parentDefinitions.map((definition) => {
-      const childDefs = definitions.filter((d) => d.navigationParent === definition.id);
-      const hasChildren = childDefs.length > 0;
-      return {
-        id: definition.id,
-        label: definition.navigationSubgroupLabel ?? definition.navigationLabel ?? definition.label,
-        icon: iconById[definition.id] ?? navigationGroupIcon[label],
-        children: hasChildren ? [
-          { id: definition.id, label: definition.navigationLabel ?? definition.label },
-          ...childDefs.map((child) => ({
-            id: child.id,
-            label: child.navigationLabel ?? child.label
-          }))
-        ] : []
-      };
-    })
-  };
-}).filter((group) => group.items.length > 0);
 var STYLE_ID = "designkit-vars";
 function buildTokenMap({
   radius,
@@ -5665,7 +3540,7 @@ ${tokenMapToCss(buildDarkTonalTokens(g.primaryHue, g.primaryChroma))}
         panelGap: o.panelGap,
         toolbarHeight: o.toolbarHeight
       });
-      const layoutClassName = getTemplateDefinition(id)?.layoutClassName ?? `layout-${id}`;
+      const layoutClassName = `layout-${id}`;
       return `.${layoutClassName} {
 ${tokenMapToCss(tokens)}
 }`;
@@ -5704,6 +3579,7 @@ exports.AvatarGroup = AvatarGroup;
 exports.AvatarGroupCount = AvatarGroupCount;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge;
+exports.BrowseBodyTemplate = BrowseBodyTemplate;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardAction = CardAction;
@@ -5714,10 +3590,11 @@ exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
 exports.ColorsBodyTemplate = ColorsBodyTemplate;
+exports.DashboardBodyTemplate = DashboardBodyTemplate;
+exports.DashboardPanel = DashboardPanel;
 exports.DataBodyTemplate = DataBodyTemplate;
-exports.DataBodyTemplateDemo = DataBodyTemplateDemo;
-exports.DataGridView = DataGridView;
 exports.DataPage = DataPage;
+exports.DetailBodyTemplate = DetailBodyTemplate;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = DropdownMenuContent;
@@ -5735,7 +3612,6 @@ exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.FormWizardBodyTemplate = FormWizardBodyTemplate;
-exports.FormWizardBodyTemplateDemo = FormWizardBodyTemplateDemo;
 exports.Input = Input;
 exports.Label = Label;
 exports.LoginBodyTemplate = LoginBodyTemplate;
@@ -5802,9 +3678,6 @@ exports.SidebarTrigger = SidebarTrigger;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Switch = Switch;
-exports.TEMPLATES = TEMPLATES;
-exports.TEMPLATE_DEFINITIONS = TEMPLATE_DEFINITIONS;
-exports.TEMPLATE_NAVIGATION = TEMPLATE_NAVIGATION;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;
@@ -5827,8 +3700,6 @@ exports.buildTemplateTheme = buildTemplateTheme;
 exports.buildTopBar = buildTopBar;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
-exports.createTemplateOverrides = createTemplateOverrides;
-exports.getTemplateDefinition = getTemplateDefinition;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
 exports.tabsListVariants = tabsListVariants;
 exports.useIsMobile = useIsMobile;