@the-portland-company/shell 0.3.5 → 0.5.0

package/dist/native.cjs

@@ -0,0 +1,246 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/native/index.tsx
+var DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...rest, children });
+function isNavItemActive(pathname, href) {
+  if (href === "/") return pathname === "/";
+  return pathname === href || pathname.startsWith(`${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)]";
+}
+var ORG_PILL_DEFAULT = "#2d2f36";
+function NavSidebar({
+  pathname,
+  brand,
+  nav,
+  org,
+  mode,
+  footer,
+  linkComponent
+}) {
+  const Link = linkComponent ?? DefaultLink;
+  const activeFn = nav.isActive ?? isNavItemActive;
+  const ModeIcon = mode?.icon;
+  const orgBg = org?.brandColor || ORG_PILL_DEFAULT;
+  return /* @__PURE__ */ jsxRuntime.jsxs("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", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        href: brand.homeHref ?? "/",
+        className: "flex h-[64px] flex-shrink-0 items-center gap-2.5 px-6",
+        children: brand.logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: brand.logoSrc,
+            alt: brand.logoAlt ?? brand.title,
+            draggable: false,
+            className: "h-10 w-auto object-contain"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("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", children: brand.badgeLabel }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col leading-tight", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-race-red)]", children: brand.title }),
+            brand.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
+          ] })
+        ] })
+      }
+    ),
+    /* @__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(
+          "button",
+          {
+            type: "button",
+            onClick: org.onClick,
+            style: { backgroundColor: orgBg },
+            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",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("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", children: org.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: org.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (org.name ?? "Org").slice(0, 2).toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold", children: org.name ?? "No organizations" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+            ]
+          }
+        )
+      ] }) : null,
+      mode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          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",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5", children: [
+              ModeIcon ? /* @__PURE__ */ jsxRuntime.jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tracking-[-0.01em]", children: mode.label })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+          ]
+        }
+      ) }) : 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,
+            {
+              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.href
+          );
+        })
+      ] })
+    ] }),
+    footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 border-t border-[color:var(--line)] px-4 py-3", children: [
+      footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-xs", children: footer.links.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+        idx > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: l.href,
+            className: "font-medium text-[color:var(--color-race-red)] hover:underline",
+            children: l.label
+          }
+        )
+      ] }, 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)
+      ] })
+    ] }) : null
+  ] });
+}
+function ChevronDown() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0 opacity-80",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function NavTopBar({
+  title,
+  subtitle,
+  user,
+  onSignOut,
+  actions,
+  themeToggle
+}) {
+  const initials = (user?.name ?? "Politogy").slice(0, 2).toUpperCase();
+  const secondary = user?.email || [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member";
+  return /* @__PURE__ */ jsxRuntime.jsxs("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", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: "truncate text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]",
+          "data-display": "true",
+          children: title
+        }
+      ),
+      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: [
+      actions,
+      themeToggle,
+      /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("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", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("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", children: user?.avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: user.avatarUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden flex-col leading-tight md:flex", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: user?.name ?? "Signed in" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[color:var(--muted)]", children: secondary })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+        ] }),
+        onSignOut ? /* @__PURE__ */ jsxRuntime.jsx("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)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onSignOut,
+            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)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {}),
+              "Sign out"
+            ]
+          }
+        ) }) : null
+      ] })
+    ] })
+  ] });
+}
+function SignOutIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 15,
+      height: 15,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 17 21 12 16 7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
+      ]
+    }
+  );
+}
+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 }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[240px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(NavTopBar, { ...topBar }),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "px-6 py-7", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children }) })
+    ] })
+  ] });
+}
+
+exports.NavAppShell = NavAppShell;
+exports.NavSidebar = NavSidebar;
+exports.NavTopBar = NavTopBar;
+exports.envChipClasses = envChipClasses;
+exports.isNavItemActive = isNavItemActive;
+//# sourceMappingURL=native.cjs.map
+//# sourceMappingURL=native.cjs.map

package/dist/native.cjs.map

@@ -0,0 +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"]}

package/dist/native.d.cts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+
+type NavIcon = ComponentType<{
+    size?: number;
+    className?: string;
+}>;
+type NavItem = {
+    href: string;
+    label: string;
+    icon?: NavIcon;
+};
+type NavLinkProps = {
+    href: string;
+    className?: string;
+    'aria-current'?: 'page' | undefined;
+    children: ReactNode;
+};
+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. */
+declare function envChipClasses(label: string): string;
+type NavBrand = {
+    /** Where the logo links to. Defaults to "/". */
+    homeHref?: string;
+    /**
+     * Brand logo image src. When supplied this renders as the wordmark logo
+     * (matching the main app's BrandLogo), and `badgeLabel`/`title`/`subtitle`
+     * are used only as the no-image fallback.
+     */
+    logoSrc?: string;
+    logoAlt?: string;
+    /** Short label shown inside the brand badge fallback (e.g. "P"). */
+    badgeLabel: string;
+    title: string;
+    subtitle?: string;
+};
+type NavOrg = {
+    name: 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. */
+    brandColor?: string | null;
+    onClick?: () => void;
+};
+type NavMode = {
+    label: string;
+    icon?: NavIcon;
+};
+type NavFooterLink = {
+    label: string;
+    href: string;
+    external?: boolean;
+};
+type NavFooter = {
+    envLabel: string;
+    version: string;
+    commit: string;
+    links?: NavFooterLink[];
+};
+type NavSidebarProps = {
+    pathname: string;
+    brand: NavBrand;
+    nav: {
+        groupLabel?: string;
+        items: NavItem[];
+        isActive?: (pathname: string, href: string) => boolean;
+    };
+    org?: NavOrg | null;
+    mode?: NavMode | null;
+    footer?: NavFooter | null;
+    linkComponent?: NavLinkComponent;
+};
+declare function NavSidebar({ pathname, brand, nav, org, mode, footer, linkComponent, }: NavSidebarProps): react_jsx_runtime.JSX.Element;
+type NavUser = {
+    name: string | null;
+    email?: string | null;
+    /** Avatar image URL; falls back to initials on the brand color. */
+    avatarUrl?: string | null;
+    tier?: string | null;
+    role?: string | null;
+};
+type NavTopBarProps = {
+    title: string;
+    subtitle?: string;
+    user?: NavUser | null;
+    onSignOut?: () => void;
+    /** 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;
+type NavAppShellProps = {
+    sidebar: NavSidebarProps;
+    topBar: NavTopBarProps;
+    children: ReactNode;
+};
+/**
+ * Full chrome: branded left sidebar + sticky top navbar + scrollable content
+ * region. Presentational only — wrap it in app-level auth/gating as needed.
+ */
+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 };

package/dist/native.d.ts

@@ -0,0 +1,106 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+
+type NavIcon = ComponentType<{
+    size?: number;
+    className?: string;
+}>;
+type NavItem = {
+    href: string;
+    label: string;
+    icon?: NavIcon;
+};
+type NavLinkProps = {
+    href: string;
+    className?: string;
+    'aria-current'?: 'page' | undefined;
+    children: ReactNode;
+};
+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. */
+declare function envChipClasses(label: string): string;
+type NavBrand = {
+    /** Where the logo links to. Defaults to "/". */
+    homeHref?: string;
+    /**
+     * Brand logo image src. When supplied this renders as the wordmark logo
+     * (matching the main app's BrandLogo), and `badgeLabel`/`title`/`subtitle`
+     * are used only as the no-image fallback.
+     */
+    logoSrc?: string;
+    logoAlt?: string;
+    /** Short label shown inside the brand badge fallback (e.g. "P"). */
+    badgeLabel: string;
+    title: string;
+    subtitle?: string;
+};
+type NavOrg = {
+    name: 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. */
+    brandColor?: string | null;
+    onClick?: () => void;
+};
+type NavMode = {
+    label: string;
+    icon?: NavIcon;
+};
+type NavFooterLink = {
+    label: string;
+    href: string;
+    external?: boolean;
+};
+type NavFooter = {
+    envLabel: string;
+    version: string;
+    commit: string;
+    links?: NavFooterLink[];
+};
+type NavSidebarProps = {
+    pathname: string;
+    brand: NavBrand;
+    nav: {
+        groupLabel?: string;
+        items: NavItem[];
+        isActive?: (pathname: string, href: string) => boolean;
+    };
+    org?: NavOrg | null;
+    mode?: NavMode | null;
+    footer?: NavFooter | null;
+    linkComponent?: NavLinkComponent;
+};
+declare function NavSidebar({ pathname, brand, nav, org, mode, footer, linkComponent, }: NavSidebarProps): react_jsx_runtime.JSX.Element;
+type NavUser = {
+    name: string | null;
+    email?: string | null;
+    /** Avatar image URL; falls back to initials on the brand color. */
+    avatarUrl?: string | null;
+    tier?: string | null;
+    role?: string | null;
+};
+type NavTopBarProps = {
+    title: string;
+    subtitle?: string;
+    user?: NavUser | null;
+    onSignOut?: () => void;
+    /** 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;
+type NavAppShellProps = {
+    sidebar: NavSidebarProps;
+    topBar: NavTopBarProps;
+    children: ReactNode;
+};
+/**
+ * Full chrome: branded left sidebar + sticky top navbar + scrollable content
+ * region. Presentational only — wrap it in app-level auth/gating as needed.
+ */
+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 };