@commonpub/layer 0.24.0 → 0.25.1

package/sections/builtin/divider.ts

@@ -1,34 +1,32 @@
 /**
  * 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.
+ * Stage E.1 — reuses BlockDividerView (extended to accept optional
+ * variant + spacingY on its `content` prop). Existing block callers
+ * (BlockContentRenderer) pass nothing and get the legacy 36px solid line.
+ * Layout-engine callers pass `{variant, spacingY}` via the propMap below
+ * to customise.
  *
- * Phase 1c adds: hero, heading, paragraph, image, content-feed —
- * each in its own `builtin/{type}.ts` file, registered in
- * `../registry.ts` alongside this one.
+ * Schema moved to `@commonpub/schema/sectionConfigs` in session 161 so
+ * the server can validate per-section configs without dragging Vue into
+ * the Nitro bundle. See `validateSectionConfigs.ts`.
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionDivider from '../../components/sections/SectionDivider.vue';
+import { dividerConfigSchema, type DividerConfig } from '@commonpub/schema';
+import BlockDividerView from '../../components/blocks/BlockDividerView.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>> = {
+export const dividerSection: SectionDefinition<DividerConfig> = {
   type: 'divider',
   name: 'Divider',
-  description: 'Horizontal rule with style + spacing options',
+  description: 'Horizontal rule with style + spacing (uses BlockDividerView)',
   icon: 'fa-minus',
   category: 'layout',
   status: 'stable',
-  configSchema,
+  configSchema: dividerConfigSchema,
   defaultConfig: { variant: 'solid', spacingY: 'md' },
   schemaVersion: 1,
-  component: SectionDivider,
+  component: BlockDividerView,
+  propMap: ({ config }) => ({ content: config }),
   // Dividers are always full-width; resize is meaningless for a 1px line
   minColSpan: 12,
   maxColSpan: 12,

package/sections/builtin/editorial.ts

@@ -1,37 +1,27 @@
 /**
  * Built-in section definition: editorial.
  *
- * Phase 1c addition (session 159) — Staff Picks grid. Server-fetches
- * `/api/content?editorial=true&sort=editorial&limit=N` and renders a
- * responsive `<ContentCard>` grid. Mirrors the legacy
- * `EditorialSection.vue` shape; built fresh in the registry pattern.
+ * Stage E.4 — reuses the existing EditorialSection which fetches
+ * `/api/content?editorial=true` and renders Staff Picks grid.
  *
- * Used by commonpub.io's homepage (currently the legacy renderer); this
- * section unblocks porting that homepage into a real layout row in the
- * Phase 1c canary.
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionEditorial from '../../components/sections/SectionEditorial.vue';
+import { editorialConfigSchema, type EditorialConfig } from '@commonpub/schema';
+import EditorialSection from '../../components/homepage/EditorialSection.vue';
 
-const configSchema = z.object({
-  heading: z.string().max(120).default('Staff Picks'),
-  limit: z.number().int().min(1).max(12).default(3),
-  columns: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4)]).default(3),
-});
-
-export const editorialSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const editorialSection: SectionDefinition<EditorialConfig> = {
   type: 'editorial',
   name: 'Editorial',
-  description: 'Staff-picked content grid (editorial flag in /api/content)',
+  description: 'Staff-picked content grid (uses EditorialSection)',
   icon: 'fa-pen-fancy',
   category: 'data',
   status: 'stable',
-  configSchema,
-  defaultConfig: { heading: 'Staff Picks', limit: 3, columns: 3 },
+  configSchema: editorialConfigSchema,
+  defaultConfig: { limit: 3 },
   schemaVersion: 1,
-  component: SectionEditorial,
-  // 3+ column ContentCard grid loses readability below half-width
+  component: EditorialSection,
+  propMap: ({ config }) => ({ config }),
   minColSpan: 6,
   maxColSpan: 12,
   defaultColSpan: 12,

package/sections/builtin/embed.ts

@@ -0,0 +1,31 @@
+/**
+ * Built-in section definition: embed.
+ *
+ * Stage E.2 — reuses BlockEmbedView (generic-iframe renderer). Host
+ * allowlist + sandbox policy live in BlockEmbedView.
+ *
+ * Schema (incl. URL_HTTPS_OR_EMPTY guard — strict http(s) only, no
+ * relative-path branch unlike image/video/gallery) lives in
+ * `@commonpub/schema/sectionConfigs` (session 161 move).
+ */
+import type { SectionDefinition } from '@commonpub/ui';
+import { embedConfigSchema, type EmbedConfig } from '@commonpub/schema';
+import BlockEmbedView from '../../components/blocks/BlockEmbedView.vue';
+
+export const embedSection: SectionDefinition<EmbedConfig> = {
+  type: 'embed',
+  name: 'Embed',
+  description: 'Tweets, gists, CodePen, Loom, etc (uses BlockEmbedView)',
+  icon: 'fa-square-arrow-up-right',
+  category: 'content',
+  status: 'stable',
+  configSchema: embedConfigSchema,
+  defaultConfig: { url: '' },
+  schemaVersion: 1,
+  component: BlockEmbedView,
+  propMap: ({ config }) => ({ content: config }),
+  minColSpan: 6,
+  maxColSpan: 12,
+  defaultColSpan: 12,
+  resizable: true,
+};

package/sections/builtin/gallery.ts

@@ -0,0 +1,29 @@
+/**
+ * Built-in section definition: gallery.
+ *
+ * Stage E.2 — reuses BlockGalleryView (image grid + lightbox).
+ *
+ * Schema (incl. per-image URL_MEDIA_OR_EMPTY guard + max-20 array bound)
+ * lives in `@commonpub/schema/sectionConfigs` (session 161 move).
+ */
+import type { SectionDefinition } from '@commonpub/ui';
+import { galleryConfigSchema, type GalleryConfig } from '@commonpub/schema';
+import BlockGalleryView from '../../components/blocks/BlockGalleryView.vue';
+
+export const gallerySection: SectionDefinition<GalleryConfig> = {
+  type: 'gallery',
+  name: 'Gallery',
+  description: 'Image grid (uses BlockGalleryView)',
+  icon: 'fa-images',
+  category: 'content',
+  status: 'stable',
+  configSchema: galleryConfigSchema,
+  defaultConfig: { images: [] },
+  schemaVersion: 1,
+  component: BlockGalleryView,
+  propMap: ({ config }) => ({ content: config }),
+  minColSpan: 6,
+  maxColSpan: 12,
+  defaultColSpan: 12,
+  resizable: true,
+};

package/sections/builtin/heading.ts

@@ -1,34 +1,29 @@
 /**
  * Built-in section definition: heading.
  *
- * Phase 1c starter — single heading with optional eyebrow + subline.
- * Drives the auto-form via the configSchema (Phase 3e maps Zod kinds to
- * controls; level is a small enum → segmented control).
+ * Stage E.1 (session 159) — reuses the existing `BlockHeadingView`
+ * renderer (`layers/base/components/blocks/BlockHeadingView.vue`)
+ * instead of a parallel `SectionHeading.vue`.
+ *
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
+ * See `feedback-reuse-existing-components` memory + Stage E plan.
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionHeading from '../../components/sections/SectionHeading.vue';
-
-const configSchema = z.object({
-  text: z.string().min(1).max(240).default('Section heading'),
-  level: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4)]).default(2),
-  align: z.enum(['left', 'center']).default('left'),
-  eyebrow: z.string().max(120).default(''),
-  subline: z.string().max(480).default(''),
-});
+import { headingConfigSchema, type HeadingConfig } from '@commonpub/schema';
+import BlockHeadingView from '../../components/blocks/BlockHeadingView.vue';
 
-export const headingSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const headingSection: SectionDefinition<HeadingConfig> = {
   type: 'heading',
   name: 'Heading',
-  description: 'Single h1–h4 heading with optional eyebrow + subline',
+  description: 'Single h1–h6 heading (uses BlockHeadingView)',
   icon: 'fa-heading',
   category: 'content',
   status: 'stable',
-  configSchema,
-  defaultConfig: { text: 'Section heading', level: 2, align: 'left', eyebrow: '', subline: '' },
+  configSchema: headingConfigSchema,
+  defaultConfig: { level: 2, text: 'Section heading' },
   schemaVersion: 1,
-  component: SectionHeading,
-  // Heading reads fine narrow; allow as small as quarter-width
+  component: BlockHeadingView,
+  propMap: ({ config }) => ({ content: config }),
   minColSpan: 3,
   maxColSpan: 12,
   defaultColSpan: 12,

package/sections/builtin/hero.ts

@@ -1,67 +1,32 @@
 /**
  * Built-in section definition: hero.
  *
- * Phase 1c starter. Three variants — `default` (left-aligned with grid
- * backdrop), `compact` (narrow with no backdrop), `centered` (centered
- * content). Up to two CTAs each with their own variant.
+ * Stage E.4 — reuses the existing HeroSection which handles
+ * contest-aware swap + dismiss button + hardcoded fallback copy
+ * ("Build. Document. Share.").
  *
- * NOT contest-aware (the existing HomepageHeroSection has dispatch
- * logic for the live-contest hero — that responsibility moves to a
- * future `contest-feature` data section in Phase 6b).
+ * Schema (incl. URL_LINK_STRICT guard on CTA hrefs) lives in
+ * `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionHero from '../../components/sections/SectionHero.vue';
+import { heroConfigSchema, type HeroConfig } from '@commonpub/schema';
+import HeroSection from '../../components/homepage/HeroSection.vue';
 
-/**
- * URL guard — accepts http(s), site-relative paths, hash links, mailto/tel.
- * Rejects javascript:, data:, vbscript:, file:, etc. — admin-set fields
- * render to ALL visitors, so a malicious admin (or DB corruption) could
- * inject a clickable XSS via `<a href="javascript:...">` without this.
- *
- * Defense at the write boundary; the renderer doesn't re-validate
- * (Vue's :href binding doesn't sanitize, so this IS the guard).
- */
-const SAFE_LINK_URL = /^(https?:\/\/|\/|#|mailto:|tel:)/i;
-
-const ctaSchema = z.object({
-  label: z.string().min(1).max(80),
-  href: z.string().min(1).max(2048).regex(SAFE_LINK_URL, {
-    message: 'href must be http(s), relative (/), hash (#), mailto:, or tel:',
-  }),
-  variant: z.enum(['primary', 'secondary']).default('primary'),
-});
-
-const configSchema = z.object({
-  variant: z.enum(['default', 'compact', 'centered']).default('default'),
-  eyebrow: z.string().max(120).default(''),
-  title: z.string().min(1).max(240).default('Welcome'),
-  subtitle: z.string().max(800).default(''),
-  // Capped at 2 — visual + a11y guidance: more than two competing CTAs
-  // dilute the call-to-action and read as a button bar instead.
-  ctas: z.array(ctaSchema).max(2).default([]),
-});
-
-export const heroSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const heroSection: SectionDefinition<HeroConfig> = {
   type: 'hero',
   name: 'Hero',
-  description: 'Banner with title, subtitle, and up to two CTAs',
+  description: 'Top-of-page banner (uses HeroSection — contest-aware)',
   icon: 'fa-bullhorn',
   category: 'layout',
   status: 'stable',
-  configSchema,
-  defaultConfig: {
-    variant: 'default',
-    eyebrow: '',
-    title: 'Welcome',
-    subtitle: '',
-    ctas: [],
-  },
+  configSchema: heroConfigSchema,
+  defaultConfig: { variant: 'default', customTitle: '', customSubtitle: '', ctas: [] },
   schemaVersion: 1,
-  component: SectionHero,
-  // Hero breaks at <6 cols (CTA wrap looks awful); 12 is the canonical use
-  minColSpan: 6,
+  component: HeroSection,
+  // HeroSection takes { config: HomepageSectionConfig }
+  propMap: ({ config }) => ({ config }),
+  minColSpan: 12,
   maxColSpan: 12,
   defaultColSpan: 12,
-  resizable: true,
+  resizable: false,
 };

package/sections/builtin/hubs.ts

@@ -1,43 +1,28 @@
 /**
  * Built-in section definition: hubs.
  *
- * Phase 1c addition (session 159) — trending hubs list. Server-fetches
- * `/api/hubs?limit=N` and renders a sidebar-style card with icon, name,
- * member count, and a Join CTA per hub.
+ * Stage E.4 — reuses the existing HubsSection (Trending Hubs sidebar
+ * card with join CTAs).
  *
- * Renderer also dispatches join requests via `POST /api/hubs/:slug/join`
- * for authenticated visitors (mirrors legacy `HubsSection.vue`); guests
- * are redirected to `/auth/login?redirect=/`.
- *
- * Defaults to colSpan 4 (sidebar). Set colSpan 12 for a horizontal
- * sweep on a community-discovery page.
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionHubs from '../../components/sections/SectionHubs.vue';
-
-const configSchema = z.object({
-  heading: z.string().max(120).default('Trending Hubs'),
-  limit: z.number().int().min(1).max(20).default(4),
-});
+import { hubsConfigSchema, type HubsConfig } from '@commonpub/schema';
+import HubsSection from '../../components/homepage/HubsSection.vue';
 
-export const hubsSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const hubsSection: SectionDefinition<HubsConfig> = {
   type: 'hubs',
   name: 'Hubs',
-  description: 'Trending hubs list with join action (feature-gated)',
+  description: 'Trending hubs with join action (uses HubsSection)',
   icon: 'fa-users',
   category: 'data',
   status: 'stable',
-  // Palette gate — admins on a hubs-disabled instance shouldn't see this
-  // type in the section-picker. Runtime gating is separate: each placed
-  // instance's `visibility.features` array controls render visibility
-  // (LayoutSlot honors it). Setting both here AND in the migration script
-  // is the belt-and-braces.
   featureGate: 'hubs',
-  configSchema,
-  defaultConfig: { heading: 'Trending Hubs', limit: 4 },
+  configSchema: hubsConfigSchema,
+  defaultConfig: { limit: 4 },
   schemaVersion: 1,
-  component: SectionHubs,
+  component: HubsSection,
+  propMap: ({ config }) => ({ config }),
   minColSpan: 3,
   maxColSpan: 12,
   defaultColSpan: 4,

package/sections/builtin/image.ts

@@ -1,65 +1,28 @@
 /**
  * Built-in section definition: image.
  *
- * Phase 1c starter. Stores raw URL + alt + optional caption + optional
- * href. The Phase 3e auto-form will swap `src` for an ImageUpload picker
- * via `.describe('image')` — current Zod is a plain URL string so the
- * form generator still produces a usable text input today.
+ * Stage E.1 — reuses BlockImageView (`<figure>` with size preset +
+ * caption + lazy loading).
  *
- * Security note: `src` is rendered as-is via `<img>` — sanitisation is
- * caller responsibility (the URL is never reflected into a script
- * context). Custom-HTML / iframe sections are the XSS surface and gate
- * differently (admin-only addRoles in Phase 6b).
+ * Schema (incl. URL_MEDIA_OR_EMPTY guard on `src`) lives in
+ * `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionImage from '../../components/sections/SectionImage.vue';
+import { imageConfigSchema, type ImageConfig } from '@commonpub/schema';
+import BlockImageView from '../../components/blocks/BlockImageView.vue';
 
-/**
- * URL guards — separate for `src` (image fetch) vs `href` (click target).
- *
- * - `src`: http(s) or site-relative. data: rejected (large + tracking
- *   surface; ImageUpload should be the path for inline data). javascript:
- *   in <img src> doesn't execute in modern browsers, but disallow anyway
- *   for consistency.
- * - `href`: http(s), site-relative, hash, mailto:, tel:. javascript:
- *   would execute on click — admin-set fields render to ALL visitors so
- *   this is a stored XSS surface without the regex.
- *
- * Both allow EMPTY string (the section's "no image yet" / "no link"
- * state). The `^(?:$|…)` shape matches empty-string only when the
- * `$` end-of-string anchor immediately follows `^` — pinned by tests
- * because the obvious `^(?:|…)` would have an empty alternation
- * branch that matches ANY input (the empty match always succeeds at
- * position 0).
- */
-const SAFE_IMAGE_URL = /^(?:$|https?:\/\/|\/)/i;
-const SAFE_LINK_URL = /^(?:$|https?:\/\/|\/|#|mailto:|tel:)/i;
-
-const configSchema = z.object({
-  src: z.string().max(2048).regex(SAFE_IMAGE_URL, {
-    message: 'src must be http(s) or relative (/)',
-  }).default(''),
-  alt: z.string().max(240).default(''),
-  caption: z.string().max(480).default(''),
-  href: z.string().max(2048).regex(SAFE_LINK_URL, {
-    message: 'href must be http(s), relative (/), hash (#), mailto:, or tel:',
-  }).default(''),
-  fit: z.enum(['contain', 'cover']).default('contain'),
-  aspectRatio: z.enum(['16/9', '4/3', '1/1', 'auto']).default('auto'),
-});
-
-export const imageSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const imageSection: SectionDefinition<ImageConfig> = {
   type: 'image',
   name: 'Image',
-  description: 'Single image with optional caption + link',
+  description: 'Single image with caption (uses BlockImageView)',
   icon: 'fa-image',
   category: 'content',
   status: 'stable',
-  configSchema,
-  defaultConfig: { src: '', alt: '', caption: '', href: '', fit: 'contain', aspectRatio: 'auto' },
+  configSchema: imageConfigSchema,
+  defaultConfig: { src: '', alt: '', caption: '', size: 'l' },
   schemaVersion: 1,
-  component: SectionImage,
+  component: BlockImageView,
+  propMap: ({ config }) => ({ content: config }),
   minColSpan: 3,
   maxColSpan: 12,
   defaultColSpan: 12,

package/sections/builtin/learning.ts

@@ -2,23 +2,15 @@
  * Built-in section definition: learning.
  *
  * Phase 1c addition (session 159) — learning paths grid. Server-fetches
- * `/api/learn?limit=N` and renders a responsive grid of cards (title,
- * description, difficulty + duration, enrollment count).
+ * `/api/learn?limit=N` and renders a responsive grid of cards.
  *
- * Feature-gated on `features.learning`. Behaves like editorial /
- * content-feed structurally — a discoverable feed of an entity type.
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
+import { learningConfigSchema, type LearningConfig } from '@commonpub/schema';
 import SectionLearning from '../../components/sections/SectionLearning.vue';
 
-const configSchema = z.object({
-  heading: z.string().max(120).default('Learning Paths'),
-  limit: z.number().int().min(1).max(12).default(6),
-  columns: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4)]).default(3),
-});
-
-export const learningSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const learningSection: SectionDefinition<LearningConfig> = {
   type: 'learning',
   name: 'Learning paths',
   description: 'Grid of learning paths with enrollment + difficulty (feature-gated)',
@@ -27,7 +19,7 @@ export const learningSection: SectionDefinition<z.infer<typeof configSchema>> =
   status: 'stable',
   // Palette gate — see hubs.ts for the rationale.
   featureGate: 'learning',
-  configSchema,
+  configSchema: learningConfigSchema,
   defaultConfig: { heading: 'Learning Paths', limit: 6, columns: 3 },
   schemaVersion: 1,
   component: SectionLearning,

package/sections/builtin/markdown.ts

@@ -0,0 +1,29 @@
+/**
+ * Built-in section definition: markdown.
+ *
+ * Stage E.2 — reuses BlockMarkdownView. Pipes source markdown through
+ * markdownToBlockTuples + sanitizeBlockHtml — safer than custom-html.
+ *
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
+ */
+import type { SectionDefinition } from '@commonpub/ui';
+import { markdownConfigSchema, type MarkdownConfig } from '@commonpub/schema';
+import BlockMarkdownView from '../../components/blocks/BlockMarkdownView.vue';
+
+export const markdownSection: SectionDefinition<MarkdownConfig> = {
+  type: 'markdown',
+  name: 'Markdown',
+  description: 'Markdown body — safer than custom-html (uses BlockMarkdownView)',
+  icon: 'fa-markdown',
+  category: 'content',
+  status: 'stable',
+  configSchema: markdownConfigSchema,
+  defaultConfig: { source: '' },
+  schemaVersion: 1,
+  component: BlockMarkdownView,
+  propMap: ({ config }) => ({ content: config }),
+  minColSpan: 3,
+  maxColSpan: 12,
+  defaultColSpan: 12,
+  resizable: true,
+};

package/sections/builtin/paragraph.ts

@@ -1,32 +1,29 @@
 /**
  * Built-in section definition: paragraph.
  *
- * Phase 1c starter — plain prose, blank-line split into `<p>` tags.
- * Upgrade to TipTap-driven rich text in Phase 3e via `.describe('rich')`
- * + a v2 migration; this v1 keeps the storage simple so the editor work
- * doesn't block on TipTap integration.
+ * Stage E.1 — reuses BlockTextView (sanitised HTML body via
+ * `sanitizeBlockHtml`). Admin-set HTML works because BlockTextView pipes
+ * through sanitizeBlockHtml — same XSS posture as the rest of the Block
+ * system.
+ *
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionParagraph from '../../components/sections/SectionParagraph.vue';
-
-const configSchema = z.object({
-  text: z.string().max(8000).default(''),
-  align: z.enum(['left', 'center']).default('left'),
-});
+import { paragraphConfigSchema, type ParagraphConfig } from '@commonpub/schema';
+import BlockTextView from '../../components/blocks/BlockTextView.vue';
 
-export const paragraphSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const paragraphSection: SectionDefinition<ParagraphConfig> = {
   type: 'paragraph',
   name: 'Paragraph',
-  description: 'Plain prose body with blank-line paragraph breaks',
+  description: 'Sanitised HTML body (uses BlockTextView)',
   icon: 'fa-align-left',
   category: 'content',
   status: 'stable',
-  configSchema,
-  defaultConfig: { text: '', align: 'left' },
+  configSchema: paragraphConfigSchema,
+  defaultConfig: { html: '<p>Paragraph body.</p>' },
   schemaVersion: 1,
-  component: SectionParagraph,
-  // Prose reads best at ~6/12; allow narrower for sidebars + full-width on landing pages
+  component: BlockTextView,
+  propMap: ({ config }) => ({ content: config }),
   minColSpan: 3,
   maxColSpan: 12,
   defaultColSpan: 6,

package/sections/builtin/stats.ts

@@ -1,34 +1,33 @@
 /**
  * Built-in section definition: stats.
  *
- * Phase 1c addition (session 159) — platform stats grid. Server-fetches
- * `/api/stats` (PlatformStats) and renders a small numeric grid:
- * Projects, Posts (blog + legacy article), Members, Hubs.
+ * Stage E.4 — reuses the existing StatsSection (`layers/base/
+ * components/homepage/StatsSection.vue`) which fetches `/api/stats`
+ * + renders the Projects/Posts/Members/Hubs sidebar card. StatsSection
+ * takes no props (reads useFeatures internally for the hubs gate).
  *
- * Hubs metric is gated on `features.hubs` — when the flag is off, the
- * cell hides + the grid collapses to 1×3. Sidebar-friendly by default
- * (colSpan 4), but works as a narrow row at 12.
+ * Schema lives in `@commonpub/schema/sectionConfigs` (session 161 move).
+ * Schema is intentionally `z.object({})` so admin tooling / migrations
+ * can pass extra fields (e.g., legacy `heading: 'Platform Stats'`)
+ * without rejection; StatsSection ignores them since it takes no props.
  */
-import { z } from 'zod';
 import type { SectionDefinition } from '@commonpub/ui';
-import SectionStats from '../../components/sections/SectionStats.vue';
+import { statsConfigSchema, type StatsConfig } from '@commonpub/schema';
+import StatsSection from '../../components/homepage/StatsSection.vue';
 
-const configSchema = z.object({
-  heading: z.string().max(120).default('Platform Stats'),
-});
-
-export const statsSection: SectionDefinition<z.infer<typeof configSchema>> = {
+export const statsSection: SectionDefinition<StatsConfig> = {
   type: 'stats',
   name: 'Platform stats',
-  description: 'Numeric grid of platform totals (projects, posts, members, hubs)',
+  description: 'Projects/Posts/Members/Hubs sidebar card (uses StatsSection)',
   icon: 'fa-chart-simple',
   category: 'data',
   status: 'stable',
-  configSchema,
-  defaultConfig: { heading: 'Platform Stats' },
+  configSchema: statsConfigSchema,
+  defaultConfig: {},
   schemaVersion: 1,
-  component: SectionStats,
-  // Stat blocks tile down to 2×2 in a quarter-width column comfortably
+  component: StatsSection,
+  // StatsSection takes no props — pass empty object
+  propMap: () => ({}),
   minColSpan: 3,
   maxColSpan: 12,
   defaultColSpan: 4,

package/sections/builtin/video.ts

@@ -0,0 +1,30 @@
+/**
+ * Built-in section definition: video.
+ *
+ * Stage E.2 — reuses BlockVideoView (YouTube/Vimeo embed routing +
+ * local file fallback).
+ *
+ * Schema (incl. URL_MEDIA_OR_EMPTY guard) lives in
+ * `@commonpub/schema/sectionConfigs` (session 161 move).
+ */
+import type { SectionDefinition } from '@commonpub/ui';
+import { videoConfigSchema, type VideoConfig } from '@commonpub/schema';
+import BlockVideoView from '../../components/blocks/BlockVideoView.vue';
+
+export const videoSection: SectionDefinition<VideoConfig> = {
+  type: 'video',
+  name: 'Video',
+  description: 'YouTube / Vimeo / local file (uses BlockVideoView)',
+  icon: 'fa-film',
+  category: 'content',
+  status: 'stable',
+  configSchema: videoConfigSchema,
+  defaultConfig: { url: '' },
+  schemaVersion: 1,
+  component: BlockVideoView,
+  propMap: ({ config }) => ({ content: config }),
+  minColSpan: 6,
+  maxColSpan: 12,
+  defaultColSpan: 12,
+  resizable: true,
+};