@kahitsan/ksui 0.39.2 → 0.39.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.39.2",
+  "version": "0.39.4",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/composite/VoucherPicker.test.tsx

@@ -1,6 +1,7 @@
 // The picker pages the list in from the server (page/limit) and delegates the
 // search to it, so these assert the request contract as well as the rendering.
 import { describe, expect, it, vi } from "vitest";
+import { createSignal } from "solid-js";
 import { fireEvent, render, waitFor } from "@solidjs/testing-library";
 import VoucherPicker, { type VoucherOption } from "./VoucherPicker";
 
@@ -37,6 +38,7 @@ function voucher(over: Partial<VoucherOption> & Pick<VoucherOption, "id" | "code
     value: 20,
     max_discount_amount: null,
     applicable_packages: null,
+    applicable_package_lineages: null,
     minimum_purchase: 0,
     valid_from: null,
     valid_until: null,
@@ -379,6 +381,266 @@ describe("VoucherPicker dialog", () => {
     );
   });
 
+  it("accepts a voucher when each package matches by aligned lineage", async () => {
+    mockPagedFetch([
+      voucher({
+        id: 35,
+        code: "LINEAGEOK",
+        applicable_packages: [99],
+        applicable_package_lineages: ["day-pass"],
+      }),
+    ]);
+    const { getByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1]}
+        packageLineages={["day-pass"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-result-35")).toBeTruthy());
+  });
+
+  it("accepts mixed carts when every item matches one of several allowed pricing eras", async () => {
+    mockPagedFetch([
+      voucher({
+        id: 55,
+        code: "MULTI_ERA",
+        applicable_package_lineages: ["day-pass", "single-use"],
+      }),
+    ]);
+    const { getByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1, 2, 3]}
+        packageLineages={["day-pass", "single-use", "day-pass"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-result-55")).toBeTruthy());
+  });
+
+  it("rejects a mixed ID and lineage cart when one item matches neither", async () => {
+    mockPagedFetch([
+      voucher({
+        id: 56,
+        code: "MIXED_NEITHER",
+        applicable_packages: [1],
+        applicable_package_lineages: ["day-pass"],
+      }),
+    ]);
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1, 2, 3]}
+        packageLineages={[null, "day-pass", "single-use"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-inapplicable-56")).toBeTruthy());
+    expect(queryByTestId("voucher-picker-result-56")).toBeNull();
+    expect(getByTestId("voucher-picker-inapplicable-56").textContent).toContain(
+      "Doesn't cover every item",
+    );
+  });
+
+  it("does not keep a selected voucher selectable after reopening with a changed lineage", async () => {
+    const selected = voucher({
+      id: 57,
+      code: "CHANGED_ERA",
+      applicable_package_lineages: ["day-pass"],
+    });
+    mockPagedFetch([selected]);
+    const [packageLineage, setPackageLineage] = createSignal<string | null>("day-pass");
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker
+        selected={selected}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1]}
+        packageLineages={[packageLineage()]}
+      />
+    ));
+
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-result-57")).toBeTruthy());
+    fireEvent.click(getByTestId("voucher-picker-cancel"));
+
+    setPackageLineage("single-use");
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-inapplicable-57")).toBeTruthy());
+    expect(queryByTestId("voucher-picker-result-57")).toBeNull();
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(true);
+  });
+
+  it("keeps Confirm disabled when selected voucher is inactive", async () => {
+    const selected = voucher({ id: 59, code: "DISABLED_SELECTED", is_active: false });
+    mockPagedFetch([selected]);
+    const onChange = vi.fn();
+    const { getByTestId } = render(() => (
+      <VoucherPicker
+        selected={selected}
+        onChange={onChange}
+        subtotal={1000}
+        packageIds={[]}
+      />
+    ));
+
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-inapplicable-59")).toBeTruthy());
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(true);
+
+    fireEvent.click(getByTestId("voucher-picker-confirm"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("lists enabled and disabled vouchers in their correct modal sections", async () => {
+    mockPagedFetch([
+      voucher({ id: 37, code: "ENABLED_LINEAGE", applicable_packages: [99], applicable_package_lineages: ["day-pass"] }),
+      voucher({ id: 38, code: "DISABLED_LINEAGE", is_active: false, applicable_packages: [99], applicable_package_lineages: ["day-pass"] }),
+    ]);
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1]}
+        packageLineages={["day-pass"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-result-37")).toBeTruthy());
+    expect(queryByTestId("voucher-picker-inapplicable-37")).toBeNull();
+    expect(getByTestId("voucher-picker-result-37").textContent).toContain("ENABLED_LINEAGE");
+    expect(queryByTestId("voucher-picker-result-38")).toBeNull();
+    expect(getByTestId("voucher-picker-inapplicable-38").textContent).toContain("DISABLED_LINEAGE");
+    expect(getByTestId("voucher-picker-inapplicable-38").textContent).toContain("Inactive");
+  });
+
+  it("lists lineage-disabled vouchers as visible but not selectable", async () => {
+    mockPagedFetch([
+      voucher({ id: 39, code: "DISABLED_LINEAGE", applicable_packages: [99], applicable_package_lineages: ["day-pass"] }),
+    ]);
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1]}
+        packageLineages={["single-use"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-inapplicable-39")).toBeTruthy());
+    expect(queryByTestId("voucher-picker-result-39")).toBeNull();
+    expect(getByTestId("voucher-picker-inapplicable-39").getAttribute("aria-disabled")).toBe("true");
+    expect(getByTestId("voucher-picker-inapplicable-39").textContent).toContain("DISABLED_LINEAGE");
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(true);
+  });
+
+  it("rejects a voucher when aligned package lineage does not match", async () => {
+    mockPagedFetch([
+      voucher({
+        id: 36,
+        code: "LINEAGEBAD",
+        applicable_packages: [99],
+        applicable_package_lineages: ["day-pass"],
+      }),
+    ]);
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={[1]}
+        packageLineages={["single-use"]}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() => expect(getByTestId("voucher-picker-inapplicable-36")).toBeTruthy());
+    expect(queryByTestId("voucher-picker-result-36")).toBeNull();
+    expect(getByTestId("voucher-picker-inapplicable-36").textContent).toContain(
+      "Doesn't cover every item",
+    );
+  });
+  it.each([
+    {
+      name: "legacy ID-only package matching",
+      packageIds: [1],
+      packageLineages: undefined,
+      voucher: voucher({ id: 60, code: "LEGACY_ID", applicable_packages: [1] }),
+      result: true,
+    },
+    {
+      name: "empty lineages with legacy ID-only matching",
+      packageIds: [1],
+      packageLineages: [],
+      voucher: voucher({ id: 61, code: "EMPTY_LINEAGES", applicable_packages: [1] }),
+      result: true,
+    },
+    {
+      name: "mixed IDs and lineages",
+      packageIds: [1, 2],
+      packageLineages: [null, "day-pass"],
+      voucher: voucher({
+        id: 62,
+        code: "MIXED_OK",
+        applicable_packages: [1],
+        applicable_package_lineages: ["day-pass"],
+      }),
+      result: true,
+    },
+    {
+      name: "mixed cart with an uncovered package",
+      packageIds: [1, 2],
+      packageLineages: [null, "single-use"],
+      voucher: voucher({
+        id: 63,
+        code: "MIXED_BAD",
+        applicable_packages: [1],
+        applicable_package_lineages: ["day-pass"],
+      }),
+      result: false,
+    },
+    {
+      name: "null lineage without an allowed package ID",
+      packageIds: [2],
+      packageLineages: [null],
+      voucher: voucher({
+        id: 64,
+        code: "NULL_LINEAGE",
+        applicable_packages: [1],
+        applicable_package_lineages: ["day-pass"],
+      }),
+      result: false,
+    },
+  ])("handles $name", async ({ packageIds, packageLineages, voucher: candidate, result }) => {
+    mockPagedFetch([candidate]);
+    const { getByTestId, queryByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={1000}
+        packageIds={packageIds}
+        packageLineages={packageLineages}
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() =>
+      expect(
+        result
+          ? getByTestId(`voucher-picker-result-${candidate.id}`)
+          : getByTestId(`voucher-picker-inapplicable-${candidate.id}`),
+      ).toBeTruthy(),
+    );
+    expect(queryByTestId(`voucher-picker-result-${candidate.id}`) !== null).toBe(result);
+  });
   it("surfaces a load failure instead of rendering an empty list", async () => {
     vi.stubGlobal(
       "fetch",
@@ -398,6 +660,31 @@ describe("VoucherPicker dialog", () => {
     );
   });
 
+  it("surfaces a rejected voucher request", async () => {
+    vi.stubGlobal("fetch", vi.fn(() => Promise.reject(new Error("network down"))));
+    const { getByTestId } = render(() => (
+      <VoucherPicker selected={null} onChange={vi.fn()} subtotal={1000} packageIds={[]} />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() =>
+      expect(getByTestId("voucher-picker-popup").textContent).toContain("network down"),
+    );
+  });
+  it("surfaces a missing vouchers endpoint", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: false, status: 404, json: async () => ({}) })) as unknown as typeof fetch,
+    );
+    const { getByTestId } = render(() => (
+      <VoucherPicker selected={null} onChange={vi.fn()} subtotal={1000} packageIds={[]} />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+    await waitFor(() =>
+      expect(getByTestId("voucher-picker-popup").textContent).toContain(
+        "Vouchers module isn't available",
+      ),
+    );
+  });
   it("reopening discards a pick that was staged but never confirmed", async () => {
     mockPagedFetch([voucher({ id: 40, code: "STAGED" }), voucher({ id: 41, code: "OTHER" })]);
     const onChange = vi.fn();

package/src/components/composite/VoucherPicker.tsx

@@ -23,6 +23,7 @@ export interface VoucherOption {
   value: string | number | null;
   max_discount_amount: string | number | null;
   applicable_packages: number[] | null;
+  applicable_package_lineages?: string[] | null;
   minimum_purchase: string | number;
   valid_from: string | null;
   valid_until: string | null;
@@ -42,6 +43,7 @@ interface VoucherPickerProps {
   onChange: (next: VoucherOption | null) => void;
   subtotal: number;
   packageIds: number[];
+  packageLineages?: (string | null)[];
   disabled?: boolean;
   compact?: boolean;
   /** Same-shape endpoint override (defaults to the vouchers plugin's own API) —
@@ -104,6 +106,7 @@ function ineligibilityReason(
   voucher: VoucherOption,
   subtotal: number,
   packageIds: number[],
+  packageLineages: (string | null)[],
   todayIso: string,
 ): string | null {
   if (!voucher.is_active) return "Inactive";
@@ -116,10 +119,17 @@ function ineligibilityReason(
   if (usageExhausted(voucher)) return "Fully redeemed";
   if (asNumber(voucher.minimum_purchase) > subtotal)
     return `Needs ${formatCurrency(asNumber(voucher.minimum_purchase))} minimum`;
-  if (voucher.applicable_packages && voucher.applicable_packages.length > 0) {
+  const allowedIds = voucher.applicable_packages ?? [];
+  const allowedLineages = voucher.applicable_package_lineages ?? [];
+  if (allowedIds.length > 0 || allowedLineages.length > 0) {
     if (packageIds.length === 0) return "Only for specific items";
-    const allowed = new Set(voucher.applicable_packages);
-    if (!packageIds.every((id) => allowed.has(id))) return "Doesn't cover every item";
+    const allowed = new Set(allowedIds);
+    if (packageIds.some((id, index) =>
+      !allowed.has(id) &&
+      !(packageLineages[index] != null && allowedLineages.includes(packageLineages[index]!))
+    )) {
+      return "Doesn't cover every item";
+    }
   }
   return null;
 }
@@ -129,9 +139,10 @@ function isApplicable(
   voucher: VoucherOption,
   subtotal: number,
   packageIds: number[],
+  packageLineages: (string | null)[],
   todayIso: string,
 ): boolean {
-  return ineligibilityReason(voucher, subtotal, packageIds, todayIso) === null;
+  return ineligibilityReason(voucher, subtotal, packageIds, packageLineages, todayIso) === null;
 }
 
 function formatVoucherDescription(v: VoucherOption): string {
@@ -293,16 +304,16 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
 
   const applicable = createMemo(() => {
     const today_ = today();
-    return vouchers().filter((v) => isApplicable(v, props.subtotal, props.packageIds, today_));
+    return vouchers().filter((v) => isApplicable(v, props.subtotal, props.packageIds, props.packageLineages ?? [], today_));
   });
 
   const inapplicable = createMemo(() => {
     const today_ = today();
     return vouchers()
-      .filter((v) => !isApplicable(v, props.subtotal, props.packageIds, today_))
+      .filter((v) => !isApplicable(v, props.subtotal, props.packageIds, props.packageLineages ?? [], today_))
       .map((v) => ({
         voucher: v,
-        reason: ineligibilityReason(v, props.subtotal, props.packageIds, today_) ?? "",
+        reason: ineligibilityReason(v, props.subtotal, props.packageIds, props.packageLineages ?? [], today_) ?? "",
       }));
   });
 

package/src/components/composite/resource/ResourcePage.test.tsx

@@ -0,0 +1,175 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@solidjs/testing-library";
+import type { JSX } from "solid-js";
+import { ResourcePage } from "./ResourcePage";
+import type { ResourceRow, ResourceUiSpec } from "./spec";
+
+const ACTIVE: ResourceRow = { id: 1, name: "Active resource", archived: 1 };
+const ARCHIVED: ResourceRow = { id: 2, name: "Archived resource", archived: false };
+
+const SPEC: ResourceUiSpec = {
+  basePath: "/api/resources",
+  title: "Resources",
+  permissions: {
+    view: "resources.view",
+    create: "resources.create",
+    edit: ["resources.edit"],
+    delete: "resources.delete",
+    restore: "resources.restore",
+  },
+  softDeleteField: "archived",
+  columns: [
+    { key: "name", title: "Name", render: { type: "title" } },
+  ],
+  fields: [
+    { key: "name", label: "Name", type: "text", required: true, transform: "trim" },
+  ],
+  detail: [{ label: "Name", value: { type: "field", key: "name" } }],
+  labels: {
+    add: "Add resource",
+    createTitle: "Create resource",
+    createSubmit: "Create",
+    editTitle: "Edit resource",
+    editSubmit: "Save",
+    titleField: "name",
+    searchPlaceholder: "Search resources",
+    empty: "No resources",
+    noResults: "No matching resources",
+    createErrorFallback: "Create failed",
+    updateErrorFallback: "Update failed",
+    networkError: "Network failed",
+    archiveTitle: "Archive resource",
+    archiveMessage: "Archive this resource?",
+    archiveConfirm: "Archive",
+  },
+  testIdPrefix: "resources",
+};
+
+function host(can: (permission: string) => boolean) {
+  return {
+    PageShell: (props: { title: string; actions?: JSX.Element; children: JSX.Element }) => (
+      <section>
+        <h1>{props.title}</h1>
+        <div>{props.actions}</div>
+        {props.children}
+      </section>
+    ),
+    can,
+  };
+}
+
+function fetchFor(rows: ResourceRow[], detail = rows[0], failure?: { method: string; body: string }) {
+  return vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = String(input);
+    const method = init?.method ?? "GET";
+    if (failure && method === failure.method && url.endsWith(failure.body)) {
+      return new Response(JSON.stringify({ error: `${method} failed visibly` }), {
+        status: 403,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    if (method === "GET" && url.includes("/api/resources/")) {
+      return new Response(JSON.stringify(detail), { status: 200 });
+    }
+    if (method === "GET") {
+      return new Response(JSON.stringify({ data: rows, total: rows.length }), { status: 200 });
+    }
+    return new Response(JSON.stringify(detail), { status: 200 });
+  });
+}
+
+async function openDetail(fetchImpl: ReturnType<typeof fetchFor>, rowName: string) {
+  await screen.findByText(rowName);
+  fireEvent.click(screen.getByText(rowName));
+  await screen.findByTestId("resources-detail-modal");
+  expect(fetchImpl).toHaveBeenCalledWith("/api/resources/1", expect.anything());
+}
+
+describe("ResourcePage permission gates and mutation failures", () => {
+  it("gates the page on view permission", async () => {
+    const fetchImpl = fetchFor([ACTIVE]);
+    render(() => <ResourcePage spec={SPEC} host={host(() => false)} fetchImpl={fetchImpl} />);
+    expect(screen.queryByText("Resources")).toBeNull();
+    await new Promise<void>((resolve) => queueMicrotask(resolve));
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+
+  it("uses create permission for add action, separately from edit permission", async () => {
+    const fetchImpl = fetchFor([ACTIVE]);
+    render(() => (
+      <ResourcePage
+        spec={SPEC}
+        host={host((permission) => permission !== "resources.create")}
+        fetchImpl={fetchImpl}
+      />
+    ));
+    expect(screen.queryByRole("button", { name: "Add resource" })).toBeNull();
+    await openDetail(fetchImpl, ACTIVE.name as string);
+    expect(screen.getByLabelText("Edit")).toBeTruthy();
+  });
+
+  it("uses edit permission for edit action, separately from create permission", async () => {
+    const fetchImpl = fetchFor([ACTIVE]);
+    render(() => (
+      <ResourcePage
+        spec={SPEC}
+        host={host((permission) => permission !== "resources.edit")}
+        fetchImpl={fetchImpl}
+      />
+    ));
+    expect(screen.getByRole("button", { name: "Add resource" })).toBeTruthy();
+    await openDetail(fetchImpl, ACTIVE.name as string);
+    expect(screen.queryByRole("button", { name: "Edit" })).toBeNull();
+  });
+
+  it("uses restore permission for archived rows", async () => {
+    const fetchImpl = fetchFor([ARCHIVED], ARCHIVED);
+    render(() => (
+      <ResourcePage
+        spec={SPEC}
+        host={host((permission) => permission !== "resources.restore")}
+        fetchImpl={fetchImpl}
+      />
+    ));
+    await screen.findByText(ARCHIVED.name as string);
+    fireEvent.click(screen.getByText(ARCHIVED.name as string));
+    await screen.findByTestId("resources-detail-modal");
+    expect(screen.queryByTitle("Restore")).toBeNull();
+  });
+
+  it("does not use delete permission for restore affordance", async () => {
+    const fetchImpl = fetchFor([ARCHIVED], ARCHIVED);
+    render(() => (
+      <ResourcePage
+        spec={SPEC}
+        host={host((permission) => permission !== "resources.delete")}
+        fetchImpl={fetchImpl}
+      />
+    ));
+    await screen.findByText(ARCHIVED.name as string);
+    fireEvent.click(screen.getByText(ARCHIVED.name as string));
+    await screen.findByTestId("resources-detail-modal");
+    expect(screen.getByTitle("Restore")).toBeTruthy();
+  });
+
+  it("shows archive failure in detail modal", async () => {
+    const fetchImpl = fetchFor([ACTIVE], ACTIVE, { method: "DELETE", body: "/api/resources/1" });
+    render(() => <ResourcePage spec={SPEC} host={host(() => true)} fetchImpl={fetchImpl} />);
+    await openDetail(fetchImpl, ACTIVE.name as string);
+    fireEvent.click(screen.getByTitle("Archive"));
+    const confirmDialog = await screen.findByTestId("confirm-dialog");
+    fireEvent.click(confirmDialog.querySelector("button:last-child") as HTMLButtonElement);
+    expect(await screen.findByText("DELETE failed visibly")).toBeTruthy();
+    expect(screen.getByTestId("resources-detail-modal")).toBeTruthy();
+  });
+
+  it("shows restore failure in detail modal", async () => {
+    const fetchImpl = fetchFor([ARCHIVED], ARCHIVED, { method: "PATCH", body: "/api/resources/2/restore" });
+    render(() => <ResourcePage spec={SPEC} host={host(() => true)} fetchImpl={fetchImpl} />);
+    await screen.findByText(ARCHIVED.name as string);
+    fireEvent.click(screen.getByText(ARCHIVED.name as string));
+    await screen.findByTestId("resources-detail-modal");
+    fireEvent.click(screen.getByTitle("Restore"));
+    expect(await screen.findByText("PATCH failed visibly")).toBeTruthy();
+  });
+});

package/src/components/composite/resource/ResourcePage.tsx

@@ -100,8 +100,10 @@ export function ResourcePage<T extends ResourceRow>(
   } = props.host;
   const can = (key: string) => hostCan?.(key) ?? true;
   const canView = () => can(spec.permissions.view);
+  const canCreate = () => can(spec.permissions.create ?? spec.permissions.edit[0]);
   const canEdit = () => spec.permissions.edit.some(can);
   const canDelete = () => can(spec.permissions.delete);
+  const canRestore = () => can(spec.permissions.restore ?? spec.permissions.delete);
 
   /** Merge the host's per-request init (headers/credentials) with method + body. */
   function reqInit(extra?: RequestInit): RequestInit {
@@ -229,23 +231,31 @@ export function ResourcePage<T extends ResourceRow>(
     )
       return;
     try {
-      await doFetch(ep.one(id), reqInit({ method: "DELETE" }));
+      const res = await doFetch(ep.one(id), reqInit({ method: "DELETE" }));
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        setError(err.error || "Failed to archive item");
+        return;
+      }
       setDetailRow(null);
       refetchFn?.refetch();
     } catch {
-      /* ignore */
+      setError(spec.labels.networkError);
     }
   }
 
   async function handleRestore(id: number) {
     try {
       const res = await doFetch(ep.restore(id), reqInit({ method: "PATCH" }));
-      if (res.ok) {
-        setDetailRow(await res.json());
-        refetchFn?.refetch();
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        setError(err.error || "Failed to restore item");
+        return;
       }
+      setDetailRow(await res.json());
+      refetchFn?.refetch();
     } catch {
-      /* ignore */
+      setError(spec.labels.networkError);
     }
   }
 
@@ -264,7 +274,7 @@ export function ResourcePage<T extends ResourceRow>(
         actions={
           <>
             {headerActions?.()}
-            <Show when={canEdit()}>
+            <Show when={canCreate()}>
               <Button
                 intent="primary"
                 variant="clip1"
@@ -403,7 +413,7 @@ export function ResourcePage<T extends ResourceRow>(
                       <Pencil size={16} />
                     </button>
                   </Show>
-                  <Show when={!editing() && canDelete()}>
+                  <Show when={!editing() && (row()[spec.softDeleteField] ? canDelete() : canRestore())}>
                     {row()[spec.softDeleteField] ? (
                       <button
                         onClick={() => handleArchive(row().id)}
@@ -436,7 +446,11 @@ export function ResourcePage<T extends ResourceRow>(
                   </button>
                 </div>
               </div>
-
+              <Show when={!editing() && error()}>
+                <div role="alert" class="mb-4 text-sm text-ks-danger-fg">
+                  {error()}
+                </div>
+              </Show>
               <Show
                 when={editing()}
                 fallback={<ResourceDetail rows={spec.detail} row={row()} />}

package/src/components/composite/resource/route-adapter.ts

@@ -48,8 +48,10 @@ export function routeToResourceSpec(route: RouteSpec): ResourceUiSpec {
     ...(route.subtitle !== undefined ? { subtitle: route.subtitle } : {}),
     permissions: {
       view: route.permissions.view,
+      ...(route.permissions.create ? { create: route.permissions.create } : {}),
       edit: route.permissions.edit,
       delete: route.permissions.delete,
+      ...(route.permissions.restore ? { restore: route.permissions.restore } : {}),
     },
     softDeleteField: route.softDeleteField,
     testIdPrefix: route.testIdPrefix,

package/src/components/composite/resource/route-spec.test.ts

@@ -65,6 +65,28 @@ function vendorRoute() {
 }
 
 describe("routeToResourceSpec lowering", () => {
+  it("preserves distinct create and restore permissions", () => {
+    const lowered = routeToResourceSpec(
+      defineRoute({
+        ...vendorRoute(),
+        permissions: {
+          view: "vendors.view",
+          create: "vendors.create",
+          edit: ["vendors.edit"],
+          delete: "vendors.delete",
+          restore: "vendors.restore",
+        },
+      }),
+    );
+    expect(lowered.permissions).toEqual({
+      view: "vendors.view",
+      create: "vendors.create",
+      edit: ["vendors.edit"],
+      delete: "vendors.delete",
+      restore: "vendors.restore",
+    });
+  });
+
   it("lowers a built route to the hand-authored ResourceUiSpec shape", () => {
     const lowered = routeToResourceSpec(vendorRoute());
     const hand: ResourceUiSpec = {

package/src/components/composite/resource/route-spec.ts

@@ -91,8 +91,10 @@ export function action(
 
 export interface RoutePermissions {
   readonly view: string;
+  readonly create?: string;
   readonly edit: readonly string[];
   readonly delete: string;
+  readonly restore?: string;
 }
 
 /** Labels carried straight onto the lowered ResourceUiSpec.labels. */

package/src/components/composite/resource/spec.ts

@@ -184,8 +184,10 @@ export interface ResourceUiSpec {
   /** Permission keys passed to `host.can`. `edit` passes if ANY of its keys do. */
   readonly permissions: {
     readonly view: string;
+    readonly create?: string;
     readonly edit: readonly string[];
     readonly delete: string;
+    readonly restore?: string;
   };
   /** Soft-delete boolean field; drives the archive/restore affordance + status. */
   readonly softDeleteField: string;