@knkcs/anker 2.0.9 → 2.1.0

package/CLAUDE-ANKER.md

@@ -77,7 +77,7 @@ Available templates:
 
 | Template | Use for |
 |---|---|
-| `<AppShell>` | Authenticated chrome (sidebar · main · rail). Provides `usePageActions(node)` and `usePageRail(node)` hooks. |
+| `<AppShell>` | Authenticated chrome (sidebar · main · rail). Provides `usePageActions(node)`, `usePageHeader(node)`, and `usePageRail(node)` hooks. Page templates register their `<PageHeader>` via `usePageHeader`, which renders it as a band spanning main + rail. |
 | `<IndexPageTemplate>` | List pages — header + optional tabs + toolbar + DataTable |
 | `<DetailPageTemplate>` | Single-entity pages — header + optional tabs + body |
 | `<SettingsPageTemplate>` | Tabbed settings pages with form Cards |

package/dist/components/index.js

@@ -428,7 +428,7 @@ var ContextRailRoot = ({ storageKey, children }) => {
       window.localStorage.setItem(storageKey, String(collapsed));
     }
   }, [collapsed, storageKey]);
-  return /* @__PURE__ */ jsx(RailRootContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(RailRootContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(
     Box,
     {
       "data-testid": "context-rail",
@@ -436,32 +436,33 @@ var ContextRailRoot = ({ storageKey, children }) => {
       w: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
       minH: "100vh",
       transition: "width 250ms ease-out",
-      overflow: "hidden",
       position: "relative",
-      children: collapsed ? /* @__PURE__ */ jsx(Flex, { direction: "column", align: "center", pt: "3", gap: "3", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          "data-testid": "context-rail-toggle",
-          "aria-label": "Expand context rail",
-          variant: "ghost",
-          size: "sm",
-          onClick: () => setCollapsed(false),
-          children: /* @__PURE__ */ jsx(PanelRightOpen, { size: 16 })
-        }
-      ) }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", h: "full", children: [
-        /* @__PURE__ */ jsx(Flex, { justify: "flex-end", px: "3", pt: "3", children: /* @__PURE__ */ jsx(
+      children: [
+        /* @__PURE__ */ jsx(
           IconButton,
           {
             "data-testid": "context-rail-toggle",
-            "aria-label": "Collapse context rail",
-            variant: "ghost",
-            size: "sm",
-            onClick: () => setCollapsed(true),
-            children: /* @__PURE__ */ jsx(PanelRightClose, { size: 16 })
+            "aria-label": collapsed ? "Expand context rail" : "Collapse context rail",
+            onClick: () => setCollapsed((c) => !c),
+            variant: "outline",
+            size: "xs",
+            position: "absolute",
+            top: "6",
+            left: "-3.5",
+            width: "7",
+            height: "7",
+            minW: "7",
+            borderRadius: "full",
+            bg: "bg-surface",
+            borderColor: "border",
+            boxShadow: "sm",
+            zIndex: 1,
+            _hover: { bg: "bg-muted" },
+            children: collapsed ? /* @__PURE__ */ jsx(PanelRightOpen, { size: 14 }) : /* @__PURE__ */ jsx(PanelRightClose, { size: 14 })
           }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { flex: "1", overflowY: "auto", px: "4", pb: "4", children })
-      ] })
+        ),
+        collapsed ? null : /* @__PURE__ */ jsx(Box, { h: "full", overflowY: "auto", px: "4", pt: "4", pb: "4", children })
+      ]
     }
   ) });
 };