viur-ui 0.0.1 → 0.0.3

package/README.md

@@ -1,79 +1,105 @@
 # viur-ui
 
-Official UI Components for Vue 3.
+Vue 3 components and request helpers for [ViUR](https://www.viur.dev).
 
-## Installation
+## Install
 
 ```bash
 npm install viur-ui
 ```
 
-**Requires:** Vue 3.3+, Vite with `@vitejs/plugin-vue`
+Peers: `vue` 3.3+, `pinia`, `vue-i18n`, `@viur/webawesome`, `@vueuse/core`, `vue-router`; for code/text bones also `codemirror`, `@codemirror/language-data`, `ckeditor5`, `@ckeditor/ckeditor5-vue`.
 
-## Development
-
-### Histoire (Component Stories)
+## Vite
 
-```bash
-# Neue Bones (WebAwesome) — http://localhost:6006
-npm run story:dev
+```js
+import vue from "@vitejs/plugin-vue"
 
-# Legacy-Vergleich: Alt (Shoelace) vs. Neu (WebAwesome) — http://localhost:6007
-npm run histoire:legacy
+export default {
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ["viur-ui"], // ships raw SFCs; pre-bundling duplicates module state in dev
+  },
+}
 ```
 
-### Tests
+Env: `VITE_API_URL`, `VITE_DEFAULT_RENDERER` (`json` | `vi`).
 
-```bash
-# Unit-Tests (Vitest, watch mode)
-npm run test
+## Vitest
 
-# Unit-Tests einmalig ausführen
-npm run test:run
-
-# Contract Tests (Playwright gegen laufenden Histoire-Server auf :6007)
-npm run test:contract
+```js
+test: {
+  server: { deps: { inline: ["viur-ui"] } }, // package .js files import .vue — Node can't load those
+}
 ```
 
-> Die Contract Tests starten den Legacy-Histoire-Server automatisch, falls er noch nicht läuft.
+## Setup
 
-**Ersteinrichtung Playwright:** Nach `npm install` oder nach einem Playwright-Update müssen die Browser einmalig installiert werden:
+```js
+import "viur-ui/src/webawesomeConfig.js"
+import { deTranslations, enTranslations } from "viur-ui"
+import { installViurForms } from "viur-ui/src/forms/install.js"
 
-```bash
-npx playwright install chromium
+app.use(createPinia())
+app.use(i18n)
+installViurForms(app) // also registers v-safe-html (DOMPurify) and $sanitizeHtml
 ```
 
-## Vite Configuration
+Translations: merge the package messages before your app's own (app keys win):
+
+```js
+i18n.global.mergeLocaleMessage("de", deTranslations)
+i18n.global.mergeLocaleMessage("en", enTranslations)
+```
 
-Add to your `vite.config.js` so Vite processes the `.vue` files from this package:
+`installViurForms` registers these global names (async), skipping names that are already taken: `ViForm`, `vi-form`, `vi-form-category`, `Bone`, `bone`, `bone-label`, `bone-actions`, `bone-single-entry`, `bone-multiple-list`, `bone-multiple-wrapper`, `bone-nested-wrapper`. The package imports its wrappers locally, so running alongside `@viur/vue-utils` (e.g. a global `Bone` from there) doesn't affect viur-ui forms — but your own templates resolve whichever component owns the name.
+
+## Safe HTML (recommended)
+
+Route every `v-html` through DOMPurify at compile time — your templates and viur-ui's, without changes:
 
 ```js
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue"
+import { sanitizeVHtml } from "viur-ui/src/vite/sanitizeVHtml.js"
 
 export default {
-  plugins: [vue()],
-  optimizeDeps: {
-    exclude: ['viur-ui']
-  }
+  plugins: [vue({ template: { compilerOptions: { directiveTransforms: { html: sanitizeVHtml } } } })],
 }
 ```
 
-## Usage
+`installViurForms(app)` provides the runtime sanitizer (`window.__sanitizeHtml`); call it before mounting. Without it, rendering throws rather than outputting unsanitized HTML. `v-safe-html` is then redundant.
 
-### Named import via index
+Not covered: SSR, `innerHTML` in JS, `h("div", { innerHTML })` — use `sanitizeHtml()` there. Don't decode HTML entities before sanitizing.
 
-```js
-import { HelloWorld } from 'viur-ui'
+## ViForm
+
+```vue
+<ViForm module="user" action="edit" :skelkey="key" />
 ```
 
-### Direct path import
+Props, state and exposed API: [`src/forms/ViForm.d.vue.ts`](./src/forms/ViForm.d.vue.ts).
+
+## API
 
 ```js
-import HelloWorld from 'viur-ui/src/components/HelloWorld.vue'
+import { useListFetch, useViewFetch, useEditFetch, useConfigStore, notify } from "viur-ui"
+```
+
+Full list: [`index.js`](./index.js), types: [`index.d.ts`](./index.d.ts).
+
+## Development
+
+```bash
+npm install && npm install --prefix example
+npm run story:dev   # Histoire, :6006
+npm run test:run    # Vitest
+npm run lint
 ```
 
-## Components
+## Release
+
+```bash
+npm version patch && git push --follow-tags
+```
 
-| Component | Description |
-|-----------|-------------|
-| `HelloWorld` | Renders "Hello World" |
+Published by [`release.yml`](./.github/workflows/release.yml) via npm Trusted Publishing. `-alpha` / `-beta` / `-rc` → matching dist-tag, else `latest`.

package/index.d.ts

@@ -31,8 +31,8 @@ export interface ListFetchOptions {
   immediate?: boolean
   cached?: boolean
   ttl?: number
-  /** Zusatz-Header der LIST-Requests (nicht der Struktur) — Objekt oder
-   *  Funktion, pro Request ausgewertet (z.B. X-VIUR-BONELIST). */
+  /** Extra headers for the LIST requests (not the structure) — object or
+   *  function, evaluated per request (e.g. X-VIUR-BONELIST). */
   headers?: Record<string, string> | (() => Record<string, string> | null) | null
 }
 
@@ -83,9 +83,9 @@ type ControllerFetchFn = (
 ) => UseFetchReturn<any>
 
 /**
- * Eigene Abfrage gegen einen Endpunkt eines Moduls bauen — die Grundlage der
- * `use*Fetch`-Helfer. `ctx` nimmt u. a. `renderer`, `version`, `query`
- * (zusätzlicher Query-String), `headers`, `immediate`.
+ * Build a custom query against an endpoint of a module — the basis of the
+ * `use*Fetch` helpers. `ctx` accepts, among others, `renderer`, `version`, `query`
+ * (additional query string), `headers`, `immediate`.
  */
 export declare function createControllerFetch(options?: {
   endpoint?: string
@@ -97,9 +97,9 @@ export declare function createControllerFetch(options?: {
 
 export declare const useViewFetch: ControllerFetchFn
 export declare const useStructureFetch: ControllerFetchFn
-/** Envelope v2 auspacken (v1-Antworten kommen unveraendert zurueck). */
+/** Unwrap envelope v2 (v1 responses are returned unchanged). */
 export declare function normalizeEnvelope(body: unknown): unknown
-/** Skel-Struktur glaetten — akzeptiert Dict- wie Paar-Listen-Form. */
+/** Flatten a skel structure — accepts both dict and pair-list form. */
 export declare function normalizeStructure(structure: unknown): Record<string, Record<string, unknown>>
 export declare const useAddFetch: ControllerFetchFn
 export declare const useEditFetch: ControllerFetchFn
@@ -345,7 +345,16 @@ export declare function skelDataToFormData(
 
 // ─── Translations ─────────────────────────────────────────────────────────────
 
-/** Message-Bäume der Paket-Komponenten — in die vue-i18n-Messages der App mergen
- *  (vue-i18n ist Voraussetzung; die Komponenten übersetzen mit t() ohne Fallbacks). */
+/** Message trees of the package components — merge into the app's vue-i18n messages
+ *  (vue-i18n is required; the components translate with t() without fallbacks). */
 export declare const deTranslations: Record<string, any>
 export declare const enTranslations: Record<string, any>
+
+// ─── Safe HTML ────────────────────────────────────────────────────────────────
+
+/** Sanitizes an HTML string with DOMPurify (scripts, event handlers and javascript: URLs removed). */
+export declare function sanitizeHtml(value: unknown): string
+/** Vue plugin: registers the `v-safe-html` directive and `$sanitizeHtml`. */
+export declare const safeHtml: import("vue").Plugin
+/** The `v-safe-html` directive for local registration (`import { vSafeHtml }` in `<script setup>`). */
+export declare const vSafeHtml: import("vue").ObjectDirective<HTMLElement, unknown>

package/index.js

@@ -37,10 +37,13 @@ export {
 // Theme (brand color from the configuration)
 export { useColorStore, hexToHsl, BRAND_LIGHTNESS } from "./src/theme/colorStore.js"
 
-// Translations (Komponenten dieses Pakets; in die vue-i18n-Instanz der App mergen —
-// vue-i18n ist Voraussetzung, die Komponenten übersetzen mit t() ohne Fallbacks)
+// Translations (components of this package; merge into the app's vue-i18n instance —
+// vue-i18n is required, the components translate with t() without fallbacks)
 export { default as deTranslations } from "./src/translations/de.js"
 export { default as enTranslations } from "./src/translations/en.js"
 
-// Anzeige von Bone-Werten (vormals aus dem Legacy-Paket)
+// Display of bone values
 export { default as boneLogic } from "./src/forms/bones/view/boneLogic.js"
+
+// Safe HTML rendering (DOMPurify): v-safe-html directive + sanitizeHtml()
+export { default as safeHtml, sanitizeHtml, vSafeHtml } from "./src/vite/safeHtml.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viur-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/viur-framework/viur-ui"
@@ -14,7 +14,9 @@
     "index.d.ts"
   ],
   "dependencies": {
+    "@vue/compiler-dom": "^3.3.0",
     "destr": "^2.0.5",
+    "dompurify": "^3.4.16",
     "json-editor-vue": "^0.18.1",
     "libphonenumber-js": "^1.12.41",
     "logics-js": "^0.4.1",
@@ -24,7 +26,6 @@
   "peerDependencies": {
     "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@codemirror/language-data": "^6.5.2",
-    "@viur/shoelace": ">=1.0.0-0",
     "@viur/webawesome": ">=0.10.0",
     "@vueuse/core": "^12.4.0",
     "ckeditor5": "^45.2.0",
@@ -35,20 +36,17 @@
     "vue-router": "^4.5.0"
   },
   "scripts": {
-    "icons": "npx wa-icons . ./src/public/assets/icons",
+    "icons": "npx wa-icons . ./stories/public/webawesome/assets/icons",
     "test": "vitest",
     "test:run": "vitest run",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
-    "histoire:legacy": "histoire dev --config histoire.legacy.config.js",
-    "test:contract": "playwright test --config tests/contract/playwright.config.ts",
     "lint": "eslint .",
     "format:check": "prettier --check .",
     "prepare": "lefthook install"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^1.0.0-beta.1",
-    "@playwright/test": "^1.59.1",
     "@vitejs/plugin-vue": "^6.0.6",
     "@vueuse/core": "^14.2.1",
     "eslint": "^10.2.1",
@@ -61,6 +59,8 @@
     "histoire": "^1.0.0-beta.1",
     "lefthook": "^2.1.6",
     "prettier": "^3.8.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.71.0",
     "vite": "^7.3.0",
     "vitest": "^4.1.4",
     "vue": "^3.5.32",

package/src/components/Browser/Browser.vue

@@ -125,46 +125,46 @@
 <script setup>
 import { useI18n } from "vue-i18n"
 import { ref, computed, provide, watch } from "vue"
-import { DataTable } from "../DataTable"
+import { DataTable } from "../DataTable/index.ts"
 import TreeNav from "./TreeNav.vue"
-import { createDragSession, dropModeFor, DRAG_SESSION } from "./dragSession"
+import { createDragSession, dropModeFor, DRAG_SESSION } from "./dragSession.ts"
 
 // --------------------------------------------------------------------------- //
-// Browser — Baum zur Navigation + DataTable als Liste                          //
+// Browser — tree for navigation + DataTable as list                            //
 // --------------------------------------------------------------------------- //
 //
-// GENERISCHER Kern: kennt kein ViUR. Die App (oder ViurBrowser.vue) liefert
-// Rootnodes, den Inhalt des aktuellen Ortes (`rows`, Ordner zuerst) und einen
-// Loader für die Baum-Ebenen — und bekommt Absichten als Events zurück:
-//   navigate  — anderer Ort gewählt (Baum, Breadcrumb, Doppelklick auf Ordner)
-//   open      — Doppelklick auf einen Eintrag (Leaf)
-//   move      — Drag & Drop zwischen Liste und Baum bzw. in eine Ordnerzeile
-//   reorder   — Umsortieren innerhalb der Liste (DataTable row-reorder, 1:1)
-//   upload    — Dateien aus dem OS in die Liste gezogen
-// Der Browser lädt selbst nichts und verschiebt nur die ANSICHT — Speichern
-// und Nachladen entscheidet die App (siehe ViurBrowser für die ViUR-Variante).
+// GENERIC core: knows nothing about ViUR. The app (or ViurBrowser.vue) supplies
+// rootnodes, the contents of the current location (`rows`, folders first) and a
+// loader for the tree levels — and gets intents back as events:
+//   navigate  — another location chosen (tree, breadcrumb, double-click on folder)
+//   open      — double-click on an entry (leaf)
+//   move      — drag & drop between list and tree, or into a folder row
+//   reorder   — reordering within the list (DataTable row-reorder, 1:1)
+//   upload    — files dragged from the OS into the list
+// The browser loads nothing itself and only moves the VIEW — saving and
+// reloading are up to the app (see ViurBrowser for the ViUR variant).
 
 const props = defineProps({
-  /** Wurzeln/Repositories: { key, name, icon? } */
+  /** Roots/repositories: { key, name, icon? } */
   rootNodes: { type: Array, default: () => [] },
-  /** Inhalt des aktuellen Ortes — Ordner zuerst (siehe rowKind). */
+  /** Contents of the current location — folders first (see rowKind). */
   rows: { type: Array, default: () => [] },
   columns: { type: Array, default: () => [] },
   rowKey: { type: String, default: "key" },
-  /** Ordnet eine Zeile ein: "node" (Ordner) oder "leaf". */
+  /** Classifies a row: "node" (folder) or "leaf". */
   rowKind: { type: Function, default: (row) => (row?.skelType === "node" ? "node" : "leaf") },
-  /** Kinder eines Baumknotens: (node) => Promise<BrowserNode[]> */
+  /** Children of a tree node: (node) => Promise<BrowserNode[]> */
   loadNodeChildren: { type: Function, default: null },
   orderField: { type: String, default: "sortindex" },
   selectable: { type: [String, Boolean], default: "multiple" },
   loading: { type: Boolean, default: false },
-  /** OS-Dateien annehmen (nur Event `upload`, kein Upload-Code hier). */
+  /** Accept OS files (only the `upload` event, no upload code here). */
   uploads: { type: Boolean, default: false },
   uploadHint: { type: [String, null], default: null },
   label: { type: String, default: "Browser" },
-  /** Cursor-Nachladen: null = aus, sonst „gibt es mehr?" (DataTable-Leiste). */
+  /** Cursor loading: null = off, otherwise "is there more?" (DataTable bar). */
   hasMore: { type: [Boolean, null], default: null },
-  /** Weitere DataTable-Props (withSearch, size, …). */
+  /** Further DataTable props (withSearch, size, …). */
   tableProps: { type: Object, default: () => ({}) },
 })
 
@@ -178,9 +178,9 @@ const treeEl = ref(null)
 const tableEl = ref(null)
 const listEl = ref(null)
 
-// ── Rootnodes & Ort ───────────────────────────────────────────────────────────
-// Der aktive Root ergibt sich aus dem Ort (Breadcrumb-Wurzel); ohne Ort gilt
-// der erste Rootnode. Ein Wechsel im Select navigiert auf dessen Wurzel.
+// ── Rootnodes & location ──────────────────────────────────────────────────────
+// The active root follows from the location (breadcrumb root); without a
+// location the first rootnode applies. A change in the select navigates to its root.
 const nodeIndex = ref(new Map()) // key → { node, parent }
 
 watch(
@@ -237,7 +237,7 @@ function onRootChange(value) {
 
 function onRowDoubleClick({ row, key }) {
   if (props.rowKind(row) === "node") {
-    // Ordner aus der Liste merken, damit der Breadcrumb seinen Namen kennt.
+    // Remember the folder from the list so the breadcrumb knows its name.
     rememberNodes([{ key, name: rowName(row), data: row }], location.value)
     navigateTo(key)
   } else {
@@ -250,11 +250,11 @@ function rowName(row) {
   return typeof value === "string" ? value : (value?.name ?? String(row?.[props.rowKey] ?? ""))
 }
 
-// ── Lokale Sicht auf die Liste ────────────────────────────────────────────────
-// Ein Zug ist rein clientseitig: Zeilen, die den aktuellen Ort VERLASSEN,
-// werden ausgeblendet; Knoten, die aus dem Baum HIERHER gezogen wurden, werden
-// eingefügt. `rows` (die Daten der App) bleiben unangetastet — neue Daten oder
-// ein Ortswechsel verwerfen die Überlagerung.
+// ── Local view of the list ────────────────────────────────────────────────────
+// A drag is purely client-side: rows that LEAVE the current location are
+// hidden; nodes dragged HERE from the tree are inserted. `rows` (the app's
+// data) stay untouched — new data or a change of location discards the
+// overlay.
 const movedAway = ref(new Set())
 const movedIn = ref([])
 
@@ -277,9 +277,9 @@ function resetLocalMoves() {
 watch(() => props.rows, resetLocalMoves)
 watch(location, resetLocalMoves)
 
-// ── Drag-Session (Liste ↔ Baum) ───────────────────────────────────────────────
+// ── Drag session (list ↔ tree) ────────────────────────────────────────────────
 const session = createDragSession((payload, target) => {
-  // In sich selbst oder den eigenen Teilbaum fällt nichts: Ziel verwerfen.
+  // Nothing drops into itself or its own subtree: discard the target.
   if (payload.keys.some((key) => String(key) === String(target.key))) return
   let parent = target.key != null ? nodeIndex.value.get(String(target.key))?.parent : null
   const seen = new Set()
@@ -289,14 +289,14 @@ const session = createDragSession((payload, target) => {
     parent = nodeIndex.value.get(String(parent))?.parent ?? null
   }
 
-  // Ansicht sofort nachziehen — ohne Reload.
+  // Update the view immediately — without reload.
   const targetIsCurrent = location.value != null && String(target.key) === String(location.value)
   if (targetIsCurrent) {
     const away = new Set(movedAway.value)
     for (const key of payload.keys) away.delete(String(key))
     movedAway.value = away
     if (payload.source === "tree") {
-      // Baumknoten in die offene Ebene gezogen: als Ordnerzeile einfügen.
+      // Tree node dragged into the open level: insert as a folder row.
       const rows = payload.rows.map((row) => row?.data ?? row).filter(Boolean)
       movedIn.value = [...movedIn.value, ...rows]
     }
@@ -305,15 +305,15 @@ const session = createDragSession((payload, target) => {
     movedIn.value = movedIn.value.filter(
       (row) => !payload.keys.some((key) => String(key) === String(row[props.rowKey]))
     )
-    // Was den Ort verlassen hat, ist auch nicht mehr ausgewählt.
+    // Whatever left the location is no longer selected either.
     selectedKeys.value = selectedKeys.value.filter(
       (selected) => !payload.keys.some((key) => String(key) === String(selected))
     )
   }
 
-  // Auch der BAUM zieht lokal nach: verschobene ORDNER wechseln (oder
-  // verlassen) ihre geladene Ebene — ohne Reload. Blätter tauchen im
-  // Navigations-Baum nicht auf und brauchen nichts.
+  // The TREE also updates locally: moved FOLDERS change (or leave) their
+  // loaded level — without reload. Leaves don't appear in the navigation
+  // tree and need nothing.
   for (const row of payload.rows) {
     const raw = row?.data ?? row
     const isNode = payload.source === "tree" || props.rowKind(raw) === "node"
@@ -321,7 +321,7 @@ const session = createDragSession((payload, target) => {
     const key = raw?.[props.rowKey] ?? row?.key
     const node = { key, name: nodeIndex.value.get(String(key))?.node?.name ?? rowName(raw), data: raw }
     treeEl.value?.moveNode?.(node, target.key)
-    rememberNodes([node], target.key) // Breadcrumb-Elternkette aktuell halten
+    rememberNodes([node], target.key) // keep the breadcrumb parent chain up to date
   }
 
   emit("move", {
@@ -334,11 +334,11 @@ const session = createDragSession((payload, target) => {
 })
 provide(DRAG_SESSION, session)
 
-// Die Liste ist selbst Drop-Ziel — in beide Richtungen:
-// • Die MITTE einer Ordnerzeile heißt „hinein"; die Ränder (davor/dahinter)
-//   überlässt sie der internen Umsortierung der Tabelle.
-// • Kommt der Zug aus dem BAUM, ist auch der Rest der Liste (Leaf-Zeilen,
-//   freie Fläche) ein Ziel: „in den gerade geöffneten Ordner".
+// The list itself is a drop target — in both directions:
+// • The MIDDLE of a folder row means "into"; the edges (before/after) are
+//   left to the table's internal reordering.
+// • If the drag comes from the TREE, the rest of the list (leaf rows,
+//   empty area) is a target too: "into the currently open folder".
 session.register({
   id: "list",
   el: () => listEl.value,
@@ -355,7 +355,7 @@ session.register({
   },
 })
 
-/** Zug aus dem Baum zielt auf die offene Ebene → die ganze Liste markieren. */
+/** Drag from the tree targets the open level → highlight the whole list. */
 const listIsDropTarget = computed(
   () =>
     session.state.over?.container === "list" &&
@@ -363,7 +363,7 @@ const listIsDropTarget = computed(
     String(session.state.over?.key) === String(location.value)
 )
 
-// ── Upload-Dropzone (native, nur für OS-Dateien) ─────────────────────────────
+// ── Upload dropzone (native, only for OS files) ──────────────────────────────
 const fileDragDepth = ref(0)
 const hasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files")
 function onFileDragEnter(event) {
@@ -396,15 +396,15 @@ defineExpose({ table: tableEl, tree: treeEl, session, navigateTo })
   flex-direction: column;
   min-block-size: 0;
   block-size: 100%;
-  /* Gerahmt wie das Listen-Widget (DataTable `appearance="outlined"`): EIN
-     Kasten um Baum und Liste. Die Tabelle darin bleibt deshalb rahmenlos
-     (appearance="plain" unten), sonst stünden zwei Rahmen ineinander. */
+  /* Framed like the list widget (DataTable `appearance="outlined"`): ONE
+     box around tree and list. The table inside therefore stays frameless
+     (appearance="plain" below), otherwise there would be two nested frames. */
   background-color: var(--wa-color-surface-default, #fff);
   border: var(--wa-border-width-s, 1px) solid var(--wa-color-surface-border, #ddd);
   border-radius: var(--wa-border-radius-m, 0.5rem);
   overflow: hidden;
-  /* Eine Textgröße für den ganzen Kasten — dieselbe wie in der Tabelle
-     (.vi-dt), damit Breadcrumb und Baum nicht größer wirken als die Liste. */
+  /* One text size for the whole box — the same as in the table
+     (.vi-dt), so breadcrumb and tree don't look larger than the list. */
   font-size: var(--wa-font-size-s, 0.875rem);
 }
 .vi-browser-head {
@@ -413,7 +413,7 @@ defineExpose({ table: tableEl, tree: treeEl, session, navigateTo })
   gap: var(--wa-space-s, 0.5rem);
   padding: var(--wa-space-2xs, 0.25rem) var(--wa-space-xs, 0.5rem);
   border-block-end: 1px solid var(--wa-color-surface-border, #ddd);
-  /* Abgesetzt wie der Kopf der Tabelle (--dt-header-background). */
+  /* Set off like the table header (--dt-header-background). */
   background-color: var(--wa-color-surface-lowered, #f4f4f5);
 }
 .vi-browser-roots {
@@ -447,14 +447,14 @@ defineExpose({ table: tableEl, tree: treeEl, session, navigateTo })
 .vi-browser-body {
   flex: 1;
   min-block-size: 0;
-  /* <wa-split-panel> IST das Grid (display: grid am Host). Seine Zeile ist von
-     sich aus inhaltshoch und läuft damit über die feste Höhe hinaus — die
-     Tabelle wäre dann so hoch wie ihre Zeilen und würde die Seite verlängern
-     statt in sich zu scrollen. Eine Zeile über die volle Höhe bindet die
-     Panels an die Fläche. Gilt für die waagerechte Aufteilung, die hier fest
-     eingestellt ist. */
+  /* <wa-split-panel> IS the grid (display: grid on the host). Its row is
+     content-sized by itself and thus overflows the fixed height — the
+     table would then be as tall as its rows and lengthen the page instead
+     of scrolling within itself. A single full-height row binds the panels
+     to the area. Applies to the horizontal split, which is fixed
+     here. */
   grid-template-rows: 100%;
-  /* Seitenleiste nicht kleiner als 10rem, Liste behält mindestens die Hälfte */
+  /* Sidebar no smaller than 10rem, list keeps at least half */
   --min: 10rem;
   --max: 50%;
 }