@michaelthielemann/kestrel 2.1.0 → 3.0.1

package/layers/admin/app/pages/admin/[collection]/[id].vue

@@ -111,24 +111,24 @@ async function confirmDelete() {
   <section class="record">
     <div class="record__head">
       <NuxtLink :to="listPath" class="record__back">
-        <UiIcon name="arrow-left" :size="16" />
+        <KestrelUiIcon name="arrow-left" :size="16" />
         <span>{{ t('editor.back', { collection: plural }) }}</span>
       </NuxtLink>
       <h1 class="record__title" :class="{ 'record__title--generic': !hasRecordTitle }">{{ heading }}</h1>
       <div class="record__actions">
-        <UiButton type="button" variant="ghost" size="sm" icon="undo" :disabled="saving || !editorRef?.canUndo" :title="t('history.undo')" :aria-label="t('history.undo')" @click="editorRef?.undo()" />
-        <UiButton type="button" variant="ghost" size="sm" icon="redo" :disabled="saving || !editorRef?.canRedo" :title="t('history.redo')" :aria-label="t('history.redo')" @click="editorRef?.redo()" />
-        <UiButton type="button" variant="ghost" size="sm" icon="external-link" :title="previewTitle" :aria-label="previewTitle" :loading="editorRef?.previewOpening" @click="editorRef?.openPreview()" />
-        <UiButton type="button" variant="secondary" size="sm" icon="x" :disabled="saving" @click="toList">{{ t('common.cancel') }}</UiButton>
-        <UiButton v-if="id !== 'new'" variant="danger" size="sm" icon="trash" :loading="deleting" @click="onDelete">{{ t('common.delete') }}</UiButton>
-        <UiButton type="submit" :form="EDITOR_FORM_ID" variant="primary" size="sm" icon="check" :loading="saving">{{ t('common.save') }}</UiButton>
+        <KestrelUiButton type="button" variant="ghost" size="sm" icon="undo" :disabled="saving || !editorRef?.canUndo" :title="t('history.undo')" :aria-label="t('history.undo')" @click="editorRef?.undo()" />
+        <KestrelUiButton type="button" variant="ghost" size="sm" icon="redo" :disabled="saving || !editorRef?.canRedo" :title="t('history.redo')" :aria-label="t('history.redo')" @click="editorRef?.redo()" />
+        <KestrelUiButton type="button" variant="ghost" size="sm" icon="external-link" :title="previewTitle" :aria-label="previewTitle" :loading="editorRef?.previewOpening" @click="editorRef?.openPreview()" />
+        <KestrelUiButton type="button" variant="secondary" size="sm" icon="x" :disabled="saving" @click="toList">{{ t('common.cancel') }}</KestrelUiButton>
+        <KestrelUiButton v-if="id !== 'new'" variant="danger" size="sm" icon="trash" :loading="deleting" @click="onDelete">{{ t('common.delete') }}</KestrelUiButton>
+        <KestrelUiButton type="submit" :form="EDITOR_FORM_ID" variant="primary" size="sm" icon="check" :loading="saving">{{ t('common.save') }}</KestrelUiButton>
         <!-- Publishing is its own decision: Save persists, Publish writes the static page (ADR-0008). -->
-        <UiButton v-if="editorRef?.canPublish !== false" type="button" variant="secondary" size="sm" icon="upload" :loading="editorRef?.publishing" :disabled="saving" @click="editorRef?.publish()">{{ t('common.publish') }}</UiButton>
-        <EditorStatus class="record__ampel" :dirty="editorRef?.dirty ?? false" :saving="saving" :has-status="editorRef?.hasStatus ?? false" :status="editorRef?.status" :saved-status="editorRef?.savedStatus" :page-like="editorRef?.pageLike ?? false" :live="editorRef?.live" />
+        <KestrelUiButton v-if="editorRef?.canPublish !== false" type="button" variant="secondary" size="sm" icon="upload" :loading="editorRef?.publishing" :disabled="saving" @click="editorRef?.publish()">{{ t('common.publish') }}</KestrelUiButton>
+        <KestrelEditorStatus class="record__ampel" :dirty="editorRef?.dirty ?? false" :saving="saving" :has-status="editorRef?.hasStatus ?? false" :status="editorRef?.status" :saved-status="editorRef?.savedStatus" :page-like="editorRef?.pageLike ?? false" :live="editorRef?.live" />
       </div>
     </div>
-    <CollectionEditor ref="editorRef" :collection="collection" :id="id" :form-id="EDITOR_FORM_ID" :locale-param="localeParam" :group="group" :actions="false" @saved="onSaved" />
-    <CollectionDeleteDialog
+    <KestrelCollectionEditor ref="editorRef" :collection="collection" :id="id" :form-id="EDITOR_FORM_ID" :locale-param="localeParam" :group="group" :actions="false" @saved="onSaved" />
+    <KestrelCollectionDeleteDialog
       :open="deleteOpen"
       :report="deleteReport"
       :busy="deleting"

package/layers/admin/app/pages/admin/[collection]/index.vue

@@ -29,12 +29,12 @@ const listLocale = computed(() => (def?.translatable ? (localeParam.value || pri
     <p v-if="!def" class="collection__missing">{{ t('collection.unknown', { name: collection }) }}</p>
 
     <template v-else-if="def.mode === 'single'">
-      <SingletonEditor :collection="collection" :title="resolveLocalized(def.label?.singular, lang) ?? collection" :locale-param="localeParam" />
+      <KestrelSingletonEditor :collection="collection" :title="resolveLocalized(def.label?.singular, lang) ?? collection" :locale-param="localeParam" />
     </template>
 
     <template v-else>
       <h1 class="collection__title">{{ resolveLocalized(def.label?.plural, lang) ?? collection }}</h1>
-      <CollectionList :schema="def" :locale="listLocale" />
+      <KestrelCollectionList :schema="def" :locale="listLocale" />
     </template>
   </section>
 </template>

package/layers/admin/app/pages/admin/[collection]/publish-preview.nuxt.test.ts

@@ -9,7 +9,7 @@ import RecordPage from './[id].vue'
 const pagesSchema = {
   name: 'pages', mode: 'multi', translatable: false, pageLike: true, seo: false, status: true,
   blocks: { enabled: false }, label: { singular: 'Page', plural: 'Pages' },
-  fields: { title: { type: 'text', required: true, translatable: false, unique: false } },
+  fields: { title: { type: 'text', required: true, unique: false } },
 }
 registerEndpoint('/api/collections', () => ({ data: [pagesSchema] }))
 

package/layers/admin/app/pages/admin/index.vue

@@ -27,10 +27,10 @@ $fetch<unknown[]>('/api/references/broken')
     <h1 class="dash__title">{{ t('dash.title') }}</h1>
     <p class="dash__lede">{{ t('dash.lede') }}</p>
     <NuxtLink v-if="brokenCount" to="/admin/references" class="dash__alert">
-      <UiIcon name="triangle-alert" :size="18" />
+      <KestrelUiIcon name="triangle-alert" :size="18" />
       <span>{{ t('refs.dashAlert', { n: brokenCount }) }}</span>
     </NuxtLink>
-    <UiEmptyState
+    <KestrelUiEmptyState
       v-if="!collections.length"
       icon="file-text"
       :title="t('dash.empty.title')"
@@ -39,7 +39,7 @@ $fetch<unknown[]>('/api/references/broken')
     <ul v-else class="dash__grid">
       <li v-for="c in collections" :key="c.name">
         <NuxtLink :to="`/admin/${c.name}`" class="dash__card">
-          <UiIcon :name="c.icon ?? 'file-text'" class="dash__icon" size="1.5rem" />
+          <KestrelUiIcon :name="c.icon ?? 'file-text'" class="dash__icon" size="1.5rem" />
           <span class="dash__name">{{ resolveLocalized(c.label?.plural, lang) ?? c.name }}</span>
           <span class="dash__mode">{{ c.mode === 'single' ? t('dash.mode.singleton') : t('dash.mode.collection') }}</span>
         </NuxtLink>

package/layers/admin/app/pages/admin/login.vue

@@ -25,22 +25,22 @@ async function submit() {
 <template>
   <form class="login" @submit.prevent="submit">
     <div class="login__brand">
-      <UiBrand />
+      <KestrelUiBrand />
       <span class="login__brand-word">kestrel</span>
     </div>
     <h1 class="login__title">{{ t('login.signIn') }}</h1>
-    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
-    <UiField :label="t('login.password')">
+    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
+    <KestrelUiField :label="t('login.password')">
       <template #default="f">
-        <UiTextInput
+        <KestrelUiTextInput
           v-model="password"
           type="password"
           autocomplete="current-password"
           v-bind="f"
         />
       </template>
-    </UiField>
-    <UiButton type="submit" variant="primary" :loading="loading">{{ t('login.signIn') }}</UiButton>
+    </KestrelUiField>
+    <KestrelUiButton type="submit" variant="primary" :loading="loading">{{ t('login.signIn') }}</KestrelUiButton>
   </form>
 </template>
 

package/layers/admin/app/pages/admin/media.vue

@@ -6,7 +6,7 @@ const { t } = useT()
 <template>
   <section class="media-page">
     <h1 class="media-page__title">{{ t('media.title') }}</h1>
-    <MediaLibrary />
+    <KestrelMediaLibrary />
   </section>
 </template>
 

package/layers/admin/app/pages/admin/references.vue

@@ -26,14 +26,14 @@ try {
 <template>
   <section class="refs">
     <NuxtLink to="/admin" class="refs__back">
-      <UiIcon name="arrow-left" :size="16" />
+      <KestrelUiIcon name="arrow-left" :size="16" />
       <span>{{ t('nav.dashboard') }}</span>
     </NuxtLink>
     <h1 class="refs__title">{{ t('refs.title') }}</h1>
     <p class="refs__lede">{{ t('refs.lede') }}</p>
 
-    <UiAlert v-if="loadError" variant="error" class="refs__error">{{ t('refs.loadError') }}</UiAlert>
-    <UiEmptyState
+    <KestrelUiAlert v-if="loadError" variant="error" class="refs__error">{{ t('refs.loadError') }}</KestrelUiAlert>
+    <KestrelUiEmptyState
       v-else-if="!broken.length"
       icon="check"
       :title="t('refs.empty.title')"

package/layers/admin/app/utils/list-cell.ts

@@ -0,0 +1,46 @@
+// Cell rendering for the collection list: how a raw row value becomes the string in a table cell.
+import type { ListColumn } from './list-columns'
+import { humanizeFieldName } from '../../../ui/app/utils/humanize'
+
+const dateFmt = new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: '2-digit' })
+// A date-only value ('YYYY-MM-DD', from a datetime field with precision 'date') parses as UTC midnight;
+// formatting it in the local zone would shift the calendar day, so pin it to UTC. Full ISO timestamps
+// (createdAt/updatedAt carry a 'Z') and local datetimes keep the local-zone formatter.
+const dateOnlyFmt = new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: '2-digit', timeZone: 'UTC' })
+
+export function isDateColumn(col: ListColumn): boolean {
+  return col.key === 'createdAt' || col.key === 'updatedAt' || col.field?.type === 'datetime'
+}
+
+export function cellText(value: unknown): string {
+  if (value == null) return ''
+  if (typeof value === 'string') return value.replace(/<[^>]*>/g, '').slice(0, 80)
+  if (typeof value === 'object') return JSON.stringify(value).slice(0, 80)
+  return String(value)
+}
+
+export function cellDisplay(col: ListColumn, row: Record<string, unknown>): string {
+  const value = row[col.key]
+  if (isDateColumn(col) && value != null) {
+    const dateOnly = typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)
+    const d = new Date(value as string)
+    if (!Number.isNaN(d.getTime())) return (dateOnly ? dateOnlyFmt : dateFmt).format(d)
+  }
+  return cellText(value)
+}
+
+/** A column header's text: a field column humanizes its own name, chrome columns translate a key. */
+export function columnLabel(col: ListColumn, t: (key: string) => string): string {
+  return col.type === 'field' ? humanizeFieldName(col.name ?? col.key) : t(col.labelKey ?? col.key)
+}
+
+/** A row's human label: the first visible non-sidecar cell that has a value, else the bare id — used for
+ *  the per-row checkbox / action aria-labels so each control names its row. */
+export function rowLabel(columns: ListColumn[], row: Record<string, unknown>): string {
+  for (const c of columns) {
+    if (c.type === 'translations' || c.type === 'deadRefs') continue
+    const d = cellDisplay(c, row)
+    if (d) return d
+  }
+  return `#${row.id}`
+}

package/layers/admin/nuxt.config.ts

@@ -1,4 +1,7 @@
+import { kestrelComponents } from '../core/modules/component-namespace/shared'
+
 export default defineNuxtConfig({
+  components: [kestrelComponents(import.meta.url)],
   routeRules: {
     // The admin is a client-rendered SPA.
     '/admin/**': { ssr: false },

package/layers/core/modules/component-namespace/index.ts

@@ -0,0 +1,20 @@
+import { addComponentsDir, defineNuxtModule } from '@nuxt/kit'
+import { resolve } from 'node:path'
+import { KESTREL_COMPONENT_PREFIX, KESTREL_OVERRIDE_PRIORITY } from './shared'
+
+/** Where a consumer places a component that replaces a shipped one, relative to their `srcDir`. */
+export const KESTREL_OVERRIDE_DIR = 'Kestrel/components'
+
+export default defineNuxtModule({
+  meta: { name: 'kestrel-component-namespace' },
+  setup(_options, nuxt) {
+    // The trailing `components` segment is load-bearing: Nuxt reports a missing registered directory
+    // (NUXT_B3001) unless the path matches its default-components pattern, which requires that suffix.
+    // Without it every consumer who never uses the seam would see a build warning.
+    addComponentsDir({
+      path: resolve(nuxt.options.srcDir, KESTREL_OVERRIDE_DIR),
+      prefix: KESTREL_COMPONENT_PREFIX,
+      priority: KESTREL_OVERRIDE_PRIORITY,
+    })
+  },
+})

package/layers/core/modules/component-namespace/shared.ts

@@ -0,0 +1,24 @@
+import { fileURLToPath } from 'node:url'
+
+export const KESTREL_COMPONENT_PREFIX = 'Kestrel'
+
+/**
+ * Above every layer-derived priority (Nuxt assigns `layerCount - i`, so the consumer's app dir — index 0
+ * — otherwise always wins). A consumer file that lands on a `Kestrel*` name anywhere but the override
+ * directory therefore loses instead of silently replacing the admin component.
+ */
+export const KESTREL_LAYER_PRIORITY = 100
+
+/** The one supported override seam, above the layers. */
+export const KESTREL_OVERRIDE_PRIORITY = 200
+
+/**
+ * The components directory of a Kestrel layer, namespaced. Nuxt drops a prefix the filename already
+ * carries, so `KestrelImg.vue` stays `KestrelImg` while `ui/Button.vue` becomes `KestrelUiButton`.
+ * Pass the layer's own `import.meta.url`.
+ */
+export const kestrelComponents = (layerUrl: string) => ({
+  path: fileURLToPath(new URL('./app/components', layerUrl)),
+  prefix: KESTREL_COMPONENT_PREFIX,
+  priority: KESTREL_LAYER_PRIORITY,
+})

package/layers/core/nuxt.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath } from 'node:url'
 
 export default defineNuxtConfig({
   modules: [
+    fileURLToPath(new URL('./modules/component-namespace/index.ts', import.meta.url)),
     fileURLToPath(new URL('./modules/auto-discovery/index.ts', import.meta.url)),
     fileURLToPath(new URL('./modules/kestrel/index.ts', import.meta.url)),
   ],

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

@@ -15,7 +15,6 @@ export type Localized = string | Record<string, string>
 interface BaseFieldDef {
   required?: boolean
   default?: unknown
-  translatable?: boolean
   unique?: boolean
   /** Add a non-unique DB index on this field's column — for a field frequently FILTERED or SORTED by but
    *  not unique (e.g. `media.folder`). `unique` already implies an index, so this is only the non-unique case. */

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

@@ -293,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"
@@ -303,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>
@@ -327,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="onSaveMeta" />
-    <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"
@@ -349,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"
@@ -357,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>