@scalemule/news-publication 0.0.9 → 0.0.10

package/dist/theme-toggle.cjs

@@ -0,0 +1,258 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/theme.ts
+var THEME_COOKIE = "news_publication_theme";
+var THEME_STORAGE_KEY = "news_publication_theme";
+var THEME_EVENT = "news_publication_theme_change";
+var THEME_MAX_AGE_SECONDS = 365 * 24 * 60 * 60;
+var memoryTheme = "system";
+function getSystemTheme() {
+  if (typeof window === "undefined" || !window.matchMedia) return "light";
+  try {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } catch {
+    return "light";
+  }
+}
+function resolveEffectiveTheme(mode) {
+  if (mode === "system") return getSystemTheme();
+  return mode;
+}
+function getStoredTheme() {
+  if (typeof window === "undefined") return memoryTheme;
+  try {
+    const stored = window.localStorage?.getItem?.(THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      memoryTheme = stored;
+      return stored;
+    }
+  } catch {
+  }
+  if (typeof document !== "undefined" && document.cookie) {
+    try {
+      const match = document.cookie.match(new RegExp(`(?:^|; )${THEME_COOKIE}=([^;]*)`));
+      if (match) {
+        const decoded = decodeURIComponent(match[1]);
+        if (decoded === "light" || decoded === "dark" || decoded === "system") {
+          memoryTheme = decoded;
+          return decoded;
+        }
+      }
+    } catch {
+    }
+  }
+  return memoryTheme;
+}
+function applyTheme(mode) {
+  if (typeof document === "undefined") return;
+  try {
+    document.documentElement.setAttribute("data-theme", mode);
+    const elements = document.querySelectorAll(".publication");
+    elements.forEach((el) => el.setAttribute("data-theme", mode));
+  } catch {
+  }
+}
+var memoryListeners = /* @__PURE__ */ new Set();
+function setTheme(mode) {
+  memoryTheme = mode;
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage?.setItem?.(THEME_STORAGE_KEY, mode);
+    } catch {
+    }
+    if (typeof document !== "undefined") {
+      try {
+        document.cookie = `${THEME_COOKIE}=${encodeURIComponent(mode)}; path=/; max-age=${THEME_MAX_AGE_SECONDS}; SameSite=Lax`;
+      } catch {
+      }
+    }
+    applyTheme(mode);
+    const effective = resolveEffectiveTheme(mode);
+    try {
+      window.dispatchEvent(
+        new CustomEvent(THEME_EVENT, {
+          detail: { mode, effective }
+        })
+      );
+    } catch {
+    }
+  }
+  memoryListeners.forEach((listener) => {
+    try {
+      listener();
+    } catch {
+    }
+  });
+}
+function subscribeTheme(listener) {
+  memoryListeners.add(listener);
+  if (typeof window === "undefined") {
+    return () => {
+      memoryListeners.delete(listener);
+    };
+  }
+  const onStorage = (e) => {
+    if (e.key === THEME_STORAGE_KEY) {
+      applyTheme(getStoredTheme());
+      listener();
+    }
+  };
+  const onCustom = () => {
+    listener();
+  };
+  window.addEventListener("storage", onStorage);
+  window.addEventListener(THEME_EVENT, onCustom);
+  let mediaQuery;
+  let onMediaChange;
+  if (window.matchMedia) {
+    try {
+      mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      onMediaChange = () => {
+        if (getStoredTheme() === "system") {
+          applyTheme("system");
+          listener();
+        }
+      };
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener("change", onMediaChange);
+      } else if (mediaQuery.addListener) {
+        mediaQuery.addListener(onMediaChange);
+      }
+    } catch {
+    }
+  }
+  return () => {
+    window.removeEventListener("storage", onStorage);
+    window.removeEventListener(THEME_EVENT, onCustom);
+    if (mediaQuery && onMediaChange) {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", onMediaChange);
+      } else if (mediaQuery.removeListener) {
+        mediaQuery.removeListener(onMediaChange);
+      }
+    }
+  };
+}
+function SunIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })
+  ] });
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
+}
+function SystemIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
+  ] });
+}
+function ThemeToggle({
+  variant = "compact",
+  className = "",
+  showPromotion = false,
+  accountUrl = "/account"
+}) {
+  const currentTheme = react.useSyncExternalStore(subscribeTheme, getStoredTheme, () => "system");
+  const [mounted, setMounted] = react.useState(false);
+  const [promoVisible, setPromoVisible] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const handleSelect = (mode) => {
+    setTheme(mode);
+    if (showPromotion) {
+      setPromoVisible(true);
+    }
+  };
+  const active = mounted ? currentTheme : "system";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `pub-theme-toggle-container ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "pub-theme-toggle",
+        "data-variant": variant,
+        role: "group",
+        "aria-label": "Display theme selection",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelect("light"),
+              "aria-pressed": active === "light",
+              "data-active": active === "light",
+              title: "Light theme (broadsheet day edition)",
+              "aria-label": "Light theme",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {}),
+                variant !== "compact" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Light" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelect("dark"),
+              "aria-pressed": active === "dark",
+              "data-active": active === "dark",
+              title: "Dark theme (broadsheet evening edition)",
+              "aria-label": "Dark theme",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {}),
+                variant !== "compact" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Dark" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelect("system"),
+              "aria-pressed": active === "system",
+              "data-active": active === "system",
+              title: "System preference (matches device setting)",
+              "aria-label": "System theme",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SystemIcon, {}),
+                variant !== "compact" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "System" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    promoVisible && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pub-theme-promo", role: "status", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Theme saved for this browser. " }),
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: accountUrl, children: "Create a free reader account" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: " to sync preferences across all your devices." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPromoVisible(false),
+          "aria-label": "Dismiss note",
+          style: {
+            marginLeft: "8px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "var(--pub-muted)",
+            fontSize: "12px",
+            padding: "0 4px"
+          },
+          children: "\xD7"
+        }
+      )
+    ] })
+  ] });
+}
+
+exports.ThemeToggle = ThemeToggle;

package/dist/theme-toggle.d.cts

@@ -0,0 +1,22 @@
+import react__default from 'react';
+
+interface ThemeToggleProps {
+    /**
+     * "compact": Micro-pill with icons only (ideal for header utility bar).
+     * "inline": Broadsheet rectangular tabs with text and icons (ideal for article reading tools).
+     * "segmented": Pill with icons and labels (ideal for account, settings, or footer).
+     */
+    variant?: "compact" | "inline" | "segmented";
+    /** Optional extra class name applied to container */
+    className?: string;
+    /**
+     * When true, displays a subtle, tasteful message when the user changes the theme:
+     * "Theme saved on this browser. Create a free reader account to sync across devices."
+     */
+    showPromotion?: boolean;
+    /** Link for reader account / sync. Default: "/account" */
+    accountUrl?: string;
+}
+declare function ThemeToggle({ variant, className, showPromotion, accountUrl, }: ThemeToggleProps): react__default.JSX.Element;
+
+export { ThemeToggle, type ThemeToggleProps };

package/dist/theme-toggle.d.ts

@@ -0,0 +1,22 @@
+import react__default from 'react';
+
+interface ThemeToggleProps {
+    /**
+     * "compact": Micro-pill with icons only (ideal for header utility bar).
+     * "inline": Broadsheet rectangular tabs with text and icons (ideal for article reading tools).
+     * "segmented": Pill with icons and labels (ideal for account, settings, or footer).
+     */
+    variant?: "compact" | "inline" | "segmented";
+    /** Optional extra class name applied to container */
+    className?: string;
+    /**
+     * When true, displays a subtle, tasteful message when the user changes the theme:
+     * "Theme saved on this browser. Create a free reader account to sync across devices."
+     */
+    showPromotion?: boolean;
+    /** Link for reader account / sync. Default: "/account" */
+    accountUrl?: string;
+}
+declare function ThemeToggle({ variant, className, showPromotion, accountUrl, }: ThemeToggleProps): react__default.JSX.Element;
+
+export { ThemeToggle, type ThemeToggleProps };

package/dist/theme-toggle.js

@@ -0,0 +1,2 @@
+"use client";
+export { ThemeToggle } from './chunk-NQD3M7ZY.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/news-publication",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Shared server framework for ScaleMule local news publications. Walnut Creek Times is the broadsheet default; each paper supplies its own identity and feature flags.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -49,7 +49,12 @@
       "import": "./dist/cookie-settings-view.js",
       "require": "./dist/cookie-settings-view.cjs"
     },
-    "./cookie-consent.css": "./cookie-consent.css"
+    "./cookie-consent.css": "./cookie-consent.css",
+    "./theme-toggle": {
+      "types": "./dist/theme-toggle.d.ts",
+      "import": "./dist/theme-toggle.js",
+      "require": "./dist/theme-toggle.cjs"
+    }
   },
   "files": [
     "dist",

package/tokens/broadsheet.css

@@ -13,6 +13,7 @@
   --pub-rule: #d7dcd7;
   --pub-soft: #f5f6f3;
   --pub-sponsor: #173d32;
+  --pub-selection-bg: #f6dcdd;
   --pub-serif: var(--font-editorial), Georgia, "Times New Roman", serif;
   --pub-editorial: var(--font-editorial), Georgia, "Times New Roman", serif;
   --pub-sans: var(--font-inter), Arial, Helvetica, sans-serif;
@@ -43,7 +44,51 @@
   line-height: 1.5;
   min-height: 100dvh;
   overflow-wrap: break-word;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
+
+/* Explicit Light Mode Override */
+:root[data-theme="light"] .publication,
+.publication[data-theme="light"] {
+  --pub-paper: #ffffff;
+  --pub-ink: #171917;
+  --pub-muted: #545c55;
+  --pub-accent: #bb171d;
+  --pub-rule: #d7dcd7;
+  --pub-soft: #f5f6f3;
+  --pub-sponsor: #173d32;
+  --pub-selection-bg: #f6dcdd;
+}
+
+/* Broadsheet Evening Edition: Dark Mode */
+:root[data-theme="dark"] .publication,
+.publication[data-theme="dark"],
+[data-theme="dark"] {
+  --pub-paper: #131514;
+  --pub-ink: #eaece8;
+  --pub-muted: #959e96;
+  --pub-accent: #e54b51;
+  --pub-rule: #29302a;
+  --pub-soft: #1a1e1b;
+  --pub-sponsor: #244b3e;
+  --pub-selection-bg: #52191d;
+}
+
+/* System Preference Mode (Default when not explicitly forced) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .publication,
+  .publication:not([data-theme="light"]) {
+    --pub-paper: #131514;
+    --pub-ink: #eaece8;
+    --pub-muted: #959e96;
+    --pub-accent: #e54b51;
+    --pub-rule: #29302a;
+    --pub-soft: #1a1e1b;
+    --pub-sponsor: #244b3e;
+    --pub-selection-bg: #52191d;
+  }
+}
+
 .publication *, .publication *::before, .publication *::after { box-sizing: border-box; }
 .publication :focus-visible { outline: 3px solid #a95c00; outline-offset: 4px; }
 .publication a, .publication button, .publication summary { touch-action: manipulation; }
@@ -55,7 +100,138 @@
   text-wrap: pretty;
 }
 .publication [id] { scroll-margin-top: 24px; }
-.publication ::selection { background: #f6dcdd; color: var(--pub-ink); }
+.publication ::selection { background: var(--pub-selection-bg, #f6dcdd); color: var(--pub-ink); }
 @media (min-width: 960px) {
   .publication { --pub-width: 1280px; }
 }
+
+/*
+ * Broadsheet Theme Toggle Controls
+ */
+.pub-theme-toggle-container {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.pub-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--pub-rule);
+  background: var(--pub-soft);
+  border-radius: 4px;
+  font-family: var(--pub-sans);
+  line-height: 1;
+  user-select: none;
+}
+
+.pub-theme-toggle button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 4px 8px;
+  height: 26px;
+  border: 0;
+  background: transparent;
+  color: var(--pub-muted);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: background 0.15s ease, color 0.15s ease;
+  text-decoration: none;
+  line-height: 1;
+}
+
+.pub-theme-toggle button:hover {
+  color: var(--pub-ink);
+}
+
+.pub-theme-toggle button[aria-pressed="true"],
+.pub-theme-toggle button[data-active="true"] {
+  background: var(--pub-paper);
+  color: var(--pub-ink);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.pub-theme-toggle svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* Compact variant (ideal for top utility bar) */
+.pub-theme-toggle[data-variant="compact"] {
+  padding: 1px;
+  gap: 1px;
+}
+
+.pub-theme-toggle[data-variant="compact"] button {
+  padding: 3px 6px;
+  height: 22px;
+  min-width: 24px;
+}
+
+.pub-theme-toggle[data-variant="compact"] svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* Inline variant (for reading toolbar on article pages) */
+.pub-theme-toggle[data-variant="inline"] {
+  border-color: var(--pub-rule);
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  gap: 0;
+}
+
+.pub-theme-toggle[data-variant="inline"] button {
+  height: 30px;
+  padding: 4px 10px;
+  border: 1px solid var(--pub-rule);
+  border-radius: 0;
+  background: var(--pub-paper);
+  font-size: 12px;
+}
+
+.pub-theme-toggle[data-variant="inline"] button:not(:first-child) {
+  margin-left: -1px;
+}
+
+.pub-theme-toggle[data-variant="inline"] button[aria-pressed="true"],
+.pub-theme-toggle[data-variant="inline"] button[data-active="true"] {
+  background: var(--pub-soft);
+  color: var(--pub-ink);
+  border-color: var(--pub-ink);
+  z-index: 1;
+}
+
+/* Reader promotion / device sync prompt banner */
+.pub-theme-promo {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 40;
+  min-width: 240px;
+  max-width: 320px;
+  padding: 8px 12px;
+  font-size: 11px;
+  line-height: 1.4;
+  border: 1px solid var(--pub-rule);
+  background: var(--pub-paper);
+  color: var(--pub-ink);
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.pub-theme-promo a {
+  color: var(--pub-accent);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}