@the-portland-company/shell 0.16.0 → 0.16.2

package/dist/theme-preference.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+// 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){}})();`;
+
+exports.THEME_COOKIE = THEME_COOKIE;
+exports.THEME_PREPAINT_SCRIPT = THEME_PREPAINT_SCRIPT;
+exports.THEME_STORAGE_KEY = THEME_STORAGE_KEY;
+exports.applyThemePreference = applyThemePreference;
+exports.isThemePreference = isThemePreference;
+exports.readThemeCookie = readThemeCookie;
+exports.resolveTheme = resolveTheme;
+exports.writeThemeCookie = writeThemeCookie;
+//# sourceMappingURL=theme-preference.cjs.map
+//# sourceMappingURL=theme-preference.cjs.map

package/dist/theme-preference.cjs.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":"theme-preference.cjs","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/theme-preference.d.cts

@@ -0,0 +1,14 @@
+type ThemePreference = 'light' | 'dark' | 'system';
+declare const THEME_STORAGE_KEY = "politogy_theme";
+declare const THEME_COOKIE = "politogy_theme";
+declare function isThemePreference(v: unknown): v is ThemePreference;
+/** Read the shared cookie (browser only; null on the server or when unset). */
+declare function readThemeCookie(): ThemePreference | null;
+declare function writeThemeCookie(pref: ThemePreference): void;
+/** Resolve a preference to the concrete light/dark it renders as right now. */
+declare function resolveTheme(pref: ThemePreference): 'light' | 'dark';
+/** Apply a preference to the document (`.dark` class + color-scheme). */
+declare function applyThemePreference(pref: ThemePreference): void;
+declare const THEME_PREPAINT_SCRIPT: string;
+
+export { THEME_COOKIE, THEME_PREPAINT_SCRIPT, THEME_STORAGE_KEY, type ThemePreference, applyThemePreference, isThemePreference, readThemeCookie, resolveTheme, writeThemeCookie };

package/dist/theme-preference.d.ts

@@ -0,0 +1,14 @@
+type ThemePreference = 'light' | 'dark' | 'system';
+declare const THEME_STORAGE_KEY = "politogy_theme";
+declare const THEME_COOKIE = "politogy_theme";
+declare function isThemePreference(v: unknown): v is ThemePreference;
+/** Read the shared cookie (browser only; null on the server or when unset). */
+declare function readThemeCookie(): ThemePreference | null;
+declare function writeThemeCookie(pref: ThemePreference): void;
+/** Resolve a preference to the concrete light/dark it renders as right now. */
+declare function resolveTheme(pref: ThemePreference): 'light' | 'dark';
+/** Apply a preference to the document (`.dark` class + color-scheme). */
+declare function applyThemePreference(pref: ThemePreference): void;
+declare const THEME_PREPAINT_SCRIPT: string;
+
+export { THEME_COOKIE, THEME_PREPAINT_SCRIPT, THEME_STORAGE_KEY, type ThemePreference, applyThemePreference, isThemePreference, readThemeCookie, resolveTheme, writeThemeCookie };

package/dist/theme-preference.js

@@ -0,0 +1,3 @@
+export { THEME_COOKIE, THEME_PREPAINT_SCRIPT, THEME_STORAGE_KEY, applyThemePreference, isThemePreference, readThemeCookie, resolveTheme, writeThemeCookie } from './chunk-ZZWM7BZZ.js';
+//# sourceMappingURL=theme-preference.js.map
+//# sourceMappingURL=theme-preference.js.map

package/dist/theme-preference.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"theme-preference.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-portland-company/shell",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Shared chrome (header, sidebar, footer, theme, auth) for politogy apps. Drop into any Vite SPA to inherit the politogy look and signed-in user.",
   "license": "UNLICENSED",
   "private": false,
@@ -30,7 +30,12 @@
       "import": "./dist/native.js",
       "require": "./dist/native.cjs"
     },
-    "./sw": "./dist/shell-precache.worker.js"
+    "./sw": "./dist/shell-precache.worker.js",
+    "./theme-preference": {
+      "types": "./dist/theme-preference.d.ts",
+      "import": "./dist/theme-preference.js",
+      "require": "./dist/theme-preference.cjs"
+    }
   },
   "files": [
     "dist",