@commonpub/layer 0.24.0 → 0.25.0

package/server/utils/validateSectionConfigs.ts

@@ -0,0 +1,123 @@
+/**
+ * Per-section config validation — runs every section's registered
+ * Zod schema against the user-submitted config blob.
+ *
+ * P1 security fix from session 160 audit, finally wired in session 161
+ * after the schemas moved to `@commonpub/schema/sectionConfigs`. The
+ * `layoutCreateSchema` top-level Zod only validates the SHAPE of
+ * `section.config` as `z.record(z.unknown())` — it doesn't enforce
+ * per-type rules (URL guards on hrefs, size caps on arrays, etc)
+ * declared in each section's `configSchema`. Without this check,
+ * an admin can bypass those guards by sending arbitrary config —
+ * limited blast radius (admin auth required) but every CMS treats
+ * admin-tier input as semi-trusted and validates anyway.
+ *
+ * Throws an h3-compatible 400 with a structured `data.sectionErrors`
+ * payload listing every invalid section + the Zod issue. Used by:
+ *   - POST /api/admin/layouts (create)
+ *   - PUT  /api/admin/layouts/[id] (update)
+ *
+ * Unknown section types ALSO 400 — same handler — so a typo'd type
+ * surfaces as a validation error instead of silently rendering a
+ * placeholder on the public page.
+ *
+ * Server-safe because `@commonpub/schema` has zero Vue imports. The
+ * previous attempt to wire this (session 160 R2) imported the section
+ * registry, which transitively pulled `.vue` components into the Nitro
+ * bundle and broke the build. The proper fix — moving schemas to the
+ * schema package — was deferred then; this is that fix.
+ */
+import { SECTION_CONFIG_SCHEMAS } from '@commonpub/schema';
+
+/**
+ * Throw an h3/Nuxt-compatible HTTP error WITHOUT depending on h3
+ * directly (h3 isn't a direct layer dep + isn't resolvable from
+ * vitest). Nitro's error handler treats any thrown Error with
+ * `statusCode` + `statusMessage` + `data` as the equivalent of
+ * createError() — same wire format.
+ */
+function httpError(opts: { statusCode: number; statusMessage: string; data?: unknown }): Error {
+  const err = new Error(opts.statusMessage) as Error & {
+    statusCode: number;
+    statusMessage: string;
+    data?: unknown;
+  };
+  err.statusCode = opts.statusCode;
+  err.statusMessage = opts.statusMessage;
+  err.data = opts.data;
+  return err;
+}
+
+interface InputZone {
+  zone: string;
+  rows: Array<{
+    config?: unknown;
+    sections: Array<{
+      type: string;
+      config: Record<string, unknown>;
+    }>;
+  }>;
+}
+
+interface SectionError {
+  zone: string;
+  rowIndex: number;
+  sectionIndex: number;
+  type: string;
+  // Zod 4's issue.path is PropertyKey[] (string | number | symbol);
+  // symbol paths in user-submitted JSON are not reachable but the type
+  // must accept them.
+  issues: Array<{ path: PropertyKey[]; message: string }>;
+}
+
+/**
+ * Validate every section in a layout's zones against its registered
+ * Zod configSchema. Throws an h3-compatible 400 on any failure.
+ *
+ * No `registry` parameter — schema lookup is done via
+ * `SECTION_CONFIG_SCHEMAS` from `@commonpub/schema`, which is the
+ * canonical type → schema map. Keep that map in sync when adding
+ * new section types (see `packages/schema/src/sectionConfigs.ts`).
+ */
+export function validateSectionConfigs(zones: InputZone[]): void {
+  const errors: SectionError[] = [];
+
+  for (const zone of zones) {
+    zone.rows.forEach((row, rowIndex) => {
+      row.sections.forEach((section, sectionIndex) => {
+        const schema = SECTION_CONFIG_SCHEMAS[section.type];
+        if (!schema) {
+          errors.push({
+            zone: zone.zone,
+            rowIndex,
+            sectionIndex,
+            type: section.type,
+            issues: [{ path: ['type'], message: `Unknown section type: ${section.type}` }],
+          });
+          return;
+        }
+        const result = schema.safeParse(section.config);
+        if (!result.success) {
+          errors.push({
+            zone: zone.zone,
+            rowIndex,
+            sectionIndex,
+            type: section.type,
+            issues: result.error.issues.map((i) => ({
+              path: [...i.path],
+              message: i.message,
+            })),
+          });
+        }
+      });
+    });
+  }
+
+  if (errors.length > 0) {
+    throw httpError({
+      statusCode: 400,
+      statusMessage: `Section config validation failed (${errors.length} section${errors.length === 1 ? '' : 's'})`,
+      data: { code: 'SECTION_CONFIG_INVALID', sectionErrors: errors },
+    });
+  }
+}

package/theme/base.css

@@ -218,6 +218,7 @@
   --nav-height: 3rem;       /* 48px topbar */
   --subnav-height: 2.75rem;
   --sidebar-width: 12.5rem; /* 200px fixed sidebar */
+  --sidebar-width-collapsed: 3.5rem; /* 56px icons-only — admin chrome collapsed state */
   --content-max-width: 60rem; /* 960px */
   --content-wide-max-width: 75rem;
 

package/components/sections/SectionContentFeed.vue

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: content-feed — a data-driven grid of content cards.
- *
- * Phase 1c starter and the first DATA section. Fetches `/api/content`
- * with config-driven filter parameters; renders the existing
- * `<ContentCard>` so the visual identity matches feeds elsewhere on the
- * site.
- *
- * Each instance fetches independently (no global feed cache) — Nuxt's
- * useFetch dedupes by `key`, which we derive from the config so two
- * identically-configured feeds share a single request while two
- * differently-configured feeds (e.g. main + sidebar with different
- * `sort`) hit the endpoint separately.
- *
- * SSR-safe: useFetch fetches at setup() and includes the payload in the
- * hydration snapshot.
- *
- * `var(--*)` only.
- */
-import { computed } from 'vue';
-import type { PaginatedResponse, Serialized, ContentListItem } from '@commonpub/server';
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface ContentFeedConfig extends Record<string, unknown> {
-  heading: string;
-  contentType: string;
-  sort: 'recent' | 'popular' | 'featured' | 'editorial';
-  limit: number;
-  columns: 1 | 2 | 3 | 4;
-  tag: string;
-  featured: boolean;
-}
-
-const props = defineProps<SectionRenderProps<ContentFeedConfig>>();
-
-// Build the API query — server expects `type` (single value or absent),
-// `sort`, `limit`, `tag`, `featured`. Omit empty strings so the validator
-// treats them as absent (vs the empty-string=match-empty trap).
-const apiQuery = computed(() => {
-  const q: Record<string, unknown> = {
-    status: 'published',
-    sort: props.config.sort,
-    limit: Math.min(Math.max(props.config.limit, 1), 24),
-  };
-  if (props.config.contentType) q.type = props.config.contentType;
-  if (props.config.tag) q.tag = props.config.tag;
-  if (props.config.featured) q.featured = true;
-  return q;
-});
-
-// Stable key so two identical content-feed sections on the same page
-// share a single request, while different configurations don't collide.
-const fetchKey = computed(
-  () => `section-content-feed:${JSON.stringify(apiQuery.value)}`,
-);
-
-// NO await — section is rendered inside <LayoutSlot> deep in the tree;
-// awaiting top-level here would require Suspense on every parent, which
-// neither the production page-render path nor the editor preview pane
-// is set up for. The page (`/`, `/about`, etc.) already does its own
-// `await useFetch` for content via the legacy renderer, so initial
-// load is data-ready; this section's fetch is a fresh request per
-// instance + config. Pending state surfaces in the template instead.
-const { data: feed, pending } = useFetch<PaginatedResponse<Serialized<ContentListItem>>>(
-  '/api/content',
-  {
-    query: apiQuery,
-    key: fetchKey.value,
-    // Empty-result handler: surface a friendly empty state in the template
-    // rather than throwing. 404 wouldn't be a thing on /api/content anyway.
-  },
-);
-
-const items = computed(() => feed.value?.items ?? []);
-const isEmpty = computed(() => !pending.value && items.value.length === 0);
-</script>
-
-<template>
-  <section
-    class="cpub-section-content-feed"
-    :aria-labelledby="config.heading ? `section-feed-${meta.sectionId}` : undefined"
-  >
-    <h2
-      v-if="config.heading"
-      :id="`section-feed-${meta.sectionId}`"
-      class="cpub-section-content-feed-heading"
-    >
-      {{ config.heading }}
-    </h2>
-
-    <div v-if="pending" class="cpub-section-content-feed-loading">
-      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true" />
-      <span>Loading…</span>
-    </div>
-
-    <div
-      v-else-if="!isEmpty"
-      class="cpub-section-content-feed-grid"
-      :data-columns="config.columns"
-    >
-      <ContentCard
-        v-for="item in items"
-        :key="item.id"
-        :item="item"
-      />
-    </div>
-
-    <p v-else class="cpub-section-content-feed-empty">
-      No content yet.
-    </p>
-  </section>
-</template>
-
-<style scoped>
-.cpub-section-content-feed {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-.cpub-section-content-feed-heading {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-faint);
-  margin: 0;
-  padding-bottom: var(--space-2);
-  border-bottom: var(--border-width-default) solid var(--border);
-}
-.cpub-section-content-feed-grid {
-  display: grid;
-  gap: var(--space-3);
-}
-.cpub-section-content-feed-grid[data-columns='1'] { grid-template-columns: 1fr; }
-.cpub-section-content-feed-grid[data-columns='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.cpub-section-content-feed-grid[data-columns='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.cpub-section-content-feed-grid[data-columns='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-
-/* Responsive collapse — multi-col grids stack on tablet/mobile */
-@media (max-width: 1024px) {
-  .cpub-section-content-feed-grid[data-columns='3'],
-  .cpub-section-content-feed-grid[data-columns='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (max-width: 640px) {
-  .cpub-section-content-feed-grid { grid-template-columns: 1fr; }
-}
-
-.cpub-section-content-feed-loading,
-.cpub-section-content-feed-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  padding: var(--space-6);
-  color: var(--text-faint);
-  font-size: var(--text-sm);
-}
-</style>

package/components/sections/SectionContests.vue

@@ -1,193 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: contests — active-contests list with countdown.
- *
- * Fetches `/api/contests?limit=N`, renders sidebar-style card. Each
- * row: title (link), entry count, "Nd left" deadline, Enter CTA.
- * Mirrors legacy `ContestsSection.vue`.
- *
- * Feature-gated upstream — when `features.contests` is off the API
- * returns 404 and the section renders the empty branch.
- *
- * Non-await useFetch per session-158 pattern. `var(--*)` only.
- */
-import { computed } from 'vue';
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface ContestItem {
-  id: string;
-  slug: string;
-  title: string;
-  entryCount?: number | null;
-  endDate?: string | Date | null;
-}
-
-interface ContestsResponse {
-  items?: ContestItem[];
-}
-
-interface ContestsConfig extends Record<string, unknown> {
-  heading: string;
-  limit: number;
-}
-
-const props = defineProps<SectionRenderProps<ContestsConfig>>();
-
-const apiQuery = computed(() => ({
-  limit: Math.min(Math.max(props.config.limit, 1), 10),
-}));
-
-const { data: contests, pending } = useFetch<ContestsResponse>(
-  '/api/contests',
-  {
-    query: apiQuery,
-    key: `section-contests:${JSON.stringify(apiQuery.value)}`,
-    // Sidebar widget — lazy so initial SSR doesn't block on the contests
-    // query (which is ~5x slower than /api/hubs in practice). Matches the
-    // legacy ContestsSection.vue pattern.
-    lazy: true,
-  },
-);
-
-const items = computed(() => contests.value?.items ?? []);
-const isEmpty = computed(() => !pending.value && items.value.length === 0);
-
-function daysLeft(endDate: string | Date | null | undefined): number | null {
-  if (!endDate) return null;
-  const ms = new Date(endDate).getTime() - Date.now();
-  if (Number.isNaN(ms)) return null;
-  return Math.max(0, Math.ceil(ms / 86_400_000));
-}
-</script>
-
-<template>
-  <section
-    class="cpub-section-contests"
-    :aria-labelledby="config.heading ? `section-contests-${meta.sectionId}` : undefined"
-  >
-    <header
-      v-if="config.heading"
-      class="cpub-section-contests-header"
-    >
-      <h2
-        :id="`section-contests-${meta.sectionId}`"
-        class="cpub-section-contests-heading"
-      >
-        {{ config.heading }}
-      </h2>
-      <NuxtLink to="/contests" class="cpub-section-contests-all">View all</NuxtLink>
-    </header>
-
-    <div v-if="pending" class="cpub-section-contests-loading">
-      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true" />
-    </div>
-
-    <ul v-else-if="!isEmpty" class="cpub-section-contests-list">
-      <li v-for="c in items" :key="c.id" class="cpub-section-contests-item">
-        <NuxtLink :to="`/contests/${c.slug}`" class="cpub-section-contests-name">
-          {{ c.title }}
-        </NuxtLink>
-        <div class="cpub-section-contests-meta">
-          <span class="cpub-section-contests-entries">
-            {{ c.entryCount ?? 0 }} entries
-          </span>
-          <span v-if="daysLeft(c.endDate) !== null" class="cpub-section-contests-deadline">
-            <i class="fa-regular fa-clock" aria-hidden="true" />
-            {{ daysLeft(c.endDate) }}d left
-          </span>
-        </div>
-        <NuxtLink :to="`/contests/${c.slug}`" class="cpub-section-contests-cta">
-          Enter Contest
-        </NuxtLink>
-      </li>
-    </ul>
-
-    <p v-else class="cpub-section-contests-empty">No active contests.</p>
-  </section>
-</template>
-
-<style scoped>
-.cpub-section-contests {
-  background: var(--surface);
-  border: var(--border-width-default) solid var(--border);
-  padding: var(--space-4);
-}
-.cpub-section-contests-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: var(--space-2);
-  border-bottom: var(--border-width-default) solid var(--border-soft);
-  margin-bottom: var(--space-3);
-}
-.cpub-section-contests-heading {
-  font-family: var(--font-mono);
-  font-size: var(--text-xxs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-faint);
-  margin: 0;
-}
-.cpub-section-contests-all {
-  font-family: var(--font-mono);
-  font-size: var(--text-xxs);
-  color: var(--accent);
-  text-decoration: none;
-}
-.cpub-section-contests-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.cpub-section-contests-item {
-  padding: var(--space-2) 0;
-  border-bottom: var(--border-width-default) solid var(--border-soft);
-}
-.cpub-section-contests-item:last-child { border-bottom: none; }
-.cpub-section-contests-name {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--text);
-  text-decoration: none;
-  display: block;
-  margin-bottom: var(--space-1);
-}
-.cpub-section-contests-name:hover { color: var(--accent); }
-.cpub-section-contests-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  margin-bottom: var(--space-2);
-}
-.cpub-section-contests-entries,
-.cpub-section-contests-deadline {
-  font-family: var(--font-mono);
-  font-size: var(--text-xxs);
-  color: var(--text-faint);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-.cpub-section-contests-cta {
-  font-family: var(--font-mono);
-  font-size: var(--text-xxs);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: var(--space-1) var(--space-2);
-  border: var(--border-width-default) solid var(--accent);
-  color: var(--accent);
-  text-decoration: none;
-  display: inline-block;
-}
-.cpub-section-contests-cta:hover { background: var(--accent-bg); }
-.cpub-section-contests-loading,
-.cpub-section-contests-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-4);
-  color: var(--text-faint);
-  font-size: var(--text-sm);
-}
-</style>

package/components/sections/SectionCustomHtml.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: custom-html — admin-only raw HTML escape hatch.
- *
- * **SECURITY**: renders `config.html` via `v-html` with no runtime
- * sanitization. Intentional Phase-1c posture — matches the legacy
- * `CustomHtmlSection.vue` security baseline that already ships in
- * production. Threat-model + Phase 6b sanitization plan live in the
- * section definition file (`builtin/custom-html.ts`) and
- * `docs/plans/layout-and-pages.md §6.5`.
- *
- * Only trusted admin users can write to this section via
- * `/api/admin/layouts/*` (gated on `requireAdmin(event)`). A compromised
- * admin account → stored XSS — that's the gap we're documenting +
- * tracking, not the gap we're closing this session.
- *
- * `var(--*)` only.
- */
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface CustomHtmlConfig extends Record<string, unknown> {
-  heading: string;
-  html: string;
-}
-
-const props = defineProps<SectionRenderProps<CustomHtmlConfig>>();
-void props;  // template uses config + meta directly via `<script setup>`
-</script>
-
-<template>
-  <section
-    v-if="config.html"
-    class="cpub-section-custom-html"
-    :aria-labelledby="config.heading ? `section-custom-${meta.sectionId}` : undefined"
-  >
-    <h2
-      v-if="config.heading"
-      :id="`section-custom-${meta.sectionId}`"
-      class="cpub-section-custom-html-heading"
-    >
-      {{ config.heading }}
-    </h2>
-    <!-- v-html: see security note in source. Trusted admin input only. -->
-    <div class="cpub-section-custom-html-body" v-html="config.html" />
-  </section>
-</template>
-
-<style scoped>
-.cpub-section-custom-html {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-.cpub-section-custom-html-heading {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-faint);
-  margin: 0;
-  padding-bottom: var(--space-2);
-  border-bottom: var(--border-width-default) solid var(--border);
-}
-.cpub-section-custom-html-body {
-  font-size: var(--text-base);
-  line-height: 1.7;
-  color: var(--text);
-}
-</style>

package/components/sections/SectionDivider.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: divider — a horizontal rule.
- *
- * Phase 1 proof-of-life — the simplest possible section, validating that:
- *   - `SectionRegistry.register()` accepts a Vue component
- *   - `<LayoutSlot>` resolves the section type slug to a renderer
- *   - The renderer receives `config` + `meta` and produces DOM
- *
- * Phase 1c adds the real catalogue (hero / heading / paragraph / image /
- * content-feed). Until then, dropping a divider into a layout is the
- * end-to-end smoke test of the layout engine.
- *
- * Uses `var(--*)` only (rule #3); inherits all colors / spacing from
- * the active theme.
- */
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface DividerConfig extends Record<string, unknown> {
-  variant: 'solid' | 'dashed' | 'dotted' | 'accent';
-  spacingY: 'sm' | 'md' | 'lg' | 'xl';
-}
-
-defineProps<SectionRenderProps<DividerConfig>>();
-</script>
-
-<template>
-  <hr
-    class="cpub-section-divider"
-    :data-variant="config.variant"
-    :data-spacing-y="config.spacingY"
-    :aria-label="`section ${meta.sectionId}`"
-  />
-</template>
-
-<style scoped>
-.cpub-section-divider {
-  margin-block: var(--space-4);
-  border: 0;
-  border-top: var(--border-width-default) solid var(--border2);
-  width: 100%;
-}
-
-.cpub-section-divider[data-variant='dashed'] { border-top-style: dashed; }
-.cpub-section-divider[data-variant='dotted'] { border-top-style: dotted; }
-.cpub-section-divider[data-variant='accent']  {
-  border-top-color: var(--accent);
-  border-top-width: var(--border-width-thick);
-}
-
-.cpub-section-divider[data-spacing-y='sm']  { margin-block: var(--space-2); }
-.cpub-section-divider[data-spacing-y='md']  { margin-block: var(--space-4); }
-.cpub-section-divider[data-spacing-y='lg']  { margin-block: var(--space-6); }
-.cpub-section-divider[data-spacing-y='xl']  { margin-block: var(--space-8); }
-</style>