@michaelthielemann/kestrel 4.1.3 → 5.0.2

package/layers/admin/app/components/BlockTree.vue

@@ -1,433 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { BlockRow, BlockTreeCtx } from '../utils/block-tree'
-import { resolveLocalized } from '../../../ui/app/utils/localized'
-import BlockTree from './BlockTree.vue'
-
-const props = withDefaults(
-  defineProps<{
-    blocks: BlockRow[]
-    selectedId: string | null
-    errorIds: Set<string>
-    /** Block ids that hold (or contain) a stale reference — a warning roll-up, parallel to `errorIds`. */
-    deadRefIds?: Set<string>
-    ctx: BlockTreeCtx
-    disabled?: boolean
-    /** Set on the parent block + slot when this list is a slot's children; null/null at the page root. */
-    parentId?: string | null
-    slotName?: string | null
-    /** Only the top-level instance renders the selectable "Page" root node. */
-    root?: boolean
-  }>(),
-  { deadRefIds: () => new Set<string>() },
-)
-
-const { t, lang } = useT()
-
-const slotNamesOf = (type: string): string[] => props.ctx.byName[type]?.slots ?? []
-const labelOf = (block: BlockRow): string => resolveLocalized(props.ctx.byName[block.type]?.label, lang.value) ?? block.type
-
-// Inline "Add block" type picker. The block type is fixed at creation (not switchable afterwards), so
-// the only type choice happens here. State is per tree instance, so the root list and each slot keep
-// independent pickers. Inline (not teleported) keeps it directly DOM-testable.
-const picking = ref(false)
-function pick(type: string): void {
-  props.ctx.ops.add(props.parentId ?? null, props.slotName ?? null, type)
-  picking.value = false
-}
-</script>
-
-<template>
-  <div class="block-tree">
-    <button
-      v-if="root"
-      type="button"
-      class="block-tree__root"
-      :class="{ 'block-tree__node-label--selected': selectedId === null }"
-      :aria-pressed="selectedId === null"
-      @click="ctx.ops.select(null)"
-    >
-      <KestrelUiIcon name="file-text" :size="15" class="block-tree__root-icon" />
-      <span>{{ t('blocks.page') }}</span>
-    </button>
-
-    <p v-if="root && !blocks.length" class="block-tree__empty">{{ t('blocks.empty') }}</p>
-
-    <ul class="block-tree__list">
-      <li
-        v-for="(block, i) in blocks"
-        :key="block.id"
-        class="block-tree__node"
-        :class="{ 'block-tree__node--selected': selectedId === block.id }"
-        :data-type="block.type"
-      >
-        <div class="block-tree__row">
-          <button
-            type="button"
-            class="block-tree__node-label"
-            :class="{ 'block-tree__node-label--selected': selectedId === block.id }"
-            :aria-pressed="selectedId === block.id"
-            @click="ctx.ops.select(block.id)"
-          >
-            <span class="block-tree__node-name">{{ labelOf(block) }}</span>
-            <span v-if="errorIds.has(block.id)" class="block-tree__badge" role="img" :aria-label="t('blocks.invalid')" :title="t('blocks.invalid')">!</span>
-            <KestrelUiIcon v-if="deadRefIds.has(block.id)" name="triangle-alert" :size="14" class="block-tree__deadbadge" role="img" :aria-label="t('deadRefs.blockBadge')" :title="t('deadRefs.blockBadge')" />
-          </button>
-          <div class="block-tree__actions">
-            <button type="button" class="block-tree__btn" :disabled="disabled || i === 0" :aria-label="t('blocks.moveUp', { n: i + 1 })" @click="ctx.ops.move(block.id, -1)"><KestrelUiIcon name="chevron-up" :size="15" /></button>
-            <button type="button" class="block-tree__btn" :disabled="disabled || i === blocks.length - 1" :aria-label="t('blocks.moveDown', { n: i + 1 })" @click="ctx.ops.move(block.id, 1)"><KestrelUiIcon name="chevron-down" :size="15" /></button>
-            <button type="button" class="block-tree__btn" :disabled="disabled" :aria-label="t('blocks.duplicate', { n: i + 1 })" @click="ctx.ops.duplicate(block.id)"><KestrelUiIcon name="copy" :size="15" /></button>
-            <button type="button" class="block-tree__btn block-tree__btn--danger" :disabled="disabled" :aria-label="t('blocks.remove', { n: i + 1 })" @click="ctx.ops.remove(block.id)"><KestrelUiIcon name="trash" :size="15" /></button>
-          </div>
-        </div>
-
-        <div v-if="slotNamesOf(block.type).length" class="block-tree__slots">
-          <div v-for="name in slotNamesOf(block.type)" :key="name" class="block-tree__slot">
-            <span class="block-tree__slot-label">{{ name }}</span>
-            <BlockTree
-              :blocks="(block.slots?.[name] as BlockRow[]) ?? []"
-              :selected-id="selectedId"
-              :error-ids="errorIds"
-              :dead-ref-ids="deadRefIds"
-              :ctx="ctx"
-              :disabled="disabled"
-              :parent-id="block.id"
-              :slot-name="name"
-            />
-          </div>
-        </div>
-      </li>
-    </ul>
-
-    <div class="block-tree__add">
-      <button
-        type="button"
-        class="block-tree__add-btn"
-        :class="{ 'block-tree__add-btn--active': picking }"
-        :disabled="disabled"
-        aria-haspopup="dialog"
-        :aria-expanded="picking"
-        @click="picking = true"
-      >
-        <KestrelUiIcon name="plus" :size="15" />
-        <span>{{ slotName ? t('blocks.addInto', { slot: slotName }) : t('blocks.add') }}</span>
-      </button>
-
-      <!-- The type picker lives in a centered modal (position:fixed) so it escapes the tree pane's
-           overflow-y:auto clip; reka's DialogRoot owns Escape/outside-click dismissal + focus restore. -->
-      <KestrelUiDialog :open="picking" size="lg" :title="t('blocks.pickType')" @update:open="picking = $event">
-        <!-- future: category tabs + a search input mount here, above the grid -->
-        <ul class="block-tree__picker" :aria-label="t('blocks.pickType')">
-          <li v-for="bt in ctx.allowedTypes" :key="bt.name">
-            <button
-              type="button"
-              class="block-tree__picker-item"
-              :disabled="disabled"
-              :aria-label="t('blocks.addOfType', { type: resolveLocalized(bt.label, lang) ?? bt.name })"
-              @click="pick(bt.name)"
-            >
-              <img v-if="bt.image" :src="bt.image" alt="" loading="lazy" class="block-tree__picker-img" />
-              <KestrelUiIcon v-else :name="bt.icon ?? 'layout-grid'" :size="24" class="block-tree__picker-icon" />
-              <span class="block-tree__picker-label">{{ resolveLocalized(bt.label, lang) ?? bt.name }}</span>
-            </button>
-          </li>
-        </ul>
-      </KestrelUiDialog>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.block-tree {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  font-size: var(--text-sm);
-
-  &__root,
-  &__node-label {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    flex: 1;
-    min-width: 0;
-    padding: var(--space-1) var(--space-2);
-    border: 0;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    font: inherit;
-    text-align: left;
-    text-transform: capitalize;
-    color: var(--color-text);
-    cursor: pointer;
-
-    &:hover {
-      background: var(--color-hover);
-    }
-    &:focus-visible {
-      outline: 2px solid var(--color-focus);
-      outline-offset: -2px;
-    }
-  }
-
-  // The page root reads as a quieter, structural header than the blocks below it.
-  &__root {
-    font-weight: var(--weight-medium);
-    color: var(--color-text-muted);
-  }
-  &__root-icon {
-    flex-shrink: 0;
-    color: var(--color-text-subtle);
-  }
-
-  &__node-label--selected {
-    background: var(--color-active, var(--color-surface-2));
-    color: var(--color-text);
-    font-weight: var(--weight-medium);
-    box-shadow: inset 2px 0 0 var(--color-primary);
-  }
-
-  &__node-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__empty {
-    margin: 0;
-    padding: var(--space-1) var(--space-2);
-    color: var(--color-text-muted);
-  }
-
-  &__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  &__node {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-  &__row {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--space-1);
-    border-radius: var(--radius-sm);
-  }
-
-  &__badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
-    border-radius: var(--radius-full);
-    background: var(--color-danger-solid);
-    color: var(--color-on-danger);
-    font-size: var(--text-xs);
-    font-weight: var(--weight-bold);
-    line-height: 1;
-  }
-
-  // Stale-reference warning marker (distinct shape + colour from the red error badge).
-  &__deadbadge {
-    flex-shrink: 0;
-    color: var(--color-warning);
-  }
-
-  // Structural controls stay quiet until the row is hovered, focused, or selected — the tree reads as
-  // a calm outline, not a control panel. Overlaid (position:absolute) so the hidden bar reserves NO
-  // width and the label spans the full row when idle. Kept in the DOM (revealed by :focus-within) so
-  // they stay keyboard-reachable; the pointer-events toggle lets idle clicks fall through to the label.
-  &__actions {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    gap: 1px;
-    padding-left: var(--space-5);
-    border-radius: var(--radius-sm);
-    background: linear-gradient(to right, transparent, var(--color-surface) var(--space-4));
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--motion-fast) var(--ease-standard);
-  }
-  &__row:hover &__actions,
-  &__row:focus-within &__actions,
-  &__node--selected > &__row &__actions {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  // When the overlay is revealed, reserve room on the label so the name and the validity / stale-ref
-  // badges aren't hidden under it (4×1.5rem buttons + a little clearance). Idle rows keep the full width.
-  &__row:hover &__node-label,
-  &__row:focus-within &__node-label,
-  &__node--selected > &__row &__node-label {
-    padding-right: 6.25rem;
-  }
-
-  &__btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 0;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-muted); /* meaningful icon control at rest → ≥3:1 (SC 1.4.11) */
-    cursor: pointer;
-    transition:
-      background-color var(--motion-fast) var(--ease-standard),
-      color var(--motion-fast) var(--ease-standard);
-
-    &:hover:not(:disabled) {
-      background: var(--color-hover);
-      color: var(--color-text);
-    }
-    &:focus-visible {
-      outline: 2px solid var(--color-focus);
-      outline-offset: -2px;
-    }
-    &:disabled {
-      opacity: 0.35;
-      cursor: default;
-    }
-    &--danger:hover:not(:disabled) {
-      color: var(--color-danger);
-    }
-  }
-
-  &__slots {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    // Subtle step (~13px/level) so deep nests don't eat the label width; the 1px guide keeps it legible.
-    margin: 2px 0 var(--space-1) var(--space-1);
-    padding-left: var(--space-2);
-    border-left: 1px solid var(--color-border);
-  }
-  &__slot {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  &__slot-label {
-    padding: 0 var(--space-2);
-    font-size: var(--text-xs);
-    font-weight: var(--weight-medium);
-    color: var(--color-text-muted);
-    text-transform: capitalize;
-  }
-
-  &__add {
-    position: relative;
-    margin-top: 2px;
-  }
-  &__add-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    width: 100%;
-    padding: var(--space-1) var(--space-2);
-    border: 0;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-muted);
-    font: inherit;
-    font-size: var(--text-sm);
-    text-align: left;
-    cursor: pointer;
-    transition:
-      background-color var(--motion-fast) var(--ease-standard),
-      color var(--motion-fast) var(--ease-standard);
-
-    &:hover:not(:disabled) {
-      background: var(--color-hover);
-      color: var(--color-text);
-    }
-    &:focus-visible {
-      outline: 2px solid var(--color-focus);
-      outline-offset: -2px;
-    }
-    &:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-  }
-  // While its picker modal is open, the trigger carries a high-contrast solid-indigo fill so it reads as
-  // the active insertion target (UiIcon uses currentColor, so the + glyph flips to on-primary too).
-  &__add-btn--active,
-  &__add-btn--active:hover:not(:disabled) {
-    background: var(--color-primary-solid);
-    color: var(--color-on-primary);
-  }
-
-  // Tile grid inside the picker dialog body (the dialog provides the card chrome). Structured so a future
-  // category-tab row + search input can mount above it. Tiles widen to hold optional preview screenshots.
-  &__picker {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
-    gap: var(--space-2);
-  }
-  &__picker-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    width: 100%;
-    padding: var(--space-2);
-    border: 1px solid transparent;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text);
-    font: inherit;
-    font-size: var(--text-xs);
-    line-height: 1.2;
-    text-align: center;
-    text-transform: capitalize;
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-      background: var(--color-hover);
-      border-color: var(--color-border);
-    }
-    &:focus-visible {
-      outline: 2px solid var(--color-focus);
-      outline-offset: -2px;
-    }
-    &:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-  }
-  &__picker-icon {
-    color: var(--color-text-subtle);
-  }
-  &__picker-img {
-    width: 100%;
-    aspect-ratio: 16 / 10;
-    object-fit: cover;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-  }
-  &__picker-label {
-    display: block;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-</style>

package/layers/admin/app/components/BlocksBody.vue

@@ -1,163 +0,0 @@
-<script setup lang="ts">
-import type { SerializedBlock } from '@michaelthielemann/kestrel-core'
-import type { BlockTreeCtx } from '../utils/block-tree'
-
-// The page-builder editor body: hierarchy · live preview · contextual fields. All form state comes from
-// the editor form context (CollectionEditor); the block-specific machinery lives here.
-const { t } = useT()
-const ctx = useEditorFormContext()
-const { values, setField, blockErrors, deadRefs, saving, locale, blocksAllowed } = ctx
-
-// Block registry. This body mounts only for a blocks-enabled collection, so the load always runs.
-const { load } = useBlocks()
-const all = await load()
-const byName = computed<Record<string, SerializedBlock>>(() => Object.fromEntries(all.map((b) => [b.name, b])))
-const allowedTypes = computed(() => (blocksAllowed.value?.length ? all.filter((b) => blocksAllowed.value!.includes(b.name)) : all))
-
-// One writable view of `content` so every tree mutation routes back through `setField` (→ block-error
-// reconciliation).
-const content = computed<unknown[]>({
-  get: () => (values.content as unknown[]) ?? [],
-  set: (v) => setField('content', v),
-})
-const tree = useBlockTree(content, byName, undefined, (v, coalesceAs) => setField('content', v, coalesceAs))
-const { selectedId, selectedBlock } = tree
-
-// Tree badges: a node is flagged if it (or any descendant, by roll-up) has an error.
-const errorIds = computed(() => errorBearingIds(tree.blocks.value, new Set(Object.keys(blockErrors.value))))
-// Stale-reference warnings (derived on read): the same ancestor roll-up as errors, plus the per-field set
-// for the selected block. (The page-root dead fields live on the shell's shared page-fields bindings.)
-const deadRefIds = computed(() => errorBearingIds(tree.blocks.value, deadBlockIds(deadRefs.value)))
-const blockDeadFields = computed(() => deadFieldsAt(deadRefs.value, selectedId.value))
-
-// Stable config + ops threaded through the recursive tree.
-const treeCtx: BlockTreeCtx = {
-  byName: byName.value,
-  allowedTypes: allowedTypes.value,
-  ops: { select: tree.select, add: tree.add, remove: tree.remove, move: tree.move, duplicate: tree.duplicate },
-}
-
-// On a failed save: jump to the first offending block so its fields are in view; if none, deselect so the
-// page-fields pane remounts and its inline error shows. Registered with the shell, which invokes it.
-ctx.registerRevealError(() => {
-  const firstBlock = Object.keys(blockErrors.value)[0]
-  if (firstBlock) tree.select(firstBlock)
-  else if (selectedId.value) tree.select(null)
-})
-
-// Cmd/Ctrl+Z undo, Cmd/Ctrl+Shift+Z (or Ctrl+Y) redo — for the block editor. Skipped while editing text
-// (input/textarea/contenteditable) so the field's / richtext's own native undo keeps working.
-function onKeydown(e: KeyboardEvent) {
-  if (!(e.metaKey || e.ctrlKey)) return
-  const k = e.key.toLowerCase()
-  const isRedo = k === 'y' || (k === 'z' && e.shiftKey)
-  const isUndo = k === 'z' && !e.shiftKey
-  if (!isUndo && !isRedo) return
-  const el = e.target as HTMLElement | null
-  if (el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName))) return
-  e.preventDefault()
-  if (isRedo) ctx.redo()
-  else ctx.undo()
-}
-onMounted(() => window.addEventListener('keydown', onKeydown))
-onUnmounted(() => window.removeEventListener('keydown', onKeydown))
-</script>
-
-<template>
-  <div class="editor3">
-    <nav class="editor3__tree" :aria-label="t('blocks.treeLabel')">
-      <div class="editor3__tree-head">
-        <p class="editor3__pane-label">{{ t('blocks.treeLabel') }}</p>
-      </div>
-      <KestrelBlockTree
-        root
-        :blocks="tree.blocks.value"
-        :selected-id="selectedId"
-        :error-ids="errorIds"
-        :dead-ref-ids="deadRefIds"
-        :ctx="treeCtx"
-        :disabled="saving"
-      />
-    </nav>
-
-    <aside class="editor3__preview" :aria-label="t('preview.ariaLabel')">
-      <!-- The "Preview" pane label is folded into BlockPreview's own toolbar row (single-line header). -->
-      <KestrelBlockPreview :content="content" :locale="locale" :selected-id="selectedId" @select="tree.select" />
-    </aside>
-
-    <section class="editor3__fields" :aria-label="t('blocks.fieldsLabel')">
-      <!-- A block is selected → its fields; otherwise the page (collection) fields + locale switcher. -->
-      <KestrelBlockFields
-        v-if="selectedBlock"
-        :block="selectedBlock"
-        :def="byName[selectedBlock.type]"
-        :locale="locale"
-        :errors="selectedId ? blockErrors[selectedId] : undefined"
-        :dead-fields="blockDeadFields"
-        :disabled="saving"
-        @update="(k, v) => selectedId && tree.setProp(selectedId, k, v)"
-      />
-      <template v-else>
-        <p class="editor3__pane-label">{{ t('blocks.pageFields') }}</p>
-        <KestrelPageFieldsPane v-bind="ctx.pageFieldsBindings.value" v-on="ctx.pageFieldsHandlers" />
-      </template>
-    </section>
-  </div>
-</template>
-
-<style lang="scss">
-.editor3 {
-  display: grid;
-  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 22rem);
-  gap: var(--space-4);
-  flex: 1 1 auto;
-  min-height: 0;
-
-  @media (max-width: 1100px) {
-    grid-template-columns: 1fr;
-    // Stacked single column: the grid scrolls as a whole; panes grow to their content.
-    overflow-y: auto;
-    .editor3__tree,
-    .editor3__preview,
-    .editor3__fields {
-      overflow: visible;
-    }
-  }
-
-  &__pane-label {
-    margin: 0;
-    font-size: var(--text-sm);
-    font-weight: var(--weight-medium);
-    color: var(--color-text-muted);
-  }
-
-  &__tree-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-2);
-  }
-
-  // Each pane fills the column height and scrolls independently. Tree + fields are the side panels;
-  // the preview in the middle is the canvas they act on.
-  &__tree,
-  &__fields,
-  &__preview {
-    min-height: 0;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-    padding: var(--space-4);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    background: var(--color-surface);
-  }
-  &__fields {
-    gap: var(--space-4);
-  }
-  &__preview {
-    background: var(--color-bg);
-  }
-}
-</style>

package/layers/admin/app/components/CollectionDeleteDialog.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { BatchDeleteReport } from '../utils/collection-ops'
-
-// The destructive-action confirm (replaces window.confirm). Shows how many rows will be deleted and, when
-// any are still referenced by other records, the aggregated "left with a broken link" warning fetched from
-// the referrer endpoint. Mirrors media/MediaDeleteDialog one layer over.
-defineProps<{ open: boolean; report: BatchDeleteReport | null; busy?: boolean; error?: string | null }>()
-const emit = defineEmits<{ confirm: []; 'update:open': [boolean] }>()
-
-const { t } = useT()
-</script>
-
-<template>
-  <KestrelUiDialog :open="open" :title="t('common.delete')" @update:open="(v) => emit('update:open', v)">
-    <p v-if="report">{{ t('list.deleteSummary', { n: report.count }) }}</p>
-    <div v-if="report && report.referencedCount > 0" class="collection-delete__warn">
-      <p>{{ t('list.deleteReferrersWarn', { n: report.referencedCount }) }}</p>
-    </div>
-    <!-- The referrer lookup FAILED (not "none found"): inbound links are unknown, so caution rather than
-         imply a safe delete. Distinct from the reference warning above, which needs a successful check. -->
-    <KestrelUiAlert v-if="report && report.checked === false" variant="warning" class="collection-delete__caution">
-      {{ t('list.deleteRefsUnverified') }}
-    </KestrelUiAlert>
-    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
-    <template #footer>
-      <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>
-  </KestrelUiDialog>
-</template>
-
-<style lang="scss" scoped>
-.collection-delete__warn {
-  margin-top: var(--space-3);
-  color: var(--color-danger);
-  font-size: var(--text-sm);
-}
-</style>