@michaelthielemann/kestrel 2.1.0 → 3.0.1

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

@@ -27,7 +27,7 @@ function rename(c: UploadItem) {
 </script>
 
 <template>
-  <UiDialog
+  <KestrelUiDialog
     :open="open"
     :title="t('media.conflicts.title')"
     :description="t('media.conflicts.desc', { count: conflicts.length })"
@@ -35,22 +35,22 @@ function rename(c: UploadItem) {
   >
     <div class="media-conflicts__all">
       <span>{{ t('media.conflicts.applyAll') }}</span>
-      <UiButton @click="emit('resolve-all', 'overwrite')">{{ t('media.conflicts.overwriteAll') }}</UiButton>
-      <UiButton @click="emit('resolve-all', 'rename')">{{ t('media.conflicts.renameAll') }}</UiButton>
-      <UiButton @click="emit('resolve-all', 'skip')">{{ t('media.conflicts.skipAll') }}</UiButton>
+      <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>
-        <UiTextInput v-model="names[c.id]" :aria-label="t('media.conflicts.newName', { name: c.filename })" />
+        <KestrelUiTextInput v-model="names[c.id]" :aria-label="t('media.conflicts.newName', { name: c.filename })" />
         <div class="media-conflicts__actions">
-          <UiButton @click="emit('resolve', c.id, 'overwrite', undefined)">{{ t('media.conflicts.overwrite') }}</UiButton>
-          <UiButton variant="primary" @click="rename(c)">{{ t('media.conflicts.rename') }}</UiButton>
-          <UiButton @click="emit('resolve', c.id, 'skip', undefined)">{{ t('media.conflicts.skip') }}</UiButton>
+          <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>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>
 
 <style lang="scss" scoped>

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

@@ -63,7 +63,7 @@ function save() {
 </script>
 
 <template>
-  <UiDialog :open="open" size="xl" :title="file?.filename ?? ''" @update:open="(v) => emit('update:open', v)">
+  <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" />
@@ -77,33 +77,33 @@ function save() {
           <div><dt>{{ t('mediaViewer.folder') }}</dt><dd>{{ file.folder || '/' }}</dd></div>
           <div><dt>{{ t('mediaViewer.uploaded') }}</dt><dd>{{ uploaded }}</dd></div>
         </dl>
-        <UiField v-if="isImage" :label="t('mediaViewer.alt')" :hint="t('mediaViewer.altHint')">
+        <KestrelUiField v-if="isImage" :label="t('mediaViewer.alt')" :hint="t('mediaViewer.altHint')">
           <template #default="f">
-            <UiTextInput v-model="alt" v-bind="f" @keydown.enter="save" />
+            <KestrelUiTextInput v-model="alt" v-bind="f" @keydown.enter="save" />
           </template>
-        </UiField>
+        </KestrelUiField>
         <div v-if="showAi" class="media-viewer__ai">
-          <UiField :label="t('mediaViewer.aiSourceTypeLabel')" :hint="t('mediaViewer.aiSourceTypeHint')">
+          <KestrelUiField :label="t('mediaViewer.aiSourceTypeLabel')" :hint="t('mediaViewer.aiSourceTypeHint')">
             <template #default="f">
-              <UiSelect v-model="aiSourceType" :options="aiSourceTypeOptions" v-bind="f" />
+              <KestrelUiSelect v-model="aiSourceType" :options="aiSourceTypeOptions" v-bind="f" />
             </template>
-          </UiField>
-          <UiField :label="t('mediaViewer.aiNote')" :hint="t('mediaViewer.aiNoteHint')">
+          </KestrelUiField>
+          <KestrelUiField :label="t('mediaViewer.aiNote')" :hint="t('mediaViewer.aiNoteHint')">
             <template #default="f">
-              <UiTextInput v-model="aiNote" v-bind="f" @keydown.enter="save" />
+              <KestrelUiTextInput v-model="aiNote" v-bind="f" @keydown.enter="save" />
             </template>
-          </UiField>
+          </KestrelUiField>
         </div>
-        <UiAlert v-if="error" variant="error">{{ error }}</UiAlert>
+        <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>
-      <UiButton :disabled="busy" @click="emit('update:open', false)">{{ t('common.close') }}</UiButton>
-      <UiButton v-if="isImage" variant="primary" :disabled="busy || !dirty" @click="save">{{ t('common.save') }}</UiButton>
+      <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>
-  </UiDialog>
+  </KestrelUiDialog>
 </template>
 
 <style lang="scss" scoped>

package/layers/media/app/components/field/Media.vue

@@ -114,7 +114,7 @@ defineExpose({ onConfirm, removeId, onDragStart, onDrop, moveItem })
 </script>
 
 <template>
-  <UiField :id="id" :label="name" :error="error" :required="required">
+  <KestrelUiField :id="id" :label="name" :error="error" :required="required">
     <template #default="f">
       <div class="field-media">
         <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -- @dragleave is a mouse-only progressive enhancement; the move-earlier/move-later buttons below give the same reorder fully keyboard access -->
@@ -135,7 +135,7 @@ defineExpose({ onConfirm, removeId, onDragStart, onDrop, moveItem })
             @drop.prevent="onDrop(i)"
             @dragend="onDragEnd"
           >
-            <MediaThumb v-if="isImage(r)" draggable="false" class="field-media__thumb" :src="r.src" :srcset="srcsetOf(r)" sizes="80px" :alt="r.alt ?? ''" :thumbhash="r.thumbhash" />
+            <KestrelMediaThumb v-if="isImage(r)" draggable="false" class="field-media__thumb" :src="r.src" :srcset="srcsetOf(r)" sizes="80px" :alt="r.alt ?? ''" :thumbhash="r.thumbhash" />
             <a v-else draggable="false" class="field-media__file" :href="r.src" target="_blank" rel="noopener noreferrer" :title="filenameOf(r)">
               <span class="field-media__badge" aria-hidden="true">{{ fileExt(r) }}</span>
               <span class="field-media__filename">{{ filenameOf(r) }}</span>
@@ -148,7 +148,7 @@ defineExpose({ onConfirm, removeId, onDragStart, onDrop, moveItem })
                 :aria-label="t('field.media.move_earlier', { name: nameOf(r, i) })"
                 :disabled="i === 0"
                 @click="moveItem(i, -1)"
-              ><UiIcon name="chevron-left" size="0.875rem" /></button>
+              ><KestrelUiIcon name="chevron-left" size="0.875rem" /></button>
               <button
                 type="button"
                 draggable="false"
@@ -156,13 +156,13 @@ defineExpose({ onConfirm, removeId, onDragStart, onDrop, moveItem })
                 :aria-label="t('field.media.move_later', { name: nameOf(r, i) })"
                 :disabled="i === resolved.length - 1"
                 @click="moveItem(i, 1)"
-              ><UiIcon name="chevron-right" size="0.875rem" /></button>
+              ><KestrelUiIcon name="chevron-right" size="0.875rem" /></button>
             </template>
-            <button v-if="!disabled" type="button" draggable="false" class="field-media__remove" :aria-label="t('field.media.remove', { name: nameOf(r, i) })" @click="removeId(r.id)"><UiIcon name="x" size="1rem" /></button>
+            <button v-if="!disabled" type="button" draggable="false" class="field-media__remove" :aria-label="t('field.media.remove', { name: nameOf(r, i) })" @click="removeId(r.id)"><KestrelUiIcon name="x" size="1rem" /></button>
           </li>
         </ul>
         <p v-else class="field-media__empty">{{ t('field.media.empty') }}</p>
-        <UiButton
+        <KestrelUiButton
           v-if="!disabled"
           :id="f.id"
           type="button"
@@ -172,12 +172,12 @@ defineExpose({ onConfirm, removeId, onDragStart, onDrop, moveItem })
           @click="pickerOpen = true"
         >
           {{ multiple ? t('field.media.add') : (resolved.length ? t('field.media.replace') : t('field.media.select')) }}
-        </UiButton>
+        </KestrelUiButton>
         <span class="field-media__live" aria-live="polite">{{ liveMessage }}</span>
       </div>
-      <MediaPicker v-model:open="pickerOpen" :multiple="multiple" :accept="accept" :initial-folder="initialFolder" :initial-selected="ids" @confirm="onConfirm" />
+      <KestrelMediaPicker v-model:open="pickerOpen" :multiple="multiple" :accept="accept" :initial-folder="initialFolder" :initial-selected="ids" @confirm="onConfirm" />
     </template>
-  </UiField>
+  </KestrelUiField>
 </template>
 
 <style lang="scss" scoped>

package/layers/media/app/plugins/field-media.client.ts

@@ -1,6 +1,6 @@
-// components are NOT auto-imported in a plugin's script context — pull FieldMedia from #components
-import { FieldMedia } from '#components'
+// components are NOT auto-imported in a plugin's script context — pull KestrelFieldMedia from #components
+import { KestrelFieldMedia } from '#components'
 
 export default defineNuxtPlugin(() => {
-  registerFieldComponent('media', FieldMedia)
+  registerFieldComponent('media', KestrelFieldMedia)
 })

package/layers/media/nuxt.config.ts

@@ -1,3 +1,7 @@
+import { kestrelComponents } from '../core/modules/component-namespace/shared'
+
 // Marks `media` as a Nuxt layer (so its components/server code are auto-registered). The media config
 // + the `kestrel` module that resolves it now live in the core layer (single non-auth config source).
-export default defineNuxtConfig({})
+export default defineNuxtConfig({
+  components: [kestrelComponents(import.meta.url)],
+})

package/layers/public/app/pages/[...slug].vue

@@ -205,9 +205,9 @@ useSeoMeta({
       <!-- Editor preview: the bridge swaps in the editor's live (unsaved) tree over postMessage and makes
            blocks selectable; the saved content renders until the first message. Normal path unchanged. -->
       <LazyKestrelPreviewBridge v-if="previewActive" :blocks="(page?.content as any[]) ?? []" v-slot="{ blocks }">
-        <BlockRenderer :blocks="(blocks as any[])" />
+        <KestrelBlockRenderer :blocks="(blocks as any[])" />
       </LazyKestrelPreviewBridge>
-      <BlockRenderer v-else :blocks="(page?.content as any[]) ?? []" />
+      <KestrelBlockRenderer v-else :blocks="(page?.content as any[]) ?? []" />
     </article>
   </NuxtLayout>
 </template>

package/layers/public/app/pages/__kestrel/preview.vue

@@ -41,6 +41,6 @@ useHead({
 
 <template>
   <KestrelPreviewBridge :blocks="ticketBlocks" v-slot="{ blocks }">
-    <BlockRenderer :blocks="(blocks as any[])" />
+    <KestrelBlockRenderer :blocks="(blocks as any[])" />
   </KestrelPreviewBridge>
 </template>

package/layers/public/nuxt.config.ts

@@ -1,6 +1,9 @@
 import { fileURLToPath } from 'node:url'
 
+import { kestrelComponents } from '../core/modules/component-namespace/shared'
+
 export default defineNuxtConfig({
+  components: [kestrelComponents(import.meta.url)],
   modules: [
     fileURLToPath(new URL('./modules/prerender-routes/index.ts', import.meta.url)),
     fileURLToPath(new URL('./modules/prune-media/index.ts', import.meta.url)),

package/layers/ui/app/components/field/DeadRefNote.vue

@@ -9,7 +9,7 @@ const { t } = useT()
 
 <template>
   <p v-if="show" class="field-dead-ref" role="note">
-    <UiIcon name="triangle-alert" :size="13" class="field-dead-ref__icon" />{{ t('deadRefs.fieldNote') }}
+    <KestrelUiIcon name="triangle-alert" :size="13" class="field-dead-ref__icon" />{{ t('deadRefs.fieldNote') }}
   </p>
 </template>
 

package/layers/ui/app/components/field/Repeater.vue

@@ -239,7 +239,7 @@ function insertRowAt(at: number) {
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-repeater {
   display: flex;
@@ -294,7 +294,7 @@ function insertRowAt(at: number) {
   }
 
   &__insert {
-    @include focus-ring;
+    @include mixins.focus-ring;
     position: relative;
     z-index: 1;
     display: flex;
@@ -388,7 +388,7 @@ function insertRowAt(at: number) {
   &__move,
   &__duplicate,
   &__remove {
-    @include focus-ring;
+    @include mixins.focus-ring;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -428,7 +428,7 @@ function insertRowAt(at: number) {
   }
 
   &__add {
-    @include focus-ring;
+    @include mixins.focus-ring;
     align-self: flex-start;
     border: 1px solid var(--color-border);
     background: var(--color-surface);
@@ -450,7 +450,7 @@ function insertRowAt(at: number) {
   }
 
   &__live {
-    @include sr-only;
+    @include mixins.sr-only;
   }
 
   @media (prefers-reduced-motion: reduce) {

package/layers/ui/app/components/field/Slug.vue

@@ -25,7 +25,7 @@ function onBlur() {
 </script>
 
 <template>
-  <UiField :id="id" :label="name" :error="error ?? undefined">
+  <KestrelUiField :id="id" :label="name" :error="error ?? undefined">
     <template #default="f">
       <div class="field-slug" :data-prefixed="!!prefix">
         <span v-if="prefix" class="field-slug__prefix">{{ prefix }}</span>
@@ -43,7 +43,7 @@ function onBlur() {
         />
       </div>
     </template>
-  </UiField>
+  </KestrelUiField>
 </template>
 
 <style lang="scss" scoped>

package/layers/ui/app/components/ui/Button.vue

@@ -23,16 +23,16 @@ withDefaults(
     :aria-busy="loading || undefined"
   >
     <span v-if="loading" class="ui-button__spinner" aria-hidden="true" />
-    <UiIcon v-else-if="icon" :name="icon" class="ui-button__icon" />
+    <KestrelUiIcon v-else-if="icon" :name="icon" class="ui-button__icon" />
     <span v-if="$slots.default" class="ui-button__label"><slot /></span>
   </button>
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-button {
-  @include focus-ring;
+  @include mixins.focus-ring;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/layers/ui/app/components/ui/ButtonGroup.vue

@@ -49,7 +49,7 @@ function onUpdate(v: unknown) {
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-btngroup {
   display: inline-flex;
@@ -62,7 +62,7 @@ function onUpdate(v: unknown) {
   width: fit-content;
 
   &__item {
-    @include focus-ring;
+    @include mixins.focus-ring;
     display: inline-flex;
     align-items: center;
     gap: var(--space-1);

package/layers/ui/app/components/ui/Checkbox.vue

@@ -36,10 +36,10 @@ watch(() => props.indeterminate, syncIndeterminate)
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-checkbox {
-  @include focus-ring;
+  @include mixins.focus-ring;
   width: 1.25rem;
   height: 1.25rem;
   accent-color: var(--color-primary);

package/layers/ui/app/components/ui/Combobox.vue

@@ -197,7 +197,7 @@ function moveChip(from: number, to: number) {
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-combobox {
   &__anchor {
@@ -232,7 +232,7 @@ function moveChip(from: number, to: number) {
     font-size: var(--text-sm);
   }
   &__chip-remove {
-    @include focus-ring;
+    @include mixins.focus-ring;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -246,7 +246,7 @@ function moveChip(from: number, to: number) {
     line-height: 1;
   }
   &__chip-move {
-    @include focus-ring;
+    @include mixins.focus-ring;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -269,7 +269,7 @@ function moveChip(from: number, to: number) {
 
     &:disabled { cursor: default; } // stays collapsed (the reveal selector excludes :disabled)
   }
-  &__live { @include sr-only; }
+  &__live { @include mixins.sr-only; }
   &__chip {
     &:hover,
     &:focus-within {
@@ -302,7 +302,7 @@ function moveChip(from: number, to: number) {
     padding: var(--space-1) 0;
   }
   &__icon {
-    @include focus-ring;
+    @include mixins.focus-ring;
     border: 0;
     background: transparent;
     cursor: pointer;

package/layers/ui/app/components/ui/DatePicker.vue

@@ -87,6 +87,6 @@ const value = computed<DateValue | undefined>({
 
 <style lang="scss">
 // Shared, global (non-scoped) datepicker chrome — the calendar is teleported to <body>.
-@use '../../assets/scss/datepicker' as *;
-@include ui-datepicker;
+@use '../../assets/scss/datepicker';
+@include datepicker.ui-datepicker;
 </style>

package/layers/ui/app/components/ui/DateRangePicker.vue

@@ -95,6 +95,6 @@ const value = computed<{ start: DateValue | undefined; end: DateValue | undefine
 // Shares the global (non-scoped) datepicker chrome — the calendar is teleported to <body>, so a
 // `scoped` block would silently drop these styles. Included explicitly rather than borrowing them
 // from DatePicker being present on the page.
-@use '../../assets/scss/datepicker' as *;
-@include ui-datepicker;
+@use '../../assets/scss/datepicker';
+@include datepicker.ui-datepicker;
 </style>

package/layers/ui/app/components/ui/EmptyState.vue

@@ -6,7 +6,7 @@ defineProps<{ icon?: IconName; title: string; description?: string }>()
 
 <template>
   <div class="ui-empty">
-    <UiIcon v-if="icon" :name="icon" size="1.5rem" class="ui-empty__icon" />
+    <KestrelUiIcon v-if="icon" :name="icon" size="1.5rem" class="ui-empty__icon" />
     <p class="ui-empty__title">{{ title }}</p>
     <p v-if="description" class="ui-empty__desc">{{ description }}</p>
     <div v-if="$slots.action" class="ui-empty__action"><slot name="action" /></div>

package/layers/ui/app/components/ui/NumberInput.vue

@@ -90,17 +90,17 @@ function onKeydown(e: KeyboardEvent) {
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-number {
-  @include input-base;
+  @include mixins.input-base;
   width: 100%;
 
   &::placeholder {
     color: var(--color-text-muted);
   }
   &--slim {
-    @include input-slim;
+    @include mixins.input-slim;
   }
 }
 
@@ -166,7 +166,7 @@ function onKeydown(e: KeyboardEvent) {
 // separate rule (not nested) so `.ui-number-wrap--slim .ui-number-wrap__input` outranks the base element rule.
 .ui-number-wrap--slim {
   .ui-number-wrap__input {
-    @include input-slim;
+    @include mixins.input-slim;
   }
   .ui-number-wrap__suffix {
     padding-inline: var(--space-2);

package/layers/ui/app/components/ui/Select.vue

@@ -27,7 +27,7 @@ const model = defineModel<string | null>()
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-select {
   position: relative;
@@ -35,7 +35,7 @@ const model = defineModel<string | null>()
   width: 100%;
 }
 .ui-select__field {
-  @include input-base;
+  @include mixins.input-base;
   width: 100%;
   appearance: none;
   // leave room for the overlaid chevron so long values don't run under it

package/layers/ui/app/components/ui/TextInput.vue

@@ -49,13 +49,13 @@ const inputType = computed(() => (revealable.value && revealed.value ? 'text' :
       :aria-label="revealed ? t('input.hidePassword') : t('input.showPassword')"
       @click="revealed = !revealed"
     >
-      <UiIcon :name="revealed ? 'eye-off' : 'eye'" size="1.125rem" />
+      <KestrelUiIcon :name="revealed ? 'eye-off' : 'eye'" size="1.125rem" />
     </button>
   </div>
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-input-wrap {
   position: relative;
@@ -64,7 +64,7 @@ const inputType = computed(() => (revealable.value && revealed.value ? 'text' :
 }
 
 .ui-input {
-  @include input-base;
+  @include mixins.input-base;
   width: 100%;
 
   &::placeholder {
@@ -72,7 +72,7 @@ const inputType = computed(() => (revealable.value && revealed.value ? 'text' :
   }
 
   &--slim {
-    @include input-slim;
+    @include mixins.input-slim;
   }
 
   // Leave room for the inset reveal button so the value never sits under it. Declared after `--slim` so a
@@ -83,7 +83,7 @@ const inputType = computed(() => (revealable.value && revealed.value ? 'text' :
 }
 
 .ui-input__reveal {
-  @include focus-ring;
+  @include mixins.focus-ring;
   position: absolute;
   inset-block: 1px;
   inset-inline-end: 1px;

package/layers/ui/app/components/ui/Textarea.vue

@@ -23,10 +23,10 @@ const model = defineModel<string | null>()
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-textarea {
-  @include input-base;
+  @include mixins.input-base;
   width: 100%;
   font-family: inherit;
   line-height: var(--leading-normal);

package/layers/ui/app/components/ui/TimeInput.vue

@@ -10,9 +10,9 @@ const model = defineModel<string | null>()
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-time {
-  @include input-base;
+  @include mixins.input-base;
 }
 </style>

package/layers/ui/app/components/ui/Toasts.vue

@@ -30,7 +30,7 @@ const { t } = useT()
         >
           <span class="ui-toast__msg">{{ toast.message }}</span>
           <button type="button" class="ui-toast__close" :aria-label="t('toast.dismiss')" @click="toasts.dismiss(toast.id)">
-            <UiIcon name="x" size="0.875rem" />
+            <KestrelUiIcon name="x" size="0.875rem" />
           </button>
         </div>
       </TransitionGroup>
@@ -39,9 +39,9 @@ const { t } = useT()
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
-.ui-toasts__live { @include sr-only; }
+.ui-toasts__live { @include mixins.sr-only; }
 
 .ui-toasts {
   position: fixed;
@@ -76,7 +76,7 @@ const { t } = useT()
   &__msg { flex: 1 1 auto; min-width: 0; }
 
   &__close {
-    @include focus-ring;
+    @include mixins.focus-ring;
     flex-shrink: 0;
     display: inline-flex;
     padding: var(--space-1);

package/layers/ui/app/composables/useToast.ts

@@ -6,7 +6,7 @@ export interface Toast { id: number; type: ToastType; message: string }
 /**
  * Transient notification queue: `push` returns an id, auto-expires after `timeout` (0 = sticky),
  * and the queue is capped (oldest dropped). Pure factory so the logic is unit-testable; `useToast`
- * shares one instance app-wide. The teleported `<UiToasts>` container renders `items`.
+ * shares one instance app-wide. The teleported `<KestrelUiToasts>` container renders `items`.
  */
 export function createToastStore(opts: { limit?: number; defaultTimeout?: number } = {}) {
   const limit = opts.limit ?? 4

package/layers/ui/nuxt.config.ts

@@ -1,5 +1,9 @@
+import { kestrelComponents } from '../core/modules/component-namespace/shared'
+
 // The UI design system (tokens / reset / base in app/assets/scss/main.scss) is intentionally NOT loaded
 // app-globally — that would leak Kestrel's CSS reset + base styles onto a consumer's public site and fight
 // their own CSS (e.g. Bootstrap). It is imported by the admin layout (layers/admin/app/layouts/admin.vue)
 // instead, which scopes it to /admin: every admin route uses that layout, and /admin/** is ssr:false.
-export default defineNuxtConfig({})
+export default defineNuxtConfig({
+  components: [kestrelComponents(import.meta.url)],
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michaelthielemann/kestrel",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "description": "A slim, collection-driven Nuxt 4 CMS meta-layer with a runtime schema engine. Add `extends: ['@michaelthielemann/kestrel']`, define collections, and the database migrates itself.",
   "license": "Apache-2.0",
   "author": "Michael Thielemann <283621694+MichaelThielemann@users.noreply.github.com>",