nuxt-ui-basekit 0.1.1 → 0.2.1

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'
 }>(), {

package/app/components/BaseKitRecordPicker.vue

@@ -3,32 +3,32 @@ import { computed, ref } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'
 
 /**
- * Auswahl eines Datensatzes über (potenziell mehrere) Modelle — die Auswahl
- * läuft in einem Modal, das per „Auswählen" / „Ändern" aufgeht. Im Modal ist
- * die Liste nach Text UND Typ filterbar.
+ * Picks a record across one or several models. The choosing happens in a modal
+ * that opens through "Select" or "Change"; inside, the list filters by text
+ * AND by type.
  *
- * - **Nichts gewählt** → Button „Auswählen".
- * - **Gewählt** → Titel der Auswahl (Link zum Bearbeiten des Inhalts) + Typ-
- *   Badge + Button „Ändern".
+ * - **Nothing selected** — a "Select" button.
+ * - **Selected** — the title of the choice, linking to its edit form, plus a
+ *   type badge and a "Change" button.
  *
- * Modell-agnostisch — die `items` liefert der Aufrufer. `v-model` = `value`
- * der Option (oder `null`).
+ * Model-agnostic: the caller supplies `items`. `v-model` is the option's
+ * `value`, or `null`.
  */
 export interface BaseKitRecordOption {
   value: number
   label: string
-  /** Typ-Badge (bereits übersetzt). */
+  /** Type badge — already in the caller's language. */
   type?: string
-  /** Zusatz rechts in der Liste (z. B. Slug). */
+  /** Extra detail on the right of the list, a slug for instance. */
   hint?: string
-  /** Interner Link zum Bearbeiten des Inhalts. */
+  /** Internal link to the record's edit form. */
   editHref?: string
 }
 
 const props = withDefaults(defineProps<{
   modelValue?: number | null
   items: BaseKitRecordOption[]
-  /** Titel des Auswahl-Modals. */
+  /** Title of the picker modal. */
   title?: string
 }>(), {
   modelValue: null,
@@ -72,7 +72,7 @@ function choose(item: BaseKitRecordOption): void {
 
 <template>
   <div>
-    <!-- Gewählt: Titel (Bearbeiten-Link) + Typ-Badge + Ändern -->
+    <!-- Selected: title as an edit link, type badge, change button -->
     <div v-if="selected" class="flex items-center gap-2">
       <NuxtLink
         v-if="selected.editHref"
@@ -93,7 +93,7 @@ function choose(item: BaseKitRecordOption): void {
       </UButton>
     </div>
 
-    <!-- Nichts gewählt: Auswählen -->
+    <!-- Nothing selected: the select button -->
     <UButton v-else color="neutral" variant="subtle" icon="i-lucide-list" @click="openModal">
       {{ labels.select }}
     </UButton>

package/app/components/BaseKitSettingRow.vue

@@ -1,35 +1,36 @@
 <script setup lang="ts">
 /**
- * Setting-Row — Pattern für eine einzelne Einstellung in einer Settings-Card.
+ * One setting inside a settings card.
  *
  *  ┌──────────────────────────────────────────────────────┐
- *  │ Titel                                       [Action] │
- *  │ Beschreibungstext (optional, mehrzeilig)             │
+ *  │ Title                                       [Control] │
+ *  │ Description (optional, may wrap)                     │
  *  └──────────────────────────────────────────────────────┘
  *
- * Titel + Action stehen auf einer Zeile (Action rechts, Titel links).
- * Die Beschreibung steht darunter, linksbündig zum Titel.
+ * Title and control share a line, title left and control right. The
+ * description sits underneath, aligned with the title.
  *
- * Verwendung:
+ * Usage:
  *
- *   <BaseKitSettingRow title="Benachrichtigungen" description="E-Mails und Push erhalten">
+ *   <BaseKitSettingRow title="Notifications" description="Receive email and push">
  *     <USwitch v-model="notifications" />
  *   </BaseKitSettingRow>
  *
- *   <BaseKitSettingRow title="Sprache" description="Wird beim Speichern übernommen">
+ *   <BaseKitSettingRow title="Language" description="Applied on save">
  *     <USelect v-model="staged" :items="locales" />
  *   </BaseKitSettingRow>
  *
- * Der `meta`-Slot nimmt eine Zusatzzeile unter der Beschreibung auf — Bestand,
- * Sperrgrund, Hinweis. Sie steht bewusst getrennt von `description`: das Feld
- * trägt den einen erklärenden Satz, und eine Zahl ist keine Erklärung.
+ * The `meta` slot takes an extra line below the description — a count, a
+ * reason something is locked, a hint. Kept apart from `description` on
+ * purpose: that field carries the one explaining sentence, and a number is not
+ * an explanation.
  *
- *   <BaseKitSettingRow title="E-Learning" description="Kurse und Nachweise.">
+ *   <BaseKitSettingRow title="E-learning" description="Courses and certificates.">
  *     <USwitch v-model="on" />
- *     <template #meta><span>4 Kurse</span></template>
+ *     <template #meta><span>4 courses</span></template>
  *   </BaseKitSettingRow>
  *
- * Mehrere Rows in einer Card werden über Tailwind divider getrennt:
+ * Several rows in one card are separated with a Tailwind divider:
  *
  *   <UCard>
  *     <div class="divide-y divide-default">

package/app/components/BaseKitStatTile.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 /**
- * Eine Zahl mit Beschriftung — die richtige Form für einen einzelnen Wert.
+ * A number with a label — the right shape for a single value.
  *
- * Ein Balkendiagramm mit genau einem Balken sagt nicht mehr als die Zahl
- * selbst und kostet die vierfache Fläche. Deshalb sind Bestand und
- * Handlungsliste Kacheln und keine Diagramme.
+ * A bar chart with exactly one bar says no more than the number itself and
+ * costs four times the space. Which is why counts and to-do figures are tiles
+ * here and not charts.
  *
- * `tone` färbt nur, wenn die Zahl über null liegt: „0 offene Vorgänge" ist
- * keine Warnung, sondern der Normalzustand.
+ * `tone` only colours when the number is above zero: "0 open items" is not a
+ * warning, it is the normal state.
  */
 import { computed } from 'vue'
 import { useChartFormat } from '../composables/useChartPalette'
@@ -33,8 +33,8 @@ const valueClass = computed(() => {
   return props.tone === 'alert' ? 'text-error' : 'text-highlighted'
 })
 
-/** Der Punkt neben der Zahl trägt dieselbe Aussage wie die Farbe — die Farbe
- *  allein wäre für eine Rot-Grün-Schwäche keine. */
+/** The dot next to the number carries the same message as the colour — the
+ *  colour alone would carry none under a red-green deficiency. */
 const flagged = computed(() => props.value > 0 && props.tone === 'alert')
 </script>
 

package/app/components/BaseKitTabs.vue

@@ -3,43 +3,43 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from '#imports'
 
 /**
- * Tab-Gruppierung — Pattern, um auf einer Seite mehrere Bereiche (z.B.
- * Einstellungs-Gruppen) zu gliedern, gerade bei vielen Feldern.
+ * Splits a page into sections — settings groups, say, and anything else that
+ * gets unwieldy once there are many fields.
  *
- * Generisch: pro Tab ein benannter Slot (= dessen `key`). Aktiver Tab optional
- * über `v-model` steuerbar, sonst der erste.
+ * One named slot per tab, keyed by its `key`. The active tab is optionally
+ * driven through `v-model`; without it the first one wins.
  *
  *   <BaseKitTabs :items="[
- *     { key: 'general', label: 'Allgemein', icon: 'i-lucide-settings' },
- *     { key: 'access',  label: 'Zugriff',   icon: 'i-lucide-lock' },
+ *     { key: 'general', label: 'General', icon: 'i-lucide-settings' },
+ *     { key: 'access',  label: 'Access',  icon: 'i-lucide-lock' },
  *   ]">
  *     <template #general> … </template>
  *     <template #access>  … </template>
  *   </BaseKitTabs>
  *
- * Deep-Linking: mit `hash-nav` ist der aktive Tab über den URL-Hash adressierbar
- * (`…/seite#access`). Beim Laden gewinnt ein passender Hash; ein Tab-Wechsel
- * schreibt den Hash via `router.replace` (kein History-Spam). Bei mehreren
- * Tab-Gruppen auf einer Seite nur EINE mit `hash-nav` betreiben.
+ * Deep linking: with `hash-nav` the active tab becomes addressable through the
+ * URL fragment (`…/page#access`). On load a matching hash wins; switching tabs
+ * writes the hash through `router.replace`, so the history stays clean. With
+ * several tabsets on one page, run only ONE of them with `hash-nav`.
  *
- * Der Hash greift bewusst erst `onMounted`: der Server sieht ihn gar nicht
- * (Browser schicken ihn nicht mit), und ein davon abweichender erster Render
- * im Client zerlegt die Hydration — dann stand die Markierung auf dem einen
- * Tab und der Inhalt kam vom anderen. Aus demselben Grund läuft er über
- * `select()`, damit ein gebundenes `v-model` den Tab aus dem Hash mitbekommt.
+ * The hash is applied `onMounted` on purpose. The server never sees it —
+ * browsers do not send it — and a first client render that differs from the
+ * server's tears the hydration apart: the marker sat on one tab while the
+ * content came from another. For the same reason it goes through `select()`,
+ * so a bound `v-model` learns about the tab from the hash.
  *
- * A11y: tablist/tab/tabpanel-Rollen, Pfeiltasten links/rechts wechseln.
+ * Accessibility: tablist/tab/tabpanel roles, left and right arrow keys switch.
  *
- * Layout-Konvention: die Tab-Leiste NICHT in eine `UCard` wrappen — Tabs +
- * Inhalt liegen direkt auf der Seite. Feinere Struktur je Tab-Inhalt (Gruppen,
- * Fieldset, einzelne Cards) nach Bedarf INNERHALB des jeweiligen Slots.
+ * Layout convention: do NOT wrap the tab bar in a `UCard` — tabs and content
+ * sit directly on the page. Finer structure per tab (groups, fieldsets,
+ * individual cards) belongs INSIDE the respective slot.
  */
 const props = withDefaults(defineProps<{
-  /** Tab-Definitionen (Reihenfolge = Anzeigereihenfolge). */
+  /** Tab definitions; their order is the display order. */
   items: Array<{ key: string, label: string, icon?: string }>
-  /** Aktiver Tab-Key (v-model). Ohne Bindung wird der erste Tab aktiv. */
+  /** Key of the active tab (v-model). Unbound, the first tab becomes active. */
   modelValue?: string
-  /** Aktiven Tab über den URL-Hash adressierbar machen (`#<key>`). */
+  /** Make the active tab addressable through the URL fragment (`#<key>`). */
   hashNav?: boolean
 }>(), {
   modelValue: undefined,
@@ -53,7 +53,7 @@ const emit = defineEmits<{
 const route = useRoute()
 const router = useRouter()
 
-/** Gültiger Tab-Key aus dem aktuellen URL-Hash, sonst null. */
+/** A valid tab key from the current URL fragment, otherwise null. */
 function keyFromHash(): string | null {
   if (!props.hashNav) return null
   const key = String(route.hash ?? '').replace(/^#/, '')
@@ -62,36 +62,35 @@ function keyFromHash(): string | null {
 
 const active = ref<string>(props.modelValue ?? props.items[0]?.key ?? '')
 
-/** Hat der Nutzer selbst gewählt? Dann gewinnt seine Wahl über den Hash. */
+/** Did the user choose themselves? Then their choice beats the hash. */
 const picked = ref(false)
 
-// Hash erst im Client anwenden — siehe Kommentar oben.
+// Apply the hash on the client only — see the comment at the top.
 onMounted(() => applyHash())
 
-// v-model rein: Auswahl von außen übernehmen.
+// v-model coming in: take the selection from outside.
 watch(() => props.modelValue, (next) => {
   if (next !== undefined && next !== active.value) active.value = next
 })
 
-// Hash ändert sich (Direktlink, Zurück/Vorwärts) → passenden Tab aktivieren.
+// The hash changed — a direct link, back or forward — so activate that tab.
 watch(() => route.hash, () => {
   const key = keyFromHash()
   if (key !== null && key !== active.value) active.value = key
 })
 
-// Items wechseln. Zwei Fälle: der Tab aus dem Hash taucht erst jetzt auf
-// (rechte-abhängige Tabs kommen mit dem Bootstrap nach) — dann übernehmen,
-// solange der Nutzer nicht selbst gewählt hat. Sonst: fällt der aktive Tab
-// weg, zurück auf den ersten.
+// The items changed. Two cases: the tab named in the hash only appears now —
+// permission-dependent tabs arrive late — in which case take it, as long as
+// the user has not chosen themselves. Otherwise, if the active tab disappears,
+// fall back to the first.
 watch(() => props.items, (items) => {
   if (!picked.value && applyHash()) return
   if (!items.some(i => i.key === active.value)) active.value = items[0]?.key ?? ''
 })
 
 /**
- * Tab aus dem Hash übernehmen, falls er zu einem Item passt und nicht schon
- * aktiv ist. Zählt nicht als Nutzer-Wahl. Liefert `true`, wenn gewechselt
- * wurde.
+ * Take the tab from the hash if it matches an item and is not already active.
+ * Does not count as a user choice. Returns `true` when it switched.
  */
 function applyHash(): boolean {
   const key = keyFromHash()

package/app/components/BaseKitViewLink.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 /**
- * Weg vom Bearbeiten-Formular zur Ansicht derselben Sache.
+ * The way from an edit form to the public view of the same thing.
  *
- * Die Gegenrichtung gab es längst: In der Ansicht stehen die Kontext-Aktionen
- * („Bearbeiten", „Inhalt pflegen"). Der Rückweg fehlte — wer eine Rubrik
- * bearbeitet hatte, kam nur über den Umweg Übersicht → Frontend → Rubrik
- * dorthin, um das Ergebnis zu sehen.
+ * The opposite direction had existed for a long time: the view carries the
+ * context actions ("Edit", "Manage content"). The way back was missing —
+ * having edited a record, the only route to seeing the result was the detour
+ * through the overview and the front end.
  *
- * Steht neben dem Rücksprung im Seitenkopf, an derselben Stelle wie dort:
- * Erst die Ansicht, dann der Rücksprung zur Liste — die Reihenfolge folgt der
- * Häufigkeit, mit der man beides braucht.
+ * Sits next to the back link in the page header, in the same spot: first the
+ * view, then the way back to the list. The order follows how often each is
+ * needed.
  *
- * **Nur zeigen, wenn es die Ansicht gibt.** Ein neu angelegter Datensatz hat
- * noch keine, und ein Link ins Leere ist schlechter als kein Link. Deshalb
- * gehört das `v-if` an die Aufrufstelle, wo bekannt ist, ob gespeichert wurde.
+ * **Only render it when the view exists.** A freshly created record has none,
+ * and a link into nowhere is worse than no link. That is why the `v-if`
+ * belongs at the call site, where it is known whether anything was saved.
  */
 import { computed } from 'vue'
 import { useBaseKitLabels } from '../composables/useBaseKit'
@@ -21,9 +21,9 @@ import { useBaseKitLabels } from '../composables/useBaseKit'
 const props = withDefaults(defineProps<{
   to: string
   /**
-   * Öffnet die Ansicht in einem neuen Reiter. Voreingestellt, weil man beim
-   * Bearbeiten meist nachsehen und weiterarbeiten will — nicht wechseln und
-   * die ungespeicherten Änderungen verlieren.
+   * Opens the view in a new tab. On by default, because while editing you
+   * usually want to look and carry on — not switch away and lose the unsaved
+   * changes.
    */
   newTab?: boolean
   label?: string

package/app/components/charts/BaseKitChartBars.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 /**
- * Waagerechte Balken für nominale Kategorien — Rollen, Typen, Herkünfte.
+ * Horizontal bars for nominal categories — roles, types, sources.
  *
- * Waagerecht, weil die Beschriftung aus Namen besteht und Namen unter einer
- * senkrechten Säule schräg gestellt werden müssten. Alle Balken tragen
- * **dieselbe** Farbe: die Kategorien haben keine eigene Ordnung, und ein
- * Farbverlauf nach Größe würde die Länge ein zweites Mal erzählen, statt eine
- * neue Auskunft zu geben.
+ * Horizontal because the labels are names, and names under a vertical column
+ * would have to be tilted. Every bar carries the **same** colour: the
+ * categories have no order of their own, and a gradient by size would tell the
+ * length a second time instead of adding anything.
  */
 import { computed, ref } from 'vue'
 import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
@@ -19,7 +18,7 @@ interface BarItem {
 
 const props = withDefaults(defineProps<{
   items: BarItem[]
-  /** Sichtbare Zeilen; der Rest wandert in „Weitere". */
+  /** Rows shown; the rest is folded into a "more" row. */
   limit?: number
   moreLabel?: string
   emptyLabel?: string
@@ -65,8 +64,8 @@ const color = baseKitChartColor(0)
       >
         <span class="truncate text-sm text-muted" :title="row.label">{{ row.label }}</span>
 
-        <!-- Die Spur ist die Fläche, der Balken die Aussage; deshalb trägt die
-             Spur nur eine Andeutung und keine zweite Farbe. -->
+        <!-- The track is the surface, the bar is the statement; which is why
+             the track only hints and carries no second colour. -->
         <span class="h-2.5 w-full rounded-full bg-elevated">
           <span
             class="block h-2.5 rounded-full transition-opacity"