@michaelthielemann/kestrel 1.2.1

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { splitPathInput, joinFolder, displayFolderPath, type LibraryFolder } from '../utils/library'
+
+const props = defineProps<{ folder: string }>()
+const emit = defineEmits<{ navigate: [string] }>()
+
+const { t } = useT()
+
+const editing = ref(false)
+const draft = ref('')
+const suggestions = ref<string[]>([])
+let acToken = 0
+let acTimer: ReturnType<typeof setTimeout> | undefined
+
+// Non-root path segments, each with its accumulated internal path (for click-to-navigate). The root
+// is rendered separately as "/", so the whole bar reads as a real path: "/" · "/a/" · "/a/b/".
+const segments = computed(() => {
+  const out: { label: string; path: string }[] = []
+  let acc = ''
+  for (const s of props.folder.split('/').filter(Boolean)) { acc = acc ? `${acc}/${s}` : s; out.push({ label: s, path: acc }) }
+  return out
+})
+
+function startEdit() { draft.value = displayFolderPath(props.folder); editing.value = true; suggestions.value = [] }
+function commit(path: string) { editing.value = false; suggestions.value = []; emit('navigate', path) }
+function cancel() { editing.value = false; suggestions.value = [] }
+
+function onInput() { clearTimeout(acTimer); acTimer = setTimeout(fetchSuggestions, 150) }
+
+async function fetchSuggestions() {
+  // The typed value is a display path ("/a/su"); resolve its parent to the internal form for the query.
+  const { parent, fragment } = splitPathInput(draft.value)
+  const my = ++acToken
+  try {
+    const res = await $fetch<{ folders: LibraryFolder[] }>('/api/media/library', { query: { folder: joinFolder(parent), perPage: 200 } })
+    if (my !== acToken) return
+    suggestions.value = res.folders
+      .filter((f) => f.name.toLowerCase().includes(fragment.toLowerCase()))
+      .map((f) => f.path)
+  } catch {
+    if (my === acToken) suggestions.value = []
+  }
+}
+
+onUnmounted(() => clearTimeout(acTimer))
+</script>
+
+<template>
+  <div class="media-pathbar">
+    <template v-if="!editing">
+      <nav class="media-pathbar__segments" :aria-label="t('mediaPath.navAriaLabel')">
+        <button type="button" class="media-pathbar__seg media-pathbar__seg--root" @click="emit('navigate', '')">/</button>
+        <template v-for="seg in segments" :key="seg.path">
+          <button type="button" class="media-pathbar__seg" @click="emit('navigate', seg.path)">{{ seg.label }}</button>
+          <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>
+    </template>
+    <div v-else class="media-pathbar__editor">
+      <input
+        v-model="draft"
+        class="media-pathbar__input"
+        :aria-label="t('mediaPath.inputAriaLabel')"
+        @input="onInput"
+        @keydown.enter="commit(joinFolder(draft))"
+        @keydown.esc="cancel"
+      />
+      <ul v-if="suggestions.length" class="media-pathbar__suggestions">
+        <li v-for="s in suggestions" :key="s">
+          <button type="button" @click="commit(s)">{{ displayFolderPath(s) }}</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.media-pathbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  position: relative;
+
+  &__segments {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    flex-wrap: wrap;
+  }
+
+  &__seg,
+  &__edit {
+    background: none;
+    border: 0;
+    padding: var(--space-1);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    cursor: pointer;
+  }
+  &__edit {
+    display: inline-flex;
+    color: var(--color-text-muted);
+    margin-inline-start: var(--space-1);
+  }
+  &__seg--root {
+    color: var(--color-text-muted);
+  }
+
+  &__seg:hover {
+    background: var(--color-hover);
+  }
+
+  &__seg:focus-visible,
+  &__edit:focus-visible,
+  &__input:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  &__sep {
+    color: var(--color-text-muted);
+  }
+
+  &__input {
+    padding: var(--space-1) var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    min-width: 18rem;
+  }
+
+  &__suggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: var(--z-dropdown);
+    list-style: none;
+    margin: var(--space-1) 0 0;
+    padding: var(--space-1);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    min-width: 18rem;
+
+    button {
+      display: block;
+      width: 100%;
+      text-align: left;
+      background: none;
+      border: 0;
+      padding: var(--space-1) var(--space-2);
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+
+      &:hover {
+        background: var(--color-hover);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ open: boolean; multiple?: boolean; accept?: 'image' | 'any'; initialFolder?: string; initialSelected?: number[] }>()
+const emit = defineEmits<{ confirm: [number[]]; 'update:open': [boolean] }>()
+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
+      pick
+      :multiple="multiple"
+      :accept="accept ?? 'any'"
+      :initial-folder="initialFolder"
+      :initial-selected="initialSelected"
+      @confirm="(ids) => { emit('confirm', ids); emit('update:open', false) }"
+      @cancel="emit('update:open', false)"
+    />
+  </UiDialog>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps<{ open: boolean; name: string; busy?: boolean; error?: string | null }>()
+const emit = defineEmits<{ rename: [string]; 'update:open': [boolean] }>()
+
+const draft = ref(props.name)
+watch(() => props.open, (o) => { if (o) draft.value = props.name })
+
+const { t } = useT()
+
+const canRename = computed(() => {
+  const v = draft.value.trim()
+  return !!v && v !== props.name
+})
+function submit() { if (canRename.value && !props.busy) emit('rename', draft.value.trim()) }
+</script>
+
+<template>
+  <UiDialog :open="open" :title="t('media.rename')" @update:open="(v) => emit('update:open', v)">
+    <UiField :label="t('media.newName')">
+      <template #default="f">
+        <UiTextInput v-model="draft" v-bind="f" @keydown.enter="submit" />
+      </template>
+    </UiField>
+    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+    <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>
+    </template>
+  </UiDialog>
+</template>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { humanizeSize, itemKey, type LibraryItem } from '../utils/library'
+const { t } = useT()
+const props = defineProps<{ items: LibraryItem[]; isSelected: (item: LibraryItem) => boolean; dropTargetPath?: string | null; sort?: string; parentPath?: string | null; upLabel?: string }>()
+const emit = defineEmits<{ navigate: [string]; select: [LibraryItem, { toggle: boolean; range: boolean }]; open: [LibraryItem]; dragstart: [LibraryItem, DragEvent]; dragend: []; sort: [string] }>()
+const arrow = (field: string) => (props.sort === field ? ' ▲' : props.sort === `-${field}` ? ' ▼' : '')
+const ariaSort = (field: string): 'ascending' | 'descending' | 'none' => (props.sort === field ? 'ascending' : props.sort === `-${field}` ? 'descending' : 'none')
+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 | KeyboardEvent) {
+  if (e.ctrlKey || e.metaKey || e.shiftKey) emit('select', item, mods(e as MouseEvent))
+  else emit('navigate', path)
+}
+function onFile(item: LibraryItem, e: MouseEvent | KeyboardEvent) { emit('select', item, mods(e as MouseEvent)) }
+const dims = (f: { width?: number; height?: number }) => (f.width && f.height ? `${f.width}×${f.height}` : '—')
+</script>
+
+<template>
+  <table class="media-table">
+    <thead>
+      <tr>
+        <th scope="col" :aria-sort="ariaSort('name')"><button type="button" class="media-table__sort" @click="emit('sort', 'name')">{{ t('media.colName') }}<span aria-hidden="true">{{ arrow('name') }}</span></button></th>
+        <th scope="col" :aria-sort="ariaSort('type')"><button type="button" class="media-table__sort" @click="emit('sort', 'type')">{{ t('media.colType') }}<span aria-hidden="true">{{ arrow('type') }}</span></button></th>
+        <th scope="col" :aria-sort="ariaSort('size')"><button type="button" class="media-table__sort" @click="emit('sort', 'size')">{{ t('media.colSize') }}<span aria-hidden="true">{{ arrow('size') }}</span></button></th>
+        <th scope="col">{{ t('media.colDimensions') }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <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>{{ t('media.typeFolder') }}</td><td>—</td><td>—</td>
+      </tr>
+      <tr v-for="item in items" :key="itemKey(item)" class="media-table__row"
+        :class="{ 'is-selected': isSelected(item), 'is-drop-target': item.type === 'folder' && item.folder.path === dropTargetPath }"
+        :aria-selected="isSelected(item)" tabindex="0"
+        :data-drop-folder="item.type === 'folder' ? item.folder.path : undefined"
+        :data-file-id="item.type === 'file' ? item.file.id : undefined"
+        :data-test="item.type === 'folder' ? `row-folder-${item.folder.path}` : `row-file-${item.file.id}`"
+        draggable="true"
+        @click="item.type === 'folder' ? onFolder(item, item.folder.path, $event) : onFile(item, $event)"
+        @dblclick="item.type === 'file' && emit('open', item)"
+        @keydown.enter.prevent="item.type === 'folder' ? onFolder(item, item.folder.path, $event) : emit('open', item)"
+        @keydown.space.prevent="item.type === 'folder' ? emit('select', item, { toggle: true, range: false }) : onFile(item, $event)"
+        @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>{{ t('media.typeFolder') }}</td><td>{{ item.folder.size != null ? humanizeSize(item.folder.size) : '—' }}</td><td>—</td>
+        </template>
+        <template v-else>
+          <td><slot name="file-badge" :file="item.file" />{{ item.file.filename }}</td>
+          <td>{{ item.file.mime }}</td>
+          <td>{{ humanizeSize(item.file.size) }}</td>
+          <td>{{ dims(item.file) }}</td>
+        </template>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss" scoped>
+.media-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.media-table th, .media-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
+.media-table th { color: var(--color-text-muted); font-weight: var(--weight-medium); }
+.media-table__sort { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; padding: 0; font: inherit; font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; }
+.media-table__sort:hover { color: var(--color-text); }
+.media-table__sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+.media-table__row { cursor: pointer; }
+.media-table__row:hover { background: var(--color-hover); }
+.media-table__row.is-selected { background: var(--color-active); box-shadow: inset 2px 0 0 var(--color-primary); }
+.media-table__row.is-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -2px; background: var(--color-surface); }
+.media-table__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+</style>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useBlurUp } from '../composables/useBlurUp'
+
+// An admin media-library thumbnail: a plain <img> with a thumbhash blur-up placeholder so the library
+// grid + the media field picker fill with soft previews instead of blank tiles that pop in. Product
+// (AdminUI) — distinct from the demo public `MediaImage`. Takes ready-made src/srcset strings (the
+// library API and the media resolver already build them). Placeholder-only on purpose: no sharpen
+// animation, so adjacent tiles in the grid never overlap with a filter-blur halo.
+const props = defineProps<{ src: string; srcset?: string; sizes?: string; alt?: string; thumbhash?: string | null }>()
+const { imgEl, placeholderStyle, onLoad } = useBlurUp(() => props.thumbhash ?? null)
+</script>
+
+<template>
+  <img
+    ref="imgEl"
+    :src="src"
+    :srcset="srcset"
+    :sizes="sizes"
+    :alt="alt ?? ''"
+    :style="placeholderStyle"
+    loading="lazy"
+    decoding="async"
+    @load="onLoad"
+  >
+</template>

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { IconName } from '../../../ui/app/utils/icons'
+
+type View = 'grid' | 'table'
+
+const props = defineProps<{ view: View; search: string; disabled?: boolean }>()
+const emit = defineEmits<{
+  'update:view': [View]
+  'update:search': [string]
+  upload: [File[]]
+  'new-folder': []
+}>()
+
+const { t } = useT()
+
+const VIEW_OPTIONS = computed<{ label: string; value: string; icon: IconName }[]>(() => [
+  { label: t('mediaToolbar.viewGrid'), value: 'grid', icon: 'layout-grid' },
+  { label: t('mediaToolbar.viewTable'), value: 'table', icon: 'table' },
+])
+
+const viewModel = computed<string | string[] | null>({
+  get: () => props.view,
+  set: (v) => { if (typeof v === 'string') emit('update:view', v as View) },
+})
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+function onFiles(e: Event) {
+  const input = e.target as HTMLInputElement
+  emit('upload', Array.from(input.files ?? []))
+  input.value = ''
+}
+</script>
+
+<template>
+  <div class="media-toolbar">
+    <UiTextInput
+      class="media-toolbar__search"
+      :model-value="search"
+      type="search"
+      :placeholder="t('mediaToolbar.searchPlaceholder')"
+      :aria-label="t('mediaToolbar.searchAriaLabel')"
+      @update:model-value="(v) => emit('update:search', v ?? '')"
+    />
+    <!-- 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')" />
+      <span class="media-toolbar__divider" aria-hidden="true"></span>
+      <input ref="fileInput" type="file" multiple class="media-toolbar__file" @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>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.media-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  row-gap: var(--space-2);
+  align-items: center;
+
+  &__search {
+    flex: 1 1 16rem;
+    min-width: 0;
+    max-width: 24rem;
+    margin-right: auto;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  &__divider {
+    align-self: stretch;
+    width: 1px;
+    min-height: 1.5rem;
+    background: var(--color-border);
+    margin: 0 var(--space-1);
+  }
+
+  &__file {
+    display: none;
+  }
+}
+</style>

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import type { UploadItem } from '../composables/useMediaUpload'
+
+const { t } = useT()
+
+const props = defineProps<{ conflicts: UploadItem[]; open: boolean }>()
+const emit = defineEmits<{
+  resolve: [string, 'overwrite' | 'rename' | 'skip', string?]
+  'resolve-all': ['overwrite' | 'rename' | 'skip']
+  'update:open': [boolean]
+}>()
+
+// Per-row editable rename, seeded from each item's server suggestion.
+const names = reactive<Record<string, string>>({})
+watch(
+  () => props.conflicts,
+  (list) => {
+    for (const c of list) if (!(c.id in names)) names[c.id] = c.suggestion ?? c.filename
+  },
+  { immediate: true, deep: true },
+)
+
+function rename(c: UploadItem) {
+  emit('resolve', c.id, 'rename', names[c.id] ?? c.suggestion ?? c.filename)
+}
+</script>
+
+<template>
+  <UiDialog
+    :open="open"
+    :title="t('media.conflicts.title')"
+    :description="t('media.conflicts.desc', { count: conflicts.length })"
+    @update:open="(v) => emit('update:open', v)"
+  >
+    <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>
+    </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 })" />
+        <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>
+        </div>
+      </li>
+    </ul>
+  </UiDialog>
+</template>
+
+<style lang="scss" scoped>
+.media-conflicts__all {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+.media-conflicts__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.media-conflicts__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.media-conflicts__name {
+  font-weight: var(--weight-medium);
+  min-width: 8rem;
+}
+.media-conflicts__actions {
+  display: flex;
+  gap: var(--space-2);
+  margin-left: auto;
+}
+</style>

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { humanizeSize, type LibraryFile } from '../utils/library'
+
+// Fullscreen-ish preview + general info for a single file. Images additionally expose an editable alt
+// text (the only field worth maintaining from the library); everything else is read-only metadata.
+const props = defineProps<{ open: boolean; file: LibraryFile | null; busy?: boolean; error?: string | null }>()
+const emit = defineEmits<{ 'update:open': [boolean]; save: [string] }>()
+const { t, lang } = useT()
+
+const isImage = computed(() => props.file?.mime.startsWith('image/') ?? false)
+const ext = computed(() => (props.file?.filename.split('.').pop() ?? '').toUpperCase())
+const dims = computed(() => (props.file?.width && props.file?.height ? `${props.file.width}×${props.file.height}` : '—'))
+const uploaded = computed(() => {
+  const c = props.file?.createdAt
+  if (!c) return '—'
+  const d = new Date(c)
+  return Number.isNaN(d.getTime()) ? '—' : d.toLocaleString(lang.value)
+})
+
+const alt = ref('')
+// Seed (and re-seed) the draft whenever the dialog opens — immediate so a viewer mounted already-open
+// (or re-opened on a different file) shows the current alt rather than a stale/empty value.
+watch(() => props.open, (o) => { if (o) alt.value = props.file?.alt ?? '' }, { immediate: true })
+const dirty = computed(() => isImage.value && alt.value !== (props.file?.alt ?? ''))
+function save() { if (dirty.value && !props.busy) emit('save', alt.value) }
+</script>
+
+<template>
+  <UiDialog :open="open" size="xl" :title="file?.filename ?? ''" @update:open="(v) => emit('update:open', v)">
+    <div v-if="file" class="media-viewer">
+      <div class="media-viewer__preview">
+        <img v-if="isImage" :src="file.src" :srcset="file.srcset" sizes="(max-width: 60rem) 100vw, 60rem" :alt="file.alt ?? file.filename" />
+        <span v-else class="media-viewer__ext" aria-hidden="true">{{ ext }}</span>
+      </div>
+      <aside class="media-viewer__details">
+        <dl class="media-viewer__info">
+          <div><dt>{{ t('media.colType') }}</dt><dd>{{ file.mime }}</dd></div>
+          <div><dt>{{ t('media.colSize') }}</dt><dd>{{ humanizeSize(file.size) }}</dd></div>
+          <div v-if="isImage"><dt>{{ t('media.colDimensions') }}</dt><dd>{{ dims }}</dd></div>
+          <div><dt>{{ t('mediaViewer.folder') }}</dt><dd>{{ file.folder || '/' }}</dd></div>
+          <div><dt>{{ t('mediaViewer.uploaded') }}</dt><dd>{{ uploaded }}</dd></div>
+        </dl>
+        <UiField v-if="isImage" :label="t('mediaViewer.alt')" :hint="t('mediaViewer.altHint')">
+          <template #default="f">
+            <UiTextInput v-model="alt" v-bind="f" @keydown.enter="save" />
+          </template>
+        </UiField>
+        <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+        <!-- Optional per-file extra panel (e.g. proofing comments). Empty by default. -->
+        <slot name="extra" :file="file" />
+      </aside>
+    </div>
+    <template v-if="file" #footer>
+      <UiButton :disabled="busy" @click="emit('update:open', false)">{{ t('common.close') }}</UiButton>
+      <UiButton v-if="isImage" variant="primary" :disabled="busy || !dirty" @click="save">{{ t('common.save') }}</UiButton>
+    </template>
+  </UiDialog>
+</template>
+
+<style lang="scss" scoped>
+.media-viewer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (max-width: 48rem) {
+  .media-viewer { grid-template-columns: 1fr; }
+}
+.media-viewer__preview {
+  display: grid;
+  place-items: center;
+  min-height: 16rem;
+  max-height: 70svh;
+  overflow: hidden;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+.media-viewer__preview img { max-width: 100%; max-height: 70svh; object-fit: contain; }
+.media-viewer__ext { padding: var(--space-7); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-muted); }
+.media-viewer__details { display: flex; flex-direction: column; gap: var(--space-4); }
+.media-viewer__info { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
+.media-viewer__info > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
+.media-viewer__info dt { color: var(--color-text-muted); }
+.media-viewer__info dd { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>