@knkcs/anker 2.0.10 → 2.2.0

package/dist/templates/index.js

@@ -1,5 +1,4 @@
-import { Tabs } from '../chunk-ZLQ3RBAF.js';
-import { AuthCard, PageHeader } from '../chunk-D5ICTOCW.js';
+import { AuthCard, PageHeader } from '../chunk-IHX7KQRU.js';
 import { Spinner } from '../chunk-5YDCDC4B.js';
 import { Grid, Box, Flex, Text, Heading } from '../chunk-G4QMIXLC.js';
 import { createContext, useContext, useRef, useEffect, useMemo, useCallback, useSyncExternalStore } from 'react';
@@ -8,10 +7,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function createSlotStore() {
   const values = {
     actions: null,
+    header: null,
     rail: null
   };
   const listeners = {
     actions: /* @__PURE__ */ new Set(),
+    header: /* @__PURE__ */ new Set(),
     rail: /* @__PURE__ */ new Set()
   };
   function notify(slot) {
@@ -87,6 +88,22 @@ function usePageRail(content) {
     store.set("rail", content);
   }, [store, content]);
 }
+function usePageHeader(content) {
+  const store = useContext(SlotStoreContext);
+  const latest = useRef(content);
+  latest.current = content;
+  useEffect(() => {
+    if (!store) return;
+    store.set("header", latest.current);
+    return () => {
+      store.clear("header");
+    };
+  }, [store]);
+  useEffect(() => {
+    if (!store) return;
+    store.set("header", content);
+  }, [store, content]);
+}
 function useRegisteredPageActions() {
   return useSlotValue("actions");
 }
@@ -97,14 +114,18 @@ function AppShell({ sidebar, rail, children }) {
 AppShell.displayName = "AppShell";
 function AppShellInner({ sidebar, rail, children }) {
   const railNode = useSlotValue("rail");
+  const headerNode = useSlotValue("header");
   const renderedRail = railNode ?? rail;
   const showRailColumn = renderedRail !== void 0 && renderedRail !== null && renderedRail !== false;
+  const showHeaderRow = headerNode !== null && headerNode !== void 0;
   return /* @__PURE__ */ jsxs(
     Grid,
     {
       "data-testid": "app-shell",
       "data-rail": showRailColumn ? "true" : "false",
+      "data-header": showHeaderRow ? "true" : "false",
       templateColumns: showRailColumn ? "auto 1fr auto" : "auto 1fr",
+      templateRows: "auto 1fr",
       minH: "100vh",
       bg: "bg-canvas",
       children: [
@@ -113,6 +134,7 @@ function AppShellInner({ sidebar, rail, children }) {
           {
             "data-testid": "app-shell-sidebar",
             gridColumn: "1",
+            gridRow: "1 / 3",
             minW: "0",
             position: "sticky",
             top: "0",
@@ -121,14 +143,24 @@ function AppShellInner({ sidebar, rail, children }) {
             children: sidebar
           }
         ),
+        showHeaderRow ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": "app-shell-header",
+            gridColumn: showRailColumn ? "2 / 4" : "2 / 3",
+            gridRow: "1",
+            minW: "0",
+            children: headerNode
+          }
+        ) : null,
         /* @__PURE__ */ jsx(
           Flex,
           {
             "data-testid": "app-shell-main",
             gridColumn: "2",
+            gridRow: "2",
             direction: "column",
             minW: "0",
-            minH: "100vh",
             bg: "bg-canvas",
             borderLeftWidth: "1px",
             borderColor: "border",
@@ -140,6 +172,7 @@ function AppShellInner({ sidebar, rail, children }) {
           {
             "data-testid": "app-shell-rail",
             gridColumn: "3",
+            gridRow: "2",
             minW: "0",
             position: "sticky",
             top: "0",
@@ -209,72 +242,38 @@ function DetailPageTemplate({
   subtitle,
   eyebrow,
   actions,
+  avatar,
+  badges,
+  meta,
   tabs,
-  bodyTabs,
-  subheader,
   children
 }) {
-  if (tabs && bodyTabs) {
-    throw new Error(
-      "DetailPageTemplate: `tabs` and `bodyTabs` are mutually exclusive \u2014 use `bodyTabs` for owned panels, `tabs` for nav/filter strips."
-    );
-  }
   const registered = useRegisteredPageActions();
   const resolvedActions = actions ?? registered;
-  if (bodyTabs) {
-    const tabsRootProps = bodyTabs.value !== void 0 ? {
-      value: bodyTabs.value,
-      onValueChange: (d) => bodyTabs.onValueChange(d.value)
-    } : { defaultValue: bodyTabs.defaultValue };
-    return /* @__PURE__ */ jsxs(
-      Flex,
+  usePageHeader(
+    /* @__PURE__ */ jsx(
+      PageHeader,
       {
-        "data-testid": "detail-page-template",
-        direction: "column",
-        flex: "1",
-        minH: "0",
-        children: [
-          /* @__PURE__ */ jsx(
-            PageHeader,
-            {
-              breadcrumbs,
-              title,
-              subtitle,
-              eyebrow,
-              actions: resolvedActions
-            }
-          ),
-          subheader ? /* @__PURE__ */ jsx(Box, { children: subheader }) : null,
-          /* @__PURE__ */ jsxs(Tabs.Root, { lazyMount: true, unmountOnExit: true, ...tabsRootProps, children: [
-            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Tabs.List, { children: bodyTabs.items.map((item) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: item.value, children: item.label }, item.value)) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: "1", minH: "0", children: bodyTabs.items.map((item) => /* @__PURE__ */ jsx(Tabs.Content, { value: item.value, children: item.content }, item.value)) })
-          ] })
-        ]
+        breadcrumbs,
+        title,
+        subtitle,
+        eyebrow,
+        actions: resolvedActions,
+        avatar,
+        badges,
+        meta,
+        tabs
       }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
+    )
+  );
+  return /* @__PURE__ */ jsx(
     Flex,
     {
       "data-testid": "detail-page-template",
       direction: "column",
       flex: "1",
       minH: "0",
-      children: [
-        /* @__PURE__ */ jsx(
-          PageHeader,
-          {
-            breadcrumbs,
-            title,
-            subtitle,
-            eyebrow,
-            actions: resolvedActions
-          }
-        ),
-        subheader ? /* @__PURE__ */ jsx(Box, { children: subheader }) : null,
-        tabs ? /* @__PURE__ */ jsx(Box, { children: tabs }) : null,
-        /* @__PURE__ */ jsx(Box, { flex: "1", minH: "0", children })
-      ]
+      children: /* @__PURE__ */ jsx(Box, { flex: "1", minH: "0", children })
     }
   );
 }
@@ -354,6 +353,19 @@ function IndexPageTemplate({
 }) {
   const registered = useRegisteredPageActions();
   const resolvedActions = actions ?? registered;
+  usePageHeader(
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        breadcrumbs,
+        title,
+        subtitle,
+        eyebrow,
+        actions: resolvedActions,
+        tabs
+      }
+    )
+  );
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -362,17 +374,6 @@ function IndexPageTemplate({
       flex: "1",
       minH: "0",
       children: [
-        /* @__PURE__ */ jsx(
-          PageHeader,
-          {
-            breadcrumbs,
-            title,
-            subtitle,
-            eyebrow,
-            actions: resolvedActions
-          }
-        ),
-        tabs ? /* @__PURE__ */ jsx(Box, { children: tabs }) : null,
         toolbar ? /* @__PURE__ */ jsx(Box, { children: toolbar }) : null,
         /* @__PURE__ */ jsx(Box, { flex: "1", minH: "0", children })
       ]
@@ -565,88 +566,54 @@ function SettingsPageTemplate({
   subtitle,
   eyebrow,
   actions,
+  avatar,
+  badges,
+  meta,
   tabs,
-  bodyTabs,
   children,
   maxBodyWidth = "3xl",
   bodyPadding = "default"
 }) {
-  if (tabs && bodyTabs) {
-    throw new Error(
-      "SettingsPageTemplate: `tabs` and `bodyTabs` are mutually exclusive \u2014 use `bodyTabs` for owned panels, `tabs` for consumer-owned tab strips."
-    );
-  }
   const registered = useRegisteredPageActions();
   const resolvedActions = actions ?? registered;
-  const bodyPx = bodyPadding === "none" ? "0" : "8";
-  const bodyPt = bodyPadding === "none" ? "0" : "6";
-  const renderBody = (node) => /* @__PURE__ */ jsx(Box, { flex: "1", minH: "0", px: bodyPx, pt: bodyPt, children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      maxW: maxBodyWidth,
-      marginInline: maxBodyWidth === "full" ? "0" : "auto",
-      children: node
-    }
-  ) });
-  if (bodyTabs) {
-    const tabsRootProps = bodyTabs.value !== void 0 ? {
-      value: bodyTabs.value,
-      onValueChange: (d) => bodyTabs.onValueChange?.(d.value)
-    } : { defaultValue: bodyTabs.defaultValue };
-    return /* @__PURE__ */ jsxs(
-      Flex,
+  usePageHeader(
+    /* @__PURE__ */ jsx(
+      PageHeader,
       {
-        "data-testid": "settings-page-template",
-        direction: "column",
-        flex: "1",
-        minH: "0",
-        children: [
-          /* @__PURE__ */ jsx(
-            PageHeader,
-            {
-              breadcrumbs,
-              title,
-              subtitle,
-              eyebrow,
-              actions: resolvedActions
-            }
-          ),
-          /* @__PURE__ */ jsxs(Tabs.Root, { lazyMount: true, unmountOnExit: true, ...tabsRootProps, children: [
-            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Tabs.List, { children: bodyTabs.items.map((item) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: item.value, children: item.label }, item.value)) }) }),
-            renderBody(
-              bodyTabs.items.map((item) => /* @__PURE__ */ jsx(Tabs.Content, { value: item.value, children: item.content }, item.value))
-            )
-          ] })
-        ]
+        breadcrumbs,
+        title,
+        subtitle,
+        eyebrow,
+        actions: resolvedActions,
+        avatar,
+        badges,
+        meta,
+        tabs
       }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
+    )
+  );
+  const bodyPx = bodyPadding === "none" ? "0" : "8";
+  const bodyPt = bodyPadding === "none" ? "0" : "6";
+  return /* @__PURE__ */ jsx(
     Flex,
     {
       "data-testid": "settings-page-template",
       direction: "column",
       flex: "1",
       minH: "0",
-      children: [
-        /* @__PURE__ */ jsx(
-          PageHeader,
-          {
-            breadcrumbs,
-            title,
-            subtitle,
-            eyebrow,
-            actions: resolvedActions
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { children: tabs }),
-        renderBody(children)
-      ]
+      children: /* @__PURE__ */ jsx(Box, { flex: "1", minH: "0", px: bodyPx, pt: bodyPt, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          maxW: maxBodyWidth,
+          marginInline: maxBodyWidth === "full" ? "0" : "auto",
+          children
+        }
+      ) })
     }
   );
 }
 SettingsPageTemplate.displayName = "SettingsPageTemplate";
 
-export { AppShell, AuthPageTemplate, DashboardPageTemplate, DetailPageTemplate, ErrorPage, IndexPageTemplate, LoadingPage, MaintenancePage, MarketingPageTemplate, SettingsPageTemplate, usePageActions, usePageRail };
+export { AppShell, AuthPageTemplate, DashboardPageTemplate, DetailPageTemplate, ErrorPage, IndexPageTemplate, LoadingPage, MaintenancePage, MarketingPageTemplate, SettingsPageTemplate, usePageActions, usePageHeader, usePageRail };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map