merge: UI polish bundle (#73 )

fix(web): UI polish — select placeholder, locked-field note, list overflow, sidebar toggle, heading wrap (#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>
2026-06-10 13:47:28 +02:00 · 2026-06-10 13:47:22 +02:00 · 2026-06-10 13:44:08 +02:00 · 2026-06-10 13:44:02 +02:00 · 2026-06-10 13:38:44 +02:00 · 2026-06-10 13:38:37 +02:00
56 changed files with 2012 additions and 107 deletions
@@ -20,12 +20,13 @@ jobs:
          version: 11
      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 22
          cache: pnpm
          cache-dependency-path: web/pnpm-lock.yaml
      - run: pnpm install --frozen-lockfile
      - run: pnpm typecheck
      - run: pnpm lint
      - run: pnpm exec playwright install --with-deps chromium
      - run: pnpm test
      - run: pnpm build
      - run: pnpm check:size
@@ -0,0 +1,338 @@
 # Bundle Vendor-Split + Test-Gap Fills — 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:** Split framework deps into cache-stable vendor chunks, and fill the audit's unit-test (prune-fields, delete-confirm-dialog in-use, labels, format-date) + combobox-story gaps.
 **Architecture:** Task 1 adds `build.rollupOptions.output.manualChunks` to `vite.config.ts` (production build only). Task 2 adds 4 jsdom unit tests for pure/critical units. Task 3 adds a Storybook story for the combobox primitive and runs the full gate. All additive/behavior-preserving.
 **Tech Stack:** Vite 6 (Rollup), React 19 + TS + pnpm, Vitest 4 (jsdom + storybook-browser projects), Storybook, RTL + MSW.
 **Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; app/test source double-quote+semicolon; **stories use single-quote + no-semicolon** (mirror existing `ui/*.stories.tsx`). Run a single test pass per task.
 **Spec:** `docs/superpowers/specs/2026-06-09-bundle-and-tests-design.md`
 **Key facts:**
 - `scripts/check-bundle-size.mjs` fails if the **largest** `dist/assets/*.js` gzip exceeds 250 KB; today ~216.5 KB (one chunk).
 - `vite.config.ts` exports `defineConfig({ plugins, resolve, server, test })` — no `build` block. Deps: `react`, `react-dom`, `react-router-dom` (v7, re-exports `react-router`), `@tanstack/react-query`, `@base-ui/react`, `i18next`, `react-i18next`.
 - `objects/prune-fields.ts`: `pruneFields(fields: Record<string, unknown>, localizedTextKeys: Set<string>, defaultLang: string): Record<string, unknown>`.
 - `lib/labels.ts`: `labelText(labels: LabelView[], lang: string): string` (lang match → `"en"` → first → `""`).
 - `lib/format-date.ts`: `formatDate(value: unknown, lang: string): string` (non-string null→`"—"`, non-string→`String(value)`; invalid→returns value; valid `YYYY-MM-DD`→`Intl.DateTimeFormat(lang,{dateStyle:"medium"})`, parsed at local midnight).
 - `components/delete-confirm-dialog.tsx`: `DeleteConfirmDialog({ description, onConfirm: () => Promise<void>, triggerLabel? })`. Trigger is a `Button` labelled `t("actions.delete")` ("Delete"); the confirm action is also labelled `t("actions.delete")`. On a thrown error it sets a message via `errorMessageKey(err)` and **returns without closing**; on success it closes. `actions.inUse` (en) = "Can't delete — used by {{count}} object(s). Clear those fields first." `InUseError` is exported from `../api/errors` (and re-exported by `../api/queries`).
 - `components/ui/combobox.tsx` exports `ComboboxRoot<Value>`, `ComboboxInputGroup`, `ComboboxInput`, `ComboboxClear`, `ComboboxTrigger`, `ComboboxPopup`, `ComboboxList`, `ComboboxItem`, `ComboboxItemIndicator`, `ComboboxEmpty`. See `objects/options-combobox.tsx` for the composition (ComboboxRoot props: `items`, `value`, `onValueChange`, `itemToStringLabel`, `isItemEqualToValue`; ComboboxList takes a render-function child).
 - Story format (from `components/ui/badge.stories.tsx`): `import type { Meta, StoryObj } from '@storybook/react-vite'`; `import { expect } from 'storybook/test'`; `const meta = { component, tags: ['ai-generated'] } satisfies Meta<typeof X>`; `export default meta`; `type Story = StoryObj<typeof meta>`; `export const Default: Story = { play: async ({ canvas }) => {...} }`.
 ---
 # Task 1: Vendor split (`vite.config.ts`)
 **Files:** Modify `web/vite.config.ts`.
 - [ ] **Step 1: Add the `build` block.** In `web/vite.config.ts`, add a top-level `build` key to the `defineConfig({...})` object (sibling of `plugins`/`resolve`/`server`/`test`):
 ```ts
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom", "react-router", "react-router-dom"],
          "base-ui": ["@base-ui/react"],
          query: ["@tanstack/react-query"],
          i18n: ["i18next", "react-i18next"],
        },
      },
    },
  },
 ```
 - [ ] **Step 2: Build + verify chunk split + budget:**
 ```bash
 cd web && pnpm build && pnpm check:size && ls -1 dist/assets/*.js
 ```
 Expected: build succeeds; `check:size` prints `largest JS chunk: <name> = <kb> KB gz (budget 250 KB)` and passes; `dist/assets/` now contains separate `react-*.js`, `base-ui-*.js`, `query-*.js`, `i18n-*.js` chunks plus the app entry. Report the largest chunk size (should be a vendor chunk, well under 250). If the build warns about React being in multiple chunks or a chunk is oversized, confirm `react`+`react-dom`+`react-router`+`react-router-dom` are all in the one `react` group and adjust.
 - [ ] **Step 3: typecheck + lint** (config change shouldn't affect them, but confirm):
 ```bash
 cd web && pnpm typecheck && pnpm lint
 ```
 - [ ] **Step 4: Commit**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git add web/vite.config.ts
 git commit -m "build(web): split framework deps into cache-stable vendor chunks (#67)"
 ```
 ---
 # Task 2: Unit-test gaps (prune-fields, labels, format-date, delete-confirm-dialog)
 **Files:** Create `web/src/objects/prune-fields.test.ts`, `web/src/lib/labels.test.ts`, `web/src/lib/format-date.test.ts`, `web/src/components/delete-confirm-dialog.test.tsx`.
 - [ ] **Step 1: `web/src/objects/prune-fields.test.ts`:**
 ```ts
 import { expect, test } from "vitest";
 import { pruneFields } from "./prune-fields";
 test("drops empty/null/undefined scalars, keeps real scalars", () => {
  const out = pruneFields(
    { a: "x", b: "", c: null, d: undefined, e: 0, f: false },
    new Set(),
    "en",
  );
  expect(out).toEqual({ a: "x", e: 0, f: false });
 });
 test("a localized_text key keeps only the default-language entry", () => {
  const out = pruneFields(
    { title: { en: "Bowl", sv: "Skål" } },
    new Set(["title"]),
    "sv",
  );
  expect(out).toEqual({ title: { sv: "Skål" } });
 });
 test("a non-localized object value keeps all non-empty entries", () => {
  const out = pruneFields(
    { dims: { w: "10", h: "", d: "5" } },
    new Set(),
    "en",
  );
  expect(out).toEqual({ dims: { w: "10", d: "5" } });
 });
 test("an object value left with no entries is dropped entirely", () => {
  const out = pruneFields(
    { title: { en: "Bowl" }, empty: { en: "", sv: "" } },
    new Set(["title", "empty"]),
    "sv",
  );
  // title has no `sv` entry → empty after filtering → dropped; empty → dropped
  expect(out).toEqual({});
 });
 ```
 Run: `cd web && pnpm vitest run src/objects/prune-fields.test.ts`. (If a case's expectation mismatches the real semantics, re-read `prune-fields.ts` and correct the EXPECTATION to the true behavior — do not change the source.)
 - [ ] **Step 2: `web/src/lib/labels.test.ts`:**
 ```ts
 import { expect, test } from "vitest";
 import { labelText } from "./labels";
 const labels = [
  { lang: "en", label: "Bowl" },
  { lang: "sv", label: "Skål" },
 ];
 test("returns the exact-language label when present", () => {
  expect(labelText(labels, "sv")).toBe("Skål");
 });
 test("falls back to the English label when the requested language is missing", () => {
  expect(labelText(labels, "de")).toBe("Bowl");
 });
 test("falls back to the first label when neither the language nor English is present", () => {
  expect(labelText([{ lang: "fr", label: "Bol" }], "de")).toBe("Bol");
 });
 test("returns an empty string for no labels", () => {
  expect(labelText([], "en")).toBe("");
 });
 ```
 Run: `cd web && pnpm vitest run src/lib/labels.test.ts`.
 - [ ] **Step 3: `web/src/lib/format-date.test.ts`:**
 ```ts
 import { expect, test } from "vitest";
 import { formatDate } from "./format-date";
 test("formats a date-only string in the locale without a timezone day-shift", () => {
  // local-midnight parse must keep the calendar day (3), not shift to the 2nd
  expect(formatDate("1962-04-03", "en")).toBe("Apr 3, 1962");
 });
 test("returns the em-dash placeholder for null", () => {
  expect(formatDate(null, "en")).toBe("—");
 });
 test("returns an unparseable string unchanged", () => {
  expect(formatDate("not-a-date", "en")).toBe("not-a-date");
 });
 test("stringifies a non-string, non-null value", () => {
  expect(formatDate(42, "en")).toBe("42");
 });
 ```
 Run: `cd web && pnpm vitest run src/lib/format-date.test.ts`. (The CI/runtime is full-ICU Node 22, so en `dateStyle:"medium"` → `"Apr 3, 1962"`. If your local ICU formats slightly differently, assert the equivalent string but keep the day as `3` — the day-shift guard is the point.)
 - [ ] **Step 4: `web/src/components/delete-confirm-dialog.test.tsx`:**
 ```tsx
 import { expect, test, vi } from "vitest";
 import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderApp } from "../test/render";
 import { DeleteConfirmDialog } from "./delete-confirm-dialog";
 import { InUseError } from "../api/errors";
 test("delete-in-use shows the in-use count and keeps the dialog open", async () => {
  const onConfirm = vi.fn<() => Promise<void>>().mockRejectedValue(new InUseError(3));
  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]); // the confirm action
  expect(await dialog.findByText(/used by 3/i)).toBeInTheDocument();
  // dialog stays open: its description is still shown
  expect(dialog.getByText("Delete this term?")).toBeInTheDocument();
 });
 test("a clean confirm closes the dialog", async () => {
  const onConfirm = vi.fn<() => Promise<void>>().mockResolvedValue(undefined);
  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]);
  await waitFor(() => expect(dialog.queryByText("Delete this term?")).toBeNull());
  expect(onConfirm).toHaveBeenCalledTimes(1);
 });
 ```
 Run: `cd web && pnpm vitest run src/components/delete-confirm-dialog.test.tsx`. (Before opening, only the trigger "Delete" button exists. After opening, the portal adds the action "Delete"; `findAllByRole` returns both, click the last. `actions.inUse` en contains "used by 3". If `vi.fn<() => Promise<void>>()` generic syntax trips the TS/vitest version, use `vi.fn(() => Promise.reject(new InUseError(3)))` / `vi.fn(() => Promise.resolve())`.)
 - [ ] **Step 5: Verify all four (vitest ONCE) + typecheck + lint:**
 ```bash
 cd web && pnpm vitest run src/objects/prune-fields.test.ts src/lib/labels.test.ts src/lib/format-date.test.ts src/components/delete-confirm-dialog.test.tsx && pnpm typecheck && pnpm lint
 ```
 All green.
 - [ ] **Step 6: Commit**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git add web/src/objects/prune-fields.test.ts web/src/lib/labels.test.ts web/src/lib/format-date.test.ts web/src/components/delete-confirm-dialog.test.tsx
 git commit -m "test(web): cover prune-fields, labels, format-date, delete-in-use dialog (#67)"
 ```
 ---
 # Task 3: Combobox story + full gate
 **Files:** Create `web/src/components/ui/combobox.stories.tsx`.
 - [ ] **Step 1: Read `web/src/objects/options-combobox.tsx`** to mirror the exact `ComboboxRoot` composition (generic, props, the `ComboboxList` render-function child), then create `web/src/components/ui/combobox.stories.tsx` (single-quote + no-semicolon, matching `badge.stories.tsx`):
 ```tsx
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import { expect } from 'storybook/test'
 import {
  ComboboxRoot,
  ComboboxInputGroup,
  ComboboxInput,
  ComboboxClear,
  ComboboxTrigger,
  ComboboxPopup,
  ComboboxList,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxEmpty,
 } from './combobox'
 const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry']
 function ComboboxDemo() {
  const [value, setValue] = useState<string | null>(null)
  return (
    <ComboboxRoot<string | null>
      items={fruits}
      value={value}
      onValueChange={setValue}
      itemToStringLabel={(item) => item ?? ''}
      isItemEqualToValue={(a, b) => a === b}
    >
      <ComboboxInputGroup>
        <ComboboxInput placeholder='Pick a fruit' />
        <ComboboxClear aria-label='Clear' />
        <ComboboxTrigger aria-label='Open' />
      </ComboboxInputGroup>
      <ComboboxPopup>
        <ComboboxEmpty>No matches</ComboboxEmpty>
        <ComboboxList>
          {(item: string) => (
            <ComboboxItem key={item} value={item}>
              <ComboboxItemIndicator className='text-primary'>✓</ComboboxItemIndicator>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </ComboboxRoot>
  )
 }
 const meta = {
  component: ComboboxDemo,
  tags: ['ai-generated'],
 } satisfies Meta<typeof ComboboxDemo>
 export default meta
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
  play: async ({ canvas }) => {
    await expect(canvas.getByPlaceholderText('Pick a fruit')).toBeInTheDocument()
  },
 }
 ```
 (Adjust the `ComboboxRoot` generic/props to match `options-combobox.tsx` exactly if they differ — the goal is a rendering `Default` story; keep the `play` minimal to stay stable in the browser project.)
 - [ ] **Step 2: Run the storybook project for this story** (browser test):
 ```bash
 cd web && pnpm vitest run src/components/ui/combobox.stories.tsx
 ```
 Expected: the `Default` story passes (input renders). If the Base UI combobox API needs a different prop shape, fix the story (mirror `options-combobox.tsx`); do not weaken the assertion below a render check.
 - [ ] **Step 3: 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. Report total test count (should be prior 268 + 4 unit + 1 story ≈ 273), the largest chunk (gz) from check:size (a vendor chunk, < 250), and the check:colors line.
 - [ ] **Step 4: 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 5: Commit**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git add web/src/components/ui/combobox.stories.tsx
 git commit -m "test(web): add a Storybook story for the combobox primitive (#67)"
 ```
 ---
 ## Self-Review (completed)
 **Spec coverage:** AC1 vendor split + verify (T1); AC2 the 4 unit tests (T2 S1-S4); AC3 combobox story (T3 S1-S2); AC4 full gate + codename (T3 S3-S4). ✓
 **Placeholder scan:** every test/story is complete code with concrete assertions; manualChunks is exact; the format-date ICU note and the vi.fn generic note give concrete fallbacks, not vague TODOs. ✓
 **Type/consistency:** `pruneFields(fields, Set, lang)`, `labelText(labels, lang)`, `formatDate(value, lang)`, `DeleteConfirmDialog({description,onConfirm})`, `InUseError(count)` from `../api/errors` — all match the spec's documented signatures; the combobox story imports the exact exports from `./combobox`. ✓
 ## Notes
 - No new dependency, no new i18n keys. `build.rollupOptions` only affects `pnpm build`; the test projects are unaffected.
 - The combobox story is the one item with a (small) CI cost (a browser test on the slow runner); it's isolated in its own task/commit so it can be dropped cleanly if undesired.
 - `check:size` should report a smaller largest chunk after the split (a vendor chunk, not the combined app+vendor chunk).
@@ -0,0 +1,425 @@
 # Responsive Master/Detail (vocab/search/fields) — 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:** Bring the Vocabularies, Search, and Fields master/detail screens to the responsive behavior the Objects screen already has — preserving wide side-by-side, collapsing to single-column + a slide-in Drawer (vocab/search) or a stack (fields) on narrow — via one shared `DetailDrawer`.
 **Architecture:** Generalize the objects-specific drawer into a reusable `components/detail-drawer.tsx` and retrofit Objects onto it (Task 1). Make vocabularies + search responsive with `useMediaQuery("(min-width: 1024px)")` + `useMatch` + the shared drawer (Tasks 2-3). Make fields a pure-CSS responsive stack (Task 4) + full gate. Behavior-preserving on wide; only narrow changes.
 **Tech Stack:** React 19 + TS + pnpm, React Router 7, Base UI Drawer, Tailwind v4, Vitest 4 (jsdom) + RTL + MSW.
 **Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon; token classes only. Breakpoint **1024px** (`useMediaQuery("(min-width: 1024px)")` / Tailwind `lg:`), matching Objects. Run a single test pass per task.
 **Spec:** `docs/superpowers/specs/2026-06-09-responsive-master-detail-design.md`
 **Key facts:**
 - `lib/use-media-query.ts`: `useMediaQuery(query): boolean` (SSR-safe matchMedia).
 - `objects/object-detail-drawer.tsx` (to be generalized + deleted) is: `<Drawer open onOpenChange={(n)=>{if(!n)onClose()}} swipeDirection="right"><DrawerContent aria-label={t("objects.detailTitle")}><div className="flex justify-end border-b p-2"><DrawerClose aria-label={t("actions.closeDetail")} render={<Button variant="ghost" size="icon-sm" />}><X className="size-4" aria-hidden="true" /></DrawerClose></div><div className="flex-1 overflow-auto"><Outlet/></div></DrawerContent></Drawer>`. `Drawer`/`DrawerClose`/`DrawerContent` from `@/components/ui/drawer`.
 - `objects/objects-page.tsx` currently `lazy()`-loads `ObjectDetailDrawer` + wraps in `<Suspense fallback={null}>`; narrow branch renders `{open && <Suspense><ObjectDetailDrawer open={open} onClose={closeDetail} /></Suspense>}`. The WIDE pane has its own close `<Button … aria-label={t("actions.closeDetail")}><X/></Button>` — keep it (`X` import stays).
 - Existing i18n (no new keys): `objects.detailTitle` ("Object detail"), `vocab.terms` ("Terms"), `actions.closeDetail` ("Close detail").
 - `vocabularies-page.tsx`: `<div flex h-full flex-col><PageTitle>…</PageTitle><div grid grid-cols-[20rem_1fr]><div border-r><VocabularyList/></div><div><Outlet/></div></div></div>`. Routes: `/vocabularies` (index `SelectVocabularyPrompt`) + `/vocabularies/:id` (`VocabularyTerms`).
 - `search-page.tsx`: same shape, `grid-cols-[24rem_1fr]`, `<SearchPanel/>`, routes `/search` (index `SelectSearchPrompt`) + `/search/:id` (`ObjectDetail`).
 - `fields-page.tsx`: `useState`-driven; `<div grid grid-cols-[20rem_1fr]><div border-r><FieldList selectedKey onSelect/></div><div><FieldForm key editing onDone/></div></div>`. No routes.
 - Test harness: `objects-page.test.tsx` has a `setViewport(wide: boolean)` helper that overrides `window.matchMedia` to match `(min-width: 1024px)` only when `wide`; default test setup is narrow (`matches:false`); `afterEach(() => vi.restoreAllMocks())`. Narrow-drawer assertion pattern: deep-link to `:id`, then `within(document.body).findByRole(...)` for the portaled drawer + assert the `/close detail/i` button. No `vocabularies-page`/`search-page`/`fields-page` test files exist yet.
 ---
 # Task 1: Shared `DetailDrawer` + retrofit Objects
 **Files:** Create `web/src/components/detail-drawer.tsx`, `web/src/components/detail-drawer.test.tsx`; Modify `web/src/objects/objects-page.tsx`; Delete `web/src/objects/object-detail-drawer.tsx`.
 - [ ] **Step 1: Create `web/src/components/detail-drawer.tsx`:**
 ```tsx
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
 import { Button } from "@/components/ui/button";
 /** A right-sliding Base UI Drawer for a master/detail "detail" on narrow viewports.
 *  Provides the close affordance + an accessible dialog name; the caller supplies the content. */
 export function DetailDrawer({
  open,
  onClose,
  ariaLabel,
  children,
 }: {
  open: boolean;
  onClose: () => void;
  ariaLabel: string;
  children: ReactNode;
 }) {
  const { t } = useTranslation();
  return (
    <Drawer
      open={open}
      onOpenChange={(next) => {
        if (!next) onClose();
      }}
      swipeDirection="right"
    >
      <DrawerContent aria-label={ariaLabel}>
        <div className="flex justify-end border-b p-2">
          <DrawerClose
            aria-label={t("actions.closeDetail")}
            render={<Button variant="ghost" size="icon-sm" />}
          >
            <X className="size-4" aria-hidden="true" />
          </DrawerClose>
        </div>
        <div className="flex-1 overflow-auto">{children}</div>
      </DrawerContent>
    </Drawer>
  );
 }
 ```
 - [ ] **Step 2: Create `web/src/components/detail-drawer.test.tsx`** (write + run):
 ```tsx
 import { expect, test, vi } from "vitest";
 import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderApp } from "../test/render";
 import { DetailDrawer } from "./detail-drawer";
 test("renders children in a named drawer and closes via the close button", async () => {
  const onClose = vi.fn();
  renderApp(
    <DetailDrawer open onClose={onClose} ariaLabel="Object detail">
      <p>detail body</p>
    </DetailDrawer>,
  );
  const body = within(document.body);
  expect(await body.findByText("detail body")).toBeInTheDocument();
  await userEvent.click(body.getByRole("button", { name: /close detail/i }));
  expect(onClose).toHaveBeenCalled();
 });
 ```
 Run: `cd web && pnpm vitest run src/components/detail-drawer.test.tsx`. (If Base UI requires `open` to mount the portal, it's set; the content is portaled to `document.body`.)
 - [ ] **Step 3: Retrofit `web/src/objects/objects-page.tsx`.** Remove `import { lazy, Suspense } from "react";` and the `const ObjectDetailDrawer = lazy(...)` block; add `import { DetailDrawer } from "../components/detail-drawer";`. Replace the narrow `return` block's drawer with:
 ```tsx
  return (
    <div className="h-full">
      {table}
      {open && (
        <DetailDrawer open={open} onClose={closeDetail} ariaLabel={t("objects.detailTitle")}>
          <Outlet />
        </DetailDrawer>
      )}
    </div>
  );
 ```
 (Keep everything else — the wide grid branch with its own close `<Button><X/></Button>` is unchanged, so the `X` and `Button` imports stay.)
 - [ ] **Step 4: Delete the old drawer:**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git rm web/src/objects/object-detail-drawer.tsx
 ```
 (Confirm no other importer: `git grep -n object-detail-drawer web/src` → only objects-page, now changed.)
 - [ ] **Step 5: Verify (vitest ONCE) + typecheck + lint:**
 ```bash
 cd web && pnpm vitest run src/components/detail-drawer.test.tsx src/objects/objects-page.test.tsx && pnpm typecheck && pnpm lint
 ```
 Expected: green. The objects-page narrow + wide tests must pass unchanged (the shared `DetailDrawer` renders the same drawer + `/close detail/i` button).
 - [ ] **Step 6: Commit**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git add web/src/components/detail-drawer.tsx web/src/components/detail-drawer.test.tsx web/src/objects/objects-page.tsx
 git rm -q web/src/objects/object-detail-drawer.tsx 2>/dev/null; git add -A web/src/objects
 git commit -m "refactor(web): shared DetailDrawer; objects-page uses it (#58)"
 ```
 ---
 # Task 2: Responsive Vocabularies page
 **Files:** Modify `web/src/vocab/vocabularies-page.tsx`; Create `web/src/vocab/vocabularies-page.test.tsx`.
 - [ ] **Step 1: Rewrite `web/src/vocab/vocabularies-page.tsx`:**
 ```tsx
 import { Outlet, useMatch, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { VocabularyList } from "./vocabulary-list";
 import { DetailDrawer } from "../components/detail-drawer";
 import { useMediaQuery } from "../lib/use-media-query";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 export function VocabulariesPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const detailMatch = useMatch("/vocabularies/:id");
  const open = Boolean(detailMatch);
  const isWide = useMediaQuery("(min-width: 1024px)");
  useDocumentTitle(t("nav.vocabularies"));
  useBreadcrumb([{ label: t("nav.vocabularies") }]);
  const close = () => navigate("/vocabularies");
  return (
    <div className="flex h-full flex-col">
      <PageTitle className="px-4 pt-4 pb-2">{t("nav.vocabularies")}</PageTitle>
      {isWide ? (
        <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
          <div className="overflow-hidden border-r">
            <VocabularyList />
          </div>
          <div className="overflow-hidden">
            <Outlet />
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-hidden">
          <VocabularyList />
        </div>
      )}
      {!isWide && open && (
        <DetailDrawer open={open} onClose={close} ariaLabel={t("vocab.terms")}>
          <Outlet />
        </DetailDrawer>
      )}
    </div>
  );
 }
 ```
 (The `<Outlet/>` is rendered in exactly one place: the wide grid, OR the narrow drawer when `open`. On narrow with no `:id`, neither renders the Outlet — just the list.)
 - [ ] **Step 2: Create `web/src/vocab/vocabularies-page.test.tsx`.** Read `web/src/test/fixtures.ts` + `web/src/test/handlers.ts` for the vocabularies list + terms handlers and a real vocabulary id. Mirror the `objects-page.test.tsx` `setViewport` harness:
 ```tsx
 import { afterEach, expect, test, vi } from "vitest";
 import { screen, within } from "@testing-library/react";
 import { Route, Routes } from "react-router-dom";
 import { renderApp } from "../test/render";
 import { VocabulariesPage } from "./vocabularies-page";
 import { VocabularyTerms } from "./vocabulary-terms";
 import { SelectVocabularyPrompt } from "./select-vocabulary-prompt";
 function setViewport(wide: boolean) {
  Object.defineProperty(window, "matchMedia", {
    value: (query: string): MediaQueryList =>
      ({
        matches: wide && query === "(min-width: 1024px)",
        media: query,
        onchange: null,
        addEventListener: () => {},
        removeEventListener: () => {},
        addListener: () => {},
        removeListener: () => {},
        dispatchEvent: () => false,
      }) as MediaQueryList,
    writable: true,
  });
 }
 afterEach(() => vi.restoreAllMocks());
 function tree() {
  return (
    <Routes>
      <Route path="/vocabularies" element={<VocabulariesPage />}>
        <Route index element={<SelectVocabularyPrompt />} />
        <Route path=":id" element={<VocabularyTerms />} />
      </Route>
    </Routes>
  );
 }
 test("narrow: a selected vocabulary's detail renders in a portaled drawer", async () => {
  setViewport(false);
  renderApp(tree(), { route: `/vocabularies/<VOCAB_ID>` });
  const body = within(document.body);
  expect(
    await body.findByRole("button", { name: /close detail/i }, { timeout: 5000 }),
  ).toBeInTheDocument();
 });
 test("wide: a selected vocabulary renders inline (no detail drawer)", async () => {
  setViewport(true);
  renderApp(tree(), { route: `/vocabularies/<VOCAB_ID>` });
  // the list (master) is present and there is NO close-detail button (inline pane, not a drawer)
  expect(await screen.findByRole("button", { name: /close detail/i }).catch(() => null)).toBeNull();
 });
 ```
 Replace `<VOCAB_ID>` with a real id from `fixtures.ts`. The narrow test asserts the drawer is present (the `/close detail/i` button only exists inside `DetailDrawer`). For the wide test, prefer a positive assertion that the master + inline detail both render (e.g. `await screen.findByText(<a stable vocab list item or the vocab.terms caption>)`) AND `screen.queryByRole("button", { name: /close detail/i })` is null. Adjust the queries to the fixtures' actual rendered text; the load-bearing checks are: **narrow → close-detail button present (drawer); wide → close-detail button absent (inline)**. Reuse the default MSW handlers (don't add new ones unless a handler is missing).
 - [ ] **Step 3: Verify (vitest ONCE) + typecheck + lint:**
 ```bash
 cd web && pnpm vitest run src/vocab/vocabularies-page.test.tsx src/vocab && pnpm typecheck && pnpm lint
 ```
 Green. (Existing vocab tests stay green.)
 - [ ] **Step 4: Commit**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git add web/src/vocab/vocabularies-page.tsx web/src/vocab/vocabularies-page.test.tsx
 git commit -m "feat(web): responsive Vocabularies master/detail (drawer on narrow) (#58)"
 ```
 ---
 # Task 3: Responsive Search page
 **Files:** Modify `web/src/search/search-page.tsx`; Create `web/src/search/search-page.test.tsx`.
 - [ ] **Step 1: Rewrite `web/src/search/search-page.tsx`** (same pattern as vocab; `24rem` master, `SearchPanel`, route `"/search/:id"`, close `"/search"`, drawer ariaLabel `t("objects.detailTitle")` since the search detail is an object):
 ```tsx
 import { Outlet, useMatch, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { SearchPanel } from "./search-panel";
 import { DetailDrawer } from "../components/detail-drawer";
 import { useMediaQuery } from "../lib/use-media-query";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 export function SearchPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const detailMatch = useMatch("/search/:id");
  const open = Boolean(detailMatch);
  const isWide = useMediaQuery("(min-width: 1024px)");
  useDocumentTitle(t("nav.search"));
  useBreadcrumb([{ label: t("nav.search") }]);
  const close = () => navigate("/search");
  return (
    <div className="flex h-full flex-col">
      <PageTitle className="px-4 pt-4 pb-2">{t("nav.search")}</PageTitle>
      {isWide ? (
        <div className="grid flex-1 grid-cols-[24rem_1fr] overflow-hidden">
          <div className="overflow-hidden border-r">
            <SearchPanel />
          </div>
          <div className="overflow-hidden">
            <Outlet />
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-hidden">
          <SearchPanel />
        </div>
      )}
      {!isWide && open && (
        <DetailDrawer open={open} onClose={close} ariaLabel={t("objects.detailTitle")}>
          <Outlet />
        </DetailDrawer>
      )}
    </div>
  );
 }
 ```
 - [ ] **Step 2: Create `web/src/search/search-page.test.tsx`** mirroring the vocab test (the `setViewport` helper, the same narrow→close-detail-present / wide→absent discriminator). Tree: `<Route path="/search" element={<SearchPage/>}><Route index element={<SelectSearchPrompt/>}/><Route path=":id" element={<ObjectDetail/>}/></Route>`. Deep-link `/search/<OBJECT_ID>` (use a real object id from `fixtures.ts`; the search detail loads the object via the same `/api/admin/objects/{id}` handler the objects tests use). Narrow → `within(document.body).findByRole("button", { name: /close detail/i })` present; wide → absent + the object detail renders inline. Reuse the default MSW handlers.
 - [ ] **Step 3: Verify (vitest ONCE) + typecheck + lint:**
 ```bash
 cd web && pnpm vitest run src/search/search-page.test.tsx src/search && pnpm typecheck && pnpm lint
 ```
 Green.
 - [ ] **Step 4: Commit**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git add web/src/search/search-page.tsx web/src/search/search-page.test.tsx
 git commit -m "feat(web): responsive Search master/detail (drawer on narrow) (#58)"
 ```
 ---
 # Task 4: Responsive Fields page (CSS stack) + full gate
 **Files:** Modify `web/src/fields/fields-page.tsx`; Create `web/src/fields/fields-page.test.tsx`.
 - [ ] **Step 1: Make `fields-page.tsx` a responsive stack.** Change the grid container + the list pane's border so it stacks on narrow and is side-by-side on `lg`:
 ```tsx
      <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} />
        </div>
        <div className="overflow-hidden">
          <FieldForm
            key={selected?.key ?? "create"}
            editing={selected}
            onDone={() => setSelected(null)}
          />
        </div>
      </div>
 ```
 (On narrow: single column — list then form, the grid container scrolls (`overflow-auto`), the list gets a bottom divider. On `lg`: the two-column grid with the list's right border, clipped overflow as before. If the stacked panes still clip awkwardly in a manual smoke, adjust the narrow pane `overflow` — keep `lg:` behavior identical to today.)
 - [ ] **Step 2: Create `web/src/fields/fields-page.test.tsx`:**
 ```tsx
 import { expect, test } from "vitest";
 import { screen } from "@testing-library/react";
 import { renderApp } from "../test/render";
 import { FieldsPage } from "./fields-page";
 test("renders the field list and the field form, in a responsive grid", async () => {
  const { container } = renderApp(<FieldsPage />);
  // both panes present (master + detail)
  expect(await screen.findByText(/fields/i)).toBeInTheDocument();
  // the responsive grid: single-column by default, two-column at lg
  const grid = container.querySelector("div.grid");
  expect(grid?.className).toContain("grid-cols-1");
  expect(grid?.className).toContain("lg:grid-cols-[20rem_1fr]");
 });
 ```
 Run: `cd web && pnpm vitest run src/fields/fields-page.test.tsx`. (Adjust the `findByText` to a stable rendered string — the `fields.title` PageTitle, the field-list, or the field-form's "Key" label. jsdom can't measure layout, so the class assertion is the responsive guard.)
 - [ ] **Step 3: 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. Report total test count, largest chunk (gz), the check:colors line. (`check:size` should be unchanged-or-smaller — the objects drawer's separate lazy chunk folds into `base-ui`.)
 - [ ] **Step 4: 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 5: Manual smoke (recommended).** `pnpm dev`, narrow the window (<1024px): the sidebar is an icon rail; Vocabularies/Search show the list/panel full-width and selecting an item slides in the detail Drawer (close returns to the index); Fields stacks the list above the form (both scrollable). Widen (≥1024): all three return to side-by-side; Objects unchanged.
 - [ ] **Step 6: Commit**
 ```bash
 cd /Users/olsson/Laboratory/biggus-dickus
 git add web/src/fields/fields-page.tsx web/src/fields/fields-page.test.tsx
 git commit -m "feat(web): responsive Fields page (stacks on narrow) (#58)"
 ```
 ---
 ## Self-Review (completed)
 **Spec coverage:** AC1 `DetailDrawer` + objects retrofit + delete old (T1); AC2 vocab + search responsive drawer (T2-T3); AC3 fields responsive grid (T4 S1); AC4 new tests for drawer/vocab/search/fields + existing green (T1-T4 tests); AC5 gate/codename/no-new-keys (T4 S3-S4). ✓
 **Placeholder scan:** full code for `DetailDrawer` + all three pages; tests give the exact `setViewport` harness + the narrow/wide discriminator; the `<VOCAB_ID>`/`<OBJECT_ID>` and `findByText` adjustments are explicit "read fixtures" instructions with a stated load-bearing assertion, not vague TODOs. ✓
 **Type/consistency:** `DetailDrawer({ open, onClose, ariaLabel, children })` (T1) is consumed with those exact props in objects/vocab/search (T1-T3); `useMediaQuery("(min-width: 1024px)")` + `useMatch("/<x>/:id")` + `navigate("/<x>")` consistent across vocab/search; ariaLabels use existing keys (`objects.detailTitle`, `vocab.terms`). ✓
 ## Notes
 - No new dependency; no new i18n keys (`objects.detailTitle`, `vocab.terms`, `actions.closeDetail` all exist). `components/ui/*` untouched (drawer/button wrappers unchanged; only a new app-level `components/detail-drawer.tsx`).
 - The `<Outlet/>` per page is rendered in exactly one place per `isWide` branch — no double-mount.
 - Fields stays `useState`-driven + stacked (no routing change, no "New field" trigger needed); the resizable splitter is deferred.
 - Breakpoint 1024px is consistent with the existing Objects screen.
@@ -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.
@@ -0,0 +1,111 @@
 # Bundle Vendor-Split + Test-Gap Fills — Design
 **Date:** 2026-06-09
 **Status:** Approved (brainstorming) — ready for implementation planning.
 **Issue:** #67 (vendor-split the bundle for cache stability/headroom; fill the audit's unit-test + story gaps).
 ## Context
 The production build emits a single ~216 KB-gz entry chunk (the largest, measured by
 `scripts/check-bundle-size.mjs`, budget 250 KB) that bundles the framework deps (react-dom, react-router 7,
@tanstack/react-query, @base-ui/react, i18next) together with app code — so every app edit invalidates the
 whole chunk's cache. `vite.config.ts` has no `build.rollupOptions`. Separately, four well-isolated units
 have no direct tests, and the composed combobox primitive has no story.
 All changes are additive/low-risk; `check:size`/`check:colors`/the existing tests are the guards.
 ## Components
 ### 1. Vendor split — `vite.config.ts`
 Add a top-level `build` block (sibling of `plugins`/`resolve`/`server`/`test`) with `manualChunks`:
 ```ts
 build: {
  rollupOptions: {
    output: {
      manualChunks: {
        react: ["react", "react-dom", "react-router", "react-router-dom"],
        "base-ui": ["@base-ui/react"],
        query: ["@tanstack/react-query"],
        i18n: ["i18next", "react-i18next"],
      },
    },
  },
 },
 ```
 - The app entry chunk then carries only app code; the listed deps land in cache-stable vendor chunks
  (`react-*.js`, `base-ui-*.js`, `query-*.js`, `i18n-*.js`). `react-router` **and** `react-router-dom` are
  both listed so router code (v7 re-exports `react-router` internally) stays in one chunk and React isn't
  duplicated.
 - Only affects `pnpm build` (production); the Storybook/vitest browser builder is independent, so the
  test suite is unaffected.
 - `check:size` measures the largest emitted chunk; after the split the largest is a vendor chunk well under
  the 250 KB budget (verified in implementation by running `pnpm build` + `pnpm check:size` and reporting
  the chunk sizes). If a chunk is unexpectedly oversized or React duplicates, adjust the groups.
 ### 2. Test-gap fills (4 unit tests)
 **`objects/prune-fields.test.ts`** (new) — `pruneFields(fields, localizedTextKeys: Set<string>, defaultLang)`:
 - scalars pass through; `undefined`/`null`/`""` top-level values are dropped.
 - a non-array object value whose key is in `localizedTextKeys` keeps **only** the `defaultLang` entry;
  other-language entries are dropped.
 - a non-array object value whose key is **not** in `localizedTextKeys` keeps all (non-empty) language
  entries.
 - empty inner entries (`""`/`null`/`undefined`) are filtered, and a map left with zero entries is dropped
  entirely.
 **`components/delete-confirm-dialog.test.tsx`** (new) — the delete-in-use flow:
 - render `<DeleteConfirmDialog description=… onConfirm=… />`, open it (click the trigger), click the
  confirm action.
 - when `onConfirm` rejects with `InUseError(3)`, the dialog shows the `actions.inUse` message (containing
  the count `3`) and **stays open** (the confirm action is still present / the dialog isn't dismissed).
 - when `onConfirm` resolves, the dialog closes.
 (`DeleteConfirmDialog` routes its catch through `errorMessageKey`, which maps `InUseError` →
 `actions.inUse` with the count — so this also exercises the shared error mapping.)
 **`lib/labels.test.ts`** (new) — `labelText(labels, lang)`:
 - exact `lang` match wins; else falls back to the `"en"` label; else the first label; else `""` for an
  empty array.
 **`lib/format-date.test.ts`** (new) — `formatDate(value, lang)`:
 - a valid `"YYYY-MM-DD"` formats via `Intl.DateTimeFormat(lang, { dateStyle: "medium" })` and is **not**
  shifted off its calendar day (assert the rendered string contains the expected day number for a fixed
  date + a fixed `lang` like `"en"`).
 - `null` → `"—"`; a non-date string (e.g. `"not-a-date"`) is returned unchanged; a non-string non-null
  (e.g. a number) is `String()`-ified.
 ### 3. Combobox story — `components/ui/combobox.stories.tsx` (new)
 A visual/interactive story for the composed combobox primitive, mirroring the existing `ui/*` story format
 (`@storybook/react-vite` `Meta`/`StoryObj`, single-quote + no-semicolon, `tags: ['ai-generated']`, a `play`
 using `canvas` + `storybook/test`). A small controlled wrapper renders `ComboboxRoot` with a handful of
 string options (`ComboboxInput`/`ComboboxClear`/`ComboboxTrigger`/`ComboboxPopup`/`ComboboxList`/
 `ComboboxItem`/`ComboboxEmpty`), matching how `OptionsCombobox` composes them. A `Default` story; the
 `play` asserts the input renders and (optionally) typing filters the list. (Runs as a browser test in the
 Storybook vitest project — a few seconds in CI.)
 ## Error handling / edges
 - `manualChunks`: Rollup orders chunks by the import graph, so vendor chunks load before the app chunk that
  imports them — no load-order/duplicate-React risk when react+react-dom+router share one named chunk.
 - `formatDate` parses `\`${value}T00:00:00\`` (local midnight) to avoid a UTC day-shift; the test pins a
  fixed `lang` to keep `Intl` output deterministic (assert a substring like the day number, not the full
  locale string, to stay robust across ICU versions).
 - `delete-confirm-dialog` test drives the Base UI AlertDialog in its portal (`within(document.body)` for the
  confirm action), mirroring existing portal-aware tests.
 ## Testing
 - The 4 unit tests run in the jsdom project; the story adds one Storybook browser test.
 - **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; `check:size` reports the
  new largest (vendor) chunk under budget; no new dependency; no new i18n keys; no codename. en/sv parity
  unaffected.
 ## Acceptance criteria
 1. `vite.config.ts` has `build.rollupOptions.output.manualChunks` splitting react/base-ui/query/i18n into
   their own chunks; `pnpm build` succeeds and `check:size` passes (largest chunk reported, < 250 KB gz, no
   React duplication).
 2. New tests exist and pass: `prune-fields.test.ts`, `delete-confirm-dialog.test.tsx` (InUseError →
   `actions.inUse`, stays open), `labels.test.ts`, `format-date.test.ts`.
 3. `components/ui/combobox.stories.tsx` exists with a working `Default` story (browser-test green).
 4. Full gate green; no new dependency; no new i18n keys; no codename; existing tests unchanged.
 ## Out of scope → follow-ups
 - The buildkit/Dockerfile CI migration (the robust fix for the slow native runner; overlaps #25).
 - Deeper treeshaking/bundle analysis; route-level code-split changes beyond the existing `lazy()` boundaries.
@@ -0,0 +1,137 @@
 # Responsive Master/Detail for Vocabularies, Search, Fields — Design
 **Date:** 2026-06-09
 **Status:** Approved (brainstorming) — ready for implementation planning.
 **Issue:** #58 (master/detail + sidebar layout has no responsive/small-screen handling — remaining half).
 ## Context
 #58 is partially done (commit `0a88a86`, #44): the sidebar collapses to an icon rail, the **Objects** master/detail
 is responsive (wide right-pane / narrow Base UI `Drawer`), and a reusable `lib/use-media-query.ts` exists. The
 **remaining** master/detail screens still use fixed `grid-cols-[20rem_1fr]` / `[24rem_1fr]` with no breakpoints —
 `vocabularies-page.tsx`, `search-page.tsx`, `fields-page.tsx` — so on a small laptop / tablet / split window the
 fixed list + sidebar leave a cramped detail pane, and below ~640px the panes can't coexist.
 **Decision (brainstorming): keep the wide side-by-side layout (it's useful for curators); fix only narrow.** Reuse
 one shared drawer + the existing `useMediaQuery` hook. Breakpoint **1024px (`lg`)**, matching Objects. Authorities
 is single-pane → no change. The "resizable splitter" the issue *suggests considering* is out of scope.
 The three pages differ: vocabularies + search are **route-driven** (`<Outlet/>`, an index-prompt route + `:id`);
 fields is **`useState`-driven** (FieldList → FieldForm, with the form always present for "create").
 ## Components
 ### 1. `components/detail-drawer.tsx` (new) — generalize the Objects drawer
 Today `objects/object-detail-drawer.tsx` is objects-specific (Base UI `Drawer` + close button + a hardcoded
 `<Outlet/>`). Generalize to a reusable component taking `children` + `ariaLabel`:
 ```tsx
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
 import { Button } from "@/components/ui/button";
 /** A right-sliding Base UI Drawer for a master/detail "detail" on narrow viewports. */
 export function DetailDrawer({
  open,
  onClose,
  ariaLabel,
  children,
 }: {
  open: boolean;
  onClose: () => void;
  ariaLabel: string;
  children: ReactNode;
 }) {
  const { t } = useTranslation();
  return (
    <Drawer open={open} onOpenChange={(next) => { if (!next) onClose(); }} swipeDirection="right">
      <DrawerContent aria-label={ariaLabel}>
        <div className="flex justify-end border-b p-2">
          <DrawerClose aria-label={t("actions.closeDetail")} render={<Button variant="ghost" size="icon-sm" />}>
            <X className="size-4" aria-hidden="true" />
          </DrawerClose>
        </div>
        <div className="flex-1 overflow-auto">{children}</div>
      </DrawerContent>
    </Drawer>
  );
 }
 ```
 - Delete `objects/object-detail-drawer.tsx`.
 - **Drop the `lazy()`/`Suspense`** that objects-page used to wrap the drawer: it kept Base UI's drawer code out of
  the entry chunk, but #67 already split `@base-ui/react` into its own `base-ui` vendor chunk (loaded app-wide via
  the menu/select/etc.), so the lazy boundary no longer saves anything. `DetailDrawer` is a normal import.
 - The close-button label keeps the existing generic `actions.closeDetail` key.
 ### 2. `vocab/vocabularies-page.tsx` + `search/search-page.tsx` — `useMediaQuery` + route drawer
 Mirror the Objects pattern. Add `useMediaQuery("(min-width: 1024px)")` (`isWide`) and a `useMatch` for the detail
 route (`"/vocabularies/:id"` / `"/search/:id"`), `open = Boolean(match)`, `close = () => navigate("/vocabularies")`
 (resp. `"/search"`).
 - **Wide:** the current side-by-side grid with `<Outlet/>` inline (prompt when no `:id`, detail when selected) —
  unchanged.
 - **Narrow:** the master full-width (`VocabularyList` / `SearchPanel` under the existing `PageTitle`), plus
  `{open && <DetailDrawer open={open} onClose={close} ariaLabel={…}><Outlet/></DetailDrawer>}`. With no `:id`, just
  the master (the index-prompt is a wide-only affordance).
 - Drawer `ariaLabel`: vocabularies → `t("vocab.terms")` ("Terms"); search → `t("objects.detailTitle")` ("Object
  detail", since a search result's detail IS an object). **No new i18n keys.**
 - The `<Outlet/>` is rendered in exactly one place per branch (the `isWide` ternary), so no double-mount.
 ### 3. `fields/fields-page.tsx` — pure-CSS responsive stack
 `fields-page` is `useState`-driven and its right pane is *always* a form (create when nothing selected), so a
 drawer would need a new "New field" trigger. Instead make it a responsive **stack** (the issue comment explicitly
 allows "or stack"): change the grid container from `grid grid-cols-[20rem_1fr]` to
 `grid grid-cols-1 lg:grid-cols-[20rem_1fr]`, and give the form pane a top border that only shows when stacked
 (`border-t lg:border-t-0`) while the list keeps its `border-r` (which reads as a bottom divider when stacked — or
 add `border-b lg:border-b-0 lg:border-r` for a clean stacked divider). No JS, no drawer, no new trigger, no
 element duplication — the same `FieldForm` reflows from below the list (narrow) to beside it (wide).
 ### 4. `objects/objects-page.tsx` — retrofit onto `DetailDrawer`
 Replace the `lazy(ObjectDetailDrawer)` import + `<Suspense>` with a direct `DetailDrawer` import; in the narrow
 branch render `{open && <DetailDrawer open={open} onClose={closeDetail} ariaLabel={t("objects.detailTitle")}><Outlet/></DetailDrawer>}`.
 Behavior-preserving — its existing "narrow: detail renders inside a portaled drawer" test stays green.
 ## Data flow / behaviour
 No data/routing changes. Each page picks layout via `useMediaQuery("(min-width:1024px)")` (vocab/search/objects) or
 pure CSS (fields). The detail content is identical to today; only its container (inline pane vs Drawer) changes by
 width. The detail route/state, breadcrumbs, and titles are unchanged.
 ## Error handling / edges
 - `useMediaQuery` is SSR-safe (returns `false` server-side / pre-mount → narrow-first, then corrects on mount).
 - Drawer `open` is derived from the route match (`:id`) / nothing on the index, so the Outlet only has content when
  open; rendering `{open && <DetailDrawer …>}` mounts it only when active (matches the current objects behaviour).
 - Fields stack: `FieldList` is `overflow-hidden` in a `grid-cols-1` row — ensure the stacked list has a sensible
  height (it's in a flex/grid row that can scroll); the form below scrolls in its own pane. Keep each pane's
  `overflow` as today.
 - Drawer accessible name comes from `ariaLabel` (required prop) so every detail drawer is a named dialog (the #62
  a11y fix, preserved + generalized).
 ## Testing
 - **`components/detail-drawer.test.tsx`** (new): with `open`, the children render inside a dialog whose accessible
  name is the `ariaLabel`; clicking the close button (labelled `actions.closeDetail`) calls `onClose`.
 - **`vocab/vocabularies-page` + `search/search-page` tests** (new or extended): reuse the `setViewport(wide)`
  matchMedia mock from `objects-page.test.tsx`. Narrow + a `:id` route → the detail renders in a portaled drawer
  (`getByRole("dialog", { name })` within `document.body`); wide + `:id` → the detail is the inline pane (no
  dialog). Closing the drawer navigates back to the index route.
 - **`fields/fields-page` test**: the grid container carries the responsive classes (`grid-cols-1` +
  `lg:grid-cols-[20rem_1fr]`); both the list and the form render (jsdom can't measure layout, so assert structure).
 - **`objects/objects-page` tests**: stay green unchanged (the drawer is now the shared `DetailDrawer`).
 - **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new dependency; no new i18n
  keys; no codename; en/sv parity unaffected. `check:size` unchanged-or-smaller (dropping the objects drawer's
  separate lazy chunk folds it into base-ui).
 ## Acceptance criteria
 1. `components/detail-drawer.tsx` exists (Base UI drawer + close button + `children`/`ariaLabel`); `object-detail-drawer.tsx`
   is deleted; Objects uses the shared `DetailDrawer` (no `lazy`/`Suspense`); its tests stay green.
 2. Vocabularies + Search: wide = current side-by-side (unchanged); narrow (<1024) = master full-width + the detail
   in a `DetailDrawer` when a `:id` is active; close returns to the index route.
 3. Fields: responsive grid (`grid-cols-1 lg:grid-cols-[20rem_1fr]`) — stacked on narrow, side-by-side on wide.
 4. New tests for `DetailDrawer`, vocabularies-page, search-page (narrow drawer + wide pane), fields-page (responsive
   structure); all existing tests pass unchanged.
 5. `typecheck`/`lint`/`build`/`check:colors` green; `check:size` reported (unchanged-or-smaller); no new
   dependency; no new i18n keys; no codename.
 ## Out of scope → follow-ups
 - A resizable master/detail splitter (issue "consider"); a per-user pane-width preference.
 - Converting `fields` to a route-driven master/detail (it stays `useState`-driven + stacked).
@@ -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.
@@ -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>
@@ -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 = [];
@@ -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 />
@@ -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 });
@@ -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>
@@ -0,0 +1,60 @@
 import { expect, test, vi } from "vitest";
 import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderApp } from "../test/render";
 import { DeleteConfirmDialog } from "./delete-confirm-dialog";
 import { InUseError } from "../api/errors";
 test("delete-in-use shows the in-use count and keeps the dialog open", async () => {
  const onConfirm = vi.fn(() => Promise.reject(new InUseError(3)));
  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]);
  expect(await dialog.findByText(/used by 3/i)).toBeInTheDocument();
  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} />);
  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]);
  await waitFor(() => expect(dialog.queryByText("Delete this term?")).toBeNull());
  expect(onConfirm).toHaveBeenCalledTimes(1);
 });
@@ -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>
+          <AlertDialogCancel disabled={pending}>{t("form.cancel")}</AlertDialogCancel>
-          <AlertDialogAction onClick={confirm}>{t("actions.delete")}</AlertDialogAction>
+          <AlertDialogAction disabled={pending} onClick={confirm}>
            {pending ? t("actions.deleting") : t("actions.delete")}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
@@ -0,0 +1,20 @@
 import { expect, test, vi } from "vitest";
 import { within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderApp } from "../test/render";
 import { DetailDrawer } from "./detail-drawer";
 test("renders children in a named drawer and closes via the close button", async () => {
  const onClose = vi.fn();
  renderApp(
    <DetailDrawer open onClose={onClose} ariaLabel="Object detail">
      <p>detail body</p>
    </DetailDrawer>,
  );
  const body = within(document.body);
  expect(await body.findByText("detail body")).toBeInTheDocument();
  await userEvent.click(body.getByRole("button", { name: /close detail/i }));
  expect(onClose).toHaveBeenCalled();
 });
@@ -1,21 +1,22 @@
-import { Outlet } from "react-router-dom";
+import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
 import { Button } from "@/components/ui/button";
-/**
+/** A right-sliding Base UI Drawer for a master/detail "detail" on narrow viewports.
- * Narrow-viewport object detail: the nested <Outlet/> inside a Base UI Drawer that
+ *  Provides the close affordance + an accessible dialog name; the caller supplies the content. */
- * slides from the right. Lazy-loaded so Base UI's drawer code (swipe/snap machinery)
+export function DetailDrawer({
 * splits out of the main entry chunk — the wide pane path never pays for it.
 */
 export function ObjectDetailDrawer({
  open,
  onClose,
  ariaLabel,
  children,
 }: {
  open: boolean;
  onClose: () => void;
  ariaLabel: string;
  children: ReactNode;
 }) {
  const { t } = useTranslation();
@@ -27,7 +28,7 @@ export function ObjectDetailDrawer({
      }}
      swipeDirection="right"
    >
-      <DrawerContent aria-label={t("objects.detailTitle")}>
+      <DrawerContent aria-label={ariaLabel}>
        <div className="flex justify-end border-b p-2">
          <DrawerClose
            aria-label={t("actions.closeDetail")}
@@ -36,9 +37,7 @@ export function ObjectDetailDrawer({
            <X className="size-4" aria-hidden="true" />
          </DrawerClose>
        </div>
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto">{children}</div>
          <Outlet />
        </div>
      </DrawerContent>
    </Drawer>
  );
@@ -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>
@@ -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}
@@ -0,0 +1,63 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import { expect } from 'storybook/test'
 import {
  ComboboxRoot,
  ComboboxInputGroup,
  ComboboxInput,
  ComboboxClear,
  ComboboxTrigger,
  ComboboxPopup,
  ComboboxList,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxEmpty,
 } from './combobox'
 const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry']
 function ComboboxDemo() {
  const [value, setValue] = useState<string | null>(null)
  return (
    <ComboboxRoot<string | null>
      items={fruits}
      value={value}
      onValueChange={setValue}
      itemToStringLabel={(item) => item ?? ''}
      isItemEqualToValue={(a, b) => a === b}
    >
      <ComboboxInputGroup>
        <ComboboxInput placeholder='Pick a fruit' />
        <ComboboxClear aria-label='Clear' />
        <ComboboxTrigger aria-label='Open' />
      </ComboboxInputGroup>
      <ComboboxPopup>
        <ComboboxEmpty>No matches</ComboboxEmpty>
        <ComboboxList>
          {(item: string) => (
            <ComboboxItem key={item} value={item}>
              <ComboboxItemIndicator className='text-primary'>✓</ComboboxItemIndicator>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </ComboboxRoot>
  )
 }
 const meta = {
  component: ComboboxDemo,
  tags: ['ai-generated'],
 } satisfies Meta<typeof ComboboxDemo>
 export default meta
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
  play: async ({ canvas }) => {
    await expect(canvas.getByPlaceholderText('Pick a fruit')).toBeInTheDocument()
  },
 }
@@ -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}
    />
  );
@@ -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}
@@ -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}
    />
  )
@@ -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
          )}
@@ -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",
+        "flex items-start gap-2 rounded-md border bg-popover p-3 text-sm text-popover-foreground shadow-md",
-        toast.type === "error" && "border-red-300",
+        toast.type === "error" && "border-destructive",
-        toast.type === "success" && "border-green-300",
+        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>
  ));
@@ -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}
@@ -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
@@ -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")}
                        >
@@ -0,0 +1,17 @@
 import { expect, test } from "vitest";
 import { screen } from "@testing-library/react";
 import { renderApp } from "../test/render";
 import { FieldsPage } from "./fields-page";
 test("renders the field list and form in a responsive grid", async () => {
  const { container } = renderApp(<FieldsPage />);
  // both panes are present (master list + detail form)
  expect(await screen.findByText(/fields/i)).toBeInTheDocument();
  // responsive: single-column by default, two-column at lg
  const grid = container.querySelector("div.grid");
  expect(grid?.className).toContain("grid-cols-1");
  expect(grid?.className).toContain("lg:grid-cols-[20rem_1fr]");
 });
@@ -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") }]);
@@ -20,15 +25,18 @@ export function FieldsPage() {
  return (
    <div className="flex h-full flex-col">
      <PageTitle className="px-4 pt-4 pb-2">{t("fields.title")}</PageTitle>
-      <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
+      <div className="grid flex-1 grid-cols-1 overflow-auto lg:grid-cols-[20rem_1fr] lg:overflow-hidden">
-        <div className="overflow-hidden border-r">
+        <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>
@@ -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;
@@ -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" } },
+  "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." },
+  "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",
@@ -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" } },
+  "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." },
+  "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",
@@ -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 {
@@ -0,0 +1,19 @@
 import { expect, test } from "vitest";
 import { formatDate } from "./format-date";
 test("formats a date-only string in the locale without a timezone day-shift", () => {
  expect(formatDate("1962-04-03", "en")).toBe("Apr 3, 1962");
 });
 test("returns the em-dash placeholder for null", () => {
  expect(formatDate(null, "en")).toBe("—");
 });
 test("returns an unparseable string unchanged", () => {
  expect(formatDate("not-a-date", "en")).toBe("not-a-date");
 });
 test("stringifies a non-string, non-null value", () => {
  expect(formatDate(42, "en")).toBe("42");
 });
@@ -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");
 });
@@ -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);
  }
 }
@@ -0,0 +1,24 @@
 import { expect, test } from "vitest";
 import { labelText } from "./labels";
 const labels = [
  { lang: "en", label: "Bowl" },
  { lang: "sv", label: "Skål" },
 ];
 test("returns the exact-language label when present", () => {
  expect(labelText(labels, "sv")).toBe("Skål");
 });
 test("falls back to the English label when the requested language is missing", () => {
  expect(labelText(labels, "de")).toBe("Bowl");
 });
 test("falls back to the first label when neither the language nor English is present", () => {
  expect(labelText([{ lang: "fr", label: "Bol" }], "de")).toBe("Bol");
 });
 test("returns an empty string for no labels", () => {
  expect(labelText([], "en")).toBe("");
 });
@@ -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;
@@ -54,9 +54,9 @@ export function DeleteObjectDialog({ id }: { id: string }) {
          </p>
        )}
        <AlertDialogFooter>
-          <AlertDialogCancel>{t("form.cancel")}</AlertDialogCancel>
+          <AlertDialogCancel disabled={del.isPending}>{t("form.cancel")}</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm}>
+          <AlertDialogAction disabled={del.isPending} onClick={onConfirm}>
-            {t("actions.delete")}
+            {del.isPending ? t("actions.deleting") : t("actions.delete")}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
@@ -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");
@@ -1,7 +1,7 @@
 import { expect, test } from "vitest";
 import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { delay, http, HttpResponse } from "msw";
+import { http, HttpResponse } from "msw";
 import { Routes, Route } from "react-router-dom";
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
@@ -72,11 +72,15 @@ test("partial create: fields PUT fails -> edit page shows the 'created' banner a
 test("in-flight submit: button disabled + shows Saving…, create fires exactly once on double-click", async () => {
  let postCount = 0;
  let release!: () => void;
  const gate = new Promise<void>((resolve) => {
    release = resolve;
  });
  server.use(
    http.post("/api/admin/objects", async () => {
      postCount += 1;
-      await delay(50);
+      await gate;
      return HttpResponse.json({ id: "new-id-3" }, { status: 201 });
    }),
  );
@@ -91,9 +95,13 @@ test("in-flight submit: button disabled + shows Saving…, create fires exactly
  await userEvent.click(button);
  await userEvent.click(button);
-  await waitFor(() => expect(screen.getByText(/saving…/i)).toBeInTheDocument());
+  // The mutation is held open by `gate`, so the pending state is observed
  // deterministically (no reliance on a timing window).
  expect(await screen.findByText(/saving…/i)).toBeInTheDocument();
  expect(screen.getByRole("button", { name: /saving…/i })).toBeDisabled();
  release();
  await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument());
  expect(postCount).toBe(1);
 });
@@ -1,19 +1,15 @@
 import { lazy, Suspense } from "react";
 import { Outlet, useMatch, useNavigate, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { ObjectsTable } from "./objects-table";
 import { DetailDrawer } from "../components/detail-drawer";
 import { useMediaQuery } from "../lib/use-media-query";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { Button } from "@/components/ui/button";
 import { PageTitle } from "@/components/ui/page-title";
 const ObjectDetailDrawer = lazy(() =>
  import("./object-detail-drawer").then((m) => ({ default: m.ObjectDetailDrawer })),
 );
 export function ObjectsPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -66,15 +62,14 @@ export function ObjectsPage() {
    );
  }
-  // Narrow: the detail lives in a Drawer, lazy-loaded so Base UI's drawer code stays
+  // Narrow: the detail lives in a Drawer sliding from the right.
  // out of the main entry chunk.
  return (
    <div className="h-full">
      {table}
      {open && (
-        <Suspense fallback={null}>
+        <DetailDrawer open={open} onClose={closeDetail} ariaLabel={t("objects.detailTitle")}>
-          <ObjectDetailDrawer open={open} onClose={closeDetail} />
+          <Outlet />
-        </Suspense>
+        </DetailDrawer>
      )}
    </div>
  );
@@ -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}>
@@ -0,0 +1,39 @@
 import { expect, test } from "vitest";
 import { pruneFields } from "./prune-fields";
 test("drops empty/null/undefined scalars, keeps real scalars", () => {
  const out = pruneFields(
    { a: "x", b: "", c: null, d: undefined, e: 0, f: false },
    new Set(),
    "en",
  );
  expect(out).toEqual({ a: "x", e: 0, f: false });
 });
 test("a localized_text key keeps only the default-language entry", () => {
  const out = pruneFields(
    { title: { en: "Bowl", sv: "Skål" } },
    new Set(["title"]),
    "sv",
  );
  expect(out).toEqual({ title: { sv: "Skål" } });
 });
 test("a non-localized object value keeps all non-empty entries", () => {
  const out = pruneFields(
    { dims: { w: "10", h: "", d: "5" } },
    new Set(),
    "en",
  );
  expect(out).toEqual({ dims: { w: "10", d: "5" } });
 });
 test("an object value left with no entries is dropped entirely", () => {
  const out = pruneFields(
    { title: { en: "Bowl" }, empty: { en: "", sv: "" } },
    new Set(["title", "empty"]),
    "sv",
  );
  expect(out).toEqual({});
 });
@@ -0,0 +1,56 @@
 import { afterEach, expect, test, vi } from "vitest";
 import { screen, within } from "@testing-library/react";
 import { Route, Routes } from "react-router-dom";
 import { renderApp } from "../test/render";
 import { SearchPage } from "./search-page";
 import { ObjectDetail } from "../objects/object-detail";
 import { SelectSearchPrompt } from "./select-search-prompt";
 function setViewport(wide: boolean) {
  Object.defineProperty(window, "matchMedia", {
    value: (query: string): MediaQueryList =>
      ({
        matches: wide && query === "(min-width: 1024px)",
        media: query,
        onchange: null,
        addEventListener: () => {},
        removeEventListener: () => {},
        addListener: () => {},
        removeListener: () => {},
        dispatchEvent: () => false,
      }) as MediaQueryList,
    writable: true,
  });
 }
 afterEach(() => vi.restoreAllMocks());
 function tree() {
  return (
    <Routes>
      <Route path="/search" element={<SearchPage />}>
        <Route index element={<SelectSearchPrompt />} />
        <Route path=":id" element={<ObjectDetail />} />
      </Route>
    </Routes>
  );
 }
 test("narrow: a selected result's detail renders in a portaled drawer", async () => {
  setViewport(false);
  renderApp(tree(), { route: "/search/11111111-1111-1111-1111-111111111111" });
  const body = within(document.body);
  expect(
    await body.findByRole("button", { name: /close detail/i }, { timeout: 5000 }),
  ).toBeInTheDocument();
 });
 test("wide: a selected result renders inline, with no detail drawer", async () => {
  setViewport(true);
  renderApp(tree(), { route: "/search/11111111-1111-1111-1111-111111111111" });
  expect(await screen.findByRole("heading", { name: "Amphora" })).toBeInTheDocument();
  expect(screen.queryByRole("button", { name: /close detail/i })).toBeNull();
 });
@@ -1,28 +1,47 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useMatch, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { SearchPanel } from "./search-panel";
 import { DetailDrawer } from "../components/detail-drawer";
 import { useMediaQuery } from "../lib/use-media-query";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 export function SearchPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const detailMatch = useMatch("/search/:id");
  const open = Boolean(detailMatch);
  const isWide = useMediaQuery("(min-width: 1024px)");
  useDocumentTitle(t("nav.search"));
  useBreadcrumb([{ label: t("nav.search") }]);
  const close = () => navigate("/search");
  return (
    <div className="flex h-full flex-col">
      <PageTitle className="px-4 pt-4 pb-2">{t("nav.search")}</PageTitle>
-      <div className="grid flex-1 grid-cols-[24rem_1fr] overflow-hidden">
+      {isWide ? (
-        <div className="overflow-hidden border-r">
+        <div className="grid flex-1 grid-cols-[24rem_1fr] overflow-hidden">
          <div className="overflow-hidden border-r">
            <SearchPanel />
          </div>
          <div className="overflow-hidden">
            <Outlet />
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-hidden">
          <SearchPanel />
        </div>
-        <div className="overflow-hidden">
+      )}
      {!isWide && open && (
        <DetailDrawer open={open} onClose={close} ariaLabel={t("objects.detailTitle")}>
          <Outlet />
-        </div>
+        </DetailDrawer>
-      </div>
+      )}
    </div>
  );
 }
@@ -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>
@@ -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();
 });
@@ -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>
            ) : (
@@ -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 ? (
@@ -1,7 +1,7 @@
 import { expect, test } from "vitest";
 import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { delay, http, HttpResponse } from "msw";
+import { http, HttpResponse } from "msw";
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
 import { UserMenu } from "./user-menu";
@@ -35,9 +35,13 @@ test("opens the menu showing email + role and signs out", async () => {
 });
 test("shows a pending state on Sign out while logging out", async () => {
  let release!: () => void;
  const gate = new Promise<void>((resolve) => {
    release = resolve;
  });
  server.use(
    http.post("/api/admin/logout", async () => {
-      await delay(50);
+      await gate;
      return new HttpResponse(null, { status: 204 });
    }),
  );
@@ -50,5 +54,10 @@ test("shows a pending state on Sign out while logging out", async () => {
  const menu = within(document.body);
  await userEvent.click(await menu.findByText("Sign out"));
  // The logout is held open by `gate`, so the pending state is observed
  // deterministically (no reliance on a timing window).
  expect(await menu.findByText(/signing out/i)).toBeInTheDocument();
  release();
  await waitFor(() => expect(menu.queryByText(/signing out/i)).toBeNull());
 });
@@ -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");
@@ -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]);
 }
@@ -0,0 +1,57 @@
 import { afterEach, expect, test, vi } from "vitest";
 import { screen, within } from "@testing-library/react";
 import { Route, Routes } from "react-router-dom";
 import { renderApp } from "../test/render";
 import { VocabulariesPage } from "./vocabularies-page";
 import { VocabularyTerms } from "./vocabulary-terms";
 import { SelectVocabularyPrompt } from "./select-vocabulary-prompt";
 function setViewport(wide: boolean) {
  Object.defineProperty(window, "matchMedia", {
    value: (query: string): MediaQueryList =>
      ({
        matches: wide && query === "(min-width: 1024px)",
        media: query,
        onchange: null,
        addEventListener: () => {},
        removeEventListener: () => {},
        addListener: () => {},
        removeListener: () => {},
        dispatchEvent: () => false,
      }) as MediaQueryList,
    writable: true,
  });
 }
 afterEach(() => vi.restoreAllMocks());
 function tree() {
  return (
    <Routes>
      <Route path="/vocabularies" element={<VocabulariesPage />}>
        <Route index element={<SelectVocabularyPrompt />} />
        <Route path=":id" element={<VocabularyTerms />} />
      </Route>
    </Routes>
  );
 }
 test("narrow: a selected vocabulary's detail renders in a portaled drawer", async () => {
  setViewport(false);
  renderApp(tree(), { route: "/vocabularies/v-material" });
  const body = within(document.body);
  expect(
    await body.findByRole("button", { name: /close detail/i }, { timeout: 5000 }),
  ).toBeInTheDocument();
 });
 test("wide: a selected vocabulary renders inline, with no detail drawer", async () => {
  setViewport(true);
  renderApp(tree(), { route: "/vocabularies/v-material" });
  // VocabularyTerms renders its "Terms" caption inline in the right pane.
  await screen.findByText(/terms/i);
  expect(screen.queryByRole("button", { name: /close detail/i })).toBeNull();
 });
@@ -1,28 +1,47 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useMatch, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { VocabularyList } from "./vocabulary-list";
 import { DetailDrawer } from "../components/detail-drawer";
 import { useMediaQuery } from "../lib/use-media-query";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 export function VocabulariesPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const detailMatch = useMatch("/vocabularies/:id");
  const open = Boolean(detailMatch);
  const isWide = useMediaQuery("(min-width: 1024px)");
  useDocumentTitle(t("nav.vocabularies"));
  useBreadcrumb([{ label: t("nav.vocabularies") }]);
  const close = () => navigate("/vocabularies");
  return (
    <div className="flex h-full flex-col">
      <PageTitle className="px-4 pt-4 pb-2">{t("nav.vocabularies")}</PageTitle>
-      <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
+      {isWide ? (
-        <div className="overflow-hidden border-r">
+        <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
          <div className="overflow-hidden border-r">
            <VocabularyList />
          </div>
          <div className="overflow-hidden">
            <Outlet />
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-hidden">
          <VocabularyList />
        </div>
-        <div className="overflow-hidden">
+      )}
      {!isWide && open && (
        <DetailDrawer open={open} onClose={close} ariaLabel={t("vocab.terms")}>
          <Outlet />
-        </div>
+        </DetailDrawer>
-      </div>
+      )}
    </div>
  );
 }
@@ -16,6 +16,26 @@ export default defineConfig({
      "@": path.resolve(__dirname, "./src")
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (/[\\/]node_modules[\\/]\.pnpm[\\/](react|react-dom|react-router|react-router-dom)@/.test(id)) {
            return "react";
          }
          if (/[\\/]node_modules[\\/]\.pnpm[\\/]@base-ui\+react@/.test(id)) {
            return "base-ui";
          }
          if (/[\\/]node_modules[\\/]\.pnpm[\\/]@tanstack\+react-query@/.test(id)) {
            return "query";
          }
          if (/[\\/]node_modules[\\/]\.pnpm[\\/](i18next|react-i18next)@/.test(id)) {
            return "i18n";
          }
        }
      }
    }
  },
  server: {
    proxy: {
      "/api": "http://localhost:8080",
@@ -28,6 +48,9 @@ export default defineConfig({
      extends: true,
      test: {
        environment: "jsdom",
        // The CI runner is heavily resource-constrained; lazy-loaded chunks
        // (e.g. the object-detail drawer) can exceed the 5s default.
        testTimeout: 20000,
        globals: true,
        setupFiles: ["./src/test/setup.ts"],
        environmentOptions: {
@@ -46,6 +69,7 @@ export default defineConfig({
      })],
      test: {
        name: 'storybook',
        testTimeout: 20000,
        browser: {
          enabled: true,
          headless: true,
Author	SHA1	Message	Date
logaritmisk	97c63ac25b	merge: UI polish bundle (#73 ) CI / web (push) Successful in 6m4s Details	2026-06-10 13:47:28 +02:00
logaritmisk	62c569741f	fix(web): UI polish — select placeholder, locked-field note, list overflow, sidebar toggle, heading wrap (#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>	2026-06-10 13:47:22 +02:00
logaritmisk	3ad0e56ecd	merge: deep-linkable field selection (#72 ) CI / web (push) Successful in 6m14s Details	2026-06-10 13:44:08 +02:00
logaritmisk	ada5d06dad	feat(web): deep-linkable field selection via /fields/:key (#72 ) FieldsPage kept the selected field definition in component state, so reload lost the selection, fields couldn't be linked/shared, and back/forward didn't navigate selections — inconsistent with /vocabularies/:id and /objects/:id. Move selection into the URL: the route becomes /fields/:key? (optional segment), FieldList selection navigates, cancel/done navigates back to /fields, and the page derives the selected def from the already-cached field-defs query. An unknown or stale key (e.g. after deleting the selected field) falls back to the create form. Tests: deep link opens the locked edit form, select→cancel round-trips through the URL, unknown key falls back to create. Closes #72 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:44:02 +02:00
logaritmisk	3a57c0a77c	merge: reduced-motion support + overscroll containment (#71 ) CI / web (push) Successful in 4m48s Details	2026-06-10 13:38:44 +02:00
logaritmisk	9a896bb5f6	fix(web): honor prefers-reduced-motion; contain overscroll in modal surfaces (#71 ) Nothing in the app respected prefers-reduced-motion — the kit's data-open/closed animations, the skeleton pulse, and the sidebar width transition all ran unconditionally. Add a global base-layer rule that collapses animation/transition durations to a single frame when the OS asks for reduced motion; one rule covers current and future additions. Add overscroll-y-contain to the scrollable modal/popup surfaces (DrawerContent, SelectContent, ComboboxPopup) so flicking past the end of their content no longer chain-scrolls the page beneath, and to AlertDialogContent for when it gains scrollable content. Verified in the built CSS: the media query and overscroll-behavior-y:contain both compile into dist/assets. Closes #71 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:38:37 +02:00
logaritmisk	78f5afad35	merge: pending-state feedback for delete confirms + login (#70 ) CI / web (push) Successful in 4m37s Details	2026-06-10 13:35:34 +02:00
logaritmisk	27205c65ef	fix(web): disable delete confirms while pending + Signing in… feedback (#70 ) The delete dialogs (DeleteObjectDialog and the shared DeleteConfirmDialog) left their confirm button enabled during the in-flight request, so a double-click fired a second DELETE that 404'd and surfaced a spurious error. Disable cancel + confirm while pending and swap the confirm label to a new actions.deleting ("Deleting…" / "Tar bort…"). The login button disabled itself during login.isPending but kept the "Sign in" label; it now shows auth.signingIn ("Signing in…" / "Loggar in…") so slow networks get visible feedback. Each fix is covered by a gated-MSW (or gated-promise) test asserting the pending label + disabled state before releasing the request. Closes #70 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:35:27 +02:00
logaritmisk	091a1a651d	merge: focus-visible rings + live search count (#69 ) CI / web (push) Successful in 5m7s Details	2026-06-10 13:31:15 +02:00
logaritmisk	ec11c9dc76	fix(web): focus-visible rings on remaining controls + live search count (#69 ) Keyboard focus was invisible on the objects-table sort headers and page-size select, breadcrumb links, the external-URI link, and the combobox input/clear/trigger. Apply the shared focusRing helper in app code and the kit's inline focus-visible classes (matching input.tsx) in ui/combobox. Make the search result count a role="status" live region so screen readers announce updated counts while typing; the existing search test now asserts the count through getByRole("status"). Closes #69 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 13:29:27 +02:00
logaritmisk	1d19ddfd96	merge: dark-mode tokens for popup primitives + theme-color/color-scheme sync (#68 ) CI / web (push) Successful in 5m47s Details	2026-06-10 13:23:47 +02:00
logaritmisk	79a6567530	fix(web): dark-mode tokens for popup primitives + theme-color/color-scheme sync (#68 ) Tooltip, toast, and combobox popups still hardcoded light colors (bg-white, neutral-*, indigo-50) and rendered as white boxes in dark mode; the objects-table page-size select did the same in app code. Swap all of them to theme tokens (popover/accent/muted/destructive/ success) and replace the toast's literal "×" with the lucide X icon. Wire browser chrome into the theme: color-scheme via CSS on :root/.dark (follows the in-app toggle, not just the OS), a theme-color meta kept in sync by the preload script and applyTheme(), plus a unit test for the meta sync. Extend check-no-raw-colors to also flag shadeless white/black utilities outside components/ui/ so the objects-table case can't recur. Closes #68 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-10 09:42:57 +02:00
logaritmisk	fe448034ac	merge: instance-timezone timestamp formatter (#42 ) CI / web (push) Successful in 5m29s Details Add shared formatTimestamp(value, timeZone, locale) helper — date + short time in the instance tz/locale, with a UTC fallback on an invalid IANA zone. Route the objects-table 'Updated' column through it (was inline, date-only, unguarded). Display-only; storage stays UTC. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-09 21:14:45 +02:00
logaritmisk	67c5da57bf	feat(web): render objects 'Updated' as a tz-aware timestamp via formatTimestamp (#42 )	2026-06-09 21:11:11 +02:00
logaritmisk	53405d7831	feat(web): formatTimestamp helper (instance tz + locale, UTC fallback) (#42 )	2026-06-09 21:07:13 +02:00
logaritmisk	e615260422	docs(plans): instance-timezone timestamp formatter — 2-task plan (#42 )	2026-06-09 20:58:34 +02:00
logaritmisk	3b6441688f	docs(specs): instance-timezone timestamp formatter (#42 )	2026-06-09 15:34:02 +02:00
logaritmisk	a0b7dcdc2d	merge: responsive master/detail for vocabularies, search, fields (#58 ) CI / web (push) Successful in 5m3s Details	2026-06-09 15:22:46 +02:00
logaritmisk	7f9cf9fe60	feat(web): responsive Fields page (stacks on narrow) (#58 )	2026-06-09 15:18:39 +02:00
logaritmisk	b83149e0bb	feat(web): responsive Search master/detail (drawer on narrow) (#58 )	2026-06-09 15:15:44 +02:00
logaritmisk	80c2aad298	feat(web): responsive Vocabularies master/detail (drawer on narrow) (#58 )	2026-06-09 15:12:45 +02:00
logaritmisk	b5756e16b5	refactor(web): shared DetailDrawer; objects-page uses it (#58 )	2026-06-09 15:09:37 +02:00
logaritmisk	b3f061ced7	docs(plans): responsive master/detail — 4-task plan (#58 )	2026-06-09 15:06:42 +02:00
logaritmisk	eec3a261b4	docs(specs): responsive master/detail for vocab/search/fields (#58 )	2026-06-09 14:11:14 +02:00
logaritmisk	390f6897a8	merge: bundle vendor-split + test-gap fills (#67 ) CI / web (push) Successful in 5m13s Details	2026-06-09 13:48:46 +02:00
logaritmisk	8b881f369b	test(web): add a Storybook story for the combobox primitive (#67 )	2026-06-09 12:32:06 +02:00
logaritmisk	aef5000543	test(web): cover prune-fields, labels, format-date, delete-in-use dialog (#67 )	2026-06-09 12:28:48 +02:00
logaritmisk	878db9a37b	build(web): split framework deps into cache-stable vendor chunks (#67 )	2026-06-09 12:24:47 +02:00
logaritmisk	0b44bc0855	docs(plans): bundle vendor-split + test gaps — 3-task plan (#67 )	2026-06-09 12:16:23 +02:00
logaritmisk	79ee402b33	docs(specs): bundle vendor-split + test-gap fills (#67 )	2026-06-09 12:09:02 +02:00
logaritmisk	64f35e5a57	merge: fix CI — Node 22, Playwright install, deterministic pending-state tests, testTimeout (#25 ) CI / web (push) Successful in 7m32s Details	2026-06-09 11:57:32 +02:00
logaritmisk	3aff10557c	ci: make the logout pending-state test deterministic (gate, not delay) CI / web (push) Successful in 4m35s Details Same timing-window race as object-new-page: the 50ms delay let the logout resolve (menu unmounts on me=null) before findByText caught 'Signing out…' on the slow CI runner. Hold the logout open with a promise released only after the pending state is asserted. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-09 11:51:35 +02:00
logaritmisk	e8fe24f755	ci: raise vitest testTimeout to 20s for the resource-constrained runner CI / web (push) Failing after 3m50s Details The 'narrow: detail renders inside a portaled drawer' test lazy-loads the drawer chunk and exceeded the 5s default on the slow CI container (setup alone took ~486s). Bump testTimeout on both vitest projects. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-09 11:44:30 +02:00
logaritmisk	fc170ccf10	ci: install Playwright chromium for the storybook vitest project; deterministic in-flight test CI / web (push) Failing after 4m5s Details - CI runs the @vitest/browser-playwright (storybook) project, which needs the chromium browser downloaded — add 'playwright install --with-deps chromium'. - object-new-page in-flight test held the create mutation open with a 50ms delay and raced the pending-state assertion (failed under CI timing); gate it on a promise released only after asserting 'saving…', so it's deterministic. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-09 11:37:20 +02:00
logaritmisk	3ae9d87e6e	ci: bump Node 20 → 22 so pnpm 11 (needs Node ≥22.13) runs CI / web (push) Failing after 2m25s Details Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-09 11:29:58 +02:00