nuxt-ui-basekit 0.1.1 → 0.2.1

package/README.md

@@ -1,14 +1,16 @@
 # nuxt-ui-basekit
 
-Basis-Komponenten für Nuxt 4 auf [Nuxt UI](https://ui.nuxt.com) — als Nuxt-Layer.
-Tabellen, Reiter, Diagramme, Auswahl-Dialoge, Leerzustände: die Bausteine, die
-in jedem Verwaltungs-Frontend wieder anfallen und die Nuxt UI nicht mitbringt.
+Base components for Nuxt 4 on top of [Nuxt UI](https://ui.nuxt.com) — as a Nuxt
+layer. Tables, tabs, charts, pickers, empty states: the parts that come up again
+in every admin frontend and that Nuxt UI does not ship.
 
-Das Paket kennt keine Anwendung. Es hat keine Stores außer einem für die
-Rückfrage, keine Endpunkte, keine Übersetzungsschlüssel und keine Farben, die
-zu einer Marke gehören. Was es anzeigt, bekommt es hereingereicht.
+The package knows nothing about your application. It has no stores beyond the
+one behind the confirmation dialog, no endpoints, no translation keys and no
+colours that belong to a brand. Whatever it displays is handed in.
 
-## Einbinden
+**[→ Every component with a screenshot](https://github.com/McGo/nuxt-ui-basekit/blob/main/COMPONENTS.md)**
+
+## Install
 
 ```bash
 npm i -D nuxt-ui-basekit
@@ -21,30 +23,39 @@ export default defineNuxtConfig({
 })
 ```
 
-`@nuxt/ui`, `nuxt` und `pinia` sind Peers, sie stehen im Konsumenten und
-werden nicht mitgeliefert. Die Komponenten sind danach global verfügbar, ohne
-Import.
+`@nuxt/ui`, `nuxt` and `pinia` are peers — they live in the consumer and are not
+bundled along. The components are globally available afterwards, no import.
+
+Nuxt UI itself still needs its stylesheet, the same as in any project that uses
+it:
+
+```css
+/* app/assets/css/main.css, referenced from nuxt.config.ts */
+@import "tailwindcss";
+@import "@nuxt/ui";
+```
 
-## Was drin ist
+## What is in it
 
-| Gruppe | Komponenten |
+| Group | Components |
 |---|---|
-| Struktur | `BaseKitTabs` · `BaseKitSettingRow` · `BaseKitEmptyState` · `BaseKitChoiceCard` · `BaseKitPending` |
-| Listen | `BaseKitDataTable` · `BaseKitStatTile` |
-| Auswahl | `BaseKitRecordPicker` · `BaseKitIconPicker` · `BaseKitFileUpload` |
-| Wege | `BaseKitBackLink` · `BaseKitViewLink` |
-| Rückfrage | `BaseKitConfirmModal` + `useConfirm()` |
+| Structure | `BaseKitTabs` · `BaseKitSettingRow` · `BaseKitEmptyState` · `BaseKitChoiceCard` · `BaseKitPending` |
+| Lists | `BaseKitDataTable` · `BaseKitStatTile` |
+| Pickers | `BaseKitRecordPicker` · `BaseKitIconPicker` · `BaseKitFileUpload` |
+| Navigation | `BaseKitBackLink` · `BaseKitViewLink` |
+| Confirmation | `BaseKitConfirmModal` + `useConfirm()` |
 | Text | `BaseKitMarkdownEditor` |
-| Diagramme | `BaseKitChartBars` · `-Columns` · `-Donut` · `-Meter` · `-Figure` |
+| Charts | `BaseKitChartBars` · `-Columns` · `-Donut` · `-Meter` · `-Figure` |
 
-Jede Komponente trägt ihre Erklärung im Kopf der Datei — was sie tut, wann sie
-die richtige Wahl ist und wann nicht.
+Each component carries its reasoning in the file header — what it does, when it
+is the right choice and when it is not. [COMPONENTS.md](https://github.com/McGo/nuxt-ui-basekit/blob/main/COMPONENTS.md) has the
+short version of each, with a screenshot.
 
-## Beschriftungen und Sprache
+## Labels and language
 
-Die Komponenten rufen kein `vue-i18n` auf und kennen keine
-Übersetzungsschlüssel. Ohne Zutun rendern sie deutsche Voreinstellungen; wer
-eigene Texte oder mehrere Sprachen führt, reicht sie über ein Plugin herein:
+The components never call `vue-i18n` and know no translation keys. Left alone
+they render English defaults; anyone with their own wording or several
+languages hands them in through a plugin:
 
 ```ts
 // plugins/basekit.ts
@@ -65,95 +76,98 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-Zwei Dinge, die dabei Zeit kosten können:
+`locale` is a BCP-47 tag and drives `Intl` — thousands separators, percentages
+and date formats in the charts follow it.
+
+Two things that can cost an afternoon:
 
-- **`useI18n()` gehört nicht ins Plugin.** Es verlangt einen
-  Komponenten-Setup-Kontext und wirft dort `MUST_BE_CALL_SETUP_TOP`
-  (Fehlercode 26). Beim serverseitigen Rendern heißt das: 500 auf jeder Seite.
-  Die Instanz kommt über `nuxtApp.$i18n`, und zwar erst beim Lesen des
-  `computed` — dann ist auch die Plugin-Reihenfolge gleichgültig.
-- **Einzelne Beschriftungen** bleiben als Prop überschreibbar. Die Tabelle
-  trägt nur, was ohne Angabe herauskommt.
+- **`useI18n()` does not belong in the plugin.** It requires a component setup
+  context and throws `MUST_BE_CALL_SETUP_TOP` (error 26) there. Under server-side
+  rendering that means a 500 on every page. Take the instance from
+  `nuxtApp.$i18n`, and only when the `computed` is read — then plugin order
+  stops mattering too.
+- **Individual labels stay overridable as props.** The table above only decides
+  what comes out when nothing is passed.
 
-## Farben
+## Colours
 
-Die Komponenten greifen ausschließlich auf `--basekit-*` zu. Die
-Voreinstellungen stehen in `app/assets/css/basekit.css` und werden vom Layer
-geladen. Ein Projekt mit eigenem Theme legt sie in seinem eigenen Stylesheet
-darauf:
+The components only ever reach for `--basekit-*`. The defaults live in
+`app/assets/css/basekit.css` and are loaded by the layer. A project with its own
+theme puts its values on top, in its own stylesheet:
 
 ```css
 :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);
 }
 ```
 
-Die fünf Diagrammfarben sind als Satz geprüft — Lichtheitsband, Chroma und
-Abstand zwischen Nachbarn, auch unter Farbfehlsichtigkeit. Wer sie
-überschreibt, sollte das als Satz tun und nicht einzeln; wer mehr als fünf
-Reihen hat, fasst zusammen, statt eine sechste Farbe zu erfinden.
+The five chart colours are validated as a set — lightness band, chroma and the
+distance between neighbours, colour vision deficiency included. Override them as
+a set rather than one at a time; if you have more than five series, group them
+instead of inventing a sixth colour.
 
-## Entwickeln
+## Development
 
 ```bash
 npm install
-npx nuxi prepare     # erzeugt .nuxt/tsconfig.json, sonst laufen die Tests nicht
+npx nuxi prepare     # writes .nuxt/tsconfig.json, without it the tests fail
 npm test
 npm run lint         # nuxi typecheck
 ```
 
-`tests/grenze.test.ts` hält fest, was das Paket nicht darf: keine Importe
-außerhalb des Pakets, keine Abhängigkeit, die nicht in der `package.json`
-steht, kein `vue-i18n`, keine Übersetzungsschlüssel, keine fremden
-CSS-Variablen. Der Test ist der Grund, warum sich das Paket überhaupt
-herausschneiden ließ — ohne ihn wäre die Trennung nach dem dritten Feature
-wieder zu.
+`tests/grenze.test.ts` pins down what the package is not allowed to do: no
+imports from outside the package, no dependency that is missing from
+`package.json`, no `vue-i18n`, no translation keys, no foreign CSS variables.
+That test is the reason the package could be carved out at all — without it the
+separation would have closed up again by the third feature.
+
+`playground/` is a small Nuxt app that pulls the layer in the way a consumer
+would. It is the place to look at a component, and the source of the
+screenshots in [COMPONENTS.md](https://github.com/McGo/nuxt-ui-basekit/blob/main/COMPONENTS.md):
+
+```bash
+cd playground && npm install && npm run dev
+```
 
 ### Lockfile
 
-Wer auf macOS oder Windows eine Abhängigkeit hinzufügt, muss das Lockfile
-anschließend einmal unter Linux/x64 nachziehen — sonst fehlen die
-plattformspezifischen Optional-Pakete (`@emnapi/*` und Verwandtschaft), und
-`npm ci` im Workflow bricht ab:
+Adding a dependency on macOS or Windows means pulling the lockfile through
+Linux/x64 afterwards — otherwise the platform-specific optional packages
+(`@emnapi/*` and relatives) are missing and `npm ci` fails in the workflow:
 
 ```bash
 docker run --rm --platform linux/amd64 -v "$PWD:/app" -w /app \
   node:24 npm install --package-lock-only
 ```
 
-Die Architektur ist nicht gleichgültig: auf Apple Silicon läuft der Container
-ohne `--platform` als arm64, und dann fehlen genau die x64-Varianten, die der
-Runner braucht. Danach lokal einmal `npm ci`, das holt die eigenen Binaries
-zurück.
-
-## Veröffentlichen
+The architecture matters: on Apple Silicon the container runs as arm64 without
+`--platform`, and then exactly the x64 variants the runner needs are still
+missing. Run `npm ci` locally afterwards to get your own binaries back.
 
-Zwei Workflows unter `.github/workflows`. `pruefen` läuft auf `main` und in
-jedem Pull Request und führt `nuxi prepare`, `nuxi typecheck` und die Tests
-aus. `veroeffentlichen` hängt an einem Tag `vX.Y.Z`, prüft noch einmal und
-schiebt das Paket dann nach npmjs.com. Ein Build-Schritt fehlt, weil der Layer
-als Rohquelle ausgeliefert wird und Nuxt ihn im Konsumenten übersetzt.
+## Releasing
 
-Eine neue Fassung:
+Two workflows under `.github/workflows`. `pruefen` runs on `main` and on every
+pull request and does `nuxi prepare`, `nuxi typecheck` and the tests.
+`veroeffentlichen` hangs off a `vX.Y.Z` tag, checks again and publishes to
+npmjs.com. There is no build step: the layer ships as raw source and Nuxt
+compiles it in the consumer.
 
 ```bash
-npm version patch        # hebt die package.json und setzt den Tag
+npm version patch        # bumps package.json and sets the tag
 git push --follow-tags
 ```
 
-Der Job vergleicht den Tag mit der Zahl in der `package.json` und bricht ab,
-wenn die beiden auseinanderlaufen. Veröffentlicht wird mit `--provenance`:
-auf npmjs steht dann nachprüfbar, aus welchem Commit das Paket stammt.
-
-Dafür braucht das Repo ein Secret `NPM_TOKEN` — ein Automation-Token aus dem
-npm-Konto, einzutragen unter *Settings → Secrets and variables → Actions*.
+The job compares the tag against the number in `package.json` and stops if they
+disagree. Publishing runs over OIDC through npm's trusted publishing — no token
+in the repository — and with `--provenance`, so npmjs records which commit the
+package was built from.
 
-## Herkunft
+## Origin
 
-Entstanden in einem Verwaltungs-Frontend und dort über Monate in Gebrauch,
-bevor es hier ein eigenes Paket wurde.
+Grown inside an admin frontend and in use there for months before it became a
+package of its own.
 
-## Lizenz
+## License
 
-MIT — siehe [LICENSE](LICENSE).
+MIT — see [LICENSE](LICENSE).

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"