@pihanga2/shadcn 0.2.0 → 0.2.1

package/cards/conditional/conditional.component.js

@@ -1,15 +1,23 @@
-import { Card as e } from "@pihanga2/core";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { useBreakpoint as e, useContainerBreakpoint as t } from "../../components/hooks/use-breakpoint.js";
+import { Card as n } from "@pihanga2/core";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/conditional/conditional.component.tsx
-var n = (n) => {
-	let { cardName: r, show: i, content: a } = n;
-	return i ? /* @__PURE__ */ t(e, {
-		cardName: a,
-		parentCard: r
+var a = (a) => {
+	let { cardName: o, show: s = !0, showOn: c, containerQuery: l = !1, content: u } = a, d = r.useRef(null), f = e(l ? void 0 : c), p = t(l ? c : void 0, d), m = s && (l ? p : f);
+	return l ? /* @__PURE__ */ i("div", {
+		ref: d,
+		style: { width: "100%" },
+		children: m && /* @__PURE__ */ i(n, {
+			cardName: u,
+			parentCard: o
+		})
+	}) : m ? /* @__PURE__ */ i(n, {
+		cardName: u,
+		parentCard: o
 	}) : null;
 };
 //#endregion
-export { n as ConditionalComponent };
+export { a as ConditionalComponent };
 
 //# sourceMappingURL=conditional.component.js.map

package/cards/conditional/conditional.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditional.component.js","names":[],"sources":["../../../src/cards/conditional/conditional.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {ConditionalProps} from \"./conditional.types\";\n\n/**\n * ConditionalComponent\n *\n * Transparent pass-through: renders the `content` card when `show` is `true`,\n * returns `null` otherwise.  No extra DOM wrapper is added — the mounted\n * card's own root element is the only node in the tree.\n */\nexport const ConditionalComponent = (\n  props: PiCardProps<ConditionalProps>,\n): React.ReactNode => {\n  const {cardName, show, content} = props;\n  if (!show) return null;\n  return <Card cardName={content} parentCard={cardName} />;\n};\n"],"mappings":";;;;AAWA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,aAAU,SAAM,eAAW;CAElC,OADK,IACE,kBAAC,GAAD;EAAM,UAAU;EAAS,YAAY;CAAW,CAAA,IADrC;AAEpB"}
+{"version":3,"file":"conditional.component.js","names":[],"sources":["../../../src/cards/conditional/conditional.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  useBreakpoint,\n  useContainerBreakpoint,\n} from \"@/components/hooks/use-breakpoint\";\nimport type {ConditionalProps} from \"./conditional.types\";\n\n/**\n * ConditionalComponent\n *\n * Renders the `content` card when the combined visibility condition is `true`,\n * returns `null` otherwise.\n *\n * Visibility rules (all must be satisfied):\n *  1. `show`          — manual boolean gate (defaults to `true` when omitted)\n *  2. `showOn`        — breakpoint selector (always `true` when omitted)\n *     • `containerQuery: false` (default) → evaluated against the **viewport**\n *       via `window.matchMedia`\n *     • `containerQuery: true`            → evaluated against the width of the\n *       **enclosing container** via `ResizeObserver`; a thin `<div>` wrapper\n *       is rendered so the container width can be measured\n *\n * Both hooks are always called unconditionally (React rules); whichever is not\n * \"active\" receives `undefined` and returns `true` immediately.\n */\nexport const ConditionalComponent = (\n  props: PiCardProps<ConditionalProps>,\n): React.ReactNode => {\n  const {\n    cardName,\n    show = true,\n    showOn,\n    containerQuery = false,\n    content,\n  } = props;\n\n  // Ref for container-query mode — attached to the wrapper div.\n  // Always created (hooks must not be conditional).\n  const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n  // Viewport breakpoint: active when containerQuery is false.\n  const viewportMatch = useBreakpoint(containerQuery ? undefined : showOn);\n\n  // Container breakpoint: active when containerQuery is true.\n  const containerMatch = useContainerBreakpoint(\n    containerQuery ? showOn : undefined,\n    wrapperRef,\n  );\n\n  const breakpointMatch = containerQuery ? containerMatch : viewportMatch;\n  const visible = show && breakpointMatch;\n\n  // ── Container-query mode ─────────────────────────────────────────────────\n  // Render a full-width wrapper so ResizeObserver has something to measure.\n  // The wrapper is always in the DOM (measuring must be continuous), but the\n  // content card inside it is mounted/unmounted based on `visible`.\n  if (containerQuery) {\n    return (\n      <div ref={wrapperRef} style={{width: \"100%\"}}>\n        {visible && <Card cardName={content} parentCard={cardName} />}\n      </div>\n    );\n  }\n\n  // ── Viewport / manual mode ───────────────────────────────────────────────\n  // Transparent pass-through — no extra DOM node.\n  if (!visible) return null;\n  return <Card cardName={content} parentCard={cardName} />;\n};\n"],"mappings":";;;;;AA0BA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,aACA,UAAO,IACP,WACA,oBAAiB,IACjB,eACE,GAIE,IAAa,EAAM,OAAuB,IAAI,GAG9C,IAAgB,EAAc,IAAiB,KAAA,IAAY,CAAM,GAGjE,IAAiB,EACrB,IAAiB,IAAS,KAAA,GAC1B,CACF,GAGM,IAAU,MADQ,IAAiB,IAAiB;CAkB1D,OAXI,IAEA,kBAAC,OAAD;EAAK,KAAK;EAAY,OAAO,EAAC,OAAO,OAAM;YACxC,KAAW,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA;CACzD,CAAA,IAMJ,IACE,kBAAC,GAAD;EAAM,UAAU;EAAS,YAAY;CAAW,CAAA,IADlC;AAEvB"}

package/cards/conditional/conditional.types.d.ts

@@ -1,14 +1,39 @@
 import { PiCardRef } from '@pihanga2/core';
 export declare const CONDITIONAL_CARD = "shad/conditional";
 export declare const Conditional: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ConditionalProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+/**
+ * Named Tailwind-compatible breakpoints or a custom pixel expression.
+ *
+ * Named breakpoints (Tailwind CSS defaults)
+ * ─────────────────────────────────────────
+ *  `sm`   → viewport ≥ 640 px
+ *  `md`   → viewport ≥ 768 px
+ *  `lg`   → viewport ≥ 1024 px
+ *  `xl`   → viewport ≥ 1280 px
+ *  `2xl`  → viewport ≥ 1536 px
+ *
+ * Pixel expressions
+ * ─────────────────
+ *  `400px`    → viewport ≥ 400 px  (bare value = min-width)
+ *  `>=640px`  → viewport ≥ 640 px
+ *  `>640px`   → viewport >  640 px (min-width: 641px)
+ *  `<=1024px` → viewport ≤ 1024 px
+ *  `<1024px`  → viewport <  1024 px (max-width: 1023px)
+ */
+export type BreakpointSelector = "sm" | "md" | "lg" | "xl" | "2xl" | (string & Record<never, never>);
 /**
  * Props for the `shad/conditional` card.
  *
- * Renders `content` only when `show` is `true`; renders nothing otherwise.
- * This is a transparent pass-through — no extra DOM wrapper is added.
+ * The card renders `content` only when the combined visibility condition is
+ * `true`; it renders nothing otherwise.  This is a transparent pass-through —
+ * no extra DOM wrapper is added.
+ *
+ * ## Modes
  *
- * In a real app, drive `show` from a `memo()` selector so the card
- * reactively mounts/unmounts as state changes:
+ * ### 1 · Manual boolean (existing behaviour)
+ *
+ * Drive `show` from a `memo()` selector so the card reactively mounts/unmounts
+ * as state changes:
  *
  * ```ts
  * import {memo, registerCard} from "@pihanga2/core";
@@ -19,11 +44,78 @@ export declare const Conditional: <S extends import('@pihanga2/core').ReduxState
  *   content: "myApp/emptyStateHint",
  * }));
  * ```
+ *
+ * ### 2 · Breakpoint-based auto-selection (new)
+ *
+ * Set `showOn` to a breakpoint name or pixel expression.  The component
+ * subscribes to `window.matchMedia` and automatically mounts/unmounts the
+ * content card as the viewport crosses the breakpoint — no state, no memo:
+ *
+ * ```ts
+ * // Show only on tablet-sized screens and up
+ * registerCard("myApp/sidebar", Conditional({
+ *   showOn:  "md",
+ *   content: "myApp/desktopSidebar",
+ * }));
+ *
+ * // Show only on narrow viewports (mobile drawer)
+ * registerCard("myApp/mobileNav", Conditional({
+ *   showOn:  "<768px",
+ *   content: "myApp/drawer",
+ * }));
+ * ```
+ *
+ * ### 3 · Combined
+ *
+ * Both conditions are ANDed — content renders only when the breakpoint matches
+ * **and** `show` is `true`:
+ *
+ * ```ts
+ * registerCard("myApp/adminSidebar", Conditional({
+ *   show:    memo((s: AppState) => s.isAdmin),
+ *   showOn:  "lg",
+ *   content: "myApp/adminPanel",
+ * }));
+ * ```
  */
 export type ConditionalProps = {
-    /** Render `content` only when this is `true`.  Drive with `memo()` for
-     *  reactive mount/unmount behaviour. */
-    show: boolean;
-    /** The card to render when `show` is `true`. */
+    /**
+     * Manual boolean gate.  When omitted it defaults to `true` so that a
+     * `showOn`-only card does not need to set it explicitly.
+     *
+     * Drive with `memo()` for reactive mount/unmount behaviour.
+     */
+    show?: boolean;
+    /**
+     * Viewport-width breakpoint selector.  When set, the component subscribes
+     * to `window.matchMedia` and reactively shows/hides the content card
+     * whenever the viewport crosses the breakpoint.
+     *
+     * Supported values: `sm` | `md` | `lg` | `xl` | `2xl` (Tailwind),
+     * or pixel expressions such as `>400px`, `>=640px`, `<768px`, `<=1024px`,
+     * `400px`.
+     *
+     * When both `show` and `showOn` are provided the content is rendered only
+     * when **both** conditions are satisfied.
+     *
+     * By default the breakpoint is evaluated against the **viewport** width via
+     * `window.matchMedia`.  Set `containerQuery: true` to evaluate it against
+     * the width of the **enclosing container** instead (uses `ResizeObserver`).
+     */
+    showOn?: BreakpointSelector;
+    /**
+     * When `true`, the `showOn` breakpoint is measured against the width of the
+     * component's **enclosing container** rather than the viewport.
+     *
+     * Internally the component renders a transparent `<div style="width:100%">`
+     * wrapper and observes it with `ResizeObserver`.  This means a single extra
+     * DOM node is added when `containerQuery` is `true`.
+     *
+     * Has no effect when `showOn` is not set.
+     *
+     * @default false
+     */
+    containerQuery?: boolean;
+    /** The card to render when the visibility condition is met. */
     content: PiCardRef;
 };

package/cards/conditional/conditional.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditional.types.js","names":[],"sources":["../../../src/cards/conditional/conditional.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const CONDITIONAL_CARD = \"shad/conditional\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const Conditional =\n  createCardDeclaration<ConditionalProps>(CONDITIONAL_CARD);\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/conditional` card.\n *\n * Renders `content` only when `show` is `true`; renders nothing otherwise.\n * This is a transparent pass-through — no extra DOM wrapper is added.\n *\n * In a real app, drive `show` from a `memo()` selector so the card\n * reactively mounts/unmounts as state changes:\n *\n * ```ts\n * import {memo, registerCard} from \"@pihanga2/core\";\n * import {Conditional} from \"@/cards/conditional\";\n *\n * registerCard(\"myApp/hint\", Conditional({\n *   show:    memo((s: AppState) => s.items.length === 0 && !s.isLoading),\n *   content: \"myApp/emptyStateHint\",\n * }));\n * ```\n */\nexport type ConditionalProps = {\n  /** Render `content` only when this is `true`.  Drive with `memo()` for\n   *  reactive mount/unmount behaviour. */\n  show: boolean;\n\n  /** The card to render when `show` is `true`. */\n  content: PiCardRef;\n};\n"],"mappings":";;AAKA,IAAa,IAAmB,oBAInB,IACX,EAAwC,CAAgB"}
+{"version":3,"file":"conditional.types.js","names":[],"sources":["../../../src/cards/conditional/conditional.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const CONDITIONAL_CARD = \"shad/conditional\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const Conditional =\n  createCardDeclaration<ConditionalProps>(CONDITIONAL_CARD);\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\n/**\n * Named Tailwind-compatible breakpoints or a custom pixel expression.\n *\n * Named breakpoints (Tailwind CSS defaults)\n * ─────────────────────────────────────────\n *  `sm`   → viewport ≥ 640 px\n *  `md`   → viewport ≥ 768 px\n *  `lg`   → viewport ≥ 1024 px\n *  `xl`   → viewport ≥ 1280 px\n *  `2xl`  → viewport ≥ 1536 px\n *\n * Pixel expressions\n * ─────────────────\n *  `400px`    → viewport ≥ 400 px  (bare value = min-width)\n *  `>=640px`  → viewport ≥ 640 px\n *  `>640px`   → viewport >  640 px (min-width: 641px)\n *  `<=1024px` → viewport ≤ 1024 px\n *  `<1024px`  → viewport <  1024 px (max-width: 1023px)\n */\nexport type BreakpointSelector =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | (string & Record<never, never>); // allows arbitrary strings with IDE hints\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/conditional` card.\n *\n * The card renders `content` only when the combined visibility condition is\n * `true`; it renders nothing otherwise.  This is a transparent pass-through —\n * no extra DOM wrapper is added.\n *\n * ## Modes\n *\n * ### 1 · Manual boolean (existing behaviour)\n *\n * Drive `show` from a `memo()` selector so the card reactively mounts/unmounts\n * as state changes:\n *\n * ```ts\n * import {memo, registerCard} from \"@pihanga2/core\";\n * import {Conditional} from \"@/cards/conditional\";\n *\n * registerCard(\"myApp/hint\", Conditional({\n *   show:    memo((s: AppState) => s.items.length === 0 && !s.isLoading),\n *   content: \"myApp/emptyStateHint\",\n * }));\n * ```\n *\n * ### 2 · Breakpoint-based auto-selection (new)\n *\n * Set `showOn` to a breakpoint name or pixel expression.  The component\n * subscribes to `window.matchMedia` and automatically mounts/unmounts the\n * content card as the viewport crosses the breakpoint — no state, no memo:\n *\n * ```ts\n * // Show only on tablet-sized screens and up\n * registerCard(\"myApp/sidebar\", Conditional({\n *   showOn:  \"md\",\n *   content: \"myApp/desktopSidebar\",\n * }));\n *\n * // Show only on narrow viewports (mobile drawer)\n * registerCard(\"myApp/mobileNav\", Conditional({\n *   showOn:  \"<768px\",\n *   content: \"myApp/drawer\",\n * }));\n * ```\n *\n * ### 3 · Combined\n *\n * Both conditions are ANDed — content renders only when the breakpoint matches\n * **and** `show` is `true`:\n *\n * ```ts\n * registerCard(\"myApp/adminSidebar\", Conditional({\n *   show:    memo((s: AppState) => s.isAdmin),\n *   showOn:  \"lg\",\n *   content: \"myApp/adminPanel\",\n * }));\n * ```\n */\nexport type ConditionalProps = {\n  /**\n   * Manual boolean gate.  When omitted it defaults to `true` so that a\n   * `showOn`-only card does not need to set it explicitly.\n   *\n   * Drive with `memo()` for reactive mount/unmount behaviour.\n   */\n  show?: boolean;\n\n  /**\n   * Viewport-width breakpoint selector.  When set, the component subscribes\n   * to `window.matchMedia` and reactively shows/hides the content card\n   * whenever the viewport crosses the breakpoint.\n   *\n   * Supported values: `sm` | `md` | `lg` | `xl` | `2xl` (Tailwind),\n   * or pixel expressions such as `>400px`, `>=640px`, `<768px`, `<=1024px`,\n   * `400px`.\n   *\n   * When both `show` and `showOn` are provided the content is rendered only\n   * when **both** conditions are satisfied.\n   *\n   * By default the breakpoint is evaluated against the **viewport** width via\n   * `window.matchMedia`.  Set `containerQuery: true` to evaluate it against\n   * the width of the **enclosing container** instead (uses `ResizeObserver`).\n   */\n  showOn?: BreakpointSelector;\n\n  /**\n   * When `true`, the `showOn` breakpoint is measured against the width of the\n   * component's **enclosing container** rather than the viewport.\n   *\n   * Internally the component renders a transparent `<div style=\"width:100%\">`\n   * wrapper and observes it with `ResizeObserver`.  This means a single extra\n   * DOM node is added when `containerQuery` is `true`.\n   *\n   * Has no effect when `showOn` is not set.\n   *\n   * @default false\n   */\n  containerQuery?: boolean;\n\n  /** The card to render when the visibility condition is met. */\n  content: PiCardRef;\n};\n"],"mappings":";;AAKA,IAAa,IAAmB,oBAInB,IACX,EAAwC,CAAgB"}

package/cards/core-index.js

@@ -2,60 +2,60 @@ import { BADGE_CARD as e, ShadBadge as t } from "./badge/badge.types.js";
 import "./badge/index.js";
 import { BOX_CARD as n, Box as r } from "./box/box.types.js";
 import "./box/index.js";
-import { Button as i, PI_BUTTON_ACTION as a, PI_BUTTON_CARD as o, onPiButtonClicked as s } from "./button/button.types.js";
+import { Button as i, PI_BUTTON_ACTION as a, PI_BUTTON_CARD as o, onButtonClicked as s, onPiButtonClicked as c } from "./button/button.types.js";
 import "./button/index.js";
-import { FormContext as c, useFormContext as l } from "./form/form.context.js";
-import { Checkbox as u, PI_CHECKBOX_ACTION as d, PI_CHECKBOX_CARD as f, onPiCheckboxChanged as p } from "./checkbox/checkbox.types.js";
+import { FormContext as l, useFormContext as u } from "./form/form.context.js";
+import { Checkbox as d, PI_CHECKBOX_ACTION as f, PI_CHECKBOX_CARD as p, onPiCheckboxChanged as m } from "./checkbox/checkbox.types.js";
 import "./checkbox/index.js";
-import { CONDITIONAL_CARD as m, Conditional as h } from "./conditional/conditional.types.js";
+import { CONDITIONAL_CARD as h, Conditional as g } from "./conditional/conditional.types.js";
 import "./conditional/index.js";
-import { DATA_TABLE_ACTION as g, DATA_TABLE_CARD as _, DATA_TABLE_ROW_DETAIL_CARD as v, DataTable as y, DataTableRowDetail as b, onDataTableHideDetail as x, onDataTablePageChanged as S, onDataTableRowClicked as C, onDataTableShowDetail as w, onDataTableSortChanged as T } from "./dataTable/dataTable.types.js";
+import { DATA_TABLE_ACTION as _, DATA_TABLE_CARD as v, DATA_TABLE_ROW_DETAIL_CARD as y, DataTable as b, DataTableRowDetail as x, onDataTableHideDetail as S, onDataTablePageChanged as C, onDataTableRowClicked as w, onDataTableShowDetail as T, onDataTableSortChanged as E } from "./dataTable/dataTable.types.js";
 import "./dataTable/index.js";
-import { Dialog as E, PI_DIALOG_ACTION as D, PI_DIALOG_CARD as O, onDialogClosed as k, onDialogOpenChanged as A, onDialogOpened as j } from "./dialog/dialog.types.js";
+import { Dialog as D, PI_DIALOG_ACTION as O, PI_DIALOG_CARD as k, onDialogClosed as A, onDialogOpenChanged as j, onDialogOpened as M } from "./dialog/dialog.types.js";
 import "./dialog/index.js";
-import { DROP_DOWN_MENU_ACTION as M, DROP_DOWN_MENU_CARD as N, DropDownMenu as P, onDropDownMenuClicked as F } from "./dropDownMenu/drop-down.types.js";
+import { DROP_DOWN_MENU_ACTION as N, DROP_DOWN_MENU_CARD as P, DropDownMenu as F, onDropDownMenuClicked as I } from "./dropDownMenu/drop-down.types.js";
 import "./dropDownMenu/index.js";
-import { Field as I, PI_FIELD_CARD as L } from "./field/field.types.js";
+import { Field as L, PI_FIELD_CARD as R } from "./field/field.types.js";
 import "./field/index.js";
-import { FLEX_GRID_CARD as R, FlexGrid as z } from "./flexGrid/flexGrid.types.js";
+import { FLEX_GRID_CARD as z, FlexGrid as B } from "./flexGrid/flexGrid.types.js";
 import "./flexGrid/index.js";
-import { Form as B, PI_FORM_ACTION as V, PI_FORM_CARD as H, onPiFormSubmitted as U } from "./form/form.types.js";
+import { Form as V, PI_FORM_ACTION as H, PI_FORM_CARD as U, onPiFormSubmitted as W } from "./form/form.types.js";
 import "./form/index.js";
-import { SdFramework as W } from "./framework/index.js";
-import { PI_INPUT_ACTION as G, PI_INPUT_CARD as K, PiInput as q, onPiInputChanged as J, onPiInputCommitted as Y } from "./input/input.types.js";
+import { SdFramework as G } from "./framework/index.js";
+import { PI_INPUT_ACTION as K, PI_INPUT_CARD as q, PiInput as J, onPiInputChanged as Y, onPiInputCommitted as X } from "./input/input.types.js";
 import "./input/index.js";
-import { LIST_ACTION as X, LIST_CARD as Z, List as Q, onListItemClicked as $ } from "./list/list.types.js";
+import { LIST_ACTION as Z, LIST_CARD as Q, List as $, onListItemClicked as ee } from "./list/list.types.js";
 import "./list/index.js";
-import { LOADING_OVERLAY_CARD as ee, LoadingOverlay as te } from "./loadingOverlay/loadingOverlay.types.js";
+import { LOADING_OVERLAY_CARD as te, LoadingOverlay as ne } from "./loadingOverlay/loadingOverlay.types.js";
 import "./loadingOverlay/index.js";
-import { LOADING_SKELETON_CARD as ne, LoadingSkeleton as re } from "./loadingSkeleton/loading-skeleton.types.js";
+import { LOADING_SKELETON_CARD as re, LoadingSkeleton as ie } from "./loadingSkeleton/loading-skeleton.types.js";
 import "./loadingSkeleton/index.js";
-import { MENU_ACTION as ie, MENU_CARD as ae, Menu as oe, onMenuClicked as se } from "./menu/menu.types.js";
+import { MENU_ACTION as ae, MENU_CARD as oe, Menu as se, onMenuClicked as ce } from "./menu/menu.types.js";
 import "./menu/index.js";
-import { MODE_TOGGLE_ACTION as ce, MODE_TOGGLE_CARD as le, ModeToggle as ue, onModeToggleChanged as de } from "./modeToggle/mode-toggle.types.js";
+import { MODE_TOGGLE_ACTION as le, MODE_TOGGLE_CARD as ue, ModeToggle as de, onModeToggleChanged as fe } from "./modeToggle/mode-toggle.types.js";
 import "./modeToggle/index.js";
-import { NAVBAR_SEARCH_ACTION as fe, NAVBAR_SEARCH_CARD as pe, NavbarSearch as me, onNavbarSearchFocus as he, onNavbarSearchItems as ge, onNavbarSearchSubmit as _e } from "./navbarSearch/navbarSearch.type.js";
+import { NAVBAR_SEARCH_ACTION as pe, NAVBAR_SEARCH_CARD as me, NavbarSearch as he, onNavbarSearchFocus as ge, onNavbarSearchItems as _e, onNavbarSearchSubmit as ve } from "./navbarSearch/navbarSearch.type.js";
 import "./navbarSearch/index.js";
-import { PAGE_WITH_NAVBAR_ACTION as ve, PAGE_WITH_NAVBAR_CARD as ye, PageWithNavbar as be, onPageWithNavbarNavigateTo as xe } from "./pageWithNavbar/pageWithNavbar.type.js";
-import { SdPageWithNavbar as Se } from "./pageWithNavbar/index.js";
-import { DEF_ERROR_COLOR as Ce, DEF_EVENT_DURATION_SECONDS as we, DEF_HEIGHT as Te, DEF_OVERLAY_OPACITY as Ee, DEF_PASTE_FIRST_REMINDER as De, DEF_PASTE_TARGET_FILE_TYPES as Oe, DEF_SUCCESS_COLOR as ke, PASTE_TARGET_ACTION as Ae, PASTE_TARGET_CARD as je, PasteTarget as Me, onContentPasted as Ne, onPasteError as Pe } from "./pasteTarget/pasteTarget.types.js";
+import { PAGE_WITH_NAVBAR_ACTION as ye, PAGE_WITH_NAVBAR_CARD as be, PageWithNavbar as xe, onPageWithNavbarNavigateTo as Se } from "./pageWithNavbar/pageWithNavbar.type.js";
+import { SdPageWithNavbar as Ce } from "./pageWithNavbar/index.js";
+import { DEF_ERROR_COLOR as we, DEF_EVENT_DURATION_SECONDS as Te, DEF_HEIGHT as Ee, DEF_OVERLAY_OPACITY as De, DEF_PASTE_FIRST_REMINDER as Oe, DEF_PASTE_TARGET_FILE_TYPES as ke, DEF_SUCCESS_COLOR as Ae, PASTE_TARGET_ACTION as je, PASTE_TARGET_CARD as Me, PasteTarget as Ne, onContentPasted as Pe, onPasteError as Fe } from "./pasteTarget/pasteTarget.types.js";
 import "./pasteTarget/index.js";
-import { PI_SELECT_ACTION as Fe, PI_SELECT_CARD as Ie, Select as Le, onPiSelectChanged as Re, onPiSelectClosed as ze, onPiSelectOpened as Be } from "./select/select.types.js";
+import { PI_SELECT_ACTION as Ie, PI_SELECT_CARD as Le, Select as Re, onPiSelectChanged as ze, onPiSelectClosed as Be, onPiSelectOpened as Ve } from "./select/select.types.js";
 import "./select/index.js";
-import { STACK_CARD as Ve, Stack as He } from "./stack/stack.types.js";
+import { STACK_CARD as He, Stack as Ue } from "./stack/stack.types.js";
 import "./stack/index.js";
-import { STEPPER_ACTION as Ue, STEPPER_CARD as We, Stepper as Ge, onStepperStepClicked as Ke } from "./stepper/stepper.types.js";
+import { STEPPER_ACTION as We, STEPPER_CARD as Ge, Stepper as Ke, onStepperStepClicked as qe } from "./stepper/stepper.types.js";
 import "./stepper/index.js";
-import { PI_SWITCH_ACTION as qe, PI_SWITCH_CARD as Je, Switch as Ye, onPiSwitchChanged as Xe } from "./switch/switch.types.js";
+import { PI_SWITCH_ACTION as Je, PI_SWITCH_CARD as Ye, Switch as Xe, onPiSwitchChanged as Ze } from "./switch/switch.types.js";
 import "./switch/index.js";
-import { SdTabs as Ze, TABS_ACTION as Qe, TABS_CARD as $e, Tabs as et, onTabsTabChanged as tt } from "./tabs/tabs.types.js";
+import { SdTabs as Qe, TABS_ACTION as $e, TABS_CARD as et, Tabs as tt, onTabsTabChanged as nt } from "./tabs/tabs.types.js";
 import "./tabs/index.js";
-import { PI_TEXT_FIELD_ACTION as nt, PI_TEXT_FIELD_CARD as rt, TextField as it, onPiTextFieldChanged as at } from "./textField/textField.types.js";
+import { PI_TEXT_FIELD_ACTION as rt, PI_TEXT_FIELD_CARD as it, TextField as at, onPiTextFieldChanged as ot } from "./textField/textField.types.js";
 import "./textField/index.js";
-import { PI_TOAST_ACTION as ot, PI_TOAST_CARD as st, TOAST_OP_ACTION as ct, Toast as lt, dispatchShowToast as ut, onPiToastClosed as dt, onShowToast as ft } from "./toast/toast.types.js";
+import { PI_TOAST_ACTION as st, PI_TOAST_CARD as ct, TOAST_OP_ACTION as lt, Toast as ut, dispatchShowToast as dt, onPiToastClosed as ft, onShowToast as pt } from "./toast/toast.types.js";
 import "./toast/index.js";
-import { PI_TOGGLE_GROUP_ACTION as pt, PI_TOGGLE_GROUP_CARD as mt, ToggleGroup as ht, onPiToggleGroupChanged as gt } from "./toggleGroup/toggleGroup.types.js";
+import { PI_TOGGLE_GROUP_ACTION as mt, PI_TOGGLE_GROUP_CARD as ht, ToggleGroup as gt, onPiToggleGroupChanged as _t } from "./toggleGroup/toggleGroup.types.js";
 import "./toggleGroup/index.js";
-import { TYPOGRAPHY_CARD as _t, Typography as vt } from "./typography/typography.types.js";
+import { TYPOGRAPHY_CARD as vt, Typography as yt } from "./typography/typography.types.js";
 import "./typography/index.js";
-export { e as BADGE_CARD, n as BOX_CARD, r as Box, i as Button, m as CONDITIONAL_CARD, u as Checkbox, h as Conditional, g as DATA_TABLE_ACTION, _ as DATA_TABLE_CARD, v as DATA_TABLE_ROW_DETAIL_CARD, Ce as DEF_ERROR_COLOR, we as DEF_EVENT_DURATION_SECONDS, Te as DEF_HEIGHT, Ee as DEF_OVERLAY_OPACITY, De as DEF_PASTE_FIRST_REMINDER, Oe as DEF_PASTE_TARGET_FILE_TYPES, ke as DEF_SUCCESS_COLOR, M as DROP_DOWN_MENU_ACTION, N as DROP_DOWN_MENU_CARD, y as DataTable, b as DataTableRowDetail, E as Dialog, P as DropDownMenu, R as FLEX_GRID_CARD, I as Field, z as FlexGrid, B as Form, c as FormContext, X as LIST_ACTION, Z as LIST_CARD, ee as LOADING_OVERLAY_CARD, ne as LOADING_SKELETON_CARD, Q as List, te as LoadingOverlay, re as LoadingSkeleton, ie as MENU_ACTION, ae as MENU_CARD, ce as MODE_TOGGLE_ACTION, le as MODE_TOGGLE_CARD, oe as Menu, ue as ModeToggle, fe as NAVBAR_SEARCH_ACTION, pe as NAVBAR_SEARCH_CARD, me as NavbarSearch, ve as PAGE_WITH_NAVBAR_ACTION, ye as PAGE_WITH_NAVBAR_CARD, Ae as PASTE_TARGET_ACTION, je as PASTE_TARGET_CARD, a as PI_BUTTON_ACTION, o as PI_BUTTON_CARD, d as PI_CHECKBOX_ACTION, f as PI_CHECKBOX_CARD, D as PI_DIALOG_ACTION, O as PI_DIALOG_CARD, L as PI_FIELD_CARD, V as PI_FORM_ACTION, H as PI_FORM_CARD, G as PI_INPUT_ACTION, K as PI_INPUT_CARD, Fe as PI_SELECT_ACTION, Ie as PI_SELECT_CARD, qe as PI_SWITCH_ACTION, Je as PI_SWITCH_CARD, nt as PI_TEXT_FIELD_ACTION, rt as PI_TEXT_FIELD_CARD, ot as PI_TOAST_ACTION, st as PI_TOAST_CARD, pt as PI_TOGGLE_GROUP_ACTION, mt as PI_TOGGLE_GROUP_CARD, be as PageWithNavbar, Me as PasteTarget, q as PiInput, Ve as STACK_CARD, Ue as STEPPER_ACTION, We as STEPPER_CARD, W as SdFramework, Se as SdPageWithNavbar, Ze as SdTabs, Le as Select, t as ShadBadge, He as Stack, Ge as Stepper, Ye as Switch, Qe as TABS_ACTION, $e as TABS_CARD, ct as TOAST_OP_ACTION, _t as TYPOGRAPHY_CARD, et as Tabs, it as TextField, lt as Toast, ht as ToggleGroup, vt as Typography, ut as dispatchShowToast, Ne as onContentPasted, x as onDataTableHideDetail, S as onDataTablePageChanged, C as onDataTableRowClicked, w as onDataTableShowDetail, T as onDataTableSortChanged, k as onDialogClosed, A as onDialogOpenChanged, j as onDialogOpened, F as onDropDownMenuClicked, $ as onListItemClicked, se as onMenuClicked, de as onModeToggleChanged, he as onNavbarSearchFocus, ge as onNavbarSearchItems, _e as onNavbarSearchSubmit, xe as onPageWithNavbarNavigateTo, Pe as onPasteError, s as onPiButtonClicked, p as onPiCheckboxChanged, U as onPiFormSubmitted, J as onPiInputChanged, Y as onPiInputCommitted, Re as onPiSelectChanged, ze as onPiSelectClosed, Be as onPiSelectOpened, Xe as onPiSwitchChanged, at as onPiTextFieldChanged, dt as onPiToastClosed, gt as onPiToggleGroupChanged, ft as onShowToast, Ke as onStepperStepClicked, tt as onTabsTabChanged, l as useFormContext };
+export { e as BADGE_CARD, n as BOX_CARD, r as Box, i as Button, h as CONDITIONAL_CARD, d as Checkbox, g as Conditional, _ as DATA_TABLE_ACTION, v as DATA_TABLE_CARD, y as DATA_TABLE_ROW_DETAIL_CARD, we as DEF_ERROR_COLOR, Te as DEF_EVENT_DURATION_SECONDS, Ee as DEF_HEIGHT, De as DEF_OVERLAY_OPACITY, Oe as DEF_PASTE_FIRST_REMINDER, ke as DEF_PASTE_TARGET_FILE_TYPES, Ae as DEF_SUCCESS_COLOR, N as DROP_DOWN_MENU_ACTION, P as DROP_DOWN_MENU_CARD, b as DataTable, x as DataTableRowDetail, D as Dialog, F as DropDownMenu, z as FLEX_GRID_CARD, L as Field, B as FlexGrid, V as Form, l as FormContext, Z as LIST_ACTION, Q as LIST_CARD, te as LOADING_OVERLAY_CARD, re as LOADING_SKELETON_CARD, $ as List, ne as LoadingOverlay, ie as LoadingSkeleton, ae as MENU_ACTION, oe as MENU_CARD, le as MODE_TOGGLE_ACTION, ue as MODE_TOGGLE_CARD, se as Menu, de as ModeToggle, pe as NAVBAR_SEARCH_ACTION, me as NAVBAR_SEARCH_CARD, he as NavbarSearch, ye as PAGE_WITH_NAVBAR_ACTION, be as PAGE_WITH_NAVBAR_CARD, je as PASTE_TARGET_ACTION, Me as PASTE_TARGET_CARD, a as PI_BUTTON_ACTION, o as PI_BUTTON_CARD, f as PI_CHECKBOX_ACTION, p as PI_CHECKBOX_CARD, O as PI_DIALOG_ACTION, k as PI_DIALOG_CARD, R as PI_FIELD_CARD, H as PI_FORM_ACTION, U as PI_FORM_CARD, K as PI_INPUT_ACTION, q as PI_INPUT_CARD, Ie as PI_SELECT_ACTION, Le as PI_SELECT_CARD, Je as PI_SWITCH_ACTION, Ye as PI_SWITCH_CARD, rt as PI_TEXT_FIELD_ACTION, it as PI_TEXT_FIELD_CARD, st as PI_TOAST_ACTION, ct as PI_TOAST_CARD, mt as PI_TOGGLE_GROUP_ACTION, ht as PI_TOGGLE_GROUP_CARD, xe as PageWithNavbar, Ne as PasteTarget, J as PiInput, He as STACK_CARD, We as STEPPER_ACTION, Ge as STEPPER_CARD, G as SdFramework, Ce as SdPageWithNavbar, Qe as SdTabs, Re as Select, t as ShadBadge, Ue as Stack, Ke as Stepper, Xe as Switch, $e as TABS_ACTION, et as TABS_CARD, lt as TOAST_OP_ACTION, vt as TYPOGRAPHY_CARD, tt as Tabs, at as TextField, ut as Toast, gt as ToggleGroup, yt as Typography, dt as dispatchShowToast, s as onButtonClicked, Pe as onContentPasted, S as onDataTableHideDetail, C as onDataTablePageChanged, w as onDataTableRowClicked, T as onDataTableShowDetail, E as onDataTableSortChanged, A as onDialogClosed, j as onDialogOpenChanged, M as onDialogOpened, I as onDropDownMenuClicked, ee as onListItemClicked, ce as onMenuClicked, fe as onModeToggleChanged, ge as onNavbarSearchFocus, _e as onNavbarSearchItems, ve as onNavbarSearchSubmit, Se as onPageWithNavbarNavigateTo, Fe as onPasteError, c as onPiButtonClicked, m as onPiCheckboxChanged, W as onPiFormSubmitted, Y as onPiInputChanged, X as onPiInputCommitted, ze as onPiSelectChanged, Be as onPiSelectClosed, Ve as onPiSelectOpened, Ze as onPiSwitchChanged, ot as onPiTextFieldChanged, ft as onPiToastClosed, _t as onPiToggleGroupChanged, pt as onShowToast, qe as onStepperStepClicked, nt as onTabsTabChanged, u as useFormContext };

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { GraphinContextMenu, GraphinNodeEventContext } from './graphin.types';
+/**
+ * Context forwarded to the content card as props.
+ * Consumers can import this type to type their card props:
+ *
+ * ```ts
+ * type MyMenuProps = ContextMenuContext & { ... }
+ * ```
+ */
+export type ContextMenuContext<T = Record<string, unknown>> = {
+    /** Whether this panel was triggered from an edge (vs node) */
+    isEdge?: boolean;
+    /** The G6 element id */
+    elementID?: string;
+    /** The element's raw `data` bag */
+    elementData?: T;
+    /**
+     * Call this to close the context menu panel from within the content card.
+     */
+    onClose?: () => void;
+};
+export declare function ContextMenuComponent(props: {
+    contentCards: GraphinContextMenu;
+    parentCard: string;
+    onOpen?: (ctx: GraphinNodeEventContext) => void;
+    onClose?: (ctx: GraphinNodeEventContext) => void;
+}): React.ReactNode;

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

@@ -0,0 +1,8 @@
+import { GraphinNodeEventContext } from './graphin.types';
+export type GraphinEventDispatcherProps = {
+    onNodeHovered?: (ctx: GraphinNodeEventContext) => void;
+    onNodeHoverEnd?: (ctx: GraphinNodeEventContext) => void;
+    onNodeClicked?: (ctx: GraphinNodeEventContext) => void;
+    onNodeDblClicked?: (ctx: GraphinNodeEventContext) => void;
+};
+export declare function GraphinEventDispatcher(props: GraphinEventDispatcherProps): null;

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

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { PiCardProps } from '@pihanga2/core';
-import { GraphinProps } from './graphin.types';
-export declare const GraphinComponent: (props: PiCardProps<GraphinProps>) => React.ReactNode;
+import { GraphinEvents, GraphinProps } from './graphin.types';
+export declare const GraphinComponent: (props: PiCardProps<GraphinProps, GraphinEvents>) => React.ReactNode;

package/cards/graphin/graphin.playground-cards.d.ts

@@ -0,0 +1 @@
+export {};