@michaelthielemann/kestrel 1.2.1

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

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

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

@@ -0,0 +1,451 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { LibraryFile, LibraryItem } from '../utils/library'
+import type { DropResult } from '../composables/useMediaDnd'
+import type { DeleteReport, OpItem, Conflict } from '../utils/ops'
+import { toOpItem, effectiveTargets } from '../utils/ops'
+
+// The library API response carries `updatedAt` (server/utils/library.ts) that `LibraryFile` doesn't yet
+// declare — widen locally rather than read it untyped.
+type LibraryFileRow = LibraryFile & { updatedAt?: string }
+
+const props = defineProps<{ pick?: boolean; multiple?: boolean; accept?: 'image' | 'any'; initialFolder?: string; initialSelected?: number[] }>()
+const emit = defineEmits<{ confirm: [number[]]; cancel: [] }>()
+
+const lib = useMediaLibrary({ urlSync: !props.pick, accept: props.accept, initialFolder: props.pick ? props.initialFolder : undefined })
+const { folder, view, search, sort, items, parentPath, isSelected, hasMore, loading, error } = lib
+
+// Managed multi-pick: the checked file ids persist across folder navigation (unlike lib.selected, which
+// is per-folder + wiped on nav). Seeded from the field's current value so it opens pre-checked.
+const picked = ref<Set<number>>(new Set(props.pick && props.multiple ? props.initialSelected ?? [] : []))
+const isSelectedItem = (i: LibraryItem) => (props.pick && props.multiple
+  ? i.type === 'file' && picked.value.has(i.file.id)
+  : isSelected(i))
+
+const { t } = useT()
+const toast = useToast()
+const upload = useMediaUpload({
+  onSettled: () => lib.fetchLibrary(),
+  // Each failed item raises its own reason (server statusMessage, e.g. "Payload too large") — the
+  // running counter only ever showed how *many* failed, never *why*.
+  // `||` (not `??`): an empty-string reason (e.g. a blank HTTP/2 statusText that slipped through) must
+  // still degrade to the localized fallback rather than render "<file>: " with a dangling colon.
+  onError: (item) => toast.error(t('media.uploadError', { name: item.filename, reason: item.message || t('media.uploadFailedReason') })),
+})
+const { conflicts, active, counts } = upload
+const newFolderOpen = ref(false)
+
+// Single-file viewer (general info + alt editor for images), opened on double-click.
+const { primary } = useContentLocales()
+const viewerOpen = ref(false)
+const viewerFile = ref<LibraryFile | null>(null)
+const viewerBusy = ref(false)
+const viewerError = ref('')
+function onOpenItem(item: LibraryItem) {
+  // In the PICKER there is no viewer (it would stack a dialog in a dialog). The grid/table emit 'open' on
+  // Enter (the keyboard activate) — so in pick mode route Enter to the same SELECT action a click does,
+  // otherwise Enter would be a dead key for keyboard pickers. Outside the picker, Enter opens the viewer.
+  if (item.type !== 'file') return
+  if (props.pick) { onSelect(item, { toggle: false, range: false }); return }
+  viewerFile.value = item.file
+  viewerError.value = ''
+  viewerOpen.value = true
+}
+async function onSaveAlt(alt: string) {
+  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.
+    await $fetch(`/api/media/${f.id}`, {
+      method: 'PATCH',
+      body: { translations: { [primary]: { alt } } },
+      ...(f.updatedAt ? { headers: { 'x-kestrel-if-unmodified-since': String(new Date(f.updatedAt).getTime()) } } : {}),
+    })
+  } catch (e) {
+    viewerError.value = (e as { statusMessage?: string })?.statusMessage ?? t('mediaViewer.saveFailed')
+    return // keep the viewer open so the error is visible
+  } finally {
+    viewerBusy.value = false
+  }
+  // Saved → close, then refresh the list (a refresh hiccup isn't a save failure, so don't surface it).
+  viewerOpen.value = false
+  lib.fetchLibrary()
+}
+
+function onSelect(item: LibraryItem, mods: { toggle: boolean; range: boolean }) {
+  // Managed multi-pick: a plain click toggles the file's membership in the persistent `picked` set
+  // (folders aren't pickable — a modifier-click on one is ignored here).
+  if (props.pick && props.multiple) {
+    if (item.type !== 'file') return
+    const s = new Set(picked.value)
+    s.has(item.file.id) ? s.delete(item.file.id) : s.add(item.file.id)
+    picked.value = s
+    return
+  }
+  // single-pick is always exactly one — modifier clicks must not let it accumulate
+  if (props.pick && !props.multiple) { lib.select(item); return }
+  if (mods.range) lib.range(item)
+  else if (mods.toggle) lib.toggle(item)
+  else if (props.pick) lib.toggle(item)
+  else lib.select(item)
+}
+
+const selectedFileIds = computed(() => (props.pick && props.multiple
+  ? [...picked.value]
+  : items.value
+    .filter((i): i is Extract<LibraryItem, { type: 'file' }> => i.type === 'file' && isSelected(i))
+    .map((i) => i.file.id)))
+function onConfirmPick() { emit('confirm', selectedFileIds.value) }
+
+// A not-found folder (error set) must not be silently created by uploading / new-folder / paste / drop
+// into it — that would contradict the "does not exist" banner. Gate every write path on `error`.
+function onUpload(files: File[]) {
+  if (error.value) return
+  // start a fresh batch (reset cumulative counts) only once any prior batch has fully settled
+  if (!active.value && !conflicts.value.length) upload.reset()
+  upload.enqueue(files, folder.value)
+}
+
+async function onCreateFolder(name: string) {
+  if (error.value) return
+  await $fetch('/api/media/folders', {
+    method: 'POST',
+    body: { path: folder.value ? `${folder.value}/${name}` : name },
+  })
+  newFolderOpen.value = false
+  lib.fetchLibrary()
+}
+
+async function onDropResult({ uploads, folders }: DropResult) {
+  if (error.value) return
+  for (const path of folders) {
+    await $fetch('/api/media/folders', { method: 'POST', body: { path } })
+  }
+  if (uploads.length) {
+    if (!active.value && !conflicts.value.length) upload.reset()
+    upload.enqueueUploads(uploads)
+  } else if (folders.length) {
+    lib.fetchLibrary()
+  }
+}
+
+const draggedItems = ref<OpItem[]>([])
+function onItemDragStart(item: LibraryItem, e: DragEvent) {
+  const set = effectiveTargets(item, lib.isSelected, items.value.filter((i) => lib.isSelected(i)))
+  draggedItems.value = set.map(toOpItem)
+  e.dataTransfer?.setData('application/x-kestrel-media', '1')
+  if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move'
+}
+function onItemDragEnd() { draggedItems.value = [] }
+
+const { dragActive, dropFolder, onDragEnter, onDragOver, onDragLeave, onDrop } = useMediaDnd({
+  currentFolder: () => folder.value,
+  onDrop: onDropResult,
+  draggedItems: () => draggedItems.value,
+  onMove,
+})
+
+const ops = useMediaOps(() => { lib.fetchLibrary(); lib.clear() })
+const { busy: opsBusy, error: opError } = ops
+const deleteOpen = ref(false)
+const deleteReport = ref<DeleteReport | null>(null)
+const pendingDelete = ref<OpItem[]>([])
+const fileNames = computed(() => Object.fromEntries(
+  items.value.filter((i) => i.type === 'file').map((i) => [i.file.id, i.file.filename]),
+))
+
+const renameOpen = ref(false)
+const renameTarget = ref<LibraryItem | null>(null)
+const renameName = computed(() => {
+  const t = renameTarget.value
+  if (!t) return ''
+  return t.type === 'file' ? t.file.filename : t.folder.path.split('/').pop() ?? ''
+})
+
+async function onConfirmRename(name: string) {
+  if (!renameTarget.value) return
+  try {
+    await ops.rename(toOpItem(renameTarget.value), name)
+    renameOpen.value = false
+    renameTarget.value = null
+  } catch {
+    // opError is set by ops.rename and shown inside the open rename dialog
+  }
+}
+
+const { clipboard, isEmpty: clipboardEmpty, count: clipboardCount, cut, copy, clear: clearClipboard } = useMediaClipboard()
+
+// Mirrors the two v-if-toggled visual paragraphs below into one region that is ALWAYS in the DOM: a
+// live region inserted already containing text is not announced, so a v-if'd aria-live silences the
+// very first clipboard/upload message. This one starts empty and only its text content changes.
+const srStatus = computed(() => {
+  const parts: string[] = []
+  if (!clipboardEmpty.value) {
+    parts.push(`${clipboardCount.value} ${clipboardCount.value === 1 ? t('media.clipboardItem') : t('media.clipboardItems')} ${clipboard.value?.mode === 'cut' ? t('media.clipboardCut') : t('media.clipboardCopied')}`)
+  }
+  if (active.value || counts.value.done || counts.value.error || counts.value.skipped) {
+    let msg = active.value ? `${t('media.uploading')}${counts.value.done} ${t('media.uploadUploaded')}` : `${counts.value.done} ${t('media.uploadUploaded')}`
+    if (counts.value.error) msg += `, ${counts.value.error} ${t('media.uploadFailed')}`
+    if (counts.value.skipped) msg += `, ${counts.value.skipped} ${t('media.uploadSkipped')}`
+    parts.push(msg)
+  }
+  return parts.join('. ')
+})
+const relocate = useMediaRelocate(() => { lib.fetchLibrary(); lib.clear() })
+const { busy: relocateBusy, error: relocateError } = relocate
+
+const conflictOpen = ref(false)
+const pasteConflicts = ref<Conflict[]>([])
+const pendingRelocate = ref<{ type: 'move' | 'copy'; items: OpItem[]; dest: string; onSuccess?: () => void } | null>(null)
+
+async function doRelocate(type: 'move' | 'copy', opItems: OpItem[], dest: string, onSuccess?: () => void) {
+  try {
+    const report = await relocate.preview(type, opItems, dest)
+    if (report.conflicts.length) {
+      pendingRelocate.value = { type, items: opItems, dest, onSuccess }
+      pasteConflicts.value = report.conflicts
+      conflictOpen.value = true
+    } else {
+      await relocate.execute(type, opItems, dest, 'abort')
+      onSuccess?.()
+    }
+  } catch {
+    // relocateError surfaces in the library alert
+  }
+}
+
+function onPaste(dest: string) {
+  if (error.value) return
+  const cb = clipboard.value
+  if (!cb) return
+  const type = cb.mode === 'cut' ? 'move' : 'copy'
+  doRelocate(type, cb.items, dest, cb.mode === 'cut' ? () => clearClipboard() : undefined)
+}
+
+function onMove(opItems: OpItem[], dest: string) {
+  doRelocate('move', opItems, dest)
+}
+
+async function onResolveConflict(strategy: 'skip' | 'overwrite' | 'rename') {
+  const p = pendingRelocate.value
+  if (!p) return
+  try {
+    await relocate.execute(p.type, p.items, p.dest, strategy)
+    conflictOpen.value = false
+    pendingRelocate.value = null
+    pasteConflicts.value = []
+    p.onSuccess?.()
+  } catch {
+    // relocateError shown inside the open conflict dialog
+  }
+}
+
+// destructured as `onMenuSelect` to avoid clashing with the existing item-select handler `onSelect`
+const { menuItems, onContextMenu, onSelect: onMenuSelect } = useMediaContextMenu({
+  items: () => items.value,
+  isSelected: lib.isSelected,
+  select: lib.select,
+  onDelete: async (opItems) => {
+    try {
+      // set the report + pending items together (after the await) so concurrent previews can't
+      // open the dialog with one op's summary while a later op's items are pending
+      const report = await ops.previewDelete(opItems)
+      pendingDelete.value = opItems
+      deleteReport.value = report
+      deleteOpen.value = true
+    } catch {
+      // opError is set by previewDelete and surfaced by the library alert below
+    }
+  },
+  onRename: (item) => { opError.value = null; renameTarget.value = item; renameOpen.value = true },
+  currentFolder: () => folder.value,
+  clipboardEmpty: () => clipboardEmpty.value,
+  onCut: (opItems) => cut(opItems),
+  onCopy: (opItems) => copy(opItems),
+  onPaste,
+})
+
+async function onConfirmDelete() {
+  try {
+    await ops.confirmDelete(pendingDelete.value)
+    deleteOpen.value = false
+    deleteReport.value = null
+  } catch {
+    // opError is set by confirmDelete and shown inside the still-open dialog
+  }
+}
+
+// Resolve the context-menu label keys here (the composable stays pure/node-testable, returning specs).
+const localizedMenu = computed(() => menuItems.value.map((s) => ({
+  label: t(s.labelKey, s.count != null ? { n: s.count } : undefined),
+  value: s.value,
+  ...(s.danger ? { danger: true } : {}),
+})))
+</script>
+
+<template>
+  <section class="media-library" @click.self="lib.clear()" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
+    <MediaPathBar :folder="folder" @navigate="lib.navigate" />
+    <MediaToolbar
+      :view="view"
+      :search="search"
+      :disabled="!!error"
+      @update:view="lib.setView"
+      @update:search="lib.setSearch"
+      @upload="onUpload"
+      @new-folder="newFolderOpen = true"
+    />
+    <UiMenu :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 -->
+      <div class="media-library__items" @contextmenu.capture="onContextMenu">
+        <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+        <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" />
+      </div>
+    </UiMenu>
+    <div v-if="hasMore" class="media-library__more">
+      <UiButton :disabled="loading" @click="lib.loadMore">{{ t('media.loadMore') }}</UiButton>
+    </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>
+    </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>
+    </p>
+    <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>
+    </div>
+    <MediaUploadDialog
+      :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
+      :open="deleteOpen"
+      :report="deleteReport"
+      :names="fileNames"
+      :busy="opsBusy"
+      :error="opError"
+      @confirm="onConfirmDelete"
+      @update:open="(v) => { if (!v) { deleteOpen = false; deleteReport = null } }"
+    />
+    <MediaRenameDialog
+      :open="renameOpen"
+      :name="renameName"
+      :busy="opsBusy"
+      :error="opError"
+      @rename="onConfirmRename"
+      @update:open="(v) => { if (!v) { renameOpen = false; renameTarget = null } }"
+    />
+    <UiAlert v-if="relocateError && !conflictOpen" variant="error">{{ relocateError }}</UiAlert>
+    <MediaConflictDialog
+      :open="conflictOpen"
+      :conflicts="pasteConflicts"
+      :type="pendingRelocate?.type ?? 'move'"
+      :dest="pendingRelocate?.dest ?? ''"
+      :busy="relocateBusy"
+      :error="relocateError"
+      @resolve="onResolveConflict"
+      @update:open="(v) => { if (!v) { conflictOpen = false; pendingRelocate = null; pasteConflicts = []; relocateError = null } }"
+    />
+    <div v-if="dragActive && !dropFolder && !error" class="media-library__dropzone" aria-hidden="true">{{ t('media.dropToUpload') }}</div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.media-library {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  // Page mode: fill the bounded height from .media-page so the grid scrolls internally. In the picker
+  // dialog these are inert (the parent is a plain block, so no bounded height reaches here) and the
+  // dialog scrolls as a whole — .media-library__items' overflow never engages there.
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+// The one scroll region: the file grid/table. Everything else (path bar, toolbar, load-more, clipboard,
+// status, pick bar) is fixed chrome.
+.media-library > :not(.media-library__items) {
+  flex: 0 0 auto;
+}
+.media-library__items {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.media-library__dropzone {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: grid;
+  place-items: center;
+  background: var(--color-scrim);
+  color: var(--color-on-primary);
+  font-size: var(--text-lg);
+  border-radius: var(--radius-md);
+  pointer-events: none; /* must not intercept dragover/drop events from the section */
+}
+
+.media-library__more {
+  display: flex;
+  justify-content: center;
+}
+
+.media-library__empty {
+  color: var(--color-text-muted);
+  padding: var(--space-6) 0;
+  text-align: center;
+}
+
+.media-library__status {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+// Visually-hidden permanent live region (mirrors .list__sr-status in CollectionList).
+.media-library__sr-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.media-library__clipboard {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--color-text-muted);
+}
+
+.media-library__pickbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  justify-content: flex-end;
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-3);
+}
+</style>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{ open: boolean }>()
+const emit = defineEmits<{ create: [string]; 'update:open': [boolean] }>()
+
+const { t } = useT()
+const name = ref('')
+
+watch(() => props.open, (o) => { if (o) name.value = '' })
+
+function onCreate() {
+  const v = name.value.trim()
+  if (!v) return
+  emit('create', v)
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <UiDialog :open="open" :title="t('media.newFolder')" @update:open="(v) => emit('update:open', v)">
+    <UiField :label="t('media.folderName')">
+      <template #default="f">
+        <UiTextInput v-model="name" :placeholder="t('media.folderNamePlaceholder')" v-bind="f" @keydown.enter="onCreate" />
+      </template>
+    </UiField>
+    <template #footer>
+      <UiButton @click="emit('update:open', false)">{{ t('common.cancel') }}</UiButton>
+      <UiButton variant="primary" :disabled="!name.trim()" @click="onCreate">{{ t('common.create') }}</UiButton>
+    </template>
+  </UiDialog>
+</template>