@kahitsan/ksui 0.43.0 → 0.45.0

package/package.json

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

@@ -0,0 +1,84 @@
+import { fireEvent, render, screen } from "@solidjs/testing-library";
+import { describe, expect, it, vi } from "vitest";
+import Pencil from "lucide-solid/icons/pencil";
+import ActionMenu, { RowMenu } from "./ActionMenu";
+
+const items = [
+  { id: "open", label: "Open", icon: Pencil },
+  { id: "disabled", label: "Unavailable", disabled: true },
+  { id: "remove", label: "Remove", danger: true, separatorBefore: true },
+];
+
+async function flushMenu() {
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe("ActionMenu", () => {
+  it("opens an accessible menu, focuses the first enabled item, and selects", async () => {
+    const onSelect = vi.fn();
+    render(() => <ActionMenu label="Row actions" items={items} onSelect={onSelect} testId="row-menu" />);
+    const trigger = screen.getByTestId("row-menu");
+    expect(trigger.getAttribute("aria-haspopup")).toBe("menu");
+    await fireEvent.click(trigger);
+    await flushMenu();
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByRole("menu", { name: "Row actions" })).toBeTruthy();
+    expect(document.activeElement).toBe(screen.getByRole("menuitem", { name: "Open" }));
+    expect(screen.getByRole("menuitem", { name: "Open" }).querySelector("svg")?.getAttribute("aria-hidden")).toBe("true");
+    await fireEvent.click(screen.getByRole("menuitem", { name: "Open" }));
+    expect(onSelect).toHaveBeenCalledWith("open");
+    expect(screen.queryByRole("menu")).toBeNull();
+    await flushMenu();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("keeps focus moved by selection callback", async () => {
+    render(() => (
+      <div>
+        <ActionMenu
+          label="Actions"
+          items={items}
+          onSelect={() => screen.getByRole("button", { name: "Destination" }).focus()}
+        />
+        <button type="button">Destination</button>
+      </div>
+    ));
+    await fireEvent.click(screen.getByRole("button", { name: "Actions" }));
+    await flushMenu();
+    await fireEvent.click(screen.getByRole("menuitem", { name: "Open" }));
+    await flushMenu();
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "Destination" }));
+  });
+
+  it("skips disabled items during arrow navigation and restores trigger focus on Escape", async () => {
+    render(() => <ActionMenu label="Actions" items={items} onSelect={() => {}} />);
+    const trigger = screen.getByRole("button", { name: "Actions" });
+    await fireEvent.keyDown(trigger, { key: "ArrowDown" });
+    await flushMenu();
+    const open = screen.getByRole("menuitem", { name: "Open" });
+    const remove = screen.getByRole("menuitem", { name: "Remove" });
+    expect(document.activeElement).toBe(open);
+    await fireEvent.keyDown(open, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(remove);
+    expect((screen.getByRole("menuitem", { name: "Unavailable" }) as HTMLButtonElement).disabled).toBe(true);
+    await fireEvent.keyDown(remove, { key: "Escape" });
+    await flushMenu();
+    expect(screen.queryByRole("menu")).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("closes on outside press and exposes RowMenu as the same reusable component", async () => {
+    render(() => (
+      <div>
+        <RowMenu label="More actions" items={items} onSelect={() => {}} />
+        <button type="button">Outside</button>
+      </div>
+    ));
+    await fireEvent.click(screen.getByRole("button", { name: "More actions" }));
+    await flushMenu();
+    expect(screen.getByRole("menu")).toBeTruthy();
+    await fireEvent.mouseDown(screen.getByRole("button", { name: "Outside" }));
+    expect(screen.queryByRole("menu")).toBeNull();
+  });
+});

package/src/components/base/ActionMenu.tsx

@@ -0,0 +1,201 @@
+import { For, Show, createSignal, createUniqueId, onCleanup, onMount, type Component, type JSX } from "solid-js";
+import { Dynamic, Portal } from "solid-js/web";
+import MoreHorizontal from "lucide-solid/icons/more-horizontal";
+import { injectCSS } from "../../utils/inject-css";
+import { usePopoverMount } from "../../utils/modal-layer";
+import { useTopLayer } from "../../utils/top-layer";
+
+const STYLE_ID = "ksui-action-menu-style";
+const STYLE_CSS = `
+.ksui-action-menu{position:relative;display:inline-block;}
+.ksui-action-menu__trigger{display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center;border:0;border-radius:.375rem;background:transparent;color:var(--ksui-action-menu-muted,var(--ks-fg-muted,#a1a1aa));cursor:pointer;transition:background-color .15s ease,color .15s ease;}
+.ksui-action-menu__trigger:hover,.ksui-action-menu__trigger[aria-expanded="true"]{background:var(--ksui-action-menu-hover,var(--ks-surface-raised,#1a1a1a));color:var(--ksui-action-menu-fg,var(--ks-fg,#ffffff));}
+.ksui-action-menu__trigger:focus-visible,.ksui-action-menu__item:focus-visible{outline:2px solid var(--ksui-action-menu-focus,var(--ks-focus-ring,#c9a961));outline-offset:2px;}
+.ksui-action-menu__panel{position:fixed;z-index:70;min-width:11rem;overflow:hidden;border:1px solid var(--ksui-action-menu-border,var(--ks-border,rgba(39,39,42,0.5)));border-radius:.5rem;background:var(--ksui-action-menu-bg,var(--ks-surface,#0f0f0f));padding:.25rem 0;box-shadow:var(--ksui-action-menu-shadow,var(--ks-shadow-lg,0 12px 32px rgba(0,0,0,0.6)));}
+.ksui-action-menu__item{display:flex;width:100%;align-items:center;gap:.5rem;border:0;background:transparent;padding:.375rem .75rem;color:var(--ksui-action-menu-fg,var(--ks-fg,#ffffff));font:inherit;font-size:.875rem;line-height:1.25rem;text-align:left;cursor:pointer;transition:background-color .15s ease,color .15s ease;}
+.ksui-action-menu__item:hover,.ksui-action-menu__item:focus{background:var(--ksui-action-menu-hover,var(--ks-surface-raised,#1a1a1a));outline:none;}
+.ksui-action-menu__item--danger{color:var(--ksui-action-menu-danger,var(--ks-danger-fg,#f87171));}
+.ksui-action-menu__item--danger:hover,.ksui-action-menu__item--danger:focus{background:var(--ksui-action-menu-danger-bg,var(--ks-danger-bg,rgba(239,68,68,0.12)));}
+.ksui-action-menu__item:disabled{cursor:not-allowed;opacity:.5;}
+.ksui-action-menu__item-icon{display:inline-flex;flex:none;}
+.ksui-action-menu__separator{margin:.25rem 0;border-top:1px solid var(--ksui-action-menu-border,var(--ks-border,rgba(39,39,42,0.5)));}
+`;
+
+export type ActionMenuIcon = Component<{ size?: number; class?: string }>;
+export interface ActionMenuItem {
+  id: string;
+  label: string;
+  icon?: ActionMenuIcon;
+  danger?: boolean;
+  disabled?: boolean;
+  separatorBefore?: boolean;
+}
+export interface ActionMenuProps {
+  label: string;
+  items: readonly ActionMenuItem[];
+  onSelect: (id: string) => void;
+  icon?: ActionMenuIcon;
+  align?: "start" | "end";
+  class?: string;
+  triggerClass?: string;
+  menuClass?: string;
+  testId?: string;
+}
+
+function nextMenuItemIndex(key: string, current: number, length: number): number | undefined {
+  switch (key) {
+    case "ArrowDown":
+      return current < 0 ? 0 : (current + 1) % length;
+    case "ArrowUp":
+      return current < 0 ? length - 1 : (current - 1 + length) % length;
+    case "Home":
+      return 0;
+    case "End":
+      return length - 1;
+    default:
+      return undefined;
+  }
+}
+
+export default function ActionMenu(props: ActionMenuProps): JSX.Element {
+  injectCSS(STYLE_ID, STYLE_CSS);
+  const mount = usePopoverMount();
+  const menuId = createUniqueId();
+  const [open, setOpen] = createSignal(false);
+  const [position, setPosition] = createSignal({ top: 0, left: 0 });
+  let container: HTMLDivElement | undefined;
+  let trigger: HTMLButtonElement | undefined;
+  let menu: HTMLDivElement | undefined;
+  const TriggerIcon = () => props.icon ?? MoreHorizontal;
+  const enabledItems = () => [...(menu?.querySelectorAll<HTMLButtonElement>("[role='menuitem']:not(:disabled)") ?? [])];
+  const focusItem = (edge: "first" | "last") => queueMicrotask(() => {
+    const items = enabledItems();
+    (edge === "first" ? items[0] : items[items.length - 1])?.focus();
+  });
+  const updatePosition = () => {
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const width = menu?.offsetWidth || 176;
+    const height = menu?.offsetHeight || 0;
+    const left = props.align === "start" ? rect.left : rect.right - width;
+    const top = height > 0 && rect.bottom + 4 + height > window.innerHeight
+      ? Math.max(8, rect.top - height - 4)
+      : rect.bottom + 4;
+    setPosition({ top, left: Math.max(8, Math.min(left, window.innerWidth - width - 8)) });
+  };
+  const close = (restoreFocus = false) => {
+    setOpen(false);
+    if (restoreFocus) queueMicrotask(() => trigger?.focus());
+  };
+  const openMenu = (edge: "first" | "last" = "first") => {
+    setOpen(true);
+    queueMicrotask(() => {
+      updatePosition();
+      focusItem(edge);
+    });
+  };
+  const onDocumentKeyDown = (event: KeyboardEvent) => {
+    if (!open() || event.key !== "Escape") return;
+    event.preventDefault();
+    close(true);
+  };
+  const onDocumentPointerDown = (event: MouseEvent) => {
+    const target = event.target as Node;
+    if (container?.contains(target) || menu?.contains(target)) return;
+    close();
+  };
+  const onMenuKeyDown = (event: KeyboardEvent) => {
+    const items = enabledItems();
+    if (event.key === "Tab") {
+      close();
+      return;
+    }
+    if (items.length === 0) return;
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    const next = nextMenuItemIndex(event.key, current, items.length);
+    if (next === undefined) return;
+    event.preventDefault();
+    items[next]?.focus();
+  };
+  onMount(() => {
+    document.addEventListener("keydown", onDocumentKeyDown);
+    document.addEventListener("mousedown", onDocumentPointerDown);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+  });
+  onCleanup(() => {
+    document.removeEventListener("keydown", onDocumentKeyDown);
+    document.removeEventListener("mousedown", onDocumentPointerDown);
+    window.removeEventListener("resize", updatePosition);
+    window.removeEventListener("scroll", updatePosition, true);
+  });
+  return (
+    <div ref={container} class={`ksui-action-menu ${props.class ?? ""}`}>
+      <button
+        ref={trigger}
+        type="button"
+        aria-label={props.label}
+        aria-haspopup="menu"
+        aria-expanded={open()}
+        aria-controls={open() ? menuId : undefined}
+        data-testid={props.testId}
+        class={`ksui-action-menu__trigger ${props.triggerClass ?? ""}`}
+        onClick={() => open() ? close() : openMenu()}
+        onKeyDown={(event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            openMenu(event.key === "ArrowUp" ? "last" : "first");
+          }
+        }}
+      >
+        <Dynamic component={TriggerIcon()} size={16} aria-hidden="true" />
+      </button>
+      <Show when={open()}>
+        <Portal mount={mount()}>
+          <div
+            ref={(element) => {
+              menu = element;
+              onCleanup(useTopLayer(element));
+              queueMicrotask(updatePosition);
+            }}
+            id={menuId}
+            role="menu"
+            aria-label={props.label}
+            class={`ksui-action-menu__panel ${props.menuClass ?? ""}`}
+            style={{ top: `${position().top}px`, left: `${position().left}px` }}
+            onKeyDown={onMenuKeyDown}
+          >
+            <For each={props.items}>{(item) => (
+              <>
+                <Show when={item.separatorBefore}><div role="separator" class="ksui-action-menu__separator" /></Show>
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={item.disabled}
+                  class={`ksui-action-menu__item${item.danger ? " ksui-action-menu__item--danger" : ""}`}
+                  onClick={() => {
+                    if (item.disabled) return;
+                    const selectedElement = document.activeElement;
+                    setOpen(false);
+                    props.onSelect(item.id);
+                    queueMicrotask(() => {
+                      const active = document.activeElement;
+                      if (active === document.body || active === selectedElement) trigger?.focus();
+                    });
+                  }}
+                >
+                  <Show when={item.icon}>{(Icon) => <span class="ksui-action-menu__item-icon"><Dynamic component={Icon()} size={14} aria-hidden="true" /></span>}</Show>
+                  {item.label}
+                </button>
+              </>
+            )}</For>
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  );
+}
+
+export const RowMenu = ActionMenu;
+export type RowMenuItem = ActionMenuItem;
+export type RowMenuProps = ActionMenuProps;

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

@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from "@solidjs/testing-library";
+import { describe, expect, it, vi } from "vitest";
+import ModalHeader from "./ModalHeader";
+
+describe("ModalHeader", () => {
+  it("renders title, subtitle, and an accessible close control", async () => {
+    const onClose = vi.fn();
+    render(() => <ModalHeader title="Edit schedule" subtitle="Future entries only" onClose={onClose} />);
+    expect(screen.getByRole("heading", { name: "Edit schedule", level: 2 })).toBeTruthy();
+    expect(screen.getByText("Future entries only")).toBeTruthy();
+    await fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("renders JSX slots through owner-safe functions", () => {
+    render(() => (
+      <ModalHeader
+        title={() => <label><span>Schedule name</span><input aria-label="Schedule name" /></label>}
+        subtitle={() => <strong>Recurring monthly</strong>}
+        onClose={() => {}}
+      />
+    ));
+    expect(screen.getByRole("textbox", { name: "Schedule name" })).toBeTruthy();
+    expect(screen.getByText("Recurring monthly")).toBeTruthy();
+  });
+
+  it("accepts custom title id, close label, and classes", () => {
+    const { container } = render(() => (
+      <ModalHeader title="Details" titleId="details-title" closeLabel="Close details" class="custom-header" onClose={() => {}} />
+    ));
+    expect(screen.getByRole("heading").id).toBe("details-title");
+    expect(screen.getByRole("button", { name: "Close details" })).toBeTruthy();
+    expect(container.querySelector("header")?.classList.contains("custom-header")).toBe(true);
+  });
+});

package/src/components/base/ModalHeader.tsx

@@ -0,0 +1,45 @@
+import { Show, createUniqueId, type JSX } from "solid-js";
+import X from "lucide-solid/icons/x";
+import { injectCSS } from "../../utils/inject-css";
+
+const STYLE_ID = "ksui-modal-header-style";
+const STYLE_CSS = `
+.ksui-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--ksui-modal-header-border,var(--ks-border,rgba(39,39,42,0.5)));}
+.ksui-modal-header__copy{min-width:0;}
+.ksui-modal-header__title{margin:0;overflow:hidden;color:var(--ksui-modal-header-fg,var(--ks-fg,#ffffff));font-size:1.125rem;line-height:1.75rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
+.ksui-modal-header__subtitle{margin-top:.125rem;color:var(--ksui-modal-header-muted,var(--ks-fg-muted,#a1a1aa));font-size:.75rem;line-height:1rem;}
+.ksui-modal-header__close{display:inline-flex;width:2rem;height:2rem;flex:none;align-items:center;justify-content:center;border:0;border-radius:.375rem;background:transparent;color:var(--ksui-modal-header-muted,var(--ks-fg-muted,#a1a1aa));cursor:pointer;transition:background-color .15s ease,color .15s ease;}
+.ksui-modal-header__close:hover{background:var(--ksui-modal-header-hover,var(--ks-surface-raised,#1a1a1a));color:var(--ksui-modal-header-fg,var(--ks-fg,#ffffff));}
+.ksui-modal-header__close:focus-visible{outline:2px solid var(--ksui-modal-header-focus,var(--ks-focus-ring,#c9a961));outline-offset:2px;}
+`;
+
+export interface ModalHeaderProps {
+  title: string | (() => JSX.Element);
+  subtitle?: string | (() => JSX.Element);
+  onClose: () => void;
+  closeLabel?: string;
+  titleId?: string;
+  class?: string;
+}
+
+function renderContent(content: string | (() => JSX.Element)): JSX.Element {
+  return typeof content === "function" ? content() : content;
+}
+
+export default function ModalHeader(props: ModalHeaderProps): JSX.Element {
+  injectCSS(STYLE_ID, STYLE_CSS);
+  const generatedId = createUniqueId();
+  return (
+    <header class={`ksui-modal-header ${props.class ?? ""}`}>
+      <div class="ksui-modal-header__copy">
+        <h2 id={props.titleId ?? generatedId} class="ksui-modal-header__title">{renderContent(props.title)}</h2>
+        <Show when={props.subtitle}>
+          <div class="ksui-modal-header__subtitle">{renderContent(props.subtitle!)}</div>
+        </Show>
+      </div>
+      <button type="button" aria-label={props.closeLabel ?? "Close"} class="ksui-modal-header__close" onClick={props.onClose}>
+        <X size={16} aria-hidden="true" />
+      </button>
+    </header>
+  );
+}

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

@@ -39,3 +39,17 @@ describe("MultiSelectGroup", () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 });
+
+describe("MultiSelectGroup variants", () => {
+  it("keeps the existing info selected treatment by default", () => {
+    render(() => <MultiSelectGroup ariaLabel="Days" options={options} value={["mon"]} onChange={() => {}} />);
+    expect(screen.getByRole("button", { name: "Mon" }).className).toContain("--ks-info");
+  });
+
+  it("uses the accent selected-state treatment when requested", () => {
+    render(() => <MultiSelectGroup ariaLabel="Days" options={options} value={["mon"]} onChange={() => {}} variant="accent" />);
+    const selected = screen.getByRole("button", { name: "Mon" });
+    expect(selected.className).toContain("--ks-accent");
+    expect(selected.className).not.toContain("--ks-info");
+  });
+});

package/src/components/base/MultiSelectGroup.tsx

@@ -7,6 +7,7 @@ export interface MultiSelectOption {
   disabledNote?: string;
 }
 
+export type MultiSelectGroupVariant = "info" | "accent";
 export interface MultiSelectGroupProps {
   options: MultiSelectOption[];
   value: readonly string[];
@@ -15,6 +16,8 @@ export interface MultiSelectGroupProps {
   class?: string;
   itemClass?: string;
   disabled?: boolean;
+  /** Selected-state palette. Defaults to the existing info treatment. */
+  variant?: MultiSelectGroupVariant;
 }
 
 export default function MultiSelectGroup(props: MultiSelectGroupProps): JSX.Element {
@@ -39,7 +42,8 @@ export default function MultiSelectGroup(props: MultiSelectGroupProps): JSX.Elem
             onClick={() => toggle(option)}
             class={`rounded-md border px-2.5 py-1.5 text-xs transition-colors ${props.itemClass ?? ""}`}
             classList={{
-              "border-[var(--ks-info,#38bdf8)] bg-[var(--ks-info,#38bdf8)] text-[var(--ks-info-fg,#7dd3fc)]": selected(option.value),
+              "border-[var(--ks-info,#38bdf8)] bg-[var(--ks-info,#38bdf8)] text-[var(--ks-info-fg,#7dd3fc)]": selected(option.value) && (props.variant ?? "info") === "info",
+              "border-[var(--ks-accent,#fbbf24)] bg-[var(--ks-accent,#fbbf24)] font-semibold text-[var(--ks-fg-on-accent,#0a0a0a)]": selected(option.value) && props.variant === "accent",
               "border-[var(--ks-border,rgba(39,39,42,0.5))] bg-[var(--ks-surface,#0f0f0f)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[var(--ks-border-strong,#3f3f46)] hover:text-[var(--ks-fg,#ffffff)]": !selected(option.value),
               "cursor-not-allowed opacity-50": !!props.disabled || !!option.disabled,
             }}

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

@@ -0,0 +1,52 @@
+import { render, screen } from "@solidjs/testing-library";
+import { describe, expect, it } from "vitest";
+import ProgressBar from "./ProgressBar";
+
+describe("ProgressBar", () => {
+  it("preserves the existing full-height default variant", () => {
+    const { container } = render(() => <ProgressBar progress={35} label="Imported" />);
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.className).toContain("h-8");
+    expect(root.getAttribute("role")).toBeNull();
+    expect(root.textContent).toContain("35%");
+  });
+
+  it("renders the compact labeled variant with progress semantics", () => {
+    render(() => <ProgressBar variant="compact" progress={42.4} label="2 / 5 paid" />);
+    const progress = screen.getByRole("progressbar", { name: "2 / 5 paid" });
+    expect(progress.getAttribute("aria-valuenow")).toBe("42");
+    expect(progress.textContent).toContain("2 / 5 paid");
+    expect(progress.textContent).toContain("42%");
+    expect(progress.querySelector<HTMLElement>('[style*="width"]')?.style.width).toBe("42%");
+  });
+
+  it("clamps compact progress and supports a custom right label and color", () => {
+    render(() => <ProgressBar variant="compact" progress={140} label="Complete" rightLabel="Done" color="green" />);
+    const progress = screen.getByRole("progressbar", { name: "Complete" });
+    expect(progress.getAttribute("aria-valuenow")).toBe("100");
+    expect(progress.textContent).toContain("Done");
+    const fill = progress.querySelector<HTMLElement>('[style*="width"]')!;
+    expect(fill.style.width).toBe("100%");
+    expect(fill.style.backgroundColor).toContain("--ks-success");
+  });
+
+  it("honors compact visibility, direction, icon, and shimmer props", () => {
+    const Icon = () => <svg data-testid="compact-icon" />;
+    const { container } = render(() => (
+      <ProgressBar
+        variant="compact"
+        progress={25}
+        label="Quarter"
+        hidePercentage
+        position="right"
+        shimmer
+        icon={Icon}
+      />
+    ));
+    expect(screen.getByTestId("compact-icon")).toBeTruthy();
+    expect(screen.queryByText("25%")).toBeNull();
+    const fill = container.querySelector<HTMLElement>('[style*="width"]')!;
+    expect(fill.style.marginLeft).toBe("auto");
+    expect(fill.querySelector(".ks-progress-shimmer")).toBeTruthy();
+  });
+});

package/src/components/base/ProgressBar.tsx

@@ -35,6 +35,7 @@ const styles: Record<string, string> = {
 // ProgressColor is derived from COLOR_MAP so adding a hue later flows here
 // without re-syncing a hardcoded list.
 export type ProgressColor = keyof typeof COLOR_MAP;
+export type ProgressBarVariant = "default" | "compact";
 
 export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
   progress: number;
@@ -52,6 +53,8 @@ export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
   // Explicit color signal — class-substring sniffing broke when COLOR_AMBER
   // was tokenized (4f6ed40 dropped the literal "amber" from the class).
   color?: ProgressColor;
+  /** Compact labeled readout with a thin track. Defaults to the existing bar. */
+  variant?: ProgressBarVariant;
   class?: string;
 }
 
@@ -159,7 +162,7 @@ function extractTextSize(className: string): number {
   return 14;
 }
 
-const ProgressBar: Component<ProgressBarProps> = (props) => {
+const DefaultProgressBar: Component<ProgressBarProps> = (props) => {
   injectCSS(PROGRESS_STYLE_ID, PROGRESS_CSS);
   const [local, others] = splitProps(props, [
     "progress",
@@ -171,6 +174,7 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
     "hidePercentage",
     "rightLabel",
     "color",
+    "variant",
     "class",
   ]);
 
@@ -342,4 +346,61 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
   );
 };
 
+type CompactProgressBarProps = ProgressBarProps;
+
+const CompactProgressBar: Component<CompactProgressBarProps> = (props) => {
+  injectCSS(PROGRESS_STYLE_ID, PROGRESS_CSS);
+  const [local, others] = splitProps(props, ["progress", "icon", "label", "statusLabel", "shimmer", "position", "hidePercentage", "rightLabel", "color", "variant", "class"]);
+  const value = createMemo(() => {
+    if (typeof local.progress !== "number" || Number.isNaN(local.progress)) return 0;
+    return Math.min(100, Math.max(0, Math.round(local.progress)));
+  });
+  const fillColor = createMemo(() => local.color ? COLOR_MAP[local.color].indicator : "var(--ks-primary, #c9a961)");
+  const accessibleLabel = () => local.label ?? local.statusLabel ?? "Progress";
+  const Icon = () => local.icon;
+  return (
+    <div
+      {...others}
+      class={cn("min-w-28", local.class)}
+      role="progressbar"
+      aria-label={accessibleLabel()}
+      aria-valuenow={value()}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <div class="mb-1 flex items-center justify-between gap-2 text-[10px] leading-none">
+        <span class="flex min-w-0 items-center gap-1 truncate font-semibold text-[var(--ks-fg,#ffffff)]">
+          <Show when={Icon()}>{(ResolvedIcon) => <Dynamic component={ResolvedIcon()} size={12} aria-hidden="true" />}</Show>
+          <span class="truncate">{local.label ?? local.statusLabel}</span>
+        </span>
+        <Show when={local.rightLabel !== undefined || !local.hidePercentage}>
+          <span class="shrink-0 font-mono tabular-nums text-[var(--ks-fg-muted,#a1a1aa)]">
+            {local.rightLabel ?? `${value()}%`}
+          </span>
+        </Show>
+      </div>
+      <div class="h-[5px] overflow-hidden rounded-full bg-[var(--ks-surface-raised,#1a1a1a)]">
+        <div
+          class="relative h-full overflow-hidden rounded-full transition-[width] duration-200"
+          style={{
+            width: `${value()}%`,
+            "background-color": fillColor(),
+            "margin-left": local.position === "right" ? "auto" : undefined,
+          }}
+        >
+          <Show when={local.shimmer}>
+            <div class={styles["animate-shimmer"]} />
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProgressBar: Component<ProgressBarProps> = (props) => (
+  <Show when={props.variant === "compact"} fallback={<DefaultProgressBar {...props} />}>
+    <CompactProgressBar {...props} />
+  </Show>
+);
+
 export default ProgressBar;

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

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, fireEvent } from "@solidjs/testing-library";
+import List from "lucide-solid/icons/list";
 import SegmentedFilter, { type SegmentedFilterOption } from "./SegmentedFilter";
 
 // Back-compat: bare-string options are still accepted alongside the object
@@ -7,7 +8,7 @@ import SegmentedFilter, { type SegmentedFilterOption } from "./SegmentedFilter";
 const STRING_OPTIONS: SegmentedFilterOption[] = ["today", "week", "month"];
 
 const OBJECT_OPTIONS: SegmentedFilterOption[] = [
-  { value: "table", label: "Table" },
+  { value: "table", label: "Table", icon: List },
   { value: "calendar", label: "Calendar" },
 ];
 
@@ -40,6 +41,14 @@ describe("SegmentedFilter", () => {
     const radios = getAllByRole("radio");
     expect(radios.map((r) => r.textContent)).toEqual(["Table", "Calendar"]);
   });
+  it("renders optional decorative icons without changing accessible names", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={OBJECT_OPTIONS} value="table" onChange={() => {}} />
+    ));
+    const table = getAllByRole("radio")[0];
+    expect(table.querySelector("svg")?.getAttribute("aria-hidden")).toBe("true");
+    expect(table.getAttribute("aria-checked")).toBe("true");
+  });
 
   it("emits the clicked value on an enabled segment", () => {
     const onChange = vi.fn();

package/src/components/base/SegmentedFilter.tsx

@@ -1,4 +1,6 @@
-import { For, type JSX } from "solid-js";
+import { For, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+export type SegmentedFilterIcon = Component<{ size?: number; class?: string }>;
 
 /** One choice in the segmented row. A bare string uses the value as the label
  *  and is rendered capitalized; an object lets the caller supply an explicit
@@ -8,9 +10,9 @@ import { For, type JSX } from "solid-js";
  *  text, since a muted, unclickable control is otherwise unexplained. */
 export type SegmentedFilterOption =
   | string
-  | { value: string; label: string; disabled?: boolean; disabledNote?: string };
+  | { value: string; label: string; icon?: SegmentedFilterIcon; disabled?: boolean; disabledNote?: string };
 
-interface SegmentedFilterProps {
+export interface SegmentedFilterProps {
   /** The available segments, left to right. */
   options: SegmentedFilterOption[];
   /** The currently active value. Matched against each option's value. */
@@ -37,8 +39,8 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
   const buttonRefs: (HTMLButtonElement | undefined)[] = [];
   const optionOf = (o: SegmentedFilterOption) =>
     typeof o === "string"
-      ? { value: o, label: o, capitalize: true, disabled: false, disabledNote: undefined as string | undefined }
-      : { disabled: false, disabledNote: undefined as string | undefined, ...o, capitalize: false };
+      ? { value: o, label: o, icon: undefined as SegmentedFilterIcon | undefined, capitalize: true, disabled: false, disabledNote: undefined as string | undefined }
+      : { icon: undefined as SegmentedFilterIcon | undefined, disabled: false, disabledNote: undefined as string | undefined, ...o, capitalize: false };
 
   const currentIndex = () => {
     const i = props.options.findIndex((o) => optionOf(o).value === props.value);
@@ -117,7 +119,7 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
                 if (opt.disabled) return;
                 props.onChange(opt.value);
               }}
-              class="shrink-0 px-3 py-1.5 text-xs transition-colors"
+              class="inline-flex shrink-0 items-center justify-center gap-1.5 px-3 py-1.5 text-xs transition-colors"
               classList={{
                 capitalize: opt.capitalize,
                 "cursor-not-allowed": opt.disabled,
@@ -128,6 +130,7 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
                   !selected() && !opt.disabled,
               }}
             >
+              {opt.icon ? <Dynamic component={opt.icon} size={14} aria-hidden="true" /> : null}
               {opt.label}
               {opt.disabled && opt.disabledNote ? (
                 <span id={noteId} class="sr-only">

package/src/components/composite/TransactionForm.tsx

@@ -264,6 +264,9 @@ export interface TransactionFormProps {
   transferFeeAmount: string;
   setTransferFeeAmount: (v: string) => void;
   allowTransferFee: boolean;
+  // Editing a legacy payable row keeps the payable pane; create flows opt out
+  // via allowPayable={false} now that payables live in the Payables module.
+  allowPayable?: boolean;
   pendingFiles: PendingFile[];
   setPendingFiles: (v: PendingFile[]) => void;
   existingAttachments?: TransactionAttachment[];
@@ -399,10 +402,11 @@ export default function TransactionForm(props: TransactionFormProps) {
   // SearchableSelect mount so the loading-state placeholder shows while the
   // per-tenant options are still in flight.
   const subcategoryOptionsReady = () => subcategoryOptions() !== undefined;
-  const categoryOptions = () =>
-    props.category === "payable"
-      ? ["sale", "expense", "business", "payable"]
-      : ["sale", "expense", "business"];
+  const categoryOptions = () => {
+    if (props.category === "payable") return ["sale", "expense", "business", "payable"];
+    const base = ["sale", "expense", "business"];
+    return props.allowPayable === false ? base : [...base, "payable"];
+  };
 
   createEffect(() => {
     if (props.category !== "business" && props.transferFeeEnabled) {

package/src/index.ts

@@ -53,14 +53,14 @@ export { default as DetailRow } from "./components/base/DetailRow";
 export { default as Tooltip } from "./components/base/Tooltip";
 export { default as ImageCropper } from "./components/base/ImageCropper";
 export { default as ImageViewer } from "./components/base/ImageViewer";
-export { default as ProgressBar, type ProgressBarProps } from "./components/base/ProgressBar";
+export { default as ProgressBar, type ProgressBarProps, type ProgressBarVariant, type ProgressColor } from "./components/base/ProgressBar";
 export { default as ChartLegend } from "./components/base/ChartLegend";
 
 // Plugin reusability backlog: atoms migrated from per-plugin copies into the
 // single canonical package.
 export { default as StatusPill, type StatusTone } from "./components/base/StatusPill";
-export { default as SegmentedFilter, type SegmentedFilterOption } from "./components/base/SegmentedFilter";
-export { default as MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectOption } from "./components/base/MultiSelectGroup";
+export { default as SegmentedFilter, type SegmentedFilterProps, type SegmentedFilterOption, type SegmentedFilterIcon } from "./components/base/SegmentedFilter";
+export { default as MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectGroupVariant, type MultiSelectOption } from "./components/base/MultiSelectGroup";
 export { default as CopyButton } from "./components/base/CopyButton";
 export { default as KpiCard, type KpiCardProps, type KpiTone } from "./components/base/KpiCard";
 export { default as RadioCardGroup } from "./components/base/RadioCardGroup";
@@ -79,6 +79,16 @@ export { default as EyebrowBadge, type EyebrowBadgeProps, type EyebrowTone, type
 // Self-contained modal dialog (promoted from the former host kit). Injects its
 // own CSS; no Tailwind / host-brand classes required.
 export { default as Modal, type ModalProps, type ModalSize, type ModalTone } from "./components/base/Modal";
+export { default as ModalHeader, type ModalHeaderProps } from "./components/base/ModalHeader";
+export {
+  default as ActionMenu,
+  RowMenu,
+  type ActionMenuProps,
+  type ActionMenuItem,
+  type ActionMenuIcon,
+  type RowMenuProps,
+  type RowMenuItem,
+} from "./components/base/ActionMenu";
 
 // Calendar date picker (ported from the host kit). Trigger button labeled with
 // the selected date or "Pick date", a portaled calendar popover with prev/next