token-larper 1.0.0 → 1.6.1

package/src/client/App.tsx

@@ -1,12 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AlertTriangle, Moon, Power, RefreshCw, Search, Settings, Sun } from "lucide-react";
+import { AlertTriangle, Heart, Moon, Power, RefreshCw, Search, Settings, Sun } from "lucide-react";
 import type { DashboardPayload, HarnessId, StartupConfig } from "../types.ts";
 import { OTHER_SERIES, SERIES_SLOTS, seriesColor, type SeriesInfo } from "./charts.tsx";
 import { DashboardProvider, type Dashboard } from "./context.tsx";
 import { DateRangePicker } from "./components/DateRangePicker.tsx";
+import { Logo } from "./components/Logo.tsx";
 import { RankChip } from "./components/RankChip.tsx";
 import { SettingsDialog } from "./components/SettingsDialog.tsx";
 import { SelectMenu, type SelectMenuOption } from "./components/SelectMenu.tsx";
+import { UpdateBanner } from "./components/UpdateBanner.tsx";
+import { useUpdates } from "./lib/updates.ts";
 import { daysInRange, sessionsInRange, type Bucket, type HarnessFilter } from "./lib/aggregate.ts";
 import { RANGE_PRESETS, parseDay, presetRange, todayKey, type DateRange, type RangePreset } from "./lib/range.ts";
 import { Models } from "./views/Models.tsx";
@@ -18,13 +21,13 @@ import { Tools } from "./views/Tools.tsx";
 import {
   applyTheme,
   IMPORTED_THEME_STORAGE_KEY,
+  readAppearance,
   readImportedTheme,
-  readThemePalette,
+  saveAppearance,
   THEME_MODE_STORAGE_KEY,
-  THEME_PALETTE_STORAGE_KEY,
+  type Appearance,
   type ImportedTheme,
   type ThemeMode,
-  type ThemePalette,
 } from "./themes.ts";
 import { localDateKey } from "./utils.ts";
 
@@ -50,10 +53,13 @@ interface Prefs {
   customEnd?: string;
   bucket: Bucket;
   estimated: boolean;
+  checkUpdates: boolean;
+  /** The version whose banner was closed; a later version shows it again. */
+  dismissedUpdate?: string;
 }
 
 function loadPrefs(): Prefs {
-  const defaults: Prefs = { view: "overview", showRanks: true, preset: "30d", bucket: "daily", estimated: false };
+  const defaults: Prefs = { view: "overview", showRanks: true, preset: "30d", bucket: "daily", estimated: false, checkUpdates: true };
   try {
     const raw = JSON.parse(localStorage.getItem(PREFS_KEY) || "{}");
     const saved: Partial<Prefs> = raw && typeof raw === "object" ? raw : {};
@@ -73,6 +79,8 @@ function loadPrefs(): Prefs {
       bucket,
       preset: preset === "custom" && !customDatesValid ? defaults.preset : preset,
       estimated: saved.estimated === true,
+      checkUpdates: saved.checkUpdates !== false,
+      ...(typeof saved.dismissedUpdate === "string" ? { dismissedUpdate: saved.dismissedUpdate } : {}),
       ...(customDatesValid ? { customStart: saved.customStart, customEnd: saved.customEnd } : {}),
     };
   } catch {
@@ -121,10 +129,13 @@ export function App() {
       return true;
     }
   });
-  const [palette, setPalette] = useState<ThemePalette>(readThemePalette);
+  const [appearance, setAppearance] = useState<Appearance>(readAppearance);
   const [importedTheme, setImportedTheme] = useState<ImportedTheme | null>(readImportedTheme);
 
   const updatePrefs = (patch: Partial<Prefs>) => setPrefs((p) => ({ ...p, ...patch }));
+  const updates = useUpdates(prefs.checkUpdates);
+  const showUpdateBanner = updates.phase !== "idle" || (prefs.checkUpdates && !!updates.status?.updateAvailable
+    && updates.status.latest !== prefs.dismissedUpdate);
 
   function setShowRanks(showRanks: boolean) {
     setPrefs((p) => ({ ...p, showRanks, view: !showRanks && p.view === "rank" ? "overview" : p.view }));
@@ -151,8 +162,8 @@ export function App() {
   }, [prefs.showRanks]);
 
   useEffect(() => {
-    applyTheme(theme, palette, importedTheme);
-  }, [theme, palette, importedTheme]);
+    applyTheme(theme, appearance, importedTheme);
+  }, [theme, appearance, importedTheme]);
 
   useEffect(() => {
     if (!followsSystemTheme) return;
@@ -170,25 +181,28 @@ export function App() {
     try { localStorage.setItem(THEME_MODE_STORAGE_KEY, next); } catch { /* Storage may be disabled. */ }
   }
 
-  function changeThemeMode(mode: ThemeMode) {
+  function changeThemeMode(mode: ThemeMode | "system") {
+    if (mode === "system") {
+      setFollowsSystemTheme(true);
+      setTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+      try { localStorage.removeItem(THEME_MODE_STORAGE_KEY); } catch { /* Storage may be disabled. */ }
+      return;
+    }
     setFollowsSystemTheme(false);
     setTheme(mode);
     try { localStorage.setItem(THEME_MODE_STORAGE_KEY, mode); } catch { /* Storage may be disabled. */ }
   }
 
-  function changePalette(next: ThemePalette) {
-    if (next === "custom" && !importedTheme) return;
-    setPalette(next);
-    try { localStorage.setItem(THEME_PALETTE_STORAGE_KEY, next); } catch { /* Storage may be disabled. */ }
+  function changeAppearance(next: Appearance) {
+    const safe = next.imported && !importedTheme ? { ...next, imported: false } : next;
+    setAppearance(safe);
+    saveAppearance(safe);
   }
 
   function saveImportedTheme(next: ImportedTheme) {
     setImportedTheme(next);
-    setPalette("custom");
-    try {
-      localStorage.setItem(IMPORTED_THEME_STORAGE_KEY, JSON.stringify(next));
-      localStorage.setItem(THEME_PALETTE_STORAGE_KEY, "custom");
-    } catch { /* Storage may be disabled. */ }
+    changeAppearance({ ...appearance, imported: true });
+    try { localStorage.setItem(IMPORTED_THEME_STORAGE_KEY, JSON.stringify(next)); } catch { /* Storage may be disabled. */ }
   }
 
   async function fetchDashboard(opts?: { refresh?: boolean; forceDeepScan?: boolean }) {
@@ -369,7 +383,7 @@ export function App() {
     return (
       <div className="splash">
         <div className="splash-card">
-          <img className="splash-logo" src="/logo.svg" alt="" />
+          <Logo className="splash-logo" />
           <h2>Summoning Token Larper…</h2>
           <p>Reading local usage from your coding tools with ccusage.</p>
         </div>
@@ -427,7 +441,7 @@ export function App() {
       <div className="app">
         <header className="topbar">
           <div className="brand">
-            <img className="brand-logo" src="/logo.svg" alt="" />
+            <Logo className="brand-logo" />
             <h1>Token Larper</h1>
             {data.syncingHarnesses.length > 0 && (
               <span className="pill">
@@ -473,6 +487,10 @@ export function App() {
           </div>
         </header>
 
+        {showUpdateBanner && (
+          <UpdateBanner updates={updates} onDismiss={() => updatePrefs({ dismissedUpdate: updates.status?.latest ?? undefined })} />
+        )}
+
         <nav className="tabs" aria-label="Dashboard views">
           {VIEWS.filter((v) => v.id !== "rank" || prefs.showRanks).map((v) => (
             <button
@@ -535,18 +553,31 @@ export function App() {
           {view.id === "rank" && <Rank />}
         </main>
 
+        <footer className="credit">
+          <span>
+            Made with <Heart size={12} aria-label="love" className="credit-heart" /> by{" "}
+            <a href="https://github.com/YarooqH" target="_blank" rel="noreferrer">qray</a>
+          </span>
+          <span aria-hidden="true">·</span>
+          <a href="https://github.com/YarooqH/token-larper" target="_blank" rel="noreferrer">Source on GitHub</a>
+        </footer>
+
         {showSettings && (
           <SettingsDialog
             startup={startup}
             startupError={startupError}
             saving={savingStartup}
             themeMode={theme}
-            palette={palette}
+            followsSystemTheme={followsSystemTheme}
+            appearance={appearance}
             importedTheme={importedTheme}
             showRanks={prefs.showRanks}
+            updates={updates}
+            checkUpdates={prefs.checkUpdates}
+            onCheckUpdatesChange={(checkUpdates) => updatePrefs({ checkUpdates })}
             onClose={closeSettings}
             onThemeModeChange={changeThemeMode}
-            onPaletteChange={changePalette}
+            onAppearanceChange={changeAppearance}
             onImportTheme={saveImportedTheme}
             onShowRanksChange={setShowRanks}
             onToggleStartup={(enabled, open) => void handleToggleStartup(enabled, open)}

package/src/client/components/Logo.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { LOGO_PATHS, LOGO_VIEWBOX } from "../logoMark.ts";
+
+/** The logo in the current text color, so it follows the dashboard theme. */
+export function Logo({ className, label }: { className?: string; label?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox={LOGO_VIEWBOX}
+      fill="currentColor"
+      role={label ? "img" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+    >
+      <path d={LOGO_PATHS.t} />
+      <path d={LOGO_PATHS.flame} fillRule="evenodd" />
+    </svg>
+  );
+}

package/src/client/components/SettingsDialog.tsx

@@ -2,19 +2,25 @@ import React, { useEffect, useRef } from "react";
 import { ChevronDown, Power, X } from "lucide-react";
 import type { StartupConfig } from "../../types.ts";
 import { ThemeSettings } from "./ThemeSettings.tsx";
-import type { ImportedTheme, ThemeMode, ThemePalette } from "../themes.ts";
+import { UpdateSettings } from "./UpdateSettings.tsx";
+import type { Updates } from "../lib/updates.ts";
+import type { Appearance, ImportedTheme, ThemeMode } from "../themes.ts";
 
 interface Props {
   startup: StartupConfig | null;
   startupError: string | null;
   saving: boolean;
   themeMode: ThemeMode;
-  palette: ThemePalette;
+  followsSystemTheme: boolean;
+  appearance: Appearance;
   importedTheme: ImportedTheme | null;
   showRanks: boolean;
+  updates: Updates;
+  checkUpdates: boolean;
+  onCheckUpdatesChange: (checkUpdates: boolean) => void;
   onClose: () => void;
-  onThemeModeChange: (mode: ThemeMode) => void;
-  onPaletteChange: (palette: ThemePalette) => void;
+  onThemeModeChange: (mode: ThemeMode | "system") => void;
+  onAppearanceChange: (appearance: Appearance) => void;
   onImportTheme: (theme: ImportedTheme) => void;
   onShowRanksChange: (showRanks: boolean) => void;
   onToggleStartup: (enabled: boolean, openBrowserOnBoot?: boolean) => void;
@@ -27,12 +33,16 @@ export function SettingsDialog({
   startupError,
   saving,
   themeMode,
-  palette,
+  followsSystemTheme,
+  appearance,
   importedTheme,
   showRanks,
+  updates,
+  checkUpdates,
+  onCheckUpdatesChange,
   onClose,
   onThemeModeChange,
-  onPaletteChange,
+  onAppearanceChange,
   onImportTheme,
   onShowRanksChange,
   onToggleStartup,
@@ -84,7 +94,7 @@ export function SettingsDialog({
         <header className="modal-header">
           <div>
             <h3 id="settings-title">Settings</h3>
-            <p>Appearance, dashboard, and startup</p>
+            <p>Appearance, dashboard, updates, and startup</p>
           </div>
           <button ref={closeRef} className="icon-btn" aria-label="Close settings" onClick={onClose}>
             <X size={17} />
@@ -95,10 +105,11 @@ export function SettingsDialog({
           {startupError && <div className="inline-error" role="alert">{startupError}</div>}
           <ThemeSettings
             mode={themeMode}
-            palette={palette}
+            followsSystem={followsSystemTheme}
+            appearance={appearance}
             importedTheme={importedTheme}
             onModeChange={onThemeModeChange}
-            onPaletteChange={onPaletteChange}
+            onAppearanceChange={onAppearanceChange}
             onImportTheme={onImportTheme}
           />
           <section className="settings-section" aria-labelledby="settings-dashboard-heading">
@@ -122,6 +133,7 @@ export function SettingsDialog({
               </button>
             </div>
           </section>
+          <UpdateSettings updates={updates} autoCheck={checkUpdates} onAutoCheckChange={onCheckUpdatesChange} />
           {startup ? (
             <>
               <section className="settings-section" aria-labelledby="settings-startup-heading">

package/src/client/components/ThemeSettings.tsx

@@ -1,14 +1,21 @@
 import React, { useState } from "react";
-import { ChevronDown } from "lucide-react";
-import { importThemeCss, THEME_PRESETS, type ImportedTheme, type ThemeMode, type ThemePalette } from "../themes.ts";
-import { SelectMenu, type SelectMenuOption } from "./SelectMenu.tsx";
+import { Check, ChevronDown, Pipette } from "lucide-react";
+import {
+  ACCENT_PRESETS,
+  importThemeCss,
+  STYLE_PRESETS,
+  type Appearance,
+  type ImportedTheme,
+  type ThemeMode,
+} from "../themes.ts";
 
 interface Props {
   mode: ThemeMode;
-  palette: ThemePalette;
+  followsSystem: boolean;
+  appearance: Appearance;
   importedTheme: ImportedTheme | null;
-  onModeChange: (mode: ThemeMode) => void;
-  onPaletteChange: (palette: ThemePalette) => void;
+  onModeChange: (mode: ThemeMode | "system") => void;
+  onAppearanceChange: (appearance: Appearance) => void;
   onImportTheme: (theme: ImportedTheme) => void;
 }
 
@@ -28,65 +35,132 @@ const SAMPLE_THEME = `:root {
   --accent-ink: #11261a;
 }`;
 
-export function ThemeSettings({ mode, palette, importedTheme, onModeChange, onPaletteChange, onImportTheme }: Props) {
+export function ThemeSettings({ mode, followsSystem, appearance, importedTheme, onModeChange, onAppearanceChange, onImportTheme }: Props) {
   const [css, setCss] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
+  const accent = appearance.accent;
+  const customColor = accent.kind === "custom" ? accent.color : "#6d5bd0";
 
   function applyPastedTheme() {
     try {
-      const imported = importThemeCss(css);
-      onImportTheme(imported);
+      onImportTheme(importThemeCss(css));
       setError(null);
-      setMessage("Theme applied.");
+      setMessage("Theme applied. Its colors now sit on top of the selected style.");
     } catch (cause) {
       setMessage(null);
       setError(cause instanceof Error ? cause.message : "Could not read this theme CSS.");
     }
   }
 
-  const paletteOptions: SelectMenuOption<ThemePalette>[] = THEME_PRESETS.map((preset) => ({
-    value: preset.id,
-    label: preset.name,
-    description: preset.description,
-    visual: <span className="palette-color" aria-hidden="true" style={{ backgroundColor: mode === "dark" ? preset.darkAccent : preset.accent }} />,
-  }));
-  if (importedTheme) {
-    const colors = importedTheme[mode];
-    paletteOptions.push({
-      value: "custom",
-      label: "Imported theme",
-      description: "Your saved CSS colors",
-      visual: <span className="palette-color" aria-hidden="true" style={{ backgroundColor: colors["--accent"] }} />,
-    });
-  }
+  const modeValue = followsSystem ? "system" : mode;
 
   return (
     <section className="settings-section theme-settings" aria-labelledby="settings-appearance-heading">
       <div className="settings-section-heading">
         <h4 id="settings-appearance-heading">Appearance</h4>
-        <span>{mode === "dark" ? "Dark mode" : "Light mode"}</span>
       </div>
 
-      <div className="theme-mode-row">
-        <span>Color mode</span>
-        <div className="segmented" role="group" aria-label="Color mode">
-          {(["light", "dark"] as const).map((option) => (
-            <button key={option} type="button" aria-pressed={mode === option} onClick={() => onModeChange(option)}>
-              {option === "light" ? "Light" : "Dark"}
+      <div className="theme-row">
+        <span className="theme-row-label" id="theme-mode-label">Mode</span>
+        <div className="segmented" role="group" aria-labelledby="theme-mode-label">
+          {(["system", "light", "dark"] as const).map((option) => (
+            <button key={option} type="button" aria-pressed={modeValue === option} onClick={() => onModeChange(option)}>
+              {option === "system" ? "System" : option === "light" ? "Light" : "Dark"}
             </button>
           ))}
         </div>
       </div>
 
-      <SelectMenu
-        label="Color palette"
-        value={palette}
-        options={paletteOptions}
-        onChange={onPaletteChange}
-        className="palette-picker"
-        showDescriptionInTrigger
-      />
+      <div className="theme-block">
+        <span className="theme-row-label" id="theme-style-label">Style</span>
+        <div className="style-grid" role="radiogroup" aria-labelledby="theme-style-label">
+          {STYLE_PRESETS.map((style) => {
+            const selected = appearance.style === style.id;
+            return (
+              <button
+                key={style.id}
+                type="button"
+                role="radio"
+                aria-checked={selected}
+                className="style-card"
+                onClick={() => onAppearanceChange({ ...appearance, style: style.id })}
+              >
+                {/* The preview renders with the style's own tokens, so it shows fonts, radius, borders and colors. */}
+                <span className="style-preview" data-style={style.id} aria-hidden="true">
+                  <span className="sp-panel">
+                    <span className="sp-title">Aa</span>
+                    <span className="sp-bars">
+                      <i style={{ height: "45%" }} />
+                      <i style={{ height: "80%" }} />
+                      <i style={{ height: "60%" }} />
+                    </span>
+                    <span className="sp-button" />
+                  </span>
+                </span>
+                <span className="style-card-text">
+                  <strong>{style.name}</strong>
+                  <span>{style.description}</span>
+                </span>
+                {selected && <Check size={14} className="style-card-check" aria-hidden="true" />}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="theme-block">
+        <span className="theme-row-label" id="theme-accent-label">Accent</span>
+        <div className="accent-row" role="radiogroup" aria-labelledby="theme-accent-label">
+          <button
+            type="button"
+            role="radio"
+            aria-checked={accent.kind === "style"}
+            className="accent-default"
+            onClick={() => onAppearanceChange({ ...appearance, accent: { kind: "style" } })}
+          >
+            Style default
+          </button>
+          {ACCENT_PRESETS.map((preset) => (
+            <button
+              key={preset.id}
+              type="button"
+              role="radio"
+              aria-checked={accent.kind === "preset" && accent.id === preset.id}
+              aria-label={preset.name}
+              title={preset.name}
+              className="accent-swatch"
+              style={{ background: mode === "dark" ? preset.dark : preset.light }}
+              onClick={() => onAppearanceChange({ ...appearance, accent: { kind: "preset", id: preset.id } })}
+            />
+          ))}
+          <label className={`accent-custom ${accent.kind === "custom" ? "is-selected" : ""}`} title="Pick any color">
+            <Pipette size={14} aria-hidden="true" />
+            <span className="sr-only">Custom accent color</span>
+            <input
+              type="color"
+              value={customColor}
+              onChange={(event) => onAppearanceChange({ ...appearance, accent: { kind: "custom", color: event.target.value } })}
+            />
+          </label>
+        </div>
+      </div>
+
+      {importedTheme && (
+        <div className="theme-row">
+          <span className="theme-row-label" id="theme-imported-label">Imported colors</span>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={appearance.imported}
+            aria-labelledby="theme-imported-label"
+            className={`toggle ${appearance.imported ? "on" : ""}`}
+            onClick={() => onAppearanceChange({ ...appearance, imported: !appearance.imported })}
+          >
+            <span className="toggle-knob" />
+          </button>
+        </div>
+      )}
 
       <details className="theme-import">
         <summary>
@@ -95,7 +169,8 @@ export function ThemeSettings({ mode, palette, importedTheme, onModeChange, onPa
         </summary>
         <div className="theme-import-body">
           <p>
-            Paste light and dark CSS variable blocks. Use Token Larper colors or shadcn-style variables; extra CSS is ignored.
+            Paste light and dark CSS variable blocks, for example from tweakcn. Use Token Larper colors or
+            shadcn-style variables; the colors apply on top of the selected style, and extra CSS is ignored.
           </p>
           <details className="theme-format">
             <summary>Show example CSS <ChevronDown size={14} aria-hidden="true" /></summary>

package/src/client/components/UpdateBanner.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { ArrowUpCircle, RefreshCw, X } from "lucide-react";
+import { RELEASES_URL, type Updates } from "../lib/updates.ts";
+
+export function UpdateBanner({ updates, onDismiss }: { updates: Updates; onDismiss: () => void }) {
+  const { status, phase, error, update } = updates;
+  if (!status?.latest) return null;
+  const updating = phase === "updating";
+
+  return (
+    <div className="update-banner" role="status">
+      {updating ? <RefreshCw size={16} className="spin" aria-hidden="true" /> : <ArrowUpCircle size={16} aria-hidden="true" />}
+      <p>
+        {updating ? (
+          <>Updating to {status.latest}. The dashboard reloads when it's ready.</>
+        ) : phase === "failed" ? (
+          <>{error}</>
+        ) : (
+          <>
+            <strong>Token Larper {status.latest} is out.</strong>{" "}
+            <span>
+              {status.source === "source" ? "This copy runs from git; update it with git pull." : `You have ${status.current}.`}
+            </span>
+          </>
+        )}
+      </p>
+      <div className="update-banner-actions">
+        <a className="update-link" href={RELEASES_URL} target="_blank" rel="noreferrer">What's new</a>
+        {status.source === "npm" && (
+          <button className="btn btn-primary" disabled={updating} onClick={() => void update()}>
+            {phase === "failed" ? "Try again" : updating ? "Updating…" : "Update now"}
+          </button>
+        )}
+        {!updating && (
+          <button className="icon-btn" aria-label={`Hide the ${status.latest} update`} title="Not now" onClick={onDismiss}>
+            <X size={15} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/UpdateSettings.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { RefreshCw } from "lucide-react";
+import { RELEASES_URL, UPDATE_COMMAND, type Updates } from "../lib/updates.ts";
+
+interface Props {
+  updates: Updates;
+  autoCheck: boolean;
+  onAutoCheckChange: (autoCheck: boolean) => void;
+}
+
+function describe({ status, checking, phase }: Updates): string {
+  if (phase === "updating") return `Updating to ${status?.latest}…`;
+  if (checking) return "Checking…";
+  if (!status?.checkedAt) return "Not checked yet";
+  if (status.updateAvailable) return `${status.latest} is available`;
+  return "You're up to date";
+}
+
+export function UpdateSettings({ updates, autoCheck, onAutoCheckChange }: Props) {
+  const { status, checking, phase, error, check, update } = updates;
+  const canUpdate = status?.updateAvailable && status.source === "npm" && phase !== "updating";
+
+  return (
+    <section className="settings-section" aria-labelledby="settings-updates-heading">
+      <div className="settings-section-heading">
+        <h4 id="settings-updates-heading">Updates</h4>
+        <span>{status ? `Version ${status.current}` : ""}</span>
+      </div>
+      <div className="setting-row">
+        <div className="setting-copy">
+          <strong>{describe(updates)}</strong>
+          <p>
+            {error ? error : status?.source === "source"
+              ? "This copy runs from a git checkout. Update it with git pull."
+              : <>Updates install with <code>{UPDATE_COMMAND}</code>. <a href={RELEASES_URL} target="_blank" rel="noreferrer">What's new</a></>}
+          </p>
+        </div>
+        {canUpdate ? (
+          <button className="btn btn-primary" onClick={() => void update()}>Update now</button>
+        ) : (
+          <button className="btn" disabled={checking || phase === "updating"} onClick={() => void check(true)}>
+            <RefreshCw size={14} className={checking ? "spin" : ""} aria-hidden="true" />
+            <span>Check for updates</span>
+          </button>
+        )}
+      </div>
+      <div className="setting-row">
+        <div className="setting-copy">
+          <strong id="setting-autoupdate-label">Check automatically</strong>
+          <p>Ask npm for the latest version when the dashboard opens. Nothing else is sent.</p>
+        </div>
+        <button
+          type="button"
+          className={`toggle ${autoCheck ? "on" : ""}`}
+          role="switch"
+          aria-labelledby="setting-autoupdate-label"
+          aria-checked={autoCheck}
+          onClick={() => onAutoCheckChange(!autoCheck)}
+        >
+          <span className="toggle-knob" />
+        </button>
+      </div>
+    </section>
+  );
+}

package/src/client/index.html

@@ -11,36 +11,27 @@
         stored === "dark" || stored === "light"
           ? stored
           : matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-      var savedPalette = null;
-      try { savedPalette = localStorage.getItem("token-larper-palette"); } catch {}
-      var palettes = ["pine", "slate", "ocean", "iris", "clay", "rose", "custom"];
-      var palette = palettes.includes(savedPalette) ? savedPalette : "pine";
-      document.documentElement.dataset.palette = palette;
-      if (palette === "custom") {
-        try {
-          var imported = JSON.parse(localStorage.getItem("token-larper-imported-theme") || "null");
-          var tokens = imported && imported[document.documentElement.dataset.theme];
-          var properties = [
-            "--bg", "--surface", "--surface-2", "--surface-3", "--border", "--border-strong",
-            "--text", "--text-2", "--text-3", "--accent", "--accent-ink", "--accent-soft", "--gold", "--focus",
-            "--warning-bg", "--warning-border", "--warning-text", "--error-bg", "--error-border", "--error-text",
-            "--series-1", "--series-2", "--series-3", "--series-4", "--series-5", "--series-6", "--series-7",
-            "--series-other", "--heat-0", "--heat-1", "--heat-2", "--heat-3", "--heat-4",
-          ];
-          properties.forEach(function (property) {
-            var value = tokens && tokens[property];
-            if (typeof value === "string" && value.length <= 180 && !/[;{}]|\bvar\s*\(|url\s*\(/i.test(value) && CSS.supports("color", value)) {
-              document.documentElement.style.setProperty(property, value);
+      // Style and resolved theme variables were saved by the app (src/client/themes.ts);
+      // applying them here, before first paint, avoids a flash of the default theme.
+      var root = document.documentElement;
+      var appearance = null;
+      try { appearance = JSON.parse(localStorage.getItem("token-larper-appearance") || "null"); } catch {}
+      var styles = ["grove", "terminal", "paper", "brutal", "soft", "mono"];
+      root.dataset.style = appearance && styles.indexOf(appearance.style) >= 0 ? appearance.style : "grove";
+      root.dataset.accent = "style";
+      try {
+        var vars = JSON.parse(localStorage.getItem("token-larper-theme-vars") || "null");
+        var current = vars && vars[root.dataset.theme];
+        if (current && typeof current === "object") {
+          Object.keys(current).forEach(function (name) {
+            var value = current[name];
+            if (/^--[a-z0-9-]+$/.test(name) && typeof value === "string" && value.length <= 180 && !/[;{}]|url\s*\(/i.test(value)) {
+              root.style.setProperty(name, value);
+              root.dataset.accent = "custom";
             }
           });
-          ["--radius", "--radius-sm"].forEach(function (property) {
-            var radius = tokens && tokens[property];
-            if (typeof radius === "string" && /^\d+(?:\.\d+)?(?:px|rem|em)$/.test(radius)) {
-              document.documentElement.style.setProperty(property, radius);
-            }
-          });
-        } catch {}
-      }
+        }
+      } catch {}
     </script>
     <meta name="theme-color" content="#f8f9f7" />
     <title>Token Larper — Usage overview</title>