@kahitsan/ksui 0.39.3 → 0.39.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.39.3",
+  "version": "0.39.5",
   "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/base/ExistingAttachmentTile.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@solidjs/testing-library";
+import { Suspense } from "solid-js";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import ExistingAttachmentTile from "./ExistingAttachmentTile";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe("ExistingAttachmentTile", () => {
+  it("keeps its parent rendered while private attachment bytes load", async () => {
+    let resolveFetch!: (response: Response) => void;
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        () =>
+          new Promise<Response>((resolve) => {
+            resolveFetch = resolve;
+          }),
+      ),
+    );
+    vi.stubGlobal("URL", {
+      ...URL,
+      createObjectURL: vi.fn(() => "blob:attachment"),
+      revokeObjectURL: vi.fn(),
+    });
+
+    render(() => (
+      <Suspense fallback={<p>Modal fallback</p>}>
+        <div data-testid="modal-shell">
+          <ExistingAttachmentTile
+            attachment={{
+              id: 1,
+              file_name: "receipt.jpg",
+              mime_type: "image/jpeg",
+              s3_link: null,
+            }}
+            rawHref="/api/attachments/1/raw"
+            testId="attachment"
+          />
+        </div>
+      </Suspense>
+    ));
+
+    expect(screen.getByTestId("modal-shell")).toBeTruthy();
+    expect(screen.queryByText("Modal fallback")).toBeNull();
+    expect(screen.getByText("Loading")).toBeTruthy();
+
+    resolveFetch(new Response(new Blob(["image"]), { status: 200 }));
+    expect(await screen.findByAltText("receipt.jpg")).toBeTruthy();
+  });
+});

package/src/components/base/ExistingAttachmentTile.tsx

@@ -10,14 +10,13 @@
 //    route and render the resulting blob: (the proxy/blob pattern). s3_link is then
 //    ignored for rendering; a spinner shows while the bytes stream.
 
-import { Show, createSignal, type Component } from "solid-js";
+import { Show, createEffect, createSignal, onCleanup, type Component } from "solid-js";
 import Paperclip from "lucide-solid/icons/paperclip";
 import X from "lucide-solid/icons/x";
 import TriangleAlert from "lucide-solid/icons/triangle-alert";
 import Loader2 from "lucide-solid/icons/loader-2";
 import { confirm } from "../../utils/confirm";
 import { attachmentUrl, isResolvableAttachment } from "../../utils/attachments";
-import { createObjectUrlResource } from "../../utils/object-url-resource";
 import ImageViewer from "./ImageViewer";
 
 export interface ExistingAttachment {
@@ -40,17 +39,53 @@ interface Props {
 }
 
 export default function ExistingAttachmentTile(props: Props) {
-  // Always call the hook (Solid rule); a null href no-ops when not in blob mode.
-  const blob = createObjectUrlResource(
-    () => props.rawHref ?? null,
-    { init: props.rawInit },
-  );
+  // Keep attachment loading local. A pending createResource promise can suspend
+  // the nearest boundary and briefly unmount the transaction modal.
+  const [blob, setBlob] = createSignal<string | null>(null);
+  const [blobLoading, setBlobLoading] = createSignal(false);
+  let requestId = 0;
+  let currentUrl: string | null = null;
+  const revokeUrl = () => {
+    if (currentUrl) URL.revokeObjectURL(currentUrl);
+    currentUrl = null;
+  };
+  createEffect(() => {
+    const href = props.rawHref ?? null;
+    const id = ++requestId;
+    revokeUrl();
+    setBlob(null);
+    if (!href) {
+      setBlobLoading(false);
+      return;
+    }
+    setBlobLoading(true);
+    void fetch(href, { credentials: "include", ...props.rawInit })
+      .then(async (res) => (res.ok ? URL.createObjectURL(await res.blob()) : null))
+      .then((url) => {
+        if (id !== requestId) {
+          if (url) URL.revokeObjectURL(url);
+          return;
+        }
+        currentUrl = url;
+        setBlob(url);
+      })
+      .catch(() => {
+        if (id === requestId) setBlob(null);
+      })
+      .finally(() => {
+        if (id === requestId) setBlobLoading(false);
+      });
+  });
+  onCleanup(() => {
+    requestId++;
+    revokeUrl();
+  });
   const isBlobMode = () => props.rawHref != null;
   const url = (): string | undefined =>
     isBlobMode() ? (blob() ?? undefined) : attachmentUrl(props.attachment.s3_link);
   const resolvable = () =>
     isBlobMode() ? blob() != null : isResolvableAttachment(props.attachment.s3_link);
-  const loading = () => (isBlobMode() ? blob.loading : false);
+  const loading = () => (isBlobMode() ? blobLoading() : false);
   const [viewerOpen, setViewerOpen] = createSignal(false);
 
   const FallbackIcon = () => {

package/src/components/base/ImageViewer.test.tsx

@@ -0,0 +1,25 @@
+import { cleanup, fireEvent, render } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import ImageViewer from "./ImageViewer";
+
+describe("ImageViewer", () => {
+  afterEach(() => cleanup());
+
+  it("reserves viewer space before the image loads", () => {
+    const showModal = vi.fn();
+    Object.defineProperty(HTMLDialogElement.prototype, "showModal", { configurable: true, value: showModal });
+    Object.defineProperty(HTMLDialogElement.prototype, "close", { configurable: true, value: vi.fn() });
+    const view = render(() => <ImageViewer src="blob:test" alt="Receipt" onClose={vi.fn()} />);
+    const frame = view.container.querySelector<HTMLElement>(".ksui-imgviewer-frame");
+    const image = view.container.querySelector<HTMLImageElement>("img");
+
+    expect(frame).toBeTruthy();
+    expect(frame?.className).toContain("ksui-imgviewer-frame");
+    expect(image?.style.opacity).toBe("0");
+    expect(showModal).toHaveBeenCalledTimes(1);
+
+    fireEvent.load(image!);
+    expect(image?.style.opacity).toBe("1");
+
+  });
+});

package/src/components/base/ImageViewer.tsx

@@ -13,7 +13,7 @@
 // with unscoped `ksui-imgviewer-*` class names. Mount === open, unmount === closed
 // (wrap in `<Show when={…}>`).
 
-import { onCleanup, onMount } from "solid-js";
+import { createSignal, onCleanup, onMount } from "solid-js";
 import X from "lucide-solid/icons/x";
 import { lockPullToRefresh, unlockPullToRefresh } from "../../utils/dom";
 import { injectCSS } from "../../utils/inject-css";
@@ -26,9 +26,10 @@ const STYLE_CSS = `
 .ksui-imgviewer{position:fixed;inset:0;z-index:60;background:transparent;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;border:0;}
 .ksui-imgviewer[open]{display:flex;align-items:center;justify-content:center;}
 .ksui-imgviewer::backdrop{background:var(--ks-overlay, rgba(0,0,0,0.7));backdrop-filter:blur(2px);}
-.ksui-imgviewer-img{max-width:96vw;max-height:96vh;object-fit:contain;border-radius:0.25rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.8);}
-.ksui-imgviewer-close{position:absolute;top:1rem;right:1rem;display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:9999px;background:rgba(255,255,255,0.12);color:#fff;border:0;cursor:pointer;}
-.ksui-imgviewer-close:hover{background:rgba(255,255,255,0.22);}
+.ksui-imgviewer-frame{display:grid;place-items:center;width:96vw;height:96vh;}
+.ksui-imgviewer-img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:0.25rem;box-shadow:0 25px 50px -12px color-mix(in srgb,var(--ks-overlay,rgba(0,0,0,0.7)) 80%,transparent);}
+.ksui-imgviewer-close{position:absolute;top:1rem;right:1rem;display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:9999px;background:color-mix(in srgb,var(--ks-fg,#ffffff) 12%,transparent);color:var(--ks-fg,#ffffff);border:0;cursor:pointer;}
+.ksui-imgviewer-close:hover{background:color-mix(in srgb,var(--ks-fg,#ffffff) 22%,transparent);}
 `;
 
 interface Props {
@@ -43,6 +44,7 @@ interface Props {
 export default function ImageViewer(props: Props) {
   injectCSS(STYLE_ID, STYLE_CSS);
   let dialogEl: HTMLDialogElement | undefined;
+  const [loaded, setLoaded] = createSignal(false);
 
   lockPullToRefresh();
   onCleanup(unlockPullToRefresh);
@@ -89,7 +91,15 @@ export default function ImageViewer(props: Props) {
       >
         <X size={22} />
       </button>
-      <img src={props.src} alt={props.alt || ""} class="ksui-imgviewer-img" />
+      <div class="ksui-imgviewer-frame" aria-busy={!loaded()}>
+        <img
+          src={props.src}
+          alt={props.alt || ""}
+          class="ksui-imgviewer-img"
+          style={{ opacity: loaded() ? 1 : 0 }}
+          onLoad={() => setLoaded(true)}
+        />
+      </div>
     </dialog>
   );
 }

package/src/components/composite/AccountRadioPicker.tsx

@@ -1,6 +1,5 @@
 import { createEffect, Show, For } from "solid-js";
 import AccountAvatar from "../base/AccountAvatar";
-import Button from "../base/Button";
 import type { PaymentAccountOption } from "./PaymentAccountPicker";
 
 export interface AccountRadioPickerProps {
@@ -10,8 +9,6 @@ export interface AccountRadioPickerProps {
   ariaLabel: string;
   excludeId?: string;
   autoDefault?: boolean;
-  compact?: boolean;
-  tone?: "income" | "expense" | "transfer";
 }
 
 export default function AccountRadioPicker(props: AccountRadioPickerProps) {
@@ -85,37 +82,24 @@ export default function AccountRadioPicker(props: AccountRadioPickerProps) {
         aria-label={props.ariaLabel}
         tabIndex={-1}
         class="grid max-sm:grid-cols-2 sm:grid-cols-3 gap-2"
-        classList={{ "ks-transaction-account-picker": props.compact }}
         onKeyDown={onKeyDown}
       >
         <For each={visible()}>
           {(a, i) => {
             const selected = () => props.value === a.id.toString();
-            const isTabStop = () => selected() || (!props.value && i() === 0);
+            const isTabStop = () => selected() || currentIndex() === i();
             return (
-              <Button
-                ref={(el: HTMLButtonElement) => (buttonRefs[i()] = el)}
+              <button
+                ref={(el) => (buttonRefs[i()] = el)}
                 type="button"
                 role="radio"
                 aria-checked={selected()}
                 tabIndex={isTabStop() ? 0 : -1}
-                intent="secondary"
-                variant="clip1"
-                size="sm"
-                noGlow
-                noRipple
-                noScanline
                 onClick={() => props.onChange(a.id.toString())}
-                class="group flex items-center gap-2 px-3 py-3 text-left text-sm transition-colors cursor-pointer"
+                class="group flex items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm transition-colors cursor-pointer ks-hud-clip-top-left-bottom-right"
                 classList={{
                   "border-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-accent,#fbbf24)_10%,transparent)] text-[var(--ks-accent-hover,#fcd34d)]":
-                    selected() && (!props.compact || !props.tone),
-                  "border-[color-mix(in_srgb,var(--ks-success,#10b981)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-success,#10b981)_10%,transparent)] text-[var(--ks-success-fg,#34d399)]":
-                    selected() && props.compact && props.tone === "income",
-                  "border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] text-[var(--ks-danger-fg,#f87171)]":
-                    selected() && props.compact && props.tone === "expense",
-                  "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_10%,transparent)] text-[var(--ks-info,#38bdf8)]":
-                    selected() && props.compact && props.tone === "transfer",
+                    selected(),
                   "border-[var(--ks-border-strong,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[var(--ks-border-strong,#3f3f46)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]":
                     !selected(),
                 }}
@@ -130,7 +114,7 @@ export default function AccountRadioPicker(props: AccountRadioPickerProps) {
                   }
                 />
                 <span class="truncate">{a.name}</span>
-              </Button>
+              </button>
             );
           }}
         </For>

package/src/components/composite/TransactionAccountFields.tsx

@@ -23,7 +23,6 @@ export interface TransactionAccountFieldsProps {
   transferFeeAmount: string;
   transferFeeEnabled: boolean;
   allowTransferFee: boolean;
-  compact?: boolean;
 }
 
 /**
@@ -44,8 +43,6 @@ export default function TransactionAccountFields(props: TransactionAccountFields
             value={
               props.category === "sale" ? props.destAccount : props.sourceAccount
             }
-            compact={props.compact}
-            tone={props.category === "sale" ? "income" : "expense"}
             onChange={(v) => {
               if (props.category === "sale") {
                 props.setDestAccount(v);

package/src/components/composite/TransactionForm.tsx

@@ -7,13 +7,7 @@
 // advanced-fields toggle entirely, for a caller that locks `category` to one
 // value and never needs EWT/sharing (e.g. a "record my own expense" surface).
 
-import {
-  createEffect,
-  createResource,
-  createSignal,
-  Show,
-  For,
-} from "solid-js";
+import { createEffect, createSignal, Show, For } from "solid-js";
 import X from "lucide-solid/icons/x";
 import Upload from "lucide-solid/icons/upload";
 import FileIcon from "lucide-solid/icons/file";
@@ -306,6 +300,9 @@ export default function TransactionForm(props: TransactionFormProps) {
 .ks-transaction-compact-type-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem;margin:0 1.25rem .25rem;padding:.375rem;border-radius:.75rem;background:color-mix(in srgb,var(--ks-fg,#ffffff) 5%,transparent)}
 .ks-transaction-compact-type-switcher>button{min-height:2.25rem;border:0;border-radius:.5rem;padding:.5rem .25rem}
 .ks-transaction-compact-type-switcher>button.ks-transaction-type-active{background:color-mix(in srgb,var(--ks-primary,#c9a961) 16%,transparent);color:var(--ks-primary,#c9a961)}
+.ks-transaction-compact-type-switcher>button.ks-transaction-type-sale.ks-transaction-type-active{background:color-mix(in srgb,var(--ks-success,#10b981) 16%,transparent);color:var(--ks-success-fg,#34d399)}
+.ks-transaction-compact-type-switcher>button.ks-transaction-type-expense.ks-transaction-type-active{background:color-mix(in srgb,var(--ks-danger,#ef4444) 16%,transparent);color:var(--ks-danger-fg,#f87171)}
+.ks-transaction-compact-type-switcher>button.ks-transaction-type-business.ks-transaction-type-active{background:color-mix(in srgb,var(--ks-info,#38bdf8) 16%,transparent);color:var(--ks-info,#38bdf8)}
 .ks-transaction-compact-body{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;width:100%!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;padding:1rem 1.25rem 1.5rem!important;gap:1rem}
 .ks-transaction-compact-body>div{width:100%!important;flex:0 0 auto!important}
 .ks-transaction-compact-footer{flex:0 0 auto!important}
@@ -360,23 +357,43 @@ export default function TransactionForm(props: TransactionFormProps) {
       return "expense";
     return null;
   };
-  const [subcategoryOptions] = createResource(
-    subcategoryAppliesTo,
-    async (appliesTo) => {
-      if (!appliesTo) return [] as { id: number; name: string }[];
-      const res = await fetch(
-        `/api/transactions/subcategories?applies_to=${appliesTo}`,
-        {
-          credentials: "include",
-        }
-      );
-      if (!res.ok) return [] as { id: number; name: string }[];
-      const data = (await res.json()) as {
-        subcategories: { id: number; name: string }[];
-      };
-      return data.subcategories;
+  const [subcategoryOptions, setSubcategoryOptions] = createSignal<
+    { id: number; name: string }[] | undefined
+  >(undefined);
+  const subcategoryCache = new Map<
+    "income" | "expense",
+    { id: number; name: string }[]
+  >();
+  let subcategoryRequestId = 0;
+  createEffect(() => {
+    const appliesTo = subcategoryAppliesTo();
+    const requestId = ++subcategoryRequestId;
+    if (!appliesTo) {
+      setSubcategoryOptions(undefined);
+      return;
     }
-  );
+    const cached = subcategoryCache.get(appliesTo);
+    if (cached) {
+      setSubcategoryOptions(cached);
+      return;
+    }
+    setSubcategoryOptions(undefined);
+    void fetch(`/api/transactions/subcategories?applies_to=${appliesTo}`, {
+      credentials: "include",
+    })
+      .then(async (res) => {
+        if (!res.ok) return [] as { id: number; name: string }[];
+        const data = (await res.json()) as {
+          subcategories: { id: number; name: string }[];
+        };
+        return data.subcategories;
+      })
+      .catch(() => [] as { id: number; name: string }[])
+      .then((options) => {
+        subcategoryCache.set(appliesTo, options);
+        if (requestId === subcategoryRequestId) setSubcategoryOptions(options);
+      });
+  });
 
   // True once the async resource has resolved at least once. Gates the
   // SearchableSelect mount so the loading-state placeholder shows while the
@@ -471,7 +488,7 @@ export default function TransactionForm(props: TransactionFormProps) {
         </div>
       </Show>
 
-      <Show when={compact() && !props.simpleMode}>
+      <Show when={!props.simpleMode}>
         <div class="ks-transaction-compact-type-switcher" role="tablist" aria-label="Transaction type">
           <For each={categoryOptions()}>
             {(cat) => (
@@ -726,48 +743,36 @@ export default function TransactionForm(props: TransactionFormProps) {
 
           <Show when={subcategoryAppliesTo() !== null}>
             <FormField label="Category">
-              <Show
-                when={subcategoryOptionsReady()}
-                fallback={
-                  <select
-                    disabled
-                    data-testid="subcategory-select-loading"
-                    class="w-full bg-[color-mix(in_srgb,var(--ks-input-bg,#18181b)_60%,transparent)] border border-[var(--ks-border,rgba(39,39,42,0.5))] px-3 py-3 text-sm text-[var(--ks-fg-subtle,#71717a)] ks-hud-clip-button focus:outline-none"
-                  >
-                    <option>Loading…</option>
-                  </select>
-                }
-              >
-                <SearchableSelect
-                  triggerTestId="subcategory-select"
-                  wrapperClass="relative w-full"
-                  value={props.subcategory}
-                  options={(() => {
-                    const list = (subcategoryOptions() || []).map((opt) => ({
-                      value: opt.name,
-                      label: opt.name,
-                    }));
-                    list.unshift({ value: "", label: "— Uncategorised —" });
-                    if (
-                      props.subcategory &&
-                      !list.some((o) => o.value === props.subcategory)
-                    ) {
-                      list.push({
-                        value: props.subcategory,
-                        label: props.subcategory,
-                      });
-                    }
-                    return list;
-                  })()}
-                  onChange={(opt) =>
-                    props.setSubcategory(opt ? String(opt.value) : "")
+              <SearchableSelect
+                triggerTestId="subcategory-select"
+                wrapperClass="relative w-full"
+                value={props.subcategory}
+                loading={!subcategoryOptionsReady()}
+                options={(() => {
+                  const list = (subcategoryOptions() || []).map((opt) => ({
+                    value: opt.name,
+                    label: opt.name,
+                  }));
+                  list.unshift({ value: "", label: "— Uncategorised —" });
+                  if (
+                    props.subcategory &&
+                    !list.some((o) => o.value === props.subcategory)
+                  ) {
+                    list.push({
+                      value: props.subcategory,
+                      label: props.subcategory,
+                    });
                   }
-                  placeholder="— Uncategorised —"
-                  searchPlaceholder="Search categories…"
-                  triggerClass="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button cursor-pointer focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] flex items-center justify-between gap-2"
-                  triggerLabelClass="truncate text-left flex-1 min-w-0"
-                />
-              </Show>
+                  return list;
+                })()}
+                onChange={(opt) =>
+                  props.setSubcategory(opt ? String(opt.value) : "")
+                }
+                placeholder="— Uncategorised —"
+                searchPlaceholder="Search categories…"
+                triggerClass="w-full bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)] border border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] px-3 py-3 text-sm text-[var(--ks-fg,#ffffff)] ks-hud-clip-button cursor-pointer focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)] flex items-center justify-between gap-2"
+                triggerLabelClass="truncate text-left flex-1 min-w-0"
+              />
               <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
                 Optional. Used for tax-prep classification.
               </p>
@@ -803,7 +808,6 @@ export default function TransactionForm(props: TransactionFormProps) {
             transferFeeAmount={props.transferFeeAmount}
             transferFeeEnabled={props.transferFeeEnabled}
             allowTransferFee={props.allowTransferFee}
-            compact={compact()}
           />
           </div>
 

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";
 
@@ -401,6 +402,148 @@ describe("VoucherPicker dialog", () => {
     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({
@@ -426,6 +569,78 @@ describe("VoucherPicker dialog", () => {
       "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",
@@ -445,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/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;