# Frontend SPA — Milestone 2 (Object Authoring) 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:** Create / edit / delete catalogue objects from the SPA, including the dynamic flexible-field form (all field types) — consuming the existing admin endpoints.

**Architecture:** New full-width route `/objects/new`; in-pane edit at `/objects/:id/edit` via nested routes under `ObjectsPage` (list + `<Outlet/>` right pane). A shared `ObjectForm` (react-hook-form) renders inventory-minimum core fields plus dynamic flexible fields; `FieldInput` switches on `data_type` to the right control (term/authority are id-valued `<Select>`s populated from the vocab/authority endpoints). Create = `POST /objects` then `PUT /objects/:id/fields`; edit = `PUT /objects/:id` + `PUT .../fields` (replace semantics); delete via an `AlertDialog`.

**Tech Stack:** React 19, react-router-dom 7, @tanstack/react-query 5, **react-hook-form**, shadcn/ui (Base UI: select, checkbox, alert-dialog), openapi-fetch typed client, react-i18next, Vitest + RTL + MSW.

**Reference spec:** `docs/superpowers/specs/2026-06-04-frontend-spa-milestone-2-design.md`

**Baseline (M1, merged):** `web/` has the typed client (`web/src/api/client.ts` `api`; schema `web/src/api/schema.d.ts`), hooks in `web/src/api/queries.ts` (`useMe`, `useObjectsPage`, `useObject`, `useFieldDefinitions`, `useLogin`, `useLogout`), `renderApp` helper (`web/src/test/render.tsx`), MSW harness (`web/src/test/{server,handlers,fixtures}.ts`, `onUnhandledRequest:"error"`), i18n (`web/src/i18n/{en,sv}.json`), shadcn Button/Input/Label/Card/Badge/Skeleton, and the Objects screen (`web/src/objects/{objects-page,object-list,object-detail,visibility-badge}.tsx`). 17 tests green. Run all web commands from `web/`.

**Conventions:**
- shadcn CLI (`pnpm dlx shadcn@latest add <x>`) emits `import {cn} from "src/lib/utils"` — REWRITE to `@/lib/utils`; relocate any file written under a literal `web/@/` dir into `web/src/components/ui/`.
- i18n: every user-facing string via `t()`; keep `en.json`/`sv.json` key sets identical. Tests that assert English copy run under the default `en` locale (the i18n test resets the singleton).
- Codename "biggus"/"dickus" must appear NOWHERE.
- Each task ends green: `pnpm test`, `pnpm typecheck`, `pnpm lint`, `pnpm build` clean.

**Backend contract (verify against `web/src/api/schema.d.ts`):**
- `POST /api/admin/objects` body `ObjectCreateRequest` → `201 {id}`; rejects public/bad-date with 422.
- `PUT /api/admin/objects/{id}` body `ObjectUpdateRequest` (no visibility) → 204; 404 missing.
- `DELETE /api/admin/objects/{id}` → 204; 404 missing.
- `PUT /api/admin/objects/{id}/fields` body = JSON map (replace semantics) → 204; 404; 422 (bare).
- `GET /api/admin/field-definitions` → `FieldDefinitionView[]` (`key`, `data_type`, `vocabulary_id?`, `authority_kind?`, `required`, `group?`, `labels`).
- `GET /api/admin/vocabularies/{id}/terms` → `TermView[]`. `GET /api/admin/authorities?kind=` → `AuthorityView[]`.
- `data_type` ∈ {text, localized_text, integer, date, boolean, term, authority}.

---

## Task 1: Authoring hooks (queries + mutations) + MSW handlers + shadcn primitives

**Files:**
- Modify: `web/src/api/queries.ts`, `web/src/test/handlers.ts`, `web/src/test/fixtures.ts`, `web/package.json`
- Create: `web/src/components/ui/{select,checkbox,alert-dialog}.tsx` (via shadcn), `web/src/api/queries.authoring.test.ts`

- [ ] **Step 1: Install react-hook-form + add shadcn primitives**

```bash
cd web
pnpm add react-hook-form
pnpm dlx shadcn@latest add select checkbox alert-dialog
```
Fix any `src/lib/utils` imports in the three new `components/ui/*.tsx` files to `@/lib/utils`; relocate from `web/@/` into `web/src/components/ui/` if the CLI misplaced them. Confirm `pnpm typecheck` after.

- [ ] **Step 2: Extend fixtures** — append to `web/src/test/fixtures.ts`

```ts
import type { components } from "../api/schema";

export type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
export type TermView = components["schemas"]["TermView"];
export type AuthorityView = components["schemas"]["AuthorityView"];

export const fieldDefinitions: FieldDefinitionView[] = [
  { key: "inscription", data_type: "text", vocabulary_id: null, authority_kind: null,
    required: true, group: "Description", labels: [{ lang: "en", label: "Inscription" }, { lang: "sv", label: "Inskription" }] },
  { key: "count_seen", data_type: "integer", vocabulary_id: null, authority_kind: null,
    required: false, group: null, labels: [{ lang: "en", label: "Count seen" }] },
  { key: "made_on", data_type: "date", vocabulary_id: null, authority_kind: null,
    required: false, group: null, labels: [{ lang: "en", label: "Made on" }] },
  { key: "is_fragment", data_type: "boolean", vocabulary_id: null, authority_kind: null,
    required: false, group: null, labels: [{ lang: "en", label: "Is fragment" }] },
  { key: "title_ml", data_type: "localized_text", vocabulary_id: null, authority_kind: null,
    required: false, group: null, labels: [{ lang: "en", label: "Title" }] },
  { key: "material", data_type: "term", vocabulary_id: "v-material", authority_kind: null,
    required: false, group: null, labels: [{ lang: "en", label: "Material" }] },
  { key: "maker", data_type: "authority", vocabulary_id: null, authority_kind: "person",
    required: false, group: null, labels: [{ lang: "en", label: "Maker" }] },
];

export const materialTerms: TermView[] = [
  { id: "t-bronze", external_uri: null, labels: [{ lang: "en", label: "Bronze" }, { lang: "sv", label: "Brons" }] },
  { id: "t-wood", external_uri: null, labels: [{ lang: "en", label: "Wood" }] },
];

export const personAuthorities: AuthorityView[] = [
  { id: "a-ada", kind: "person", external_uri: null, labels: [{ lang: "en", label: "Ada Lovelace" }] },
];
```
(Adapt literals to the generated types — e.g. if optional fields are `?:` rather than `| null`, drop the `null`s. `pnpm typecheck` is the arbiter.)

- [ ] **Step 3: Extend default handlers** — append handlers in `web/src/test/handlers.ts`

```ts
import { fieldDefinitions, materialTerms, personAuthorities } from "./fixtures";

// add to the `handlers` array:
  http.get("/api/admin/field-definitions", () => HttpResponse.json(fieldDefinitions)),
  http.get("/api/admin/vocabularies/:id/terms", () => HttpResponse.json(materialTerms)),
  http.get("/api/admin/authorities", ({ request }) => {
    const kind = new URL(request.url).searchParams.get("kind");
    return HttpResponse.json(kind === "person" ? personAuthorities : []);
  }),
  http.post("/api/admin/objects", () =>
    HttpResponse.json({ id: "11111111-1111-1111-1111-111111111111" }, { status: 201 })),
  http.put("/api/admin/objects/:id", () => new HttpResponse(null, { status: 204 })),
  http.put("/api/admin/objects/:id/fields", () => new HttpResponse(null, { status: 204 })),
  http.delete("/api/admin/objects/:id", () => new HttpResponse(null, { status: 204 })),
```
(There is already a `GET /api/admin/field-definitions` handler from M1 returning a single "material" def — REPLACE it with the `fieldDefinitions` one above so the richer set is the default. Keep the existing GET objects / objects/:id handlers.)

- [ ] **Step 4: Write the failing hook tests** — `web/src/api/queries.authoring.test.ts`

```ts
import { describe, expect, test } from "vitest";
import { renderHook, waitFor } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { ReactNode } from "react";
import {
  useTerms, useAuthorities, useCreateObject, useUpdateObject, useSetFields, useDeleteObject,
} from "./queries";

function wrapper({ children }: { children: ReactNode }) {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
}

describe("authoring hooks", () => {
  test("useTerms loads a vocabulary's terms", async () => {
    const { result } = renderHook(() => useTerms("v-material"), { wrapper });
    await waitFor(() => expect(result.current.data).toBeDefined());
    expect(result.current.data?.[0].id).toBe("t-bronze");
  });

  test("useAuthorities loads by kind", async () => {
    const { result } = renderHook(() => useAuthorities("person"), { wrapper });
    await waitFor(() => expect(result.current.data?.length).toBe(1));
    expect(result.current.data?.[0].id).toBe("a-ada");
  });

  test("useCreateObject returns the new id", async () => {
    const { result } = renderHook(() => useCreateObject(), { wrapper });
    const created = await result.current.mutateAsync({
      object_number: "A-1", object_name: "x", number_of_objects: 1, visibility: "draft",
    });
    expect(created.id).toBe("11111111-1111-1111-1111-111111111111");
  });

  test("useSetFields / useUpdateObject / useDeleteObject resolve", async () => {
    const setFields = renderHook(() => useSetFields(), { wrapper });
    await setFields.result.current.mutateAsync({ id: "o1", fields: { inscription: "hi" } });
    const update = renderHook(() => useUpdateObject(), { wrapper });
    await update.result.current.mutateAsync({ id: "o1", body: { object_number: "A-1", object_name: "x", number_of_objects: 1 } });
    const del = renderHook(() => useDeleteObject(), { wrapper });
    await del.result.current.mutateAsync("o1");
    expect(true).toBe(true); // mutateAsync rejects on failure; reaching here = success
  });
});
```

- [ ] **Step 5: Run to verify it fails**

Run: `pnpm test src/api/queries.authoring.test.ts`
Expected: FAIL — the new hooks aren't exported yet.

- [ ] **Step 6: Implement the hooks** — append to `web/src/api/queries.ts`

```ts
type ObjectCreateRequest = components["schemas"]["ObjectCreateRequest"];
type ObjectUpdateRequest = components["schemas"]["ObjectUpdateRequest"];

export function useTerms(vocabularyId: string | null | undefined) {
  return useQuery({
    queryKey: ["terms", vocabularyId],
    enabled: !!vocabularyId,
    queryFn: async () => {
      const { data, error } = await api.GET("/api/admin/vocabularies/{id}/terms", {
        params: { path: { id: vocabularyId! } },
      });
      if (error || !data) throw new Error("failed to load terms");
      return data;
    },
    staleTime: 5 * 60 * 1000,
  });
}

export function useAuthorities(kind: string | null | undefined) {
  return useQuery({
    queryKey: ["authorities", kind],
    enabled: !!kind,
    queryFn: async () => {
      const { data, error } = await api.GET("/api/admin/authorities", {
        params: { query: { kind: kind! } },
      });
      if (error || !data) throw new Error("failed to load authorities");
      return data;
    },
    staleTime: 5 * 60 * 1000,
  });
}

export function useCreateObject() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (body: ObjectCreateRequest) => {
      const { data, error } = await api.POST("/api/admin/objects", { body });
      if (error || !data) throw new Error("create failed");
      return data; // { id }
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["objects"] }),
  });
}

export function useUpdateObject() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async ({ id, body }: { id: string; body: ObjectUpdateRequest }) => {
      const { response } = await api.PUT("/api/admin/objects/{id}", {
        params: { path: { id } }, body,
      });
      if (response.status !== 204) throw new Error("update failed");
    },
    onSuccess: (_d, { id }) => {
      void qc.invalidateQueries({ queryKey: ["objects"] });
      void qc.invalidateQueries({ queryKey: ["object", id] });
    },
  });
}

export function useSetFields() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async ({ id, fields }: { id: string; fields: Record<string, unknown> }) => {
      const { response } = await api.PUT("/api/admin/objects/{id}/fields", {
        params: { path: { id } },
        body: fields as Record<string, never>, // schema types fields as Record<string,never> (issue #24)
      });
      if (response.status !== 204) throw new Error("set fields failed");
    },
    onSuccess: (_d, { id }) => {
      void qc.invalidateQueries({ queryKey: ["object", id] });
    },
  });
}

export function useDeleteObject() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (id: string) => {
      const { response } = await api.DELETE("/api/admin/objects/{id}", {
        params: { path: { id } },
      });
      if (response.status !== 204) throw new Error("delete failed");
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: ["objects"] }),
  });
}
```
(Confirm `api.PUT`/`api.DELETE` exist on the openapi-fetch client and the `body`/`params` shapes match the installed version. The `fields as Record<string,never>` cast mirrors the read-side cast and is tracked by issue #24. If `ObjectCreateRequest`/`ObjectUpdateRequest` aren't the exact generated names, use the actual ones from `schema.d.ts`.)

- [ ] **Step 7: Run / typecheck / lint / build**

Run: `pnpm test` → all pass (M1's 17 + the new hook tests). `pnpm typecheck`, `pnpm lint`, `pnpm build` → clean.
NOTE: replacing the default `field-definitions` handler may affect the M1 `object-detail.test.tsx` (it overrode the handler itself, so it's unaffected) — confirm the full suite stays green; if an M1 test depended on the old single-def handler, update it minimally.

- [ ] **Step 8: Commit**

```bash
cd ..
git add web
git commit -m "feat(web): authoring query/mutation hooks + MSW handlers + shadcn select/checkbox/alert-dialog"
```

---

## Task 2: `FieldInput` — dynamic control per `data_type`

**Files:**
- Create: `web/src/objects/field-input.tsx`, `web/src/objects/field-input.test.tsx`

- [ ] **Step 1: Write the failing test** `web/src/objects/field-input.test.tsx`

```tsx
import { expect, test } from "vitest";
import { screen } from "@testing-library/react";
import { useForm } from "react-hook-form";
import { renderApp } from "../test/render";
import { FieldInput } from "./field-input";
import { fieldDefinitions } from "../test/fixtures";

function Harness({ defKey }: { defKey: string }) {
  const def = fieldDefinitions.find((d) => d.key === defKey)!;
  const form = useForm({ defaultValues: { fields: {} as Record<string, unknown> } });
  return <FieldInput definition={def} form={form} />;
}

test("text field renders a text input labelled in the active locale", async () => {
  renderApp(<Harness defKey="inscription" />);
  expect(await screen.findByLabelText("Inscription")).toBeInTheDocument();
});

test("boolean field renders a checkbox", async () => {
  renderApp(<Harness defKey="is_fragment" />);
  expect(await screen.findByRole("checkbox", { name: /is fragment/i })).toBeInTheDocument();
});

test("localized_text renders sv and en inputs", async () => {
  renderApp(<Harness defKey="title_ml" />);
  expect(await screen.findByLabelText(/title.*\(en\)/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/title.*\(sv\)/i)).toBeInTheDocument();
});

test("term field renders a select populated from the vocabulary", async () => {
  renderApp(<Harness defKey="material" />);
  // option label from the term, in the active (en) locale
  expect(await screen.findByText("Bronze")).toBeInTheDocument();
});

test("authority field renders a select populated by kind", async () => {
  renderApp(<Harness defKey="maker" />);
  expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();
});
```

- [ ] **Step 2: Run to verify it fails** — `pnpm test src/objects/field-input.test.tsx` → FAIL (no `FieldInput`).

- [ ] **Step 3: Implement** — `web/src/objects/field-input.tsx`

```tsx
import { Controller, type UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";
import type { components } from "../api/schema";
import { useTerms, useAuthorities } from "../api/queries";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";

type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
type LabelView = components["schemas"]["LabelView"];

function labelIn(labels: LabelView[], lang: string): string {
  return (
    labels.find((l) => l.lang === lang)?.label ??
    labels.find((l) => l.lang === "en")?.label ??
    labels[0]?.label ??
    ""
  );
}

// A native <select> keeps the bundle lean and is fully accessible; the shadcn Select
// can replace it later without changing the value contract (option value = id).
function OptionsSelect({
  id, value, onChange, options, lang, placeholder,
}: {
  id: string; value: string; onChange: (v: string) => void;
  options: { id: string; labels: LabelView[] }[]; lang: string; placeholder: string;
}) {
  return (
    <select id={id} className="w-full rounded border px-2 py-1 text-sm"
            value={value} onChange={(e) => onChange(e.target.value)}>
      <option value="">{placeholder}</option>
      {options.map((o) => (
        <option key={o.id} value={o.id}>{labelIn(o.labels, lang)}</option>
      ))}
    </select>
  );
}

export function FieldInput({
  definition, form,
}: {
  definition: FieldDefinitionView;
  form: UseFormReturn<{ fields: Record<string, unknown> }>;
}) {
  const { t, i18n } = useTranslation();
  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
  const label = labelIn(definition.labels, lang);
  const name = `fields.${definition.key}` as const;
  const placeholder = t("form.selectPlaceholder");

  switch (definition.data_type) {
    case "integer":
      return (
        <div className="space-y-1">
          <Label htmlFor={definition.key}>{label}</Label>
          <Input id={definition.key} type="number"
                 {...form.register(name, { valueAsNumber: true, required: definition.required })} />
        </div>
      );
    case "date":
      return (
        <div className="space-y-1">
          <Label htmlFor={definition.key}>{label}</Label>
          <Input id={definition.key} type="date"
                 {...form.register(name, { required: definition.required })} />
        </div>
      );
    case "boolean":
      return (
        <div className="flex items-center gap-2">
          <Controller control={form.control} name={name}
            render={({ field }) => (
              <Checkbox id={definition.key} checked={!!field.value}
                        onCheckedChange={(c) => field.onChange(c === true)} />
            )} />
          <Label htmlFor={definition.key}>{label}</Label>
        </div>
      );
    case "localized_text":
      return (
        <div className="space-y-1">
          <Label>{label}</Label>
          <Label htmlFor={`${definition.key}-en`} className="text-xs text-neutral-500">{label} (EN)</Label>
          <Input id={`${definition.key}-en`} {...form.register(`fields.${definition.key}.en` as const)} />
          <Label htmlFor={`${definition.key}-sv`} className="text-xs text-neutral-500">{label} (SV)</Label>
          <Input id={`${definition.key}-sv`} {...form.register(`fields.${definition.key}.sv` as const)} />
        </div>
      );
    case "term":
      return (
        <TermField definition={definition} form={form} label={label} lang={lang} placeholder={placeholder} />
      );
    case "authority":
      return (
        <AuthorityField definition={definition} form={form} label={label} lang={lang} placeholder={placeholder} />
      );
    case "text":
    default:
      return (
        <div className="space-y-1">
          <Label htmlFor={definition.key}>{label}</Label>
          <Input id={definition.key}
                 {...form.register(name, { required: definition.required })} />
        </div>
      );
  }
}

function TermField({ definition, form, label, lang, placeholder }: {
  definition: FieldDefinitionView; form: UseFormReturn<{ fields: Record<string, unknown> }>;
  label: string; lang: string; placeholder: string;
}) {
  const { data: terms } = useTerms(definition.vocabulary_id);
  return (
    <div className="space-y-1">
      <Label htmlFor={definition.key}>{label}</Label>
      <Controller control={form.control} name={`fields.${definition.key}` as const}
        rules={{ required: definition.required }}
        render={({ field }) => (
          <OptionsSelect id={definition.key} value={(field.value as string) ?? ""}
            onChange={field.onChange} options={terms ?? []} lang={lang} placeholder={placeholder} />
        )} />
    </div>
  );
}

function AuthorityField({ definition, form, label, lang, placeholder }: {
  definition: FieldDefinitionView; form: UseFormReturn<{ fields: Record<string, unknown> }>;
  label: string; lang: string; placeholder: string;
}) {
  const { data: authorities } = useAuthorities(definition.authority_kind);
  return (
    <div className="space-y-1">
      <Label htmlFor={definition.key}>{label}</Label>
      <Controller control={form.control} name={`fields.${definition.key}` as const}
        rules={{ required: definition.required }}
        render={({ field }) => (
          <OptionsSelect id={definition.key} value={(field.value as string) ?? ""}
            onChange={field.onChange} options={authorities ?? []} lang={lang} placeholder={placeholder} />
        )} />
    </div>
  );
}
```
NOTES:
- Uses a **native `<select>`** for term/authority (lean, accessible) rather than the shadcn Select; the value contract (option value = id) is unchanged if you later swap in shadcn Select. (If you prefer the shadcn Select that Task 1 added, use it — but keep the id-as-value contract and ensure `getByText(label)` still finds options.)
- The form's field state lives under a `fields` object (`fields.<key>`), so RHF dotted paths work; `localized_text` nests `fields.<key>.en` / `.sv`.
- Add i18n key `form.selectPlaceholder` (= "— select —" / "— välj —") in Task 3's i18n step (or here). For this task's test, add it now to both `en.json` and `sv.json` so `t("form.selectPlaceholder")` resolves.

- [ ] **Step 4: Add the i18n key** — in `web/src/i18n/en.json` add `"form": { "selectPlaceholder": "— select —" }`; in `sv.json` add `"form": { "selectPlaceholder": "— välj —" }`. (More `form.*` keys are added in Task 3; keep the `form` namespace.)

- [ ] **Step 5: Run** — `pnpm test src/objects/field-input.test.tsx` → PASS (5 tests). Then `pnpm test` (all), `pnpm typecheck`, `pnpm lint`, `pnpm build` → clean.

- [ ] **Step 6: Commit**

```bash
cd ..
git add web
git commit -m "feat(web): dynamic FieldInput (text/integer/date/boolean/localized_text/term/authority)"
```

---

## Task 3: `ObjectForm` — shared core + flexible form

**Files:**
- Create: `web/src/objects/object-form.tsx`, `web/src/objects/object-form.test.tsx`
- Modify: `web/src/i18n/{en,sv}.json`

- [ ] **Step 1: Add i18n form keys** — merge into the `form` namespace of `web/src/i18n/en.json`

```json
"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",
  "flexibleHeading": "Catalogue fields"
}
```
and `sv.json`:
```json
"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",
  "flexibleHeading": "Katalogfält"
}
```
(Reuse the existing `fieldsLabels.*` keys from M1 for the core field labels.)

- [ ] **Step 2: Write the failing test** `web/src/objects/object-form.test.tsx`

```tsx
import { expect, test, vi } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderApp } from "../test/render";
import { ObjectForm } from "./object-form";

test("create mode: shows visibility (draft/internal only) and submits assembled values", async () => {
  const onSubmit = vi.fn();
  renderApp(<ObjectForm mode="create" onSubmit={onSubmit} onCancel={() => {}} />);

  await userEvent.type(await screen.findByLabelText(/object number/i), "A-9");
  await userEvent.type(screen.getByLabelText(/^name/i), "Amphora");
  await userEvent.type(screen.getByLabelText(/inscription/i), "To the gods");

  const visibility = screen.getByLabelText(/visibility/i) as HTMLSelectElement;
  expect([...visibility.options].map((o) => o.value)).toEqual(
    expect.arrayContaining(["draft", "internal"]),
  );
  expect([...visibility.options].map((o) => o.value)).not.toContain("public");

  await userEvent.click(screen.getByRole("button", { name: /create object/i }));
  await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
  const values = onSubmit.mock.calls[0][0];
  expect(values.core.object_number).toBe("A-9");
  expect(values.visibility).toBe("draft");
  expect(values.fields.inscription).toBe("To the gods");
});

test("required core + required flexible field block submit", async () => {
  const onSubmit = vi.fn();
  renderApp(<ObjectForm mode="create" onSubmit={onSubmit} onCancel={() => {}} />);
  await userEvent.click(await screen.findByRole("button", { name: /create object/i }));
  // object_number, object_name, and required flexible "inscription" missing
  await waitFor(() => expect(screen.getAllByText(/required/i).length).toBeGreaterThan(0));
  expect(onSubmit).not.toHaveBeenCalled();
});

test("edit mode: no visibility control, save button, prefilled values", async () => {
  const onSubmit = vi.fn();
  renderApp(
    <ObjectForm mode="edit" onSubmit={onSubmit} onCancel={() => {}}
      defaults={{
        core: { object_number: "A-1", object_name: "Amphora", number_of_objects: 1,
          brief_description: null, current_location: "Vault 3", current_owner: null,
          recorder: null, recording_date: null },
        fields: { inscription: "hi" },
      }} />,
  );
  expect(await screen.findByDisplayValue("Amphora")).toBeInTheDocument();
  expect(screen.queryByLabelText(/visibility/i)).not.toBeInTheDocument();
  expect(screen.getByRole("button", { name: /save/i })).toBeInTheDocument();
});
```

- [ ] **Step 3: Implement** — `web/src/objects/object-form.tsx`

```tsx
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useFieldDefinitions } from "../api/queries";
import { FieldInput } from "./field-input";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export type ObjectCore = {
  object_number: string;
  object_name: string;
  number_of_objects: number;
  brief_description: string | null;
  current_location: string | null;
  current_owner: string | null;
  recorder: string | null;
  recording_date: string | null;
};

export type ObjectFormValues = {
  core: ObjectCore;
  visibility?: "draft" | "internal";
  fields: Record<string, unknown>;
};

type FormShape = { core: ObjectCore; visibility: "draft" | "internal"; fields: Record<string, unknown> };

const EMPTY_CORE: ObjectCore = {
  object_number: "", object_name: "", number_of_objects: 1,
  brief_description: null, current_location: null, current_owner: null,
  recorder: null, recording_date: null,
};

export function ObjectForm({
  mode, defaults, onSubmit, onCancel, formError,
}: {
  mode: "create" | "edit";
  defaults?: { core: ObjectCore; fields: Record<string, unknown> };
  onSubmit: (values: ObjectFormValues) => void;
  onCancel: () => void;
  formError?: string | null;
}) {
  const { t } = useTranslation();
  const { data: definitions } = useFieldDefinitions();
  const form = useForm<FormShape>({
    defaultValues: {
      core: defaults?.core ?? EMPTY_CORE,
      visibility: "draft",
      fields: defaults?.fields ?? {},
    },
  });
  const { register, handleSubmit, formState: { errors } } = form;

  const submit = handleSubmit((data) => {
    const fields = pruneFields(data.fields);
    onSubmit(
      mode === "create"
        ? { core: data.core, visibility: data.visibility, fields }
        : { core: data.core, fields },
    );
  });

  const coreField = (key: keyof ObjectCore, labelKey: string, opts?: { type?: string; required?: boolean }) => (
    <div className="space-y-1">
      <Label htmlFor={key}>{t(`fieldsLabels.${labelKey}`)}</Label>
      <Input id={key} type={opts?.type ?? "text"}
        {...register(`core.${key}` as const,
          opts?.type === "number"
            ? { valueAsNumber: true, required: opts?.required }
            : { required: opts?.required })} />
      {errors.core?.[key] && <p role="alert" className="text-xs text-red-600">{t("form.required")}</p>}
    </div>
  );

  return (
    <form onSubmit={submit} className="space-y-4 overflow-auto p-4">
      {formError && <p role="alert" className="text-sm text-red-600">{formError}</p>}
      {coreField("object_number", "objectNumber", { required: true })}
      {coreField("object_name", "objectName", { required: true })}
      {coreField("number_of_objects", "count", { type: "number", required: true })}
      {coreField("brief_description", "briefDescription")}
      {coreField("current_location", "currentLocation")}
      {coreField("current_owner", "currentOwner")}
      {coreField("recorder", "recorder")}
      {coreField("recording_date", "recordingDate", { type: "date" })}

      {mode === "create" && (
        <div className="space-y-1">
          <Label htmlFor="visibility">{t("form.visibility")}</Label>
          <select id="visibility" className="w-full rounded border px-2 py-1 text-sm"
                  {...register("visibility")}>
            <option value="draft">{t("form.draft")}</option>
            <option value="internal">{t("form.internal")}</option>
          </select>
        </div>
      )}

      {definitions && definitions.length > 0 && (
        <fieldset className="space-y-3 border-t pt-3">
          <legend className="text-xs font-medium uppercase text-neutral-500">{t("form.flexibleHeading")}</legend>
          {definitions.map((def) => (
            <div key={def.key}>
              <FieldInput definition={def} form={form} />
              {errors.fields?.[def.key] && (
                <p role="alert" className="text-xs text-red-600">{t("form.required")}</p>
              )}
            </div>
          ))}
        </fieldset>
      )}

      <div className="flex gap-2 pt-2">
        <Button type="submit">{mode === "create" ? t("form.create") : t("form.save")}</Button>
        <Button type="button" variant="ghost" onClick={onCancel}>{t("form.cancel")}</Button>
      </div>
    </form>
  );
}

// Drop empty optional values so the replace-semantics field map only carries real values.
function pruneFields(fields: Record<string, unknown>): Record<string, unknown> {
  const out: Record<string, unknown> = {};
  for (const [key, value] of Object.entries(fields)) {
    if (value === undefined || value === null || value === "") continue;
    if (typeof value === "object" && !Array.isArray(value)) {
      const inner = Object.fromEntries(
        Object.entries(value as Record<string, unknown>).filter(([, v]) => v !== undefined && v !== null && v !== ""),
      );
      if (Object.keys(inner).length > 0) out[key] = inner;
      continue;
    }
    out[key] = value;
  }
  return out;
}
```
NOTES:
- The `core.object_name` label uses `fieldsLabels.objectName` ("Name"); the test matches `/^name/i` against that label — confirm the M1 `fieldsLabels.objectName` value is "Name"/"Namn" (it is). The `/object number/i` matches `fieldsLabels.objectNumber`.
- `pruneFields` enforces replace-semantics: empty optional fields are omitted; `localized_text` objects drop empty langs and are omitted entirely if both empty.
- Number coercion via `valueAsNumber`; date stays a `YYYY-MM-DD` string from the native date input.
- Required flexible fields use the `definition.required` rule wired in `FieldInput` (Task 2); the error message renders here.

- [ ] **Step 4: Run** — `pnpm test src/objects/object-form.test.tsx` → PASS (3 tests). Then full `pnpm test` / typecheck / lint / build clean.

- [ ] **Step 5: Commit**

```bash
cd ..
git add web
git commit -m "feat(web): ObjectForm (core + dynamic flexible fields, RHF, validation)"
```

---

## Task 4: New-object page + create flow + `/objects/new` route

**Files:**
- Create: `web/src/objects/object-new-page.tsx`, `web/src/objects/object-new-page.test.tsx`
- Modify: `web/src/app.tsx`, `web/src/objects/object-list.tsx`, `web/src/i18n/{en,sv}.json`

- [ ] **Step 1: i18n** — add to the `objects` namespace: `en.json` `"new": "New object"`; `sv.json` `"new": "Nytt föremål"`.

- [ ] **Step 2: Write the failing test** `web/src/objects/object-new-page.test.tsx`

```tsx
import { expect, test } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { http, HttpResponse } from "msw";
import { Routes, Route } from "react-router-dom";
import { server } from "../test/server";
import { renderApp } from "../test/render";
import { ObjectNewPage } from "./object-new-page";

function tree() {
  return (
    <Routes>
      <Route path="/objects/new" element={<ObjectNewPage />} />
      <Route path="/objects/:id" element={<div>detail for {window.location.pathname}</div>} />
      <Route path="/objects/:id/edit" element={<div>edit page</div>} />
    </Routes>
  );
}

test("create: POST then PUT fields, then navigate to the new object's detail", async () => {
  let postBody: unknown; let fieldsBody: unknown;
  server.use(
    http.post("/api/admin/objects", async ({ request }) => {
      postBody = await request.json();
      return HttpResponse.json({ id: "new-id-1" }, { status: 201 });
    }),
    http.put("/api/admin/objects/:id/fields", async ({ request }) => {
      fieldsBody = await request.json();
      return new HttpResponse(null, { status: 204 });
    }),
  );
  renderApp(tree(), { route: "/objects/new" });
  await userEvent.type(await screen.findByLabelText(/object number/i), "A-9");
  await userEvent.type(screen.getByLabelText(/^name/i), "Amphora");
  await userEvent.type(screen.getByLabelText(/inscription/i), "To the gods");
  await userEvent.click(screen.getByRole("button", { name: /create object/i }));

  await waitFor(() => expect(screen.getByText(/detail for/i)).toBeInTheDocument());
  expect((postBody as { object_number: string }).object_number).toBe("A-9");
  expect((fieldsBody as { inscription: string }).inscription).toBe("To the gods");
});

test("partial create: fields PUT fails -> navigate to edit with an error banner", async () => {
  server.use(
    http.post("/api/admin/objects", () => HttpResponse.json({ id: "new-id-2" }, { status: 201 })),
    http.put("/api/admin/objects/:id/fields", () => new HttpResponse(null, { status: 422 })),
  );
  renderApp(tree(), { route: "/objects/new" });
  await userEvent.type(await screen.findByLabelText(/object number/i), "A-9");
  await userEvent.type(screen.getByLabelText(/^name/i), "Amphora");
  await userEvent.type(screen.getByLabelText(/inscription/i), "x");
  await userEvent.click(screen.getByRole("button", { name: /create object/i }));
  await waitFor(() => expect(screen.getByText(/edit page/i)).toBeInTheDocument());
});
```

- [ ] **Step 3: Implement** — `web/src/objects/object-new-page.tsx`

```tsx
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { ObjectForm, type ObjectFormValues } from "./object-form";
import { useCreateObject, useSetFields } from "../api/queries";

export function ObjectNewPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const create = useCreateObject();
  const setFields = useSetFields();
  const [error, setError] = useState<string | null>(null);

  const onSubmit = async (values: ObjectFormValues) => {
    setError(null);
    let id: string;
    try {
      const created = await create.mutateAsync({
        ...values.core,
        visibility: values.visibility ?? "draft",
      });
      id = created.id;
    } catch {
      setError(t("form.rejected"));
      return;
    }
    if (Object.keys(values.fields).length > 0) {
      try {
        await setFields.mutateAsync({ id, fields: values.fields });
      } catch {
        // core record is saved; recover on the edit page so fields can be retried
        navigate(`/objects/${id}/edit`, { state: { fieldsError: true } });
        return;
      }
    }
    navigate(`/objects/${id}`);
  };

  return (
    <div className="mx-auto max-w-2xl">
      <ObjectForm mode="create" formError={error}
        onSubmit={onSubmit} onCancel={() => navigate("/objects")} />
    </div>
  );
}
```
(`create.mutateAsync` body spreads `values.core` + `visibility` to match `ObjectCreateRequest`. Confirm `ObjectCreateRequest` accepts exactly these keys; if it requires non-null strings vs nulls for optionals, adapt the core nulls to `undefined`/omit. The edit page reads `location.state.fieldsError` in Task 5 to show the banner.)

- [ ] **Step 4: Wire the route + list button**

In `web/src/app.tsx`, add (as a sibling of `/objects`, inside the protected `AppShell` group, BEFORE/independent of the `/objects` route — React Router ranks static `new` above dynamic `:id`):
```tsx
<Route path="/objects/new" element={<ObjectNewPage />} />
```
(Import `ObjectNewPage`. Keep the existing `/objects` + `/objects/:id` routes for now; Task 5 converts them to nested children.)

In `web/src/objects/object-list.tsx`, add a "New object" link near the list header/footer:
```tsx
import { Link } from "react-router-dom";
// in the footer or a small header row:
<Link to="/objects/new" className="text-sm font-medium text-indigo-600">{t("objects.new")}</Link>
```
(Place it so the existing object-list tests still pass — e.g. a header row above the `<ul>`.)

- [ ] **Step 5: Run** — `pnpm test src/objects/object-new-page.test.tsx` → PASS (2 tests). Full `pnpm test` / typecheck / lint / build clean. (Confirm `object-list.test.tsx` still green after adding the link.)

- [ ] **Step 6: Commit**

```bash
cd ..
git add web
git commit -m "feat(web): new-object full-width page + create flow + /objects/new"
```

---

## Task 5: Nested routes + in-pane edit form + edit flow

**Files:**
- Create: `web/src/objects/object-edit-form.tsx`, `web/src/objects/object-edit-form.test.tsx`
- Modify: `web/src/objects/objects-page.tsx`, `web/src/app.tsx`, `web/src/objects/object-detail.tsx`

- [ ] **Step 1: Convert `ObjectsPage` to render an `<Outlet/>` right pane** — replace `web/src/objects/objects-page.tsx`

```tsx
import { Outlet } from "react-router-dom";
import { ObjectList } from "./object-list";

export function ObjectsPage() {
  return (
    <div className="grid h-full grid-cols-[20rem_1fr]">
      <div className="overflow-hidden border-r">
        <ObjectList />
      </div>
      <div className="overflow-hidden">
        <Outlet />
      </div>
    </div>
  );
}
```
Create the index placeholder inline or as a tiny component `web/src/objects/select-prompt.tsx`:
```tsx
import { useTranslation } from "react-i18next";
export function SelectPrompt() {
  const { t } = useTranslation();
  return (
    <div className="flex h-full items-center justify-center p-4 text-sm text-neutral-400">
      {t("objects.selectPrompt")}
    </div>
  );
}
```

- [ ] **Step 2: Nest the routes** — in `web/src/app.tsx`

```tsx
<Route path="/objects/new" element={<ObjectNewPage />} />
<Route path="/objects" element={<ObjectsPage />}>
  <Route index element={<SelectPrompt />} />
  <Route path=":id" element={<ObjectDetail />} />
  <Route path=":id/edit" element={<ObjectEditForm />} />
</Route>
```
(`ObjectDetail` and `ObjectEditForm` now render inside `ObjectsPage`'s `<Outlet/>`; both read `:id` via `useParams`. Import `SelectPrompt`, `ObjectEditForm`.)

- [ ] **Step 3: Write the failing edit test** `web/src/objects/object-edit-form.test.tsx`

```tsx
import { expect, test } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { http, HttpResponse } from "msw";
import { Routes, Route } from "react-router-dom";
import { server } from "../test/server";
import { renderApp } from "../test/render";
import { ObjectEditForm } from "./object-edit-form";
import { amphora } from "../test/fixtures";

function tree() {
  return (
    <Routes>
      <Route path="/objects/:id/edit" element={<ObjectEditForm />} />
      <Route path="/objects/:id" element={<div>detail view</div>} />
    </Routes>
  );
}

test("edit: prefilled, save -> PUT core + PUT fields -> back to detail", async () => {
  let putCore: unknown; let putFields: unknown;
  server.use(
    http.get("/api/admin/objects/:id", () =>
      HttpResponse.json({ ...amphora, fields: { inscription: "old" } })),
    http.put("/api/admin/objects/:id", async ({ request }) => {
      putCore = await request.json();
      return new HttpResponse(null, { status: 204 });
    }),
    http.put("/api/admin/objects/:id/fields", async ({ request }) => {
      putFields = await request.json();
      return new HttpResponse(null, { status: 204 });
    }),
  );
  renderApp(tree(), { route: `/objects/${amphora.id}/edit` });

  const name = await screen.findByDisplayValue("Amphora");
  await userEvent.clear(name);
  await userEvent.type(name, "Big amphora");
  await userEvent.click(screen.getByRole("button", { name: /save/i }));

  await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument());
  expect((putCore as { object_name: string }).object_name).toBe("Big amphora");
  expect((putFields as { inscription: string }).inscription).toBe("old");
});
```
(The default `amphora` fixture has `fields: {}` due to the schema typing; the handler override returns `fields: { inscription: "old" }` as a plain object — same approach as M1's detail test.)

- [ ] **Step 4: Implement** — `web/src/objects/object-edit-form.tsx`

```tsx
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ObjectForm, type ObjectFormValues, type ObjectCore } from "./object-form";
import { useObject, useUpdateObject, useSetFields } from "../api/queries";

export function ObjectEditForm() {
  const { t } = useTranslation();
  const { id } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  const { data: object, isLoading } = useObject(id!);
  const update = useUpdateObject();
  const setFields = useSetFields();
  const [error, setError] = useState<string | null>(
    (location.state as { fieldsError?: boolean } | null)?.fieldsError ? t("form.rejected") : null,
  );

  if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
  if (!object) return <p className="p-4 text-sm text-neutral-500">{t("objects.notFound")}</p>;

  const core: ObjectCore = {
    object_number: object.object_number,
    object_name: object.object_name,
    number_of_objects: object.number_of_objects,
    brief_description: object.brief_description ?? null,
    current_location: object.current_location ?? null,
    current_owner: object.current_owner ?? null,
    recorder: object.recorder ?? null,
    recording_date: object.recording_date ?? null,
  };
  const defaults = { core, fields: object.fields as Record<string, unknown> };

  const onSubmit = async (values: ObjectFormValues) => {
    setError(null);
    try {
      await update.mutateAsync({ id: id!, body: values.core });
      await setFields.mutateAsync({ id: id!, fields: values.fields });
    } catch {
      setError(t("form.rejected"));
      return;
    }
    navigate(`/objects/${id}`);
  };

  return (
    <ObjectForm mode="edit" defaults={defaults} formError={error}
      onSubmit={onSubmit} onCancel={() => navigate(`/objects/${id}`)} />
  );
}
```

- [ ] **Step 5: Add the Edit action to detail** — first add the i18n key, then the link.

In `web/src/i18n/en.json` add an `actions` namespace `"actions": { "edit": "Edit" }`; in `sv.json` `"actions": { "edit": "Redigera" }`. (Task 6 extends this `actions` namespace with `delete`/`confirmDelete`.)

In `web/src/objects/object-detail.tsx`, add (in the header row next to the badge) a link to edit:
```tsx
import { Link } from "react-router-dom";
// in the header row next to the badge:
<Link to={`/objects/${object.id}/edit`} className="text-sm font-medium text-indigo-600">{t("actions.edit")}</Link>
```

- [ ] **Step 6: Run** — `pnpm test src/objects/object-edit-form.test.tsx` → PASS. Full `pnpm test` (M1 detail + objects-page tests now run under nested routing — confirm they still pass; the `objects-page.test.tsx` from M1 asserted clicking a row shows detail, which still holds via nested routes — update that test's route table to the nested shape if needed), typecheck, lint, build clean.
NOTE: M1's `objects-page.test.tsx` rendered `ObjectsPage` under flat `/objects` + `/objects/:id` routes. With nesting, update that test to render the nested route tree (parent `ObjectsPage` with `:id` child) so the click-through still asserts detail in the right pane.

- [ ] **Step 7: Commit**

```bash
cd ..
git add web
git commit -m "feat(web): nested object routes + in-pane edit form + edit flow"
```

---

## Task 6: Delete (confirm dialog + flow)

**Files:**
- Create: `web/src/objects/delete-object-dialog.tsx`, `web/src/objects/delete-object-dialog.test.tsx`
- Modify: `web/src/objects/object-detail.tsx`, `web/src/i18n/{en,sv}.json`

- [ ] **Step 1: i18n** — EXTEND the existing `actions` namespace (created in Task 5 with `edit`) by adding `delete` + `confirmDelete`. Final `actions` in `en.json`: `{ "edit": "Edit", "delete": "Delete", "confirmDelete": "Delete this object? This cannot be undone." }`; in `sv.json`: `{ "edit": "Redigera", "delete": "Ta bort", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras." }`.

- [ ] **Step 2: Write the failing test** `web/src/objects/delete-object-dialog.test.tsx`

```tsx
import { expect, test } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { http, HttpResponse } from "msw";
import { Routes, Route } from "react-router-dom";
import { server } from "../test/server";
import { renderApp } from "../test/render";
import { DeleteObjectDialog } from "./delete-object-dialog";

function tree() {
  return (
    <Routes>
      <Route path="/objects/:id" element={<DeleteObjectDialog id="o-1" />} />
      <Route path="/objects" element={<div>objects list</div>} />
    </Routes>
  );
}

test("confirm delete: DELETE then navigate to the list", async () => {
  let deleted = false;
  server.use(http.delete("/api/admin/objects/:id", () => { deleted = true; return new HttpResponse(null, { status: 204 }); }));
  renderApp(tree(), { route: "/objects/o-1" });
  await userEvent.click(await screen.findByRole("button", { name: /delete/i }));
  // confirm in the dialog
  await userEvent.click(await screen.findByRole("button", { name: /^delete$/i }));
  await waitFor(() => expect(screen.getByText("objects list")).toBeInTheDocument());
  expect(deleted).toBe(true);
});
```
(If the trigger and confirm buttons collide on the `/delete/i` name, give the trigger an explicit accessible name like the icon-button `aria-label` and match the confirm with an exact `^Delete$` — adapt the queries so the test unambiguously clicks trigger then confirm.)

- [ ] **Step 3: Implement** — `web/src/objects/delete-object-dialog.tsx`

```tsx
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useDeleteObject } from "../api/queries";
import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle,
  AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export function DeleteObjectDialog({ id }: { id: string }) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const del = useDeleteObject();

  const onConfirm = async () => {
    await del.mutateAsync(id);
    navigate("/objects");
  };

  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="ghost" size="sm" className="text-red-600">{t("actions.delete")}</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>{t("actions.delete")}</AlertDialogTitle>
        <AlertDialogDescription>{t("actions.confirmDelete")}</AlertDialogDescription>
        <AlertDialogFooter>
          <AlertDialogCancel>{t("form.cancel")}</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm}>{t("actions.delete")}</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```
(Adapt the import names to the shadcn alert-dialog the CLI generated — Base UI registry may name parts slightly differently. The contract: a trigger button labelled Delete, a confirm action that calls `useDeleteObject().mutateAsync(id)` then navigates to `/objects`. If trigger/confirm both match `/delete/i`, set the trigger's text via `actions.delete` and the dialog action via the same key — disambiguate in the test by dialog role/scoping, or give the trigger an `aria-label`.)

- [ ] **Step 4: Add Delete to detail** — in `web/src/objects/object-detail.tsx`, render `<DeleteObjectDialog id={object.id} />` in the header actions next to Edit.

- [ ] **Step 5: Run** — `pnpm test src/objects/delete-object-dialog.test.tsx` → PASS. Full suite / typecheck / lint / build clean.

- [ ] **Step 6: Commit**

```bash
cd ..
git add web
git commit -m "feat(web): delete object with confirm dialog"
```

---

## Task 7: Final wiring + full verification

**Files:**
- Modify: any remaining wiring; `web/src/objects/object-detail.tsx` (confirm Edit + Delete actions present)

- [ ] **Step 1: Confirm the detail header has both actions** — `object-detail.tsx` shows the object, an `Edit` link to `/objects/:id/edit`, and the `DeleteObjectDialog`. Adjust layout so they sit together; keep the visibility badge.

- [ ] **Step 2: i18n parity check** — confirm `en.json` and `sv.json` have identical key sets (the new `form.*` and `actions.*` namespaces in both). Run a quick check:
```bash
cd web
node -e "const a=require('./src/i18n/en.json'),b=require('./src/i18n/sv.json');const keys=o=>Object.entries(o).flatMap(([k,v])=>typeof v==='object'?keys(v).map(s=>k+'.'+s):[k]);const ka=keys(a).sort(),kb=keys(b).sort();console.log(JSON.stringify(ka)===JSON.stringify(kb)?'PARITY OK':'MISMATCH:'+JSON.stringify({onlyEn:ka.filter(k=>!kb.includes(k)),onlySv:kb.filter(k=>!ka.includes(k))}))"
```
Expected: `PARITY OK`. Fix any mismatch.

- [ ] **Step 3: Full verification**

```bash
cd web
pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size
```
Expected: typecheck/lint clean; all tests pass; build clean; bundle ≤150 KB gz (report the number — adding RHF + shadcn select/checkbox/alert-dialog should stay under; if it exceeds, lazy-load the new-object page and edit form via `React.lazy` in `app.tsx`).

- [ ] **Step 4: Manual smoke (optional, recommended)** — with the backend running + a Spectrum-seeded field set (or a manually created field definition) + an admin user: `pnpm dev`, create an object with a flexible field, edit it, delete it; switch sv/en.

- [ ] **Step 5: Commit**

```bash
cd ..
git add web
git commit -m "feat(web): wire object authoring actions into detail; i18n parity"
```

---

## Self-Review (completed)

**Spec coverage:**
- New (full-width `/objects/new`) + create flow → Task 4. ✓
- Edit (in-pane `/objects/:id/edit`) + nested routes + edit flow → Task 5. ✓
- Delete + confirm dialog → Task 6. ✓
- Dynamic flexible-field form, all 7 types (incl. term/authority Selects, sv/en localized_text) → Tasks 2–3. ✓
- Client validation (required, integer, date) + form-level 422 + partial-create recovery → Tasks 3, 4, 5. ✓
- Mutations + option hooks + invalidation → Task 1. ✓
- Visibility only Draft/Internal on create, never on edit → Task 3 (test asserts). ✓
- i18n sv/en parity → Task 7 (+ keys added per task). ✓
- Testing Vitest+RTL+MSW → Tasks 1–6. ✓
- Bundle budget → Task 7 (check:size). ✓

**Placeholder scan:** none — every code step shows complete code; the "adapt to the generated/shadcn API" notes are verification instructions with concrete contracts, not deferred work.

**Type consistency:** `ObjectFormValues`/`ObjectCore` defined in Task 3 and consumed in Tasks 4–5; hooks `useTerms`/`useAuthorities`/`useCreateObject`/`useUpdateObject`/`useSetFields`/`useDeleteObject` defined in Task 1 and used in 2/4/5/6; `FieldInput` (Task 2) consumed by `ObjectForm` (Task 3); the `fields.<key>` RHF path shape is consistent across FieldInput and ObjectForm; route shapes (`/objects/new`, `/objects/:id`, `/objects/:id/edit`) consistent across Tasks 4–6.

## Notes for follow-on
- Searchable combobox + server-side term search for large vocabularies (deferred).
- Per-field server error mapping requires the backend `set_fields` 422 to carry field detail (currently bare).
- `fields` map cast (`Record<string, unknown>`) remains pending issue #24.
- The native `<select>` for term/authority can be swapped to shadcn Select without changing the id-as-value contract.