@commonpub/layer 0.24.0 → 0.25.0

package/pages/admin/layouts/index.vue

@@ -0,0 +1,356 @@
+<script setup lang="ts">
+/**
+ * /admin/layouts — list page.
+ *
+ * Phase 3a.2. Lists all layouts via GET /api/admin/layouts (gated on
+ * admin + layoutEngine). Rows: scope label, name, state pill, last
+ * updated, actions (edit, delete). Click a row → /admin/layouts/[id].
+ *
+ * Creation flow lives on the editor page; this page is read + delete
+ * only for v1. New layouts come from:
+ *   - the homepage migration (POST /api/admin/layouts/migrate-homepage)
+ *   - the custom-page wizard (Phase 2 catch-all — POST /api/admin/layouts)
+ * Both already exist server-side; the editor pages 3a.3+ will surface them.
+ */
+import type { LayoutRecord } from '@commonpub/server';
+
+definePageMeta({
+  layout: 'admin',
+  middleware: ['auth', 'admin-layouts'],
+});
+useSeoMeta({ title: `Layouts — Admin — ${useSiteName()}` });
+
+const toast = useToast();
+const { data: layouts, refresh, pending } = await useFetch<LayoutRecord[]>(
+  '/api/admin/layouts',
+);
+
+function scopeLabel(scope: LayoutRecord['scope']): string {
+  if (scope.type === 'route') return scope.path;
+  if (scope.type === 'custom-page') return scope.path;
+  return `virtual:${scope.key}`;
+}
+
+function scopeKind(scope: LayoutRecord['scope']): string {
+  if (scope.type === 'route') return 'Route';
+  if (scope.type === 'custom-page') return 'Custom page';
+  return 'Virtual';
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString();
+}
+
+// Round-3 audit fix: real migration trigger (was a misleading link to
+// the legacy editor). Wires POST /api/admin/layouts/migrate-homepage.
+const migrating = ref<boolean>(false);
+
+async function migrateHomepage(): Promise<void> {
+  if (migrating.value) return;
+  migrating.value = true;
+  try {
+    const result = await $fetch<{ migrated: boolean; reason?: string; layoutId?: string }>(
+      '/api/admin/layouts/migrate-homepage',
+      { method: 'POST', body: {} },
+    );
+    if (result.migrated) {
+      toast.success('Homepage migrated to layout engine');
+      await refresh();
+    } else if (result.reason === 'layout-already-exists') {
+      toast.show('A homepage layout already exists — opening it');
+      await refresh();
+    } else {
+      toast.show(result.reason ?? 'Migration finished');
+      await refresh();
+    }
+  } catch (err) {
+    const e = err as { statusMessage?: string; message?: string };
+    toast.error(e.statusMessage ?? e.message ?? 'Migration failed');
+  } finally {
+    migrating.value = false;
+  }
+}
+
+async function deleteLayout(layout: LayoutRecord): Promise<void> {
+  if (
+    !confirm(
+      `Delete layout "${layout.name}" (${scopeLabel(layout.scope)})?\n\nThis cannot be undone. If a route, the page falls back to its legacy renderer.`,
+    )
+  ) {
+    return;
+  }
+  // R4 audit P1 fix: homepage scope gets an extra confirm + the special
+  // X-Cpub-Confirm-Homepage-Delete header (the API refuses without it).
+  // Two prompts is intentional — deleting the homepage layout nukes
+  // its entire publish history.
+  const isHomepage =
+    layout.scope.type === 'route' && layout.scope.path === '/';
+  const headers: Record<string, string> = {};
+  if (isHomepage) {
+    if (
+      !confirm(
+        'You are deleting the HOMEPAGE layout. This destroys all publish history. The homepage will fall back to the legacy renderer until re-migrated. Continue?',
+      )
+    ) {
+      return;
+    }
+    headers['X-Cpub-Confirm-Homepage-Delete'] = '1';
+  }
+  try {
+    await $fetch(`/api/admin/layouts/${layout.id}`, { method: 'DELETE', headers });
+    toast.success('Layout deleted');
+    await refresh();
+  } catch (err) {
+    const e = err as { statusMessage?: string; message?: string };
+    toast.error(e.statusMessage ?? e.message ?? 'Failed to delete layout');
+  }
+}
+
+// Sort: routes first (by path), then custom-pages, then virtuals.
+const sortedLayouts = computed<LayoutRecord[]>(() => {
+  if (!layouts.value) return [];
+  const buckets: Record<'route' | 'custom-page' | 'virtual', LayoutRecord[]> = {
+    'route': [],
+    'custom-page': [],
+    'virtual': [],
+  };
+  for (const l of layouts.value) buckets[l.scope.type].push(l);
+  for (const arr of Object.values(buckets)) {
+    arr.sort((a, b) => scopeLabel(a.scope).localeCompare(scopeLabel(b.scope)));
+  }
+  return [...buckets.route, ...buckets['custom-page'], ...buckets.virtual];
+});
+</script>
+
+<template>
+  <div class="cpub-admin-layouts">
+    <header class="cpub-admin-layouts-header">
+      <div>
+        <h1 class="cpub-admin-layouts-title">Layouts</h1>
+        <p class="cpub-admin-layouts-subtitle">
+          Visual editor for every route, custom page, and virtual zone on this instance.
+        </p>
+      </div>
+    </header>
+
+    <div v-if="pending" class="cpub-admin-layouts-loading">
+      <i class="fa-solid fa-circle-notch fa-spin"></i> Loading layouts…
+    </div>
+
+    <template v-else-if="sortedLayouts.length === 0">
+      <!--
+        Empty state — single icon + headline + one-line description +
+        single primary action, per Carbon + Mobbin SaaS empty-state
+        synthesis. Skipping illustration on purpose: the sharp-corner +
+        mono UI label aesthetic reads as intentional with just text.
+
+        Round-3 audit fix: the primary CTA now actually fires the
+        migration endpoint (POST /api/admin/layouts/migrate-homepage)
+        instead of misleading-linking to the legacy /admin/homepage editor.
+      -->
+      <div class="cpub-admin-layouts-empty">
+        <i class="fa-regular fa-folder-open cpub-admin-layouts-empty-icon" aria-hidden="true"></i>
+        <h2 class="cpub-admin-layouts-empty-text">No layouts yet</h2>
+        <p class="cpub-admin-layouts-empty-hint">
+          Layouts arrange sections — hero, feed, blocks — into reusable page templates.
+          Start by migrating your existing homepage from the legacy editor.
+        </p>
+        <button
+          type="button"
+          class="cpub-admin-layouts-empty-cta"
+          :disabled="migrating"
+          @click="migrateHomepage"
+        >
+          <i
+            :class="migrating
+              ? 'fa-solid fa-circle-notch fa-spin'
+              : 'fa-solid fa-house-circle-check'"
+            aria-hidden="true"
+          ></i>
+          <span>{{ migrating ? 'Migrating…' : 'Migrate homepage to layout' }}</span>
+        </button>
+        <p class="cpub-admin-layouts-empty-secondary">
+          Or
+          <NuxtLink to="/admin/homepage" class="cpub-admin-layouts-empty-link">edit the legacy homepage</NuxtLink>
+          first.
+        </p>
+      </div>
+    </template>
+
+    <template v-else>
+      <table class="cpub-admin-layouts-table">
+        <thead>
+          <tr>
+            <th>Scope</th>
+            <th>Name</th>
+            <th>State</th>
+            <th>Last updated</th>
+            <th class="cpub-admin-layouts-actions-col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="layout in sortedLayouts" :key="layout.id">
+            <td>
+              <span class="cpub-admin-layouts-scope-kind">{{ scopeKind(layout.scope) }}</span>
+              <code class="cpub-admin-layouts-scope-label">{{ scopeLabel(layout.scope) }}</code>
+            </td>
+            <td>{{ layout.name }}</td>
+            <td>
+              <span
+                class="cpub-admin-layouts-state"
+                :data-state="layout.state"
+              >{{ layout.state }}</span>
+            </td>
+            <td>{{ formatDate(layout.updatedAt) }}</td>
+            <td>
+              <div class="cpub-admin-layouts-actions">
+                <NuxtLink
+                  :to="`/admin/layouts/${layout.id}`"
+                  class="cpub-admin-layouts-btn"
+                  :aria-label="`Edit layout ${layout.name}`"
+                >
+                  <i class="fa-solid fa-pen"></i>
+                  <span>Edit</span>
+                </NuxtLink>
+                <button
+                  type="button"
+                  class="cpub-admin-layouts-btn cpub-admin-layouts-btn--danger"
+                  :aria-label="`Delete layout ${layout.name}`"
+                  @click="deleteLayout(layout)"
+                >
+                  <i class="fa-solid fa-trash"></i>
+                  <span>Delete</span>
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-layouts { display: flex; flex-direction: column; gap: var(--space-6); }
+.cpub-admin-layouts-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
+.cpub-admin-layouts-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin: 0 0 var(--space-2) 0; }
+.cpub-admin-layouts-subtitle { color: var(--text-dim); margin: 0; }
+
+.cpub-admin-layouts-loading {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-8); color: var(--text-faint);
+}
+
+.cpub-admin-layouts-empty {
+  display: flex; flex-direction: column; align-items: center;
+  gap: var(--space-3); padding: var(--space-10) var(--space-6);
+  background: var(--surface2); border: var(--border-width-default) solid var(--border2);
+  max-width: 560px;
+  margin: 0 auto;
+  text-align: center;
+}
+.cpub-admin-layouts-empty-icon { font-size: var(--text-3xl); color: var(--text-faint); }
+.cpub-admin-layouts-empty-text {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+  margin: 0;
+}
+.cpub-admin-layouts-empty-hint { color: var(--text-dim); margin: 0 0 var(--space-2) 0; max-width: 44ch; }
+.cpub-admin-layouts-empty-cta {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--accent);
+  border: var(--border-width-default) solid var(--accent);
+  color: var(--surface);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  text-decoration: none;
+  margin-top: var(--space-2);
+}
+.cpub-admin-layouts-empty-cta:hover:not(:disabled) { filter: brightness(1.1); }
+.cpub-admin-layouts-empty-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.cpub-admin-layouts-empty-cta:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.cpub-admin-layouts-empty-secondary {
+  margin: var(--space-2) 0 0 0;
+  font-size: var(--text-sm);
+  color: var(--text-faint);
+}
+.cpub-admin-layouts-empty-link { color: var(--accent); text-decoration: underline; }
+
+.cpub-admin-layouts-table {
+  width: 100%; border-collapse: collapse;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+}
+.cpub-admin-layouts-table th,
+.cpub-admin-layouts-table td {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  border-bottom: 1px solid var(--border2);
+  vertical-align: middle;
+}
+.cpub-admin-layouts-table th {
+  background: var(--surface2);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-dim);
+  font-weight: var(--font-weight-semibold);
+}
+.cpub-admin-layouts-table tbody tr:hover { background: var(--surface2); }
+.cpub-admin-layouts-table tbody tr:last-child td { border-bottom: 0; }
+
+.cpub-admin-layouts-scope-kind {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-faint);
+  margin-right: var(--space-2);
+}
+.cpub-admin-layouts-scope-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text);
+}
+
+.cpub-admin-layouts-state {
+  display: inline-block;
+  padding: 2px var(--space-2);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  border: 1px solid var(--border2);
+}
+.cpub-admin-layouts-state[data-state='published'] { color: var(--accent); border-color: var(--accent); }
+.cpub-admin-layouts-state[data-state='draft'] { color: var(--text-dim); }
+
+.cpub-admin-layouts-actions-col { width: 220px; }
+.cpub-admin-layouts-actions { display: flex; gap: var(--space-2); }
+
+.cpub-admin-layouts-btn {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  padding: var(--space-1) 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);
+  text-decoration: none;
+  cursor: pointer;
+}
+.cpub-admin-layouts-btn:hover { background: var(--surface2); }
+.cpub-admin-layouts-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.cpub-admin-layouts-btn--danger:hover { color: var(--red); border-color: var(--red); }
+</style>

package/pages/explore.vue

@@ -455,17 +455,20 @@ const sortOptions = [
   outline: none;
 }
 
-/* Grid */
+/* Grid — responsive auto-fill so cards stay a reasonable, consistent
+   width and fill the row (matches feed.vue's proven pattern). The old
+   fixed repeat(3,1fr)/repeat(2,1fr) produced oversized cards (esp. the
+   2-col hub/people grid ≈ 470px each) that didn't adapt to the container. */
 .cpub-explore-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
 }
 
-/* Hub cards */
+/* Hub cards (horizontal layout — slightly wider min) */
 .cpub-explore-hub-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 12px;
 }
 
@@ -542,8 +545,15 @@ const sortOptions = [
 }
 
 @media (max-width: 768px) {
-  .cpub-explore-grid { grid-template-columns: 1fr; }
-  .cpub-explore-hub-grid { grid-template-columns: 1fr; }
+  /* Tighter min on tablet keeps 2 columns where they fit (matches feed.vue)
+     rather than collapsing straight to one. */
+  .cpub-explore-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+  .cpub-explore-hub-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
   .cpub-explore-filters { flex-wrap: wrap; }
 }
+
+@media (max-width: 480px) {
+  .cpub-explore-grid,
+  .cpub-explore-hub-grid { grid-template-columns: 1fr; }
+}
 </style>

package/sections/builtin/content-feed.ts

@@ -1,50 +1,39 @@
 /**
  * Built-in section definition: content-feed.
  *
- * Phase 1c starter and the first DATA section. Fetches `/api/content`
- * with config-driven filters and renders a responsive grid of
- * `<ContentCard>`s.
+ * Stage E.4 — reuses the existing ContentGridSection which has tabs
+ * (For You / Latest / Following / per-type) + the content grid +
+ * pagination via Load More.
  *
- * Config fields split into server-filter (forwarded to `/api/content`)
- * and render-only (`heading`, `columns`). Keeping the contract explicit
- * here matches the auto-form mapping in Phase 3e and stops accidental
- * pass-through of admin-only filter values.
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionContentFeed from '../../components/sections/SectionContentFeed.vue';
+import { contentFeedConfigSchema, type ContentFeedConfig } from '@commonpub/schema';
+import ContentGridSection from '../../components/homepage/ContentGridSection.vue';
 
-const configSchema = z.object({
-  heading: z.string().max(120).default(''),
-  contentType: z.string().max(64).default(''),
-  sort: z.enum(['recent', 'popular', 'featured', 'editorial']).default('recent'),
-  limit: z.number().int().min(1).max(24).default(6),
-  columns: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4)]).default(3),
-  tag: z.string().max(64).default(''),
-  featured: z.boolean().default(false),
-});
-
-export const contentFeedSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const contentFeedSection: SectionDefinition<ContentFeedConfig> = {
   type: 'content-feed',
   name: 'Content feed',
-  description: 'Grid of content cards filtered by type / tag / sort',
+  description: 'Filterable content grid with tabs + load more (uses ContentGridSection)',
   icon: 'fa-stream',
   category: 'data',
   status: 'stable',
-  configSchema,
+  configSchema: contentFeedConfigSchema,
   defaultConfig: {
     heading: '',
     contentType: '',
     sort: 'recent',
-    limit: 6,
-    columns: 3,
-    tag: '',
-    featured: false,
+    limit: 12,
+    columns: 2,
+    categorySlug: '',
   },
   schemaVersion: 1,
-  component: SectionContentFeed,
-  // Multi-column grid collapses to less than half-width — readability + the
-  // card aspect ratio break down below 6
+  component: ContentGridSection,
+  // ContentGridSection takes { config: HomepageSectionConfig; title?: string }
+  propMap: ({ config }) => ({
+    config,
+    title: (config.heading as string | undefined) ?? '',
+  }),
   minColSpan: 6,
   maxColSpan: 12,
   defaultColSpan: 12,

package/sections/builtin/contests.ts

@@ -1,36 +1,28 @@
 /**
  * Built-in section definition: contests.
  *
- * Phase 1c addition (session 159) — active-contests list. Server-fetches
- * `/api/contests?limit=N` and renders a sidebar-style card with title,
- * entry count, "Nd left" deadline, and per-row Enter CTA.
+ * Stage E.4 — reuses the existing ContestsSection (Active Contests
+ * sidebar card with `Nd left` countdowns).
  *
- * Feature-gated on `features.contests`. If the flag is off the API
- * returns 404; the section renders nothing (empty branch). Sidebar
- * defaults (colSpan 4) match the legacy `ContestsSection.vue` placement.
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionContests from '../../components/sections/SectionContests.vue';
+import { contestsConfigSchema, type ContestsConfig } from '@commonpub/schema';
+import ContestsSection from '../../components/homepage/ContestsSection.vue';
 
-const configSchema = z.object({
-  heading: z.string().max(120).default('Active Contests'),
-  limit: z.number().int().min(1).max(10).default(3),
-});
-
-export const contestsSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const contestsSection: SectionDefinition<ContestsConfig> = {
   type: 'contests',
   name: 'Contests',
-  description: 'Active contests with deadlines (feature-gated)',
+  description: 'Active contests with deadlines (uses ContestsSection)',
   icon: 'fa-trophy',
   category: 'data',
   status: 'stable',
-  // Palette gate — see hubs.ts for the rationale.
   featureGate: 'contests',
-  configSchema,
-  defaultConfig: { heading: 'Active Contests', limit: 3 },
+  configSchema: contestsConfigSchema,
+  defaultConfig: { limit: 3 },
   schemaVersion: 1,
-  component: SectionContests,
+  component: ContestsSection,
+  propMap: ({ config }) => ({ config }),
   minColSpan: 3,
   maxColSpan: 12,
   defaultColSpan: 4,

package/sections/builtin/cta.ts

@@ -0,0 +1,46 @@
+/**
+ * Built-in section definition: cta — call-to-action panel.
+ *
+ * Phase 6b addition (session 159). Smaller than hero — typically used
+ * mid-page to break up a long content area with a focused next-action.
+ *
+ * Config: heading + body + up to 3 buttons. Buttons each have
+ * label/href/variant (primary/secondary/ghost). URL guard rejects
+ * javascript:, data:, vbscript:, file:.
+ *
+ * **Stage E.3 audit (session 159)**: kept as a section-specific
+ * SectionCta.vue renderer because the closest existing component
+ * (BlockCalloutView, an info/tip/warning notice with icon + label)
+ * doesn't support action buttons. Extending BlockCalloutView would
+ * force two unrelated UI patterns through one renderer.
+ *
+ * Schema (incl. button URL guard) lives in `@commonpub/schema/sectionConfigs`
+ * (session 161 move).
+ */
+import type { SectionDefinition } from '@commonpub/ui';
+import { ctaConfigSchema, type CtaConfig } from '@commonpub/schema';
+import SectionCta from '../../components/sections/SectionCta.vue';
+
+export const ctaSection: SectionDefinition<CtaConfig> = {
+  type: 'cta',
+  name: 'Call to Action',
+  description: 'Heading + body + up to 3 buttons. Mid-page action panel.',
+  icon: 'fa-arrow-right',
+  category: 'content',
+  status: 'stable',
+  configSchema: ctaConfigSchema,
+  defaultConfig: {
+    variant: 'default',
+    heading: 'Take the next step',
+    body: '',
+    buttons: [],
+    align: 'left',
+  },
+  schemaVersion: 1,
+  component: SectionCta,
+  // CTA panels read fine at half-width; below that the heading wraps awkwardly
+  minColSpan: 4,
+  maxColSpan: 12,
+  defaultColSpan: 12,
+  resizable: true,
+};

package/sections/builtin/custom-html.ts

@@ -1,48 +1,34 @@
 /**
  * Built-in section definition: custom-html.
  *
- * Phase 1c addition (session 159) — admin-only raw HTML escape hatch.
+ * Stage E.4 — reuses the existing CustomHtmlSection (renders
+ * `config.html` via `v-html` with an optional title).
  *
- * **SECURITY POSTURE** — important. This section renders config.html via
- * `v-html` with NO runtime sanitization, intentionally matching the
- * legacy `CustomHtmlSection.vue` behavior (already shipped in
- * production for the configurable homepage path). The threat model:
- *   - Writes are gated on `requireAdmin(event)` in
- *     `/api/admin/layouts/*` — only trusted admin users can set HTML.
- *   - Even so, a compromised admin account → stored XSS on every
- *     visitor's homepage. Phase 6b will add server-side DOMPurify
- *     sanitization at admin-write time (matching the pattern in
- *     `packages/server/src/content/content.ts:sanitizeBlockContent`)
- *     and an `unsafeHtmlAllowed` instance setting that gates whether
- *     this section type can be saved at all.
- *   - For now: `status: 'beta'` flags the risk to admin-UI consumers.
- *     The 50KB cap is a sanity bound, not a security control.
- *   - Tracked in docs/plans/layout-and-pages.md §6.5 (custom-html
- *     sanitization roadmap).
+ * **SECURITY POSTURE**: identical to legacy CustomHtmlSection — `v-html`
+ * with no runtime sanitisation. Admin-only via the layout API gate +
+ * the existing homepage editor's section schema. Phase 6b plans server-
+ * side sanitisation at admin-write time (see prior SectionCustomHtml.vue
+ * doc + `docs/plans/layout-and-pages.md §6.5`).
  *
- * Use this only when no other section type fits.
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionCustomHtml from '../../components/sections/SectionCustomHtml.vue';
+import { customHtmlConfigSchema, type CustomHtmlConfig } from '@commonpub/schema';
+import CustomHtmlSection from '../../components/homepage/CustomHtmlSection.vue';
 
-const configSchema = z.object({
-  heading: z.string().max(120).default(''),
-  html: z.string().max(50_000).default(''),
-});
-
-export const customHtmlSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const customHtmlSection: SectionDefinition<CustomHtmlConfig> = {
   type: 'custom-html',
   name: 'Custom HTML',
-  description: 'Raw HTML escape hatch — admin-only; see security note in source',
+  description: 'Raw HTML escape hatch (uses CustomHtmlSection)',
   icon: 'fa-code',
   category: 'content',
-  // Beta marks the unsanitised render path; admin UI shows a warning chip
   status: 'beta',
-  configSchema,
+  configSchema: customHtmlConfigSchema,
   defaultConfig: { heading: '', html: '' },
   schemaVersion: 1,
-  component: SectionCustomHtml,
+  component: CustomHtmlSection,
+  // CustomHtmlSection takes { config: HomepageSectionConfig; title?: string }
+  propMap: ({ config }) => ({ config, title: (config.heading as string | undefined) ?? '' }),
   minColSpan: 3,
   maxColSpan: 12,
   defaultColSpan: 12,