viur-ui 0.0.2 → 0.0.4

package/index.d.ts

@@ -28,9 +28,13 @@ export interface ListFetchOptions {
   group?: string | null
   url?: string | null
   renderer?: string
+  /** pin the wire format, e.g. `2`/`"v2"` (default: unversioned endpoint) */
+  version?: string | number | null
   immediate?: boolean
   cached?: boolean
   ttl?: number
+  /** push failures to the message store (when one exists), default `true` */
+  messages?: boolean
   /** 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
@@ -295,7 +299,8 @@ export declare const BRAND_LIGHTNESS: [string, number][]
 export interface UploadFileOptions {
   target?: string
   publicUpload?: boolean
-  renderer?: string
+  renderer?: string | null
+  version?: string | number | null
 }
 
 export declare function uploadFile(file: File, options?: UploadFileOptions): Promise<Record<string, any>>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viur-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/viur-framework/viur-ui"
@@ -36,7 +36,7 @@
     "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",
@@ -59,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/DataTable/DataTable.vue

@@ -310,12 +310,12 @@
             role="row"
             :style="state.gridStyle"
             :data-key="displayRow.key"
-            @dblclick="onRowDoubleClick(displayRow, $event)"
             :aria-selected="
               selectable !== false && displayRow.kind === 'data' ? state.selectedSet.has(displayRow.nodeKey) : undefined
             "
             :aria-level="state.isTree ? displayRow.depth + 1 : undefined"
             :aria-expanded="displayRow.expandable ? displayRow.expanded : undefined"
+            @dblclick="onRowDoubleClick(displayRow, $event)"
           >
             <div
               v-for="cell in state.cellColumns"
@@ -1782,9 +1782,11 @@ function toggleExpand(displayRow: DisplayRow<R>): void {
   if (props.loadChildren && displayRow.kind === "data" && displayRow.row) {
     const row = displayRow.row
     if (childState(row) === "unknown" && !displayRow.node?.children.length) {
-      void fetchChildren(row).then(() => {
-        if (childState(row) !== "empty") expand(displayRow.nodeKey, row)
-      })
+      void fetchChildren(row)
+        .then(() => {
+          if (childState(row) !== "empty") expand(displayRow.nodeKey, row)
+        })
+        .catch((error) => console.warn("[DataTable] Ebene konnte nicht aufgeklappt werden", error))
       return
     }
   }
@@ -2537,7 +2539,7 @@ defineExpose({
     const row = findRowByKey(key)
     if (!row) return
     delete state.loadedChildren[String(key)]
-    await fetchChildren(row, true)
+    return await fetchChildren(row, true)
   },
   /** A row's lazy-loaded children (undefined = not loaded yet). */
   getLoadedChildren: (key: RowKey): R[] | undefined => state.loadedChildren[String(key)] as R[] | undefined,
@@ -2718,16 +2720,17 @@ watch(
   z-index: 3;
 }
 /* The row only provides the tint as a variable and lays out the cells —
-   painting happens in the CELLS.
-   Reason: the row box is only as wide as the visible area, but its
-   column tracks can extend beyond it (horizontal scrolling).
-   A background or border on the row therefore breaks off in the middle of the grid
-   — visible as a missing divider under pinned columns as soon as you
-   scroll. The cells, in contrast, cover the full width. */
+   painting happens in the CELLS, which always cover the full width of the grid.
+   The row box itself grows to the full width of its column tracks
+   (`min-inline-size: max-content`). Without that it is only as wide as the
+   visible area while the tracks extend beyond it — and cells pinned to the
+   start, being `position: sticky` inside the row, scroll away with the row
+   once the table is scrolled further than one visible width. */
 .vi-dt-row {
   --dt-row-bg: var(--wa-color-surface-default);
   display: grid;
   align-items: stretch;
+  min-inline-size: max-content;
   min-block-size: var(--dt-row-height, 2.75rem);
   background-color: transparent;
 }
@@ -2793,6 +2796,11 @@ watch(
   background-color: var(--dt-row-bg);
   border-block-end: var(--dt-border-width) solid var(--dt-border-color);
   overflow: hidden;
+  /* Every row is its own grid, sized by `max-content` (see .vi-dt-row). If
+     cell content counted towards that size, a row with a long text would
+     size its flex columns differently from the others and the columns would
+     no longer line up. Content still overflows and ellipsizes as before. */
+  contain: inline-size;
 }
 .vi-dt-cell.is-lead {
   padding-inline: var(--wa-space-2xs);

package/src/components/DataTable/useGridNavigation.ts

@@ -35,6 +35,48 @@ export interface GridNavigationOptions {
 
 const RESIZE_STEP = 24
 
+const TOGGLE_INPUT_TYPES = new Set(["checkbox", "radio", "button", "submit", "reset", "image"])
+
+/**
+ * Classifies the control inside a cell that a keydown came from (shadow DOM
+ * included). "text" controls own every navigation key, "activate" controls
+ * (buttons, checkboxes, switches) only Enter and Space. The walk stops at the
+ * cell, so the cell itself never counts.
+ */
+function cellControl(event: KeyboardEvent): { kind: "text" | "activate"; cell: HTMLElement | undefined } | undefined {
+  const path = event.composedPath()
+  let kind: "text" | "activate" | undefined
+  for (const node of path) {
+    if (!(node instanceof HTMLElement)) continue
+    if (node.hasAttribute("data-row")) return kind ? { kind, cell: node } : undefined
+    if (kind === "text") continue
+    const tag = node.tagName
+    const role = node.getAttribute("role")
+    if (
+      tag === "TEXTAREA" ||
+      tag === "SELECT" ||
+      node.isContentEditable ||
+      (tag === "INPUT" && !TOGGLE_INPUT_TYPES.has((node as HTMLInputElement).type)) ||
+      role === "textbox" ||
+      role === "combobox" ||
+      role === "listbox"
+    ) {
+      kind = "text"
+    } else if (
+      tag === "BUTTON" ||
+      tag === "INPUT" ||
+      (tag === "A" && node.hasAttribute("href")) ||
+      role === "button" ||
+      role === "checkbox" ||
+      role === "switch"
+    ) {
+      kind ??= "activate"
+    }
+  }
+  // Not inside a cell (e.g. a toolbar control) - leave it alone too.
+  return kind ? { kind, cell: undefined } : undefined
+}
+
 export function useGridNavigation(scroller: Ref<HTMLElement | undefined>, options: GridNavigationOptions) {
   const state = reactive({
     /** -1 = header row. */
@@ -73,6 +115,23 @@ export function useGridNavigation(scroller: Ref<HTMLElement | undefined>, option
   }
 
   function handleKeydown(event: KeyboardEvent): void {
+    // ARIA grid: keys inside a cell's control belong to the control,
+    // Escape returns focus to the cell.
+    const control = cellControl(event)
+    if (control) {
+      // An open popup (wa-select) closes itself on Escape at document level.
+      // composedPath()[0], not event.target: the target is retargeted to the host.
+      const origin = event.composedPath()[0]
+      const popupOpen = origin instanceof HTMLElement && origin.getAttribute("aria-expanded") === "true"
+      if (event.key === "Escape" && !event.defaultPrevented && !popupOpen && control.cell) {
+        event.preventDefault()
+        control.cell.focus()
+        return
+      }
+      if (control.kind === "text") return
+      if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") return
+    }
+
     const rows = options.rowCount()
     const cols = options.colCount()
     const inHeader = state.row === -1

package/src/request/request.js

@@ -62,31 +62,43 @@ let _skeyPending = null
 
 async function _refillSkeys(renderer) {
   const base = import.meta.env.VITE_API_URL ?? window.location.origin
-  let response = await fetch(`${base}/${renderer}/skey?amount=${SKEY_BATCH_SIZE}`, { credentials: "include" })
-  if (!response.ok) {
-    response = await fetch(`${base}/${renderer}/skey`, { credentials: "include" })
-    if (!response.ok) throw new Error("Failed to fetch skey token")
+  try {
+    let response = await fetch(`${base}/${renderer}/skey?amount=${SKEY_BATCH_SIZE}`, { credentials: "include" })
+    if (!response.ok) {
+      response = await fetch(`${base}/${renderer}/skey`, { credentials: "include" })
+      if (!response.ok) throw new Error("Failed to fetch skey token")
+    }
+    let data = await response.json()
+    if (!Array.isArray(data)) data = [data]
+    _skeyCache.push(...data)
+  } finally {
+    // also on failure: otherwise every later caller awaits the same rejected promise
+    _skeyPending = null
   }
-  let data = await response.json()
-  if (!Array.isArray(data)) data = [data]
-  _skeyCache.push(...data)
-  _skeyPending = null
 }
 
 async function fetchSkeyToken(renderer) {
-  if (_skeyCache.length === 0) {
-    if (!_skeyPending) _skeyPending = _refillSkeys(renderer)
-    await _skeyPending
+  try {
+    if (_skeyCache.length === 0) {
+      if (!_skeyPending) _skeyPending = _refillSkeys(renderer)
+      await _skeyPending
+    }
+    return _skeyCache.shift()
+  } catch (error) {
+    throw error
   }
-  return _skeyCache.shift()
 }
 
 async function executeAndThrow(fetchResult, executeImpl) {
-  await executeImpl()
-  if (fetchResult.error.value) {
-    throw fetchResult.error.value
+  try {
+    await executeImpl()
+    if (fetchResult.error.value) {
+      throw fetchResult.error.value
+    }
+    return fetchResult
+  } catch (error) {
+    throw error
   }
-  return fetchResult
 }
 
 function createControllerListFetch({ all = false, secure = false } = {}) {
@@ -115,6 +127,11 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
     const orders = ref([])
     const params = ref({ ...initialParams })
     let _isNext = false
+    // Bumped by execute()/reset(). A request remembers the generation it started
+    // in; once a newer one exists it must not write anymore. Aborting alone is
+    // not enough: after the list response arrived, afterFetch still awaits the
+    // structure round trip and would then write into the already cleared state.
+    let _generation = 0
 
     function _buildUrl() {
       const base = url ?? create_url({ controller, endpoint: group ? `list/${group}` : "list", renderer, version })
@@ -135,7 +152,7 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
      * Additionally, the structure can be a PAIR LIST
      * (`json.bone.structure.keytuples`) — normalizeStructure flattens that.
      */
-    async function _fetchStructure() {
+    async function _fetchStructure(generation) {
       const skeltype =
         params.value.skelType === "node"
           ? "viewNodeSkel"
@@ -146,11 +163,15 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       if (params.value.skelType) {
         url += `${url.includes("?") ? "&" : "?"}skelType=${encodeURIComponent(params.value.skelType)}`
       }
-      const resp = await fetch(url, { credentials: "include", headers: { Accept: "application/json" } })
-      if (!resp.ok) return
-      const body = normalizeEnvelope(await resp.json())
-      const raw = body?.["structure"] ?? body?.[skeltype]
-      if (raw) structure.value = normalizeStructure(raw)
+      try {
+        const resp = await fetch(url, { credentials: "include", headers: { Accept: "application/json" } })
+        if (!resp.ok) return
+        const body = normalizeEnvelope(await resp.json())
+        const raw = body?.["structure"] ?? body?.[skeltype]
+        if (raw && generation === _generation) structure.value = normalizeStructure(raw)
+      } catch {
+        // the structure is optional, the list stays usable without it
+      }
     }
 
     const listUrl = ref(_buildUrl())
@@ -166,7 +187,9 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
           const extraHeaders = typeof headers === "function" ? headers() : headers
           if (extraHeaders) options.headers = { ...options.headers, ...extraHeaders }
           if (cached && !_isNext) {
-            const hit = await getCached(url, ttl)
+            const hit = await getCached(url, ttl).catch((error) => {
+              throw error
+            })
             if (hit) {
               data.value = hit.data ?? hit.skellist ?? hit
               cursor.value = hit.meta?.cursor ?? hit.cursor ?? ""
@@ -175,17 +198,29 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
               return { options, url }
             }
           }
-          if (!secure) return { options, url }
-          const skey = await fetchSkeyToken(renderer)
-          const separator = url.includes("?") ? "&" : "?"
-          return { url: `${url}${separator}skey=${skey}`, options }
+          const generation = _generation
+          if (!secure) return { options, url, generation }
+          try {
+            const skey = await fetchSkeyToken(renderer)
+            const separator = url.includes("?") ? "&" : "?"
+            return { url: `${url}${separator}skey=${skey}`, options, generation }
+          } catch (error) {
+            throw error
+          }
         },
         async afterFetch(ctx) {
           // Normalize v1/v2 up to the canonical v2 envelope, then read the list
           // payload from `data` and pagination from `meta`.
+          const { generation } = ctx.context
+          if (generation !== _generation) return ctx
           const responseData = normalizeEnvelope(ctx.data)
           if (!_isNext) {
-            await _fetchStructure()
+            try {
+              await _fetchStructure(generation)
+            } catch (error) {
+              throw error
+            }
+            if (generation !== _generation) return ctx
           }
           const list = responseData.data ?? []
           // Some installations deliver the structure along with the list
@@ -199,12 +234,19 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
           data.value = _isNext ? data.value.concat(list) : list
           if (cached && !_isNext) {
             const entityKeys = list.map((s) => s.key).filter(Boolean)
-            await setCached(ctx.url ?? listUrl.value, responseData, entityKeys)
+            await setCached(ctx.url ?? listUrl.value, responseData, entityKeys).catch((error) => {
+              throw error
+            })
           }
           ctx.data = data.value
           return ctx
         },
         onFetchError(ctx) {
+          // A superseded or aborted request is no failure: keep the current
+          // error as it is (null for the run that replaced this one).
+          if (ctx.context.generation !== _generation || ctx.error?.name === "AbortError") {
+            return { ...ctx, error: error.value }
+          }
           ctx.error = new HTTPError(ctx.response?.status, ctx.response?.statusText, ctx.error?.message, ctx.response)
           if (messages) {
             notify(
@@ -216,7 +258,9 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       },
     })
 
-    const { isFetching, isFinished, error, execute: _execute, abort } = useViurFetch(listUrl, { immediate }).json()
+    // all=true starts through our own execute() below, which loads every page
+    const fetchOptions = { immediate: immediate && !all }
+    const { isFetching, isFinished, error, execute: _execute, abort } = useViurFetch(listUrl, fetchOptions).json()
 
     /** Everything loaded: last response is in and no cursor left open. From here
      *  on, sorting/filtering may run locally on the dataset. */
@@ -239,17 +283,16 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       reset,
     }
 
-    // when all=true: automatically fetch next pages until cursor is empty
-    watch(isFinished, async (finished) => {
-      if (finished && all && cursor.value) {
-        params.value = { ...params.value, cursor: cursor.value }
-        _isNext = true
-        listUrl.value = _buildUrl()
-        await executeAndThrow(fetchResult, _execute)
-      }
-    })
+    if (all && immediate) {
+      execute().catch(() => {
+        // already in `error`; rethrowing here would only be an unhandled rejection
+      })
+    }
 
-    function execute() {
+    /** First page; with all=true it only resolves once every page is in. */
+    async function execute() {
+      _generation++
+      const generation = _generation
       _isNext = false
       abort()
       data.value = []
@@ -259,40 +302,61 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       const { cursor: _, ...rest } = params.value
       params.value = rest
       listUrl.value = _buildUrl()
-      return executeAndThrow(fetchResult, _execute)
+      try {
+        const result = await executeAndThrow(fetchResult, _execute)
+        // a newer execute()/reset() took over meanwhile — that one loads the rest
+        if (all && generation === _generation) await nextAll()
+        return result
+      } catch (error) {
+        throw error
+      }
     }
 
     /** Load one more page; detects the ViUR end (empty page with the same
      *  cursor marker) and then clears the cursor. Returns true on progress. */
     async function _advance() {
-      if (!cursor.value) return false
-      const before = data.value.length
-      const cursorBefore = cursor.value
-      params.value = { ...params.value, cursor: cursor.value }
-      _isNext = true
-      listUrl.value = _buildUrl()
-      await executeAndThrow(fetchResult, _execute)
-      if (data.value.length === before && cursor.value === cursorBefore) {
-        cursor.value = ""
-        return false
+      try {
+        if (!cursor.value) return false
+        const before = data.value.length
+        const cursorBefore = cursor.value
+        params.value = { ...params.value, cursor: cursor.value }
+        _isNext = true
+        listUrl.value = _buildUrl()
+        await executeAndThrow(fetchResult, _execute)
+        if (data.value.length === before && cursor.value === cursorBefore) {
+          cursor.value = ""
+          return false
+        }
+        return true
+      } catch (error) {
+        throw error
       }
-      return true
     }
 
     /** Load the next `pages` pages (default: one) — e.g. directly as the
      *  handler of the DataTable cursor bar: `@load-more="({ pages }) =>
      *  pages === 'all' ? list.nextAll() : list.next(pages)"`. */
     async function next(pages = 1) {
-      let remaining = pages
-      while (remaining-- > 0) {
-        if (!(await _advance())) return
+      try {
+        let remaining = pages
+        while (remaining-- > 0) {
+          if (!(await _advance())) return
+        }
+      } catch (error) {
+        throw error
       }
     }
 
     /** Load all remaining pages ("load everything"). */
     async function nextAll() {
-      while (await _advance()) {
-        /* until the end */
+      const generation = _generation
+      try {
+        // stops when execute()/filter()/reset() restarts the list meanwhile
+        while (generation === _generation && (await _advance())) {
+          /* until the end */
+        }
+      } catch (error) {
+        throw error
       }
     }
 
@@ -302,6 +366,7 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
     }
 
     function reset() {
+      _generation++
       abort()
       data.value = []
       structure.value = {}
@@ -367,23 +432,35 @@ export function useTreeFetch(
   // detects the ViUR end (empty page with the same cursor marker) itself and
   // then clears its cursor — only progress counts here.
   async function _nextOf(list) {
-    const before = list.data.value.length
-    await list.next()
-    return list.data.value.length > before
+    try {
+      const before = list.data.value.length
+      await list.next()
+      return list.data.value.length > before
+    } catch (error) {
+      throw error
+    }
   }
 
   async function next() {
-    if (nodes.cursor.value && (await _nextOf(nodes))) return
-    if (leaves.cursor.value) await _nextOf(leaves)
+    try {
+      if (nodes.cursor.value && (await _nextOf(nodes))) return
+      if (leaves.cursor.value) await _nextOf(leaves)
+    } catch (error) {
+      throw error
+    }
   }
 
   /** Load all remaining pages of both lists ("load everything"). */
   async function nextAll() {
-    while (nodes.cursor.value) {
-      if (!(await _nextOf(nodes))) break
-    }
-    while (leaves.cursor.value) {
-      if (!(await _nextOf(leaves))) break
+    try {
+      while (nodes.cursor.value) {
+        if (!(await _nextOf(nodes))) break
+      }
+      while (leaves.cursor.value) {
+        if (!(await _nextOf(leaves))) break
+      }
+    } catch (error) {
+      throw error
     }
   }
 
@@ -459,7 +536,12 @@ export function createControllerFetch({
       },
       options: {
         async beforeFetch({ options, url, cancel }) {
-          const skeyToken = secure ? ctxSkey || (await fetchSkeyToken(renderer)) : null
+          let skeyToken = null
+          try {
+            skeyToken = secure ? ctxSkey || (await fetchSkeyToken(renderer)) : null
+          } catch (error) {
+            throw error
+          }
           const base = create_url({ controller, endpoint, renderer, version, lang })
           const extraQs = query ? (typeof query === "string" ? query : new URLSearchParams(query).toString()) : ""
 
@@ -473,7 +555,9 @@ export function createControllerFetch({
             _cacheKey = qs ? `${base}?${qs}` : base
 
             if (cached) {
-              const hit = await getCached(_cacheKey, ttl)
+              const hit = await getCached(_cacheKey, ttl).catch((error) => {
+                throw error
+              })
               if (hit) {
                 _cachedHit = hit
                 cancel()
@@ -525,18 +609,25 @@ export function createControllerFetch({
           }
           if (cached && method.toUpperCase() === "GET" && _cacheKey) {
             const entityKey = ctx.data?.data?.key
-            await setCached(_cacheKey, ctx.data, entityKey ? [entityKey] : [])
+            await setCached(_cacheKey, ctx.data, entityKey ? [entityKey] : []).catch((error) => {
+              throw error
+            })
           }
           if (invalidates) {
             const keys = []
             if (data.key) keys.push(data.key)
             if (ctx.data?.data?.key) keys.push(ctx.data.data.key)
-            if (keys.length) await invalidateByKey(keys)
+            if (keys.length)
+              await invalidateByKey(keys).catch((error) => {
+                throw error
+              })
           }
           if (invalidatesAll) {
             const base = import.meta.env.VITE_API_URL ?? window.location.origin
             const controllerPath = Array.isArray(controller) ? controller.join("/") : controller
-            await clearCache(`${base}/${renderer}/${controllerPath}/`)
+            await clearCache(`${base}/${renderer}/${controllerPath}/`).catch((error) => {
+              throw error
+            })
           }
           return ctx
         },
@@ -586,47 +677,51 @@ export async function uploadFile(
   file,
   { target = undefined, publicUpload = false, renderer = null, version = null } = {}
 ) {
-  const _renderer = renderer ?? import.meta.env.VITE_DEFAULT_RENDERER ?? "json"
-  const fetchOpts = { credentials: "include", headers: { Accept: "application/json" }, method: "POST" }
-
-  // Step 1: get upload URL
-  const filedata = {
-    fileName: file.name,
-    mimeType: file.type || "application/octet-stream",
-    size: file.size.toString(),
-  }
-  if (target) filedata.node = target
-  if (publicUpload) filedata.public = true
-  const fd1 = _toFormData(filedata)
-  fd1.append("skey", await fetchSkeyToken(_renderer))
+  try {
+    const _renderer = renderer ?? import.meta.env.VITE_DEFAULT_RENDERER ?? "json"
+    const fetchOpts = { credentials: "include", headers: { Accept: "application/json" }, method: "POST" }
+
+    // Step 1: get upload URL
+    const filedata = {
+      fileName: file.name,
+      mimeType: file.type || "application/octet-stream",
+      size: file.size.toString(),
+    }
+    if (target) filedata.node = target
+    if (publicUpload) filedata.public = true
+    const fd1 = _toFormData(filedata)
+    fd1.append("skey", await fetchSkeyToken(_renderer))
+
+    const getUrlResp = await fetch(
+      create_url({ controller: "file", endpoint: "getUploadURL", renderer: _renderer, version }),
+      {
+        ...fetchOpts,
+        body: fd1,
+      }
+    )
+    if (!getUrlResp.ok) throw new Error(`getUploadURL failed: ${getUrlResp.status}`)
+    // Envelope-agnostic: v2 carries the payload in `data`, v1 in `values`.
+    const getUrlData = normalizeEnvelope(await getUrlResp.json())
+    const { uploadUrl, uploadKey } = getUrlData.data ?? getUrlData.values ?? {}
 
-  const getUrlResp = await fetch(
-    create_url({ controller: "file", endpoint: "getUploadURL", renderer: _renderer, version }),
-    {
+    // Step 2: upload raw bytes to external storage (no-cors, no credentials)
+    await fetch(uploadUrl, { method: "POST", body: file, mode: "no-cors" })
+
+    // Step 3: register file in ViUR
+    const fd3 = _toFormData({ key: uploadKey, skelType: "leaf" })
+    fd3.append("skey", await fetchSkeyToken(_renderer))
+
+    const addResp = await fetch(create_url({ controller: "file", endpoint: "add", renderer: _renderer, version }), {
       ...fetchOpts,
-      body: fd1,
-    }
-  )
-  if (!getUrlResp.ok) throw new Error(`getUploadURL failed: ${getUrlResp.status}`)
-  // Envelope-agnostic: v2 carries the payload in `data`, v1 in `values`.
-  const getUrlData = normalizeEnvelope(await getUrlResp.json())
-  const { uploadUrl, uploadKey } = getUrlData.data ?? getUrlData.values ?? {}
-
-  // Step 2: upload raw bytes to external storage (no-cors, no credentials)
-  await fetch(uploadUrl, { method: "POST", body: file, mode: "no-cors" })
-
-  // Step 3: register file in ViUR
-  const fd3 = _toFormData({ key: uploadKey, skelType: "leaf" })
-  fd3.append("skey", await fetchSkeyToken(_renderer))
-
-  const addResp = await fetch(create_url({ controller: "file", endpoint: "add", renderer: _renderer, version }), {
-    ...fetchOpts,
-    body: fd3,
-  })
-  if (!addResp.ok) throw new Error(`file/add failed: ${addResp.status}`)
-  const addData = normalizeEnvelope(await addResp.json())
-  if (addData.status !== "success") throw new Error(`Upload failed: ${JSON.stringify(addData)}`)
-  return addData.data ?? addData.values
+      body: fd3,
+    })
+    if (!addResp.ok) throw new Error(`file/add failed: ${addResp.status}`)
+    const addData = normalizeEnvelope(await addResp.json())
+    if (addData.status !== "success") throw new Error(`Upload failed: ${JSON.stringify(addData)}`)
+    return addData.data ?? addData.values
+  } catch (error) {
+    throw error
+  }
 }
 
 function _absolute(url) {

package/src/theme/colorStore.js

@@ -16,7 +16,8 @@ import { useConfigStore } from "../request/configStore.js"
 // 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). */
+ *  950 → 3 %), step by step on WebAwesome's steps (95 … 05) — except the
+ *  lightest step, which is brighter (95 % instead of 83 %). */
 export const BRAND_LIGHTNESS = [
   ["95", 95],
   ["90", 78],

package/src/public/assets/icons/fontawesome-manifest.json

@@ -1,8 +0,0 @@
-{
-  "package": "@fortawesome/fontawesome-free",
-  "version": "7.2.0",
-  "totalRequested": 14,
-  "copied": 14,
-  "missing": [],
-  "timestamp": "2026-03-26T08:36:14.058Z"
-}

package/src/public/assets/icons/regular/file.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M176 48L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0c8.8 0 16-7.2 16-16l0-240-88 0c-39.8 0-72-32.2-72-72l0-88zM316.1 160L224 67.9 224 136c0 13.3 10.7 24 24 24l68.1 0zM0 64C0 28.7 28.7 0 64 0L197.5 0c17 0 33.3 6.7 45.3 18.7L365.3 141.3c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z"/></svg>

package/src/public/assets/icons/solid/arrows-left-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M470.6 374.6l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l41.4 41.4-357.5 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-41.4-41.4 357.5 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>

package/src/public/assets/icons/solid/bug.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M192 96c0-53 43-96 96-96s96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6zm345.6 12.8c10.6 14.1 7.7 34.2-6.4 44.8l-97.8 73.3c5.3 8.9 9.3 18.7 11.8 29.1l98.8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0 0 32c0 2.6-.1 5.3-.2 7.9l83.4 62.5c14.1 10.6 17 30.7 6.4 44.8s-30.7 17-44.8 6.4l-63.1-47.3c-23.2 44.2-66.5 76.2-117.7 83.9L312 280c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 230.2c-51.2-7.7-94.5-39.7-117.7-83.9L83.2 473.6c-14.1 10.6-34.2 7.7-44.8-6.4s-7.7-34.2 6.4-44.8l83.4-62.5c-.1-2.6-.2-5.2-.2-7.9l0-32-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l98.8 0c2.5-10.4 6.5-20.2 11.8-29.1L44.8 153.6c-14.1-10.6-17-30.7-6.4-44.8s30.7-17 44.8-6.4L192 184c12.3-5.1 25.8-8 40-8l112 0c14.2 0 27.7 2.8 40 8l108.8-81.6c14.1-10.6 34.2-7.7 44.8 6.4z"/></svg>

package/src/public/assets/icons/solid/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>

package/src/public/assets/icons/solid/circle-info.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>

package/src/public/assets/icons/solid/compress.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M160 64c0-17.7-14.3-32-32-32S96 46.3 96 64l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 320c-17.7 0-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0z"/></svg>

package/src/public/assets/icons/solid/download.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M256 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 210.7-41.4-41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 242.7 256 32zM64 320c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-46.9 0-56.6 56.6c-31.2 31.2-81.9 31.2-113.1 0L110.9 320 64 320zm304 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>

package/src/public/assets/icons/solid/expand.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z"/></svg>

package/src/public/assets/icons/solid/grip-vertical.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M128 40c0-22.1-17.9-40-40-40L40 0C17.9 0 0 17.9 0 40L0 88c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48zM0 424l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM320 40c0-22.1-17.9-40-40-40L232 0c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48zM192 232l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM320 424c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48z"/></svg>

package/src/public/assets/icons/solid/plus.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z"/></svg>

package/src/public/assets/icons/solid/question.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M64 160c0-53 43-96 96-96s96 43 96 96c0 42.7-27.9 78.9-66.5 91.4-28.4 9.2-61.5 35.3-61.5 76.6l0 24c0 17.7 14.3 32 32 32s32-14.3 32-32l0-24c0-1.7 .6-4.1 3.5-7.3 3-3.3 7.9-6.5 13.7-8.4 64.3-20.7 110.8-81 110.8-152.3 0-88.4-71.6-160-160-160S0 71.6 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm96 352c22.1 0 40-17.9 40-40s-17.9-40-40-40-40 17.9-40 40 17.9 40 40 40z"/></svg>

package/src/public/assets/icons/solid/triangle-exclamation.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"/></svg>

package/src/public/assets/icons/solid/upload.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M256 109.3L256 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-210.7-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0l96 96c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 109.3zM224 400c44.2 0 80-35.8 80-80l80 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64l80 0c0 44.2 35.8 80 80 80zm144 24a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>

package/src/public/assets/icons/solid/xmark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"/></svg>