@pihanga2/shadcn 0.2.2 → 0.2.4

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

@@ -208,12 +208,87 @@ export type GraphinProps = {
      * @default "style"
      */
     nodeStyleKey?: string;
+    /**
+     * Legend overlay rendered as an absolutely-positioned panel over the graph.
+     *
+     * Two content modes:
+     * - **`items`** — built-in swatch list (colour + shape + label).
+     * - **`cardName`** — any registered Pihanga card used as a fully custom legend.
+     *
+     * @example
+     * ```ts
+     * legend: {
+     *   position: "bottom-left",
+     *   items: [
+     *     { label: "Gateway", fill: "#e67e22", shape: "star" },
+     *     { label: "Service",  fill: "#2980b9", shape: "circle" },
+     *     { label: "Database", fill: "#8e44ad", shape: "rect" },
+     *   ],
+     * }
+     * ```
+     */
+    legend?: GraphinLegend;
     style?: {
         root?: React.CSSProperties;
         item?: React.CSSProperties;
     };
     className?: string;
 };
+/**
+ * A single item in the built-in legend.
+ */
+export type GraphinLegendItem = {
+    /** Text label displayed beside the shape swatch. */
+    label: string;
+    /** Fill colour of the swatch.  Defaults to `"#4793AF"`. */
+    fill?: string;
+    /** Stroke / border colour of the swatch. */
+    stroke?: string;
+    /**
+     * Shape of the swatch marker.  Mirrors the values accepted by `nodeStyles`.
+     * Use `"line"` for edge/connector legend entries.
+     * @default "circle"
+     */
+    shape?: "circle" | "rect" | "diamond" | "star" | "triangle" | "hexagon" | "ellipse" | "line";
+};
+/**
+ * Legend overlay configuration.
+ *
+ * Two mutually-exclusive content modes:
+ * - **`items`** — serialisable list of `{ label, fill, stroke, shape }` entries
+ *   rendered as a built-in swatch list.
+ * - **`cardName`** — name of any registered Pihanga card whose component is
+ *   rendered as the legend body.  Takes priority over `items` when both are set.
+ *   Use this for fully custom legends (images, interactive filters, etc.).
+ */
+export type GraphinLegend = {
+    /**
+     * Built-in legend items — each rendered as a small SVG shape swatch + label.
+     * Ignored when `cardName` is also provided.
+     */
+    items?: GraphinLegendItem[];
+    /**
+     * Registered pihanga card name to use as the legend body.
+     * The card is rendered inside the legend wrapper div; it receives no special
+     * context props — source its data from Redux state as usual.
+     */
+    cardName?: string;
+    /**
+     * Corner of the graph container where the legend is anchored.
+     * @default "bottom-left"
+     */
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Extra CSS class name(s) applied to the legend wrapper `<div>`.
+     * @example "rounded-xl shadow-lg"
+     */
+    className?: string;
+    /**
+     * Inline style overrides for the legend wrapper `<div>`.
+     * Merged on top of the built-in positioning styles.
+     */
+    style?: React.CSSProperties;
+};
 export type GraphinTooltip = {
     /** Registered card name whose component is rendered inside the floating panel. */
     node?: string;
@@ -331,6 +406,7 @@ export declare const GRAPHIN_OP_ACTION: {
     CLEAR_NODE_STYLES: string;
     ZOOM_TO_NODE: string;
     UPDATE_NODE_STYLE_MAP: string;
+    FIT_VIEW: string;
 };
 /**
  * Payload for `GRAPHIN_OP_ACTION.SET_NODE_STYLES`.
@@ -470,6 +546,36 @@ export type GraphinUpdateNodeStyleMapAction = {
  * ```
  */
 export declare const dispatchGraphinUpdateNodeStyleMap: (dispatch: DispatchF, payload: GraphinUpdateNodeStyleMapAction) => string;
+/**
+ * Payload for `GRAPHIN_OP_ACTION.FIT_VIEW`.
+ *
+ * Fits (and optionally re-centres) the entire graph within the visible
+ * container — the same effect as the initial `autoFit: 'view'`.
+ */
+export type GraphinFitViewAction = {
+    cardName: string;
+    /**
+     * - `"view"` — zoom + pan so all nodes fit inside the viewport (default).
+     * - `"center"` — pan to centre the graph without changing the zoom level.
+     */
+    mode?: "view" | "center";
+};
+/**
+ * Fit the entire graph into the available canvas area.
+ *
+ * - `mode: "view"` (default) — zoom + pan so every node is visible.
+ * - `mode: "center"` — pan to the graph centroid without changing zoom.
+ *
+ * @example
+ * ```ts
+ * // Zoom-to-fit after the user has panned/zoomed away
+ * dispatchGraphinFitView(dispatch, { cardName: "myGraph" });
+ *
+ * // Re-centre without changing zoom
+ * dispatchGraphinFitView(dispatch, { cardName: "myGraph", mode: "center" });
+ * ```
+ */
+export declare const dispatchGraphinFitView: (dispatch: DispatchF, payload: GraphinFitViewAction) => string;
 export type { ReduxAction };
 export type GraphinEvents = {
     /** Fired when the pointer enters a node */

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { GraphinLegend } from './graphin.types';
+export declare function LegendOverlay({ legend, parentCard, }: {
+    legend: GraphinLegend;
+    parentCard: string;
+}): React.ReactNode;

package/cards/input/input.component.js

@@ -1,8 +1,8 @@
 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 "@pihanga2/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/cards/input/input.component.tsx
 var o = (o) => {

package/cards/jsonViewer/index.js

@@ -0,0 +1,13 @@
+import { JSON_VIEWER_ACTION as e, JSON_VIEWER_CARD as t, JsonViewer as n, onJsonViewerClicked as r, onJsonViewerCopied as i } from "./jsonViewer.types.js";
+import { JsonViewerComponent as a } from "./jsonViewer.component.js";
+import { actionTypesToEvents as o, registerCardComponent as s } from "@pihanga2/core";
+//#region src/cards/jsonViewer/index.ts
+s({
+	name: t,
+	component: a,
+	events: o(e)
+});
+//#endregion
+export { e as JSON_VIEWER_ACTION, t as JSON_VIEWER_CARD, n as JsonViewer, r as onJsonViewerClicked, i as onJsonViewerCopied };
+
+//# sourceMappingURL=index.js.map

package/cards/jsonViewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/jsonViewer/index.ts"],"sourcesContent":["import {registerCardComponent, actionTypesToEvents} from \"@pihanga2/core\";\n\nimport {JSON_VIEWER_CARD, JSON_VIEWER_ACTION} from \"./jsonViewer.types\";\nimport {JsonViewerComponent} from \"./jsonViewer.component\";\n\nexport * from \"./jsonViewer.types\";\n\nregisterCardComponent({\n  name: JSON_VIEWER_CARD,\n  component: JsonViewerComponent,\n  events: actionTypesToEvents(JSON_VIEWER_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAkB;AAChD,CAAC"}

package/cards/jsonViewer/jsonViewer.component.js

@@ -0,0 +1,89 @@
+import { getIconElement as e } from "../icons.js";
+/* empty css                                                 */
+/* empty css           */
+import { useCallback as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Check as s, Copy as c } from "lucide-react";
+import { JsonView as l, allExpanded as u, defaultStyles as d } from "react-json-view-lite";
+//#region src/cards/jsonViewer/jsonViewer.component.tsx
+function f(e) {
+	if (e === !1) return u;
+	if (e === !0) return () => !1;
+	let t = e ?? 1;
+	return (e) => e < t;
+}
+var p = {
+	...d,
+	container: "jv-container",
+	basicChildStyle: "jv-basic-child",
+	label: "jv-label",
+	clickableLabel: "jv-clickable-label",
+	nullValue: "jv-null",
+	undefinedValue: "jv-undefined",
+	numberValue: "jv-number",
+	stringValue: "jv-string",
+	booleanValue: "jv-boolean",
+	otherValue: "jv-other",
+	punctuation: "jv-punctuation",
+	expandIcon: "jv-expand-icon",
+	collapseIcon: "jv-collapse-icon",
+	collapsedContent: "jv-collapsed-content",
+	childFieldsContainer: "jv-child-fields-container"
+};
+function m(t) {
+	if (t) {
+		let n = e(t);
+		if (n) return n;
+	}
+	return c;
+}
+async function h(e) {
+	if (typeof ClipboardItem < "u") {
+		let t = new Blob([e], { type: "text/plain" });
+		await navigator.clipboard.write([new ClipboardItem({ "text/plain": t })]);
+	} else await navigator.clipboard.writeText(e);
+}
+var g = (e) => {
+	let { source: c, collapsed: u = 1, modifyFn: d, style: g, className: _, cardName: v, _cls: y, copyToClipboard: b, copyIcon: x, onCopied: S } = e, C = r(null), [w, T] = i(!1);
+	n(() => {
+		d && d(c, C.current);
+	}, [d, c]);
+	let E = f(u), D = t(async () => {
+		let e = JSON.stringify(c, null, 2), t = !1;
+		try {
+			await h(e), t = !0, T(!0), setTimeout(() => T(!1), 2e3);
+		} catch (e) {
+			console.warn("[JsonViewer] clipboard write failed:", e);
+		}
+		S?.({ success: t });
+	}, [c, S]), O = m(x), k = s;
+	return /* @__PURE__ */ o("div", {
+		className: [y("root", _), "jv-wrapper"].join(" "),
+		ref: C,
+		"data-pihanga": v,
+		style: g,
+		children: [b && /* @__PURE__ */ a("button", {
+			type: "button",
+			"aria-label": w ? "Copied!" : "Copy JSON to clipboard",
+			title: w ? "Copied!" : "Copy JSON to clipboard",
+			className: `jv-copy-btn${w ? " jv-copy-btn--done" : ""}`,
+			onClick: D,
+			children: w ? /* @__PURE__ */ a(k, {
+				size: 13,
+				strokeWidth: 2.5
+			}) : /* @__PURE__ */ a(O, {
+				size: 13,
+				strokeWidth: 2
+			})
+		}), /* @__PURE__ */ a(l, {
+			data: c,
+			shouldExpandNode: E,
+			style: p,
+			clickToExpandNode: !0
+		})]
+	});
+};
+//#endregion
+export { g as JsonViewerComponent };
+
+//# sourceMappingURL=jsonViewer.component.js.map

package/cards/jsonViewer/jsonViewer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonViewer.component.js","names":[],"sources":["../../../src/cards/jsonViewer/jsonViewer.component.tsx"],"sourcesContent":["import React, {useLayoutEffect, useRef, useState, useCallback} from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {JsonView, allExpanded, defaultStyles} from \"react-json-view-lite\";\nimport {Copy, Check} from \"lucide-react\";\nimport \"react-json-view-lite/dist/index.css\";\nimport \"./jsonViewer.css\";\n\nimport {getIconElement} from \"@/cards/icons\";\nimport type {JsonViewerProps, JsonViewerEvents} from \"./jsonViewer.types\";\n\n/**\n * Converts the `collapsed` prop (from the react-json-view API) into a\n * `shouldExpandNode` predicate for react-json-view-lite.\n *\n * - `false`  → expand everything\n * - `true`   → collapse everything\n * - number N → expand nodes at depth < N (root is depth 0)\n */\nfunction toShouldExpandNode(\n  collapsed: boolean | number | undefined,\n): (level: number) => boolean {\n  if (collapsed === false) return allExpanded;\n  if (collapsed === true) return () => false;\n  // default: collapsed = 1 → only root level expanded\n  const depth = collapsed ?? 1;\n  return (level: number) => level < depth;\n}\n\n/**\n * Compact, code-editor style for react-json-view-lite.\n *\n * The expand/collapse icon is positioned absolutely inside a fixed left gutter\n * (via padding-left on `.jv-basic-child`), so the opening `{` and closing `}`\n * always start at the same column — fixing the original misalignment where the\n * icon pushed the open-brace further right than the close-brace.\n */\nconst compactStyles = {\n  // spread defaultStyles first to satisfy required fields (ariaLables, stringifyStringValues, …)\n  ...defaultStyles,\n  container: \"jv-container\",\n  basicChildStyle: \"jv-basic-child\",\n  label: \"jv-label\",\n  clickableLabel: \"jv-clickable-label\",\n  nullValue: \"jv-null\",\n  undefinedValue: \"jv-undefined\",\n  numberValue: \"jv-number\",\n  stringValue: \"jv-string\",\n  booleanValue: \"jv-boolean\",\n  otherValue: \"jv-other\",\n  punctuation: \"jv-punctuation\",\n  expandIcon: \"jv-expand-icon\",\n  collapseIcon: \"jv-collapse-icon\",\n  collapsedContent: \"jv-collapsed-content\",\n  childFieldsContainer: \"jv-child-fields-container\",\n};\n\n/**\n * Resolve the icon element to use for the copy button.\n *\n * Resolution order:\n *   1. `iconName` looked up in the global icon registry\n *   2. Lucide `Copy` as the built-in fallback\n */\nfunction resolveCopyIcon(iconName?: string): React.ElementType {\n  if (iconName) {\n    const registered = getIconElement(iconName);\n    if (registered) return registered;\n  }\n  return Copy;\n}\n\n/** Write `text` to the clipboard, preferring `ClipboardItem` for explicit MIME. */\nasync function writeToClipboard(text: string): Promise<void> {\n  if (typeof ClipboardItem !== \"undefined\") {\n    const blob = new Blob([text], {type: \"text/plain\"});\n    await navigator.clipboard.write([new ClipboardItem({\"text/plain\": blob})]);\n  } else {\n    // Fallback for browsers without ClipboardItem support\n    await navigator.clipboard.writeText(text);\n  }\n}\n\nexport const JsonViewerComponent = (\n  props: PiCardProps<JsonViewerProps, JsonViewerEvents>,\n): React.ReactNode => {\n  const {\n    source,\n    collapsed = 1,\n    modifyFn,\n    style,\n    className,\n    cardName,\n    _cls,\n    copyToClipboard,\n    copyIcon,\n    onCopied,\n  } = props;\n\n  const elRef = useRef<HTMLDivElement>(null);\n  const [copied, setCopied] = useState(false);\n\n  useLayoutEffect(() => {\n    if (modifyFn) {\n      modifyFn(source, elRef.current);\n    }\n  }, [modifyFn, source]);\n\n  const shouldExpandNode = toShouldExpandNode(collapsed);\n\n  const handleCopy = useCallback(async () => {\n    const text = JSON.stringify(source, null, 2);\n    let success = false;\n    try {\n      await writeToClipboard(text);\n      success = true;\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.warn(\"[JsonViewer] clipboard write failed:\", err);\n    }\n    onCopied?.({success});\n  }, [source, onCopied]);\n\n  const CopyIconEl = resolveCopyIcon(copyIcon);\n  const ConfirmIconEl = Check;\n\n  return (\n    <div\n      className={[_cls(\"root\", className), \"jv-wrapper\"].join(\" \")}\n      ref={elRef}\n      data-pihanga={cardName}\n      style={style as React.CSSProperties | undefined}\n    >\n      {copyToClipboard && (\n        <button\n          type=\"button\"\n          aria-label={copied ? \"Copied!\" : \"Copy JSON to clipboard\"}\n          title={copied ? \"Copied!\" : \"Copy JSON to clipboard\"}\n          className={`jv-copy-btn${copied ? \" jv-copy-btn--done\" : \"\"}`}\n          onClick={handleCopy}\n        >\n          {copied ? (\n            <ConfirmIconEl size={13} strokeWidth={2.5} />\n          ) : (\n            <CopyIconEl size={13} strokeWidth={2} />\n          )}\n        </button>\n      )}\n      <JsonView\n        data={source as object | unknown[]}\n        shouldExpandNode={shouldExpandNode}\n        style={compactStyles}\n        clickToExpandNode\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,SAAS,EACP,GAC4B;CAC5B,IAAI,MAAc,IAAO,OAAO;CAChC,IAAI,MAAc,IAAM,aAAa;CAErC,IAAM,IAAQ,KAAa;CAC3B,QAAQ,MAAkB,IAAQ;AACpC;AAUA,IAAM,IAAgB;CAEpB,GAAG;CACH,WAAW;CACX,iBAAiB;CACjB,OAAO;CACP,gBAAgB;CAChB,WAAW;CACX,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,cAAc;CACd,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,cAAc;CACd,kBAAkB;CAClB,sBAAsB;AACxB;AASA,SAAS,EAAgB,GAAsC;CAC7D,IAAI,GAAU;EACZ,IAAM,IAAa,EAAe,CAAQ;EAC1C,IAAI,GAAY,OAAO;CACzB;CACA,OAAO;AACT;AAGA,eAAe,EAAiB,GAA6B;CAC3D,IAAI,OAAO,gBAAkB,KAAa;EACxC,IAAM,IAAO,IAAI,KAAK,CAAC,CAAI,GAAG,EAAC,MAAM,aAAY,CAAC;EAClD,MAAM,UAAU,UAAU,MAAM,CAAC,IAAI,cAAc,EAAC,cAAc,EAAI,CAAC,CAAC,CAAC;CAC3E,OAEE,MAAM,UAAU,UAAU,UAAU,CAAI;AAE5C;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,WACA,eAAY,GACZ,aACA,UACA,cACA,aACA,SACA,oBACA,aACA,gBACE,GAEE,IAAQ,EAAuB,IAAI,GACnC,CAAC,GAAQ,KAAa,EAAS,EAAK;CAE1C,QAAsB;EACpB,AAAI,KACF,EAAS,GAAQ,EAAM,OAAO;CAElC,GAAG,CAAC,GAAU,CAAM,CAAC;CAErB,IAAM,IAAmB,EAAmB,CAAS,GAE/C,IAAa,EAAY,YAAY;EACzC,IAAM,IAAO,KAAK,UAAU,GAAQ,MAAM,CAAC,GACvC,IAAU;EACd,IAAI;GAIF,AAHA,MAAM,EAAiB,CAAI,GAC3B,IAAU,IACV,EAAU,EAAI,GACd,iBAAiB,EAAU,EAAK,GAAG,GAAI;EACzC,SAAS,GAAK;GACZ,QAAQ,KAAK,wCAAwC,CAAG;EAC1D;EACA,IAAW,EAAC,WAAO,CAAC;CACtB,GAAG,CAAC,GAAQ,CAAQ,CAAC,GAEf,IAAa,EAAgB,CAAQ,GACrC,IAAgB;CAEtB,OACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAK,QAAQ,CAAS,GAAG,YAAY,EAAE,KAAK,GAAG;EAC3D,KAAK;EACL,gBAAc;EACP;YAJT,CAMG,KACC,kBAAC,UAAD;GACE,MAAK;GACL,cAAY,IAAS,YAAY;GACjC,OAAO,IAAS,YAAY;GAC5B,WAAW,cAAc,IAAS,uBAAuB;GACzD,SAAS;aAER,IACC,kBAAC,GAAD;IAAe,MAAM;IAAI,aAAa;GAAM,CAAA,IAE5C,kBAAC,GAAD;IAAY,MAAM;IAAI,aAAa;GAAI,CAAA;EAEnC,CAAA,GAEV,kBAAC,GAAD;GACE,MAAM;GACY;GAClB,OAAO;GACP,mBAAA;EACD,CAAA,CACE;;AAET"}

package/cards/jsonViewer/jsonViewer.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/jsonViewer/jsonViewer.types.ts
+var r = "json-viewer", i = e(r), a = n(r, ["clicked", "copied"]), o = t(a.CLICKED), s = t(a.COPIED);
+//#endregion
+export { a as JSON_VIEWER_ACTION, r as JSON_VIEWER_CARD, i as JsonViewer, o as onJsonViewerClicked, s as onJsonViewerCopied };
+
+//# sourceMappingURL=jsonViewer.types.js.map

package/cards/jsonViewer/jsonViewer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonViewer.types.js","names":[],"sources":["../../../src/cards/jsonViewer/jsonViewer.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const JSON_VIEWER_CARD = \"json-viewer\";\n\nexport const JsonViewer = createCardDeclaration<\n  JsonViewerProps,\n  JsonViewerEvents\n>(JSON_VIEWER_CARD);\n\nexport const JSON_VIEWER_ACTION = registerActions(JSON_VIEWER_CARD, [\n  \"clicked\",\n  \"copied\",\n]);\n\nexport const onJsonViewerClicked = createOnAction<ClickedEvent>(\n  JSON_VIEWER_ACTION.CLICKED,\n);\n\nexport const onJsonViewerCopied = createOnAction<CopiedEvent>(\n  JSON_VIEWER_ACTION.COPIED,\n);\n\nexport type JsonViewerProps<S = object> = {\n  /** The JSON value to display. */\n  source: unknown;\n  /**\n   * Theme name. Maps loosely to a visual style.\n   * Use \"monokai\", \"solarized\", \"ocean\", etc. (visual only — actual theming\n   * is done via className / global CSS since react-json-view-lite uses CSS\n   * variables rather than named themes).\n   */\n  theme?: string;\n  iconStyle?: \"circle\" | \"triangle\" | \"square\";\n  /**\n   * When `true`, all nodes are collapsed.\n   * When `false`, all nodes are expanded.\n   * When a number N, nodes at depth >= N are collapsed (root is depth 0).\n   * Default: 1 (expand root only).\n   */\n  collapsed?: boolean | number;\n  /** When `true`, a click-to-expand interaction is enabled on node labels. */\n  enableClipboard?: boolean;\n  /** When `true`, removes quotes from object keys in display. */\n  removeQuotesOnKeys?: boolean;\n  /** When `true`, objects and arrays are labelled with their size. */\n  displayObjectSize?: boolean;\n  /** When `true`, data-type labels prefix values. */\n  displayDataTypes?: boolean;\n  /**\n   * Called after the JSON is rendered, allowing post-render DOM modifications.\n   * Receives the raw `source` value and the container element.\n   */\n  modifyFn?: ModifyFn;\n\n  /**\n   * When `true`, shows a copy-to-clipboard icon button in the top-right\n   * corner of the viewer. Clicking it copies the pretty-printed JSON to the\n   * clipboard using `ClipboardItem` with `text/plain` MIME type.\n   */\n  copyToClipboard?: boolean;\n\n  /**\n   * Icon name resolved via the global icon registry (`getIconElement`).\n   * If omitted or the name is not registered, falls back to the Lucide\n   * `Copy` icon automatically.\n   *\n   * @example\n   * // Register your own icon first:\n   * registerIcon(\"my-copy\", MyCustomCopyIcon);\n   * // Then pass the name to the card:\n   * JsonViewer({ copyToClipboard: true, copyIcon: \"my-copy\", ... })\n   */\n  copyIcon?: string;\n\n  /** Inline style for the react-json-view-lite container. */\n  style?: S;\n  /** Additional CSS class for the outer wrapper. */\n  className?: string;\n};\n\nexport type ModifyFn = (source: unknown, el: HTMLElement | null) => void;\n\nexport type ClickedEvent = Record<string, never>;\n\nexport type CopiedEvent = {\n  /** `true` when the clipboard write succeeded, `false` on error. */\n  success: boolean;\n};\n\nexport type JsonViewerEvents = {\n  onClicked: ClickedEvent;\n  onCopied: CopiedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAmB,eAEnB,IAAa,EAGxB,CAAgB,GAEL,IAAqB,EAAgB,GAAkB,CAClE,WACA,QACF,CAAC,GAEY,IAAsB,EACjC,EAAmB,OACrB,GAEa,IAAqB,EAChC,EAAmB,MACrB"}

package/cards/list/list.component.js

@@ -1,9 +1,9 @@
-import { Badge as e } from "../../components/ui/badge.js";
-import { cn as t } from "../../lib/utils.js";
-import { getIcon as n } from "../icons.js";
+import { getIcon as e } from "../icons.js";
+import { Badge as t } from "../../components/ui/badge.js";
+import { cn as n } from "../../lib/utils.js";
 import { Avatar as r, AvatarFallback as i, AvatarImage as a } from "../../components/ui/avatar.js";
-import { Card as o } from "@pihanga2/core";
-import * as s from "react";
+import * as o from "react";
+import { Card as s } from "@pihanga2/core";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { ChevronDown as u } from "lucide-react";
 //#region src/cards/list/list.component.tsx
@@ -20,75 +20,75 @@ var d = {
 	md: "size-6",
 	lg: "size-7"
 };
-function m(s, u, d) {
-	if (!s) return null;
-	switch (s.type) {
+function m(o, u, d) {
+	if (!o) return null;
+	switch (o.type) {
 		case "icon": return /* @__PURE__ */ c("span", {
-			className: t("flex shrink-0 items-center [&>svg]:size-4", s.className),
-			children: n(s.name)
+			className: n("flex shrink-0 items-center [&>svg]:size-4", o.className),
+			children: e(o.name)
 		});
 		case "avatar": return /* @__PURE__ */ l(r, {
-			className: t(p[u], s.className),
-			children: [/* @__PURE__ */ c(a, { src: s.src }), /* @__PURE__ */ c(i, { children: s.fallback ?? "" })]
+			className: n(p[u], o.className),
+			children: [/* @__PURE__ */ c(a, { src: o.src }), /* @__PURE__ */ c(i, { children: o.fallback ?? "" })]
 		});
-		case "chip": return /* @__PURE__ */ c(e, {
+		case "chip": return /* @__PURE__ */ c(t, {
 			variant: "secondary",
-			className: s.className,
-			children: s.text
+			className: o.className,
+			children: o.text
 		});
-		case "card": return /* @__PURE__ */ c(o, {
-			cardName: s.cardName,
+		case "card": return /* @__PURE__ */ c(s, {
+			cardName: o.cardName,
 			parentCard: d
 		});
 		default: return null;
 	}
 }
-function h({ item: e, size: n, onItemClicked: r, cardName: i }) {
-	let [a, o] = s.useState(!1), p = !!e.nested?.length;
+function h({ item: e, size: t, onItemClicked: r, cardName: i }) {
+	let [a, s] = o.useState(!1), p = !!e.nested?.length;
 	function g() {
-		p ? o((e) => !e) : r({ itemID: e.id });
+		p ? s((e) => !e) : r({ itemID: e.id });
 	}
 	return /* @__PURE__ */ l("li", { children: [/* @__PURE__ */ l("button", {
 		type: "button",
-		className: t("flex w-full items-center rounded-sm outline-none transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-1 focus-visible:ring-ring", e.isSelected && "bg-accent text-accent-foreground font-medium", d[n], e.className),
+		className: n("flex w-full items-center rounded-sm outline-none transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-1 focus-visible:ring-ring", e.isSelected && "bg-accent text-accent-foreground font-medium", d[t], e.className),
 		onClick: g,
 		"aria-expanded": p ? a : void 0,
 		"data-selected": e.isSelected || void 0,
 		children: [
-			m(e.startDecorator, n, i),
+			m(e.startDecorator, t, i),
 			/* @__PURE__ */ l("span", {
 				className: "flex min-w-0 flex-1 flex-col items-start",
 				children: [/* @__PURE__ */ c("span", {
 					className: "truncate leading-none",
 					children: e.title
 				}), e.subTitle && /* @__PURE__ */ c("span", {
-					className: t("mt-0.5 truncate text-muted-foreground", f[n]),
+					className: n("mt-0.5 truncate text-muted-foreground", f[t]),
 					children: e.subTitle
 				})]
 			}),
-			!p && m(e.endDecorator, n, i),
-			p && /* @__PURE__ */ c(u, { className: t("ml-auto size-4 shrink-0 text-muted-foreground transition-transform duration-200", a && "rotate-180") })
+			!p && m(e.endDecorator, t, i),
+			p && /* @__PURE__ */ c(u, { className: n("ml-auto size-4 shrink-0 text-muted-foreground transition-transform duration-200", a && "rotate-180") })
 		]
 	}), p && a && /* @__PURE__ */ c("ul", {
-		className: t("ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-2", "list-none p-0", n === "lg" ? "ml-4 pl-3" : "ml-3 pl-2"),
-		children: e.nested.map((e, t) => /* @__PURE__ */ c(h, {
+		className: n("ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-2", "list-none p-0", t === "lg" ? "ml-4 pl-3" : "ml-3 pl-2"),
+		children: e.nested.map((e, n) => /* @__PURE__ */ c(h, {
 			item: e,
-			size: n,
+			size: t,
 			onItemClicked: r,
 			cardName: i
-		}, e.id ?? t))
+		}, e.id ?? n))
 	})] });
 }
 var g = (e) => {
-	let { items: n, size: r = "md", marker: i, className: a, style: o, onItemClicked: s, cardName: l } = e, u = {
+	let { items: t, size: r = "md", marker: i, className: a, style: o, onItemClicked: s, cardName: l } = e, u = {
 		...o,
 		...i && i !== "none" ? { listStyleType: i } : void 0
 	};
 	return /* @__PURE__ */ c("ul", {
-		className: t("flex flex-col gap-0.5 p-0", i && i !== "none" ? "list-inside" : "list-none", a),
+		className: n("flex flex-col gap-0.5 p-0", i && i !== "none" ? "list-inside" : "list-none", a),
 		style: u,
 		"data-pihanga": l,
-		children: n.map((e, t) => /* @__PURE__ */ c(h, {
+		children: t.map((e, t) => /* @__PURE__ */ c(h, {
 			item: e,
 			size: r,
 			onItemClicked: s,

package/cards/list/list.types.js

@@ -1,5 +1,5 @@
-import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 import "react";
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#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

package/cards/loadingOverlay/loadingOverlay.component.js

@@ -1,7 +1,7 @@
 import { Spinner as e } from "../../components/ui/spinner.js";
 /* empty css               */
-import { Card as t } from "@pihanga2/core";
 import "react";
+import { Card as t } from "@pihanga2/core";
 import n from "clsx";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/cards/loadingOverlay/loadingOverlay.component.tsx

package/cards/loadingSkeleton/loading-skeleton.component.js

@@ -1,5 +1,5 @@
-import { Card as e } from "@pihanga2/core";
 import "react";
+import { Card as e } from "@pihanga2/core";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/cards/loadingSkeleton/loading-skeleton.component.tsx
 var n = {

package/cards/pageWithNavbar/pageWithNavbar.component.js

@@ -1,25 +1,25 @@
-import { Button as e } from "../../components/ui/button.js";
-import { getIconElement as t } from "../icons.js";
-import { Sheet as n, SheetContent as r, SheetTrigger as i } from "../../components/ui/sheet.js";
-import { SCREEN_SIZE_ORDER as a, SCREEN_SIZE_WIDTHS as o, ScreenSize as s } from "../types.js";
+import { SCREEN_SIZE_ORDER as e, SCREEN_SIZE_WIDTHS as t, ScreenSize as n } from "../types.js";
+import { getIconElement as r } from "../icons.js";
+import { Button as i } from "../../components/ui/button.js";
+import { Sheet as a, SheetContent as o, SheetTrigger as s } from "../../components/ui/sheet.js";
 /* empty css               */
-import { Card as c } from "@pihanga2/core";
-import { useEffect as l, useRef as u, useState as d } from "react";
+import { useEffect as c, useRef as l, useState as u } from "react";
+import { Card as d } from "@pihanga2/core";
 import f from "clsx";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { Menu as h } from "lucide-react";
 //#region src/cards/pageWithNavbar/pageWithNavbar.component.tsx
 function g() {
-	let e = typeof window < "u" ? window.innerWidth : 0;
-	for (let t = a.length - 1; t >= 0; t--) {
-		let n = a[t];
-		if (e >= o[n]) return n;
+	let r = typeof window < "u" ? window.innerWidth : 0;
+	for (let n = e.length - 1; n >= 0; n--) {
+		let i = e[n];
+		if (r >= t[i]) return i;
 	}
-	return s.XS;
+	return n.XS;
 }
 function _() {
-	let [e, t] = d(g);
-	return l(() => {
+	let [e, t] = u(g);
+	return c(() => {
 		let e = () => t(g());
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []), e;
@@ -27,19 +27,19 @@ function _() {
 function v(e) {
 	return typeof e == "object" && !!e;
 }
-function y(e, t) {
-	if (!e) return;
-	if (!v(e)) return e;
-	let n = a.indexOf(t);
-	for (let t = n; t >= 0; t--) {
-		let n = a[t];
-		if (Object.prototype.hasOwnProperty.call(e, n)) return e[n] ?? void 0;
+function y(t, n) {
+	if (!t) return;
+	if (!v(t)) return t;
+	let r = e.indexOf(n);
+	for (let n = r; n >= 0; n--) {
+		let r = e[n];
+		if (Object.prototype.hasOwnProperty.call(t, r)) return t[r] ?? void 0;
 	}
-	return e.default ?? void 0;
+	return t.default ?? void 0;
 }
-var b = (a) => {
-	let { title: o, iconName: s, main: d, footer: g, navLinks: v = [], scrollResetKey: b, headerLeftCard: S, headerRightCard: C, style: w, onNavigateTo: T, cardName: E } = a, D = _(), O = w ?? {}, k = u(null);
-	l(() => {
+var b = (e) => {
+	let { title: t, iconName: n, main: u, footer: g, navLinks: v = [], scrollResetKey: b, headerLeftCard: S, headerRightCard: C, style: w, onNavigateTo: T, cardName: E } = e, D = _(), O = w ?? {}, k = l(null);
+	c(() => {
 		k.current?.scrollTo({
 			top: 0,
 			behavior: "auto"
@@ -47,15 +47,15 @@ var b = (a) => {
 	}, [b]);
 	let A = y(S, D), j = y(C, D), M = v.length > 0;
 	function N({ className: e }) {
-		let n = s ? t(s) : void 0;
+		let i = n ? r(n) : void 0;
 		return /* @__PURE__ */ m("div", {
 			className: f("title-section", e),
-			children: [n && /* @__PURE__ */ p(n, {
+			children: [i && /* @__PURE__ */ p(i, {
 				className: "title-icon",
 				"aria-hidden": !0
 			}), /* @__PURE__ */ p("span", {
 				className: "title-text",
-				children: o
+				children: t
 			})]
 		});
 	}
@@ -63,18 +63,18 @@ var b = (a) => {
 		return /* @__PURE__ */ m("nav", {
 			className: "nav-md",
 			"aria-label": "Main navigation",
-			children: [/* @__PURE__ */ p(N, {}), v.map((t) => /* @__PURE__ */ p(e, {
-				onClick: () => T({ id: t.id }),
+			children: [/* @__PURE__ */ p(N, {}), v.map((e) => /* @__PURE__ */ p(i, {
+				onClick: () => T({ id: e.id }),
 				variant: "link",
 				className: "nav-link",
-				children: t.title ?? x(t.id)
-			}, t.id))]
+				children: e.title ?? x(e.id)
+			}, e.id))]
 		});
 	}
 	function F() {
-		return /* @__PURE__ */ m(n, { children: [/* @__PURE__ */ p(i, {
+		return /* @__PURE__ */ m(a, { children: [/* @__PURE__ */ p(s, {
 			asChild: !0,
-			children: /* @__PURE__ */ p(e, {
+			children: /* @__PURE__ */ p(i, {
 				variant: "outline",
 				size: "icon",
 				className: "shrink-0 md:hidden",
@@ -84,17 +84,17 @@ var b = (a) => {
 					"aria-hidden": !0
 				})
 			})
-		}), /* @__PURE__ */ p(r, {
+		}), /* @__PURE__ */ p(o, {
 			side: "left",
 			children: /* @__PURE__ */ m("nav", {
 				className: "nav-sm",
 				"aria-label": "Mobile navigation",
-				children: [/* @__PURE__ */ p(N, {}), v.map((t) => /* @__PURE__ */ p(e, {
-					onClick: () => T({ id: t.id }),
+				children: [/* @__PURE__ */ p(N, {}), v.map((e) => /* @__PURE__ */ p(i, {
+					onClick: () => T({ id: e.id }),
 					variant: "link",
 					className: "nav-link",
-					children: t.title ?? x(t.id)
-				}, t.id))]
+					children: e.title ?? x(e.id)
+				}, e.id))]
 			})
 		})] });
 	}
@@ -115,10 +115,10 @@ var b = (a) => {
 						}),
 						/* @__PURE__ */ m("div", {
 							className: "header-actions",
-							children: [A && /* @__PURE__ */ p(c, {
+							children: [A && /* @__PURE__ */ p(d, {
 								cardName: A,
 								parentCard: E
-							}), j && /* @__PURE__ */ p(c, {
+							}), j && /* @__PURE__ */ p(d, {
 								cardName: j,
 								parentCard: E
 							})]
@@ -128,14 +128,14 @@ var b = (a) => {
 				/* @__PURE__ */ p("main", {
 					className: f("main", O.main),
 					ref: k,
-					children: /* @__PURE__ */ p(c, {
-						cardName: d,
+					children: /* @__PURE__ */ p(d, {
+						cardName: u,
 						parentCard: E
 					})
 				}),
 				g && /* @__PURE__ */ p("footer", {
 					className: f("footer", O.footer),
-					children: /* @__PURE__ */ p(c, {
+					children: /* @__PURE__ */ p(d, {
 						cardName: g,
 						parentCard: E
 					})

package/cards/resizable/index.js

@@ -0,0 +1,12 @@
+import { DefResizableHandle as e, RESIZABLE_CARD as t, Resizable as n, SdResizable as r } from "./resizable.types.js";
+import { ResizableComponent as i } from "./resizable.component.js";
+import { registerCardComponent as a } from "@pihanga2/core";
+//#region src/cards/resizable/index.ts
+a({
+	name: t,
+	component: i
+});
+//#endregion
+export { e as DefResizableHandle, t as RESIZABLE_CARD, n as Resizable, r as SdResizable };
+
+//# sourceMappingURL=index.js.map

package/cards/resizable/index.js.map

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