nuxt-ui-basekit 0.2.0 → 0.2.1

package/app/assets/css/basekit.css

@@ -1,18 +1,18 @@
 /* ==========================================================================
- * BaseKit — Gestaltungs-Token
+ * BaseKit — design tokens
  *
- * Die Komponenten greifen ausschließlich auf `--basekit-*` zu und nie auf
- * Variablen einer bestimmten Anwendung. Hier stehen die Voreinstellungen.
+ * The components only ever reach for `--basekit-*`, never for a variable
+ * belonging to one particular application. What follows are the defaults.
  *
- * Eine Anwendung mit eigenem Theme legt die Token an einer Stelle auf ihre
- * eigenen Variablen — ein Block in ihrem Stylesheet, geladen nach diesem:
+ * An application with its own theme maps the tokens onto its own variables in
+ * one place — a block in its stylesheet, loaded after this one:
  *
  *   :root {
- *     --basekit-accent: var(--meine-markenfarbe, #2563eb);
- *     --basekit-surface: var(--meine-kartenflaeche, #ffffff);
+ *     --basekit-accent: var(--my-brand-colour, #2563eb);
+ *     --basekit-surface: var(--my-card-surface, #ffffff);
  *   }
  *
- * Fällt der Block weg, rendern die Komponenten in den Werten von hier weiter.
+ * Drop that block and the components keep rendering with the values here.
  * ========================================================================== */
 
 :root {
@@ -38,21 +38,20 @@
 }
 
 /* --------------------------------------------------------------------------
- * Diagramm-Farben (BaseKitChart*)
+ * Chart colours (BaseKitChart*)
  *
- * Bewusst **nicht** aus der Markenfarbe abgeleitet. Ein Theme darf jede
- * Akzentfarbe tragen — vier davon nebeneinander in einer gestapelten Fläche
- * ergäben Reihen, die man nicht mehr auseinanderhält, und bei einer
- * Rot-Grün-Schwäche gar nichts mehr. Die fünf Reihenfarben stehen deshalb
- * fest und sind gegen die Kartenfläche geprüft (Lichtheitsband, Chroma,
- * CVD-Abstand ΔE ≥ 8 zwischen Nachbarn, Normalsicht ΔE ≥ 15).
+ * Deliberately **not** derived from the brand colour. A theme may carry any
+ * accent — four shades of it side by side in a stacked area would give series
+ * nobody can tell apart, and under a red-green deficiency nothing at all. The
+ * five series colours are therefore fixed and validated against the card
+ * surface: lightness band, chroma, CVD distance ΔE ≥ 8 between neighbours,
+ * ΔE ≥ 15 for normal vision.
  *
- * Reihenfolge ist Teil der Prüfung: wer sie umsortiert oder eine sechste
- * Farbe dazustellt, muss neu messen. Über fünf Reihen fasst die Übersicht
- * zusammen, statt eine Farbe zu erfinden.
+ * Order is part of that validation. Reordering them, or adding a sixth, means
+ * measuring again. Beyond five series, group them rather than invent a colour.
  *
- * Ein Kundenprojekt darf die Werte überschreiben — dann aber bitte als
- * geprüften Satz und nicht einzeln.
+ * A project may override the values — as a validated set, though, not one at
+ * a time.
  * ------------------------------------------------------------------------ */
 :root {
   --basekit-chart-1: #2a78d6;
@@ -61,13 +60,13 @@
   --basekit-chart-4: #eda100;
   --basekit-chart-5: #e87ba4;
 
-  /* Die Fläche, in der ein Diagramm sitzt. Trägt die 2-px-Lücke zwischen
-   * gestapelten Segmenten und den Ring um Punkte — deshalb muss sie der
-   * Kartenfarbe entsprechen und nicht „irgendwie weiß" sein. */
+  /* The surface a chart sits on. It carries the 2px gap between stacked
+   * segments and the ring around points — which is why it has to match the
+   * card colour rather than being white-ish. */
   --basekit-chart-surface: var(--ui-bg, #ffffff);
   --basekit-chart-grid: rgb(0 0 0 / 8%);
   --basekit-chart-axis: rgb(0 0 0 / 18%);
-  /* Zurückgenommene Reihe: Kontext, nicht Aussage. */
+  /* Muted series: context, not a statement. */
   --basekit-chart-muted: rgb(0 0 0 / 22%);
 }
 

package/app/components/BaseKitBackLink.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 /**
- * Rücksprung von einer Detailseite zur zugehörigen Liste.
+ * The way back from a detail page to its list.
  *
- * Steht immer an derselben Stelle: oben rechts im Seitenkopf. Vorher hatte
- * das jede Seite anders gelöst — mal ein Knopf über der Überschrift, mal ein
- * kleiner Link darüber, mal ein Knopf rechts im Kopf, und beschriftet war er
- * mal mit dem Namen der Liste („Rubriken"), mal mit „Zurück". Wer zwischen
- * zwei Bereichen wechselt, sucht den Weg zurück dann jedes Mal neu.
+ * Always in the same place: top right of the page header. Before this, every
+ * page solved it differently — sometimes a button above the heading, sometimes
+ * a small link, sometimes a button on the right, labelled either with the name
+ * of the list or with "Back". Anyone moving between two areas had to look for
+ * the way back anew each time.
  *
- * Die Beschriftung ist deshalb fest und nennt nicht das Ziel, sondern die
- * Richtung. `label` überschreibt sie für die Fälle, in denen es nicht zu
- * einer Liste zurückgeht, sondern zum übergeordneten Datensatz.
+ * The label is therefore fixed, and it names the direction rather than the
+ * target. `label` overrides it for the cases where the way back leads to a
+ * parent record instead of a list.
  */
 import { computed } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'

package/app/components/BaseKitChoiceCard.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 /**
- * Auswahl-Karte — Pattern für „aus einer Handvoll Varianten eine wählen“,
- * wenn die Varianten sich zeigen lassen (Themes, Layouts, Vorlagen).
- * Ein Dropdown zeigt nur Namen; hier steht die Vorschau daneben.
+ * Pick one of a handful of variants, for the case where the variants can be
+ * shown — themes, layouts, templates. A dropdown gives you names only; here
+ * the preview sits right next to the label.
  *
  *  ┌──────────────────────────┐
- *  │                          │  ← Slot `preview` (stilisierte Vorschau)
- *  │        Vorschau          │
+ *  │                          │  ← `preview` slot (a stylised rendering)
+ *  │        Preview           │
  *  ├──────────────────────────┤
- *  │ Titel          [ Aktiv ] │  ← aktiv: Badge, sonst Knopf „Übernehmen“
- *  │ Beschreibung             │
+ *  │ Title         [ Active ] │  ← active: a badge, otherwise an Apply button
+ *  │ Description              │
  *  └──────────────────────────┘
  *
- * Verwendung (Karten in einem Grid, eine pro Variante):
+ * Usage — cards in a grid, one per variant:
  *
  *   <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
  *     <BaseKitChoiceCard
@@ -25,28 +25,28 @@
  *       :pending="pending"
  *       @apply="apply(o.id)"
  *     >
- *       <template #preview><MeineVorschau :id="o.id" /></template>
+ *       <template #preview><MyPreview :id="o.id" /></template>
  *     </BaseKitChoiceCard>
  *   </div>
  *
- * Die Karte selbst löst nichts aus — gewählt wird über den Knopf. Bei einer
- * Auswahl, die sofort für alle gilt, ist ein Klick daneben sonst schnell
- * passiert.
+ * The card itself triggers nothing — the button does the choosing. Where a
+ * choice takes effect for everyone at once, a stray click is otherwise made
+ * quickly.
  */
 withDefaults(defineProps<{
-  /** Name der Variante. */
+  /** Name of the variant. */
   title: string
-  /** Kurze Erläuterung unter dem Titel. */
+  /** A short explanation below the title. */
   description?: string
-  /** Diese Variante ist die aktive. */
+  /** This variant is the active one. */
   active?: boolean
-  /** Läuft gerade ein Speichervorgang (sperrt den Knopf). */
+  /** A save is in flight — disables the button. */
   pending?: boolean
-  /** Beschriftung des Knopfes für „diese Variante übernehmen“. */
+  /** Label of the button that applies this variant. */
   applyLabel?: string
-  /** Beschriftung des Aktiv-Kennzeichens. */
+  /** Label of the active badge. */
   activeLabel?: string
-  /** Seitenverhältnis der Vorschaufläche. */
+  /** Aspect ratio of the preview area. */
   ratio?: string
 }>(), {
   description: undefined,

package/app/components/BaseKitConfirmModal.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 /**
- * Global gemountetes Bestätigungs-Modal — wird vom `basekit:confirm`-Store
- * gesteuert (siehe `useConfirm()`). Genau eine Instanz pro Layout genügt,
- * sie beantwortet alle Abfragen.
+ * The globally mounted confirmation modal, driven by the `basekit:confirm`
+ * store — see `useConfirm()`. Exactly one instance per layout is enough; it
+ * answers every prompt.
  *
- * Ersetzt native `window.confirm`-Dialoge: gethemt, dark-mode-fähig,
- * destruktive Aktionen als roter Bestätigen-Button. Schließen ohne Klick
- * (Escape/Backdrop) zählt als Abbruch.
+ * Replaces native `window.confirm` dialogs: themed, dark-mode-capable, with a
+ * red confirm button for destructive actions. Closing without a click, by
+ * Escape or backdrop, counts as cancel.
  */
 import { computed } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'
@@ -20,7 +20,7 @@ const opts = computed(() => store.options)
 const open = computed({
   get: () => store.open,
   set: (value: boolean) => {
-    // Backdrop-/Escape-Schließen ohne Bestätigung → Abbruch.
+    // Closing by backdrop or Escape without confirming means cancel.
     if (!value) store.settle(false)
   },
 })

package/app/components/BaseKitDataTable.vue

@@ -4,22 +4,22 @@ import { useBaseKitLabels } from '../composables/useBaseKit'
 import { NuxtLink } from '#components'
 
 /**
- * Wiederverwendbare Admin-Tabelle: sortierbare Spalten, Textfilter und ein
- * „Anlegen"-Button oben rechts. Client-seitig (Daten werden übergeben).
+ * A reusable admin table: sortable columns, a text filter and a create button
+ * top right. Client-side throughout — the rows are handed in.
  *
- * - `columns` definiert Spalten; `sortable` macht den Kopf klickbar.
- * - Zellen rendern per Default `row[key]`; überschreibbar via Slot
+ * - `columns` defines the columns; `sortable` makes a header clickable.
+ * - Cells render `row[key]` by default, overridable through the slot
  *   `#cell-<key>="{ row, value }"`.
- * - Zeilen-Aktionen über den Slot `#actions="{ row }"` (rechte Spalte).
- * - `row-link` macht die Namensspalte anklickbar: die Funktion bekommt die
- *   Zeile und gibt ihr Ziel zurück (oder `null`, wenn diese Zeile keins hat).
- *   Welche Spalte den Link trägt, sagt `link-column` — ohne Angabe die erste.
- * - Zusätzliche Filter über den Slot `#toolbar` (rechts neben der Suche).
- * - „Anlegen": `create-label` + `@create` rendert den Button oben rechts.
- * - Paginierung client-seitig: Seitengröße über `page-size` /
- *   `page-size-options` (Default 25; Auswahl 10/25/50/100/250/Alle).
+ * - Row actions go into the slot `#actions="{ row }"`, the rightmost column.
+ * - `row-link` makes the name column clickable: the function receives the row
+ *   and returns its target, or `null` where that row has none. Which column
+ *   carries the link is `link-column`; without it, the first.
+ * - Extra filters go into the slot `#toolbar`, right of the search field.
+ * - `create-label` plus `@create` renders the button top right.
+ * - Pagination is client-side: `page-size` and `page-size-options` (default
+ *   25, offering 10/25/50/100/250/all).
  *
- * Generisch über den Zeilentyp `T` — Slots liefern `row` typisiert zurück.
+ * Generic over the row type `T` — slots hand `row` back typed.
  */
 export interface BaseKitDataColumn {
   key: string
@@ -29,7 +29,7 @@ export interface BaseKitDataColumn {
   class?: string
 }
 
-/** Seitengröße: feste Zeilenzahl oder `'all'` für „ohne Limit". */
+/** Page size: a fixed number of rows, or `'all'` for no limit. */
 export type BaseKitPageSize = number | 'all'
 
 const props = withDefaults(defineProps<{
@@ -37,23 +37,23 @@ const props = withDefaults(defineProps<{
   rows: T[]
   rowKey?: string
   searchable?: boolean
-  /** Felder, die die Suche durchsucht (Default: alle Spalten-Keys). */
+  /** Fields the search looks through. Defaults to every column key. */
   searchKeys?: string[]
   searchPlaceholder?: string
   createLabel?: string
   loading?: boolean
   emptyLabel?: string
-  /** Anfangs gewählte Seitengröße. */
+  /** Page size selected initially. */
   pageSize?: BaseKitPageSize
-  /** Auswahlmöglichkeiten für die Seitengröße. */
+  /** The page sizes on offer. */
   pageSizeOptions?: BaseKitPageSize[]
   /**
-   * Ziel je Zeile. Gesetzt, macht es den Namen anklickbar — der Weg, den man
-   * zuerst probiert. Die Aktionsspalte bleibt trotzdem: sie zeigt, was es
-   * außer „öffnen" noch gibt.
+   * Target per row. Set, it makes the name clickable — the route people try
+   * first. The actions column stays regardless: it shows what there is besides
+   * opening.
    */
   rowLink?: (row: T) => string | null | undefined
-  /** Spalte, die den Link trägt. Ohne Angabe die erste. */
+  /** The column carrying the link. Without it, the first. */
   linkColumn?: string
 }>(), {
   rowKey: 'id',
@@ -75,7 +75,7 @@ const sortDir = ref<'asc' | 'desc'>('asc')
 
 const searchFields = computed(() => props.searchKeys ?? props.columns.map(c => c.key))
 
-/** Die verlinkte Spalte — explizit gesetzt oder die erste. */
+/** The linked column — explicitly set, or the first. */
 const linkKey = computed(() => props.linkColumn ?? props.columns[0]?.key ?? null)
 
 function rowTarget(row: T, key: string): string | null {
@@ -84,7 +84,7 @@ function rowTarget(row: T, key: string): string | null {
   return target || null
 }
 
-/** Wert einer Zelle — internes String-Indexing über den generischen Zeilentyp. */
+/** Value of a cell — internal string indexing over the generic row type. */
 function cell(row: T, key: string): unknown {
   return (row as Record<string, unknown>)[key]
 }
@@ -107,7 +107,7 @@ const displayed = computed<T[]>(() => {
   return [...filtered.value].sort((a, b) => compare(cell(a, key), cell(b, key)) * dir)
 })
 
-// — Paginierung ------------------------------------------------------------
+// — Pagination -------------------------------------------------------------
 const page = ref(1)
 const pageSize = ref<BaseKitPageSize>(props.pageSize)
 
@@ -136,12 +136,12 @@ const pageSizeItems = computed(() =>
   })),
 )
 
-// Suche oder Seitengröße geändert → zurück auf Seite 1.
+// Search or page size changed, so go back to page 1.
 watch([search, pageSize], () => {
   page.value = 1
 })
 
-// Datenbestand geschrumpft (z. B. Filter) → Seite in gültigen Bereich klemmen.
+// The data shrank, through a filter say, so clamp the page into range.
 watch(totalPages, (pages) => {
   if (page.value > pages) page.value = pages
 })
@@ -176,7 +176,7 @@ function sortIcon(col: BaseKitDataColumn): string | null {
 
 <template>
   <div class="space-y-4">
-    <!-- Toolbar: Suche links, Filter/Anlegen rechts -->
+    <!-- Toolbar: search on the left, filters and create on the right -->
     <div v-if="searchable || $slots.toolbar || createLabel" class="flex flex-wrap items-center justify-between gap-3">
       <UInput
         v-if="searchable"
@@ -195,7 +195,7 @@ function sortIcon(col: BaseKitDataColumn): string | null {
       </div>
     </div>
 
-    <!-- Zustände -->
+    <!-- States -->
     <div v-if="loading" class="py-12 text-center text-muted">
       <UIcon name="i-lucide-loader-2" class="size-6 animate-spin" />
     </div>
@@ -209,7 +209,7 @@ function sortIcon(col: BaseKitDataColumn): string | null {
       </slot>
     </div>
 
-    <!-- Tabelle -->
+    <!-- Table -->
     <table v-else class="w-full text-sm">
       <thead class="border-b border-neutral-200 text-left text-muted dark:border-neutral-800">
         <tr>
@@ -268,7 +268,7 @@ function sortIcon(col: BaseKitDataColumn): string | null {
       </tbody>
     </table>
 
-    <!-- Fußzeile: Seitengröße links, Bereich + Blättern rechts -->
+    <!-- Footer: page size on the left, range and paging on the right -->
     <div
       v-if="!loading && displayed.length"
       class="flex flex-wrap items-center justify-between gap-3 pt-1 text-sm text-muted"

package/app/components/BaseKitEmptyState.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 /**
- * BaseKitEmptyState — einheitlicher Leerzustand: Icon + handlungsorientierte
- * Überschrift + optionaler Erklärtext + optionale Primäraktion (Default-Slot).
+ * One empty state for all of them: icon, an action-shaped heading, optional
+ * explanation, optional primary action in the default slot.
  *
- * `variant` trennt die beiden Fälle aus docs/18:
- * - `empty`  → „noch nichts angelegt" (führt zum ersten Schritt)
- * - `search` → „kein Suchergebnis" (bestätigt die Suche, bietet Korrektur)
+ * `variant` separates the two cases that look alike and mean different things:
+ * - `empty`  — nothing has been created yet; leads to the first step.
+ * - `search` — the query ran and found nothing; confirms it, offers a fix.
  *
- * Das passende Icon wird je Variante gewählt, kann per `icon` überschrieben
- * werden. Aktion (z. B. ein `UButton`) kommt in den Default-Slot.
+ * The icon follows the variant and can be overridden through `icon`. The
+ * action (a `UButton`, say) goes into the default slot.
  */
 withDefaults(defineProps<{
   title: string

package/app/components/BaseKitFileUpload.vue

@@ -3,9 +3,9 @@ import { ref } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'
 
 /**
- * Datei-Auswahl per Klick oder Drag & Drop. Reicht die ausgewählten Dateien
- * über `select` nach oben — kümmert sich NICHT selbst um den Upload (das macht
- * der Aufrufer, je nach Bild/Video unterschiedlich).
+ * File selection by click or drag and drop. Hands the chosen files up through
+ * `select` and does NOT upload them itself — that stays with the caller, who
+ * knows whether this is an image or a video.
  */
 const props = withDefaults(defineProps<{
   accept?: string
@@ -31,7 +31,7 @@ function pick(): void {
 function onChange(event: Event): void {
   const files = Array.from((event.target as HTMLInputElement).files ?? [])
   if (files.length) emit('select', files)
-  // Zurücksetzen, damit dieselbe Datei erneut gewählt werden kann.
+  // Reset, so the same file can be picked again.
   if (input.value) input.value.value = ''
 }
 
@@ -84,7 +84,7 @@ function onDrop(event: DragEvent): void {
 .basekit-upload__icon { font-size: 1.5rem; }
 .basekit-upload__label { font-size: 0.8125rem; font-weight: 500; }
 
-/* Dark-Mode: die Light-Fallbacks des Dropfelds überschreiben. */
+/* Dark mode: override the drop zone's light fallbacks. */
 :where(.dark) .basekit-upload { border-color: #1f2937; background: #0f172a; color: #9ca3af; }
 :where(.dark) .basekit-upload:hover, :where(.dark) .basekit-upload--drag { background: #1f2937; }
 </style>

package/app/components/BaseKitIconPicker.vue

@@ -3,14 +3,14 @@ import { computed, ref } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'
 
 /**
- * Icon-Auswahl als Form-Element für `i-lucide-*`-Namen — reine Anzeige + Picker,
- * kein Freitext. Der Trigger zeigt das gewählte Icon (oder einen Platzhalter);
- * ein Klick öffnet ein Popover mit Suche und einem Raster kuratierter Icons.
- * `modelValue` ist der Icon-Name; leerer String bedeutet „kein Icon".
+ * A form control for `i-lucide-*` names — display plus picker, no free text.
+ * The trigger shows the chosen icon, or a placeholder; a click opens a popover
+ * with a search field and a grid of curated icons. `modelValue` is the icon
+ * name, an empty string meaning no icon.
  *
- * Bewusst kuratiert statt des kompletten Iconify-Satzes — das hält den Bundle
- * klein und braucht keine zusätzliche Datenquelle. Fehlt mal ein Icon, wird die
- * Liste unten einfach ergänzt.
+ * Curated rather than the full Iconify set, on purpose: it keeps the bundle
+ * small and needs no extra data source. When an icon is missing, the list
+ * below grows by a line.
  */
 const props = defineProps<{ modelValue: string }>()
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
@@ -20,7 +20,7 @@ const labels = useBaseKitLabels()
 const open = ref(false)
 const search = ref('')
 
-// Kuratierte, für Navigation/Inhalte typische Lucide-Icons.
+// Curated Lucide icons, the ones that come up in navigation and content.
 const ICONS: string[] = [
   'i-lucide-home', 'i-lucide-layout-dashboard', 'i-lucide-layout-grid', 'i-lucide-list',
   'i-lucide-file-text', 'i-lucide-file', 'i-lucide-files', 'i-lucide-folder',

package/app/components/BaseKitMarkdownEditor.vue

@@ -8,14 +8,16 @@ import { renderMarkdown } from '../utils/markdown'
 import { htmlToMarkdown, prepareHtmlToMarkdown } from '../utils/html-to-markdown'
 
 /**
- * WYSIWYG-Editor für den Text-Block. v-model ist ein **Markdown-String**.
+ * A WYSIWYG editor whose v-model is a **Markdown string**.
  *
- * Tiptap arbeitet intern mit HTML; die Brücke nach Markdown läuft über zwei
- * etablierte Bibliotheken statt eines Tiptap-Markdown-Plugins (versionsrobust):
- *   - Laden:    Markdown → HTML via markdown-it (`renderMarkdown`)
- *   - Speichern: HTML → Markdown via turndown
+ * Tiptap works in HTML internally. The bridge to Markdown runs through two
+ * established libraries rather than a Tiptap Markdown plugin, which survives
+ * version bumps better:
+ *   - loading: Markdown to HTML through markdown-it (`renderMarkdown`)
+ *   - saving:  HTML to Markdown through turndown
  *
- * Der Editor wird erst `onMounted` erzeugt (ProseMirror braucht DOM, SSR-sicher).
+ * The editor is created `onMounted` — ProseMirror needs a DOM, so this stays
+ * SSR-safe.
  */
 const props = defineProps<{ modelValue?: string | null }>()
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
@@ -29,7 +31,7 @@ function toMarkdown(html: string): string {
 }
 
 onMounted(() => {
-  // turndown im Browser nachladen — Details in html-to-markdown.ts.
+  // Pull turndown in on the client — details in html-to-markdown.ts.
   prepareHtmlToMarkdown()
   editor.value = new Editor({
     extensions: [
@@ -43,7 +45,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => editor.value?.destroy())
 
-// Externe Wertänderung übernehmen, ohne den Cursor zu stören (nur bei echtem Diff).
+// Take an outside change without disturbing the cursor — only on a real diff.
 watch(() => props.modelValue, (v) => {
   if (!editor.value) return
   if ((v ?? '') !== toMarkdown(editor.value.getHTML())) {
@@ -102,7 +104,7 @@ function isActive(name: string, attrs?: Record<string, unknown>): boolean {
 .md-content :deep(.ProseMirror code) { font-family: ui-monospace, monospace; font-size: 0.85em; background: var(--basekit-surface-muted, #f4f6fa); padding: 0.1em 0.35em; border-radius: 4px; }
 .md-content :deep(.ProseMirror a) { color: var(--basekit-accent, #2563eb); text-decoration: underline; }
 
-/* Dark-Mode: die hart hinterlegten Light-Fallbacks überschreiben. */
+/* Dark mode: override the hard-coded light fallbacks. */
 :where(.dark) .md-editor { background: #101828; border-color: #1f2937; }
 :where(.dark) .md-toolbar { background: #0b1220; border-color: #1f2937; }
 :where(.dark) .md-toolbar button { color: #e5e7eb; }

package/app/components/BaseKitPending.vue

@@ -1,35 +1,34 @@
 <script setup lang="ts">
 /**
- * Ladezustand für eine Seite oder einen Abschnitt.
+ * A loading state for a page or a section of one.
  *
- * Die Admin-Seiten holen ihre Daten in `onMounted` nach. Ohne Zwischenschritt
- * steht das Formular sofort da — mit leeren Feldern, die sich einen Wimpernschlag
- * später von selbst füllen. Wer schnell tippt, schreibt in ein Feld, das gleich
- * überschrieben wird; wer langsam liest, hält den Datensatz für leer.
+ * Pages that fetch in `onMounted` show their form immediately otherwise — with
+ * empty fields that fill themselves a blink later. Whoever types fast writes
+ * into a field that is about to be overwritten; whoever reads slowly takes the
+ * record for empty.
  *
- * Deshalb: erst ein Kreisel, dann der Inhalt. Der Kreisel sagt „gleich", das
- * leere Formular sagt „nichts da" — und das eine ist wahr, das andere nicht.
+ * Hence: spinner first, content after. The spinner says "in a moment", the
+ * empty form says "nothing here" — and only one of those is true.
  *
- * Zwei Wege, beide gültig:
+ * Two ways, both valid:
  *
  *   <BaseKitPending :pending="pending">
- *     <UForm …>   <!-- erscheint erst, wenn die Daten stehen -->
+ *     <UForm …>   <!-- appears once the data is in -->
  *   </BaseKitPending>
  *
  *   <BaseKitPending v-if="pending" />
  *
- * `label` nur setzen, wo der Vorgang länger dauert und einen Namen hat („Suche
- * läuft"). Bei einem gewöhnlichen Formular ist der Kreisel allein ehrlicher als
- * ein Wort, das niemand liest.
+ * Set `label` only where the operation takes a while and has a name ("Searching").
+ * On an ordinary form the bare spinner is more honest than a word nobody reads.
  */
 withDefaults(defineProps<{
-  /** Solange wahr, steht der Kreisel statt des Inhalts. */
+  /** While true, the spinner stands in for the content. */
   pending?: boolean
-  /** Optionale Beschriftung unter dem Kreisel. */
+  /** Optional label below the spinner. */
   label?: string
   /**
-   * Höhe des Bereichs. `page` für eine ganze Seite, `inline` für einen
-   * Abschnitt darin — sonst springt das Layout, wenn der Inhalt erscheint.
+   * Height of the area. `page` for a whole page, `inline` for a section within
+   * one — otherwise the layout jumps when the content arrives.
    */
   size?: 'page' | 'inline'
 }>(), {