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

package/dist/index.cjs

@@ -1756,6 +1756,9 @@ function SidebarMenuSubButton({
     }
   });
 }
+function useSidebarOptional() {
+  return React2__namespace.useContext(SidebarContext);
+}
 function EmptyState({ icon: Icon, title, description, action, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2010,18 +2013,21 @@ function Header({ children, className }) {
     {
       "data-slot": "data-page-header",
       className: cn(
-        "shrink-0 px-[var(--dk-page-padding-x)] pt-[var(--dk-page-padding-y)]",
+        "shrink-0 px-[var(--designkit-page-padding-x)] pt-[var(--designkit-page-padding-y)]",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-[var(--dk-panel-gap)]", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-between gap-[var(--designkit-panel-gap)]", children })
     }
   );
 }
-function TitleBlock({ title, description, breadcrumb, className }) {
-  if (!title && !description && !breadcrumb) return null;
+function TitleBlock({ title, description, breadcrumb, status, className }) {
+  if (!title && !description && !breadcrumb && !status) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "data-page-title-block", className: cn("min-w-0 flex-1", className), children: [
     breadcrumb && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs text-muted-foreground", children: breadcrumb }),
-    title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-xl font-semibold", children: title }),
+    (title || status) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "min-w-0 truncate text-xl font-semibold", children: title }),
+      status && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: status })
+    ] }),
     description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-sm text-muted-foreground", children: description })
   ] });
 }
@@ -2031,7 +2037,10 @@ function Actions({ children, className }) {
     "div",
     {
       "data-slot": "data-page-actions",
-      className: cn("flex shrink-0 items-center gap-[calc(var(--dk-panel-gap)*0.5)]", className),
+      className: cn(
+        "flex shrink-0 items-center gap-[calc(var(--designkit-panel-gap)*0.5)]",
+        className
+      ),
       children
     }
   );
@@ -2069,8 +2078,8 @@ function Content({ children, className, padding = "default" }) {
       "data-slot": "data-page-content",
       className: cn(
         "min-h-0 flex-1 overflow-auto",
-        padding === "default" && "px-[var(--dk-page-padding-x)] pb-[var(--dk-page-padding-y)] pt-[var(--dk-page-padding-y)]",
-        padding === "compact" && "p-[calc(var(--dk-page-padding-y)*0.875)]",
+        padding === "default" && "px-[var(--designkit-page-padding-x)] pb-[var(--designkit-page-padding-y)] pt-[var(--designkit-page-padding-y)]",
+        padding === "compact" && "p-[calc(var(--designkit-page-padding-y)*0.875)]",
         padding === "none" && "p-0",
         className
       ),
@@ -2107,7 +2116,7 @@ function GroupHeader({
     {
       "data-slot": "data-page-group-header",
       className: cn(
-        "flex items-start justify-between gap-4 px-0 pb-[calc(var(--dk-panel-gap)*0.75)]",
+        "flex items-start justify-between gap-4 px-0 pb-[calc(var(--designkit-panel-gap)*0.75)]",
         className
       ),
       children: [
@@ -2128,7 +2137,7 @@ function GroupToolbar({ children, className }) {
     {
       "data-slot": "data-page-group-toolbar",
       className: cn(
-        "flex min-h-[var(--dk-toolbar-height)] items-center justify-between gap-[calc(var(--dk-panel-gap)*0.75)] pb-[calc(var(--dk-panel-gap)*0.75)]",
+        "flex min-h-[var(--designkit-toolbar-height)] items-center justify-between gap-[calc(var(--designkit-panel-gap)*0.75)] pb-[calc(var(--designkit-panel-gap)*0.75)]",
         className
       ),
       children
@@ -2155,47 +2164,49 @@ 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 })
+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 })
           ] }),
-          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
-        ] })
-      ]
-    }
-  );
-});
+          /* @__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,
@@ -2209,15 +2220,24 @@ function DashboardBodyTemplate({
 }) {
   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: [
+    (title || toolbar) && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "shrink-0 border-b px-(--designkit-page-padding-x) py-(--designkit-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 })
+    variableBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 flex flex-wrap items-center gap-2 px-(--designkit-page-padding-x) py-1.5", children: variableBar }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex-1 min-h-0 overflow-auto px-[calc(var(--designkit-page-padding-x)-0.5rem)] pt-0 pb-(--designkit-page-padding-y)",
+          contentClassName
+        ),
+        children
+      }
+    )
   ] });
 }
 function clamp(value, min, max) {
@@ -2268,6 +2288,7 @@ function WorkbenchBodyTemplate({
   contentClassName,
   title,
   description,
+  status,
   topBar,
   headerRight,
   toolbar,
@@ -2293,41 +2314,49 @@ function WorkbenchBodyTemplate({
   leftPaneClassName,
   mainPaneClassName,
   rightPaneClassName,
-  bottomPaneClassName
+  bottomPaneClassName,
+  leftPaneLabel = "Panel",
+  rightPaneLabel = "Inspector"
 }) {
   const [leftWidth, setLeftWidth] = React2.useState(leftPaneWidth);
   const [rightWidth, setRightWidth] = React2.useState(rightPaneWidth);
   const [bottomHeight, setBottomHeight] = React2.useState(bottomPaneHeight);
-  const startResize = React2.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 startResize = React2.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 showHeader = title || description || status || headerRightContent || actions;
   const showLeftPane = leftPane && !leftPaneCollapsed;
   const showRightPane = rightPane && !rightPaneCollapsed;
   const showBottomPane = bottomPane && !bottomPaneCollapsed;
   return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-workbench", className), style: theme, children: [
     topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
-    showHeader && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-[calc(var(--dk-page-padding-y)*0.75)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[var(--dk-toolbar-height)] items-center justify-between gap-3", children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "shrink-0 border-b px-(--designkit-page-padding-x) py-[calc(var(--designkit-page-padding-y)*0.75)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[var(--designkit-toolbar-height)] items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-sm font-semibold", children: title }),
+        (title || status) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "min-w-0 truncate text-sm font-semibold", children: title }),
+          status && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: status })
+        ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: description })
       ] }),
       (headerRightContent || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
@@ -2335,12 +2364,31 @@ function WorkbenchBodyTemplate({
         actions
       ] })
     ] }) }),
+    (showLeftPane || showRightPane) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b px-2 py-1.5 md:hidden", children: [
+      showLeftPane && /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm" }), children: leftPaneLabel }),
+        /* @__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: leftPaneLabel }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: leftPane })
+        ] })
+      ] }),
+      showRightPane && /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm" }), children: rightPaneLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", 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: rightPaneLabel }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: rightPane })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-0 flex-1 overflow-hidden", contentClassName), children: [
       showLeftPane && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: cn("min-h-0 shrink-0 overflow-hidden border-r bg-card/45", leftPaneClassName),
+            className: cn(
+              "hidden min-h-0 shrink-0 overflow-hidden border-r bg-card/45 md:flex md:flex-col",
+              leftPaneClassName
+            ),
             style: { width: leftWidth },
             children: leftPane
           }
@@ -2349,6 +2397,7 @@ function WorkbenchBodyTemplate({
           ResizeHandle,
           {
             axis: "x",
+            className: "hidden md:flex",
             onPointerDown: (event) => {
               const start = leftWidth;
               startResize(event, "x", (delta) => {
@@ -2365,10 +2414,13 @@ function WorkbenchBodyTemplate({
             ResizeHandle,
             {
               axis: "y",
+              className: "hidden md:flex",
               onPointerDown: (event) => {
                 const start = bottomHeight;
                 startResize(event, "y", (delta) => {
-                  setBottomHeight(clamp(start - delta, minBottomPaneHeight, maxBottomPaneHeight));
+                  setBottomHeight(
+                    clamp(start - delta, minBottomPaneHeight, maxBottomPaneHeight)
+                  );
                 });
               }
             }
@@ -2376,7 +2428,10 @@ function WorkbenchBodyTemplate({
           /* @__PURE__ */ jsxRuntime.jsx(
             "section",
             {
-              className: cn("min-h-0 shrink-0 overflow-hidden border-t bg-card/40", bottomPaneClassName),
+              className: cn(
+                "min-h-0 shrink-0 overflow-auto border-t bg-card/40 md:overflow-hidden",
+                bottomPaneClassName
+              ),
               style: { height: bottomHeight },
               children: bottomPane
             }
@@ -2388,6 +2443,7 @@ function WorkbenchBodyTemplate({
           ResizeHandle,
           {
             axis: "x",
+            className: "hidden md:flex",
             onPointerDown: (event) => {
               const start = rightWidth;
               startResize(event, "x", (delta) => {
@@ -2399,7 +2455,10 @@ function WorkbenchBodyTemplate({
         /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: cn("min-h-0 shrink-0 overflow-hidden border-l bg-card/45", rightPaneClassName),
+            className: cn(
+              "hidden min-h-0 shrink-0 overflow-hidden border-l bg-card/45 md:flex md:flex-col",
+              rightPaneClassName
+            ),
             style: { width: rightWidth },
             children: rightPane
           }
@@ -2454,13 +2513,13 @@ function GroupWrapper({
   children
 }) {
   if (variant === "card") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-(--dk-panel-gap)", children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-(--designkit-panel-gap)", children }) });
   }
   if (variant === "bordered") {
     if (layout === "inline") {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-(--radius) border divide-y", children });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-(--radius) border p-(--dk-panel-gap)", children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-(--radius) border p-(--designkit-panel-gap)", children });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
@@ -2486,7 +2545,7 @@ function renderGroupProps(props) {
   const variant = variantProp ?? layoutDefaultVariant[layout];
   if (layout === "split") {
     const panes = React2.Children.toArray(children);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--designkit-panel-gap)", className), children: [
       (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-start justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2494,21 +2553,30 @@ function renderGroupProps(props) {
         ] }),
         actions && /* @__PURE__ */ jsxRuntime.jsx("div", { children: actions })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-h-104 gap-(--dk-panel-gap) lg:grid-cols-[20rem_minmax(0,1fr)]", children: panes.map((pane, i) => /* @__PURE__ */ jsxRuntime.jsx(GroupWrapper, { layout, variant, children: pane }, i)) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-h-104 gap-(--designkit-panel-gap) lg:grid-cols-[20rem_minmax(0,1fr)]", children: panes.map((pane, i) => /* @__PURE__ */ jsxRuntime.jsx(GroupWrapper, { layout, variant, children: pane }, i)) })
     ] });
   }
   if (layout === "horizontal") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-3 gap-[calc(var(--dk-panel-gap)*2)] py-(--dk-panel-gap)", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium", danger && "text-destructive"), children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: actions })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(GroupWrapper, { layout, variant, children }) })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-1 gap-(--designkit-panel-gap) py-(--designkit-panel-gap) sm:grid-cols-3 sm:gap-[calc(var(--designkit-panel-gap)*2)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium", danger && "text-destructive"), children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description }),
+            actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: actions })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(GroupWrapper, { layout, variant, children }) })
+        ]
+      }
+    );
   }
   if (layout === "inline") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--designkit-panel-gap)", className), children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-start justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2519,7 +2587,7 @@ function renderGroupProps(props) {
       /* @__PURE__ */ jsxRuntime.jsx(GroupWrapper, { layout, variant, children })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--dk-panel-gap)", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-(--designkit-panel-gap)", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-sm font-semibold", danger && "text-destructive"), children: title }),
@@ -2534,8 +2602,8 @@ function DataBodyField({ label, description, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "grid items-start gap-x-4 px-4 py-3",
-      style: { gridTemplateColumns: "var(--dk-form-label-w, 11rem) 1fr" },
+      className: "flex flex-col gap-y-1 px-4 py-3 sm:grid sm:items-start sm:gap-x-4 sm:gap-y-0",
+      style: { gridTemplateColumns: "var(--designkit-form-label-w, 11rem) 1fr" },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-0.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: label }),
@@ -2550,8 +2618,8 @@ function DataBodyRow({ label, description, required, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "grid items-start gap-x-4 px-4 py-3",
-      style: { gridTemplateColumns: "var(--dk-form-label-w, 11rem) 1fr" },
+      className: "flex flex-col gap-y-1.5 px-4 py-3 sm:grid sm:items-start sm:gap-x-4 sm:gap-y-0",
+      style: { gridTemplateColumns: "var(--designkit-form-label-w, 11rem) 1fr" },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
@@ -2575,6 +2643,7 @@ function Root2({
   topBar,
   title,
   description,
+  status,
   actions,
   toolbarLeft,
   toolbarRight,
@@ -2608,10 +2677,10 @@ function Root2({
     return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-databody", className), style: theme, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TopBarSlot, { topBar }),
       /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Header, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, description }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, description, status }),
         /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: actions })
       ] }),
-      summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-(--dk-panel-gap)", children: summaryEl.props.children }),
+      summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
       /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsx(DataPage.Group, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(DataPage.GroupBody, { className: cn("h-full", bodyEl.props.className), children: bodyEl.props.children }) }) })
     ] });
   }
@@ -2620,11 +2689,11 @@ function Root2({
     return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-sectioned", className), style: theme, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TopBarSlot, { topBar }),
       /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Header, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, description }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, description, status }),
         /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: actions })
       ] }),
-      summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-(--dk-panel-gap)", children: summaryEl.props.children }),
-      /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-(--dk-panel-gap) lg:grid-cols-[16rem_minmax(0,1fr)]", children: [
+      summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-(--designkit-panel-gap) lg:grid-cols-[16rem_minmax(0,1fr)]", children: [
         /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-1", children: sections.map((section) => {
           const active = section.props.id === activeSection?.props.id;
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2646,7 +2715,7 @@ function Root2({
             section.props.id
           );
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 space-y-(--dk-panel-gap)", children: renderGroups(activeSection?.props.children) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 space-y-(--designkit-panel-gap)", children: renderGroups(activeSection?.props.children) })
       ] }) })
     ] });
   }
@@ -2654,10 +2723,10 @@ function Root2({
   return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-databody", className), style: theme, children: [
     /* @__PURE__ */ jsxRuntime.jsx(TopBarSlot, { topBar }),
     /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, description }),
+      /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, description, status }),
       /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: actions })
     ] }),
-    summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-(--dk-page-padding-x) py-(--dk-panel-gap)", children: summaryEl.props.children }),
+    summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
     hasTabs && /* @__PURE__ */ jsxRuntime.jsx(DataPage.Tabs, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
       DataPage.Tab,
       {
@@ -2704,6 +2773,7 @@ function BrowseBodyTemplate({
   topBar,
   title,
   description,
+  status,
   actions,
   sidebar,
   sidebarTitle = "Filters",
@@ -2714,15 +2784,15 @@ function BrowseBodyTemplate({
   children
 }) {
   const isNarrow = useIsNarrow();
-  const hasHeader = title || description || actions;
+  const hasHeader = title || description || status || 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.TitleBlock, { title, description, status }),
       /* @__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: [
+      (toolbar || isNarrow) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b px-(--designkit-page-padding-x) py-2", children: [
         isNarrow && /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             SheetTrigger,
@@ -2742,19 +2812,12 @@ function BrowseBodyTemplate({
         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 }) })
-          }
-        ),
+        !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-(--designkit-page-padding-x) py-(--designkit-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)",
+              "min-w-0 flex-1 overflow-hidden px-(--designkit-page-padding-x) py-(--designkit-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
@@ -2807,8 +2870,8 @@ function DetailBodySection({
     {
       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)",
+        surface === "card" && "rounded-(--radius) border bg-card p-(--designkit-panel-gap) text-card-foreground shadow-sm",
+        surface === "bordered" && "rounded-(--radius) border p-(--designkit-panel-gap)",
         className
       ),
       children: [
@@ -2853,8 +2916,14 @@ function DetailBodyTemplateRoot({
   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 summarySlot = summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 rounded-(--radius) border bg-card p-(--designkit-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,
@@ -2866,7 +2935,7 @@ function DetailBodyTemplateRoot({
       actions
     }
   ) : null;
-  const defaultLead = media || summary ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-(--dk-panel-gap)", leadGridClass), children: [
+  const defaultLead = media || summary ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-(--designkit-panel-gap)", leadGridClass), children: [
     mediaSlot,
     summarySlot
   ] }) : null;
@@ -2882,8 +2951,8 @@ function DetailBodyTemplateRoot({
       },
       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) });
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-(--designkit-panel-gap)", children: selectedTab?.props.children })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-(--designkit-panel-gap)", children: renderChildren(children) });
   const leadSlot = lead ?? defaultLead;
   const outsideAsideSlot = variant === "full" ? null : aside;
   const insideAsideSlot = variant === "full" ? aside : null;
@@ -2891,19 +2960,19 @@ function DetailBodyTemplateRoot({
   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 }),
+      leadSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-(--designkit-panel-gap)", children: leadSlot }),
       body
     ] }),
     record: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "grid gap-(--dk-panel-gap)",
+          "grid gap-(--designkit-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 })
+          hasRecordInspector && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-(--designkit-panel-gap)", children: leadSlot })
         ]
       }
     ),
@@ -2912,53 +2981,79 @@ function DetailBodyTemplateRoot({
         "div",
         {
           className: cn(
-            "mb-(--dk-panel-gap) grid gap-(--dk-panel-gap)",
+            "mb-(--designkit-panel-gap) grid gap-(--designkit-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 })
+            leadSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-(--designkit-panel-gap)", children: leadSlot }),
+            insideAsideSlot && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "min-h-0 rounded-(--radius) border bg-card p-(--designkit-panel-gap)",
+                  asideClassName
+                ),
+                children: insideAsideSlot
+              }
+            )
           ]
         }
       ),
       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",
-      {
-        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(
-            "main",
-            {
-              className: cn(
-                "min-h-0 overflow-auto px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
-                contentClassName
-              ),
-              children: layout[variant]
-            }
-          ),
-          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",
-            {
-              className: cn(
-                "px-(--dk-page-padding-x) py-(--dk-page-padding-y)",
-                stickyAside && "lg:sticky lg:top-0"
+  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",
+          {
+            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(
+                "main",
+                {
+                  className: cn(
+                    "min-h-0 overflow-auto px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
+                    contentClassName
+                  ),
+                  children: layout[variant]
+                }
               ),
-              children: outsideAsideSlot
-            }
-          ) })
-        ]
-      }
-    ) })
-  ] });
+              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",
+                    {
+                      className: cn(
+                        "px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
+                        stickyAside && "lg:sticky lg:top-0"
+                      ),
+                      children: outsideAsideSlot
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 }
 var DetailBodyTemplate = Object.assign(DetailBodyTemplateRoot, {
   Header: DetailBodyHeader,
@@ -2974,7 +3069,9 @@ function ListDetailBodyTemplate({
   emptyDetail,
   listWidth = 320,
   listClassName,
-  detailClassName
+  detailClassName,
+  onBack,
+  backLabel = "Back"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DataPage,
@@ -2995,15 +3092,21 @@ function ListDetailBodyTemplate({
               children: list
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs(
             "main",
             {
               className: cn(
-                "min-h-0 min-w-0 flex-1 overflow-auto",
-                !detail && "hidden lg:block",
+                "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden",
+                !detail && "hidden lg:flex",
                 detailClassName
               ),
-              children: detail ?? emptyDetail
+              children: [
+                detail && onBack && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center border-b px-3 py-2 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-1 gap-1", onClick: onBack, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+                  backLabel
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: detail ?? emptyDetail })
+              ]
             }
           )
         ] })
@@ -3011,9 +3114,56 @@ function ListDetailBodyTemplate({
     }
   );
 }
+function PanelTemplateSection({
+  title,
+  description,
+  actions,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("space-y-2.5", className), children: [
+    (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", 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 PanelTemplateRoot({
+  title,
+  eyebrow,
+  status,
+  actions,
+  footer,
+  children,
+  className,
+  bodyClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col overflow-hidden", className), children: [
+    (title || eyebrow || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-3", children: [
+      eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "min-w-0 truncate text-sm font-semibold", children: title }),
+          status && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: status })
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 py-4", bodyClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-5", children }) }),
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t px-4 py-3", children: footer })
+  ] });
+}
+var PanelTemplate = Object.assign(PanelTemplateRoot, {
+  Section: PanelTemplateSection
+});
 function FormWizardBodyTemplate({
   theme,
   title,
+  status,
   topBar,
   variant = "plain",
   steps,
@@ -3031,8 +3181,8 @@ 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: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs(React2.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DataPage.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title, status }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-(--designkit-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",
         {
@@ -3065,7 +3215,7 @@ function FormWizardBodyTemplate({
         )
       ] })
     ] }, step.key)) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { children: current && (variant === "card" ? /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-(--dk-panel-gap)", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { id: current.key, onSubmit: handleStepSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { children: current && (variant === "card" ? /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-(--designkit-panel-gap)", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { id: current.key, onSubmit: handleStepSubmit, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: current.title }),
         current.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: current.description })
@@ -3123,8 +3273,8 @@ function TypographyBodyTemplate({ theme, breadcrumb }) {
         description: "Global type scale preview for shell, template, and grid content"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Content, { className: "grid gap-[var(--dk-panel-gap)] lg:grid-cols-[1fr_22rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-[var(--dk-panel-gap)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Content, { className: "grid gap-[var(--designkit-panel-gap)] lg:grid-cols-[1fr_22rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-[var(--designkit-panel-gap)]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "rounded-lg border border-border ring-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Type Scale" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "space-y-4", children: scaleRows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[8rem_1fr] items-baseline gap-4", children: [
@@ -3315,7 +3465,7 @@ function ColorsBodyTemplate({ theme, breadcrumb }) {
         description: "Design token color palette and derivation rules for the active theme"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Content, { className: "space-y-[var(--dk-panel-gap)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Content, { className: "space-y-[var(--designkit-panel-gap)]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "rounded-lg border border-border ring-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Primary \u2014 controlled by hue & chroma" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
@@ -3485,15 +3635,7 @@ function LoginBodyTemplate({
   );
 }
 function Breadcrumb({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
-    {
-      "aria-label": "breadcrumb",
-      "data-slot": "breadcrumb",
-      className: cn(className),
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props });
 }
 function BreadcrumbList({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3518,11 +3660,7 @@ function BreadcrumbItem({ className, ...props }) {
     }
   );
 }
-function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}) {
+function BreadcrumbLink({ className, render, ...props }) {
   return useRender.useRender({
     defaultTagName: "a",
     props: mergeProps.mergeProps(
@@ -3550,11 +3688,7 @@ function BreadcrumbPage({ className, ...props }) {
     }
   );
 }
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}) {
+function BreadcrumbSeparator({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {
@@ -3602,26 +3736,36 @@ function buildTopBar(opts) {
     }
   );
 }
+function AutoSidebarTrigger() {
+  const ctx = useSidebarOptional();
+  if (!ctx?.isMobile) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, { className: "-ml-1 shrink-0" });
+}
 function PageTopBar({
   left,
   right,
   variant = "ghost",
-  height = "var(--dk-toolbar-height)",
+  height = "var(--designkit-toolbar-height)",
   className,
   style,
-  children
+  children,
+  sidebarTrigger
 }) {
+  const trigger = sidebarTrigger === false ? null : sidebarTrigger !== void 0 ? sidebarTrigger : /* @__PURE__ */ jsxRuntime.jsx(AutoSidebarTrigger, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "flex shrink-0 items-center justify-between gap-4 px-(--dk-page-padding-x)",
+        "flex shrink-0 items-center justify-between gap-4 px-(--designkit-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) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [
+          trigger,
+          normalizeBreadcrumb(left ?? children)
+        ] }),
         right && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: right })
       ]
     }
@@ -3661,8 +3805,7 @@ function buildTokenMap({
   }[density];
   const c = (factor) => (primaryChroma * factor).toFixed(4);
   return {
-    "--dk-radius": `${radius}rem`,
-    "--gridkit-radius": `${radius}rem`,
+    "--designkit-radius": `${radius}rem`,
     "--radius": `${radius}rem`,
     "--radius-sm": `${(radius * 0.6).toFixed(4)}rem`,
     "--radius-md": `${(radius * 0.8).toFixed(4)}rem`,
@@ -3670,12 +3813,9 @@ function buildTokenMap({
     "--radius-xl": `${(radius * 1.4).toFixed(4)}rem`,
     "--radius-2xl": `${(radius * 1.8).toFixed(4)}rem`,
     // primary — fully controlled
-    "--dk-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
-    "--dk-primary-foreground": "oklch(0.985 0 0)",
-    "--dk-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})`,
+    "--designkit-primary": `oklch(0.52 ${primaryChroma} ${primaryHue})`,
+    "--designkit-primary-foreground": "oklch(0.985 0 0)",
+    "--designkit-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})`,
@@ -3695,37 +3835,35 @@ function buildTokenMap({
     "--color-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
     "--color-secondary": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
     "--color-accent": `oklch(0.970 ${c(0.04)} ${primaryHue})`,
-    "--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})`,
-    "--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,
-    "--dk-page-padding-y": pagePaddingY ?? densityValues.pagePaddingY,
-    "--dk-panel-gap": panelGap ?? densityValues.panelGap,
-    "--dk-toolbar-height": toolbarHeight ?? densityValues.toolbarHeight,
-    "--dk-text-xs": `calc(0.75rem * ${fontScale})`,
-    "--dk-text-sm": `calc(0.875rem * ${fontScale})`,
-    "--dk-text-base": `calc(1rem * ${fontScale})`,
-    "--dk-text-lg": `calc(1.125rem * ${fontScale})`,
-    "--dk-text-xl": `calc(1.25rem * ${fontScale})`,
-    "--dk-leading-xs": `calc(1rem * ${lineHeight})`,
-    "--dk-leading-sm": `calc(1.25rem * ${lineHeight})`,
-    "--dk-leading-base": `calc(1.5rem * ${lineHeight})`,
-    "--dk-leading-lg": `calc(1.75rem * ${lineHeight})`,
-    "--dk-leading-xl": `calc(1.75rem * ${lineHeight})`,
-    "--text-xs": "var(--dk-text-xs)",
-    "--text-sm": "var(--dk-text-sm)",
-    "--text-base": "var(--dk-text-base)",
-    "--text-lg": "var(--dk-text-lg)",
-    "--text-xl": "var(--dk-text-xl)",
-    "--text-xs--line-height": "var(--dk-leading-xs)",
-    "--text-sm--line-height": "var(--dk-leading-sm)",
-    "--text-base--line-height": "var(--dk-leading-base)",
-    "--text-lg--line-height": "var(--dk-leading-lg)",
-    "--text-xl--line-height": "var(--dk-leading-xl)"
+    "--designkit-border": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
+    "--designkit-input": `oklch(0.922 ${c(0.04)} ${primaryHue})`,
+    "--designkit-muted": `oklch(0.970 ${c(0.02)} ${primaryHue})`,
+    "--designkit-font-scale": fontScale,
+    "--designkit-line-height": lineHeight,
+    "--designkit-density": densityValues.density,
+    "--designkit-page-padding-y": pagePaddingY ?? densityValues.pagePaddingY,
+    "--designkit-panel-gap": panelGap ?? densityValues.panelGap,
+    "--designkit-toolbar-height": toolbarHeight ?? densityValues.toolbarHeight,
+    "--designkit-text-xs": `calc(0.75rem * ${fontScale})`,
+    "--designkit-text-sm": `calc(0.875rem * ${fontScale})`,
+    "--designkit-text-base": `calc(1rem * ${fontScale})`,
+    "--designkit-text-lg": `calc(1.125rem * ${fontScale})`,
+    "--designkit-text-xl": `calc(1.25rem * ${fontScale})`,
+    "--designkit-leading-xs": `calc(1rem * ${lineHeight})`,
+    "--designkit-leading-sm": `calc(1.25rem * ${lineHeight})`,
+    "--designkit-leading-base": `calc(1.5rem * ${lineHeight})`,
+    "--designkit-leading-lg": `calc(1.75rem * ${lineHeight})`,
+    "--designkit-leading-xl": `calc(1.75rem * ${lineHeight})`,
+    "--text-xs": "var(--designkit-text-xs)",
+    "--text-sm": "var(--designkit-text-sm)",
+    "--text-base": "var(--designkit-text-base)",
+    "--text-lg": "var(--designkit-text-lg)",
+    "--text-xl": "var(--designkit-text-xl)",
+    "--text-xs--line-height": "var(--designkit-leading-xs)",
+    "--text-sm--line-height": "var(--designkit-leading-sm)",
+    "--text-base--line-height": "var(--designkit-leading-base)",
+    "--text-lg--line-height": "var(--designkit-leading-lg)",
+    "--text-xl--line-height": "var(--designkit-leading-xl)"
   };
 }
 function buildDarkTonalTokens(primaryHue, primaryChroma) {
@@ -3741,11 +3879,9 @@ function buildDarkTonalTokens(primaryHue, primaryChroma) {
     "--color-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`,
     "--color-secondary": `oklch(0.269 ${c(0.02)} ${primaryHue})`,
     "--color-accent": `oklch(0.320 ${c(0.04)} ${primaryHue})`,
-    "--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})`,
-    "--gridkit-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
-    "--gridkit-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`
+    "--designkit-border": `oklch(0.32  ${c(0.06)} ${primaryHue})`,
+    "--designkit-input": `oklch(0.35  ${c(0.06)} ${primaryHue})`,
+    "--designkit-muted": `oklch(0.269 ${c(0.03)} ${primaryHue})`
   };
 }
 function tokenMapToCss(tokens) {
@@ -3791,10 +3927,10 @@ ${tokenMapToCss(tokens)}
   }, [g.darkMode]);
   React2.useEffect(() => {
     if (g.density === "default") {
-      document.documentElement.removeAttribute("data-dk-density");
+      document.documentElement.removeAttribute("data-designkit-density");
       return;
     }
-    document.documentElement.dataset.dkDensity = g.density;
+    document.documentElement.dataset.designkitDensity = g.density;
   }, [g.density]);
 }
 function buildTemplateTheme(g, ov = {}) {
@@ -3869,6 +4005,7 @@ exports.NavigationMenuPositioner = NavigationMenuPositioner;
 exports.NavigationMenuTrigger = NavigationMenuTrigger;
 exports.PageBreadcrumb = PageBreadcrumb;
 exports.PageTopBar = PageTopBar;
+exports.PanelTemplate = PanelTemplate;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverDescription = PopoverDescription;
@@ -3949,6 +4086,7 @@ exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
 exports.tabsListVariants = tabsListVariants;
 exports.useIsMobile = useIsMobile;
 exports.useSidebar = useSidebar;
+exports.useSidebarOptional = useSidebarOptional;
 exports.useStyleInjector = useStyleInjector;
 exports.useThemeStore = useThemeStore;
 //# sourceMappingURL=index.cjs.map