@commonpub/layer 0.21.22 → 0.22.1

package/components/admin/theme/AdminThemeTokenInput.vue

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+/**
+ * One token row in the editor. Picks the input control based on the token
+ * spec's `kind` and emits updates upward. Shows:
+ *   • token name (mono)
+ *   • description (faint, on its own line)
+ *   • the appropriate input
+ *   • a "reset to default" button when the value differs
+ *
+ * No prop drilling, no internal state — this is a pure controlled component.
+ */
+import type { TokenSpec } from '@commonpub/ui';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  spec: TokenSpec;
+  value: string;
+  /** Resolved value (after CSS resolution) for color preview when `value` is a var()
+   *  or rgba expression. Optional — falls back to `value`. */
+  resolvedValue?: string;
+}>();
+
+const emit = defineEmits<{
+  update: [value: string];
+  reset: [];
+}>();
+
+const isModified = computed(() => props.value !== props.spec.default && props.value !== '');
+
+/** Returns a hex/rgb color that <input type="color"> understands; null if it can't. */
+const colorPickerValue = computed<string | null>(() => {
+  const v = (props.value || props.resolvedValue || props.spec.default).trim();
+  if (/^#[0-9a-f]{3}$/i.test(v)) {
+    // Expand 3-digit hex to 6-digit
+    return '#' + v.slice(1).split('').map((c) => c + c).join('');
+  }
+  if (/^#[0-9a-f]{6}$/i.test(v)) return v.toLowerCase();
+  // rgb/rgba: extract first three numbers
+  const m = v.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (m) {
+    const hex = '#' + [m[1], m[2], m[3]].map((n) => Number(n).toString(16).padStart(2, '0')).join('');
+    return hex;
+  }
+  return null;
+});
+
+function onColorPick(e: Event): void {
+  const next = (e.target as HTMLInputElement).value;
+  emit('update', next);
+}
+
+function onTextChange(e: Event): void {
+  emit('update', (e.target as HTMLInputElement | HTMLSelectElement).value);
+}
+
+// Number tokens (lengths) split into magnitude + unit for nicer editing
+const NUMBER_UNITS = ['rem', 'px', 'em', '%', 'vh', 'vw', 'ch'] as const;
+type LengthUnit = typeof NUMBER_UNITS[number] | '';
+const lengthParts = computed<{ num: string; unit: LengthUnit }>(() => {
+  const v = (props.value || props.spec.default).trim();
+  const m = v.match(/^(-?\d*\.?\d+)\s*(rem|px|em|%|vh|vw|ch)?$/);
+  if (m) return { num: m[1] ?? '', unit: (m[2] ?? '') as LengthUnit };
+  return { num: '', unit: '' };
+});
+
+function commitLengthParts(num: string, unit: LengthUnit): void {
+  if (num === '') return;
+  emit('update', unit === '' ? num : `${num}${unit}`);
+}
+
+// Shadow tokens — exposed as raw string editing (composer is future work)
+// Font weights — restricted dropdown
+const WEIGHTS = ['100', '200', '300', '400', '500', '600', '700', '800', '900'];
+</script>
+
+<template>
+  <div class="token-row" :class="{ 'is-modified': isModified }">
+    <div class="token-row-head">
+      <code class="token-name">--{{ spec.key }}</code>
+      <button
+        v-if="isModified"
+        type="button"
+        class="token-reset"
+        :title="`Reset to ${spec.default}`"
+        @click="emit('reset')"
+      >
+        <i class="fa-solid fa-rotate-left" aria-hidden="true" />
+      </button>
+    </div>
+
+    <p v-if="spec.description" class="token-desc">{{ spec.description }}</p>
+
+    <!-- COLOR -->
+    <div v-if="spec.kind === 'color'" class="token-input-color">
+      <input
+        v-if="colorPickerValue"
+        type="color"
+        class="token-color-swatch"
+        :value="colorPickerValue"
+        :aria-label="`${spec.key} color`"
+        @input="onColorPick"
+      />
+      <div
+        v-else
+        class="token-color-swatch-fallback"
+        :style="{ background: value || spec.default }"
+        :title="value || spec.default"
+        aria-hidden="true"
+      />
+      <input
+        class="token-input"
+        type="text"
+        :value="value"
+        :placeholder="spec.default"
+        @input="onTextChange"
+      />
+    </div>
+
+    <!-- LENGTH -->
+    <div v-else-if="spec.kind === 'length'" class="token-input-length">
+      <input
+        class="token-input token-input-num"
+        type="text"
+        inputmode="decimal"
+        :value="lengthParts.num"
+        :placeholder="spec.default"
+        @change="(e) => commitLengthParts((e.target as HTMLInputElement).value, lengthParts.unit)"
+      />
+      <select
+        class="token-input token-input-unit"
+        :value="lengthParts.unit"
+        @change="(e) => commitLengthParts(lengthParts.num, (e.target as HTMLSelectElement).value as never)"
+      >
+        <option v-for="u in NUMBER_UNITS" :key="u" :value="u">{{ u }}</option>
+        <option value="">—</option>
+      </select>
+      <input
+        class="token-input token-input-raw"
+        type="text"
+        :value="value"
+        :placeholder="spec.default"
+        title="Or enter raw CSS"
+        @change="onTextChange"
+      />
+    </div>
+
+    <!-- NUMBER (unitless: weight, z-index, leading) -->
+    <input
+      v-else-if="spec.kind === 'number'"
+      class="token-input"
+      type="text"
+      inputmode="decimal"
+      :value="value"
+      :placeholder="spec.default"
+      @input="onTextChange"
+    />
+
+    <!-- FONT WEIGHT -->
+    <select
+      v-else-if="spec.kind === 'font-weight'"
+      class="token-input"
+      :value="value || spec.default"
+      @change="onTextChange"
+    >
+      <option v-for="w in WEIGHTS" :key="w" :value="w">{{ w }}</option>
+    </select>
+
+    <!-- FONT FAMILY -->
+    <input
+      v-else-if="spec.kind === 'font-family'"
+      class="token-input token-input-font"
+      type="text"
+      :value="value"
+      :placeholder="spec.default"
+      :style="{ fontFamily: value || spec.default }"
+      @input="onTextChange"
+    />
+
+    <!-- SHADOW / TRANSITION / STRING — raw text -->
+    <input
+      v-else
+      class="token-input token-input-mono"
+      type="text"
+      :value="value"
+      :placeholder="spec.default"
+      @input="onTextChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.token-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: var(--border-width-thin) solid var(--border2);
+}
+.token-row:last-child { border-bottom: 0; }
+.token-row.is-modified { background: var(--accent-bg); }
+
+.token-row-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.token-name {
+  flex: 1;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text);
+  font-weight: var(--font-weight-medium);
+}
+
+.token-reset {
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: var(--border-width-thin) solid var(--border2);
+  color: var(--text-dim);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  border-radius: 0;
+}
+.token-reset:hover { color: var(--accent); border-color: var(--accent); }
+
+.token-desc {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  margin: 0;
+  line-height: var(--leading-snug);
+}
+
+.token-input {
+  background: var(--surface2);
+  color: var(--text);
+  border: var(--border-width-thin) solid var(--border2);
+  padding: 6px 8px;
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  width: 100%;
+}
+.token-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
+
+.token-input-color { display: flex; align-items: center; gap: var(--space-2); }
+.token-color-swatch {
+  width: 36px;
+  height: 30px;
+  border: var(--border-width-thin) solid var(--border2);
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.token-color-swatch-fallback {
+  width: 36px;
+  height: 30px;
+  border: var(--border-width-thin) solid var(--border2);
+  flex-shrink: 0;
+  background-image:
+    linear-gradient(45deg, var(--border2) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--border2) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--border2) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--border2) 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+}
+
+.token-input-length { display: grid; grid-template-columns: 1fr 70px; gap: 4px; }
+.token-input-length .token-input-raw { grid-column: 1 / -1; font-size: var(--text-xs); }
+
+.token-input-font { font-size: var(--text-sm); }
+.token-input-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
+</style>

package/composables/useTheme.ts

@@ -10,6 +10,11 @@ import { THEME_TO_FAMILY, FAMILY_VARIANTS } from '../utils/themeConfig';
  *
  * The dark mode preference cookie (`cpub-color-scheme`) is only persisted
  * when the user has accepted functional cookies via the consent banner.
+ *
+ * Custom themes (`cpub-custom-*`) and code-registered themes pass through —
+ * the user's cookie toggle is recorded but the server picks the actual variant
+ * using the custom theme's `pairId` (if declared). For built-in family pairs,
+ * the variant flip happens client-side immediately for snappy UX.
  */
 export function useTheme(): {
   /** Current active theme ID (resolved from instance default + dark mode) */
@@ -39,23 +44,28 @@ export function useTheme(): {
       schemeCookie.value = dark ? 'dark' : 'light';
     }
 
-    // Resolve the correct variant for this family + mode
-    const family = THEME_TO_FAMILY[instanceDefault.value] ?? 'classic';
-    const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
-    const newTheme = dark ? variants.dark : variants.light;
-
-    themeId.value = newTheme;
-
-    if (import.meta.client) {
-      applyThemeToElement(document.documentElement, newTheme);
+    // 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!;
+      const newTheme = dark ? variants.dark : variants.light;
+      themeId.value = newTheme;
 
-      // Persist to DB for cross-device sync (fire-and-forget, cookie is primary)
+      if (import.meta.client) {
+        applyThemeToElement(document.documentElement, newTheme);
+        $fetch('/api/profile/theme', {
+          method: 'PUT',
+          body: { themeId: newTheme },
+        }).catch(() => {});
+      }
+    } else if (import.meta.client) {
+      // Custom theme: just persist preference; server will pick the variant on next request
       $fetch('/api/profile/theme', {
         method: 'PUT',
-        body: { themeId: newTheme },
-      }).catch(() => {
-        // Not logged in or network error — cookie preference is sufficient
-      });
+        body: { themeId: instanceDefault.value },
+      }).catch(() => {});
     }
   }
 

package/composables/useThemeAdmin.ts

@@ -0,0 +1,167 @@
+/**
+ * Shared client-side state for the admin theme system.
+ *
+ * Singleton — both the list page (`/admin/theme`) and the editor
+ * (`/admin/theme/edit/[id]`) read the same `data`/`families` refs so
+ * a save in one place propagates to the other without refetching.
+ *
+ * Discovery helpers live in `utils/themeDiscovery.ts`; import/export
+ * in `utils/themeIO.ts`; id helpers in `utils/themeIds.ts`; types in
+ * `types/theme.ts`. This file orchestrates them into one composable.
+ */
+import { computed, ref } from 'vue';
+import { BUILT_IN_THEMES, previewFromTokens } from '@commonpub/ui';
+import type { CustomThemeRecord, ThemesPayload, ThemeFamilyView } from '../types/theme';
+
+// ---- Family display metadata for built-in themes ------------------------
+
+const BUILT_IN_FAMILY_META: Record<string, { name: string; description: string }> = {
+  classic: { name: 'Classic', description: 'Sharp corners, offset shadows, blue accent — the original CommonPub look' },
+  agora: { name: 'Agora', description: 'Warm parchment tones, green accent, serif display font — institutional warmth' },
+  generics: { name: 'Generics', description: 'Minimal dark aesthetic with soft glow shadows' },
+};
+
+const BUILT_IN_PREVIEWS: Record<string, { bg: string; surface: string; accent: string; text: string; border: string }> = {
+  base: { bg: '#fafaf9', surface: '#ffffff', accent: '#5b9cf6', text: '#1a1a1a', border: '#1a1a1a' },
+  dark: { bg: '#111111', surface: '#1a1a1a', accent: '#5b9cf6', text: '#e5e5e3', border: '#444440' },
+  generics: { bg: '#0c0c0b', surface: '#141413', accent: '#5b9cf6', text: '#d8d5cf', border: '#272725' },
+  agora: { bg: '#f7f4ed', surface: '#faf8f3', accent: '#3d8b5e', text: '#1a1a1a', border: '#1a1a1a' },
+  'agora-dark': { bg: '#0d1a12', surface: '#141f17', accent: '#4aa06e', text: '#e8e8e2', border: '#3a4f40' },
+};
+
+// ---- Singleton state ----------------------------------------------------
+
+const data = ref<ThemesPayload | null>(null);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+async function refresh(): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  try {
+    data.value = await $fetch<ThemesPayload>('/api/admin/themes');
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load themes';
+  } finally {
+    loading.value = false;
+  }
+}
+
+// ---- Family view-model builder ------------------------------------------
+
+/**
+ * Merge built-in + registered + custom themes into one family-grouped
+ * list. The same family slug across sources collapses into a single
+ * entry; later sources overwrite earlier display metadata (custom >
+ * registered > built-in).
+ */
+function buildFamilies(payload: ThemesPayload): ThemeFamilyView[] {
+  const map = new Map<string, ThemeFamilyView>();
+
+  // Built-in first
+  for (const t of payload.builtIn) {
+    const meta = BUILT_IN_FAMILY_META[t.family] ?? { name: t.family, description: '' };
+    const fam = ensureFamily(map, t.family, {
+      name: meta.name,
+      description: meta.description,
+      source: 'builtin',
+    });
+    const preview = BUILT_IN_PREVIEWS[t.id] ?? (t.isDark ? BUILT_IN_PREVIEWS.dark! : BUILT_IN_PREVIEWS.base!);
+    placeVariant(fam, t.id, t.name, t.isDark, preview);
+  }
+
+  // Registered themes — promote source if family was previously built-in
+  for (const t of payload.registered) {
+    const fallback = t.isDark ? BUILT_IN_PREVIEWS.dark! : BUILT_IN_PREVIEWS.base!;
+    const preview = {
+      bg: t.preview?.bg ?? fallback.bg,
+      surface: t.preview?.surface ?? fallback.surface,
+      accent: t.preview?.accent ?? fallback.accent,
+      text: t.preview?.text ?? fallback.text,
+      border: t.preview?.border ?? fallback.border,
+    };
+    const fam = ensureFamily(map, t.family, {
+      name: t.name,
+      description: t.description ?? `Code-registered theme from this app's commonpub.config.ts`,
+      source: 'registered',
+    });
+    if (fam.source === 'builtin') fam.source = 'registered';
+    placeVariant(fam, t.id, t.name, t.isDark, preview);
+  }
+
+  // Custom (DB-stored) — these win the meta tug-of-war
+  for (const t of payload.custom) {
+    const dataAttr = `cpub-custom-${t.id}`;
+    const preview = previewFromTokens(t.tokens, t.isDark);
+    const fam = ensureFamily(map, t.family, {
+      name: t.name,
+      description: t.description || 'Custom theme',
+      source: 'custom',
+    });
+    fam.source = 'custom';
+    fam.name = t.name;
+    if (t.description) fam.description = t.description;
+    placeVariant(fam, dataAttr, t.name, t.isDark, preview);
+  }
+
+  return [...map.values()];
+}
+
+function ensureFamily(
+  map: Map<string, ThemeFamilyView>,
+  id: string,
+  init: { name: string; description: string; source: ThemeFamilyView['source'] },
+): ThemeFamilyView {
+  let fam = map.get(id);
+  if (!fam) {
+    fam = {
+      id,
+      name: init.name,
+      description: init.description,
+      source: init.source,
+      light: null,
+      dark: null,
+      preview: { light: BUILT_IN_PREVIEWS.base!, dark: BUILT_IN_PREVIEWS.dark! },
+    };
+    map.set(id, fam);
+  }
+  return fam;
+}
+
+function placeVariant(
+  fam: ThemeFamilyView,
+  themeId: string,
+  themeName: string,
+  isDark: boolean,
+  preview: { bg: string; surface: string; accent: string; text: string; border: string },
+): void {
+  if (isDark) {
+    fam.dark = { id: themeId, name: themeName };
+    fam.preview.dark = preview;
+  } else {
+    fam.light = { id: themeId, name: themeName };
+    fam.preview.light = preview;
+  }
+}
+
+// ---- Composable surface -------------------------------------------------
+
+export function useThemeAdmin(): {
+  data: typeof data;
+  loading: typeof loading;
+  error: typeof error;
+  families: import('vue').ComputedRef<ThemeFamilyView[]>;
+  refresh: typeof refresh;
+  /** Find a custom theme by id in the current payload. Returns null if absent. */
+  findCustom: (id: string) => CustomThemeRecord | null;
+} {
+  const families = computed<ThemeFamilyView[]>(() => (data.value ? buildFamilies(data.value) : []));
+  return {
+    data,
+    loading,
+    error,
+    families,
+    refresh,
+    findCustom: (id: string) => data.value?.custom.find((t) => t.id === id) ?? null,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.22",
+  "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/config": "0.13.0",
     "@commonpub/auth": "0.6.0",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/editor": "0.7.11",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/config": "0.14.0",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/ui": "0.8.5",
-    "@commonpub/server": "2.55.0",
+    "@commonpub/schema": "0.17.0",
     "@commonpub/protocol": "0.12.0",
-    "@commonpub/schema": "0.16.0"
+    "@commonpub/ui": "0.9.0",
+    "@commonpub/server": "2.56.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",