@commonpub/layer 0.21.22 → 0.22.1

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>