@loykin/designkit 0.0.1-dev.1 → 0.0.1-dev.3

package/dist/index.js

@@ -1,13 +1,13 @@
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
-import { CheckIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon, XIcon, PanelLeftIcon, Check } from 'lucide-react';
+import { GripHorizontal, CheckIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon, XIcon, PanelLeftIcon, SlidersHorizontal, Check } from 'lucide-react';
 import { Menu } from '@base-ui/react/menu';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
@@ -17,7 +17,7 @@ import { Select as Select$1 } from '@base-ui/react/select';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog } from '@base-ui/react/dialog';
 import * as React2 from 'react';
-import React2__default, { useMemo, Children, useState, Fragment, useEffect } from 'react';
+import React2__default, { forwardRef, useMemo, Children, useState, Fragment, useCallback, useEffect } from 'react';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Slider as Slider$1 } from '@base-ui/react/slider';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
@@ -112,7 +112,11 @@ function AvatarGroupCount({ className, ...props }) {
   );
 }
 var badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  // transition-all is replaced with an explicit list to prevent width animation
+  // on font swap (e.g. font-display:swap triggering a layout recalc). Inside
+  // overflow:clip containers like DataGrid cells, an animated width change makes
+  // the pill appear to grow from a clipped state. Color transitions are preserved.
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,opacity] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
@@ -2130,6 +2134,259 @@ var DataPage = Object.assign(Root, {
   GroupBody,
   Footer
 });
+var DashboardPanel = forwardRef(function DashboardPanel2({
+  title,
+  description,
+  loading,
+  error,
+  transparent,
+  editable,
+  className,
+  style,
+  children,
+  headerRight
+}, ref) {
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 pl-3 pr-1.5 py-2", children: [
+          editable && /* @__PURE__ */ 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__ */ jsx(GripHorizontal, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-card-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: description })
+          ] }),
+          headerRight && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150", children: headerRight })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0 p-3", children: [
+          loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-card/70 z-10", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }) }),
+          error && /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error }) }),
+          !error && children
+        ] })
+      ]
+    }
+  );
+});
+function DashboardBodyTemplate({
+  theme,
+  className,
+  title,
+  description,
+  topBar,
+  toolbar,
+  variableBar,
+  children,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs(DataPage, { className: cn("layout-dashboard", className), style: theme, children: [
+    topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar }),
+    (title || toolbar) && /* @__PURE__ */ jsx("header", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-(--dk-page-padding-y)", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold truncate", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+      ] }),
+      toolbar && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: toolbar })
+    ] }) }),
+    variableBar && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex flex-wrap items-center gap-2 px-(--dk-page-padding-x) py-1.5", children: variableBar }),
+    /* @__PURE__ */ 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 clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function ResizeHandle({
+  axis,
+  onPointerDown,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": axis === "x" ? "vertical" : "horizontal",
+      className: cn(
+        "group/resize relative z-10 shrink-0 touch-none bg-transparent",
+        axis === "x" ? "-mx-1 w-2 cursor-col-resize" : "-my-1 h-2 cursor-row-resize",
+        className
+      ),
+      onPointerDown,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute bg-border transition-colors group-hover/resize:bg-muted-foreground/40",
+              axis === "x" ? "left-1/2 top-0 h-full w-px -translate-x-1/2" : "left-0 top-1/2 h-px w-full -translate-y-1/2"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute rounded-full bg-muted-foreground/35 opacity-0 transition-opacity group-hover/resize:opacity-100",
+              axis === "x" ? "left-1/2 top-1/2 h-10 w-1 -translate-x-1/2 -translate-y-1/2" : "left-1/2 top-1/2 h-1 w-10 -translate-x-1/2 -translate-y-1/2"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkbenchBodyTemplate({
+  theme,
+  className,
+  contentClassName,
+  title,
+  description,
+  topBar,
+  headerRight,
+  toolbar,
+  actions,
+  leftPane,
+  mainPane,
+  rightPane,
+  bottomPane,
+  children,
+  resizable = true,
+  leftPaneCollapsed,
+  rightPaneCollapsed,
+  bottomPaneCollapsed,
+  leftPaneWidth = 260,
+  rightPaneWidth = 320,
+  bottomPaneHeight = 240,
+  minLeftPaneWidth = 180,
+  maxLeftPaneWidth = 440,
+  minRightPaneWidth = 240,
+  maxRightPaneWidth = 520,
+  minBottomPaneHeight = 120,
+  maxBottomPaneHeight = 420,
+  leftPaneClassName,
+  mainPaneClassName,
+  rightPaneClassName,
+  bottomPaneClassName
+}) {
+  const [leftWidth, setLeftWidth] = useState(leftPaneWidth);
+  const [rightWidth, setRightWidth] = useState(rightPaneWidth);
+  const [bottomHeight, setBottomHeight] = useState(bottomPaneHeight);
+  const startResize = useCallback((event, axis, applyDelta) => {
+    if (!resizable) return;
+    const start = axis === "x" ? event.clientX : event.clientY;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.cursor = axis === "x" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+    const onPointerMove = (moveEvent) => {
+      applyDelta((axis === "x" ? moveEvent.clientX : moveEvent.clientY) - start);
+    };
+    const onPointerUp = () => {
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  }, [resizable]);
+  const headerRightContent = headerRight ?? toolbar;
+  const showHeader = title || description || headerRightContent || actions;
+  const showLeftPane = leftPane && !leftPaneCollapsed;
+  const showRightPane = rightPane && !rightPaneCollapsed;
+  const showBottomPane = bottomPane && !bottomPaneCollapsed;
+  return /* @__PURE__ */ jsxs(DataPage, { className: cn("layout-workbench", className), style: theme, children: [
+    topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar }),
+    showHeader && /* @__PURE__ */ jsx("header", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-[calc(var(--dk-page-padding-y)*0.75)]", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[var(--dk-toolbar-height)] items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsx("h1", { className: "truncate text-sm font-semibold", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: description })
+      ] }),
+      (headerRightContent || actions) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+        headerRightContent,
+        actions
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-1 overflow-hidden", contentClassName), children: [
+      showLeftPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: cn("min-h-0 shrink-0 overflow-hidden border-r bg-card/45", leftPaneClassName),
+            style: { width: leftWidth },
+            children: leftPane
+          }
+        ),
+        resizable && /* @__PURE__ */ jsx(
+          ResizeHandle,
+          {
+            axis: "x",
+            onPointerDown: (event) => {
+              const start = leftWidth;
+              startResize(event, "x", (delta) => {
+                setLeftWidth(clamp(start + delta, minLeftPaneWidth, maxLeftPaneWidth));
+              });
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("main", { className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", mainPaneClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: mainPane ?? children }),
+        showBottomPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          resizable && /* @__PURE__ */ jsx(
+            ResizeHandle,
+            {
+              axis: "y",
+              onPointerDown: (event) => {
+                const start = bottomHeight;
+                startResize(event, "y", (delta) => {
+                  setBottomHeight(clamp(start - delta, minBottomPaneHeight, maxBottomPaneHeight));
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "section",
+            {
+              className: cn("min-h-0 shrink-0 overflow-hidden border-t bg-card/40", bottomPaneClassName),
+              style: { height: bottomHeight },
+              children: bottomPane
+            }
+          )
+        ] })
+      ] }),
+      showRightPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        resizable && /* @__PURE__ */ jsx(
+          ResizeHandle,
+          {
+            axis: "x",
+            onPointerDown: (event) => {
+              const start = rightWidth;
+              startResize(event, "x", (delta) => {
+                setRightWidth(clamp(start - delta, minRightPaneWidth, maxRightPaneWidth));
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: cn("min-h-0 shrink-0 overflow-hidden border-l bg-card/45", rightPaneClassName),
+            style: { width: rightWidth },
+            children: rightPane
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function DataBodyTab(_props) {
   return null;
 }
@@ -2202,12 +2459,13 @@ function renderGroupProps(props) {
     description,
     actions,
     danger,
+    className,
     children
   } = props;
   const variant = variantProp ?? layoutDefaultVariant[layout];
   if (layout === "split") {
     const panes = Children.toArray(children);
-    return /* @__PURE__ */ jsxs("div", { className: "py-(--dk-panel-gap)", children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
       (title || description || actions) && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           title && /* @__PURE__ */ jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2219,7 +2477,7 @@ function renderGroupProps(props) {
     ] });
   }
   if (layout === "horizontal") {
-    return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-[calc(var(--dk-panel-gap)*2)] py-(--dk-panel-gap)", children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-3 gap-[calc(var(--dk-panel-gap)*2)] py-(--dk-panel-gap)", className), children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium", danger && "text-destructive"), children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description }),
@@ -2229,7 +2487,7 @@ function renderGroupProps(props) {
     ] });
   }
   if (layout === "inline") {
-    return /* @__PURE__ */ jsxs("div", { className: "py-(--dk-panel-gap)", children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
       (title || description) && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-start justify-between", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           title && /* @__PURE__ */ jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2240,7 +2498,7 @@ function renderGroupProps(props) {
       /* @__PURE__ */ jsx(GroupWrapper, { layout, variant, children })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "py-(--dk-panel-gap)", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2408,6 +2666,330 @@ var DataBodyTemplate = Object.assign(Root2, {
   Row: DataBodyRow,
   Field: DataBodyField
 });
+function useIsNarrow() {
+  const [narrow, setNarrow] = useState(false);
+  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 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__ */ jsxs(DataPage, { className: cn("layout-browse", className), style: theme, children: [
+    topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar }),
+    hasHeader && /* @__PURE__ */ jsxs(DataPage.Header, { children: [
+      /* @__PURE__ */ jsx(DataPage.TitleBlock, { title, description }),
+      /* @__PURE__ */ jsx(DataPage.Actions, { children: actions })
+    ] }),
+    /* @__PURE__ */ jsxs(DataPage.Content, { padding: "none", className: "flex flex-col overflow-hidden", children: [
+      (toolbar || isNarrow) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b px-(--dk-page-padding-x) py-2", children: [
+        isNarrow && /* @__PURE__ */ jsxs(Sheet, { children: [
+          /* @__PURE__ */ jsxs(
+            SheetTrigger,
+            {
+              render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "shrink-0 gap-1.5" }),
+              children: [
+                /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+                sidebarTitle
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "flex flex-col gap-0 p-0", children: [
+            /* @__PURE__ */ jsx(SheetHeader, { className: "shrink-0 border-b px-4 py-3", children: /* @__PURE__ */ jsx(SheetTitle, { children: sidebarTitle }) }),
+            /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: sidebar }) })
+          ] })
+        ] }),
+        toolbar && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: toolbar })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
+        !isNarrow && /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: "shrink-0 overflow-hidden border-r",
+            style: { width: sidebarWidth },
+            children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx("div", { className: "px-(--dk-page-padding-x) py-(--dk-page-padding-y)", children: sidebar }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0 flex-1 overflow-hidden px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
+              "[&_.gridkit-shell]:h-full [&_.gridkit-table-stack]:flex-1 [&_.gridkit-table-stack]:min-h-0",
+              "[&_.gridkit-frame]:flex-1 [&_.gridkit-frame]:min-h-0 [&_.gridkit-frame]:overflow-auto",
+              contentClassName
+            ),
+            children
+          }
+        )
+      ] })
+    ] }),
+    footer && /* @__PURE__ */ jsx(DataPage.Footer, { children: footer })
+  ] });
+}
+function DetailBodyHeader({
+  eyebrow,
+  title,
+  description,
+  status,
+  actions,
+  compact,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(DataPage.Header, { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+        title && /* @__PURE__ */ jsx("h1", { className: cn("min-w-0 truncate font-semibold", compact ? "text-base" : "text-lg"), children: title }),
+        status && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: status })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "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
+      ),
+      children: [
+        (title || description || actions) && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function renderChildren(nodes) {
+  return Children.toArray(nodes).map((child, i) => /* @__PURE__ */ jsx(Fragment, { children: child }, i));
+}
+function DetailBodyTemplateRoot({
+  variant = "record",
+  theme,
+  className,
+  topBar,
+  header,
+  lead,
+  eyebrow,
+  title,
+  description,
+  status,
+  actions,
+  media,
+  aside,
+  summary,
+  stickyAside = true,
+  contentClassName,
+  mediaClassName,
+  asideClassName,
+  children
+}) {
+  const childArray = useMemo(() => Children.toArray(children), [children]);
+  const tabs = childArray.filter(isDetailBodyTab);
+  const hasTabs = tabs.length > 0;
+  const [activeTab, setActiveTab] = useState(() => tabs[0]?.props.id ?? "");
+  const selectedTab = tabs.find((tab) => tab.props.id === activeTab) ?? tabs[0];
+  const summarySlot = summary ? /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    DetailBodyHeader,
+    {
+      eyebrow,
+      title,
+      description,
+      status,
+      actions
+    }
+  ) : null;
+  const defaultLead = media || summary ? /* @__PURE__ */ jsxs("div", { className: cn("grid gap-(--dk-panel-gap)", leadGridClass), children: [
+    mediaSlot,
+    summarySlot
+  ] }) : null;
+  const body = hasTabs ? /* @__PURE__ */ jsxs("div", { className: "min-h-0", children: [
+    /* @__PURE__ */ jsx(DataPage.Tabs, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      DataPage.Tab,
+      {
+        active: (selectedTab?.props.id ?? "") === tab.props.id,
+        count: tab.props.count,
+        disabled: tab.props.disabled,
+        onClick: () => setActiveTab(tab.props.id),
+        children: tab.props.label
+      },
+      tab.props.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "pt-(--dk-panel-gap)", children: selectedTab?.props.children })
+  ] }) : /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
+      leadSlot && /* @__PURE__ */ jsx("div", { className: "mb-(--dk-panel-gap)", children: leadSlot }),
+      body
+    ] }),
+    record: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid gap-(--dk-panel-gap)",
+          hasRecordInspector && "xl:grid-cols-[minmax(28rem,1fr)_minmax(14rem,18rem)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0", children: body }),
+          hasRecordInspector && /* @__PURE__ */ jsx("div", { className: "space-y-(--dk-panel-gap)", children: leadSlot })
+        ]
+      }
+    ),
+    full: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      hasFullLeadArea && /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-(--dk-panel-gap)", children: leadSlot }),
+            insideAsideSlot && /* @__PURE__ */ jsx("div", { className: cn("min-h-0 rounded-(--radius) border bg-card p-(--dk-panel-gap)", asideClassName), children: insideAsideSlot })
+          ]
+        }
+      ),
+      body
+    ] })
+  };
+  return /* @__PURE__ */ jsxs(DataPage, { className: cn("layout-detail", className), style: theme, "data-detail-variant": variant, children: [
+    topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar }),
+    header ?? defaultHeader,
+    /* @__PURE__ */ jsx(DataPage.Content, { padding: "none", className: "overflow-hidden", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        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__ */ jsx(
+            "main",
+            {
+              className: cn(
+                "min-h-0 overflow-auto px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
+                contentClassName
+              ),
+              children: layout[variant]
+            }
+          ),
+          outsideAsideSlot && /* @__PURE__ */ jsx("aside", { className: cn("min-h-0 border-t bg-background lg:border-l lg:border-t-0", asideClassName), children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
+                stickyAside && "lg:sticky lg:top-0"
+              ),
+              children: outsideAsideSlot
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+}
+var DetailBodyTemplate = Object.assign(DetailBodyTemplateRoot, {
+  Header: DetailBodyHeader,
+  Tab: DetailBodyTab,
+  Section: DetailBodySection
+});
+function ListDetailBodyTemplate({
+  theme,
+  className,
+  topBar,
+  list,
+  detail,
+  emptyDetail,
+  listWidth = 320,
+  listClassName,
+  detailClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    DataPage,
+    {
+      className: cn("layout-list-detail", className),
+      style: { "--ld-list-width": `${listWidth}px`, ...theme },
+      children: [
+        topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "aside",
+            {
+              className: cn(
+                "min-h-0 shrink-0 overflow-hidden border-r",
+                detail ? "hidden lg:flex lg:w-[var(--ld-list-width)] lg:flex-col" : "flex w-full flex-col lg:w-[var(--ld-list-width)]",
+                listClassName
+              ),
+              children: list
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              className: cn(
+                "min-h-0 min-w-0 flex-1 overflow-auto",
+                !detail && "hidden lg:block",
+                detailClassName
+              ),
+              children: detail ?? emptyDetail
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function FormWizardBodyTemplate({
   theme,
   title,
@@ -3059,7 +3641,7 @@ function buildTokenMap({
   const c = (factor) => (primaryChroma * factor).toFixed(4);
   return {
     "--dk-radius": `${radius}rem`,
-    "--dg-radius": `${radius}rem`,
+    "--gridkit-radius": `${radius}rem`,
     "--radius": `${radius}rem`,
     "--radius-sm": `${(radius * 0.6).toFixed(4)}rem`,
     "--radius-md": `${(radius * 0.8).toFixed(4)}rem`,
@@ -3070,9 +3652,9 @@ function buildTokenMap({
     "--dk-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
     "--dk-primary-foreground": "oklch(0.985 0 0)",
     "--dk-ring": `oklch(0.50 ${primaryChroma} ${primaryHue})`,
-    "--dg-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
-    "--dg-primary-foreground": "oklch(0.985 0 0)",
-    "--dg-ring": `oklch(0.50 ${primaryChroma} ${primaryHue})`,
+    "--gridkit-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
+    "--gridkit-primary-foreground": "oklch(0.985 0 0)",
+    "--gridkit-ring": `oklch(0.50 ${primaryChroma} ${primaryHue})`,
     "--primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
     "--primary-foreground": "oklch(0.985 0 0)",
     "--color-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
@@ -3095,8 +3677,8 @@ function buildTokenMap({
     "--dk-border": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
     "--dk-input": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
     "--dk-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
-    "--dg-border": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
-    "--dg-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
+    "--gridkit-border": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
+    "--gridkit-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
     "--dk-font-scale": fontScale,
     "--dk-line-height": lineHeight,
     "--dk-density": densityValues.density,
@@ -3141,8 +3723,8 @@ function buildDarkTonalTokens(primaryHue, primaryChroma) {
     "--dk-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
     "--dk-input": `oklch(0.35  ${c(0.06)} ${primaryHue})`,
     "--dk-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`,
-    "--dg-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
-    "--dg-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`
+    "--gridkit-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
+    "--gridkit-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`
   };
 }
 function tokenMapToCss(tokens) {
@@ -3195,7 +3777,7 @@ ${tokenMapToCss(tokens)}
   }, [g.density]);
 }
 function buildTemplateTheme(g, ov = {}) {
-  return buildTokenMap({
+  const tokens = buildTokenMap({
     radius: ov.radius ?? g.radius,
     primaryHue: g.primaryHue,
     primaryChroma: ov.primaryChroma ?? g.primaryChroma,
@@ -3206,8 +3788,12 @@ function buildTemplateTheme(g, ov = {}) {
     fontScale: g.fontScale ?? 1,
     lineHeight: g.lineHeight ?? 1
   });
+  if (g.darkMode) {
+    Object.assign(tokens, buildDarkTonalTokens(g.primaryHue, ov.primaryChroma ?? g.primaryChroma));
+  }
+  return tokens;
 }
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, DataBodyTemplate, DataPage, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FormWizardBodyTemplate, Input, Label, LoginBodyTemplate, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, PageTopBar, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useStyleInjector, useThemeStore };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BrowseBodyTemplate, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, DashboardBodyTemplate, DashboardPanel, DataBodyTemplate, DataPage, DetailBodyTemplate, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FormWizardBodyTemplate, Input, Label, ListDetailBodyTemplate, LoginBodyTemplate, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, PageTopBar, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, WorkbenchBodyTemplate, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useStyleInjector, useThemeStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map