viur-ui 0.0.1 → 0.0.2

package/src/components/Browser/TreeNav.vue

@@ -51,20 +51,20 @@
 <script setup>
 import { useI18n } from "vue-i18n"
 import { ref, computed, watch, inject, onMounted, onBeforeUnmount } from "vue"
-import { DRAG_SESSION } from "./dragSession"
+import { DRAG_SESSION } from "./dragSession.ts"
 
-// Schlanker NAVIGATIONS-Baum: nur Knoten (Name, Icon, Pfeil), Kinder werden
-// über `loadChildren` nachgeladen. Bewusst keine DataTable — Navigation ist
-// kein Datengrid. Als Drop-Ziel registriert er sich an der Drag-Session des
-// Browsers (immer "inside": in den getroffenen Ordner).
+// Lean NAVIGATION tree: only nodes (name, icon, arrow), children are loaded
+// via `loadChildren`. Deliberately no DataTable — navigation is not a data
+// grid. As a drop target it registers with the browser's drag session
+// (always "inside": into the folder that was hit).
 
 const props = defineProps({
-  /** Wurzeln (z. B. die Rootnodes) — { key, name, icon?, hasChildren? } */
+  /** Roots (e.g. the rootnodes) — { key, name, icon?, hasChildren? } */
   roots: { type: Array, default: () => [] },
-  /** Kinder eines Knotens holen: (node) => Promise<BrowserNode[]> */
+  /** Fetch the children of a node: (node) => Promise<BrowserNode[]> */
   loadChildren: { type: Function, default: null },
   label: { type: [String, null], default: null },
-  /** Container-Id in der Drag-Session */
+  /** Container id in the drag session */
   containerId: { type: String, default: "tree" },
 })
 const location = defineModel({ type: [String, Number, null], default: null })
@@ -76,8 +76,8 @@ const rootEl = ref(null)
 const expanded = ref(new Set())
 const loading = ref(new Set())
 const children = ref(new Map()) // String(key) → BrowserNode[]
-// Lokal eingefügte Knoten für noch nicht geladene Ebenen: werden beim ersten
-// Laden der Ebene hineingemerged (der Server kann kurz hinterherhinken).
+// Locally inserted nodes for levels not loaded yet: merged in when the level
+// is first loaded (the server may lag behind briefly).
 const pendingInserts = ref(new Map()) // String(key) → BrowserNode[]
 const bucketOf = (key) => children.value.get(String(key))
 const activeKey = ref(null)
@@ -105,7 +105,7 @@ watch(
   { immediate: true }
 )
 
-/** Die Wurzeln (Rootnodes) sind immer ausgeklappt — ohne ersten Klick. */
+/** The roots (rootnodes) are always expanded — without a first click. */
 async function expandRoots() {
   for (const root of props.roots ?? []) {
     if (expanded.value.has(root.key) || root.hasChildren === false) continue
@@ -128,9 +128,9 @@ async function fetchChildren(node, force = false) {
   loading.value = new Set(loading.value).add(node.key)
   try {
     const result = (await props.loadChildren(node)) ?? []
-    // Lokal (per Drag & Drop) hierher verschobene Knoten hineinmergen — der
-    // Server kann den Zug noch nicht kennen. Was er schon liefert, ist damit
-    // angekommen und braucht keinen Merker mehr.
+    // Merge in nodes moved here locally (via drag & drop) — the server may
+    // not know about the move yet. Whatever it already returns has thus
+    // arrived and no longer needs a marker.
     const bucketKey = String(node.key)
     const pending = pendingInserts.value.get(bucketKey) ?? []
     const merged = [...result]
@@ -168,7 +168,7 @@ async function toggle(node) {
   try {
     await fetchChildren(node)
   } catch {
-    return // Ebene nicht ladbar → zubleiben
+    return // level can't be loaded → stay collapsed
   }
   if ((bucketOf(node.key) ?? []).length) {
     next.add(node.key)
@@ -180,15 +180,15 @@ function open(node) {
   activeKey.value = node.key
   location.value = node.key
   emit("navigate", node)
-  void toggle(node) // aufklappen gehört zum Navigieren dazu; zuklappen macht nur der Pfeil
+  void toggle(node) // expanding is part of navigating; only the arrow collapses
 }
 
 /**
- * Knoten LOKAL aus seiner bisherigen Ebene nehmen und — wenn die Ziel-Ebene
- * schon geladen ist — dort einhängen. Kein Request: eine noch nicht geladene
- * Ziel-Ebene holt ihn beim ersten Aufklappen ohnehin frisch vom Server.
- * `node` darf ein voller BrowserNode sein (für Knoten, die der Baum selbst
- * noch nicht kennt, z. B. Ordnerzeilen aus der Liste) oder nur ein Schlüssel.
+ * Take a node LOCALLY out of its previous level and — if the target level is
+ * already loaded — attach it there. No request: a target level that isn't
+ * loaded yet fetches it fresh from the server on first expand anyway.
+ * `node` may be a full BrowserNode (for nodes the tree itself doesn't know
+ * yet, e.g. folder rows from the list) or just a key.
  */
 function moveNode(node, targetKey) {
   const key = typeof node === "object" && node !== null ? node.key : node
@@ -201,15 +201,15 @@ function moveNode(node, targetKey) {
     next.set(bucketKey, [...(next.get(bucketKey) ?? []), entry])
     children.value = next
   } else {
-    // Ziel-Ebene noch nie geladen: vormerken — beim ersten Laden wird der
-    // Knoten hineingemerged (siehe fetchChildren). Kein Request nötig.
+    // Target level never loaded: queue it — on first load the node is
+    // merged in (see fetchChildren). No request needed.
     const next = new Map(pendingInserts.value)
     next.set(bucketKey, [...(next.get(bucketKey) ?? []), entry])
     pendingInserts.value = next
   }
 }
 
-/** Knoten lokal aus allen geladenen Ebenen entfernen; liefert ihn zurück. */
+/** Remove a node locally from all loaded levels; returns it. */
 function removeNode(key) {
   let removed = null
   const next = new Map(children.value)
@@ -233,7 +233,7 @@ function removeNode(key) {
   return removed
 }
 
-/** Ebene eines Knotens verwerfen und neu holen (z. B. nach einem Move). */
+/** Discard a node's level and re-fetch it (e.g. after a move). */
 function reloadChildren(key) {
   const entry = visibleEntries.value.find((candidate) => String(candidate.node.key) === String(key))
   if (!entry) return Promise.resolve()
@@ -247,7 +247,7 @@ function reset() {
   void expandRoots()
 }
 
-// ── Tastatur (WAI-ARIA tree) ──────────────────────────────────────────────────
+// ── Keyboard (WAI-ARIA tree) ──────────────────────────────────────────────────
 function onKeydown(event) {
   const entries = visibleEntries.value
   const index = entries.findIndex((entry) => entry.node.key === activeKey.value)
@@ -292,12 +292,12 @@ function onKeydown(event) {
   event.preventDefault()
 }
 
-// ── Drag-Quelle: Knoten in die Liste (oder andere Knoten) ziehen ─────────────
-// Erst ab einer kleinen Bewegungsschwelle wird aus dem Klick ein Zug — Klicks
-// zum Navigieren bleiben Klicks.
+// ── Drag source: drag nodes into the list (or onto other nodes) ───────────────
+// Only past a small movement threshold does a click become a drag — clicks
+// for navigating stay clicks.
 function onPointerDown(node, event) {
   if (!session || event.button !== 0) return
-  // Wurzeln (Rootnodes) sind nicht verschiebbar.
+  // Roots (rootnodes) can't be moved.
   if (props.roots.some((root) => String(root.key) === String(node.key))) return
   const startX = event.clientX
   const startY = event.clientY
@@ -322,7 +322,7 @@ function onPointerDown(node, event) {
   window.addEventListener("pointerup", up)
 }
 
-// ── Drop-Ziel der Drag-Session ────────────────────────────────────────────────
+// ── Drop target of the drag session ───────────────────────────────────────────
 let unregister = null
 let hoverTimer = null
 let hoverKey = null
@@ -336,7 +336,7 @@ onMounted(() => {
       const row = hit.closest?.("[data-tree-key]")
       if (!row) return null
       const key = row.dataset.treeKey
-      // Über einem zugeklappten Ordner verweilen klappt ihn auf.
+      // Hovering over a collapsed folder expands it.
       if (hoverKey !== key) {
         hoverKey = key
         clearTimeout(hoverTimer)

package/src/components/Browser/ViurBrowser.d.vue.ts

@@ -1,57 +1,57 @@
 import type { DefineComponent } from "vue"
-import type { RowKey } from "../DataTable/types"
-import type { BrowserMovePayload, BrowserUploadPayload } from "./types"
+import type { RowKey } from "../DataTable/types.ts"
+import type { BrowserMovePayload, BrowserUploadPayload } from "./types.ts"
 
-/** Props von ViurBrowser.vue (siehe defineProps dort). */
+/** Props of ViurBrowser.vue (see defineProps there). */
 export interface ViurBrowserProps {
-  /** Modulname bzw. Punkt-Pfad ("file", "shop.category"). */
+  /** Module name or dotted path ("file", "shop.category"). */
   module: string
-  /** Renderer der Requests; Standard: VITE_DEFAULT_RENDERER. */
+  /** Renderer for the requests; default: VITE_DEFAULT_RENDERER. */
   renderer?: string | null
-  /** Fester Wurzelknoten; ohne ihn wird `/listRootNodes` befragt. */
+  /** Fixed root node; without it, `/listRootNodes` is queried. */
   rootNode?: string | Record<string, unknown> | null
-  /** Spalten; ohne Angabe aus der Struktur der Blätter abgeleitet. */
+  /** Columns; if omitted, derived from the leaf structure. */
   columns?: unknown[] | null
-  /** Nur diese Bones als Spalten (bei abgeleiteten Spalten). */
+  /** Only these bones as columns (for derived columns). */
   bones?: string[] | null
-  /** Zusätzliche Parameter für die Listen-Requests. */
+  /** Additional parameters for the list requests. */
   params?: Record<string, unknown>
-  /** Feld der festen Reihenfolge (Standard "sortindex"). */
+  /** Field holding the fixed order (default "sortindex"). */
   orderField?: string
-  /** Dateien in die Ebene hochladen erlauben (Datei-Module). */
+  /** Allow uploading files into the level (file modules). */
   uploads?: boolean
-  /** Wird an die DataTable durchgereicht. */
+  /** Passed through to the DataTable. */
   tableProps?: Record<string, unknown>
 }
 
-/** Ereignisse als `on*`-Props, damit `@open` & Co. im Template typen. */
+/** Events as `on*` props so that `@open` & co. are typed in the template. */
 export interface ViurBrowserEmitProps<R = Record<string, unknown>> {
-  /** Doppelklick auf ein BLATT (Ordner navigieren stattdessen hinein). */
+  /** Double-click on a LEAF (folders navigate into themselves instead). */
   onOpen?: (payload: { row: R; key: RowKey }) => void
-  /** Verschieben gespeichert. */
+  /** Move saved. */
   onMoved?: (payload: { keys: RowKey[]; target: RowKey | null; parentChanged?: boolean }) => void
   onMoveFailed?: (payload: { keys: RowKey[]; target: RowKey | null; error: unknown }) => void
-  /** Uploads fertig (nur mit `uploads`). */
+  /** Uploads finished (only with `uploads`). */
   onUploaded?: (payload: { files: unknown[]; target: RowKey | null }) => void
   onUploadFailed?: (payload: { file: File; error: unknown }) => void
-  /** v-model:location — aktueller Ort (Schlüssel des Knotens, null = Wurzel). */
+  /** v-model:location — current location (key of the node, null = root). */
   onUpdateLocation?: (value: RowKey | null) => void
   /** v-model:selectedKeys */
   onUpdateSelectedKeys?: (value: RowKey[]) => void
 }
 
-/** Was ViurBrowser per defineExpose freigibt. */
+/** What ViurBrowser exposes via defineExpose. */
 export interface ViurBrowserApi<R = Record<string, unknown>> {
-  /** Der generische Browser darunter. */
+  /** The generic browser underneath. */
   browser: unknown
-  /** Inhalt des aktuellen Ortes (Knoten UND Blätter, je mit `skelType`). */
+  /** Contents of the current location (nodes AND leaves, each with `skelType`). */
   tree: {
     data: { value: R[] }
     structure: { value: { node?: Record<string, unknown>; leaf?: Record<string, unknown> } }
     isFetching: { value: boolean }
     [key: string]: unknown
   }
-  /** Ort neu vom Server holen. */
+  /** Re-fetch the location from the server. */
   refresh: () => void
 }
 

package/src/components/Browser/ViurBrowser.vue

@@ -37,28 +37,29 @@
 
 <script setup>
 import { ref, computed, watch } from "vue"
+import { useI18n } from "vue-i18n"
 import Browser from "./Browser.vue"
 import { useTreeFetch, useListFetch, useListRootNodesFetch, useMoveFetch, uploadFile } from "../../request/index.js"
-import { columnsFromStructure } from "../DataTable/viurColumns"
+import { columnsFromStructure } from "../DataTable/viurColumns.ts"
 
-// Dünner ViUR-Wrapper um den generischen Browser: `module` rein, fertig.
-// Rootnodes über /listRootNodes, Inhalt des Ortes über useTreeFetch (Nodes +
-// Leaves), Baum-Ebenen über list(skelType=node), Verschieben über /move,
-// Uploads über uploadFile. Gespeichert wird pro Zeile; die Ansicht verschiebt
-// der Browser lokal — nachgeladen wird nur der Ort selbst nach Uploads.
+// Thin ViUR wrapper around the generic browser: pass in `module`, done.
+// Rootnodes via /listRootNodes, contents of the location via useTreeFetch
+// (nodes + leaves), tree levels via list(skelType=node), moving via /move,
+// uploads via uploadFile. Saving happens per row; the browser moves the view
+// locally — only the location itself is reloaded, after uploads.
 
 const props = defineProps({
   module: { type: String, required: true },
   renderer: { type: String, default: null },
-  /** Fester Rootnode; ohne ihn wird /listRootNodes befragt. */
+  /** Fixed rootnode; without it, /listRootNodes is queried. */
   rootNode: { type: [String, Object], default: null },
-  /** Spalten; ohne Angabe aus der viewLeafSkel-Struktur abgeleitet. */
+  /** Columns; if omitted, derived from the viewLeafSkel structure. */
   columns: { type: Array, default: null },
-  /** Nur diese Bones als Spalten (bei abgeleiteten Spalten). */
+  /** Only these bones as columns (for derived columns). */
   bones: { type: Array, default: null },
   /**
-   * Anzeigesprache mehrsprachiger Bones ("de", "en" oder "*" für alle mit der
-   * primären vorn) — bestimmt Anzeige UND lokale Sortierung der Spalten.
+   * Display language of multilingual bones ("de", "en" or "*" for all, with the
+   * primary one first) — determines display AND local sorting of the columns.
    */
   language: { type: String, default: null },
   primaryLanguage: { type: String, default: null },
@@ -68,6 +69,7 @@ const props = defineProps({
   tableProps: { type: Object, default: () => ({}) },
 })
 const emit = defineEmits(["open", "moved", "move-failed", "uploaded", "upload-failed"])
+const { t } = useI18n()
 
 const browserEl = ref(null)
 const location = defineModel("location", { type: [String, Number, null], default: null })
@@ -75,24 +77,24 @@ const selectedKeys = defineModel("selectedKeys", { type: Array, default: () => [
 
 const ctx = computed(() => (props.renderer ? { renderer: props.renderer } : {}))
 
-// Seitengröße der Cursor-Leiste = ViUR-Parameter `limit` (core ≥ 3.9; das
-// frühere `amount` gibt es dort nicht mehr). Sie gilt vom ERSTEN Fetch an:
-// eine per tableProps vorgegebene pageSize (oder ein `limit` in den params)
-// bestimmt schon den Initial-Request; sonst 30 (ViUR-Standard). Angezeigt
-// wird immer die tatsächliche Fetch-Größe.
+// Page size of the cursor bar = ViUR parameter `limit` (core ≥ 3.9; the
+// former `amount` no longer exists there). It applies from the FIRST fetch:
+// a pageSize given via tableProps (or a `limit` in the params) already
+// determines the initial request; otherwise 30 (ViUR default). The actual
+// fetch size is always what's displayed.
 const limit = ref(Math.min(99, Number(props.params?.limit ?? props.tableProps?.pageSize ?? 30) || 30))
 const baseParams = () => ({ ...props.params, orderby: props.orderField, limit: limit.value })
-// Für jeden Fetch nach dem Setup gilt: IMMER mit dem aktuellen Ort (Rootnode
-// oder navigierter Ordner) als parententry — sonst listet der Server quer
-// über den ganzen Baum.
+// Every fetch after setup ALWAYS uses the current location (rootnode or
+// navigated folder) as parententry — otherwise the server lists across the
+// whole tree.
 const currentParams = () => ({
   ...baseParams(),
   ...(location.value != null ? { parententry: location.value } : {}),
 })
 const mergedTableProps = computed(() => ({
-  // Keine Suche im Browser: navigiert wird über Baum und Breadcrumb, gesucht
-  // wird in der Listen-Ansicht des Moduls. Wer sie doch will, setzt
-  // `tableProps.withSearch` (lokal sinnvoll nur, wenn alles geladen ist:
+  // No search in the browser: navigation happens via tree and breadcrumb,
+  // searching in the module's list view. Anyone who wants it anyway sets
+  // `tableProps.withSearch` (locally only useful once everything is loaded:
   // `allLoaded`).
   ...props.tableProps,
   pageSize: limit.value,
@@ -110,7 +112,7 @@ const rootNodeList = computed(() => {
   return Array.isArray(list) ? list.map((entry) => ({ key: entry.key, name: entry.name ?? entry.key })) : []
 })
 
-// ── Inhalt des aktuellen Ortes (Nodes + Leaves) ───────────────────────────────
+// ── Contents of the current location (nodes + leaves) ─────────────────────────
 const tree = useTreeFetch(props.module, {
   params: baseParams(),
   parententry: location.value ?? undefined,
@@ -120,9 +122,9 @@ const tree = useTreeFetch(props.module, {
 const rows = computed(() => tree.data.value)
 const rowKind = (row) => (row?.skelType === "node" ? "node" : "leaf")
 
-// Ohne expliziten Ort ist die ROOTNODE der Ort: sobald sie bekannt ist, wird
-// sie zum Standard-`parententry` für alles — Listen-Fetch, Drops auf die
-// freie Fläche, Reorder und Uploads. Gefetcht wird nie ohne parententry.
+// Without an explicit location, the ROOTNODE is the location: as soon as it is
+// known, it becomes the default `parententry` for everything — list fetch,
+// drops onto the empty area, reorder and uploads. Never fetch without parententry.
 watch(
   rootNodeList,
   (roots) => {
@@ -139,8 +141,8 @@ watch(
   { immediate: true }
 )
 
-// Alles geladen (tree.complete)? Dann laufen Sortierung, Suche und
-// Spaltenfilter nur noch LOKAL auf dem vollständigen Datensatz.
+// Everything loaded (tree.complete)? Then sorting, search and column
+// filters run only LOCALLY on the complete dataset.
 const allLoaded = computed(() => tree.complete.value)
 
 const effectiveColumns = computed(() => {
@@ -151,15 +153,16 @@ const effectiveColumns = computed(() => {
     ...(props.language ? { language: props.language } : {}),
     ...(props.primaryLanguage ? { primaryLanguage: props.primaryLanguage } : {}),
     local: allLoaded.value,
+    boolTexts: [t("bones.bool.true"), t("bones.bool.false")],
   })
-  return derived.length ? derived : [{ id: "name", label: "Name" }]
+  return derived.length ? derived : [{ id: "name", label: t("browser.name") }]
 })
 
 function onNavigate() {
   selectedKeys.value = []
 }
 
-// ── Cursor-Nachladen: 1 / 5 / 10 Seiten oder alles ───────────────────────────
+// ── Cursor loading: 1 / 5 / 10 pages or everything ───────────────────────────
 async function onLoadMore({ pages }) {
   if (pages === "all") {
     await tree.nextAll().catch(() => null)
@@ -171,14 +174,14 @@ async function onLoadMore({ pages }) {
   }
 }
 
-/** Neue Seitengröße: aktuellen Ort mit geändertem `limit` neu holen. */
+/** New page size: re-fetch the current location with the changed `limit`. */
 function onPageSizeChange({ pageSize }) {
   if (!pageSize || pageSize === limit.value) return
   limit.value = Math.min(99, pageSize)
   void tree.filter(currentParams()).catch(() => null)
 }
 
-// ── Verschieben (Drop auf Baum/Ordner) & Umsortieren ─────────────────────────
+// ── Moving (drop on tree/folder) & reordering ────────────────────────────────
 async function saveMove(row, parentNode, sortindex, kind = rowKind(row)) {
   const data = {
     skelType: kind,
@@ -191,7 +194,7 @@ async function saveMove(row, parentNode, sortindex, kind = rowKind(row)) {
     await result.execute()
     return result.data.value
   } catch (error) {
-    // Fehler trägt der Aufrufer aus (onMove/onReorder fangen und melden).
+    // The caller handles errors (onMove/onReorder catch and report).
     throw error
   }
 }
@@ -199,17 +202,17 @@ async function saveMove(row, parentNode, sortindex, kind = rowKind(row)) {
 async function onMove({ rows: movedRows, target, keys, source }) {
   try {
     for (const row of movedRows) {
-      // Aus dem BAUM kommen BrowserNodes ({ key, name, data }) — das Skel
-      // steckt in `data`, und ein Baum-Eintrag ist immer ein Node. Aus der
-      // LISTE kommen Skels mit skelType.
+      // From the TREE come BrowserNodes ({ key, name, data }) — the skel
+      // lives in `data`, and a tree entry is always a node. From the
+      // LIST come skels with skelType.
       const raw = row?.data ?? row
       await saveMove(raw, target, undefined, source === "tree" ? "node" : rowKind(raw))
     }
     emit("moved", { keys, target })
-    // Ansicht (Liste UND Baum) ist bereits lokal verschoben — kein Reload.
+    // View (list AND tree) has already been moved locally — no reload.
   } catch (error) {
     emit("move-failed", { keys, target, error })
-    // Der lokale Stand (Liste UND Baum) ist dann falsch — einmal frisch holen.
+    // The local state (list AND tree) is then wrong — fetch it fresh once.
     void refresh().catch(() => null)
   }
 }
@@ -236,15 +239,15 @@ async function onUpload({ files, target }) {
   }
   if (results.length) {
     emit("uploaded", { files: results, target })
-    // Neue Einträge gibt es nur vom Server — den aktuellen Ort einmal holen.
+    // New entries only come from the server — fetch the current location once.
     void tree.execute().catch(() => null)
   }
 }
 
-// ── Baum-Ebenen (nur Nodes) ───────────────────────────────────────────────────
+// ── Tree levels (nodes only) ──────────────────────────────────────────────────
 async function loadNodeChildren(node) {
   const list = useListFetch(props.module, {
-    // Baum-Ebenen sind Navigation: möglichst vollständig (ViUR-Maximum 99).
+    // Tree levels are navigation: as complete as possible (ViUR maximum 99).
     params: { skelType: "node", parententry: node.key, orderby: props.orderField, limit: 99 },
     ...(props.renderer ? { renderer: props.renderer } : {}),
     immediate: false,
@@ -258,9 +261,9 @@ async function loadNodeChildren(node) {
 }
 
 /**
- * Alles neu laden: die Liste des aktuellen Ortes UND den Navigations-Baum.
- * Der Baum verwirft seine geladenen Ebenen und klappt die Rootnodes wieder
- * auf (frisch vom Server); offene Unterebenen laden beim Aufklappen neu.
+ * Reload everything: the list of the current location AND the navigation tree.
+ * The tree discards its loaded levels and expands the rootnodes again
+ * (fresh from the server); open sublevels reload when expanded.
  */
 function refresh() {
   browserEl.value?.tree?.reset?.()

package/src/components/Browser/dragSession.ts

@@ -1,49 +1,49 @@
 import { reactive } from "vue"
 import type { InjectionKey } from "vue"
-import type { RowKey } from "../DataTable/types"
+import type { RowKey } from "../DataTable/types.ts"
 
 // --------------------------------------------------------------------------- //
-// Drag-Session — gemeinsames Ziehen zwischen Panels (Liste ↔ Baum)            //
+// Drag session — shared dragging between panels (list ↔ tree)                 //
 // --------------------------------------------------------------------------- //
 //
-// Die DataTable zieht Zeilen mit Zeiger-Ereignissen (kein HTML5-D&D). Damit
-// eine Zeile auch AUSSERHALB der Tabelle fallen gelassen werden kann (auf einen
-// Ordner im Navigations-Baum oder eine Ordnerzeile der Liste), stellt der
-// Browser diese Session per provide() bereit:
+// The DataTable drags rows with pointer events (no HTML5 D&D). So that a row
+// can also be dropped OUTSIDE the table (onto a folder in the navigation tree
+// or a folder row of the list), the browser provides this session via
+// provide():
 //
-//   • Die QUELLE (DataTable) meldet Beginn/Bewegung/Ende des Zugs.
-//   • Jedes PANEL registriert sich als Container mit einer `targetFor`-Funktion,
-//     die ein DOM-Element unter dem Zeiger in ein Drop-Ziel übersetzt (oder
-//     null, wenn dort nichts fallen gelassen werden kann).
-//   • Beim Loslassen über einem Ziel liefert `drop()` Nutzlast + Ziel an den
-//     Halter der Session (Browser) — die Quelle überspringt dann ihre interne
-//     Verschiebung.
+//   • The SOURCE (DataTable) reports start/move/end of the drag.
+//   • Every PANEL registers itself as a container with a `targetFor` function
+//     that translates a DOM element under the pointer into a drop target (or
+//     null if nothing can be dropped there).
+//   • On release over a target, `drop()` hands payload + target to the
+//     holder of the session (browser) — the source then skips its internal
+//     move.
 //
-// Die Session ist bewusst DOM-basiert (elementFromPoint statt Ziel-Rechtecke
-// vorab zu vermessen): Panels scrollen und virtualisieren unabhängig.
+// The session is deliberately DOM-based (elementFromPoint instead of measuring
+// target rectangles up front): panels scroll and virtualize independently.
 
 export interface DragPayload<R = Record<string, unknown>> {
   keys: RowKey[]
   rows: R[]
-  /** Container-Id der Quelle (z. B. "list"). */
+  /** Container id of the source (e.g. "list"). */
   source: string
 }
 
 export interface DropTarget {
-  /** Container-Id des Panels, in dem das Ziel liegt. */
+  /** Container id of the panel the target lies in. */
   container: string
-  /** Schlüssel des Zielknotens; null = Wurzelebene des Containers. */
+  /** Key of the target node; null = root level of the container. */
   key: RowKey | null
   mode: "inside" | "before" | "after"
 }
 
 export interface DragContainer {
   id: string
-  /** Wurzelelement des Panels — nur Treffer darin zählen. */
+  /** Root element of the panel — only hits inside it count. */
   el: () => HTMLElement | null
   /**
-   * Element unter dem Zeiger → Drop-Ziel (oder null). `y`/`x` erlauben
-   * Zonen-Entscheidungen (before/inside/after) anhand der Trefferposition.
+   * Element under the pointer → drop target (or null). `y`/`x` allow
+   * zone decisions (before/inside/after) based on the hit position.
    */
   targetFor: (hit: Element, x: number, y: number) => DropTarget | null
 }
@@ -56,9 +56,9 @@ export interface DragSession<R = Record<string, unknown>> {
   }
   register(container: DragContainer): () => void
   start(payload: DragPayload<R>): void
-  /** Hit-Test unter (x, y); `hint` übergeht elementFromPoint (Tests). */
+  /** Hit test at (x, y); `hint` bypasses elementFromPoint (tests). */
   update(x: number, y: number, hint?: Element | null): DropTarget | null
-  /** Ziel eingelöst: liefert Nutzlast+Ziel und beendet die Session. */
+  /** Target redeemed: returns payload+target and ends the session. */
   drop(): { payload: DragPayload<R>; target: DropTarget } | null
   cancel(): void
 }
@@ -69,9 +69,9 @@ export function createDragSession<R = Record<string, unknown>>(
   onDrop?: (payload: DragPayload<R>, target: DropTarget) => void
 ): DragSession<R> {
   const containers = new Map<string, DragContainer>()
-  // `reactive` entpackt generische Typen (R wird zu UnwrapRefSimple<R>), womit
-  // der Zustand nicht mehr auf DragSession<R> passt. Die Nutzlast ist reine
-  // Datenweitergabe — deshalb hier die Form festschreiben.
+  // `reactive` unwraps generic types (R becomes UnwrapRefSimple<R>), so the
+  // state no longer matches DragSession<R>. The payload is pure data
+  // pass-through — hence the shape is pinned down here.
   const state = reactive({
     active: false,
     payload: null as DragPayload<R> | null,
@@ -124,7 +124,7 @@ export function createDragSession<R = Record<string, unknown>>(
   return { state, register, start, update, drop, cancel }
 }
 
-/** Zonen-Helfer: Position im Element → before / inside / after. */
+/** Zone helper: position within the element → before / inside / after. */
 export function dropModeFor(hitRect: DOMRect, y: number, insideOnly = false): "inside" | "before" | "after" {
   if (insideOnly) return "inside"
   const offset = (y - hitRect.top) / Math.max(1, hitRect.height)

package/src/components/Browser/index.ts

@@ -1,4 +1,4 @@
-// Öffentliche Oberfläche des Browser-Widgets.
+// Public surface of the browser widget.
 export { default as Browser } from "./Browser.vue"
 export { default as ViurBrowser } from "./ViurBrowser.vue"
 export { default as TreeNav } from "./TreeNav.vue"
@@ -10,5 +10,5 @@ export {
   type DragPayload,
   type DragContainer,
   type DropTarget,
-} from "./dragSession"
-export type { BrowserNode, BrowserMovePayload, BrowserUploadPayload } from "./types"
+} from "./dragSession.ts"
+export type { BrowserNode, BrowserMovePayload, BrowserUploadPayload } from "./types.ts"