@michaelthielemann/kestrel 4.1.2 → 5.0.0

package/layers/core/server/tasks/db/migrate-revisions.ts

@@ -1,20 +0,0 @@
-import { migrateRevisions, useDb, type MigrateRevisionsResult } from '@michaelthielemann/kestrel-core'
-
-// Thin Nitro wrapper (defineTask is a runtime global) around the core, independently-unit-tested
-// `migrateRevisions` (db/revision-migration.ts) — same sync/task split as db:migrate (schema/sync.ts +
-// tasks/db/migrate.ts). Dev: GET/POST http://localhost:3000/_nitro/tasks/db:migrate-revisions ; prod: call
-// runTask('db:migrate-revisions', { payload }) from inside the process — the built node-server has no task
-// CLI/endpoint. Payload: {force:true} required, or the run refuses.
-export default defineTask<MigrateRevisionsResult[]>({
-  meta: {
-    name: 'db:migrate-revisions',
-    description: 'Seed revision 1 for every existing row with no revision history yet. Requires {"force":true}.',
-  },
-  run({ payload }) {
-    const p = (payload ?? {}) as { force?: boolean }
-    const result = migrateRevisions(useDb(), { force: p.force === true })
-    const totalSeeded = result.reduce((n, r) => n + r.seeded, 0)
-    console.info(`[kestrel] db:migrate-revisions seeded ${totalSeeded} revision(s) across ${result.length} collection(s)`)
-    return { result }
-  },
-})

package/layers/core/server/tasks/db/migrate.ts

@@ -1,50 +0,0 @@
-import collections from '#kestrel/collections'
-import schemaTables from '#kestrel/schema-tables'
-import type { AnySQLiteTable } from 'drizzle-orm/sqlite-core'
-import { describeOp, desiredFromCollections, isDestructive, planOps, sqlite, syncSchema, useDb } from '@michaelthielemann/kestrel-core'
-import type { BuiltCollection, CollectionDef, SyncDb } from '@michaelthielemann/kestrel-core'
-import { resolveServerKestrel, serverRuntimeConfig } from '../../utils/server-config'
-// Explicit schema-migrate step for production (ADR-0002). Dev auto-syncs additively at boot
-// (02.schema-sync); prod boot never auto-DDLs, so an operator runs this task. Triggering (Nuxt 4.4 /
-// Nitro 2.13 — there is NO `nuxi task run`):
-//   - dev:  GET http://localhost:3000/_nitro/tasks/db:migrate   (the dev-only task route)
-//   - prod: call runTask('db:migrate', { payload }) from inside the process (an authenticated route or a
-//           cron scheduledTask); the built node-server has no task CLI/endpoint.
-// Payloads: {check:true}=dry-run (report pending DDL, change nothing); {force:true}=also apply REBUILDS
-// (column drop/type change); {drop:["old_table"]}=drop a specific table (never bundled in force).
-// Destructive ops are reported-but-withheld unless explicitly opted into; `force` never drops a table.
-// The two run() branches return different result shapes (dry-run report vs applied/skipped); the explicit
-// union is the task's result type so neither branch is forced to match the other.
-type MigrateResult =
-  | { check: boolean; pending: string[]; destructive: string[] }
-  | { applied: string[]; skipped: string[] }
-
-export default defineTask<MigrateResult>({
-  meta: { name: 'db:migrate', description: 'Apply schema changes; {check:true}=dry-run, {force:true}=rebuilds, {drop:[names]}=drop tables' },
-  run({ payload }) {
-    const p = (payload ?? {}) as { check?: boolean; force?: boolean; drop?: string[] }
-    const desired = desiredFromCollections(collections as (CollectionDef | BuiltCollection)[], {
-      // Same toggle source as the registry plugin, so runtime surface and schema agree (see 02.schema-sync).
-      toggles: (serverRuntimeConfig()?.kestrel?.collections ?? resolveServerKestrel().collections) as Record<string, boolean>,
-      extraTables: schemaTables as AnySQLiteTable[],
-    })
-    const client = (useDb() as unknown as { $client: SyncDb }).$client
-    // SQLite is the only backend today; this is the seam where a config-driven `resolveDialect()` would go.
-    const dialect = sqlite
-
-    if (p.check === true) {
-      const ops = planOps(client, desired, dialect)
-      const destructive = ops.filter(isDestructive).map(describeOp)
-      console.info(`[kestrel] db:migrate dry-run: ${ops.length} pending op(s), ${destructive.length} destructive`)
-      return { result: { check: true, pending: dialect.render(ops), destructive } }
-    }
-
-    const { applied, skipped } = syncSchema(client, desired, {
-      allowDestructive: p.force === true,
-      dropTables: Array.isArray(p.drop) ? p.drop : undefined,
-    }, dialect)
-    if (skipped.length) console.warn(`[kestrel] db:migrate withheld ${skipped.length} destructive change(s) — opt in with {"force":true} (rebuilds) / {"drop":[…]} (drops):\n  - ${skipped.map(describeOp).join('\n  - ')}`)
-    console.info(`[kestrel] db:migrate applied ${applied.length} statement(s)`)
-    return { result: { applied, skipped: skipped.map(describeOp) } }
-  },
-})

package/layers/core/server/utils/server-config.ts

@@ -1,81 +0,0 @@
-import kestrelConfig from '../../../../kestrel.config'
-import { resolveKestrel, type ResolvedKestrel } from '@michaelthielemann/kestrel-core'
-
-/**
- * The Nitro runtimeConfig, or `undefined` for non-Nitro callers (node scripts, build) so they don't
- * throw on `useRuntimeConfig()`. Server utils prefer the values the kestrel module put here (from the
- * consumer's `kestrel: {}`), falling back to `resolveServerKestrel()` when it isn't populated.
- */
-export function serverRuntimeConfig(): { kestrel?: Record<string, unknown>; media?: Record<string, unknown>; public?: Record<string, unknown> } | undefined {
-  return typeof useRuntimeConfig === 'function'
-    ? (useRuntimeConfig() as { kestrel?: Record<string, unknown>; media?: Record<string, unknown>; public?: Record<string, unknown> })
-    : undefined
-}
-
-/** Resolve Kestrel's own config file + env — the fallback when runtimeConfig isn't populated. */
-export function resolveServerKestrel(): ReturnType<typeof resolveKestrel> {
-  return resolveKestrel(kestrelConfig, process.env, process.cwd())
-}
-
-/**
- * The full `ResolvedKestrel` shape, merging every server util's own `runtimeConfig ?? resolveServerKestrel()`
- * precedence into ONE call — the boot-time config-wiring plugin (`00.config.ts`) calls this once and
- * pushes the result into the (eventually package-side) config provider, so package code never calls
- * `useRuntimeConfig()` itself. Per-field precedence matches each field's existing reader exactly (the
- * kestrel module writes a CLOSED set of fields into `runtimeConfig.kestrel`/`.public` — see
- * `layers/core/modules/kestrel/index.ts`; anything it doesn't write there falls through to the
- * `resolveServerKestrel()` base for every reader, unchanged from before this function existed).
- */
-export function resolveServerKestrelConfig(): ResolvedKestrel {
-  const rc = serverRuntimeConfig()
-  const fallback = resolveServerKestrel()
-  const srv = (rc?.kestrel ?? {}) as Partial<Record<string, unknown>>
-  const pub = rc?.public as { locales?: string[]; primaryLocale?: string; prefixPrimary?: boolean } | undefined
-  // `runtimeConfig.media` is a TOP-LEVEL key (sibling to `.kestrel`/`.public`, not nested under `.kestrel`
-  // — see `layers/core/modules/kestrel/index.ts`'s `rc.media = {...}`), and it is the ONLY place the S3
-  // credentials + every Nitro `NUXT_MEDIA_*`/`NUXT_MEDIA_S3_*` env override (docs/guide/configuration.md) ever
-  // land — `resolveKestrel`'s own pure computation never sees them. Merged in wholesale (undefined ⇒ the
-  // module never ran ⇒ fall through to the pure fallback), mirroring `output`'s existing merge below.
-  const rcMedia = rc?.media as {
-    driver?: string
-    maxUploadBytes?: number
-    allowedMimes?: string
-    imagePolicy?: ResolvedKestrel['media']['imagePolicy']
-    local?: { dir?: string; baseUrl?: string }
-    s3?: { bucket?: string; region?: string; endpoint?: string; prefix?: string; publicBaseUrl?: string; accessKeyId?: string; secretAccessKey?: string; sessionToken?: string }
-  } | undefined
-  // The locale trio is populated together or not at all (see `locale.ts`'s original `resolved()`) — a
-  // partial `runtimeConfig.public` (e.g. `locales` present but `primaryLocale` absent) falls through to
-  // the fallback for all three rather than mixing sources mid-trio.
-  const locale = pub?.locales?.length && pub.primaryLocale
-    ? { supportedLocales: pub.locales, primaryLocale: pub.primaryLocale, prefixPrimary: pub.prefixPrimary === true }
-    : { supportedLocales: fallback.supportedLocales, primaryLocale: fallback.primaryLocale, prefixPrimary: fallback.prefixPrimary }
-  return {
-    ...fallback,
-    ...locale,
-    dbPath: (srv.dbPath as string | undefined) ?? fallback.dbPath,
-    siteUrl: (srv.siteUrl as string | undefined) ?? fallback.siteUrl,
-    siteName: (srv.siteName as string | undefined) ?? fallback.siteName,
-    siteDescription: (srv.siteDescription as string | undefined) ?? fallback.siteDescription,
-    media: rcMedia ? {
-      dir: rcMedia.local?.dir ?? fallback.media.dir,
-      baseUrl: rcMedia.local?.baseUrl ?? fallback.media.baseUrl,
-      driver: (rcMedia.driver as 'local' | 's3' | undefined) ?? fallback.media.driver,
-      maxUploadBytes: rcMedia.maxUploadBytes ?? fallback.media.maxUploadBytes,
-      allowedMimes: rcMedia.allowedMimes ?? fallback.media.allowedMimes,
-      imagePolicy: rcMedia.imagePolicy ?? fallback.media.imagePolicy,
-      s3: { ...fallback.media.s3, ...rcMedia.s3 },
-    } : fallback.media,
-    collections: (srv.collections as ResolvedKestrel['collections'] | undefined) ?? fallback.collections,
-    aiDisclosure: (srv.aiDisclosure as ResolvedKestrel['aiDisclosure'] | undefined) ?? fallback.aiDisclosure,
-    seo: (srv.seo as ResolvedKestrel['seo'] | undefined) ?? fallback.seo,
-    delivery: (srv.delivery as ResolvedKestrel['delivery'] | undefined) ?? fallback.delivery,
-    deliveryExempt: (srv.deliveryExempt as string[] | undefined) ?? fallback.deliveryExempt,
-    output: (srv.output as ResolvedKestrel['output'] | undefined) ?? fallback.output,
-    // `revisions` is NOT written into `runtimeConfig.kestrel` by the module today (pre-existing —
-    // unrelated to this seam), so this reads as `fallback.revisions` in every real boot right now; kept
-    // symmetric with every other field rather than special-cased, so a future module fix (writing
-    // `srv.revisions`) is picked up here for free.
-    revisions: (srv.revisions as ResolvedKestrel['revisions'] | undefined) ?? fallback.revisions,
-  }
-}

package/layers/fields/nuxt.config.ts

@@ -1 +0,0 @@
-export default defineNuxtConfig({})

package/layers/fields/server/plugins/01.register-blocks-pipeline.ts

@@ -1,7 +0,0 @@
-import { registerPipeline } from '@michaelthielemann/kestrel-core'
-import { buildBlocksPipelines } from '@michaelthielemann/kestrel-fields'
-
-// Registration only — nothing resolves a pipeline here; the registry is read on the first request.
-export default defineNitroPlugin(() => {
-  for (const def of buildBlocksPipelines()) registerPipeline(def)
-})

package/layers/fields/server/plugins/01.register-field-populate.ts

@@ -1,11 +0,0 @@
-import { registerPopulator } from '@michaelthielemann/kestrel-core'
-import { buildFieldTreePopulator } from '@michaelthielemann/kestrel-fields'
-
-// The single global row populator: walks a record's fields + block tree and dispatches each field to its
-// per-type populator (media / link / richtext / relation), each registered by its owning layer. It recurses
-// repeater entries, block props, and slots, so nested references resolve everywhere — not just at the top
-// level. Field populators are looked up at read time, so this plugin's order vs the layer plugins that
-// register them does not matter.
-export default defineNitroPlugin(() => {
-  registerPopulator(buildFieldTreePopulator())
-})

package/layers/media/app/components/KestrelImg.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import { useBlurUp } from '../composables/useBlurUp'
-import { useMediaVariant } from '../composables/useMediaVariant'
-import { aiSourceTypeLabel } from '../utils/ai-disclosure'
-import type { ResolvedMedia } from '@michaelthielemann/kestrel-media'
-import type { VariantFit, VariantFormat } from '@michaelthielemann/kestrel-core'
-
-// The engine's responsive-image component: it renders a <picture> from the media's generated derivatives
-// AND its usage declares (to the generate-time scan) which sizes/formats are actually needed — "not in the
-// code ⇒ not generated". One usage may declare MULTIPLE `widths` (proportional) and/or a fixed `crop`, plus
-// named config `preset`s, crossed with `formats`. `priority` marks the LCP image (eager + high fetchpriority;
-// no `sizes=auto`, which only applies to lazy images). `sizes="auto"` degrades gracefully (see resolveSizes).
-const props = defineProps<{
-  media: ResolvedMedia | null | undefined
-  widths?: number[]
-  crop?: { width: number; height: number; fit?: VariantFit }
-  preset?: string | string[]
-  formats?: VariantFormat[]
-  sizes?: string
-  priority?: boolean
-  /** Opt into a structurally-present but UNSTYLED EU AI Act disclosure badge (`.kestrel-img__ai-badge`),
-   *  rendered only when `media.aiDisclosure` is set. Off by default: Kestrel must never publish a claim
-   *  the consumer did not ask for, in a place/language/style it cannot know. The alternative escape hatch
-   *  is to read `media.aiDisclosure` and render your own element — see docs/guide/ai-disclosure.md. */
-  aiBadge?: boolean
-}>()
-
-const { model } = useMediaVariant(
-  () => props.media,
-  () => ({ widths: props.widths, crop: props.crop, preset: props.preset, formats: props.formats, sizes: props.sizes }),
-  { priority: () => props.priority ?? false },
-)
-const { imgEl, animate, placeholderStyle, onLoad } = useBlurUp(() => props.media?.thumbhash)
-</script>
-
-<template>
-  <picture v-if="model">
-    <source v-for="s in model.sources" :key="s.type" :type="s.type" :srcset="s.srcset" :sizes="model.sizes">
-    <img
-      ref="imgEl"
-      :src="model.src"
-      :sizes="model.sizes"
-      :width="model.width ?? undefined"
-      :height="model.height ?? undefined"
-      :alt="model.alt"
-      :class="{ 'kestrel-img--in': animate }"
-      :style="placeholderStyle"
-      :loading="priority ? 'eager' : 'lazy'"
-      :fetchpriority="priority ? 'high' : undefined"
-      decoding="async"
-      @load="onLoad"
-    >
-    <span
-      v-if="aiBadge && media?.aiDisclosure"
-      class="kestrel-img__ai-badge"
-      :data-ai-source-type="media.aiDisclosure.sourceType"
-    >{{ media.aiDisclosure.note ?? aiSourceTypeLabel(media.aiDisclosure.sourceType) }}</span>
-  </picture>
-</template>
-
-<style scoped>
-/* Sharpen-in: one-shot blur→crisp on a genuine async load (JS-driven, so SSR / no-JS / cached just show
-   the image). Same treatment as the demo MediaImage. */
-@keyframes kestrel-img-sharpen {
-  from { filter: blur(8px); }
-  to { filter: blur(0); }
-}
-.kestrel-img--in {
-  animation: kestrel-img-sharpen 0.5s ease-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .kestrel-img--in {
-    animation: none;
-  }
-}
-</style>
-
-<!-- Deliberately UNSCOPED: a scoped rule carries the `[data-v-*]` attribute selector, which out-specifies
-     a consumer stylesheet targeting `.kestrel-img__ai-badge` and would make the badge un-restylable.
-     Layout only — no color, background, border, radius or font — so nothing is visible as a "badge" until
-     the consumer's own CSS says so. Scoped to pictures that actually contain one, so a consumer who never
-     sets `ai-badge` gets no rule at all. -->
-<style>
-picture:has(> .kestrel-img__ai-badge) {
-  position: relative;
-  display: inline-block;
-}
-.kestrel-img__ai-badge {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  pointer-events: none;
-}
-</style>

package/layers/media/app/components/MediaConflictDialog.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Conflict } from '../utils/ops'
-
-const props = defineProps<{ open: boolean; conflicts: Conflict[]; type: 'move' | 'copy'; dest: string; busy?: boolean; error?: string | null }>()
-const emit = defineEmits<{ resolve: ['skip' | 'overwrite' | 'rename']; 'update:open': [boolean] }>()
-
-const { t } = useT()
-const title = computed(() => props.type === 'move' ? t('media.conflictTitleMove') : t('media.conflictTitleCopy'))
-</script>
-
-<template>
-  <KestrelUiDialog :open="open" :title="title" @update:open="(v) => emit('update:open', v)">
-    <p>{{ t('media.conflictItems', { count: conflicts.length, dest: dest || t('media.rootFolder') }) }}</p>
-    <ul class="media-conflict__list">
-      <li v-for="c in conflicts" :key="c.targetPath">{{ c.targetPath }} — {{ c.type === 'folder-exists' ? t('media.conflictFolderExists') : t('media.conflictFileExists') }}</li>
-    </ul>
-    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
-    <template #footer>
-      <KestrelUiButton :disabled="busy" @click="emit('update:open', false)">{{ t('common.cancel') }}</KestrelUiButton>
-      <KestrelUiButton :disabled="busy" @click="emit('resolve', 'skip')">{{ t('media.skip') }}</KestrelUiButton>
-      <KestrelUiButton :disabled="busy" @click="emit('resolve', 'overwrite')">{{ t('media.replace') }}</KestrelUiButton>
-      <KestrelUiButton variant="primary" :disabled="busy" @click="emit('resolve', 'rename')">{{ t('media.keepBoth') }}</KestrelUiButton>
-    </template>
-  </KestrelUiDialog>
-</template>
-
-<style lang="scss" scoped>
-.media-conflict__list {
-  margin: var(--space-2) 0 0;
-  padding-left: var(--space-4);
-  font-size: var(--text-sm);
-  color: var(--color-text-muted);
-}
-</style>

package/layers/media/app/components/MediaDeleteDialog.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { humanizeSize } from '../utils/library'
-import type { DeleteReport } from '../utils/ops'
-
-const props = defineProps<{ open: boolean; report: DeleteReport | null; names: Record<number, string>; busy?: boolean; error?: string | null }>()
-const emit = defineEmits<{ confirm: []; 'update:open': [boolean] }>()
-
-const { t } = useT()
-
-const usageLines = computed(() => {
-  const out: { file: string; refs: string }[] = []
-  for (const [id, refs] of Object.entries(props.report?.usages ?? {})) {
-    if (refs.length) out.push({ file: props.names[Number(id)] ?? `#${id}`, refs: refs.map((u) => `${u.collection} #${u.recordId} (${u.field})`).join(', ') })
-  }
-  return out
-})
-</script>
-
-<template>
-  <KestrelUiDialog :open="open" :title="t('common.delete')" @update:open="(v) => emit('update:open', v)">
-    <p v-if="report">
-      {{ t('media.deleteSummary', {
-        files: report.summary.files,
-        filesUnit: report.summary.files === 1 ? t('media.file') : t('media.files'),
-        folders: report.summary.folders,
-        foldersUnit: report.summary.folders === 1 ? t('media.folder') : t('media.folders'),
-        size: humanizeSize(report.summary.totalBytes)
-      }) }}
-    </p>
-    <div v-if="usageLines.length" class="media-delete__usages">
-      <p>{{ t('media.usageWarning') }}</p>
-      <ul>
-        <li v-for="u in usageLines" :key="u.file">{{ u.file }} → {{ u.refs }}</li>
-      </ul>
-    </div>
-    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
-    <template #footer>
-      <KestrelUiButton variant="ghost" :disabled="busy" @click="emit('update:open', false)">{{ t('common.cancel') }}</KestrelUiButton>
-      <KestrelUiButton variant="danger" :disabled="busy" @click="emit('confirm')">{{ t('common.delete') }}</KestrelUiButton>
-    </template>
-  </KestrelUiDialog>
-</template>
-
-<style lang="scss" scoped>
-.media-delete__usages {
-  margin-top: var(--space-3);
-  color: var(--color-danger);
-  font-size: var(--text-sm);
-  ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
-}
-</style>

package/layers/media/app/components/MediaGrid.vue

@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { itemKey, humanizeSize, type LibraryFile, type LibraryItem } from '../utils/library'
-defineProps<{ items: LibraryItem[]; isSelected: (item: LibraryItem) => boolean; dropTargetPath?: string | null; parentPath?: string | null; upLabel?: string }>()
-const emit = defineEmits<{ navigate: [string]; select: [LibraryItem, { toggle: boolean; range: boolean }]; open: [LibraryItem]; dragstart: [LibraryItem, DragEvent]; dragend: [] }>()
-const mods = (e: MouseEvent) => ({ toggle: e.ctrlKey || e.metaKey, range: e.shiftKey })
-// Plain click opens the folder; modifier-click selects it so folders can join the selection.
-function onFolder(item: LibraryItem, path: string, e: MouseEvent) {
-  if (e.ctrlKey || e.metaKey || e.shiftKey) emit('select', item, mods(e))
-  else emit('navigate', path)
-}
-function onFile(item: LibraryItem, e: MouseEvent) { emit('select', item, mods(e)) }
-const ext = (filename: string) => (filename.split('.').pop() ?? '').toUpperCase()
-// Hover meta: dimensions (when known) · size — the same facts the table view shows in its columns.
-function fileMeta(f: LibraryFile): string {
-  const parts: string[] = []
-  if (f.width && f.height) parts.push(`${f.width}×${f.height}`)
-  parts.push(humanizeSize(f.size))
-  return parts.join(' · ')
-}
-</script>
-
-<template>
-  <ul class="media-grid">
-    <li v-if="parentPath != null" class="media-grid__cell">
-      <!-- Pure up-navigation; not selectable/draggable (kept out of `items`). -->
-      <button type="button" class="media-grid__tile media-grid__tile--folder" data-test="folder-up"
-        :aria-label="upLabel" @click="emit('navigate', parentPath)">
-        <span class="media-grid__thumb-wrap">
-          <span class="media-grid__thumb media-grid__thumb--folder" aria-hidden="true"><KestrelUiIcon name="folder" :size="40" /></span>
-        </span>
-        <span class="media-grid__name">..</span>
-      </button>
-    </li>
-    <li v-for="item in items" :key="itemKey(item)" class="media-grid__cell">
-      <button v-if="item.type === 'folder'" type="button" class="media-grid__tile media-grid__tile--folder"
-        :data-test="`folder-${item.folder.path}`" :aria-pressed="isSelected(item)"
-        :data-drop-folder="item.folder.path"
-        :class="{ 'is-selected': isSelected(item), 'is-drop-target': item.folder.path === dropTargetPath }"
-        draggable="true"
-        @click="onFolder(item, item.folder.path, $event)"
-        @keydown.space.prevent="emit('select', item, { toggle: true, range: false })"
-        @dragstart="(e) => emit('dragstart', item, e)"
-        @dragend="emit('dragend')">
-        <span class="media-grid__thumb-wrap">
-          <span class="media-grid__thumb media-grid__thumb--folder" aria-hidden="true"><KestrelUiIcon name="folder" :size="40" /></span>
-          <span v-if="item.folder.size != null" class="media-grid__meta" aria-hidden="true">{{ humanizeSize(item.folder.size) }}</span>
-        </span>
-        <span class="media-grid__name">{{ item.folder.name }}</span>
-      </button>
-      <button v-else type="button" class="media-grid__tile media-grid__tile--file"
-        :data-test="`file-${item.file.id}`" :aria-pressed="isSelected(item)"
-        :data-file-id="item.file.id"
-        :class="{ 'is-selected': isSelected(item) }"
-        draggable="true"
-        @click="onFile(item, $event)"
-        @dblclick="emit('open', item)"
-        @keydown.enter.prevent="emit('open', item)"
-        @dragstart="(e) => emit('dragstart', item, e)"
-        @dragend="emit('dragend')">
-        <span class="media-grid__thumb-wrap">
-          <!-- Show a thumbnail for any image WITH a source: media files carry `srcset` (responsive derivatives),
-               while a consumer feeding object-URLs (e.g. the secure gallery) has only `src`. Non-images → badge. -->
-          <KestrelMediaThumb v-if="item.file.mime?.startsWith('image/') && (item.file.srcset || item.file.src)" class="media-grid__thumb"
-            :src="item.file.src" :srcset="item.file.srcset" sizes="160px" :alt="item.file.alt ?? item.file.filename" :thumbhash="item.file.thumbhash" />
-          <span v-else class="media-grid__badge" aria-hidden="true">{{ ext(item.file.filename) }}</span>
-          <span class="media-grid__meta" aria-hidden="true">{{ fileMeta(item.file) }}</span>
-          <!-- Optional per-file overlay (e.g. proofing colour flags). Empty by default → nothing rendered. -->
-          <span class="media-grid__overlay"><slot name="file-overlay" :file="item.file" /></span>
-        </span>
-        <span class="media-grid__name">{{ item.file.filename }}</span>
-      </button>
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
-.media-grid__tile { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); cursor: pointer; text-align: left; }
-.media-grid__tile:hover { border-color: var(--color-border-strong); }
-// Selection/drop/focus rings are INSET (border-color + inset shadow, or a negative outline-offset) so a
-// scrolling ancestor never clips them — matches MediaTable. An outset outline (positive offset) on an
-// edge tile is sliced off by the library's overflow.
-.media-grid__tile.is-selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
-.media-grid__tile.is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -2px; background: var(--color-surface); }
-.media-grid__tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
-.media-grid__thumb-wrap { position: relative; width: 100%; }
-.media-grid__overlay { position: absolute; top: var(--space-1); left: var(--space-1); display: flex; gap: 2px; pointer-events: none; }
-.media-grid__thumb { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg); display: block; }
-.media-grid__thumb--folder { display: grid; place-items: center; color: var(--color-text-subtle); }
-.media-grid__badge { display: grid; place-items: center; aspect-ratio: 1; width: 100%; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-muted); font-weight: var(--weight-bold); }
-// Hover/focus reveal of the dimensions · size caption, overlaid on the lower edge of the thumb.
-.media-grid__meta {
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
-  padding: 2px var(--space-1);
-  font-size: var(--text-xs);
-  line-height: 1.35;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-on-primary);
-  background: linear-gradient(transparent, var(--color-scrim));
-  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
-  opacity: 0;
-  transition: opacity var(--motion-fast) var(--ease-standard);
-  pointer-events: none;
-}
-.media-grid__tile:hover .media-grid__meta,
-.media-grid__tile:focus-visible .media-grid__meta { opacity: 1; }
-.media-grid__name { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-</style>

package/layers/media/app/components/MediaImage.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useBlurUp } from '../composables/useBlurUp'
-
-interface ResolvedMedia {
-  alt: string | null
-  width: number | null
-  height: number | null
-  thumbhash: string | null
-  src: string
-  srcset: { url: string; width: number }[]
-}
-// `sizes` lets the consuming layout declare the rendered slot width (e.g.
-// `(min-width: 768px) 50vw, 100vw`) so the browser picks an appropriately small
-// `srcset` candidate instead of defaulting to 100vw and over-fetching the largest.
-// `priority` marks the above-the-fold LCP image: load it eagerly with a high fetch priority instead of
-// lazily, so the browser fetches it immediately rather than deferring the most important pixel. Opt-in
-// per call site (the editor can't know which block is the LCP one); leave it off for everything else.
-const props = defineProps<{ media: ResolvedMedia; sizes?: string; priority?: boolean }>()
-// Computed, not a captured const: the live preview REUSES this instance (BlockRenderer keys blocks by id,
-// consumer carousels key slides by index), so a media reorder/replace only patches the `media` prop — a
-// one-shot const would keep the browser painting the OLD image via its stale `w`-descriptor candidate set.
-const srcset = computed(() => props.media.srcset.map((s) => `${s.url} ${s.width}w`).join(', ') || undefined)
-
-// Blur-up: a thumbhash placeholder shows until the raster paints, then a one-shot "sharpen-in" resolves
-// the blur into the crisp image (see useBlurUp for the SSR/no-JS/cached-image degradation rules). The
-// placeholder is painted as the <img>'s own background, so no wrapper element is introduced — the bare
-// <img> keeps the public site's `img` box model (the reset's display:block / max-width:100%) intact.
-const { imgEl, animate, placeholderStyle, onLoad } = useBlurUp(() => props.media.thumbhash)
-</script>
-
-<template>
-  <img
-    ref="imgEl"
-    :src="media.src"
-    :srcset="srcset"
-    :sizes="sizes"
-    :width="media.width ?? undefined"
-    :height="media.height ?? undefined"
-    :alt="media.alt ?? ''"
-    :class="{ 'media-image--in': animate }"
-    :style="placeholderStyle"
-    :loading="priority ? 'eager' : 'lazy'"
-    :fetchpriority="priority ? 'high' : undefined"
-    decoding="async"
-    @load="onLoad"
-  >
-</template>
-
-<style scoped>
-/* Sharpen-in: when the real raster finishes loading it briefly starts soft and resolves to crisp, so the
-   swap from the thumbhash placeholder reads as a smooth focus pull rather than a hard snap. The class is
-   applied by JS only on a genuine async load, so SSR / no-JS / cached loads just show the image. */
-@keyframes media-sharpen {
-  from {
-    filter: blur(8px);
-  }
-  to {
-    filter: blur(0);
-  }
-}
-.media-image--in {
-  animation: media-sharpen 0.5s ease-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .media-image--in {
-    animation: none;
-  }
-}
-</style>