@the-portland-company/shell 0.16.0 → 0.16.1

package/dist/chunk-ZZWM7BZZ.js

@@ -0,0 +1,68 @@
+// src/theme-preference.ts
+var THEME_STORAGE_KEY = "politogy_theme";
+var THEME_COOKIE = "politogy_theme";
+var VALID = ["light", "dark", "system"];
+function isThemePreference(v) {
+  return typeof v === "string" && VALID.includes(v);
+}
+function readThemeCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${THEME_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isThemePreference(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeThemeCookie(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const onParentDomain = /(^|\.)politogyvrm\.com$/i.test(host);
+  const domainAttr = onParentDomain ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(
+    pref
+  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+}
+function resolveTheme(pref) {
+  if (pref === "system") {
+    try {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } catch {
+      return "light";
+    }
+  }
+  return pref;
+}
+function applyThemePreference(pref) {
+  if (typeof document === "undefined") return;
+  const resolved = resolveTheme(pref);
+  const d = document.documentElement;
+  d.classList.toggle("dark", resolved === "dark");
+  try {
+    d.style.colorScheme = resolved;
+  } catch {
+  }
+}
+var THEME_PREPAINT_SCRIPT = `(function(){try{
+var KEY=${JSON.stringify(THEME_STORAGE_KEY)};
+var VALID=["light","dark","system"];
+function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${THEME_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
+var cookie=fromCookie();
+var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
+var pref=cookie||ls||"system";
+if(VALID.indexOf(pref)===-1)pref="system";
+if(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}
+var resolved=pref;
+if(pref==="system"){try{resolved=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}catch(e){resolved="light";}}
+var d=document.documentElement;
+if(resolved==="dark"){d.classList.add("dark");}else{d.classList.remove("dark");}
+try{d.style.colorScheme=resolved;}catch(e){}
+}catch(e){}})();`;
+
+export { THEME_COOKIE, THEME_PREPAINT_SCRIPT, THEME_STORAGE_KEY, applyThemePreference, isThemePreference, readThemeCookie, resolveTheme, writeThemeCookie };
+//# sourceMappingURL=chunk-ZZWM7BZZ.js.map
+//# sourceMappingURL=chunk-ZZWM7BZZ.js.map

package/dist/chunk-ZZWM7BZZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme-preference.ts"],"names":[],"mappings":";AAqBO,IAAM,iBAAA,GAAoB;AAC1B,IAAM,YAAA,GAAe;AAE5B,IAAM,KAAA,GAAoC,CAAC,OAAA,EAAS,MAAA,EAAQ,QAAQ,CAAA;AAE7D,SAAS,kBAAkB,CAAA,EAAkC;AAClE,EAAA,OAAO,OAAO,CAAA,KAAM,QAAA,IAAa,KAAA,CAA4B,SAAS,CAAC,CAAA;AACzE;AAGO,SAAS,eAAA,GAA0C;AACxD,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,IAAA;AAC5C,EAAA,IAAI;AACF,IAAA,MAAM,CAAA,GAAI,SAAS,MAAA,CAAO,KAAA;AAAA,MACxB,IAAI,MAAA,CAAO,CAAA,WAAA,EAAc,YAAY,CAAA,QAAA,CAAU;AAAA,KACjD;AACA,IAAA,MAAM,IAAI,CAAA,GAAI,kBAAA,CAAmB,CAAA,CAAE,CAAC,CAAC,CAAA,GAAI,IAAA;AACzC,IAAA,OAAO,iBAAA,CAAkB,CAAC,CAAA,GAAI,CAAA,GAAI,IAAA;AAAA,EACpC,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF;AAOO,SAAS,iBAAiB,IAAA,EAA6B;AAC5D,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,IAAe,OAAO,WAAW,WAAA,EAAa;AACtE,EAAA,MAAM,IAAA,GAAO,OAAO,QAAA,CAAS,QAAA;AAC7B,EAAA,MAAM,cAAA,GAAiB,0BAAA,CAA2B,IAAA,CAAK,IAAI,CAAA;AAC3D,EAAA,MAAM,UAAA,GAAa,iBAAiB,2BAAA,GAA8B,EAAA;AAClE,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,QAAA,CAAS,QAAA,KAAa,WAAW,UAAA,GAAa,EAAA;AACpE,EAAA,QAAA,CAAS,MAAA,GAAS,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,kBAAA;AAAA,IACnC;AAAA,GACD,CAAA,wCAAA,EAA2C,UAAU,CAAA,EAAG,MAAM,CAAA,CAAA;AACjE;AAGO,SAAS,aAAa,IAAA,EAAyC;AACpE,EAAA,IAAI,SAAS,QAAA,EAAU;AACrB,IAAA,IAAI;AACF,MAAA,OAAO,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,UACrD,MAAA,GACA,OAAA;AAAA,IACN,CAAA,CAAA,MAAQ;AACN,MAAA,OAAO,OAAA;AAAA,IACT;AAAA,EACF;AACA,EAAA,OAAO,IAAA;AACT;AAGO,SAAS,qBAAqB,IAAA,EAA6B;AAChE,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,MAAM,QAAA,GAAW,aAAa,IAAI,CAAA;AAClC,EAAA,MAAM,IAAI,QAAA,CAAS,eAAA;AACnB,EAAA,CAAA,CAAE,SAAA,CAAU,MAAA,CAAO,MAAA,EAAQ,QAAA,KAAa,MAAM,CAAA;AAC9C,EAAA,IAAI;AACF,IAAA,CAAA,CAAE,MAAM,WAAA,GAAc,QAAA;AAAA,EACxB,CAAA,CAAA,MAAQ;AAAA,EAER;AACF;AAQO,IAAM,qBAAA,GAAwB,CAAA;AAAA,QAAA,EAC3B,IAAA,CAAK,SAAA,CAAU,iBAAiB,CAAC,CAAA;AAAA;AAAA,kEAAA,EAEyB,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAA","file":"chunk-ZZWM7BZZ.js","sourcesContent":["// Universal theme preference — the ONE cross-app contract.\n//\n// One theme choice (Light / Dark / System) follows the authenticated user\n// across every Politogy app + subdomain. Three layers cooperate:\n//   1. VRM Core `profiles.theme_preference` — source of truth, persisted via\n//      the chrome API (`PATCH me/preferences { themePreference }`) and read\n//      back from `GET me` (`themePreference`).\n//   2. `.politogyvrm.com` cookie `politogy_theme` — zero-flash pre-paint\n//      vehicle that crosses subdomains (auth session cookies are host-only).\n//   3. localStorage `politogy_theme` — offline fallback store.\n//\n// Ported verbatim from contacts/apps/web/src/lib/theme.ts (the origin of the\n// contract) so every app runs the identical behavior from npm. This module is\n// server-safe (no 'use client'): layouts import THEME_PREPAINT_SCRIPT for the\n// pre-paint inline script. The client-side hook lives in ./native\n// (useThemePreference).\n\nexport type ThemePreference = 'light' | 'dark' | 'system'\n\n// Single converged key for BOTH the localStorage store and the\n// cross-subdomain cookie, so a choice in one app is the same key in the next.\nexport const THEME_STORAGE_KEY = 'politogy_theme'\nexport const THEME_COOKIE = 'politogy_theme'\n\nconst VALID: readonly ThemePreference[] = ['light', 'dark', 'system']\n\nexport function isThemePreference(v: unknown): v is ThemePreference {\n  return typeof v === 'string' && (VALID as readonly string[]).includes(v)\n}\n\n/** Read the shared cookie (browser only; null on the server or when unset). */\nexport function readThemeCookie(): ThemePreference | null {\n  if (typeof document === 'undefined') return null\n  try {\n    const m = document.cookie.match(\n      new RegExp(`(?:^|;\\\\s*)${THEME_COOKIE}=([^;]+)`),\n    )\n    const v = m ? decodeURIComponent(m[1]) : null\n    return isThemePreference(v) ? v : null\n  } catch {\n    return null\n  }\n}\n\n// Set the cross-subdomain cookie. On a *.politogyvrm.com host we scope it to\n// the parent domain so every app subdomain reads it; on any other host\n// (localhost, *.pages.dev preview) we fall back to a host-only cookie so\n// local/preview theming still works without a mismatched Domain attribute\n// (which browsers silently drop). 1-year, SameSite=Lax, Secure on https.\nexport function writeThemeCookie(pref: ThemePreference): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') return\n  const host = window.location.hostname\n  const onParentDomain = /(^|\\.)politogyvrm\\.com$/i.test(host)\n  const domainAttr = onParentDomain ? '; Domain=.politogyvrm.com' : ''\n  const secure = window.location.protocol === 'https:' ? '; Secure' : ''\n  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(\n    pref,\n  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`\n}\n\n/** Resolve a preference to the concrete light/dark it renders as right now. */\nexport function resolveTheme(pref: ThemePreference): 'light' | 'dark' {\n  if (pref === 'system') {\n    try {\n      return window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n    } catch {\n      return 'light'\n    }\n  }\n  return pref\n}\n\n/** Apply a preference to the document (`.dark` class + color-scheme). */\nexport function applyThemePreference(pref: ThemePreference): void {\n  if (typeof document === 'undefined') return\n  const resolved = resolveTheme(pref)\n  const d = document.documentElement\n  d.classList.toggle('dark', resolved === 'dark')\n  try {\n    d.style.colorScheme = resolved\n  } catch {\n    /* non-fatal */\n  }\n}\n\n// Inline pre-paint script — render it in <head> (or as the first child of\n// <body>) so the theme applies before first paint. Resolves the preference\n// from cookie → localStorage → OS, applies the `.dark` class + `color-scheme`,\n// and seeds localStorage from the cookie so the app hydrates to the synced\n// value (the cross-subdomain flash fix). Self-contained, dependency-free, and\n// wrapped so any failure is silent (never blocks paint).\nexport const THEME_PREPAINT_SCRIPT = `(function(){try{\nvar KEY=${JSON.stringify(THEME_STORAGE_KEY)};\nvar VALID=[\"light\",\"dark\",\"system\"];\nfunction fromCookie(){try{var m=document.cookie.match(/(?:^|;\\\\s*)${THEME_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}\nvar cookie=fromCookie();\nvar ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}\nvar pref=cookie||ls||\"system\";\nif(VALID.indexOf(pref)===-1)pref=\"system\";\nif(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}\nvar resolved=pref;\nif(pref===\"system\"){try{resolved=window.matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\";}catch(e){resolved=\"light\";}}\nvar d=document.documentElement;\nif(resolved===\"dark\"){d.classList.add(\"dark\");}else{d.classList.remove(\"dark\");}\ntry{d.style.colorScheme=resolved;}catch(e){}\n}catch(e){}})();`\n"]}

package/dist/native.cjs

@@ -52,6 +52,71 @@ function resolveBrandGlyph(name) {
   if (!name) return null;
   return GLYPHS[name.trim().toLowerCase()] ?? null;
 }
+
+// src/theme-preference.ts
+var THEME_STORAGE_KEY = "politogy_theme";
+var THEME_COOKIE = "politogy_theme";
+var VALID = ["light", "dark", "system"];
+function isThemePreference(v) {
+  return typeof v === "string" && VALID.includes(v);
+}
+function readThemeCookie() {
+  if (typeof document === "undefined") return null;
+  try {
+    const m = document.cookie.match(
+      new RegExp(`(?:^|;\\s*)${THEME_COOKIE}=([^;]+)`)
+    );
+    const v = m ? decodeURIComponent(m[1]) : null;
+    return isThemePreference(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeThemeCookie(pref) {
+  if (typeof document === "undefined" || typeof window === "undefined") return;
+  const host = window.location.hostname;
+  const onParentDomain = /(^|\.)politogyvrm\.com$/i.test(host);
+  const domainAttr = onParentDomain ? "; Domain=.politogyvrm.com" : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(
+    pref
+  )}; Path=/; Max-Age=31536000; SameSite=Lax${domainAttr}${secure}`;
+}
+function resolveTheme(pref) {
+  if (pref === "system") {
+    try {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } catch {
+      return "light";
+    }
+  }
+  return pref;
+}
+function applyThemePreference(pref) {
+  if (typeof document === "undefined") return;
+  const resolved = resolveTheme(pref);
+  const d = document.documentElement;
+  d.classList.toggle("dark", resolved === "dark");
+  try {
+    d.style.colorScheme = resolved;
+  } catch {
+  }
+}
+`(function(){try{
+var KEY=${JSON.stringify(THEME_STORAGE_KEY)};
+var VALID=["light","dark","system"];
+function fromCookie(){try{var m=document.cookie.match(/(?:^|;\\s*)${THEME_COOKIE}=([^;]+)/);return m?decodeURIComponent(m[1]):null;}catch(e){return null;}}
+var cookie=fromCookie();
+var ls=null;try{ls=localStorage.getItem(KEY);}catch(e){}
+var pref=cookie||ls||"system";
+if(VALID.indexOf(pref)===-1)pref="system";
+if(cookie&&cookie!==ls){try{localStorage.setItem(KEY,cookie);}catch(e){}}
+var resolved=pref;
+if(pref==="system"){try{resolved=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}catch(e){resolved="light";}}
+var d=document.documentElement;
+if(resolved==="dark"){d.classList.add("dark");}else{d.classList.remove("dark");}
+try{d.style.colorScheme=resolved;}catch(e){}
+}catch(e){}})();`;
 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 [
@@ -580,6 +645,96 @@ function NavDisplayAction({
     }
   );
 }
+function useThemePreference() {
+  const ctx = react.useContext(NavChromeContext);
+  const fetchJson = ctx?.fetchJson ?? null;
+  const [value, setValueState] = react.useState("system");
+  const reconciled = react.useRef(false);
+  react.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);
+  }, []);
+  react.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]);
+  react.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);
+    };
+  }, []);
+  react.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 = react.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 = [
@@ -856,7 +1011,7 @@ function NavSidebar({
       ] })
     ] }),
     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: [
+      footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-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",
@@ -888,14 +1043,12 @@ function NavSidebar({
           ] })
         ] }),
         footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
           footer.commitDate ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
             month: "short",
             day: "numeric"
           }) }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
-          footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" })
+          footer.commitDate && footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[color:var(--muted)]", children: "|" }) : null,
+          footer.commitAuthor ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null
         ] }) : null
       ] })
     ] }) : null
@@ -1426,5 +1579,6 @@ exports.isNavItemActive = isNavItemActive;
 exports.standardPolitogyNav = standardPolitogyNav;
 exports.topBarIconButtonClass = topBarIconButtonClass;
 exports.useChromeOrgs = useChromeOrgs;
+exports.useThemePreference = useThemePreference;
 //# sourceMappingURL=native.cjs.map
 //# sourceMappingURL=native.cjs.map