@michaelthielemann/kestrel 2.1.0 → 3.0.1

package/README.md

@@ -129,6 +129,7 @@ where to start reading, the cross-layer seams, the gotchas). Then the per-topic
 | Doc | Covers |
 |-----|--------|
 | [architecture.md](docs/architecture.md) | **Start here** — the layer model, boot order, cross-cutting seams, per-layer guide |
+| [field-types.md](docs/field-types.md) | Every built-in field type with its options, the column it becomes, what the server enforces vs. what only configures the widget |
 | [consuming-kestrel.md](docs/consuming-kestrel.md) | Using Kestrel in your own app: defining collections/fields/blocks, auto-discovery, the schema lifecycle |
 | [configuration.md](docs/configuration.md) | The single config source (`kestrel.config.ts`), every `KESTREL_*` env var, the auth/session env split |
 | [block-editing.md](docs/block-editing.md) | The block content model + the 3-pane block editor (tree · preview · fields) |
@@ -153,7 +154,7 @@ The CMS is split into Nuxt layers under `layers/`:
   lives in the repo root, dev-only, and is **not** shipped in the package.)
 - **`media`** — uploads, pluggable storage, image derivation, the media library + asset viewer.
 - **`admin`** — the editor SPA: collection list, record editor, the 3-pane block editor.
-- **`public`** — the SSG render path: the catch-all page, `BlockRenderer`, the JSON-LD head, the literal-key
+- **`public`** — the SSG render path: the catch-all page, `KestrelBlockRenderer`, the JSON-LD head, the literal-key
   artifacts (sitemap / robots / llms.txt / llms-full.txt / redirects.json), deploy.
 
 `playground/` is a small consuming example. `templates/starter/` is what the scaffolder writes out;

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

@@ -27,7 +27,7 @@ defineExpose({ lang, selectLang, signOut })
       <button type="button" class="rail-account__trigger" :aria-label="t('account.label')" :title="t('account.label')">
         <span class="rail-account__avatar" aria-hidden="true">{{ initials }}</span>
         <span class="rail-account__name rail__label">{{ t('account.name') }}</span>
-        <UiIcon name="chevron-down" class="rail-account__caret rail__label" size="1rem" />
+        <KestrelUiIcon name="chevron-down" class="rail-account__caret rail__label" size="1rem" />
       </button>
     </DropdownMenuTrigger>
 
@@ -56,7 +56,7 @@ defineExpose({ lang, selectLang, signOut })
           >
             <span class="rail-account__check">
               <DropdownMenuItemIndicator>
-                <UiIcon name="check" size="1rem" />
+                <KestrelUiIcon name="check" size="1rem" />
               </DropdownMenuItemIndicator>
             </span>
             <span>{{ l.toUpperCase() }}</span>
@@ -66,7 +66,7 @@ defineExpose({ lang, selectLang, signOut })
         <DropdownMenuSeparator class="rail-account__sep" />
 
         <DropdownMenuItem class="rail-account__item rail-account__item--danger" @select="signOut">
-          <UiIcon name="log-out" size="1rem" class="rail-account__item-icon" />
+          <KestrelUiIcon name="log-out" size="1rem" class="rail-account__item-icon" />
           <span>{{ t('nav.signOut') }}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>

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

@@ -22,7 +22,7 @@ try {
       :class="{ 'router-link-active': isNavItemActive(route.path, `/admin/${c.name}`) }"
       :title="collapsed ? (resolveLocalized(c.label?.plural, lang) ?? c.name) : undefined"
     >
-      <UiIcon :name="c.icon ?? 'file-text'" class="rail__icon" size="1.25rem" />
+      <KestrelUiIcon :name="c.icon ?? 'file-text'" class="rail__icon" size="1.25rem" />
       <span class="rail__label">{{ resolveLocalized(c.label?.plural, lang) ?? c.name }}</span>
     </NuxtLink>
   </nav>

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

@@ -5,7 +5,7 @@ import type { LayoutNode } from '../../../core/server/utils/field-layout'
 import type { BlockRow } from '../utils/block-tree'
 import { resolveLocalized } from '../../../ui/app/utils/localized'
 
-// The fields pane for the currently selected block: delegates to the shared <FieldLayout> renderer,
+// The fields pane for the currently selected block: delegates to the shared <KestrelFieldLayout> renderer,
 // driven by the selected block's props. `def` is the selected block's resolved definition (the parent
 // already has it). Errors are the id-keyed BlockErrorMap entry for this block (depth-independent); edits
 // emit (key, value) for an id-addressed setProp on the shared tree.
@@ -33,7 +33,7 @@ const blockLayout = computed(() => (props.def as { fieldLayout?: LayoutNode[] }
 <template>
   <div class="block-fields">
     <p class="block-fields__title">{{ resolveLocalized(def?.label, lang) ?? block.type }}</p>
-    <FieldLayout
+    <KestrelFieldLayout
       :layout="blockLayout"
       :fields="subFields"
       :values="block.props"

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

@@ -212,8 +212,8 @@ onUnmounted(() => { ro?.disconnect(); ro = null })
 
       <div class="block-preview__tools">
         <div class="block-preview__group">
-          <UiTooltip>
-            <UiButton
+          <KestrelUiTooltip>
+            <KestrelUiButton
               type="button"
               variant="ghost"
               size="sm"
@@ -222,14 +222,14 @@ onUnmounted(() => { ro?.disconnect(); ro = null })
               @click="refresh"
             />
             <template #content>{{ t('preview.refresh') }}</template>
-          </UiTooltip>
+          </KestrelUiTooltip>
         </div>
 
         <span class="block-preview__sep" aria-hidden="true" />
 
         <div class="block-preview__group" role="group" :aria-label="t('preview.deviceLabel')">
-          <UiTooltip v-for="p in presets" :key="p.key">
-            <UiButton
+          <KestrelUiTooltip v-for="p in presets" :key="p.key">
+            <KestrelUiButton
               type="button"
               variant="ghost"
               size="sm"
@@ -240,7 +240,7 @@ onUnmounted(() => { ro?.disconnect(); ro = null })
               @click="selectPreset(p)"
             />
             <template #content>{{ t(p.label) }} · {{ p.w }} × {{ p.h === 'auto' ? t('preview.auto') : p.h }}</template>
-          </UiTooltip>
+          </KestrelUiTooltip>
         </div>
 
         <span class="block-preview__sep" aria-hidden="true" />
@@ -253,7 +253,7 @@ onUnmounted(() => { ro?.disconnect(); ro = null })
         <div class="block-preview__dims">
           <!-- Either axis can be 'Auto' (fills the pane): typing a number fixes it, clearing the field
                returns it to Auto. Height is Auto under the Desktop preset. -->
-          <UiNumberInput
+          <KestrelUiNumberInput
             slim
             class="block-preview__dim"
             :model-value="width === 'auto' ? null : width"
@@ -264,7 +264,7 @@ onUnmounted(() => { ro?.disconnect(); ro = null })
             @change="onDimCommit('w', $event)"
           />
           <span class="block-preview__x" aria-hidden="true">×</span>
-          <UiNumberInput
+          <KestrelUiNumberInput
             slim
             class="block-preview__dim"
             :model-value="height === 'auto' ? null : height"

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

@@ -47,7 +47,7 @@ function pick(type: string): void {
       :aria-pressed="selectedId === null"
       @click="ctx.ops.select(null)"
     >
-      <UiIcon name="file-text" :size="15" class="block-tree__root-icon" />
+      <KestrelUiIcon name="file-text" :size="15" class="block-tree__root-icon" />
       <span>{{ t('blocks.page') }}</span>
     </button>
 
@@ -71,13 +71,13 @@ function pick(type: string): void {
           >
             <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')" />
+            <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)"><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>
+            <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>
 
@@ -109,13 +109,13 @@ function pick(type: string): void {
         :aria-expanded="picking"
         @click="picking = true"
       >
-        <UiIcon name="plus" :size="15" />
+        <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. -->
-      <UiDialog :open="picking" size="lg" :title="t('blocks.pickType')" @update:open="picking = $event">
+      <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">
@@ -127,12 +127,12 @@ function pick(type: string): void {
               @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" />
+              <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>
-      </UiDialog>
+      </KestrelUiDialog>
     </div>
   </div>
 </template>

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

@@ -69,7 +69,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
       <div class="editor3__tree-head">
         <p class="editor3__pane-label">{{ t('blocks.treeLabel') }}</p>
       </div>
-      <BlockTree
+      <KestrelBlockTree
         root
         :blocks="tree.blocks.value"
         :selected-id="selectedId"
@@ -82,12 +82,12 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
 
     <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" />
+      <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. -->
-      <BlockFields
+      <KestrelBlockFields
         v-if="selectedBlock"
         :block="selectedBlock"
         :def="byName[selectedBlock.type]"
@@ -99,7 +99,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
       />
       <template v-else>
         <p class="editor3__pane-label">{{ t('blocks.pageFields') }}</p>
-        <PageFieldsPane v-bind="ctx.pageFieldsBindings.value" v-on="ctx.pageFieldsHandlers" />
+        <KestrelPageFieldsPane v-bind="ctx.pageFieldsBindings.value" v-on="ctx.pageFieldsHandlers" />
       </template>
     </section>
   </div>

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

@@ -11,22 +11,22 @@ const { t } = useT()
 </script>
 
 <template>
-  <UiDialog :open="open" :title="t('common.delete')" @update:open="(v) => emit('update:open', v)">
+  <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. -->
-    <UiAlert v-if="report && report.checked === false" variant="warning" class="collection-delete__caution">
+    <KestrelUiAlert v-if="report && report.checked === false" variant="warning" class="collection-delete__caution">
       {{ t('list.deleteRefsUnverified') }}
-    </UiAlert>
-    <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+    </KestrelUiAlert>
+    <KestrelUiAlert v-if="error" variant="error">{{ error }}</KestrelUiAlert>
     <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>
+      <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>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>
 
 <style lang="scss" scoped>

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

@@ -272,11 +272,11 @@ onUnmounted(() => {
 
     <!-- The editor body is chosen by the collection's `editor` type (fields · blocks · an extension). -->
     <component :is="bodyComponent" v-if="bodyComponent" />
-    <EditorUnsupported v-else :editor="editorType" />
+    <KestrelEditorUnsupported v-else :editor="editorType" />
 
     <div v-if="actions" class="editor__actions">
-      <UiButton type="submit" variant="primary" icon="check" :loading="saving">{{ t('common.save') }}</UiButton>
-      <UiButton type="button" variant="secondary" icon="x" :disabled="saving" @click="emit('cancel')">{{ t('common.cancel') }}</UiButton>
+      <KestrelUiButton type="submit" variant="primary" icon="check" :loading="saving">{{ t('common.save') }}</KestrelUiButton>
+      <KestrelUiButton type="button" variant="secondary" icon="x" :disabled="saving" @click="emit('cancel')">{{ t('common.cancel') }}</KestrelUiButton>
     </div>
   </form>
 </template>