@meetreeve/ui 0.6.2 → 0.7.1

package/dist/index.d.mts

@@ -42,7 +42,14 @@ interface Brand {
 declare function faviconUrl(domain: string | null | undefined): string | null;
 interface BrandGlyphProps {
     brand: Brand;
-    size?: "sm" | "lg";
+    /**
+     * "sm"/"lg" are lockup sizes (a wordmark sits alongside the glyph
+     * elsewhere in the same surface — see MARK_CAP_RATIO). "xl" is for a
+     * bare, standalone glyph slot with no adjacent wordmark at all (e.g. a
+     * collapsed 56px icon rail, DEV-5331) — governed by GLYPH_CANVAS_FILL
+     * instead, same rule a favicon/avatar tile follows.
+     */
+    size?: "sm" | "lg" | "xl";
     /** Slightly lighter tint behind image sources (e.g. dropdown rows). */
     subtle?: boolean;
     className?: string;
@@ -341,6 +348,20 @@ interface AppSidebarProps {
      * `/studio` should NOT light up on `/studio/photo`).
      */
     isActive?: (href: string, activePath: string) => boolean;
+    /**
+     * Whether the desktop rail can collapse to a 56px icon rail (DEV-5331,
+     * porting AppNavRail's click-to-pin model into the package). Default
+     * `true`. `false` hides the toggle entirely — the rail then just stays at
+     * whatever `defaultCollapsed` says, with no way for the user to change it.
+     * Mobile is never affected either way (collapse is desktop-only).
+     */
+    collapsible?: boolean;
+    /** Initial collapsed state before any persisted value is read. Default `false`. */
+    defaultCollapsed?: boolean;
+    /** Fires with the new collapsed value whenever the user toggles the rail. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** localStorage key for the persisted collapsed preference. Default `"reeve-sidebar-collapsed"`. */
+    storageKey?: string;
     /** Merged onto the desktop `<aside>` itself — there is no extra wrapping
      *  element (see the render note below on why that matters for height). */
     className?: string;
@@ -355,7 +376,7 @@ interface AppSidebarProps {
  * dependency, matching ResponsiveHeader's existing disclosure pattern in
  * this same package.
  */
-declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, className, }: AppSidebarProps): react.JSX.Element;
+declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, collapsible, defaultCollapsed, onCollapsedChange, storageKey, className, }: AppSidebarProps): react.JSX.Element;
 
 /**
  * Minimal shape AppSidebar's fallback derivation needs from a module registry
@@ -436,6 +457,29 @@ interface FlyoutProps {
      * mirrors ResponsiveHeader's `linkComponent` prop (DEV-4429) exactly.
      */
     linkComponent?: ElementType;
+    /**
+     * Icon-only trigger for AppSidebar's collapsed (56px) rail (DEV-5331): the
+     * label collapses to a `sr-only` span (kept in the a11y tree) plus a native
+     * `title` tooltip — the package has no tooltip primitive and adding one
+     * (a Radix dep) is explicitly out of scope. The panel's own child rows are
+     * unaffected — they always show full labels regardless of this flag.
+     */
+    collapsed?: boolean;
+    /**
+     * Sibling-coordination hooks (DEV-5331 fix — Matt's live review found two
+     * folded-group flyouts open + overlapping at once, since each Flyout had
+     * zero awareness of its siblings). `onOpenChange` reports every open/
+     * closed transition of THIS instance's own hover/click intent — reported
+     * even while `forceClosed` is currently suppressing it, so a parent
+     * coordinator can learn "this one wants to open" and hand it the single
+     * active slot. `forceClosed` is set by that coordinator to immediately
+     * hide THIS instance (and reset its internal hover/click state) the
+     * instant a different sibling becomes the active one. Both optional and
+     * independent of each other — omitted, Flyout is fully standalone (its
+     * own state, unaware of any siblings), exactly as before.
+     */
+    onOpenChange?: (open: boolean) => void;
+    forceClosed?: boolean;
     className?: string;
 }
 /**
@@ -473,7 +517,7 @@ interface FlyoutProps {
  * than working around it. jsdom never computes real scrollable-overflow
  * geometry, so no unit test caught this — only an actual browser render did.
  */
-declare function Flyout({ label, icon, active, children, linkComponent, className }: FlyoutProps): react.JSX.Element;
+declare function Flyout({ label, icon, active, children, linkComponent, collapsed, onOpenChange, forceClosed, className, }: FlyoutProps): react.JSX.Element;
 
 /**
  * ContextSwitcher (DEV-4408) — promoted out of reeve-frontend's

package/dist/index.d.ts

@@ -42,7 +42,14 @@ interface Brand {
 declare function faviconUrl(domain: string | null | undefined): string | null;
 interface BrandGlyphProps {
     brand: Brand;
-    size?: "sm" | "lg";
+    /**
+     * "sm"/"lg" are lockup sizes (a wordmark sits alongside the glyph
+     * elsewhere in the same surface — see MARK_CAP_RATIO). "xl" is for a
+     * bare, standalone glyph slot with no adjacent wordmark at all (e.g. a
+     * collapsed 56px icon rail, DEV-5331) — governed by GLYPH_CANVAS_FILL
+     * instead, same rule a favicon/avatar tile follows.
+     */
+    size?: "sm" | "lg" | "xl";
     /** Slightly lighter tint behind image sources (e.g. dropdown rows). */
     subtle?: boolean;
     className?: string;
@@ -341,6 +348,20 @@ interface AppSidebarProps {
      * `/studio` should NOT light up on `/studio/photo`).
      */
     isActive?: (href: string, activePath: string) => boolean;
+    /**
+     * Whether the desktop rail can collapse to a 56px icon rail (DEV-5331,
+     * porting AppNavRail's click-to-pin model into the package). Default
+     * `true`. `false` hides the toggle entirely — the rail then just stays at
+     * whatever `defaultCollapsed` says, with no way for the user to change it.
+     * Mobile is never affected either way (collapse is desktop-only).
+     */
+    collapsible?: boolean;
+    /** Initial collapsed state before any persisted value is read. Default `false`. */
+    defaultCollapsed?: boolean;
+    /** Fires with the new collapsed value whenever the user toggles the rail. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** localStorage key for the persisted collapsed preference. Default `"reeve-sidebar-collapsed"`. */
+    storageKey?: string;
     /** Merged onto the desktop `<aside>` itself — there is no extra wrapping
      *  element (see the render note below on why that matters for height). */
     className?: string;
@@ -355,7 +376,7 @@ interface AppSidebarProps {
  * dependency, matching ResponsiveHeader's existing disclosure pattern in
  * this same package.
  */
-declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, className, }: AppSidebarProps): react.JSX.Element;
+declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, collapsible, defaultCollapsed, onCollapsedChange, storageKey, className, }: AppSidebarProps): react.JSX.Element;
 
 /**
  * Minimal shape AppSidebar's fallback derivation needs from a module registry
@@ -436,6 +457,29 @@ interface FlyoutProps {
      * mirrors ResponsiveHeader's `linkComponent` prop (DEV-4429) exactly.
      */
     linkComponent?: ElementType;
+    /**
+     * Icon-only trigger for AppSidebar's collapsed (56px) rail (DEV-5331): the
+     * label collapses to a `sr-only` span (kept in the a11y tree) plus a native
+     * `title` tooltip — the package has no tooltip primitive and adding one
+     * (a Radix dep) is explicitly out of scope. The panel's own child rows are
+     * unaffected — they always show full labels regardless of this flag.
+     */
+    collapsed?: boolean;
+    /**
+     * Sibling-coordination hooks (DEV-5331 fix — Matt's live review found two
+     * folded-group flyouts open + overlapping at once, since each Flyout had
+     * zero awareness of its siblings). `onOpenChange` reports every open/
+     * closed transition of THIS instance's own hover/click intent — reported
+     * even while `forceClosed` is currently suppressing it, so a parent
+     * coordinator can learn "this one wants to open" and hand it the single
+     * active slot. `forceClosed` is set by that coordinator to immediately
+     * hide THIS instance (and reset its internal hover/click state) the
+     * instant a different sibling becomes the active one. Both optional and
+     * independent of each other — omitted, Flyout is fully standalone (its
+     * own state, unaware of any siblings), exactly as before.
+     */
+    onOpenChange?: (open: boolean) => void;
+    forceClosed?: boolean;
     className?: string;
 }
 /**
@@ -473,7 +517,7 @@ interface FlyoutProps {
  * than working around it. jsdom never computes real scrollable-overflow
  * geometry, so no unit test caught this — only an actual browser render did.
  */
-declare function Flyout({ label, icon, active, children, linkComponent, className }: FlyoutProps): react.JSX.Element;
+declare function Flyout({ label, icon, active, children, linkComponent, collapsed, onOpenChange, forceClosed, className, }: FlyoutProps): react.JSX.Element;
 
 /**
  * ContextSwitcher (DEV-4408) — promoted out of reeve-frontend's

package/dist/index.js

@@ -90,6 +90,7 @@ var WORDMARK_WEIGHT = 800;
 var WORDMARK_WEIGHT_CLASS = "font-extrabold";
 var WORDMARK_TEXT_LG = "text-base";
 var MONOGRAM_TEXT_LG = "text-[17px]";
+var MONOGRAM_TEXT_XL = "text-[26px]";
 var LOCKUP_GAP = "gap-2";
 var LOCKUP_ROW = "flex items-baseline";
 var GLYPH_CANVAS_FILL = 0.65;
@@ -129,9 +130,9 @@ function faviconUrl(domain) {
   return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=128`;
 }
 function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
-  const box = size === "lg" ? "h-6 w-6" : "h-5 w-5";
-  const img = size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
-  const dim = size === "lg" ? 16 : 14;
+  const box = size === "xl" ? "h-10 w-10" : size === "lg" ? "h-6 w-6" : "h-5 w-5";
+  const img = size === "xl" ? "h-7 w-7" : size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
+  const dim = size === "xl" ? 28 : size === "lg" ? 16 : 14;
   const candidates = [];
   if (brand.favicon) candidates.push(brand.favicon);
   if (brand.logo) candidates.push(brand.logo);
@@ -184,8 +185,10 @@ function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
         // DEV-5139 rule 2: at "lg" the letter runs 17px = the text-base
         // wordmark (16px) × MARK_CAP_RATIO (1.08) — a lone round glyph at
         // exact parity optically reads small. "sm" has no wordmark partner
-        // in its surfaces; SIZE unchanged pending a lockup audit there.
-        size === "lg" ? MONOGRAM_TEXT_LG : "text-[11px]",
+        // in its surfaces; unchanged pending a lockup audit there. "xl"
+        // (DEV-5331) is a standalone glyph with no wordmark at all — rule 5
+        // (GLYPH_CANVAS_FILL) governs it instead of rule 2.
+        size === "xl" ? MONOGRAM_TEXT_XL : size === "lg" ? MONOGRAM_TEXT_LG : "text-[11px]",
         box,
         className
       ),
@@ -752,11 +755,22 @@ function useLadderRung(ladder, containerRef, options = {}) {
 var import_react7 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var PANEL_GAP = 4;
-function Flyout({ label, icon, active, children, linkComponent, className }) {
+function Flyout({
+  label,
+  icon,
+  active,
+  children,
+  linkComponent,
+  collapsed = false,
+  onOpenChange,
+  forceClosed = false,
+  className
+}) {
   const [hoverOpen, setHoverOpen] = (0, import_react7.useState)(false);
   const [clickOpen, setClickOpen] = (0, import_react7.useState)(false);
   const [panelPosition, setPanelPosition] = (0, import_react7.useState)(null);
-  const open = hoverOpen || clickOpen;
+  const wantsOpen = hoverOpen || clickOpen;
+  const open = wantsOpen && !forceClosed;
   const panelId = (0, import_react7.useId)();
   const triggerRef = (0, import_react7.useRef)(null);
   const panelRef = (0, import_react7.useRef)(null);
@@ -768,6 +782,17 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) setPanelPosition({ top: rect.top, left: rect.right + PANEL_GAP });
   }, []);
+  const onOpenChangeRef = (0, import_react7.useRef)(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  (0, import_react7.useEffect)(() => {
+    onOpenChangeRef.current?.(wantsOpen);
+  }, [wantsOpen]);
+  (0, import_react7.useEffect)(() => {
+    if (forceClosed) {
+      setHoverOpen(false);
+      setClickOpen(false);
+    }
+  }, [forceClosed]);
   (0, import_react7.useLayoutEffect)(() => {
     if (open) reposition();
   }, [open, reposition]);
@@ -808,9 +833,11 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
             "data-testid": "ladder-flyout-trigger",
             "aria-expanded": open,
             "aria-controls": panelId,
+            title: collapsed ? label : void 0,
             onClick: () => setClickOpen((v) => !v),
             className: cn(
               "group flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+              collapsed && "justify-center px-0",
               active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
             ),
             children: [
@@ -822,7 +849,7 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate", children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
             ]
           }
         ),
@@ -873,6 +900,9 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
 
 // src/app-sidebar.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_COLLAPSE_STORAGE_KEY = "reeve-sidebar-collapsed";
+var COLLAPSED_WIDTH_CLASS = "w-14";
+var EXPANDED_WIDTH_CLASS = "w-64";
 function isHrefActive(href, activePath) {
   return activePath === href || activePath.startsWith(`${href}/`);
 }
@@ -882,7 +912,8 @@ function NavLink({
   icon,
   label,
   testId,
-  linkComponent
+  linkComponent,
+  collapsed = false
 }) {
   const Icon = resolveIcon(icon);
   const LinkEl = linkComponent ?? "a";
@@ -892,8 +923,10 @@ function NavLink({
       href,
       "data-testid": testId,
       "aria-current": active ? "page" : void 0,
+      title: collapsed ? label : void 0,
       className: cn(
         "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+        collapsed && "justify-center px-0",
         active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
       ),
       children: [
@@ -905,7 +938,7 @@ function NavLink({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
       ]
     }
   );
@@ -921,16 +954,54 @@ function AppSidebar({
   ladderOptions,
   linkComponent,
   isActive,
+  collapsible = true,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  storageKey = DEFAULT_COLLAPSE_STORAGE_KEY,
   className
 }) {
   const isActiveFn = isActive ?? isHrefActive;
   const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const [mobileOpen, setMobileOpen] = (0, import_react8.useState)(false);
   const containerRef = (0, import_react8.useRef)(null);
   const drawerId = (0, import_react8.useId)();
   const mobileTriggerRef = (0, import_react8.useRef)(null);
   const mobileDrawerRef = (0, import_react8.useRef)(null);
   const mobileCloseRef = (0, import_react8.useRef)(null);
+  const [collapsed, setCollapsed] = (0, import_react8.useState)(defaultCollapsed);
+  const [collapseHydrated, setCollapseHydrated] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    if (!collapsible) return;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "true") setCollapsed(true);
+      else if (stored === "false") setCollapsed(false);
+    } catch {
+    }
+    setCollapseHydrated(true);
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    if (!collapsible || !collapseHydrated) return;
+    try {
+      localStorage.setItem(storageKey, String(collapsed));
+    } catch {
+    }
+  }, [collapsed, collapseHydrated, collapsible, storageKey]);
+  function handleToggleCollapsed() {
+    setCollapsed((prev) => {
+      const next = !prev;
+      onCollapsedChange?.(next);
+      return next;
+    });
+  }
+  const [openFlyoutId, setOpenFlyoutId] = (0, import_react8.useState)(null);
+  const handleFlyoutOpenChange = (0, import_react8.useCallback)((id, isOpen) => {
+    setOpenFlyoutId((current) => {
+      if (isOpen) return id;
+      return current === id ? null : current;
+    });
+  }, []);
   const moduleMap = (0, import_react8.useMemo)(() => new Map(modules.map((m) => [m.moduleId, m])), [modules]);
   const registryForLadder = (0, import_react8.useMemo)(
     () => modules.map((m) => ({ moduleId: m.moduleId, group: m.group })),
@@ -952,7 +1023,7 @@ function AppSidebar({
     triggerRef: mobileTriggerRef,
     initialFocusRef: mobileCloseRef
   });
-  function renderAppItem(item, testIdPrefix) {
+  function renderAppItem(item, testIdPrefix, collapsedRow = false) {
     const def = moduleMap.get(item.moduleId);
     if (!def) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -963,12 +1034,13 @@ function AppSidebar({
         icon: def.icon,
         label: def.label,
         testId: `${testIdPrefix}-${item.moduleId}`,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedRow
       },
       item.moduleId
     );
   }
-  function renderGroupItem(item) {
+  function renderGroupItem(item, collapsedRow = false) {
     const children = item.children.map((moduleId) => {
       const def = moduleMap.get(moduleId);
       const href = def?.href ?? "#";
@@ -987,26 +1059,47 @@ function AppSidebar({
         icon: item.icon,
         active,
         children,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedRow,
+        forceClosed: openFlyoutId !== null && openFlyoutId !== item.id,
+        onOpenChange: (isOpen) => handleFlyoutOpenChange(item.id, isOpen)
       },
       item.id
     );
   }
-  const brandBlock = brand && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "a",
-    {
-      href: brand.href,
-      "data-testid": "app-sidebar-brand",
-      className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
-      ]
+  function brandBlockFor(collapsedMode) {
+    if (!brand) return null;
+    if (collapsedMode) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "a",
+        {
+          href: brand.href,
+          "data-testid": "app-sidebar-brand",
+          title: brand.label,
+          className: "flex items-center justify-center border-b border-border px-1 py-4",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: brand.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
+          ]
+        }
+      );
     }
-  );
-  function topItemBlock(testId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "a",
+      {
+        href: brand.href,
+        "data-testid": "app-sidebar-brand",
+        className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
+        ]
+      }
+    );
+  }
+  function topItemBlock(testId, collapsedMode = false) {
     if (!topItem) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-3 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("px-3 pt-4", collapsedMode && "flex justify-center px-0"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       NavLink,
       {
         href: topItem.href,
@@ -1014,7 +1107,8 @@ function AppSidebar({
         icon: topItem.icon,
         label: topItem.label,
         testId,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedMode
       }
     ) });
   }
@@ -1068,7 +1162,7 @@ function AppSidebar({
                 children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" })
               }
             ) }),
-            brandBlock,
+            brandBlockFor(false),
             topItemBlock("app-sidebar-mobile-top-item"),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: "flex-1 px-3 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-0.5", children: rung0.items.map(
               (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-mobile-navlink") : null
@@ -1081,19 +1175,47 @@ function AppSidebar({
       "aside",
       {
         "data-testid": "app-sidebar-desktop",
-        className: cn("hidden w-64 shrink-0 flex-col border-r border-border bg-sidebar md:flex", className),
+        className: cn(
+          "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
+          collapsed ? COLLAPSED_WIDTH_CLASS : EXPANDED_WIDTH_CLASS,
+          // DEV-5331: a plain CSS width transition is enough — no new deps
+          // for a spring/JS animation. Respect prefers-reduced-motion.
+          !prefersReducedMotion && "transition-[width] duration-200 ease-out",
+          className
+        ),
         children: [
-          brandBlock,
-          topItemBlock("app-sidebar-top-item"),
+          brandBlockFor(collapsed),
+          topItemBlock("app-sidebar-top-item", collapsed),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "nav",
             {
               ref: containerRef,
               "data-testid": "app-sidebar-nav",
               className: "flex-1 overflow-y-auto px-3 py-4",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-0.5", children: rung.items.map((item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink") : renderGroupItem(item)) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-0.5", children: rung.items.map(
+                (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink", collapsed) : renderGroupItem(item, collapsed)
+              ) })
             }
-          )
+          ),
+          collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              type: "button",
+              "data-testid": "app-sidebar-collapse-toggle",
+              "aria-pressed": collapsed,
+              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+              onClick: handleToggleCollapsed,
+              className: cn(
+                "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
+                collapsed && "justify-center px-0"
+              ),
+              children: [
+                collapsed ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.PanelLeftOpen, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.PanelLeftClose, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("truncate", collapsed && "sr-only"), children: collapsed ? "Expand sidebar" : "Collapse sidebar" })
+              ]
+            }
+          ) })
         ]
       }
     )

package/dist/index.mjs

@@ -36,6 +36,7 @@ var WORDMARK_WEIGHT = 800;
 var WORDMARK_WEIGHT_CLASS = "font-extrabold";
 var WORDMARK_TEXT_LG = "text-base";
 var MONOGRAM_TEXT_LG = "text-[17px]";
+var MONOGRAM_TEXT_XL = "text-[26px]";
 var LOCKUP_GAP = "gap-2";
 var LOCKUP_ROW = "flex items-baseline";
 var GLYPH_CANVAS_FILL = 0.65;
@@ -75,9 +76,9 @@ function faviconUrl(domain) {
   return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=128`;
 }
 function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
-  const box = size === "lg" ? "h-6 w-6" : "h-5 w-5";
-  const img = size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
-  const dim = size === "lg" ? 16 : 14;
+  const box = size === "xl" ? "h-10 w-10" : size === "lg" ? "h-6 w-6" : "h-5 w-5";
+  const img = size === "xl" ? "h-7 w-7" : size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
+  const dim = size === "xl" ? 28 : size === "lg" ? 16 : 14;
   const candidates = [];
   if (brand.favicon) candidates.push(brand.favicon);
   if (brand.logo) candidates.push(brand.logo);
@@ -130,8 +131,10 @@ function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
         // DEV-5139 rule 2: at "lg" the letter runs 17px = the text-base
         // wordmark (16px) × MARK_CAP_RATIO (1.08) — a lone round glyph at
         // exact parity optically reads small. "sm" has no wordmark partner
-        // in its surfaces; SIZE unchanged pending a lockup audit there.
-        size === "lg" ? MONOGRAM_TEXT_LG : "text-[11px]",
+        // in its surfaces; unchanged pending a lockup audit there. "xl"
+        // (DEV-5331) is a standalone glyph with no wordmark at all — rule 5
+        // (GLYPH_CANVAS_FILL) governs it instead of rule 2.
+        size === "xl" ? MONOGRAM_TEXT_XL : size === "lg" ? MONOGRAM_TEXT_LG : "text-[11px]",
         box,
         className
       ),
@@ -415,8 +418,8 @@ function useResponsivePlaceholder(desktop, mobile) {
 }
 
 // src/app-sidebar.tsx
-import { useEffect as useEffect5, useId as useId3, useMemo, useRef as useRef4, useState as useState6 } from "react";
-import { Menu as Menu2, X as X2 } from "lucide-react";
+import { useCallback as useCallback3, useEffect as useEffect5, useId as useId3, useMemo, useRef as useRef4, useState as useState6 } from "react";
+import { Menu as Menu2, PanelLeftClose, PanelLeftOpen, X as X2 } from "lucide-react";
 
 // src/lib/resolve-icon.ts
 import * as LucideIcons from "lucide-react";
@@ -698,11 +701,22 @@ function useLadderRung(ladder, containerRef, options = {}) {
 import { useCallback as useCallback2, useEffect as useEffect4, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var PANEL_GAP = 4;
-function Flyout({ label, icon, active, children, linkComponent, className }) {
+function Flyout({
+  label,
+  icon,
+  active,
+  children,
+  linkComponent,
+  collapsed = false,
+  onOpenChange,
+  forceClosed = false,
+  className
+}) {
   const [hoverOpen, setHoverOpen] = useState5(false);
   const [clickOpen, setClickOpen] = useState5(false);
   const [panelPosition, setPanelPosition] = useState5(null);
-  const open = hoverOpen || clickOpen;
+  const wantsOpen = hoverOpen || clickOpen;
+  const open = wantsOpen && !forceClosed;
   const panelId = useId2();
   const triggerRef = useRef3(null);
   const panelRef = useRef3(null);
@@ -714,6 +728,17 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) setPanelPosition({ top: rect.top, left: rect.right + PANEL_GAP });
   }, []);
+  const onOpenChangeRef = useRef3(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  useEffect4(() => {
+    onOpenChangeRef.current?.(wantsOpen);
+  }, [wantsOpen]);
+  useEffect4(() => {
+    if (forceClosed) {
+      setHoverOpen(false);
+      setClickOpen(false);
+    }
+  }, [forceClosed]);
   useLayoutEffect2(() => {
     if (open) reposition();
   }, [open, reposition]);
@@ -754,9 +779,11 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
             "data-testid": "ladder-flyout-trigger",
             "aria-expanded": open,
             "aria-controls": panelId,
+            title: collapsed ? label : void 0,
             onClick: () => setClickOpen((v) => !v),
             className: cn(
               "group flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+              collapsed && "justify-center px-0",
               active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
             ),
             children: [
@@ -768,7 +795,7 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ jsx3("span", { className: "truncate", children: label })
+              /* @__PURE__ */ jsx3("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
             ]
           }
         ),
@@ -819,6 +846,9 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
 
 // src/app-sidebar.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_COLLAPSE_STORAGE_KEY = "reeve-sidebar-collapsed";
+var COLLAPSED_WIDTH_CLASS = "w-14";
+var EXPANDED_WIDTH_CLASS = "w-64";
 function isHrefActive(href, activePath) {
   return activePath === href || activePath.startsWith(`${href}/`);
 }
@@ -828,7 +858,8 @@ function NavLink({
   icon,
   label,
   testId,
-  linkComponent
+  linkComponent,
+  collapsed = false
 }) {
   const Icon = resolveIcon(icon);
   const LinkEl = linkComponent ?? "a";
@@ -838,8 +869,10 @@ function NavLink({
       href,
       "data-testid": testId,
       "aria-current": active ? "page" : void 0,
+      title: collapsed ? label : void 0,
       className: cn(
         "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+        collapsed && "justify-center px-0",
         active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
       ),
       children: [
@@ -851,7 +884,7 @@ function NavLink({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx4("span", { className: "truncate", children: label })
+        /* @__PURE__ */ jsx4("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
       ]
     }
   );
@@ -867,16 +900,54 @@ function AppSidebar({
   ladderOptions,
   linkComponent,
   isActive,
+  collapsible = true,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  storageKey = DEFAULT_COLLAPSE_STORAGE_KEY,
   className
 }) {
   const isActiveFn = isActive ?? isHrefActive;
   const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const [mobileOpen, setMobileOpen] = useState6(false);
   const containerRef = useRef4(null);
   const drawerId = useId3();
   const mobileTriggerRef = useRef4(null);
   const mobileDrawerRef = useRef4(null);
   const mobileCloseRef = useRef4(null);
+  const [collapsed, setCollapsed] = useState6(defaultCollapsed);
+  const [collapseHydrated, setCollapseHydrated] = useState6(false);
+  useEffect5(() => {
+    if (!collapsible) return;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "true") setCollapsed(true);
+      else if (stored === "false") setCollapsed(false);
+    } catch {
+    }
+    setCollapseHydrated(true);
+  }, []);
+  useEffect5(() => {
+    if (!collapsible || !collapseHydrated) return;
+    try {
+      localStorage.setItem(storageKey, String(collapsed));
+    } catch {
+    }
+  }, [collapsed, collapseHydrated, collapsible, storageKey]);
+  function handleToggleCollapsed() {
+    setCollapsed((prev) => {
+      const next = !prev;
+      onCollapsedChange?.(next);
+      return next;
+    });
+  }
+  const [openFlyoutId, setOpenFlyoutId] = useState6(null);
+  const handleFlyoutOpenChange = useCallback3((id, isOpen) => {
+    setOpenFlyoutId((current) => {
+      if (isOpen) return id;
+      return current === id ? null : current;
+    });
+  }, []);
   const moduleMap = useMemo(() => new Map(modules.map((m) => [m.moduleId, m])), [modules]);
   const registryForLadder = useMemo(
     () => modules.map((m) => ({ moduleId: m.moduleId, group: m.group })),
@@ -898,7 +969,7 @@ function AppSidebar({
     triggerRef: mobileTriggerRef,
     initialFocusRef: mobileCloseRef
   });
-  function renderAppItem(item, testIdPrefix) {
+  function renderAppItem(item, testIdPrefix, collapsedRow = false) {
     const def = moduleMap.get(item.moduleId);
     if (!def) return null;
     return /* @__PURE__ */ jsx4(
@@ -909,12 +980,13 @@ function AppSidebar({
         icon: def.icon,
         label: def.label,
         testId: `${testIdPrefix}-${item.moduleId}`,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedRow
       },
       item.moduleId
     );
   }
-  function renderGroupItem(item) {
+  function renderGroupItem(item, collapsedRow = false) {
     const children = item.children.map((moduleId) => {
       const def = moduleMap.get(moduleId);
       const href = def?.href ?? "#";
@@ -933,26 +1005,47 @@ function AppSidebar({
         icon: item.icon,
         active,
         children,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedRow,
+        forceClosed: openFlyoutId !== null && openFlyoutId !== item.id,
+        onOpenChange: (isOpen) => handleFlyoutOpenChange(item.id, isOpen)
       },
       item.id
     );
   }
-  const brandBlock = brand && /* @__PURE__ */ jsxs4(
-    "a",
-    {
-      href: brand.href,
-      "data-testid": "app-sidebar-brand",
-      className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
-      children: [
-        /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
-        /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
-      ]
+  function brandBlockFor(collapsedMode) {
+    if (!brand) return null;
+    if (collapsedMode) {
+      return /* @__PURE__ */ jsxs4(
+        "a",
+        {
+          href: brand.href,
+          "data-testid": "app-sidebar-brand",
+          title: brand.label,
+          className: "flex items-center justify-center border-b border-border px-1 py-4",
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "sr-only", children: brand.label }),
+            /* @__PURE__ */ jsx4(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
+          ]
+        }
+      );
     }
-  );
-  function topItemBlock(testId) {
+    return /* @__PURE__ */ jsxs4(
+      "a",
+      {
+        href: brand.href,
+        "data-testid": "app-sidebar-brand",
+        className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
+          /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
+        ]
+      }
+    );
+  }
+  function topItemBlock(testId, collapsedMode = false) {
     if (!topItem) return null;
-    return /* @__PURE__ */ jsx4("div", { className: "px-3 pt-4", children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx4("div", { className: cn("px-3 pt-4", collapsedMode && "flex justify-center px-0"), children: /* @__PURE__ */ jsx4(
       NavLink,
       {
         href: topItem.href,
@@ -960,7 +1053,8 @@ function AppSidebar({
         icon: topItem.icon,
         label: topItem.label,
         testId,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedMode
       }
     ) });
   }
@@ -1014,7 +1108,7 @@ function AppSidebar({
                 children: /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" })
               }
             ) }),
-            brandBlock,
+            brandBlockFor(false),
             topItemBlock("app-sidebar-mobile-top-item"),
             /* @__PURE__ */ jsx4("nav", { className: "flex-1 px-3 py-4", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung0.items.map(
               (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-mobile-navlink") : null
@@ -1027,19 +1121,47 @@ function AppSidebar({
       "aside",
       {
         "data-testid": "app-sidebar-desktop",
-        className: cn("hidden w-64 shrink-0 flex-col border-r border-border bg-sidebar md:flex", className),
+        className: cn(
+          "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
+          collapsed ? COLLAPSED_WIDTH_CLASS : EXPANDED_WIDTH_CLASS,
+          // DEV-5331: a plain CSS width transition is enough — no new deps
+          // for a spring/JS animation. Respect prefers-reduced-motion.
+          !prefersReducedMotion && "transition-[width] duration-200 ease-out",
+          className
+        ),
         children: [
-          brandBlock,
-          topItemBlock("app-sidebar-top-item"),
+          brandBlockFor(collapsed),
+          topItemBlock("app-sidebar-top-item", collapsed),
           /* @__PURE__ */ jsx4(
             "nav",
             {
               ref: containerRef,
               "data-testid": "app-sidebar-nav",
               className: "flex-1 overflow-y-auto px-3 py-4",
-              children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung.items.map((item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink") : renderGroupItem(item)) })
+              children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung.items.map(
+                (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink", collapsed) : renderGroupItem(item, collapsed)
+              ) })
             }
-          )
+          ),
+          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              "data-testid": "app-sidebar-collapse-toggle",
+              "aria-pressed": collapsed,
+              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+              onClick: handleToggleCollapsed,
+              className: cn(
+                "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
+                collapsed && "justify-center px-0"
+              ),
+              children: [
+                collapsed ? /* @__PURE__ */ jsx4(PanelLeftOpen, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }) : /* @__PURE__ */ jsx4(PanelLeftClose, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx4("span", { className: cn("truncate", collapsed && "sr-only"), children: collapsed ? "Expand sidebar" : "Collapse sidebar" })
+              ]
+            }
+          ) })
         ]
       }
     )

package/dist/lockup/index.d.mts

@@ -0,0 +1,79 @@
+/**
+ * Brand lockup metric rules (DEV-5139) — the single source of truth for how a
+ * lettermark relates to its wordmark. Grounded in standard identity-system
+ * practice: the measurement unit for a lockup is the WORDMARK'S CAP HEIGHT,
+ * proportions are locked as ratios, and the pieces share one baseline.
+ *
+ * Rules v1:
+ *  1. Baseline lock — mark, accent dot, and wordmark sit on ONE shared
+ *     baseline. Flex `items-baseline` in the lockup; never `items-center`
+ *     for text marks (center-aligning boxes ≠ aligning baselines — measured
+ *     3px baseline float on cadasense, DEV-5139).
+ *  2. Cap-height parity + optical overshoot — the mark's cap height is
+ *     MARK_CAP_RATIO × the wordmark's cap height. A lone round glyph
+ *     (C/G/O/Q/S) optically undershoots flat caps, so exact parity reads
+ *     small; 1.08 restores perceived equality (measured 0.93 before).
+ *  3. Lockup gap — mark→wordmark gap is 0.5–0.8× the wordmark cap height.
+ *  4. Clearspace — ≥1 cap height of empty space around the whole lockup
+ *     (the header's own padding satisfies this; consumers embedding the
+ *     lockup elsewhere own the rule).
+ *  5. Standalone glyph fill — on a square canvas (favicon, avatar), the
+ *     letter's cap height is ~60–70% of the canvas edge; ghost-tile below
+ *     20px (DEV-4539).
+ *  6. Ratios are locked — scale the lockup uniformly; never resize one
+ *     element of it. These constants are that lock.
+ *
+ * The generated-asset pipeline (reeve-services brand_identity
+ * svg_templates) mirrors these values — see DEV-5140. Change them together.
+ */
+/** Rule 2 — mark cap height ÷ wordmark cap height. */
+declare const MARK_CAP_RATIO = 1.08;
+/**
+ * Rule 7 (DEV-5340) — family construction weights, pixel-matched to the
+ * asset family (reeve-mark.svg, MindFortress "M." v2, reeve-services
+ * svg_templates): the mark is Black (900), the wordmark ExtraBold (800).
+ * The live-DOM lockup previously ran both at semibold (600) — Matt's
+ * measured "too thin" on cadasense. Numeric constants are the spec; the
+ * *_CLASS twins are the Tailwind application. The generated-asset pipeline
+ * mirrors the numeric values — see DEV-5140. Change them together.
+ */
+declare const MARK_WEIGHT = 900;
+declare const MARK_WEIGHT_CLASS = "font-black";
+declare const WORDMARK_WEIGHT = 800;
+declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
+/**
+ * Rule 2 + rule 6, applied (DEV-5340 scale-up): the header wordmark runs
+ * `text-base` (16px) — family scale; text-sm (14px) measured visibly under
+ * the MindFortress navbar mark — so the monogram letter renders at
+ * 16 × MARK_CAP_RATIO ≈ 17.3 → 17px. Same font family, and weight does not
+ * move cap height (900 vs 800 differ only in stroke), so equal font-size ⇒
+ * equal cap height; the ratio rides the font-size.
+ */
+declare const WORDMARK_TEXT_LG = "text-base";
+declare const MONOGRAM_TEXT_LG = "text-[17px]";
+/**
+ * "xl" — a bare, STANDALONE glyph slot with no adjacent wordmark at all
+ * (e.g. AppSidebar's collapsed 56px icon rail, DEV-5331 — Matt's live
+ * review found the "lg" monogram too small there). No wordmark to pair
+ * with means rule 2 (MARK_CAP_RATIO) doesn't apply; rule 5
+ * (GLYPH_CANVAS_FILL) does instead — same governing rule as a favicon/
+ * avatar tile. Canvas = 40px (`h-10 w-10`); letter cap height = 40 ×
+ * GLYPH_CANVAS_FILL (0.65) = 26px, landing in Matt's requested ~24-28px
+ * range for a rail comfortably wider than the glyph itself.
+ */
+declare const MONOGRAM_TEXT_XL = "text-[26px]";
+/**
+ * Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
+ * text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
+ * per-surface.
+ */
+declare const LOCKUP_GAP = "gap-2";
+/**
+ * Rule 1, applied: the lockup is one locked unit — baseline-aligned inside,
+ * centered as a whole by whatever wraps it (e.g. a touch target).
+ */
+declare const LOCKUP_ROW = "flex items-baseline";
+/** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
+declare const GLYPH_CANVAS_FILL = 0.65;
+
+export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, MONOGRAM_TEXT_XL, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };

package/dist/lockup/index.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Brand lockup metric rules (DEV-5139) — the single source of truth for how a
+ * lettermark relates to its wordmark. Grounded in standard identity-system
+ * practice: the measurement unit for a lockup is the WORDMARK'S CAP HEIGHT,
+ * proportions are locked as ratios, and the pieces share one baseline.
+ *
+ * Rules v1:
+ *  1. Baseline lock — mark, accent dot, and wordmark sit on ONE shared
+ *     baseline. Flex `items-baseline` in the lockup; never `items-center`
+ *     for text marks (center-aligning boxes ≠ aligning baselines — measured
+ *     3px baseline float on cadasense, DEV-5139).
+ *  2. Cap-height parity + optical overshoot — the mark's cap height is
+ *     MARK_CAP_RATIO × the wordmark's cap height. A lone round glyph
+ *     (C/G/O/Q/S) optically undershoots flat caps, so exact parity reads
+ *     small; 1.08 restores perceived equality (measured 0.93 before).
+ *  3. Lockup gap — mark→wordmark gap is 0.5–0.8× the wordmark cap height.
+ *  4. Clearspace — ≥1 cap height of empty space around the whole lockup
+ *     (the header's own padding satisfies this; consumers embedding the
+ *     lockup elsewhere own the rule).
+ *  5. Standalone glyph fill — on a square canvas (favicon, avatar), the
+ *     letter's cap height is ~60–70% of the canvas edge; ghost-tile below
+ *     20px (DEV-4539).
+ *  6. Ratios are locked — scale the lockup uniformly; never resize one
+ *     element of it. These constants are that lock.
+ *
+ * The generated-asset pipeline (reeve-services brand_identity
+ * svg_templates) mirrors these values — see DEV-5140. Change them together.
+ */
+/** Rule 2 — mark cap height ÷ wordmark cap height. */
+declare const MARK_CAP_RATIO = 1.08;
+/**
+ * Rule 7 (DEV-5340) — family construction weights, pixel-matched to the
+ * asset family (reeve-mark.svg, MindFortress "M." v2, reeve-services
+ * svg_templates): the mark is Black (900), the wordmark ExtraBold (800).
+ * The live-DOM lockup previously ran both at semibold (600) — Matt's
+ * measured "too thin" on cadasense. Numeric constants are the spec; the
+ * *_CLASS twins are the Tailwind application. The generated-asset pipeline
+ * mirrors the numeric values — see DEV-5140. Change them together.
+ */
+declare const MARK_WEIGHT = 900;
+declare const MARK_WEIGHT_CLASS = "font-black";
+declare const WORDMARK_WEIGHT = 800;
+declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
+/**
+ * Rule 2 + rule 6, applied (DEV-5340 scale-up): the header wordmark runs
+ * `text-base` (16px) — family scale; text-sm (14px) measured visibly under
+ * the MindFortress navbar mark — so the monogram letter renders at
+ * 16 × MARK_CAP_RATIO ≈ 17.3 → 17px. Same font family, and weight does not
+ * move cap height (900 vs 800 differ only in stroke), so equal font-size ⇒
+ * equal cap height; the ratio rides the font-size.
+ */
+declare const WORDMARK_TEXT_LG = "text-base";
+declare const MONOGRAM_TEXT_LG = "text-[17px]";
+/**
+ * "xl" — a bare, STANDALONE glyph slot with no adjacent wordmark at all
+ * (e.g. AppSidebar's collapsed 56px icon rail, DEV-5331 — Matt's live
+ * review found the "lg" monogram too small there). No wordmark to pair
+ * with means rule 2 (MARK_CAP_RATIO) doesn't apply; rule 5
+ * (GLYPH_CANVAS_FILL) does instead — same governing rule as a favicon/
+ * avatar tile. Canvas = 40px (`h-10 w-10`); letter cap height = 40 ×
+ * GLYPH_CANVAS_FILL (0.65) = 26px, landing in Matt's requested ~24-28px
+ * range for a rail comfortably wider than the glyph itself.
+ */
+declare const MONOGRAM_TEXT_XL = "text-[26px]";
+/**
+ * Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
+ * text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
+ * per-surface.
+ */
+declare const LOCKUP_GAP = "gap-2";
+/**
+ * Rule 1, applied: the lockup is one locked unit — baseline-aligned inside,
+ * centered as a whole by whatever wraps it (e.g. a touch target).
+ */
+declare const LOCKUP_ROW = "flex items-baseline";
+/** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
+declare const GLYPH_CANVAS_FILL = 0.65;
+
+export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, MONOGRAM_TEXT_XL, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };

package/dist/lockup/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/lockup.ts
+var lockup_exports = {};
+__export(lockup_exports, {
+  GLYPH_CANVAS_FILL: () => GLYPH_CANVAS_FILL,
+  LOCKUP_GAP: () => LOCKUP_GAP,
+  LOCKUP_ROW: () => LOCKUP_ROW,
+  MARK_CAP_RATIO: () => MARK_CAP_RATIO,
+  MARK_WEIGHT: () => MARK_WEIGHT,
+  MARK_WEIGHT_CLASS: () => MARK_WEIGHT_CLASS,
+  MONOGRAM_TEXT_LG: () => MONOGRAM_TEXT_LG,
+  MONOGRAM_TEXT_XL: () => MONOGRAM_TEXT_XL,
+  WORDMARK_TEXT_LG: () => WORDMARK_TEXT_LG,
+  WORDMARK_WEIGHT: () => WORDMARK_WEIGHT,
+  WORDMARK_WEIGHT_CLASS: () => WORDMARK_WEIGHT_CLASS
+});
+module.exports = __toCommonJS(lockup_exports);
+var MARK_CAP_RATIO = 1.08;
+var MARK_WEIGHT = 900;
+var MARK_WEIGHT_CLASS = "font-black";
+var WORDMARK_WEIGHT = 800;
+var WORDMARK_WEIGHT_CLASS = "font-extrabold";
+var WORDMARK_TEXT_LG = "text-base";
+var MONOGRAM_TEXT_LG = "text-[17px]";
+var MONOGRAM_TEXT_XL = "text-[26px]";
+var LOCKUP_GAP = "gap-2";
+var LOCKUP_ROW = "flex items-baseline";
+var GLYPH_CANVAS_FILL = 0.65;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GLYPH_CANVAS_FILL,
+  LOCKUP_GAP,
+  LOCKUP_ROW,
+  MARK_CAP_RATIO,
+  MARK_WEIGHT,
+  MARK_WEIGHT_CLASS,
+  MONOGRAM_TEXT_LG,
+  MONOGRAM_TEXT_XL,
+  WORDMARK_TEXT_LG,
+  WORDMARK_WEIGHT,
+  WORDMARK_WEIGHT_CLASS
+});

package/dist/lockup/index.mjs

@@ -0,0 +1,25 @@
+// src/lib/lockup.ts
+var MARK_CAP_RATIO = 1.08;
+var MARK_WEIGHT = 900;
+var MARK_WEIGHT_CLASS = "font-black";
+var WORDMARK_WEIGHT = 800;
+var WORDMARK_WEIGHT_CLASS = "font-extrabold";
+var WORDMARK_TEXT_LG = "text-base";
+var MONOGRAM_TEXT_LG = "text-[17px]";
+var MONOGRAM_TEXT_XL = "text-[26px]";
+var LOCKUP_GAP = "gap-2";
+var LOCKUP_ROW = "flex items-baseline";
+var GLYPH_CANVAS_FILL = 0.65;
+export {
+  GLYPH_CANVAS_FILL,
+  LOCKUP_GAP,
+  LOCKUP_ROW,
+  MARK_CAP_RATIO,
+  MARK_WEIGHT,
+  MARK_WEIGHT_CLASS,
+  MONOGRAM_TEXT_LG,
+  MONOGRAM_TEXT_XL,
+  WORDMARK_TEXT_LG,
+  WORDMARK_WEIGHT,
+  WORDMARK_WEIGHT_CLASS
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
@@ -17,6 +17,11 @@
       "import": "./dist/tokens/index.mjs",
       "require": "./dist/tokens/index.js"
     },
+    "./lockup": {
+      "types": "./dist/lockup/index.d.ts",
+      "import": "./dist/lockup/index.mjs",
+      "require": "./dist/lockup/index.js"
+    },
     "./tokens.css": "./dist/tokens.css"
   },
   "files": [