@commonpub/layer 0.22.1 → 0.23.1

package/components/sections/SectionHero.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+/**
+ * Built-in section: hero — banner with title, optional eyebrow + subtitle,
+ * up to two CTAs.
+ *
+ * Phase 1c starter. Variants: `default` (left-aligned, grid backdrop),
+ * `compact` (smaller padding, no backdrop), `centered` (centered text
+ * + CTAs, grid backdrop).
+ *
+ * Intentionally does NOT replicate the existing `HomepageHeroSection`'s
+ * contest-dispatch logic — that becomes its own data-aware section in
+ * Phase 6b (`contest-feature` or similar). This hero is pure
+ * config-driven so the editor preview is deterministic.
+ *
+ * `var(--*)` only.
+ */
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface HeroCta {
+  label: string;
+  href: string;
+  variant: 'primary' | 'secondary';
+}
+
+interface HeroConfig extends Record<string, unknown> {
+  variant: 'default' | 'compact' | 'centered';
+  eyebrow: string;
+  title: string;
+  subtitle: string;
+  ctas: HeroCta[];
+}
+
+defineProps<SectionRenderProps<HeroConfig>>();
+</script>
+
+<template>
+  <section
+    class="cpub-section-hero"
+    :data-variant="config.variant"
+    :aria-labelledby="`section-hero-${meta.sectionId}`"
+  >
+    <div v-if="config.variant !== 'compact'" class="cpub-section-hero-grid-bg" aria-hidden="true" />
+    <div class="cpub-section-hero-inner">
+      <div class="cpub-section-hero-content">
+        <p v-if="config.eyebrow" class="cpub-section-hero-eyebrow">{{ config.eyebrow }}</p>
+        <h1
+          :id="`section-hero-${meta.sectionId}`"
+          class="cpub-section-hero-title"
+        >
+          {{ config.title }}
+        </h1>
+        <p v-if="config.subtitle" class="cpub-section-hero-subtitle">{{ config.subtitle }}</p>
+        <div v-if="config.ctas.length > 0" class="cpub-section-hero-actions">
+          <NuxtLink
+            v-for="(cta, i) in config.ctas"
+            :key="i"
+            :to="cta.href"
+            class="cpub-btn"
+            :class="cta.variant === 'primary' ? 'cpub-btn-primary' : ''"
+          >
+            {{ cta.label }}
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-section-hero {
+  position: relative;
+  background: var(--surface);
+  border-bottom: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+  min-height: 180px;
+  display: flex;
+  align-items: stretch;
+}
+.cpub-section-hero[data-variant='compact'] {
+  min-height: 120px;
+  border-bottom: none;
+}
+
+.cpub-section-hero-grid-bg {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--border2) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border2) 1px, transparent 1px);
+  background-size: 32px 32px;
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+.cpub-section-hero-inner {
+  position: relative;
+  z-index: 1;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--space-6) var(--space-6);
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.cpub-section-hero[data-variant='compact'] .cpub-section-hero-inner {
+  padding: var(--space-4) var(--space-6);
+}
+
+.cpub-section-hero-content { flex: 1; min-width: 0; }
+
+.cpub-section-hero[data-variant='centered'] .cpub-section-hero-inner {
+  justify-content: center;
+}
+.cpub-section-hero[data-variant='centered'] .cpub-section-hero-content {
+  text-align: center;
+  max-width: 720px;
+}
+
+.cpub-section-hero-eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-faint);
+  margin: 0 0 var(--space-2);
+}
+
+.cpub-section-hero-title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0 0 var(--space-2);
+  color: var(--text);
+}
+.cpub-section-hero[data-variant='compact'] .cpub-section-hero-title {
+  font-size: var(--text-2xl);
+}
+
+.cpub-section-hero-subtitle {
+  font-size: var(--text-md);
+  color: var(--text-dim);
+  line-height: 1.6;
+  margin: 0 0 var(--space-4);
+  max-width: 560px;
+}
+.cpub-section-hero[data-variant='centered'] .cpub-section-hero-subtitle {
+  margin-inline: auto;
+}
+
+.cpub-section-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.cpub-section-hero[data-variant='centered'] .cpub-section-hero-actions {
+  justify-content: center;
+}
+
+@media (max-width: 640px) {
+  .cpub-section-hero-inner { padding: var(--space-4); }
+  .cpub-section-hero-title { font-size: var(--text-2xl); }
+  .cpub-section-hero-actions { width: 100%; }
+}
+</style>

package/components/sections/SectionImage.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+/**
+ * Built-in section: image — single image with optional caption + link.
+ *
+ * Phase 1c starter. Author-provided `src` is rendered as-is; aspect-ratio
+ * keeps cards uniform. Lazy-loaded by default for below-fold sections.
+ *
+ * Phase 3e inspector will swap the `src` text input for an ImageUpload
+ * picker via `.describe('image')` Zod metadata.
+ *
+ * `var(--*)` only.
+ */
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface ImageConfig extends Record<string, unknown> {
+  src: string;
+  alt: string;
+  caption: string;
+  href: string;
+  fit: 'contain' | 'cover';
+  aspectRatio: '16/9' | '4/3' | '1/1' | 'auto';
+}
+
+defineProps<SectionRenderProps<ImageConfig>>();
+</script>
+
+<template>
+  <figure
+    class="cpub-section-image"
+    :data-aspect="config.aspectRatio"
+    :data-fit="config.fit"
+  >
+    <!-- The `href` field is optional — link only when truthy so screen
+         readers don't announce a non-interactive image as a link. -->
+    <component
+      :is="config.href ? 'a' : 'div'"
+      :href="config.href || undefined"
+      class="cpub-section-image-frame"
+    >
+      <img
+        v-if="config.src"
+        :src="config.src"
+        :alt="config.alt"
+        loading="lazy"
+        decoding="async"
+        class="cpub-section-image-img"
+      />
+      <div v-else class="cpub-section-image-placeholder" aria-hidden="true">
+        <i class="fa-regular fa-image" />
+      </div>
+    </component>
+    <figcaption v-if="config.caption" class="cpub-section-image-caption">
+      {{ config.caption }}
+    </figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.cpub-section-image {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.cpub-section-image-frame {
+  display: block;
+  width: 100%;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+}
+.cpub-section-image[data-aspect='16/9'] .cpub-section-image-frame { aspect-ratio: 16 / 9; }
+.cpub-section-image[data-aspect='4/3']  .cpub-section-image-frame { aspect-ratio: 4 / 3; }
+.cpub-section-image[data-aspect='1/1']  .cpub-section-image-frame { aspect-ratio: 1 / 1; }
+
+.cpub-section-image-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.cpub-section-image[data-fit='cover']   .cpub-section-image-img { object-fit: cover; }
+.cpub-section-image[data-fit='contain'] .cpub-section-image-img { object-fit: contain; }
+/* Aspect=auto + no explicit ratio: let the image dictate height */
+.cpub-section-image[data-aspect='auto'] .cpub-section-image-img {
+  height: auto;
+}
+
+.cpub-section-image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 120px;
+  color: var(--text-faint);
+  font-size: var(--text-xl);
+}
+.cpub-section-image-caption {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+</style>

package/components/sections/SectionParagraph.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Built-in section: paragraph — plain prose body.
+ *
+ * Phase 1c starter. Stores `text: string` and splits on blank lines into
+ * paragraphs at render time. The auto-form inspector (Phase 3e) will
+ * upgrade this to a TipTap subset via the `.describe('rich')` Zod
+ * metadata — at which point `schemaVersion` bumps to 2 with a migration
+ * that converts plain text → block tuples.
+ *
+ * `var(--*)` only.
+ */
+import { computed } from 'vue';
+import type { SectionRenderProps } from '@commonpub/ui';
+
+interface ParagraphConfig extends Record<string, unknown> {
+  text: string;
+  align: 'left' | 'center';
+}
+
+const props = defineProps<SectionRenderProps<ParagraphConfig>>();
+
+// Blank-line split — preserves authored paragraph breaks without needing
+// a rich-text editor. Empty paragraphs are dropped (defensive).
+const paragraphs = computed<string[]>(() =>
+  (props.config.text ?? '')
+    .split(/\n{2,}/)
+    .map((p) => p.trim())
+    .filter((p) => p.length > 0),
+);
+</script>
+
+<template>
+  <div class="cpub-section-paragraph" :data-align="config.align">
+    <p v-for="(p, i) in paragraphs" :key="i">{{ p }}</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-section-paragraph {
+  margin-block: var(--space-3);
+  color: var(--text);
+  font-size: var(--text-md);
+  line-height: 1.7;
+}
+.cpub-section-paragraph[data-align='center'] {
+  text-align: center;
+}
+.cpub-section-paragraph p {
+  margin: 0 0 var(--space-3);
+}
+.cpub-section-paragraph p:last-child {
+  margin-bottom: 0;
+}
+</style>

package/composables/useFeatures.ts

@@ -26,6 +26,14 @@ export interface FeatureFlags {
   emailNotifications: boolean;
   publicApi: boolean;
   contentImport: boolean;
+  /**
+   * DB-backed page layout engine. Default OFF — when ON, the homepage
+   * (and future layout-bearing pages) render via `<LayoutSlot>` zones
+   * resolved from the `layouts` table. Operator MUST run
+   * POST /api/admin/layouts/seed-homepage before flipping this on so
+   * a default layout exists at scope ('route', '/'). Added session 158.
+   */
+  layoutEngine: boolean;
   /**
    * Cross-instance delegated authorization. All sub-flags default false.
    * Mirrors `@commonpub/config`'s `IdentityFeatures`. Phase 1b+ — see
@@ -46,6 +54,7 @@ export const DEFAULT_FLAGS: FeatureFlags = {
   contests: false, events: false, learning: true, explainers: true,
   editorial: true, federation: false, admin: false, emailNotifications: false,
   publicApi: false, contentImport: true,
+  layoutEngine: false,
   identity: {
     linkRemoteAccounts: false,
     signInWithRemote: false,
@@ -120,6 +129,7 @@ export function useFeatures() {
     emailNotifications: computed(() => flags.value.emailNotifications),
     publicApi: computed(() => flags.value.publicApi),
     contentImport: computed(() => flags.value.contentImport),
+    layoutEngine: computed(() => flags.value.layoutEngine),
     identity: computed(() => flags.value.identity),
   };
 }

package/composables/useLayout.ts

@@ -0,0 +1,132 @@
+/**
+ * Client-side composable for resolving a route's active layout.
+ *
+ * Wraps `useFetch('/api/layouts/by-route?path=…')` with SSR-safe caching:
+ *   - Server-side: fetched during SSR, payload is included in the
+ *     hydration snapshot (Nuxt's `useFetch` default) — same data is
+ *     re-used on client mount with zero extra requests
+ *   - Client-side: subsequent navigations to the same path return the
+ *     cached value (Nuxt's request cache, keyed by `key`)
+ *
+ * Returns `null` when:
+ *   - The layout-engine feature is OFF (`/api/layouts/by-route` 404s,
+ *     which we surface as null so consumers fall back to legacy renderers
+ *     gracefully)
+ *   - No layout exists for the route
+ *
+ * The `<LayoutSlot>` component is the only intended caller in v1; other
+ * consumers should use that instead.
+ */
+import type { Ref } from 'vue';
+
+export interface LayoutSection {
+  id: string;
+  order: number;
+  type: string;
+  config: Record<string, unknown>;
+  colSpan: number;
+  responsive: { sm?: number; md?: number; lg?: number } | null;
+  enabled: boolean;
+  visibility: { roles?: string[]; features?: string[]; hideAt?: ('sm' | 'md' | 'lg')[] } | null;
+  schemaVersion: number;
+}
+
+export interface LayoutRow {
+  id: string;
+  order: number;
+  config: {
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    align?: 'start' | 'center' | 'stretch';
+    background?: string;
+    paddingY?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  } | null;
+  sections: LayoutSection[];
+}
+
+export interface LayoutZoneClient {
+  zone: string;
+  rows: LayoutRow[];
+}
+
+export interface LayoutPayload {
+  zones: LayoutZoneClient[];
+  pageMeta: {
+    title: string;
+    description?: string;
+    ogImage?: string;
+    noindex?: boolean;
+    ogType?: 'website' | 'article' | 'profile';
+    access?: 'public' | 'members' | 'admin';
+    frame?: 'narrow' | 'wide' | 'two-column' | 'three-column' | 'sidebar-left' | 'sidebar-right';
+  } | null;
+  state: 'draft' | 'published';
+}
+
+export interface UseLayoutResult {
+  /** The layout payload, or null if none exists / feature off. */
+  layout: Ref<LayoutPayload | null>;
+  /** True while the initial fetch is in flight. */
+  pending: Ref<boolean>;
+  /** Truthy if the fetch errored (incl. 404 for feature off). */
+  error: Ref<unknown>;
+  /** Re-fetch the layout (after a save / publish). */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Resolve the layout for a given route path. SSR-safe; caches per path
+ * for the request lifetime + survives hydration.
+ *
+ * Returns a layout=null Ref when the feature is off so consumers can
+ * `v-if="layout"` and fall through to a legacy renderer.
+ *
+ * **Reactivity**: pass a string for the typical case (literal route on
+ * a page) — useFetch fires once at setup. For the rare case where the
+ * route changes without remount (e.g. a parent component swapping the
+ * prop dynamically), pass a Ref or getter — useFetch will refire on
+ * change. Without this, a path-prop change on `<LayoutSlot>` would
+ * silently leave the stale fetch result in place.
+ */
+export function useLayout(path: string | Ref<string> | (() => string)): UseLayoutResult {
+  const pathGetter = (): string => (
+    typeof path === 'string'
+      ? path
+      : typeof path === 'function'
+        ? path()
+        : path.value
+  );
+
+  const { data, pending, error, refresh } = useFetch<LayoutPayload | null>(
+    '/api/layouts/by-route',
+    {
+      // Static key for the literal-string case (so Nuxt's request cache
+      // can dedupe across components on the same nav). For the reactive
+      // case, omit key so useFetch derives one from the query Ref.
+      key: typeof path === 'string' ? `layout:${path}` : undefined,
+      // Functional query — useFetch re-evaluates on watched deps change.
+      query: { path: pathGetter },
+      // Watch the path getter so reactive callers refetch on change.
+      // For string callers this is empty array → no extra reactivity.
+      watch: typeof path === 'string' ? [] : [pathGetter],
+      // 404 from the API (feature off OR route has no layout) is NOT an
+      // exceptional case — surface as null. Don't treat as error.
+      onResponseError({ response }) {
+        if (response.status === 404) {
+          // Don't throw; data stays null
+          return;
+        }
+      },
+      // Falsy data on 404 maps to null
+      transform: (input: LayoutPayload | null | undefined) => input ?? null,
+      server: true,
+      lazy: false,
+    },
+  );
+
+  return {
+    layout: data as Ref<LayoutPayload | null>,
+    pending,
+    error,
+    refresh: async () => { await refresh(); },
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -13,6 +13,7 @@
     "middleware",
     "pages",
     "plugins",
+    "sections",
     "server",
     "theme",
     "types",
@@ -51,15 +52,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.6.0",
-    "@commonpub/docs": "0.6.3",
-    "@commonpub/config": "0.14.0",
+    "@commonpub/config": "0.15.0",
     "@commonpub/editor": "0.7.11",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/schema": "0.17.0",
     "@commonpub/protocol": "0.12.0",
+    "@commonpub/server": "2.57.0",
+    "@commonpub/schema": "0.17.0",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/ui": "0.9.0",
-    "@commonpub/server": "2.56.0"
+    "@commonpub/docs": "0.6.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/theme/index.vue

@@ -259,9 +259,30 @@ function recheckDiscovery(): void {
  * If admins want to re-capture from a fresh :root state, they can revert
  * to the base theme, clear overrides, then the banner will reappear.
  */
+/**
+ * Show the "your site has a custom theme" banner ONLY when the detected
+ * overrides on :root are likely from a CSS file the thin layer app
+ * loaded (the deveco.io case) — NOT from the built-in theme itself or
+ * from a custom theme the admin already saved.
+ *
+ * Refined gate (5 conditions, all must pass):
+ *   - count > 0 (something to capture)
+ *   - active theme is NOT a custom theme (already captured)
+ *   - active theme IS 'base' (any non-base built-in's tokens would
+ *     dominate the diff, making "capture" produce a clone of that
+ *     theme — pointless. e.g. commonpub.io's active='agora' triggers
+ *     count > 0 from agora.css; banner would confuse the admin)
+ *   - no instance-wide token overrides set (those explain the diff)
+ *
+ * Caveat: a thin app that registers a `themes:` entry AND sets
+ * instanceDefault to the registered slug (e.g. 'deveco') would have
+ * the banner HIDDEN even though their CSS file overrides ARE the use
+ * case the banner targets. For that case the admin can use the Fork
+ * button on the registered theme's card instead. Document.
+ */
 const showDiscoveryBanner = computed<boolean>(() => {
   if (discovery.value.count === 0) return false;
-  if (instanceDefault.value.startsWith('cpub-custom-')) return false;
+  if (instanceDefault.value !== 'base') return false;  // hides built-in non-base + registered + custom
   if (Object.keys(initialOverrides.value).length > 0) return false;
   return true;
 });

package/pages/index.vue

@@ -14,7 +14,7 @@ const sortedSections = computed(() =>
 );
 
 const { user: authUser } = useAuth();
-const { hubs: hubsEnabled, contests: contestsEnabled, learning: learningEnabled, video: videoEnabled, docs: docsEnabled, editorial: editorialEnabled } = useFeatures();
+const { hubs: hubsEnabled, contests: contestsEnabled, learning: learningEnabled, video: videoEnabled, docs: docsEnabled, editorial: editorialEnabled, layoutEngine: layoutEngineEnabled } = useFeatures();
 const { enabledTypeMeta } = useContentTypes();
 
 const activeTab = ref(authUser.value ? 'foryou' : 'latest');
@@ -143,8 +143,29 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 
 <template>
   <div>
+    <!-- ═══ LAYOUT ENGINE (Phase 1c — feature-flagged) ═══
+         When `features.layoutEngine` is ON, render the homepage via
+         <LayoutSlot> zones backed by the layouts table. Operators flip
+         this on AFTER running POST /api/admin/layouts/seed-homepage so
+         a default layout exists at scope ('route', '/'). If the flag is
+         on but no layout exists, LayoutSlot renders nothing and the
+         user sees an empty page — documented at
+         docs/reference/guides/layout-engine.md. Falls through to the
+         configurable section renderer when the flag is OFF (default). -->
+    <template v-if="layoutEngineEnabled">
+      <LayoutSlot route="/" zone="full-width" />
+      <div class="cpub-main-layout">
+        <main class="cpub-feed-col">
+          <LayoutSlot route="/" zone="main" />
+        </main>
+        <aside class="cpub-sidebar">
+          <LayoutSlot route="/" zone="sidebar" />
+        </aside>
+      </div>
+    </template>
+
     <!-- ═══ CONFIGURABLE HOMEPAGE (section renderer) ═══ -->
-    <template v-if="hasCustomSections">
+    <template v-else-if="hasCustomSections">
       <!-- Full-width sections (hero) -->
       <HomepageSectionRenderer :sections="sortedSections" zone="full-width" />
 

package/sections/builtin/content-feed.ts

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ *
+ * 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.
+ */
+import { z } from 'zod';
+import type { SectionDefinition } from '@commonpub/ui';
+import SectionContentFeed from '../../components/sections/SectionContentFeed.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>> = {
+  type: 'content-feed',
+  name: 'Content feed',
+  description: 'Grid of content cards filtered by type / tag / sort',
+  icon: 'fa-stream',
+  category: 'data',
+  status: 'stable',
+  configSchema,
+  defaultConfig: {
+    heading: '',
+    contentType: '',
+    sort: 'recent',
+    limit: 6,
+    columns: 3,
+    tag: '',
+    featured: false,
+  },
+  schemaVersion: 1,
+  component: SectionContentFeed,
+  // Multi-column grid collapses to less than half-width — readability + the
+  // card aspect ratio break down below 6
+  minColSpan: 6,
+  maxColSpan: 12,
+  defaultColSpan: 12,
+  resizable: true,
+};

package/sections/builtin/divider.ts

@@ -0,0 +1,37 @@
+/**
+ * Built-in section definition: divider.
+ *
+ * Phase 1 proof-of-life — the simplest possible registered section.
+ * Validates the registry → LayoutSlot → renderer chain without any
+ * Zod complexity, content fetches, or admin-only config.
+ *
+ * Phase 1c adds: hero, heading, paragraph, image, content-feed —
+ * each in its own `builtin/{type}.ts` file, registered in
+ * `../registry.ts` alongside this one.
+ */
+import { z } from 'zod';
+import type { SectionDefinition } from '@commonpub/ui';
+import SectionDivider from '../../components/sections/SectionDivider.vue';
+
+const configSchema = z.object({
+  variant: z.enum(['solid', 'dashed', 'dotted', 'accent']).default('solid'),
+  spacingY: z.enum(['sm', 'md', 'lg', 'xl']).default('md'),
+});
+
+export const dividerSection: SectionDefinition<z.infer<typeof configSchema>> = {
+  type: 'divider',
+  name: 'Divider',
+  description: 'Horizontal rule with style + spacing options',
+  icon: 'fa-minus',
+  category: 'layout',
+  status: 'stable',
+  configSchema,
+  defaultConfig: { variant: 'solid', spacingY: 'md' },
+  schemaVersion: 1,
+  component: SectionDivider,
+  // Dividers are always full-width; resize is meaningless for a 1px line
+  minColSpan: 12,
+  maxColSpan: 12,
+  defaultColSpan: 12,
+  resizable: false,
+};