@pihanga2/shadcn 0.2.5 → 0.2.7

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,21 +62,25 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (35)
+## Included cards (41)
 
+- `avatar`
 - `badge`
 - `box`
 - `button`
 - `checkbox`
+- `collapsibleCard`
 - `conditional`
 - `dataTable`
 - `dialog`
+- `drawer`
 - `dropDownMenu`
 - `field`
 - `fileDrop`
 - `flexGrid`
 - `form`
 - `framework`
+- `infoCard`
 - `input`
 - `jsonViewer`
 - `list`
@@ -86,8 +90,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/collapsibleCard/collapsibleCard.component.d.ts

@@ -0,0 +1,4 @@
+import { PiCardProps } from '@pihanga2/core';
+import { CollapsibleCardProps, CollapsibleCardEvents } from './collapsibleCard.types';
+import * as React from "react";
+export declare const CollapsibleCardComponent: (props: PiCardProps<CollapsibleCardProps, CollapsibleCardEvents>) => React.ReactNode;

package/cards/collapsibleCard/collapsibleCard.component.js

@@ -0,0 +1,61 @@
+import { getIcon as e } from "../icons.js";
+import { cn as t } from "../../lib/utils.js";
+import * as n from "react";
+import { Card as r } from "@pihanga2/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-collapsible";
+import { ChevronsUpDown as s } from "lucide-react";
+//#region src/cards/collapsibleCard/collapsibleCard.component.tsx
+var c = {
+	h1: "scroll-m-20 text-4xl font-extrabold tracking-tight",
+	h2: "scroll-m-20 text-3xl font-semibold tracking-tight",
+	h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+	h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+	p: "leading-7",
+	lead: "text-xl text-muted-foreground",
+	large: "text-lg font-semibold",
+	small: "text-sm font-medium leading-none",
+	muted: "text-sm text-muted-foreground"
+}, l = (l) => {
+	let { title: u, titleLevel: d = "h4", titleCard: f, icon: p, contentCard: m, defaultOpen: h = !1, open: g, onOpenChanged: _, className: v, headerClassName: y, contentClassName: b, style: x, cardName: S } = l, [C, w] = n.useState(h), T = g === void 0 ? C : g;
+	function E(e) {
+		w(e), _?.({ open: e });
+	}
+	let D = p ? e(p) : /* @__PURE__ */ i(s, { className: "h-4 w-4" });
+	return /* @__PURE__ */ a(o.Root, {
+		open: T,
+		onOpenChange: E,
+		className: t("w-full", v),
+		style: x,
+		"data-pihanga": S,
+		children: [/* @__PURE__ */ a("div", {
+			className: t("flex items-center justify-between space-x-4 py-2", y),
+			children: [f ? /* @__PURE__ */ i(r, {
+				cardName: f,
+				parentCard: S
+			}) : /* @__PURE__ */ i("span", {
+				className: c[d],
+				children: u
+			}), /* @__PURE__ */ i(o.Trigger, {
+				asChild: !0,
+				children: /* @__PURE__ */ i("button", {
+					type: "button",
+					className: "shrink-0 rounded-sm p-1 transition-colors hover:bg-accent hover:text-accent-foreground",
+					"aria-expanded": T,
+					"aria-label": T ? "Collapse" : "Expand",
+					children: D
+				})
+			})]
+		}), /* @__PURE__ */ i(o.Content, {
+			className: t("overflow-hidden", b),
+			children: m && /* @__PURE__ */ i(r, {
+				cardName: m,
+				parentCard: S
+			})
+		})]
+	});
+};
+//#endregion
+export { l as CollapsibleCardComponent };
+
+//# sourceMappingURL=collapsibleCard.component.js.map

package/cards/collapsibleCard/collapsibleCard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsibleCard.component.js","names":[],"sources":["../../../src/cards/collapsibleCard/collapsibleCard.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\nimport {ChevronsUpDown} from \"lucide-react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {getIcon} from \"@/cards/icons\";\nimport type {\n  CollapsibleCardProps,\n  CollapsibleCardEvents,\n  CollapsibleTitleLevel,\n} from \"./collapsibleCard.types\";\n\nconst TITLE_CLASSES: Record<CollapsibleTitleLevel, string> = {\n  h1: \"scroll-m-20 text-4xl font-extrabold tracking-tight\",\n  h2: \"scroll-m-20 text-3xl font-semibold tracking-tight\",\n  h3: \"scroll-m-20 text-2xl font-semibold tracking-tight\",\n  h4: \"scroll-m-20 text-xl font-semibold tracking-tight\",\n  p: \"leading-7\",\n  lead: \"text-xl text-muted-foreground\",\n  large: \"text-lg font-semibold\",\n  small: \"text-sm font-medium leading-none\",\n  muted: \"text-sm text-muted-foreground\",\n};\n\nexport const CollapsibleCardComponent = (\n  props: PiCardProps<CollapsibleCardProps, CollapsibleCardEvents>,\n): React.ReactNode => {\n  const {\n    title,\n    titleLevel = \"h4\",\n    titleCard,\n    icon,\n    contentCard,\n    defaultOpen = false,\n    open,\n    onOpenChanged,\n    className,\n    headerClassName,\n    contentClassName,\n    style,\n    cardName,\n  } = props;\n\n  const [localOpen, setLocalOpen] = React.useState(defaultOpen);\n  const openState = open !== undefined ? open : localOpen;\n\n  function handleOpenChange(next: boolean): void {\n    setLocalOpen(next);\n    onOpenChanged?.({open: next});\n  }\n\n  const triggerIcon = icon ? (\n    getIcon(icon)\n  ) : (\n    <ChevronsUpDown className=\"h-4 w-4\" />\n  );\n\n  return (\n    <CollapsiblePrimitive.Root\n      open={openState}\n      onOpenChange={handleOpenChange}\n      className={cn(\"w-full\", className)}\n      style={style}\n      data-pihanga={cardName}\n    >\n      <div\n        className={cn(\n          \"flex items-center justify-between space-x-4 py-2\",\n          headerClassName,\n        )}\n      >\n        {titleCard ? (\n          <Card cardName={titleCard} parentCard={cardName} />\n        ) : (\n          <span className={TITLE_CLASSES[titleLevel]}>{title}</span>\n        )}\n        <CollapsiblePrimitive.Trigger asChild>\n          <button\n            type=\"button\"\n            className=\"shrink-0 rounded-sm p-1 transition-colors hover:bg-accent hover:text-accent-foreground\"\n            aria-expanded={openState}\n            aria-label={openState ? \"Collapse\" : \"Expand\"}\n          >\n            {triggerIcon}\n          </button>\n        </CollapsiblePrimitive.Trigger>\n      </div>\n      <CollapsiblePrimitive.Content\n        className={cn(\"overflow-hidden\", contentClassName)}\n      >\n        {contentCard && <Card cardName={contentCard} parentCard={cardName} />}\n      </CollapsiblePrimitive.Content>\n    </CollapsiblePrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,IAAM,IAAuD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,GAAG;CACH,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO;AACT,GAEa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,gBAAa,MACb,cACA,SACA,gBACA,iBAAc,IACd,SACA,kBACA,cACA,oBACA,qBACA,UACA,gBACE,GAEE,CAAC,GAAW,KAAgB,EAAM,SAAS,CAAW,GACtD,IAAY,MAAS,KAAA,IAAmB,IAAP;CAEvC,SAAS,EAAiB,GAAqB;EAE7C,AADA,EAAa,CAAI,GACjB,IAAgB,EAAC,MAAM,EAAI,CAAC;CAC9B;CAEA,IAAM,IAAc,IAClB,EAAQ,CAAI,IAEZ,kBAAC,GAAD,EAAgB,WAAU,UAAW,CAAA;CAGvC,OACE,kBAAC,EAAqB,MAAtB;EACE,MAAM;EACN,cAAc;EACd,WAAW,EAAG,UAAU,CAAS;EAC1B;EACP,gBAAc;YALhB,CAOE,kBAAC,OAAD;GACE,WAAW,EACT,oDACA,CACF;aAJF,CAMG,IACC,kBAAC,GAAD;IAAM,UAAU;IAAW,YAAY;GAAW,CAAA,IAElD,kBAAC,QAAD;IAAM,WAAW,EAAc;cAAc;GAAY,CAAA,GAE3D,kBAAC,EAAqB,SAAtB;IAA8B,SAAA;cAC5B,kBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,iBAAe;KACf,cAAY,IAAY,aAAa;eAEpC;IACK,CAAA;GACoB,CAAA,CAC3B;MACL,kBAAC,EAAqB,SAAtB;GACE,WAAW,EAAG,mBAAmB,CAAgB;aAEhD,KAAe,kBAAC,GAAD;IAAM,UAAU;IAAa,YAAY;GAAW,CAAA;EACxC,CAAA,CACL;;AAE/B"}

package/cards/collapsibleCard/collapsibleCard.types.d.ts

@@ -0,0 +1,91 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const COLLAPSIBLE_CARD = "shad/collapsible";
+export declare const COLLAPSIBLE_CARD_ACTION: {
+    OPENCHANGED: string;
+};
+export type CollapsibleCardOpenChangedEvent = {
+    open: boolean;
+};
+export declare const onCollapsibleCardOpenChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & CollapsibleCardOpenChangedEvent>) => void;
+export type CollapsibleCardEvents = {
+    onOpenChanged: CollapsibleCardOpenChangedEvent;
+};
+/**
+ * Subset of shadcn/ui typography levels supported for the built-in title slot.
+ */
+export type CollapsibleTitleLevel = "h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small" | "muted";
+export type CollapsibleCardProps = {
+    /**
+     * Plain-text title rendered in the trigger row using the built-in
+     * Typography styles.  Use `titleCard` instead to supply a full Pihanga card.
+     */
+    title?: string;
+    /**
+     * Typography level applied to `title`.
+     * @default "h4"
+     */
+    titleLevel?: CollapsibleTitleLevel;
+    /**
+     * Alternative to `title` — any Pihanga card reference rendered as the
+     * header (e.g. a `shad/typography` or `shad/badge` card).
+     * When provided, `title` and `titleLevel` are ignored.
+     */
+    titleCard?: PiCardRef;
+    /**
+     * Icon name from the Pihanga icon registry, shown inside the toggle button.
+     * Falls back to the built-in `ChevronsUpDown` icon when omitted.
+     *
+     * @example
+     * import {registerIcon} from "@/cards/icons";
+     * import {ChevronDown} from "lucide-react";
+     * registerIcon("chevron-down", ChevronDown);
+     * CollapsibleCard({ icon: "chevron-down", ... });
+     */
+    icon?: string;
+    /**
+     * Pihanga card reference rendered inside the collapsible body.
+     */
+    contentCard?: PiCardRef;
+    /**
+     * Whether the panel is open on first render (uncontrolled mode).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state.  When provided, the component delegates all open
+     * state management to the consumer — update this via `onOpenChanged`.
+     */
+    open?: boolean;
+    /** CSS classes applied to the root `<div>`. */
+    className?: string;
+    /** CSS classes applied to the trigger row (title + toggle button). */
+    headerClassName?: string;
+    /** CSS classes applied to the collapsible content wrapper `<div>`. */
+    contentClassName?: string;
+    /** Inline styles on the root element. */
+    style?: React.CSSProperties;
+};
+/**
+ * Factory function for declaring a `shad/collapsible` card instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {CollapsibleCard} from "@/cards/collapsibleCard";
+ * import {Typography} from "@/cards/typography";
+ *
+ * registerCard("myApp/details", CollapsibleCard({
+ *   title: "Advanced options",
+ *   titleLevel: "h4",
+ *   contentCard: "myApp/detailsBody",
+ * }));
+ *
+ * registerCard("myApp/detailsBody", Typography({
+ *   text: "Hidden content revealed when expanded.",
+ *   level: "p",
+ * }));
+ * ```
+ */
+export declare const CollapsibleCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<CollapsibleCardProps, S, CollapsibleCardEvents>) => import('@pihanga2/core').PiCardDef;

package/cards/collapsibleCard/collapsibleCard.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/collapsibleCard/collapsibleCard.types.ts
+var r = "shad/collapsible", i = n(r, ["openChanged"]), a = t(i.OPENCHANGED), o = e(r);
+//#endregion
+export { r as COLLAPSIBLE_CARD, i as COLLAPSIBLE_CARD_ACTION, o as CollapsibleCard, a as onCollapsibleCardOpenChanged };
+
+//# sourceMappingURL=collapsibleCard.types.js.map

package/cards/collapsibleCard/collapsibleCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsibleCard.types.js","names":[],"sources":["../../../src/cards/collapsibleCard/collapsibleCard.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n  type PiCardRef,\n} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const COLLAPSIBLE_CARD = \"shad/collapsible\";\n\nexport const COLLAPSIBLE_CARD_ACTION = registerActions(COLLAPSIBLE_CARD, [\n  \"openChanged\",\n]);\n\nexport type CollapsibleCardOpenChangedEvent = {open: boolean};\n\nexport const onCollapsibleCardOpenChanged =\n  createOnAction<CollapsibleCardOpenChangedEvent>(\n    COLLAPSIBLE_CARD_ACTION.OPENCHANGED,\n  );\n\nexport type CollapsibleCardEvents = {\n  onOpenChanged: CollapsibleCardOpenChangedEvent;\n};\n\n/**\n * Subset of shadcn/ui typography levels supported for the built-in title slot.\n */\nexport type CollapsibleTitleLevel =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"lead\"\n  | \"large\"\n  | \"small\"\n  | \"muted\";\n\nexport type CollapsibleCardProps = {\n  /**\n   * Plain-text title rendered in the trigger row using the built-in\n   * Typography styles.  Use `titleCard` instead to supply a full Pihanga card.\n   */\n  title?: string;\n\n  /**\n   * Typography level applied to `title`.\n   * @default \"h4\"\n   */\n  titleLevel?: CollapsibleTitleLevel;\n\n  /**\n   * Alternative to `title` — any Pihanga card reference rendered as the\n   * header (e.g. a `shad/typography` or `shad/badge` card).\n   * When provided, `title` and `titleLevel` are ignored.\n   */\n  titleCard?: PiCardRef;\n\n  /**\n   * Icon name from the Pihanga icon registry, shown inside the toggle button.\n   * Falls back to the built-in `ChevronsUpDown` icon when omitted.\n   *\n   * @example\n   * import {registerIcon} from \"@/cards/icons\";\n   * import {ChevronDown} from \"lucide-react\";\n   * registerIcon(\"chevron-down\", ChevronDown);\n   * CollapsibleCard({ icon: \"chevron-down\", ... });\n   */\n  icon?: string;\n\n  /**\n   * Pihanga card reference rendered inside the collapsible body.\n   */\n  contentCard?: PiCardRef;\n\n  /**\n   * Whether the panel is open on first render (uncontrolled mode).\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Controlled open state.  When provided, the component delegates all open\n   * state management to the consumer — update this via `onOpenChanged`.\n   */\n  open?: boolean;\n\n  /** CSS classes applied to the root `<div>`. */\n  className?: string;\n\n  /** CSS classes applied to the trigger row (title + toggle button). */\n  headerClassName?: string;\n\n  /** CSS classes applied to the collapsible content wrapper `<div>`. */\n  contentClassName?: string;\n\n  /** Inline styles on the root element. */\n  style?: React.CSSProperties;\n};\n\n/**\n * Factory function for declaring a `shad/collapsible` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {CollapsibleCard} from \"@/cards/collapsibleCard\";\n * import {Typography} from \"@/cards/typography\";\n *\n * registerCard(\"myApp/details\", CollapsibleCard({\n *   title: \"Advanced options\",\n *   titleLevel: \"h4\",\n *   contentCard: \"myApp/detailsBody\",\n * }));\n *\n * registerCard(\"myApp/detailsBody\", Typography({\n *   text: \"Hidden content revealed when expanded.\",\n *   level: \"p\",\n * }));\n * ```\n */\nexport const CollapsibleCard = createCardDeclaration<\n  CollapsibleCardProps,\n  CollapsibleCardEvents\n>(COLLAPSIBLE_CARD);\n"],"mappings":";;AAQA,IAAa,IAAmB,oBAEnB,IAA0B,EAAgB,GAAkB,CACvE,aACF,CAAC,GAIY,IACX,EACE,EAAwB,WAC1B,GAsGW,IAAkB,EAG7B,CAAgB"}

package/cards/collapsibleCard/index.d.ts

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

package/cards/collapsibleCard/index.js

@@ -0,0 +1,13 @@
+import { CollapsibleCardComponent as e } from "./collapsibleCard.component.js";
+import { COLLAPSIBLE_CARD as t, COLLAPSIBLE_CARD_ACTION as n, CollapsibleCard as r, onCollapsibleCardOpenChanged as i } from "./collapsibleCard.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/collapsibleCard/index.tsx
+o({
+	name: t,
+	component: e,
+	events: a(n)
+});
+//#endregion
+export { t as COLLAPSIBLE_CARD, n as COLLAPSIBLE_CARD_ACTION, r as CollapsibleCard, i as onCollapsibleCardOpenChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/collapsibleCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/collapsibleCard/index.tsx"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {CollapsibleCardComponent} from \"./collapsibleCard.component\";\nimport {\n  COLLAPSIBLE_CARD,\n  COLLAPSIBLE_CARD_ACTION,\n} from \"./collapsibleCard.types\";\n\nexport * from \"./collapsibleCard.types\";\n\nregisterCardComponent({\n  name: COLLAPSIBLE_CARD,\n  component: CollapsibleCardComponent,\n  events: actionTypesToEvents(COLLAPSIBLE_CARD_ACTION),\n});\n"],"mappings":";;;;AAUA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAuB;AACrD,CAAC"}