@commonpub/layer 0.21.22 → 0.22.0

package/components/admin/theme/AdminThemeSceneProse.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+/**
+ * Article-style preview. Mimics the long-form prose layout used by
+ * blogs, projects, explainers, and docs pages. Useful for tuning
+ * typography, link colors, blockquote, list, table, and prose code.
+ */
+</script>
+
+<template>
+  <article class="scene-prose">
+    <header class="scene-prose-header">
+      <span class="scene-prose-eyebrow">PROJECT · OPEN</span>
+      <h1 class="scene-prose-title">Building a federated maker community without a platform</h1>
+      <p class="scene-prose-deck">
+        How CommonPub instances stay sovereign while still talking to Mastodon, Lemmy,
+        and each other — and what we learned shipping the first three live sites.
+      </p>
+      <div class="scene-prose-byline">
+        <span class="scene-prose-avatar">M</span>
+        <span><strong>moheeb</strong> · <a href="#" class="scene-prose-link">deveco.io</a></span>
+        <span class="scene-prose-dot">·</span>
+        <span>8 min read</span>
+      </div>
+    </header>
+
+    <p>
+      Most maker communities live on someone else's platform. The platform owns the
+      identity, the content, the moderation, and the moment the platform changes
+      direction, the community goes with it. That's the failure mode CommonPub is
+      built around — every instance is a complete site, federation is opt-in, and
+      moving your community is a database export, not a migration ticket.
+    </p>
+
+    <h2 class="scene-prose-h2">Three sites, one codebase</h2>
+    <p>
+      The reference deployment runs <a href="#" class="scene-prose-link">commonpub.io</a>,
+      <a href="#" class="scene-prose-link">deveco.io</a>, and
+      <a href="#" class="scene-prose-link">heatsynclabs.io</a> off the same Nuxt layer.
+      Each one extends <code class="scene-prose-code-inline">@commonpub/layer</code> and
+      overrides only what's specific to the community.
+    </p>
+
+    <blockquote class="scene-prose-quote">
+      The schema is the work — everything else follows from it.
+    </blockquote>
+
+    <h3 class="scene-prose-h3">What the layer ships</h3>
+    <ul class="scene-prose-list">
+      <li>Content types: project, blog, explainer, video, doc page</li>
+      <li>Federation: ActivityPub via Fedify, instance + actor signing</li>
+      <li>Hubs: local-first groups, with a Group-actor escape hatch</li>
+      <li>Admin panel: feature flags, theme picker, audit log, mirror config</li>
+    </ul>
+
+    <h3 class="scene-prose-h3">Sample query</h3>
+    <p>The hub feed is built from this Drizzle query:</p>
+    <pre class="scene-prose-pre"><code>const items = await db
+  .select()
+  .from(content)
+  .where(eq(content.hubId, hub.id))
+  .orderBy(desc(content.publishedAt))
+  .limit(20);</code></pre>
+
+    <h3 class="scene-prose-h3">Deploy targets</h3>
+    <table class="scene-prose-table">
+      <thead>
+        <tr>
+          <th>Site</th>
+          <th>Federation</th>
+          <th>Custom theme</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>commonpub.io</td><td>Yes</td><td>Classic</td></tr>
+        <tr><td>deveco.io</td><td>Yes</td><td>devEco brand</td></tr>
+        <tr><td>heatsynclabs.io</td><td>Soon</td><td>Hacker green</td></tr>
+      </tbody>
+    </table>
+
+    <hr class="scene-prose-hr" />
+    <p class="scene-prose-foot">Last updated 2026-05-26 · 8-minute read · Tagged <a href="#" class="scene-prose-link">#federation</a> <a href="#" class="scene-prose-link">#open</a></p>
+  </article>
+</template>
+
+<style scoped>
+.scene-prose {
+  max-width: 640px;
+  margin: 0 auto;
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text);
+}
+.scene-prose-header { margin-bottom: var(--space-8); }
+.scene-prose-eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--accent);
+}
+.scene-prose-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--text); margin: var(--space-3) 0 var(--space-3); }
+.scene-prose-deck { font-size: var(--text-md); color: var(--text-dim); line-height: var(--leading-snug); margin: 0 0 var(--space-4); }
+.scene-prose-byline { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: var(--text-sm); }
+.scene-prose-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--accent); color: var(--color-on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: 12px; }
+.scene-prose-dot { color: var(--text-faint); }
+.scene-prose-h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); color: var(--text); margin: var(--space-8) 0 var(--space-3); letter-spacing: var(--tracking-tight); }
+.scene-prose-h3 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--text); margin: var(--space-6) 0 var(--space-2); }
+.scene-prose p { margin: 0 0 var(--space-4); }
+.scene-prose-link { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
+.scene-prose-link:hover { color: var(--color-link-hover); }
+.scene-prose-quote {
+  border-left: 4px solid var(--accent);
+  margin: var(--space-6) 0;
+  padding: var(--space-2) var(--space-5);
+  font-family: var(--font-heading);
+  font-size: var(--text-lg);
+  font-style: italic;
+  color: var(--text-dim);
+  background: var(--accent-bg);
+}
+.scene-prose-code-inline { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); border: var(--border-width-thin) solid var(--border2); color: var(--accent); }
+.scene-prose-pre {
+  background: var(--code-bg);
+  color: var(--code-text);
+  padding: var(--space-4);
+  margin: var(--space-4) 0 var(--space-6);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  overflow: auto;
+  border: var(--border-width-thin) solid var(--code-border);
+}
+.scene-prose-list { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
+.scene-prose-list li { margin-bottom: var(--space-2); }
+.scene-prose-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0 var(--space-6); }
+.scene-prose-table th, .scene-prose-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); }
+.scene-prose-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); border-bottom: var(--border-width-default) solid var(--border); }
+.scene-prose-hr { border: 0; border-top: var(--border-width-default) solid var(--border2); margin: var(--space-8) 0; }
+.scene-prose-foot { color: var(--text-faint); font-size: var(--text-sm); }
+</style>

package/components/admin/theme/AdminThemeTokenGroup.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+/**
+ * Collapsible group of token rows. Renders the group header + a list of
+ * AdminThemeTokenInput inside an open <details>. The "modified" count
+ * badge on the header tells the user which groups they've touched.
+ */
+import { computed } from 'vue';
+import type { TokenSpec, TokenGroup } from '@commonpub/ui';
+
+const props = defineProps<{
+  group: TokenGroup;
+  label: string;
+  icon: string;
+  description: string;
+  specs: TokenSpec[];
+  tokens: Record<string, string>;
+  /** Default open state. Surfaces (top group) opens by default. */
+  open?: boolean;
+}>();
+
+const emit = defineEmits<{
+  update: [key: string, value: string];
+  reset: [key: string];
+}>();
+
+const modifiedCount = computed(() =>
+  props.specs.reduce((acc, s) => acc + (props.tokens[s.key] && props.tokens[s.key] !== s.default ? 1 : 0), 0),
+);
+</script>
+
+<template>
+  <details class="token-group" :open="open">
+    <summary class="token-group-header">
+      <i :class="['fa-solid', icon, 'token-group-icon']" aria-hidden="true" />
+      <div class="token-group-meta">
+        <span class="token-group-label">{{ label }}</span>
+        <span class="token-group-desc">{{ description }}</span>
+      </div>
+      <span v-if="modifiedCount > 0" class="token-group-count">{{ modifiedCount }}</span>
+      <i class="fa-solid fa-chevron-right token-group-chevron" aria-hidden="true" />
+    </summary>
+
+    <div class="token-group-body">
+      <AdminThemeTokenInput
+        v-for="spec in specs"
+        :key="spec.key"
+        :spec="spec"
+        :value="tokens[spec.key] ?? ''"
+        @update="(v) => emit('update', spec.key, v)"
+        @reset="emit('reset', spec.key)"
+      />
+    </div>
+  </details>
+</template>
+
+<style scoped>
+.token-group {
+  border-bottom: var(--border-width-default) solid var(--border2);
+}
+.token-group:last-of-type { border-bottom: 0; }
+
+.token-group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-3);
+  background: var(--surface);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+.token-group-header::-webkit-details-marker { display: none; }
+.token-group-header:hover { background: var(--surface2); }
+
+.token-group-icon { color: var(--text-dim); font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
+.token-group-meta { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.token-group-label { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text); }
+.token-group-desc { font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); }
+
+.token-group-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: var(--tracking-wide);
+  padding: 1px 6px;
+  background: var(--accent-bg);
+  color: var(--accent);
+  border: var(--border-width-thin) solid var(--accent-border);
+}
+
+.token-group-chevron {
+  font-size: 11px;
+  color: var(--text-faint);
+  transition: transform var(--transition-fast);
+}
+[open] > .token-group-header .token-group-chevron { transform: rotate(90deg); }
+
+.token-group-body { background: var(--bg); }
+</style>

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(() => {});
     }
   }