@commonpub/layer 0.23.3 → 0.25.0

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/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>

package/components/sections/SectionHeading.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: heading — a single configurable heading (h1–h4)
- * with optional eyebrow + subline.
- *
- * Phase 1c starter. Semantic level is admin-chosen — the auto-form
- * inspector (Phase 3e) will warn on multiple h1s per layout.
- *
- * `var(--*)` only.
- */
-import { computed } from 'vue';
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface HeadingConfig extends Record<string, unknown> {
-  text: string;
-  level: 1 | 2 | 3 | 4;
-  align: 'left' | 'center';
-  eyebrow: string;
-  subline: string;
-}
-
-const props = defineProps<SectionRenderProps<HeadingConfig>>();
-
-// Vue's <component :is> with a tag string handles the level swap without
-// needing a v-if chain. Defensive clamp: an out-of-range level (shouldn't
-// happen — Zod gates it on write) falls back to h2.
-const headingTag = computed(() => {
-  const n = props.config.level;
-  return n >= 1 && n <= 4 ? `h${n}` : 'h2';
-});
-</script>
-
-<template>
-  <section
-    class="cpub-section-heading"
-    :data-align="config.align"
-    :aria-labelledby="`section-heading-${meta.sectionId}`"
-  >
-    <p v-if="config.eyebrow" class="cpub-section-heading-eyebrow">{{ config.eyebrow }}</p>
-    <component
-      :is="headingTag"
-      :id="`section-heading-${meta.sectionId}`"
-      class="cpub-section-heading-text"
-    >
-      {{ config.text }}
-    </component>
-    <p v-if="config.subline" class="cpub-section-heading-subline">{{ config.subline }}</p>
-  </section>
-</template>
-
-<style scoped>
-.cpub-section-heading {
-  margin-block: var(--space-4);
-}
-.cpub-section-heading[data-align='center'] {
-  text-align: center;
-}
-.cpub-section-heading-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-heading-text {
-  margin: 0;
-  font-weight: 700;
-  line-height: 1.25;
-  color: var(--text);
-}
-.cpub-section-heading-subline {
-  margin: var(--space-2) 0 0;
-  color: var(--text-dim);
-  font-size: var(--text-md);
-  line-height: 1.6;
-}
-</style>

package/components/sections/SectionHero.vue

@@ -1,164 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-<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

@@ -1,55 +0,0 @@
-<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>