@loykin/designkit 0.0.1-dev.4 → 0.0.1-dev.6

package/dist/index.cjs

@@ -7,9 +7,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
 var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
 var button = require('@base-ui/react/button');
 var checkbox = require('@base-ui/react/checkbox');
-var lucideReact = require('lucide-react');
 var menu = require('@base-ui/react/menu');
 var input = require('@base-ui/react/input');
 var popover = require('@base-ui/react/popover');
@@ -175,6 +175,89 @@ function Badge({
     }
   });
 }
+function Breadcrumb({ 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(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({ className, render, ...props }) {
+  return useRender.useRender({
+    defaultTagName: "a",
+    props: mergeProps.mergeProps(
+      {
+        className: cn("transition-colors hover:text-foreground", className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link"
+    }
+  });
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("font-normal text-foreground", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
+    }
+  );
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
 var buttonVariants = classVarianceAuthority.cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -2020,11 +2103,20 @@ function Header({ children, className }) {
     }
   );
 }
-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 })
   ] });
 }
@@ -2034,14 +2126,24 @@ function Actions({ children, className }) {
     "div",
     {
       "data-slot": "data-page-actions",
-      className: cn("flex shrink-0 items-center gap-[calc(var(--designkit-panel-gap)*0.5)]", className),
+      className: cn(
+        "flex shrink-0 items-center gap-[calc(var(--designkit-panel-gap)*0.5)]",
+        className
+      ),
       children
     }
   );
 }
 function Tabs2({ children, className }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "data-page-tabs", className: cn("shrink-0 border-b px-6", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0 overflow-x-auto", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "data-page-tabs",
+      className: cn("shrink-0 border-b border-border px-6", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0 overflow-x-auto", children })
+    }
+  );
 }
 function Tab({ active, count, children, onClick, disabled, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2089,8 +2191,8 @@ function Group({ children, className, surface = "none" }) {
       "data-surface": surface,
       className: cn(
         "min-h-0",
-        surface === "bordered" && "overflow-hidden rounded-[var(--radius)] border bg-background",
-        surface === "card" && "overflow-hidden rounded-[var(--radius)] border bg-card text-card-foreground shadow-sm",
+        surface === "bordered" && "overflow-hidden rounded-[var(--radius)] border border-border bg-background",
+        surface === "card" && "overflow-hidden rounded-[var(--radius)] border border-border bg-card text-card-foreground shadow-sm",
         className
       ),
       children
@@ -2143,7 +2245,14 @@ function GroupBody({ children, className }) {
 }
 function Footer({ children, className }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { "data-slot": "data-page-footer", className: cn("shrink-0 border-t px-6 py-3", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "footer",
+    {
+      "data-slot": "data-page-footer",
+      className: cn("shrink-0 border-t border-border px-6 py-3", className),
+      children
+    }
+  );
 }
 var DataPage = Object.assign(Root, {
   Header,
@@ -2158,47 +2267,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 border-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,
@@ -2212,7 +2323,7 @@ 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-(--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: [
+    (title || toolbar) && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "shrink-0 border-b border-border 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 })
@@ -2220,7 +2331,16 @@ function DashboardBodyTemplate({
       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-(--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 })
+    /* @__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) {
@@ -2228,20 +2348,31 @@ function clamp(value, min, max) {
 }
 function ResizeHandle({
   axis,
+  label,
+  min,
+  max,
+  value,
   onPointerDown,
+  onKeyDown,
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       role: "separator",
+      tabIndex: 0,
+      "aria-label": label,
       "aria-orientation": axis === "x" ? "vertical" : "horizontal",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
       className: cn(
-        "group/resize relative z-10 shrink-0 touch-none bg-transparent",
+        "group/resize relative z-10 shrink-0 touch-none bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
         axis === "x" ? "-mx-1 w-2 cursor-col-resize" : "-my-1 h-2 cursor-row-resize",
         className
       ),
       onPointerDown,
+      onKeyDown,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -2271,6 +2402,7 @@ function WorkbenchBodyTemplate({
   contentClassName,
   title,
   description,
+  status,
   topBar,
   headerRight,
   toolbar,
@@ -2293,6 +2425,7 @@ function WorkbenchBodyTemplate({
   maxRightPaneWidth = 520,
   minBottomPaneHeight = 120,
   maxBottomPaneHeight = 420,
+  onResize,
   leftPaneClassName,
   mainPaneClassName,
   rightPaneClassName,
@@ -2303,36 +2436,115 @@ function WorkbenchBodyTemplate({
   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]);
+  React2.useEffect(() => {
+    setLeftWidth(leftPaneWidth);
+  }, [leftPaneWidth]);
+  React2.useEffect(() => {
+    setRightWidth(rightPaneWidth);
+  }, [rightPaneWidth]);
+  React2.useEffect(() => {
+    setBottomHeight(bottomPaneHeight);
+  }, [bottomPaneHeight]);
+  const updateResizeState = React2.useCallback(
+    (patch) => {
+      const next = {
+        leftPaneWidth: leftWidth,
+        rightPaneWidth: rightWidth,
+        bottomPaneHeight: bottomHeight,
+        ...patch
+      };
+      if (patch.leftPaneWidth !== void 0) setLeftWidth(patch.leftPaneWidth);
+      if (patch.rightPaneWidth !== void 0) setRightWidth(patch.rightPaneWidth);
+      if (patch.bottomPaneHeight !== void 0) setBottomHeight(patch.bottomPaneHeight);
+      onResize?.(next);
+    },
+    [bottomHeight, leftWidth, onResize, rightWidth]
+  );
+  const updateLeftWidth = React2.useCallback(
+    (next) => {
+      updateResizeState({
+        leftPaneWidth: clamp(next, minLeftPaneWidth, maxLeftPaneWidth)
+      });
+    },
+    [maxLeftPaneWidth, minLeftPaneWidth, updateResizeState]
+  );
+  const updateRightWidth = React2.useCallback(
+    (next) => {
+      updateResizeState({
+        rightPaneWidth: clamp(next, minRightPaneWidth, maxRightPaneWidth)
+      });
+    },
+    [maxRightPaneWidth, minRightPaneWidth, updateResizeState]
+  );
+  const updateBottomHeight = React2.useCallback(
+    (next) => {
+      updateResizeState({
+        bottomPaneHeight: clamp(next, minBottomPaneHeight, maxBottomPaneHeight)
+      });
+    },
+    [maxBottomPaneHeight, minBottomPaneHeight, updateResizeState]
+  );
+  const handleResizeKey = React2.useCallback(
+    (event, options) => {
+      const step = event.shiftKey ? 48 : 12;
+      if (options.decreaseKeys.includes(event.key)) {
+        event.preventDefault();
+        options.update(options.value - step);
+        return;
+      }
+      if (options.increaseKeys.includes(event.key)) {
+        event.preventDefault();
+        options.update(options.value + step);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        options.update(options.min);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        options.update(options.max);
+      }
+    },
+    []
+  );
+  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-(--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: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsx("header", { className: "shrink-0 border-b border-border 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: [
@@ -2340,18 +2552,18 @@ 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 || showRightPane) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-border 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(SheetHeader, { className: "shrink-0 border-b border-border 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(SheetHeader, { className: "shrink-0 border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: rightPaneLabel }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: rightPane })
         ] })
       ] })
@@ -2361,7 +2573,10 @@ function WorkbenchBodyTemplate({
         /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: cn("hidden min-h-0 shrink-0 overflow-hidden border-r bg-card/45 md:flex md:flex-col", leftPaneClassName),
+            className: cn(
+              "hidden min-h-0 shrink-0 overflow-hidden border-r border-border bg-card/45 md:flex md:flex-col",
+              leftPaneClassName
+            ),
             style: { width: leftWidth },
             children: leftPane
           }
@@ -2370,13 +2585,25 @@ function WorkbenchBodyTemplate({
           ResizeHandle,
           {
             axis: "x",
+            label: "Resize left pane",
+            min: minLeftPaneWidth,
+            max: maxLeftPaneWidth,
+            value: leftWidth,
             className: "hidden md:flex",
             onPointerDown: (event) => {
               const start = leftWidth;
               startResize(event, "x", (delta) => {
-                setLeftWidth(clamp(start + delta, minLeftPaneWidth, maxLeftPaneWidth));
+                updateLeftWidth(start + delta);
               });
-            }
+            },
+            onKeyDown: (event) => handleResizeKey(event, {
+              value: leftWidth,
+              min: minLeftPaneWidth,
+              max: maxLeftPaneWidth,
+              decreaseKeys: ["ArrowLeft"],
+              increaseKeys: ["ArrowRight"],
+              update: updateLeftWidth
+            })
           }
         )
       ] }),
@@ -2387,19 +2614,34 @@ function WorkbenchBodyTemplate({
             ResizeHandle,
             {
               axis: "y",
+              label: "Resize bottom pane",
+              min: minBottomPaneHeight,
+              max: maxBottomPaneHeight,
+              value: bottomHeight,
               className: "hidden md:flex",
               onPointerDown: (event) => {
                 const start = bottomHeight;
                 startResize(event, "y", (delta) => {
-                  setBottomHeight(clamp(start - delta, minBottomPaneHeight, maxBottomPaneHeight));
+                  updateBottomHeight(start - delta);
                 });
-              }
+              },
+              onKeyDown: (event) => handleResizeKey(event, {
+                value: bottomHeight,
+                min: minBottomPaneHeight,
+                max: maxBottomPaneHeight,
+                decreaseKeys: ["ArrowDown"],
+                increaseKeys: ["ArrowUp"],
+                update: updateBottomHeight
+              })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "section",
             {
-              className: cn("min-h-0 shrink-0 overflow-auto border-t bg-card/40 md:overflow-hidden", bottomPaneClassName),
+              className: cn(
+                "min-h-0 shrink-0 overflow-auto border-t border-border bg-card/40 md:overflow-hidden",
+                bottomPaneClassName
+              ),
               style: { height: bottomHeight },
               children: bottomPane
             }
@@ -2411,19 +2653,34 @@ function WorkbenchBodyTemplate({
           ResizeHandle,
           {
             axis: "x",
+            label: "Resize right pane",
+            min: minRightPaneWidth,
+            max: maxRightPaneWidth,
+            value: rightWidth,
             className: "hidden md:flex",
             onPointerDown: (event) => {
               const start = rightWidth;
               startResize(event, "x", (delta) => {
-                setRightWidth(clamp(start - delta, minRightPaneWidth, maxRightPaneWidth));
+                updateRightWidth(start - delta);
               });
-            }
+            },
+            onKeyDown: (event) => handleResizeKey(event, {
+              value: rightWidth,
+              min: minRightPaneWidth,
+              max: maxRightPaneWidth,
+              decreaseKeys: ["ArrowRight"],
+              increaseKeys: ["ArrowLeft"],
+              update: updateRightWidth
+            })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: cn("hidden min-h-0 shrink-0 overflow-hidden border-l bg-card/45 md:flex md:flex-col", rightPaneClassName),
+            className: cn(
+              "hidden min-h-0 shrink-0 overflow-hidden border-l border-border bg-card/45 md:flex md:flex-col",
+              rightPaneClassName
+            ),
             style: { width: rightWidth },
             children: rightPane
           }
@@ -2482,9 +2739,9 @@ function GroupWrapper({
   }
   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: "overflow-hidden rounded-(--radius) border border-border divide-y", children });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-(--radius) border p-(--designkit-panel-gap)", children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-(--radius) border border-border p-(--designkit-panel-gap)", children });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
@@ -2522,14 +2779,23 @@ function renderGroupProps(props) {
     ] });
   }
   if (layout === "horizontal") {
-    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 }) })
-    ] });
+    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-(--designkit-panel-gap)", className), children: [
@@ -2599,6 +2865,7 @@ function Root2({
   topBar,
   title,
   description,
+  status,
   actions,
   toolbarLeft,
   toolbarRight,
@@ -2632,10 +2899,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-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
+      summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b border-border 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 }) }) })
     ] });
   }
@@ -2644,10 +2911,10 @@ 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-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
+      summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b border-border 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;
@@ -2678,10 +2945,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-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
+    summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b border-border 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,
       {
@@ -2728,6 +2995,7 @@ function BrowseBodyTemplate({
   topBar,
   title,
   description,
+  status,
   actions,
   sidebar,
   sidebarTitle = "Filters",
@@ -2738,15 +3006,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-(--designkit-page-padding-x) py-2", children: [
+      (toolbar || isNarrow) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-(--designkit-page-padding-x) py-2", children: [
         isNarrow && /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             SheetTrigger,
@@ -2759,7 +3027,7 @@ function BrowseBodyTemplate({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "flex flex-col gap-0 p-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { className: "shrink-0 border-b px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: sidebarTitle }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { className: "shrink-0 border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: sidebarTitle }) }),
             /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: sidebar }) })
           ] })
         ] }),
@@ -2769,7 +3037,7 @@ function BrowseBodyTemplate({
         !isNarrow && /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
-            className: "shrink-0 overflow-hidden border-r",
+            className: "shrink-0 overflow-hidden border-r border-border",
             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 }) })
           }
@@ -2831,8 +3099,8 @@ function DetailBodySection({
     {
       className: cn(
         "min-h-0",
-        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)",
+        surface === "card" && "rounded-(--radius) border border-border bg-card p-(--designkit-panel-gap) text-card-foreground shadow-sm",
+        surface === "bordered" && "rounded-(--radius) border border-border p-(--designkit-panel-gap)",
         className
       ),
       children: [
@@ -2877,8 +3145,17 @@ 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-(--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 summarySlot = summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 rounded-(--radius) border border-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 border-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,
@@ -2941,48 +3218,74 @@ function DetailBodyTemplateRoot({
           ),
           children: [
             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 })
+            insideAsideSlot && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "min-h-0 rounded-(--radius) border border-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-(--designkit-page-padding-x) py-(--designkit-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-(--designkit-page-padding-x) py-(--designkit-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 border-border 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,
@@ -3013,8 +3316,9 @@ function ListDetailBodyTemplate({
           /* @__PURE__ */ jsxRuntime.jsx(
             "aside",
             {
+              "data-slot": "list-detail-list",
               className: cn(
-                "min-h-0 shrink-0 overflow-hidden border-r",
+                "min-h-0 shrink-0 overflow-hidden border-r border-border",
                 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
               ),
@@ -3030,7 +3334,7 @@ function ListDetailBodyTemplate({
                 detailClassName
               ),
               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: [
+                detail && onBack && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center border-b border-border 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
                 ] }) }),
@@ -3064,6 +3368,7 @@ function PanelTemplateSection({
 function PanelTemplateRoot({
   title,
   eyebrow,
+  status,
   actions,
   footer,
   children,
@@ -3074,12 +3379,15 @@ function PanelTemplateRoot({
     (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: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "min-w-0 flex-1 truncate text-sm font-semibold", children: title }),
+        /* @__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 })
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border px-4 py-3", children: footer })
   ] });
 }
 var PanelTemplate = Object.assign(PanelTemplateRoot, {
@@ -3088,6 +3396,7 @@ var PanelTemplate = Object.assign(PanelTemplateRoot, {
 function FormWizardBodyTemplate({
   theme,
   title,
+  status,
   topBar,
   variant = "plain",
   steps,
@@ -3105,7 +3414,7 @@ function FormWizardBodyTemplate({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: "layout-form-wizard", style: theme, children: [
     topBar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar }),
-    /* @__PURE__ */ jsxRuntime.jsx(DataPage.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(DataPage.TitleBlock, { title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(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",
@@ -3218,7 +3527,7 @@ function TypographyBodyTemplate({ theme, breadcrumb }) {
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2", children: ["API Gateway", "Billing Worker", "Notification Queue"].map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: "flex items-center justify-between rounded-lg border px-3 py-2",
+                className: "flex items-center justify-between rounded-lg border border-border px-3 py-2",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: item }),
@@ -3267,13 +3576,13 @@ var useThemeStore = zustand.create((set) => ({
   },
   overrides: {},
   activeShell: "sidebar",
-  activeTemplate: "table",
+  activeTemplate: "databody",
   setGlobal: (patch) => set((s) => ({ global: { ...s.global, ...patch } })),
   setOverride: (id, patch) => set((s) => ({
     overrides: { ...s.overrides, [id]: { ...s.overrides[id], ...patch } }
   })),
-  setShell: (shell) => set({ activeShell: shell }),
-  setTemplate: (template) => set({ activeTemplate: template })
+  setShell: () => void 0,
+  setTemplate: () => void 0
 }));
 var tonalTokenDefs = [
   {
@@ -3339,7 +3648,7 @@ function ColorSwatch({
   variable,
   formula
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border border-border", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${bg} flex h-14 items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${fg} text-sm font-semibold`, children: "Aa" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card px-3 py-2 space-y-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: name }),
@@ -3436,7 +3745,7 @@ function ColorsBodyTemplate({ theme, breadcrumb }) {
             "  \xB7 ",
             "factor = 2\u20136% of primary chroma"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border divide-y text-xs font-mono", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border border-border divide-y text-xs font-mono", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[7rem_1fr_1fr] bg-muted/50 px-3 py-1.5 text-muted-foreground", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "token" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "light" }),
@@ -3448,7 +3757,7 @@ function ColorsBodyTemplate({ theme, breadcrumb }) {
                 className: "grid grid-cols-[7rem_1fr_1fr] items-center gap-x-3 px-3 py-2",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${t.bg} h-5 w-5 shrink-0 rounded border` }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${t.bg} h-5 w-5 shrink-0 rounded border border-border` }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: t.name })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
@@ -3515,7 +3824,16 @@ function FormCard({
 }) {
   const widthCls = cardWidthClass[cardWidth];
   if (card === "card") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-2xl border bg-card px-8 py-10 shadow-lg", widthCls), children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "w-full rounded-2xl border border-border bg-card px-8 py-10 shadow-lg",
+          widthCls
+        ),
+        children
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", widthCls), children });
 }
@@ -3558,89 +3876,6 @@ function LoginBodyTemplate({
     }
   );
 }
-function Breadcrumb({ 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(
-    "ol",
-    {
-      "data-slot": "breadcrumb-list",
-      className: cn(
-        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function BreadcrumbItem({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-item",
-      className: cn("inline-flex items-center gap-1", className),
-      ...props
-    }
-  );
-}
-function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}) {
-  return useRender.useRender({
-    defaultTagName: "a",
-    props: mergeProps.mergeProps(
-      {
-        className: cn("transition-colors hover:text-foreground", className)
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "breadcrumb-link"
-    }
-  });
-}
-function BreadcrumbPage({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "data-slot": "breadcrumb-page",
-      role: "link",
-      "aria-disabled": "true",
-      "aria-current": "page",
-      className: cn("font-normal text-foreground", className),
-      ...props
-    }
-  );
-}
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-separator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn("[&>svg]:size-3.5", className),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
-    }
-  );
-}
 function PageBreadcrumb({ items }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { className: "text-xs gap-1", children: items.map((item, i) => {
     const isLast = i === items.length - 1;
@@ -3686,6 +3921,7 @@ function PageTopBar({
   right,
   variant = "ghost",
   height = "var(--designkit-toolbar-height)",
+  minHeight,
   className,
   style,
   children,
@@ -3696,11 +3932,11 @@ function PageTopBar({
     "div",
     {
       className: cn(
-        "flex shrink-0 items-center justify-between gap-4 px-(--designkit-page-padding-x)",
-        variant === "default" && "border-b",
+        "flex shrink-0 items-center justify-between gap-4 overflow-visible px-(--designkit-page-padding-x)",
+        variant === "default" && "border-b border-border",
         className
       ),
-      style: { height, ...style },
+      style: { height, minHeight, ...style },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [
           trigger,
@@ -3827,9 +4063,22 @@ function buildDarkTonalTokens(primaryHue, primaryChroma) {
 function tokenMapToCss(tokens) {
   return Object.entries(tokens).map(([key, value]) => `  ${key}: ${value};`).join("\n");
 }
-function useStyleInjector() {
+function getScopedTarget(scopeSelector) {
+  if (scopeSelector === ":root") return document.documentElement;
+  return document.querySelector(scopeSelector);
+}
+function getDarkSelector(scopeSelector) {
+  if (scopeSelector === ":root") return ".dark";
+  return `${scopeSelector}.dark, .dark ${scopeSelector}`;
+}
+function getLayoutSelector(scopeSelector, layoutClassName) {
+  if (scopeSelector === ":root") return `.${layoutClassName}`;
+  return `${scopeSelector}.${layoutClassName}, ${scopeSelector} .${layoutClassName}`;
+}
+function useStyleInjector(options = {}) {
   const g = useThemeStore((s) => s.global);
   const ov = useThemeStore((s) => s.overrides);
+  const scopeSelector = options.scope?.trim() || ":root";
   React2.useEffect(() => {
     let el = document.getElementById(STYLE_ID);
     if (!el) {
@@ -3837,10 +4086,10 @@ function useStyleInjector() {
       el.id = STYLE_ID;
       document.head.appendChild(el);
     }
-    const rootBlock = `:root {
+    const rootBlock = `${scopeSelector} {
 ${tokenMapToCss(buildTokenMap(g))}
 }`;
-    const darkTonalBlock = `.dark {
+    const darkTonalBlock = `${getDarkSelector(scopeSelector)} {
 ${tokenMapToCss(buildDarkTonalTokens(g.primaryHue, g.primaryChroma))}
 }`;
     const tmplBlocks = Object.entries(ov).map(([id, o]) => {
@@ -3856,22 +4105,27 @@ ${tokenMapToCss(buildDarkTonalTokens(g.primaryHue, g.primaryChroma))}
         toolbarHeight: o.toolbarHeight
       });
       const layoutClassName = `layout-${id}`;
-      return `.${layoutClassName} {
+      return `${getLayoutSelector(scopeSelector, layoutClassName)} {
 ${tokenMapToCss(tokens)}
 }`;
     }).filter(Boolean);
-    el.textContent = [rootBlock, darkTonalBlock, ...tmplBlocks].join("\n\n");
-  }, [g, ov]);
+    const layerBody = [rootBlock, darkTonalBlock, ...tmplBlocks].join("\n\n");
+    el.textContent = `@layer designkit {
+${layerBody}
+}`;
+  }, [g, ov, scopeSelector]);
   React2.useEffect(() => {
-    document.documentElement.classList.toggle("dark", g.darkMode);
-  }, [g.darkMode]);
+    getScopedTarget(scopeSelector)?.classList.toggle("dark", g.darkMode);
+  }, [g.darkMode, scopeSelector]);
   React2.useEffect(() => {
+    const target = getScopedTarget(scopeSelector);
+    if (!target) return;
     if (g.density === "default") {
-      document.documentElement.removeAttribute("data-designkit-density");
+      target.removeAttribute("data-designkit-density");
       return;
     }
-    document.documentElement.dataset.designkitDensity = g.density;
-  }, [g.density]);
+    target.dataset.designkitDensity = g.density;
+  }, [g.density, scopeSelector]);
 }
 function buildTemplateTheme(g, ov = {}) {
   const tokens = buildTokenMap({
@@ -3898,6 +4152,13 @@ exports.AvatarGroup = AvatarGroup;
 exports.AvatarGroupCount = AvatarGroupCount;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge;
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbLink = BreadcrumbLink;
+exports.BreadcrumbList = BreadcrumbList;
+exports.BreadcrumbPage = BreadcrumbPage;
+exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.BrowseBodyTemplate = BrowseBodyTemplate;
 exports.Button = Button;
 exports.Card = Card;