@commonpub/layer 0.24.0 → 0.25.0

package/components/admin/layouts/AdminLayoutsInspectorPage.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+/**
+ * Page-meta inspector form (Phase 3a.4).
+ *
+ * Fields: name (layout-table column) + title + description + ogImage +
+ * ogType + access + frame + noindex. Hardcoded for v1 — Phase 3e
+ * replaces this with a Zod-driven auto-form (FormKit). Until then,
+ * the explicit form gives admins immediate control over the meta
+ * tags + frame without depending on the form-generator work.
+ *
+ * Emits `update:page-meta` + `update:name` so the editor page can
+ * mutate the draft (auto-save 3a.6 watches for dirty + persists).
+ * No internal state — fully controlled component.
+ */
+import type { LayoutRecord } from '@commonpub/server';
+
+const props = defineProps<{ draft: LayoutRecord }>();
+
+const emit = defineEmits<{
+  (e: 'update:page-meta', value: LayoutRecord['pageMeta']): void;
+  (e: 'update:name', value: string): void;
+}>();
+
+// Local controlled values mirror the draft. Edits emit upward; the
+// editor page mutates the draft ref; reactivity flows back here on
+// next tick. No local state to keep in sync.
+const name = computed<string>({
+  get: () => props.draft.name,
+  set: (v) => emit('update:name', v),
+});
+
+// Helper: build a patched pageMeta object preserving other fields.
+// Title is required by the schema — never delete it; empty-string instead.
+function patch<K extends keyof NonNullable<LayoutRecord['pageMeta']>>(
+  key: K,
+  value: NonNullable<LayoutRecord['pageMeta']>[K] | undefined,
+): void {
+  type PM = NonNullable<LayoutRecord['pageMeta']>;
+  const current: PM = props.draft.pageMeta ?? { title: '' };
+  const next: PM = { ...current };
+  if (value === undefined || value === '') {
+    if (key === 'title') {
+      next.title = '';
+    } else {
+      delete next[key];
+    }
+  } else {
+    next[key] = value;
+  }
+  emit('update:page-meta', next);
+}
+
+const title = computed<string>({
+  get: () => props.draft.pageMeta?.title ?? '',
+  set: (v) => patch('title', v),
+});
+const description = computed<string>({
+  get: () => props.draft.pageMeta?.description ?? '',
+  set: (v) => patch('description', v || undefined),
+});
+const ogImage = computed<string>({
+  get: () => props.draft.pageMeta?.ogImage ?? '',
+  set: (v) => patch('ogImage', v || undefined),
+});
+const ogType = computed<'website' | 'article' | 'profile'>({
+  get: () => (props.draft.pageMeta?.ogType as 'website' | 'article' | 'profile') ?? 'website',
+  set: (v) => patch('ogType', v),
+});
+const access = computed<'public' | 'members' | 'admin'>({
+  get: () => (props.draft.pageMeta?.access as 'public' | 'members' | 'admin') ?? 'public',
+  set: (v) => patch('access', v),
+});
+const frame = computed<'narrow' | 'wide' | 'two-column' | 'three-column' | 'sidebar-left' | 'sidebar-right'>({
+  get: () => (props.draft.pageMeta?.frame as 'narrow' | 'wide' | 'two-column' | 'three-column' | 'sidebar-left' | 'sidebar-right') ?? 'wide',
+  set: (v) => patch('frame', v),
+});
+const noindex = computed<boolean>({
+  get: () => props.draft.pageMeta?.noindex ?? false,
+  set: (v) => patch('noindex', v || undefined),
+});
+
+const id = (suffix: string): string => `cpub-inspector-page-${suffix}`;
+</script>
+
+<template>
+  <form
+    class="cpub-inspector-page-form"
+    @submit.prevent
+    aria-label="Page meta editor"
+  >
+    <div class="cpub-inspector-page-field">
+      <label :for="id('name')">Layout name</label>
+      <input
+        :id="id('name')"
+        v-model="name"
+        type="text"
+        autocomplete="off"
+        :aria-describedby="id('name-hint')"
+      />
+      <p :id="id('name-hint')" class="cpub-inspector-page-hint">
+        Internal label shown in the layouts list. Not user-facing.
+      </p>
+    </div>
+
+    <div class="cpub-inspector-page-field">
+      <label :for="id('title')">Page title</label>
+      <input
+        :id="id('title')"
+        v-model="title"
+        type="text"
+        autocomplete="off"
+        :aria-describedby="id('title-hint')"
+      />
+      <p :id="id('title-hint')" class="cpub-inspector-page-hint">
+        Browser tab + Open Graph title. Required.
+      </p>
+    </div>
+
+    <div class="cpub-inspector-page-field">
+      <label :for="id('description')">Description</label>
+      <textarea
+        :id="id('description')"
+        v-model="description"
+        rows="3"
+      ></textarea>
+      <p class="cpub-inspector-page-hint">
+        Meta description + Open Graph description.
+      </p>
+    </div>
+
+    <div class="cpub-inspector-page-field">
+      <label :for="id('ogImage')">OG image URL</label>
+      <input
+        :id="id('ogImage')"
+        v-model="ogImage"
+        type="url"
+        autocomplete="off"
+        placeholder="https://…"
+      />
+    </div>
+
+    <div class="cpub-inspector-page-field-grid">
+      <div class="cpub-inspector-page-field">
+        <label :for="id('ogType')">OG type</label>
+        <select :id="id('ogType')" v-model="ogType">
+          <option value="website">website</option>
+          <option value="article">article</option>
+          <option value="profile">profile</option>
+        </select>
+      </div>
+
+      <div class="cpub-inspector-page-field">
+        <label :for="id('access')">Access</label>
+        <select :id="id('access')" v-model="access">
+          <option value="public">public</option>
+          <option value="members">members</option>
+          <option value="admin">admin</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="cpub-inspector-page-field cpub-inspector-page-field--disabled">
+      <label :for="id('frame')">Frame <span class="cpub-inspector-page-soon">Phase 4</span></label>
+      <select :id="id('frame')" v-model="frame" disabled aria-describedby="frame-soon-hint">
+        <option value="narrow">narrow</option>
+        <option value="wide">wide</option>
+        <option value="two-column">two-column</option>
+        <option value="three-column">three-column</option>
+        <option value="sidebar-left">sidebar-left</option>
+        <option value="sidebar-right">sidebar-right</option>
+      </select>
+      <p id="frame-soon-hint" class="cpub-inspector-page-hint">
+        Page chrome shape — reserved for Phase 4. Currently has no effect; the renderer
+        always exposes the same three zones (full-width, main, sidebar).
+      </p>
+    </div>
+
+    <div class="cpub-inspector-page-checkbox">
+      <input
+        :id="id('noindex')"
+        v-model="noindex"
+        type="checkbox"
+      />
+      <label :for="id('noindex')">noindex (hide from search engines)</label>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.cpub-inspector-page-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.cpub-inspector-page-field { display: flex; flex-direction: column; gap: var(--space-1); }
+.cpub-inspector-page-field-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.cpub-inspector-page-field label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-dim);
+  font-weight: var(--font-weight-semibold);
+}
+
+.cpub-inspector-page-field input,
+.cpub-inspector-page-field textarea,
+.cpub-inspector-page-field select {
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+}
+.cpub-inspector-page-field input:focus-visible,
+.cpub-inspector-page-field textarea:focus-visible,
+.cpub-inspector-page-field select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+  border-color: var(--accent);
+}
+.cpub-inspector-page-field textarea {
+  resize: vertical;
+  font-family: var(--font-body);
+}
+
+.cpub-inspector-page-hint {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  margin: 0;
+}
+
+/* Disabled-field pattern for "reserved for future phase" controls.
+   The field is visible (signals the surface exists) but greyed out to
+   prevent the "set it, see nothing change" trust break per audit round 3. */
+.cpub-inspector-page-field--disabled { opacity: 0.65; }
+.cpub-inspector-page-field--disabled select { cursor: not-allowed; background: var(--surface2); }
+.cpub-inspector-page-soon {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-faint);
+  border: 1px solid var(--border2);
+  padding: 0 4px;
+  margin-left: var(--space-1);
+}
+
+.cpub-inspector-page-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.cpub-inspector-page-checkbox label {
+  font-size: var(--text-sm);
+  color: var(--text);
+}
+.cpub-inspector-page-checkbox input { cursor: pointer; }
+</style>

package/components/admin/layouts/AdminLayoutsInspectorRow.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * Row-config inspector (Phase 3e). Edits a row's styling config — gap,
+ * align, background, vertical padding. Dogfoods the SAME auto-form engine
+ * as the section inspector, fed the canonical `layoutRowConfigSchema` from
+ * `@commonpub/schema` (the exact schema the server validates row config
+ * against — no drift).
+ *
+ * Controlled: emits `update:config` with a fresh config object. The page
+ * replaces `row.config` → draft watcher → dirty → auto-save. Row config is
+ * nullable; we present an empty object to the form so a fresh row starts
+ * blank, and emit only the keys the admin actually sets.
+ */
+import type { LayoutRowResolved } from '@commonpub/server';
+import { layoutRowConfigSchema } from '@commonpub/schema';
+import { buildAutoForm } from '../../../composables/autoFormSchema';
+
+const props = defineProps<{ row: LayoutRowResolved }>();
+
+const emit = defineEmits<{
+  (e: 'update:config', value: Record<string, unknown>): void;
+}>();
+
+const model = buildAutoForm(layoutRowConfigSchema);
+
+const config = computed<Record<string, unknown>>(() => (props.row.config ?? {}) as Record<string, unknown>);
+
+const errors = computed<Record<string, string>>(() => {
+  const result = layoutRowConfigSchema.safeParse(config.value);
+  if (result.success) return {};
+  const map: Record<string, string> = {};
+  for (const issue of result.error.issues) {
+    const key = issue.path.map((p) => String(p)).join('.');
+    if (!(key in map)) map[key] = issue.message;
+  }
+  return map;
+});
+
+function onUpdate(value: Record<string, unknown>): void {
+  emit('update:config', value);
+}
+</script>
+
+<template>
+  <div class="cpub-inspector-row">
+    <header class="cpub-inspector-row-head">
+      <i class="fa-solid fa-grip-lines" aria-hidden="true"></i>
+      <span class="cpub-inspector-row-name">Row</span>
+    </header>
+
+    <AdminLayoutsAutoForm
+      :fields="model.fields"
+      :model-value="config"
+      :errors="errors"
+      :id-seed="`row-${row.id}`"
+      @update:model-value="onUpdate"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cpub-inspector-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.cpub-inspector-row-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--border2);
+}
+.cpub-inspector-row-head > i { color: var(--accent); font-size: var(--text-base); }
+.cpub-inspector-row-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+}
+</style>

package/components/admin/layouts/AdminLayoutsInspectorSection.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+/**
+ * Section-config inspector (Phase 3e). Renders the auto-generated form
+ * for the selected section's `config` blob, driven by the section's
+ * `configSchema` (Zod) via the `buildAutoForm` engine + the recursive
+ * `<AdminLayoutsAutoForm>` renderer.
+ *
+ * Controlled component: emits `update:config` with a fresh config object
+ * on every edit. The editor page replaces `section.config` with it →
+ * draft deep-watcher fires → dirty → existing 1.5s auto-save debounce.
+ * Single-flight save is untouched (we only mutate `draft`).
+ *
+ * Validation: the full config is `safeParse`d against the section's Zod
+ * schema on every change; issues surface inline per field (keyed by
+ * dot-joined path). This is the SOFT guide; the server's
+ * `validateSectionConfigs` is the hard gate.
+ *
+ * Edge states handled (plan §7.15):
+ *   - Unregistered section type (layer upgrade removed it) → error card.
+ *   - Empty schema (e.g. `stats`) → "no options" note.
+ *   - Schema-version drift → advisory banner.
+ */
+import type { LayoutSectionResolved } from '@commonpub/server';
+import { buildAutoForm } from '../../../composables/autoFormSchema';
+import { useSectionRegistry } from '../../../sections/registry';
+
+const props = defineProps<{ section: LayoutSectionResolved }>();
+
+const emit = defineEmits<{
+  (e: 'update:config', value: Record<string, unknown>): void;
+}>();
+
+const registry = useSectionRegistry();
+
+const def = computed(() => registry.get(props.section.type));
+
+const model = computed(() => {
+  const d = def.value;
+  if (!d) return null;
+  return buildAutoForm(d.configSchema);
+});
+
+/** Advisory only — the renderer migrates on load; this flags un-saved drift. */
+const versionDrift = computed<boolean>(() => {
+  const d = def.value;
+  return !!d && typeof props.section.schemaVersion === 'number' && props.section.schemaVersion !== d.schemaVersion;
+});
+
+/**
+ * Inline validation — safeParse the live config, flatten Zod issues into
+ * a dot-joined-path → message map the AutoForm looks fields up in.
+ */
+const errors = computed<Record<string, string>>(() => {
+  const d = def.value;
+  if (!d) return {};
+  const result = d.configSchema.safeParse(props.section.config);
+  if (result.success) return {};
+  const map: Record<string, string> = {};
+  for (const issue of result.error.issues) {
+    const key = issue.path.map((p) => String(p)).join('.');
+    // First issue per path wins (matches FormKit/native single-message UX).
+    if (!(key in map)) map[key] = issue.message;
+  }
+  return map;
+});
+
+function onUpdate(value: Record<string, unknown>): void {
+  emit('update:config', value);
+}
+</script>
+
+<template>
+  <div class="cpub-inspector-section">
+    <header class="cpub-inspector-section-head">
+      <i :class="['fa-solid', def?.icon ?? 'fa-puzzle-piece']" aria-hidden="true"></i>
+      <div class="cpub-inspector-section-head-text">
+        <span class="cpub-inspector-section-name">{{ def?.name ?? section.type }}</span>
+        <span class="cpub-inspector-section-type">{{ section.type }}</span>
+      </div>
+    </header>
+
+    <!-- Unregistered type — the layer dropped this section since save. -->
+    <div v-if="!def" class="cpub-inspector-section-unknown" role="alert">
+      <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+      <p>
+        Unknown section type <code>{{ section.type }}</code>. It may have been
+        removed in a layer upgrade. Its config can’t be edited here; remove the
+        section or restore the section type.
+      </p>
+    </div>
+
+    <template v-else>
+      <div v-if="versionDrift" class="cpub-inspector-section-drift" role="status">
+        <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+        <span>
+          This section was authored on schema v{{ section.schemaVersion }};
+          the current version is v{{ def!.schemaVersion }}. Save to persist any upgrade.
+        </span>
+      </div>
+
+      <p v-if="model?.isEmpty" class="cpub-inspector-section-empty">
+        This section has no configurable options.
+      </p>
+
+      <AdminLayoutsAutoForm
+        v-else-if="model"
+        :fields="model.fields"
+        :model-value="section.config"
+        :errors="errors"
+        :id-seed="`section-${section.id}`"
+        @update:model-value="onUpdate"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cpub-inspector-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.cpub-inspector-section-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--border2);
+}
+.cpub-inspector-section-head > i { color: var(--accent); font-size: var(--text-base); }
+.cpub-inspector-section-head-text { display: flex; flex-direction: column; gap: 1px; }
+.cpub-inspector-section-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+}
+.cpub-inspector-section-type {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-faint);
+}
+
+.cpub-inspector-section-empty,
+.cpub-inspector-section-unknown,
+.cpub-inspector-section-drift {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin: 0;
+}
+.cpub-inspector-section-empty { color: var(--text-faint); }
+
+.cpub-inspector-section-unknown,
+.cpub-inspector-section-drift {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border: var(--border-width-default) solid var(--border2);
+}
+.cpub-inspector-section-unknown {
+  background: var(--yellow-bg);
+  border-color: var(--yellow-border);
+}
+.cpub-inspector-section-unknown i { color: var(--yellow); margin-top: 2px; }
+.cpub-inspector-section-unknown code {
+  font-family: var(--font-mono);
+  background: var(--surface);
+  padding: 0 4px;
+}
+.cpub-inspector-section-drift i { color: var(--accent); margin-top: 2px; }
+.cpub-inspector-section-drift span { font-size: var(--text-xs); }
+</style>

package/components/admin/layouts/AdminLayoutsPalette.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/**
+ * Section palette — left column of the editor shell.
+ *
+ * Phase 3a.3 shipped READ-ONLY tiles (no drag). Phase 3b/A turns each
+ * tile into a drag source via <AdminLayoutsPaletteTile>'s makeDraggable.
+ * The drop side lives in <LayoutRow>'s makeDroppable; the shared
+ * `useLayoutDrag` module connects them.
+ *
+ * The categories order matches the palette grouping in
+ * docs/plans/layout-and-pages.md §7.2 — layout, content, data,
+ * editorial, interactive, embed, custom.
+ */
+import { computed } from 'vue';
+import { useSectionRegistry } from '../../../sections/registry';
+import type { SectionCategory } from '@commonpub/ui';
+import AdminLayoutsPaletteTile from './AdminLayoutsPaletteTile.vue';
+
+const CATEGORY_LABELS: Record<SectionCategory, string> = {
+  layout: 'Layout',
+  content: 'Content',
+  data: 'Data',
+  editorial: 'Editorial',
+  interactive: 'Interactive',
+  embed: 'Embed',
+  custom: 'Custom',
+};
+
+// Order for visual grouping in the palette.
+const CATEGORY_ORDER: SectionCategory[] = [
+  'layout', 'content', 'data', 'editorial', 'interactive', 'embed', 'custom',
+];
+
+const registry = useSectionRegistry();
+
+const grouped = computed(() => {
+  const byCat = registry.byCategory();
+  return CATEGORY_ORDER
+    .map((category) => ({
+      category,
+      label: CATEGORY_LABELS[category],
+      sections: byCat[category],
+    }))
+    .filter((g) => g.sections.length > 0);
+});
+</script>
+
+<template>
+  <aside class="cpub-admin-layouts-palette" aria-label="Section palette">
+    <header class="cpub-admin-layouts-palette-header">
+      <h2 class="cpub-admin-layouts-palette-title">Sections available</h2>
+      <p class="cpub-admin-layouts-palette-hint">
+        Drag a tile onto a row to add a section.
+      </p>
+    </header>
+
+    <div
+      v-for="group in grouped"
+      :key="group.category"
+      class="cpub-admin-layouts-palette-group"
+    >
+      <h3 class="cpub-admin-layouts-palette-group-title">{{ group.label }}</h3>
+      <ul class="cpub-admin-layouts-palette-list">
+        <AdminLayoutsPaletteTile
+          v-for="section in group.sections"
+          :key="section.type"
+          :section="section"
+        />
+      </ul>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.cpub-admin-layouts-palette {
+  display: flex; flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  background: var(--surface);
+  border-right: var(--border-width-default) solid var(--border);
+  overflow-y: auto;
+  height: 100%;
+}
+
+.cpub-admin-layouts-palette-header { border-bottom: 1px solid var(--border2); padding-bottom: var(--space-3); }
+.cpub-admin-layouts-palette-title {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-widest);
+  color: var(--text-dim);
+  margin: 0 0 var(--space-1) 0;
+  font-weight: var(--font-weight-semibold);
+}
+.cpub-admin-layouts-palette-hint {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  margin: 0;
+}
+
+.cpub-admin-layouts-palette-group { display: flex; flex-direction: column; gap: var(--space-2); }
+.cpub-admin-layouts-palette-group-title {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-faint);
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+}
+
+.cpub-admin-layouts-palette-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
+
+/* Tile-body styling moved to AdminLayoutsPaletteTile.vue's scoped
+   styles (Vue scoped styles are component-instance hashed). Palette
+   owns only the surrounding scroll container + group titles. */
+</style>