viur-ui 0.0.1

package/src/request/skel.js

@@ -0,0 +1,90 @@
+/**
+ * Convert structure to object format.
+ * ViUR can return structure as array [[name, bone], ...] or object {name: bone}.
+ * bone["using"] (relational/record sub-structure) may still use array format.
+ */
+export function normalizeStructure(structure) {
+  if (!structure) return {}
+  if (Array.isArray(structure)) {
+    return Object.fromEntries(structure.map(([name, bone]) => [name, bone]))
+  }
+  return structure
+}
+
+/**
+ * Convert skel values + structure to a flat array of {fieldName: value} objects
+ * suitable for building a FormData or JSON payload for ViUR edit/add endpoints.
+ *
+ * Handles: multilingual bones, multiple bones, record bones, relational bones,
+ * spatial bones, raw.json bones.
+ *
+ * @param {Record<string, any>} skel   - skel values (e.g. from view response)
+ * @param {Record<string, any>} structure - normalized structure object
+ * @returns {{ [field: string]: any }[]}
+ */
+export function skelDataToFormData(skel, structure) {
+  function handleEntry(result, fieldName, bone, val) {
+    if (bone["type"].startsWith("record")) {
+      const struct = normalizeStructure(bone["using"])
+      for (const [subField, subBone] of Object.entries(struct)) {
+        result = result.concat(boneToForm(`${fieldName}.${subField}`, subBone, val?.[subField]))
+      }
+    } else if (val === Object(val) && bone["using"]) {
+      // relational bone with sub-structure
+      if (val["dest"]?.["key"]) {
+        const struct = normalizeStructure(bone["using"])
+        for (const [subField, subBone] of Object.entries(struct)) {
+          result = result.concat(boneToForm(`${fieldName}.${subField}`, subBone, val["rel"]?.[subField]))
+        }
+        result.push({ [`${fieldName}.key`]: val["dest"]["key"] })
+      } else {
+        result.push({ [fieldName]: null })
+      }
+    } else if (bone["type"].startsWith("spatial") && val) {
+      result.push({ [`${fieldName}.lat`]: val[0] })
+      result.push({ [`${fieldName}.lng`]: val[1] })
+    } else if (bone["type"].startsWith("raw.json") && val) {
+      result.push({ [fieldName]: JSON.stringify(val) })
+    } else if (val === Object(val)) {
+      // plain relational bone (no using)
+      result.push({ [fieldName]: val["dest"]?.["key"] ?? null })
+    } else {
+      result.push({ [fieldName]: val })
+    }
+    return result
+  }
+
+  function boneToForm(fieldName, bone, value) {
+    let result = []
+    const indexBone = bone["type"].startsWith("record")
+    const languages = bone["languages"] || ["none"]
+    let languageValue = value
+
+    for (const lang of languages) {
+      let currentFieldName = fieldName
+      if (lang !== "none") {
+        currentFieldName += `.${lang}`
+        value = languageValue?.[lang]
+      }
+
+      if (bone["multiple"]) {
+        const values = value ?? []
+        for (const [idx, val] of values.entries()) {
+          const indexedName =
+            indexBone || val?.["rel"] || (bone["using"] && val?.["rel"] !== null)
+              ? `${currentFieldName}.${idx}`
+              : currentFieldName
+          result = handleEntry(result, indexedName, bone, val)
+        }
+        if (values.length === 0) {
+          result.push({ [currentFieldName]: null })
+        }
+      } else {
+        result = handleEntry(result, currentFieldName, bone, value)
+      }
+    }
+    return result
+  }
+
+  return Object.entries(structure).flatMap(([fieldName, bone]) => boneToForm(fieldName, bone, skel[fieldName]))
+}

package/src/theme/colorStore.js

@@ -0,0 +1,168 @@
+import { defineStore } from "pinia"
+import { reactive, computed, watch } from "vue"
+import { useConfigStore } from "../request/configStore.js"
+
+// --------------------------------------------------------------------------- //
+// Color store — brand color from the configuration                           //
+// --------------------------------------------------------------------------- //
+//
+// Same principle as the colorStore of vi-vue-components (old admin): the
+// configured colors (`admin.color.primary` / `admin.color.secondary`, part of
+// the public /vi/config) are converted to HSL; hue and saturation stay, the
+// lightness is fixed per step. The old admin fed Shoelace's
+// `--sl-color-primary-50…950` that way. Here the same table feeds the eleven
+// steps of the WebAwesome brand palette (`--wa-color-brand-95…05`), in the same
+// order; the theme maps them onto its semantic tokens (fill / border / on, light
+// and dark) as it does for any built-in brand color.
+
+/** Lightness (HSL, %) per brand step: the old admin's table (50 → 83 %, …,
+ *  950 → 3 %), step by step on WebAwesome's steps (95 … 05). */
+export const BRAND_LIGHTNESS = [
+  ["95", 95],
+  ["90", 78],
+  ["80", 68],
+  ["70", 58],
+  ["60", 48],
+  ["50", 43],
+  ["40", 38],
+  ["30", 28],
+  ["20", 18],
+  ["10", 8],
+  ["05", 3],
+]
+const STEP_LIGHTNESS = Object.fromEntries(BRAND_LIGHTNESS)
+
+/**
+ * "#rrggbb" / "#rgb" → [h, s, l] (degrees, %, %) — the old admin's conversion,
+ * rounding included. Anything else → null.
+ */
+export function hexToHsl(color) {
+  let hex = typeof color === "string" ? color.trim().toLowerCase() : ""
+  if (/^#[0-9a-f]{3}$/.test(hex)) hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`
+  if (!/^#[0-9a-f]{6}$/.test(hex)) return null
+
+  const r = parseInt(hex.slice(1, 3), 16) / 255
+  const g = parseInt(hex.slice(3, 5), 16) / 255
+  const b = parseInt(hex.slice(5, 7), 16) / 255
+  const cmin = Math.min(r, g, b)
+  const cmax = Math.max(r, g, b)
+  const delta = cmax - cmin
+
+  let h = 0
+  if (delta === 0) h = 0
+  else if (cmax === r) h = ((g - b) / delta) % 6
+  else if (cmax === g) h = (b - r) / delta + 2
+  else h = (r - g) / delta + 4
+  h = Math.round(h * 60)
+  if (h < 0) h += 360
+
+  const l = (cmax + cmin) / 2
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+  return [h, +(s * 100).toFixed(1), +(l * 100).toFixed(1)]
+}
+
+/** CSS color from [h, s, l]; `lightness` replaces l (0 keeps it, as before). */
+function hslString([h, s, l], lightness = 0, alpha = null) {
+  const light = lightness || l
+  return alpha === null ? `hsl(${h},${s}%,${light}%)` : `hsla(${h},${s}%,${light}%,${alpha}%)`
+}
+
+/** Relative luminance (WCAG) of [h, s, l]. */
+function luminance([h, s, l]) {
+  const a = (s / 100) * Math.min(l / 100, 1 - l / 100)
+  const channel = (n) => {
+    const k = (n + h / 30) % 12
+    const c = l / 100 - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  }
+  return 0.2126 * channel(0) + 0.7152 * channel(8) + 0.0722 * channel(4)
+}
+
+/** Text on the brand's key step (50): white, or its darkest step (10) when
+ *  that contrasts better — light hues such as lime or yellow. */
+function brandOnColor(h, s) {
+  const key = luminance([h, s, STEP_LIGHTNESS["50"]])
+  const dark = luminance([h, s, STEP_LIGHTNESS["10"]])
+  return 1.05 / (key + 0.05) >= (key + 0.05) / (dark + 0.05) ? "white" : "var(--wa-color-brand-10)"
+}
+
+export const useColorStore = defineStore("viurColor", () => {
+  const configStore = useConfigStore()
+
+  const state = reactive({
+    // set explicitly to override the configuration; null → `admin.color.*`
+    primaryColor: null,
+    secondaryColor: null,
+  })
+
+  const primaryHsl = computed(() => hexToHsl(state.primaryColor ?? configStore.get("color.primary")))
+  const secondaryHsl = computed(() => hexToHsl(state.secondaryColor ?? configStore.get("color.secondary")))
+
+  /** WebAwesome brand tokens (custom property → value); empty without a
+   *  valid primary color, so WebAwesome's default brand stays. */
+  const brandColors = computed(() => {
+    const color = primaryHsl.value
+    if (!color) return {}
+    const colors = {}
+    for (const [step, lightness] of BRAND_LIGHTNESS) {
+      colors[`--wa-color-brand-${step}`] = hslString(color, lightness)
+    }
+    colors["--wa-color-brand"] = "var(--wa-color-brand-50)"
+    colors["--wa-color-brand-on"] = brandOnColor(color[0], color[1])
+    return colors
+  })
+
+  // ── the old admin's helpers (null without a valid color) ────────────────────
+  function getPrimaryColor(lightness = 0) {
+    return primaryHsl.value ? hslString(primaryHsl.value, lightness) : null
+  }
+
+  function getSecondaryColor(lightness = 0) {
+    return secondaryHsl.value ? hslString(secondaryHsl.value, lightness) : null
+  }
+
+  /** `color` is "primaryColor" or "secondaryColor", `alpha` in %. */
+  function getAlphaColor(color, lightness, alpha) {
+    const hsl = color === "secondaryColor" ? secondaryHsl.value : primaryHsl.value
+    return hsl ? hslString(hsl, lightness, alpha) : null
+  }
+
+  /**
+   * Write the brand palette into `doc` and keep it in sync with the
+   * configuration. It goes into a `<style>` in the head as an unlayered
+   * `:root` rule: that wins over WebAwesome's layered palette / brand rules,
+   * reaches every shadow root, and windows that mirror the head's styles (the
+   * admin's detached panes) pick it up too. Returns a function that stops the
+   * sync.
+   */
+  function applyBrandColor(doc = globalThis.document) {
+    if (!doc?.head) return () => {}
+    return watch(
+      brandColors,
+      (colors) => {
+        let style = doc.head.querySelector("style[data-viur-brand-color]")
+        const entries = Object.entries(colors)
+        if (!entries.length) {
+          style?.remove()
+          return
+        }
+        if (!style) {
+          style = doc.createElement("style")
+          style.dataset.viurBrandColor = ""
+          doc.head.append(style)
+        }
+        style.textContent = `:root {\n${entries.map(([name, value]) => `  ${name}: ${value};`).join("\n")}\n}`
+      },
+      { immediate: true }
+    )
+  }
+
+  return {
+    state,
+    brandColors,
+    getPrimaryColor,
+    getSecondaryColor,
+    getAlphaColor,
+    applyBrandColor,
+  }
+})

package/src/translations/de.js

@@ -0,0 +1,178 @@
+export default {
+  bone: {
+    add: "Hinzufügen",
+    del: "Entfernen",
+    delAll: "Alle Entfernen",
+    upload: "Hochladen",
+    download: "Herunterladen",
+    chooseFile: "Datei auswählen",
+    dragFile: "Dateien hier hinziehen",
+    dropzone: "Datei auswählen oder hierher ziehen",
+    editFile: "Datei bearbeiten",
+    list: "Auflisten",
+    addEmpty: "Neuer Eintrag",
+    no_entries: "Keine Einträge",
+  },
+  lang: "Sprache",
+  bones: {
+    numeric: {
+      min: "Minimum: {val}",
+      max: "Maximum: {val}",
+      precision: "Genauigkeit: {val} Stellen",
+    },
+    bool: {
+      true: "Ja",
+      false: "Nein",
+    },
+    phone: {
+      placeholder: "Telefon/Fax",
+    },
+  },
+
+  errors: {
+    "Field not set": "Feld nicht ausgefüllt",
+    "No value entered": "Feld nicht ausgefüllt",
+    "invalid value entered": "Wert ist ungültig",
+    "Field not submitted": "Feld wurde nicht übertragen",
+    "Too few items": "Zuwenige Elemente",
+    "Too many items": "Zuviele Elemente",
+    "Duplicate items": "Doppelte Elemente",
+    "No Captche given!": "Captcha Code fehlt!",
+    "Incomplete data": "Daten unvollständig",
+    "No value selected": "Kein Wert ausgewählt",
+    "Invalid value selected": "Auswahl ist ungültig",
+    "Wrong OTP Token": "Falscher OTP Code",
+    "Maximum length exceeded": "Eingabe zu lang",
+    "Invalid email entered": "Ungültige E-Mail Adresse",
+  },
+  preview: "Vorschau",
+  de: "DE",
+  en: "EN",
+  fr: "FR",
+  nl: "NL",
+  ch: "CH",
+  es: "ES",
+  "de-x-simple": "Einfache Sprache",
+  dataTable: {
+    structureNotice: "Die Struktur des Moduls kam nicht an — die Spalten sind aus den Daten abgeleitet.",
+    search: "Suchen …",
+    columns: "Spalten",
+    resetColumns: "Spalten zurücksetzen",
+    filterFor: "Filter: {column}",
+    columnOptions: "Spaltenoptionen",
+    sortAsc: "Aufsteigend sortieren",
+    sortDesc: "Absteigend sortieren",
+    pinLeft: "Links anpinnen",
+    pinRight: "Rechts anpinnen",
+    unpin: "Loslösen",
+    autoSize: "Breite anpassen",
+    hideColumn: "Ausblenden",
+    pinnedLeft: "Links angepinnt",
+    pinnedRight: "Rechts angepinnt",
+    selectAllPage: "Alle Zeilen dieser Seite auswählen",
+    selectRow: "Zeile {row} auswählen",
+    dragToReorder: "Zum Umsortieren ziehen",
+    reorderDisabled: "Umsortieren nur in der festen Reihenfolge (Sortierung aufheben)",
+    noChildren: "Keine Unterebene",
+    collapseRow: "Zeile einklappen",
+    expandRow: "Zeile ausklappen",
+    noData: "Keine Daten",
+    noResults: "Keine Treffer",
+    filterFrom: "von",
+    filterTo: "bis",
+    searchValues: "Werte suchen …",
+    perPage: "{count} / Seite",
+    perPageAria: "Einträge pro Seite",
+    rowsPerPageAria: "Zeilen pro Seite",
+    loadMore: "Mehr laden",
+    loadAll: "Alles laden",
+    loadPages: "Die nächsten {pages} Seiten laden",
+    loaded: "{loaded} Einträge",
+    loadedOne: "1 Eintrag",
+    loadedOf: "{loaded} von {total} Einträgen",
+    filteredOf: "{filtered} Treffer von {loaded} Einträgen",
+    pageInfo: "{rows} Zeilen, Seite {page} von {pages}",
+    firstPage: "Erste Seite",
+    prevPage: "Vorige Seite",
+    nextPage: "Nächste Seite",
+    lastPage: "Letzte Seite",
+    rowsSelected: "{count} Zeilen ausgewählt",
+    selectionCleared: "Auswahl aufgehoben",
+    rowsCopied: "{count} Zeilen kopiert",
+    rowMoved: "Zeile auf Position {position} verschoben",
+    rowMovedLevel: "Zeile in eine andere Ebene verschoben, Position {position}",
+    rowsMoved: "{count} Zeilen verschoben, ab Position {position}",
+    rowsMovedLevel: "{count} Zeilen verschoben, ab Position {position}, teils in eine andere Ebene",
+  },
+  browser: {
+    path: "Pfad",
+    navigation: "Navigation",
+    uploadHint: "Dateien hier ablegen",
+  },
+  form: {
+    next: "Weiter",
+    submit: "Absenden",
+    back: "Zurück",
+  },
+  actions: {
+    close: "Schließen",
+    aiHint:
+      "* Hierbei kommt künstliche Intelligenz zum Einsatz. Die Ergebnisse können daher fehlerhaft sein. Bitte prüfen Sie stets das Ergebnis.",
+    translate: {
+      original: "Original Sprache ({lang}):",
+      target: "Zielsprache ({lang}):",
+      run: "Übersetzen",
+      applyNext: "Übernehmen und nächste leere Sprache",
+      apply: "Ziel für {lang} übernehmen",
+    },
+    describeImage: {
+      label: "Beschreibung ({lang}):",
+      instructions: "weitere Anweisungen",
+      run: "Beschreibung erstellen",
+      apply: "Beschreibung übernehmen",
+    },
+  },
+  messages: {
+    request: {
+      default: {
+        success: "Aktion erfolgreich ausgeführt.",
+        rejected: "Die Eingaben wurden nicht akzeptiert.",
+        error: "Die Anfrage ist fehlgeschlagen ({status}).",
+        info: "",
+        warning: "",
+      },
+      add: { success: "Eintrag wurde angelegt.", rejected: "Eintrag konnte nicht angelegt werden." },
+      edit: { success: "Änderungen wurden gespeichert.", rejected: "Änderungen konnten nicht gespeichert werden." },
+      delete: { success: "Eintrag wurde gelöscht.", rejected: "Eintrag konnte nicht gelöscht werden." },
+      clone: { success: "Eintrag wurde dupliziert.", rejected: "Eintrag konnte nicht dupliziert werden." },
+      move: { success: "Eintrag wurde verschoben.", rejected: "Eintrag konnte nicht verschoben werden." },
+      login: { success: "Anmeldung erfolgreich.", rejected: "Anmeldung fehlgeschlagen." },
+      logout: { success: "Sie wurden abgemeldet." },
+    },
+  },
+  login: {
+    login: "Anmelden",
+    logout: "Abmelden",
+    otp: "Bestätigen",
+    otp_label: "Einmal-Code",
+    choose_method: "Anmeldemethode wählen",
+    choose_second_factor: "Zweiten Faktor wählen",
+    second_factor: "Zwei-Faktor-Bestätigung",
+    lost_password: "Passwort vergessen?",
+    with_google: "Mit Google anmelden",
+    waiting: "lade...",
+    or: "oder",
+    login_error: "Benutzername oder Passwort falsch.",
+    google_error: "Ein Fehler ist beim Login aufgetreten.",
+    otp_error: "Die Eingabe war ungültig.",
+    back: "zurück",
+    recovery_start: "Passwort zurücksetzen",
+    recovery_error: "Ein Fehler beim zurücksetzen des Passwortes ist aufgetreten.",
+    password: "Passwort",
+    email: "E-Mail Adresse",
+  },
+  "viur.core.login.error": "Benutzername oder Passwort falsch.",
+  "viur.core.login.waiting": "lade...",
+  "viur.core.login.back": "zurück",
+  "viur.core.modules.user.btn.send": "Absenden",
+}

package/src/translations/en.js

@@ -0,0 +1,177 @@
+export default {
+  bone: {
+    add: "Add",
+    del: "Remove",
+    delAll: "Remove all",
+    upload: "Upload",
+    download: "Download",
+    chooseFile: "Choose file",
+    dragFile: "Drag files here",
+    dropzone: "Select a file or drag it here",
+    editFile: "Edit file",
+    list: "List",
+    addEmpty: "New entry",
+    no_entries: "No entries",
+  },
+  lang: "Language",
+  bones: {
+    numeric: {
+      min: "Minimum: {val}",
+      max: "Maximum: {val}",
+      precision: "Precision: {val} digits",
+    },
+    bool: {
+      true: "Yes",
+      false: "No",
+    },
+    phone: {
+      placeholder: "Phone/Fax",
+    },
+  },
+
+  errors: {
+    "Field not set": "Field not set",
+    "No value entered": "No value entered",
+    "invalid value entered": "Invalid value entered",
+    "Field not submitted": "Field not submitted",
+    "Too few items": "Too few items",
+    "Too many items": "Too many items",
+    "Duplicate items": "Duplicate items",
+    "No Captche given!": "Captcha code missing!",
+    "Incomplete data": "Incomplete data",
+    "No value selected": "No value selected",
+    "Invalid value selected": "Invalid value selected",
+    "Wrong OTP Token": "Wrong OTP token",
+    "Maximum length exceeded": "Maximum length exceeded",
+    "Invalid email entered": "Invalid email address",
+  },
+  preview: "Preview",
+  de: "DE",
+  en: "EN",
+  fr: "FR",
+  nl: "NL",
+  ch: "CH",
+  es: "ES",
+  "de-x-simple": "Simple language",
+  dataTable: {
+    structureNotice: "The module's structure did not arrive — the columns are derived from the data.",
+    search: "Search …",
+    columns: "Columns",
+    resetColumns: "Reset columns",
+    filterFor: "Filter: {column}",
+    columnOptions: "Column options",
+    sortAsc: "Sort ascending",
+    sortDesc: "Sort descending",
+    pinLeft: "Pin left",
+    pinRight: "Pin right",
+    unpin: "Unpin",
+    autoSize: "Auto-fit width",
+    hideColumn: "Hide",
+    pinnedLeft: "Pinned left",
+    pinnedRight: "Pinned right",
+    selectAllPage: "Select all rows on this page",
+    selectRow: "Select row {row}",
+    dragToReorder: "Drag to reorder",
+    reorderDisabled: "Reordering requires the fixed order (clear sorting)",
+    noChildren: "No sub-level",
+    collapseRow: "Collapse row",
+    expandRow: "Expand row",
+    noData: "No data",
+    noResults: "No matches",
+    filterFrom: "from",
+    filterTo: "to",
+    searchValues: "Search values …",
+    perPage: "{count} / page",
+    perPageAria: "Entries per page",
+    rowsPerPageAria: "Rows per page",
+    loadMore: "Load more",
+    loadAll: "Load all",
+    loadPages: "Load the next {pages} pages",
+    loaded: "{loaded} entries",
+    loadedOne: "1 entry",
+    loadedOf: "{loaded} of {total} entries",
+    filteredOf: "{filtered} matches of {loaded} entries",
+    pageInfo: "{rows} rows, page {page} of {pages}",
+    firstPage: "First page",
+    prevPage: "Previous page",
+    nextPage: "Next page",
+    lastPage: "Last page",
+    rowsSelected: "{count} rows selected",
+    selectionCleared: "Selection cleared",
+    rowsCopied: "{count} rows copied",
+    rowMoved: "Row moved to position {position}",
+    rowMovedLevel: "Row moved to another level, position {position}",
+    rowsMoved: "{count} rows moved, starting at position {position}",
+    rowsMovedLevel: "{count} rows moved, starting at position {position}, partly to another level",
+  },
+  browser: {
+    path: "Path",
+    navigation: "Navigation",
+    uploadHint: "Drop files here",
+  },
+  form: {
+    next: "Next",
+    submit: "Submit",
+    back: "Back",
+  },
+  actions: {
+    close: "Close",
+    aiHint: "* Artificial intelligence is used here. Results may contain errors — please always review them.",
+    translate: {
+      original: "Source language ({lang}):",
+      target: "Target language ({lang}):",
+      run: "Translate",
+      applyNext: "Apply and go to next empty language",
+      apply: "Apply target for {lang}",
+    },
+    describeImage: {
+      label: "Description ({lang}):",
+      instructions: "additional instructions",
+      run: "Generate description",
+      apply: "Apply description",
+    },
+  },
+  messages: {
+    request: {
+      default: {
+        success: "Action completed.",
+        rejected: "The input was not accepted.",
+        error: "The request failed ({status}).",
+        info: "",
+        warning: "",
+      },
+      add: { success: "Entry created.", rejected: "Entry could not be created." },
+      edit: { success: "Changes saved.", rejected: "Changes could not be saved." },
+      delete: { success: "Entry deleted.", rejected: "Entry could not be deleted." },
+      clone: { success: "Entry duplicated.", rejected: "Entry could not be duplicated." },
+      move: { success: "Entry moved.", rejected: "Entry could not be moved." },
+      login: { success: "Signed in.", rejected: "Sign-in failed." },
+      logout: { success: "You have been signed out." },
+    },
+  },
+  login: {
+    login: "Sign in",
+    logout: "Sign out",
+    otp: "Verify",
+    otp_label: "One-time code",
+    choose_method: "Choose a sign-in method",
+    choose_second_factor: "Choose a second factor",
+    second_factor: "Two-factor verification",
+    lost_password: "Forgot your password?",
+    with_google: "Sign in with Google",
+    waiting: "loading...",
+    or: "or",
+    login_error: "Incorrect username or password.",
+    google_error: "An error occurred during login.",
+    otp_error: "The code was invalid.",
+    back: "Back",
+    recovery_start: "Reset password",
+    recovery_error: "An error occurred while resetting the password.",
+    password: "Password",
+    email: "E-Mail",
+  },
+  "viur.core.login.error": "Incorrect username or password.",
+  "viur.core.login.waiting": "loading...",
+  "viur.core.login.back": "Back",
+  "viur.core.modules.user.btn.send": "Send",
+}

package/src/user/LoginScreen.d.vue.ts

@@ -0,0 +1,54 @@
+import type { DefineComponent } from "vue"
+
+/** Props von LoginScreen.vue (siehe defineProps dort). */
+export interface LoginScreenProps {
+  /** Überschrift der Karte; per `header`-Slot ersetzbar. */
+  title?: string
+  /**
+   * Endpunkt unterhalb des `user`-Moduls, der den Ablauf startet. Envelope v2
+   * fährt die ganze Kette ab "login". viur-core 3.9 (klassisches v1) antwortet
+   * auf "login" mit der Provider-Auswahl; die Kette führt der LoginScreen dann
+   * selbst wie vi-vue-utils (Passwort, Passwort vergessen, zweiter Faktor).
+   */
+  action?: string
+  /** Renderer für die Requests; Standard: VITE_DEFAULT_RENDERER oder "json". */
+  renderer?: string | null
+  /** Protokollversion festnageln; null → unversioniert (Server wählt v2). */
+  version?: string | number | null
+  /**
+   * OAuth-Client-ID für „Sign in with Google". Ohne Angabe wird die vom Server
+   * per `/vi/config` ("admin.user.google.clientID") gelieferte ID genutzt;
+   * `false` blendet den Knopf immer aus.
+   */
+  googleClientId?: string | false | null
+  /**
+   * Hintergrundbild der App, falls die Konfiguration keines setzt
+   * ("admin.login.background" leer). Wie dort: absolute URLs bleiben, "/…" ist
+   * ein Pfad auf dem Backend, alles andere ein Asset der App (unter BASE_URL).
+   */
+  backgroundImage?: string | null
+  /** Logo über dem Login, falls "admin.login.logo" leer ist (Auflösung wie oben). */
+  logo?: string | null
+  /** Fortschrittsleiste des Multistep-Formulars zeigen. */
+  showSteps?: boolean
+  /** Beim Mounten eine bestehende Session prüfen und den Login überspringen. */
+  autoStart?: boolean
+  /**
+   * Ziel nach erfolgreicher Anmeldung (auch wenn `autoStart` eine bestehende
+   * Session findet). Läuft über vue-router, falls die Anwendung einen hat,
+   * sonst über `location`. Ohne Angabe bleibt die Ansicht stehen und der
+   * Aufrufer entscheidet in `@success`.
+   */
+  redirect?: string
+}
+
+/** Ereignisse als `on*`-Props, damit `@success` / `@error` im Template typen. */
+export interface LoginScreenEmitProps {
+  /** Angemeldet — mit den Werten des UserSkel. */
+  onSuccess?: (user: Record<string, any> | null) => void
+  /** Login fehlgeschlagen (Formularfehler, Transport, "google"). */
+  onError?: (error: unknown) => void
+}
+
+declare const LoginScreen: DefineComponent<LoginScreenProps & LoginScreenEmitProps, {}, any>
+export default LoginScreen