@michaelthielemann/kestrel 1.2.1

package/layers/admin/app/components/EditorStatus.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+// The editor "Ampel": TWO lamps side by side in the action bar, each a dot + ONE word + a details tooltip.
+//   LEFT  — the SAVE / draft lifecycle of THIS record (its local vs. stored state):
+//             amber  — work in flight: saving, or unsaved local changes not yet in the DB
+//             blue   — saved but a Draft, so it is intentionally NOT on the live/static site
+//             green  — saved and (for status collections) published, or just saved (no status field)
+//   RIGHT — the GENERATED state of this record's static page (pageLike collections only), read from
+//           `publish_status` via `/api/publish-status`:
+//             green   — the route's last publish succeeded (the file is live; the tooltip names local vs S3)
+//             amber   — published but no success row yet — a republish is in flight ("Generating…")
+//             neutral — this environment never produces the file (dev / static output off) → "Not built"
+//             red     — the last publish for the route errored (render / write / S3) — details in the tooltip
+//             blue    — a Draft: intentionally not generated, so there is no live file
+import type { PublishStatusData } from '../composables/usePublishStatus'
+
+const props = defineProps<{
+  dirty: boolean
+  saving?: boolean
+  hasStatus?: boolean
+  /** The LIVE (possibly unsaved) form status — drives the left lamp's word. */
+  status?: string
+  /** The last SAVED publish status — drives the RIGHT lamp's draft/published decision, so an unsaved
+   *  dropdown switch never flips the generated-state indicator. Falls back to `status` when absent. */
+  savedStatus?: string
+  /** Only pageLike collections produce a static page → only they get the right (live) lamp. */
+  pageLike?: boolean
+  /** The record's last publish outcome (from `/api/publish-status`); null/absent while unknown. */
+  live?: PublishStatusData | null
+}>()
+const { t, lang } = useT()
+
+// LEFT lamp — save + publish state. `word` is the single label shown; `detail` is the tooltip sentence.
+const save = computed<{ tone: 'amber' | 'green' | 'blue'; word: string; detail: string }>(() => {
+  if (props.saving) return { tone: 'amber', word: t('editorStatus.word.saving'), detail: t('editorStatus.detail.saving') }
+  if (props.dirty) return { tone: 'amber', word: t('editorStatus.word.unsaved'), detail: t('editorStatus.detail.unsaved') }
+  if (props.hasStatus && props.status === 'draft') return { tone: 'blue', word: t('editorStatus.word.draft'), detail: t('editorStatus.detail.draft') }
+  if (props.hasStatus) return { tone: 'green', word: t('editorStatus.word.published'), detail: t('editorStatus.detail.published') }
+  return { tone: 'green', word: t('editorStatus.word.saved'), detail: t('editorStatus.detail.saved') }
+})
+
+const updatedAtLabel = computed(() => {
+  const at = props.live?.updatedAt
+  if (!at) return ''
+  const d = new Date(at)
+  if (Number.isNaN(d.getTime())) return ''
+  return t('editorStatus.live.updatedAt', { time: d.toLocaleString(lang.value) })
+})
+
+// RIGHT lamp — the live / generated state of this record's static page. Only a SAVED pageLike record with a
+// resolved route has one (a non-pageLike collection produces no static page; an unsaved `new` record leaves
+// `live.route` null → no right lamp until the record actually has a page).
+const live = computed<{ tone: 'green' | 'red' | 'amber' | 'blue' | 'neutral'; word: string; detail: string; when?: string; error?: string } | null>(() => {
+  if (props.pageLike !== true || !props.live?.route) return null
+  // Key the draft/published decision off the SAVED status, not the live form value: an unsaved dropdown
+  // switch must not move the generated-state indicator. Switching a live page → Draft keeps it "Live" (the
+  // file stays on the server until the save prunes it); switching a saved Draft → Published keeps it "Not
+  // live" (nothing is generated until the publish is actually saved). A DISTINCT word from the left lamp's
+  // "Draft" so the two lamps read as two signals (save-state vs generated-state), not a repeat.
+  const saved = props.savedStatus ?? props.status
+  if (props.hasStatus && saved === 'draft')
+    return { tone: 'blue', word: t('editorStatus.word.notLive'), detail: t('editorStatus.live.draft') }
+  const s = props.live?.status ?? null
+  if (s === 'error')
+    return { tone: 'red', word: t('editorStatus.word.error'), detail: t('editorStatus.live.error'), when: updatedAtLabel.value, error: props.live?.error ?? '' }
+  if (s === 'success') {
+    // Where the file actually landed — surface local vs S3 in the tooltip ("stored on S3").
+    const onS3 = (props.live?.target ?? props.live?.driver) === 's3'
+    return { tone: 'green', word: t('editorStatus.word.live'), detail: t(onS3 ? 'editorStatus.live.liveS3' : 'editorStatus.live.liveLocal'), when: updatedAtLabel.value }
+  }
+  // No success row yet. Only an explicit generates:false means "this environment produces nothing" (dev /
+  // static output off) → a calm neutral "Not built". Unknown (undefined) → assume a publish is in flight.
+  if (props.live?.generates === false)
+    return { tone: 'neutral', word: t('editorStatus.word.notBuilt'), detail: t('editorStatus.live.notBuilt') }
+  return { tone: 'amber', word: t('editorStatus.word.generating'), detail: t('editorStatus.live.pending') }
+})
+</script>
+
+<template>
+  <span class="editor-status-group">
+    <!-- Polite live region: announces save-state transitions (Saved → Unsaved → Saving…) to screen readers.
+         Visually hidden; not a tooltip. -->
+    <span class="editor-status-sr" role="status" aria-live="polite">{{ save.detail }}</span>
+
+    <UiTooltip side="bottom">
+      <!-- A focusable status indicator, NOT a <button>: it has no action, and a button whose accessible
+           name contains "Saved"/"Unsaved" would collide with `getByRole('button', {name:'Save'})`. aria-label
+           leads with the visible word so it stays part of the accessible name, then adds the detail for AT. -->
+      <span class="editor-status" tabindex="0" :data-tone="save.tone" :aria-label="`${save.word} — ${save.detail}`">
+        <span class="editor-status__dot" aria-hidden="true" />
+        <span class="editor-status__word">{{ save.word }}</span>
+      </span>
+      <template #content>
+        <span class="editor-status-tip">
+          <strong class="editor-status-tip__detail">{{ save.detail }}</strong>
+        </span>
+      </template>
+    </UiTooltip>
+
+    <UiTooltip v-if="live" side="bottom">
+      <span class="editor-status-live" tabindex="0" :data-tone="live.tone" :aria-label="`${live.word} — ${live.detail}`">
+        <span class="editor-status-live__dot" aria-hidden="true" />
+        <span class="editor-status-live__word">{{ live.word }}</span>
+      </span>
+      <template #content>
+        <span class="editor-status-tip">
+          <strong class="editor-status-tip__detail">{{ live.detail }}</strong>
+          <span v-if="live.when" class="editor-status-tip__when">{{ live.when }}</span>
+          <span v-if="live.tone === 'red' && live.error" class="editor-status-tip__err">{{ live.error }}</span>
+        </span>
+      </template>
+    </UiTooltip>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.editor-status-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+// Visually-hidden polite status region (mirrors the ui sr-only mixin; admin can't @use a ui-layer scss).
+.editor-status-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Both lamps are focusable status indicators (tabindex spans, not buttons) so the tooltip opens on hover
+// AND keyboard focus, without adding a "Save"-named button that would clash with Save-button selectors.
+.editor-status,
+.editor-status-live {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: help;
+
+  &__dot {
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: var(--radius-full);
+    background: var(--_tone, var(--color-text-subtle));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_tone, transparent) 22%, transparent);
+    flex: none;
+  }
+  &__word {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    white-space: nowrap;
+  }
+
+  &[data-tone='amber'] {
+    --_tone: var(--color-warning);
+  }
+  &[data-tone='green'] {
+    --_tone: var(--color-success);
+  }
+  &[data-tone='blue'] {
+    --_tone: var(--color-primary);
+  }
+  &[data-tone='red'] {
+    --_tone: var(--color-danger);
+  }
+  &[data-tone='neutral'] {
+    --_tone: var(--color-text-subtle);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+}
+</style>
+
+<!-- Not scoped: the tooltip content is teleported to <body> by Reka, where a scoped data-v selector no
+     longer matches (same reason UiTooltip itself keeps global styles). -->
+<style lang="scss">
+.editor-status-tip {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+
+  &__when {
+    color: var(--color-text-muted);
+    font-size: var(--text-xs);
+  }
+  &__err {
+    color: var(--color-danger);
+    font-size: var(--text-xs);
+    word-break: break-word;
+  }
+}
+</style>

package/layers/admin/app/components/EditorUnsupported.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// Fallback body when a collection's `editor` type has no registered body (an extension misconfig or a
+// missing plugin). Fails visibly instead of rendering blank.
+defineProps<{ editor: string }>()
+const { t } = useT()
+</script>
+
+<template>
+  <div class="editor-unsupported">
+    <p class="editor-unsupported__note">{{ t('editor.unsupported', { type: editor }) }}</p>
+  </div>
+</template>
+
+<style lang="scss">
+.editor-unsupported {
+  flex: 1 1 auto;
+  min-height: 0;
+
+  &__note {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface-2);
+  }
+}
+</style>

package/layers/admin/app/components/FieldsBody.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// The schema-driven default editor body: a plain field list. All state comes from the editor form
+// context provided by CollectionEditor; this body only lays it out.
+const ctx = useEditorFormContext()
+</script>
+
+<template>
+  <div class="editor__flat">
+    <PageFieldsPane v-bind="ctx.pageFieldsBindings.value" v-on="ctx.pageFieldsHandlers" />
+  </div>
+</template>
+
+<style lang="scss">
+// Flat-collection field list: its own scroll region, so the shell's actions row stays pinned below it.
+.editor__flat {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+</style>

package/layers/admin/app/components/LocaleBar.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// Pruvious-style content-locale switcher for the record editor. Shows every configured website locale:
+// the active one as a label, an existing sibling as a pen (edit) + copy control, a missing one as a
+// "+" (create) link. Content locales only — not the admin-UI language.
+const props = defineProps<{
+  collection: string
+  id: string
+  mode: 'single' | 'multi'
+  current: string
+  translations: Record<string, number | null>
+  group?: string
+}>()
+const emit = defineEmits<{ copyFrom: [locale: string] }>()
+
+const { locales } = useContentLocales()
+
+/** Existing sibling row id for a locale (multi only), or null when there is no translation yet. */
+function existingId(loc: string): number | null {
+  const v = props.translations[loc]
+  return typeof v === 'number' ? v : null
+}
+function createLink(loc: string): string {
+  const q = new URLSearchParams({ locale: loc })
+  if (props.group) q.set('group', props.group)
+  return `/admin/${props.collection}/new?${q.toString()}`
+}
+const up = (s: string) => s.toUpperCase()
+const { t } = useT()
+</script>
+
+<template>
+  <div class="locale-bar" role="group" :aria-label="t('localeBar.groupLabel')">
+    <template v-for="loc in locales" :key="loc">
+      <span v-if="loc === current" class="locale-bar__item locale-bar__item--active" aria-current="true">{{ up(loc) }}</span>
+
+      <NuxtLink
+        v-else-if="mode === 'single'"
+        class="locale-bar__item locale-bar__btn"
+        :to="`/admin/${collection}?locale=${loc}`"
+        :aria-label="t('localeBar.editLocale', { loc: up(loc) })"
+      >{{ up(loc) }}<UiIcon name="pencil" :size="14" /></NuxtLink>
+
+      <span v-else-if="existingId(loc) !== null" class="locale-bar__item">
+        <NuxtLink class="locale-bar__btn" :to="`/admin/${collection}/${existingId(loc)}?locale=${loc}`" :aria-label="t('localeBar.editLocale', { loc: up(loc) })">{{ up(loc) }}<UiIcon name="pencil" :size="14" /></NuxtLink>
+        <button type="button" class="locale-bar__btn locale-bar__btn--copy" :aria-label="t('localeBar.copyInto', { loc: up(loc), current: up(current) })" @click="emit('copyFrom', loc)"><UiIcon name="copy" :size="14" /></button>
+      </span>
+
+      <NuxtLink
+        v-else
+        class="locale-bar__item locale-bar__btn locale-bar__btn--add"
+        :to="createLink(loc)"
+        :aria-label="t('localeBar.createTranslation', { loc: up(loc) })"
+      >{{ up(loc) }}<UiIcon name="plus" :size="14" /></NuxtLink>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+.locale-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+
+    &--active {
+      padding: var(--space-1) var(--space-2);
+      border-radius: var(--radius-sm);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+  }
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--color-text-muted);
+      color: var(--color-text);
+    }
+    &--add {
+      border-style: solid;
+      border-color: var(--color-border);
+      color: var(--color-text-muted);
+    }
+    &--copy {
+      padding: var(--space-1);
+    }
+  }
+}
+</style>

package/layers/admin/app/components/PageFields.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { FieldDef } from '../../../core/server/utils/defineCollection'
+import type { LayoutNode } from '../../../core/server/utils/field-layout'
+import type { SeoMeta } from '../../../core/server/utils/seo'
+
+// The collection (page) field list — delegates to the shared <FieldLayout> renderer (rows / groups /
+// widths, or one field per row when the collection declares no layout), shared by the flat-collection
+// form and the 3-pane editor's root-selected pane so the wiring lives in exactly one place. pageLike
+// collections also get their routable `path` (slug); seo-enabled ones get the SEO section — both as
+// page-level system fields bracketing the collection fields.
+const props = defineProps<{
+  fields: Record<string, FieldDef>
+  /** Normalized admin editor layout (from the serialized collection). Absent → one field per row. */
+  fieldLayout?: LayoutNode[]
+  values: Record<string, unknown>
+  errors: Record<string, string>
+  /** Root field keys holding a stale reference — shown as a non-blocking warning note. */
+  deadFields?: Set<string>
+  locale: string
+  pageLike?: boolean
+  seo?: boolean
+  status?: boolean
+  disabled?: boolean
+}>()
+const emit = defineEmits<{ update: [name: string, value: unknown] }>()
+const { t } = useT()
+
+// Live preview of the slug the server will auto-generate from the title while the field is left blank
+// (the server slugifies the title on save). Falls back to '/' when there is no title yet.
+const slugPlaceholder = computed(() => {
+  const s = slugify(recordTitle(props.fields, props.values))
+  return s ? `/${s}` : '/'
+})
+</script>
+
+<template>
+  <!-- Publish gate (the `status` system column). The primary page-level control, so it leads the pane:
+       Draft keeps the page out of the generated site; Published renders + auto-publishes it. -->
+  <UiField
+    v-if="status"
+    class="page-settings__status"
+    :label="t('pageSettings.statusLabel')"
+    :hint="t('pageSettings.statusHint')"
+  >
+    <template #default="f">
+      <UiSelect
+        :model-value="(values.status as string) ?? 'draft'"
+        :options="[
+          { label: t('pageSettings.statusDraft'), value: 'draft' },
+          { label: t('pageSettings.statusPublished'), value: 'published' },
+        ]"
+        :disabled="disabled"
+        v-bind="f"
+        @update:model-value="(v) => emit('update', 'status', v)"
+      />
+    </template>
+  </UiField>
+
+  <!-- The collection (page) fields, laid out by the shared renderer (rows / groups / widths, or one field
+       per row when the collection declares no `fieldLayout`). The condition gate + dead-ref note live inside. -->
+  <FieldLayout
+    :layout="fieldLayout"
+    :fields="fields"
+    :values="values"
+    :errors="errors"
+    :dead-fields="deadFields"
+    :locale="locale"
+    :disabled="disabled"
+    @update="(name, value) => emit('update', name, value)"
+  />
+
+  <!-- Page slug (the routable path). A system column on pageLike collections, edited like a field. -->
+  <UiField
+    v-if="pageLike"
+    class="page-settings__slug"
+    :label="t('pageSettings.slugLabel')"
+    :hint="t('pageSettings.slugHint')"
+    :error="errors.path || null"
+  >
+    <template #default="f">
+      <UiTextInput
+        :model-value="(values.path as string) ?? ''"
+        :disabled="disabled"
+        :placeholder="slugPlaceholder"
+        v-bind="f"
+        @update:model-value="(v) => emit('update', 'path', v)"
+      />
+    </template>
+  </UiField>
+
+  <!-- Page SEO (meta title/description/noindex + Google preview). The `seo` JSON system column. -->
+  <SeoFields
+    v-if="seo"
+    :value="(values.seo as SeoMeta) ?? {}"
+    :page-title="(values.title as string) ?? ''"
+    :path="(values.path as string) ?? ''"
+    :locale="locale"
+    :disabled="disabled"
+    @update="(v) => emit('update', 'seo', v)"
+  />
+</template>

package/layers/admin/app/components/PageFieldsPane.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PageFieldsBindings } from '../utils/editor-form-context'
+
+// The page-fields fragment shared by both editor bodies: an optional content-locale switcher
+// (labelled like a page field) sitting above the collection (page) field list. Centralises the
+// LocaleBar + PageFields wiring so the flat form and the 3-pane editor's root pane stay in sync.
+// Props are the shared `PageFieldsBindings` type — the same shape the shell pre-builds and provides.
+defineProps<PageFieldsBindings>()
+const emit = defineEmits<{ copyFrom: [locale: string]; update: [name: string, value: unknown] }>()
+const { t } = useT()
+</script>
+
+<template>
+  <div v-if="translatable" class="ui-field">
+    <span class="ui-field__label">{{ t('localeBar.fieldLabel') }}</span>
+    <LocaleBar
+      :collection="collection"
+      :id="id"
+      :mode="mode"
+      :current="locale"
+      :translations="translations"
+      :group="group"
+      @copy-from="(loc) => emit('copyFrom', loc)"
+    />
+  </div>
+  <PageFields
+    :fields="fields"
+    :field-layout="fieldLayout"
+    :values="values"
+    :errors="errors"
+    :dead-fields="deadFields"
+    :locale="locale"
+    :page-like="pageLike"
+    :seo="seo"
+    :status="status"
+    :disabled="disabled"
+    @update="(name, value) => emit('update', name, value)"
+  />
+</template>

package/layers/admin/app/components/SeoFields.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { SeoMeta } from '../../../core/server/utils/seo'
+import type { FieldDef } from '../../../core/server/utils/defineCollection'
+import { localePath } from '../../../core/app/utils/locale-path'
+
+// The page-level SEO section: edit the meta title/description/noindex (the `seo` system column) with a
+// live Google-result preview. Emits the whole merged SeoMeta so the parent routes it through setField.
+const props = defineProps<{
+  value: SeoMeta
+  pageTitle?: string
+  path?: string
+  locale: string
+  disabled?: boolean
+}>()
+const emit = defineEmits<{ update: [seo: SeoMeta] }>()
+const { t } = useT()
+const { primary, prefixPrimary } = useContentLocales()
+
+// Soft guidance limits (Google truncates ~ these lengths).
+const TITLE_MAX = 60
+const DESC_MAX = 160
+
+function patch(next: Partial<SeoMeta>) {
+  emit('update', { ...props.value, ...next })
+}
+
+const previewTitle = computed(() => props.value.title?.trim() || props.pageTitle?.trim() || t('seo.untitled'))
+const previewDesc = computed(() => props.value.description?.trim() || t('seo.noDescription'))
+
+const host = computed(() => {
+  try { return useRequestURL().host } catch { return '' }
+})
+const previewUrl = computed(() => `${host.value}${localePath(props.path || '/', props.locale, primary, prefixPrimary)}`)
+
+const titleLen = computed(() => (props.value.title ?? '').length)
+const descLen = computed(() => (props.value.description ?? '').length)
+
+// The social-share image (og:image) rides the standard media widget over a synthetic single-media field
+// def — same picker/thumb/remove UX as any media field, stored as `seo.image` (a media id).
+const socialImageField = { type: 'media', options: { accept: 'image' } } as FieldDef
+</script>
+
+<template>
+  <div class="seo-fields">
+    <p class="seo-fields__section-label">{{ t('seo.sectionLabel') }}</p>
+
+    <!-- Google SERP-style preview. Decorative (it mirrors the inputs below) → hidden from SRs. -->
+    <div class="seo-preview" aria-hidden="true">
+      <div class="seo-preview__url">{{ previewUrl }}</div>
+      <div class="seo-preview__title">{{ previewTitle }}</div>
+      <div class="seo-preview__desc">{{ previewDesc }}</div>
+    </div>
+
+    <UiField class="seo-fields__title" :label="t('seo.metaTitle')" :hint="`${titleLen}/${TITLE_MAX}`">
+      <template #default="f">
+        <UiTextInput
+          :model-value="value.title ?? ''"
+          :placeholder="pageTitle"
+          :disabled="disabled"
+          v-bind="f"
+          @update:model-value="(v) => patch({ title: v ?? '' })"
+        />
+      </template>
+    </UiField>
+
+    <UiField class="seo-fields__desc" :label="t('seo.metaDescription')" :hint="`${descLen}/${DESC_MAX}`">
+      <template #default="f">
+        <UiTextarea
+          :model-value="value.description ?? ''"
+          :rows="3"
+          :disabled="disabled"
+          v-bind="f"
+          @update:model-value="(v) => patch({ description: v ?? '' })"
+        />
+      </template>
+    </UiField>
+
+    <UiField class="seo-fields__image" :label="t('seo.socialImage')" :hint="t('seo.socialImageHint')">
+      <template #default="f">
+        <FieldMedia
+          :field="socialImageField"
+          name="seoImage"
+          :locale="locale"
+          :disabled="disabled"
+          v-bind="f"
+          :model-value="value.image ?? null"
+          @update:model-value="(v) => patch({ image: typeof v === 'number' ? v : null })"
+        />
+      </template>
+    </UiField>
+
+    <label class="seo-fields__noindex">
+      <UiCheckbox
+        :model-value="!!value.noindex"
+        :disabled="disabled"
+        @update:model-value="(v) => patch({ noindex: v })"
+      />
+      <span>{{ t('seo.noindexLabel') }}</span>
+    </label>
+  </div>
+</template>
+
+<style lang="scss">
+.seo-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+
+  &__section-label {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--weight-medium);
+    color: var(--color-text-muted);
+  }
+
+  &__noindex {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    cursor: pointer;
+
+    input {
+      width: 1rem;
+      height: 1rem;
+      accent-color: var(--color-primary);
+    }
+  }
+}
+
+// A restrained take on a Google result card — enough to gauge truncation, not a pixel-perfect clone.
+.seo-preview {
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+
+  &__url {
+    font-size: var(--text-xs, 0.75rem);
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &__title {
+    margin-top: var(--space-1);
+    font-size: var(--text-lg);
+    line-height: 1.3;
+    color: var(--color-link, #1a0dab);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+  &__desc {
+    margin-top: var(--space-1);
+    font-size: var(--text-sm);
+    color: var(--color-text);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+</style>