@commonpub/layer 0.24.0 → 0.25.0

package/components/admin/layouts/AdminLayoutsCanvas.vue

@@ -0,0 +1,332 @@
+<script setup lang="ts">
+/**
+ * Canvas — center column of the editor shell. Hosts the in-progress
+ * layout via <LayoutSlot :editable previewOverride>. The toolbar's
+ * viewport toggle sets `viewport`, which translates to a max-width
+ * cap on the inner canvas wrapper so admins can preview how the
+ * layout reflows at different breakpoints WITHOUT actually resizing
+ * the browser.
+ *
+ * Each zone the layout exposes gets a sub-pane. v1 ships the typical
+ * three-zone arrangement (full-width + main + sidebar); other shapes
+ * fall back to a single zone container.
+ */
+import { computed } from 'vue';
+import type { LayoutRecord } from '@commonpub/server';
+import type { LayoutPayload, LayoutRow as LayoutRowType } from '../../../composables/useLayout';
+import type { EditorSelection } from '../../../composables/useLayoutEditor';
+
+const props = withDefaults(defineProps<{
+  layout: LayoutRecord | null;
+  /** Simulated viewport from the toolbar. */
+  viewport?: 'mobile' | 'tablet' | 'desktop';
+  /**
+   * Phase 3b/A — selection callback passed down to <LayoutSlot>.
+   * The editor page wires this to `useLayoutEditor.select` so the
+   * inspector dispatcher switches when the admin clicks a section.
+   * Optional — without it, clicks are silent (canvas still renders).
+   */
+  onSelect?: (selection: EditorSelection) => void;
+  /** Currently-selected target — drives `--selected` chrome on sections/rows. */
+  selectedId?: EditorSelection | null;
+  /**
+   * Session 164 polish — "+ Add row" handler. Called with the zone slug
+   * the admin wants to add a row to. Editor page mutates draft +
+   * records to history + narrates. When absent, the Add row button is
+   * hidden (defensive: editable canvas without the callback means a
+   * parent forgot to wire it, NOT an intentional disabled state).
+   */
+  onAddRow?: (zoneSlug: string) => void;
+  /** Session 164 polish — remove row handler. Same wiring as onAddRow;
+   *  threaded through LayoutSlot to each LayoutRow's × button. */
+  onRemoveRow?: (zoneSlug: string, rowId: string) => void;
+}>(), {
+  viewport: 'desktop',
+  onSelect: undefined,
+  selectedId: null,
+  onAddRow: undefined,
+  onRemoveRow: undefined,
+});
+
+/**
+ * Phase 3c — getDraft closure for the row's resize handler. Same
+ * `props.layout` reference the canvas already renders against — for
+ * the editor, `editor.draft.value` IS the layout prop (the editor page
+ * binds `:layout="editor.draft.value"`). The resize composable mutates
+ * the live tree directly; the editor's deep watcher picks it up + the
+ * existing dirty/auto-save path fires. No new state.
+ */
+function getDraft(): LayoutRecord | null {
+  return props.layout;
+}
+
+// Session 162 P2.4 (R2 audit): LayoutPayload is now
+// `Pick<LayoutRecord, 'state' | 'pageMeta' | 'zones'>`, so a LayoutRecord
+// is structurally assignable as-is. The 25-line hand-built map this
+// replaced silently dropped any newly-added section field — a future
+// 'pinned' / 'theme' / etc would appear on the public render path but
+// vanish from the editor preview. Direct assignment makes the preview
+// shape track the live shape automatically.
+const payload = computed<LayoutPayload | null>(() => props.layout);
+
+const route = computed<string>(() => {
+  if (!props.layout) return '/';
+  const s = props.layout.scope;
+  if (s.type === 'route' || s.type === 'custom-page') return s.path;
+  return `/${s.key}`;
+});
+
+const zoneSlugs = computed<string[]>(() => {
+  if (!props.layout) return [];
+  return props.layout.zones.map((z) => z.zone);
+});
+
+/**
+ * The three zones <PageFrame> arranges (full-width above; main + sidebar
+ * grid below). The canvas maps each layout zone to the matching PageFrame
+ * slot via a dynamic slot name so the editor previews the REAL production
+ * arrangement instead of the old stacked equal-width boxes. Filtered to
+ * the known frame zones (v1 ships exactly these three).
+ */
+const FRAME_ZONES = ['full-width', 'main', 'sidebar'] as const;
+const frameZones = computed<string[]>(() =>
+  zoneSlugs.value.filter((z) => (FRAME_ZONES as readonly string[]).includes(z)),
+);
+
+const viewportWidthPx: Record<'mobile' | 'tablet' | 'desktop', string> = {
+  mobile: '375px',
+  tablet: '768px',
+  desktop: '100%',
+};
+
+/**
+ * Phase 3b/B — cross-row lookups. The dispatcher needs to find the
+ * source row of a section-instance drag, which can be in any zone.
+ * The Canvas has access to the WHOLE layout (vs LayoutRow which only
+ * has its own row), so it synthesises these once + passes them down.
+ *
+ * Closures over `props.layout` — re-evaluated on every layout mutation
+ * via Vue's reactivity. The closures themselves are stable references
+ * (LayoutRow re-renders on prop change), but the data they read is
+ * always the live, post-mutation tree.
+ */
+function findRow(rowId: string): LayoutRowType | null {
+  const l = props.layout;
+  if (!l) return null;
+  for (const zone of l.zones) {
+    for (const row of zone.rows) {
+      if (row.id === rowId) return row as LayoutRowType;
+    }
+  }
+  return null;
+}
+
+function findZone(rowId: string): string | null {
+  const l = props.layout;
+  if (!l) return null;
+  for (const zone of l.zones) {
+    for (const row of zone.rows) {
+      if (row.id === rowId) return zone.zone;
+    }
+  }
+  return null;
+}
+
+/**
+ * Phase 3b/B — keyboard cross-zone landing target. The "Move to zone…"
+ * popover on each section lets a keyboard user move a section to
+ * another zone WITHOUT pointer drag (WCAG 2.1.1 a11y path; per the
+ * a11y memory: drag-drop alone isn't enough — every operation needs a
+ * non-drag alternative).
+ *
+ * Landing rule: end of the FIRST row in the target zone. Predictable
+ * ("go to sidebar" → land at top of sidebar), no ambiguous row-picker,
+ * works with v1 layouts that have 1–2 rows per zone. After landing,
+ * the user can Move Up/Down + drag to refine. Returns null for zones
+ * with zero rows (button gets disabled — creating a row from cross-zone
+ * move is deferred to the "Add row" arc).
+ */
+function findFirstRowInZone(zoneSlug: string): LayoutRowType | null {
+  const l = props.layout;
+  if (!l) return null;
+  const z = l.zones.find((zone) => zone.zone === zoneSlug);
+  if (!z || z.rows.length === 0) return null;
+  return (z.rows[0] ?? null) as LayoutRowType | null;
+}
+</script>
+
+<template>
+  <!--
+    Phase 3b/A: @click.self on the canvas stage clears editor selection
+    (audit R3-3). The DnDProvider above us is exactly canvas-sized, so
+    its @click.self rarely fires; the stage's padded chrome (visible
+    blank area between zones) is the natural click-clear surface.
+    Per docs/plans/layout-and-pages.md §7.9 dispatcher pattern:
+    nothing selected → page-meta form. Clicking the stage chrome IS
+    "deselect" in a visual editor.
+  -->
+  <section
+    class="cpub-admin-layouts-canvas"
+    :data-viewport="viewport"
+    aria-label="Layout canvas"
+    @click.self="props.onSelect?.(null)"
+  >
+    <div
+      class="cpub-admin-layouts-canvas-stage"
+      :style="{ maxWidth: viewportWidthPx[viewport] }"
+      @click.self="props.onSelect?.(null)"
+    >
+      <div v-if="!layout" class="cpub-admin-layouts-canvas-empty">
+        <i class="fa-regular fa-folder-open"></i>
+        <p>Loading layout…</p>
+      </div>
+      <!--
+        Consolidation Stage 2: the canvas previews the layout through the
+        shared <PageFrame> — the SAME frame production uses (full-width
+        above; main + sidebar side-by-side; one max-width/sidebar-width).
+        Previously zones were stacked as equal-width labeled boxes, which
+        did NOT match what visitors see (broken WYSIWYG). Each zone keeps
+        its editor chrome (label + add-row) via a dynamic PageFrame slot;
+        the section DOM inside <LayoutSlot> is UNCHANGED so drag/resize
+        bindings are unaffected.
+      -->
+      <PageFrame v-else editable>
+        <template v-for="zoneSlug in frameZones" :key="zoneSlug" #[zoneSlug]>
+          <div class="cpub-admin-layouts-canvas-zone" :data-zone="zoneSlug">
+            <header class="cpub-admin-layouts-canvas-zone-label">
+              <span class="cpub-admin-layouts-canvas-zone-label-text">{{ zoneSlug }}</span>
+            </header>
+            <div
+              class="cpub-admin-layouts-canvas-zone-body"
+              @click.self="props.onSelect?.(null)"
+            >
+              <LayoutSlot
+                :route="route"
+                :zone="zoneSlug"
+                :preview-override="payload"
+                :editable="true"
+                :on-select="props.onSelect"
+                :selected-id="props.selectedId"
+                :find-row="findRow"
+                :find-zone="findZone"
+                :zone-slugs="zoneSlugs"
+                :find-first-row-in-zone="findFirstRowInZone"
+                :on-remove-row="props.onRemoveRow"
+                :get-draft="getDraft"
+              />
+              <!--
+                Session 164 polish (v1 blocker): "+ Add row". Without
+                this, a fresh layout (or a layout with an empty zone)
+                has no drop target — admin is stuck. Click → editor
+                page mutates draft.zones[i].rows + records to history
+                + narrates. Plan §7.2.
+                Renders only when the parent provided onAddRow (so the
+                public path can't accidentally light up an action button).
+              -->
+              <button
+                v-if="props.onAddRow"
+                type="button"
+                class="cpub-admin-layouts-canvas-add-row"
+                :aria-label="`Add row to ${zoneSlug} zone`"
+                @click.stop="props.onAddRow!(zoneSlug)"
+              >
+                <i class="fa-solid fa-plus" aria-hidden="true"></i>
+                <span>Add row</span>
+              </button>
+            </div>
+          </div>
+        </template>
+      </PageFrame>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-admin-layouts-canvas {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-6);
+  background: var(--surface2);
+  overflow-y: auto;
+  height: 100%;
+  min-width: 0;
+}
+
+.cpub-admin-layouts-canvas-stage {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  /* max-width is set dynamically by the viewport toggle (3a.5 toolbar). */
+  transition: max-width 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cpub-admin-layouts-canvas-stage { transition: none; }
+}
+
+.cpub-admin-layouts-canvas-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-8);
+  color: var(--text-faint);
+}
+
+.cpub-admin-layouts-canvas-zone {
+  background: var(--surface);
+  border: 1px solid var(--border2);
+}
+.cpub-admin-layouts-canvas-zone-label {
+  padding: var(--space-1) var(--space-3);
+  background: var(--surface2);
+  border-bottom: 1px solid var(--border2);
+}
+.cpub-admin-layouts-canvas-zone-label-text {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-widest);
+  color: var(--text-faint);
+}
+.cpub-admin-layouts-canvas-zone-body { padding: var(--space-4); }
+
+/* ------------------------------------------------------------------ */
+/* "+ Add row" button at the bottom of each zone. Dashed border picks  */
+/* up the existing editor-chrome convention (dashed hover outlines on  */
+/* rows / empty rows). Full-width within the zone so it reads as a     */
+/* drop target peer, not an icon button.                                */
+/* ------------------------------------------------------------------ */
+.cpub-admin-layouts-canvas-add-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-3);
+  margin-top: var(--space-3);
+  background: transparent;
+  border: 1px dashed var(--border2);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  cursor: pointer;
+  transition: color var(--transition-default), border-color var(--transition-default), background var(--transition-default);
+}
+.cpub-admin-layouts-canvas-add-row:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  border-style: solid;
+  background: var(--accent-bg);
+}
+.cpub-admin-layouts-canvas-add-row:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  color: var(--accent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cpub-admin-layouts-canvas-add-row { transition: none; }
+}
+</style>

package/components/admin/layouts/AdminLayoutsConflictModal.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+/**
+ * Conflict resolution modal — appears when the server returns 409
+ * on a save (another admin edited the layout in the same window).
+ *
+ * Phase 3a.6 ships THREE options (per session-160 UX audit — the
+ * two-option pattern forces a misclick risk; the safe-middle option
+ * lets the user step back without committing):
+ *   - "Reload their version" — re-fetch from server; LOCAL CHANGES LOST.
+ *     This is the default-focused safe action.
+ *   - "Keep editing here" — closes the modal; the user can copy text
+ *     out or decide later. Sticky banner reminds them they're in conflict.
+ *   - "Overwrite their changes" — re-send PUT without If-Match; their
+ *     edits are lost. Styled destructive; not at button-peer level with
+ *     the safe options (right side, red border).
+ *
+ * Per UX research synthesis (Notion/XWiki/Webflow patterns): "Force
+ * save" terminology is bureaucratic and doesn't name the consequence.
+ * "Overwrite their changes" names what actually happens. A real block-
+ * level diff is deferred to Phase 7 (versioning UI).
+ */
+
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps<{
+  /** Show/hide the modal. */
+  open: boolean;
+  /** Optional error message from the server. */
+  message?: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'refresh'): void;
+  (e: 'force-save'): void;
+  (e: 'close'): void;
+}>();
+
+// Focus the safe primary action when the modal opens. WCAG dialog
+// pattern: initial focus on the recommended-action button so screen
+// readers + keyboard users land on the safe choice, not the destructive
+// one. (Tab can still walk to the destructive button after.)
+//
+// `immediate: true` so initial mounting with :open=true also focuses
+// (catches the common-case where the parent toggles conflictOpen=true
+// and Vue re-renders the modal subtree from scratch).
+const primaryBtn = ref<HTMLButtonElement | null>(null);
+const dialogEl = ref<HTMLElement | null>(null);
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (isOpen) {
+      await nextTick();
+      primaryBtn.value?.focus();
+    }
+  },
+  { immediate: true },
+);
+
+// Esc to dismiss (per dialog ARIA pattern). The :open guard makes this
+// a no-op when the modal is closed; listener attached on client mount only.
+function onKeydown(e: KeyboardEvent): void {
+  if (props.open && e.key === 'Escape') {
+    e.preventDefault();
+    emit('close');
+  }
+}
+
+// Focus trap (session 165 round 5 — mirrors HelpOverlay's pattern).
+// When focus leaves the dialog while open, snap it back to the
+// safe-action primary button. The `dialog.contains(target)` check
+// allows free focus movement within the dialog (Tab walks Reload →
+// Keep editing → Overwrite, then wraps back to Reload via snap-back).
+// Forward-compatible — any future focusable added inside the dialog
+// naturally participates via the contains check.
+//
+// Topmost-only guard: if a later-mounted dialog is on top (rare; the
+// editor doesn't normally stack modals, and the parent coordinator
+// in [id].vue closes HelpOverlay when this one opens), let that
+// dialog's own trap own focus. Without the guard, two modals' traps
+// would fight in a focus ping-pong.
+function isTopmostDialog(): boolean {
+  if (typeof document === 'undefined') return false;
+  if (!dialogEl.value) return false;
+  const all = document.querySelectorAll('[role="dialog"], [role="alertdialog"]');
+  return all[all.length - 1] === dialogEl.value;
+}
+function onFocusIn(e: FocusEvent): void {
+  if (!props.open) return;
+  if (!isTopmostDialog()) return;
+  const target = e.target as Node | null;
+  if (!target) return;
+  const dlg = dialogEl.value;
+  if (!dlg) return;
+  if (dlg.contains(target)) return;
+  primaryBtn.value?.focus();
+}
+
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    window.addEventListener('keydown', onKeydown);
+    document.addEventListener('focusin', onFocusIn);
+  }
+});
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', onKeydown);
+    document.removeEventListener('focusin', onFocusIn);
+  }
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="cpub-admin-layouts-conflict-backdrop"
+      role="presentation"
+      @click.self="emit('close')"
+    >
+      <div
+        ref="dialogEl"
+        class="cpub-admin-layouts-conflict-modal"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="cpub-admin-layouts-conflict-title"
+        aria-describedby="cpub-admin-layouts-conflict-body"
+      >
+        <header class="cpub-admin-layouts-conflict-header">
+          <i class="fa-solid fa-triangle-exclamation cpub-admin-layouts-conflict-icon"></i>
+          <h2 id="cpub-admin-layouts-conflict-title" class="cpub-admin-layouts-conflict-title">
+            Version conflict
+          </h2>
+        </header>
+        <div id="cpub-admin-layouts-conflict-body" class="cpub-admin-layouts-conflict-body">
+          <p>{{ message ?? 'Another admin saved this layout while you were editing.' }}</p>
+          <p class="cpub-admin-layouts-conflict-body-hint">
+            Reload their version (recommended) — or keep your edits visible so you can copy what
+            you need before deciding. Overwriting their changes is destructive and final.
+          </p>
+        </div>
+        <footer class="cpub-admin-layouts-conflict-footer">
+          <button
+            ref="primaryBtn"
+            type="button"
+            class="cpub-admin-layouts-conflict-btn cpub-admin-layouts-conflict-btn--primary"
+            @click="emit('refresh')"
+          >
+            <i class="fa-solid fa-arrows-rotate"></i>
+            <span>Reload their version</span>
+          </button>
+          <button
+            type="button"
+            class="cpub-admin-layouts-conflict-btn"
+            @click="emit('close')"
+          >
+            <i class="fa-solid fa-pause"></i>
+            <span>Keep editing here</span>
+          </button>
+          <button
+            type="button"
+            class="cpub-admin-layouts-conflict-btn cpub-admin-layouts-conflict-btn--danger"
+            @click="emit('force-save')"
+          >
+            <i class="fa-solid fa-arrow-up-from-bracket"></i>
+            <span>Overwrite their changes</span>
+          </button>
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.cpub-admin-layouts-conflict-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--color-surface-overlay, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--space-4);
+}
+
+.cpub-admin-layouts-conflict-modal {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-lg);
+  max-width: 480px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.cpub-admin-layouts-conflict-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border2);
+}
+.cpub-admin-layouts-conflict-icon {
+  font-size: var(--text-xl);
+  color: var(--red);
+}
+.cpub-admin-layouts-conflict-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+}
+
+.cpub-admin-layouts-conflict-body {
+  padding: var(--space-4);
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.cpub-admin-layouts-conflict-body-hint {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin: 0;
+}
+.cpub-admin-layouts-conflict-body p { margin: 0; }
+
+.cpub-admin-layouts-conflict-footer {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border-top: 1px solid var(--border2);
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.cpub-admin-layouts-conflict-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  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-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  cursor: pointer;
+}
+.cpub-admin-layouts-conflict-btn:hover { background: var(--surface2); }
+.cpub-admin-layouts-conflict-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.cpub-admin-layouts-conflict-btn--primary {
+  background: var(--accent);
+  color: var(--surface);
+  border-color: var(--accent);
+}
+.cpub-admin-layouts-conflict-btn--primary:hover {
+  background: var(--accent);
+  filter: brightness(1.1);
+  color: var(--surface);
+}
+.cpub-admin-layouts-conflict-btn--danger {
+  color: var(--red);
+  border-color: var(--red);
+}
+.cpub-admin-layouts-conflict-btn--danger:hover { background: var(--red); color: var(--surface); }
+</style>