merge: UI polish bundle (#73)

Five small design/layout nits from the UI sweep:

- form.selectPlaceholder "— select —" → "Select…" / "Välj…", matching
  the affordance style of every other placeholder (Filter…, Search…).
- FieldForm in edit mode now explains its locked controls with a muted
  fields.lockedNote caption ("Key and type can't be changed after
  creation.") instead of leaving four silently disabled inputs.
- FieldList rows truncate long labels (min-w-0 on the row button +
  truncate on the label, shrink-0 on the badge and required marker)
  instead of overflowing the 20rem column.
- The sidebar collapse toggle is hidden on narrow viewports (hidden
  md:flex) instead of rendered permanently disabled/grayed — the rail
  is forced collapsed there anyway.
- PageTitle gains text-balance so long titles wrap evenly.

Closes #73

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/superpowers/plans/2026-06-09-timestamp-tz.md

@@ -0,0 +1,154 @@
+# Instance-Timezone Timestamp Formatter — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a shared `formatTimestamp(value, timeZone, locale)` helper (date+time in the instance timezone, with an invalid-IANA → UTC fallback) and route the objects-table "Updated" column through it.
+
+**Architecture:** Task 1 adds `lib/format-timestamp.ts` (mirrors `lib/format-date.ts`) + its unit test. Task 2 swaps objects-table's inline `dateFmt`/`formatUpdated` for the helper and runs the full gate. Display-only; UTC stays in storage/transmission.
+
+**Tech Stack:** React 19 + TS + pnpm, `Intl.DateTimeFormat`, Vitest 4 (jsdom).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon. No new dependency, no new i18n keys, no backend change.
+
+**Spec:** `docs/superpowers/specs/2026-06-09-timestamp-tz-design.md`
+
+**Key facts:**
+- `lib/format-date.ts` is the sibling pattern (date-only, no tz): `if (typeof value !== "string") return value == null ? "—" : String(value); const date = new Date(\`${value}T00:00:00\`); if (Number.isNaN(date.getTime())) return value; return new Intl.DateTimeFormat(lang, { dateStyle: "medium" }).format(date);`.
+- `objects/objects-table.tsx`: `const { t, i18n } = useTranslation();` (line ~31), `const { default_timezone } = useConfig();` (~32). Lines ~123-131 are the inline `const dateFmt = new Intl.DateTimeFormat(i18n.language, { dateStyle: "medium", timeZone: default_timezone });` + `const formatUpdated = (iso: string) => { const parsed = new Date(iso); return Number.isNaN(parsed.getTime()) ? iso : dateFmt.format(parsed); };`. The Updated cell (~line 270): `<td className="px-3 py-2 text-muted-foreground">{formatUpdated(object.updated_at)}</td>`.
+- After removing `dateFmt`/`formatUpdated`, both `i18n` and `default_timezone` remain used (passed to `formatTimestamp`), and `t` is used elsewhere — no unused-locals.
+- `objects-table.test.tsx` does NOT assert the rendered Updated value → no test edit needed there. Fixture `amphora.updated_at = "2026-01-05T14:30:00Z"`.
+
+---
+
+# Task 1: `lib/format-timestamp.ts` + test
+
+**Files:** Create `web/src/lib/format-timestamp.ts`, `web/src/lib/format-timestamp.test.ts`.
+
+- [ ] **Step 1: Create `web/src/lib/format-timestamp.ts`:**
+```ts
+/** Formats a UTC ISO timestamp for display in the instance timezone + active locale.
+ *  Storage/transmission stay UTC — this is display-only. Falls back to UTC formatting on an
+ *  invalid IANA zone (a misconfigured instance) rather than throwing. */
+export function formatTimestamp(value: unknown, timeZone: string, locale: string): string {
+  if (typeof value !== "string") return value == null ? "—" : String(value);
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  const opts = { dateStyle: "medium", timeStyle: "short" } as const;
+
+  try {
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone }).format(date);
+  } catch {
+    // Invalid IANA timeZone (misconfigured instance) — fall back to UTC rather than crash.
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone: "UTC" }).format(date);
+  }
+}
+```
+
+- [ ] **Step 2: Create `web/src/lib/format-timestamp.test.ts`** (write + run):
+```ts
+import { expect, test } from "vitest";
+
+import { formatTimestamp } from "./format-timestamp";
+
+test("formats a UTC timestamp with date and time in the given locale", () => {
+  const out = formatTimestamp("2026-06-08T12:30:00Z", "UTC", "en");
+  expect(out).toContain("2026");
+  expect(out).toContain("12:30");
+});
+
+test("applies the timezone — a near-midnight UTC instant shifts the calendar day", () => {
+  // 02:00 UTC on Jun 8 is 22:00 on Jun 7 in New York (EDT, UTC-4)
+  const ny = formatTimestamp("2026-06-08T02:00:00Z", "America/New_York", "en");
+  const utc = formatTimestamp("2026-06-08T02:00:00Z", "UTC", "en");
+  expect(ny).toContain("Jun 7");
+  expect(utc).toContain("Jun 8");
+});
+
+test("an invalid IANA zone does not throw and falls back to UTC", () => {
+  const out = formatTimestamp("2026-06-08T12:30:00Z", "Not/AZone", "en");
+  expect(out).toContain("2026");
+});
+
+test("null renders the em-dash placeholder; an unparseable string is returned unchanged", () => {
+  expect(formatTimestamp(null, "UTC", "en")).toBe("—");
+  expect(formatTimestamp("not-a-date", "UTC", "en")).toBe("not-a-date");
+});
+```
+Run: `cd web && pnpm vitest run src/lib/format-timestamp.test.ts` → 4 passing. (Full-ICU Node renders en medium+short as e.g. `"Jun 8, 2026, 12:30 PM"`; the assertions check substrings — `2026`, `12:30`, `Jun 7`/`Jun 8` — to stay robust across ICU punctuation. If the local ICU renders the time without a leading-zero/`12:30`, assert the day-shift `Jun 7` vs `Jun 8` which is the load-bearing tz check.)
+
+- [ ] **Step 3: Verify + lint:**
+```bash
+cd web && pnpm vitest run src/lib/format-timestamp.test.ts && pnpm typecheck && pnpm lint
+```
+All green.
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/lib/format-timestamp.ts web/src/lib/format-timestamp.test.ts
+git commit -m "feat(web): formatTimestamp helper (instance tz + locale, UTC fallback) (#42)"
+```
+
+---
+
+# Task 2: Route objects-table "Updated" through `formatTimestamp` + full gate
+
+**Files:** Modify `web/src/objects/objects-table.tsx`.
+
+- [ ] **Step 1: Add the import** to `web/src/objects/objects-table.tsx` (alongside the other `../lib/*` imports):
+```ts
+import { formatTimestamp } from "../lib/format-timestamp";
+```
+
+- [ ] **Step 2: Remove the inline formatter.** Delete the `const dateFmt = new Intl.DateTimeFormat(i18n.language, { dateStyle: "medium", timeZone: default_timezone });` block AND the `const formatUpdated = (iso: string) => { … };` function (the ~9 lines, currently around lines 123-131). (`i18n` and `default_timezone` stay declared — they're now passed to `formatTimestamp` at the call site; `t` remains used elsewhere.)
+
+- [ ] **Step 3: Update the Updated cell.** Change:
+```tsx
+              <td className="px-3 py-2 text-muted-foreground">{formatUpdated(object.updated_at)}</td>
+```
+to:
+```tsx
+              <td className="px-3 py-2 text-muted-foreground">
+                {formatTimestamp(object.updated_at, default_timezone, i18n.language)}
+              </td>
+```
+
+- [ ] **Step 4: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. The objects-table tests stay green (they don't assert the Updated cell's text). Report total test count, largest chunk (gz), the check:colors line. If typecheck flags `i18n`/`default_timezone` as unused, the call site in Step 3 must reference them (it does) — re-check the edit.
+
+- [ ] **Step 5: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 6: Manual smoke (recommended).** `pnpm dev`: the objects list "Updated" column now shows date + time in the instance timezone (e.g. for an instance in `Europe/Stockholm`, a `…T14:30:00Z` value renders ~`Jan 5, 2026, 3:30 PM`); switching the UI language reformats it.
+
+- [ ] **Step 7: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/objects/objects-table.tsx
+git commit -m "feat(web): render objects 'Updated' as a tz-aware timestamp via formatTimestamp (#42)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 `formatTimestamp` helper + unit tests incl. day-shift + invalid-zone (T1); AC2 objects-table adoption, inline formatter removed, date+time (T2 S1-S3); AC3 gate/codename/no-new-dep-or-keys (T2 S4-S5). ✓
+
+**Placeholder scan:** full helper + test code; the ICU-substring note gives a concrete robustness fallback (assert `Jun 7`/`Jun 8`); exact lines/strings for the objects-table edit. No TBD. ✓
+
+**Type/consistency:** `formatTimestamp(value: unknown, timeZone: string, locale: string)` (T1) called as `formatTimestamp(object.updated_at, default_timezone, i18n.language)` (T2) — `updated_at: string`, `default_timezone: string` (useConfig), `i18n.language: string`. ✓
+
+## Notes
+- No new dependency, no new i18n keys, no backend change. `format-date.ts` (plain DATE) is untouched.
+- The helper constructs an `Intl.DateTimeFormat` per call (vs the prior once-per-render memo); negligible for the ≤200-row page.
+- Only the one timestamp display exists today; future displays (object-detail created/updated, audit history) route through the same helper when they land.

docs/superpowers/specs/2026-06-09-timestamp-tz-design.md

@@ -0,0 +1,104 @@
+# Instance-Timezone Timestamp Formatter — Design
+
+**Date:** 2026-06-09
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #42 (render UTC timestamps in the instance timezone via Intl — now that a display exists).
+
+## Context
+
+#42 was filed conditionally ("wire up the `default_timezone` formatter when the first timestamp display
+lands"). That condition is now met: the objects-table **"Updated" column** (`updated_at`, a UTC timestamp)
+is rendered — and it's already timezone+locale-aware, but via an **inline** `Intl.DateTimeFormat` in
+`objects-table.tsx` (`dateStyle: "medium"`, `timeZone: default_timezone`) that:
+- is **not** the shared `formatTimestamp` helper the issue asks for,
+- shows **date only** (no time-of-day), and
+- has **no invalid-IANA guard** — a misconfigured `default_timezone` would make `Intl.DateTimeFormat`
+  throw a `RangeError` and crash the table.
+
+`recording_date` (object-detail) is a plain `DATE` formatted by `lib/format-date.ts` (no timezone) — correct
+and out of scope. There are no other UTC-timestamp displays. `default_timezone` is exposed via
+`useConfig().default_timezone` (IANA name; default `"Europe/Stockholm"`).
+
+This is a display-only change: storage/transmission stay UTC. No backend change, no new dependency, no new
+i18n keys.
+
+## Components
+
+### `lib/format-timestamp.ts` (new)
+Mirrors `lib/format-date.ts`'s shape (same null/invalid-string edge handling), for UTC **timestamps**:
+```ts
+/** Formats a UTC ISO timestamp for display in the instance timezone + active locale.
+ *  Storage/transmission stay UTC — this is display-only. Falls back to UTC formatting on an
+ *  invalid IANA zone (a misconfigured instance) rather than throwing. */
+export function formatTimestamp(value: unknown, timeZone: string, locale: string): string {
+  if (typeof value !== "string") return value == null ? "—" : String(value);
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  const opts = { dateStyle: "medium", timeStyle: "short" } as const;
+  try {
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone }).format(date);
+  } catch {
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone: "UTC" }).format(date);
+  }
+}
+```
+- **date + short time** (the chosen display) in `timeZone` + `locale`.
+- **Invalid-IANA guard:** `new Intl.DateTimeFormat(locale, { timeZone })` throws `RangeError` for a bad
+  zone → the `catch` re-formats with `timeZone: "UTC"` (no crash).
+- Edge handling matches `format-date.ts`: non-string `null` → `"—"`; other non-strings → `String(value)`;
+  an unparseable string → returned unchanged.
+
+### `objects/objects-table.tsx` (modify)
+Remove the inline `const dateFmt = new Intl.DateTimeFormat(...)` + `formatUpdated` helper. Add
+`import { formatTimestamp } from "../lib/format-timestamp";`. Keep `default_timezone` (from `useConfig()`)
+and `i18n.language`. Render the Updated cell as:
+```tsx
+<td className="px-3 py-2 text-muted-foreground">
+  {formatTimestamp(object.updated_at, default_timezone, i18n.language)}
+</td>
+```
+The column changes from date-only to **date + short time**. (The helper constructs an `Intl.DateTimeFormat`
+per cell rather than once-per-render; negligible for the ≤200-row page — kept simple over re-memoizing.)
+
+## Data flow / behaviour
+`updated_at` (UTC ISO from the API) → `formatTimestamp(value, default_timezone, i18n.language)` → a
+locale-formatted date+time in the instance zone. Identical data; only the display string changes (now
+includes the time and is crash-guarded).
+
+## Error handling / edges
+- Invalid `default_timezone` → UTC-formatted output (guarded), never a thrown render.
+- `null`/non-string `updated_at` → `"—"`/`String(value)` (defensive; in practice `updated_at` is always a
+  string).
+- Unparseable date string → returned verbatim (matches `format-date.ts`).
+- Locale comes from `i18n.language` (full-ICU Node in CI / browsers) — deterministic per locale.
+
+## Testing
+- **`lib/format-timestamp.test.ts`** (new):
+  - valid: `formatTimestamp("2026-06-08T12:30:00Z", "UTC", "en")` contains `"2026"` and `"12:30"` (date +
+    time rendered).
+  - **timezone applied (day-shift):** `formatTimestamp("2026-06-08T02:00:00Z", "America/New_York", "en")`
+    shows `Jun 7` (02:00 UTC = 22:00 prev-day EDT), distinct from the same instant in `"UTC"` (`Jun 8`) —
+    proves the zone is honored.
+  - **invalid IANA:** `formatTimestamp("2026-06-08T12:30:00Z", "Not/AZone", "en")` does **not** throw and
+    returns a non-empty string containing `"2026"` (UTC fallback).
+  - `null` → `"—"`; `"not-a-date"` → `"not-a-date"`.
+- **`objects-table.test.tsx`:** the suite does not assert the rendered Updated value, so it stays green;
+  if any assertion is added/affected, assert the new date+time output loosely (don't pin the exact locale
+  string).
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new dependency; no new
+  i18n keys; no codename; en/sv parity unaffected.
+
+## Acceptance criteria
+1. `lib/format-timestamp.ts` exports `formatTimestamp(value, timeZone, locale)` — date+time in the given
+   zone/locale, with a UTC fallback on an invalid IANA zone and the null/invalid edge handling; unit-tested
+   (incl. the day-shift + invalid-zone cases).
+2. `objects-table.tsx` renders `updated_at` via `formatTimestamp(object.updated_at, default_timezone,
+   i18n.language)`; the inline `dateFmt`/`formatUpdated` are removed; the column shows date + short time.
+3. All existing tests pass (objects-table green); `typecheck`/`lint`/`build`/`check:colors` green;
+   `check:size` reported; no new dependency; no new i18n keys; no codename.
+
+## Out of scope → follow-ups
+- Additional timestamp displays (object-detail `created_at`/`updated_at`, an audit-history view) — none
+  exist yet; route them through `formatTimestamp` when they land.
+- Server-side timestamp formatting for the PDF export (#39) — needs a Rust tz library, separate.
+- `recording_date` / `format-date.ts` (plain DATE, no timezone) — unchanged.

web/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#ffffff" />
     <title>Collection</title>
     <script>
       try {
@@ -12,6 +14,9 @@
           (t === "system" &&
             window.matchMedia("(prefers-color-scheme: dark)").matches);
         document.documentElement.classList.toggle("dark", dark);
+        // Keep in sync with THEME_COLORS in src/theme/theme.ts.
+        var meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) meta.setAttribute("content", dark ? "#0a0a0a" : "#ffffff");
       } catch (e) {}
     </script>
   </head>

web/scripts/check-no-raw-colors.mjs

@@ -5,7 +5,7 @@ import { join, relative } from "node:path";
 const root = "src";
 const excludeDir = join("src", "components", "ui");
 const RAW_COLOR =
-  /(?:text|bg|border|ring|fill|stroke|from|to|via|decoration|outline|divide|placeholder)-(?:neutral|gray|slate|zinc|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950)\b/;
+  /(?:text|bg|border|ring|fill|stroke|from|to|via|decoration|outline|divide|placeholder)-(?:(?:neutral|gray|slate|zinc|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950)|white|black)\b/;
 
 function walk(dir) {
   const files = [];

web/src/app.tsx

@@ -72,7 +72,7 @@ const router = createBrowserRouter(
           <Route path="/authorities" element={<Navigate to="/authorities/person" replace />} />
           <Route path="/authorities/:kind" element={<AuthoritiesPage />} />
           <Route
-            path="/fields"
+            path="/fields/:key?"
             element={
               <Suspense fallback={<ListSkeleton />}>
                 <FieldsPage />

web/src/auth/login-page.test.tsx

@@ -57,6 +57,31 @@ test("rejects an off-site from and falls back to /objects", async () => {
   expect(await screen.findByText("objects landing")).toBeInTheDocument();
 });
 
+test("shows Signing in… and disables the button while pending", async () => {
+  let release!: () => void;
+  const gate = new Promise<void>((r) => {
+    release = r;
+  });
+
+  server.use(
+    http.post("/api/admin/login", async () => {
+      await gate;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(tree(), { route: "/login" });
+  await userEvent.type(screen.getByLabelText(/email/i), "editor@example.com");
+  await userEvent.type(screen.getByLabelText(/password/i), "pw-editor-123");
+  await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+
+  const pending = await screen.findByRole("button", { name: /signing in/i });
+  expect(pending).toBeDisabled();
+
+  release();
+  expect(await screen.findByText("objects landing")).toBeInTheDocument();
+});
+
 test("disables submit until both fields are filled", async () => {
   renderApp(tree(), { route: "/login" });
   const button = screen.getByRole("button", { name: /sign in/i });

web/src/auth/login-page.tsx

@@ -77,7 +77,7 @@ export function LoginPage() {
           </p>
         )}
         <Button type="submit" className="w-full" disabled={login.isPending || !email.trim() || !password}>
-          {t("auth.signIn")}
+          {login.isPending ? t("auth.signingIn") : t("auth.signIn")}
         </Button>
       </form>
     </div>

web/src/components/delete-confirm-dialog.test.tsx

@@ -20,6 +20,31 @@ test("delete-in-use shows the in-use count and keeps the dialog open", async ()
   expect(dialog.getByText("Delete this term?")).toBeInTheDocument();
 });
 
+test("confirm is disabled and labelled Deleting… while pending", async () => {
+  let resolve!: () => void;
+  const onConfirm = vi.fn(
+    () =>
+      new Promise<void>((r) => {
+        resolve = r;
+      }),
+  );
+  renderApp(<DeleteConfirmDialog description="Delete this term?" onConfirm={onConfirm} />);
+
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+
+  const dialog = within(document.body);
+  const buttons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(buttons[buttons.length - 1]);
+
+  const pending = await dialog.findByRole("button", { name: /deleting/i });
+  expect(pending).toBeDisabled();
+  expect(dialog.getByRole("button", { name: /cancel/i })).toBeDisabled();
+  expect(onConfirm).toHaveBeenCalledTimes(1);
+
+  resolve();
+  await waitFor(() => expect(dialog.queryByText("Delete this term?")).toBeNull());
+});
+
 test("a clean confirm closes the dialog", async () => {
   const onConfirm = vi.fn(() => Promise.resolve());
   renderApp(<DeleteConfirmDialog description="Delete this term?" onConfirm={onConfirm} />);

web/src/components/delete-confirm-dialog.tsx

@@ -28,10 +28,12 @@ export function DeleteConfirmDialog({
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
 
   const confirm = async () => {
     setMessage(null);
+    setPending(true);
     try {
       await onConfirm();
     } catch (err) {
@@ -40,6 +42,8 @@ export function DeleteConfirmDialog({
       const { key, opts } = errorMessageKey(err);
       setMessage(t(key, opts));
       return;
+    } finally {
+      setPending(false);
     }
     setOpen(false);
   };
@@ -62,8 +66,10 @@ export function DeleteConfirmDialog({
           </p>
         )}
         <AlertDialogFooter>
-          <AlertDialogCancel>{t("form.cancel")}</AlertDialogCancel>
-          <AlertDialogAction onClick={confirm}>{t("actions.delete")}</AlertDialogAction>
+          <AlertDialogCancel disabled={pending}>{t("form.cancel")}</AlertDialogCancel>
+          <AlertDialogAction disabled={pending} onClick={confirm}>
+            {pending ? t("actions.deleting") : t("actions.delete")}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

web/src/components/external-uri-link.tsx

@@ -1,10 +1,12 @@
+import { focusRing } from "../lib/focus-ring";
+
 export function ExternalUriLink({ uri }: { uri: string }) {
   return (
     <a
       href={uri}
       target="_blank"
       rel="noopener noreferrer"
-      className="block truncate text-xs text-muted-foreground hover:text-foreground"
+      className={`block truncate rounded-sm text-xs text-muted-foreground hover:text-foreground ${focusRing}`}
     >
       {uri}
     </a>

web/src/components/ui/alert-dialog.tsx

@@ -50,7 +50,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 overscroll-y-contain rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

web/src/components/ui/combobox.tsx

@@ -20,7 +20,10 @@ function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-input"
-      className={cn("w-full rounded border px-2 py-1 pr-12 text-sm", className)}
+      className={cn(
+        "w-full rounded border px-2 py-1 pr-12 text-sm transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        className,
+      )}
       {...props}
     />
   );
@@ -31,7 +34,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
     <ComboboxPrimitive.Clear
       data-slot="combobox-clear"
       className={cn(
-        "absolute right-6 text-neutral-400 hover:text-neutral-700",
+        "absolute right-6 rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50",
         className,
       )}
       {...props}
@@ -43,7 +46,10 @@ function ComboboxTrigger({ className, ...props }: ComboboxPrimitive.Trigger.Prop
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("absolute right-1 text-neutral-500", className)}
+      className={cn(
+        "absolute right-1 rounded-sm text-muted-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+        className,
+      )}
       {...props}
     />
   );
@@ -56,7 +62,7 @@ function ComboboxPopup({ className, ...props }: ComboboxPrimitive.Popup.Props) {
         <ComboboxPrimitive.Popup
           data-slot="combobox-popup"
           className={cn(
-            "max-h-64 min-w-48 overflow-auto rounded border bg-white p-1 text-sm shadow-md",
+            "max-h-64 min-w-48 overflow-auto overscroll-y-contain rounded border bg-popover p-1 text-sm text-popover-foreground shadow-md",
             className,
           )}
           {...props}
@@ -81,7 +87,7 @@ function ComboboxItem({ className, ...props }: ComboboxPrimitive.Item.Props) {
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "flex cursor-default items-center gap-2 rounded px-2 py-1 data-[highlighted]:bg-indigo-50",
+        "flex cursor-default items-center gap-2 rounded px-2 py-1 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
         className,
       )}
       {...props}
@@ -103,7 +109,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
   return (
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
-      className={cn("px-2 py-1 text-neutral-500", className)}
+      className={cn("px-2 py-1 text-muted-foreground", className)}
       {...props}
     />
   );

web/src/components/ui/drawer.tsx

@@ -35,7 +35,7 @@ function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.
         <DrawerPrimitive.Popup
           data-slot="drawer-content"
           className={cn(
-            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
+            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto overscroll-y-contain bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
             className,
           )}
           {...props}

web/src/components/ui/page-title.tsx

@@ -6,7 +6,7 @@ export function PageTitle({ className, ...props }: ComponentProps<"h1">) {
   return (
     <h1
       data-slot="page-title"
-      className={cn("text-2xl font-semibold tracking-tight", className)}
+      className={cn("text-2xl font-semibold tracking-tight text-balance", className)}
       {...props}
     />
   )

web/src/components/ui/select.tsx

@@ -99,7 +99,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto overscroll-y-contain rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
             "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
             className
           )}

web/src/components/ui/toast.tsx

@@ -1,6 +1,7 @@
 import type * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { toastManager } from "@/toast/toast-manager";
@@ -14,9 +15,9 @@ function ToastList() {
       toast={toast}
       data-slot="toast"
       className={cn(
-        "flex items-start gap-2 rounded-md border bg-white p-3 text-sm shadow-md",
-        toast.type === "error" && "border-red-300",
-        toast.type === "success" && "border-green-300",
+        "flex items-start gap-2 rounded-md border bg-popover p-3 text-sm text-popover-foreground shadow-md",
+        toast.type === "error" && "border-destructive",
+        toast.type === "success" && "border-success",
       )}
     >
       <div className="flex-1">
@@ -28,15 +29,15 @@ function ToastList() {
         )}
         <ToastPrimitive.Description
           data-slot="toast-description"
-          className="text-neutral-700"
+          className="text-muted-foreground"
         />
       </div>
       <ToastPrimitive.Close
         data-slot="toast-close"
         aria-label={t("common.close")}
-        className="text-neutral-400 hover:text-neutral-700"
+        className="text-muted-foreground hover:text-foreground"
       >
-        ×
+        <X className="size-4" aria-hidden="true" />
       </ToastPrimitive.Close>
     </ToastPrimitive.Root>
   ));

web/src/components/ui/tooltip.tsx

@@ -22,7 +22,7 @@ function TooltipPopup({ className, ...props }: TooltipPrimitive.Popup.Props) {
     <TooltipPrimitive.Popup
       data-slot="tooltip-popup"
       className={cn(
-        "rounded border bg-white px-2 py-1 text-sm shadow-md",
+        "rounded border bg-popover px-2 py-1 text-sm text-popover-foreground shadow-md",
         className,
       )}
       {...props}

web/src/fields/field-form.tsx

@@ -110,6 +110,8 @@ export function FieldForm({
         )}
       </div>
 
+      {isEdit && <p className="text-xs text-muted-foreground">{t("fields.lockedNote")}</p>}
+
       <div className="space-y-1">
         <Label htmlFor="field-key">{t("fields.key")}</Label>
         <Input

web/src/fields/field-list.tsx

@@ -90,18 +90,23 @@ export function FieldList({
                   >
                     <button
                       type="button"
-                      className={cn("flex flex-1 items-center gap-2 rounded-sm text-left", focusRing)}
+                      className={cn(
+                        "flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left",
+                        focusRing,
+                      )}
                       aria-pressed={def.key === selectedKey}
                       onClick={() => onSelect(def)}
                     >
-                      <span className="font-medium">{labelText(def.labels, lang)}</span>
+                      <span className="min-w-0 truncate font-medium">
+                        {labelText(def.labels, lang)}
+                      </span>
                       <span className="text-xs text-muted-foreground">{def.key}</span>
-                      <Badge variant="secondary">
+                      <Badge variant="secondary" className="shrink-0">
                         {t(`fields.types.${def.data_type}`)}
                       </Badge>
                       {def.required && (
                         <span
-                          className="text-xs text-destructive"
+                          className="shrink-0 text-xs text-destructive"
                           title={t("fields.required")}
                           aria-label={t("fields.required")}
                         >

web/src/fields/fields-page.tsx

@@ -1,18 +1,23 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
 
-import type { components } from "../api/schema";
+import { useFieldDefinitions } from "../api/queries";
 import { FieldList } from "./field-list";
 import { FieldForm } from "./field-form";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 
-type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
-
 export function FieldsPage() {
   const { t } = useTranslation();
-  const [selected, setSelected] = useState<FieldDefinitionView | null>(null);
+  const navigate = useNavigate();
+  const { key } = useParams();
+  const { data } = useFieldDefinitions();
+
+  // Selection lives in the URL (/fields/:key) so it survives reload and can be
+  // shared, matching /vocabularies/:id. An unknown or absent key falls back to
+  // the create form. Same cached query as FieldList, so no extra fetch.
+  const selected = (key && data?.find((def) => def.key === key)) || null;
 
   useDocumentTitle(t("fields.title"));
   useBreadcrumb([{ label: t("nav.fields") }]);
@@ -22,13 +27,16 @@ export function FieldsPage() {
       <PageTitle className="px-4 pt-4 pb-2">{t("fields.title")}</PageTitle>
       <div className="grid flex-1 grid-cols-1 overflow-auto lg:grid-cols-[20rem_1fr] lg:overflow-hidden">
         <div className="overflow-hidden border-b lg:border-r lg:border-b-0">
-          <FieldList selectedKey={selected?.key ?? null} onSelect={setSelected} />
+          <FieldList
+            selectedKey={selected?.key ?? null}
+            onSelect={(def) => navigate(`/fields/${encodeURIComponent(def.key)}`)}
+          />
         </div>
         <div className="overflow-hidden">
           <FieldForm
             key={selected?.key ?? "create"}
             editing={selected}
-            onDone={() => setSelected(null)}
+            onDone={() => navigate("/fields")}
           />
         </div>
       </div>

web/src/fields/fields.test.tsx

@@ -11,7 +11,7 @@ import { FieldsPage } from "./fields-page";
 function tree() {
   return (
     <Routes>
-      <Route path="/fields" element={<FieldsPage />} />
+      <Route path="/fields/:key?" element={<FieldsPage />} />
     </Routes>
   );
 }
@@ -87,6 +87,40 @@ test("filter narrows the visible fields", async () => {
   expect(await screen.findByText(/no matches/i)).toBeInTheDocument();
 });
 
+test("deep link /fields/:key opens the edit form for that field", async () => {
+  renderApp(tree(), { route: "/fields/inscription" });
+
+  // edit mode: the key input is locked and prefilled from the URL. The form
+  // remounts when the defs query resolves, so re-query inside waitFor.
+  await waitFor(() => expect(screen.getByLabelText(/^key$/i)).toHaveValue("inscription"));
+  expect(screen.getByLabelText(/^key$/i)).toBeDisabled();
+  expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
+});
+
+test("selecting a field switches to its edit form; cancel returns to create", async () => {
+  renderApp(tree(), { route: "/fields" });
+
+  await userEvent.click(await screen.findByRole("button", { name: /inscription/i }));
+
+  await waitFor(() => expect(screen.getByLabelText(/^key$/i)).toHaveValue("inscription"));
+  expect(screen.getByLabelText(/^key$/i)).toBeDisabled();
+
+  await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+
+  await waitFor(() => expect(screen.getByLabelText(/^key$/i)).toHaveValue(""));
+  expect(screen.getByLabelText(/^key$/i)).toBeEnabled();
+});
+
+test("an unknown key falls back to the create form", async () => {
+  renderApp(tree(), { route: "/fields/zzz-does-not-exist" });
+
+  await screen.findByText("Inscription");
+
+  const key = screen.getByLabelText(/^key$/i);
+  expect(key).toHaveValue("");
+  expect(key).toBeEnabled();
+});
+
 test("creates a text field — posts the body and clears the key input", async () => {
   let body: { key: string; data_type: string } | undefined;
 

web/src/i18n/en.json

@@ -1,12 +1,12 @@
 {
   "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches", "language": "Language", "skipToContent": "Skip to content", "clear": "Clear", "open": "Open" },
   "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar", "breadcrumb": "Breadcrumb" },
-  "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server", "sessionExpired": "Your session expired — please sign in again.", "signingOut": "Signing out…" },
+  "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signingIn": "Signing in…", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server", "sessionExpired": "Your session expired — please sign in again.", "signingOut": "Signing out…" },
   "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)", "detailTitle": "Object detail", "tableLabel": "Objects" },
   "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility" },
   "visibility": { "draft": "Draft", "internal": "Internal", "public": "Public" },
-  "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "createdButFieldRejected": "Object created, but a field was rejected — fix it below.", "flexibleHeading": "Catalogue fields", "saving": "Saving…", "createAnother": "Save & create another", "minCount": "Must be at least 1", "fieldError": { "type_mismatch": "Wrong type for this field", "unresolved": "Referenced value not found", "unknown": "Unknown field" }, "unsaved": { "title": "Discard unsaved changes?", "body": "You have unsaved changes that will be lost.", "stay": "Keep editing", "leave": "Discard" } },
-  "actions": { "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." },
+  "form": { "selectPlaceholder": "Select…", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "createdButFieldRejected": "Object created, but a field was rejected — fix it below.", "flexibleHeading": "Catalogue fields", "saving": "Saving…", "createAnother": "Save & create another", "minCount": "Must be at least 1", "fieldError": { "type_mismatch": "Wrong type for this field", "unresolved": "Referenced value not found", "unknown": "Unknown field" }, "unsaved": { "title": "Discard unsaved changes?", "body": "You have unsaved changes that will be lost.", "stay": "Keep editing", "leave": "Discard" } },
+  "actions": { "deleting": "Deleting…", "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." },
   "labels": { "label": "Label", "externalUri": "External URI (optional)", "otherLanguages": "This entry also has labels in other languages, which are kept.", "uriPlaceholder": "https://…" },
   "theme": { "light": "Light", "dark": "Dark", "system": "System" },
   "vocab": {
@@ -41,6 +41,7 @@
     "authorityKind": "Authority kind",
     "anyKind": "Any",
     "group": "Group",
+    "lockedNote": "Key and type can't be changed after creation.",
     "required": "Required",
     "create": "Create field",
     "empty": "No field definitions yet",

web/src/i18n/sv.json

@@ -1,12 +1,12 @@
 {
   "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar", "language": "Språk", "skipToContent": "Hoppa till innehåll", "clear": "Rensa", "open": "Öppna" },
   "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet", "breadcrumb": "Brödsmulor" },
-  "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern", "sessionExpired": "Din session har gått ut — logga in igen.", "signingOut": "Loggar ut…" },
+  "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signingIn": "Loggar in…", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern", "sessionExpired": "Din session har gått ut — logga in igen.", "signingOut": "Loggar ut…" },
   "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)", "detailTitle": "Objektdetalj", "tableLabel": "Objekt" },
   "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet" },
   "visibility": { "draft": "Utkast", "internal": "Intern", "public": "Publik" },
-  "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "createdButFieldRejected": "Föremålet skapades, men ett fält avvisades — åtgärda nedan.", "flexibleHeading": "Katalogfält", "saving": "Sparar…", "createAnother": "Spara & skapa ny", "minCount": "Måste vara minst 1", "fieldError": { "type_mismatch": "Fel typ för detta fält", "unresolved": "Refererat värde hittades inte", "unknown": "Okänt fält" }, "unsaved": { "title": "Kasta osparade ändringar?", "body": "Du har osparade ändringar som går förlorade.", "stay": "Fortsätt redigera", "leave": "Kasta" } },
-  "actions": { "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." },
+  "form": { "selectPlaceholder": "Välj…", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "createdButFieldRejected": "Föremålet skapades, men ett fält avvisades — åtgärda nedan.", "flexibleHeading": "Katalogfält", "saving": "Sparar…", "createAnother": "Spara & skapa ny", "minCount": "Måste vara minst 1", "fieldError": { "type_mismatch": "Fel typ för detta fält", "unresolved": "Refererat värde hittades inte", "unknown": "Okänt fält" }, "unsaved": { "title": "Kasta osparade ändringar?", "body": "Du har osparade ändringar som går förlorade.", "stay": "Fortsätt redigera", "leave": "Kasta" } },
+  "actions": { "deleting": "Tar bort…", "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." },
   "labels": { "label": "Etikett", "externalUri": "Extern URI (valfritt)", "otherLanguages": "Denna post har även etiketter på andra språk, som behålls.", "uriPlaceholder": "https://…" },
   "theme": { "light": "Ljust", "dark": "Mörkt", "system": "System" },
   "vocab": {
@@ -41,6 +41,7 @@
     "authorityKind": "Auktoritetstyp",
     "anyKind": "Alla",
     "group": "Grupp",
+    "lockedNote": "Nyckel och typ kan inte ändras efter att fältet skapats.",
     "required": "Obligatoriskt",
     "create": "Skapa fält",
     "empty": "Inga fältdefinitioner ännu",

web/src/index.css

@@ -35,6 +35,7 @@
 }
 
 :root {
+  color-scheme: light;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -63,6 +64,7 @@
 }
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -97,6 +99,19 @@
   body {
     @apply bg-background text-foreground font-sans;
   }
+
+  /* Collapse all animation/transition to a single frame for users who ask the
+     OS for reduced motion. Covers the kit's data-open/closed animations, the
+     skeleton pulse, and the sidebar width transition in one place. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }
 
 @layer components {

web/src/lib/format-timestamp.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "vitest";
+
+import { formatTimestamp } from "./format-timestamp";
+
+test("formats a UTC timestamp with date and time in the given locale", () => {
+  const out = formatTimestamp("2026-06-08T12:30:00Z", "UTC", "en");
+  expect(out).toContain("2026");
+  expect(out).toContain("12:30");
+});
+
+test("applies the timezone — a near-midnight UTC instant shifts the calendar day", () => {
+  // 02:00 UTC on Jun 8 is 22:00 on Jun 7 in New York (EDT, UTC-4)
+  const ny = formatTimestamp("2026-06-08T02:00:00Z", "America/New_York", "en");
+  const utc = formatTimestamp("2026-06-08T02:00:00Z", "UTC", "en");
+  expect(ny).toContain("Jun 7");
+  expect(utc).toContain("Jun 8");
+});
+
+test("an invalid IANA zone does not throw and falls back to UTC", () => {
+  const out = formatTimestamp("2026-06-08T12:30:00Z", "Not/AZone", "en");
+  expect(out).toContain("2026");
+});
+
+test("null renders the em-dash placeholder; an unparseable string is returned unchanged", () => {
+  expect(formatTimestamp(null, "UTC", "en")).toBe("—");
+  expect(formatTimestamp("not-a-date", "UTC", "en")).toBe("not-a-date");
+});

web/src/lib/format-timestamp.ts

@@ -0,0 +1,18 @@
+/** Formats a UTC ISO timestamp for display in the instance timezone + active locale.
+ *  Storage/transmission stay UTC — this is display-only. Falls back to UTC formatting on an
+ *  invalid IANA zone (a misconfigured instance) rather than throwing. */
+export function formatTimestamp(value: unknown, timeZone: string, locale: string): string {
+  if (typeof value !== "string") return value == null ? "—" : String(value);
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  const opts = { dateStyle: "medium", timeStyle: "short" } as const;
+
+  try {
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone }).format(date);
+  } catch {
+    // Invalid IANA timeZone (misconfigured instance) — fall back to UTC rather than crash.
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone: "UTC" }).format(date);
+  }
+}

web/src/objects/delete-object-dialog.test.tsx

@@ -41,6 +41,35 @@ test("confirm delete: DELETE then navigate to the list", async () => {
   expect(deleted).toBe(true);
 });
 
+test("confirm is disabled and labelled Deleting… while the DELETE is in flight", async () => {
+  let release!: () => void;
+  const gate = new Promise<void>((r) => {
+    release = r;
+  });
+
+  server.use(
+    http.delete("/api/admin/objects/:id", async () => {
+      await gate;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(tree(), { route: "/objects/o-1" });
+
+  await userEvent.click(await screen.findByRole("button", { name: /delete/i }));
+
+  const dialog = await screen.findByRole("alertdialog");
+
+  await userEvent.click(within(dialog).getByRole("button", { name: /delete/i }));
+
+  const pending = await within(dialog).findByRole("button", { name: /deleting/i });
+  expect(pending).toBeDisabled();
+  expect(within(dialog).getByRole("button", { name: /cancel/i })).toBeDisabled();
+
+  release();
+  await waitFor(() => expect(screen.getByText("objects list")).toBeInTheDocument());
+});
+
 test("cancel does not delete", async () => {
   let deleted = false;
 

web/src/objects/delete-object-dialog.tsx

@@ -54,9 +54,9 @@ export function DeleteObjectDialog({ id }: { id: string }) {
           </p>
         )}
         <AlertDialogFooter>
-          <AlertDialogCancel>{t("form.cancel")}</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm}>
-            {t("actions.delete")}
+          <AlertDialogCancel disabled={del.isPending}>{t("form.cancel")}</AlertDialogCancel>
+          <AlertDialogAction disabled={del.isPending} onClick={onConfirm}>
+            {del.isPending ? t("actions.deleting") : t("actions.delete")}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

web/src/objects/field-input.test.tsx

@@ -54,7 +54,7 @@ test("term field filters and selects from the vocabulary combobox", async () =>
 
   renderApp(<FormHarness defKey="material" onSubmit={(v) => submitted.push(v)} />);
 
-  const input = await screen.findByPlaceholderText("— select —");
+  const input = await screen.findByPlaceholderText("Select…");
 
   await user.click(input);
   await user.type(input, "bro");
@@ -73,7 +73,7 @@ test("authority field filters and selects from the authority combobox", async ()
 
   renderApp(<FormHarness defKey="maker" onSubmit={(v) => submitted.push(v)} />);
 
-  const input = await screen.findByPlaceholderText("— select —");
+  const input = await screen.findByPlaceholderText("Select…");
 
   await user.click(input);
   await user.type(input, "ada");

web/src/objects/objects-table.tsx

@@ -8,6 +8,7 @@ import { useObjectsPage } from "../api/queries";
 import { useDebouncedValue } from "../lib/use-debounced-value";
 import { focusRing } from "../lib/focus-ring";
 import { segmentClass, rowStateClass } from "../lib/class-recipes";
+import { formatTimestamp } from "../lib/format-timestamp";
 import { useConfig } from "../config/config-context";
 import { VisibilityBadge } from "./visibility-badge";
 import { Button, buttonVariants } from "@/components/ui/button";
@@ -120,16 +121,6 @@ export function ObjectsTable() {
       else next.set("offset", String(value));
     });
 
-  const dateFmt = new Intl.DateTimeFormat(i18n.language, {
-    dateStyle: "medium",
-    timeZone: default_timezone,
-  });
-  const formatUpdated = (iso: string) => {
-    const parsed = new Date(iso);
-
-    return Number.isNaN(parsed.getTime()) ? iso : dateFmt.format(parsed);
-  };
-
   const headerCell = (col: SortColumn) => {
     const active = sort === col;
     const ariaSort = active ? (order === "asc" ? "ascending" : "descending") : "none";
@@ -140,7 +131,7 @@ export function ObjectsTable() {
         <button
           type="button"
           onClick={() => toggleSort(col)}
-          className="flex items-center gap-1 hover:text-foreground"
+          className={`flex items-center gap-1 rounded-sm hover:text-foreground ${focusRing}`}
         >
           {t(COLUMN_KEYS[col])}
           <Icon className="size-3.5 text-muted-foreground" aria-hidden="true" />
@@ -267,7 +258,9 @@ export function ObjectsTable() {
               </td>
               <td className="px-3 py-2 text-muted-foreground">{object.current_location ?? "—"}</td>
               <td className="px-3 py-2 text-right tabular-nums">{object.number_of_objects}</td>
-              <td className="px-3 py-2 text-muted-foreground">{formatUpdated(object.updated_at)}</td>
+              <td className="px-3 py-2 text-muted-foreground">
+                {formatTimestamp(object.updated_at, default_timezone, i18n.language)}
+              </td>
             </tr>
           );
         })}
@@ -294,7 +287,7 @@ export function ObjectsTable() {
             value={limit}
             onChange={(event) => setLimit(Number(event.target.value))}
             aria-label={t("objects.pageSize")}
-            className="rounded-md border bg-white px-1 py-0.5"
+            className={`rounded-md border bg-background px-1 py-0.5 ${focusRing}`}
           >
             {PAGE_SIZES.map((size) => (
               <option key={size} value={size}>

web/src/search/search-panel.tsx

@@ -102,7 +102,7 @@ export function SearchPanel() {
 
         {hits.length > 0 && (
           <>
-            <p className="px-3 pt-2 text-xs text-muted-foreground">
+            <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
               {t("search.resultCount", { count: total })}
             </p>
             <ul>

web/src/search/search.test.tsx

@@ -60,7 +60,8 @@ test("typing searches and renders highlighted rich rows", async () => {
   expect(await screen.findByText("Bronze figurine")).toBeInTheDocument();
   const mark = await screen.findByText("bronze");
   expect(mark.tagName).toBe("MARK");
-  expect(screen.getByText(/~\s*25 results/i)).toBeInTheDocument();
+  // The estimated count lives in a status region so updates are announced.
+  expect(screen.getByRole("status")).toHaveTextContent(/~\s*25 results/i);
   expect(screen.getByText(/1962-04-03/)).toBeInTheDocument();
 });
 

web/src/shell/breadcrumb.tsx

@@ -2,6 +2,7 @@ import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
+import { focusRing } from "../lib/focus-ring";
 import { useBreadcrumbTrail } from "./breadcrumb-context";
 
 export function Breadcrumb() {
@@ -16,7 +17,10 @@ export function Breadcrumb() {
           <Fragment key={`${item.label}-${i}`}>
             {i > 0 && <span className="text-muted-foreground">/</span>}
             {item.to && !last ? (
-              <Link to={item.to} className="truncate text-muted-foreground hover:text-foreground">
+              <Link
+                to={item.to}
+                className={`truncate rounded-sm text-muted-foreground hover:text-foreground ${focusRing}`}
+              >
                 {item.label}
               </Link>
             ) : (

web/src/shell/sidebar.tsx

@@ -80,15 +80,16 @@ export function Sidebar() {
         <button
           type="button"
           onClick={toggle}
-          disabled={narrow}
           aria-expanded={!collapsed}
           aria-label={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
           title={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
           className={cn(
-            "flex items-center justify-center rounded-md p-1 outline-none",
+            // On narrow viewports the rail is forced collapsed, so the toggle
+            // is hidden rather than shown disabled (a grayed button reads as
+            // broken, not unavailable).
+            "hidden items-center justify-center rounded-md p-1 outline-none md:flex",
             "hover:bg-accent",
             focusRing,
-            "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
           {collapsed ? (

web/src/theme/theme.test.ts

@@ -40,6 +40,21 @@ test("readTheme defaults to system when unset or invalid", () => {
   expect(readTheme()).toBe("dark");
 });
 
+test("applyTheme syncs the theme-color meta when present", () => {
+  const meta = document.createElement("meta");
+  meta.setAttribute("name", "theme-color");
+  document.head.appendChild(meta);
+  try {
+    mockMatchMedia(false);
+    applyTheme("dark");
+    expect(meta.getAttribute("content")).toBe("#0a0a0a");
+    applyTheme("light");
+    expect(meta.getAttribute("content")).toBe("#ffffff");
+  } finally {
+    meta.remove();
+  }
+});
+
 test("applyTheme toggles the dark class on documentElement", () => {
   mockMatchMedia(false);
   applyTheme("dark");

web/src/theme/theme.ts

@@ -26,8 +26,16 @@ export function readTheme(): Theme {
   return THEMES.includes(stored as Theme) ? (stored as Theme) : "system";
 }
 
+/** Browser-chrome colors per resolved theme; must match `--background` in index.css. */
+const THEME_COLORS = { light: "#ffffff", dark: "#0a0a0a" } as const;
+
 export function applyTheme(theme: Theme): void {
   if (typeof document === "undefined") return;
 
-  document.documentElement.classList.toggle("dark", resolveTheme(theme) === "dark");
+  const resolved = resolveTheme(theme);
+
+  document.documentElement.classList.toggle("dark", resolved === "dark");
+  document
+    .querySelector('meta[name="theme-color"]')
+    ?.setAttribute("content", THEME_COLORS[resolved]);
 }