@commonpub/layer 0.21.22 → 0.22.0

package/components/admin/theme/AdminThemeFamilyCard.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+/**
+ * One row in the admin theme picker. Displays:
+ *   • light + dark swatches (each clickable to pick that variant directly)
+ *   • family name + description
+ *   • active / current pill
+ *   • action buttons: Edit (custom only), Duplicate, Export, Delete
+ *
+ * Stays presentational — all wiring (select / edit / duplicate / delete /
+ * export) is emitted up so the page owns the state machine.
+ */
+import type { ThemeFamilyView } from '../../../types/theme';
+
+defineProps<{
+  family: ThemeFamilyView;
+  active: boolean;
+  saving: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [themeId: string];
+  edit: [themeId: string];
+  duplicate: [themeId: string];
+  exportTheme: [themeId: string];
+  remove: [themeId: string];
+}>();
+
+function variantBoxStyle(v: { bg: string; surface: string; accent: string; text: string; border: string }) {
+  return {
+    backgroundColor: v.bg,
+    borderColor: v.border,
+  };
+}
+
+function variantInnerStyle(v: { bg: string; surface: string; accent: string; text: string; border: string }) {
+  return {
+    backgroundColor: v.surface,
+    borderColor: v.border,
+    boxShadow: `3px 3px 0 ${v.border}`,
+  };
+}
+
+function badge(family: ThemeFamilyView): { label: string; tone: 'builtin' | 'registered' | 'custom' } {
+  if (family.source === 'custom') return { label: 'Custom', tone: 'custom' };
+  if (family.source === 'registered') return { label: 'From code', tone: 'registered' };
+  return { label: 'Built-in', tone: 'builtin' };
+}
+</script>
+
+<template>
+  <article class="theme-family-card" :class="{ active }">
+    <div class="theme-family-previews">
+      <button
+        v-if="family.light"
+        type="button"
+        class="theme-family-preview"
+        :style="variantBoxStyle(family.preview.light)"
+        :disabled="saving"
+        :aria-label="`Select ${family.name} light`"
+        @click="emit('select', family.light.id)"
+      >
+        <div class="theme-family-preview-card" :style="variantInnerStyle(family.preview.light)">
+          <div class="theme-family-preview-heading" :style="{ backgroundColor: family.preview.light.text, opacity: 0.85 }" />
+          <div class="theme-family-preview-text" :style="{ backgroundColor: family.preview.light.text, opacity: 0.35 }" />
+          <div class="theme-family-preview-text" :style="{ backgroundColor: family.preview.light.text, opacity: 0.35, width: '60%' }" />
+          <div class="theme-family-preview-accent" :style="{ backgroundColor: family.preview.light.accent }" />
+        </div>
+        <span class="theme-family-mode-label">Light</span>
+      </button>
+
+      <button
+        v-if="family.dark"
+        type="button"
+        class="theme-family-preview theme-family-preview-dark"
+        :style="variantBoxStyle(family.preview.dark)"
+        :disabled="saving"
+        :aria-label="`Select ${family.name} dark`"
+        @click="emit('select', family.dark.id)"
+      >
+        <div class="theme-family-preview-card" :style="variantInnerStyle(family.preview.dark)">
+          <div class="theme-family-preview-heading" :style="{ backgroundColor: family.preview.dark.text, opacity: 0.85 }" />
+          <div class="theme-family-preview-text" :style="{ backgroundColor: family.preview.dark.text, opacity: 0.35 }" />
+          <div class="theme-family-preview-text" :style="{ backgroundColor: family.preview.dark.text, opacity: 0.35, width: '60%' }" />
+          <div class="theme-family-preview-accent" :style="{ backgroundColor: family.preview.dark.accent }" />
+        </div>
+        <span class="theme-family-mode-label">Dark</span>
+      </button>
+    </div>
+
+    <div class="theme-family-meta">
+      <div class="theme-family-meta-head">
+        <h3 class="theme-family-name">{{ family.name }}</h3>
+        <span class="theme-family-tag" :class="`tag-${badge(family).tone}`">{{ badge(family).label }}</span>
+        <span v-if="active" class="theme-family-active">
+          <i class="fa-solid fa-check" aria-hidden="true" /> Active
+        </span>
+      </div>
+      <p class="theme-family-desc">{{ family.description }}</p>
+
+      <div class="theme-family-actions">
+        <button
+          v-if="family.source === 'custom'"
+          type="button"
+          class="cpub-btn cpub-btn-sm"
+          @click="emit('edit', family.light?.id ?? family.dark!.id)"
+        >
+          <i class="fa-solid fa-pen-to-square" aria-hidden="true" /> Edit
+        </button>
+        <button
+          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)"
+        >
+          <i class="fa-solid fa-copy" aria-hidden="true" /> {{ family.source === 'custom' ? 'Duplicate' : 'Fork' }}
+        </button>
+        <button
+          v-if="family.source === 'custom'"
+          type="button"
+          class="cpub-btn cpub-btn-sm"
+          @click="emit('exportTheme', family.light?.id ?? family.dark!.id)"
+        >
+          <i class="fa-solid fa-file-export" aria-hidden="true" /> Export
+        </button>
+        <button
+          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)"
+        >
+          <i class="fa-solid fa-trash" aria-hidden="true" /> Delete
+        </button>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.theme-family-card {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  border: var(--border-width-default) solid var(--border2);
+  background: var(--surface);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.theme-family-card.active {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-accent);
+}
+
+.theme-family-card:hover { border-color: var(--border); }
+
+.theme-family-previews {
+  display: flex;
+  border-right: var(--border-width-default) solid var(--border2);
+}
+
+.theme-family-preview {
+  position: relative;
+  width: 130px;
+  height: 110px;
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-right: var(--border-width-default) solid var(--border2);
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.theme-family-preview:last-child { border-right: 0; }
+.theme-family-preview:hover { filter: brightness(1.05); }
+.theme-family-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.theme-family-preview:disabled { cursor: wait; opacity: 0.6; }
+
+.theme-family-preview-card {
+  width: 80%;
+  padding: var(--space-2) var(--space-3);
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-radius: 0;
+}
+
+.theme-family-preview-heading { height: 5px; width: 55%; border-radius: 0; }
+.theme-family-preview-text { height: 3px; width: 85%; border-radius: 0; }
+.theme-family-preview-accent { height: 10px; width: 40%; margin-top: 4px; border-radius: 0; }
+
+.theme-family-mode-label {
+  position: absolute;
+  bottom: 4px;
+  right: 6px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-faint);
+  opacity: 0.7;
+}
+
+.theme-family-meta {
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.theme-family-meta-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.theme-family-name {
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+}
+
+.theme-family-tag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border: var(--border-width-thin) solid var(--border2);
+  color: var(--text-dim);
+}
+.tag-custom { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
+.tag-registered { color: var(--purple); border-color: var(--purple-border); background: var(--purple-bg); }
+
+.theme-family-active {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--accent);
+  font-weight: var(--font-weight-semibold);
+}
+
+.theme-family-desc {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin: 0;
+  line-height: var(--leading-snug);
+}
+
+.theme-family-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: auto;
+}
+
+.theme-family-action-danger {
+  color: var(--red);
+  border-color: var(--red-border);
+}
+.theme-family-action-danger:hover { background: var(--red-bg); }
+
+@media (max-width: 640px) {
+  .theme-family-card { grid-template-columns: 1fr; }
+  .theme-family-previews { border-right: 0; border-bottom: var(--border-width-default) solid var(--border2); }
+  .theme-family-preview { flex: 1; }
+}
+</style>

package/components/admin/theme/AdminThemeOverridesPanel.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+/**
+ * Legacy "token overrides" panel — applies on top of whichever theme is
+ * active. Useful for one-off tweaks ("flip the accent for our anniversary
+ * week") without authoring a full custom theme. For real edits, the
+ * editor at `/admin/theme/edit/[id]` is the better tool.
+ *
+ * Self-contained: takes the initial map from a prop, owns the in-progress
+ * draft, emits `save` with the final map. The parent persists via
+ * `/api/admin/settings` and decides when to refresh.
+ */
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps<{
+  /** Initial map from `instance_settings.theme.token_overrides`. */
+  initial: Record<string, string>;
+  /** Disables save buttons while a parent-driven request is in flight. */
+  saving: boolean;
+}>();
+
+const emit = defineEmits<{
+  save: [overrides: Record<string, string>];
+}>();
+
+const draft = ref<Record<string, string>>({ ...props.initial });
+const newKey = ref('');
+const newValue = ref('');
+
+watch(() => props.initial, (next) => {
+  // Reset draft when the parent reloads settings (e.g. after a save round-trip)
+  draft.value = { ...next };
+});
+
+const count = computed(() => Object.keys(draft.value).length);
+const dirty = computed(() => JSON.stringify(draft.value) !== JSON.stringify(props.initial));
+
+function addOverride(): void {
+  const k = newKey.value.trim().replace(/^--/, '');
+  const v = newValue.value.trim();
+  if (!k || !v) return;
+  draft.value = { ...draft.value, [k]: v };
+  newKey.value = '';
+  newValue.value = '';
+}
+
+function removeOverride(key: string): void {
+  const next = { ...draft.value };
+  delete next[key];
+  draft.value = next;
+}
+
+function looksLikeColor(value: string): boolean {
+  return value.startsWith('#') || value.startsWith('rgb');
+}
+</script>
+
+<template>
+  <details class="admin-theme-overrides">
+    <summary class="admin-theme-overrides-summary">
+      <i class="fa-solid fa-sliders" aria-hidden="true" />
+      <span>Token overrides</span>
+      <span v-if="count > 0" class="admin-theme-overrides-count">{{ count }} active</span>
+    </summary>
+    <div class="admin-theme-overrides-body">
+      <p class="admin-theme-overrides-desc">
+        Ad-hoc overrides applied on top of whichever theme is active. Useful for
+        one-off tweaks without authoring a full custom theme. For real edits,
+        create or fork a theme above.
+      </p>
+
+      <div v-if="count > 0" class="admin-overrides-list">
+        <div v-for="(value, key) in draft" :key="key" class="admin-override-row">
+          <code class="admin-override-key">--{{ key }}</code>
+          <span class="admin-override-value">
+            <span
+              v-if="looksLikeColor(String(value))"
+              class="admin-override-swatch"
+              :style="{ backgroundColor: String(value) }"
+            />
+            {{ value }}
+          </span>
+          <button
+            class="cpub-btn cpub-btn-sm admin-override-remove"
+            :aria-label="`Remove override for ${key}`"
+            @click="removeOverride(key as string)"
+          >
+            <i class="fa-solid fa-xmark" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <div class="admin-override-add">
+        <input v-model="newKey" class="admin-override-input" placeholder="Token name (e.g. accent)" @keyup.enter="addOverride" />
+        <input v-model="newValue" class="admin-override-input" placeholder="Value (e.g. #ff6600)" @keyup.enter="addOverride" />
+        <button class="cpub-btn cpub-btn-sm" :disabled="!newKey.trim() || !newValue.trim()" @click="addOverride">Add</button>
+      </div>
+
+      <div class="admin-override-actions">
+        <button class="cpub-btn cpub-btn-primary" :disabled="saving || !dirty" @click="emit('save', draft)">
+          <i class="fa-solid fa-floppy-disk" aria-hidden="true" /> Save overrides
+        </button>
+      </div>
+    </div>
+  </details>
+</template>
+
+<style scoped>
+.admin-theme-overrides {
+  margin-top: var(--space-6);
+  border-top: var(--border-width-default) solid var(--border);
+  padding-top: var(--space-4);
+}
+
+.admin-theme-overrides-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+  cursor: pointer;
+  padding: var(--space-2);
+  list-style: none;
+}
+.admin-theme-overrides-summary::-webkit-details-marker { display: none; }
+.admin-theme-overrides-summary::before {
+  content: '\f054'; /* fa-chevron-right */
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 900;
+  font-size: 12px;
+  color: var(--text-dim);
+  transition: transform var(--transition-fast);
+}
+[open] > .admin-theme-overrides-summary::before { transform: rotate(90deg); }
+
+.admin-theme-overrides-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  padding: 1px 6px;
+  background: var(--accent-bg);
+  color: var(--accent);
+  border: var(--border-width-thin) solid var(--accent-border);
+}
+
+.admin-theme-overrides-body { padding: var(--space-3) 0; }
+.admin-theme-overrides-desc {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin: 0 0 var(--space-3);
+  max-width: 560px;
+  line-height: var(--leading-snug);
+}
+
+.admin-overrides-list {
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  margin-bottom: var(--space-3);
+}
+.admin-override-row {
+  display: flex;
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: var(--border-width-thin) solid var(--border2);
+  gap: var(--space-3);
+}
+.admin-override-row:last-child { border-bottom: 0; }
+.admin-override-key {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--accent);
+  flex-shrink: 0;
+}
+.admin-override-value {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.admin-override-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: var(--border-width-thin) solid var(--border2);
+  flex-shrink: 0;
+}
+.admin-override-remove { flex-shrink: 0; padding: var(--space-1); color: var(--text-faint); }
+.admin-override-remove:hover { color: var(--red); }
+
+.admin-override-add {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border: 2px dashed var(--border2);
+  background: var(--surface);
+  margin-bottom: var(--space-3);
+}
+.admin-override-input {
+  font-size: var(--text-sm);
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface2);
+  color: var(--text);
+  font-family: var(--font-mono);
+  flex: 1;
+  min-width: 0;
+}
+
+.admin-override-actions { margin-top: var(--space-3); }
+
+@media (max-width: 640px) {
+  .admin-override-add { flex-direction: column; }
+}
+</style>

package/components/admin/theme/AdminThemePreviewPane.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+/**
+ * Live preview pane for the theme editor. Hosts the scene picker, the
+ * light/dark mode toggle, and the scrollable scene surface that renders
+ * the in-progress theme tokens applied to representative components.
+ *
+ * The scene system is pluggable: each scene is a Vue component rendered
+ * inside the token-scoped wrapper. Add scenes by registering them in
+ * PREVIEW_SCENES and dropping an `AdminThemeScene*.vue` in this directory.
+ *
+ * Future scenes the architecture is built to absorb:
+ *   - 'iframe-route'    — render an actual site route with the in-progress theme
+ *   - 'page-layout'     — full landing-page mockup with editable section list
+ *   - 'layout-builder'  — drag-and-drop section composer
+ */
+import { computed, ref } from 'vue';
+
+const props = defineProps<{
+  tokens: Record<string, string>;
+  /** The base theme whose CSS file provides inherited defaults (via data-theme). */
+  parentTheme: string;
+  isDark: boolean;
+}>();
+
+interface SceneOption {
+  id: 'gallery' | 'prose' | 'admin';
+  label: string;
+  description: string;
+  icon: string;
+}
+
+const PREVIEW_SCENES: SceneOption[] = [
+  { id: 'gallery', label: 'Components', description: 'Buttons, cards, forms, badges, prose, code', icon: 'fa-th-large' },
+  { id: 'prose', label: 'Article', description: 'Headings, paragraphs, quote, code block, list', icon: 'fa-file-lines' },
+  { id: 'admin', label: 'Admin shell', description: 'Topbar, sidebar, table, stat cards', icon: 'fa-gauge' },
+];
+
+const activeScene = ref<SceneOption['id']>('gallery');
+const previewMode = ref<'light' | 'dark'>(props.isDark ? 'dark' : 'light');
+
+/**
+ * Build the inline style string scoped to the preview surface. We apply
+ * tokens to the wrapper element only — that scopes the in-progress theme
+ * to the preview and avoids leaking it into the surrounding admin UI.
+ */
+const previewStyle = computed(() => {
+  const lines: string[] = [];
+  for (const [k, v] of Object.entries(props.tokens)) {
+    if (typeof v !== 'string') continue;
+    const safeKey = k.replace(/[^a-zA-Z0-9_-]/g, '');
+    const safeVal = v.replace(/[\r\n;]/g, ' ');
+    if (!safeKey) continue;
+    lines.push(`--${safeKey}: ${safeVal}`);
+  }
+  return lines.join('; ');
+});
+</script>
+
+<template>
+  <div class="theme-preview-pane">
+    <header class="theme-preview-header">
+      <div class="theme-preview-scene-picker" role="tablist" aria-label="Preview scene">
+        <button
+          v-for="scene in PREVIEW_SCENES"
+          :key="scene.id"
+          type="button"
+          role="tab"
+          :aria-selected="activeScene === scene.id"
+          class="theme-preview-scene-tab"
+          :class="{ active: activeScene === scene.id }"
+          :title="scene.description"
+          @click="activeScene = scene.id"
+        >
+          <i :class="['fa-solid', scene.icon]" aria-hidden="true" />
+          <span>{{ scene.label }}</span>
+        </button>
+      </div>
+
+      <div class="theme-preview-mode-toggle" role="radiogroup" aria-label="Preview mode">
+        <button
+          type="button"
+          role="radio"
+          :aria-checked="previewMode === 'light'"
+          class="theme-preview-mode-btn"
+          :class="{ active: previewMode === 'light' }"
+          @click="previewMode = 'light'"
+        >
+          <i class="fa-solid fa-sun" aria-hidden="true" /> Light
+        </button>
+        <button
+          type="button"
+          role="radio"
+          :aria-checked="previewMode === 'dark'"
+          class="theme-preview-mode-btn"
+          :class="{ active: previewMode === 'dark' }"
+          @click="previewMode = 'dark'"
+        >
+          <i class="fa-solid fa-moon" aria-hidden="true" /> Dark
+        </button>
+      </div>
+    </header>
+
+    <div
+      class="theme-preview-surface"
+      :data-theme="parentTheme"
+      :style="previewStyle"
+      :data-preview-mode="previewMode"
+    >
+      <AdminThemeSceneGallery v-if="activeScene === 'gallery'" />
+      <AdminThemeSceneProse v-else-if="activeScene === 'prose'" />
+      <AdminThemeSceneAdmin v-else-if="activeScene === 'admin'" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.theme-preview-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--surface2);
+  border-left: var(--border-width-default) solid var(--border);
+}
+
+.theme-preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface);
+  border-bottom: var(--border-width-default) solid var(--border);
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.theme-preview-scene-picker,
+.theme-preview-mode-toggle {
+  display: flex;
+  gap: 2px;
+  background: var(--surface2);
+  padding: 2px;
+  border: var(--border-width-thin) solid var(--border2);
+}
+
+.theme-preview-scene-tab,
+.theme-preview-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: none;
+  border: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-dim);
+  cursor: pointer;
+  border-radius: 0;
+}
+.theme-preview-scene-tab:hover,
+.theme-preview-mode-btn:hover { color: var(--text); }
+.theme-preview-scene-tab.active {
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: inset 0 -2px 0 var(--accent);
+}
+.theme-preview-mode-btn.active {
+  background: var(--surface);
+  color: var(--accent);
+}
+.theme-preview-scene-tab i { font-size: 10px; }
+
+.theme-preview-surface {
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-4);
+  background-color: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  /* Token re-application happens via inline style on this element. The
+     `data-theme` attr seeds inherited defaults; inline style overrides
+     each token the editor has changed. */
+  min-height: 0;
+}
+</style>