@kahitsan/ksui 0.29.1 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.29.1",
+  "version": "0.31.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/Button.tsx

@@ -73,6 +73,10 @@ const styles: Record<string, string> = {
 
 export type ButtonIntent = "primary" | "danger" | "secondary";
 export type ButtonVariant = "clip1" | "clip2" | "ghost" | "link";
+/** "md" (default) preserves the original px-4/py-2/text-sm footprint everywhere
+ *  it's already used. "sm" is for dense contexts — e.g. a DataTable row action
+ *  — where the default footprint reads as oversized against compact rows. */
+export type ButtonSize = "sm" | "md";
 
 export interface ButtonProps {
   /** Element / component to render as (defaults to "button"). Intentionally
@@ -83,6 +87,7 @@ export interface ButtonProps {
   as?: any;
   intent?: ButtonIntent;
   variant?: ButtonVariant;
+  size?: ButtonSize;
   noRipple?: boolean;
   noScanline?: boolean;
   noGlow?: boolean;
@@ -164,17 +169,17 @@ interface VariantConfig {
 const buttonVariantConfig: Record<ButtonVariant, VariantConfig> = {
   clip1: {
     effects: ["clip-top-left-bottom-right"],
-    baseClasses: "px-4 py-2 border",
+    baseClasses: "border",
     overrideType: false,
   },
   clip2: {
     effects: ["clip-top-right-bottom-left"],
-    baseClasses: "px-4 py-2 border",
+    baseClasses: "border",
     overrideType: false,
   },
   ghost: {
     effects: [],
-    baseClasses: "px-4 py-2 bg-transparent border-transparent hover:bg-current/10 hover:border-transparent",
+    baseClasses: "bg-transparent border-transparent hover:bg-current/10 hover:border-transparent",
     overrideType: true,
   },
   link: {
@@ -185,6 +190,16 @@ const buttonVariantConfig: Record<ButtonVariant, VariantConfig> = {
   },
 };
 
+// Padding/text/gap live here (not in variantConfig) so a variant's padding is
+// never in the same class-string as size's — `cn()` is a plain join with no
+// tailwind-merge dedup, so two conflicting padding utilities would silently
+// race on Tailwind's generated CSS order instead of on usage order. `link` is
+// always unpadded regardless of size (see buttonVariantConfig.link).
+const buttonSizeConfig: Record<ButtonSize, { padding: string; text: string; gap: string }> = {
+  md: { padding: "px-4 py-2", text: "text-sm", gap: "gap-2" },
+  sm: { padding: "px-2.5 py-1", text: "text-xs", gap: "gap-1.5" },
+};
+
 interface Ripple {
   id: number;
   x: number;
@@ -201,6 +216,7 @@ const Button = (props: ButtonProps): JSX.Element => {
       as: "button" as ButtonProps["as"],
       intent: "primary" as ButtonIntent,
       variant: "clip1" as ButtonVariant,
+      size: "md" as ButtonSize,
       noRipple: false,
       noScanline: false,
       noGlow: false,
@@ -214,6 +230,7 @@ const Button = (props: ButtonProps): JSX.Element => {
     "as",
     "intent",
     "variant",
+    "size",
     "noRipple",
     "noScanline",
     "noGlow",
@@ -238,6 +255,7 @@ const Button = (props: ButtonProps): JSX.Element => {
   const variantConfig = createMemo(
     () => buttonVariantConfig[local.variant as ButtonVariant] || buttonVariantConfig.clip1,
   );
+  const sizeConfig = createMemo(() => buttonSizeConfig[local.size as ButtonSize] || buttonSizeConfig.md);
 
   const hasRipple = createMemo(() => {
     if (local.noRipple) return false;
@@ -288,15 +306,22 @@ const Button = (props: ButtonProps): JSX.Element => {
 
   const classes = createMemo(() => {
     const coreClasses =
-      "select-none inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus:outline-none text-sm rounded";
+      "select-none inline-flex items-center justify-center font-medium transition-all duration-200 focus:outline-none rounded";
     const textColor = intentConfig().textColor;
     const backgroundClasses = variantConfig().overrideType
       ? ""
       : `${intentConfig().background} ${intentConfig().hover}`;
     const variantClasses = variantConfig().baseClasses;
+    // link is always unpadded (baseClasses carries its own "px-0 py-0") but
+    // still takes text/gap sizing; every other variant takes padding too.
+    const sizeClasses =
+      local.variant === "link"
+        ? `${sizeConfig().text} ${sizeConfig().gap}`
+        : `${sizeConfig().padding} ${sizeConfig().text} ${sizeConfig().gap}`;
 
     return cn(
       coreClasses,
+      sizeClasses,
       textColor,
       backgroundClasses,
       variantClasses,

package/src/components/base/DataTable.tsx

@@ -66,7 +66,7 @@ const STYLE_ID = "ksui-datatable-style";
 // Full list of overridable vars (default = host value):
 //   --ksui-dt-card-bg      outer card background
 //                          (host `.card-bg`: linear-gradient(135deg,#0f0f0f,#1a1a1a))
-//   --ksui-dt-radius       outer card / control corner radius   (0.5rem)
+//   --ksui-dt-radius       outer card / control corner radius   (0.625rem)
 //   --ksui-dt-border       card / header / footer / control border (zinc-800/50, rgba(39,39,42,0.5))
 //   --ksui-dt-row-border   row divider + expansion-row top border (zinc-800/30, rgba(39,39,42,0.3))
 //   --ksui-dt-control-bg   filter button / menu / select / search / show-more bg (zinc-900, #18181b)
@@ -84,10 +84,21 @@ const STYLE_ID = "ksui-datatable-style";
 //   --ksui-dt-accent       active accent text: active pager num / show-more hover (amber-400, #fbbf24)
 //   --ksui-dt-accent-bg    active pager num bg (amber-600/20, rgba(217,119,6,0.2))
 //   --ksui-dt-accent-border focus/hover accent border: search focus, show-more hover (amber-500/40, rgba(245,158,11,0.4))
+//   --ksui-dt-good         positive-status badge text, e.g. "Active" (emerald-400, #34d399)
+//   --ksui-dt-good-bg      positive-status badge bg (emerald-400/14, rgba(52,211,153,0.14))
+//   --ksui-dt-danger       negative-status badge text, e.g. "Overdue"/"Expired" (red-400, #f87171)
+//   --ksui-dt-danger-bg    negative-status badge bg (red-400/14, rgba(248,113,113,0.14))
+//   --ksui-dt-thead-bg     header-row tint, layered over card-bg to set it apart from data rows (white/3%, rgba(255,255,255,0.03))
+//
+// `.ksui-datatable-td-num` / `.ksui-datatable-th-num` (mono, tabular-nums,
+// right-aligned, nowrap) and `.ksui-datatable-badge` (+ `-ok` / `-warn` /
+// `-danger` modifiers, using the vars above) are opt-in utility classes a
+// consumer passes via a column's `className` — DataTable itself never
+// infers column semantics from data.
 //
 const DATATABLE_CSS = `
-.ksui-datatable{background:var(--ksui-dt-card-bg,linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%));border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));border-radius:var(--ksui-dt-radius,0.5rem);color:var(--ksui-dt-fg,#e4e4e7);}
-.ksui-datatable-header{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:1rem;}
+.ksui-datatable{background:var(--ksui-dt-card-bg,linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%));border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));border-radius:var(--ksui-dt-radius,0.625rem);color:var(--ksui-dt-fg,#e4e4e7);box-shadow:0 1px 2px rgba(0,0,0,0.3),0 8px 20px -10px rgba(0,0,0,0.5);}
+.ksui-datatable-header{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:0.75rem 0.875rem;}
 .ksui-datatable-filters-inline{display:none;flex:1 1 0%;}
 .ksui-datatable-filters-mobile{display:block;flex:1 1 0%;}
 @media (min-width:768px){.ksui-datatable-filters-inline{display:block;}.ksui-datatable-filters-mobile{display:none;}}
@@ -105,9 +116,10 @@ const DATATABLE_CSS = `
 .ksui-datatable-search-input:focus{border-color:var(--ksui-dt-accent-border,rgba(245,158,11,0.4));}
 @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.875rem;line-height:1.25rem;border-collapse:collapse;}
-.ksui-datatable-thead{border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-th{padding:0.75rem 1rem;}
+.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,rgba(39,39,42,0.5));background:var(--ksui-dt-thead-bg,rgba(255,255,255,0.03));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,#71717a);}
+.ksui-datatable-th{padding:0.5625rem 0.875rem;background:var(--ksui-dt-thead-bg,rgba(255,255,255,0.03));white-space:nowrap;}
+.ksui-datatable-th-num{text-align:right;}
 .ksui-datatable-th-sortable{cursor:pointer;transition:color 0.15s ease;}
 .ksui-datatable-th-sortable:hover{color:var(--ksui-dt-text-strong,#d4d4d8);}
 .ksui-datatable-th-inner{display:inline-flex;align-items:center;}
@@ -116,13 +128,19 @@ const DATATABLE_CSS = `
 .ksui-datatable-row:hover{background-color:var(--ksui-dt-row-hover,rgba(39,39,42,0.5));}
 .ksui-datatable-row-clickable{cursor:pointer;}
 .ksui-datatable-row-clickable:active{background-color:var(--ksui-dt-row-active,rgba(39,39,42,0.7));}
-.ksui-datatable-td{padding:0.75rem 1rem;}
+.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,#d4d4d8);}
+.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,#e4e4e7);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,#18181b);color:var(--ksui-dt-text,#a1a1aa);}
+.ksui-datatable-badge-ok{background:var(--ksui-dt-good-bg,rgba(52,211,153,0.14));color:var(--ksui-dt-good,#34d399);}
+.ksui-datatable-badge-warn{background:var(--ksui-dt-accent-bg,rgba(217,119,6,0.2));color:var(--ksui-dt-accent,#fbbf24);}
+.ksui-datatable-badge-danger{background:var(--ksui-dt-danger-bg,rgba(248,113,113,0.14));color:var(--ksui-dt-danger,#f87171);}
 .ksui-datatable-expansion-row{border-top:1px solid var(--ksui-dt-row-border,rgba(39,39,42,0.3));background-color:var(--ksui-dt-expansion-bg,rgba(9,9,11,0.4));}
 .ksui-datatable-expansion-td{padding:0;}
-.ksui-datatable-skeleton{height:1.25rem;width:100%;border-radius:0.25rem;background:var(--ksui-dt-skeleton,rgba(39,39,42,0.5));animation:ksuiDatatablePulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;}
+.ksui-datatable-skeleton{height:1rem;width:100%;border-radius:0.25rem;background:var(--ksui-dt-skeleton,rgba(39,39,42,0.5));animation:ksuiDatatablePulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;}
 @keyframes ksuiDatatablePulse{0%,100%{opacity:1;}50%{opacity:0.5;}}
 .ksui-datatable-empty{padding:3rem 1rem;text-align:center;color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:1rem;}
+.ksui-datatable-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:0.625rem 0.875rem;}
 .ksui-datatable-info{font-size:0.75rem;color:var(--ksui-dt-muted,#71717a);}
 .ksui-datatable-showmore{border-radius:0.5rem;border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-control-bg,#18181b);padding:0.5rem 1rem;font-size:0.75rem;font-weight:500;color:var(--ksui-dt-text-strong,#d4d4d8);transition:border-color 0.15s ease,color 0.15s ease;cursor:pointer;}
 .ksui-datatable-showmore:hover:not(:disabled){border-color:var(--ksui-dt-accent-border,rgba(245,158,11,0.4));color:var(--ksui-dt-accent,#fbbf24);}

package/src/components/base/StatusPill.tsx

@@ -1,89 +1,74 @@
-import { Show, type JSX } from "solid-js";
+import { type JSX } from "solid-js";
 
 export type StatusTone = "success" | "neutral" | "warning" | "danger" | "info";
 
 interface ToneClass {
   text: string;
-  /** Lighter background (default, the packages-style /10). */
+  /** Lighter background (default). */
   bg: string;
-  /** Heavier background (the clients/vouchers-style /20, used when solid). */
+  /** Heavier background, used when `solid` is set. */
   bgSolid: string;
-  border: string;
-  /** Fill color for the optional leading dot. */
-  dot: string;
 }
 
 // Module-private tone palette. The caller maps its own domain enum
 // (status / is_active / voucher state) to one of these tones and passes a
 // plain label; nothing domain-specific leaks into this atom.
+//
+// Flat tinted bg + text, no border — a borderless chip reads cleaner at the
+// compact sizes tables now use than the previous bordered pill did.
 const TONE_CLASS: Record<StatusTone, ToneClass> = {
   success: {
     text: "text-emerald-400",
     bg: "bg-emerald-500/10",
     bgSolid: "bg-emerald-500/20",
-    border: "border-emerald-400/40",
-    dot: "bg-emerald-400",
   },
   neutral: {
     text: "text-zinc-400",
     bg: "bg-zinc-800/60",
     bgSolid: "bg-zinc-700/40",
-    border: "border-zinc-600",
-    dot: "bg-zinc-400",
   },
   warning: {
     text: "text-amber-400",
     bg: "bg-amber-500/10",
     bgSolid: "bg-amber-500/20",
-    border: "border-amber-400/40",
-    dot: "bg-amber-400",
   },
   danger: {
     text: "text-red-400",
     bg: "bg-red-500/10",
     bgSolid: "bg-red-500/20",
-    border: "border-red-400/40",
-    dot: "bg-red-400",
   },
   info: {
     text: "text-blue-400",
     bg: "bg-blue-500/10",
     bgSolid: "bg-blue-500/20",
-    border: "border-blue-400/40",
-    dot: "bg-blue-400",
   },
 };
 
 interface StatusPillProps {
-  /** Text shown inside the pill (the caller's own label). */
+  /** Text shown inside the pill (the caller's own label), rendered as-is —
+   *  the caller decides case. */
   label: string;
   /** Domain-free tone selector. The caller maps its enum to one of these. */
   tone: StatusTone;
-  /** Render a leading filled dot in the tone's dot color. */
-  dot?: boolean;
-  /** Heavier /20 background (clients/vouchers style); default is the
-   *  lighter /10 background (packages style). */
+  /** Heavier /20 background; default is the lighter /10 background. */
   solid?: boolean;
   /** Extra classes on the pill wrapper. */
   class?: string;
   testId?: string;
 }
 
-// Single status-pill atom. Baseline is the uppercase, wide-tracked,
-// text-[10px] chip from the packages StatusPill. The optional dot covers the
-// clients is_active pill, and solid covers the heavier clients/vouchers
-// backgrounds. Domain enum -> tone + label mapping stays with the caller.
+// Single status-pill atom: a flat tinted-bg text chip, no border, no leading
+// dot, no forced case — the caller's label renders exactly as given. `solid`
+// switches to the heavier background. Domain enum -> tone + label mapping
+// stays with the caller.
 export default function StatusPill(props: StatusPillProps): JSX.Element {
   const tc = () => TONE_CLASS[props.tone];
   const bg = () => (props.solid ? tc().bgSolid : tc().bg);
   return (
     <span
       data-testid={props.testId}
-      class={`inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded border uppercase tracking-wider ${tc().text} ${tc().border} ${bg()} ${props.class ?? ""}`}
+      class={`inline-flex items-center text-xs px-1.5 py-0.5 rounded ${tc().text} ${bg()} ${props.class ?? ""}`}
     >
-      <Show when={props.dot}>
-        <span class={`h-1.5 w-1.5 rounded-full ${tc().dot}`} aria-hidden="true" />
-      </Show>
       {props.label}
     </span>
   );

package/src/components/composite/resource/cells.tsx

@@ -31,7 +31,7 @@ export function renderCell(
     case "status": {
       const active = Boolean(raw);
       const arm = active ? r.active : r.inactive;
-      return <StatusPill label={arm.label} tone={arm.tone} dot solid />;
+      return <StatusPill label={arm.label} tone={arm.tone} solid />;
     }
     case "text":
     default: {

package/src/index.ts

@@ -200,8 +200,9 @@ export type { ObjectUrlOptions } from "./utils/object-url-resource";
 export {
   createPendingFile,
   revokePendingFile,
+  uploadPendingFiles,
 } from "./utils/pending-file";
-export type { PendingFile } from "./utils/pending-file";
+export type { PendingFile, UploadPendingFilesOptions } from "./utils/pending-file";
 
 export { useAccountsIndex, resolveAccount, resolveAccountName } from "./utils/accounts-index";
 

package/src/utils/pending-file.test.ts

@@ -0,0 +1,59 @@
+// uploadPendingFiles: per-file best-effort POST to the transactions plugin's
+// standard attachment route, returning the names that failed.
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { uploadPendingFiles, type PendingFile } from "./pending-file";
+
+function pf(name: string): PendingFile {
+  return { id: name, file: new File(["x"], name), previewUrl: null };
+}
+
+describe("uploadPendingFiles", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("POSTs each file to the transaction's attachments route with credentials included", async () => {
+    const fetchMock = vi.fn().mockResolvedValue({ ok: true });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const failed = await uploadPendingFiles(42, [pf("receipt.jpg")]);
+
+    expect(failed).toEqual([]);
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/transactions/42/attachments",
+      expect.objectContaining({ method: "POST", credentials: "include" })
+    );
+  });
+
+  it("layers caller-supplied headers onto the request", async () => {
+    const fetchMock = vi.fn().mockResolvedValue({ ok: true });
+    vi.stubGlobal("fetch", fetchMock);
+
+    await uploadPendingFiles(42, [pf("receipt.jpg")], {
+      headers: { "X-Workspace-Id": "7" },
+    });
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/transactions/42/attachments",
+      expect.objectContaining({ headers: { "X-Workspace-Id": "7" } })
+    );
+  });
+
+  it("collects failed file names without aborting the remaining uploads", async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({ ok: false })
+      .mockRejectedValueOnce(new Error("network error"))
+      .mockResolvedValueOnce({ ok: true });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const failed = await uploadPendingFiles(42, [
+      pf("a.jpg"),
+      pf("b.jpg"),
+      pf("c.jpg"),
+    ]);
+
+    expect(failed).toEqual(["a.jpg", "b.jpg"]);
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
+});

package/src/utils/pending-file.ts

@@ -1,7 +1,7 @@
 // Pre-upload pending file state — a file the user has picked or pasted but not
-// yet uploaded. The two plugins that support attachment upload (transactions,
-// timesheets/payroll) both defined this locally; extracted here so they share
-// one canonical type + helpers and avoid drift.
+// yet uploaded. The plugins that support attachment upload (transactions,
+// counter, timesheets/payroll) each defined this locally; extracted here so
+// they share one canonical type + helpers and avoid drift.
 
 /** A file the user picked or pasted but hasn't been uploaded yet. */
 export interface PendingFile {
@@ -29,3 +29,40 @@ export function createPendingFile(file: File): PendingFile {
 export function revokePendingFile(pf: PendingFile): void {
   if (pf.previewUrl) URL.revokeObjectURL(pf.previewUrl);
 }
+
+/** Extra fetch() init the caller needs layered onto every upload request —
+ *  e.g. timesheets/payroll's X-Workspace-Id header for the fresh-login case
+ *  where the host's fetch monkey-patch has no localStorage fallback yet. */
+export interface UploadPendingFilesOptions {
+  headers?: Record<string, string>;
+}
+
+/** Upload each pending file to the transactions plugin's standard multipart
+ *  POST /:id/attachments S3 route — the one place attachment bytes are ever
+ *  written, whichever plugin's UI collected them. Best-effort per file: a
+ *  failed upload doesn't stop the rest. Returns the file names that failed,
+ *  in the file's own `name` (not a caller-relabeled `file_name`), for the
+ *  caller to surface as a soft error. */
+export async function uploadPendingFiles(
+  transactionId: number,
+  files: PendingFile[],
+  opts: UploadPendingFilesOptions = {}
+): Promise<string[]> {
+  const failed: string[] = [];
+  for (const pf of files) {
+    try {
+      const fd = new FormData();
+      fd.append("file", pf.file, pf.file.name);
+      const res = await fetch(`/api/transactions/${transactionId}/attachments`, {
+        method: "POST",
+        credentials: "include",
+        headers: opts.headers,
+        body: fd,
+      });
+      if (!res.ok) failed.push(pf.file.name);
+    } catch {
+      failed.push(pf.file.name);
+    }
+  }
+  return failed;
+}