@commonpub/layer 0.67.0 → 0.68.1

package/components/admin/theme/AdminThemeFamilyCard.vue

@@ -9,9 +9,10 @@
  * Stays presentational — all wiring (select / edit / duplicate / delete /
  * export) is emitted up so the page owns the state machine.
  */
+import { computed } from 'vue';
 import type { ThemeFamilyView } from '../../../types/theme';
 
-defineProps<{
+const props = defineProps<{
   family: ThemeFamilyView;
   active: boolean;
   saving: boolean;
@@ -25,6 +26,18 @@ const emit = defineEmits<{
   remove: [themeId: string];
 }>();
 
+/**
+ * The "primary" record of the family for edit/duplicate/export/delete. For a
+ * Studio light/dark PAIR the primary is the variant WITHOUT a `-light`/`-dark`
+ * suffix (the original slug); its sibling is the suffixed one. Targeting the
+ * primary fixes a bug where dark-primary pairs edited/deleted the wrong
+ * (auto-generated) record. Falls back to whichever variant exists.
+ */
+const primaryId = computed<string>(() => {
+  const ids = [props.family.light?.id, props.family.dark?.id].filter((x): x is string => Boolean(x));
+  return ids.find((id) => !/-(?:light|dark)$/.test(id)) ?? ids[0]!;
+});
+
 function variantBoxStyle(v: { bg: string; surface: string; accent: string; text: string; border: string }) {
   return {
     backgroundColor: v.bg,
@@ -102,7 +115,7 @@ function badge(family: ThemeFamilyView): { label: string; tone: 'builtin' | 'reg
           v-if="family.source === 'custom'"
           type="button"
           class="cpub-btn cpub-btn-sm"
-          @click="emit('edit', family.light?.id ?? family.dark!.id)"
+          @click="emit('edit', primaryId)"
         >
           <i class="fa-solid fa-pen-to-square" aria-hidden="true" /> Edit
         </button>
@@ -110,7 +123,7 @@ function badge(family: ThemeFamilyView): { label: string; tone: 'builtin' | 'reg
           type="button"
           class="cpub-btn cpub-btn-sm"
           :title="family.source === 'custom' ? 'Duplicate this theme' : 'Fork to a new editable custom theme'"
-          @click="emit('duplicate', family.light?.id ?? family.dark!.id)"
+          @click="emit('duplicate', primaryId)"
         >
           <i class="fa-solid fa-copy" aria-hidden="true" /> {{ family.source === 'custom' ? 'Duplicate' : 'Fork' }}
         </button>
@@ -118,7 +131,7 @@ function badge(family: ThemeFamilyView): { label: string; tone: 'builtin' | 'reg
           v-if="family.source === 'custom'"
           type="button"
           class="cpub-btn cpub-btn-sm"
-          @click="emit('exportTheme', family.light?.id ?? family.dark!.id)"
+          @click="emit('exportTheme', primaryId)"
         >
           <i class="fa-solid fa-file-export" aria-hidden="true" /> Export
         </button>
@@ -126,7 +139,7 @@ function badge(family: ThemeFamilyView): { label: string; tone: 'builtin' | 'reg
           v-if="family.source === 'custom'"
           type="button"
           class="cpub-btn cpub-btn-sm theme-family-action-danger"
-          @click="emit('remove', family.light?.id ?? family.dark!.id)"
+          @click="emit('remove', primaryId)"
         >
           <i class="fa-solid fa-trash" aria-hidden="true" /> Delete
         </button>

package/components/admin/theme/AdminThemePreviewPane.vue

@@ -20,8 +20,14 @@ const props = defineProps<{
   /** The base theme whose CSS file provides inherited defaults (via data-theme). */
   parentTheme: string;
   isDark: boolean;
+  /** Optional controlled preview mode. When provided, the Light/Dark toggle
+   *  emits `update:mode` and the parent owns the state (so it can swap the
+   *  previewed variant's tokens). Uncontrolled (internal) when omitted. */
+  mode?: 'light' | 'dark';
 }>();
 
+const emit = defineEmits<{ 'update:mode': ['light' | 'dark'] }>();
+
 interface SceneOption {
   id: 'gallery' | 'prose' | 'admin' | 'sheet';
   label: string;
@@ -37,7 +43,14 @@ const PREVIEW_SCENES: SceneOption[] = [
 ];
 
 const activeScene = ref<SceneOption['id']>('gallery');
-const previewMode = ref<'light' | 'dark'>(props.isDark ? 'dark' : 'light');
+const internalMode = ref<'light' | 'dark'>(props.isDark ? 'dark' : 'light');
+const previewMode = computed<'light' | 'dark'>({
+  get: () => props.mode ?? internalMode.value,
+  set: (v) => {
+    internalMode.value = v;
+    emit('update:mode', v);
+  },
+});
 
 /**
  * Map every parent-theme id to its family's light + dark variant. Mirrors

package/components/admin/theme/studio/AdminThemeStudio.vue

@@ -273,7 +273,7 @@ function finishWith(apply: boolean): void {
 
         <template v-else>
           <label class="cpub-studio-field">
-            <span class="cpub-studio-lbl">Mode</span>
+            <span class="cpub-studio-lbl">Default mode <span class="cpub-studio-hint">both are saved</span></span>
             <span class="cpub-studio-seg">
               <button type="button" :class="{ on: recipe.mode === 'light' }" @click="recipe.mode = 'light'">Light</button>
               <button type="button" :class="{ on: recipe.mode === 'dark' }" @click="recipe.mode = 'dark'">Dark</button>

package/composables/useTheme.ts

@@ -29,6 +29,7 @@ export function useTheme(): {
   const themeId = useState<string>('cpub-theme', () => 'base');
   const instanceDefault = useState<string>('cpub-instance-theme', () => 'base');
   const isDark = useState<boolean>('cpub-dark-mode', () => false);
+  const themePair = useState<{ lightAttr: string; darkAttr: string } | null>('cpub-theme-pair', () => null);
   const schemeCookie = useCookie('cpub-color-scheme', {
     maxAge: 31536000,
     path: '/',
@@ -44,9 +45,21 @@ export function useTheme(): {
       schemeCookie.value = dark ? 'dark' : 'light';
     }
 
+    // Custom light/dark PAIR: both variants' tokens are injected (scoped to
+    // their data-theme attr), so flip the attribute client-side for an instant
+    // switch — exactly like built-in families. (This is the fix for "the site
+    // light/dark toggle didn't switch a custom theme".)
+    if (themePair.value) {
+      const newTheme = dark ? themePair.value.darkAttr : themePair.value.lightAttr;
+      themeId.value = newTheme;
+      if (import.meta.client) {
+        document.documentElement.setAttribute('data-theme', newTheme);
+        $fetch('/api/profile/theme', { method: 'PUT', body: { themeId: newTheme } }).catch(() => {});
+      }
+      return;
+    }
+
     // Built-in family flip is purely client-side for snappy UX.
-    // Custom/registered themes need a server round-trip on next nav
-    // (the server reads the new cookie and picks the right pair).
     if (THEME_TO_FAMILY[instanceDefault.value]) {
       const family = THEME_TO_FAMILY[instanceDefault.value]!;
       const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
@@ -61,7 +74,8 @@ export function useTheme(): {
         }).catch(() => {});
       }
     } else if (import.meta.client) {
-      // Custom theme: just persist preference; server will pick the variant on next request
+      // Single custom / registered theme with no pair: persist preference only;
+      // the server picks any declared variant on the next request.
       $fetch('/api/profile/theme', {
         method: 'PUT',
         body: { themeId: instanceDefault.value },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.67.0",
+  "version": "0.68.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,15 +55,15 @@
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.20.0",
-    "@commonpub/editor": "0.7.11",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/schema": "0.37.0",
-    "@commonpub/protocol": "0.13.0",
-    "@commonpub/ui": "0.12.0",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/editor": "0.7.11",
     "@commonpub/server": "2.83.0",
+    "@commonpub/schema": "0.37.0",
     "@commonpub/theme-studio": "0.3.0",
-    "@commonpub/learning": "0.5.2"
+    "@commonpub/ui": "0.12.0",
+    "@commonpub/protocol": "0.13.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/theme/edit/[id].vue

@@ -156,6 +156,25 @@ function resetToken(key: string): void {
 
 const modifiedTotal = computed(() => Object.keys(draft.value.tokens).length);
 
+// --- Preview light/dark ------------------------------------------------
+// The preview pane's Light/Dark toggle is controlled here so a Studio theme
+// shows its ACTUAL light + dark variants (regenerated from the recipe per
+// mode) — not the primary variant's tokens in both positions. (Fixes "the
+// editor light/dark buttons don't do anything".)
+const previewMode = ref<'light' | 'dark'>('light');
+const previewTokens = computed<Record<string, string>>(() => {
+  if (!draft.value.recipe) return draft.value.tokens;
+  // The variant being edited (primary) shows the LIVE draft tokens (so hand
+  // tweaks appear); the other variant shows the recipe-derived sibling (what
+  // will be saved for it).
+  const primaryMode = draft.value.isDark ? 'dark' : 'light';
+  if (previewMode.value === primaryMode) return draft.value.tokens;
+  return recipeToTokens({ ...draft.value.recipe, mode: previewMode.value }).tokens;
+});
+const previewParent = computed<string>(() =>
+  draft.value.recipe ? (previewMode.value === 'dark' ? 'dark' : 'base') : draft.value.parentTheme,
+);
+
 // --- Studio (guided generator) ---------------------------------------
 
 /** Studio regenerated the whole token set — replace the draft's tokens. */
@@ -465,7 +484,10 @@ onBeforeUnmount(() => {
           </select>
         </label>
 
-        <label class="theme-editor-field theme-editor-field-toggle">
+        <!-- Mode pill only for hand-authored themes. Studio themes are a managed
+             light+dark pair — there's no single "mode" to pick, and the site's
+             Light/Dark toggle switches the pair for visitors. -->
+        <label v-if="!draft.recipe" class="theme-editor-field theme-editor-field-toggle">
           <span class="theme-editor-field-label">Mode</span>
           <div class="theme-editor-mode-pill" role="group">
             <button
@@ -483,7 +505,7 @@ onBeforeUnmount(() => {
           </div>
         </label>
 
-        <label v-if="pairCandidates.length" class="theme-editor-field">
+        <label v-if="!draft.recipe && pairCandidates.length" class="theme-editor-field">
           <span class="theme-editor-field-label">Pair with</span>
           <select v-model="draft.pairId" class="theme-editor-input" @change="onMetaChange">
             <option :value="undefined">- none -</option>
@@ -566,7 +588,9 @@ onBeforeUnmount(() => {
       <section v-else class="theme-editor-tokens" aria-label="Token editor">
         <p v-if="draft.recipe" class="theme-editor-studio-hint">
           <i class="fa-solid fa-circle-info" aria-hidden="true" />
-          This theme was built with Studio. Re-opening Studio and changing it overwrites manual token tweaks here.
+          This theme is a light + dark pair (one card in the picker). Visitors switch between them
+          with the site's Light/Dark toggle. Re-opening Studio and changing it overwrites manual
+          token tweaks here.
         </p>
         <AdminThemeTokenGroup
           v-for="group in TOKEN_GROUP_ORDER"
@@ -585,9 +609,11 @@ onBeforeUnmount(() => {
 
       <AdminThemePreviewPane
         class="theme-editor-preview"
-        :tokens="draft.tokens"
-        :parent-theme="draft.parentTheme"
-        :is-dark="draft.isDark"
+        :tokens="previewTokens"
+        :parent-theme="previewParent"
+        :is-dark="previewMode === 'dark'"
+        :mode="previewMode"
+        @update:mode="previewMode = $event"
       />
     </div>
 

package/pages/admin/theme/index.vue

@@ -146,14 +146,25 @@ async function duplicateTheme(themeId: string): Promise<void> {
 async function removeTheme(themeId: string): Promise<void> {
   const customId = parseCustomThemeId(themeId);
   if (!customId) return;
-  if (!confirm(`Delete custom theme "${customId}"? This cannot be undone.`)) return;
+  // Delete the whole pair: the theme + its linked light/dark sibling, so a
+  // Studio pair (one card) goes away cleanly instead of orphaning one record.
+  const src = themesApi.data.value?.custom.find((t) => t.id === customId);
+  const ids = [customId];
+  if (src?.pairId && src.pairId !== customId) ids.push(src.pairId);
+  const label = ids.length > 1 ? `theme "${customId}" and its light/dark pair` : `custom theme "${customId}"`;
+  if (!confirm(`Delete ${label}? This cannot be undone.`)) return;
   saving.value = true;
   try {
-    const res = await $fetch<{ ok: true; resetDefault: boolean }>(`/api/admin/themes/${customId}`, {
-      method: 'DELETE',
-    });
+    let resetDefault = false;
+    for (const id of ids) {
+      const res = await ($fetch as (u: string, o: Record<string, unknown>) => Promise<{ resetDefault?: boolean }>)(
+        `/api/admin/themes/${id}`,
+        { method: 'DELETE' },
+      );
+      if (res?.resetDefault) resetDefault = true;
+    }
     await Promise.all([themesApi.refresh(), refreshSettings()]);
-    notify(res.resetDefault ? 'Theme deleted, default reset to Classic' : 'Theme deleted', 'success');
+    notify(resetDefault ? 'Theme deleted, default reset to Classic' : 'Theme deleted', 'success');
   } catch (err) {
     notify(err instanceof Error ? err.message : 'Failed to delete', 'error');
   } finally {

package/plugins/theme.ts

@@ -11,6 +11,9 @@ export default defineNuxtPlugin(() => {
   const isDark = useState<boolean>('cpub-dark-mode', () => false);
   const themeInlineCss = useState<string>('cpub-theme-inline-css', () => '');
   const themeFontHref = useState<string>('cpub-theme-font-href', () => '');
+  // Light/dark attrs of a custom pair — lets the user toggle flip data-theme
+  // instantly client-side (both variants' tokens are injected below).
+  const themePair = useState<{ lightAttr: string; darkAttr: string } | null>('cpub-theme-pair', () => null);
 
   if (import.meta.server) {
     const event = useRequestEvent();
@@ -20,6 +23,7 @@ export default defineNuxtPlugin(() => {
       isDark.value = event.context.isDarkMode ?? false;
       themeInlineCss.value = event.context.themeInlineCss ?? '';
       themeFontHref.value = event.context.themeFontHref ?? '';
+      themePair.value = event.context.themePair ?? null;
     }
   }
 

package/server/middleware/theme.ts

@@ -16,6 +16,8 @@ declare module 'h3' {
     themeInlineCss: string;
     /** Google Fonts stylesheet URL for the active custom theme's fonts. Empty if none. */
     themeFontHref: string;
+    /** Light/dark data-theme attrs of a custom pair (for the client toggle). */
+    themePair: { lightAttr: string; darkAttr: string } | null;
   }
 }
 
@@ -40,14 +42,25 @@ export default defineEventHandler(async (event) => {
   event.context.resolvedTheme = ctx.resolvedTheme;
   event.context.isDarkMode = ctx.isDark;
 
-  // Build the inline style block. We scope tokens to `:root` so they
-  // override the loaded theme CSS but lose to inline element styles.
-  // Token overrides are added last (already merged into injectedTokens
-  // in resolveThemeContext) so they win.
-  event.context.themeInlineCss = Object.keys(ctx.injectedTokens).length > 0
-    ? tokensToCss(':root', ctx.injectedTokens)
-    : '';
+  // Build the inline style block.
+  //  - Custom theme(s): one block per variant, scoped to its `[data-theme]`
+  //    attr, with instance overrides merged in (so overrides win + apply in
+  //    every mode). A light/dark PAIR injects BOTH, so the client toggle can
+  //    flip `data-theme` and switch instantly — no server round-trip.
+  //  - Built-in / registered: only instance overrides at `:root` (their CSS
+  //    files already handle light/dark).
+  if (ctx.themeVariants.length > 0) {
+    event.context.themeInlineCss = ctx.themeVariants
+      .map((v) => tokensToCss(`:root[data-theme="${v.attr}"]`, { ...v.tokens, ...ctx.overrides }))
+      .filter(Boolean)
+      .join('\n');
+  } else {
+    event.context.themeInlineCss = Object.keys(ctx.overrides).length > 0
+      ? tokensToCss(':root', ctx.overrides)
+      : '';
+  }
 
   // Google Fonts for the active custom theme (CSP already allows googleapis).
   event.context.themeFontHref = ctx.fontHref;
+  event.context.themePair = ctx.pair;
 });

package/server/utils/instanceTheme.ts

@@ -104,9 +104,18 @@ export async function resolveThemeContext(
   instanceTheme: string;
   /** Whether the resolved theme is dark */
   isDark: boolean;
-  /** Token map to inject as inline :root style (custom theme tokens + overrides). Empty when not needed. */
-  injectedTokens: Record<string, string>;
-  /** Google Fonts stylesheet URL for the active custom theme's fonts. Empty when none. */
+  /**
+   * Custom-theme token blocks to inject, one per variant, each scoped to its
+   * own `[data-theme]` selector. For a light/dark PAIR this is BOTH variants,
+   * so the client can flip `data-theme` and switch instantly (no round-trip).
+   * Empty for built-in / registered themes (their CSS files handle modes).
+   */
+  themeVariants: Array<{ attr: string; tokens: Record<string, string> }>;
+  /** Instance-wide token overrides (apply in every mode). */
+  overrides: Record<string, string>;
+  /** Light/dark attrs of a custom pair, so the client toggle can flip instantly. */
+  pair: { lightAttr: string; darkAttr: string } | null;
+  /** Google Fonts stylesheet URL for the active custom theme(s) fonts. Empty when none. */
   fontHref: string;
 }> {
   const state = await getState();
@@ -114,61 +123,52 @@ export async function resolveThemeContext(
   // Validate the admin's choice — fall back to base if missing/unknown
   const admin = isKnownThemeId(state.defaultTheme, state, registeredIds) ? state.defaultTheme : 'base';
 
-  // Light/dark resolution. We only flip variants for built-in family pairs;
-  // custom themes use their declared pair if present, otherwise stay put.
+  const activeCustom = state.customByAttr.get(admin);
   let resolved = admin;
-  if (userScheme !== null) {
-    // Built-in family flip
-    if (VALID_THEME_IDS.has(admin)) {
+  let isDark = false;
+  let themeVariants: Array<{ attr: string; tokens: Record<string, string> }> = [];
+  let pair: { lightAttr: string; darkAttr: string } | null = null;
+  let fontHref = '';
+
+  if (activeCustom) {
+    // Gather the pair members (the default + its sibling, if both exist).
+    const members: Array<{ attr: string; rec: CustomThemeRecord }> = [{ attr: admin, rec: activeCustom }];
+    if (activeCustom.pairId) {
+      const sibAttr = `cpub-custom-${activeCustom.pairId}`;
+      const sib = state.customByAttr.get(sibAttr);
+      if (sib) members.push({ attr: sibAttr, rec: sib });
+    }
+    themeVariants = members.map((m) => ({ attr: m.attr, tokens: m.rec.tokens }));
+    const lightM = members.find((m) => !m.rec.isDark);
+    const darkM = members.find((m) => m.rec.isDark);
+    if (members.length === 2 && lightM && darkM) {
+      pair = { lightAttr: lightM.attr, darkAttr: darkM.attr };
+    }
+    // <html data-theme> = the variant matching the user's scheme (else the default).
+    if (userScheme === 'dark' && darkM) resolved = darkM.attr;
+    else if (userScheme === 'light' && lightM) resolved = lightM.attr;
+    else resolved = admin;
+    isDark = state.customByAttr.get(resolved)?.isDark ?? activeCustom.isDark;
+    // Load every variant's fonts so a client-side flip already has them.
+    const allFonts = [...new Set(members.flatMap((m) => m.rec.fonts ?? []))];
+    fontHref = allFonts.length ? googleHref(allFonts) : '';
+  } else {
+    // Built-in / registered: flip via the family's CSS variants on round-trip.
+    if (userScheme !== null && VALID_THEME_IDS.has(admin)) {
       const family = THEME_TO_FAMILY[admin] ?? 'classic';
       const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
       resolved = userScheme === 'dark' ? variants.dark : variants.light;
-    } else {
-      // Custom theme — use pairId if defined
-      const custom = state.customByAttr.get(admin);
-      if (custom?.pairId) {
-        const pairAttr = `cpub-custom-${custom.pairId}`;
-        const pair = state.customByAttr.get(pairAttr);
-        if (pair && pair.isDark === (userScheme === 'dark')) {
-          resolved = pairAttr;
-        } else if (custom.isDark === (userScheme === 'dark')) {
-          resolved = admin;
-        }
-      }
-      // For registered themes (no pair info available server-side), we leave it alone
-      // — the layer-app author can declare a pair via the future RegisteredTheme.pairId
     }
-  }
-
-  // isDark detection
-  let isDark = false;
-  if (VALID_THEME_IDS.has(resolved)) {
     isDark = IS_DARK[resolved] ?? false;
-  } else {
-    const custom = state.customByAttr.get(resolved);
-    if (custom) isDark = custom.isDark;
   }
 
-  // Tokens to inject inline. Built-in themes don't need injection (their
-  // CSS files are already loaded). Custom themes always inject. Token
-  // overrides apply on top of whatever theme is active.
-  const injectedTokens: Record<string, string> = {};
-  const activeCustom = state.customByAttr.get(resolved);
-  if (activeCustom) {
-    Object.assign(injectedTokens, activeCustom.tokens);
-  }
-  // Instance overrides always last so they win
-  Object.assign(injectedTokens, state.tokenOverrides);
-
-  // Google Fonts for the active custom theme (theme-studio sets `fonts`).
-  const fontHref =
-    activeCustom?.fonts && activeCustom.fonts.length > 0 ? googleHref(activeCustom.fonts) : '';
-
   return {
     resolvedTheme: resolved,
     instanceTheme: admin,
     isDark,
-    injectedTokens,
+    themeVariants,
+    overrides: { ...state.tokenOverrides },
+    pair,
     fontHref,
   };
 }