@pihanga2/shadcn 0.2.17 → 0.2.19

package/cards/navbarSearch/navbarSearch.type.d.ts

@@ -5,13 +5,13 @@ export declare const NAVBAR_SEARCH_ACTION: {
     SEARCH_ITEMS: string;
     SEARCH_FOCUS: string;
 };
-export declare const onNavbarSearchSubmit: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onNavbarSearchSubmit: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & NavbarSearchEvent>) => void;
-export declare const onNavbarSearchItems: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onNavbarSearchItems: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & NavbarSearchInputEvent>) => void;
-export declare const onNavbarSearchFocus: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onNavbarSearchFocus: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & NavbarSearchFocusEvent>) => void;
 export type NavbarSearchProps = {

package/cards/observable/index.d.ts

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

package/cards/observable/index.js

@@ -0,0 +1,13 @@
+import { ObservableComponent as e } from "./observable.component.js";
+import { OBSERVABLE_ACTION as t, OBSERVABLE_CARD as n, Observable as r, onObservableBlur as i, onObservableClicked as a, onObservableContextMenu as o, onObservableDoubleClicked as s, onObservableFocus as c, onObservableKeyDown as l, onObservableKeyUp as u, onObservableMouseDown as d, onObservableMouseEnter as f, onObservableMouseLeave as p, onObservableMouseMove as m, onObservableMouseUp as h, onObservableWheel as g } from "./observable.types.js";
+import { actionTypesToEvents as _, registerCardComponent as v } from "@pihanga2/core";
+//#region src/cards/observable/index.ts
+v({
+	name: n,
+	component: e,
+	events: _(t)
+});
+//#endregion
+export { t as OBSERVABLE_ACTION, n as OBSERVABLE_CARD, r as Observable, i as onObservableBlur, a as onObservableClicked, o as onObservableContextMenu, s as onObservableDoubleClicked, c as onObservableFocus, l as onObservableKeyDown, u as onObservableKeyUp, d as onObservableMouseDown, f as onObservableMouseEnter, p as onObservableMouseLeave, m as onObservableMouseMove, h as onObservableMouseUp, g as onObservableWheel };
+
+//# sourceMappingURL=index.js.map

package/cards/observable/index.js.map

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

package/cards/observable/observable.component.d.ts

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

package/cards/observable/observable.component.js

@@ -0,0 +1,74 @@
+import * as e from "react";
+import { Card as t } from "@pihanga2/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/observable/observable.component.tsx
+function r(e, t) {
+	return {
+		absoluteX: e.pageX,
+		absoluteY: e.pageY,
+		relativeX: e.pageX - (t.left + window.scrollX),
+		relativeY: e.pageY - (t.top + window.scrollY)
+	};
+}
+var i = (i) => {
+	let { id: a, content: o, enable: s = {}, className: c, style: l, data: u, cardName: d, onClicked: f, onDoubleClicked: p, onMouseDown: m, onMouseUp: h, onMouseEnter: g, onMouseMove: _, onMouseLeave: v, onContextMenu: y, onWheel: b, onKeyDown: x, onKeyUp: S, onFocus: C, onBlur: w } = i, T = e.useRef(null);
+	function E(e) {
+		let t = T.current?.getBoundingClientRect() ?? {
+			left: 0,
+			top: 0
+		};
+		return {
+			id: a,
+			button: e.button,
+			buttons: e.buttons,
+			altKey: e.altKey,
+			ctrlKey: e.ctrlKey,
+			metaKey: e.metaKey,
+			shiftKey: e.shiftKey,
+			...r(e, t)
+		};
+	}
+	function D(e) {
+		let t = T.current?.getBoundingClientRect() ?? {
+			left: 0,
+			top: 0
+		};
+		return {
+			id: a,
+			deltaX: e.deltaX,
+			deltaY: e.deltaY,
+			deltaZ: e.deltaZ,
+			...r(e, t)
+		};
+	}
+	function O(e) {
+		return {
+			id: a,
+			key: e.key,
+			code: e.code,
+			repeat: e.repeat,
+			altKey: e.altKey,
+			ctrlKey: e.ctrlKey,
+			metaKey: e.metaKey,
+			shiftKey: e.shiftKey
+		};
+	}
+	let k = u ? Object.fromEntries(Object.entries(u).map(([e, t]) => [`data-${e}`, t])) : {}, A = {};
+	return s.clicked && (A.onClick = (e) => f(E(e))), s.doubleClicked && (A.onDoubleClick = (e) => p(E(e))), s.mouseDown && (A.onMouseDown = (e) => m(E(e))), s.mouseUp && (A.onMouseUp = (e) => h(E(e))), s.mouseEnter && (A.onMouseEnter = (e) => g(E(e))), s.mouseMove && (A.onMouseMove = (e) => _(E(e))), s.mouseLeave && (A.onMouseLeave = (e) => v(E(e))), s.contextMenu && (A.onContextMenu = (e) => y(E(e))), s.wheel && (A.onWheel = (e) => b(D(e))), s.keyDown && (A.onKeyDown = (e) => x(O(e))), s.keyUp && (A.onKeyUp = (e) => S(O(e))), s.focus && (A.onFocus = () => C({ id: a })), s.blur && (A.onBlur = () => w({ id: a })), /* @__PURE__ */ n("div", {
+		ref: T,
+		className: c,
+		style: l,
+		"data-pihanga": d,
+		tabIndex: s.keyDown || s.keyUp || s.focus || s.blur ? 0 : void 0,
+		...k,
+		...A,
+		children: o && /* @__PURE__ */ n(t, {
+			cardName: o,
+			parentCard: d
+		})
+	});
+};
+//#endregion
+export { i as ObservableComponent };
+
+//# sourceMappingURL=observable.component.js.map

package/cards/observable/observable.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observable.component.js","names":[],"sources":["../../../src/cards/observable/observable.component.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {\n  ObservableEnabledEvents,\n  ObservableEvents,\n  ObservableKeyEvent,\n  ObservableMouseEvent,\n  ObservableProps,\n  ObservableWheelEvent,\n} from \"./observable.types\";\n\nfunction pointerPosition(\n  e: {pageX: number; pageY: number},\n  rect: DOMRect,\n): {\n  absoluteX: number;\n  absoluteY: number;\n  relativeX: number;\n  relativeY: number;\n} {\n  return {\n    absoluteX: e.pageX,\n    absoluteY: e.pageY,\n    relativeX: e.pageX - (rect.left + window.scrollX),\n    relativeY: e.pageY - (rect.top + window.scrollY),\n  };\n}\n\nexport const ObservableComponent = (\n  props: PiCardProps<ObservableProps, ObservableEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    content,\n    enable = {} as ObservableEnabledEvents,\n    className,\n    style,\n    data,\n    cardName,\n    onClicked,\n    onDoubleClicked,\n    onMouseDown,\n    onMouseUp,\n    onMouseEnter,\n    onMouseMove,\n    onMouseLeave,\n    onContextMenu,\n    onWheel,\n    onKeyDown,\n    onKeyUp,\n    onFocus,\n    onBlur,\n  } = props;\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  function mouseEvent(\n    e: React.MouseEvent<HTMLDivElement>,\n  ): ObservableMouseEvent {\n    const rect =\n      rootRef.current?.getBoundingClientRect() ??\n      ({\n        left: 0,\n        top: 0,\n      } as DOMRect);\n    return {\n      id,\n      button: e.button,\n      buttons: e.buttons,\n      altKey: e.altKey,\n      ctrlKey: e.ctrlKey,\n      metaKey: e.metaKey,\n      shiftKey: e.shiftKey,\n      ...pointerPosition(e, rect),\n    };\n  }\n\n  function wheelEvent(\n    e: React.WheelEvent<HTMLDivElement>,\n  ): ObservableWheelEvent {\n    const rect =\n      rootRef.current?.getBoundingClientRect() ??\n      ({\n        left: 0,\n        top: 0,\n      } as DOMRect);\n    return {\n      id,\n      deltaX: e.deltaX,\n      deltaY: e.deltaY,\n      deltaZ: e.deltaZ,\n      ...pointerPosition(e, rect),\n    };\n  }\n\n  function keyEvent(\n    e: React.KeyboardEvent<HTMLDivElement>,\n  ): ObservableKeyEvent {\n    return {\n      id,\n      key: e.key,\n      code: e.code,\n      repeat: e.repeat,\n      altKey: e.altKey,\n      ctrlKey: e.ctrlKey,\n      metaKey: e.metaKey,\n      shiftKey: e.shiftKey,\n    };\n  }\n\n  const dataAttrs = data\n    ? Object.fromEntries(Object.entries(data).map(([k, v]) => [`data-${k}`, v]))\n    : {};\n\n  // Only wire up handlers for events that are explicitly enabled.\n  const handlers: Record<string, unknown> = {};\n\n  if (enable.clicked) {\n    handlers.onClick = (e: React.MouseEvent<HTMLDivElement>) =>\n      onClicked(mouseEvent(e));\n  }\n  if (enable.doubleClicked) {\n    handlers.onDoubleClick = (e: React.MouseEvent<HTMLDivElement>) =>\n      onDoubleClicked(mouseEvent(e));\n  }\n  if (enable.mouseDown) {\n    handlers.onMouseDown = (e: React.MouseEvent<HTMLDivElement>) =>\n      onMouseDown(mouseEvent(e));\n  }\n  if (enable.mouseUp) {\n    handlers.onMouseUp = (e: React.MouseEvent<HTMLDivElement>) =>\n      onMouseUp(mouseEvent(e));\n  }\n  if (enable.mouseEnter) {\n    handlers.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) =>\n      onMouseEnter(mouseEvent(e));\n  }\n  if (enable.mouseMove) {\n    handlers.onMouseMove = (e: React.MouseEvent<HTMLDivElement>) =>\n      onMouseMove(mouseEvent(e));\n  }\n  if (enable.mouseLeave) {\n    handlers.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) =>\n      onMouseLeave(mouseEvent(e));\n  }\n  if (enable.contextMenu) {\n    handlers.onContextMenu = (e: React.MouseEvent<HTMLDivElement>) =>\n      onContextMenu(mouseEvent(e));\n  }\n  if (enable.wheel) {\n    handlers.onWheel = (e: React.WheelEvent<HTMLDivElement>) =>\n      onWheel(wheelEvent(e));\n  }\n  if (enable.keyDown) {\n    handlers.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) =>\n      onKeyDown(keyEvent(e));\n  }\n  if (enable.keyUp) {\n    handlers.onKeyUp = (e: React.KeyboardEvent<HTMLDivElement>) =>\n      onKeyUp(keyEvent(e));\n  }\n  if (enable.focus) {\n    handlers.onFocus = () => onFocus({id});\n  }\n  if (enable.blur) {\n    handlers.onBlur = () => onBlur({id});\n  }\n\n  // Keyboard events require the element to be focusable.\n  const needsTabIndex = Boolean(\n    enable.keyDown || enable.keyUp || enable.focus || enable.blur,\n  );\n\n  return (\n    <div\n      ref={rootRef}\n      className={className}\n      style={style as React.CSSProperties}\n      data-pihanga={cardName}\n      tabIndex={needsTabIndex ? 0 : undefined}\n      {...dataAttrs}\n      {...handlers}\n    >\n      {content && <Card cardName={content} parentCard={cardName} />}\n    </div>\n  );\n};\n"],"mappings":";;;;AAYA,SAAS,EACP,GACA,GAMA;CACA,OAAO;EACL,WAAW,EAAE;EACb,WAAW,EAAE;EACb,WAAW,EAAE,SAAS,EAAK,OAAO,OAAO;EACzC,WAAW,EAAE,SAAS,EAAK,MAAM,OAAO;CAC1C;AACF;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,YACA,YAAS,CAAC,GACV,cACA,UACA,SACA,aACA,cACA,oBACA,gBACA,cACA,iBACA,gBACA,iBACA,kBACA,YACA,cACA,YACA,YACA,cACE,GAEE,IAAU,EAAM,OAAuB,IAAI;CAEjD,SAAS,EACP,GACsB;EACtB,IAAM,IACJ,EAAQ,SAAS,sBAAsB,KACtC;GACC,MAAM;GACN,KAAK;EACP;EACF,OAAO;GACL;GACA,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,SAAS,EAAE;GACX,UAAU,EAAE;GACZ,GAAG,EAAgB,GAAG,CAAI;EAC5B;CACF;CAEA,SAAS,EACP,GACsB;EACtB,IAAM,IACJ,EAAQ,SAAS,sBAAsB,KACtC;GACC,MAAM;GACN,KAAK;EACP;EACF,OAAO;GACL;GACA,QAAQ,EAAE;GACV,QAAQ,EAAE;GACV,QAAQ,EAAE;GACV,GAAG,EAAgB,GAAG,CAAI;EAC5B;CACF;CAEA,SAAS,EACP,GACoB;EACpB,OAAO;GACL;GACA,KAAK,EAAE;GACP,MAAM,EAAE;GACR,QAAQ,EAAE;GACV,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,SAAS,EAAE;GACX,UAAU,EAAE;EACd;CACF;CAEA,IAAM,IAAY,IACd,OAAO,YAAY,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,IACzE,CAAC,GAGC,IAAoC,CAAC;CA0D3C,OAxDI,EAAO,YACT,EAAS,WAAW,MAClB,EAAU,EAAW,CAAC,CAAC,IAEvB,EAAO,kBACT,EAAS,iBAAiB,MACxB,EAAgB,EAAW,CAAC,CAAC,IAE7B,EAAO,cACT,EAAS,eAAe,MACtB,EAAY,EAAW,CAAC,CAAC,IAEzB,EAAO,YACT,EAAS,aAAa,MACpB,EAAU,EAAW,CAAC,CAAC,IAEvB,EAAO,eACT,EAAS,gBAAgB,MACvB,EAAa,EAAW,CAAC,CAAC,IAE1B,EAAO,cACT,EAAS,eAAe,MACtB,EAAY,EAAW,CAAC,CAAC,IAEzB,EAAO,eACT,EAAS,gBAAgB,MACvB,EAAa,EAAW,CAAC,CAAC,IAE1B,EAAO,gBACT,EAAS,iBAAiB,MACxB,EAAc,EAAW,CAAC,CAAC,IAE3B,EAAO,UACT,EAAS,WAAW,MAClB,EAAQ,EAAW,CAAC,CAAC,IAErB,EAAO,YACT,EAAS,aAAa,MACpB,EAAU,EAAS,CAAC,CAAC,IAErB,EAAO,UACT,EAAS,WAAW,MAClB,EAAQ,EAAS,CAAC,CAAC,IAEnB,EAAO,UACT,EAAS,gBAAgB,EAAQ,EAAC,MAAE,CAAC,IAEnC,EAAO,SACT,EAAS,eAAe,EAAO,EAAC,MAAE,CAAC,IASnC,kBAAC,OAAD;EACE,KAAK;EACM;EACJ;EACP,gBAAc;EACd,UATF,EAAO,WAAW,EAAO,SAAS,EAAO,SAAS,EAAO,OAS7B,IAAI,KAAA;EAC9B,GAAI;EACJ,GAAI;YAEH,KAAW,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA;CACzD,CAAA;AAET"}

package/cards/observable/observable.types.d.ts

@@ -0,0 +1,253 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const OBSERVABLE_CARD = "shad/observable";
+export declare const Observable: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ObservableProps<object>, S, ObservableEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const OBSERVABLE_ACTION: {
+    CLICKED: string;
+    BLUR: string;
+    FOCUS: string;
+    WHEEL: string;
+    DOUBLE_CLICKED: string;
+    MOUSE_DOWN: string;
+    MOUSE_UP: string;
+    MOUSE_ENTER: string;
+    MOUSE_MOVE: string;
+    MOUSE_LEAVE: string;
+    CONTEXT_MENU: string;
+    KEY_DOWN: string;
+    KEY_UP: string;
+};
+export declare const onObservableClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableDoubleClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableMouseDown: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableMouseUp: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableMouseEnter: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableMouseMove: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableMouseLeave: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableContextMenu: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}>) => void;
+export declare const onObservableWheel: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservablePointerPosition & {
+    id?: string;
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+}>) => void;
+export declare const onObservableKeyDown: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservableKeyEvent>) => void;
+export declare const onObservableKeyUp: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservableKeyEvent>) => void;
+export declare const onObservableFocus: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservableFocusEvent>) => void;
+export declare const onObservableBlur: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ObservableFocusEvent>) => void;
+/**
+ * Flags to selectively enable interaction events on the `Observable` card.
+ *
+ * An event is only wired up (listened for on the DOM) **and** reported (its
+ * `onXxx` callback fired) when its corresponding flag is `true`. Disabled
+ * events incur zero overhead — no listener is even attached.
+ */
+export type ObservableEnabledEvents = {
+    /** Single click. */
+    clicked?: boolean;
+    /** Double click. */
+    doubleClicked?: boolean;
+    /** Mouse button pressed down. */
+    mouseDown?: boolean;
+    /** Mouse button released. */
+    mouseUp?: boolean;
+    /** Pointer entered the bounding box. */
+    mouseEnter?: boolean;
+    /** Pointer moved while inside the bounding box. */
+    mouseMove?: boolean;
+    /** Pointer left the bounding box. */
+    mouseLeave?: boolean;
+    /** Right-click / context-menu request. */
+    contextMenu?: boolean;
+    /** Mouse wheel / trackpad scroll. */
+    wheel?: boolean;
+    /** Key pressed down (requires the root to be focused). */
+    keyDown?: boolean;
+    /** Key released (requires the root to be focused). */
+    keyUp?: boolean;
+    /** Root element gained focus. */
+    focus?: boolean;
+    /** Root element lost focus. */
+    blur?: boolean;
+};
+export type ObservableProps<S = object> = {
+    /** Optional caller-defined id, echoed back in every emitted event. */
+    id?: string;
+    /** Single child card rendered inside the transparent wrapper `<div>`. */
+    content?: PiCardRef;
+    /**
+     * Selectively enable which interaction events are captured and reported.
+     * Any event not set to `true` here is neither listened for nor emitted.
+     */
+    enable?: ObservableEnabledEvents;
+    /** Additional Tailwind / CSS utility classes for the wrapper `<div>`. */
+    className?: string;
+    /** Inline style object for the wrapper `<div>`. */
+    style?: S;
+    /** Arbitrary data attributes rendered as `data-{key}={value}` on the root element */
+    data?: Record<string, string>;
+};
+/**
+ * Pointer position reported by every mouse/wheel event.
+ *
+ * - `absoluteX` / `absoluteY` — relative to the top-left of the **page**
+ *   (i.e. `event.pageX` / `event.pageY`; includes scroll offset).
+ * - `relativeX` / `relativeY` — relative to the top-left of the
+ *   `Observable` card's own bounding box.
+ */
+export type ObservablePointerPosition = {
+    absoluteX: number;
+    absoluteY: number;
+    relativeX: number;
+    relativeY: number;
+};
+export type ObservableMouseEvent = ObservablePointerPosition & {
+    id?: string;
+    /** Mouse button that triggered the event (`MouseEvent.button`). */
+    button?: number;
+    /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */
+    buttons?: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+};
+export type ObservableWheelEvent = ObservablePointerPosition & {
+    id?: string;
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+};
+export type ObservableKeyEvent = {
+    id?: string;
+    key: string;
+    code: string;
+    repeat: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+};
+export type ObservableFocusEvent = {
+    id?: string;
+};
+export type ObservableEvents = {
+    onClicked: ObservableMouseEvent;
+    onDoubleClicked: ObservableMouseEvent;
+    onMouseDown: ObservableMouseEvent;
+    onMouseUp: ObservableMouseEvent;
+    onMouseEnter: ObservableMouseEvent;
+    onMouseMove: ObservableMouseEvent;
+    onMouseLeave: ObservableMouseEvent;
+    onContextMenu: ObservableMouseEvent;
+    onWheel: ObservableWheelEvent;
+    onKeyDown: ObservableKeyEvent;
+    onKeyUp: ObservableKeyEvent;
+    onFocus: ObservableFocusEvent;
+    onBlur: ObservableFocusEvent;
+};

package/cards/observable/observable.types.js

@@ -0,0 +1,21 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/observable/observable.types.ts
+var r = "shad/observable", i = e(r), a = n(r, [
+	"clicked",
+	"double_clicked",
+	"mouse_down",
+	"mouse_up",
+	"mouse_enter",
+	"mouse_move",
+	"mouse_leave",
+	"context_menu",
+	"wheel",
+	"key_down",
+	"key_up",
+	"focus",
+	"blur"
+]), o = t(a.CLICKED), s = t(a.DOUBLE_CLICKED), c = t(a.MOUSE_DOWN), l = t(a.MOUSE_UP), u = t(a.MOUSE_ENTER), d = t(a.MOUSE_MOVE), f = t(a.MOUSE_LEAVE), p = t(a.CONTEXT_MENU), m = t(a.WHEEL), h = t(a.KEY_DOWN), g = t(a.KEY_UP), _ = t(a.FOCUS), v = t(a.BLUR);
+//#endregion
+export { a as OBSERVABLE_ACTION, r as OBSERVABLE_CARD, i as Observable, v as onObservableBlur, o as onObservableClicked, p as onObservableContextMenu, s as onObservableDoubleClicked, _ as onObservableFocus, h as onObservableKeyDown, g as onObservableKeyUp, c as onObservableMouseDown, u as onObservableMouseEnter, f as onObservableMouseLeave, d as onObservableMouseMove, l as onObservableMouseUp, m as onObservableWheel };
+
+//# sourceMappingURL=observable.types.js.map

package/cards/observable/observable.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observable.types.js","names":[],"sources":["../../../src/cards/observable/observable.types.ts"],"sourcesContent":["import {\n  type PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const OBSERVABLE_CARD = \"shad/observable\";\n\nexport const Observable = createCardDeclaration<\n  ObservableProps,\n  ObservableEvents\n>(OBSERVABLE_CARD);\n\n// ---------------------------------------------------------------------------\n// Actions\n// ---------------------------------------------------------------------------\n\nexport const OBSERVABLE_ACTION = registerActions(OBSERVABLE_CARD, [\n  \"clicked\",\n  \"double_clicked\",\n  \"mouse_down\",\n  \"mouse_up\",\n  \"mouse_enter\",\n  \"mouse_move\",\n  \"mouse_leave\",\n  \"context_menu\",\n  \"wheel\",\n  \"key_down\",\n  \"key_up\",\n  \"focus\",\n  \"blur\",\n]);\n\nexport const onObservableClicked = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.CLICKED,\n);\nexport const onObservableDoubleClicked = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.DOUBLE_CLICKED,\n);\nexport const onObservableMouseDown = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.MOUSE_DOWN,\n);\nexport const onObservableMouseUp = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.MOUSE_UP,\n);\nexport const onObservableMouseEnter = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.MOUSE_ENTER,\n);\nexport const onObservableMouseMove = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.MOUSE_MOVE,\n);\nexport const onObservableMouseLeave = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.MOUSE_LEAVE,\n);\nexport const onObservableContextMenu = createOnAction<ObservableMouseEvent>(\n  OBSERVABLE_ACTION.CONTEXT_MENU,\n);\nexport const onObservableWheel = createOnAction<ObservableWheelEvent>(\n  OBSERVABLE_ACTION.WHEEL,\n);\nexport const onObservableKeyDown = createOnAction<ObservableKeyEvent>(\n  OBSERVABLE_ACTION.KEY_DOWN,\n);\nexport const onObservableKeyUp = createOnAction<ObservableKeyEvent>(\n  OBSERVABLE_ACTION.KEY_UP,\n);\nexport const onObservableFocus = createOnAction<ObservableFocusEvent>(\n  OBSERVABLE_ACTION.FOCUS,\n);\nexport const onObservableBlur = createOnAction<ObservableFocusEvent>(\n  OBSERVABLE_ACTION.BLUR,\n);\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\n/**\n * Flags to selectively enable interaction events on the `Observable` card.\n *\n * An event is only wired up (listened for on the DOM) **and** reported (its\n * `onXxx` callback fired) when its corresponding flag is `true`. Disabled\n * events incur zero overhead — no listener is even attached.\n */\nexport type ObservableEnabledEvents = {\n  /** Single click. */\n  clicked?: boolean;\n  /** Double click. */\n  doubleClicked?: boolean;\n  /** Mouse button pressed down. */\n  mouseDown?: boolean;\n  /** Mouse button released. */\n  mouseUp?: boolean;\n  /** Pointer entered the bounding box. */\n  mouseEnter?: boolean;\n  /** Pointer moved while inside the bounding box. */\n  mouseMove?: boolean;\n  /** Pointer left the bounding box. */\n  mouseLeave?: boolean;\n  /** Right-click / context-menu request. */\n  contextMenu?: boolean;\n  /** Mouse wheel / trackpad scroll. */\n  wheel?: boolean;\n  /** Key pressed down (requires the root to be focused). */\n  keyDown?: boolean;\n  /** Key released (requires the root to be focused). */\n  keyUp?: boolean;\n  /** Root element gained focus. */\n  focus?: boolean;\n  /** Root element lost focus. */\n  blur?: boolean;\n};\n\nexport type ObservableProps<S = object> = {\n  /** Optional caller-defined id, echoed back in every emitted event. */\n  id?: string;\n\n  /** Single child card rendered inside the transparent wrapper `<div>`. */\n  content?: PiCardRef;\n\n  /**\n   * Selectively enable which interaction events are captured and reported.\n   * Any event not set to `true` here is neither listened for nor emitted.\n   */\n  enable?: ObservableEnabledEvents;\n\n  /** Additional Tailwind / CSS utility classes for the wrapper `<div>`. */\n  className?: string;\n  /** Inline style object for the wrapper `<div>`. */\n  style?: S;\n\n  /** Arbitrary data attributes rendered as `data-{key}={value}` on the root element */\n  data?: Record<string, string>;\n};\n\n// ---------------------------------------------------------------------------\n// Event payloads\n// ---------------------------------------------------------------------------\n\n/**\n * Pointer position reported by every mouse/wheel event.\n *\n * - `absoluteX` / `absoluteY` — relative to the top-left of the **page**\n *   (i.e. `event.pageX` / `event.pageY`; includes scroll offset).\n * - `relativeX` / `relativeY` — relative to the top-left of the\n *   `Observable` card's own bounding box.\n */\nexport type ObservablePointerPosition = {\n  absoluteX: number;\n  absoluteY: number;\n  relativeX: number;\n  relativeY: number;\n};\n\nexport type ObservableMouseEvent = ObservablePointerPosition & {\n  id?: string;\n  /** Mouse button that triggered the event (`MouseEvent.button`). */\n  button?: number;\n  /** Bitmask of currently-pressed buttons (`MouseEvent.buttons`). */\n  buttons?: number;\n  altKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  shiftKey: boolean;\n};\n\nexport type ObservableWheelEvent = ObservablePointerPosition & {\n  id?: string;\n  deltaX: number;\n  deltaY: number;\n  deltaZ: number;\n};\n\nexport type ObservableKeyEvent = {\n  id?: string;\n  key: string;\n  code: string;\n  repeat: boolean;\n  altKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  shiftKey: boolean;\n};\n\nexport type ObservableFocusEvent = {\n  id?: string;\n};\n\nexport type ObservableEvents = {\n  onClicked: ObservableMouseEvent;\n  onDoubleClicked: ObservableMouseEvent;\n  onMouseDown: ObservableMouseEvent;\n  onMouseUp: ObservableMouseEvent;\n  onMouseEnter: ObservableMouseEvent;\n  onMouseMove: ObservableMouseEvent;\n  onMouseLeave: ObservableMouseEvent;\n  onContextMenu: ObservableMouseEvent;\n  onWheel: ObservableWheelEvent;\n  onKeyDown: ObservableKeyEvent;\n  onKeyUp: ObservableKeyEvent;\n  onFocus: ObservableFocusEvent;\n  onBlur: ObservableFocusEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAkB,mBAElB,IAAa,EAGxB,CAAe,GAMJ,IAAoB,EAAgB,GAAiB;CAChE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,GAEY,IAAsB,EACjC,EAAkB,OACpB,GACa,IAA4B,EACvC,EAAkB,cACpB,GACa,IAAwB,EACnC,EAAkB,UACpB,GACa,IAAsB,EACjC,EAAkB,QACpB,GACa,IAAyB,EACpC,EAAkB,WACpB,GACa,IAAwB,EACnC,EAAkB,UACpB,GACa,IAAyB,EACpC,EAAkB,WACpB,GACa,IAA0B,EACrC,EAAkB,YACpB,GACa,IAAoB,EAC/B,EAAkB,KACpB,GACa,IAAsB,EACjC,EAAkB,QACpB,GACa,IAAoB,EAC/B,EAAkB,MACpB,GACa,IAAoB,EAC/B,EAAkB,KACpB,GACa,IAAmB,EAC9B,EAAkB,IACpB"}

package/cards/pageWithNavbar/pageWithNavbar.type.d.ts

@@ -5,7 +5,7 @@ export declare const PageWithNavbar: <S extends import('@pihanga2/core').ReduxSt
 export declare const PAGE_WITH_NAVBAR_ACTION: {
     NAVIGATE_TO: string;
 };
-export declare const onPageWithNavbarNavigateTo: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onPageWithNavbarNavigateTo: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PageWithNavbarNavigateToEvent>) => void;
 /**

package/cards/pageWithNavbarMeta/pageWithNavbarMeta.types.d.ts

@@ -7,7 +7,7 @@ export declare const PageWithNavbarMeta: <S extends import('@pihanga2/core').Red
 export declare const PAGE_WITH_NAVBAR_META_ACTION: {
     NAVIGATE_TO: string;
 };
-export declare const onPageWithNavbarMetaNavigateTo: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onPageWithNavbarMetaNavigateTo: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PageWithNavbarMetaNavigateToEvent>) => void;
 export type NavLink = {

package/cards/pasteTarget/pasteTarget.types.d.ts

@@ -4,10 +4,10 @@ export declare const PASTE_TARGET_ACTION: {
     ERROR: string;
     PASTED_CONTENT: string;
 };
-export declare const onContentPasted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onContentPasted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & CloseEvent>) => void;
-export declare const onPasteError: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onPasteError: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PasteTargetErrorEvent>) => void;
 export declare const DEF_HEIGHT = "120px";

package/cards/resizableColumns/index.js

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

package/cards/resizableColumns/index.js.map

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

package/cards/resizableColumns/resizableColumns.component.js

@@ -0,0 +1,105 @@
+import './resizableColumns.css';/* empty css                 */
+import * as e from "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/resizableColumns/resizableColumns.component.tsx
+var a = 10;
+function o(e, t, n) {
+	if (!e?.length || e.length !== t) return Array(t).fill(100 / t);
+	let r = e.map((e) => {
+		let t = e.trim();
+		return t.endsWith("px") ? {
+			type: "px",
+			value: Math.max(0, parseFloat(t))
+		} : t.endsWith("%") ? {
+			type: "pct",
+			value: Math.max(0, parseFloat(t))
+		} : t.endsWith("fr") ? {
+			type: "fr",
+			value: Math.max(0, parseFloat(t))
+		} : {
+			type: "fr",
+			value: 1
+		};
+	}), i = n > 0 ? r.reduce((e, t) => e + (t.type === "px" ? t.value / n * 100 : 0), 0) : 0, a = r.reduce((e, t) => e + (t.type === "pct" ? t.value : 0), 0), o = Math.max(0, 100 - i - a), s = r.reduce((e, t) => e + (t.type === "fr" ? t.value : 0), 0), c = r.map((e) => e.type === "px" ? n > 0 ? e.value / n * 100 : 100 / t : e.type === "pct" ? e.value : s > 0 ? e.value / s * o : o / t), l = c.reduce((e, t) => e + t, 0);
+	return l > 0 ? c.map((e) => e / l * 100) : Array(t).fill(100 / t);
+}
+var s = (e, t, n) => Math.min(n, Math.max(t, e)), c = (c) => {
+	let { cardName: l, columnCards: u = [], columnWidths: d, minColumnPercent: f = a, className: p, dividerClassName: m } = c, h = u.length, [g, _] = e.useState(() => Array(h).fill(100 / h)), v = e.useRef(g), y = e.useRef(null), b = e.useRef(null);
+	e.useLayoutEffect(() => {
+		if (!y.current) return;
+		let e = y.current.getBoundingClientRect().width, t = o(d, h, e);
+		v.current = t, _(t);
+	}, [d, h]), e.useEffect(() => () => {
+		b.current?.();
+	}, []);
+	let x = (e, t) => ({
+		min: f,
+		max: t[e] + t[e + 1] - f
+	}), S = e.useCallback((e, t) => {
+		let n = v.current, r = n[e] + n[e + 1], { min: i, max: a } = x(e, n), o = s(t, i, a), c = [...n];
+		c[e] = o, c[e + 1] = r - o, v.current = c, _(c);
+	}, [f]), C = e.useCallback((e) => (t) => {
+		t.preventDefault();
+		let n = t.clientX, r = v.current[e], i = y.current;
+		if (!i) return;
+		let { width: a } = i.getBoundingClientRect();
+		if (a <= 0) return;
+		let o = (t) => {
+			S(e, r + (t.clientX - n) / a * 100);
+		}, s = () => {
+			window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", s), b.current = null;
+		};
+		b.current?.(), window.addEventListener("mousemove", o), window.addEventListener("mouseup", s), b.current = () => {
+			window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", s);
+		};
+	}, [S]), w = e.useCallback((e) => (t) => {
+		let { min: n, max: r } = x(e, v.current), i = v.current[e];
+		switch (t.key) {
+			case "ArrowLeft":
+				t.preventDefault(), S(e, i + (t.shiftKey ? -10 : -2));
+				break;
+			case "ArrowRight":
+				t.preventDefault(), S(e, i + (t.shiftKey ? 10 : 2));
+				break;
+			case "Home":
+				t.preventDefault(), S(e, n);
+				break;
+			case "End":
+				t.preventDefault(), S(e, r);
+				break;
+		}
+	}, [S]);
+	return h === 0 ? null : /* @__PURE__ */ r("div", {
+		ref: y,
+		"data-pihanga": l,
+		className: n("pi-resizable-columns", p),
+		children: u.map((a, o) => {
+			let s = g[o] ?? 100 / h;
+			return /* @__PURE__ */ i(e.Fragment, { children: [o > 0 && /* @__PURE__ */ r("div", {
+				className: n("pi-resizable-columns-divider", m),
+				onMouseDown: C(o - 1),
+				onKeyDown: w(o - 1),
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": `Resize columns ${o} and ${o + 1}`,
+				"aria-valuemin": f,
+				"aria-valuemax": (g[o - 1] ?? 0) + (g[o] ?? 0) - f,
+				"aria-valuenow": Math.round(g[o - 1] ?? 0),
+				tabIndex: 0
+			}), /* @__PURE__ */ r("div", {
+				className: "pi-resizable-columns-pane",
+				style: { width: `${s}%` },
+				children: /* @__PURE__ */ r(t, {
+					cardName: a,
+					parentCard: l
+				})
+			})] }, o);
+		})
+	});
+};
+//#endregion
+export { c as ResizableColumnsComponent };
+
+//# sourceMappingURL=resizableColumns.component.js.map

package/cards/resizableColumns/resizableColumns.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizableColumns.component.js","names":[],"sources":["../../../src/cards/resizableColumns/resizableColumns.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport clsx from \"clsx\";\n\nimport \"./resizableColumns.css\";\nimport type {ResizableColumnsProps} from \"./resizableColumns.types\";\n\nconst DEFAULT_MIN_PERCENT = 10;\n\ntype ParsedUnit = {type: \"px\" | \"pct\" | \"fr\"; value: number};\n\nfunction parseColumnWidths(\n  widths: string[] | undefined,\n  count: number,\n  containerPx: number,\n): number[] {\n  if (!widths?.length || widths.length !== count) {\n    return new Array(count).fill(100 / count);\n  }\n\n  const parsed: ParsedUnit[] = widths.map((w) => {\n    const s = w.trim();\n    if (s.endsWith(\"px\"))\n      return {type: \"px\", value: Math.max(0, parseFloat(s))};\n    if (s.endsWith(\"%\"))\n      return {type: \"pct\", value: Math.max(0, parseFloat(s))};\n    if (s.endsWith(\"fr\"))\n      return {type: \"fr\", value: Math.max(0, parseFloat(s))};\n    return {type: \"fr\", value: 1};\n  });\n\n  const totalPxAsPct =\n    containerPx > 0\n      ? parsed.reduce(\n          (s, p) => s + (p.type === \"px\" ? (p.value / containerPx) * 100 : 0),\n          0,\n        )\n      : 0;\n  const totalExplicitPct = parsed.reduce(\n    (s, p) => s + (p.type === \"pct\" ? p.value : 0),\n    0,\n  );\n  const remainingPct = Math.max(0, 100 - totalPxAsPct - totalExplicitPct);\n  const totalFr = parsed.reduce(\n    (s, p) => s + (p.type === \"fr\" ? p.value : 0),\n    0,\n  );\n\n  const result = parsed.map((p) => {\n    if (p.type === \"px\")\n      return containerPx > 0 ? (p.value / containerPx) * 100 : 100 / count;\n    if (p.type === \"pct\") return p.value;\n    return totalFr > 0\n      ? (p.value / totalFr) * remainingPct\n      : remainingPct / count;\n  });\n\n  const total = result.reduce((s, v) => s + v, 0);\n  return total > 0\n    ? result.map((v) => (v / total) * 100)\n    : new Array(count).fill(100 / count);\n}\n\nconst clamp = (v: number, min: number, max: number) =>\n  Math.min(max, Math.max(min, v));\n\nexport const ResizableColumnsComponent = (\n  props: PiCardProps<ResizableColumnsProps>,\n): React.ReactNode => {\n  const {\n    cardName,\n    columnCards = [],\n    columnWidths,\n    minColumnPercent = DEFAULT_MIN_PERCENT,\n    className,\n    dividerClassName,\n  } = props;\n\n  const count = columnCards.length;\n\n  // Equal split as the initial state — useLayoutEffect overwrites before paint.\n  const [panePercents, setPanePercents] = React.useState<number[]>(() =>\n    new Array(count).fill(100 / count),\n  );\n  const panePercentsRef = React.useRef(panePercents);\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const dragCleanupRef = React.useRef<(() => void) | null>(null);\n\n  // Parse columnWidths once the container is mounted so px values can be resolved.\n  React.useLayoutEffect(() => {\n    if (!containerRef.current) return;\n    const width = containerRef.current.getBoundingClientRect().width;\n    const next = parseColumnWidths(columnWidths, count, width);\n    panePercentsRef.current = next;\n    setPanePercents(next);\n  }, [columnWidths, count]);\n\n  // Cleanup any in-progress drag on unmount.\n  React.useEffect(() => {\n    return () => {\n      dragCleanupRef.current?.();\n    };\n  }, []);\n\n  const getDividerBounds = (dividerIndex: number, percents: number[]) => {\n    const combined = percents[dividerIndex] + percents[dividerIndex + 1];\n    return {min: minColumnPercent, max: combined - minColumnPercent};\n  };\n\n  const updatePanePair = React.useCallback(\n    (dividerIndex: number, nextLeadingPercent: number) => {\n      const current = panePercentsRef.current;\n      const combined = current[dividerIndex] + current[dividerIndex + 1];\n      const {min, max} = getDividerBounds(dividerIndex, current);\n      const clamped = clamp(nextLeadingPercent, min, max);\n      const next = [...current];\n      next[dividerIndex] = clamped;\n      next[dividerIndex + 1] = combined - clamped;\n      panePercentsRef.current = next;\n      setPanePercents(next);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [minColumnPercent],\n  );\n\n  const handleMouseDown = React.useCallback(\n    (dividerIndex: number) => (event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      const startX = event.clientX;\n      const startLeadingPercent = panePercentsRef.current[dividerIndex];\n      const container = containerRef.current;\n      if (!container) return;\n      const {width} = container.getBoundingClientRect();\n      if (width <= 0) return;\n\n      const onMouseMove = (e: MouseEvent) => {\n        const deltaPercent = ((e.clientX - startX) / width) * 100;\n        updatePanePair(dividerIndex, startLeadingPercent + deltaPercent);\n      };\n      const onMouseUp = () => {\n        window.removeEventListener(\"mousemove\", onMouseMove);\n        window.removeEventListener(\"mouseup\", onMouseUp);\n        dragCleanupRef.current = null;\n      };\n\n      dragCleanupRef.current?.();\n      window.addEventListener(\"mousemove\", onMouseMove);\n      window.addEventListener(\"mouseup\", onMouseUp);\n      dragCleanupRef.current = () => {\n        window.removeEventListener(\"mousemove\", onMouseMove);\n        window.removeEventListener(\"mouseup\", onMouseUp);\n      };\n    },\n    [updatePanePair],\n  );\n\n  const handleKeyDown = React.useCallback(\n    (dividerIndex: number) => (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const {min, max} = getDividerBounds(\n        dividerIndex,\n        panePercentsRef.current,\n      );\n      const current = panePercentsRef.current[dividerIndex];\n      switch (event.key) {\n        case \"ArrowLeft\":\n          event.preventDefault();\n          updatePanePair(dividerIndex, current + (event.shiftKey ? -10 : -2));\n          break;\n        case \"ArrowRight\":\n          event.preventDefault();\n          updatePanePair(dividerIndex, current + (event.shiftKey ? 10 : 2));\n          break;\n        case \"Home\":\n          event.preventDefault();\n          updatePanePair(dividerIndex, min);\n          break;\n        case \"End\":\n          event.preventDefault();\n          updatePanePair(dividerIndex, max);\n          break;\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [updatePanePair],\n  );\n\n  if (count === 0) return null;\n\n  return (\n    <div\n      ref={containerRef}\n      data-pihanga={cardName}\n      className={clsx(\"pi-resizable-columns\", className)}\n    >\n      {columnCards.map((card, i) => {\n        const pct = panePercents[i] ?? 100 / count;\n        return (\n          <React.Fragment key={i}>\n            {i > 0 && (\n              <div\n                className={clsx(\n                  \"pi-resizable-columns-divider\",\n                  dividerClassName,\n                )}\n                onMouseDown={handleMouseDown(i - 1)}\n                onKeyDown={handleKeyDown(i - 1)}\n                role=\"separator\"\n                aria-orientation=\"vertical\"\n                aria-label={`Resize columns ${i} and ${i + 1}`}\n                aria-valuemin={minColumnPercent}\n                aria-valuemax={\n                  (panePercents[i - 1] ?? 0) +\n                  (panePercents[i] ?? 0) -\n                  minColumnPercent\n                }\n                aria-valuenow={Math.round(panePercents[i - 1] ?? 0)}\n                tabIndex={0}\n              />\n            )}\n            <div\n              className=\"pi-resizable-columns-pane\"\n              style={{width: `${pct}%`}}\n            >\n              <Card cardName={card} parentCard={cardName} />\n            </div>\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/cards/resizableColumns/resizableColumns.css

@@ -0,0 +1 @@
+.pi-resizable-columns{flex-direction:row;width:100%;min-height:100%;display:flex;overflow:hidden}.pi-resizable-columns-pane{flex-shrink:0;min-width:0;overflow:hidden}.pi-resizable-columns-divider{cursor:col-resize;flex:0 0 8px;position:relative}.pi-resizable-columns-divider:before{content:"";width:var(--rg-divider-width,1px);background-color:var(--rg-divider-color,hsl(var(--border,214 32% 91%)));transition:width .12s,background-color .12s;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.pi-resizable-columns-divider:hover:before,.pi-resizable-columns-divider:focus-visible:before{width:var(--rg-divider-hover-width,4px);background-color:var(--rg-divider-hover-color,hsl(var(--muted-foreground,215 16% 47%)))}

package/cards/resizableColumns/resizableColumns.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/resizableColumns/resizableColumns.types.ts
+var t = "pi/resizable-columns", n = e(t);
+//#endregion
+export { t as RESIZABLE_COLUMNS_CARD, n as ResizableColumns };
+
+//# sourceMappingURL=resizableColumns.types.js.map

package/cards/resizableColumns/resizableColumns.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizableColumns.types.js","names":[],"sources":["../../../src/cards/resizableColumns/resizableColumns.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\n\nexport const RESIZABLE_COLUMNS_CARD = \"pi/resizable-columns\";\n\nexport type ResizableColumnsProps = {\n  columnCards: PiCardRef[];\n  /**\n   * Initial column widths. Supports CSS-like values:\n   *   - '200px'  — fixed initial width\n   *   - '30%'    — explicit percentage\n   *   - '1fr'    — fraction of remaining space (after px/% columns)\n   *\n   * Defaults to equal split when omitted or when length doesn't match columnCards.\n   * @example ['200px', '1fr', '1fr']  — fixed sidebar, two equal remaining columns\n   * @example ['30%', '70%']\n   * @example ['1fr', '2fr', '1fr']\n   */\n  columnWidths?: string[];\n  /** Minimum percentage any column can shrink to during drag. Default: 10 */\n  minColumnPercent?: number;\n  className?: string;\n  dividerClassName?: string;\n};\n\nexport const ResizableColumns = createCardDeclaration<ResizableColumnsProps>(\n  RESIZABLE_COLUMNS_CARD,\n);\n"],"mappings":";;AAEA,IAAa,IAAyB,wBAsBzB,IAAmB,EAC9B,CACF"}