@commonpub/layer 0.68.0 → 0.68.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.68.0",
+  "version": "0.68.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -56,14 +56,14 @@
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.20.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/editor": "0.7.11",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/protocol": "0.13.0",
     "@commonpub/learning": "0.5.2",
     "@commonpub/schema": "0.37.0",
-    "@commonpub/protocol": "0.13.0",
     "@commonpub/server": "2.83.0",
-    "@commonpub/ui": "0.12.0",
-    "@commonpub/theme-studio": "0.3.0"
+    "@commonpub/theme-studio": "0.3.0",
+    "@commonpub/ui": "0.12.1"
   },
   "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. */
@@ -590,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/theme/base.css

@@ -300,9 +300,35 @@ body {
 *::before,
 *::after {
   box-sizing: border-box;
+}
+
+/* Surface radius. Real UI surfaces (buttons, cards, inputs, tags, panels)
+ * inherit the theme's --radius. Structural, media, and decorative elements are
+ * reset to 0 below so a rounded theme (e.g. Stoa, --radius:12px) does NOT put
+ * radii on line breaks, dividers, rules, icons, images, table cells, or
+ * pseudo-element decorations — the "line breaks carry rounded corners" bug.
+ * (Elements that genuinely want rounding set it explicitly, e.g. avatars use
+ * --radius-full; an explicit class-level border-radius outranks these resets.) */
+* {
   border-radius: var(--radius);
 }
 
+hr,
+svg,
+img,
+picture,
+video,
+canvas,
+iframe,
+table, thead, tbody, tfoot, tr, td, th, caption, col, colgroup,
+::before,
+::after,
+::marker,
+::placeholder,
+.cpub-divider {
+  border-radius: 0;
+}
+
 /* === ACCESSIBILITY === */
 
 /* Skip-to-content link */