@the-portland-company/shell 0.11.3 → 0.12.0

package/dist/chunk-2GFWARYP.js

@@ -0,0 +1,49 @@
+import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap } from 'react-icons/fi';
+import { useState, useEffect } from 'react';
+
+// src/lib/brandGlyphs.tsx
+var GLYPHS = {
+  bolt: FiZap,
+  zap: FiZap,
+  grid: FiGrid,
+  apps: FiGrid,
+  bell: FiBell,
+  notification: FiBell,
+  "alert-triangle": FiAlertTriangle,
+  alert: FiAlertTriangle,
+  "alert-circle": FiAlertCircle,
+  "life-buoy": FiLifeBuoy,
+  "life-ring": FiLifeBuoy,
+  support: FiLifeBuoy,
+  "help-circle": FiHelpCircle,
+  moon: FiMoon,
+  sun: FiSun,
+  info: FiInfo,
+  mail: FiMail,
+  "message-square": FiMessageSquare,
+  settings: FiSettings,
+  user: FiUser
+};
+function resolveBrandGlyph(name) {
+  if (!name) return null;
+  return GLYPHS[name.trim().toLowerCase()] ?? null;
+}
+function useTopBarIconSlotGlyph(slot) {
+  const [name, setName] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const read = () => {
+      const raw = window.getComputedStyle(document.documentElement).getPropertyValue(`--topbar-icon-${slot}`).trim().replace(/^['"]|['"]$/g, "");
+      setName(raw.length > 0 ? raw : null);
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(document.head, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [slot]);
+  return name;
+}
+
+export { resolveBrandGlyph, useTopBarIconSlotGlyph };
+//# sourceMappingURL=chunk-2GFWARYP.js.map
+//# sourceMappingURL=chunk-2GFWARYP.js.map

package/dist/chunk-2GFWARYP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/brandGlyphs.tsx","../src/lib/topbarIconSlot.ts"],"names":[],"mappings":";;;;AAgCA,IAAM,MAAA,GAAyC;AAAA,EAC7C,IAAA,EAAM,KAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,YAAA,EAAc,MAAA;AAAA,EACd,gBAAA,EAAkB,eAAA;AAAA,EAClB,KAAA,EAAO,eAAA;AAAA,EACP,cAAA,EAAgB,aAAA;AAAA,EAChB,WAAA,EAAa,UAAA;AAAA,EACb,WAAA,EAAa,UAAA;AAAA,EACb,OAAA,EAAS,UAAA;AAAA,EACT,aAAA,EAAe,YAAA;AAAA,EACf,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,gBAAA,EAAkB,eAAA;AAAA,EAClB,QAAA,EAAU,UAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AAOO,SAAS,kBAAkB,IAAA,EAAwD;AACxF,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAClB,EAAA,OAAO,OAAO,IAAA,CAAK,IAAA,EAAK,CAAE,WAAA,EAAa,CAAA,IAAK,IAAA;AAC9C;AClCO,SAAS,uBAAuB,IAAA,EAAqC;AAC1E,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAwB,IAAI,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AAEnC,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,MAAM,GAAA,GAAM,MAAA,CACT,gBAAA,CAAiB,QAAA,CAAS,eAAe,CAAA,CACzC,gBAAA,CAAiB,CAAA,cAAA,EAAiB,IAAI,EAAE,CAAA,CACxC,IAAA,EAAK,CAEL,OAAA,CAAQ,gBAAgB,EAAE,CAAA;AAC7B,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAA,GAAS,CAAA,GAAI,GAAA,GAAM,IAAI,CAAA;AAAA,IACrC,CAAA;AAEA,IAAA,IAAA,EAAK;AAEL,IAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,IAAI,CAAA;AAC1C,IAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,IAAA,EAAM,EAAE,WAAW,IAAA,EAAM,OAAA,EAAS,MAAM,CAAA;AAClE,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,OAAO,IAAA;AACT","file":"chunk-2GFWARYP.js","sourcesContent":["import type { ComponentType } from 'react'\nimport {\n  FiAlertCircle,\n  FiAlertTriangle,\n  FiBell,\n  FiGrid,\n  FiHelpCircle,\n  FiInfo,\n  FiLifeBuoy,\n  FiMail,\n  FiMessageSquare,\n  FiMoon,\n  FiSettings,\n  FiSun,\n  FiUser,\n  FiZap,\n} from 'react-icons/fi'\n\nexport type GlyphComponent = ComponentType<{ size?: number | string; className?: string }>\n\n/**\n * Brand-glyph registry: maps the icon NAME the Brand API emits (e.g.\n * `--topbar-icon-comms-fuel: bolt`) to a component.\n *\n * These names are Feather/Lucide icon names, NOT asset filenames — there is no\n * `/brand/icons/<name>.svg` for them in any app, and treating them as URLs\n * renders a broken image. Resolving them against the icon library the shell\n * already depends on keeps every app consistent with zero vendored assets.\n *\n * Aliases are included where Brand and Feather disagree on a name (`bolt` vs\n * `zap`, `life-buoy` vs `life-ring`).\n */\nconst GLYPHS: Record<string, GlyphComponent> = {\n  bolt: FiZap,\n  zap: FiZap,\n  grid: FiGrid,\n  apps: FiGrid,\n  bell: FiBell,\n  notification: FiBell,\n  'alert-triangle': FiAlertTriangle,\n  alert: FiAlertTriangle,\n  'alert-circle': FiAlertCircle,\n  'life-buoy': FiLifeBuoy,\n  'life-ring': FiLifeBuoy,\n  support: FiLifeBuoy,\n  'help-circle': FiHelpCircle,\n  moon: FiMoon,\n  sun: FiSun,\n  info: FiInfo,\n  mail: FiMail,\n  'message-square': FiMessageSquare,\n  settings: FiSettings,\n  user: FiUser,\n}\n\n/**\n * Resolve a Brand glyph name to a component. Returns null for an unknown name\n * so the caller renders its own fallback — an unrecognized token must never\n * produce a broken or empty icon.\n */\nexport function resolveBrandGlyph(name: string | null | undefined): GlyphComponent | null {\n  if (!name) return null\n  return GLYPHS[name.trim().toLowerCase()] ?? null\n}\n\n/** Names the registry knows — exported for tests and tooling. */\nexport const KNOWN_BRAND_GLYPHS = Object.keys(GLYPHS)\n","import { useEffect, useState } from 'react'\n\n/**\n * The six canonical top-bar action slots (Reference/Global-Rules v9 → top-bar\n * icons). Each slot's GLYPH is unique and comes from the Brand API\n * `topbarIcons.items.*` tokens, exposed as `--topbar-icon-<slot>` CSS vars\n * whose value is the brand-icon NAME. Every OTHER property — size, gap, color,\n * hover, selected — is universal across all six slots.\n */\nexport type TopBarIconSlot =\n  | 'comms-fuel'\n  | 'apps'\n  | 'notifications'\n  | 'alerts'\n  | 'support'\n  | 'dark-mode'\n\n/**\n * Reads the glyph NAME for a slot from its `--topbar-icon-<slot>` CSS var.\n *\n * Runs in an effect because the Brand stylesheet is appended to <head> at\n * runtime (Global Rules forbids baking it into the build), so the var is not\n * resolvable during SSR or the first synchronous render. The MutationObserver\n * re-reads once the stylesheet lands so the glyph upgrades from the caller's\n * fallback without a reload.\n *\n * Returns null when the slot has no Brand glyph — callers render their own\n * fallback icon in that case.\n */\nexport function useTopBarIconSlotGlyph(slot: TopBarIconSlot): string | null {\n  const [name, setName] = useState<string | null>(null)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    const read = () => {\n      const raw = window\n        .getComputedStyle(document.documentElement)\n        .getPropertyValue(`--topbar-icon-${slot}`)\n        .trim()\n        // Brand may emit the name quoted (e.g. \"bell\"); strip the quotes.\n        .replace(/^['\"]|['\"]$/g, '')\n      setName(raw.length > 0 ? raw : null)\n    }\n\n    read()\n\n    const observer = new MutationObserver(read)\n    observer.observe(document.head, { childList: true, subtree: true })\n    return () => observer.disconnect()\n  }, [slot])\n\n  return name\n}\n\n/** Path to a brand-icon SVG in the consuming app's public dir. */\nexport function brandIconSrc(name: string, basePath = '/brand/icons/') {\n  return `${basePath}${name}.svg`\n}\n"]}

package/dist/index.cjs

@@ -1653,9 +1653,10 @@ function NavItem({
   const hasActiveChild = Array.isArray(subItems) && subItems.some((item) => matchesSubItem(item.href || ""));
   const isParentActive = isActive || hasActiveChild;
   const isSubMenuOpen = isExpanded !== void 0 ? isExpanded : hasSubItems && subItems.some((item) => matchesSubItem(item.href || ""));
-  const expandedRowBg = isParentActive ? modeConfig?.primaryColor || "brand.500" : isSubMenuOpen ? "gray.100" : "transparent";
-  const expandedRowTextColor = isParentActive ? "white" : isSubMenuOpen ? "gray.900" : "gray.600";
-  const disabledRowBg = isSubItem ? "gray.50" : "transparent";
+  const submenuBg = "var(--sidebar-submenu-bg, #F1F5F9)";
+  const expandedRowBg = isParentActive ? modeConfig?.primaryColor || "brand.500" : isSubMenuOpen ? submenuBg : "transparent";
+  const expandedRowTextColor = isParentActive ? "white" : isSubMenuOpen ? "var(--sidebar-text, #1A202C)" : "var(--sidebar-text-muted, #4A5568)";
+  const disabledRowBg = isSubItem ? submenuBg : "transparent";
   const disabledRowTextColor = "gray.400";
   const renderIcon = (activeForHover) => {
     if (brandIcon) {
@@ -1708,8 +1709,8 @@ function NavItem({
           bg: isDisabled ? disabledRowBg : expandedRowBg,
           color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
           _hover: {
-            bg: isDisabled ? disabledRowBg : isParentActive ? modeConfig?.accentColor || "brand.600" : "gray.200",
-            color: isDisabled ? disabledRowTextColor : isParentActive ? "white" : "gray.900"
+            bg: isDisabled ? disabledRowBg : isParentActive ? modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #E2E8F0)",
+            color: isDisabled ? disabledRowTextColor : isParentActive ? "white" : "var(--sidebar-text, #1A202C)"
           },
           "aria-disabled": isDisabled ? "true" : "false",
           onClick: (e) => {
@@ -1750,8 +1751,8 @@ function NavItem({
           bg: isDisabled ? disabledRowBg : expandedRowBg,
           color: isDisabled ? disabledRowTextColor : expandedRowTextColor,
           _hover: {
-            bg: isDisabled ? disabledRowBg : hasActiveChild ? modeConfig?.accentColor || "brand.600" : "gray.200",
-            color: isDisabled ? disabledRowTextColor : hasActiveChild ? "white" : "gray.900"
+            bg: isDisabled ? disabledRowBg : hasActiveChild ? modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #E2E8F0)",
+            color: isDisabled ? disabledRowTextColor : hasActiveChild ? "white" : "var(--sidebar-text, #1A202C)"
           },
           "aria-disabled": isDisabled ? "true" : "false",
           onClick: (e) => {
@@ -1784,7 +1785,7 @@ function NavItem({
           py: "1",
           borderTopRadius: 0,
           borderBottomRadius: "md",
-          bg: isDisabled ? "gray.100" : "gray.200",
+          bg: submenuBg,
           children: subItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             NavItem,
             {
@@ -1839,10 +1840,10 @@ function NavItem({
           opacity: 1,
           pointerEvents: isDisabled ? "none" : "auto",
           "data-nav-item-active": String(rowActive),
-          bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.100" : modeConfig?.primaryColor || "brand.500" : "transparent",
+          bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "var(--sidebar-hover-bg, #EDF2F7)" : modeConfig?.primaryColor || "brand.500" : "transparent",
           color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.600",
           _hover: {
-            bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "gray.200" : modeConfig?.accentColor || "brand.600" : "gray.100",
+            bg: isDisabled ? disabledRowBg : rowActive ? isSubItem ? "var(--sidebar-hover-bg, #E2E8F0)" : modeConfig?.accentColor || "brand.600" : "var(--sidebar-hover-bg, #EDF2F7)",
             color: isDisabled ? disabledRowTextColor : rowActive ? isSubItem ? modeConfig?.primaryColor || "brand.500" : "white" : "gray.900"
           },
           "aria-disabled": isDisabled ? "true" : "false",
@@ -2655,6 +2656,32 @@ function AppLayout({
     overlaySlot
   ] });
 }
+var GLYPHS = {
+  bolt: fi.FiZap,
+  zap: fi.FiZap,
+  grid: fi.FiGrid,
+  apps: fi.FiGrid,
+  bell: fi.FiBell,
+  notification: fi.FiBell,
+  "alert-triangle": fi.FiAlertTriangle,
+  alert: fi.FiAlertTriangle,
+  "alert-circle": fi.FiAlertCircle,
+  "life-buoy": fi.FiLifeBuoy,
+  "life-ring": fi.FiLifeBuoy,
+  support: fi.FiLifeBuoy,
+  "help-circle": fi.FiHelpCircle,
+  moon: fi.FiMoon,
+  sun: fi.FiSun,
+  info: fi.FiInfo,
+  mail: fi.FiMail,
+  "message-square": fi.FiMessageSquare,
+  settings: fi.FiSettings,
+  user: fi.FiUser
+};
+function resolveBrandGlyph(name) {
+  if (!name) return null;
+  return GLYPHS[name.trim().toLowerCase()] ?? null;
+}
 function useTopBarIconSlotGlyph(slot) {
   const [name, setName] = react$1.useState(null);
   react$1.useEffect(() => {
@@ -2673,16 +2700,8 @@ function useTopBarIconSlotGlyph(slot) {
 var TopBarIcon = react$1.forwardRef(
   function TopBarIcon2({ slot, fallbackIcon, isSelected, ...rest }, ref) {
     const glyphName = useTopBarIconSlotGlyph(slot);
-    const icon = glyphName ? /* @__PURE__ */ jsxRuntime.jsx(
-      BrandIcon,
-      {
-        name: glyphName,
-        style: {
-          width: "var(--topbar-icon-size, 20px)",
-          height: "var(--topbar-icon-size, 20px)"
-        }
-      }
-    ) : fallbackIcon;
+    const Glyph = resolveBrandGlyph(glyphName);
+    const icon = Glyph ? /* @__PURE__ */ jsxRuntime.jsx(Glyph, { size: "var(--topbar-icon-size, 20px)" }) : fallbackIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.IconButton,
       {