@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/builder/ReactiveCanvasBuilder.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,473 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/badge/Badge.js";
+import "../../../ui/badge/index.js";
+import n from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import r from "../../../ui/card/Card.js";
+import i from "../../../ui/card/CardContent.js";
+import a from "../../../ui/card/CardHeader.js";
+import o from "../../../ui/card/CardTitle.js";
+import "../../../ui/card/index.js";
+import s from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import c from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import ee from "../../../ui/select/Select.js";
+import te from "../../../ui/select/SelectContent.js";
+import ne from "../../../ui/select/SelectItem.js";
+import re from "../../../ui/select/SelectTrigger.js";
+import ie from "../../../ui/select/SelectValue.js";
+import "../../../ui/select/index.js";
+import ae from "../../../ui/textarea/Textarea.js";
+import "../../../ui/textarea/index.js";
+import { REACTIVE_CANVAS_BLOCK_TYPES as l, useReactiveCanvasBuilder as oe } from "../../../../stores/reactiveCanvasBuilderStore.js";
+import se from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeModels as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as ce, onMounted as le, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, useModel as ue, watch as D, withCtx as O, withModifiers as k } from "vue";
+import { Plus as de, Trash2 as fe, X as pe } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/ReactiveCanvasBuilder.vue?vue&type=script&setup=true&lang.ts
+var me = ["data-element-name"], he = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "reactive-canvas-builder-palette"
+}, ge = { class: "flex flex-col gap-1" }, _e = ["data-testid", "onClick"], ve = { class: "font-medium" }, A = {
+	class: "flex flex-col gap-3 overflow-auto p-3",
+	"data-testid": "reactive-canvas-builder-canvas"
+}, j = { class: "flex items-center justify-between gap-2" }, M = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, N = {
+	key: 0,
+	class: "absolute inset-0 flex items-center justify-center text-center text-xs text-muted-foreground",
+	"data-testid": "reactive-canvas-builder-canvas-empty"
+}, P = [
+	"data-testid",
+	"onClick",
+	"onPointerdown"
+], F = { class: "flex items-center justify-between" }, ye = { class: "font-mono text-[10px] text-muted-foreground" }, be = { class: "font-mono text-[10px] text-muted-foreground" }, xe = { class: "mt-1 font-mono text-[10px] text-muted-foreground" }, Se = ["data-testid", "onPointerdown"], Ce = {
+	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+	"data-testid": "reactive-canvas-builder-inspector"
+}, we = { class: "flex items-center justify-between" }, Te = { class: "grid grid-cols-2 gap-2" }, Ee = { class: "flex flex-col gap-1" }, De = { class: "flex flex-col gap-1" }, Oe = {
+	key: 0,
+	class: "py-3 text-xs text-muted-foreground",
+	"data-testid": "reactive-canvas-builder-inspector-empty"
+}, ke = {
+	key: 1,
+	class: "flex flex-col gap-3",
+	"data-testid": "reactive-canvas-builder-inspector-fields"
+}, Ae = { class: "flex flex-col gap-1" }, je = { class: "grid grid-cols-2 gap-2" }, Me = { class: "flex flex-col gap-1" }, Ne = { class: "flex flex-col gap-1" }, Pe = { class: "flex flex-col gap-1" }, Fe = { class: "flex flex-col gap-1" }, Ie = { class: "flex flex-col gap-1" }, Le = {
+	key: 0,
+	class: "text-xs text-destructive",
+	"data-testid": "reactive-canvas-builder-inspector-props-error"
+}, Re = { class: "flex items-center gap-1" }, I = 20, L = /* @__PURE__ */ v({
+	__name: "ReactiveCanvasBuilder",
+	props: /* @__PURE__ */ y({
+		modelValue: {},
+		builderId: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(v) {
+		let y = v, L = ue(v, "modelValue"), R = 0;
+		function ze() {
+			return R += 1, `reactive-canvas-${Date.now()}-${R}`;
+		}
+		let Be = C(ze()), z = oe(d(() => y.builderId ?? Be.value).value);
+		function Ve(e) {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return typeof t.width == "number" && typeof t.height == "number" && Array.isArray(t.blocks);
+		}
+		le(() => {
+			let e = L.value;
+			Ve(e) && z.loadSchema(e);
+		}), D(() => z.schema.value, (e) => {
+			L.value = e;
+		}, { deep: !0 });
+		let B = d(() => z.schema.value), V = d(() => B.value.blocks), H = d(() => z.selection.value.id), U = d(() => {
+			let e = H.value;
+			return e ? V.value.find((t) => t.id === e) ?? null : null;
+		}), W = C(""), G = C(null);
+		D(() => U.value?.id, () => {
+			let e = U.value;
+			if (!e) {
+				W.value = "", G.value = null;
+				return;
+			}
+			W.value = JSON.stringify(e.props ?? {}, null, 2), G.value = null;
+		}, { immediate: !0 });
+		function He(e) {
+			let t = z.addBlock(e);
+			z.select(t);
+		}
+		function Ue(e) {
+			z.select(e);
+		}
+		function We() {
+			z.select(null);
+		}
+		function Ge() {
+			let e = H.value;
+			e && z.removeBlock(e);
+		}
+		function K(e) {
+			let t = H.value;
+			t && z.updateBlock(t, e);
+		}
+		function q(e, t) {
+			let n = t.target.value, r = Number(n);
+			Number.isFinite(r) && K({ [e]: r });
+		}
+		function J(e, t) {
+			let n = t.target.value, r = Number(n);
+			Number.isFinite(r) && r > 0 && z.setCanvasSize({ [e]: r });
+		}
+		function Y(e) {
+			typeof e == "string" && K({ type: e });
+		}
+		function Ke(e) {
+			let t = e.target.value;
+			W.value = t;
+			try {
+				let e = t.trim() === "" ? {} : JSON.parse(t);
+				if (typeof e != "object" || !e || Array.isArray(e)) throw Error("Props must be a JSON object");
+				G.value = null, K({ props: e });
+			} catch (e) {
+				G.value = e instanceof Error ? e.message : "Invalid JSON";
+			}
+		}
+		let qe = d(() => ({
+			width: `${B.value.width}px`,
+			height: `${B.value.height}px`,
+			maxWidth: "100%"
+		}));
+		function Je(e) {
+			return {
+				left: `${e.x}px`,
+				top: `${e.y}px`,
+				width: `${e.width}px`,
+				height: `${e.height}px`
+			};
+		}
+		let X = C(null), Ye = d(() => X.value?.blockId ?? null);
+		function Xe(e, t, n, r) {
+			let i = Math.max(0, B.value.width - n), a = Math.max(0, B.value.height - r);
+			return {
+				x: Math.min(Math.max(0, e), i),
+				y: Math.min(Math.max(0, t), a)
+			};
+		}
+		function Z(e, t, n, r = null) {
+			t.preventDefault(), t.stopPropagation(), z.select(e.id);
+			let i = t.target;
+			if (i && typeof i.setPointerCapture == "function") try {
+				i.setPointerCapture(t.pointerId);
+			} catch {}
+			X.value = {
+				mode: n,
+				corner: r,
+				blockId: e.id,
+				pointerId: t.pointerId,
+				target: i ?? t.currentTarget,
+				startClientX: t.clientX,
+				startClientY: t.clientY,
+				startX: e.x,
+				startY: e.y,
+				startWidth: e.width,
+				startHeight: e.height
+			}, window.addEventListener("pointermove", Q), window.addEventListener("pointerup", $), window.addEventListener("pointercancel", $);
+		}
+		function Ze(e, t) {
+			t.button !== void 0 && t.button !== 0 || Z(e, t, "drag");
+		}
+		function Qe(e, t, n) {
+			n.button !== void 0 && n.button !== 0 || Z(e, n, "resize", t);
+		}
+		function $e(e, t, n) {
+			let r = Xe(e.startX + t, e.startY + n, e.startWidth, e.startHeight);
+			z.updateBlock(e.blockId, {
+				x: r.x,
+				y: r.y
+			});
+		}
+		function et(e, t, n) {
+			let r = e.startX, i = e.startY, a = e.startWidth, o = e.startHeight;
+			switch (e.corner) {
+				case "br":
+					a = e.startWidth + t, o = e.startHeight + n;
+					break;
+				case "tr":
+					a = e.startWidth + t, o = e.startHeight - n, i = e.startY + n;
+					break;
+				case "bl":
+					a = e.startWidth - t, o = e.startHeight + n, r = e.startX + t;
+					break;
+				case "tl":
+					a = e.startWidth - t, o = e.startHeight - n, r = e.startX + t, i = e.startY + n;
+					break;
+				default: return;
+			}
+			a < I && ((e.corner === "tl" || e.corner === "bl") && (r = e.startX + (e.startWidth - I)), a = I), o < I && ((e.corner === "tl" || e.corner === "tr") && (i = e.startY + (e.startHeight - I)), o = I), z.updateBlock(e.blockId, {
+				x: r,
+				y: i,
+				width: a,
+				height: o
+			});
+		}
+		function Q(e) {
+			let t = X.value;
+			if (!t) return;
+			let n = e.clientX - t.startClientX, r = e.clientY - t.startClientY;
+			t.mode === "drag" ? $e(t, n, r) : et(t, n, r);
+		}
+		function $(e) {
+			let t = X.value;
+			if (t) {
+				let e = t.target;
+				if (e && typeof e.releasePointerCapture == "function") try {
+					e.releasePointerCapture(t.pointerId);
+				} catch {}
+			}
+			X.value = null, window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		}
+		ce(() => {
+			window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		});
+		let tt = [
+			{
+				corner: "tl",
+				position: "-top-1 -left-1",
+				cursor: "cursor-nwse-resize"
+			},
+			{
+				corner: "tr",
+				position: "-top-1 -right-1",
+				cursor: "cursor-nesw-resize"
+			},
+			{
+				corner: "bl",
+				position: "-bottom-1 -left-1",
+				cursor: "cursor-nesw-resize"
+			},
+			{
+				corner: "br",
+				position: "-bottom-1 -right-1",
+				cursor: "cursor-nwse-resize"
+			}
+		];
+		return (oe, d) => (S(), f(E(se), {
+			label: y.label,
+			"hide-label": y.hideLabel,
+			"help-text": y.helpText,
+			errors: y.errors,
+			class: b(y.classList)
+		}, {
+			default: O(() => [h("div", {
+				class: b(E(e)("gxp-reactive-canvas-builder grid gap-3 rounded-lg border bg-card")),
+				style: {
+					"grid-template-columns": "220px 1fr 320px",
+					"min-height": "24rem"
+				},
+				"data-testid": "reactive-canvas-builder",
+				"data-element-name": y.name ?? void 0
+			}, [
+				h("aside", he, [d[7] ||= h("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Block palette ", -1), h("div", ge, [(S(!0), m(u, null, w(E(l), (e) => (S(), m("button", {
+					key: e,
+					type: "button",
+					class: "flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40",
+					"data-testid": `reactive-canvas-builder-palette-${e}`,
+					onClick: (t) => He(e)
+				}, [_(E(de), { class: "mt-0.5 h-3.5 w-3.5 shrink-0" }), h("span", ve, T(e), 1)], 8, _e))), 128))])]),
+				h("section", A, [h("header", j, [h("h4", M, " Canvas (" + T(B.value.width) + " x " + T(B.value.height) + ") ", 1), _(E(t), {
+					variant: "outline",
+					class: "font-mono text-[10px]"
+				}, {
+					default: O(() => [...d[8] ||= [g(" builder/reactive-canvas-builder ", -1)]]),
+					_: 1
+				})]), h("div", {
+					class: "relative overflow-auto rounded-md border border-dashed bg-background",
+					style: x(qe.value),
+					"data-testid": "reactive-canvas-builder-surface"
+				}, [V.value.length === 0 ? (S(), m("p", N, " Click a block type in the palette to add it. ")) : p("", !0), (S(!0), m(u, null, w(V.value, (t) => (S(), m("div", {
+					key: t.id,
+					class: b(["absolute cursor-move touch-none select-none rounded border bg-card p-2 text-xs shadow-sm transition-colors hover:border-primary", [H.value === t.id ? "border-primary ring-2 ring-primary/30" : "", Ye.value === t.id ? "ring-2 ring-primary" : ""]]),
+					style: x(Je(t)),
+					"data-testid": `reactive-canvas-builder-block-${t.id}`,
+					onClick: k((e) => Ue(t.id), ["stop"]),
+					onPointerdown: (e) => Ze(t, e)
+				}, [
+					h("div", F, [h("span", ye, T(t.type), 1), h("span", be, T(t.width) + "x" + T(t.height), 1)]),
+					h("div", xe, " (" + T(t.x) + ", " + T(t.y) + ") ", 1),
+					(S(), m(u, null, w(tt, (n) => h("span", {
+						key: n.corner,
+						class: b(E(e)("absolute h-2 w-2 rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary", n.position, n.cursor)),
+						"data-testid": `reactive-canvas-builder-block-${t.id}-resize-${n.corner}`,
+						onClick: d[0] ||= k(() => {}, ["stop"]),
+						onPointerdown: k((e) => Qe(t, n.corner, e), ["stop"])
+					}, null, 42, Se)), 64))
+				], 46, P))), 128))], 4)]),
+				h("aside", Ce, [
+					h("header", we, [d[9] ||= h("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), H.value ? (S(), f(E(n), {
+						key: 0,
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Clear selection",
+						onClick: We
+					}, {
+						default: O(() => [_(E(pe), { class: "h-3.5 w-3.5" })]),
+						_: 1
+					})) : p("", !0)]),
+					_(E(r), { class: "border-dashed" }, {
+						default: O(() => [_(E(a), { class: "py-2" }, {
+							default: O(() => [_(E(o), { class: "font-mono text-xs uppercase tracking-wide" }, {
+								default: O(() => [...d[10] ||= [g(" Canvas ", -1)]]),
+								_: 1
+							})]),
+							_: 1
+						}), _(E(i), { class: "flex flex-col gap-2 pb-3" }, {
+							default: O(() => [h("div", Te, [h("div", Ee, [_(E(c), { for: "rcb-canvas-width" }, {
+								default: O(() => [...d[11] ||= [g("Width", -1)]]),
+								_: 1
+							}), _(E(s), {
+								id: "rcb-canvas-width",
+								type: "number",
+								"model-value": B.value.width,
+								"data-testid": "reactive-canvas-builder-canvas-width",
+								onInput: d[1] ||= (e) => J("width", e)
+							}, null, 8, ["model-value"])]), h("div", De, [_(E(c), { for: "rcb-canvas-height" }, {
+								default: O(() => [...d[12] ||= [g("Height", -1)]]),
+								_: 1
+							}), _(E(s), {
+								id: "rcb-canvas-height",
+								type: "number",
+								"model-value": B.value.height,
+								"data-testid": "reactive-canvas-builder-canvas-height",
+								onInput: d[2] ||= (e) => J("height", e)
+							}, null, 8, ["model-value"])])])]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					U.value ? (S(), m("div", ke, [_(E(r), { class: "border-dashed" }, {
+						default: O(() => [_(E(a), { class: "py-2" }, {
+							default: O(() => [_(E(o), { class: "font-mono text-xs uppercase tracking-wide" }, {
+								default: O(() => [g(T(U.value.type), 1)]),
+								_: 1
+							})]),
+							_: 1
+						}), _(E(i), { class: "flex flex-col gap-2 pb-3" }, {
+							default: O(() => [
+								h("div", Ae, [_(E(c), null, {
+									default: O(() => [...d[13] ||= [g("Block type", -1)]]),
+									_: 1
+								}), _(E(ee), {
+									"model-value": U.value.type,
+									"onUpdate:modelValue": Y
+								}, {
+									default: O(() => [_(E(re), { "data-testid": "reactive-canvas-builder-inspector-type" }, {
+										default: O(() => [_(E(ie))]),
+										_: 1
+									}), _(E(te), null, {
+										default: O(() => [(S(!0), m(u, null, w(E(l), (e) => (S(), f(E(ne), {
+											key: e,
+											value: e
+										}, {
+											default: O(() => [g(T(e), 1)]),
+											_: 2
+										}, 1032, ["value"]))), 128))]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["model-value"])]),
+								h("div", je, [
+									h("div", Me, [_(E(c), { for: "rcb-block-x" }, {
+										default: O(() => [...d[14] ||= [g("X", -1)]]),
+										_: 1
+									}), _(E(s), {
+										id: "rcb-block-x",
+										type: "number",
+										"model-value": U.value.x,
+										"data-testid": "reactive-canvas-builder-inspector-x",
+										onInput: d[3] ||= (e) => q("x", e)
+									}, null, 8, ["model-value"])]),
+									h("div", Ne, [_(E(c), { for: "rcb-block-y" }, {
+										default: O(() => [...d[15] ||= [g("Y", -1)]]),
+										_: 1
+									}), _(E(s), {
+										id: "rcb-block-y",
+										type: "number",
+										"model-value": U.value.y,
+										"data-testid": "reactive-canvas-builder-inspector-y",
+										onInput: d[4] ||= (e) => q("y", e)
+									}, null, 8, ["model-value"])]),
+									h("div", Pe, [_(E(c), { for: "rcb-block-width" }, {
+										default: O(() => [...d[16] ||= [g("Width", -1)]]),
+										_: 1
+									}), _(E(s), {
+										id: "rcb-block-width",
+										type: "number",
+										"model-value": U.value.width,
+										"data-testid": "reactive-canvas-builder-inspector-width",
+										onInput: d[5] ||= (e) => q("width", e)
+									}, null, 8, ["model-value"])]),
+									h("div", Fe, [_(E(c), { for: "rcb-block-height" }, {
+										default: O(() => [...d[17] ||= [g("Height", -1)]]),
+										_: 1
+									}), _(E(s), {
+										id: "rcb-block-height",
+										type: "number",
+										"model-value": U.value.height,
+										"data-testid": "reactive-canvas-builder-inspector-height",
+										onInput: d[6] ||= (e) => q("height", e)
+									}, null, 8, ["model-value"])])
+								]),
+								h("div", Ie, [
+									_(E(c), { for: "rcb-block-props" }, {
+										default: O(() => [...d[18] ||= [g("Props (JSON)", -1)]]),
+										_: 1
+									}),
+									_(E(ae), {
+										id: "rcb-block-props",
+										"model-value": W.value,
+										rows: "6",
+										class: "font-mono text-xs",
+										"data-testid": "reactive-canvas-builder-inspector-props",
+										onInput: Ke
+									}, null, 8, ["model-value"]),
+									G.value ? (S(), m("p", Le, T(G.value), 1)) : p("", !0)
+								])
+							]),
+							_: 1
+						})]),
+						_: 1
+					}), h("div", Re, [_(E(n), {
+						variant: "destructive",
+						size: "sm",
+						class: "ml-auto",
+						"data-testid": "reactive-canvas-builder-remove",
+						onClick: Ge
+					}, {
+						default: O(() => [_(E(fe), { class: "h-3.5 w-3.5" }), d[19] ||= g(" Remove block ", -1)]),
+						_: 1
+					})])])) : (S(), m("p", Oe, " Select a block on the canvas to edit it. "))
+				])
+			], 10, me)]),
+			_: 1
+		}, 8, [
+			"label",
+			"hide-label",
+			"help-text",
+			"errors",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { L as default };
+
+//# sourceMappingURL=ReactiveCanvasBuilder.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/builder/ReactiveCanvasBuilder.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveCanvasBuilder.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/ReactiveCanvasBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ReactiveCanvasBuilder — visual canvas where component-like blocks can\n * be placed and configured.\n *\n * Three-pane layout (matches FormBuilder):\n *   - LEFT (Palette):    a list of built-in block types. Click to add.\n *   - MIDDLE (Canvas):   a fixed-size relative-positioned surface. Each\n *                        block renders as an absolutely-positioned\n *                        placeholder card showing type + size + position.\n *                        Click to select.\n *   - RIGHT (Inspector): edits the selected block's x / y / width /\n *                        height (number inputs), type (Select), and\n *                        props (JSON textarea for now).\n *\n * Blocks may be repositioned by pointer-drag (no snapping, raw pixel\n * delta) and resized via four corner handles. Drag clamps to the\n * canvas bounds; resize clamps each block to a 20x20 minimum.\n *\n * State is owned by `reactiveCanvasBuilderStore`. Two-way binds the\n * full `ReactiveCanvasBuilderSchema` via `defineModel`.\n */\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { Plus, Trash2, X } from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  FieldFrame,\n  type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n  REACTIVE_CANVAS_BLOCK_TYPES,\n  useReactiveCanvasBuilder,\n  type ReactiveCanvasBlock,\n  type ReactiveCanvasBuilderSchema,\n} from \"@/stores/reactiveCanvasBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ReactiveCanvasBuilderProps\n  extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: ReactiveCanvasBuilderSchema\n  /**\n   * Identifier used to key the reactiveCanvasBuilderStore. Defaults to\n   * a stable auto-generated id so multiple builders on the same page\n   * don't collide.\n   */\n  builderId?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ReactiveCanvasBuilderProps>(), {\n  errors: () => [],\n  item: () => ({}),\n})\n\nconst model = defineModel<ReactiveCanvasBuilderSchema | undefined>(\n  \"modelValue\",\n)\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `reactive-canvas-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useReactiveCanvasBuilder(builderId.value)\n\nfunction isSchema(value: unknown): value is ReactiveCanvasBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return (\n    typeof v.width === \"number\" &&\n    typeof v.height === \"number\" &&\n    Array.isArray(v.blocks)\n  )\n}\n\nonMounted(() => {\n  const seed = model.value\n  if (isSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = next\n  },\n  { deep: true },\n)\n\nconst schema = computed<ReactiveCanvasBuilderSchema>(\n  () => builder.schema.value,\n)\nconst blocks = computed<ReactiveCanvasBlock[]>(() => schema.value.blocks)\nconst selectedId = computed<string | null>(() => builder.selection.value.id)\nconst selectedBlock = computed<ReactiveCanvasBlock | null>(() => {\n  const id = selectedId.value\n  if (!id) {\n    return null\n  }\n  return blocks.value.find((b) => b.id === id) ?? null\n})\n\n/** Local string buffer for the props JSON textarea so users can type\n * freely without us re-parsing on every keystroke. */\nconst propsJsonDraft = ref<string>(\"\")\nconst propsJsonError = ref<string | null>(null)\n\nwatch(\n  () => selectedBlock.value?.id,\n  () => {\n    const block = selectedBlock.value\n    if (!block) {\n      propsJsonDraft.value = \"\"\n      propsJsonError.value = null\n      return\n    }\n    propsJsonDraft.value = JSON.stringify(block.props ?? {}, null, 2)\n    propsJsonError.value = null\n  },\n  { immediate: true },\n)\n\nfunction onPaletteAdd(type: string): void {\n  const id = builder.addBlock(type)\n  builder.select(id)\n}\n\nfunction onBlockClick(blockId: string): void {\n  builder.select(blockId)\n}\n\nfunction onClearSelection(): void {\n  builder.select(null)\n}\n\nfunction onRemoveSelected(): void {\n  const id = selectedId.value\n  if (id) {\n    builder.removeBlock(id)\n  }\n}\n\nfunction patchSelected(\n  patch: Partial<Omit<ReactiveCanvasBlock, \"id\">>,\n): void {\n  const id = selectedId.value\n  if (id) {\n    builder.updateBlock(id, patch)\n  }\n}\n\nfunction onNumberInput(\n  key: \"x\" | \"y\" | \"width\" | \"height\",\n  e: Event,\n): void {\n  const raw = (e.target as HTMLInputElement).value\n  const parsed = Number(raw)\n  if (Number.isFinite(parsed)) {\n    patchSelected({ [key]: parsed } as Partial<ReactiveCanvasBlock>)\n  }\n}\n\nfunction onCanvasSizeInput(key: \"width\" | \"height\", e: Event): void {\n  const raw = (e.target as HTMLInputElement).value\n  const parsed = Number(raw)\n  if (Number.isFinite(parsed) && parsed > 0) {\n    builder.setCanvasSize({ [key]: parsed })\n  }\n}\n\nfunction onTypeChange(v: unknown): void {\n  if (typeof v === \"string\") {\n    patchSelected({ type: v })\n  }\n}\n\nfunction onPropsJsonInput(e: Event): void {\n  const next = (e.target as HTMLTextAreaElement).value\n  propsJsonDraft.value = next\n  try {\n    const parsed = next.trim() === \"\" ? {} : JSON.parse(next)\n    if (\n      typeof parsed !== \"object\" ||\n      parsed === null ||\n      Array.isArray(parsed)\n    ) {\n      throw new Error(\"Props must be a JSON object\")\n    }\n    propsJsonError.value = null\n    patchSelected({ props: parsed as Record<string, unknown> })\n  } catch (err) {\n    propsJsonError.value =\n      err instanceof Error ? err.message : \"Invalid JSON\"\n  }\n}\n\nconst canvasStyle = computed(() => ({\n  width: `${schema.value.width}px`,\n  height: `${schema.value.height}px`,\n  maxWidth: \"100%\",\n}))\n\nfunction blockStyle(block: ReactiveCanvasBlock): Record<string, string> {\n  return {\n    left: `${block.x}px`,\n    top: `${block.y}px`,\n    width: `${block.width}px`,\n    height: `${block.height}px`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/* Pointer-driven drag + resize                                       */\n/* ------------------------------------------------------------------ */\n\nconst MIN_BLOCK_SIZE = 20\n\ntype ResizeCorner = \"tl\" | \"tr\" | \"bl\" | \"br\"\n\ninterface DragState {\n  mode: \"drag\" | \"resize\"\n  corner: ResizeCorner | null\n  blockId: string\n  pointerId: number\n  target: HTMLElement\n  startClientX: number\n  startClientY: number\n  startX: number\n  startY: number\n  startWidth: number\n  startHeight: number\n}\n\nconst activeDrag = ref<DragState | null>(null)\nconst activeInteractionId = computed<string | null>(\n  () => activeDrag.value?.blockId ?? null,\n)\n\nfunction clampToCanvas(\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n): { x: number; y: number } {\n  const maxX = Math.max(0, schema.value.width - width)\n  const maxY = Math.max(0, schema.value.height - height)\n  return {\n    x: Math.min(Math.max(0, x), maxX),\n    y: Math.min(Math.max(0, y), maxY),\n  }\n}\n\nfunction beginInteraction(\n  block: ReactiveCanvasBlock,\n  event: PointerEvent,\n  mode: \"drag\" | \"resize\",\n  corner: ResizeCorner | null = null,\n): void {\n  event.preventDefault()\n  event.stopPropagation()\n  builder.select(block.id)\n  const target = event.target as HTMLElement | null\n  if (target && typeof target.setPointerCapture === \"function\") {\n    try {\n      target.setPointerCapture(event.pointerId)\n    } catch {\n      // ignore (jsdom or detached node)\n    }\n  }\n  activeDrag.value = {\n    mode,\n    corner,\n    blockId: block.id,\n    pointerId: event.pointerId,\n    target: target ?? (event.currentTarget as HTMLElement),\n    startClientX: event.clientX,\n    startClientY: event.clientY,\n    startX: block.x,\n    startY: block.y,\n    startWidth: block.width,\n    startHeight: block.height,\n  }\n  window.addEventListener(\"pointermove\", onPointerMove)\n  window.addEventListener(\"pointerup\", onPointerUp)\n  window.addEventListener(\"pointercancel\", onPointerUp)\n}\n\nfunction onBlockPointerDown(\n  block: ReactiveCanvasBlock,\n  event: PointerEvent,\n): void {\n  if (event.button !== undefined && event.button !== 0) {\n    return\n  }\n  beginInteraction(block, event, \"drag\")\n}\n\nfunction onResizePointerDown(\n  block: ReactiveCanvasBlock,\n  corner: ResizeCorner,\n  event: PointerEvent,\n): void {\n  if (event.button !== undefined && event.button !== 0) {\n    return\n  }\n  beginInteraction(block, event, \"resize\", corner)\n}\n\nfunction applyDrag(state: DragState, dx: number, dy: number): void {\n  const nextX = state.startX + dx\n  const nextY = state.startY + dy\n  const clamped = clampToCanvas(\n    nextX,\n    nextY,\n    state.startWidth,\n    state.startHeight,\n  )\n  builder.updateBlock(state.blockId, { x: clamped.x, y: clamped.y })\n}\n\nfunction applyResize(state: DragState, dx: number, dy: number): void {\n  let x = state.startX\n  let y = state.startY\n  let width = state.startWidth\n  let height = state.startHeight\n  switch (state.corner) {\n    case \"br\":\n      width = state.startWidth + dx\n      height = state.startHeight + dy\n      break\n    case \"tr\":\n      width = state.startWidth + dx\n      height = state.startHeight - dy\n      y = state.startY + dy\n      break\n    case \"bl\":\n      width = state.startWidth - dx\n      height = state.startHeight + dy\n      x = state.startX + dx\n      break\n    case \"tl\":\n      width = state.startWidth - dx\n      height = state.startHeight - dy\n      x = state.startX + dx\n      y = state.startY + dy\n      break\n    default:\n      return\n  }\n  // Enforce minimum size: if the user drags past the min on a \"leading\n  // edge\" corner (tl/tr/bl), we need to clamp position too so the\n  // block doesn't grow in the wrong direction.\n  if (width < MIN_BLOCK_SIZE) {\n    if (state.corner === \"tl\" || state.corner === \"bl\") {\n      x = state.startX + (state.startWidth - MIN_BLOCK_SIZE)\n    }\n    width = MIN_BLOCK_SIZE\n  }\n  if (height < MIN_BLOCK_SIZE) {\n    if (state.corner === \"tl\" || state.corner === \"tr\") {\n      y = state.startY + (state.startHeight - MIN_BLOCK_SIZE)\n    }\n    height = MIN_BLOCK_SIZE\n  }\n  builder.updateBlock(state.blockId, { x, y, width, height })\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n  const state = activeDrag.value\n  if (!state) {\n    return\n  }\n  const dx = event.clientX - state.startClientX\n  const dy = event.clientY - state.startClientY\n  if (state.mode === \"drag\") {\n    applyDrag(state, dx, dy)\n  } else {\n    applyResize(state, dx, dy)\n  }\n}\n\nfunction onPointerUp(event: PointerEvent): void {\n  const state = activeDrag.value\n  if (state) {\n    const target = state.target\n    if (target && typeof target.releasePointerCapture === \"function\") {\n      try {\n        target.releasePointerCapture(state.pointerId)\n      } catch {\n        // ignore\n      }\n    }\n  }\n  activeDrag.value = null\n  window.removeEventListener(\"pointermove\", onPointerMove)\n  window.removeEventListener(\"pointerup\", onPointerUp)\n  window.removeEventListener(\"pointercancel\", onPointerUp)\n  void event\n}\n\nonBeforeUnmount(() => {\n  window.removeEventListener(\"pointermove\", onPointerMove)\n  window.removeEventListener(\"pointerup\", onPointerUp)\n  window.removeEventListener(\"pointercancel\", onPointerUp)\n})\n\ninterface ResizeHandleSpec {\n  corner: ResizeCorner\n  position: string\n  cursor: string\n}\n\nconst RESIZE_HANDLES: ResizeHandleSpec[] = [\n  { corner: \"tl\", position: \"-top-1 -left-1\", cursor: \"cursor-nwse-resize\" },\n  { corner: \"tr\", position: \"-top-1 -right-1\", cursor: \"cursor-nesw-resize\" },\n  { corner: \"bl\", position: \"-bottom-1 -left-1\", cursor: \"cursor-nesw-resize\" },\n  { corner: \"br\", position: \"-bottom-1 -right-1\", cursor: \"cursor-nwse-resize\" },\n]\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"props.label\"\n    :hide-label=\"props.hideLabel\"\n    :help-text=\"props.helpText\"\n    :errors=\"props.errors\"\n    :class=\"props.classList\"\n  >\n    <div\n      :class=\"cn('gxp-reactive-canvas-builder grid gap-3 rounded-lg border bg-card')\"\n      style=\"grid-template-columns: 220px 1fr 320px; min-height: 24rem\"\n      data-testid=\"reactive-canvas-builder\"\n      :data-element-name=\"props.name ?? undefined\"\n    >\n      <aside\n        class=\"flex flex-col gap-2 border-r p-3 overflow-y-auto\"\n        data-testid=\"reactive-canvas-builder-palette\"\n      >\n        <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n          Block palette\n        </h4>\n        <div class=\"flex flex-col gap-1\">\n          <button\n            v-for=\"type in REACTIVE_CANVAS_BLOCK_TYPES\"\n            :key=\"type\"\n            type=\"button\"\n            class=\"flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40\"\n            :data-testid=\"`reactive-canvas-builder-palette-${type}`\"\n            @click=\"onPaletteAdd(type)\"\n          >\n            <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n            <span class=\"font-medium\">{{ type }}</span>\n          </button>\n        </div>\n      </aside>\n\n      <section\n        class=\"flex flex-col gap-3 overflow-auto p-3\"\n        data-testid=\"reactive-canvas-builder-canvas\"\n      >\n        <header class=\"flex items-center justify-between gap-2\">\n          <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n            Canvas ({{ schema.width }} x {{ schema.height }})\n          </h4>\n          <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n            builder/reactive-canvas-builder\n          </Badge>\n        </header>\n\n        <div\n          class=\"relative overflow-auto rounded-md border border-dashed bg-background\"\n          :style=\"canvasStyle\"\n          data-testid=\"reactive-canvas-builder-surface\"\n        >\n          <p\n            v-if=\"blocks.length === 0\"\n            class=\"absolute inset-0 flex items-center justify-center text-center text-xs text-muted-foreground\"\n            data-testid=\"reactive-canvas-builder-canvas-empty\"\n          >\n            Click a block type in the palette to add it.\n          </p>\n          <div\n            v-for=\"block in blocks\"\n            :key=\"block.id\"\n            class=\"absolute cursor-move touch-none select-none rounded border bg-card p-2 text-xs shadow-sm transition-colors hover:border-primary\"\n            :class=\"[\n              selectedId === block.id\n                ? 'border-primary ring-2 ring-primary/30'\n                : '',\n              activeInteractionId === block.id ? 'ring-2 ring-primary' : '',\n            ]\"\n            :style=\"blockStyle(block)\"\n            :data-testid=\"`reactive-canvas-builder-block-${block.id}`\"\n            @click.stop=\"onBlockClick(block.id)\"\n            @pointerdown=\"(e: PointerEvent) => onBlockPointerDown(block, e)\"\n          >\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-mono text-[10px] text-muted-foreground\">\n                {{ block.type }}\n              </span>\n              <span class=\"font-mono text-[10px] text-muted-foreground\">\n                {{ block.width }}x{{ block.height }}\n              </span>\n            </div>\n            <div class=\"mt-1 font-mono text-[10px] text-muted-foreground\">\n              ({{ block.x }}, {{ block.y }})\n            </div>\n            <span\n              v-for=\"handle in RESIZE_HANDLES\"\n              :key=\"handle.corner\"\n              :class=\"\n                cn(\n                  'absolute h-2 w-2 rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary',\n                  handle.position,\n                  handle.cursor,\n                )\n              \"\n              :data-testid=\"`reactive-canvas-builder-block-${block.id}-resize-${handle.corner}`\"\n              @click.stop\n              @pointerdown.stop=\"\n                (e: PointerEvent) => onResizePointerDown(block, handle.corner, e)\n              \"\n            />\n          </div>\n        </div>\n      </section>\n\n      <aside\n        class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n        data-testid=\"reactive-canvas-builder-inspector\"\n      >\n        <header class=\"flex items-center justify-between\">\n          <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n            Inspector\n          </h4>\n          <Button\n            v-if=\"selectedId\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Clear selection\"\n            @click=\"onClearSelection\"\n          >\n            <X class=\"h-3.5 w-3.5\" />\n          </Button>\n        </header>\n\n        <Card class=\"border-dashed\">\n          <CardHeader class=\"py-2\">\n            <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n              Canvas\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <div class=\"grid grid-cols-2 gap-2\">\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"rcb-canvas-width\">Width</Label>\n                <Input\n                  id=\"rcb-canvas-width\"\n                  type=\"number\"\n                  :model-value=\"schema.width\"\n                  data-testid=\"reactive-canvas-builder-canvas-width\"\n                  @input=\"(e: Event) => onCanvasSizeInput('width', e)\"\n                />\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"rcb-canvas-height\">Height</Label>\n                <Input\n                  id=\"rcb-canvas-height\"\n                  type=\"number\"\n                  :model-value=\"schema.height\"\n                  data-testid=\"reactive-canvas-builder-canvas-height\"\n                  @input=\"(e: Event) => onCanvasSizeInput('height', e)\"\n                />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <p\n          v-if=\"!selectedBlock\"\n          class=\"py-3 text-xs text-muted-foreground\"\n          data-testid=\"reactive-canvas-builder-inspector-empty\"\n        >\n          Select a block on the canvas to edit it.\n        </p>\n\n        <div\n          v-else\n          class=\"flex flex-col gap-3\"\n          data-testid=\"reactive-canvas-builder-inspector-fields\"\n        >\n          <Card class=\"border-dashed\">\n            <CardHeader class=\"py-2\">\n              <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n                {{ selectedBlock.type }}\n              </CardTitle>\n            </CardHeader>\n            <CardContent class=\"flex flex-col gap-2 pb-3\">\n              <div class=\"flex flex-col gap-1\">\n                <Label>Block type</Label>\n                <Select\n                  :model-value=\"selectedBlock.type\"\n                  @update:model-value=\"onTypeChange\"\n                >\n                  <SelectTrigger\n                    data-testid=\"reactive-canvas-builder-inspector-type\"\n                  >\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem\n                      v-for=\"t in REACTIVE_CANVAS_BLOCK_TYPES\"\n                      :key=\"t\"\n                      :value=\"t\"\n                    >\n                      {{ t }}\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n\n              <div class=\"grid grid-cols-2 gap-2\">\n                <div class=\"flex flex-col gap-1\">\n                  <Label for=\"rcb-block-x\">X</Label>\n                  <Input\n                    id=\"rcb-block-x\"\n                    type=\"number\"\n                    :model-value=\"selectedBlock.x\"\n                    data-testid=\"reactive-canvas-builder-inspector-x\"\n                    @input=\"(e: Event) => onNumberInput('x', e)\"\n                  />\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label for=\"rcb-block-y\">Y</Label>\n                  <Input\n                    id=\"rcb-block-y\"\n                    type=\"number\"\n                    :model-value=\"selectedBlock.y\"\n                    data-testid=\"reactive-canvas-builder-inspector-y\"\n                    @input=\"(e: Event) => onNumberInput('y', e)\"\n                  />\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label for=\"rcb-block-width\">Width</Label>\n                  <Input\n                    id=\"rcb-block-width\"\n                    type=\"number\"\n                    :model-value=\"selectedBlock.width\"\n                    data-testid=\"reactive-canvas-builder-inspector-width\"\n                    @input=\"(e: Event) => onNumberInput('width', e)\"\n                  />\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label for=\"rcb-block-height\">Height</Label>\n                  <Input\n                    id=\"rcb-block-height\"\n                    type=\"number\"\n                    :model-value=\"selectedBlock.height\"\n                    data-testid=\"reactive-canvas-builder-inspector-height\"\n                    @input=\"(e: Event) => onNumberInput('height', e)\"\n                  />\n                </div>\n              </div>\n\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"rcb-block-props\">Props (JSON)</Label>\n                <Textarea\n                  id=\"rcb-block-props\"\n                  :model-value=\"propsJsonDraft\"\n                  rows=\"6\"\n                  class=\"font-mono text-xs\"\n                  data-testid=\"reactive-canvas-builder-inspector-props\"\n                  @input=\"onPropsJsonInput\"\n                />\n                <p\n                  v-if=\"propsJsonError\"\n                  class=\"text-xs text-destructive\"\n                  data-testid=\"reactive-canvas-builder-inspector-props-error\"\n                >\n                  {{ propsJsonError }}\n                </p>\n              </div>\n            </CardContent>\n          </Card>\n\n          <div class=\"flex items-center gap-1\">\n            <Button\n              variant=\"destructive\"\n              size=\"sm\"\n              class=\"ml-auto\"\n              data-testid=\"reactive-canvas-builder-remove\"\n              @click=\"onRemoveSelected\"\n            >\n              <Trash2 class=\"h-3.5 w-3.5\" />\n              Remove block\n            </Button>\n          </div>\n        </div>\n      </aside>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/card/DatatableCard.js

@@ -0,0 +1,7 @@
+import e from "./DatatableCard.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/card/DatatableCard.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=DatatableCard.js.map

package/dist/components/compositions/elements/card/DatatableCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatatableCard.js","names":[],"sources":["../../../../../src/components/compositions/elements/card/DatatableCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * `card.datatable` element composition.\n *\n * Renders a simple sortable data table. Column definitions come from\n * `tableColumns`; row data is either supplied via `item[name]` or fetched\n * from `dataRoute`. Full pagination/filter support is handled by the\n * platform's DataTableCard when used in the card-tier — this element-tier\n * variant is intentionally lightweight for inline embedding.\n */\nimport { computed } from \"vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TableColumn {\n  key: string\n  label: string\n  sortable?: boolean\n}\n\nexport interface DatatableCardProps {\n  label?: string\n  title?: string\n  showCard?: boolean\n  tableColumns?: TableColumn[]\n  /** Data rows supplied inline (e.g. from `item[name]`). */\n  rows?: Array<Record<string, unknown>>\n  /** API route for fetching rows (displayed as a hint when rows is empty). */\n  dataRoute?: string\n  item?: Record<string, unknown>\n  name?: string | null\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<DatatableCardProps>(), {\n  showCard: true,\n  tableColumns: () => [],\n  rows: () => [],\n  item: () => ({}),\n})\n\nconst heading = computed(() => props.title ?? props.label)\n\nconst resolvedRows = computed<Array<Record<string, unknown>>>(() => {\n  if (props.rows && props.rows.length > 0) return props.rows\n  const name = props.name\n  if (name && props.item[name]) {\n    const val = props.item[name]\n    if (Array.isArray(val)) return val as Array<Record<string, unknown>>\n  }\n  return []\n})\n\nfunction cellValue(row: Record<string, unknown>, col: TableColumn): string {\n  const val = row[col.key]\n  return val !== undefined && val !== null ? String(val) : \"—\"\n}\n</script>\n\n<template>\n  <Card v-if=\"props.showCard !== false\" :class=\"cn(props.classList)\">\n    <CardHeader v-if=\"heading\">\n      <CardTitle>{{ heading }}</CardTitle>\n    </CardHeader>\n    <CardContent>\n      <Table v-if=\"props.tableColumns.length\">\n        <TableHeader>\n          <TableRow>\n            <TableHead\n              v-for=\"col in props.tableColumns\"\n              :key=\"col.key\"\n            >\n              {{ col.label }}\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow\n            v-for=\"(row, i) in resolvedRows\"\n            :key=\"i\"\n          >\n            <TableCell\n              v-for=\"col in props.tableColumns\"\n              :key=\"col.key\"\n            >\n              {{ cellValue(row, col) }}\n            </TableCell>\n          </TableRow>\n          <TableRow v-if=\"!resolvedRows.length\">\n            <TableCell\n              :colspan=\"props.tableColumns.length || 1\"\n              class=\"text-center text-muted-foreground\"\n            >\n              {{ props.dataRoute ? `Data fetched from: ${props.dataRoute}` : \"No data.\" }}\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n      <p v-else class=\"text-sm text-muted-foreground\">No columns configured.</p>\n    </CardContent>\n  </Card>\n\n  <div v-else :class=\"cn(props.classList)\">\n    <Table v-if=\"props.tableColumns.length\">\n      <TableHeader>\n        <TableRow>\n          <TableHead v-for=\"col in props.tableColumns\" :key=\"col.key\">{{ col.label }}</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow v-for=\"(row, i) in resolvedRows\" :key=\"i\">\n          <TableCell v-for=\"col in props.tableColumns\" :key=\"col.key\">{{ cellValue(row, col) }}</TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  </div>\n</template>\n"],"mappings":""}