@kahitsan/ksui 0.34.1 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.34.1",
+  "version": "0.36.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/AccountAvatar.tsx

@@ -64,6 +64,7 @@ export function buildInitialsSvg(name: string): string {
     `<circle cx="50" cy="50" r="50" fill="${color}"/>`,
     `<text x="50" y="50" text-anchor="middle" dominant-baseline="central" ` +
       `fill="white" font-size="${fontSize}" font-weight="bold" ` +
+      // rendered via <img src="data:...">, an isolated document — var(--ks-font-*) cannot resolve here, so left literal
       `font-family="system-ui,-apple-system,sans-serif">${initials}</text>`,
     "</svg>",
   ].join("");

package/src/components/base/DataTable.tsx

@@ -118,7 +118,7 @@ const DATATABLE_CSS = `
 @media (min-width:640px){.ksui-datatable-search-input{width:18rem;}}
 .ksui-datatable-scroll{overflow-x:auto;transition:opacity 0.15s ease;}
 .ksui-datatable-table{width:100%;text-align:left;font-size:0.78125rem;line-height:1.3;border-collapse:collapse;}
-.ksui-datatable-thead{border-bottom:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-thead-bg,color-mix(in srgb, var(--ks-fg, #ffffff) 3%, transparent));font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.65625rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ksui-dt-muted,var(--ks-fg-subtle,#71717a));}
+.ksui-datatable-thead{border-bottom:1px solid var(--ksui-dt-border,var(--ks-border,rgba(39,39,42,0.5)));background:var(--ksui-dt-thead-bg,color-mix(in srgb, var(--ks-fg, #ffffff) 3%, transparent));font-family:var(--ks-font-mono,ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace);font-size:0.65625rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ksui-dt-muted,var(--ks-fg-subtle,#71717a));}
 .ksui-datatable-th{padding:0.5625rem 0.875rem;background:var(--ksui-dt-thead-bg,color-mix(in srgb, var(--ks-fg, #ffffff) 3%, transparent));white-space:nowrap;}
 .ksui-datatable-th-num{text-align:right;}
 .ksui-datatable-th-sortable{cursor:pointer;transition:color 0.15s ease;}
@@ -130,9 +130,9 @@ const DATATABLE_CSS = `
 .ksui-datatable-row-clickable{cursor:pointer;}
 .ksui-datatable-row-clickable:active{background-color:var(--ksui-dt-row-active,color-mix(in srgb, var(--ks-border-strong, #3f3f46) 70%, transparent));}
 .ksui-datatable-td{padding:0.5rem 0.875rem;vertical-align:middle;white-space:nowrap;}
-.ksui-datatable-td-num{font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ksui-dt-text-strong,var(--ks-fg,#ffffff));}
-.ksui-datatable-code{display:block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.71875rem;color:var(--ksui-dt-fg,var(--ks-fg,#ffffff));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;}
-.ksui-datatable-badge{display:inline-block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.625rem;padding:0.125rem 0.4375rem;border-radius:0.3125rem;letter-spacing:0.02em;background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));color:var(--ksui-dt-text,var(--ks-fg-muted,#a1a1aa));}
+.ksui-datatable-td-num{font-family:var(--ks-font-mono,ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ksui-dt-text-strong,var(--ks-fg,#ffffff));}
+.ksui-datatable-code{display:block;font-family:var(--ks-font-mono,ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace);font-size:0.71875rem;color:var(--ksui-dt-fg,var(--ks-fg,#ffffff));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;}
+.ksui-datatable-badge{display:inline-block;font-family:var(--ks-font-mono,ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace);font-size:0.625rem;padding:0.125rem 0.4375rem;border-radius:0.3125rem;letter-spacing:0.02em;background:var(--ksui-dt-control-bg,var(--ks-input-bg,#18181b));color:var(--ksui-dt-text,var(--ks-fg-muted,#a1a1aa));}
 .ksui-datatable-badge-ok{background:var(--ksui-dt-good-bg,color-mix(in srgb, var(--ks-success-fg, #34d399) 14%, transparent));color:var(--ksui-dt-good,var(--ks-success-fg,#34d399));}
 .ksui-datatable-badge-warn{background:var(--ksui-dt-accent-bg,color-mix(in srgb, var(--ks-accent, #fbbf24) 20%, transparent));color:var(--ksui-dt-accent,var(--ks-accent,#fbbf24));}
 .ksui-datatable-badge-danger{background:var(--ksui-dt-danger-bg,color-mix(in srgb, var(--ks-danger-fg, #f87171) 14%, transparent));color:var(--ksui-dt-danger,var(--ks-danger-fg,#f87171));}

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

@@ -0,0 +1,111 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import SegmentedFilter, { type SegmentedFilterOption } from "./SegmentedFilter";
+
+// Back-compat: bare-string options are still accepted alongside the object
+// form, so callers frozen on the old shape don't need a migration.
+const STRING_OPTIONS: SegmentedFilterOption[] = ["today", "week", "month"];
+
+const OBJECT_OPTIONS: SegmentedFilterOption[] = [
+  { value: "table", label: "Table" },
+  { value: "calendar", label: "Calendar" },
+];
+
+const WITH_DISABLED: SegmentedFilterOption[] = [
+  { value: "daily", label: "Per day" },
+  { value: "hourly", label: "Per hour", disabled: true, disabledNote: "Unavailable for this staff type" },
+  { value: "fixed", label: "Fixed period" },
+];
+
+describe("SegmentedFilter", () => {
+  it("renders bare-string options capitalized (back-compat)", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={STRING_OPTIONS} value="today" onChange={() => {}} />
+    ));
+    const radios = getAllByRole("radio");
+    expect(radios.map((r) => r.textContent)).toEqual(["today", "week", "month"]);
+    expect(radios[0].getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("renders object options with an explicit label", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={OBJECT_OPTIONS} value="table" onChange={() => {}} />
+    ));
+    const radios = getAllByRole("radio");
+    expect(radios.map((r) => r.textContent)).toEqual(["Table", "Calendar"]);
+  });
+
+  it("emits the clicked value on an enabled segment", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={OBJECT_OPTIONS} value="table" onChange={onChange} />
+    ));
+    fireEvent.click(getAllByRole("radio")[1]);
+    expect(onChange).toHaveBeenCalledWith("calendar");
+  });
+
+  it("no-ops a click on a disabled segment", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={onChange} />
+    ));
+    fireEvent.click(getAllByRole("radio")[1]);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("exposes aria-disabled and the disabledNote via title + sr-only text", () => {
+    const { getAllByRole, getByText } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={() => {}} />
+    ));
+    const disabledRadio = getAllByRole("radio")[1];
+    expect(disabledRadio.getAttribute("aria-disabled")).toBe("true");
+    expect(disabledRadio.getAttribute("title")).toBe("Unavailable for this staff type");
+    expect(getByText("Unavailable for this staff type").className).toContain("sr-only");
+  });
+
+  it("does not set aria-disabled on enabled segments", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={() => {}} />
+    ));
+    expect(getAllByRole("radio")[0].getAttribute("aria-disabled")).toBe("false");
+  });
+
+  it("pulls disabled segments out of tab order", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={() => {}} />
+    ));
+    expect(getAllByRole("radio")[1].getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("ArrowRight skips a disabled segment and selects the next enabled one", () => {
+    const onChange = vi.fn();
+    const { container } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={onChange} />
+    ));
+    fireEvent.keyDown(container.querySelector('[role="radiogroup"]')!, { key: "ArrowRight" });
+    expect(onChange).toHaveBeenCalledWith("fixed");
+  });
+
+  it("ArrowLeft wraps past a disabled segment to the previous enabled one", () => {
+    const onChange = vi.fn();
+    const { container } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={onChange} />
+    ));
+    fireEvent.keyDown(container.querySelector('[role="radiogroup"]')!, { key: "ArrowLeft" });
+    expect(onChange).toHaveBeenCalledWith("fixed");
+  });
+
+  it("End lands on the last enabled segment even if the last option is disabled", () => {
+    const onChange = vi.fn();
+    const trailingDisabled: SegmentedFilterOption[] = [
+      { value: "a", label: "A" },
+      { value: "b", label: "B" },
+      { value: "c", label: "C", disabled: true },
+    ];
+    const { container } = render(() => (
+      <SegmentedFilter options={trailingDisabled} value="a" onChange={onChange} />
+    ));
+    fireEvent.keyDown(container.querySelector('[role="radiogroup"]')!, { key: "End" });
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+});

package/src/components/base/SegmentedFilter.tsx

@@ -2,8 +2,13 @@ import { For, type JSX } from "solid-js";
 
 /** 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
- *  label that is NOT capitalized (for buckets or other non-status toggles). */
-export type SegmentedFilterOption = string | { value: string; label: string };
+ *  label that is NOT capitalized (for buckets or other non-status toggles).
+ *  `disabled` mutes the segment and pulls it out of roving arrow-key nav;
+ *  `disabledNote` (shown only when disabled) explains why via title + sr-only
+ *  text, since a muted, unclickable control is otherwise unexplained. */
+export type SegmentedFilterOption =
+  | string
+  | { value: string; label: string; disabled?: boolean; disabledNote?: string };
 
 interface SegmentedFilterProps {
   /** The available segments, left to right. */
@@ -29,19 +34,28 @@ interface SegmentedFilterProps {
 export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Element {
   const buttonRefs: (HTMLButtonElement | undefined)[] = [];
   const optionOf = (o: SegmentedFilterOption) =>
-    typeof o === "string" ? { value: o, label: o, capitalize: true } : { ...o, capitalize: false };
+    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 };
 
   const currentIndex = () => {
     const i = props.options.findIndex((o) => optionOf(o).value === props.value);
     return i >= 0 ? i : 0;
   };
 
-  const selectByIndex = (idx: number) => {
+  // Roving nav must skip disabled segments while preserving the requested
+  // direction (Home/End pass direction 1 since idx is already the boundary);
+  // a full lap finding no enabled option is the only way this doesn't move.
+  const selectByIndex = (idx: number, direction: 1 | -1 = 1) => {
     const list = props.options;
     if (list.length === 0) return;
-    const wrapped = ((idx % list.length) + list.length) % list.length;
-    props.onChange(optionOf(list[wrapped]).value);
-    buttonRefs[wrapped]?.focus();
+    for (let step = 0, cursor = idx; step < list.length; step++, cursor += direction) {
+      const wrapped = ((cursor % list.length) + list.length) % list.length;
+      if (optionOf(list[wrapped]).disabled) continue;
+      props.onChange(optionOf(list[wrapped]).value);
+      buttonRefs[wrapped]?.focus();
+      return;
+    }
   };
 
   const onKeyDown = (e: KeyboardEvent) => {
@@ -49,20 +63,20 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
       case "ArrowRight":
       case "ArrowDown":
         e.preventDefault();
-        selectByIndex(currentIndex() + 1);
+        selectByIndex(currentIndex() + 1, 1);
         break;
       case "ArrowLeft":
       case "ArrowUp":
         e.preventDefault();
-        selectByIndex(currentIndex() - 1);
+        selectByIndex(currentIndex() - 1, -1);
         break;
       case "Home":
         e.preventDefault();
-        selectByIndex(0);
+        selectByIndex(0, 1);
         break;
       case "End":
         e.preventDefault();
-        selectByIndex(props.options.length - 1);
+        selectByIndex(props.options.length - 1, -1);
         break;
     }
   };
@@ -78,25 +92,46 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
         {(o, i) => {
           const opt = optionOf(o);
           const selected = () => props.value === opt.value;
-          const isTabStop = () => selected() || (!props.value && i() === 0);
+          // Default tab stop falls to the first enabled option when nothing
+          // is selected yet, so an all-disabled-first row is still reachable.
+          const firstEnabledIndex = () => {
+            const idx = props.options.findIndex((candidate) => !optionOf(candidate).disabled);
+            return idx >= 0 ? idx : 0;
+          };
+          const isTabStop = () => selected() || (!props.value && i() === firstEnabledIndex());
+          const noteId = `${props.testIdPrefix ?? "segmented"}-${opt.value}-note`;
           return (
             <button
               ref={(el) => (buttonRefs[i()] = el)}
               type="button"
               role="radio"
               aria-checked={selected()}
-              tabIndex={isTabStop() ? 0 : -1}
+              aria-disabled={opt.disabled}
+              aria-describedby={opt.disabled && opt.disabledNote ? noteId : undefined}
+              title={opt.disabled ? opt.disabledNote : undefined}
+              tabIndex={opt.disabled ? -1 : isTabStop() ? 0 : -1}
               data-testid={props.testIdPrefix ? `${props.testIdPrefix}-${opt.value}` : undefined}
-              onClick={() => props.onChange(opt.value)}
-              class="px-3 py-1.5 text-xs transition-colors cursor-pointer"
+              onClick={() => {
+                if (opt.disabled) return;
+                props.onChange(opt.value);
+              }}
+              class="px-3 py-1.5 text-xs transition-colors"
               classList={{
                 capitalize: opt.capitalize,
-                "bg-[var(--ks-accent,#fbbf24)]/20 text-[var(--ks-accent,#fbbf24)]": selected(),
+                "cursor-not-allowed": opt.disabled,
+                "cursor-pointer": !opt.disabled,
+                "bg-[var(--ks-accent,#fbbf24)]/20 text-[var(--ks-accent,#fbbf24)]": selected() && !opt.disabled,
+                "text-[var(--ks-fg-subtle,#71717a)]": opt.disabled,
                 "text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]":
-                  !selected(),
+                  !selected() && !opt.disabled,
               }}
             >
               {opt.label}
+              {opt.disabled && opt.disabledNote ? (
+                <span id={noteId} class="sr-only">
+                  {opt.disabledNote}
+                </span>
+              ) : null}
             </button>
           );
         }}

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

@@ -118,6 +118,45 @@ describe("FlowGraph", () => {
     expect(canvas.getByTestId("c-svg").getAttribute("width")).toBe("100%");
   });
 
+  // Regression for a class-name-only token audit missing an attribute: the
+  // marker <path> fill and .ksui-fg-card background/border are SVG/CSS-in-JS
+  // strings, not Tailwind classes, so a scan that only greps class names for
+  // bare rgba()/hex literals walks right past them. jsdom doesn't compute
+  // SVG presentation-attribute styles, so this asserts on the rendered `fill`
+  // attribute plus the injected <style> source — both must route through the
+  // var(--ksui-fg-*/--ks-*) chain, never a bare rgba(255,255,255,...) literal.
+  it("routes the arrowhead marker fill and card background through CSS custom props, not a bare literal", async () => {
+    // injectCSS dedupes per-process (module-level Set in utils/inject-css),
+    // so a PRIOR test's render already consumed the injection — reset the
+    // module registry and re-import fresh so this test's render leaves an
+    // inspectable <style> tag regardless of suite order.
+    vi.resetModules();
+    const { default: FreshFlowGraph } = await import("./FlowGraph");
+
+    const { container } = render(() => (
+      <FreshFlowGraph
+        testId="fg"
+        nodes={[{ id: "a", label: "A" }, { id: "b", label: "B" }]}
+        edges={[{ from: "a", to: "b" }]}
+      />
+    ));
+
+    const markerPath = container.querySelector("marker#ksui-fg-arrow path");
+    const fill = markerPath?.getAttribute("fill") ?? "";
+    expect(fill).toMatch(/^var\(--ksui-fg-edge,/);
+    expect(fill).not.toMatch(/rgba\(\s*255\s*,\s*255\s*,\s*255/);
+
+    // jsdom can't compute SVG/CSS custom-property values, so assert on the
+    // injected <style> tag's rendered source instead of a computed style.
+    const styleEl = document.getElementById("ksui-flow-graph-style");
+    const css = styleEl?.textContent ?? "";
+    expect(css).toContain(".ksui-fg-card{");
+    const cardRule = css.slice(css.indexOf(".ksui-fg-card{"));
+    expect(cardRule).toMatch(/background:var\(--ksui-fg-card,/);
+    expect(cardRule).toMatch(/border:1px solid var\(--ksui-fg-node-border,/);
+    expect(css).not.toMatch(/rgba\(\s*255\s*,\s*255\s*,\s*255/);
+  });
+
   it("animates edges with the flow class only when animated", () => {
     const { container } = render(() => (
       <FlowGraph