viur-ui 0.0.1

package/src/components/DataTable/useGridNavigation.ts

@@ -0,0 +1,193 @@
+// Tastaturnavigation nach dem ARIA-Grid-Muster: Das ganze Gitter ist EIN
+// Tab-Stop, innerhalb wandert ein Roving-Tabindex über die Zellen.
+//
+// Die Composable kennt nur Koordinaten (Zeile -1 = Kopfzeile, 0..n-1 = Body)
+// und ruft für alles Fachliche Callbacks der Komponente.
+
+import { nextTick, reactive, type Ref } from "vue"
+
+export interface GridNavigationOptions {
+  rowCount: () => number
+  colCount: () => number
+  /** Zeilen pro Seite für Bild auf/ab. */
+  pageRows?: () => number
+  /** Enter auf einer Kopfzelle. */
+  onHeaderActivate?: (col: number, shift: boolean) => void
+  /** Enter auf einer Datenzelle. */
+  onCellActivate?: (row: number, col: number) => void
+  /** Leertaste auf einer Zeile. */
+  onToggleSelect?: (row: number) => void
+  /** Shift + ↑/↓ */
+  onExtendSelection?: (row: number) => void
+  /** Strg + A */
+  onSelectAll?: () => void
+  /** Strg + C */
+  onCopy?: () => void
+  /** Shift + F10 / Kontextmenü-Taste */
+  onContextMenu?: (row: number, col: number) => void
+  /** Alt + ↑/↓ auf einer Datenzeile (feste Reihenfolge). */
+  onMoveRow?: (row: number, delta: number) => void
+  /** Shift + ←/→ auf einer Kopfzelle. */
+  onMoveColumn?: (col: number, delta: number) => void
+  /** Alt + ←/→ auf einer Kopfzelle. */
+  onResizeColumn?: (col: number, delta: number) => void
+}
+
+const RESIZE_STEP = 24
+
+export function useGridNavigation(scroller: Ref<HTMLElement | undefined>, options: GridNavigationOptions) {
+  const state = reactive({
+    /** -1 = Kopfzeile. */
+    row: -1,
+    col: 0,
+  })
+
+  function isActive(row: number, col: number): boolean {
+    return state.row === row && state.col === col
+  }
+
+  function clamp(): void {
+    const rows = options.rowCount()
+    const cols = options.colCount()
+    state.row = Math.max(-1, Math.min(rows - 1, state.row))
+    if (rows === 0) state.row = -1
+    state.col = Math.max(0, Math.min(Math.max(0, cols - 1), state.col))
+  }
+
+  async function focusActive(): Promise<void> {
+    clamp()
+    await nextTick()
+    const el = scroller.value?.querySelector<HTMLElement>(`[data-row="${state.row}"][data-col="${state.col}"]`)
+    el?.focus({ preventScroll: false })
+  }
+
+  function setActive(row: number, col: number, focus = true): void {
+    state.row = row
+    state.col = col
+    clamp()
+    if (focus) void focusActive()
+  }
+
+  function move(deltaRow: number, deltaCol: number): void {
+    setActive(state.row + deltaRow, state.col + deltaCol)
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    const rows = options.rowCount()
+    const cols = options.colCount()
+    const inHeader = state.row === -1
+    const meta = event.ctrlKey || event.metaKey
+
+    switch (event.key) {
+      case "ArrowDown":
+        if (event.altKey && !inHeader) {
+          event.preventDefault()
+          options.onMoveRow?.(state.row, 1)
+          return
+        }
+        if (event.shiftKey && !inHeader) {
+          event.preventDefault()
+          move(1, 0)
+          options.onExtendSelection?.(state.row)
+          return
+        }
+        event.preventDefault()
+        move(1, 0)
+        return
+      case "ArrowUp":
+        if (event.altKey && !inHeader) {
+          event.preventDefault()
+          options.onMoveRow?.(state.row, -1)
+          return
+        }
+        if (event.shiftKey && !inHeader) {
+          event.preventDefault()
+          move(-1, 0)
+          options.onExtendSelection?.(state.row)
+          return
+        }
+        event.preventDefault()
+        move(-1, 0)
+        return
+      case "ArrowLeft":
+        event.preventDefault()
+        if (inHeader && event.shiftKey) {
+          options.onMoveColumn?.(state.col, -1)
+          void focusActive()
+          return
+        }
+        if (inHeader && event.altKey) {
+          options.onResizeColumn?.(state.col, -RESIZE_STEP)
+          return
+        }
+        move(0, -1)
+        return
+      case "ArrowRight":
+        event.preventDefault()
+        if (inHeader && event.shiftKey) {
+          options.onMoveColumn?.(state.col, 1)
+          void focusActive()
+          return
+        }
+        if (inHeader && event.altKey) {
+          options.onResizeColumn?.(state.col, RESIZE_STEP)
+          return
+        }
+        move(0, 1)
+        return
+      case "Home":
+        event.preventDefault()
+        if (meta) setActive(rows ? 0 : -1, 0)
+        else setActive(state.row, 0)
+        return
+      case "End":
+        event.preventDefault()
+        if (meta) setActive(rows - 1, cols - 1)
+        else setActive(state.row, cols - 1)
+        return
+      case "PageDown":
+        event.preventDefault()
+        move(options.pageRows?.() ?? 10, 0)
+        return
+      case "PageUp":
+        event.preventDefault()
+        move(-(options.pageRows?.() ?? 10), 0)
+        return
+      case "Enter":
+        event.preventDefault()
+        if (inHeader) options.onHeaderActivate?.(state.col, event.shiftKey)
+        else options.onCellActivate?.(state.row, state.col)
+        return
+      case " ":
+      case "Spacebar":
+        if (inHeader) return
+        event.preventDefault()
+        options.onToggleSelect?.(state.row)
+        return
+      case "a":
+      case "A":
+        if (!meta) return
+        event.preventDefault()
+        options.onSelectAll?.()
+        return
+      case "c":
+      case "C":
+        if (!meta) return
+        options.onCopy?.()
+        return
+      case "F10":
+        if (!event.shiftKey) return
+        event.preventDefault()
+        options.onContextMenu?.(state.row, state.col)
+        return
+      case "ContextMenu":
+        event.preventDefault()
+        options.onContextMenu?.(state.row, state.col)
+        return
+      default:
+        return
+    }
+  }
+
+  return { state, isActive, setActive, move, focusActive, handleKeydown, clamp }
+}

package/src/components/DataTable/useVirtualRows.ts

@@ -0,0 +1,126 @@
+// Virtualisierung: nur das sichtbare Fenster (plus Overscan) rendert.
+//
+// Höhen sind nicht überall gleich — Detail-Panels dürfen beliebig hoch sein.
+// Deshalb wird ein Präfixsummen-Array über die Zeilenhöhen geführt (gemessene
+// Höhen überschreiben die Standardhöhe) und darin binär gesucht. Das Fenster
+// wird über Padding oben/unten positioniert, nicht über absolute Positionen —
+// so bleiben Grid-Spalten und Sticky-Pinning unangetastet.
+
+import { computed, reactive, type Ref } from "vue"
+import type { DisplayRow, Row } from "./types"
+
+export interface VirtualRowsOptions<R extends Row = Row> {
+  rows: () => DisplayRow<R>[]
+  rowHeight: () => number
+  enabled: () => boolean
+  overscan?: number
+}
+
+export function useVirtualRows<R extends Row = Row>(
+  scroller: Ref<HTMLElement | undefined>,
+  options: VirtualRowsOptions<R>
+) {
+  const overscan = options.overscan ?? 6
+
+  const state = reactive({
+    scrollTop: 0,
+    viewportHeight: 0,
+    /** Gemessene Höhen (nur für Zeilen, die von der Standardhöhe abweichen). */
+    heights: {} as Record<string, number>,
+
+    offsets: computed((): number[] => {
+      const rows = options.rows()
+      const base = options.rowHeight()
+      const offsets = new Array<number>(rows.length + 1)
+      offsets[0] = 0
+      for (let index = 0; index < rows.length; index++) {
+        offsets[index + 1] = offsets[index] + (state.heights[rows[index].key] ?? base)
+      }
+      return offsets
+    }),
+
+    totalHeight: computed((): number => {
+      const offsets = state.offsets as number[]
+      return offsets[offsets.length - 1] ?? 0
+    }),
+
+    range: computed((): { start: number; end: number } => {
+      const rows = options.rows()
+      if (!options.enabled() || !rows.length) return { start: 0, end: rows.length }
+      const offsets = state.offsets as number[]
+      const viewport = state.viewportHeight || options.rowHeight() * 12
+      const first = findIndex(offsets, state.scrollTop)
+      const last = findIndex(offsets, state.scrollTop + viewport) + 1
+      return {
+        start: Math.max(0, first - overscan),
+        end: Math.min(rows.length, last + overscan),
+      }
+    }),
+
+    windowRows: computed((): DisplayRow<R>[] => {
+      const { start, end } = state.range as { start: number; end: number }
+      return options.rows().slice(start, end)
+    }),
+
+    padStart: computed((): number => {
+      const offsets = state.offsets as number[]
+      return offsets[(state.range as { start: number }).start] ?? 0
+    }),
+
+    padEnd: computed((): number => {
+      const offsets = state.offsets as number[]
+      const end = (state.range as { end: number }).end
+      return Math.max(0, (state.totalHeight as number) - (offsets[end] ?? 0))
+    }),
+  })
+
+  /** Größter Index, dessen Offset <= position ist (binäre Suche). */
+  function findIndex(offsets: number[], position: number): number {
+    let low = 0
+    let high = offsets.length - 1
+    while (low < high) {
+      const middle = (low + high) >> 1
+      if (offsets[middle + 1] <= position) low = middle + 1
+      else high = middle
+    }
+    return low
+  }
+
+  function syncViewport(): void {
+    const el = scroller.value
+    if (!el) return
+    state.scrollTop = el.scrollTop
+    state.viewportHeight = el.clientHeight
+  }
+
+  function onScroll(): void {
+    syncViewport()
+  }
+
+  /** Höhe einer abweichenden Zeile (Detail-Panel) hinterlegen. */
+  function measureRow(key: string, height: number): void {
+    if (height <= 0) return
+    if (Math.abs((state.heights[key] ?? 0) - height) < 1) return
+    state.heights[key] = height
+  }
+
+  function forgetRow(key: string): void {
+    delete state.heights[key]
+  }
+
+  function scrollToIndex(index: number, align: "start" | "center" | "end" = "start"): void {
+    const el = scroller.value
+    if (!el) return
+    const offsets = state.offsets as number[]
+    const clamped = Math.max(0, Math.min(offsets.length - 2, index))
+    const top = offsets[clamped] ?? 0
+    const height = (offsets[clamped + 1] ?? top) - top
+    const viewport = el.clientHeight
+    const target =
+      align === "center" ? top - viewport / 2 + height / 2 : align === "end" ? top - viewport + height : top
+    el.scrollTop = Math.max(0, target)
+    syncViewport()
+  }
+
+  return { state, onScroll, syncViewport, measureRow, forgetRow, scrollToIndex }
+}

package/src/components/DataTable/viurColumns.ts

@@ -0,0 +1,330 @@
+import type { CellBadge, DataTableColumn, Row } from "./types"
+import { compareValues, firstValueOf } from "./columns"
+// @ts-expect-error – JS-Modul ohne Typen
+import Utils from "../../forms/bones/utils.js"
+
+// --------------------------------------------------------------------------- //
+// ViUR-Struktur → Spalten der DataTable                                       //
+// --------------------------------------------------------------------------- //
+//
+// Eine ViUR-Liste liefert neben den Datensätzen ihre `structure`: je Bone ein
+// Objekt mit `descr` (Beschriftung), `type` ("str", "str.email", "numeric",
+// "select", "relational.…"), `multiple`, `languages`, `indexed`, `visible` und
+// typabhängigen Zusätzen (`values` bei select, `precision` bei numeric,
+// `format` bei relationalen Bones).
+//
+// Hier entstehen daraus Spalten: Beschriftung, Ausrichtung, Sortierbarkeit und
+// ein `formatter`. Die Übersetzung Wert → Text macht `Utils.boneToString`
+// (src/forms/bones/utils.js) — die EINE Stelle dafür, die auch die Formulare
+// und Formatstrings der Bones benutzen.
+
+/** Ein Bone der Struktur, wie der Renderer ihn liefert. */
+export interface BoneDescription {
+  descr?: string
+  type?: string
+  multiple?: boolean
+  languages?: string[] | null
+  /** Nur indizierte Bones lassen sich serverseitig sortieren. */
+  indexed?: boolean
+  visible?: boolean
+  readonly?: boolean
+  /** select: Wert → Beschriftung. */
+  values?: Record<string, string> | [string, string][]
+  /** numeric: Nachkommastellen. */
+  precision?: number
+  /** date: was der Bone überhaupt führt. */
+  date?: boolean
+  time?: boolean
+  params?: Record<string, unknown> | null
+  [key: string]: unknown
+}
+
+export type BoneStructure = Record<string, BoneDescription>
+
+export interface ColumnsFromStructureOptions<R extends Row = Row> {
+  /**
+   * Sprache mehrsprachiger Bones: ein Code zeigt diese Sprache (leer →
+   * erste befüllte, mit ihrer Flagge gekennzeichnet), `"*"` zeigt ALLE
+   * befüllten Sprachen mit Flaggen-Präfix; ohne Angabe die erste des Bones.
+   */
+  language?: string | null
+  /** Steht im `"*"`-Modus vorn — üblicherweise die UI-Sprache. */
+  primaryLanguage?: string | null
+  /** Gebietseinstellung für Zahlen und Datumsangaben. */
+  locale?: string
+  /** Nur diese Bones, in dieser Reihenfolge (Standard: alle sichtbaren). */
+  bones?: string[]
+  /** Diese Bones nie zeigen (zusätzlich zu den ohnehin verborgenen). */
+  exclude?: string[]
+  /** Beschriftung für `bool`-Werte. */
+  boolTexts?: [string, string]
+  /** Ergänzt/überschreibt die erzeugte Spalte je Bone. */
+  overrides?: Record<string, Partial<DataTableColumn<R>>>
+  /**
+   * Der VOLLSTÄNDIGE Datensatz liegt im Client (alles geladen): Sortieren,
+   * Suchen und Spaltenfilter laufen dann lokal auf allen Spalten — ohne den
+   * Server. Ohne das Flag bleibt beides aus, denn auf einem ANGELADENEN
+   * Ausschnitt wären lokale Sortierung/Filter eine Lüge; dort sortiert der
+   * Server (nur indizierte Bones, über die Tabellen-Ereignisse).
+   */
+  local?: boolean
+}
+
+/** Bones, die in einer Liste nichts zu suchen haben. */
+const HIDDEN_TYPES = ["password", "credential"]
+
+// --------------------------------------------------------------------------- //
+// Plaketten für reine select- und bool-Bones                                   //
+// --------------------------------------------------------------------------- //
+//
+// Reine Auswahlwerte ("select" ohne Untertyp — country & Co. bleiben Text) und
+// bool-Werte werden als farbige Plakette gerendert: POSITIVE Werte grün,
+// NEGATIVE rot, alle übrigen Optionen bekommen regenbogen-abgestufte Farbtöne
+// (gleichmäßig über den Farbkreis, stabil je Optionsreihenfolge). Ob ein Wert
+// positiv/negativ ist, entscheidet die Schlüsselwortliste unten — geprüft
+// werden Options-SCHLÜSSEL und -BESCHRIFTUNG, unabhängig von Groß-/
+// Kleinschreibung ("Ja", "ja", "yes", "Aktiv", "visible", …).
+
+/** Positive Werte → grün. Erweiterbar (z. B. `POSITIVE_KEYWORDS.add("live")`). */
+export const POSITIVE_KEYWORDS = new Set([
+  "yes",
+  "ja",
+  "true",
+  "1",
+  "active",
+  "aktiv",
+  "enabled",
+  "aktiviert",
+  "visible",
+  "sichtbar",
+  "on",
+  "an",
+  "ok",
+  "public",
+  "öffentlich",
+  "released",
+  "freigegeben",
+  "erlaubt",
+  "allowed",
+  "online",
+])
+
+/** Negative Werte → rot. */
+export const NEGATIVE_KEYWORDS = new Set([
+  "no",
+  "nein",
+  "false",
+  "0",
+  "inactive",
+  "inaktiv",
+  "disabled",
+  "deaktiviert",
+  "hidden",
+  "versteckt",
+  "unsichtbar",
+  "invisible",
+  "off",
+  "aus",
+  "blocked",
+  "gesperrt",
+  "denied",
+  "verboten",
+  "private",
+  "privat",
+  "deleted",
+  "gelöscht",
+  "offline",
+])
+
+const POSITIVE_COLOR = "var(--wa-color-success-50, #16a34a)"
+const NEGATIVE_COLOR = "var(--wa-color-danger-50, #dc2626)"
+
+function keywordTone(...candidates: unknown[]): string | null {
+  for (const candidate of candidates) {
+    const word = String(candidate ?? "")
+      .trim()
+      .toLowerCase()
+    if (!word) continue
+    if (POSITIVE_KEYWORDS.has(word)) return POSITIVE_COLOR
+    if (NEGATIVE_KEYWORDS.has(word)) return NEGATIVE_COLOR
+  }
+  return null
+}
+
+/** select-`values` vereinheitlichen: [ [schlüssel, beschriftung], … ]. */
+function selectOptions(bone: BoneDescription): [string, string][] {
+  const values = bone.values
+  if (Array.isArray(values)) return values.map(([key, label]) => [String(key), String(label)])
+  if (values && typeof values === "object") return Object.entries(values).map(([key, label]) => [key, String(label)])
+  return []
+}
+
+/**
+ * Farbzuordnung der Optionen eines reinen select-Bones: Schlüsselwörter
+ * entscheiden grün/rot, die übrigen Optionen teilen sich den Farbkreis
+ * (Regenbogen), in der Reihenfolge ihrer Definition.
+ */
+export function selectToneMap(bone: BoneDescription): Map<string, { label: string; color: string }> {
+  const options = selectOptions(bone)
+  const map = new Map<string, { label: string; color: string }>()
+  const neutrals: [string, string][] = []
+  for (const [key, label] of options) {
+    const tone = keywordTone(key, label)
+    if (tone) map.set(key, { label, color: tone })
+    else neutrals.push([key, label])
+  }
+  neutrals.forEach(([key, label], index) => {
+    // Regenbogen: gleichmäßig verteilte Farbtöne, Sättigung/Helligkeit fest.
+    const hue = Math.round((360 / Math.max(1, neutrals.length)) * index)
+    map.set(key, { label, color: `oklch(0.62 0.16 ${hue})` })
+  })
+  return map
+}
+
+/**
+ * Plaketten-Funktion für einen Bone — oder null, wenn der Bone keine bekommt.
+ * Nur REINE selects (`type === "select"`, kein select.country o. Ä.) und bools.
+ */
+export function badgesForBone(
+  bone: BoneDescription,
+  options: ColumnsFromStructureOptions = {}
+): ((value: unknown) => CellBadge[] | null) | null {
+  if (bone.type === "bool") {
+    const [yes, no] = options.boolTexts ?? ["Ja", "Nein"]
+    return (value) => {
+      if (value === null || value === undefined || value === "") return null
+      const truthy = value === true || value === "true" || value === 1 || value === "1"
+      return [{ label: truthy ? yes : no, color: truthy ? POSITIVE_COLOR : NEGATIVE_COLOR }]
+    }
+  }
+  if (bone.type !== "select") return null
+  const tones = selectToneMap(bone)
+  return (value) => {
+    if (value === null || value === undefined || value === "") return null
+    const keys = Array.isArray(value) ? value : [value]
+    const badges: CellBadge[] = []
+    for (const key of keys) {
+      const entry = tones.get(String(key))
+      badges.push(entry ?? { label: String(key), color: keywordTone(key) ?? "var(--wa-color-neutral-60, #71717a)" })
+    }
+    return badges.length ? badges : null
+  }
+}
+
+/** Typfamilie eines Bones: "str.email" → "str". */
+export function boneFamily(type: string | undefined | null): string {
+  return Utils.boneFamily(type) as string
+}
+
+/**
+ * Bone-Wert eines Datensatzes als Text — mit Sprachen, `multiple` und dem
+ * Formatstring relationaler Bones. Dünne Hülle um `Utils.boneToString`, damit
+ * Tabellen-Code bei den DataTable-Typen bleiben kann.
+ */
+export function boneText(value: unknown, bone: BoneDescription, options: ColumnsFromStructureOptions = {}): string {
+  return Utils.boneToString(value, bone, options) as string
+}
+
+/** Lokaler Spaltenfilter passend zum Bone-Typ. */
+function localFilterFor(bone: BoneDescription, options: ColumnsFromStructureOptions): Partial<DataTableColumn> {
+  const family = boneFamily(bone.type)
+  if (bone.type === "bool") {
+    const [yes, no] = options.boolTexts ?? ["Ja", "Nein"]
+    return {
+      filterable: true,
+      filterType: "set",
+      filterOptions: [
+        { value: "true", label: yes },
+        { value: "false", label: no },
+      ],
+    }
+  }
+  if (family === "select") {
+    const options = selectOptions(bone).map(([value, label]) => ({ value, label }))
+    return { filterable: true, filterType: bone.multiple ? "includes-any" : "set", filterOptions: options }
+  }
+  if (family === "numeric") return { filterable: true, filterType: "number-range" }
+  if (family === "date") return { filterable: true, filterType: "date-range" }
+  return { filterable: true, filterType: "text" }
+}
+
+const isEmptyValue = (value: unknown): boolean => value === null || value === undefined || value === ""
+
+/**
+ * Sortierwert eines MEHRSPRACHIGEN Bones: dieselbe Sprache, die die Anzeige
+ * nach vorn stellt — die gewünschte (bzw. bei `"*"` die primäre), und wenn
+ * die leer ist, die erste befüllte. So sortiert die Spalte nach dem Text, den
+ * die Zelle tatsächlich zeigt, nicht stur nach der ersten Bone-Sprache.
+ */
+function languageSortValue(value: unknown, languages: string[], options: ColumnsFromStructureOptions): unknown {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return value
+  const record = value as Record<string, unknown>
+  const wanted = options.language === "*" ? (options.primaryLanguage ?? null) : (options.language ?? null)
+  let lang = wanted && languages.includes(wanted) ? wanted : languages[0]
+  if (isEmptyValue(record[lang])) {
+    lang = languages.find((other) => !isEmptyValue(record[other])) ?? lang
+  }
+  return record[lang]
+}
+
+/** Zahlen rechts, alles andere links — wie in Tabellen üblich. */
+function alignOf(bone: BoneDescription): "start" | "end" {
+  return boneFamily(bone.type) === "numeric" && !bone.multiple ? "end" : "start"
+}
+
+/**
+ * Spalten aus einer ViUR-Struktur.
+ *
+ * Sortierbar wird eine Spalte nur, wenn der Bone `indexed` ist und weder
+ * `multiple` noch mehrsprachig — nach allem anderen kann der Server nicht
+ * ordnen. Suche und Spaltenfilter bleiben aus: die macht bei einer Liste der
+ * Server, der Aufrufer verdrahtet sie über die Ereignisse der Tabelle.
+ */
+export function columnsFromStructure<R extends Row = Row>(
+  structure: BoneStructure | null | undefined,
+  options: ColumnsFromStructureOptions<R> = {}
+): DataTableColumn<R>[] {
+  const bones = structure ?? {}
+  const exclude = new Set(options.exclude ?? [])
+  const names = options.bones ?? Object.keys(bones)
+
+  const columns: DataTableColumn<R>[] = []
+  for (const name of names) {
+    const bone = bones[name]
+    if (!bone || exclude.has(name)) continue
+    if (bone.visible === false) continue
+    if (HIDDEN_TYPES.includes(boneFamily(bone.type))) continue
+
+    // Server-Modus: nur indizierte Bones sind sortierbar; lokal (alles
+    // geladen) darf nach jeder Spalte sortiert, gesucht und gefiltert werden.
+    const sortable = options.local === true || (bone.indexed === true && !bone.multiple && !bone.languages?.length)
+    const column: DataTableColumn<R> = {
+      field: name,
+      label: bone.descr ?? name,
+      align: alignOf(bone),
+      sortable,
+      searchable: options.local === true,
+      filterable: false,
+      formatter: (value) => boneText(value, bone, options as ColumnsFromStructureOptions),
+      minWidth: 120,
+      flex: 1,
+    }
+    // Mehrsprachig: nach der ANGEZEIGTEN Sprache sortieren (siehe oben).
+    if (bone.languages?.length) {
+      const languages = bone.languages
+      column.comparator = (a, b) =>
+        compareValues(
+          firstValueOf(languageSortValue(a, languages, options as ColumnsFromStructureOptions)),
+          firstValueOf(languageSortValue(b, languages, options as ColumnsFromStructureOptions)),
+          "auto"
+        )
+    }
+
+    // Reine selects und bools als farbige Plaketten (siehe badgesForBone).
+    const badge = badgesForBone(bone, options as ColumnsFromStructureOptions)
+    if (badge) column.badge = (value) => badge(value)
+    if (options.local === true) Object.assign(column, localFilterFor(bone, options as ColumnsFromStructureOptions))
+    columns.push({ ...column, ...(options.overrides?.[name] ?? {}) })
+  }
+  return columns
+}