@michaelthielemann/kestrel 3.0.0 → 4.0.0

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

@@ -7,7 +7,7 @@ import UiButtonGroup from '../ui/ButtonGroup.vue'
 import UiCheckboxGroup from '../ui/CheckboxGroup.vue'
 import { resolveLocalized } from '../../utils/localized'
 import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf } from '../../../../core/server/utils/defineCollection'
+import type { FieldOf } from '@michaelthielemann/kestrel-core'
 
 const props = defineProps<FieldComponentProps>()
 const model = defineModel<string | string[] | null>()

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

@@ -6,7 +6,7 @@ import UiTimeInput from '../ui/TimeInput.vue'
 import UiDatePicker from '../ui/DatePicker.vue'
 import UiDateRangePicker from '../ui/DateRangePicker.vue'
 import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf } from '../../../../core/server/utils/defineCollection'
+import type { FieldOf } from '@michaelthielemann/kestrel-core'
 
 const { t } = useT()
 const props = defineProps<FieldComponentProps>()

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

@@ -2,8 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import UiField from '../ui/Field.vue'
 import UiTextarea from '../ui/Textarea.vue'
-import { fieldConstraints } from '../../../../fields/app/utils/field-meta'
-import { tryParseJson } from '../../../../fields/app/utils/field-value'
+import { fieldConstraints, tryParseJson } from '@michaelthielemann/kestrel-fields/client'
 import type { FieldComponentProps } from '../../utils/field-component'
 
 const props = defineProps<FieldComponentProps>()

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

@@ -2,11 +2,9 @@
 import { computed } from 'vue'
 import FieldRenderer from './Renderer.vue'
 import FieldDeadRefNote from './DeadRefNote.vue'
-import { isFieldVisible } from '../../../../fields/app/utils/condition'
+import { isFieldVisible } from '@michaelthielemann/kestrel-core/client'
+import type { FieldDef, LayoutNode, LayoutTrack, Localized } from '@michaelthielemann/kestrel-core'
 import { resolveLocalized } from '../../utils/localized'
-import type { FieldDef, Localized } from '../../../../core/server/utils/defineCollection'
-import type { LayoutNode, LayoutTrack } from '../../../../core/server/utils/field-layout'
-
 // The ONE shared field-list renderer, reused by every field-list surface (collection page fields, block
 // fields, repeater sub-fields). A FRAGMENT (no wrapper root) so its rows/groups drop straight into the
 // caller's existing gapped flex column — the per-context vertical rhythm is preserved. Imports are

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

@@ -6,7 +6,7 @@ import UiTextInput from '../ui/TextInput.vue'
 import LinkInternalPicker from './LinkInternalPicker.vue'
 import { useLinkField } from '../../composables/useLinkField'
 import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf, LinkType, LinkValue } from '../../../../core/server/utils/defineCollection'
+import type { FieldOf, LinkType, LinkValue } from '@michaelthielemann/kestrel-core'
 
 const ALL: LinkType[] = ['external', 'email', 'tel', 'internal']
 const TYPE_KEYS: Record<LinkType, string> = {

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

@@ -4,7 +4,7 @@ import UiSelect from '../ui/Select.vue'
 import UiCombobox from '../ui/Combobox.vue'
 import { useRecordOptions } from '../../composables/useRecordOptions'
 import { resolveLocalized } from '../../utils/localized'
-import type { SerializedCollection } from '../../../../core/server/utils/serialize-collection'
+import type { SerializedCollection } from '@michaelthielemann/kestrel-core'
 
 const { t, lang } = useT()
 
@@ -85,8 +85,8 @@ const { options, selected, loading, onSearch } = useRecordOptions(coll, ids, toR
 </template>
 
 <style lang="scss">
-// The internal arm stacks two block controls (collection select + record combobox) plus an error line;
-// without this they touched. Matches the `--space-1` rhythm the hash/label rows already use.
+// The internal arm stacks two block controls (collection select + record combobox) plus an error line.
+// Matches the `--space-1` rhythm the hash/label rows already use.
 .ui-link-internal {
   display: flex;
   flex-direction: column;

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

@@ -2,9 +2,9 @@
 import { computed } from 'vue'
 import UiField from '../ui/Field.vue'
 import UiNumberInput from '../ui/NumberInput.vue'
-import { fieldConstraints } from '../../../../fields/app/utils/field-meta'
+import { fieldConstraints } from '@michaelthielemann/kestrel-fields/client'
 import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf } from '../../../../core/server/utils/defineCollection'
+import type { FieldOf } from '@michaelthielemann/kestrel-core'
 
 const props = defineProps<FieldComponentProps>()
 const model = defineModel<number | null>()

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

@@ -4,7 +4,7 @@ import UiField from '../ui/Field.vue'
 import UiCombobox from '../ui/Combobox.vue'
 import { useRecordOptions } from '../../composables/useRecordOptions'
 import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf } from '../../../../core/server/utils/defineCollection'
+import type { FieldOf } from '@michaelthielemann/kestrel-core'
 
 const props = defineProps<FieldComponentProps>()
 const model = defineModel<number | number[] | null>()

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

@@ -5,9 +5,7 @@ import FieldLayout from './Layout.vue'
 import { useRepeater } from '../../composables/useRepeater'
 import { useFieldA11y } from '../../utils/useFieldA11y'
 import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldDef, FieldOf } from '../../../../core/server/utils/defineCollection'
-import type { LayoutNode } from '../../../../core/server/utils/field-layout'
-
+import type { FieldDef, FieldOf, LayoutNode } from '@michaelthielemann/kestrel-core'
 const props = defineProps<FieldComponentProps>()
 const model = defineModel<Record<string, unknown>[] | null>()
 
@@ -239,7 +237,7 @@ function insertRowAt(at: number) {
 </template>
 
 <style lang="scss">
-@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/mixins';
 
 .ui-repeater {
   display: flex;
@@ -294,7 +292,7 @@ function insertRowAt(at: number) {
   }
 
   &__insert {
-    @include focus-ring;
+    @include mixins.focus-ring;
     position: relative;
     z-index: 1;
     display: flex;
@@ -388,7 +386,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 +426,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 +448,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

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { slugify } from '../../../../core/app/utils/slugify'
+import { slugify } from '@michaelthielemann/kestrel-core/client'
+import type { FieldOf } from '@michaelthielemann/kestrel-core'
 import type { FieldComponentProps } from '../../utils/field-component'
-import type { FieldOf } from '../../../../core/server/utils/defineCollection'
-
 // Editor widget for the `slug` field type. Shows the (display-only) `prefix` before an editable slug input,
 // and normalizes the value to a real slug on blur. Leaving it blank is fine — the server auto-generates it
 // from `options.from` (e.g. the title) on save. `options.from`/`prefix` come from the field def.

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

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import UiField from '../ui/Field.vue'
 import UiTextInput from '../ui/TextInput.vue'
 import UiTextarea from '../ui/Textarea.vue'
-import { fieldConstraints } from '../../../../fields/app/utils/field-meta'
+import { fieldConstraints } from '@michaelthielemann/kestrel-fields/client'
 import type { FieldComponentProps } from '../../utils/field-component'
 
 const props = defineProps<FieldComponentProps>()

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

@@ -29,10 +29,10 @@ withDefaults(
 </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/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/Richtext.vue

@@ -8,7 +8,7 @@ import { Superscript } from '@tiptap/extension-superscript'
 import { TextAlign } from '@tiptap/extension-text-align'
 import RichtextToolbar from './RichtextToolbar.vue'
 import { RichtextSpanClass, RichtextBlockClass } from '../../utils/richtext-preserve-class'
-import { RICHTEXT_LINK_SCHEME } from '../../../../fields/app/utils/richtext-links'
+import { RICHTEXT_LINK_SCHEME } from '@michaelthielemann/kestrel-core/client'
 
 const props = withDefaults(
   defineProps<{

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

@@ -7,7 +7,7 @@ import UiSelect from './Select.vue'
 import UiTextInput from './TextInput.vue'
 import LinkInternalPicker from '../field/LinkInternalPicker.vue'
 import type { IconName } from '../../utils/icons'
-import { richtextLinkHref, parseRichtextLinkHref } from '../../../../fields/app/utils/richtext-links'
+import { richtextLinkHref, parseRichtextLinkHref } from '@michaelthielemann/kestrel-core/client'
 
 const props = defineProps<{ editor: Editor | undefined; locale?: string; disabled?: boolean }>()
 
@@ -236,8 +236,6 @@ function applyInternalLink() {
     align-items: center;
   }
 
-  // Active toggle: a calm neutral fill with the accent carried only by the icon — matching the
-  // calmed active-nav treatment, instead of a solid-indigo button per active mark.
   &__group .ui-button.rt-on {
     background: var(--color-active, var(--color-surface-2));
     color: var(--color-text);

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

@@ -55,7 +55,7 @@ const inputType = computed(() => (revealable.value && revealed.value ? 'text' :
 </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

@@ -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/useLinkField.ts

@@ -1,7 +1,7 @@
 import { ref, computed, watch } from 'vue'
 import type { Ref } from 'vue'
 import { useEchoGuard } from './useEchoGuard'
-import type { LinkValue, LinkType } from '../../../core/server/utils/defineCollection'
+import type { LinkValue, LinkType } from '@michaelthielemann/kestrel-core'
 
 export function useLinkField(
   model: Ref<LinkValue | null | undefined>,

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

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import type { FieldDef } from '../../../core/server/utils/defineCollection'
+import type { FieldDef } from '@michaelthielemann/kestrel-core'
 import { reorder } from '../utils/reorder'
 import { useEchoGuard } from './useEchoGuard'
 

package/layers/ui/app/i18n/de.ts

@@ -23,11 +23,9 @@ export const de: Catalog = {
   'a11y.rowActions': 'Aktionen',
   'lang.label': 'Sprache',
 
-  // account menu (rail foot)
   'account.label': 'Konto',
   'account.name': 'Admin',
 
-  // text input (password reveal)
   'input.showPassword': 'Passwort anzeigen',
   'input.hidePassword': 'Passwort verbergen',
 
@@ -53,6 +51,8 @@ export const de: Catalog = {
   'editor.fixBlockContent': 'Einige Block-Inhalte sind ungültig. Prüfe die markierten Block-Felder.',
   'editor.saveConflict': 'Das steht im Konflikt mit einem vorhandenen Datensatz.',
   'editor.saveFailed': 'Speichern fehlgeschlagen.',
+  'editor.quarantined.title': 'Datensatz in Quarantäne',
+  'editor.quarantined.desc': 'Dieser Datensatz entspricht nicht mehr dem Schema seiner Collection und wird schreibgeschützt angezeigt. Er kann erst bearbeitet oder gespeichert werden, wenn die zugrunde liegenden Daten korrigiert sind.',
   'toast.saved': 'Gespeichert',
   'toast.deleted': 'Gelöscht',
   'toast.duplicated': 'Dupliziert',
@@ -104,7 +104,9 @@ export const de: Catalog = {
   'list.result': '{total} Ergebnis',
   'list.results': '{total} Ergebnisse',
   'list.loadError': 'Diese Collection konnte nicht geladen werden.',
-  // Zeilenauswahl + Sammelaktionen
+  'list.quarantined': 'In Quarantäne',
+  'list.quarantinedOne': '{n} Datensatz in Quarantäne',
+  'list.quarantinedCount': '{n} Datensätze in Quarantäne',
   'list.selectAll': 'Alle Zeilen auf dieser Seite auswählen',
   'list.selectRow': '{name} auswählen',
   'list.selected': '{n} ausgewählt',
@@ -120,6 +122,8 @@ export const de: Catalog = {
   'list.deleteRefsUnverified': 'Verweise konnten nicht geprüft werden — einige Datensätze könnten mit einem defekten Verweis zurückbleiben. Mit Vorsicht fortfahren.',
   'list.opFailed': 'Die Aktion konnte nicht abgeschlossen werden.',
   'list.refCheckFailed': 'Verweise konnten nicht geprüft werden.',
+  'list.actionConfirm': '"{name}" für {n} Datensatz/-sätze ausführen?',
+  'list.actionDone': '{name} ausgeführt',
 
   'preview.ariaLabel': 'Live-Vorschau',
   'preview.label': 'Vorschau',
@@ -222,7 +226,6 @@ export const de: Catalog = {
   'blocks.fieldsLabel': 'Block-Felder',
   'blocks.treeLabel': 'Block-Struktur',
 
-  // dead references (derived warnings)
   'deadRefs.listWarning': 'Verweist auf einen gelöschten oder unveröffentlichten Datensatz',
   'deadRefs.blockBadge': 'Defekter Verweis',
   'deadRefs.fieldNote': 'Verweist auf einen gelöschten oder unveröffentlichten Datensatz.',
@@ -247,7 +250,6 @@ export const de: Catalog = {
   'media.title': 'Medien',
   'media.picker.titleSingle': 'Datei auswählen',
   'media.picker.titleMultiple': 'Medien auswählen',
-  // media — right-click context menu
   'media.menu.cut': 'Ausschneiden',
   'media.menu.copy': 'Kopieren',
   'media.menu.paste': 'Einfügen',
@@ -327,7 +329,6 @@ export const de: Catalog = {
   'mediaViewer.aiNote': 'Hinweis zur Kennzeichnung',
   'mediaViewer.aiNoteHint': 'Freitext, z. B. das verwendete Werkzeug. Beim Upload gefundene KI-Signale werden vorausgefüllt — nur Indizien, kein geprüfter Nachweis.',
 
-  // richtext toolbar
   'richtext.bold': 'Fett',
   'richtext.italic': 'Kursiv',
   'richtext.underline': 'Unterstrichen',
@@ -362,7 +363,6 @@ export const de: Catalog = {
   'richtext.linkUrl': 'Link-URL',
   'richtext.apply': 'Übernehmen',
 
-  // media toolbar
   'mediaToolbar.searchPlaceholder': 'Suchen…',
   'mediaToolbar.searchAriaLabel': 'Medien durchsuchen',
   'mediaToolbar.viewGrid': 'Raster',