@the-portland-company/shell 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.6.0 — 2026-07-01
+
+### Added (native chrome — all backward-compatible)
+
+Chrome-parity upgrades to the `./native` module (`NavSidebar`/`NavTopBar`/`NavAppShell`) so the dependency-light chrome is a faithful twin of the main VRM app's Chakra chrome. No Chakra components touched.
+
+- **`NavFooter`** gains optional `commitDate?: string` and `commitAuthor?: string`. The footer now renders the main app's two-row build block: row 1 is `[env chip] | {commit last-4} | v{version}` (env chip is a color-coded capsule via the extended `envChipClasses`), row 2 (only when date/author present) is `| {Mon D} | {firstName} |` in mono.
+- **`NavOrg`** gains optional `id?: string | null`. When present, the "Organization" label row shows a right-aligned `...{last-8}` copy button that writes the full id to the clipboard (`navigator.clipboard.writeText`) with a brief "Copied" affordance.
+- **`NavItem`** gains optional `onClick?: () => void` (`href` is now optional). onClick items render as a `<button>` styled identically to the link rows — used for a sidebar "Support" action.
+- **`NavTopBarProps`** gains optional `actionsList?: NavTopBarAction[]` (new exported `NavTopBarAction` type). Each renders as a 32×32 circular icon button (20px icon) with an optional red count badge (`badge > 0`), `warning`/`danger` tones coloring the icon red, and `href` support (external links open in a new tab). Rendered before the existing `actions` ReactNode slot (kept for back-compat).
+- **Nav hover gradient sweep**: inactive sidebar nav rows (links and buttons) animate a left→right `linear-gradient(90deg,#ea6a3a,#E63946)` width 0→100% over 300ms with white text on hover; active rows keep solid race-red. No layout shift.
+- **Org pill default color** changed from dark slate `#2d2f36` to race red (`var(--color-race-red)`, `#E63946`), matching the main app's fallback.
+- `envChipClasses` extended: production red, staging orange, local/dev green, unknown gray.
+
+### Tests
+
+- Added `__tests__/native.test.tsx` covering `actionsList` badge/href rendering, org-id copy, onClick nav items, footer rows, and `envChipClasses` tones (6 tests; suite now 49).
+
 ## 0.3.5 — 2026-05-14
 
 ### Fixed

package/dist/native.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/native/index.tsx
@@ -10,12 +11,15 @@ function isNavItemActive(pathname, href) {
 }
 function envChipClasses(label) {
   const l = label.toLowerCase();
-  if (l === "production")
-    return "bg-[rgba(230,57,70,0.12)] text-[color:var(--color-race-red)]";
-  if (l === "staging") return "bg-[rgba(242,201,76,0.18)] text-[#a6791f]";
-  return "bg-[rgba(0,166,81,0.14)] text-[color:var(--color-green-flag)]";
+  if (l === "production" || l === "prod")
+    return "bg-[#fee2e2] text-[#ef4444]";
+  if (l === "staging" || l === "stage")
+    return "bg-[#ffedd5] text-[#f97316]";
+  if (l === "local" || l === "development" || l === "dev")
+    return "bg-[#dcfce7] text-[#22c55e]";
+  return "bg-[rgba(107,114,128,0.16)] text-[#6b7280]";
 }
-var ORG_PILL_DEFAULT = "#2d2f36";
+var ORG_PILL_DEFAULT = "var(--color-race-red)";
 function NavSidebar({
   pathname,
   brand,
@@ -54,7 +58,10 @@ function NavSidebar({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-y-auto px-4 pb-2", children: [
       org ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 px-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+          org.id ? /* @__PURE__ */ jsxRuntime.jsx(OrgIdCopyButton, { id: org.id }) : null
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -88,30 +95,16 @@ function NavSidebar({
       ) }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-1", children: [
         nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: nav.groupLabel }) : null,
-        nav.items.map((item) => {
-          const active = activeFn(pathname, item.href);
-          const Icon = item.icon;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            Link,
+        nav.items.map((item, idx) => {
+          const active = item.href ? activeFn(pathname, item.href) : false;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            NavRow,
             {
-              href: item.href,
-              "aria-current": active ? "page" : void 0,
-              className: [
-                "group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-semibold transition",
-                active ? "bg-[color:var(--color-race-red)] text-white shadow-sm" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
-              ].join(" "),
-              children: [
-                Icon ? /* @__PURE__ */ jsxRuntime.jsx(
-                  Icon,
-                  {
-                    size: 18,
-                    className: active ? "text-white" : "text-current"
-                  }
-                ) : null,
-                item.label
-              ]
+              item,
+              active,
+              Link
             },
-            item.href
+            item.href ?? `nav-${idx}-${item.label}`
           );
         })
       ] })
@@ -128,12 +121,36 @@ function NavSidebar({
           }
         )
       ] }, l.label)) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
-        footer.envLabel,
-        " \xB7 v",
-        footer.version,
-        " \xB7 ",
-        footer.commit.slice(0, 7)
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: [
+                "rounded-md px-1.5 py-0.5 text-[10px] font-semibold",
+                envChipClasses(footer.envLabel)
+              ].join(" "),
+              children: footer.envLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commit.slice(-4) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "v",
+            footer.version
+          ] })
+        ] }),
+        footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          footer.commitDate ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
+            month: "short",
+            day: "numeric"
+          }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" })
+        ] }) : null
       ] })
     ] }) : null
   ] });
@@ -156,11 +173,70 @@ function ChevronDown() {
     }
   );
 }
+var NAV_HOVER_GRADIENT = "linear-gradient(90deg,#ea6a3a 0%,#E63946 100%)";
+function NavRow({
+  item,
+  active,
+  Link
+}) {
+  const Icon = item.icon;
+  const wrapperClasses = [
+    "group relative block overflow-hidden rounded-md transition",
+    active ? "bg-[color:var(--color-race-red)] text-white shadow-sm" : "text-[color:var(--muted)] hover:text-white"
+  ].join(" ");
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !active ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full",
+        style: { background: NAV_HOVER_GRADIENT }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center gap-3 px-3 py-2 text-sm font-semibold", children: [
+      Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, className: active ? "text-white" : "text-current" }) : null,
+      item.label
+    ] })
+  ] });
+  if (item.onClick && !item.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: `w-full text-left ${wrapperClasses}`, children: inner });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Link,
+    {
+      href: item.href ?? "#",
+      "aria-current": active ? "page" : void 0,
+      className: wrapperClasses,
+      children: inner
+    }
+  );
+}
+function OrgIdCopyButton({ id }) {
+  const [copied, setCopied] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        try {
+          void navigator.clipboard?.writeText(id);
+        } catch {
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      title: "Copy organization id",
+      className: "rounded px-1 text-[11px] text-[color:var(--muted)] hover:bg-[color:var(--panel)]",
+      children: copied ? "Copied" : `...${id.slice(-8)}`
+    }
+  );
+}
 function NavTopBar({
   title,
   subtitle,
   user,
   onSignOut,
+  actionsList,
   actions,
   themeToggle
 }) {
@@ -179,6 +255,7 @@ function NavTopBar({
       subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-[color:var(--muted)]", children: subtitle }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+      actionsList && actionsList.length > 0 ? actionsList.map((action) => /* @__PURE__ */ jsxRuntime.jsx(NavTopBarActionButton, { action }, action.key)) : null,
       actions,
       themeToggle,
       /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group relative", children: [
@@ -227,6 +304,44 @@ function SignOutIcon() {
     }
   );
 }
+function NavTopBarActionButton({ action }) {
+  const Icon = action.icon;
+  const tone = action.tone ?? "default";
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]" : "text-[color:var(--muted)] hover:text-[color:var(--foreground)]";
+  const className = [
+    "relative flex h-8 w-8 items-center justify-center rounded-full border border-[color:var(--line)] transition",
+    toneClass
+  ].join(" ");
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 20, className: "text-current" }),
+    typeof action.badge === "number" && action.badge > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] text-white", children: action.badge }) : null
+  ] });
+  const isExternal = action.href ? /^https?:\/\//.test(action.href) : false;
+  if (action.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: action.href,
+        "aria-label": action.label,
+        title: action.label,
+        className,
+        ...isExternal ? { target: "_blank", rel: "noreferrer" } : {},
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      "aria-label": action.label,
+      title: action.label,
+      className,
+      children: content
+    }
+  );
+}
 function NavAppShell({ sidebar, topBar, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(NavSidebar, { ...sidebar }),

package/dist/native.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/native/index.tsx"],"names":["jsx","jsxs","Fragment"],"mappings":"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","file":"native.cjs","sourcesContent":["// ---------------------------------------------------------------------------\n// Framework-agnostic chrome (sidebar + top navbar) for @the-portland-company/shell.\n//\n// The other chrome in this package (ShellChrome, Sidebar, Header, …) is built\n// on Chakra UI v2 + react-router and targets Vite SPAs. That stack cannot be\n// imported into a Next.js / React 19 / Tailwind app. This \"native\" module is a\n// dependency-light alternative: pure React (no Chakra, no emotion, no\n// react-router, no icon library) whose styling is driven entirely by the CSS\n// design tokens shipped in `@the-portland-company/shell/chrome.css`.\n//\n// It is a FAITHFUL VISUAL TWIN of the Chakra chrome (Sidebar.tsx / Header.tsx /\n// OrgPill / ModePill / NavItem / UserMenu): same 240px sidebar, brand-logo\n// slot, \"ORGANIZATION\" org pill, mode pill, solid active nav rows, pipe-\n// separated footer links + commit string, and an avatar+name+email+chevron user\n// menu — so an app rendering this looks identical to the main VRM app.\n//\n// Every app concern (nav items, org, mode, user, links, icons, the routing\n// Link component, the theme toggle) is injected via props, so both the Contacts\n// app (Next.js) and the VRM app could consume the same components.\n// ---------------------------------------------------------------------------\n\nimport type { ComponentType, ReactNode } from 'react'\n\n// An icon is any component that accepts an optional size + className. This\n// matches both `lucide-react` and `react-icons` icon signatures, so consuming\n// apps pass their own icon set without this package depending on one.\nexport type NavIcon = ComponentType<{ size?: number; className?: string }>\n\nexport type NavItem = {\n  href: string\n  label: string\n  icon?: NavIcon\n}\n\n// The routing primitive is injected so each app supplies its own (Next.js\n// `<Link>`, react-router `<Link>`, or a plain `<a>`). Defaults to an anchor.\nexport type NavLinkProps = {\n  href: string\n  className?: string\n  'aria-current'?: 'page' | undefined\n  children: ReactNode\n}\nexport type NavLinkComponent = ComponentType<NavLinkProps>\n\nconst DefaultLink: NavLinkComponent = ({ href, children, ...rest }) => (\n  <a href={href} {...rest}>\n    {children}\n  </a>\n)\n\n/** Default active-route test: exact match for \"/\", prefix match otherwise. */\nexport function isNavItemActive(pathname: string, href: string): boolean {\n  if (href === '/') return pathname === '/'\n  return pathname === href || pathname.startsWith(`${href}/`)\n}\n\n/** Token-driven tone classes for the sidebar environment chip. */\nexport function envChipClasses(label: string): string {\n  const l = label.toLowerCase()\n  if (l === 'production')\n    return 'bg-[rgba(230,57,70,0.12)] text-[color:var(--color-race-red)]'\n  if (l === 'staging') return 'bg-[rgba(242,201,76,0.18)] text-[#a6791f]'\n  return 'bg-[rgba(0,166,81,0.14)] text-[color:var(--color-green-flag)]'\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavBrand = {\n  /** Where the logo links to. Defaults to \"/\". */\n  homeHref?: string\n  /**\n   * Brand logo image src. When supplied this renders as the wordmark logo\n   * (matching the main app's BrandLogo), and `badgeLabel`/`title`/`subtitle`\n   * are used only as the no-image fallback.\n   */\n  logoSrc?: string\n  logoAlt?: string\n  /** Short label shown inside the brand badge fallback (e.g. \"P\"). */\n  badgeLabel: string\n  title: string\n  subtitle?: string\n}\n\nexport type NavOrg = {\n  name: string | null\n  /** Optional org logo for the pill badge; falls back to initials. */\n  logoUrl?: string | null\n  /** Solid pill background (the org's brand color). Defaults to a dark slate. */\n  brandColor?: string | null\n  onClick?: () => void\n}\n\nexport type NavMode = {\n  label: string\n  icon?: NavIcon\n}\n\nexport type NavFooterLink = { label: string; href: string; external?: boolean }\n\nexport type NavFooter = {\n  envLabel: string\n  version: string\n  commit: string\n  links?: NavFooterLink[]\n}\n\nexport type NavSidebarProps = {\n  pathname: string\n  brand: NavBrand\n  nav: {\n    groupLabel?: string\n    items: NavItem[]\n    isActive?: (pathname: string, href: string) => boolean\n  }\n  org?: NavOrg | null\n  mode?: NavMode | null\n  footer?: NavFooter | null\n  linkComponent?: NavLinkComponent\n}\n\n// Default org-pill background — a dark slate that mirrors the main app's pill\n// when an org has no explicit brand color.\nconst ORG_PILL_DEFAULT = '#2d2f36'\n\nexport function NavSidebar({\n  pathname,\n  brand,\n  nav,\n  org,\n  mode,\n  footer,\n  linkComponent,\n}: NavSidebarProps) {\n  const Link = linkComponent ?? DefaultLink\n  const activeFn = nav.isActive ?? isNavItemActive\n  const ModeIcon = mode?.icon\n  const orgBg = org?.brandColor || ORG_PILL_DEFAULT\n\n  return (\n    <aside className=\"fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] lg:flex\">\n      {/* Brand — logo image (preferred) or badge fallback */}\n      <Link\n        href={brand.homeHref ?? '/'}\n        className=\"flex h-[64px] flex-shrink-0 items-center gap-2.5 px-6\"\n      >\n        {brand.logoSrc ? (\n          <img\n            src={brand.logoSrc}\n            alt={brand.logoAlt ?? brand.title}\n            draggable={false}\n            className=\"h-10 w-auto object-contain\"\n          />\n        ) : (\n          <>\n            <span className=\"flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-race-red)] text-base font-black text-white shadow-sm\">\n              {brand.badgeLabel}\n            </span>\n            <span className=\"flex flex-col leading-tight\">\n              <span className=\"text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-race-red)]\">\n                {brand.title}\n              </span>\n              {brand.subtitle ? (\n                <span className=\"text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]\">\n                  {brand.subtitle}\n                </span>\n              ) : null}\n            </span>\n          </>\n        )}\n      </Link>\n\n      {/* Scroll region: org pill, mode pill, nav */}\n      <div className=\"flex flex-1 flex-col overflow-y-auto px-4 pb-2\">\n        {/* Organization switcher */}\n        {org ? (\n          <div className=\"mb-3\">\n            <p className=\"mb-2 px-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n              Organization\n            </p>\n            <button\n              type=\"button\"\n              onClick={org.onClick}\n              style={{ backgroundColor: orgBg }}\n              className=\"flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-left text-white shadow-sm transition hover:opacity-95\"\n            >\n              <span className=\"flex min-w-0 items-center gap-2.5\">\n                <span className=\"flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white/20 text-[11px] font-bold text-white\">\n                  {org.logoUrl ? (\n                    <img src={org.logoUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n                  ) : (\n                    (org.name ?? 'Org').slice(0, 2).toUpperCase()\n                  )}\n                </span>\n                <span className=\"truncate text-sm font-semibold\">\n                  {org.name ?? 'No organizations'}\n                </span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Mode pill */}\n        {mode ? (\n          <div className=\"mb-4\">\n            <button\n              type=\"button\"\n              className=\"flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--color-race-red)] px-2.5 py-2 text-white shadow-sm\"\n            >\n              <span className=\"flex items-center gap-2.5\">\n                {ModeIcon ? <ModeIcon size={16} className=\"shrink-0\" /> : null}\n                <span className=\"text-sm font-semibold tracking-[-0.01em]\">{mode.label}</span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Nav list */}\n        <nav className=\"flex flex-col gap-1\">\n          {nav.groupLabel ? (\n            <p className=\"px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n              {nav.groupLabel}\n            </p>\n          ) : null}\n          {nav.items.map((item) => {\n            const active = activeFn(pathname, item.href)\n            const Icon = item.icon\n            return (\n              <Link\n                key={item.href}\n                href={item.href}\n                aria-current={active ? 'page' : undefined}\n                className={[\n                  'group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-semibold transition',\n                  active\n                    ? 'bg-[color:var(--color-race-red)] text-white shadow-sm'\n                    : 'text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]',\n                ].join(' ')}\n              >\n                {Icon ? (\n                  <Icon\n                    size={18}\n                    className={active ? 'text-white' : 'text-current'}\n                  />\n                ) : null}\n                {item.label}\n              </Link>\n            )\n          })}\n        </nav>\n      </div>\n\n      {/* Footer — pipe-separated links + commit/version string */}\n      {footer ? (\n        <div className=\"flex-shrink-0 border-t border-[color:var(--line)] px-4 py-3\">\n          {footer.links && footer.links.length > 0 ? (\n            <div className=\"flex flex-wrap items-center gap-1.5 text-xs\">\n              {footer.links.map((l, idx) => (\n                <span key={l.label} className=\"inline-flex items-center gap-1.5\">\n                  {idx > 0 ? <span className=\"text-[color:var(--muted)]\">|</span> : null}\n                  <a\n                    href={l.href}\n                    className=\"font-medium text-[color:var(--color-race-red)] hover:underline\"\n                  >\n                    {l.label}\n                  </a>\n                </span>\n              ))}\n            </div>\n          ) : null}\n          <p className=\"mt-1.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]\">\n            {footer.envLabel} · v{footer.version} · {footer.commit.slice(0, 7)}\n          </p>\n        </div>\n      ) : null}\n    </aside>\n  )\n}\n\n// Inline chevron-down (mirrors lucide `ChevronDown`) — no icon dependency.\nfunction ChevronDown() {\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"shrink-0 opacity-80\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavUser = {\n  name: string | null\n  email?: string | null\n  /** Avatar image URL; falls back to initials on the brand color. */\n  avatarUrl?: string | null\n  tier?: string | null\n  role?: string | null\n}\n\nexport type NavTopBarProps = {\n  title: string\n  subtitle?: string\n  user?: NavUser | null\n  onSignOut?: () => void\n  /** App-specific action cluster rendered left of the theme toggle. */\n  actions?: ReactNode\n  /** Theme toggle slot (injected so this package needs no theme dependency). */\n  themeToggle?: ReactNode\n}\n\nexport function NavTopBar({\n  title,\n  subtitle,\n  user,\n  onSignOut,\n  actions,\n  themeToggle,\n}: NavTopBarProps) {\n  const initials = (user?.name ?? 'Politogy').slice(0, 2).toUpperCase()\n  const secondary = user?.email || [user?.tier, user?.role].filter(Boolean).join(' · ') || 'member'\n  return (\n    <header className=\"sticky top-0 z-20 flex h-20 items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-4 backdrop-blur-xl\">\n      <div className=\"min-w-0\">\n        <h1\n          className=\"truncate text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]\"\n          data-display=\"true\"\n        >\n          {title}\n        </h1>\n        {subtitle ? (\n          <p className=\"truncate text-sm text-[color:var(--muted)]\">{subtitle}</p>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {actions}\n        {themeToggle}\n\n        {/* User menu — avatar + name/email + chevron; sign-out in a native\n            <details> popover so the package needs no JS state. */}\n        <details className=\"group relative\">\n          <summary className=\"flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden\">\n            <span className=\"flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white\">\n              {user?.avatarUrl ? (\n                <img src={user.avatarUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n              ) : (\n                initials\n              )}\n            </span>\n            <span className=\"hidden flex-col leading-tight md:flex\">\n              <span className=\"text-sm font-semibold text-[color:var(--foreground)]\">\n                {user?.name ?? 'Signed in'}\n              </span>\n              <span className=\"text-xs text-[color:var(--muted)]\">{secondary}</span>\n            </span>\n            <ChevronDown />\n          </summary>\n          {onSignOut ? (\n            <div className=\"absolute right-0 z-30 mt-2 w-44 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]\">\n              <button\n                type=\"button\"\n                onClick={onSignOut}\n                className=\"flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-race-red)]\"\n              >\n                <SignOutIcon />\n                Sign out\n              </button>\n            </div>\n          ) : null}\n        </details>\n      </div>\n    </header>\n  )\n}\n\n// Inline log-out glyph (mirrors lucide `LogOut`) to avoid an icon dependency.\nfunction SignOutIcon() {\n  return (\n    <svg\n      width={15}\n      height={15}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n      <polyline points=\"16 17 21 12 16 7\" />\n      <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n    </svg>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavAppShellProps = {\n  sidebar: NavSidebarProps\n  topBar: NavTopBarProps\n  children: ReactNode\n}\n\n/**\n * Full chrome: branded left sidebar + sticky top navbar + scrollable content\n * region. Presentational only — wrap it in app-level auth/gating as needed.\n */\nexport function NavAppShell({ sidebar, topBar, children }: NavAppShellProps) {\n  return (\n    <div className=\"min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]\">\n      <NavSidebar {...sidebar} />\n      <div className=\"lg:pl-[240px]\">\n        <NavTopBar {...topBar} />\n        <main className=\"px-6 py-7\">\n          <div className=\"mx-auto max-w-7xl\">{children}</div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../src/native/index.tsx"],"names":["jsx","jsxs","Fragment","useState"],"mappings":"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","file":"native.cjs","sourcesContent":["// ---------------------------------------------------------------------------\n// Framework-agnostic chrome (sidebar + top navbar) for @the-portland-company/shell.\n//\n// The other chrome in this package (ShellChrome, Sidebar, Header, …) is built\n// on Chakra UI v2 + react-router and targets Vite SPAs. That stack cannot be\n// imported into a Next.js / React 19 / Tailwind app. This \"native\" module is a\n// dependency-light alternative: pure React (no Chakra, no emotion, no\n// react-router, no icon library) whose styling is driven entirely by the CSS\n// design tokens shipped in `@the-portland-company/shell/chrome.css`.\n//\n// It is a FAITHFUL VISUAL TWIN of the Chakra chrome (Sidebar.tsx / Header.tsx /\n// OrgPill / ModePill / NavItem / UserMenu): same 240px sidebar, brand-logo\n// slot, \"ORGANIZATION\" org pill, mode pill, solid active nav rows, pipe-\n// separated footer links + commit string, and an avatar+name+email+chevron user\n// menu — so an app rendering this looks identical to the main VRM app.\n//\n// Every app concern (nav items, org, mode, user, links, icons, the routing\n// Link component, the theme toggle) is injected via props, so both the Contacts\n// app (Next.js) and the VRM app could consume the same components.\n// ---------------------------------------------------------------------------\n\nimport type { ComponentType, ReactNode } from 'react'\nimport { useState } from 'react'\n\n// An icon is any component that accepts an optional size + className. This\n// matches both `lucide-react` and `react-icons` icon signatures, so consuming\n// apps pass their own icon set without this package depending on one.\nexport type NavIcon = ComponentType<{ size?: number; className?: string }>\n\nexport type NavItem = {\n  /** Route to link to. Optional when `onClick` is supplied (renders a button). */\n  href?: string\n  label: string\n  icon?: NavIcon\n  /**\n   * When supplied the row renders as a `<button>` (styled identically to the\n   * link rows) instead of a routed link — used for actions like \"Support\".\n   */\n  onClick?: () => void\n}\n\n// The routing primitive is injected so each app supplies its own (Next.js\n// `<Link>`, react-router `<Link>`, or a plain `<a>`). Defaults to an anchor.\nexport type NavLinkProps = {\n  href: string\n  className?: string\n  'aria-current'?: 'page' | undefined\n  children: ReactNode\n}\nexport type NavLinkComponent = ComponentType<NavLinkProps>\n\nconst DefaultLink: NavLinkComponent = ({ href, children, ...rest }) => (\n  <a href={href} {...rest}>\n    {children}\n  </a>\n)\n\n/** Default active-route test: exact match for \"/\", prefix match otherwise. */\nexport function isNavItemActive(pathname: string, href: string): boolean {\n  if (href === '/') return pathname === '/'\n  return pathname === href || pathname.startsWith(`${href}/`)\n}\n\n/**\n * Color-coded tone classes for the sidebar environment chip, matching the main\n * VRM app: prod red, staging orange, local/dev green, unknown gray.\n */\nexport function envChipClasses(label: string): string {\n  const l = label.toLowerCase()\n  if (l === 'production' || l === 'prod')\n    return 'bg-[#fee2e2] text-[#ef4444]'\n  if (l === 'staging' || l === 'stage')\n    return 'bg-[#ffedd5] text-[#f97316]'\n  if (l === 'local' || l === 'development' || l === 'dev')\n    return 'bg-[#dcfce7] text-[#22c55e]'\n  return 'bg-[rgba(107,114,128,0.16)] text-[#6b7280]'\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavBrand = {\n  /** Where the logo links to. Defaults to \"/\". */\n  homeHref?: string\n  /**\n   * Brand logo image src. When supplied this renders as the wordmark logo\n   * (matching the main app's BrandLogo), and `badgeLabel`/`title`/`subtitle`\n   * are used only as the no-image fallback.\n   */\n  logoSrc?: string\n  logoAlt?: string\n  /** Short label shown inside the brand badge fallback (e.g. \"P\"). */\n  badgeLabel: string\n  title: string\n  subtitle?: string\n}\n\nexport type NavOrg = {\n  name: string | null\n  /** Full org id. When present, a copy affordance is shown by the label. */\n  id?: string | null\n  /** Optional org logo for the pill badge; falls back to initials. */\n  logoUrl?: string | null\n  /** Solid pill background (the org's brand color). Defaults to race red. */\n  brandColor?: string | null\n  onClick?: () => void\n}\n\nexport type NavMode = {\n  label: string\n  icon?: NavIcon\n}\n\nexport type NavFooterLink = { label: string; href: string; external?: boolean }\n\nexport type NavFooter = {\n  envLabel: string\n  version: string\n  commit: string\n  links?: NavFooterLink[]\n  /** ISO date (or any Date-parseable string) of the deployed commit. */\n  commitDate?: string\n  /** Full name of the commit author (only the first name is shown). */\n  commitAuthor?: string\n}\n\nexport type NavSidebarProps = {\n  pathname: string\n  brand: NavBrand\n  nav: {\n    groupLabel?: string\n    items: NavItem[]\n    isActive?: (pathname: string, href: string) => boolean\n  }\n  org?: NavOrg | null\n  mode?: NavMode | null\n  footer?: NavFooter | null\n  linkComponent?: NavLinkComponent\n}\n\n// Default org-pill background — race red, matching the main app's fallback\n// (mode primary) when an org has no explicit brand color.\nconst ORG_PILL_DEFAULT = 'var(--color-race-red)'\n\nexport function NavSidebar({\n  pathname,\n  brand,\n  nav,\n  org,\n  mode,\n  footer,\n  linkComponent,\n}: NavSidebarProps) {\n  const Link = linkComponent ?? DefaultLink\n  const activeFn = nav.isActive ?? isNavItemActive\n  const ModeIcon = mode?.icon\n  const orgBg = org?.brandColor || ORG_PILL_DEFAULT\n\n  return (\n    <aside className=\"fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] lg:flex\">\n      {/* Brand — logo image (preferred) or badge fallback */}\n      <Link\n        href={brand.homeHref ?? '/'}\n        className=\"flex h-[64px] flex-shrink-0 items-center gap-2.5 px-6\"\n      >\n        {brand.logoSrc ? (\n          <img\n            src={brand.logoSrc}\n            alt={brand.logoAlt ?? brand.title}\n            draggable={false}\n            className=\"h-10 w-auto object-contain\"\n          />\n        ) : (\n          <>\n            <span className=\"flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-race-red)] text-base font-black text-white shadow-sm\">\n              {brand.badgeLabel}\n            </span>\n            <span className=\"flex flex-col leading-tight\">\n              <span className=\"text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-race-red)]\">\n                {brand.title}\n              </span>\n              {brand.subtitle ? (\n                <span className=\"text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]\">\n                  {brand.subtitle}\n                </span>\n              ) : null}\n            </span>\n          </>\n        )}\n      </Link>\n\n      {/* Scroll region: org pill, mode pill, nav */}\n      <div className=\"flex flex-1 flex-col overflow-y-auto px-4 pb-2\">\n        {/* Organization switcher */}\n        {org ? (\n          <div className=\"mb-3\">\n            <div className=\"mb-2 flex items-center justify-between px-1\">\n              <p className=\"text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n                Organization\n              </p>\n              {org.id ? <OrgIdCopyButton id={org.id} /> : null}\n            </div>\n            <button\n              type=\"button\"\n              onClick={org.onClick}\n              style={{ backgroundColor: orgBg }}\n              className=\"flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-left text-white shadow-sm transition hover:opacity-95\"\n            >\n              <span className=\"flex min-w-0 items-center gap-2.5\">\n                <span className=\"flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white/20 text-[11px] font-bold text-white\">\n                  {org.logoUrl ? (\n                    <img src={org.logoUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n                  ) : (\n                    (org.name ?? 'Org').slice(0, 2).toUpperCase()\n                  )}\n                </span>\n                <span className=\"truncate text-sm font-semibold\">\n                  {org.name ?? 'No organizations'}\n                </span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Mode pill */}\n        {mode ? (\n          <div className=\"mb-4\">\n            <button\n              type=\"button\"\n              className=\"flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--color-race-red)] px-2.5 py-2 text-white shadow-sm\"\n            >\n              <span className=\"flex items-center gap-2.5\">\n                {ModeIcon ? <ModeIcon size={16} className=\"shrink-0\" /> : null}\n                <span className=\"text-sm font-semibold tracking-[-0.01em]\">{mode.label}</span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Nav list */}\n        <nav className=\"flex flex-col gap-1\">\n          {nav.groupLabel ? (\n            <p className=\"px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n              {nav.groupLabel}\n            </p>\n          ) : null}\n          {nav.items.map((item, idx) => {\n            const active = item.href ? activeFn(pathname, item.href) : false\n            return (\n              <NavRow\n                key={item.href ?? `nav-${idx}-${item.label}`}\n                item={item}\n                active={active}\n                Link={Link}\n              />\n            )\n          })}\n        </nav>\n      </div>\n\n      {/* Footer — pipe-separated links + commit/version string */}\n      {footer ? (\n        <div className=\"flex-shrink-0 border-t border-[color:var(--line)] px-4 py-3\">\n          {footer.links && footer.links.length > 0 ? (\n            <div className=\"flex flex-wrap items-center gap-1.5 text-xs\">\n              {footer.links.map((l, idx) => (\n                <span key={l.label} className=\"inline-flex items-center gap-1.5\">\n                  {idx > 0 ? <span className=\"text-[color:var(--muted)]\">|</span> : null}\n                  <a\n                    href={l.href}\n                    className=\"font-medium text-[color:var(--color-race-red)] hover:underline\"\n                  >\n                    {l.label}\n                  </a>\n                </span>\n              ))}\n            </div>\n          ) : null}\n          <div className=\"mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]\">\n            {/* Row 1: env chip | commit | version */}\n            <div className=\"flex items-center gap-1.5\">\n              <span\n                className={[\n                  'rounded-md px-1.5 py-0.5 text-[10px] font-semibold',\n                  envChipClasses(footer.envLabel),\n                ].join(' ')}\n              >\n                {footer.envLabel}\n              </span>\n              <span className=\"text-[color:var(--muted)]\">|</span>\n              <span>{footer.commit.slice(-4)}</span>\n              <span className=\"text-[color:var(--muted)]\">|</span>\n              <span>v{footer.version}</span>\n            </div>\n            {/* Row 2: date | author (only when supplied) */}\n            {footer.commitDate || footer.commitAuthor ? (\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"text-[color:var(--muted)]\">|</span>\n                {footer.commitDate ? (\n                  <span>\n                    {new Date(footer.commitDate).toLocaleDateString(undefined, {\n                      month: 'short',\n                      day: 'numeric',\n                    })}\n                  </span>\n                ) : null}\n                <span className=\"text-[color:var(--muted)]\">|</span>\n                {footer.commitAuthor ? (\n                  <span>{footer.commitAuthor.split(/\\s+/)[0]}</span>\n                ) : null}\n                <span className=\"text-[color:var(--muted)]\">|</span>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n    </aside>\n  )\n}\n\n// Inline chevron-down (mirrors lucide `ChevronDown`) — no icon dependency.\nfunction ChevronDown() {\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"shrink-0 opacity-80\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  )\n}\n\n// A single sidebar nav row. Renders as a routed <Link> (href) or a <button>\n// (onClick), styled identically. Inactive rows animate a left→right gradient\n// sweep on hover (matching the main app); active rows keep solid race-red.\nconst NAV_HOVER_GRADIENT = 'linear-gradient(90deg,#ea6a3a 0%,#E63946 100%)'\n\nfunction NavRow({\n  item,\n  active,\n  Link,\n}: {\n  item: NavItem\n  active: boolean\n  Link: NavLinkComponent\n}) {\n  const Icon = item.icon\n  const wrapperClasses = [\n    'group relative block overflow-hidden rounded-md transition',\n    active\n      ? 'bg-[color:var(--color-race-red)] text-white shadow-sm'\n      : 'text-[color:var(--muted)] hover:text-white',\n  ].join(' ')\n\n  const inner = (\n    <>\n      {!active ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full\"\n          style={{ background: NAV_HOVER_GRADIENT }}\n        />\n      ) : null}\n      <span className=\"relative z-10 flex items-center gap-3 px-3 py-2 text-sm font-semibold\">\n        {Icon ? (\n          <Icon size={18} className={active ? 'text-white' : 'text-current'} />\n        ) : null}\n        {item.label}\n      </span>\n    </>\n  )\n\n  if (item.onClick && !item.href) {\n    return (\n      <button type=\"button\" onClick={item.onClick} className={`w-full text-left ${wrapperClasses}`}>\n        {inner}\n      </button>\n    )\n  }\n\n  return (\n    <Link\n      href={item.href ?? '#'}\n      aria-current={active ? 'page' : undefined}\n      className={wrapperClasses}\n    >\n      {inner}\n    </Link>\n  )\n}\n\n// Right-aligned copy affordance for the org id, shown beside the \"Organization\"\n// label. Copies the full id and briefly swaps its text to \"Copied\".\nfunction OrgIdCopyButton({ id }: { id: string }) {\n  const [copied, setCopied] = useState(false)\n  return (\n    <button\n      type=\"button\"\n      onClick={() => {\n        try {\n          void navigator.clipboard?.writeText(id)\n        } catch {\n          /* clipboard unavailable — ignore */\n        }\n        setCopied(true)\n        setTimeout(() => setCopied(false), 1500)\n      }}\n      title=\"Copy organization id\"\n      className=\"rounded px-1 text-[11px] text-[color:var(--muted)] hover:bg-[color:var(--panel)]\"\n    >\n      {copied ? 'Copied' : `...${id.slice(-8)}`}\n    </button>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavUser = {\n  name: string | null\n  email?: string | null\n  /** Avatar image URL; falls back to initials on the brand color. */\n  avatarUrl?: string | null\n  tier?: string | null\n  role?: string | null\n}\n\nexport type NavTopBarAction = {\n  key: string\n  icon: NavIcon\n  label: string\n  onClick?: () => void\n  href?: string\n  badge?: number | null\n  tone?: 'default' | 'warning' | 'danger'\n}\n\nexport type NavTopBarProps = {\n  title: string\n  subtitle?: string\n  user?: NavUser | null\n  onSignOut?: () => void\n  /**\n   * Structured icon-button action cluster (32×32 circular buttons with optional\n   * count badges), rendered before the `actions` slot. Matches the main app's\n   * topbar action icons.\n   */\n  actionsList?: NavTopBarAction[]\n  /** App-specific action cluster rendered left of the theme toggle. */\n  actions?: ReactNode\n  /** Theme toggle slot (injected so this package needs no theme dependency). */\n  themeToggle?: ReactNode\n}\n\nexport function NavTopBar({\n  title,\n  subtitle,\n  user,\n  onSignOut,\n  actionsList,\n  actions,\n  themeToggle,\n}: NavTopBarProps) {\n  const initials = (user?.name ?? 'Politogy').slice(0, 2).toUpperCase()\n  const secondary = user?.email || [user?.tier, user?.role].filter(Boolean).join(' · ') || 'member'\n  return (\n    <header className=\"sticky top-0 z-20 flex h-20 items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-4 backdrop-blur-xl\">\n      <div className=\"min-w-0\">\n        <h1\n          className=\"truncate text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]\"\n          data-display=\"true\"\n        >\n          {title}\n        </h1>\n        {subtitle ? (\n          <p className=\"truncate text-sm text-[color:var(--muted)]\">{subtitle}</p>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {actionsList && actionsList.length > 0\n          ? actionsList.map((action) => (\n              <NavTopBarActionButton key={action.key} action={action} />\n            ))\n          : null}\n        {actions}\n        {themeToggle}\n\n        {/* User menu — avatar + name/email + chevron; sign-out in a native\n            <details> popover so the package needs no JS state. */}\n        <details className=\"group relative\">\n          <summary className=\"flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden\">\n            <span className=\"flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white\">\n              {user?.avatarUrl ? (\n                <img src={user.avatarUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n              ) : (\n                initials\n              )}\n            </span>\n            <span className=\"hidden flex-col leading-tight md:flex\">\n              <span className=\"text-sm font-semibold text-[color:var(--foreground)]\">\n                {user?.name ?? 'Signed in'}\n              </span>\n              <span className=\"text-xs text-[color:var(--muted)]\">{secondary}</span>\n            </span>\n            <ChevronDown />\n          </summary>\n          {onSignOut ? (\n            <div className=\"absolute right-0 z-30 mt-2 w-44 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]\">\n              <button\n                type=\"button\"\n                onClick={onSignOut}\n                className=\"flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-race-red)]\"\n              >\n                <SignOutIcon />\n                Sign out\n              </button>\n            </div>\n          ) : null}\n        </details>\n      </div>\n    </header>\n  )\n}\n\n// Inline log-out glyph (mirrors lucide `LogOut`) to avoid an icon dependency.\nfunction SignOutIcon() {\n  return (\n    <svg\n      width={15}\n      height={15}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n      <polyline points=\"16 17 21 12 16 7\" />\n      <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n    </svg>\n  )\n}\n\n// A single 32×32 circular icon button for the top bar's structured action list.\n// Renders an <a> when `href` is present (external links open in a new tab),\n// otherwise a <button>. Shows a red count badge when `badge > 0`.\nfunction NavTopBarActionButton({ action }: { action: NavTopBarAction }) {\n  const Icon = action.icon\n  const tone = action.tone ?? 'default'\n  const toneClass =\n    tone === 'danger' || tone === 'warning'\n      ? 'text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]'\n      : 'text-[color:var(--muted)] hover:text-[color:var(--foreground)]'\n  const className = [\n    'relative flex h-8 w-8 items-center justify-center rounded-full border border-[color:var(--line)] transition',\n    toneClass,\n  ].join(' ')\n\n  const content = (\n    <>\n      <Icon size={20} className=\"text-current\" />\n      {typeof action.badge === 'number' && action.badge > 0 ? (\n        <span className=\"absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] text-white\">\n          {action.badge}\n        </span>\n      ) : null}\n    </>\n  )\n\n  const isExternal = action.href ? /^https?:\\/\\//.test(action.href) : false\n\n  if (action.href) {\n    return (\n      <a\n        href={action.href}\n        aria-label={action.label}\n        title={action.label}\n        className={className}\n        {...(isExternal ? { target: '_blank', rel: 'noreferrer' } : {})}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={action.onClick}\n      aria-label={action.label}\n      title={action.label}\n      className={className}\n    >\n      {content}\n    </button>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavAppShellProps = {\n  sidebar: NavSidebarProps\n  topBar: NavTopBarProps\n  children: ReactNode\n}\n\n/**\n * Full chrome: branded left sidebar + sticky top navbar + scrollable content\n * region. Presentational only — wrap it in app-level auth/gating as needed.\n */\nexport function NavAppShell({ sidebar, topBar, children }: NavAppShellProps) {\n  return (\n    <div className=\"min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]\">\n      <NavSidebar {...sidebar} />\n      <div className=\"lg:pl-[240px]\">\n        <NavTopBar {...topBar} />\n        <main className=\"px-6 py-7\">\n          <div className=\"mx-auto max-w-7xl\">{children}</div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/native.d.cts

@@ -6,9 +6,15 @@ type NavIcon = ComponentType<{
     className?: string;
 }>;
 type NavItem = {
-    href: string;
+    /** Route to link to. Optional when `onClick` is supplied (renders a button). */
+    href?: string;
     label: string;
     icon?: NavIcon;
+    /**
+     * When supplied the row renders as a `<button>` (styled identically to the
+     * link rows) instead of a routed link — used for actions like "Support".
+     */
+    onClick?: () => void;
 };
 type NavLinkProps = {
     href: string;
@@ -19,7 +25,10 @@ type NavLinkProps = {
 type NavLinkComponent = ComponentType<NavLinkProps>;
 /** Default active-route test: exact match for "/", prefix match otherwise. */
 declare function isNavItemActive(pathname: string, href: string): boolean;
-/** Token-driven tone classes for the sidebar environment chip. */
+/**
+ * Color-coded tone classes for the sidebar environment chip, matching the main
+ * VRM app: prod red, staging orange, local/dev green, unknown gray.
+ */
 declare function envChipClasses(label: string): string;
 type NavBrand = {
     /** Where the logo links to. Defaults to "/". */
@@ -38,9 +47,11 @@ type NavBrand = {
 };
 type NavOrg = {
     name: string | null;
+    /** Full org id. When present, a copy affordance is shown by the label. */
+    id?: string | null;
     /** Optional org logo for the pill badge; falls back to initials. */
     logoUrl?: string | null;
-    /** Solid pill background (the org's brand color). Defaults to a dark slate. */
+    /** Solid pill background (the org's brand color). Defaults to race red. */
     brandColor?: string | null;
     onClick?: () => void;
 };
@@ -58,6 +69,10 @@ type NavFooter = {
     version: string;
     commit: string;
     links?: NavFooterLink[];
+    /** ISO date (or any Date-parseable string) of the deployed commit. */
+    commitDate?: string;
+    /** Full name of the commit author (only the first name is shown). */
+    commitAuthor?: string;
 };
 type NavSidebarProps = {
     pathname: string;
@@ -81,17 +96,32 @@ type NavUser = {
     tier?: string | null;
     role?: string | null;
 };
+type NavTopBarAction = {
+    key: string;
+    icon: NavIcon;
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    badge?: number | null;
+    tone?: 'default' | 'warning' | 'danger';
+};
 type NavTopBarProps = {
     title: string;
     subtitle?: string;
     user?: NavUser | null;
     onSignOut?: () => void;
+    /**
+     * Structured icon-button action cluster (32×32 circular buttons with optional
+     * count badges), rendered before the `actions` slot. Matches the main app's
+     * topbar action icons.
+     */
+    actionsList?: NavTopBarAction[];
     /** App-specific action cluster rendered left of the theme toggle. */
     actions?: ReactNode;
     /** Theme toggle slot (injected so this package needs no theme dependency). */
     themeToggle?: ReactNode;
 };
-declare function NavTopBar({ title, subtitle, user, onSignOut, actions, themeToggle, }: NavTopBarProps): react_jsx_runtime.JSX.Element;
+declare function NavTopBar({ title, subtitle, user, onSignOut, actionsList, actions, themeToggle, }: NavTopBarProps): react_jsx_runtime.JSX.Element;
 type NavAppShellProps = {
     sidebar: NavSidebarProps;
     topBar: NavTopBarProps;
@@ -103,4 +133,4 @@ type NavAppShellProps = {
  */
 declare function NavAppShell({ sidebar, topBar, children }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { NavAppShell, type NavAppShellProps, type NavBrand, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavMode, type NavOrg, NavSidebar, type NavSidebarProps, NavTopBar, type NavTopBarProps, type NavUser, envChipClasses, isNavItemActive };
+export { NavAppShell, type NavAppShellProps, type NavBrand, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavMode, type NavOrg, NavSidebar, type NavSidebarProps, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, envChipClasses, isNavItemActive };

package/dist/native.d.ts

@@ -6,9 +6,15 @@ type NavIcon = ComponentType<{
     className?: string;
 }>;
 type NavItem = {
-    href: string;
+    /** Route to link to. Optional when `onClick` is supplied (renders a button). */
+    href?: string;
     label: string;
     icon?: NavIcon;
+    /**
+     * When supplied the row renders as a `<button>` (styled identically to the
+     * link rows) instead of a routed link — used for actions like "Support".
+     */
+    onClick?: () => void;
 };
 type NavLinkProps = {
     href: string;
@@ -19,7 +25,10 @@ type NavLinkProps = {
 type NavLinkComponent = ComponentType<NavLinkProps>;
 /** Default active-route test: exact match for "/", prefix match otherwise. */
 declare function isNavItemActive(pathname: string, href: string): boolean;
-/** Token-driven tone classes for the sidebar environment chip. */
+/**
+ * Color-coded tone classes for the sidebar environment chip, matching the main
+ * VRM app: prod red, staging orange, local/dev green, unknown gray.
+ */
 declare function envChipClasses(label: string): string;
 type NavBrand = {
     /** Where the logo links to. Defaults to "/". */
@@ -38,9 +47,11 @@ type NavBrand = {
 };
 type NavOrg = {
     name: string | null;
+    /** Full org id. When present, a copy affordance is shown by the label. */
+    id?: string | null;
     /** Optional org logo for the pill badge; falls back to initials. */
     logoUrl?: string | null;
-    /** Solid pill background (the org's brand color). Defaults to a dark slate. */
+    /** Solid pill background (the org's brand color). Defaults to race red. */
     brandColor?: string | null;
     onClick?: () => void;
 };
@@ -58,6 +69,10 @@ type NavFooter = {
     version: string;
     commit: string;
     links?: NavFooterLink[];
+    /** ISO date (or any Date-parseable string) of the deployed commit. */
+    commitDate?: string;
+    /** Full name of the commit author (only the first name is shown). */
+    commitAuthor?: string;
 };
 type NavSidebarProps = {
     pathname: string;
@@ -81,17 +96,32 @@ type NavUser = {
     tier?: string | null;
     role?: string | null;
 };
+type NavTopBarAction = {
+    key: string;
+    icon: NavIcon;
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    badge?: number | null;
+    tone?: 'default' | 'warning' | 'danger';
+};
 type NavTopBarProps = {
     title: string;
     subtitle?: string;
     user?: NavUser | null;
     onSignOut?: () => void;
+    /**
+     * Structured icon-button action cluster (32×32 circular buttons with optional
+     * count badges), rendered before the `actions` slot. Matches the main app's
+     * topbar action icons.
+     */
+    actionsList?: NavTopBarAction[];
     /** App-specific action cluster rendered left of the theme toggle. */
     actions?: ReactNode;
     /** Theme toggle slot (injected so this package needs no theme dependency). */
     themeToggle?: ReactNode;
 };
-declare function NavTopBar({ title, subtitle, user, onSignOut, actions, themeToggle, }: NavTopBarProps): react_jsx_runtime.JSX.Element;
+declare function NavTopBar({ title, subtitle, user, onSignOut, actionsList, actions, themeToggle, }: NavTopBarProps): react_jsx_runtime.JSX.Element;
 type NavAppShellProps = {
     sidebar: NavSidebarProps;
     topBar: NavTopBarProps;
@@ -103,4 +133,4 @@ type NavAppShellProps = {
  */
 declare function NavAppShell({ sidebar, topBar, children }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { NavAppShell, type NavAppShellProps, type NavBrand, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavMode, type NavOrg, NavSidebar, type NavSidebarProps, NavTopBar, type NavTopBarProps, type NavUser, envChipClasses, isNavItemActive };
+export { NavAppShell, type NavAppShellProps, type NavBrand, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavMode, type NavOrg, NavSidebar, type NavSidebarProps, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, envChipClasses, isNavItemActive };

package/dist/native.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/native/index.tsx
@@ -8,12 +9,15 @@ function isNavItemActive(pathname, href) {
 }
 function envChipClasses(label) {
   const l = label.toLowerCase();
-  if (l === "production")
-    return "bg-[rgba(230,57,70,0.12)] text-[color:var(--color-race-red)]";
-  if (l === "staging") return "bg-[rgba(242,201,76,0.18)] text-[#a6791f]";
-  return "bg-[rgba(0,166,81,0.14)] text-[color:var(--color-green-flag)]";
+  if (l === "production" || l === "prod")
+    return "bg-[#fee2e2] text-[#ef4444]";
+  if (l === "staging" || l === "stage")
+    return "bg-[#ffedd5] text-[#f97316]";
+  if (l === "local" || l === "development" || l === "dev")
+    return "bg-[#dcfce7] text-[#22c55e]";
+  return "bg-[rgba(107,114,128,0.16)] text-[#6b7280]";
 }
-var ORG_PILL_DEFAULT = "#2d2f36";
+var ORG_PILL_DEFAULT = "var(--color-race-red)";
 function NavSidebar({
   pathname,
   brand,
@@ -52,7 +56,10 @@ function NavSidebar({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-y-auto px-4 pb-2", children: [
       org ? /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "mb-2 px-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+          org.id ? /* @__PURE__ */ jsx(OrgIdCopyButton, { id: org.id }) : null
+        ] }),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -86,30 +93,16 @@ function NavSidebar({
       ) }) : null,
       /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-1", children: [
         nav.groupLabel ? /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: nav.groupLabel }) : null,
-        nav.items.map((item) => {
-          const active = activeFn(pathname, item.href);
-          const Icon = item.icon;
-          return /* @__PURE__ */ jsxs(
-            Link,
+        nav.items.map((item, idx) => {
+          const active = item.href ? activeFn(pathname, item.href) : false;
+          return /* @__PURE__ */ jsx(
+            NavRow,
             {
-              href: item.href,
-              "aria-current": active ? "page" : void 0,
-              className: [
-                "group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-semibold transition",
-                active ? "bg-[color:var(--color-race-red)] text-white shadow-sm" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
-              ].join(" "),
-              children: [
-                Icon ? /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    size: 18,
-                    className: active ? "text-white" : "text-current"
-                  }
-                ) : null,
-                item.label
-              ]
+              item,
+              active,
+              Link
             },
-            item.href
+            item.href ?? `nav-${idx}-${item.label}`
           );
         })
       ] })
@@ -126,12 +119,36 @@ function NavSidebar({
           }
         )
       ] }, l.label)) }) : null,
-      /* @__PURE__ */ jsxs("p", { className: "mt-1.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
-        footer.envLabel,
-        " \xB7 v",
-        footer.version,
-        " \xB7 ",
-        footer.commit.slice(0, 7)
+      /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: [
+                "rounded-md px-1.5 py-0.5 text-[10px] font-semibold",
+                envChipClasses(footer.envLabel)
+              ].join(" "),
+              children: footer.envLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          /* @__PURE__ */ jsx("span", { children: footer.commit.slice(-4) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "v",
+            footer.version
+          ] })
+        ] }),
+        footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          footer.commitDate ? /* @__PURE__ */ jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
+            month: "short",
+            day: "numeric"
+          }) }) : null,
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          footer.commitAuthor ? /* @__PURE__ */ jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null,
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" })
+        ] }) : null
       ] })
     ] }) : null
   ] });
@@ -154,11 +171,70 @@ function ChevronDown() {
     }
   );
 }
+var NAV_HOVER_GRADIENT = "linear-gradient(90deg,#ea6a3a 0%,#E63946 100%)";
+function NavRow({
+  item,
+  active,
+  Link
+}) {
+  const Icon = item.icon;
+  const wrapperClasses = [
+    "group relative block overflow-hidden rounded-md transition",
+    active ? "bg-[color:var(--color-race-red)] text-white shadow-sm" : "text-[color:var(--muted)] hover:text-white"
+  ].join(" ");
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !active ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full",
+        style: { background: NAV_HOVER_GRADIENT }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex items-center gap-3 px-3 py-2 text-sm font-semibold", children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, { size: 18, className: active ? "text-white" : "text-current" }) : null,
+      item.label
+    ] })
+  ] });
+  if (item.onClick && !item.href) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, className: `w-full text-left ${wrapperClasses}`, children: inner });
+  }
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: item.href ?? "#",
+      "aria-current": active ? "page" : void 0,
+      className: wrapperClasses,
+      children: inner
+    }
+  );
+}
+function OrgIdCopyButton({ id }) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        try {
+          void navigator.clipboard?.writeText(id);
+        } catch {
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      title: "Copy organization id",
+      className: "rounded px-1 text-[11px] text-[color:var(--muted)] hover:bg-[color:var(--panel)]",
+      children: copied ? "Copied" : `...${id.slice(-8)}`
+    }
+  );
+}
 function NavTopBar({
   title,
   subtitle,
   user,
   onSignOut,
+  actionsList,
   actions,
   themeToggle
 }) {
@@ -177,6 +253,7 @@ function NavTopBar({
       subtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-[color:var(--muted)]", children: subtitle }) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+      actionsList && actionsList.length > 0 ? actionsList.map((action) => /* @__PURE__ */ jsx(NavTopBarActionButton, { action }, action.key)) : null,
       actions,
       themeToggle,
       /* @__PURE__ */ jsxs("details", { className: "group relative", children: [
@@ -225,6 +302,44 @@ function SignOutIcon() {
     }
   );
 }
+function NavTopBarActionButton({ action }) {
+  const Icon = action.icon;
+  const tone = action.tone ?? "default";
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]" : "text-[color:var(--muted)] hover:text-[color:var(--foreground)]";
+  const className = [
+    "relative flex h-8 w-8 items-center justify-center rounded-full border border-[color:var(--line)] transition",
+    toneClass
+  ].join(" ");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { size: 20, className: "text-current" }),
+    typeof action.badge === "number" && action.badge > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] text-white", children: action.badge }) : null
+  ] });
+  const isExternal = action.href ? /^https?:\/\//.test(action.href) : false;
+  if (action.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: action.href,
+        "aria-label": action.label,
+        title: action.label,
+        className,
+        ...isExternal ? { target: "_blank", rel: "noreferrer" } : {},
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      "aria-label": action.label,
+      title: action.label,
+      className,
+      children: content
+    }
+  );
+}
 function NavAppShell({ sidebar, topBar, children }) {
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]", children: [
     /* @__PURE__ */ jsx(NavSidebar, { ...sidebar }),

package/dist/native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/native/index.tsx"],"names":[],"mappings":"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","file":"native.js","sourcesContent":["// ---------------------------------------------------------------------------\n// Framework-agnostic chrome (sidebar + top navbar) for @the-portland-company/shell.\n//\n// The other chrome in this package (ShellChrome, Sidebar, Header, …) is built\n// on Chakra UI v2 + react-router and targets Vite SPAs. That stack cannot be\n// imported into a Next.js / React 19 / Tailwind app. This \"native\" module is a\n// dependency-light alternative: pure React (no Chakra, no emotion, no\n// react-router, no icon library) whose styling is driven entirely by the CSS\n// design tokens shipped in `@the-portland-company/shell/chrome.css`.\n//\n// It is a FAITHFUL VISUAL TWIN of the Chakra chrome (Sidebar.tsx / Header.tsx /\n// OrgPill / ModePill / NavItem / UserMenu): same 240px sidebar, brand-logo\n// slot, \"ORGANIZATION\" org pill, mode pill, solid active nav rows, pipe-\n// separated footer links + commit string, and an avatar+name+email+chevron user\n// menu — so an app rendering this looks identical to the main VRM app.\n//\n// Every app concern (nav items, org, mode, user, links, icons, the routing\n// Link component, the theme toggle) is injected via props, so both the Contacts\n// app (Next.js) and the VRM app could consume the same components.\n// ---------------------------------------------------------------------------\n\nimport type { ComponentType, ReactNode } from 'react'\n\n// An icon is any component that accepts an optional size + className. This\n// matches both `lucide-react` and `react-icons` icon signatures, so consuming\n// apps pass their own icon set without this package depending on one.\nexport type NavIcon = ComponentType<{ size?: number; className?: string }>\n\nexport type NavItem = {\n  href: string\n  label: string\n  icon?: NavIcon\n}\n\n// The routing primitive is injected so each app supplies its own (Next.js\n// `<Link>`, react-router `<Link>`, or a plain `<a>`). Defaults to an anchor.\nexport type NavLinkProps = {\n  href: string\n  className?: string\n  'aria-current'?: 'page' | undefined\n  children: ReactNode\n}\nexport type NavLinkComponent = ComponentType<NavLinkProps>\n\nconst DefaultLink: NavLinkComponent = ({ href, children, ...rest }) => (\n  <a href={href} {...rest}>\n    {children}\n  </a>\n)\n\n/** Default active-route test: exact match for \"/\", prefix match otherwise. */\nexport function isNavItemActive(pathname: string, href: string): boolean {\n  if (href === '/') return pathname === '/'\n  return pathname === href || pathname.startsWith(`${href}/`)\n}\n\n/** Token-driven tone classes for the sidebar environment chip. */\nexport function envChipClasses(label: string): string {\n  const l = label.toLowerCase()\n  if (l === 'production')\n    return 'bg-[rgba(230,57,70,0.12)] text-[color:var(--color-race-red)]'\n  if (l === 'staging') return 'bg-[rgba(242,201,76,0.18)] text-[#a6791f]'\n  return 'bg-[rgba(0,166,81,0.14)] text-[color:var(--color-green-flag)]'\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavBrand = {\n  /** Where the logo links to. Defaults to \"/\". */\n  homeHref?: string\n  /**\n   * Brand logo image src. When supplied this renders as the wordmark logo\n   * (matching the main app's BrandLogo), and `badgeLabel`/`title`/`subtitle`\n   * are used only as the no-image fallback.\n   */\n  logoSrc?: string\n  logoAlt?: string\n  /** Short label shown inside the brand badge fallback (e.g. \"P\"). */\n  badgeLabel: string\n  title: string\n  subtitle?: string\n}\n\nexport type NavOrg = {\n  name: string | null\n  /** Optional org logo for the pill badge; falls back to initials. */\n  logoUrl?: string | null\n  /** Solid pill background (the org's brand color). Defaults to a dark slate. */\n  brandColor?: string | null\n  onClick?: () => void\n}\n\nexport type NavMode = {\n  label: string\n  icon?: NavIcon\n}\n\nexport type NavFooterLink = { label: string; href: string; external?: boolean }\n\nexport type NavFooter = {\n  envLabel: string\n  version: string\n  commit: string\n  links?: NavFooterLink[]\n}\n\nexport type NavSidebarProps = {\n  pathname: string\n  brand: NavBrand\n  nav: {\n    groupLabel?: string\n    items: NavItem[]\n    isActive?: (pathname: string, href: string) => boolean\n  }\n  org?: NavOrg | null\n  mode?: NavMode | null\n  footer?: NavFooter | null\n  linkComponent?: NavLinkComponent\n}\n\n// Default org-pill background — a dark slate that mirrors the main app's pill\n// when an org has no explicit brand color.\nconst ORG_PILL_DEFAULT = '#2d2f36'\n\nexport function NavSidebar({\n  pathname,\n  brand,\n  nav,\n  org,\n  mode,\n  footer,\n  linkComponent,\n}: NavSidebarProps) {\n  const Link = linkComponent ?? DefaultLink\n  const activeFn = nav.isActive ?? isNavItemActive\n  const ModeIcon = mode?.icon\n  const orgBg = org?.brandColor || ORG_PILL_DEFAULT\n\n  return (\n    <aside className=\"fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] lg:flex\">\n      {/* Brand — logo image (preferred) or badge fallback */}\n      <Link\n        href={brand.homeHref ?? '/'}\n        className=\"flex h-[64px] flex-shrink-0 items-center gap-2.5 px-6\"\n      >\n        {brand.logoSrc ? (\n          <img\n            src={brand.logoSrc}\n            alt={brand.logoAlt ?? brand.title}\n            draggable={false}\n            className=\"h-10 w-auto object-contain\"\n          />\n        ) : (\n          <>\n            <span className=\"flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-race-red)] text-base font-black text-white shadow-sm\">\n              {brand.badgeLabel}\n            </span>\n            <span className=\"flex flex-col leading-tight\">\n              <span className=\"text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-race-red)]\">\n                {brand.title}\n              </span>\n              {brand.subtitle ? (\n                <span className=\"text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]\">\n                  {brand.subtitle}\n                </span>\n              ) : null}\n            </span>\n          </>\n        )}\n      </Link>\n\n      {/* Scroll region: org pill, mode pill, nav */}\n      <div className=\"flex flex-1 flex-col overflow-y-auto px-4 pb-2\">\n        {/* Organization switcher */}\n        {org ? (\n          <div className=\"mb-3\">\n            <p className=\"mb-2 px-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n              Organization\n            </p>\n            <button\n              type=\"button\"\n              onClick={org.onClick}\n              style={{ backgroundColor: orgBg }}\n              className=\"flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-left text-white shadow-sm transition hover:opacity-95\"\n            >\n              <span className=\"flex min-w-0 items-center gap-2.5\">\n                <span className=\"flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white/20 text-[11px] font-bold text-white\">\n                  {org.logoUrl ? (\n                    <img src={org.logoUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n                  ) : (\n                    (org.name ?? 'Org').slice(0, 2).toUpperCase()\n                  )}\n                </span>\n                <span className=\"truncate text-sm font-semibold\">\n                  {org.name ?? 'No organizations'}\n                </span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Mode pill */}\n        {mode ? (\n          <div className=\"mb-4\">\n            <button\n              type=\"button\"\n              className=\"flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--color-race-red)] px-2.5 py-2 text-white shadow-sm\"\n            >\n              <span className=\"flex items-center gap-2.5\">\n                {ModeIcon ? <ModeIcon size={16} className=\"shrink-0\" /> : null}\n                <span className=\"text-sm font-semibold tracking-[-0.01em]\">{mode.label}</span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Nav list */}\n        <nav className=\"flex flex-col gap-1\">\n          {nav.groupLabel ? (\n            <p className=\"px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n              {nav.groupLabel}\n            </p>\n          ) : null}\n          {nav.items.map((item) => {\n            const active = activeFn(pathname, item.href)\n            const Icon = item.icon\n            return (\n              <Link\n                key={item.href}\n                href={item.href}\n                aria-current={active ? 'page' : undefined}\n                className={[\n                  'group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-semibold transition',\n                  active\n                    ? 'bg-[color:var(--color-race-red)] text-white shadow-sm'\n                    : 'text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]',\n                ].join(' ')}\n              >\n                {Icon ? (\n                  <Icon\n                    size={18}\n                    className={active ? 'text-white' : 'text-current'}\n                  />\n                ) : null}\n                {item.label}\n              </Link>\n            )\n          })}\n        </nav>\n      </div>\n\n      {/* Footer — pipe-separated links + commit/version string */}\n      {footer ? (\n        <div className=\"flex-shrink-0 border-t border-[color:var(--line)] px-4 py-3\">\n          {footer.links && footer.links.length > 0 ? (\n            <div className=\"flex flex-wrap items-center gap-1.5 text-xs\">\n              {footer.links.map((l, idx) => (\n                <span key={l.label} className=\"inline-flex items-center gap-1.5\">\n                  {idx > 0 ? <span className=\"text-[color:var(--muted)]\">|</span> : null}\n                  <a\n                    href={l.href}\n                    className=\"font-medium text-[color:var(--color-race-red)] hover:underline\"\n                  >\n                    {l.label}\n                  </a>\n                </span>\n              ))}\n            </div>\n          ) : null}\n          <p className=\"mt-1.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]\">\n            {footer.envLabel} · v{footer.version} · {footer.commit.slice(0, 7)}\n          </p>\n        </div>\n      ) : null}\n    </aside>\n  )\n}\n\n// Inline chevron-down (mirrors lucide `ChevronDown`) — no icon dependency.\nfunction ChevronDown() {\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"shrink-0 opacity-80\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavUser = {\n  name: string | null\n  email?: string | null\n  /** Avatar image URL; falls back to initials on the brand color. */\n  avatarUrl?: string | null\n  tier?: string | null\n  role?: string | null\n}\n\nexport type NavTopBarProps = {\n  title: string\n  subtitle?: string\n  user?: NavUser | null\n  onSignOut?: () => void\n  /** App-specific action cluster rendered left of the theme toggle. */\n  actions?: ReactNode\n  /** Theme toggle slot (injected so this package needs no theme dependency). */\n  themeToggle?: ReactNode\n}\n\nexport function NavTopBar({\n  title,\n  subtitle,\n  user,\n  onSignOut,\n  actions,\n  themeToggle,\n}: NavTopBarProps) {\n  const initials = (user?.name ?? 'Politogy').slice(0, 2).toUpperCase()\n  const secondary = user?.email || [user?.tier, user?.role].filter(Boolean).join(' · ') || 'member'\n  return (\n    <header className=\"sticky top-0 z-20 flex h-20 items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-4 backdrop-blur-xl\">\n      <div className=\"min-w-0\">\n        <h1\n          className=\"truncate text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]\"\n          data-display=\"true\"\n        >\n          {title}\n        </h1>\n        {subtitle ? (\n          <p className=\"truncate text-sm text-[color:var(--muted)]\">{subtitle}</p>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {actions}\n        {themeToggle}\n\n        {/* User menu — avatar + name/email + chevron; sign-out in a native\n            <details> popover so the package needs no JS state. */}\n        <details className=\"group relative\">\n          <summary className=\"flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden\">\n            <span className=\"flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white\">\n              {user?.avatarUrl ? (\n                <img src={user.avatarUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n              ) : (\n                initials\n              )}\n            </span>\n            <span className=\"hidden flex-col leading-tight md:flex\">\n              <span className=\"text-sm font-semibold text-[color:var(--foreground)]\">\n                {user?.name ?? 'Signed in'}\n              </span>\n              <span className=\"text-xs text-[color:var(--muted)]\">{secondary}</span>\n            </span>\n            <ChevronDown />\n          </summary>\n          {onSignOut ? (\n            <div className=\"absolute right-0 z-30 mt-2 w-44 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]\">\n              <button\n                type=\"button\"\n                onClick={onSignOut}\n                className=\"flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-race-red)]\"\n              >\n                <SignOutIcon />\n                Sign out\n              </button>\n            </div>\n          ) : null}\n        </details>\n      </div>\n    </header>\n  )\n}\n\n// Inline log-out glyph (mirrors lucide `LogOut`) to avoid an icon dependency.\nfunction SignOutIcon() {\n  return (\n    <svg\n      width={15}\n      height={15}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n      <polyline points=\"16 17 21 12 16 7\" />\n      <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n    </svg>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavAppShellProps = {\n  sidebar: NavSidebarProps\n  topBar: NavTopBarProps\n  children: ReactNode\n}\n\n/**\n * Full chrome: branded left sidebar + sticky top navbar + scrollable content\n * region. Presentational only — wrap it in app-level auth/gating as needed.\n */\nexport function NavAppShell({ sidebar, topBar, children }: NavAppShellProps) {\n  return (\n    <div className=\"min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]\">\n      <NavSidebar {...sidebar} />\n      <div className=\"lg:pl-[240px]\">\n        <NavTopBar {...topBar} />\n        <main className=\"px-6 py-7\">\n          <div className=\"mx-auto max-w-7xl\">{children}</div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../src/native/index.tsx"],"names":[],"mappings":"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","file":"native.js","sourcesContent":["// ---------------------------------------------------------------------------\n// Framework-agnostic chrome (sidebar + top navbar) for @the-portland-company/shell.\n//\n// The other chrome in this package (ShellChrome, Sidebar, Header, …) is built\n// on Chakra UI v2 + react-router and targets Vite SPAs. That stack cannot be\n// imported into a Next.js / React 19 / Tailwind app. This \"native\" module is a\n// dependency-light alternative: pure React (no Chakra, no emotion, no\n// react-router, no icon library) whose styling is driven entirely by the CSS\n// design tokens shipped in `@the-portland-company/shell/chrome.css`.\n//\n// It is a FAITHFUL VISUAL TWIN of the Chakra chrome (Sidebar.tsx / Header.tsx /\n// OrgPill / ModePill / NavItem / UserMenu): same 240px sidebar, brand-logo\n// slot, \"ORGANIZATION\" org pill, mode pill, solid active nav rows, pipe-\n// separated footer links + commit string, and an avatar+name+email+chevron user\n// menu — so an app rendering this looks identical to the main VRM app.\n//\n// Every app concern (nav items, org, mode, user, links, icons, the routing\n// Link component, the theme toggle) is injected via props, so both the Contacts\n// app (Next.js) and the VRM app could consume the same components.\n// ---------------------------------------------------------------------------\n\nimport type { ComponentType, ReactNode } from 'react'\nimport { useState } from 'react'\n\n// An icon is any component that accepts an optional size + className. This\n// matches both `lucide-react` and `react-icons` icon signatures, so consuming\n// apps pass their own icon set without this package depending on one.\nexport type NavIcon = ComponentType<{ size?: number; className?: string }>\n\nexport type NavItem = {\n  /** Route to link to. Optional when `onClick` is supplied (renders a button). */\n  href?: string\n  label: string\n  icon?: NavIcon\n  /**\n   * When supplied the row renders as a `<button>` (styled identically to the\n   * link rows) instead of a routed link — used for actions like \"Support\".\n   */\n  onClick?: () => void\n}\n\n// The routing primitive is injected so each app supplies its own (Next.js\n// `<Link>`, react-router `<Link>`, or a plain `<a>`). Defaults to an anchor.\nexport type NavLinkProps = {\n  href: string\n  className?: string\n  'aria-current'?: 'page' | undefined\n  children: ReactNode\n}\nexport type NavLinkComponent = ComponentType<NavLinkProps>\n\nconst DefaultLink: NavLinkComponent = ({ href, children, ...rest }) => (\n  <a href={href} {...rest}>\n    {children}\n  </a>\n)\n\n/** Default active-route test: exact match for \"/\", prefix match otherwise. */\nexport function isNavItemActive(pathname: string, href: string): boolean {\n  if (href === '/') return pathname === '/'\n  return pathname === href || pathname.startsWith(`${href}/`)\n}\n\n/**\n * Color-coded tone classes for the sidebar environment chip, matching the main\n * VRM app: prod red, staging orange, local/dev green, unknown gray.\n */\nexport function envChipClasses(label: string): string {\n  const l = label.toLowerCase()\n  if (l === 'production' || l === 'prod')\n    return 'bg-[#fee2e2] text-[#ef4444]'\n  if (l === 'staging' || l === 'stage')\n    return 'bg-[#ffedd5] text-[#f97316]'\n  if (l === 'local' || l === 'development' || l === 'dev')\n    return 'bg-[#dcfce7] text-[#22c55e]'\n  return 'bg-[rgba(107,114,128,0.16)] text-[#6b7280]'\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavBrand = {\n  /** Where the logo links to. Defaults to \"/\". */\n  homeHref?: string\n  /**\n   * Brand logo image src. When supplied this renders as the wordmark logo\n   * (matching the main app's BrandLogo), and `badgeLabel`/`title`/`subtitle`\n   * are used only as the no-image fallback.\n   */\n  logoSrc?: string\n  logoAlt?: string\n  /** Short label shown inside the brand badge fallback (e.g. \"P\"). */\n  badgeLabel: string\n  title: string\n  subtitle?: string\n}\n\nexport type NavOrg = {\n  name: string | null\n  /** Full org id. When present, a copy affordance is shown by the label. */\n  id?: string | null\n  /** Optional org logo for the pill badge; falls back to initials. */\n  logoUrl?: string | null\n  /** Solid pill background (the org's brand color). Defaults to race red. */\n  brandColor?: string | null\n  onClick?: () => void\n}\n\nexport type NavMode = {\n  label: string\n  icon?: NavIcon\n}\n\nexport type NavFooterLink = { label: string; href: string; external?: boolean }\n\nexport type NavFooter = {\n  envLabel: string\n  version: string\n  commit: string\n  links?: NavFooterLink[]\n  /** ISO date (or any Date-parseable string) of the deployed commit. */\n  commitDate?: string\n  /** Full name of the commit author (only the first name is shown). */\n  commitAuthor?: string\n}\n\nexport type NavSidebarProps = {\n  pathname: string\n  brand: NavBrand\n  nav: {\n    groupLabel?: string\n    items: NavItem[]\n    isActive?: (pathname: string, href: string) => boolean\n  }\n  org?: NavOrg | null\n  mode?: NavMode | null\n  footer?: NavFooter | null\n  linkComponent?: NavLinkComponent\n}\n\n// Default org-pill background — race red, matching the main app's fallback\n// (mode primary) when an org has no explicit brand color.\nconst ORG_PILL_DEFAULT = 'var(--color-race-red)'\n\nexport function NavSidebar({\n  pathname,\n  brand,\n  nav,\n  org,\n  mode,\n  footer,\n  linkComponent,\n}: NavSidebarProps) {\n  const Link = linkComponent ?? DefaultLink\n  const activeFn = nav.isActive ?? isNavItemActive\n  const ModeIcon = mode?.icon\n  const orgBg = org?.brandColor || ORG_PILL_DEFAULT\n\n  return (\n    <aside className=\"fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] lg:flex\">\n      {/* Brand — logo image (preferred) or badge fallback */}\n      <Link\n        href={brand.homeHref ?? '/'}\n        className=\"flex h-[64px] flex-shrink-0 items-center gap-2.5 px-6\"\n      >\n        {brand.logoSrc ? (\n          <img\n            src={brand.logoSrc}\n            alt={brand.logoAlt ?? brand.title}\n            draggable={false}\n            className=\"h-10 w-auto object-contain\"\n          />\n        ) : (\n          <>\n            <span className=\"flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-race-red)] text-base font-black text-white shadow-sm\">\n              {brand.badgeLabel}\n            </span>\n            <span className=\"flex flex-col leading-tight\">\n              <span className=\"text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-race-red)]\">\n                {brand.title}\n              </span>\n              {brand.subtitle ? (\n                <span className=\"text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]\">\n                  {brand.subtitle}\n                </span>\n              ) : null}\n            </span>\n          </>\n        )}\n      </Link>\n\n      {/* Scroll region: org pill, mode pill, nav */}\n      <div className=\"flex flex-1 flex-col overflow-y-auto px-4 pb-2\">\n        {/* Organization switcher */}\n        {org ? (\n          <div className=\"mb-3\">\n            <div className=\"mb-2 flex items-center justify-between px-1\">\n              <p className=\"text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n                Organization\n              </p>\n              {org.id ? <OrgIdCopyButton id={org.id} /> : null}\n            </div>\n            <button\n              type=\"button\"\n              onClick={org.onClick}\n              style={{ backgroundColor: orgBg }}\n              className=\"flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-left text-white shadow-sm transition hover:opacity-95\"\n            >\n              <span className=\"flex min-w-0 items-center gap-2.5\">\n                <span className=\"flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white/20 text-[11px] font-bold text-white\">\n                  {org.logoUrl ? (\n                    <img src={org.logoUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n                  ) : (\n                    (org.name ?? 'Org').slice(0, 2).toUpperCase()\n                  )}\n                </span>\n                <span className=\"truncate text-sm font-semibold\">\n                  {org.name ?? 'No organizations'}\n                </span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Mode pill */}\n        {mode ? (\n          <div className=\"mb-4\">\n            <button\n              type=\"button\"\n              className=\"flex w-full items-center justify-between gap-2 rounded-md bg-[color:var(--color-race-red)] px-2.5 py-2 text-white shadow-sm\"\n            >\n              <span className=\"flex items-center gap-2.5\">\n                {ModeIcon ? <ModeIcon size={16} className=\"shrink-0\" /> : null}\n                <span className=\"text-sm font-semibold tracking-[-0.01em]\">{mode.label}</span>\n              </span>\n              <ChevronDown />\n            </button>\n          </div>\n        ) : null}\n\n        {/* Nav list */}\n        <nav className=\"flex flex-col gap-1\">\n          {nav.groupLabel ? (\n            <p className=\"px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n              {nav.groupLabel}\n            </p>\n          ) : null}\n          {nav.items.map((item, idx) => {\n            const active = item.href ? activeFn(pathname, item.href) : false\n            return (\n              <NavRow\n                key={item.href ?? `nav-${idx}-${item.label}`}\n                item={item}\n                active={active}\n                Link={Link}\n              />\n            )\n          })}\n        </nav>\n      </div>\n\n      {/* Footer — pipe-separated links + commit/version string */}\n      {footer ? (\n        <div className=\"flex-shrink-0 border-t border-[color:var(--line)] px-4 py-3\">\n          {footer.links && footer.links.length > 0 ? (\n            <div className=\"flex flex-wrap items-center gap-1.5 text-xs\">\n              {footer.links.map((l, idx) => (\n                <span key={l.label} className=\"inline-flex items-center gap-1.5\">\n                  {idx > 0 ? <span className=\"text-[color:var(--muted)]\">|</span> : null}\n                  <a\n                    href={l.href}\n                    className=\"font-medium text-[color:var(--color-race-red)] hover:underline\"\n                  >\n                    {l.label}\n                  </a>\n                </span>\n              ))}\n            </div>\n          ) : null}\n          <div className=\"mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]\">\n            {/* Row 1: env chip | commit | version */}\n            <div className=\"flex items-center gap-1.5\">\n              <span\n                className={[\n                  'rounded-md px-1.5 py-0.5 text-[10px] font-semibold',\n                  envChipClasses(footer.envLabel),\n                ].join(' ')}\n              >\n                {footer.envLabel}\n              </span>\n              <span className=\"text-[color:var(--muted)]\">|</span>\n              <span>{footer.commit.slice(-4)}</span>\n              <span className=\"text-[color:var(--muted)]\">|</span>\n              <span>v{footer.version}</span>\n            </div>\n            {/* Row 2: date | author (only when supplied) */}\n            {footer.commitDate || footer.commitAuthor ? (\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"text-[color:var(--muted)]\">|</span>\n                {footer.commitDate ? (\n                  <span>\n                    {new Date(footer.commitDate).toLocaleDateString(undefined, {\n                      month: 'short',\n                      day: 'numeric',\n                    })}\n                  </span>\n                ) : null}\n                <span className=\"text-[color:var(--muted)]\">|</span>\n                {footer.commitAuthor ? (\n                  <span>{footer.commitAuthor.split(/\\s+/)[0]}</span>\n                ) : null}\n                <span className=\"text-[color:var(--muted)]\">|</span>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n    </aside>\n  )\n}\n\n// Inline chevron-down (mirrors lucide `ChevronDown`) — no icon dependency.\nfunction ChevronDown() {\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"shrink-0 opacity-80\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  )\n}\n\n// A single sidebar nav row. Renders as a routed <Link> (href) or a <button>\n// (onClick), styled identically. Inactive rows animate a left→right gradient\n// sweep on hover (matching the main app); active rows keep solid race-red.\nconst NAV_HOVER_GRADIENT = 'linear-gradient(90deg,#ea6a3a 0%,#E63946 100%)'\n\nfunction NavRow({\n  item,\n  active,\n  Link,\n}: {\n  item: NavItem\n  active: boolean\n  Link: NavLinkComponent\n}) {\n  const Icon = item.icon\n  const wrapperClasses = [\n    'group relative block overflow-hidden rounded-md transition',\n    active\n      ? 'bg-[color:var(--color-race-red)] text-white shadow-sm'\n      : 'text-[color:var(--muted)] hover:text-white',\n  ].join(' ')\n\n  const inner = (\n    <>\n      {!active ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full\"\n          style={{ background: NAV_HOVER_GRADIENT }}\n        />\n      ) : null}\n      <span className=\"relative z-10 flex items-center gap-3 px-3 py-2 text-sm font-semibold\">\n        {Icon ? (\n          <Icon size={18} className={active ? 'text-white' : 'text-current'} />\n        ) : null}\n        {item.label}\n      </span>\n    </>\n  )\n\n  if (item.onClick && !item.href) {\n    return (\n      <button type=\"button\" onClick={item.onClick} className={`w-full text-left ${wrapperClasses}`}>\n        {inner}\n      </button>\n    )\n  }\n\n  return (\n    <Link\n      href={item.href ?? '#'}\n      aria-current={active ? 'page' : undefined}\n      className={wrapperClasses}\n    >\n      {inner}\n    </Link>\n  )\n}\n\n// Right-aligned copy affordance for the org id, shown beside the \"Organization\"\n// label. Copies the full id and briefly swaps its text to \"Copied\".\nfunction OrgIdCopyButton({ id }: { id: string }) {\n  const [copied, setCopied] = useState(false)\n  return (\n    <button\n      type=\"button\"\n      onClick={() => {\n        try {\n          void navigator.clipboard?.writeText(id)\n        } catch {\n          /* clipboard unavailable — ignore */\n        }\n        setCopied(true)\n        setTimeout(() => setCopied(false), 1500)\n      }}\n      title=\"Copy organization id\"\n      className=\"rounded px-1 text-[11px] text-[color:var(--muted)] hover:bg-[color:var(--panel)]\"\n    >\n      {copied ? 'Copied' : `...${id.slice(-8)}`}\n    </button>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavUser = {\n  name: string | null\n  email?: string | null\n  /** Avatar image URL; falls back to initials on the brand color. */\n  avatarUrl?: string | null\n  tier?: string | null\n  role?: string | null\n}\n\nexport type NavTopBarAction = {\n  key: string\n  icon: NavIcon\n  label: string\n  onClick?: () => void\n  href?: string\n  badge?: number | null\n  tone?: 'default' | 'warning' | 'danger'\n}\n\nexport type NavTopBarProps = {\n  title: string\n  subtitle?: string\n  user?: NavUser | null\n  onSignOut?: () => void\n  /**\n   * Structured icon-button action cluster (32×32 circular buttons with optional\n   * count badges), rendered before the `actions` slot. Matches the main app's\n   * topbar action icons.\n   */\n  actionsList?: NavTopBarAction[]\n  /** App-specific action cluster rendered left of the theme toggle. */\n  actions?: ReactNode\n  /** Theme toggle slot (injected so this package needs no theme dependency). */\n  themeToggle?: ReactNode\n}\n\nexport function NavTopBar({\n  title,\n  subtitle,\n  user,\n  onSignOut,\n  actionsList,\n  actions,\n  themeToggle,\n}: NavTopBarProps) {\n  const initials = (user?.name ?? 'Politogy').slice(0, 2).toUpperCase()\n  const secondary = user?.email || [user?.tier, user?.role].filter(Boolean).join(' · ') || 'member'\n  return (\n    <header className=\"sticky top-0 z-20 flex h-20 items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-4 backdrop-blur-xl\">\n      <div className=\"min-w-0\">\n        <h1\n          className=\"truncate text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]\"\n          data-display=\"true\"\n        >\n          {title}\n        </h1>\n        {subtitle ? (\n          <p className=\"truncate text-sm text-[color:var(--muted)]\">{subtitle}</p>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {actionsList && actionsList.length > 0\n          ? actionsList.map((action) => (\n              <NavTopBarActionButton key={action.key} action={action} />\n            ))\n          : null}\n        {actions}\n        {themeToggle}\n\n        {/* User menu — avatar + name/email + chevron; sign-out in a native\n            <details> popover so the package needs no JS state. */}\n        <details className=\"group relative\">\n          <summary className=\"flex cursor-pointer list-none items-center gap-2.5 rounded-full py-1 pl-1 pr-2 transition hover:bg-[color:var(--panel-elevated)] [&::-webkit-details-marker]:hidden\">\n            <span className=\"flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white\">\n              {user?.avatarUrl ? (\n                <img src={user.avatarUrl} alt=\"\" className=\"h-full w-full object-cover\" />\n              ) : (\n                initials\n              )}\n            </span>\n            <span className=\"hidden flex-col leading-tight md:flex\">\n              <span className=\"text-sm font-semibold text-[color:var(--foreground)]\">\n                {user?.name ?? 'Signed in'}\n              </span>\n              <span className=\"text-xs text-[color:var(--muted)]\">{secondary}</span>\n            </span>\n            <ChevronDown />\n          </summary>\n          {onSignOut ? (\n            <div className=\"absolute right-0 z-30 mt-2 w-44 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]\">\n              <button\n                type=\"button\"\n                onClick={onSignOut}\n                className=\"flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)] hover:text-[color:var(--color-race-red)]\"\n              >\n                <SignOutIcon />\n                Sign out\n              </button>\n            </div>\n          ) : null}\n        </details>\n      </div>\n    </header>\n  )\n}\n\n// Inline log-out glyph (mirrors lucide `LogOut`) to avoid an icon dependency.\nfunction SignOutIcon() {\n  return (\n    <svg\n      width={15}\n      height={15}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n      <polyline points=\"16 17 21 12 16 7\" />\n      <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n    </svg>\n  )\n}\n\n// A single 32×32 circular icon button for the top bar's structured action list.\n// Renders an <a> when `href` is present (external links open in a new tab),\n// otherwise a <button>. Shows a red count badge when `badge > 0`.\nfunction NavTopBarActionButton({ action }: { action: NavTopBarAction }) {\n  const Icon = action.icon\n  const tone = action.tone ?? 'default'\n  const toneClass =\n    tone === 'danger' || tone === 'warning'\n      ? 'text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]'\n      : 'text-[color:var(--muted)] hover:text-[color:var(--foreground)]'\n  const className = [\n    'relative flex h-8 w-8 items-center justify-center rounded-full border border-[color:var(--line)] transition',\n    toneClass,\n  ].join(' ')\n\n  const content = (\n    <>\n      <Icon size={20} className=\"text-current\" />\n      {typeof action.badge === 'number' && action.badge > 0 ? (\n        <span className=\"absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] text-white\">\n          {action.badge}\n        </span>\n      ) : null}\n    </>\n  )\n\n  const isExternal = action.href ? /^https?:\\/\\//.test(action.href) : false\n\n  if (action.href) {\n    return (\n      <a\n        href={action.href}\n        aria-label={action.label}\n        title={action.label}\n        className={className}\n        {...(isExternal ? { target: '_blank', rel: 'noreferrer' } : {})}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={action.onClick}\n      aria-label={action.label}\n      title={action.label}\n      className={className}\n    >\n      {content}\n    </button>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavAppShellProps = {\n  sidebar: NavSidebarProps\n  topBar: NavTopBarProps\n  children: ReactNode\n}\n\n/**\n * Full chrome: branded left sidebar + sticky top navbar + scrollable content\n * region. Presentational only — wrap it in app-level auth/gating as needed.\n */\nexport function NavAppShell({ sidebar, topBar, children }: NavAppShellProps) {\n  return (\n    <div className=\"min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]\">\n      <NavSidebar {...sidebar} />\n      <div className=\"lg:pl-[240px]\">\n        <NavTopBar {...topBar} />\n        <main className=\"px-6 py-7\">\n          <div className=\"mx-auto max-w-7xl\">{children}</div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-portland-company/shell",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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,