@kahitsan/ksui 0.39.4 → 0.40.0

package/package.json

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

@@ -0,0 +1,36 @@
+import { fireEvent, render, screen } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import MultiPeriodPicker from "./MultiPeriodPicker";
+
+const NOW = new Date("2026-09-10T12:00:00Z");
+
+describe("MultiPeriodPicker", () => {
+  it("supports disjoint tokens and removes them independently", async () => {
+    const onSelectedChange = vi.fn();
+    const view = render(() => <MultiPeriodPicker granularity="month" selected={["2026-01", "2026-03"]} onGranularityChange={() => {}} onSelectedChange={onSelectedChange} now={NOW} />);
+    await fireEvent.click(view.getByRole("button", { name: "2 months" }));
+    expect(screen.getByRole("button", { name: "Remove January 2026" })).toBeTruthy();
+    await fireEvent.click(screen.getByRole("button", { name: "Remove January 2026" }));
+    expect(onSelectedChange).toHaveBeenCalledWith(["2026-03"]);
+  });
+
+  it("changes granularity and emits selected token", async () => {
+    const onGranularityChange = vi.fn();
+    const onSelectedChange = vi.fn();
+    const [granularity, setGranularity] = createSignal<"day" | "week" | "month" | "year">("month");
+    const view = render(() => <MultiPeriodPicker granularity={granularity()} selected={[]} onGranularityChange={(value) => { onGranularityChange(value); setGranularity(value); }} onSelectedChange={onSelectedChange} now={NOW} />);
+    await fireEvent.click(view.getByRole("tab", { name: "Year" }));
+    expect(onGranularityChange).toHaveBeenCalledWith("year");
+    await fireEvent.click(view.getByRole("button", { name: "Pick periods" }));
+    await fireEvent.click(screen.getByRole("button", { name: "2026" }));
+    expect(onSelectedChange).toHaveBeenCalledWith(["2026"]);
+  });
+
+  it("uses injected labels and token renderer", async () => {
+    const view = render(() => <MultiPeriodPicker granularity="year" selected={[]} onGranularityChange={() => {}} onSelectedChange={() => {}} now={NOW} labels={{ year: "Fiscal year", pick: "Choose periods" }} renderToken={(token) => <strong data-testid={`token-${token.token}`}>FY {token.label}</strong>} />);
+    expect(view.getByRole("tab", { name: "Fiscal year" })).toBeTruthy();
+    await fireEvent.click(view.getByRole("button", { name: "Choose periods" }));
+    expect(screen.getByTestId("token-2026").textContent).toBe("FY 2026");
+  });
+});

package/src/components/composite/MultiPeriodPicker.tsx

@@ -0,0 +1,252 @@
+import { createMemo, createSignal, For, Show, type JSX } from "solid-js";
+import { Portal } from "solid-js/web";
+import CalendarDays from "lucide-solid/icons/calendar-days";
+import ChevronDown from "lucide-solid/icons/chevron-down";
+import ChevronLeft from "lucide-solid/icons/chevron-left";
+import ChevronRight from "lucide-solid/icons/chevron-right";
+import X from "lucide-solid/icons/x";
+import { injectCSS } from "../../utils/inject-css";
+
+export type MultiPeriodGranularity = "day" | "week" | "month" | "year";
+
+export interface MultiPeriodToken {
+  token: string;
+  label: string;
+}
+
+export interface MultiPeriodTokenRenderProps extends MultiPeriodToken {
+  selected: boolean;
+}
+
+export interface MultiPeriodPickerProps {
+  granularity: MultiPeriodGranularity;
+  onGranularityChange: (granularity: MultiPeriodGranularity) => void;
+  selected: string[];
+  onSelectedChange: (tokens: string[]) => void;
+  /** Optional labels for tabs, trigger summary units, and picker headings. */
+  labels?: Partial<{
+    day: string;
+    week: string;
+    month: string;
+    year: string;
+    selected: string;
+    period: string;
+    pick: string;
+  }>;
+  /** Replaces token button contents without coupling the picker to a domain. */
+  renderToken?: (token: MultiPeriodTokenRenderProps) => JSX.Element;
+  /** Controls the civil date used for the initial view and year list. */
+  now?: Date;
+  /** Optional IANA zone used only to derive the current civil date. */
+  timeZone?: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const STYLE_ID = "ksui-multi-period-picker-style";
+const CSS = `
+.ksui-mpp{position:relative;display:flex;flex-direction:column;gap:.5rem}
+.ksui-mpp-tabs{display:flex;flex-wrap:wrap;gap:.25rem}
+.ksui-mpp-tab,.ksui-mpp-trigger,.ksui-mpp-nav,.ksui-mpp-token,.ksui-mpp-chip{border:1px solid var(--ksui-mpp-border,var(--ks-border,rgba(39,39,42,0.5)));background:transparent;color:var(--ksui-mpp-muted,var(--ks-fg-muted,#a1a1aa));cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
+.ksui-mpp-tab{border-radius:.375rem;padding:.4rem .65rem;font-size:.75rem}
+.ksui-mpp-tab:hover,.ksui-mpp-nav:hover,.ksui-mpp-token:hover,.ksui-mpp-chip:hover{background:var(--ksui-mpp-hover,var(--ks-surface-raised,#1a1a1a));color:var(--ksui-mpp-fg,var(--ks-fg,#ffffff))}
+.ksui-mpp-selected{border-color:var(--ksui-mpp-accent,var(--ks-accent,#fbbf24));background:color-mix(in srgb, var(--ks-primary, #c9a961) 18%, transparent);color:var(--ksui-mpp-accent,var(--ks-accent,#fbbf24));font-weight:600}
+.ksui-mpp-trigger{display:inline-flex;align-items:center;gap:.5rem;border-radius:.5rem;padding:.5rem .75rem;font-size:.75rem;text-align:left}
+.ksui-mpp-trigger:disabled{cursor:not-allowed;opacity:.5}
+.ksui-mpp-popover{position:fixed;z-index:100;overflow-y:auto;border:1px solid var(--ksui-mpp-border,var(--ks-border,rgba(39,39,42,0.5)));border-radius:.75rem;background:var(--ksui-mpp-bg,var(--ks-input-bg,#18181b));box-shadow:var(--ks-shadow-lg,0 12px 32px rgba(0,0,0,0.6));padding:.75rem}
+.ksui-mpp-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;color:var(--ksui-mpp-fg,var(--ks-fg,#ffffff));font-size:.75rem;font-weight:600}
+.ksui-mpp-nav{display:inline-flex;border:0;border-radius:.25rem;padding:.25rem}
+.ksui-mpp-grid{display:grid;gap:.375rem}
+.ksui-mpp-grid-days{grid-template-columns:repeat(7,minmax(0,1fr))}
+.ksui-mpp-grid-months{grid-template-columns:repeat(4,minmax(0,1fr))}
+.ksui-mpp-grid-years{grid-template-columns:repeat(2,minmax(0,1fr))}
+.ksui-mpp-token{border-radius:.375rem;padding:.4rem .45rem;font-size:.7rem;text-align:center}
+.ksui-mpp-chip{display:inline-flex;align-items:center;gap:.25rem;border-radius:.375rem;padding:.25rem .4rem;font-size:.68rem}
+.ksui-mpp-chips{display:flex;flex-wrap:wrap;gap:.25rem;border-top:1px solid var(--ksui-mpp-border,var(--ks-border,rgba(39,39,42,0.5)));padding-top:.6rem;margin-top:.7rem}
+.ksui-mpp-week-label{margin:.6rem 0 .35rem;color:var(--ksui-mpp-muted,var(--ks-fg-subtle,#71717a));font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}
+.ksui-mpp-months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem;margin-bottom:.6rem}
+.ksui-mpp-month{border:1px solid var(--ksui-mpp-border,var(--ks-border,rgba(39,39,42,0.5)));border-radius:.3rem;background:transparent;color:var(--ksui-mpp-muted,var(--ks-fg-muted,#a1a1aa));cursor:pointer;padding:.3rem .1rem;font-size:.68rem}
+.ksui-mpp-month:hover{color:var(--ksui-mpp-fg,var(--ks-fg,#ffffff))}
+`;
+
+function ensureStyle() { injectCSS(STYLE_ID, CSS); }
+
+function dateParts(now: Date, timeZone?: string) {
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    ...(timeZone ? { timeZone } : {}),
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).formatToParts(now);
+  return {
+    year: Number(parts.find((part) => part.type === "year")?.value),
+    month: Number(parts.find((part) => part.type === "month")?.value),
+    day: Number(parts.find((part) => part.type === "day")?.value),
+  };
+}
+
+function dayToken(year: number, month: number, day: number) {
+  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+
+function weekStart(year: number, month: number, day: number) {
+  const value = new Date(Date.UTC(year, month - 1, day));
+  value.setUTCDate(value.getUTCDate() - value.getUTCDay());
+  return value;
+}
+
+function weekToken(year: number, month: number, day: number) {
+  const start = weekStart(year, month, day);
+  const anchorYear = start.getUTCFullYear();
+  const first = weekStart(anchorYear, 1, 1);
+  const number = Math.floor((start.getTime() - first.getTime()) / 604800000) + 1;
+  return `${anchorYear}-W${String(number).padStart(2, "0")}`;
+}
+
+function formatDay(token: string) {
+  const [year, month, day] = token.split("-").map(Number);
+  return new Date(Date.UTC(year, month - 1, day)).toLocaleDateString("en-US", {
+    timeZone: "UTC", month: "short", day: "numeric", year: "numeric",
+  });
+}
+
+function formatMonth(token: string) {
+  const [year, month] = token.split("-").map(Number);
+  return new Date(Date.UTC(year, month - 1, 1)).toLocaleDateString("en-US", {
+    timeZone: "UTC", month: "long", year: "numeric",
+  });
+}
+
+function formatWeek(token: string) {
+  const match = /^(\d{4})-W(\d{2})$/.exec(token);
+  if (!match) return token;
+  const start = weekStart(Number(match[1]), 1, 1);
+  start.setUTCDate(start.getUTCDate() + (Number(match[2]) - 1) * 7);
+  const end = new Date(start);
+  end.setUTCDate(end.getUTCDate() + 6);
+  const format = (date: Date) => date.toLocaleDateString("en-US", { timeZone: "UTC", month: "short", day: "numeric" });
+  return `${format(start)} – ${format(end)}`;
+}
+
+function formatToken(granularity: MultiPeriodGranularity, token: string) {
+  if (granularity === "day") return formatDay(token);
+  if (granularity === "week") return formatWeek(token);
+  if (granularity === "month") return formatMonth(token);
+  return token;
+}
+
+function visibleWeeks(year: number, month: number): MultiPeriodToken[] {
+  const first = new Date(Date.UTC(year, month - 1, 1));
+  const cursor = weekStart(year, month, 1);
+  const result: MultiPeriodToken[] = [];
+  for (let index = 0; index < 6; index += 1) {
+    const start = new Date(cursor);
+    start.setUTCDate(start.getUTCDate() + index * 7);
+    if (start.getUTCFullYear() > year || (start.getUTCFullYear() === year && start.getUTCMonth() + 1 > month)) break;
+    if (start.getUTCFullYear() !== year || start.getUTCMonth() + 1 !== month) continue;
+    const token = weekToken(start.getUTCFullYear(), start.getUTCMonth() + 1, start.getUTCDate());
+    result.push({ token, label: formatWeek(token) });
+  }
+  void first;
+  return result;
+}
+
+function defaultLabel(granularity: MultiPeriodGranularity, labels: MultiPeriodPickerProps["labels"]) {
+  return labels?.[granularity] ?? granularity[0].toUpperCase() + granularity.slice(1);
+}
+
+export default function MultiPeriodPicker(props: MultiPeriodPickerProps): JSX.Element {
+  ensureStyle();
+  const now = props.now ?? new Date();
+  const current = dateParts(now, props.timeZone);
+  const [open, setOpen] = createSignal(false);
+  const [viewYear, setViewYear] = createSignal(current.year);
+  const [viewMonth, setViewMonth] = createSignal(current.month);
+  const [popupStyle, setPopupStyle] = createSignal<JSX.CSSProperties>({});
+  let triggerRef: HTMLButtonElement | undefined;
+  let popupRef: HTMLDivElement | undefined;
+
+  const labels = () => props.labels ?? {};
+  const tabOptions: MultiPeriodGranularity[] = ["day", "week", "month", "year"];
+  const summary = createMemo(() => {
+    if (props.selected.length === 0) return labels().pick ?? "Pick periods";
+    if (props.selected.length === 1) return formatToken(props.granularity, props.selected[0]);
+    const unit = labels()[props.granularity] ?? props.granularity;
+    return `${props.selected.length} ${unit}${props.selected.length === 1 ? "" : "s"}`;
+  });
+
+  const toggle = (token: string) => {
+    props.onSelectedChange(props.selected.includes(token)
+      ? props.selected.filter((value) => value !== token)
+      : [...props.selected, token]);
+  };
+  const tokenContent = (item: MultiPeriodToken) => props.renderToken
+    ? props.renderToken({ ...item, selected: props.selected.includes(item.token) })
+    : item.label;
+  const shiftMonth = (delta: number) => {
+    const next = new Date(Date.UTC(viewYear(), viewMonth() - 1 + delta, 1));
+    setViewYear(next.getUTCFullYear());
+    setViewMonth(next.getUTCMonth() + 1);
+  };
+  const updatePosition = () => {
+    if (!triggerRef) return;
+    const rect = triggerRef.getBoundingClientRect();
+    setPopupStyle({ top: `${Math.min(rect.bottom + 4, window.innerHeight - 500)}px`, left: `${Math.min(rect.left, window.innerWidth - 336)}px`, width: "320px", "max-height": "480px" });
+  };
+  const openPicker = () => { setOpen((value) => !value); queueMicrotask(updatePosition); };
+
+  const days = createMemo<MultiPeriodToken[]>(() => {
+    const year = viewYear();
+    const month = viewMonth();
+    const firstDow = new Date(Date.UTC(year, month - 1, 1)).getUTCDay();
+    const count = new Date(Date.UTC(year, month, 0)).getUTCDate();
+    const result: MultiPeriodToken[] = [];
+    for (let offset = firstDow - 1; offset >= 0; offset -= 1) {
+      const date = new Date(Date.UTC(year, month - 1, -offset));
+      const token = dayToken(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate());
+      result.push({ token, label: String(date.getUTCDate()) });
+    }
+    for (let day = 1; day <= count; day += 1) result.push({ token: dayToken(year, month, day), label: String(day) });
+    return result;
+  });
+  const monthOptions = createMemo(() => Array.from({ length: 12 }, (_, index) => ({ token: `${viewYear()}-${String(index + 1).padStart(2, "0")}`, label: new Date(Date.UTC(viewYear(), index, 1)).toLocaleDateString("en-US", { month: "short", timeZone: "UTC" }) })));
+  const yearOptions = createMemo(() => Array.from({ length: 10 }, (_, index) => { const year = current.year - index; return { token: String(year), label: String(year) }; }));
+  const weekOptions = createMemo(() => visibleWeeks(viewYear(), viewMonth()));
+  const selectedLabel = (token: string) => formatToken(props.granularity, token);
+
+  return (
+    <div class={`ksui-mpp ${props.class ?? ""}`} data-testid="multi-period-picker">
+      <div class="ksui-mpp-tabs" role="tablist" aria-label={labels().period ?? "Period"}>
+        <For each={tabOptions}>{(granularity) => (
+          <button type="button" role="tab" aria-selected={props.granularity === granularity} classList={{ "ksui-mpp-selected": props.granularity === granularity }} class="ksui-mpp-tab" onClick={() => { props.onGranularityChange(granularity); setViewYear(current.year); setViewMonth(current.month); }}>
+            {defaultLabel(granularity, labels())}
+          </button>
+        )}</For>
+        <button ref={triggerRef} type="button" class="ksui-mpp-trigger" disabled={props.disabled} aria-haspopup="dialog" aria-expanded={open()} onClick={openPicker}>
+          <CalendarDays size={14} aria-hidden="true" /> <span>{summary()}</span><ChevronDown size={14} aria-hidden="true" />
+        </button>
+      </div>
+      <Show when={open()}>
+        <Portal>
+          <div ref={popupRef} class="ksui-mpp-popover" style={popupStyle()} role="dialog" aria-label={labels().period ?? "Pick periods"} tabindex={-1}>
+            <Show when={props.granularity === "day"}>
+              <div class="ksui-mpp-heading"><button class="ksui-mpp-nav" type="button" aria-label="Previous month" onClick={() => shiftMonth(-1)}><ChevronLeft size={14} /></button><span>{new Date(Date.UTC(viewYear(), viewMonth() - 1, 1)).toLocaleDateString("en-US", { month: "long", year: "numeric", timeZone: "UTC" })}</span><button class="ksui-mpp-nav" type="button" aria-label="Next month" onClick={() => shiftMonth(1)}><ChevronRight size={14} /></button></div>
+              <div class="ksui-mpp-grid ksui-mpp-grid-days"><For each={["S", "M", "T", "W", "T", "F", "S"]}>{(label) => <span class="ksui-mpp-token">{label}</span>}</For><For each={days()}>{(item) => <button type="button" classList={{ "ksui-mpp-selected": props.selected.includes(item.token) }} class="ksui-mpp-token" aria-pressed={props.selected.includes(item.token)} onClick={() => toggle(item.token)}>{tokenContent(item)}</button>}</For></div>
+            </Show>
+            <Show when={props.granularity === "week"}>
+              <div class="ksui-mpp-heading"><button class="ksui-mpp-nav" type="button" aria-label="Previous year" onClick={() => setViewYear((year) => year - 1)}><ChevronLeft size={14} /></button><span>{viewYear()}</span><button class="ksui-mpp-nav" type="button" aria-label="Next year" onClick={() => setViewYear((year) => year + 1)}><ChevronRight size={14} /></button></div>
+              <div class="ksui-mpp-months"><For each={Array.from({ length: 12 }, (_, index) => index + 1)}>{(month) => <button type="button" class="ksui-mpp-month" classList={{ "ksui-mpp-selected": month === viewMonth() }} onClick={() => setViewMonth(month)}>{new Date(Date.UTC(2000, month - 1, 1)).toLocaleDateString("en-US", { month: "short", timeZone: "UTC" })}</button>}</For></div>
+              <div class="ksui-mpp-week-label">Weeks</div><div class="ksui-mpp-grid"><For each={weekOptions()}>{(item) => <button type="button" classList={{ "ksui-mpp-selected": props.selected.includes(item.token) }} class="ksui-mpp-token" aria-pressed={props.selected.includes(item.token)} onClick={() => toggle(item.token)}>{tokenContent(item)}</button>}</For></div>
+            </Show>
+            <Show when={props.granularity === "month"}>
+              <div class="ksui-mpp-heading"><button class="ksui-mpp-nav" type="button" aria-label="Previous year" onClick={() => setViewYear((year) => year - 1)}><ChevronLeft size={14} /></button><span>{viewYear()}</span><button class="ksui-mpp-nav" type="button" aria-label="Next year" onClick={() => setViewYear((year) => year + 1)}><ChevronRight size={14} /></button></div>
+              <div class="ksui-mpp-grid ksui-mpp-grid-months"><For each={monthOptions()}>{(item) => <button type="button" classList={{ "ksui-mpp-selected": props.selected.includes(item.token) }} class="ksui-mpp-token" aria-pressed={props.selected.includes(item.token)} onClick={() => toggle(item.token)}>{tokenContent(item)}</button>}</For></div>
+            </Show>
+            <Show when={props.granularity === "year"}><div class="ksui-mpp-grid ksui-mpp-grid-years"><For each={yearOptions()}>{(item) => <button type="button" classList={{ "ksui-mpp-selected": props.selected.includes(item.token) }} class="ksui-mpp-token" aria-pressed={props.selected.includes(item.token)} onClick={() => toggle(item.token)}>{tokenContent(item)}</button>}</For></div></Show>
+            <Show when={props.selected.length > 0}><div class="ksui-mpp-chips"><For each={props.selected}>{(token) => <button type="button" class="ksui-mpp-chip ksui-mpp-selected" aria-label={`Remove ${selectedLabel(token)}`} onClick={() => toggle(token)}><span>{selectedLabel(token)}</span><X size={11} aria-hidden="true" /></button>}</For></div></Show>
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  );
+}

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/index.ts

@@ -87,6 +87,14 @@ export { default as Modal, type ModalProps, type ModalSize, type ModalTone } fro
 // DataTable's date filter renders this picker.
 export { default as DatePicker, type DatePickerProps, type DateRangeValue } from "./components/base/DatePicker";
 
+export {
+  default as MultiPeriodPicker,
+  type MultiPeriodPickerProps,
+  type MultiPeriodGranularity,
+  type MultiPeriodToken,
+  type MultiPeriodTokenRenderProps,
+} from "./components/composite/MultiPeriodPicker";
+
 // Server-side / client-side data table with debounced search, column sort,
 // pagination + "Show more" load mode, a filters slot, optional date filter, and
 // an onRefetch handle. Ported from the host kit; injects its own CSS, no Tailwind.