@michaelthielemann/kestrel 1.2.1

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

@@ -0,0 +1,433 @@
+<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)"
+    >
+      <UiIcon 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>
+            <UiIcon 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)"><UiIcon 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)"><UiIcon 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)"><UiIcon 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)"><UiIcon 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"
+      >
+        <UiIcon 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. -->
+      <UiDialog :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" />
+              <UiIcon 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>
+      </UiDialog>
+    </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

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { SerializedBlock } from '../../../core/server/utils/serialize-collection'
+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()
+  isRedo ? ctx.redo() : 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>
+      <BlockTree
+        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). -->
+      <BlockPreview :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. -->
+      <BlockFields
+        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>
+        <PageFieldsPane 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

@@ -0,0 +1,38 @@
+<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>
+  <UiDialog :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. -->
+    <UiAlert v-if="report && report.checked === false" variant="warning" class="collection-delete__caution">
+      {{ t('list.deleteRefsUnverified') }}
+    </UiAlert>
+    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+    <template #footer>
+      <UiButton variant="ghost" :disabled="busy" @click="emit('update:open', false)">{{ t('common.cancel') }}</UiButton>
+      <UiButton variant="danger" :disabled="busy" @click="emit('confirm')">{{ t('common.delete') }}</UiButton>
+    </template>
+  </UiDialog>
+</template>
+
+<style lang="scss" scoped>
+.collection-delete__warn {
+  margin-top: var(--space-3);
+  color: var(--color-danger);
+  font-size: var(--text-sm);
+}
+</style>