@kahitsan/ksui 0.34.1 → 0.35.0

package/package.json

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