@pihanga2/shadcn 0.2.0 → 0.2.2

package/cards/graphin/graphin.types.d.ts

@@ -1,11 +1,213 @@
-import { PiCardDef } from '@pihanga2/core';
+import { default as React } from 'react';
+import { DispatchF, ReduxAction } from '@pihanga2/core';
 import { GraphData, GraphOptions } from '@antv/g6';
 export declare const GRAPHIN_CARD = "graphin";
-export declare const Graphin: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<GraphinProps, S, {}>) => PiCardDef;
+export declare const Graphin: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<GraphinProps, S, GraphinEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const GRAPHIN_ACTION: {
+    NODE_HOVERED: string;
+    NODE_HOVER_END: string;
+    NODE_CLICKED: string;
+    NODE_DBL_CLICKED: string;
+    TOOLTIP_OPEN: string;
+    TOOLTIP_CLOSE: string;
+    CONTEXT_MENU_OPEN: string;
+    CONTEXT_MENU_CLOSE: string;
+};
+export declare const onGraphinNodeHovered: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinNodeHoverEnd: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinNodeClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinNodeDblClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinTooltipOpen: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinTooltipClose: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinContextMenuOpen: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinContextMenuClose: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+/**
+ * Payload carried by all node interaction events.
+ * Also forwarded as props to tooltip / context-menu `PiCard` content cards
+ * so they can render node-specific information.
+ */
+export type GraphinNodeEventContext<T = Record<string, unknown>> = {
+    /** The G6 node id */
+    nodeId: string;
+    /** The node's `data` bag as stored in `GraphData` */
+    nodeData?: T;
+    /** Canvas x-coordinate of the pointer when the event fired */
+    x: number;
+    /** Canvas y-coordinate of the pointer when the event fired */
+    y: number;
+};
+/**
+ * Convenience union of every built-in G6 layout-type string.
+ *
+ * | Value | Description |
+ * |---|---|
+ * | `"force-atlas2"` | Force Atlas 2 – general-purpose force (default) |
+ * | `"force"` / `"gforce"` | Classic force-directed |
+ * | `"d3-force"` | D3 force simulation |
+ * | `"fruchterman"` | Fruchterman-Reingold force |
+ * | `"dagre"` | Hierarchical / DAG (Dagre) |
+ * | `"antv-dagre"` | AntV variant of Dagre |
+ * | `"circular"` | Nodes arranged in a circle |
+ * | `"concentric"` | Concentric rings ordered by degree |
+ * | `"radial"` | Radial tree from a focal node |
+ * | `"grid"` | Uniform grid |
+ * | `"mds"` | Multi-dimensional scaling |
+ * | `"random"` | Random positions |
+ * | `"snake"` | Snake / serpentine path |
+ * | `"fishbone"` | Fishbone / Ishikawa diagram |
+ */
+export type GraphinLayoutType = "force-atlas2" | "force" | "gforce" | "d3-force" | "d3-force3d" | "fruchterman" | "fruchterman-gpu" | "dagre" | "antv-dagre" | "circular" | "concentric" | "radial" | "grid" | "mds" | "random" | "snake" | "fishbone";
 export type GraphinProps = {
     data: GraphData;
     options?: Partial<Omit<GraphOptions, "data">>;
+    /**
+     * Shorthand for `options.layout.type`.  When provided it overrides whatever
+     * layout type is set inside `options.layout`, while still preserving any
+     * other layout parameters (e.g. `rankdir`, `preventOverlap`, …) you set
+     * via `options`.
+     *
+     * Pass the full options as `options.layout` when you also need to tweak
+     * layout-specific parameters.
+     *
+     * @default "force-atlas2"
+     */
+    layout?: GraphinLayoutType;
+    /**
+     * When `true` the default `zoom-canvas` behavior is removed, preventing
+     * the user from zooming in/out with the scroll wheel.
+     *
+     * Useful when the graph is embedded inside a scrollable page and you do
+     * not want accidental scroll events to zoom the canvas instead of
+     * scrolling the page.
+     *
+     * You can still customise or re-enable zoom by passing a `zoom-canvas`
+     * entry in `options.behaviors`.
+     *
+     * @default false
+     */
+    suppressZoom?: boolean;
+    /**
+     * When `true` the default `drag-canvas` behavior is removed, preventing
+     * the user from **panning** (moving the entire canvas) by click-dragging
+     * on the background.
+     *
+     * Useful when you want to lock the viewport (e.g. an embedded static
+     * overview) or when touch-scroll conflicts with canvas pan on mobile.
+     *
+     * You can still customise or re-enable panning by passing a `drag-canvas`
+     * entry in `options.behaviors`.
+     *
+     * @default false
+     */
+    suppressPan?: boolean;
+    /**
+     * When `true` the default `drag-element` behavior is removed, preventing
+     * the user from **dragging individual nodes** to rearrange them after the
+     * initial layout has been applied.
+     *
+     * By default nodes are freely repositionable.  Set this to `true` to
+     * produce a read-only graph where the computed layout is preserved exactly.
+     *
+     * You can still customise or re-enable node dragging by passing a
+     * `drag-element` entry in `options.behaviors`.
+     *
+     * @default false
+     */
+    suppressDrag?: boolean;
+    /**
+     * Initial zoom level of the canvas viewport.
+     *
+     * **Range:** `0.02` – `16`  (G6's default `zoomRange`)
+     * - `1` = 100 % (actual size)
+     * - `< 1` zooms out — e.g. `0.5` shows everything at 50 %
+     * - `> 1` zooms in — e.g. `2` shows everything at 200 %
+     *
+     * Setting this prop automatically disables G6's default `autoFit: 'view'`
+     * behaviour (which would otherwise fit the graph to the container and
+     * override the requested zoom level).
+     *
+     * The user can still change the zoom interactively via scroll unless
+     * `suppressZoom` is also set.
+     *
+     * @example 0.5  // 50 % — useful for large graphs; shows the full picture
+     * @example 1    // 100 % — natural size
+     * @example 2    // 200 % — start zoomed in on a small graph
+     */
+    zoomLevel?: number;
+    /**
+     * When `true` every edge is rendered with an arrowhead at its **target**
+     * end, making the graph visually directed.
+     *
+     * You can override arrow style granularly via
+     * `options.edge.style.endArrow` / `options.edge.style.startArrow`.
+     *
+     * @default false
+     */
+    directed?: boolean;
+    /**
+     * Hover tooltip — shown while the pointer is over a node or edge.
+     * The specified `PiCardDef` is rendered inside a floating panel with
+     * `pointerEvents: none`.  The card receives `GraphinNodeEventContext`
+     * as extra props.
+     */
     tooltip?: GraphinTooltip;
+    /**
+     * Context panel — opens when the user clicks a node and stays visible
+     * until they click outside it or press the built-in ✕ close button.
+     * The panel is interactive (`pointerEvents: auto`) and passes an
+     * `onClose` callback as well as `GraphinNodeEventContext` to the card.
+     */
+    contextMenu?: GraphinContextMenu;
+    /**
+     * Serialisable map from **style name** → visual spec used to style nodes
+     * without JavaScript functions in props (required for Redux serialisation).
+     *
+     * Nodes and edges reference a style by setting a string field in their
+     * `data` object.  The field name defaults to `"style"` and can be
+     * overridden with `nodeStyleKey`.
+     *
+     * The component builds the G6 style functions internally from this map, so
+     * the layout engine never re-runs when styles change — use the
+     * `dispatchGraphinUpdateNodeStyleMap` OP to update styles at runtime.
+     *
+     * @example
+     * ```ts
+     * nodeStyles: {
+     *   gateway: { type: "star",   fill: "#e67e22", size: 48, labelFill: "#fff" },
+     *   service: { type: "circle", fill: "#2980b9", size: 32, labelFill: "#fff" },
+     *   db:      { type: "rect",   fill: "#8e44ad", size: 22, labelFill: "#fff" },
+     * }
+     * // node data:
+     * { id: "gw", data: { displayName: "Gateway", style: "gateway" } }
+     * ```
+     */
+    nodeStyles?: GraphinNodeStyleMap;
+    /**
+     * The field name inside `node.data` that holds the style name to look up
+     * in `nodeStyles`.
+     *
+     * Useful when your data already has a different key (e.g. `"role"`,
+     * `"type"`, `"category"`).
+     *
+     * @default "style"
+     */
+    nodeStyleKey?: string;
     style?: {
         root?: React.CSSProperties;
         item?: React.CSSProperties;
@@ -13,6 +215,277 @@ export type GraphinProps = {
     className?: string;
 };
 export type GraphinTooltip = {
-    node?: PiCardDef;
-    edge?: PiCardDef;
+    /** Registered card name whose component is rendered inside the floating panel. */
+    node?: string;
+    edge?: string;
+    /**
+     * Pixel gap between the pointer position and the top-left corner of the
+     * tooltip panel.  Pass a single number for equal x/y offset, or
+     * `[xOffset, yOffset]` to control each axis independently.
+     *
+     * @default 4
+     */
+    offset?: number | [number, number];
+    /**
+     * Extra CSS class name(s) applied to the tooltip wrapper `<div>`.
+     * Use this to override the default background / border / shadow via
+     * Tailwind utilities or your own CSS classes.
+     *
+     * @example "rounded-xl shadow-lg border-primary"
+     */
+    className?: string;
+    /**
+     * Inline style overrides for the tooltip wrapper `<div>`.
+     * Merged on top of the built-in positioning / pointer-events styles so
+     * you can safely override individual properties (e.g. `padding`, `zIndex`).
+     */
+    style?: React.CSSProperties;
+};
+export type GraphinContextMenu = {
+    /** Registered card name whose component is rendered inside the click panel. */
+    node?: string;
+    edge?: string;
+    /**
+     * Pixel gap between the click point and the top-left corner of the context
+     * panel.  Pass a single number for equal x/y offset, or
+     * `[xOffset, yOffset]` to control each axis independently.
+     *
+     * @default 4
+     */
+    offset?: number | [number, number];
+    /**
+     * Extra CSS class name(s) applied to the context-menu wrapper `<div>`.
+     * Use this to override the default background / border / shadow via
+     * Tailwind utilities or your own CSS classes.
+     *
+     * @example "rounded-xl shadow-lg border-primary"
+     */
+    className?: string;
+    /**
+     * Inline style overrides for the context-menu wrapper `<div>`.
+     * Merged on top of the built-in positioning / pointer-events styles so
+     * you can safely override individual properties (e.g. `padding`, `zIndex`).
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * Node shape types supported by G6 v5.
+ */
+export type GraphinNodeShape = "circle" | "rect" | "diamond" | "star" | "triangle" | "hexagon" | "ellipse";
+/**
+ * Serialisable visual specification for a named node style.
+ *
+ * All fields are optional — unset fields fall back to the card's base style.
+ */
+export type GraphinNodeStyleDef = {
+    /** Node shape.  @default "circle" */
+    type?: GraphinNodeShape;
+    /** Fill colour (CSS colour string). */
+    fill?: string;
+    /** Border colour. */
+    stroke?: string;
+    /** Border thickness in pixels. Alias: `strokeWidth` (takes precedence). */
+    lineWidth?: number;
+    /** Border thickness in pixels. Takes precedence over `lineWidth`. */
+    strokeWidth?: number;
+    /**
+     * Node size in pixels.
+     * Pass a number for a square/circle; pass `[width, height]` for a rectangle.
+     */
+    size?: number | [number, number];
+    /** Fill opacity 0–1. */
+    opacity?: number;
+    /** Label text colour. */
+    labelFill?: string;
+    /** Label font size in pixels. */
+    labelFontSize?: number;
+};
+/**
+ * Map from **style name** → visual spec.
+ *
+ * Nodes reference a style by setting a string field in their `data` object
+ * (default field name: `"style"`).  The component looks up that name here
+ * and builds the G6 style functions internally — so no JavaScript functions
+ * ever appear in props (safe for Redux serialisation).
+ *
+ * @example
+ * ```ts
+ * nodeStyles: {
+ *   gateway: { type: "star",   fill: "#e67e22", size: 48 },
+ *   service: { type: "circle", fill: "#2980b9", size: 32 },
+ *   db:      { type: "rect",   fill: "#8e44ad", size: 22 },
+ *   failed:  { fill: "#e74c3c", stroke: "#c0392b", lineWidth: 3 },
+ * }
+ * ```
+ */
+export type GraphinNodeStyleMap = Record<string, GraphinNodeStyleDef>;
+/**
+ * OP actions let external code drive G6 imperatively (highlight nodes,
+ * zoom to a node, etc.) without touching `data` or `options` — so the
+ * layout engine NEVER re-runs.
+ *
+ * Dispatch with the `dispatchGraphin*` helpers exported from this module.
+ */
+export declare const GRAPHIN_OP_ACTION: {
+    SET_NODE_STYLES: string;
+    CLEAR_NODE_STYLES: string;
+    ZOOM_TO_NODE: string;
+    UPDATE_NODE_STYLE_MAP: string;
+};
+/**
+ * Payload for `GRAPHIN_OP_ACTION.SET_NODE_STYLES`.
+ *
+ * Sets the style-name field (determined by `nodeStyleKey`, default `"style"`)
+ * on each specified node, then calls `graph.draw()` so the new style name is
+ * looked up in `nodeStyles` and applied visually — **zero layout re-runs**.
+ *
+ * @example
+ * ```ts
+ * // Mark two nodes as failed; they will immediately render with the "failed"
+ * // visual spec from the nodeStyles map.
+ * dispatchGraphinSetNodeStyles(dispatch, {
+ *   cardName: "myGraph",
+ *   nodeStyles: { "db-u": "failed", "users": "degraded" },
+ * });
+ * ```
+ */
+export type GraphinSetNodeStylesAction = {
+    cardName: string;
+    /**
+     * Map of `nodeId` → style name or ordered list of style names to merge
+     * (each must be a key in the card's `nodeStyles` map).
+     * When an array is given, styles are merged left-to-right with later entries
+     * overriding duplicate properties from earlier ones.
+     * @example { n1: "failed", n2: ["base", "degraded"], n3: "ok" }
+     */
+    nodeStyles: Record<string, string | string[]>;
+};
+/**
+ * Payload for `GRAPHIN_OP_ACTION.CLEAR_NODE_STYLES`.
+ *
+ * Removes the style-name field from the specified nodes (or all nodes when
+ * `nodeIds` is omitted), reverting them to the default `nodeStyles` fallback
+ * appearance.  Calls `graph.draw()` — **zero layout re-runs**.
+ *
+ * @example
+ * ```ts
+ * // Restore all nodes to their default style
+ * dispatchGraphinClearNodeStyles(dispatch, { cardName: "myGraph" });
+ * ```
+ */
+export type GraphinClearNodeStylesAction = {
+    cardName: string;
+    /** Nodes to clear — omit to clear ALL nodes in the graph. */
+    nodeIds?: string[];
+};
+/**
+ * Payload for `GRAPHIN_OP_ACTION.ZOOM_TO_NODE`.
+ *
+ * Pans (and optionally zooms) the viewport so the target node is centred.
+ */
+export type GraphinZoomToNodeAction = {
+    cardName: string;
+    nodeId: string;
+    /** Desired zoom level after centering.  Omit to keep the current zoom. */
+    zoomLevel?: number;
+    /** Animation duration in milliseconds.  @default 400 */
+    duration?: number;
+};
+/**
+ * Set the style name on individual nodes — zero layout re-runs.
+ *
+ * The style name is written to the `nodeStyleKey` field in each node's data
+ * bag, then `graph.draw()` is called so the `nodeStyles` map is re-evaluated
+ * and the new colour / shape / size appears immediately.
+ *
+ * @example
+ * ```ts
+ * dispatchGraphinSetNodeStyles(dispatch, {
+ *   cardName: "myGraph",
+ *   nodeStyles: { "db-u": "failed", "users": "degraded" },
+ * });
+ * ```
+ */
+export declare const dispatchGraphinSetNodeStyles: (dispatch: DispatchF, payload: GraphinSetNodeStylesAction) => string;
+/**
+ * Clear the style name from nodes (all nodes when `nodeIds` is omitted).
+ * Nodes revert to the default fallback appearance defined in the component.
+ *
+ * @example
+ * ```ts
+ * dispatchGraphinClearNodeStyles(dispatch, { cardName: "myGraph" });
+ * ```
+ */
+export declare const dispatchGraphinClearNodeStyles: (dispatch: DispatchF, payload: GraphinClearNodeStylesAction) => string;
+/**
+ * Pan (and optionally zoom) the viewport to centre a node.
+ *
+ * @example
+ * ```ts
+ * dispatchGraphinZoomToNode(dispatch, {
+ *   cardName: "myGraph",
+ *   nodeId:   "n3",
+ *   zoomLevel: 1.5,
+ *   duration:  600,
+ * });
+ * ```
+ */
+export declare const dispatchGraphinZoomToNode: (dispatch: DispatchF, payload: GraphinZoomToNodeAction) => string;
+/**
+ * Payload for `GRAPHIN_OP_ACTION.UPDATE_NODE_STYLE_MAP`.
+ *
+ * Merges (or replaces) style definitions in the card's live style map and
+ * triggers a G6 re-draw — **without** re-running the layout engine.
+ *
+ * Use this to animate node colours, highlight failures, show traffic
+ * intensity, etc. at runtime.
+ */
+export type GraphinUpdateNodeStyleMapAction = {
+    cardName: string;
+    /**
+     * Style definitions to merge into the current map.
+     * @example { failed: { fill: "#e74c3c", stroke: "#c0392b" } }
+     */
+    styles: GraphinNodeStyleMap;
+    /**
+     * When `true`, replaces the entire map instead of merging.
+     * @default false
+     */
+    replace?: boolean;
+};
+/**
+ * Merge new style definitions into the card's live node style map and
+ * trigger a re-draw — zero layout re-runs.
+ *
+ * The style map is kept in a React ref inside the component so updates are
+ * applied immediately without going through Redux state.
+ *
+ * @example
+ * ```ts
+ * // Mark "users" node style as failed (red) without touching node data
+ * dispatchGraphinUpdateNodeStyleMap(dispatch, {
+ *   cardName: "myGraph",
+ *   styles: { service: { fill: "#e74c3c", stroke: "#c0392b" } },
+ * });
+ * ```
+ */
+export declare const dispatchGraphinUpdateNodeStyleMap: (dispatch: DispatchF, payload: GraphinUpdateNodeStyleMapAction) => string;
+export type { ReduxAction };
+export type GraphinEvents = {
+    /** Fired when the pointer enters a node */
+    onNodeHovered: GraphinNodeEventContext;
+    /** Fired when the pointer leaves a node */
+    onNodeHoverEnd: GraphinNodeEventContext;
+    /** Fired on a single click on a node */
+    onNodeClicked: GraphinNodeEventContext;
+    /** Fired on a double-click on a node */
+    onNodeDblClicked: GraphinNodeEventContext;
+    /** Fired when the hover tooltip becomes visible */
+    onTooltipOpen: GraphinNodeEventContext;
+    /** Fired when the hover tooltip is dismissed */
+    onTooltipClose: GraphinNodeEventContext;
+    /** Fired when the context-menu panel opens */
+    onContextMenuOpen: GraphinNodeEventContext;
+    /** Fired when the context-menu panel closes */
+    onContextMenuClose: GraphinNodeEventContext;
 };

package/cards/graphin/graphinOpHandler.component.d.ts

@@ -0,0 +1,8 @@
+import { GraphinNodeStyleMap } from './graphin.types';
+export type GraphinOpHandlerProps = {
+    cardName: string;
+    nodeStylesRef: React.MutableRefObject<GraphinNodeStyleMap>;
+    /** Ref to the current nodeStyleKey (defaults to "style"). */
+    nodeStyleKeyRef: React.MutableRefObject<string>;
+};
+export declare function GraphinOpHandler({ cardName, nodeStylesRef, nodeStyleKeyRef, }: GraphinOpHandlerProps): null;

package/cards/graphin/index.d.ts

@@ -1,2 +1,3 @@
 export * from './graphin.types';
 export type { TooltipContext } from './tooltip.component';
+export type { ContextMenuContext } from './contextMenu.component';

package/cards/graphin/tooltip.component.d.ts

@@ -1,10 +1,22 @@
-import { GraphinTooltip } from './graphin.types';
+import { GraphinNodeEventContext, GraphinTooltip } from './graphin.types';
+/**
+ * Context forwarded to the tooltip content card as props.
+ *
+ * ```ts
+ * type MyTooltipProps = TooltipContext & { ... }
+ * ```
+ */
 export type TooltipContext<T = Record<string, unknown>> = {
+    /** `true` when the hovered element is an edge, `false` for a node */
     isEdge?: boolean;
+    /** The G6 element id */
     elementID?: string;
+    /** The element's raw `data` bag */
     elementData?: T;
 };
 export declare function TooltipComponent(props: {
     contentCards: GraphinTooltip;
     parentCard: string;
+    onOpen?: (ctx: GraphinNodeEventContext) => void;
+    onClose?: (ctx: GraphinNodeEventContext) => void;
 }): React.ReactNode;

package/cards/input/index.js

@@ -1,13 +1,13 @@
 import { InputComponent as e } from "./input.component.js";
-import { PI_INPUT_ACTION as t, PI_INPUT_CARD as n, PiInput as r, onPiInputChanged as i, onPiInputCommitted as a } from "./input.types.js";
-import { actionTypesToEvents as o, registerCardComponent as s } from "@pihanga2/core";
+import { PI_INPUT_ACTION as t, PI_INPUT_CARD as n, PiInput as r, onInputChanged as i, onInputCommitted as a, onPiInputChanged as o, onPiInputCommitted as s } from "./input.types.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
 //#region src/cards/input/index.ts
-s({
+l({
 	name: n,
 	component: e,
-	events: o(t)
+	events: c(t)
 });
 //#endregion
-export { t as PI_INPUT_ACTION, n as PI_INPUT_CARD, r as PiInput, i as onPiInputChanged, a as onPiInputCommitted };
+export { t as PI_INPUT_ACTION, n as PI_INPUT_CARD, r as PiInput, i as onInputChanged, a as onInputCommitted, o as onPiInputChanged, s as onPiInputCommitted };
 
 //# sourceMappingURL=index.js.map

package/cards/input/input.component.js

@@ -1,6 +1,7 @@
 import { useFormContext as e } from "../form/form.context.js";
 import { Label as t } from "../../components/ui/label.js";
 import { Input as n } from "../../components/ui/input.js";
+import "@pihanga2/core";
 import r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/cards/input/input.component.tsx

package/cards/input/input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.js","names":[],"sources":["../../../src/cards/input/input.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {Label} from \"@/components/ui/label\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiInputEvents, PiInputProps} from \"./input.types\";\n\nexport const InputComponent = (\n  props: PiCardProps<PiInputProps, PiInputEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    type = \"text\",\n    placeholder,\n    disabled,\n    label,\n    description,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Local display state — lets the user type freely without triggering Redux\n  // on every keystroke.  Only `onCommitted` (blur / Enter) writes back to\n  // Redux, so callers that use `onCommitted` instead of `onChanged` avoid\n  // per-keystroke panel rebuilds.\n  const [localValue, setLocalValue] = React.useState<string>(\n    type === \"file\" ? \"\" : propValue,\n  );\n\n  // Sync local value when the prop changes from outside (e.g. when a different\n  // card is selected in the playground, resetting the controls panel).\n  React.useEffect(() => {\n    if (!useFormData && type !== \"file\") {\n      setLocalValue(propValue);\n    }\n  }, [propValue, useFormData, type]);\n\n  // Derive the effective value for the controlled <Input>:\n  //   - inside a form → read from form.formData[name]\n  //   - standalone   → use localValue (updated on every keystroke locally)\n  //   - file inputs  → uncontrolled (no value binding)\n  const inputValue =\n    type === \"file\"\n      ? undefined\n      : useFormData\n        ? ((form.formData[name!] as string | undefined) ?? \"\")\n        : localValue;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newValue =\n      type === \"file\" ? (e.target.files?.[0]?.name ?? \"\") : e.target.value;\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      setLocalValue(newValue);\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Fire onCommitted when the user leaves the field or presses Enter.\n  function handleBlur() {\n    if (!useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (e.key === \"Enter\" && !useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  // Use the id injected by pi/field (for label↔control linking); fall back\n  // to a locally-generated id when used standalone.\n  const selfId = `${cardName}-${name ?? \"input\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div data-pihanga={cardName} className=\"grid w-full gap-1.5\">\n      {label && <Label htmlFor={fieldId}>{label}</Label>}\n      <Input\n        id={fieldId}\n        type={type}\n        value={inputValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={className}\n        aria-invalid={invalid || undefined}\n        aria-describedby={description ? `${fieldId}-desc` : undefined}\n      />\n      {description && (\n        <p id={`${fieldId}-desc`} className=\"text-sm text-muted-foreground\">\n          {description}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,UACA,gBACA,cACA,aACA,cACA,mBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,CAAC,GAAY,KAAiB,EAAM,SACxC,MAAS,SAAS,KAAK,CACzB;CAIA,EAAM,gBAAgB;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAc,CAAS;CAE3B,GAAG;EAAC;EAAW;EAAa;CAAI,CAAC;CAMjC,IAAM,IACJ,MAAS,SACL,KAAA,IACA,IACI,EAAK,SAAS,MAAiC,KACjD;CAER,SAAS,EAAa,GAAwC;EAC5D,IAAM,IACJ,MAAS,SAAU,EAAE,OAAO,QAAQ,IAAI,QAAQ,KAAM,EAAE,OAAO;EACjE,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAEjC,EAAc,CAAQ,GACtB,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAGA,SAAS,IAAa;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAEA,SAAS,EAAc,GAA0C;EAC/D,AAAI,EAAE,QAAQ,WAAW,CAAC,KAAe,MAAS,UAChD,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,WAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EAAK,gBAAc;EAAU,WAAU;YAAvC;GACG,KAAS,kBAAC,GAAD;IAAO,SAAS;cAAU;GAAa,CAAA;GACjD,kBAAC,GAAD;IACE,IAAI;IACE;IACN,OAAO;IACP,UAAU;IACV,QAAQ;IACR,WAAW;IACE;IACH;IACC;IACX,gBAAc,KAAW,KAAA;IACzB,oBAAkB,IAAc,GAAG,EAAQ,SAAS,KAAA;GACrD,CAAA;GACA,KACC,kBAAC,KAAD;IAAG,IAAI,GAAG,EAAQ;IAAQ,WAAU;cACjC;GACA,CAAA;EAEF;;AAET"}
+{"version":3,"file":"input.component.js","names":[],"sources":["../../../src/cards/input/input.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {Label} from \"@/components/ui/label\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiInputEvents, PiInputProps} from \"./input.types\";\n\nexport const InputComponent = (\n  props: PiCardProps<PiInputProps, PiInputEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    type = \"text\",\n    placeholder,\n    disabled,\n    label,\n    description,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Local display state — lets the user type freely without triggering Redux\n  // on every keystroke.  Only `onCommitted` (blur / Enter) writes back to\n  // Redux, so callers that use `onCommitted` instead of `onChanged` avoid\n  // per-keystroke panel rebuilds.\n  const [localValue, setLocalValue] = React.useState<string>(\n    type === \"file\" ? \"\" : propValue,\n  );\n\n  // Sync local value when the prop changes from outside (e.g. when a different\n  // card is selected in the playground, resetting the controls panel).\n  React.useEffect(() => {\n    if (!useFormData && type !== \"file\") {\n      setLocalValue(propValue);\n    }\n  }, [propValue, useFormData, type]);\n\n  // Derive the effective value for the controlled <Input>:\n  //   - inside a form → read from form.formData[name]\n  //   - standalone   → use localValue (updated on every keystroke locally)\n  //   - file inputs  → uncontrolled (no value binding)\n  const inputValue =\n    type === \"file\"\n      ? undefined\n      : useFormData\n        ? ((form.formData[name!] as string | undefined) ?? \"\")\n        : localValue;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newValue =\n      type === \"file\" ? (e.target.files?.[0]?.name ?? \"\") : e.target.value;\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      setLocalValue(newValue);\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Fire onCommitted when the user leaves the field or presses Enter.\n  function handleBlur() {\n    if (!useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (e.key === \"Enter\" && !useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  // Use the id injected by pi/field (for label↔control linking); fall back\n  // to a locally-generated id when used standalone.\n  const selfId = `${cardName}-${name ?? \"input\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div data-pihanga={cardName} className=\"grid w-full gap-1.5\">\n      {label && <Label htmlFor={fieldId}>{label}</Label>}\n      <Input\n        id={fieldId}\n        type={type}\n        value={inputValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={className}\n        aria-invalid={invalid || undefined}\n        aria-describedby={description ? `${fieldId}-desc` : undefined}\n      />\n      {description && (\n        <p id={`${fieldId}-desc`} className=\"text-sm text-muted-foreground\">\n          {description}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,UACA,gBACA,cACA,aACA,cACA,mBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,CAAC,GAAY,KAAiB,EAAM,SACxC,MAAS,SAAS,KAAK,CACzB;CAIA,EAAM,gBAAgB;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAc,CAAS;CAE3B,GAAG;EAAC;EAAW;EAAa;CAAI,CAAC;CAMjC,IAAM,IACJ,MAAS,SACL,KAAA,IACA,IACI,EAAK,SAAS,MAAiC,KACjD;CAER,SAAS,EAAa,GAAwC;EAC5D,IAAM,IACJ,MAAS,SAAU,EAAE,OAAO,QAAQ,IAAI,QAAQ,KAAM,EAAE,OAAO;EACjE,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAEjC,EAAc,CAAQ,GACtB,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAGA,SAAS,IAAa;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAEA,SAAS,EAAc,GAA0C;EAC/D,AAAI,EAAE,QAAQ,WAAW,CAAC,KAAe,MAAS,UAChD,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,WAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EAAK,gBAAc;EAAU,WAAU;YAAvC;GACG,KAAS,kBAAC,GAAD;IAAO,SAAS;cAAU;GAAa,CAAA;GACjD,kBAAC,GAAD;IACE,IAAI;IACE;IACN,OAAO;IACP,UAAU;IACV,QAAQ;IACR,WAAW;IACE;IACH;IACC;IACX,gBAAc,KAAW,KAAA;IACzB,oBAAkB,IAAc,GAAG,EAAQ,SAAS,KAAA;GACrD,CAAA;GACA,KACC,kBAAC,KAAD;IAAG,IAAI,GAAG,EAAQ;IAAQ,WAAU;cACjC;GACA,CAAA;EAEF;;AAET"}

package/cards/input/input.types.d.ts

@@ -4,15 +4,23 @@ export declare const PI_INPUT_ACTION: {
     CHANGED: string;
     COMMITTED: string;
 };
+export declare const onInputChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiInputChangedEvent>) => void;
+/** @deprecated Use `onInputChanged` instead. */
 export declare const onPiInputChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiInputChangedEvent>) => void;
 /**
  * Subscribe to "committed" events — fired when the user finishes editing
- * (blur or Enter key).  Unlike `onChanged` (which fires on every keystroke),
- * `onCommitted` only fires once per editing session, making it the preferred
+ * (blur or Enter key).  Unlike `onInputChanged` (which fires on every keystroke),
+ * `onInputCommitted` only fires once per editing session, making it the preferred
  * handler for controlled inputs that trigger expensive downstream work.
  */
+export declare const onInputCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiInputCommittedEvent>) => void;
+/** @deprecated Use `onInputCommitted` instead. */
 export declare const onPiInputCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiInputCommittedEvent>) => void;

package/cards/input/input.types.js

@@ -1,7 +1,7 @@
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/input/input.types.ts
-var r = "pi/input", i = e(r), a = n(r, ["changed", "committed"]), o = t(a.CHANGED), s = t(a.COMMITTED);
+var r = "pi/input", i = e(r), a = n(r, ["changed", "committed"]), o = t(a.CHANGED), s = o, c = t(a.COMMITTED), l = c;
 //#endregion
-export { a as PI_INPUT_ACTION, r as PI_INPUT_CARD, i as PiInput, o as onPiInputChanged, s as onPiInputCommitted };
+export { a as PI_INPUT_ACTION, r as PI_INPUT_CARD, i as PiInput, o as onInputChanged, c as onInputCommitted, s as onPiInputChanged, l as onPiInputCommitted };
 
 //# sourceMappingURL=input.types.js.map

package/cards/input/input.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.js","names":[],"sources":["../../../src/cards/input/input.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_INPUT_CARD = \"pi/input\";\n\nexport const PiInput = createCardDeclaration<PiInputProps, PiInputEvents>(\n  PI_INPUT_CARD,\n);\n\nexport const PI_INPUT_ACTION = registerActions(PI_INPUT_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onPiInputChanged = createOnAction<PiInputChangedEvent>(\n  PI_INPUT_ACTION.CHANGED,\n);\n\n/**\n * Subscribe to \"committed\" events — fired when the user finishes editing\n * (blur or Enter key).  Unlike `onChanged` (which fires on every keystroke),\n * `onCommitted` only fires once per editing session, making it the preferred\n * handler for controlled inputs that trigger expensive downstream work.\n */\nexport const onPiInputCommitted = createOnAction<PiInputCommittedEvent>(\n  PI_INPUT_ACTION.COMMITTED,\n);\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiInputProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form state and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  value?: string;\n\n  /**\n   * HTML input type.\n   * Common values: \"text\" | \"email\" | \"password\" | \"number\" | \"search\" |\n   * \"url\" | \"tel\" | \"date\" | \"file\".\n   * Defaults to \"text\".\n   */\n  type?: string;\n\n  /** Placeholder text shown when the input is empty. */\n  placeholder?: string;\n\n  /** When true, the input is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered in a `<label>` element above the input.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n\n  /**\n   * Optional helper / description text rendered below the input.\n   * Use this for hints, formatting guidance, or validation feedback.\n   */\n  description?: string;\n\n  /** Extra Tailwind / CSS classes forwarded to the underlying <input> element. */\n  className?: string;\n};\n\nexport type PiInputChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New value after the change. */\n  value: string;\n};\n\n/**\n * Payload for the `onCommitted` event (blur / Enter key).\n * Same shape as `PiInputChangedEvent`.\n */\nexport type PiInputCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final committed value. */\n  value: string;\n};\n\nexport type PiInputEvents = {\n  /** Fires on every keystroke. */\n  onChanged: PiInputChangedEvent;\n  /**\n   * Fires once when the user finishes editing (blur or Enter key).\n   * Use this instead of `onChanged` when each change triggers expensive\n   * downstream work (e.g. rebuilding a panel).\n   */\n  onCommitted: PiInputCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAgB,YAEhB,IAAU,EACrB,CACF,GAEa,IAAkB,EAAgB,GAAe,CAC5D,WACA,WACF,CAAC,GAEY,IAAmB,EAC9B,EAAgB,OAClB,GAQa,IAAqB,EAChC,EAAgB,SAClB"}
+{"version":3,"file":"input.types.js","names":[],"sources":["../../../src/cards/input/input.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_INPUT_CARD = \"pi/input\";\n\nexport const PiInput = createCardDeclaration<PiInputProps, PiInputEvents>(\n  PI_INPUT_CARD,\n);\n\nexport const PI_INPUT_ACTION = registerActions(PI_INPUT_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onInputChanged = createOnAction<PiInputChangedEvent>(\n  PI_INPUT_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onInputChanged` instead. */\nexport const onPiInputChanged = onInputChanged;\n\n/**\n * Subscribe to \"committed\" events — fired when the user finishes editing\n * (blur or Enter key).  Unlike `onInputChanged` (which fires on every keystroke),\n * `onInputCommitted` only fires once per editing session, making it the preferred\n * handler for controlled inputs that trigger expensive downstream work.\n */\nexport const onInputCommitted = createOnAction<PiInputCommittedEvent>(\n  PI_INPUT_ACTION.COMMITTED,\n);\n\n/** @deprecated Use `onInputCommitted` instead. */\nexport const onPiInputCommitted = onInputCommitted;\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiInputProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form state and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  value?: string;\n\n  /**\n   * HTML input type.\n   * Common values: \"text\" | \"email\" | \"password\" | \"number\" | \"search\" |\n   * \"url\" | \"tel\" | \"date\" | \"file\".\n   * Defaults to \"text\".\n   */\n  type?: string;\n\n  /** Placeholder text shown when the input is empty. */\n  placeholder?: string;\n\n  /** When true, the input is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered in a `<label>` element above the input.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n\n  /**\n   * Optional helper / description text rendered below the input.\n   * Use this for hints, formatting guidance, or validation feedback.\n   */\n  description?: string;\n\n  /** Extra Tailwind / CSS classes forwarded to the underlying <input> element. */\n  className?: string;\n};\n\nexport type PiInputChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New value after the change. */\n  value: string;\n};\n\n/**\n * Payload for the `onCommitted` event (blur / Enter key).\n * Same shape as `PiInputChangedEvent`.\n */\nexport type PiInputCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final committed value. */\n  value: string;\n};\n\nexport type PiInputEvents = {\n  /** Fires on every keystroke. */\n  onChanged: PiInputChangedEvent;\n  /**\n   * Fires once when the user finishes editing (blur or Enter key).\n   * Use this instead of `onChanged` when each change triggers expensive\n   * downstream work (e.g. rebuilding a panel).\n   */\n  onCommitted: PiInputCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAgB,YAEhB,IAAU,EACrB,CACF,GAEa,IAAkB,EAAgB,GAAe,CAC5D,WACA,WACF,CAAC,GAEY,IAAiB,EAC5B,EAAgB,OAClB,GAGa,IAAmB,GAQnB,IAAmB,EAC9B,EAAgB,SAClB,GAGa,IAAqB"}

package/cards/list/list.types.js

@@ -1,4 +1,5 @@
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+import "react";
 //#region src/cards/list/list.types.ts
 var r = "shad/list", i = e(r), a = n(r, ["item_clicked"]), o = t(a.ITEM_CLICKED);
 //#endregion