@the-portland-company/shell 0.3.4 → 0.4.0

package/dist/native.cjs

@@ -0,0 +1,210 @@
+'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)]";
+}
+function NavSidebar({
+  pathname,
+  brand,
+  nav,
+  org,
+  mode,
+  footer,
+  linkComponent
+}) {
+  const Link = linkComponent ?? DefaultLink;
+  const activeFn = nav.isActive ?? isNavItemActive;
+  const ModeIcon = mode?.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "fixed inset-y-0 left-0 z-30 hidden w-[264px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-4 py-5 lg:flex", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: brand.homeHref ?? "/", className: "flex items-center gap-3 px-1 py-1", 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-sm font-bold tracking-[-0.01em] text-[color:var(--foreground)]", 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
+      ] })
+    ] }),
+    org ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: org.onClick,
+        className: "mt-5 flex w-full items-center justify-between rounded-xl border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2.5 text-left transition hover:border-[color:var(--color-race-red)]/40",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2.5 overflow-hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[color:var(--accent-muted)] text-xs font-bold text-[color:var(--color-race-red)]", children: (org.name ?? "Org").slice(0, 2).toUpperCase() }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-semibold text-[color:var(--foreground)]", children: org.name ?? "Account" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDownUp, {})
+        ]
+      }
+    ) : null,
+    mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2.5 flex items-center gap-2.5 rounded-xl bg-[color:var(--color-race-red)] px-3 py-2.5 text-white shadow-sm", 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 })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "mt-5 flex flex-1 flex-col gap-1 overflow-y-auto", children: [
+      nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 text-[11px] font-semibold uppercase tracking-[0.16em] 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-xl px-3 py-2.5 text-sm font-semibold transition",
+              active ? "bg-[color:var(--accent-muted)] text-[color:var(--color-race-red)]" : "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-[color:var(--color-race-red)]" : "text-[color:var(--muted)] group-hover:text-[color:var(--foreground)]"
+                }
+              ) : null,
+              item.label
+            ]
+          },
+          item.href
+        );
+      })
+    ] }),
+    footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 border-t border-[color:var(--line)] pt-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] ${envChipClasses(
+              footer.envLabel
+            )}`,
+            children: footer.envLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
+          "v",
+          footer.version,
+          " \xB7 ",
+          footer.commit.slice(0, 7)
+        ] })
+      ] }),
+      footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex gap-3 text-[11px] font-medium text-[color:var(--muted)]", children: footer.links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: l.href, className: "hover:text-[color:var(--foreground)]", children: l.label }, l.label)) }) : null
+    ] }) : null
+  ] });
+}
+function ChevronDownUp() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 15,
+      height: 15,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0 text-[color:var(--muted)]",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 9 5-5 5 5" })
+      ]
+    }
+  );
+}
+function NavTopBar({
+  title,
+  subtitle,
+  user,
+  onSignOut,
+  actions,
+  themeToggle
+}) {
+  const initials = (user?.name ?? "Politogy").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-20 flex items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-6 py-3 backdrop-blur-xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h1",
+        {
+          className: "truncate text-xl font-semibold tracking-[-0.02em] 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("div", { className: "flex items-center gap-2.5 rounded-full border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 pl-1 pr-2.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white", children: initials }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden flex-col leading-tight md:flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: user?.name ?? "Signed in" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.08em] text-[color:var(--muted)]", children: [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member" })
+        ] }),
+        onSignOut ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onSignOut,
+            "aria-label": "Sign out",
+            className: "ml-1 flex h-7 w-7 items-center justify-center rounded-full text-[color:var(--muted)] hover:text-[color:var(--color-race-red)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(SignOutIcon, {})
+          }
+        ) : 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-[264px]", 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"],"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// 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  /** Short label shown inside the brand badge (e.g. \"P\"). */\n  badgeLabel: string\n  title: string\n  subtitle?: string\n}\n\nexport type NavOrg = {\n  name: 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 }\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\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\n  return (\n    <aside className=\"fixed inset-y-0 left-0 z-30 hidden w-[264px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-4 py-5 lg:flex\">\n      {/* Brand */}\n      <Link href={brand.homeHref ?? '/'} className=\"flex items-center gap-3 px-1 py-1\">\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-sm font-bold tracking-[-0.01em] text-[color:var(--foreground)]\">\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      </Link>\n\n      {/* Organization switcher pill */}\n      {org ? (\n        <button\n          type=\"button\"\n          onClick={org.onClick}\n          className=\"mt-5 flex w-full items-center justify-between rounded-xl border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2.5 text-left transition hover:border-[color:var(--color-race-red)]/40\"\n        >\n          <span className=\"flex items-center gap-2.5 overflow-hidden\">\n            <span className=\"flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[color:var(--accent-muted)] text-xs font-bold text-[color:var(--color-race-red)]\">\n              {(org.name ?? 'Org').slice(0, 2).toUpperCase()}\n            </span>\n            <span className=\"truncate text-sm font-semibold text-[color:var(--foreground)]\">\n              {org.name ?? 'Account'}\n            </span>\n          </span>\n          <ChevronDownUp />\n        </button>\n      ) : null}\n\n      {/* Mode pill */}\n      {mode ? (\n        <div className=\"mt-2.5 flex items-center gap-2.5 rounded-xl bg-[color:var(--color-race-red)] px-3 py-2.5 text-white shadow-sm\">\n          {ModeIcon ? <ModeIcon size={16} className=\"shrink-0\" /> : null}\n          <span className=\"text-sm font-semibold tracking-[-0.01em]\">{mode.label}</span>\n        </div>\n      ) : null}\n\n      {/* Nav list */}\n      <nav className=\"mt-5 flex flex-1 flex-col gap-1 overflow-y-auto\">\n        {nav.groupLabel ? (\n          <p className=\"px-3 pb-1 text-[11px] font-semibold uppercase tracking-[0.16em] 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-xl px-3 py-2.5 text-sm font-semibold transition',\n                active\n                  ? 'bg-[color:var(--accent-muted)] text-[color:var(--color-race-red)]'\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={\n                    active\n                      ? 'text-[color:var(--color-race-red)]'\n                      : 'text-[color:var(--muted)] group-hover:text-[color:var(--foreground)]'\n                  }\n                />\n              ) : null}\n              {item.label}\n            </Link>\n          )\n        })}\n      </nav>\n\n      {/* Footer — env chip + commit/version */}\n      {footer ? (\n        <div className=\"mt-4 border-t border-[color:var(--line)] pt-3\">\n          <div className=\"flex items-center justify-between\">\n            <span\n              className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] ${envChipClasses(\n                footer.envLabel,\n              )}`}\n            >\n              {footer.envLabel}\n            </span>\n            <span className=\"font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]\">\n              v{footer.version} · {footer.commit.slice(0, 7)}\n            </span>\n          </div>\n          {footer.links && footer.links.length > 0 ? (\n            <div className=\"mt-2 flex gap-3 text-[11px] font-medium text-[color:var(--muted)]\">\n              {footer.links.map((l) => (\n                <a key={l.label} href={l.href} className=\"hover:text-[color:var(--foreground)]\">\n                  {l.label}\n                </a>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n    </aside>\n  )\n}\n\n// Small inline chevron so this module needs no icon dependency. Mirrors the\n// lucide `ChevronsUpDown` glyph used by the org pill.\nfunction ChevronDownUp() {\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      className=\"shrink-0 text-[color:var(--muted)]\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m7 15 5 5 5-5\" />\n      <path d=\"m7 9 5-5 5 5\" />\n    </svg>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\nexport type NavUser = {\n  name: 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  return (\n    <header className=\"sticky top-0 z-20 flex items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-6 py-3 backdrop-blur-xl\">\n      <div className=\"min-w-0\">\n        <h1\n          className=\"truncate text-xl font-semibold tracking-[-0.02em] 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 */}\n        <div className=\"flex items-center gap-2.5 rounded-full border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 pl-1 pr-2.5\">\n          <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white\">\n            {initials}\n          </span>\n          <span className=\"hidden flex-col leading-tight md:flex\">\n            <span className=\"text-xs font-semibold text-[color:var(--foreground)]\">\n              {user?.name ?? 'Signed in'}\n            </span>\n            <span className=\"text-[10px] font-medium uppercase tracking-[0.08em] text-[color:var(--muted)]\">\n              {[user?.tier, user?.role].filter(Boolean).join(' · ') || 'member'}\n            </span>\n          </span>\n          {onSignOut ? (\n            <button\n              type=\"button\"\n              onClick={onSignOut}\n              aria-label=\"Sign out\"\n              className=\"ml-1 flex h-7 w-7 items-center justify-center rounded-full text-[color:var(--muted)] hover:text-[color:var(--color-race-red)]\"\n            >\n              <SignOutIcon />\n            </button>\n          ) : null}\n        </div>\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-[264px]\">\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,91 @@
+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;
+    /** Short label shown inside the brand badge (e.g. "P"). */
+    badgeLabel: string;
+    title: string;
+    subtitle?: string;
+};
+type NavOrg = {
+    name: string | null;
+    onClick?: () => void;
+};
+type NavMode = {
+    label: string;
+    icon?: NavIcon;
+};
+type NavFooterLink = {
+    label: string;
+    href: string;
+};
+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;
+    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,91 @@
+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;
+    /** Short label shown inside the brand badge (e.g. "P"). */
+    badgeLabel: string;
+    title: string;
+    subtitle?: string;
+};
+type NavOrg = {
+    name: string | null;
+    onClick?: () => void;
+};
+type NavMode = {
+    label: string;
+    icon?: NavIcon;
+};
+type NavFooterLink = {
+    label: string;
+    href: string;
+};
+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;
+    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.js

@@ -0,0 +1,204 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/native/index.tsx
+var DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ 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)]";
+}
+function NavSidebar({
+  pathname,
+  brand,
+  nav,
+  org,
+  mode,
+  footer,
+  linkComponent
+}) {
+  const Link = linkComponent ?? DefaultLink;
+  const activeFn = nav.isActive ?? isNavItemActive;
+  const ModeIcon = mode?.icon;
+  return /* @__PURE__ */ jsxs("aside", { className: "fixed inset-y-0 left-0 z-30 hidden w-[264px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-4 py-5 lg:flex", children: [
+    /* @__PURE__ */ jsxs(Link, { href: brand.homeHref ?? "/", className: "flex items-center gap-3 px-1 py-1", children: [
+      /* @__PURE__ */ 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__ */ jsxs("span", { className: "flex flex-col leading-tight", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: brand.title }),
+        brand.subtitle ? /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
+      ] })
+    ] }),
+    org ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: org.onClick,
+        className: "mt-5 flex w-full items-center justify-between rounded-xl border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2.5 text-left transition hover:border-[color:var(--color-race-red)]/40",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2.5 overflow-hidden", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[color:var(--accent-muted)] text-xs font-bold text-[color:var(--color-race-red)]", children: (org.name ?? "Org").slice(0, 2).toUpperCase() }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-[color:var(--foreground)]", children: org.name ?? "Account" })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDownUp, {})
+        ]
+      }
+    ) : null,
+    mode ? /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex items-center gap-2.5 rounded-xl bg-[color:var(--color-race-red)] px-3 py-2.5 text-white shadow-sm", children: [
+      ModeIcon ? /* @__PURE__ */ jsx(ModeIcon, { size: 16, className: "shrink-0" }) : null,
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tracking-[-0.01em]", children: mode.label })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("nav", { className: "mt-5 flex flex-1 flex-col gap-1 overflow-y-auto", children: [
+      nav.groupLabel ? /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 text-[11px] font-semibold uppercase tracking-[0.16em] 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,
+          {
+            href: item.href,
+            "aria-current": active ? "page" : void 0,
+            className: [
+              "group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition",
+              active ? "bg-[color:var(--accent-muted)] text-[color:var(--color-race-red)]" : "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-[color:var(--color-race-red)]" : "text-[color:var(--muted)] group-hover:text-[color:var(--foreground)]"
+                }
+              ) : null,
+              item.label
+            ]
+          },
+          item.href
+        );
+      })
+    ] }),
+    footer ? /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-[color:var(--line)] pt-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] ${envChipClasses(
+              footer.envLabel
+            )}`,
+            children: footer.envLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
+          "v",
+          footer.version,
+          " \xB7 ",
+          footer.commit.slice(0, 7)
+        ] })
+      ] }),
+      footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex gap-3 text-[11px] font-medium text-[color:var(--muted)]", children: footer.links.map((l) => /* @__PURE__ */ jsx("a", { href: l.href, className: "hover:text-[color:var(--foreground)]", children: l.label }, l.label)) }) : null
+    ] }) : null
+  ] });
+}
+function ChevronDownUp() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 15,
+      height: 15,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0 text-[color:var(--muted)]",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+      ]
+    }
+  );
+}
+function NavTopBar({
+  title,
+  subtitle,
+  user,
+  onSignOut,
+  actions,
+  themeToggle
+}) {
+  const initials = (user?.name ?? "Politogy").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-20 flex items-center justify-between gap-4 border-b border-[color:var(--line)] bg-[color:var(--panel)] px-6 py-3 backdrop-blur-xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: "truncate text-xl font-semibold tracking-[-0.02em] text-[color:var(--foreground)]",
+          "data-display": "true",
+          children: title
+        }
+      ),
+      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: [
+      actions,
+      themeToggle,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-full border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 pl-1 pr-2.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-[color:var(--color-race-red)] text-xs font-bold text-white", children: initials }),
+        /* @__PURE__ */ jsxs("span", { className: "hidden flex-col leading-tight md:flex", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: user?.name ?? "Signed in" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.08em] text-[color:var(--muted)]", children: [user?.tier, user?.role].filter(Boolean).join(" \xB7 ") || "member" })
+        ] }),
+        onSignOut ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onSignOut,
+            "aria-label": "Sign out",
+            className: "ml-1 flex h-7 w-7 items-center justify-center rounded-full text-[color:var(--muted)] hover:text-[color:var(--color-race-red)]",
+            children: /* @__PURE__ */ jsx(SignOutIcon, {})
+          }
+        ) : null
+      ] })
+    ] })
+  ] });
+}
+function SignOutIcon() {
+  return /* @__PURE__ */ 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__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
+      ]
+    }
+  );
+}
+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 }),
+    /* @__PURE__ */ jsxs("div", { className: "lg:pl-[264px]", children: [
+      /* @__PURE__ */ jsx(NavTopBar, { ...topBar }),
+      /* @__PURE__ */ jsx("main", { className: "px-6 py-7", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl", children }) })
+    ] })
+  ] });
+}
+
+export { NavAppShell, NavSidebar, NavTopBar, envChipClasses, isNavItemActive };
+//# sourceMappingURL=native.js.map
+//# sourceMappingURL=native.js.map