@pihanga2/shadcn 0.2.5 → 0.2.6

package/AGENT.building-cards.md

@@ -268,6 +268,93 @@ This string must match the `name` passed to `registerCardComponent` and the
 
 ### 2 — Define Props and Events (`*.types.ts`)
 
+> **Rule: Card Props must only contain basic data types.**
+>
+> All props in a `CardProps` type must be JSON-serialisable primitives
+> (`string`, `number`, `boolean`, `null`) or plain objects / arrays composed
+> exclusively of those primitives.  **Never put library interfaces, class
+> instances, or opaque objects (e.g. `StreamParser`, `Extension[]`, `RegExp`,
+> `Date`) directly in a props type.**  Pihanga serialises card state through
+> Redux; non-serialisable values break time-travel debugging, HMR, and the
+> playground.
+>
+> When a card genuinely needs a complex third-party value (a parser, a theme
+> extension, a set of keymaps…) use the **registry pattern** described below.
+
+#### Registry pattern for complex prop values
+
+1. **Create a module-level registry** (a plain `Map`) keyed by a `string`.
+2. **Export a `register*` function** so callers can inject their value before
+   mounting the card.
+3. **Use the string key as the prop** — the component looks the value up at
+   render time.
+
+**Example — `StreamParser` for the CodeMirror card:**
+
+```ts
+// codeMirror.types.ts  (public API)
+
+/** Keys are arbitrary caller-chosen strings; values are StreamParsers. */
+const streamParserRegistry = new Map<string, StreamParser<unknown>>();
+
+/** Call this once at app initialisation time, before the card is rendered. */
+export function registerStreamParser(key: string, parser: StreamParser<unknown>) {
+  streamParserRegistry.set(key, parser);
+}
+
+/** Internal — used only by the component. */
+export function resolveStreamParser(key: string): StreamParser<unknown> | undefined {
+  return streamParserRegistry.get(key);
+}
+
+export type CodeMirrorCardProps = {
+  value?: string;
+  readOnly?: boolean;
+  /**
+   * Key of a StreamParser previously registered with `registerStreamParser()`.
+   * @example
+   * import { python } from "@codemirror/legacy-modes/mode/python";
+   * registerStreamParser("python", python);
+   * CodeMirrorCard({ streamLanguage: "python", value: "print('hello')" });
+   */
+  streamLanguage?: string;    // ✅ plain string — not StreamParser<unknown>
+  extensionsKey?: string;     // ✅ plain string — not Extension[]
+};
+```
+
+```ts
+// At app initialisation (e.g. app.pihanga.ts or a dedicated setup file):
+import { python } from "@codemirror/legacy-modes/mode/python";
+import { registerStreamParser } from "@pihanga2/shadcn/codeMirror";
+
+registerStreamParser("python", python);
+```
+
+```tsx
+// codeMirror.component.tsx — look up at render time:
+import { resolveStreamParser } from "./codeMirror.types";
+
+const parser = props.streamLanguage
+  ? resolveStreamParser(props.streamLanguage)
+  : undefined;
+const extensions = parser ? [StreamLanguage.define(parser)] : [];
+```
+
+The same pattern applies to **`Extension[]`** or any other opaque type.
+Register a named bundle of extensions once; reference it by key in props.
+
+**Quick checklist:**
+
+| Prop value | Allowed directly in Props? | Alternative |
+|---|---|---|
+| `string`, `number`, `boolean` | ✅ | — |
+| Plain `Record<string, string>` | ✅ | — |
+| `StreamParser<T>`, `Extension` | ❌ | Registry pattern (string key) |
+| `RegExp` | ❌ | Pass `string`; compile inside component |
+| `Date` | ❌ | Pass ISO string; parse inside component |
+| React component / function | ❌ | Reference an existing card type string |
+
+
 A typical types file has five parts:
 
 #### a) Card declaration factory

package/AGENT.using-cards.md

@@ -336,6 +336,7 @@ Or activate everything at once: `import "@pihanga2/shadcn"`.
 | dialog | `/r/dialog` | ✅ | |
 | dropDownMenu | `/r/dropDownMenu` | ✅ | |
 | field | `/r/field` | ✅ | |
+| fileDrop | `/r/fileDrop` | ✅ | drag-and-drop file upload |
 | flexGrid | `/r/flexGrid` | ✅ | |
 | form | `/r/form` | ✅ | |
 | framework | `/r/framework` | ✅ | App root |
@@ -384,6 +385,18 @@ Full registry index: `https://ivcap-works.github.io/pihanga-shadcn/r/registry.js
 - `graphin`, `jsonViewer`, `markdownViewer`, `resizable` are not in the npm
   package — use the registry for those.
 - Point Tailwind at `node_modules/@pihanga2/shadcn/dist-lib` to scan classes.
+- **Import types from the card index, not deep sub-paths.**  The exports map
+  only exposes `@pihanga2/shadcn/cards/<card>` — every type from
+  `<card>.types.ts` is re-exported there.  Deep paths like
+  `@pihanga2/shadcn/cards/fileDrop/fileDrop.types` are blocked by Node/Vite:
+
+  ```ts
+  // ❌ Deep sub-path — blocked by exports map, even if the .d.ts exists on disk
+  import type {FileDropProps} from "@pihanga2/shadcn/cards/fileDrop/fileDrop.types";
+
+  // ✅ Correct — all types re-exported from the card index
+  import type {FileDropProps} from "@pihanga2/shadcn/cards/fileDrop";
+  ```
 
 **Both channels:**
 - After activation, app-wiring APIs (`registerCard`, `registerFramework`,
@@ -1187,3 +1200,37 @@ yarn alternative or Node version constraint.
 | No `yarn dlx` alternative documented | Added `yarn dlx shadcn@latest` as the yarn-compatible alternative in the distribution channels table, Channel 1 init step, and "Adding individual cards" commands |
 | No warning about npm 11 + Node 24 incompatibility | Added a prominent compatibility callout at the top of *Channel 1 — shadcn registry prerequisites*, with the `nvm use 22` workaround and the `yarn dlx` alternative |
 | "Notes for AI agents" section did not mention the `npx` breakage | Added a bullet noting that `npx` fails on npm 11 + Node 24 and that `yarn dlx shadcn@latest` is a drop-in replacement |
+
+### 2026-07 user feedback — `fileDrop` import fails from `@pihanga2/shadcn@0.2.0`
+
+Users on `@pihanga2/shadcn@0.2.0` reported two compounding errors when importing
+the `fileDrop` card:
+
+1. `./cards/fileDrop` was absent from the `exports` map in the published
+   `package.json` — Node/TypeScript/Vite block any unlisted sub-path even when
+   the file physically exists on disk.
+2. The `cards/fileDrop/` directory contained only `.d.ts` type stubs — no `.js`
+   runtime files — because `fileDrop` was type-stubbed before the `0.2.0` publish
+   and the build was never re-run to include it.
+
+**Resolution:** `@pihanga2/shadcn@0.2.5` ships `fileDrop` correctly (`.js` +
+`.d.ts` + exports map entry).  **Upgrade to `>=0.2.5`.**
+
+```sh
+npm install @pihanga2/shadcn@latest
+# or:
+yarn add @pihanga2/shadcn@latest
+```
+
+A second mistake was also identified: users attempted to import types from the
+deep sub-path `@pihanga2/shadcn/cards/fileDrop/fileDrop.types`, which is NOT
+listed in the exports map and is therefore blocked.  All types from `fileDrop.types`
+are re-exported from the card index — use the card index path instead (see
+*Notes for AI agents → npm channel* above).
+
+| Root cause | Fix applied |
+|---|---|
+| `fileDrop` added to `core-cards.json` after `@pihanga2/shadcn@0.2.0` was published; package not rebuilt | Fixed in `@pihanga2/shadcn@0.2.5` — `fileDrop` is now fully built and in the exports map |
+| `react-drag-drop-files` mislabelled in `vite.lib.config.ts` as an "excluded-card guard" dep instead of a legitimate runtime dep | Moved to the runtime deps section with clarifying comment |
+| `fileDrop` missing from the Available cards table | Added to table |
+| No documentation that deep sub-path imports (`/cards/fileDrop/fileDrop.types`) are blocked | Added explicit ❌/✅ example to *Notes for AI agents → npm channel* |

package/README.md

@@ -62,8 +62,9 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (35)
+## Included cards (39)
 
+- `avatar`
 - `badge`
 - `box`
 - `button`
@@ -71,6 +72,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `conditional`
 - `dataTable`
 - `dialog`
+- `drawer`
 - `dropDownMenu`
 - `field`
 - `fileDrop`
@@ -86,8 +88,10 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `modeToggle`
 - `navbarSearch`
 - `pageWithNavbar`
+- `pageWithNavbarMeta`
 - `pasteTarget`
 - `resizable`
+- `scrollbarWithAnnotations`
 - `select`
 - `slider`
 - `sliderValue`

package/cards/avatar/avatar.component.d.ts

@@ -0,0 +1,11 @@
+import { PiCardProps } from '@pihanga2/core';
+import { AvatarCardProps } from './avatar.types';
+import * as React from "react";
+/**
+ * `shad/avatar` card component.
+ *
+ * Renders a shadcn `<Avatar>` with an optional image and a text fallback.
+ * The avatar degrades gracefully: if `src` is absent or the image fails to
+ * load, the `fallback` initials are shown inside a muted circle.
+ */
+export declare const AvatarComponent: (props: PiCardProps<AvatarCardProps>) => React.ReactNode;

package/cards/avatar/avatar.component.js

@@ -0,0 +1,26 @@
+import { cn as e } from "../../lib/utils.js";
+import { Avatar as t, AvatarFallback as n, AvatarImage as r } from "../../components/ui/avatar.js";
+import "react";
+import "@pihanga2/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/cards/avatar/avatar.component.tsx
+var o = {
+	sm: "size-6 text-xs",
+	md: "size-8 text-xs",
+	lg: "size-12 text-sm",
+	xl: "size-16 text-base"
+}, s = (s) => {
+	let { src: c, alt: l = "", fallback: u, size: d = "md", className: f, cardName: p } = s;
+	return /* @__PURE__ */ a(t, {
+		className: e(o[d], f),
+		"data-pihanga": p,
+		children: [c && /* @__PURE__ */ i(r, {
+			src: c,
+			alt: l
+		}), /* @__PURE__ */ i(n, { children: u ?? l.slice(0, 2).toUpperCase() })]
+	});
+};
+//#endregion
+export { s as AvatarComponent };
+
+//# sourceMappingURL=avatar.component.js.map

package/cards/avatar/avatar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.component.js","names":[],"sources":["../../../src/cards/avatar/avatar.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"@/components/ui/avatar\";\nimport {cn} from \"@/lib/utils\";\nimport type {AvatarCardProps, AvatarSize} from \"./avatar.types\";\n\nconst SIZE_CLASS: Record<AvatarSize, string> = {\n  sm: \"size-6 text-xs\",\n  md: \"size-8 text-xs\",\n  lg: \"size-12 text-sm\",\n  xl: \"size-16 text-base\",\n};\n\n/**\n * `shad/avatar` card component.\n *\n * Renders a shadcn `<Avatar>` with an optional image and a text fallback.\n * The avatar degrades gracefully: if `src` is absent or the image fails to\n * load, the `fallback` initials are shown inside a muted circle.\n */\nexport const AvatarComponent = (\n  props: PiCardProps<AvatarCardProps>,\n): React.ReactNode => {\n  const {src, alt = \"\", fallback, size = \"md\", className, cardName} = props;\n\n  return (\n    <Avatar className={cn(SIZE_CLASS[size], className)} data-pihanga={cardName}>\n      {src && <AvatarImage src={src} alt={alt} />}\n      <AvatarFallback>\n        {fallback ?? alt.slice(0, 2).toUpperCase()}\n      </AvatarFallback>\n    </Avatar>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAM,IAAyC;CAC7C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GASa,KACX,MACoB;CACpB,IAAM,EAAC,QAAK,SAAM,IAAI,aAAU,UAAO,MAAM,cAAW,gBAAY;CAEpE,OACE,kBAAC,GAAD;EAAQ,WAAW,EAAG,EAAW,IAAO,CAAS;EAAG,gBAAc;YAAlE,CACG,KAAO,kBAAC,GAAD;GAAkB;GAAU;EAAM,CAAA,GAC1C,kBAAC,GAAD,EAAA,UACG,KAAY,EAAI,MAAM,GAAG,CAAC,EAAE,YAAY,EAC3B,CAAA,CACV;;AAEZ"}

package/cards/avatar/avatar.types.d.ts

@@ -0,0 +1,46 @@
+export declare const AVATAR_CARD = "shad/avatar";
+/**
+ * Avatar size tokens — map to Tailwind `size-*` utilities.
+ *
+ * | Value  | Tailwind   | px  |
+ * |--------|-----------|-----|
+ * | `"sm"` | `size-6`  | 24  |
+ * | `"md"` | `size-8`  | 32  |
+ * | `"lg"` | `size-12` | 48  |
+ * | `"xl"` | `size-16` | 64  |
+ */
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarCardProps = {
+    /**
+     * URL of the avatar image.
+     * When omitted or the image fails to load, `fallback` is shown instead.
+     */
+    src?: string;
+    /** Accessible alt text for the image. */
+    alt?: string;
+    /**
+     * Text rendered inside the fallback circle when no image is available.
+     * Typically one or two initials, e.g. `"JD"`.
+     */
+    fallback?: string;
+    /**
+     * Avatar diameter.
+     * @default "md"
+     */
+    size?: AvatarSize;
+    /** Additional Tailwind classes applied to the root `<span>` element. */
+    className?: string;
+};
+/**
+ * Factory function for declaring a `shad/avatar` card instance.
+ *
+ * ```ts
+ * import {ShadAvatar} from "@/cards/avatar";
+ *
+ * registerCard("myApp/userAvatar", ShadAvatar({
+ *   src: memo((s: AppState) => s.user.avatarUrl),
+ *   fallback: memo((s: AppState) => s.user.initials),
+ * }));
+ * ```
+ */
+export declare const ShadAvatar: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<AvatarCardProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/avatar/avatar.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/avatar/avatar.types.ts
+var t = "shad/avatar", n = e(t);
+//#endregion
+export { t as AVATAR_CARD, n as ShadAvatar };
+
+//# sourceMappingURL=avatar.types.js.map

package/cards/avatar/avatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.types.js","names":[],"sources":["../../../src/cards/avatar/avatar.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\n\nexport const AVATAR_CARD = \"shad/avatar\";\n\n/**\n * Avatar size tokens — map to Tailwind `size-*` utilities.\n *\n * | Value  | Tailwind   | px  |\n * |--------|-----------|-----|\n * | `\"sm\"` | `size-6`  | 24  |\n * | `\"md\"` | `size-8`  | 32  |\n * | `\"lg\"` | `size-12` | 48  |\n * | `\"xl\"` | `size-16` | 64  |\n */\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type AvatarCardProps = {\n  /**\n   * URL of the avatar image.\n   * When omitted or the image fails to load, `fallback` is shown instead.\n   */\n  src?: string;\n\n  /** Accessible alt text for the image. */\n  alt?: string;\n\n  /**\n   * Text rendered inside the fallback circle when no image is available.\n   * Typically one or two initials, e.g. `\"JD\"`.\n   */\n  fallback?: string;\n\n  /**\n   * Avatar diameter.\n   * @default \"md\"\n   */\n  size?: AvatarSize;\n\n  /** Additional Tailwind classes applied to the root `<span>` element. */\n  className?: string;\n};\n\n/**\n * Factory function for declaring a `shad/avatar` card instance.\n *\n * ```ts\n * import {ShadAvatar} from \"@/cards/avatar\";\n *\n * registerCard(\"myApp/userAvatar\", ShadAvatar({\n *   src: memo((s: AppState) => s.user.avatarUrl),\n *   fallback: memo((s: AppState) => s.user.initials),\n * }));\n * ```\n */\nexport const ShadAvatar = createCardDeclaration<AvatarCardProps>(AVATAR_CARD);\n"],"mappings":";;AAEA,IAAa,IAAc,eAoDd,IAAa,EAAuC,CAAW"}

package/cards/avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './avatar.types';

package/cards/avatar/index.js

@@ -0,0 +1,12 @@
+import { AvatarComponent as e } from "./avatar.component.js";
+import { AVATAR_CARD as t, ShadAvatar as n } from "./avatar.types.js";
+import { registerCardComponent as r } from "@pihanga2/core";
+//#region src/cards/avatar/index.ts
+r({
+	name: t,
+	component: e
+});
+//#endregion
+export { t as AVATAR_CARD, n as ShadAvatar };
+
+//# sourceMappingURL=index.js.map

package/cards/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/avatar/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\n\nimport {AvatarComponent} from \"./avatar.component\";\nimport {AVATAR_CARD} from \"./avatar.types\";\n\nexport * from \"./avatar.types\";\n\nregisterCardComponent({\n  name: AVATAR_CARD,\n  component: AvatarComponent,\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/badge/badge.component.js

@@ -1,14 +1,14 @@
-import { Badge as e } from "../../components/ui/badge.js";
-import { cn as t } from "../../lib/utils.js";
+import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../../components/ui/badge.js";
 import "react";
 import "@pihanga2/core";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/cards/badge/badge.component.tsx
 var r = (r) => {
 	let { label: i, variant: a = "secondary", className: o, cardName: s } = r;
-	return /* @__PURE__ */ n(e, {
+	return /* @__PURE__ */ n(t, {
 		variant: a,
-		className: t(o),
+		className: e(o),
 		"data-pihanga": s,
 		children: i
 	});

package/cards/codeMirror/codeMirror.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { CodeMirrorCardProps, CodeMirrorCardEvents } from './codeMirror.types';
+export declare const CodeMirrorComponent: (props: PiCardProps<CodeMirrorCardProps, CodeMirrorCardEvents>) => React.ReactNode;

package/cards/codeMirror/codeMirror.types.d.ts

@@ -0,0 +1,83 @@
+import { Extension } from '@codemirror/state';
+import { StreamParser } from '@codemirror/language';
+export declare const CODE_MIRROR_CARD = "code-mirror";
+export declare const CodeMirrorCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<CodeMirrorCardProps, S, CodeMirrorCardEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const CODE_MIRROR_ACTION: {
+    CHANGED: string;
+};
+export declare const onCodeMirrorChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ChangedEvent>) => void;
+/**
+ * Register a StreamParser under a caller-chosen key.
+ * Call this once at app initialisation time, before the card is first rendered.
+ *
+ * @example
+ * import { python } from "@codemirror/legacy-modes/mode/python";
+ * import { registerStreamParser } from "@pihanga2/shadcn/codeMirror";
+ * registerStreamParser("python", python);
+ */
+export declare function registerStreamParser(key: string, parser: StreamParser<unknown>): void;
+/** @internal — used by the component only. */
+export declare function resolveStreamParser(key: string): StreamParser<unknown> | undefined;
+/**
+ * Register a bundle of CodeMirror 6 extensions (themes, linters, keymaps, …)
+ * under a caller-chosen key.
+ * Call this once at app initialisation time, before the card is first rendered.
+ *
+ * @example
+ * import { oneDark } from "@codemirror/theme-one-dark";
+ * import { registerExtensions } from "@pihanga2/shadcn/codeMirror";
+ * registerExtensions("oneDark", [oneDark]);
+ */
+export declare function registerExtensions(key: string, exts: Extension[]): void;
+/** @internal — used by the component only. */
+export declare function resolveExtensions(key: string): Extension[] | undefined;
+export type CodeMirrorCardProps = {
+    /** The code content to display or edit. */
+    value?: string;
+    /** When true the editor is read-only. Default: false. */
+    readOnly?: boolean;
+    /**
+     * Key of a StreamParser previously registered with `registerStreamParser()`.
+     * Props must be JSON-serialisable — pass the string key, not the parser itself.
+     *
+     * @example
+     * import { python } from "@codemirror/legacy-modes/mode/python";
+     * registerStreamParser("python", python);
+     * CodeMirrorCard({ streamLanguage: "python", value: "print('hello')" });
+     */
+    streamLanguage?: string;
+    /**
+     * Key of an Extension bundle previously registered with `registerExtensions()`.
+     * Props must be JSON-serialisable — pass the string key, not the Extension objects.
+     *
+     * @example
+     * import { oneDark } from "@codemirror/theme-one-dark";
+     * registerExtensions("oneDark", [oneDark]);
+     * CodeMirrorCard({ extensionsKey: "oneDark", ... });
+     */
+    extensionsKey?: string;
+    /**
+     * CodeMirror editor theme — "light" or "dark".
+     * For a custom Extension-based theme, register it via `registerExtensions()`
+     * and pass its key using the `extensions` prop instead.
+     */
+    theme?: "light" | "dark";
+    /** Show line numbers in the gutter. Default: true. */
+    lineNumbers?: boolean;
+    /**
+     * CSS height of the editor.  Use "auto" to grow with content or a fixed
+     * value such as "400px".  Default: "auto".
+     */
+    height?: string;
+    /** Additional CSS class applied to the outer wrapper div. */
+    className?: string;
+};
+export type ChangedEvent = {
+    /** The updated editor content after each change. */
+    value: string;
+};
+export type CodeMirrorCardEvents = {
+    onChanged: ChangedEvent;
+};

package/cards/codeMirror/index.d.ts

@@ -0,0 +1 @@
+export * from './codeMirror.types';

package/cards/dataTable/dataTable.component.js

@@ -1,27 +1,27 @@
-import { Badge as e } from "../../components/ui/badge.js";
-import { cn as t } from "../../lib/utils.js";
+import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../../components/ui/badge.js";
 import { Table as n, TableBody as r, TableCaption as i, TableCell as a, TableHead as o, TableHeader as s, TableRow as c } from "../../components/ui/table.js";
 import l, { useMemo as u, useState as d } from "react";
 import { Card as f } from "@pihanga2/core";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { Check as h, ChevronDown as g, ChevronRight as _, ChevronUp as v, ChevronsUpDown as y, X as b } from "lucide-react";
 //#region src/cards/dataTable/dataTable.component.tsx
-function ee(t, n, r) {
+function ee(e, n, r) {
 	if (n == null) return null;
-	switch (t.type) {
+	switch (e.type) {
 		case "number": {
-			let e = typeof n == "number" ? n : Number(n);
-			return isNaN(e) ? String(n) : t.format ? t.format(e) : String(e);
+			let t = typeof n == "number" ? n : Number(n);
+			return isNaN(t) ? String(n) : e.format ? e.format(t) : String(t);
 		}
 		case "date": {
-			if (t.format) return t.format(n);
-			let e = n instanceof Date ? n : new Date(String(n));
-			return isNaN(e.getTime()) ? String(n) : e.toLocaleDateString();
+			if (e.format) return e.format(n);
+			let t = n instanceof Date ? n : new Date(String(n));
+			return isNaN(t.getTime()) ? String(n) : t.toLocaleDateString();
 		}
 		case "badge": {
 			let r = String(n);
-			return /* @__PURE__ */ p(e, {
-				variant: t.variants?.[r] ?? "secondary",
+			return /* @__PURE__ */ p(t, {
+				variant: e.variants?.[r] ?? "secondary",
 				children: r
 			});
 		}
@@ -42,7 +42,7 @@ function ee(t, n, r) {
 function x({ columnKey: e, activeKey: t, ascending: n }) {
 	return e === t ? p(n ? v : g, { className: "ml-1 inline size-3.5" }) : /* @__PURE__ */ p(y, { className: "ml-1 inline size-3.5 opacity-40" });
 }
-function S({ page: e, totalPages: n, onPrev: r, onNext: i }) {
+function S({ page: t, totalPages: n, onPrev: r, onNext: i }) {
 	return /* @__PURE__ */ m("div", {
 		className: "flex items-center justify-end gap-2 mt-2 px-2",
 		children: [
@@ -50,22 +50,22 @@ function S({ page: e, totalPages: n, onPrev: r, onNext: i }) {
 				className: "text-sm text-muted-foreground",
 				children: [
 					"Page ",
-					e + 1,
+					t + 1,
 					" of ",
 					n
 				]
 			}),
 			/* @__PURE__ */ p("button", {
 				type: "button",
-				className: t("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
-				disabled: e === 0,
+				className: e("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
+				disabled: t === 0,
 				onClick: r,
 				children: "Previous"
 			}),
 			/* @__PURE__ */ p("button", {
 				type: "button",
-				className: t("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
-				disabled: e >= n - 1,
+				className: e("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
+				disabled: t >= n - 1,
 				onClick: i,
 				children: "Next"
 			})
@@ -75,8 +75,8 @@ function S({ page: e, totalPages: n, onPrev: r, onNext: i }) {
 function C(e) {
 	return e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()).trim();
 }
-var w = (e) => {
-	let { columns: h, rows: v, caption: y, sortKey: b, sortAscending: w, pageSize: T, currentPage: E, stickyHeader: D = !1, striped: te = !1, hoverable: ne = !0, compact: re = !1, emptyCard: O, emptyText: ie = "No data", className: k, cardName: A, onRowClicked: j, onSortChanged: M, onShowDetail: N, onHideDetail: P, onPageChanged: F } = e, [I, L] = d(/* @__PURE__ */ new Set()), [R, z] = d(b), [B, V] = d(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = d(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = u(() => H ? [...v].sort((e, t) => {
+var w = (t) => {
+	let { columns: h, rows: v, caption: y, sortKey: b, sortAscending: w, pageSize: T, currentPage: E, stickyHeader: D = !1, striped: te = !1, hoverable: ne = !0, compact: re = !1, emptyCard: O, emptyText: ie = "No data", className: k, cardName: A, onRowClicked: j, onSortChanged: M, onShowDetail: N, onHideDetail: P, onPageChanged: F } = t, [I, L] = d(/* @__PURE__ */ new Set()), [R, z] = d(b), [B, V] = d(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = d(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = u(() => H ? [...v].sort((e, t) => {
 		let n = e.data[H], r = t.data[H];
 		if (n == null && r == null) return 0;
 		if (n == null) return 1;
@@ -124,7 +124,7 @@ var w = (e) => {
 		});
 	}, $ = re ? "py-1 px-2" : "py-2 px-3";
 	return /* @__PURE__ */ m("div", {
-		className: t("w-full", k),
+		className: e("w-full", k),
 		"data-pihanga": A,
 		children: [/* @__PURE__ */ m(n, { children: [
 			y && /* @__PURE__ */ p(i, { children: y }),
@@ -133,19 +133,19 @@ var w = (e) => {
 				children: /* @__PURE__ */ m(c, { children: [q && /* @__PURE__ */ p(o, {
 					className: "w-10 px-2",
 					"aria-label": "Row details"
-				}), h.map((e) => /* @__PURE__ */ p(o, {
-					style: e.width ? { width: e.width } : void 0,
-					className: t($, e.align === "center" && "text-center", e.align === "right" && "text-right", e.sortable && "cursor-pointer select-none", e.headerClassName),
-					onClick: e.sortable ? () => ae(e.key) : void 0,
+				}), h.map((t) => /* @__PURE__ */ p(o, {
+					style: t.width ? { width: t.width } : void 0,
+					className: e($, t.align === "center" && "text-center", t.align === "right" && "text-right", t.sortable && "cursor-pointer select-none", t.headerClassName),
+					onClick: t.sortable ? () => ae(t.key) : void 0,
 					children: /* @__PURE__ */ m("span", {
 						className: "inline-flex items-center",
-						children: [e.title ?? C(e.key), e.sortable && /* @__PURE__ */ p(x, {
-							columnKey: e.key,
+						children: [t.title ?? C(t.key), t.sortable && /* @__PURE__ */ p(x, {
+							columnKey: t.key,
 							activeKey: H,
 							ascending: U
 						})]
 					})
-				}, e.key))] })
+				}, t.key))] })
 			}),
 			/* @__PURE__ */ p(r, { children: X.length === 0 ? /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(a, {
 				colSpan: J,
@@ -154,30 +154,31 @@ var w = (e) => {
 					cardName: O,
 					parentCard: A
 				}) : ie
-			}) }) : X.map((e, n) => {
-				let r = I.has(e.id), i = te && n % 2 == 1;
+			}) }) : X.map((t, n) => {
+				let r = I.has(t.id), i = te && n % 2 == 1;
 				return /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ m(c, {
-					className: t(i && "bg-muted/30", ne && "cursor-pointer"),
+					className: e(i && "bg-muted/30", ne && "cursor-pointer"),
 					"data-expanded": r || void 0,
-					onClick: () => se(e),
+					onClick: () => se(t),
 					children: [q && /* @__PURE__ */ p(a, {
 						className: "w-10 px-2",
-						children: e.detailCard && /* @__PURE__ */ p("button", {
+						children: t.detailCard && /* @__PURE__ */ p("button", {
 							type: "button",
 							"aria-label": r ? "Collapse detail" : "Expand detail",
 							"aria-expanded": r,
-							className: t("flex items-center justify-center rounded p-0.5 transition-colors", "hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"),
-							onClick: (t) => oe(e, t),
+							className: e("flex items-center justify-center rounded p-0.5 transition-colors", "hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"),
+							onClick: (e) => oe(t, e),
 							children: p(r ? g : _, { className: "size-4" })
 						})
 					}), h.map((n) => {
-						let r = e.data[n.key];
+						let r = t.data[n.key], i = typeof n.cellClassName == "function" ? n.cellClassName(r, t) : n.cellClassName, o = typeof n.cellStyle == "function" ? n.cellStyle(r, t) : n.cellStyle;
 						return /* @__PURE__ */ p(a, {
-							className: t($, n.align === "center" && "text-center", n.align === "right" && "text-right", n.cellClassName),
+							className: e($, n.align === "center" && "text-center", n.align === "right" && "text-right", i),
+							style: o,
 							children: ee(n, r, A)
 						}, n.key);
 					})]
-				}), r && e.detailCard && /* @__PURE__ */ p(c, {
+				}), r && t.detailCard && /* @__PURE__ */ p(c, {
 					className: "hover:bg-transparent",
 					onClick: (e) => e.stopPropagation(),
 					children: /* @__PURE__ */ p(a, {
@@ -186,14 +187,14 @@ var w = (e) => {
 						children: /* @__PURE__ */ p("div", {
 							className: "bg-muted/20 px-4 py-3",
 							children: /* @__PURE__ */ p(f, {
-								cardName: e.detailCard,
-								cardKey: `detail-${e.id}`,
-								row: e,
+								cardName: t.detailCard,
+								cardKey: `detail-${t.id}`,
+								row: t,
 								parentCard: A
-							}, `${A}-${e.id}-detail`)
+							}, `${A}-${t.id}-detail`)
 						})
 					})
-				})] }, e.id);
+				})] }, t.id);
 			}) })
 		] }), T && Z > 1 && /* @__PURE__ */ p(S, {
 			page: K,