@michaelthielemann/kestrel 4.1.3 → 5.0.2

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

@@ -1,32 +0,0 @@
-<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>
-  <KestrelUiDialog :open="open" :title="t('media.rename')" @update:open="(v) => emit('update:open', v)">
-    <KestrelUiField :label="t('media.newName')">
-      <template #default="f">
-        <KestrelUiTextInput v-model="draft" v-bind="f" @keydown.enter="submit" />
-      </template>
-    </KestrelUiField>
-    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
-    <template #footer>
-      <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>
-  </KestrelUiDialog>
-</template>

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

@@ -1,75 +0,0 @@
-<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"><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"
-        :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"><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>
-          <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

@@ -1,25 +0,0 @@
-<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

@@ -1,90 +0,0 @@
-<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">
-    <KestrelUiTextInput
-      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">
-      <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" />
-      <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>
-
-<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

@@ -1,87 +0,0 @@
-<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>
-  <KestrelUiDialog
-    :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>
-      <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>
-        <KestrelUiTextInput v-model="names[c.id]" :aria-label="t('media.conflicts.newName', { name: c.filename })" />
-        <div class="media-conflicts__actions">
-          <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>
-  </KestrelUiDialog>
-</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

@@ -1,137 +0,0 @@
-<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) and — when the consumer switched the feature
-// on — the EU AI Act Art. 50 disclosure; everything else is read-only metadata.
-const props = defineProps<{ open: boolean; file: LibraryFile | null; busy?: boolean; error?: string | null }>()
-// The disclosure rides along as a SECOND positional argument rather than reshaping the first: an outside
-// consumer (`extensions/galleries-secure`) handles `save` as `(alt: string)` and simply ignores the extra.
-const emit = defineEmits<{
-  'update:open': [boolean]
-  save: [alt: string, ai?: { aiSourceType: string | null; aiNote: string | null }]
-}>()
-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)
-})
-
-// Gates the disclosure controls only — the data is always resolved server-side, so a consumer who turns
-// the flag back off keeps whatever was recorded, it just stops being editable here.
-const aiEnabled = computed(() => useRuntimeConfig().public.aiDisclosureEnabled === true)
-const showAi = computed(() => isImage.value && aiEnabled.value)
-const AI_SOURCE_TYPES = ['trainedAlgorithmicMedia', 'compositeWithTrainedAlgorithmicMedia', 'algorithmicallyEnhanced'] as const
-// A leading empty option is what makes "no disclosure recorded" both representable and clearable
-// (mirrors how `field/Choice.vue` renders a non-required single choice).
-const aiSourceTypeOptions = computed(() => [
-  { label: '—', value: '' },
-  ...AI_SOURCE_TYPES.map((v) => ({ label: t(`mediaViewer.aiSourceType.${v}`), value: v })),
-])
-
-const alt = ref('')
-const aiSourceType = ref('')
-const aiNote = ref('')
-const fileAlt = computed(() => props.file?.alt ?? '')
-const fileAiSourceType = computed(() => props.file?.aiDisclosure?.sourceType ?? '')
-const fileAiNote = computed(() => props.file?.aiDisclosure?.note ?? '')
-// Seed (and re-seed) the drafts whenever the dialog opens — immediate so a viewer mounted already-open
-// (or re-opened on a different file) shows the current values rather than stale/empty ones.
-watch(() => props.open, (o) => {
-  if (!o) return
-  alt.value = fileAlt.value
-  aiSourceType.value = fileAiSourceType.value
-  aiNote.value = fileAiNote.value
-}, { immediate: true })
-
-const aiDirty = computed(() => showAi.value && (aiSourceType.value !== fileAiSourceType.value || aiNote.value !== fileAiNote.value))
-const dirty = computed(() => isImage.value && (alt.value !== fileAlt.value || aiDirty.value))
-function save() {
-  if (!dirty.value || props.busy) return
-  // With the feature off the payload is omitted entirely, so an alt-only save can never blank a
-  // disclosure the consumer recorded while it was on.
-  if (!showAi.value) { emit('save', alt.value); return }
-  emit('save', alt.value, { aiSourceType: aiSourceType.value || null, aiNote: aiNote.value.trim() || null })
-}
-</script>
-
-<template>
-  <KestrelUiDialog :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>
-        <KestrelUiField v-if="isImage" :label="t('mediaViewer.alt')" :hint="t('mediaViewer.altHint')">
-          <template #default="f">
-            <KestrelUiTextInput v-model="alt" v-bind="f" @keydown.enter="save" />
-          </template>
-        </KestrelUiField>
-        <div v-if="showAi" class="media-viewer__ai">
-          <KestrelUiField :label="t('mediaViewer.aiSourceTypeLabel')" :hint="t('mediaViewer.aiSourceTypeHint')">
-            <template #default="f">
-              <KestrelUiSelect v-model="aiSourceType" :options="aiSourceTypeOptions" v-bind="f" />
-            </template>
-          </KestrelUiField>
-          <KestrelUiField :label="t('mediaViewer.aiNote')" :hint="t('mediaViewer.aiNoteHint')">
-            <template #default="f">
-              <KestrelUiTextInput v-model="aiNote" v-bind="f" @keydown.enter="save" />
-            </template>
-          </KestrelUiField>
-        </div>
-        <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
-        <!-- Optional per-file extra panel (e.g. proofing comments). Empty by default. -->
-        <slot name="extra" :file="file" />
-      </aside>
-    </div>
-    <template v-if="file" #footer>
-      <KestrelUiButton :disabled="busy" @click="emit('update:open', false)">{{ t('common.close') }}</KestrelUiButton>
-      <KestrelUiButton v-if="isImage" variant="primary" :disabled="busy || !dirty" @click="save">{{ t('common.save') }}</KestrelUiButton>
-    </template>
-  </KestrelUiDialog>
-</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__ai { display: flex; flex-direction: column; gap: var(--space-3); }
-.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>