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

package/README.md

@@ -13,21 +13,28 @@ npm install @loykin/designkit
 
 Requires React 19 and Tailwind CSS v4. UI components are based on [shadcn/ui](https://ui.shadcn.com) — if your app has shadcn set up, theming integrates automatically via shared CSS variables (`--primary`, `--background`, `--radius`, etc.).
 
-Import the styles in your global CSS:
+shadcn/ui is the component and semantic-token convention, not a runtime
+dependency. Consumers do not need to install the shadcn CLI, but they must use
+Tailwind CSS v4 and should define the shared semantic variables they want to
+customize.
+
+Import Tailwind and DesignKit from the same global CSS entry:
 
 ```css
 /* globals.css */
+@import "tailwindcss";
 @import "@loykin/designkit/styles";
 ```
 
-The styles file includes pre-built Tailwind utility classes — no `@source` configuration required. You can also import the stylesheet from your app entry, as shown below.
+`@loykin/designkit/styles` registers the package's compiled JavaScript as a
+Tailwind source. The consuming application's Tailwind v4 build generates the
+utilities for both the application and DesignKit in one cascade. DesignKit does
+not ship a second, pre-built copy of Tailwind utilities.
 
 ## Quick Start
 
 ```tsx
 import { DataBodyTemplate, PageTopBar, Button } from '@loykin/designkit'
-import '@loykin/designkit/styles'
-
 export function UsersPage() {
   return (
     <DataBodyTemplate

package/dist/index.cjs

@@ -2020,11 +2020,14 @@ 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,7 +2037,10 @@ 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
     }
   );
@@ -2158,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,
@@ -2220,7 +2228,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) {
@@ -2271,6 +2288,7 @@ function WorkbenchBodyTemplate({
   contentClassName,
   title,
   description,
+  status,
   topBar,
   headerRight,
   toolbar,
@@ -2303,28 +2321,31 @@ 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]);
+  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;
@@ -2332,7 +2353,10 @@ function WorkbenchBodyTemplate({
     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: [
       /* @__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: [
@@ -2361,7 +2385,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 bg-card/45 md:flex md:flex-col",
+              leftPaneClassName
+            ),
             style: { width: leftWidth },
             children: leftPane
           }
@@ -2391,7 +2418,9 @@ function WorkbenchBodyTemplate({
               onPointerDown: (event) => {
                 const start = bottomHeight;
                 startResize(event, "y", (delta) => {
-                  setBottomHeight(clamp(start - delta, minBottomPaneHeight, maxBottomPaneHeight));
+                  setBottomHeight(
+                    clamp(start - delta, minBottomPaneHeight, maxBottomPaneHeight)
+                  );
                 });
               }
             }
@@ -2399,7 +2428,10 @@ function WorkbenchBodyTemplate({
           /* @__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 bg-card/40 md:overflow-hidden",
+                bottomPaneClassName
+              ),
               style: { height: bottomHeight },
               children: bottomPane
             }
@@ -2423,7 +2455,10 @@ function WorkbenchBodyTemplate({
         /* @__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 bg-card/45 md:flex md:flex-col",
+              rightPaneClassName
+            ),
             style: { width: rightWidth },
             children: rightPane
           }
@@ -2522,14 +2557,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 +2643,7 @@ function Root2({
   topBar,
   title,
   description,
+  status,
   actions,
   toolbarLeft,
   toolbarRight,
@@ -2632,7 +2677,7 @@ 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 }),
@@ -2644,7 +2689,7 @@ 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 }),
@@ -2678,7 +2723,7 @@ 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 }),
@@ -2728,6 +2773,7 @@ function BrowseBodyTemplate({
   topBar,
   title,
   description,
+  status,
   actions,
   sidebar,
   sidebarTitle = "Filters",
@@ -2738,11 +2784,11 @@ 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: [
@@ -2766,14 +2812,7 @@ 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-(--designkit-page-padding-x) py-(--designkit-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",
           {
@@ -2878,7 +2917,13 @@ function DetailBodyTemplateRoot({
   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 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,
@@ -2941,48 +2986,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 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 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,
@@ -3064,6 +3135,7 @@ function PanelTemplateSection({
 function PanelTemplateRoot({
   title,
   eyebrow,
+  status,
   actions,
   footer,
   children,
@@ -3074,7 +3146,10 @@ 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 })
       ] })
     ] }),
@@ -3088,6 +3163,7 @@ var PanelTemplate = Object.assign(PanelTemplateRoot, {
 function FormWizardBodyTemplate({
   theme,
   title,
+  status,
   topBar,
   variant = "plain",
   steps,
@@ -3105,7 +3181,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",
@@ -3559,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(
@@ -3592,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(
@@ -3624,11 +3688,7 @@ function BreadcrumbPage({ className, ...props }) {
     }
   );
 }
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}) {
+function BreadcrumbSeparator({ children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {