@the-portland-company/shell 0.14.2 → 0.15.0

package/dist/chrome.css

@@ -251,6 +251,10 @@
   --muted: var(--topbar-breadcrumb-color);
   --panel: var(--topbar-bg);
   --panel-elevated: var(--surface-1);
+  /* The left bar's own surface. Separate from --panel-elevated (which also
+     backs hover states and dropdowns) so dark can put the bars and the raised
+     surfaces on different steps of the neutral ramp. */
+  --nav-surface: var(--surface-1);
   --line: var(--sidebar-border);
   --shadow-soft: var(--shadow-lg);
 }
@@ -274,11 +278,21 @@
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
-  --background: hsl(222.2 84% 4.9%);
-  --foreground: hsl(210 40% 98%);
-  --muted: hsl(215 20.2% 65.1%);
-  --panel: hsl(222.2 84% 4.9%);
-  --panel-elevated: hsl(217.2 32.6% 17.5%);
-  --line: hsl(217.2 32.6% 17.5%);
+  /* Native chrome semantic layer — dark values.
+     Global Rules: dark chrome is NEUTRAL BLACK, never blue/navy/slate. These
+     were ShadCN slate (hsl(222.2 84% 4.9%) = #020817, hsl(217.2 32.6% 17.5%)
+     = #1E293B) — the exact palette the rule names as forbidden — which made
+     the top bar and left bar read as navy. The ramp below is the hue-free one
+     from Reference/Global-Rules: page #0A0A0A → bars #161616 → raised #1F1F1F
+     → hover #2B2B2B → borders #333333, with #A3A3A3 muted / #E8E8E8 body text.
+     The ShadCN HSL channel tokens above stay as-is — they are the separate
+     darkMode group and are Brand-API-controlled. */
+  --background: #0A0A0A;
+  --foreground: #E8E8E8;
+  --muted: #A3A3A3;
+  --panel: #161616;
+  --nav-surface: #161616;
+  --panel-elevated: #1F1F1F;
+  --line: #333333;
   --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.5);
 }

package/dist/native.cjs

@@ -52,6 +52,444 @@ function resolveBrandGlyph(name) {
   if (!name) return null;
   return GLYPHS[name.trim().toLowerCase()] ?? null;
 }
+function topBarIconButtonClass(tone = "default") {
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
+  return [
+    "relative flex items-center justify-center rounded-full border border-[color:var(--line)] transition",
+    "h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)]",
+    toneClass
+  ].join(" ");
+}
+function TopBarCountBadge({ count }) {
+  if (!(count > 0)) return null;
+  return /* @__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: count > 99 ? "99+" : count });
+}
+var NavChromeContext = react.createContext(null);
+function NavChromeProvider({
+  fetchJson,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(NavChromeContext.Provider, { value: { fetchJson }, children });
+}
+function useNavChrome(component) {
+  const ctx = react.useContext(NavChromeContext);
+  if (!ctx) {
+    throw new Error(
+      `${component} must be rendered inside <NavChromeProvider> (inject the chrome API fetcher there).`
+    );
+  }
+  return ctx;
+}
+function useChromeOrgs() {
+  const { fetchJson } = useNavChrome("useChromeOrgs");
+  const [orgs, setOrgs] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    fetchJson("orgs").then((data) => {
+      if (cancelled) return;
+      const list = data?.orgs ?? [];
+      setOrgs(list);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson]);
+  return { orgs, loading, error };
+}
+function ValueSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: [
+        "inline-block animate-pulse rounded bg-[color:var(--panel-elevated)]",
+        className ?? "h-4 w-16"
+      ].join(" ")
+    }
+  );
+}
+function SlotGlyph({
+  slot,
+  fallback: Fallback,
+  size = 20
+}) {
+  const glyphName = useTopBarIconSlotGlyph(slot ?? "apps");
+  const BrandGlyph = slot ? resolveBrandGlyph(glyphName) : null;
+  const Glyph = BrandGlyph ?? Fallback;
+  return /* @__PURE__ */ jsxRuntime.jsx(Glyph, { size, className: "text-current" });
+}
+function TopBarPopover({
+  label,
+  slot,
+  fallbackIcon,
+  badge,
+  tone,
+  onOpen,
+  children,
+  panelClassName
+}) {
+  const [open, setOpen] = react.useState(false);
+  const rootRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        title: label,
+        "aria-expanded": open,
+        className: topBarIconButtonClass(tone),
+        onClick: () => {
+          setOpen((v) => {
+            const next = !v;
+            if (next) onOpen?.();
+            return next;
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
+          typeof badge === "number" ? /* @__PURE__ */ jsxRuntime.jsx(TopBarCountBadge, { count: badge }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: [
+          "absolute right-0 z-40 mt-2 overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] shadow-[var(--shadow-soft)]",
+          panelClassName ?? "w-80"
+        ].join(" "),
+        children
+      }
+    ) : null
+  ] });
+}
+function BatteryGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "10", x2: "5", y2: "14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "10", x2: "9", y2: "14" })
+  ] });
+}
+function BellGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+  ] });
+}
+function LifeBuoyGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "4.93", x2: "9.17", y2: "9.17" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "14.83", x2: "19.07", y2: "19.07" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "9.17", x2: "19.07", y2: "4.93" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "19.07", x2: "9.17", y2: "14.83" })
+  ] });
+}
+function LayoutGlyph({ size = 20, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "21", x2: "9", y2: "9" })
+  ] });
+}
+function FuelRow({
+  label,
+  channel,
+  loading
+}) {
+  const remaining = channel?.remainingUnits ?? 0;
+  const total = channel ? Math.max(channel.rawBalanceUnits, channel.remainingUnits) : 0;
+  const ratio = total > 0 ? Math.min(100, Math.max(0, remaining / total * 100)) : 0;
+  const low = channel?.lowFuel ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: label }),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-3.5 w-14" }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: [
+            "text-xs font-semibold tabular-nums",
+            low ? "text-[color:var(--color-race-red)]" : "text-[color:var(--muted)]"
+          ].join(" "),
+          children: [
+            remaining.toLocaleString(),
+            " left"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full animate-pulse bg-[color:var(--line)]" }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: [
+          "h-full rounded-full transition-[width]",
+          low ? "bg-[color:var(--color-race-red)]" : "bg-[color:var(--color-ok,#00A651)]"
+        ].join(" "),
+        style: { width: `${ratio}%` }
+      }
+    ) })
+  ] });
+}
+function FuelAction({ orgId }) {
+  const { fetchJson } = useNavChrome("FuelAction");
+  const [fuel, setFuel] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    setFuel(null);
+    fetchJson("communications/fuel-status", {
+      headers: orgId ? { "x-contacts-org": orgId } : void 0
+    }).then((data) => {
+      if (cancelled) return;
+      setFuel(data?.fuel ?? null);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson, orgId]);
+  const low = !!fuel && (fuel.signal.lowFuel || fuel.broadcast.lowFuel);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TopBarPopover,
+    {
+      label: "Communications Fuel",
+      slot: "comms-fuel",
+      fallbackIcon: BatteryGlyph,
+      tone: low ? "warning" : "default",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Communications Fuel" }),
+        error || !loading && !fuel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Fuel balance is unavailable right now." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FuelRow, { label: "SMS Signal", channel: fuel?.signal ?? null, loading }),
+          /* @__PURE__ */ jsxRuntime.jsx(FuelRow, { label: "Email Broadcast", channel: fuel?.broadcast ?? null, loading })
+        ] })
+      ] })
+    }
+  );
+}
+function NotificationsAction({ orgId }) {
+  const { fetchJson } = useNavChrome("NotificationsAction");
+  const [payload, setPayload] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    setPayload(null);
+    fetchJson("notifications", {
+      headers: orgId ? { "x-contacts-org": orgId } : void 0
+    }).then((data) => {
+      if (!cancelled) setPayload(data);
+    }).catch(() => {
+      if (!cancelled) setError(true);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchJson, orgId]);
+  const count = (payload?.alerts.length ?? 0) + (payload?.replies.length ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TopBarPopover,
+    {
+      label: "Notifications",
+      slot: "notifications",
+      fallbackIcon: BellGlyph,
+      badge: loading ? 0 : count,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Notifications" }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-3/4" })
+        ] }) : error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Notifications are unavailable right now." }) : count === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-1 text-sm text-[color:var(--muted)]", children: "You\u2019re all caught up." }) : /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex max-h-80 flex-col gap-1 overflow-y-auto", children: [
+          payload?.alerts.map((a) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: a.href ?? "#",
+              className: "block rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: a.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[color:var(--muted)]", children: a.description })
+              ]
+            }
+          ) }, a.id)),
+          payload?.replies.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "rounded-lg px-2 py-2 hover:bg-[color:var(--panel)]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-[color:var(--foreground)]", children: r.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-[color:var(--muted)]", children: r.preview })
+          ] }, r.id))
+        ] })
+      ] })
+    }
+  );
+}
+function SupportAction() {
+  const { fetchJson } = useNavChrome("SupportAction");
+  const [open, setOpen] = react.useState(false);
+  const [message, setMessage] = react.useState("");
+  const [state, setState] = react.useState("idle");
+  const close = react.useCallback(() => {
+    setOpen(false);
+    setState("idle");
+    setMessage("");
+  }, []);
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, close]);
+  const submit = async () => {
+    if (!message.trim() || state === "sending") return;
+    setState("sending");
+    try {
+      await fetchJson("support", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: message.trim() })
+      });
+      setState("sent");
+    } catch {
+      setState("error");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Support",
+        title: "Support",
+        className: topBarIconButtonClass(),
+        onClick: () => setOpen(true),
+        children: /* @__PURE__ */ jsxRuntime.jsx(SlotGlyph, { slot: "support", fallback: LifeBuoyGlyph })
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Support request",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) close();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
+          state === "sent" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: close,
+                className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white hover:opacity-90",
+                children: "Done"
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                value: message,
+                onChange: (e) => setMessage(e.target.value),
+                rows: 5,
+                placeholder: "How can we help?",
+                className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-race-red)]"
+              }
+            ),
+            state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: close,
+                  className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: submit,
+                  disabled: !message.trim() || state === "sending",
+                  className: "rounded-full bg-[color:var(--color-race-red)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+                  children: state === "sending" ? "Sending\u2026" : "Send request"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ) : null
+  ] });
+}
+var NAV_DISPLAY_OPTIONS = [
+  { value: "menu", label: "Sub Menu" },
+  { value: "tabs", label: "Tabs Only" },
+  { value: "both", label: "Both" }
+];
+function NavDisplayAction({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarPopover, { label: "Navigation display", fallbackIcon: LayoutGlyph, panelClassName: "w-44", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", role: "radiogroup", "aria-label": "Navigation display", children: NAV_DISPLAY_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": value === opt.value,
+      onClick: () => onChange(opt.value),
+      className: [
+        "flex w-full items-center justify-between px-4 py-2 text-left text-sm font-medium",
+        value === opt.value ? "text-[color:var(--color-race-red)]" : "text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+      ].join(" "),
+      children: [
+        opt.label,
+        value === opt.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\u2713" }) : null
+      ]
+    },
+    opt.value
+  )) }) });
+}
 
 // src/native/standardNav.ts
 var CONTACTS_DEFAULT_CHILDREN = [
@@ -182,7 +620,7 @@ function NavSidebar({
     setOpenGroup(activeGroupKey);
   }, [activeGroupKey]);
   const toggleGroup = (key) => setOpenGroup((prev) => prev === key ? null : key);
-  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: [
+  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(--nav-surface)] lg:flex", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
@@ -211,7 +649,52 @@ function NavSidebar({
           /* @__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(
+        org.organizations && org.organizations.length > 0 && org.onSwitch ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "summary",
+            {
+              style: { backgroundColor: orgBg },
+              className: "flex w-full cursor-pointer list-none items-center justify-between gap-2 rounded-md px-2.5 py-2 text-left text-white shadow-sm transition hover:opacity-95 [&::-webkit-details-marker]:hidden",
+              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, {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-72 overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: org.organizations.map((o) => {
+            const selected = o.id === org.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.currentTarget.closest("details")?.removeAttribute("open");
+                  if (!selected) org.onSwitch?.(o.id);
+                },
+                "aria-current": selected ? "true" : void 0,
+                className: [
+                  "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
+                  selected ? "font-semibold text-[color:var(--color-race-red)]" : "font-medium text-[color:var(--foreground)] hover:bg-[color:var(--panel)]"
+                ].join(" "),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      style: { backgroundColor: o.brandColor || ORG_PILL_DEFAULT },
+                      className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-[10px] font-bold text-white",
+                      children: o.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: o.logoUrl, alt: "", className: "h-full w-full object-cover" }) : (o.name ?? "Org").slice(0, 2).toUpperCase()
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: o.name ?? o.id.slice(0, 8) })
+                ]
+              },
+              o.id
+            );
+          }) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -542,13 +1025,7 @@ 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(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
-  const className = [
-    "relative flex items-center justify-center rounded-full border border-[color:var(--line)] transition",
-    "h-[var(--topbar-icon-button-size,32px)] w-[var(--topbar-icon-button-size,32px)]",
-    toneClass
-  ].join(" ");
+  const className = topBarIconButtonClass(action.tone ?? "default");
   const glyphName = useTopBarIconSlotGlyph(action.slot ?? "apps");
   const BrandGlyph = action.slot ? resolveBrandGlyph(glyphName) : null;
   const Glyph = BrandGlyph ?? Icon;
@@ -690,12 +1167,20 @@ function NavAppShell({ sidebar, topBar, children }) {
   ] });
 }
 
+exports.FuelAction = FuelAction;
 exports.NavAppShell = NavAppShell;
+exports.NavChromeProvider = NavChromeProvider;
+exports.NavDisplayAction = NavDisplayAction;
 exports.NavSidebar = NavSidebar;
 exports.NavTabStrip = NavTabStrip;
 exports.NavTopBar = NavTopBar;
+exports.NotificationsAction = NotificationsAction;
+exports.SupportAction = SupportAction;
+exports.TopBarCountBadge = TopBarCountBadge;
 exports.envChipClasses = envChipClasses;
 exports.isNavItemActive = isNavItemActive;
 exports.standardPolitogyNav = standardPolitogyNav;
+exports.topBarIconButtonClass = topBarIconButtonClass;
+exports.useChromeOrgs = useChromeOrgs;
 //# sourceMappingURL=native.cjs.map
 //# sourceMappingURL=native.cjs.map