@kahitsan/ksui 0.39.4 → 0.39.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.39.4",
+  "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>