@commonpub/layer 0.24.0 → 0.25.0

package/components/LayoutSlot.vue

@@ -38,10 +38,11 @@
  * an admin-only error placeholder.
  */
 import { computed } from 'vue';
-import type { LayoutSection, LayoutPayload, LayoutZoneClient } from '../composables/useLayout';
-import { useSectionRegistry } from '../sections/registry';
+import type { LayoutPayload, LayoutZoneClient, LayoutRow as LayoutRowType } from '../composables/useLayout';
+import type { EditorSelection } from '../composables/useLayoutEditor';
+import LayoutRow from './LayoutRow.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   /** Route path this layout is for — e.g. '/', '/blog', '/hubs/foo'. */
   route: string;
   /** Zone slug — must match a zone declared in the layout's storage. */
@@ -52,53 +53,85 @@ const props = defineProps<{
    * pane to render the in-progress draft without a save round-trip.
    */
   previewOverride?: LayoutPayload | null;
-}>();
+  /**
+   * Editor mode flag. When `true`, the row + section wrappers get
+   * `--editable` modifier classes (dashed hover outline + type-label
+   * badge) AND Phase 3b/A's selection chrome (tabindex, click→select,
+   * keyboard activation, --selected outline). Drag-drop itself wires
+   * up in the next commits of this session via @vue-dnd-kit/core
+   * makeDraggable/makeDroppable on the section/row containers.
+   *
+   * Default `false` so public render paths (pages/index.vue,
+   * [...customPath].vue) are byte-pattern unchanged. The selection
+   * callback prop is optional — its absence makes the section
+   * affordances inert (still focusable visually but click is a no-op),
+   * so consumers without an editor in scope don't accidentally light
+   * up selection behavior.
+   *
+   * See docs/plans/phase-3-editor.md Phase 3a.1 + 3b/A.
+   */
+  editable?: boolean;
+  /**
+   * Selection callback — called when the admin clicks (or presses
+   * Enter/Space on) a section in editable mode. The editor page wires
+   * this to `useLayoutEditor.select` so the inspector dispatcher
+   * switches to the section-config form. Optional — when absent,
+   * editable=true still paints the chrome but click is inert.
+   */
+  onSelect?: (selection: EditorSelection) => void;
+  /**
+   * The currently-selected target — drives the `--selected` modifier
+   * class on the section or row wrapper. Read from the editor's
+   * reactive `selectedId` ref upstream so the highlight updates without
+   * a re-render contract. Optional; defaults to null (no highlight).
+   */
+  selectedId?: EditorSelection | null;
+  /**
+   * Phase 3b/B — cross-zone lookup, threaded down to each LayoutRow's
+   * drop handler. Synthesised by AdminLayoutsCanvas from the editor's
+   * full draft (which the public render path doesn't have access to).
+   * Without it, cross-row drops fall back to noop in the dispatcher.
+   */
+  findRow?: (rowId: string) => LayoutRowType | null;
+  /** Phase 3b/B — zone-of-row lookup for narration. */
+  findZone?: (rowId: string) => string | null;
+  /** Phase 3b/B — all zone slugs in the active layout. Drives the
+   *  "Move to zone…" popover's option list. */
+  zoneSlugs?: string[];
+  /** Phase 3b/B — landing-row lookup for the "Move to zone…" path. */
+  findFirstRowInZone?: (zoneSlug: string) => LayoutRowType | null;
+  /** Session 164 polish — remove row callback threaded down to LayoutRow. */
+  onRemoveRow?: (zoneSlug: string, rowId: string) => void;
+  /**
+   * Phase 3c — closure threading the editor's live draft into the
+   * resize composable, via LayoutRow. The closure stays optional so
+   * LayoutSlot's public render path (no editor in scope) skips it +
+   * the resize handle isn't rendered. Synthesised by AdminLayoutsCanvas
+   * from `editor.draft` so the row's resize closure sees the LIVE
+   * mutating draft (not the previewOverride snapshot — those diverge
+   * mid-edit).
+   */
+  getDraft?: () => import('@commonpub/server').LayoutRecord | null;
+}>(), {
+  previewOverride: null,
+  editable: false,
+  onSelect: undefined,
+  selectedId: null,
+  findRow: undefined,
+  findZone: undefined,
+  zoneSlugs: () => [],
+  findFirstRowInZone: undefined,
+  onRemoveRow: undefined,
+  getDraft: undefined,
+});
 
 const { layout, pending } = useLayout(props.route);
-const features = useFeatures();
-const { isAuthenticated, user } = useAuth();
-const sectionRegistry = useSectionRegistry();
 
 const activeLayout = computed(() => props.previewOverride ?? layout.value);
 
 const zone = computed<LayoutZoneClient | null>(
   () => activeLayout.value?.zones.find((z: LayoutZoneClient) => z.zone === props.zone) ?? null,
 );
-
-function isFeatureOn(featureGate: string | undefined): boolean {
-  if (!featureGate) return true;
-  return (features.features.value as unknown as Record<string, boolean>)?.[featureGate] ?? false;
-}
-
-function currentRole(): string {
-  if (!isAuthenticated.value) return 'anonymous';
-  return user.value?.role ?? 'member';
-}
-
-function sectionVisible(s: LayoutSection): boolean {
-  if (!s.enabled) return false;
-  const v = s.visibility;
-  if (!v) return true;
-  if (v.features && v.features.some((f: string) => !isFeatureOn(f))) return false;
-  if (v.roles && v.roles.length > 0 && !v.roles.includes(currentRole())) return false;
-  // hideAt is a viewport-level filter — applied via CSS, not here
-  return true;
-}
-
-/**
- * Resolve colSpan honouring the responsive fallback chain. Defers the
- * viewport choice to CSS — we use `--cpub-section-cols-{sm|md|lg}`
- * custom properties on each section and let media queries pick which
- * one becomes the active `grid-column: span N` via `attr()`-style
- * values. For now, just use the base colSpan (12 = full width on mobile
- * happens via the row's flex-wrap).
- */
-function resolveColSpan(s: LayoutSection, viewport: 'lg' | 'md' | 'sm'): number {
-  if (viewport === 'lg') return s.responsive?.lg ?? s.colSpan;
-  if (viewport === 'md') return s.responsive?.md ?? s.responsive?.lg ?? s.colSpan;
-  // Mobile default 12 unless explicitly overridden
-  return s.responsive?.sm ?? 12;
-}
 </script>
 
 <template>
@@ -111,67 +144,32 @@ function resolveColSpan(s: LayoutSection, viewport: 'lg' | 'md' | 'sm'): number
     All four are valid "absence" cases — fall back to legacy rendering
     via the page's v-if structure.
   -->
+  <!--
+    Phase 3b/A extraction: row + section rendering moved to <LayoutRow>
+    so each row instance can own its own `makeDroppable` template ref
+    (dnd-kit composables run per-component setup; one row instance per
+    component is the natural fit). The HTML SHAPE is preserved — same
+    .cpub-layout-row + .cpub-layout-section classes, same data-* attrs
+    — so existing tests + selectors keep working unchanged.
+  -->
   <template v-if="zone && zone.rows.length > 0">
-    <div
+    <LayoutRow
       v-for="row in zone.rows"
       :key="row.id"
-      class="cpub-layout-row"
-      :data-row-id="row.id"
-      :data-gap="row.config?.gap ?? 'md'"
-      :data-align="row.config?.align ?? 'stretch'"
-      :data-padding-y="row.config?.paddingY ?? 'none'"
-      :style="row.config?.background ? { background: row.config.background } : {}"
-    >
-      <div
-        v-for="section in row.sections.filter(sectionVisible)"
-        :key="section.id"
-        class="cpub-layout-section"
-        :data-section-id="section.id"
-        :data-section-type="section.type"
-        :data-hide-sm="section.visibility?.hideAt?.includes('sm') ? 'true' : 'false'"
-        :data-hide-md="section.visibility?.hideAt?.includes('md') ? 'true' : 'false'"
-        :data-hide-lg="section.visibility?.hideAt?.includes('lg') ? 'true' : 'false'"
-        :style="{
-          '--cpub-section-cols-sm': resolveColSpan(section, 'sm'),
-          '--cpub-section-cols-md': resolveColSpan(section, 'md'),
-          '--cpub-section-cols-lg': resolveColSpan(section, 'lg'),
-        }"
-      >
-        <!--
-          Section render path:
-            1. Look up the section's `type` in the registry (one shared
-               instance per app process, populated at module-load time in
-               sections/registry.ts).
-            2. If registered, render via <component :is> with the section's
-               `config` + computed `meta`. Vue's component-resolver handles
-               both functional + SFC renderers.
-            3. If NOT registered, fall back to the admin-only placeholder
-               so admins can see "this section type isn't installed" while
-               end users see nothing for the section (an unknown section
-               shouldn't leak rendering debug info to the public).
-        -->
-        <component
-          v-if="sectionRegistry.has(section.type)"
-          :is="sectionRegistry.get(section.type)!.component"
-          :config="section.config"
-          :meta="{
-            route,
-            zone,
-            isPreview: !!previewOverride,
-            effectiveColSpan: resolveColSpan(section, 'lg'),
-            sectionId: section.id,
-          }"
-        />
-        <div
-          v-else
-          class="cpub-layout-section-placeholder"
-          :aria-label="`Unregistered section type: ${section.type}`"
-        >
-          <code>{{ section.type }}</code>
-          <span class="cpub-layout-section-placeholder-hint">section type not registered</span>
-        </div>
-      </div>
-    </div>
+      :row="row"
+      :route="route"
+      :zone="zone.zone"
+      :editable="editable"
+      :is-preview="!!previewOverride"
+      :on-select="onSelect"
+      :selected-id="selectedId"
+      :find-row="findRow"
+      :find-zone="findZone"
+      :zone-slugs="zoneSlugs"
+      :find-first-row-in-zone="findFirstRowInZone"
+      :on-remove-row="onRemoveRow"
+      :get-draft="getDraft"
+    />
   </template>
 
   <!-- Loading shimmer while initial fetch is in flight (no layout payload yet) -->
@@ -182,68 +180,12 @@ function resolveColSpan(s: LayoutSection, viewport: 'lg' | 'md' | 'sm'): number
 </template>
 
 <style scoped>
-.cpub-layout-row {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: var(--space-4);
-  width: 100%;
-}
-.cpub-layout-row[data-gap='none'] { gap: 0; }
-.cpub-layout-row[data-gap='sm']   { gap: var(--space-2); }
-.cpub-layout-row[data-gap='md']   { gap: var(--space-4); }
-.cpub-layout-row[data-gap='lg']   { gap: var(--space-6); }
-
-.cpub-layout-row[data-align='center'] { align-items: center; }
-.cpub-layout-row[data-align='start']  { align-items: start; }
-.cpub-layout-row[data-align='stretch'] { align-items: stretch; }
-
-.cpub-layout-row[data-padding-y='sm'] { padding-block: var(--space-2); }
-.cpub-layout-row[data-padding-y='md'] { padding-block: var(--space-4); }
-.cpub-layout-row[data-padding-y='lg'] { padding-block: var(--space-6); }
-.cpub-layout-row[data-padding-y='xl'] { padding-block: var(--space-8); }
-
-/* Section span: default to lg (desktop). Media queries swap.
-   --cpub-section-cols-* are set per-section via inline style. */
-.cpub-layout-section {
-  grid-column: span var(--cpub-section-cols-lg, 12);
-  min-width: 0;
-}
-
-@media (max-width: 1024px) {
-  .cpub-layout-section { grid-column: span var(--cpub-section-cols-md, var(--cpub-section-cols-lg, 12)); }
-}
-@media (max-width: 640px) {
-  .cpub-layout-section { grid-column: span var(--cpub-section-cols-sm, 12); }
-}
-
-/* hideAt — orthogonal to colSpan. Use display:none so layout doesn't reserve space. */
-.cpub-layout-section[data-hide-sm='true'] { @media (max-width: 640px) { display: none; } }
-.cpub-layout-section[data-hide-md='true'] { @media (min-width: 641px) and (max-width: 1024px) { display: none; } }
-.cpub-layout-section[data-hide-lg='true'] { @media (min-width: 1025px) { display: none; } }
-
-/* Placeholder shown when no renderer is registered for the section type */
-.cpub-layout-section-placeholder {
-  padding: var(--space-4);
-  background: var(--surface2);
-  border: 1px dashed var(--border2);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  color: var(--text-dim);
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: center;
-}
-.cpub-layout-section-placeholder code {
-  color: var(--accent);
-}
-.cpub-layout-section-placeholder-hint {
-  font-size: var(--text-xs);
-  color: var(--text-faint);
-}
-
-/* Skeleton loading state */
+/*
+ * LayoutSlot is now just a zone walker. All row + section chrome moved
+ * to LayoutRow.vue in Phase 3b/A so per-row makeDroppable can attach
+ * to its own template ref. Only the skeleton loader (used when
+ * useLayout is still in flight) lives here.
+ */
 .cpub-layout-skeleton {
   display: flex;
   flex-direction: column;

package/components/PageFrame.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+/**
+ * PageFrame — the ONE canonical page frame: arranges the three standard
+ * zones (full-width above; main + sidebar grid below) at a single
+ * max-width + single sidebar width + single responsive collapse.
+ *
+ * ## Why this exists
+ *
+ * The "frame" (how zones are arranged + sized) was hand-duplicated in
+ * every page, and the copies drifted into FOUR divergent definitions:
+ *   - homepage  `index.vue` `.cpub-main-layout`      → 1280px, `1fr 300px`, pad 28/32/48, gap 32
+ *   - custom    `[...customPath].vue`                → 1280px, `minmax(0,1fr) 320px`, pad var(--space-4)
+ *   - editor    `AdminLayoutsCanvas.vue`             → 375/768/100%, NO main+sidebar grid (zones stacked in boxes)
+ * → the editor preview was structurally wrong vs production (broken
+ * WYSIWYG) and homepage vs custom-page disagreed (300 vs 320 sidebar).
+ * This collapses them to one, using the LIVE HOMEPAGE's exact values
+ * (the homepage is the primary live surface the editor previews) so
+ * adoption is WYSIWYG-faithful. See `LayoutSlot.vue` header.
+ *
+ * ## API: slots, not props
+ *
+ * Named slots `#full-width` / `#main` / `#sidebar` so callers keep their
+ * bespoke zone content (homepage's mobile-hoist / powered-badge; the
+ * editor's per-zone labels + add-row). Each region renders only when its
+ * slot has content — checked via `$slots` in the template (NOT a computed
+ * over `useSlots()`, which isn't reactive and can go stale).
+ *
+ * `editable` does NOT change the arrangement (the editor must preview the
+ * REAL frame); it only flags edit mode + is forwarded to the zone
+ * scoped-slots so the editor canvas can wrap each region with its own
+ * chrome without re-diverging the layout.
+ *
+ * ## Full-width is FULL-BLEED
+ *
+ * The `#full-width` slot spans the full container width (edge-to-edge) —
+ * matching the live homepage, where the full-width LayoutSlot is a direct
+ * child of the page root (NO max-width) and only `.cpub-main-layout`
+ * (main+sidebar) is capped at 1280. So the max-width / page padding live on
+ * `.cpub-page-frame-grid`, NOT the outer frame; the outer frame is a plain
+ * full-width block. (Verified against `index.vue` + the live commonpub.io
+ * homepage — the hero renders edge-to-edge.)
+ *
+ * Uniquely-named `cpub-page-frame-*` classes per feedback-view-identity-classes.
+ * `var(--*)` only — the frame's literal values live in `--cpub-frame-*`
+ * custom props (one place; Phase 4 frame variants override them).
+ */
+withDefaults(defineProps<{ editable?: boolean }>(), { editable: false });
+</script>
+
+<template>
+  <div class="cpub-page-frame" :class="{ 'cpub-page-frame--editable': editable }">
+    <div v-if="$slots['full-width']" class="cpub-page-frame-full">
+      <slot name="full-width" :editable="editable" />
+    </div>
+
+    <div
+      v-if="$slots.main || $slots.sidebar"
+      class="cpub-page-frame-grid"
+      :data-with-sidebar="$slots.sidebar ? 'yes' : 'no'"
+    >
+      <main v-if="$slots.main" class="cpub-page-frame-main">
+        <slot name="main" :editable="editable" />
+      </main>
+      <aside v-if="$slots.sidebar" class="cpub-page-frame-sidebar">
+        <slot name="sidebar" :editable="editable" />
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-page-frame {
+  /* Canonical frame tokens — ONE place. Values replicate the live homepage
+     so the editor canvas (which previews the homepage layout via PageFrame)
+     is faithful. Override on a wrapper for Phase 4 frame variants. */
+  --cpub-frame-max: 1280px;
+  --cpub-frame-sidebar: 300px;
+  --cpub-frame-gap: 32px;
+  --cpub-frame-pad: 28px 32px 48px;
+  /* Plain full-width block — NO max-width / padding here (matches the
+     homepage's plain root <div>). The cap lives on the grid below so the
+     full-width slot stays edge-to-edge. */
+  width: 100%;
+}
+
+/* Full-bleed: spans the whole frame width (= the hero edge-to-edge). */
+.cpub-page-frame-full { width: 100%; }
+
+/* The constrained content area (main + sidebar) — this is the equivalent of
+   the homepage's `.cpub-main-layout`. */
+.cpub-page-frame-grid {
+  max-width: var(--cpub-frame-max);
+  margin: 0 auto;
+  padding: var(--cpub-frame-pad);
+  display: grid;
+  gap: var(--cpub-frame-gap);
+  align-items: start;
+}
+.cpub-page-frame-grid[data-with-sidebar='yes'] {
+  grid-template-columns: minmax(0, 1fr) var(--cpub-frame-sidebar);
+}
+.cpub-page-frame-grid[data-with-sidebar='no'] {
+  grid-template-columns: 1fr;
+}
+.cpub-page-frame-main { min-width: 0; }
+
+/* Sidebar collapses below main on tablet/phone (matches the homepage). */
+@media (max-width: 1024px) {
+  .cpub-page-frame-grid[data-with-sidebar='yes'] {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 640px) {
+  .cpub-page-frame-grid { padding: 24px 16px; }
+}
+</style>

package/components/admin/layouts/AdminLayoutsAnnouncer.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * <AdminLayoutsAnnouncer> — the visible-to-screen-readers, hidden-to-
+ * sighted-users companion to `useLayoutAnnouncer`. Mirrors the
+ * singleton refs into TWO live regions: one ASSERTIVE for drag/drop +
+ * Move Up/Down (time-critical), one POLITE for undo/redo (informational).
+ *
+ * Why two regions? The assertive region INTERRUPTS whatever the SR was
+ * announcing, which is right for drag — the user's next arrow press
+ * lands on the new state, so they need the prior result NOW. But undo
+ * is the user telling the editor what to do; the editor's
+ * acknowledgement shouldn't interrupt — it should queue politely. ARIA
+ * 1.2 explicitly supports this kind of dual-channel design (a single
+ * page can have multiple live regions).
+ *
+ * Each region carries its own `role` + `aria-live` pairing:
+ *   - assertive: `role="status"` + explicit `aria-live="assertive"`.
+ *     ARIA 1.2 defines status's implicit aria-live as "polite"; the
+ *     explicit attribute overrides per the spec ("Authors MAY override
+ *     implicit values"). The pair reaches both screen reader families
+ *     (NVDA/JAWS read the explicit aria-live; VoiceOver reads the role).
+ *   - polite: `role="status"` with no explicit aria-live, so the
+ *     implicit "polite" applies. Cleaner than `aria-live="polite"` on
+ *     `role="status"` (redundant by spec).
+ *
+ * `aria-atomic="true"` on BOTH so the whole message is read on change,
+ * not just the diff — drag narration like "moved" + "3 of 5" needs to
+ * land as one phrase, and undo's "Undid: <label>" needs the label.
+ *
+ * Mount this ONCE per editor page; the singleton design means
+ * multiple instances would mirror identical content (harmless but
+ * wasteful).
+ */
+import { useLayoutAnnouncer } from '../../../composables/useLayoutAnnouncer';
+
+const { message, politeMessage } = useLayoutAnnouncer();
+</script>
+
+<template>
+  <!-- Assertive: drag/drop + Move Up/Down state changes. -->
+  <div
+    role="status"
+    aria-live="assertive"
+    aria-atomic="true"
+    class="cpub-sr-only"
+  >{{ message }}</div>
+  <!-- Polite: undo/redo + non-time-critical confirmations. -->
+  <div
+    role="status"
+    aria-atomic="true"
+    class="cpub-sr-only"
+  >{{ politeMessage }}</div>
+</template>