@the-portland-company/shell 0.11.2 → 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/native.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var react = require('react');

package/dist/native.js

@@ -1,3 +1,4 @@
+"use client";
 import { useTopBarIconSlotGlyph, brandIconSrc } from './chunk-VTGRJ4HV.js';
 import { useMemo, useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-portland-company/shell",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "Shared chrome (header, sidebar, footer, theme, auth) for politogy apps. Drop into any Vite SPA to inherit the politogy look and signed-in user.",
   "license": "UNLICENSED",
   "private": false,
@@ -42,7 +42,7 @@
   ],
   "scripts": {
     "gen:tokens": "node scripts/gen-tokens.mjs",
-    "build": "tsup && cp src/css-modules.d.ts dist/css-modules.d.ts",
+    "build": "tsup && node scripts/postbuild-use-client.mjs && cp src/css-modules.d.ts dist/css-modules.d.ts",
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",