@kahitsan/ksui 0.36.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.36.0",
+  "version": "0.37.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/ProgressBar.tsx

@@ -32,6 +32,10 @@ const styles: Record<string, string> = {
   "animate-shimmer": "ks-progress-shimmer",
 };
 
+// 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 interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
   progress: number;
   icon?: Component<{ size: number; class?: string }>;
@@ -45,6 +49,9 @@ export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
   // LiveTimer push the live countdown into the right slot while the
   // total label sits on the left.
   rightLabel?: string;
+  // Explicit color signal — class-substring sniffing broke when COLOR_AMBER
+  // was tokenized (4f6ed40 dropped the literal "amber" from the class).
+  color?: ProgressColor;
   class?: string;
 }
 
@@ -163,6 +170,7 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
     "position",
     "hidePercentage",
     "rightLabel",
+    "color",
     "class",
   ]);
 
@@ -184,7 +192,12 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
     return { progress: Math.max(0, Math.min(100, raw)), overflow: Math.max(0, raw - 100) };
   });
 
-  const colorInfo = createMemo(() => extractColorInfo(classProp() ?? ""));
+  const colorInfo = createMemo(() => {
+    // Explicit color wins; fall back to class-substring sniffing for back-compat
+    // with every caller that still drives color via a "text-red-400"-style class.
+    if (local.color) return COLOR_MAP[local.color];
+    return extractColorInfo(classProp() ?? "");
+  });
   const iconSize = createMemo(() => extractTextSize(classProp() ?? ""));
 
   const containerClasses = createMemo(() =>

package/src/components/composite/LiveTimer.tsx

@@ -11,7 +11,7 @@ import Play from "lucide-solid/icons/play";
 import AlertTriangle from "lucide-solid/icons/triangle-alert";
 import Check from "lucide-solid/icons/check";
 import Calendar from "lucide-solid/icons/calendar";
-import ProgressBar from "../base/ProgressBar";
+import ProgressBar, { type ProgressColor } from "../base/ProgressBar";
 
 export interface LiveTimerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class"> {
   // Core timing
@@ -354,6 +354,29 @@ const LiveTimer: Component<LiveTimerProps> = (props) => {
     return staticConfig().colorClass;
   });
 
+  // Mirrors colorClass's scenario logic but returns a COLOR_MAP key for
+  // ProgressBar's `color` prop — the class strings above were tokenized
+  // (4f6ed40) so the fill's class-substring sniff can no longer recover
+  // the hue. COMPLETED had no color substring even pre-tokenization, so it
+  // relies on the explicit prop rather than ever reaching the back-compat path.
+  const colorName = createMemo<ProgressColor>(() => {
+    switch (scenario()) {
+      case SCENARIO_COUNTDOWN_TIMER: {
+        const p = progress();
+        return p <= 25 ? "green" : p <= 75 ? "amber" : "red";
+      }
+      case SCENARIO_COUNTDOWN_TO_START:
+        return "blue";
+      case SCENARIO_OPEN_TIMER:
+        return "green";
+      case SCENARIO_OVERDUE:
+        return "purple";
+      case SCENARIO_COMPLETED:
+      default:
+        return "slate";
+    }
+  });
+
   const finalClass = createMemo(() => {
     const user = local.class ?? "";
     if (user.includes("border-") && user.includes("text-")) return user;
@@ -410,6 +433,7 @@ const LiveTimer: Component<LiveTimerProps> = (props) => {
           position={staticConfig().position}
           hidePercentage={resolvedHidePercentage()}
           shimmer={staticConfig().shimmer}
+          color={colorName()}
           class={finalClass()}
           {...others}
         />
@@ -424,6 +448,7 @@ const LiveTimer: Component<LiveTimerProps> = (props) => {
         hidePercentage
         rightLabel={statusLabel()}
         shimmer={staticConfig().shimmer}
+        color={colorName()}
         class={finalClass()}
         {...others}
       />

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

@@ -0,0 +1,51 @@
+// fetchUrl prop threading — the default stays the vouchers plugin's own API so
+// existing consumers are unaffected; a consumer without vouchers.view can
+// point the picker at a peer proxy route with the same response shape.
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, waitFor } from "@solidjs/testing-library";
+import VoucherPicker from "./VoucherPicker";
+
+function mockFetchOnce(): typeof fetch {
+  const impl = vi.fn(async () => ({
+    ok: true,
+    json: async () => ({ data: [] }),
+  })) as unknown as typeof fetch;
+  vi.stubGlobal("fetch", impl);
+  return impl;
+}
+
+describe("VoucherPicker fetchUrl", () => {
+  it("defaults to the vouchers plugin's own API when fetchUrl is omitted", async () => {
+    const fetchMock = mockFetchOnce();
+    const { getByTestId } = render(() => (
+      <VoucherPicker selected={null} onChange={vi.fn()} subtotal={100} packageIds={[]} />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/vouchers?status=active&limit=200",
+      expect.objectContaining({ credentials: "include" }),
+    );
+  });
+
+  it("fetches the overridden URL when fetchUrl is provided", async () => {
+    const fetchMock = mockFetchOnce();
+    const { getByTestId } = render(() => (
+      <VoucherPicker
+        selected={null}
+        onChange={vi.fn()}
+        subtotal={100}
+        packageIds={[]}
+        fetchUrl="/api/counter/vouchers"
+      />
+    ));
+    fireEvent.click(getByTestId("voucher-picker-trigger"));
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/counter/vouchers",
+      expect.objectContaining({ credentials: "include" }),
+    );
+  });
+});

package/src/components/composite/VoucherPicker.tsx

@@ -1,9 +1,11 @@
 // Vendored into plugin remotes.
 //
-// Cross-plugin picker: fetches the SIBLING vouchers plugin's public API at
-// /api/vouchers and degrades gracefully: when the vouchers plugin isn't
-// deployed the popup shows a "couldn't load" notice and the sale records with
-// no voucher (the manual-discount field stays available).
+// Cross-plugin picker: fetches vouchers over HTTP and degrades gracefully:
+// when the endpoint isn't reachable the popup shows a "couldn't load" notice
+// and the sale records with no voucher (the manual-discount field stays
+// available). Defaults to the vouchers plugin's own public API
+// (/api/vouchers); `fetchUrl` overrides it for a consumer that reaches
+// vouchers through a peer proxy route instead (same response shape required).
 
 import { Portal } from "solid-js/web";
 import { createEffect, createMemo, createSignal, For, onCleanup, Show, type JSX } from "solid-js";
@@ -24,6 +26,8 @@ export interface VoucherOption {
   is_active: boolean;
 }
 
+const DEFAULT_FETCH_URL = "/api/vouchers?status=active&limit=200";
+
 interface VoucherPickerProps {
   selected: VoucherOption | null;
   onChange: (next: VoucherOption | null) => void;
@@ -31,6 +35,10 @@ interface VoucherPickerProps {
   packageIds: number[];
   disabled?: boolean;
   compact?: boolean;
+  /** Same-shape endpoint override (defaults to the vouchers plugin's own API) —
+   *  a consumer with no `vouchers.view` grant can point this at a peer proxy
+   *  route instead. */
+  fetchUrl?: string;
 }
 
 const POPUP_MAX_HEIGHT = 360;
@@ -105,7 +113,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
     const token = ++activeFetchToken;
     setLoading(true);
     setError(null);
-    fetch("/api/vouchers?status=active&limit=200", { credentials: "include" })
+    fetch(props.fetchUrl ?? DEFAULT_FETCH_URL, { credentials: "include" })
       .then((r) => {
         if (!r.ok)
           throw new Error(