@commonpub/layer 0.22.0 → 0.22.1

package/components/admin/theme/AdminThemePreviewPane.vue

@@ -38,6 +38,37 @@ const PREVIEW_SCENES: SceneOption[] = [
 const activeScene = ref<SceneOption['id']>('gallery');
 const previewMode = ref<'light' | 'dark'>(props.isDark ? 'dark' : 'light');
 
+/**
+ * Map every parent-theme id to its family's light + dark variant. Mirrors
+ * `layers/base/utils/themeConfig.ts` THEME_TO_FAMILY + FAMILY_VARIANTS,
+ * inlined here so the preview pane doesn't need to import the SSR-side
+ * utils. Custom-theme parents (`cpub-custom-*`) and any unknown id fall
+ * back to the classic family — the user's tokens override on top regardless.
+ */
+const FAMILY_VARIANT_OF: Record<string, { light: string; dark: string }> = {
+  base: { light: 'base', dark: 'dark' },
+  dark: { light: 'base', dark: 'dark' },
+  agora: { light: 'agora', dark: 'agora-dark' },
+  'agora-dark': { light: 'agora', dark: 'agora-dark' },
+  generics: { light: 'generics', dark: 'generics' },
+};
+
+/**
+ * The actual `data-theme` attribute applied to the preview surface,
+ * resolved from `parentTheme` + `previewMode`. Returns `undefined` for the
+ * base/light case (no attribute = `:root` rules apply natively, matching
+ * the convention used by `applyThemeToElement` elsewhere).
+ *
+ * **Bug fix from 0.22.0**: previously `:data-theme="parentTheme"` was
+ * hardcoded, so the Light/Dark toggle updated a ref but never re-rendered
+ * the preview. Now the toggle actually swaps the rendered theme.
+ */
+const effectiveDataTheme = computed<string | undefined>(() => {
+  const variants = FAMILY_VARIANT_OF[props.parentTheme] ?? FAMILY_VARIANT_OF.base!;
+  const v = previewMode.value === 'dark' ? variants.dark : variants.light;
+  return v === 'base' ? undefined : v;
+});
+
 /**
  * Build the inline style string scoped to the preview surface. We apply
  * tokens to the wrapper element only — that scopes the in-progress theme
@@ -102,7 +133,7 @@ const previewStyle = computed(() => {
 
     <div
       class="theme-preview-surface"
-      :data-theme="parentTheme"
+      :data-theme="effectiveDataTheme"
       :style="previewStyle"
       :data-preview-mode="previewMode"
     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/editor": "0.7.11",
+    "@commonpub/auth": "0.6.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/learning": "0.5.2",
     "@commonpub/config": "0.14.0",
-    "@commonpub/server": "2.56.0",
-    "@commonpub/auth": "0.6.0",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/schema": "0.17.0",
     "@commonpub/protocol": "0.12.0",
     "@commonpub/ui": "0.9.0",
-    "@commonpub/explainer": "0.7.15"
+    "@commonpub/server": "2.56.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -149,7 +149,13 @@ const pairCandidates = computed(() =>
 
 // --- Save / cancel / export -----------------------------------------
 
-async function save(): Promise<void> {
+/**
+ * Save the draft. If `apply` is true, ALSO set this theme as the
+ * instance default in the same await chain — must happen BEFORE the
+ * create-mode router.replace, otherwise the navigation could unmount
+ * the component mid-PUT and lose the apply.
+ */
+async function save({ apply = false }: { apply?: boolean } = {}): Promise<void> {
   saving.value = true;
   error.value = null;
   try {
@@ -163,15 +169,14 @@ async function save(): Promise<void> {
       parentTheme: draft.value.parentTheme,
       tokens: draft.value.tokens,
     };
+
+    let savedId: string;
     if (isCreating) {
       const created = await $fetch('/api/admin/themes', {
         method: 'POST',
         body: payload,
       });
-      notify('Theme created', 'success');
-      dirty.value = false;
-      await themesApi.refresh();
-      router.replace(`/admin/theme/edit/${(created as { id: string }).id}`);
+      savedId = (created as { id: string }).id;
     } else {
       // Cast: Nuxt's typed-route inference for dynamic URLs picks the
       // narrowest method overload (GET) — same workaround used in
@@ -180,9 +185,25 @@ async function save(): Promise<void> {
         `/api/admin/themes/${draft.value.id}`,
         { method: 'PUT', body: payload },
       );
-      notify('Saved', 'success');
-      dirty.value = false;
-      await themesApi.refresh();
+      savedId = draft.value.id;
+    }
+
+    // Apply BEFORE refresh/navigation so the navigate doesn't unmount us
+    // mid-PUT (would lose the apply + the success toast).
+    if (apply) {
+      await $fetch('/api/admin/settings', {
+        method: 'PUT',
+        body: { key: 'theme.default', value: `cpub-custom-${savedId}` },
+      });
+    }
+
+    notify(apply ? 'Saved & applied' : (isCreating ? 'Theme created' : 'Saved'), 'success');
+    dirty.value = false;
+    await themesApi.refresh();
+
+    // Navigate LAST so all the awaits above have observable effects.
+    if (isCreating) {
+      router.replace(`/admin/theme/edit/${savedId}`);
     }
   } catch (err) {
     const msg = err instanceof Error ? err.message : 'Save failed';
@@ -194,13 +215,7 @@ async function save(): Promise<void> {
 }
 
 async function applyAndSave(): Promise<void> {
-  await save();
-  if (error.value) return;
-  await $fetch('/api/admin/settings', {
-    method: 'PUT',
-    body: { key: 'theme.default', value: `cpub-custom-${draft.value.id}` },
-  });
-  notify('Saved and applied instance-wide', 'success');
+  await save({ apply: true });
 }
 
 function exportTheme(): void {
@@ -248,9 +263,14 @@ onBeforeUnmount(() => {
 <template>
   <div class="theme-editor">
     <header class="theme-editor-toolbar">
-      <button class="cpub-btn cpub-btn-sm theme-editor-back" @click="cancel">
+      <button
+        class="cpub-btn cpub-btn-sm theme-editor-back"
+        :title="dirty ? 'You have unsaved changes' : 'Back to themes list'"
+        @click="cancel"
+      >
         <i class="fa-solid fa-arrow-left" aria-hidden="true" />
         <span>Themes</span>
+        <span v-if="dirty" class="theme-editor-dirty-dot" aria-label="unsaved changes"></span>
       </button>
 
       <div class="theme-editor-meta">
@@ -329,11 +349,13 @@ onBeforeUnmount(() => {
         <button class="cpub-btn cpub-btn-sm" @click="exportTheme" title="Download .cpub-theme.json">
           <i class="fa-solid fa-file-export" aria-hidden="true" /> Export
         </button>
-        <button class="cpub-btn cpub-btn-sm" :disabled="saving || !dirty" @click="save">
-          <i class="fa-solid fa-floppy-disk" aria-hidden="true" /> Save
+        <button class="cpub-btn cpub-btn-sm" :disabled="saving || !dirty" @click="() => save()">
+          <i :class="['fa-solid', saving ? 'fa-circle-notch fa-spin' : 'fa-floppy-disk']" aria-hidden="true" />
+          {{ saving ? 'Saving…' : 'Save' }}
         </button>
         <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="saving" @click="applyAndSave">
-          <i class="fa-solid fa-rocket" aria-hidden="true" /> Save &amp; apply
+          <i :class="['fa-solid', saving ? 'fa-circle-notch fa-spin' : 'fa-rocket']" aria-hidden="true" />
+          {{ saving ? 'Applying…' : 'Save & apply' }}
         </button>
       </div>
     </header>
@@ -406,7 +428,33 @@ onBeforeUnmount(() => {
   flex-wrap: wrap;
 }
 
-.theme-editor-back { flex-shrink: 0; }
+.theme-editor-back {
+  flex-shrink: 0;
+  position: relative;
+}
+
+.theme-editor-dirty-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: var(--accent);
+  border-radius: var(--radius-full);
+  margin-left: 4px;
+  /* Subtle pulse so it draws the eye without being noisy */
+  animation: theme-editor-dirty-pulse 2s ease-in-out infinite;
+}
+
+@keyframes theme-editor-dirty-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .theme-editor-dirty-dot { animation: none; }
+}
+
+.theme-editor-input-name {
+  font-weight: var(--font-weight-semibold);
+}
 
 .theme-editor-meta {
   display: flex;

package/pages/admin/theme/index.vue

@@ -244,6 +244,28 @@ function recheckDiscovery(): void {
   discovery.value = detectAppliedOverrides();
 }
 
+/**
+ * Only show the "your site has a custom theme" banner when the detected
+ * overrides are LIKELY from a CSS file shipped by the layer app — NOT from
+ * a custom theme the admin has already saved (which would also appear as
+ * :root token overrides because the SSR middleware injects them there).
+ *
+ * Gating rules:
+ *   - hide when the active default is already a cpub-custom-* theme
+ *   - hide when instance-wide token overrides are set (those tokens explain
+ *     the diff; the banner would confuse the admin into re-capturing them)
+ *   - hide when no overrides were detected
+ *
+ * If admins want to re-capture from a fresh :root state, they can revert
+ * to the base theme, clear overrides, then the banner will reappear.
+ */
+const showDiscoveryBanner = computed<boolean>(() => {
+  if (discovery.value.count === 0) return false;
+  if (instanceDefault.value.startsWith('cpub-custom-')) return false;
+  if (Object.keys(initialOverrides.value).length > 0) return false;
+  return true;
+});
+
 // --- Token overrides (legacy / quick tweaks) ---
 // State + UI live in <AdminThemeOverridesPanel>; this page only persists
 // what the panel emits.
@@ -304,9 +326,12 @@ async function saveOverrides(overrides: Record<string, string>): Promise<void> {
       {{ toast.msg }}
     </div>
 
-    <!-- Discovery banner -->
+    <!-- Discovery banner — only when the overrides are from CSS (not from
+         a custom theme this admin already saved or instance-wide overrides).
+         Without this gate, the banner would re-appear after capture since
+         the custom theme it created now appears as a token override on :root. -->
     <section
-      v-if="discovery.count > 0"
+      v-if="showDiscoveryBanner"
       class="admin-theme-discovery"
       role="region"
       aria-label="Discovered theme tokens"