@the-portland-company/shell 0.16.0 → 0.16.2

package/dist/native.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType, CSSProperties } from 'react';
 import { T as TopBarIconSlot } from './topbarIconSlot-FunwEKO9.cjs';
+import { ThemePreference as ThemePreference$1 } from './theme-preference.cjs';
 
 declare function topBarIconButtonClass(tone?: 'default' | 'warning' | 'danger'): string;
 /** The shared count badge — one definition, used by every slot. */
@@ -27,7 +28,7 @@ declare function TopBarWidgetSlot({ title, description, children, }: {
     description?: string;
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-type ThemePreference = 'light' | 'system' | 'dark';
+type ThemePreference = ThemePreference$1;
 declare function NavThemeControl({ value, onChange, }: {
     value: ThemePreference;
     onChange: (next: ThemePreference) => void;
@@ -101,6 +102,10 @@ declare function NavDisplayAction({ value, onChange, }: {
     value: NavDisplayMode;
     onChange: (next: NavDisplayMode) => void;
 }): react_jsx_runtime.JSX.Element;
+declare function useThemePreference(): {
+    value: ThemePreference;
+    setValue: (next: ThemePreference) => void;
+};
 
 /**
  * Icon slots used by the standard menu. The shell stays icon-library-agnostic:
@@ -385,4 +390,4 @@ type NavAppShellProps = {
  */
 declare function NavAppShell({ sidebar, topBar, children }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, type NavBrand, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeOrgs };
+export { type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, type NavBrand, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeOrgs, useThemePreference };

package/dist/native.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType, CSSProperties } from 'react';
 import { T as TopBarIconSlot } from './topbarIconSlot-FunwEKO9.js';
+import { ThemePreference as ThemePreference$1 } from './theme-preference.js';
 
 declare function topBarIconButtonClass(tone?: 'default' | 'warning' | 'danger'): string;
 /** The shared count badge — one definition, used by every slot. */
@@ -27,7 +28,7 @@ declare function TopBarWidgetSlot({ title, description, children, }: {
     description?: string;
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-type ThemePreference = 'light' | 'system' | 'dark';
+type ThemePreference = ThemePreference$1;
 declare function NavThemeControl({ value, onChange, }: {
     value: ThemePreference;
     onChange: (next: ThemePreference) => void;
@@ -101,6 +102,10 @@ declare function NavDisplayAction({ value, onChange, }: {
     value: NavDisplayMode;
     onChange: (next: NavDisplayMode) => void;
 }): react_jsx_runtime.JSX.Element;
+declare function useThemePreference(): {
+    value: ThemePreference;
+    setValue: (next: ThemePreference) => void;
+};
 
 /**
  * Icon slots used by the standard menu. The shell stays icon-library-agnostic:
@@ -385,4 +390,4 @@ type NavAppShellProps = {
  */
 declare function NavAppShell({ sidebar, topBar, children }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, type NavBrand, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeOrgs };
+export { type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, type NavBrand, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeOrgs, useThemePreference };

package/dist/native.js

@@ -1,6 +1,8 @@
 "use client";
 import { useTopBarIconSlotGlyph, resolveBrandGlyph } from './chunk-NV6WHTEZ.js';
-import { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, writeThemeCookie } from './chunk-ZZWM7BZZ.js';
+import { createContext, useState, useEffect, useCallback, useContext, useRef, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function topBarIconButtonClass(tone = "default") {
@@ -431,66 +433,69 @@ function SupportAction() {
         ]
       }
     ),
-    open ? /* @__PURE__ */ 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__ */ 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__ */ jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
-          state === "sent" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
-            /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
-            /* @__PURE__ */ 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__ */ jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
-            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
-              /* @__PURE__ */ jsx(
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ 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__ */ 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__ */ jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
+            state === "sent" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
+              /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ 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"
+                  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__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
               /* @__PURE__ */ jsx(
-                "button",
+                "textarea",
                 {
-                  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"
+                  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__ */ jsx("p", { className: "mt-2 text-sm text-[color:var(--color-race-red)]", children: "Sending failed \u2014 try again." }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+                /* @__PURE__ */ 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__ */ 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"
+                  }
+                )
+              ] })
             ] })
           ] })
-        ] })
-      }
+        }
+      ),
+      document.body
     ) : null
   ] });
 }
@@ -531,6 +536,96 @@ function NavDisplayAction({
     }
   );
 }
+function useThemePreference() {
+  const ctx = useContext(NavChromeContext);
+  const fetchJson = ctx?.fetchJson ?? null;
+  const [value, setValueState] = useState("system");
+  const reconciled = useRef(false);
+  useEffect(() => {
+    const cookie = readThemeCookie();
+    let ls = null;
+    try {
+      ls = localStorage.getItem(THEME_STORAGE_KEY);
+    } catch {
+    }
+    const pref = cookie ?? (isThemePreference(ls) ? ls : null) ?? "system";
+    setValueState(pref);
+    applyThemePreference(pref);
+  }, []);
+  useEffect(() => {
+    if (!fetchJson || reconciled.current) return;
+    reconciled.current = true;
+    fetchJson("me").then((data) => {
+      const pref = data?.themePreference;
+      if (isThemePreference(pref)) {
+        setValueState(pref);
+        applyThemePreference(pref);
+        writeThemeCookie(pref);
+        try {
+          localStorage.setItem(THEME_STORAGE_KEY, pref);
+        } catch {
+        }
+      }
+    }).catch(() => {
+    });
+  }, [fetchJson]);
+  useEffect(() => {
+    const onStorage = (e) => {
+      if (e.key === THEME_STORAGE_KEY && isThemePreference(e.newValue)) {
+        setValueState(e.newValue);
+        applyThemePreference(e.newValue);
+      }
+    };
+    const onWake = () => {
+      const cookie = readThemeCookie();
+      if (cookie) {
+        setValueState((prev) => {
+          if (cookie !== prev) applyThemePreference(cookie);
+          return cookie;
+        });
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    window.addEventListener("focus", onWake);
+    document.addEventListener("visibilitychange", onWake);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener("focus", onWake);
+      document.removeEventListener("visibilitychange", onWake);
+    };
+  }, []);
+  useEffect(() => {
+    if (value !== "system") return;
+    let mq;
+    try {
+      mq = window.matchMedia("(prefers-color-scheme: dark)");
+    } catch {
+      return;
+    }
+    const onChange = () => applyThemePreference("system");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [value]);
+  const setValue = useCallback(
+    (next) => {
+      setValueState(next);
+      applyThemePreference(next);
+      writeThemeCookie(next);
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, next);
+      } catch {
+      }
+      fetchJson?.("me/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ themePreference: next })
+      }).catch(() => {
+      });
+    },
+    [fetchJson]
+  );
+  return { value, setValue };
+}
 
 // src/native/standardNav.ts
 var CONTACTS_DEFAULT_CHILDREN = [
@@ -807,7 +902,7 @@ function NavSidebar({
       ] })
     ] }),
     footer ? /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-[color:var(--line)] px-4 py-3", children: [
-      footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-xs", children: footer.links.map((l, idx) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-1.5 text-xs", children: footer.links.map((l, idx) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
         idx > 0 ? /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
         /* @__PURE__ */ jsx(
           "a",
@@ -839,14 +934,12 @@ function NavSidebar({
           ] })
         ] }),
         footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
           footer.commitDate ? /* @__PURE__ */ jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
             month: "short",
             day: "numeric"
           }) }) : null,
-          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-          footer.commitAuthor ? /* @__PURE__ */ jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null,
-          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" })
+          footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
+          footer.commitAuthor ? /* @__PURE__ */ jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null
         ] }) : null
       ] })
     ] }) : null
@@ -1359,6 +1452,6 @@ function NavAppShell({ sidebar, topBar, children }) {
   ] });
 }
 
-export { FuelAction, NavAppShell, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SupportAction, TopBarCountBadge, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeOrgs };
+export { FuelAction, NavAppShell, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SupportAction, TopBarCountBadge, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeOrgs, useThemePreference };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map