@pihanga2/shadcn 0.2.20 → 0.2.22

package/cards/input/index.js

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

package/cards/input/input.component.js

@@ -1,68 +1,74 @@
 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 { Input as t } from "../../components/ui/input.js";
+import { Label as n } from "../../components/ui/label.js";
 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) => {
-	let { name: s, value: c = "", type: l = "text", placeholder: u, disabled: d, label: f, description: p, className: m, autoFocus: h, cardName: g, onChanged: _, onCommitted: v } = o, y = r.useRef(null);
+	let { name: s, value: c = "", type: l = "text", placeholder: u, disabled: d, label: f, description: p, className: m, autoFocus: h, submitOnEnter: g, cardName: _, onChanged: v, onCommitted: y } = o, b = r.useRef(null);
 	r.useEffect(() => {
-		h && y.current?.focus();
+		h && b.current?.focus();
 	}, []);
-	let b = o.id, x = !!o.invalid, S = e(), C = S.isInForm && !!s, [w, T] = r.useState(l === "file" ? "" : c);
+	let x = o.id, S = !!o.invalid, C = e(), w = C.isInForm && !!s, [T, E] = r.useState(l === "file" ? "" : c);
 	r.useEffect(() => {
-		!C && l !== "file" && T(c);
+		!w && l !== "file" && E(c);
 	}, [
 		c,
-		C,
+		w,
 		l
 	]);
-	let E = l === "file" ? void 0 : C ? S.formData[s] ?? "" : w;
-	function D(e) {
+	let D = l === "file" ? void 0 : w ? C.formData[s] ?? "" : T;
+	function O(e) {
 		let t = l === "file" ? e.target.files?.[0]?.name ?? "" : e.target.value;
-		C ? S.handleChange(s, t) : (T(t), _({
+		w ? C.handleChange(s, t) : (E(t), v({
 			name: s,
 			value: t
 		}));
 	}
-	function O() {
-		!C && l !== "file" && v({
+	function k() {
+		!w && l !== "file" && y({
 			name: s,
-			value: w
+			value: T
 		});
 	}
-	function k(e) {
-		e.key === "Enter" && !C && l !== "file" && v({
-			name: s,
-			value: w
-		});
+	function A(e) {
+		if (!(e.key !== "Enter" || l === "file")) {
+			if (w) {
+				g && C.requestAction("submit");
+				return;
+			}
+			y({
+				name: s,
+				value: T
+			});
+		}
 	}
-	let A = `${g}-${s ?? "input"}`, j = b ?? A;
+	let j = `${_}-${s ?? "input"}`, M = x ?? j;
 	return /* @__PURE__ */ a("div", {
-		"data-pihanga": g,
+		"data-pihanga": _,
 		className: "grid w-full gap-1.5",
 		children: [
-			f && /* @__PURE__ */ i(t, {
-				htmlFor: j,
+			f && /* @__PURE__ */ i(n, {
+				htmlFor: M,
 				children: f
 			}),
-			/* @__PURE__ */ i(n, {
-				ref: y,
-				id: j,
+			/* @__PURE__ */ i(t, {
+				ref: b,
+				id: M,
 				type: l,
-				value: E,
-				onChange: D,
-				onBlur: O,
-				onKeyDown: k,
+				value: D,
+				onChange: O,
+				onBlur: k,
+				onKeyDown: A,
 				placeholder: u,
 				disabled: d,
 				className: m,
-				"aria-invalid": x || void 0,
-				"aria-describedby": p ? `${j}-desc` : void 0
+				"aria-invalid": S || void 0,
+				"aria-describedby": p ? `${M}-desc` : void 0
 			}),
 			p && /* @__PURE__ */ i("p", {
-				id: `${j}-desc`,
+				id: `${M}-desc`,
 				className: "text-sm text-muted-foreground",
 				children: p
 			})

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

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

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

@@ -1,4 +1,7 @@
+import { FormFieldProps } from '../form/form.types';
 export declare const PI_INPUT_CARD = "pi/input";
+export declare const Input: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiInputProps, S, PiInputEvents>) => import('@pihanga2/core').PiCardDef;
+/** @deprecated Use `Input` instead. */
 export declare const PiInput: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiInputProps, S, PiInputEvents>) => import('@pihanga2/core').PiCardDef;
 export declare const PI_INPUT_ACTION: {
     CHANGED: string;
@@ -24,13 +27,7 @@ export declare const onInputCommitted: <S extends import('@pihanga2/core').Redux
 export declare const onPiInputCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiInputCommittedEvent>) => void;
-export type PiInputProps = {
-    /**
-     * Field name used to bind to FormContext when inside a pi/form card.
-     * When provided the component reads its value from form state and writes
-     * back via form.handleChange.
-     */
-    name?: string;
+export type PiInputProps = FormFieldProps & {
     /**
      * Controlled value used in standalone mode (outside a Form).
      * Ignored when `name` is set and the component is inside a pi/form.
@@ -65,6 +62,16 @@ export type PiInputProps = {
      * on mount — it does not re-focus on subsequent re-renders.
      */
     autoFocus?: boolean;
+    /**
+     * When true and this input is rendered inside a `pi/form` card, pressing
+     * Enter requests the form's submit action (`FormContext.requestAction("submit")`)
+     * — equivalent to clicking a `Button` with `formAction: "submit"` — instead
+     * of (or in addition to) firing `onCommitted`.
+     *
+     * Has no effect outside a `pi/form`.
+     * @default false
+     */
+    submitOnEnter?: boolean;
 };
 export type PiInputChangedEvent = {
     /** Field name, mirrors the `name` prop if provided. */

package/cards/input/input.types.js

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

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

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

package/cards/message/index.d.ts

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

package/cards/message/index.js

@@ -0,0 +1,15 @@
+import { MessageComponent as e } from "./message.component.js";
+import { MessageGroupComponent as t } from "./messageGroup.component.js";
+import { MESSAGE_CARD as n, MESSAGE_GROUP_CARD as r, Message as i, MessageGroup as a } from "./message.types.js";
+import { registerCardComponent as o } from "@pihanga2/core";
+o({
+	name: n,
+	component: e
+}), o({
+	name: r,
+	component: t
+});
+//#endregion
+export { n as MESSAGE_CARD, r as MESSAGE_GROUP_CARD, i as Message, a as MessageGroup };
+
+//# sourceMappingURL=index.js.map

package/cards/message/index.js.map

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

package/cards/message/message.component.d.ts

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

package/cards/message/message.component.js

@@ -0,0 +1,47 @@
+import { Message as e, MessageAvatar as t, MessageContent as n, MessageFooter as r, MessageHeader as i } from "../../components/ui/message.js";
+import "react";
+import { Card as a } from "@pihanga2/core";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/cards/message/message.component.tsx
+var c = (c) => {
+	let { align: l = "start", avatarCard: u, headerCard: d, contentCard: f, footerCard: p, className: m, avatarClassName: h, contentClassName: g, headerClassName: _, footerClassName: v, style: y, cardName: b } = c;
+	return /* @__PURE__ */ s(e, {
+		align: l,
+		className: m,
+		style: y,
+		"data-pihanga": b,
+		children: [u && /* @__PURE__ */ o(t, {
+			className: h,
+			children: /* @__PURE__ */ o(a, {
+				cardName: u,
+				parentCard: b
+			})
+		}), /* @__PURE__ */ s(n, {
+			className: g,
+			children: [
+				d && /* @__PURE__ */ o(i, {
+					className: _,
+					children: /* @__PURE__ */ o(a, {
+						cardName: d,
+						parentCard: b
+					})
+				}),
+				/* @__PURE__ */ o(a, {
+					cardName: f,
+					parentCard: b
+				}),
+				p && /* @__PURE__ */ o(r, {
+					className: v,
+					children: /* @__PURE__ */ o(a, {
+						cardName: p,
+						parentCard: b
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { c as MessageComponent };
+
+//# sourceMappingURL=message.component.js.map

package/cards/message/message.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.component.js","names":[],"sources":["../../../src/cards/message/message.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageHeader,\n} from \"@/components/ui/message\";\nimport type {MessageProps} from \"./message.types\";\n\nexport const MessageComponent = (\n  props: PiCardProps<MessageProps>,\n): React.ReactNode => {\n  const {\n    align = \"start\",\n    avatarCard,\n    headerCard,\n    contentCard,\n    footerCard,\n    className,\n    avatarClassName,\n    contentClassName,\n    headerClassName,\n    footerClassName,\n    style,\n    cardName,\n  } = props;\n\n  return (\n    <Message\n      align={align}\n      className={className}\n      style={style}\n      data-pihanga={cardName}\n    >\n      {avatarCard && (\n        <MessageAvatar className={avatarClassName}>\n          <Card cardName={avatarCard} parentCard={cardName} />\n        </MessageAvatar>\n      )}\n\n      <MessageContent className={contentClassName}>\n        {headerCard && (\n          <MessageHeader className={headerClassName}>\n            <Card cardName={headerCard} parentCard={cardName} />\n          </MessageHeader>\n        )}\n\n        <Card cardName={contentCard} parentCard={cardName} />\n\n        {footerCard && (\n          <MessageFooter className={footerClassName}>\n            <Card cardName={footerCard} parentCard={cardName} />\n          </MessageFooter>\n        )}\n      </MessageContent>\n    </Message>\n  );\n};\n"],"mappings":";;;;;AAWA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,WAAQ,SACR,eACA,eACA,gBACA,eACA,cACA,oBACA,qBACA,oBACA,oBACA,UACA,gBACE;CAEJ,OACE,kBAAC,GAAD;EACS;EACI;EACJ;EACP,gBAAc;YAJhB,CAMG,KACC,kBAAC,GAAD;GAAe,WAAW;aACxB,kBAAC,GAAD;IAAM,UAAU;IAAY,YAAY;GAAW,CAAA;EACtC,CAAA,GAGjB,kBAAC,GAAD;GAAgB,WAAW;aAA3B;IACG,KACC,kBAAC,GAAD;KAAe,WAAW;eACxB,kBAAC,GAAD;MAAM,UAAU;MAAY,YAAY;KAAW,CAAA;IACtC,CAAA;IAGjB,kBAAC,GAAD;KAAM,UAAU;KAAa,YAAY;IAAW,CAAA;IAEnD,KACC,kBAAC,GAAD;KAAe,WAAW;eACxB,kBAAC,GAAD;MAAM,UAAU;MAAY,YAAY;KAAW,CAAA;IACtC,CAAA;GAEH;IACT;;AAEb"}

package/cards/message/message.types.d.ts

@@ -0,0 +1,56 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const MESSAGE_CARD = "shad/message";
+export declare const Message: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<MessageProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type MessageProps = {
+    /**
+     * Alignment of the message row.
+     * - `"start"` — sender / left-hand messages (default).
+     * - `"end"` — receiver / current-user messages (right-hand side).
+     * @default "start"
+     */
+    align?: "start" | "end";
+    /**
+     * Pihanga card reference rendered inside `MessageAvatar`
+     * (typically a `shad/avatar` card). Omit to render no avatar slot.
+     */
+    avatarCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered above the message surface, inside
+     * `MessageHeader` (e.g. a sender name via `shad/typography`).
+     */
+    headerCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered as the message surface itself.
+     * Typically a `shad/bubble` card, but any card works — including
+     * "large" content such as a `markdown-viewer` or `shad/data-table` card.
+     */
+    contentCard: PiCardRef;
+    /**
+     * Pihanga card reference rendered below the message surface, inside
+     * `MessageFooter` (e.g. delivery status, timestamps, or action buttons).
+     */
+    footerCard?: PiCardRef;
+    /** Additional Tailwind classes applied to the root `Message` element. */
+    className?: string;
+    /** Additional Tailwind classes applied to `MessageAvatar`. */
+    avatarClassName?: string;
+    /** Additional Tailwind classes applied to `MessageContent`. */
+    contentClassName?: string;
+    /** Additional Tailwind classes applied to `MessageHeader`. */
+    headerClassName?: string;
+    /** Additional Tailwind classes applied to `MessageFooter`. */
+    footerClassName?: string;
+    /** Inline styles applied to the root `Message` element. */
+    style?: React.CSSProperties;
+};
+export declare const MESSAGE_GROUP_CARD = "shad/message-group";
+export declare const MessageGroup: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<MessageGroupProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type MessageGroupProps = {
+    /** Ordered list of `shad/message` (or other) card refs to stack. */
+    content: PiCardRef[];
+    /** Additional Tailwind classes applied to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: React.CSSProperties;
+};

package/cards/message/message.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/message/message.types.ts
+var t = "shad/message", n = e(t), r = "shad/message-group", i = e(r);
+//#endregion
+export { t as MESSAGE_CARD, r as MESSAGE_GROUP_CARD, n as Message, i as MessageGroup };
+
+//# sourceMappingURL=message.types.js.map

package/cards/message/message.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.types.js","names":[],"sources":["../../../src/cards/message/message.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const MESSAGE_CARD = \"shad/message\";\n\nexport const Message = createCardDeclaration<MessageProps>(MESSAGE_CARD);\n\nexport type MessageProps = {\n  /**\n   * Alignment of the message row.\n   * - `\"start\"` — sender / left-hand messages (default).\n   * - `\"end\"` — receiver / current-user messages (right-hand side).\n   * @default \"start\"\n   */\n  align?: \"start\" | \"end\";\n\n  /**\n   * Pihanga card reference rendered inside `MessageAvatar`\n   * (typically a `shad/avatar` card). Omit to render no avatar slot.\n   */\n  avatarCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered above the message surface, inside\n   * `MessageHeader` (e.g. a sender name via `shad/typography`).\n   */\n  headerCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered as the message surface itself.\n   * Typically a `shad/bubble` card, but any card works — including\n   * \"large\" content such as a `markdown-viewer` or `shad/data-table` card.\n   */\n  contentCard: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered below the message surface, inside\n   * `MessageFooter` (e.g. delivery status, timestamps, or action buttons).\n   */\n  footerCard?: PiCardRef;\n\n  /** Additional Tailwind classes applied to the root `Message` element. */\n  className?: string;\n  /** Additional Tailwind classes applied to `MessageAvatar`. */\n  avatarClassName?: string;\n  /** Additional Tailwind classes applied to `MessageContent`. */\n  contentClassName?: string;\n  /** Additional Tailwind classes applied to `MessageHeader`. */\n  headerClassName?: string;\n  /** Additional Tailwind classes applied to `MessageFooter`. */\n  footerClassName?: string;\n\n  /** Inline styles applied to the root `Message` element. */\n  style?: React.CSSProperties;\n};\n\n// ---------------------------------------------------------------------------\n// shad/message-group — stack consecutive messages from the same sender.\n// ---------------------------------------------------------------------------\n\nexport const MESSAGE_GROUP_CARD = \"shad/message-group\";\n\nexport const MessageGroup =\n  createCardDeclaration<MessageGroupProps>(MESSAGE_GROUP_CARD);\n\nexport type MessageGroupProps = {\n  /** Ordered list of `shad/message` (or other) card refs to stack. */\n  content: PiCardRef[];\n  /** Additional Tailwind classes applied to the root element. */\n  className?: string;\n  /** Inline styles applied to the root element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;AAGA,IAAa,IAAe,gBAEf,IAAU,EAAoC,CAAY,GAuD1D,IAAqB,sBAErB,IACX,EAAyC,CAAkB"}

package/cards/message/messageGroup.component.d.ts

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

package/cards/message/messageGroup.component.js

@@ -0,0 +1,21 @@
+import { MessageGroup as e } from "../../components/ui/message.js";
+import "react";
+import { Card as t } from "@pihanga2/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/message/messageGroup.component.tsx
+var r = (r) => {
+	let { content: i, className: a, style: o, cardName: s } = r;
+	return /* @__PURE__ */ n(e, {
+		className: a,
+		style: o,
+		"data-pihanga": s,
+		children: i.map((e, r) => /* @__PURE__ */ n(t, {
+			cardName: e,
+			parentCard: s
+		}, r))
+	});
+};
+//#endregion
+export { r as MessageGroupComponent };
+
+//# sourceMappingURL=messageGroup.component.js.map

package/cards/message/messageGroup.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageGroup.component.js","names":[],"sources":["../../../src/cards/message/messageGroup.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {MessageGroup} from \"@/components/ui/message\";\nimport type {MessageGroupProps} from \"./message.types\";\n\nexport const MessageGroupComponent = (\n  props: PiCardProps<MessageGroupProps>,\n): React.ReactNode => {\n  const {content, className, style, cardName} = props;\n\n  return (\n    <MessageGroup className={className} style={style} data-pihanga={cardName}>\n      {content.map((cn, i) => (\n        <Card cardName={cn} parentCard={cardName} key={i} />\n      ))}\n    </MessageGroup>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,YAAS,cAAW,UAAO,gBAAY;CAE9C,OACE,kBAAC,GAAD;EAAyB;EAAkB;EAAO,gBAAc;YAC7D,EAAQ,KAAK,GAAI,MAChB,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAAmB,GAAJ,CAAI,CACpD;CACW,CAAA;AAElB"}

package/cards/pageWithNavbarMeta/index.js

@@ -16,26 +16,36 @@ import { registerMetaCard as u } from "@pihanga2/core";
 function d(e) {
 	return e ? e.charAt(0).toLocaleUpperCase() + e.slice(1) : "";
 }
-function f(s, c, l) {
-	let u = c.navLinks ?? [], f = c.iconName, p = c.className, m = c.footer, h = [];
-	f && h.push(t({
-		iconLabel: f,
+function f(e) {
+	return typeof e == "function" ? e({}, {
+		cardName: "",
+		ctxtProps: {},
+		resolve: (e) => typeof e == "function" ? e({}, {
+			cardName: "",
+			ctxtProps: {}
+		}) : e
+	}) : e;
+}
+function p(s, c, l) {
+	let u = f(c.navLinks) ?? [], p = f(c.iconName), m = f(c.className), h = f(c.footer), g = [];
+	p && g.push(t({
+		iconLabel: p,
 		opts: {
 			variant: "none",
 			size: "icon"
 		},
 		className: "h-6 w-6 shrink-0 pointer-events-none"
-	})), h.push(a({
+	})), g.push(a({
 		text: c.title,
 		level: "large",
 		className: "leading-none"
 	}));
-	let g = l("title", i({
+	let _ = l("title", i({
 		direction: "row",
 		alignItems: "center",
 		spacing: 2,
-		content: h
-	})), _ = u.map((e, n) => l(`nav-link-${n}`, t({
+		content: g
+	})), v = u.map((e, n) => l(`nav-link-${n}`, t({
 		id: e.id,
 		label: e.title ?? d(e.id),
 		opts: { variant: "ghost" },
@@ -44,15 +54,15 @@ function f(s, c, l) {
 			type: o.NAVIGATE_TO,
 			id: e.id
 		})
-	}))), v = l("nav-md", n({
+	}))), y = l("nav-md", n({
 		showOn: "md",
 		content: l("nav-md-inner", i({
 			direction: "row",
 			alignItems: "center",
 			spacing: 5,
-			content: [g, ..._]
+			content: [_, ...v]
 		}))
-	})), y = u.length > 0 ? l("nav-sm", n({
+	})), b = u.length > 0 ? l("nav-sm", n({
 		showOn: "<md",
 		content: l("nav-sm-drawer", r({
 			direction: "left",
@@ -68,25 +78,25 @@ function f(s, c, l) {
 				direction: "column",
 				spacing: 4,
 				className: "p-4",
-				content: [g, ..._]
+				content: [_, ...v]
 			})),
 			footerCloseButtonText: null
 		}))
 	})) : l("nav-sm-title", n({
 		showOn: "<md",
-		content: g
-	})), b = [];
-	c.headerLeftCard && b.push(c.headerLeftCard), c.headerRightCard && b.push(c.headerRightCard);
-	let x = [v, y];
-	b.length > 0 && x.push(l("header-actions", i({
+		content: _
+	})), x = f(c.headerLeftCard), S = f(c.headerRightCard), C = [];
+	x && C.push(x), S && C.push(S);
+	let w = [y, b];
+	C.length > 0 && w.push(l("header-actions", i({
 		direction: "row",
 		alignItems: "center",
 		className: "ml-auto gap-2 lg:gap-4",
-		content: b
+		content: C
 	})));
-	let S = [l("header", e({
+	let T = [l("header", e({
 		className: "shrink-0 flex items-center gap-4 border-b bg-background px-4 md:px-6",
-		content: x
+		content: w
 	})), l("main", e({
 		className: "flex-1 min-h-0 overflow-y-auto bg-background p-4 py-2 md:p-8 md:py-4",
 		content: ((e, t) => {
@@ -94,22 +104,22 @@ function f(s, c, l) {
 			return n == null ? [] : [n];
 		})
 	}))];
-	return m && S.push(l("footer", e({
+	return h && T.push(l("footer", e({
 		className: "shrink-0 bg-background text-muted-foreground px-4 py-2 md:px-8 md:py-4",
-		content: [m]
+		content: [h]
 	}))), i({
 		direction: "row",
-		className: `w-full h-full justify-center${p ? ` ${p}` : ""}`,
+		className: `w-full h-full justify-center${m ? ` ${m}` : ""}`,
 		content: [l("page", i({
 			direction: "column",
 			className: "flex-1 h-full w-full",
-			content: S
+			content: T
 		}))]
 	});
 }
 u({
 	type: s,
-	mapper: f,
+	mapper: p,
 	events: o
 });
 //#endregion

package/cards/pageWithNavbarMeta/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/pageWithNavbarMeta/index.ts"],"sourcesContent":["import {\n  registerMetaCard,\n  type PiCardDef,\n  type PiCardRef,\n  type PiMetaProps,\n  type PiMetaResolveCtx,\n  type PiRegisterMetaCard,\n  type RegisterCardF,\n} from \"@pihanga2/core\";\n\nimport {Stack} from \"@/cards/stack\";\nimport {Box} from \"@/cards/box\";\nimport {Button} from \"@/cards/button\";\nimport {Typography} from \"@/cards/typography\";\nimport {Conditional} from \"@/cards/conditional\";\nimport {Drawer} from \"@/cards/drawer\";\n\nimport {\n  PAGE_WITH_NAVBAR_META_ACTION,\n  PI_PAGE_WITH_NAVBAR_META_CARD,\n  type NavLink,\n  type PageWithNavbarMetaDynProps,\n  type PageWithNavbarMetaEvents,\n  type PageWithNavbarMetaStaticProps,\n} from \"./pageWithNavbarMeta.types\";\n\nexport * from \"./pageWithNavbarMeta.types\";\n\n// ── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction capitalize(s: string): string {\n  return s ? s.charAt(0).toLocaleUpperCase() + s.slice(1) : \"\";\n}\n\n// ── Mapper ───────────────────────────────────────────────────────────────────\n\n/**\n * `StaticProps` arrive as their plain types — TypeScript refuses memo selectors.\n * `DynProps` arrive as `StateMapper<T>` functions — must be resolved via `resolve()`.\n */\ntype MapperProps = PiMetaProps<\n  PageWithNavbarMetaDynProps,\n  PageWithNavbarMetaStaticProps,\n  PageWithNavbarMetaEvents\n>;\n\nfunction PageWithNavbarMetaMapper(\n  _cardName: string,\n  props: MapperProps,\n  reg: RegisterCardF,\n): PiCardDef {\n  // ── Static props: plain types, no resolve() needed ───────────────────────\n  const navLinks = props.navLinks ?? [];\n  const iconName = props.iconName;\n  const wrapperClass = props.className;\n  const footer = props.footer;\n\n  // ── Title (icon + text) ─────────────────────────────────────────────────\n  // props.title is StateMapper<string> — a function, NOT a string.\n  // Typography's `text` prop is typed (via PiMapProps) as `string | StateMapper<string>`,\n  // so we forward the selector function directly.  The framework resolves it lazily\n  // (calls props.title(state, ctx)) when Typography renders.  This is different from\n  // using props.title as a string, which TypeScript would reject.\n  const titleContent: PiCardRef[] = [];\n  if (iconName) {\n    titleContent.push(\n      Button({\n        iconLabel: iconName,\n        opts: {variant: \"none\", size: \"icon\"},\n        className: \"h-6 w-6 shrink-0 pointer-events-none\",\n      }),\n    );\n  }\n  titleContent.push(\n    Typography({\n      text: props.title,\n      level: \"large\",\n      className: \"leading-none\",\n    }),\n  );\n\n  const titleStack = reg(\n    \"title\",\n    Stack({\n      direction: \"row\",\n      alignItems: \"center\",\n      spacing: 2,\n      content: titleContent,\n    }),\n  );\n\n  // ── Nav link buttons (shared between desktop and mobile) ────────────────\n  const linkButtons = navLinks.map((link: NavLink, i: number) =>\n    reg(\n      `nav-link-${i}`,\n      Button({\n        id: link.id,\n        label: link.title ?? capitalize(link.id),\n        opts: {variant: \"ghost\"},\n        className:\n          \"px-0 text-muted-foreground hover:text-foreground h-auto p-0\",\n        onClickedMapper: () => ({\n          type: PAGE_WITH_NAVBAR_META_ACTION.NAVIGATE_TO,\n          id: link.id,\n        }),\n      }),\n    ),\n  );\n\n  // ── Desktop nav (md+): title + links in a row ───────────────────────────\n  const desktopNav = reg(\n    \"nav-md\",\n    Conditional({\n      showOn: \"md\",\n      content: reg(\n        \"nav-md-inner\",\n        Stack({\n          direction: \"row\",\n          alignItems: \"center\",\n          spacing: 5,\n          content: [titleStack, ...linkButtons],\n        }),\n      ),\n    }),\n  );\n\n  // ── Mobile nav (< md) ───────────────────────────────────────────────────\n  // With nav links: hamburger drawer (left slide-in using pi/drawer).\n  // Without nav links: just show the title inline.\n  const mobileNav: PiCardRef =\n    navLinks.length > 0\n      ? reg(\n          \"nav-sm\",\n          Conditional({\n            showOn: \"<md\",\n            content: reg(\n              \"nav-sm-drawer\",\n              Drawer({\n                direction: \"left\",\n                trigger: Button({\n                  iconLabel: \"menu\",\n                  opts: {variant: \"outline\", size: \"icon\"},\n                  ariaLabel: \"Toggle navigation menu\",\n                }),\n                content: reg(\n                  \"nav-sm-content\",\n                  Stack({\n                    direction: \"column\",\n                    spacing: 4,\n                    className: \"p-4\",\n                    content: [titleStack, ...linkButtons],\n                  }),\n                ),\n                footerCloseButtonText: null,\n              }),\n            ),\n          }),\n        )\n      : reg(\n          \"nav-sm-title\",\n          Conditional({\n            showOn: \"<md\",\n            content: titleStack,\n          }),\n        );\n\n  // ── Header action slots ─────────────────────────────────────────────────\n  // Static PiCardRefs — TypeScript already refuses memo() selectors here.\n  const actionRefs: PiCardRef[] = [];\n  if (props.headerLeftCard) {\n    actionRefs.push(props.headerLeftCard);\n  }\n  if (props.headerRightCard) {\n    actionRefs.push(props.headerRightCard);\n  }\n\n  const headerContent: PiCardRef[] = [desktopNav, mobileNav];\n  if (actionRefs.length > 0) {\n    headerContent.push(\n      reg(\n        \"header-actions\",\n        Stack({\n          direction: \"row\",\n          alignItems: \"center\",\n          className: \"ml-auto gap-2 lg:gap-4\",\n          content: actionRefs,\n        }),\n      ),\n    );\n  }\n\n  // ── Header ──────────────────────────────────────────────────────────────\n  const header = reg(\n    \"header\",\n    Box({\n      className:\n        \"shrink-0 flex items-center gap-4 border-b bg-background px-4 md:px-6\",\n      content: headerContent,\n    }),\n  );\n\n  // ── Main ────────────────────────────────────────────────────────────────\n  // props.main is a StateMapper — resolved lazily so React re-renders when\n  // the referenced card changes.\n  const mainBox = reg(\n    \"main\",\n    Box({\n      className:\n        \"flex-1 min-h-0 overflow-y-auto bg-background p-4 py-2 md:p-8 md:py-4\",\n      content: ((_: unknown, ctx: PiMetaResolveCtx) => {\n        const ref = ctx.resolve(props.main);\n        return ref != null ? [ref as PiCardRef] : [];\n      }) as unknown as PiCardRef[],\n    }),\n  );\n\n  // ── Page column ─────────────────────────────────────────────────────────\n  const pageContent: PiCardRef[] = [header, mainBox];\n\n  // ── Footer (optional) ───────────────────────────────────────────────────\n  // `footer` is a static plain PiCardRef — use directly.\n  if (footer) {\n    pageContent.push(\n      reg(\n        \"footer\",\n        Box({\n          className:\n            \"shrink-0 bg-background text-muted-foreground px-4 py-2 md:px-8 md:py-4\",\n          content: [footer],\n        }),\n      ),\n    );\n  }\n\n  // ── Assemble ────────────────────────────────────────────────────────────\n  return Stack({\n    direction: \"row\",\n    className: `w-full h-full justify-center${wrapperClass ? ` ${wrapperClass}` : \"\"}`,\n    content: [\n      reg(\n        \"page\",\n        Stack({\n          direction: \"column\",\n          className: \"flex-1 h-full w-full\",\n          content: pageContent,\n        }),\n      ),\n    ],\n  });\n}\n\n// ── Registration ─────────────────────────────────────────────────────────────\n\nregisterMetaCard({\n  type: PI_PAGE_WITH_NAVBAR_META_CARD,\n  mapper: PageWithNavbarMetaMapper,\n  events: PAGE_WITH_NAVBAR_META_ACTION,\n} satisfies PiRegisterMetaCard);\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,SAAS,EAAW,GAAmB;CACrC,OAAO,IAAI,EAAE,OAAO,CAAC,EAAE,kBAAkB,IAAI,EAAE,MAAM,CAAC,IAAI;AAC5D;AAcA,SAAS,EACP,GACA,GACA,GACW;CAEX,IAAM,IAAW,EAAM,YAAY,CAAC,GAC9B,IAAW,EAAM,UACjB,IAAe,EAAM,WACrB,IAAS,EAAM,QAQf,IAA4B,CAAC;CAUnC,AATI,KACF,EAAa,KACX,EAAO;EACL,WAAW;EACX,MAAM;GAAC,SAAS;GAAQ,MAAM;EAAM;EACpC,WAAW;CACb,CAAC,CACH,GAEF,EAAa,KACX,EAAW;EACT,MAAM,EAAM;EACZ,OAAO;EACP,WAAW;CACb,CAAC,CACH;CAEA,IAAM,IAAa,EACjB,SACA,EAAM;EACJ,WAAW;EACX,YAAY;EACZ,SAAS;EACT,SAAS;CACX,CAAC,CACH,GAGM,IAAc,EAAS,KAAK,GAAe,MAC/C,EACE,YAAY,KACZ,EAAO;EACL,IAAI,EAAK;EACT,OAAO,EAAK,SAAS,EAAW,EAAK,EAAE;EACvC,MAAM,EAAC,SAAS,QAAO;EACvB,WACE;EACF,wBAAwB;GACtB,MAAM,EAA6B;GACnC,IAAI,EAAK;EACX;CACF,CAAC,CACH,CACF,GAGM,IAAa,EACjB,UACA,EAAY;EACV,QAAQ;EACR,SAAS,EACP,gBACA,EAAM;GACJ,WAAW;GACX,YAAY;GACZ,SAAS;GACT,SAAS,CAAC,GAAY,GAAG,CAAW;EACtC,CAAC,CACH;CACF,CAAC,CACH,GAKM,IACJ,EAAS,SAAS,IACd,EACE,UACA,EAAY;EACV,QAAQ;EACR,SAAS,EACP,iBACA,EAAO;GACL,WAAW;GACX,SAAS,EAAO;IACd,WAAW;IACX,MAAM;KAAC,SAAS;KAAW,MAAM;IAAM;IACvC,WAAW;GACb,CAAC;GACD,SAAS,EACP,kBACA,EAAM;IACJ,WAAW;IACX,SAAS;IACT,WAAW;IACX,SAAS,CAAC,GAAY,GAAG,CAAW;GACtC,CAAC,CACH;GACA,uBAAuB;EACzB,CAAC,CACH;CACF,CAAC,CACH,IACA,EACE,gBACA,EAAY;EACV,QAAQ;EACR,SAAS;CACX,CAAC,CACH,GAIA,IAA0B,CAAC;CAIjC,AAHI,EAAM,kBACR,EAAW,KAAK,EAAM,cAAc,GAElC,EAAM,mBACR,EAAW,KAAK,EAAM,eAAe;CAGvC,IAAM,IAA6B,CAAC,GAAY,CAAS;CACzD,AAAI,EAAW,SAAS,KACtB,EAAc,KACZ,EACE,kBACA,EAAM;EACJ,WAAW;EACX,YAAY;EACZ,WAAW;EACX,SAAS;CACX,CAAC,CACH,CACF;CA6BF,IAAM,IAA2B,CAzBlB,EACb,UACA,EAAI;EACF,WACE;EACF,SAAS;CACX,CAAC,CAmB+B,GAblB,EACd,QACA,EAAI;EACF,WACE;EACF,WAAW,GAAY,MAA0B;GAC/C,IAAM,IAAM,EAAI,QAAQ,EAAM,IAAI;GAClC,OAAO,KAAO,OAA4B,CAAC,IAAtB,CAAC,CAAgB;EACxC;CACF,CAAC,CAIuC,CAAO;CAkBjD,OAdI,KACF,EAAY,KACV,EACE,UACA,EAAI;EACF,WACE;EACF,SAAS,CAAC,CAAM;CAClB,CAAC,CACH,CACF,GAIK,EAAM;EACX,WAAW;EACX,WAAW,+BAA+B,IAAe,IAAI,MAAiB;EAC9E,SAAS,CACP,EACE,QACA,EAAM;GACJ,WAAW;GACX,WAAW;GACX,SAAS;EACX,CAAC,CACH,CACF;CACF,CAAC;AACH;AAIA,EAAiB;CACf,MAAM;CACN,QAAQ;CACR,QAAQ;AACV,CAA8B"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/pageWithNavbarMeta/index.ts"],"sourcesContent":["import {\n  registerMetaCard,\n  type PiCardDef,\n  type PiCardRef,\n  type PiMetaProps,\n  type PiMetaResolveCtx,\n  type PiRegisterMetaCard,\n  type RegisterCardF,\n  type PiDefCtxtProps,\n  type ReduxState,\n  type StateMapper,\n  type StateMapperContext,\n} from \"@pihanga2/core\";\n\nimport {Stack} from \"@/cards/stack\";\nimport {Box} from \"@/cards/box\";\nimport {Button} from \"@/cards/button\";\nimport {Typography} from \"@/cards/typography\";\nimport {Conditional} from \"@/cards/conditional\";\nimport {Drawer} from \"@/cards/drawer\";\n\nimport {\n  PAGE_WITH_NAVBAR_META_ACTION,\n  PI_PAGE_WITH_NAVBAR_META_CARD,\n  type NavLink,\n  type PageWithNavbarMetaDynProps,\n  type PageWithNavbarMetaEvents,\n  type PageWithNavbarMetaStaticProps,\n} from \"./pageWithNavbarMeta.types\";\n\nexport * from \"./pageWithNavbarMeta.types\";\n\n// ── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction capitalize(s: string): string {\n  return s ? s.charAt(0).toLocaleUpperCase() + s.slice(1) : \"\";\n}\n\n/**\n * Resolve a `PiMetaProps`-delivered prop (always a `StateMapper<T>`, per\n * `makeLiveMetaProps` — see `@pihanga2/core`) synchronously, once, at mapper\n * run-time. Only appropriate for props this mapper reads directly in its own\n * body (as opposed to forwarding to a sub-card's own `resolve()`-based state\n * mapper) — i.e. props that control the *shape* of the expansion (how many\n * nav-link buttons, whether a footer/header-action slot exists) rather than\n * a value a sub-card should react to on every render. See the \"reactivity\n * has one hard limit\" note in AGENT.md's metacards guide.\n */\nfunction resolveOnce<T>(\n  prop: StateMapper<T, ReduxState, PiDefCtxtProps> | undefined,\n): T | undefined {\n  if (typeof prop !== \"function\") return prop;\n  return prop({} as ReduxState, {\n    cardName: \"\",\n    ctxtProps: {},\n    resolve: (p: unknown) =>\n      typeof p === \"function\"\n        ? (p as StateMapper<unknown, ReduxState, PiDefCtxtProps>)(\n            {} as ReduxState,\n            {cardName: \"\", ctxtProps: {}} as StateMapperContext<PiDefCtxtProps>,\n          )\n        : p,\n  } as StateMapperContext<PiDefCtxtProps>);\n}\n\n// ── Mapper ───────────────────────────────────────────────────────────────────\n\n/**\n * `StaticProps` arrive as their plain types — TypeScript refuses memo selectors.\n * `DynProps` arrive as `StateMapper<T>` functions — must be resolved via `resolve()`.\n */\ntype MapperProps = PiMetaProps<\n  PageWithNavbarMetaDynProps,\n  PageWithNavbarMetaStaticProps,\n  PageWithNavbarMetaEvents\n>;\n\nfunction PageWithNavbarMetaMapper(\n  _cardName: string,\n  props: MapperProps,\n  reg: RegisterCardF,\n): PiCardDef {\n  // ── Structural props: read once, synchronously, to decide the SHAPE of the\n  // expansion (how many nav-link buttons, whether the footer/header-action\n  // slots exist). Per PiMetaProps, every prop — dynamic or static — arrives\n  // as a StateMapper; resolveOnce() unwraps it a single time at mapper\n  // run-time (the mapper itself only ever runs once, so these can't become\n  // reactive regardless — see AGENT.md's metacards guide).\n  const navLinks = resolveOnce(props.navLinks) ?? [];\n  const iconName = resolveOnce(props.iconName);\n  const wrapperClass = resolveOnce(props.className);\n  const footer = resolveOnce(props.footer);\n\n  // ── Title (icon + text) ─────────────────────────────────────────────────\n  // props.title is StateMapper<string> — a function, NOT a string.\n  // Typography's `text` prop is typed (via PiMapProps) as `string | StateMapper<string>`,\n  // so we forward the selector function directly.  The framework resolves it lazily\n  // (calls props.title(state, ctx)) when Typography renders.  This is different from\n  // using props.title as a string, which TypeScript would reject.\n  const titleContent: PiCardRef[] = [];\n  if (iconName) {\n    titleContent.push(\n      Button({\n        iconLabel: iconName,\n        opts: {variant: \"none\", size: \"icon\"},\n        className: \"h-6 w-6 shrink-0 pointer-events-none\",\n      }),\n    );\n  }\n  titleContent.push(\n    Typography({\n      text: props.title,\n      level: \"large\",\n      className: \"leading-none\",\n    }),\n  );\n\n  const titleStack = reg(\n    \"title\",\n    Stack({\n      direction: \"row\",\n      alignItems: \"center\",\n      spacing: 2,\n      content: titleContent,\n    }),\n  );\n\n  // ── Nav link buttons (shared between desktop and mobile) ────────────────\n  const linkButtons = navLinks.map((link: NavLink, i: number) =>\n    reg(\n      `nav-link-${i}`,\n      Button({\n        id: link.id,\n        label: link.title ?? capitalize(link.id),\n        opts: {variant: \"ghost\"},\n        className:\n          \"px-0 text-muted-foreground hover:text-foreground h-auto p-0\",\n        onClickedMapper: () => ({\n          type: PAGE_WITH_NAVBAR_META_ACTION.NAVIGATE_TO,\n          id: link.id,\n        }),\n      }),\n    ),\n  );\n\n  // ── Desktop nav (md+): title + links in a row ───────────────────────────\n  const desktopNav = reg(\n    \"nav-md\",\n    Conditional({\n      showOn: \"md\",\n      content: reg(\n        \"nav-md-inner\",\n        Stack({\n          direction: \"row\",\n          alignItems: \"center\",\n          spacing: 5,\n          content: [titleStack, ...linkButtons],\n        }),\n      ),\n    }),\n  );\n\n  // ── Mobile nav (< md) ───────────────────────────────────────────────────\n  // With nav links: hamburger drawer (left slide-in using pi/drawer).\n  // Without nav links: just show the title inline.\n  const mobileNav: PiCardRef =\n    navLinks.length > 0\n      ? reg(\n          \"nav-sm\",\n          Conditional({\n            showOn: \"<md\",\n            content: reg(\n              \"nav-sm-drawer\",\n              Drawer({\n                direction: \"left\",\n                trigger: Button({\n                  iconLabel: \"menu\",\n                  opts: {variant: \"outline\", size: \"icon\"},\n                  ariaLabel: \"Toggle navigation menu\",\n                }),\n                content: reg(\n                  \"nav-sm-content\",\n                  Stack({\n                    direction: \"column\",\n                    spacing: 4,\n                    className: \"p-4\",\n                    content: [titleStack, ...linkButtons],\n                  }),\n                ),\n                footerCloseButtonText: null,\n              }),\n            ),\n          }),\n        )\n      : reg(\n          \"nav-sm-title\",\n          Conditional({\n            showOn: \"<md\",\n            content: titleStack,\n          }),\n        );\n\n  // ── Header action slots ─────────────────────────────────────────────────\n  // Structural — decide whether the action-slot Stack exists at all — so\n  // read once, synchronously, like the other shape-controlling props above.\n  const headerLeftCard = resolveOnce(props.headerLeftCard);\n  const headerRightCard = resolveOnce(props.headerRightCard);\n  const actionRefs: PiCardRef[] = [];\n  if (headerLeftCard) {\n    actionRefs.push(headerLeftCard);\n  }\n  if (headerRightCard) {\n    actionRefs.push(headerRightCard);\n  }\n\n  const headerContent: PiCardRef[] = [desktopNav, mobileNav];\n  if (actionRefs.length > 0) {\n    headerContent.push(\n      reg(\n        \"header-actions\",\n        Stack({\n          direction: \"row\",\n          alignItems: \"center\",\n          className: \"ml-auto gap-2 lg:gap-4\",\n          content: actionRefs,\n        }),\n      ),\n    );\n  }\n\n  // ── Header ──────────────────────────────────────────────────────────────\n  const header = reg(\n    \"header\",\n    Box({\n      className:\n        \"shrink-0 flex items-center gap-4 border-b bg-background px-4 md:px-6\",\n      content: headerContent,\n    }),\n  );\n\n  // ── Main ────────────────────────────────────────────────────────────────\n  // props.main is a StateMapper — resolved lazily so React re-renders when\n  // the referenced card changes.\n  const mainBox = reg(\n    \"main\",\n    Box({\n      className:\n        \"flex-1 min-h-0 overflow-y-auto bg-background p-4 py-2 md:p-8 md:py-4\",\n      content: ((_: unknown, ctx: PiMetaResolveCtx) => {\n        const ref = ctx.resolve(props.main);\n        return ref != null ? [ref as PiCardRef] : [];\n      }) as unknown as PiCardRef[],\n    }),\n  );\n\n  // ── Page column ─────────────────────────────────────────────────────────\n  const pageContent: PiCardRef[] = [header, mainBox];\n\n  // ── Footer (optional) ───────────────────────────────────────────────────\n  // `footer` is a static plain PiCardRef — use directly.\n  if (footer) {\n    pageContent.push(\n      reg(\n        \"footer\",\n        Box({\n          className:\n            \"shrink-0 bg-background text-muted-foreground px-4 py-2 md:px-8 md:py-4\",\n          content: [footer],\n        }),\n      ),\n    );\n  }\n\n  // ── Assemble ────────────────────────────────────────────────────────────\n  return Stack({\n    direction: \"row\",\n    className: `w-full h-full justify-center${wrapperClass ? ` ${wrapperClass}` : \"\"}`,\n    content: [\n      reg(\n        \"page\",\n        Stack({\n          direction: \"column\",\n          className: \"flex-1 h-full w-full\",\n          content: pageContent,\n        }),\n      ),\n    ],\n  });\n}\n\n// ── Registration ─────────────────────────────────────────────────────────────\n\nregisterMetaCard({\n  type: PI_PAGE_WITH_NAVBAR_META_CARD,\n  mapper: PageWithNavbarMetaMapper,\n  events: PAGE_WITH_NAVBAR_META_ACTION,\n} satisfies PiRegisterMetaCard);\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAS,EAAW,GAAmB;CACrC,OAAO,IAAI,EAAE,OAAO,CAAC,EAAE,kBAAkB,IAAI,EAAE,MAAM,CAAC,IAAI;AAC5D;AAYA,SAAS,EACP,GACe;CAEf,OADI,OAAO,KAAS,aACb,EAAK,CAAC,GAAiB;EAC5B,UAAU;EACV,WAAW,CAAC;EACZ,UAAU,MACR,OAAO,KAAM,aACR,EACC,CAAC,GACD;GAAC,UAAU;GAAI,WAAW,CAAC;EAAC,CAC9B,IACA;CACR,CAAuC,IAXA;AAYzC;AAcA,SAAS,EACP,GACA,GACA,GACW;CAOX,IAAM,IAAW,EAAY,EAAM,QAAQ,KAAK,CAAC,GAC3C,IAAW,EAAY,EAAM,QAAQ,GACrC,IAAe,EAAY,EAAM,SAAS,GAC1C,IAAS,EAAY,EAAM,MAAM,GAQjC,IAA4B,CAAC;CAUnC,AATI,KACF,EAAa,KACX,EAAO;EACL,WAAW;EACX,MAAM;GAAC,SAAS;GAAQ,MAAM;EAAM;EACpC,WAAW;CACb,CAAC,CACH,GAEF,EAAa,KACX,EAAW;EACT,MAAM,EAAM;EACZ,OAAO;EACP,WAAW;CACb,CAAC,CACH;CAEA,IAAM,IAAa,EACjB,SACA,EAAM;EACJ,WAAW;EACX,YAAY;EACZ,SAAS;EACT,SAAS;CACX,CAAC,CACH,GAGM,IAAc,EAAS,KAAK,GAAe,MAC/C,EACE,YAAY,KACZ,EAAO;EACL,IAAI,EAAK;EACT,OAAO,EAAK,SAAS,EAAW,EAAK,EAAE;EACvC,MAAM,EAAC,SAAS,QAAO;EACvB,WACE;EACF,wBAAwB;GACtB,MAAM,EAA6B;GACnC,IAAI,EAAK;EACX;CACF,CAAC,CACH,CACF,GAGM,IAAa,EACjB,UACA,EAAY;EACV,QAAQ;EACR,SAAS,EACP,gBACA,EAAM;GACJ,WAAW;GACX,YAAY;GACZ,SAAS;GACT,SAAS,CAAC,GAAY,GAAG,CAAW;EACtC,CAAC,CACH;CACF,CAAC,CACH,GAKM,IACJ,EAAS,SAAS,IACd,EACE,UACA,EAAY;EACV,QAAQ;EACR,SAAS,EACP,iBACA,EAAO;GACL,WAAW;GACX,SAAS,EAAO;IACd,WAAW;IACX,MAAM;KAAC,SAAS;KAAW,MAAM;IAAM;IACvC,WAAW;GACb,CAAC;GACD,SAAS,EACP,kBACA,EAAM;IACJ,WAAW;IACX,SAAS;IACT,WAAW;IACX,SAAS,CAAC,GAAY,GAAG,CAAW;GACtC,CAAC,CACH;GACA,uBAAuB;EACzB,CAAC,CACH;CACF,CAAC,CACH,IACA,EACE,gBACA,EAAY;EACV,QAAQ;EACR,SAAS;CACX,CAAC,CACH,GAKA,IAAiB,EAAY,EAAM,cAAc,GACjD,IAAkB,EAAY,EAAM,eAAe,GACnD,IAA0B,CAAC;CAIjC,AAHI,KACF,EAAW,KAAK,CAAc,GAE5B,KACF,EAAW,KAAK,CAAe;CAGjC,IAAM,IAA6B,CAAC,GAAY,CAAS;CACzD,AAAI,EAAW,SAAS,KACtB,EAAc,KACZ,EACE,kBACA,EAAM;EACJ,WAAW;EACX,YAAY;EACZ,WAAW;EACX,SAAS;CACX,CAAC,CACH,CACF;CA6BF,IAAM,IAA2B,CAzBlB,EACb,UACA,EAAI;EACF,WACE;EACF,SAAS;CACX,CAAC,CAmB+B,GAblB,EACd,QACA,EAAI;EACF,WACE;EACF,WAAW,GAAY,MAA0B;GAC/C,IAAM,IAAM,EAAI,QAAQ,EAAM,IAAI;GAClC,OAAO,KAAO,OAA4B,CAAC,IAAtB,CAAC,CAAgB;EACxC;CACF,CAAC,CAIuC,CAAO;CAkBjD,OAdI,KACF,EAAY,KACV,EACE,UACA,EAAI;EACF,WACE;EACF,SAAS,CAAC,CAAM;CAClB,CAAC,CACH,CACF,GAIK,EAAM;EACX,WAAW;EACX,WAAW,+BAA+B,IAAe,IAAI,MAAiB;EAC9E,SAAS,CACP,EACE,QACA,EAAM;GACJ,WAAW;GACX,WAAW;GACX,SAAS;EACX,CAAC,CACH,CACF;CACF,CAAC;AACH;AAIA,EAAiB;CACf,MAAM;CACN,QAAQ;CACR,QAAQ;AACV,CAA8B"}