@commonpub/layer 0.21.22 → 0.22.1

package/components/admin/theme/AdminThemePreviewPane.vue

@@ -0,0 +1,218 @@
+<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');
+
+/**
+ * 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
+ * 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="effectiveDataTheme"
+      :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>

package/components/admin/theme/AdminThemeSceneAdmin.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+/**
+ * Admin-shell preview. Renders a fake topbar + sidebar + stat dashboard
+ * + table so admins can preview what the panel they're using right now
+ * will look like with the in-progress theme applied.
+ */
+</script>
+
+<template>
+  <div class="scene-admin">
+    <header class="scene-admin-top">
+      <span class="scene-admin-brand">{{ '{ Instance Name }' }}</span>
+      <span class="scene-admin-badge">Admin</span>
+      <span class="scene-admin-back">← Back to site</span>
+    </header>
+
+    <div class="scene-admin-body">
+      <nav class="scene-admin-side">
+        <a class="scene-admin-link"><i class="fa-solid fa-gauge" aria-hidden="true" />Dashboard</a>
+        <a class="scene-admin-link"><i class="fa-solid fa-users" aria-hidden="true" />Users</a>
+        <a class="scene-admin-link"><i class="fa-solid fa-newspaper" aria-hidden="true" />Content</a>
+        <a class="scene-admin-link active"><i class="fa-solid fa-palette" aria-hidden="true" />Theme</a>
+        <a class="scene-admin-link"><i class="fa-solid fa-globe" aria-hidden="true" />Federation</a>
+        <a class="scene-admin-link"><i class="fa-solid fa-toggle-on" aria-hidden="true" />Features</a>
+      </nav>
+
+      <main class="scene-admin-main">
+        <h1 class="scene-admin-title">Instance overview</h1>
+        <p class="scene-admin-sub">Snapshot of activity across this CommonPub instance.</p>
+
+        <div class="scene-admin-stats">
+          <div class="scene-admin-stat">
+            <span class="scene-admin-stat-label">Members</span>
+            <span class="scene-admin-stat-value">3,124</span>
+            <span class="scene-admin-stat-delta">+18 this week</span>
+          </div>
+          <div class="scene-admin-stat">
+            <span class="scene-admin-stat-label">Published</span>
+            <span class="scene-admin-stat-value">512</span>
+            <span class="scene-admin-stat-delta">+24 this week</span>
+          </div>
+          <div class="scene-admin-stat">
+            <span class="scene-admin-stat-label">Federated</span>
+            <span class="scene-admin-stat-value">87 peers</span>
+            <span class="scene-admin-stat-delta tone-warn">2 retrying</span>
+          </div>
+          <div class="scene-admin-stat">
+            <span class="scene-admin-stat-label">Storage</span>
+            <span class="scene-admin-stat-value">8.2 GB</span>
+            <span class="scene-admin-stat-delta">of 50 GB</span>
+          </div>
+        </div>
+
+        <h2 class="scene-admin-h2">Recent reports</h2>
+        <div class="scene-admin-table-wrap">
+          <table class="scene-admin-table">
+            <thead>
+              <tr><th>Target</th><th>Reason</th><th>Reporter</th><th>Status</th></tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>@spam-actor@example.fed</strong></td>
+                <td>Spam</td>
+                <td>moheeb</td>
+                <td><span class="scene-admin-pill tone-yellow">Open</span></td>
+              </tr>
+              <tr>
+                <td>Project: "Buy followers fast"</td>
+                <td>Spam</td>
+                <td>aly</td>
+                <td><span class="scene-admin-pill tone-green">Resolved</span></td>
+              </tr>
+              <tr>
+                <td>Comment on "Edge AI nodes"</td>
+                <td>Harassment</td>
+                <td>kim</td>
+                <td><span class="scene-admin-pill tone-red">Escalated</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scene-admin {
+  background: var(--bg);
+  border: var(--border-width-default) solid var(--border);
+  min-height: 480px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.scene-admin-top {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-4);
+  background: var(--surface);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+.scene-admin-brand { font-weight: var(--font-weight-bold); color: var(--text); }
+.scene-admin-badge {
+  padding: 2px 8px;
+  background: var(--accent);
+  color: var(--color-on-accent);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+.scene-admin-back { margin-left: auto; color: var(--text-dim); font-size: var(--text-sm); }
+
+.scene-admin-body { display: flex; flex: 1; min-height: 0; }
+.scene-admin-side {
+  width: 180px;
+  padding: var(--space-3) var(--space-2);
+  background: var(--surface);
+  border-right: var(--border-width-default) solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.scene-admin-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px var(--space-3);
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  text-decoration: none;
+}
+.scene-admin-link i { width: 14px; text-align: center; font-size: 11px; }
+.scene-admin-link:hover { color: var(--text); background: var(--surface2); }
+.scene-admin-link.active { color: var(--accent); background: var(--accent-bg); font-weight: var(--font-weight-semibold); }
+
+.scene-admin-main { flex: 1; padding: var(--space-5); min-width: 0; }
+.scene-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--text); margin: 0 0 var(--space-1); }
+.scene-admin-sub { color: var(--text-dim); margin: 0 0 var(--space-5); }
+
+.scene-admin-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: var(--space-3);
+  margin-bottom: var(--space-6);
+}
+.scene-admin-stat {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: var(--space-3) var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-shadow: var(--shadow-sm);
+}
+.scene-admin-stat-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); }
+.scene-admin-stat-value { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--text); }
+.scene-admin-stat-delta { font-size: var(--text-sm); color: var(--green); }
+.scene-admin-stat-delta.tone-warn { color: var(--yellow); }
+
+.scene-admin-h2 { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--text); margin: 0 0 var(--space-2); }
+.scene-admin-table-wrap { background: var(--surface); border: var(--border-width-default) solid var(--border); overflow: hidden; }
+.scene-admin-table { width: 100%; border-collapse: collapse; }
+.scene-admin-table th, .scene-admin-table td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-thin) solid var(--border2); text-align: left; font-size: var(--text-sm); color: var(--text); }
+.scene-admin-table th { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); background: var(--surface2); }
+.scene-admin-table tr:last-child td { border-bottom: 0; }
+.scene-admin-pill {
+  display: inline-block;
+  padding: 1px 8px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  border: var(--border-width-thin) solid var(--border2);
+}
+.scene-admin-pill.tone-green { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
+.scene-admin-pill.tone-yellow { color: var(--yellow); background: var(--yellow-bg); border-color: var(--yellow-border); }
+.scene-admin-pill.tone-red { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
+
+@media (max-width: 540px) {
+  .scene-admin-side { width: 50px; }
+  .scene-admin-link span { display: none; }
+}
+</style>