@the-portland-company/shell 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## 0.11.3 — 2026-07-20
+
+### Fixed (native — token contract + client boundary)
+
+- **Native chrome now has a real semantic token layer.** The `./native`
+  components (NavTopBar / NavSidebar / NavTabStrip / NavAppShell) reference
+  `--background`, `--foreground`, `--muted`, `--panel`, `--panel-elevated`,
+  `--line`, `--shadow-soft` directly as `var(--x)`, but chrome.css never defined
+  them for light mode and only emitted `--foreground`/`--muted`/`--background`
+  inside `.dark` as ShadCN **HSL channel triplets** (`210 40% 98%`) meant for
+  `hsl(var(--x))` — invalid when used as a full color, so out-of-the-box the
+  native chrome had no surface/border and broken text. `gen:tokens` now emits
+  these seven names as **full colors in both `:root` (light, aliased to the
+  canonical `--topbar-*`/`--surface-*`/`--sidebar-border`/`--shadow-lg` tokens)
+  and `.dark` (from the Specs `darkMode.*` values wrapped in `hsl()`)**. Note
+  `--muted` maps to muted-*foreground* because native uses it as secondary text.
+  Apps consuming `./native` no longer need an app-side var bridge in globals.css.
+- **`"use client"` is now emitted on `dist/native.{js,cjs}`** (prepended
+  post-build, since esbuild strips a source/banner directive). Next.js App
+  Router apps can import the native chrome into Server Components without a
+  manual client-boundary wrapper. Ignored (harmless) by Vite/Chakra consumers.
+
+## 0.11.2 — 2026-07-20
+
+### Added (native — per-slot Brand glyphs)
+
+- **`NavTopBarAction` gains an optional `slot`** so the native top-bar action
+  icons source their glyph by name from `--topbar-icon-<slot>` (Brand API),
+  matching the Chakra `<TopBarIcon>`; button size/color/hover and the cluster
+  gap now resolve the universal `--topbar-icon-*` tokens with the previous
+  literals as fallbacks. Shared slot contract extracted to
+  `src/lib/topbarIconSlot.ts` (framework-agnostic, no Chakra import).
+
 ## 0.11.1 — 2026-07-20
 
 ### Fixed (packaging — native install)

package/dist/chrome.css

@@ -240,6 +240,19 @@
   --mode-input-border-color: #E63946;
   --mode-input-hover-border-color: #C42E3A;
   --mode-input-focus-shadow-color: #E63946;
+
+  /* Native chrome semantic layer — shell-owned aliases over the
+     canonical tokens above, consumed by the ./native export
+     (NavTopBar / NavSidebar / NavTabStrip / NavAppShell). These are the
+     full-color names those components reference directly as var(--x);
+     the .dark block overrides them with dark values. */
+  --background: var(--surface-1);
+  --foreground: var(--topbar-title-color);
+  --muted: var(--topbar-breadcrumb-color);
+  --panel: var(--topbar-bg);
+  --panel-elevated: var(--surface-1);
+  --line: var(--sidebar-border);
+  --shadow-soft: var(--shadow-lg);
 }
 .dark {
   --background: 222.2 84% 4.9%;
@@ -261,4 +274,11 @@
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
+  --background: hsl(222.2 84% 4.9%);
+  --foreground: hsl(210 40% 98%);
+  --muted: hsl(215 20.2% 65.1%);
+  --panel: hsl(222.2 84% 4.9%);
+  --panel-elevated: hsl(217.2 32.6% 17.5%);
+  --line: hsl(217.2 32.6% 17.5%);
+  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.5);
 }

package/dist/chunk-VTGRJ4HV.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+// src/lib/topbarIconSlot.ts
+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;
+}
+function brandIconSrc(name, basePath = "/brand/icons/") {
+  return `${basePath}${name}.svg`;
+}
+
+export { brandIconSrc, useTopBarIconSlotGlyph };
+//# sourceMappingURL=chunk-VTGRJ4HV.js.map
+//# sourceMappingURL=chunk-VTGRJ4HV.js.map

package/dist/chunk-VTGRJ4HV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/topbarIconSlot.ts"],"names":[],"mappings":";;;AA6BO,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;AAGO,SAAS,YAAA,CAAa,IAAA,EAAc,QAAA,GAAW,eAAA,EAAiB;AACrE,EAAA,OAAO,CAAA,EAAG,QAAQ,CAAA,EAAG,IAAI,CAAA,IAAA,CAAA;AAC3B","file":"chunk-VTGRJ4HV.js","sourcesContent":["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

@@ -2655,7 +2655,7 @@ function AppLayout({
     overlaySlot
   ] });
 }
-function useSlotGlyphName(slot) {
+function useTopBarIconSlotGlyph(slot) {
   const [name, setName] = react$1.useState(null);
   react$1.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -2672,7 +2672,7 @@ function useSlotGlyphName(slot) {
 }
 var TopBarIcon = react$1.forwardRef(
   function TopBarIcon2({ slot, fallbackIcon, isSelected, ...rest }, ref) {
-    const glyphName = useSlotGlyphName(slot);
+    const glyphName = useTopBarIconSlotGlyph(slot);
     const icon = glyphName ? /* @__PURE__ */ jsxRuntime.jsx(
       BrandIcon,
       {