@michaelthielemann/kestrel 2.0.0 → 3.0.0

package/layers/core/server/utils/seo.ts

@@ -7,13 +7,31 @@ export interface SeoMeta {
   noindex?: boolean
   /** Media id of the social-share image (og:image / twitter card); resolved under `seo.$media.image`. */
   image?: number | null
+  /** Article metadata — schema.org `author` / `datePublished` / `keywords` on the page's JSON-LD node.
+   *  Only offered and only published when `kestrel.seo.articleMeta` is on; the column always ROUND-TRIPS
+   *  them, so turning the flag off hides and unpublishes existing values instead of destroying them. */
+  author?: string
+  /** ISO date (`YYYY-MM-DD`) or ISO datetime; `''` is the editor's cleared state. */
+  publishedDate?: string
+  /** Free-form comma-separated list (the spelling schema.org accepts verbatim). */
+  keywords?: string
 }
 
+// A date is validated here rather than at emission time so a mistyped value surfaces in the editor,
+// where it can be fixed — not silently as a missing `datePublished` in an artifact nobody looks at.
+const isoDateish = z.string().refine(
+  (v) => v === '' || /^\d{4}-\d{2}-\d{2}([T ]\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:?\d{2})?)?$/.test(v),
+  { message: 'Expected a date (YYYY-MM-DD)' },
+)
+
 export const seoSchema = z.object({
   title: z.string().optional(),
   description: z.string().optional(),
   noindex: z.boolean().optional(),
   image: z.number().int().positive().nullish(),
+  author: z.string().optional(),
+  publishedDate: isoDateish.optional(),
+  keywords: z.string().optional(),
 })
 
 // The synthetic field set the row populator walks over the `seo` system column (PROPS key-mode), so the

package/layers/core/server/utils/serialize-collection.ts

@@ -4,7 +4,6 @@ import { resolveFieldLayout, type LayoutNode } from './field-layout'
 export interface SerializedField {
   type: FieldType
   required: boolean
-  translatable: boolean
   unique: boolean
   /** Optional (localized) editor label; the admin falls back to the humanized field key when absent. */
   label?: Localized
@@ -66,7 +65,6 @@ export function serializeField(field: FieldDef): SerializedField {
   const out: SerializedField = {
     type: field.type,
     required: field.required ?? false,
-    translatable: field.translatable ?? false,
     unique: field.unique ?? false,
   }
   if (isSingleRefColumn(field)) out.single = true

package/layers/core/server/utils/write-effects.ts

@@ -0,0 +1,40 @@
+import type { CollectionDef } from './defineCollection'
+
+/**
+ * Post-write EFFECTS — the fail-able sibling of the write-event bus (`write-events.ts`).
+ *
+ * A write LISTENER is fire-and-forget on purpose: a publish failure must never break a content write, so
+ * `emitWrite` swallows throws. That is exactly wrong for a write whose external side effect is part of
+ * the contract — a redirects artifact the edge serves is stale the moment it fails, and an editor who saw
+ * a green save has no way to know. An EFFECT is awaited by the route and its rejection becomes the save's
+ * error response.
+ *
+ * Deliberately narrow: only the singleton PUT runs effects. Widening it to create/update/delete would make
+ * every content write fail-able, which is the invariant the listener bus exists to protect.
+ *
+ * The DB row is already committed when effects run (better-sqlite3 writes are synchronous and CRUD holds
+ * no transaction), so a failing effect means "saved, but the side effect is stale" — never a rollback.
+ * The message an effect throws has to say so.
+ */
+export interface WriteEffectEvent {
+  def: CollectionDef
+  /** The row as saved. */
+  row: Record<string, unknown>
+}
+
+type WriteEffect = (event: WriteEffectEvent) => Promise<void> | void
+
+const effects: WriteEffect[] = []
+
+export function registerWriteEffect(fn: WriteEffect): void {
+  effects.push(fn)
+}
+
+export function clearWriteEffects(): void {
+  effects.length = 0
+}
+
+/** Run the registered effects in order. Rejects on the first failure, leaving the rest unrun. */
+export async function runWriteEffects(def: CollectionDef, row: Record<string, unknown>): Promise<void> {
+  for (const fn of effects) await fn({ def, row })
+}

package/layers/fields/app/utils/field-factories.ts

@@ -23,7 +23,7 @@ export interface FieldFactoryResult<C = unknown> {
 
 // Keys that belong on the FieldDef itself (not inside `options`); everything else a factory receives is a
 // type-specific option. Mirrors `BaseFieldDef` in defineCollection.ts.
-const BASE_KEYS = new Set(['required', 'translatable', 'unique', 'label', 'default', 'condition', 'renamedFrom', 'populate'])
+const BASE_KEYS = new Set(['required', 'unique', 'label', 'default', 'condition', 'renamedFrom', 'populate'])
 
 function partition(opts: Record<string, unknown>): { base: Record<string, unknown>; options: Record<string, unknown> } {
   const base: Record<string, unknown> = {}

package/layers/fields/server/utils/buildCollection.ts

@@ -51,22 +51,24 @@ export function ensureBuilt(c: CollectionDef | BuiltCollection): BuiltCollection
 }
 
 /**
- * Build the `applyConditions` hook for a collection with conditional required fields, or `undefined`
- * when it has none (so CRUD skips it). The per-field schema relaxed every conditional field to optional
- * (it can't see siblings); this re-enforces `required` for the ones whose condition is met against the
- * whole record. Issues are keyed by the field's def name (so they map to the editor's per-field errors),
- * resolving each value at its column key (`<name>Id` for single relation/media).
+ * Build the `applyConditions` hook — every pre-write check the per-field schema can't do — or `undefined`
+ * when the collection needs none (so CRUD skips it). Two sources, both of which need the whole record:
+ * the per-field schema relaxed every conditional field to optional (it can't see siblings), so `required`
+ * is re-enforced here for the ones whose condition is met; and the collection's own `def.validate`, for a
+ * rule spanning fields. Issues are keyed by the field's def name (so they map to the editor's per-field
+ * errors), resolving each value at its column key (`<name>Id` for single relation/media).
  */
 function buildApplyConditions(def: CollectionDef): BuiltCollection['applyConditions'] {
   const required = Object.entries(def.fields).filter(([, f]) => f.condition && f.required)
-  if (!required.length) return undefined
+  if (!required.length && !def.validate) return undefined
+  if (!required.length) return (record) => ({ issues: def.validate!(record) })
   return (record) => {
     const scope: Record<string, unknown> = {}
     for (const [key, field] of Object.entries(def.fields)) scope[key] = record[resolveColumnName(key, field).jsKey]
     const issues = required
       .filter(([key, field]) => evaluateCondition(field.condition!, scope) && isEmptyValue(record[resolveColumnName(key, field).jsKey]))
       .map(([key]) => ({ path: [key], message: 'This field is required.' }))
-    return { issues }
+    return { issues: [...issues, ...(def.validate?.(record) ?? [])] }
   }
 }
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useBlurUp } from '../composables/useBlurUp'
 import { useMediaVariant } from '../composables/useMediaVariant'
+import { aiSourceTypeLabel } from '../utils/ai-disclosure'
 import type { ResolvedMedia } from '../../server/utils/resolve'
 import type { VariantFit, VariantFormat } from '../../../core/server/utils/kestrel-config'
 
@@ -17,6 +18,11 @@ const props = defineProps<{
   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/media-uploads.md. */
+  aiBadge?: boolean
 }>()
 
 const { model } = useMediaVariant(
@@ -44,6 +50,11 @@ const { imgEl, animate, placeholderStyle, onLoad } = useBlurUp(() => props.media
       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>
 
@@ -63,3 +74,21 @@ const { imgEl, animate, placeholderStyle, onLoad } = useBlurUp(() => props.media
   }
 }
 </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

@@ -10,19 +10,19 @@ const title = computed(() => props.type === 'move' ? t('media.conflictTitleMove'
 </script>
 
 <template>
-  <UiDialog :open="open" :title="title" @update:open="(v) => emit('update:open', v)">
+  <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>
-    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
     <template #footer>
-      <UiButton :disabled="busy" @click="emit('update:open', false)">{{ t('common.cancel') }}</UiButton>
-      <UiButton :disabled="busy" @click="emit('resolve', 'skip')">{{ t('media.skip') }}</UiButton>
-      <UiButton :disabled="busy" @click="emit('resolve', 'overwrite')">{{ t('media.replace') }}</UiButton>
-      <UiButton variant="primary" :disabled="busy" @click="emit('resolve', 'rename')">{{ t('media.keepBoth') }}</UiButton>
+      <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>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>
 
 <style lang="scss" scoped>

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

@@ -18,7 +18,7 @@ const usageLines = computed(() => {
 </script>
 
 <template>
-  <UiDialog :open="open" :title="t('common.delete')" @update:open="(v) => emit('update:open', v)">
+  <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,
@@ -34,12 +34,12 @@ const usageLines = computed(() => {
         <li v-for="u in usageLines" :key="u.file">{{ u.file }} → {{ u.refs }}</li>
       </ul>
     </div>
-    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
     <template #footer>
-      <UiButton variant="ghost" :disabled="busy" @click="emit('update:open', false)">{{ t('common.cancel') }}</UiButton>
-      <UiButton variant="danger" :disabled="busy" @click="emit('confirm')">{{ t('common.delete') }}</UiButton>
+      <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>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>
 
 <style lang="scss" scoped>

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

@@ -26,7 +26,7 @@ function fileMeta(f: LibraryFile): string {
       <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"><UiIcon name="folder" :size="40" /></span>
+          <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>
@@ -42,7 +42,7 @@ function fileMeta(f: LibraryFile): string {
         @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"><UiIcon name="folder" :size="40" /></span>
+          <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>
@@ -60,7 +60,7 @@ function fileMeta(f: LibraryFile): string {
         <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. -->
-          <MediaThumb v-if="item.file.mime?.startsWith('image/') && (item.file.srcset || item.file.src)" class="media-grid__thumb"
+          <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>

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

@@ -51,18 +51,20 @@ function onOpenItem(item: LibraryItem) {
   viewerError.value = ''
   viewerOpen.value = true
 }
-async function onSaveAlt(alt: string) {
+async function onSaveMeta(alt: string, ai?: { aiSourceType: string | null; aiNote: string | null }) {
   const f = viewerFile.value as LibraryFileRow | null
   if (!f) return
   viewerBusy.value = true
   viewerError.value = ''
   try {
     // Alt lives in the per-locale translations JSON; write the primary locale (the library resolves
-    // alt in that same locale, so this round-trips into the list). The precondition header lets the
-    // server 409 instead of silently losing a concurrent edit from another open viewer tab.
+    // alt in that same locale, so this round-trips into the list). The AI disclosure is NOT per-locale,
+    // so it rides alongside as top-level keys — and only when the viewer actually offered it, so a save
+    // from a consumer with the feature off never clears a recorded disclosure. The precondition header
+    // lets the server 409 instead of silently losing a concurrent edit from another open viewer tab.
     await $fetch(`/api/media/${f.id}`, {
       method: 'PATCH',
-      body: { translations: { [primary]: { alt } } },
+      body: { translations: { [primary]: { alt } }, ...(ai ?? {}) },
       ...(f.updatedAt ? { headers: { 'x-kestrel-if-unmodified-since': String(new Date(f.updatedAt).getTime()) } } : {}),
     })
   } catch (e) {
@@ -291,8 +293,8 @@ const localizedMenu = computed(() => menuItems.value.map((s) => ({
 <template>
   <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -- @click.self clears selection as a mouse-only bulk convenience; Space-toggle on each MediaGrid/MediaTable item already gives keyboard users the same end state -->
   <section class="media-library" @click.self="lib.clear()" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
-    <MediaPathBar :folder="folder" @navigate="lib.navigate" />
-    <MediaToolbar
+    <KestrelMediaPathBar :folder="folder" @navigate="lib.navigate" />
+    <KestrelMediaToolbar
       :view="view"
       :search="search"
       :disabled="!!error"
@@ -301,23 +303,23 @@ const localizedMenu = computed(() => menuItems.value.map((s) => ({
       @upload="onUpload"
       @new-folder="newFolderOpen = true"
     />
-    <UiMenu :items="localizedMenu" @select="onMenuSelect">
+    <KestrelUiMenu :items="localizedMenu" @select="onMenuSelect">
       <!-- @contextmenu.capture sets the menu target before Reka's own handler opens the menu, so menuItems is correct when the menu renders -->
       <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -- contextmenu fires natively via Shift+F10/the Menu key when a MediaGrid/MediaTable item has focus, so this capture handler is already keyboard-reachable -->
       <div class="media-library__items" @contextmenu.capture="onContextMenu">
-        <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+        <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
         <p v-else-if="!loading && !items.length" class="media-library__empty">{{ t('media.folderEmpty') }}</p>
-        <MediaGrid v-else-if="view === 'grid'" :items="items" :is-selected="isSelectedItem" :drop-target-path="dropFolder" :parent-path="parentPath" :up-label="t('media.parentFolder')" @navigate="lib.navigate" @select="onSelect" @open="onOpenItem" @dragstart="onItemDragStart" @dragend="onItemDragEnd" />
-        <MediaTable v-else :items="items" :is-selected="isSelectedItem" :drop-target-path="dropFolder" :sort="sort" :parent-path="parentPath" :up-label="t('media.parentFolder')" @navigate="lib.navigate" @select="onSelect" @open="onOpenItem" @sort="lib.setSort" @dragstart="onItemDragStart" @dragend="onItemDragEnd" />
+        <KestrelMediaGrid v-else-if="view === 'grid'" :items="items" :is-selected="isSelectedItem" :drop-target-path="dropFolder" :parent-path="parentPath" :up-label="t('media.parentFolder')" @navigate="lib.navigate" @select="onSelect" @open="onOpenItem" @dragstart="onItemDragStart" @dragend="onItemDragEnd" />
+        <KestrelMediaTable v-else :items="items" :is-selected="isSelectedItem" :drop-target-path="dropFolder" :sort="sort" :parent-path="parentPath" :up-label="t('media.parentFolder')" @navigate="lib.navigate" @select="onSelect" @open="onOpenItem" @sort="lib.setSort" @dragstart="onItemDragStart" @dragend="onItemDragEnd" />
       </div>
-    </UiMenu>
+    </KestrelUiMenu>
     <div v-if="hasMore" class="media-library__more">
-      <UiButton :disabled="loading" @click="lib.loadMore">{{ t('media.loadMore') }}</UiButton>
+      <KestrelUiButton :disabled="loading" @click="lib.loadMore">{{ t('media.loadMore') }}</KestrelUiButton>
     </div>
     <p v-if="!clipboardEmpty" class="media-library__clipboard">
       {{ clipboardCount }} {{ clipboardCount === 1 ? t('media.clipboardItem') : t('media.clipboardItems') }} {{ clipboard?.mode === 'cut' ? t('media.clipboardCut') : t('media.clipboardCopied') }}
-      <UiButton size="sm" :disabled="!!error" @click="onPaste(folder)">{{ t('media.pasteHere') }}</UiButton>
-      <UiButton size="sm" variant="ghost" @click="clearClipboard()">{{ t('media.clear') }}</UiButton>
+      <KestrelUiButton size="sm" :disabled="!!error" @click="onPaste(folder)">{{ t('media.pasteHere') }}</KestrelUiButton>
+      <KestrelUiButton size="sm" variant="ghost" @click="clearClipboard()">{{ t('media.clear') }}</KestrelUiButton>
     </p>
     <p v-if="active || counts.done || counts.error || counts.skipped" class="media-library__status">
       <span v-if="active">{{ t('media.uploading') }}</span>{{ counts.done }} {{ t('media.uploadUploaded') }}<span v-if="counts.error">, {{ counts.error }} {{ t('media.uploadFailed') }}</span><span v-if="counts.skipped">, {{ counts.skipped }} {{ t('media.uploadSkipped') }}</span>
@@ -325,20 +327,20 @@ const localizedMenu = computed(() => menuItems.value.map((s) => ({
     <p class="media-library__sr-status" role="status" aria-live="polite">{{ srStatus }}</p>
     <div v-if="pick" class="media-library__pickbar">
       <span>{{ selectedFileIds.length }} {{ t('media.selected') }}</span>
-      <UiButton variant="primary" :disabled="!selectedFileIds.length" @click="onConfirmPick">{{ t('media.useSelected') }}</UiButton>
-      <UiButton variant="ghost" @click="emit('cancel')">{{ t('common.cancel') }}</UiButton>
+      <KestrelUiButton variant="primary" :disabled="!selectedFileIds.length" @click="onConfirmPick">{{ t('media.useSelected') }}</KestrelUiButton>
+      <KestrelUiButton variant="ghost" @click="emit('cancel')">{{ t('common.cancel') }}</KestrelUiButton>
     </div>
-    <MediaUploadDialog
+    <KestrelMediaUploadDialog
       :conflicts="conflicts"
       :open="conflicts.length > 0"
       @resolve="upload.resolve"
       @resolve-all="upload.resolveAll"
       @update:open="(v) => { if (!v) upload.resolveAll('skip') }"
     />
-    <MediaNewFolderDialog v-model:open="newFolderOpen" @create="onCreateFolder" />
-    <MediaViewer :open="viewerOpen" :file="viewerFile" :busy="viewerBusy" :error="viewerError" @update:open="(v) => { viewerOpen = v }" @save="onSaveAlt" />
-    <UiAlert v-if="opError && !deleteOpen && !renameOpen" variant="error">{{ opError }}</UiAlert>
-    <MediaDeleteDialog
+    <KestrelMediaNewFolderDialog v-model:open="newFolderOpen" @create="onCreateFolder" />
+    <KestrelMediaViewer :open="viewerOpen" :file="viewerFile" :busy="viewerBusy" :error="viewerError" @update:open="(v) => { viewerOpen = v }" @save="onSaveMeta" />
+    <KestrelUiAlert v-if="opError && !deleteOpen && !renameOpen" variant="error">{{ opError }}</KestrelUiAlert>
+    <KestrelMediaDeleteDialog
       :open="deleteOpen"
       :report="deleteReport"
       :names="fileNames"
@@ -347,7 +349,7 @@ const localizedMenu = computed(() => menuItems.value.map((s) => ({
       @confirm="onConfirmDelete"
       @update:open="(v) => { if (!v) { deleteOpen = false; deleteReport = null } }"
     />
-    <MediaRenameDialog
+    <KestrelMediaRenameDialog
       :open="renameOpen"
       :name="renameName"
       :busy="opsBusy"
@@ -355,8 +357,8 @@ const localizedMenu = computed(() => menuItems.value.map((s) => ({
       @rename="onConfirmRename"
       @update:open="(v) => { if (!v) { renameOpen = false; renameTarget = null } }"
     />
-    <UiAlert v-if="relocateError && !conflictOpen" variant="error">{{ relocateError }}</UiAlert>
-    <MediaConflictDialog
+    <KestrelUiAlert v-if="relocateError && !conflictOpen" variant="error">{{ relocateError }}</KestrelUiAlert>
+    <KestrelMediaConflictDialog
       :open="conflictOpen"
       :conflicts="pasteConflicts"
       :type="pendingRelocate?.type ?? 'move'"

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

@@ -18,15 +18,15 @@ function onCreate() {
 </script>
 
 <template>
-  <UiDialog :open="open" :title="t('media.newFolder')" @update:open="(v) => emit('update:open', v)">
-    <UiField :label="t('media.folderName')">
+  <KestrelUiDialog :open="open" :title="t('media.newFolder')" @update:open="(v) => emit('update:open', v)">
+    <KestrelUiField :label="t('media.folderName')">
       <template #default="f">
-        <UiTextInput v-model="name" :placeholder="t('media.folderNamePlaceholder')" v-bind="f" @keydown.enter="onCreate" />
+        <KestrelUiTextInput v-model="name" :placeholder="t('media.folderNamePlaceholder')" v-bind="f" @keydown.enter="onCreate" />
       </template>
-    </UiField>
+    </KestrelUiField>
     <template #footer>
-      <UiButton @click="emit('update:open', false)">{{ t('common.cancel') }}</UiButton>
-      <UiButton variant="primary" :disabled="!name.trim()" @click="onCreate">{{ t('common.create') }}</UiButton>
+      <KestrelUiButton @click="emit('update:open', false)">{{ t('common.cancel') }}</KestrelUiButton>
+      <KestrelUiButton variant="primary" :disabled="!name.trim()" @click="onCreate">{{ t('common.create') }}</KestrelUiButton>
     </template>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>

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

@@ -56,7 +56,7 @@ onUnmounted(() => clearTimeout(acTimer))
           <span class="media-pathbar__sep" aria-hidden="true">/</span>
         </template>
       </nav>
-      <button type="button" data-test="path-edit" class="media-pathbar__edit" :aria-label="t('mediaPath.editAriaLabel')" @click="startEdit"><UiIcon name="pencil" :size="14" /></button>
+      <button type="button" data-test="path-edit" class="media-pathbar__edit" :aria-label="t('mediaPath.editAriaLabel')" @click="startEdit"><KestrelUiIcon name="pencil" :size="14" /></button>
     </template>
     <div v-else class="media-pathbar__editor">
       <input

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

@@ -5,8 +5,8 @@ const { t } = useT()
 </script>
 
 <template>
-  <UiDialog :open="open" size="lg" :title="multiple ? t('media.picker.titleMultiple') : t('media.picker.titleSingle')" @update:open="(v) => emit('update:open', v)">
-    <MediaLibrary
+  <KestrelUiDialog :open="open" size="lg" :title="multiple ? t('media.picker.titleMultiple') : t('media.picker.titleSingle')" @update:open="(v) => emit('update:open', v)">
+    <KestrelMediaLibrary
       pick
       :multiple="multiple"
       :accept="accept ?? 'any'"
@@ -15,5 +15,5 @@ const { t } = useT()
       @confirm="(ids) => { emit('confirm', ids); emit('update:open', false) }"
       @cancel="emit('update:open', false)"
     />
-  </UiDialog>
+  </KestrelUiDialog>
 </template>

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

@@ -17,16 +17,16 @@ function submit() { if (canRename.value && !props.busy) emit('rename', draft.val
 </script>
 
 <template>
-  <UiDialog :open="open" :title="t('media.rename')" @update:open="(v) => emit('update:open', v)">
-    <UiField :label="t('media.newName')">
+  <KestrelUiDialog :open="open" :title="t('media.rename')" @update:open="(v) => emit('update:open', v)">
+    <KestrelUiField :label="t('media.newName')">
       <template #default="f">
-        <UiTextInput v-model="draft" v-bind="f" @keydown.enter="submit" />
+        <KestrelUiTextInput v-model="draft" v-bind="f" @keydown.enter="submit" />
       </template>
-    </UiField>
-    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+    </KestrelUiField>
+    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
     <template #footer>
-      <UiButton :disabled="busy" @click="emit('update:open', false)">{{ t('common.cancel') }}</UiButton>
-      <UiButton variant="primary" :disabled="busy || !canRename" @click="submit">{{ t('media.rename') }}</UiButton>
+      <KestrelUiButton :disabled="busy" @click="emit('update:open', false)">{{ t('common.cancel') }}</KestrelUiButton>
+      <KestrelUiButton variant="primary" :disabled="busy || !canRename" @click="submit">{{ t('media.rename') }}</KestrelUiButton>
     </template>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>

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

@@ -29,7 +29,7 @@ const dims = (f: { width?: number; height?: number }) => (f.width && f.height ?
       <tr v-if="parentPath != null" class="media-table__row media-table__row--up" data-test="row-folder-up"
         tabindex="0" :aria-label="upLabel"
         @click="emit('navigate', parentPath)" @keydown.enter.space.prevent="emit('navigate', parentPath)">
-        <td><span aria-hidden="true"><UiIcon name="folder" :size="15" /></span> ..</td>
+        <td><span aria-hidden="true"><KestrelUiIcon name="folder" :size="15" /></span> ..</td>
         <td>{{ t('media.typeFolder') }}</td><td>—</td><td>—</td>
       </tr>
       <tr v-for="item in items" :key="itemKey(item)" class="media-table__row"
@@ -46,7 +46,7 @@ const dims = (f: { width?: number; height?: number }) => (f.width && f.height ?
         @dragstart="(e) => emit('dragstart', item, e)"
         @dragend="emit('dragend')">
         <template v-if="item.type === 'folder'">
-          <td><span aria-hidden="true"><UiIcon name="folder" :size="15" /></span> {{ item.folder.name }}</td>
+          <td><span aria-hidden="true"><KestrelUiIcon name="folder" :size="15" /></span> {{ item.folder.name }}</td>
           <td>{{ t('media.typeFolder') }}</td><td>{{ item.folder.size != null ? humanizeSize(item.folder.size) : '—' }}</td><td>—</td>
         </template>
         <template v-else>

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

@@ -35,7 +35,7 @@ function onFiles(e: Event) {
 
 <template>
   <div class="media-toolbar">
-    <UiTextInput
+    <KestrelUiTextInput
       class="media-toolbar__search"
       :model-value="search"
       type="search"
@@ -45,11 +45,11 @@ function onFiles(e: Event) {
     />
     <!-- View toggle + actions sit together on the right so they read as one control cluster. -->
     <div class="media-toolbar__actions">
-      <UiButtonGroup v-model="viewModel" :options="VIEW_OPTIONS" :aria-label="t('mediaToolbar.viewAriaLabel')" />
+      <KestrelUiButtonGroup v-model="viewModel" :options="VIEW_OPTIONS" :aria-label="t('mediaToolbar.viewAriaLabel')" />
       <span class="media-toolbar__divider" aria-hidden="true"></span>
       <input ref="fileInput" type="file" multiple class="media-toolbar__file" :aria-label="t('mediaToolbar.upload')" @change="onFiles" />
-      <UiButton :disabled="disabled" @click="fileInput?.click()"><UiIcon name="upload" :size="16" /> {{ t('mediaToolbar.upload') }}</UiButton>
-      <UiButton :disabled="disabled" @click="emit('new-folder')"><UiIcon name="folder-plus" :size="16" /> {{ t('mediaToolbar.newFolder') }}</UiButton>
+      <KestrelUiButton :disabled="disabled" @click="fileInput?.click()"><KestrelUiIcon name="upload" :size="16" /> {{ t('mediaToolbar.upload') }}</KestrelUiButton>
+      <KestrelUiButton :disabled="disabled" @click="emit('new-folder')"><KestrelUiIcon name="folder-plus" :size="16" /> {{ t('mediaToolbar.newFolder') }}</KestrelUiButton>
     </div>
   </div>
 </template>

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

@@ -27,7 +27,7 @@ function rename(c: UploadItem) {
 </script>
 
 <template>
-  <UiDialog
+  <KestrelUiDialog
     :open="open"
     :title="t('media.conflicts.title')"
     :description="t('media.conflicts.desc', { count: conflicts.length })"
@@ -35,22 +35,22 @@ function rename(c: UploadItem) {
   >
     <div class="media-conflicts__all">
       <span>{{ t('media.conflicts.applyAll') }}</span>
-      <UiButton @click="emit('resolve-all', 'overwrite')">{{ t('media.conflicts.overwriteAll') }}</UiButton>
-      <UiButton @click="emit('resolve-all', 'rename')">{{ t('media.conflicts.renameAll') }}</UiButton>
-      <UiButton @click="emit('resolve-all', 'skip')">{{ t('media.conflicts.skipAll') }}</UiButton>
+      <KestrelUiButton @click="emit('resolve-all', 'overwrite')">{{ t('media.conflicts.overwriteAll') }}</KestrelUiButton>
+      <KestrelUiButton @click="emit('resolve-all', 'rename')">{{ t('media.conflicts.renameAll') }}</KestrelUiButton>
+      <KestrelUiButton @click="emit('resolve-all', 'skip')">{{ t('media.conflicts.skipAll') }}</KestrelUiButton>
     </div>
     <ul class="media-conflicts__list">
       <li v-for="c in conflicts" :key="c.id" class="media-conflicts__row">
         <span class="media-conflicts__name">{{ c.filename }}</span>
-        <UiTextInput v-model="names[c.id]" :aria-label="t('media.conflicts.newName', { name: c.filename })" />
+        <KestrelUiTextInput v-model="names[c.id]" :aria-label="t('media.conflicts.newName', { name: c.filename })" />
         <div class="media-conflicts__actions">
-          <UiButton @click="emit('resolve', c.id, 'overwrite', undefined)">{{ t('media.conflicts.overwrite') }}</UiButton>
-          <UiButton variant="primary" @click="rename(c)">{{ t('media.conflicts.rename') }}</UiButton>
-          <UiButton @click="emit('resolve', c.id, 'skip', undefined)">{{ t('media.conflicts.skip') }}</UiButton>
+          <KestrelUiButton @click="emit('resolve', c.id, 'overwrite', undefined)">{{ t('media.conflicts.overwrite') }}</KestrelUiButton>
+          <KestrelUiButton variant="primary" @click="rename(c)">{{ t('media.conflicts.rename') }}</KestrelUiButton>
+          <KestrelUiButton @click="emit('resolve', c.id, 'skip', undefined)">{{ t('media.conflicts.skip') }}</KestrelUiButton>
         </div>
       </li>
     </ul>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>
 
 <style lang="scss" scoped>