@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/GridBuilder-BxaojA1u.js

@@ -0,0 +1,380 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./badge-4iQG4kuk.js";
+import { n as r } from "./button-BAwcISlK.js";
+import { n as i, o as a, r as o, s } from "./card-DAfWnvro.js";
+import { t as c } from "./input-tw5ZQGKQ.js";
+import { n as l } from "./label-I5voJX5E.js";
+import { n as u } from "./gridBuilderStore-CDco4GeM.js";
+import { Fragment as d, computed as f, createBlock as ee, 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 te, onMounted as ne, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, useModel as re, watch as ie, withCtx as D, withModifiers as O } from "vue";
+import { Plus as k, Trash2 as ae, X as oe } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/GridBuilder.vue?vue&type=script&setup=true&lang.ts
+var se = ["data-element-name"], ce = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "grid-builder-palette"
+}, le = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, ue = { class: "flex flex-col gap-1" }, de = [
+	"data-testid",
+	"disabled",
+	"onClick"
+], fe = { class: "font-medium" }, pe = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, me = {
+	key: 1,
+	class: "flex flex-col gap-0.5 text-xs text-destructive",
+	role: "alert"
+}, he = {
+	class: "flex flex-col gap-3 overflow-y-auto p-3",
+	"data-testid": "grid-builder-canvas"
+}, ge = { class: "flex items-center justify-between" }, _e = [
+	"data-testid",
+	"onClick",
+	"onPointerdown"
+], A = { class: "font-medium" }, j = { class: "font-mono text-[10px] text-muted-foreground" }, M = ["data-testid", "onPointerdown"], N = {
+	key: 1,
+	class: "py-6 text-center text-xs text-muted-foreground",
+	"data-testid": "grid-builder-canvas-empty"
+}, P = {
+	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+	"data-testid": "grid-builder-inspector"
+}, F = { class: "flex items-center justify-between" }, I = {
+	key: 0,
+	class: "py-3 text-xs text-muted-foreground",
+	"data-testid": "grid-builder-inspector-empty"
+}, ve = {
+	key: 1,
+	class: "flex flex-col gap-3",
+	"data-testid": "grid-builder-inspector-fields"
+}, ye = { class: "flex flex-col gap-1" }, be = { class: "grid grid-cols-2 gap-2" }, xe = { class: "flex flex-col gap-1" }, Se = { class: "flex flex-col gap-1" }, Ce = { class: "flex flex-col gap-1" }, we = { class: "flex flex-col gap-1" }, L = /* @__PURE__ */ v({
+	__name: "GridBuilder",
+	props: /* @__PURE__ */ y({
+		modelValue: {},
+		builderId: {},
+		label: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {},
+		helpText: {},
+		errors: { default: () => [] },
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let v = e, y = re(e, "modelValue"), L = 0;
+		function R() {
+			return L += 1, `grid-builder-${Date.now()}-${L}`;
+		}
+		let z = C(R()), B = u(f(() => v.builderId ?? z.value).value);
+		function Te(e) {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return typeof t.cols == "number" && typeof t.rowHeight == "number" && Array.isArray(t.items);
+		}
+		ne(() => {
+			let e = y.value;
+			Te(e) && B.loadSchema(e);
+		}), ie(() => B.schema.value, (e) => {
+			y.value = {
+				cols: e.cols,
+				rowHeight: e.rowHeight,
+				items: e.items.map((e) => ({ ...e }))
+			};
+		}, { deep: !0 });
+		let Ee = [
+			{
+				label: "1×1",
+				w: 1,
+				h: 1
+			},
+			{
+				label: "2×2",
+				w: 2,
+				h: 2
+			},
+			{
+				label: "4×2",
+				w: 4,
+				h: 2
+			},
+			{
+				label: "6×4",
+				w: 6,
+				h: 4
+			},
+			{
+				label: "12×1",
+				w: 12,
+				h: 1
+			}
+		], V = f(() => B.schema.value.items), H = f(() => B.schema.value.cols), U = f(() => B.schema.value.rowHeight), W = f(() => {
+			let e = B.selection.value;
+			return e.id ? V.value.find((t) => t.id === e.id) ?? null : null;
+		}), De = f(() => ({
+			display: "grid",
+			gridTemplateColumns: `repeat(${H.value}, minmax(0, 1fr))`,
+			gridAutoRows: `${U.value}px`,
+			gap: "0.5rem"
+		}));
+		function Oe(e) {
+			return {
+				gridColumn: `${e.x + 1} / span ${e.w}`,
+				gridRow: `${e.y + 1} / span ${e.h}`
+			};
+		}
+		function ke() {
+			let e = B.addItem();
+			B.select(e);
+		}
+		function Ae(e) {
+			let t = B.addItem({
+				w: e.w,
+				h: e.h,
+				label: `${e.label} cell`
+			});
+			B.select(t);
+		}
+		function je(e) {
+			B.select(e);
+		}
+		function Me() {
+			let e = B.selection.value;
+			e.id && B.removeItem(e.id);
+		}
+		function Ne() {
+			B.select(null);
+		}
+		function G(e) {
+			let t = B.selection.value;
+			t.id && B.updateItem(t.id, e);
+		}
+		function K(e) {
+			let t = Number.parseInt(e, 10);
+			return Number.isFinite(t) ? t : 0;
+		}
+		function q(e) {
+			let t = Number.parseInt(e, 10);
+			return Number.isFinite(t) && t >= 1 ? t : 1;
+		}
+		let J = C(null), Y = C(null), X = f(() => Y.value?.itemId ?? null);
+		function Pe() {
+			let e = J.value;
+			return e ? e.getBoundingClientRect().width / H.value : 0;
+		}
+		function Z(e, t, n) {
+			if (v.disabled || v.readonly) return;
+			t.preventDefault(), t.stopPropagation(), B.select(e.id);
+			let r = t.target;
+			if (r && typeof r.setPointerCapture == "function") try {
+				r.setPointerCapture(t.pointerId);
+			} catch {}
+			Y.value = {
+				mode: n,
+				itemId: e.id,
+				pointerId: t.pointerId,
+				target: r ?? t.currentTarget,
+				startClientX: t.clientX,
+				startClientY: t.clientY,
+				startX: e.x,
+				startY: e.y,
+				startW: e.w,
+				startH: e.h,
+				cellWidthPx: Pe()
+			}, window.addEventListener("pointermove", Q), window.addEventListener("pointerup", $), window.addEventListener("pointercancel", $);
+		}
+		function Fe(e, t) {
+			t.button !== void 0 && t.button !== 0 || Z(e, t, "drag");
+		}
+		function Ie(e, t) {
+			t.button !== void 0 && t.button !== 0 || Z(e, t, "resize");
+		}
+		function Q(e) {
+			let t = Y.value;
+			if (!t) return;
+			let n = t.cellWidthPx > 0 ? t.cellWidthPx : 1, r = U.value > 0 ? U.value : 1, i = e.clientX - t.startClientX, a = e.clientY - t.startClientY, o = Math.round(i / n), s = Math.round(a / r);
+			if (t.mode === "drag") {
+				let e = t.startX + o, n = t.startY + s;
+				B.updateItem(t.itemId, {
+					x: e,
+					y: n
+				});
+			} else {
+				let e = Math.max(1, t.startW + o), n = Math.max(1, t.startH + s);
+				B.updateItem(t.itemId, {
+					w: e,
+					h: n
+				});
+			}
+		}
+		function $(e) {
+			let t = Y.value;
+			if (t) {
+				let e = t.target;
+				if (e && typeof e.releasePointerCapture == "function") try {
+					e.releasePointerCapture(t.pointerId);
+				} catch {}
+			}
+			Y.value = null, window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		}
+		return te(() => {
+			window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		}), (e, u) => (S(), m("div", {
+			class: b(E(t)("gxp-grid-builder grid gap-3 rounded-lg border bg-card", v.classList)),
+			style: {
+				"grid-template-columns": "220px 1fr 280px",
+				"min-height": "24rem"
+			},
+			"data-testid": "grid-builder",
+			"data-element-name": v.name ?? void 0
+		}, [
+			h("aside", ce, [
+				h("h4", le, T(v.label ?? "Grid palette"), 1),
+				_(E(r), {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					class: "justify-start gap-2",
+					"data-testid": "grid-builder-palette-add",
+					disabled: v.disabled || v.readonly,
+					onClick: ke
+				}, {
+					default: D(() => [_(E(k), { class: "h-3.5 w-3.5" }), u[6] ||= g(" Add cell ", -1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				h("div", ue, [(S(), m(d, null, w(Ee, (e) => h("button", {
+					key: e.label,
+					type: "button",
+					class: "flex items-center 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 disabled:opacity-50",
+					"data-testid": `grid-builder-palette-${e.w}x${e.h}`,
+					disabled: v.disabled || v.readonly,
+					onClick: (t) => Ae(e)
+				}, [_(E(k), { class: "h-3.5 w-3.5 shrink-0" }), h("span", fe, T(e.label) + " cell", 1)], 8, de)), 64))]),
+				v.helpText ? (S(), m("p", pe, T(v.helpText), 1)) : p("", !0),
+				v.errors.length ? (S(), m("ul", me, [(S(!0), m(d, null, w(v.errors, (e, t) => (S(), m("li", { key: t }, T(e), 1))), 128))])) : p("", !0)
+			]),
+			h("section", he, [h("header", ge, [u[8] ||= h("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Preview ", -1), _(E(n), {
+				variant: "outline",
+				class: "font-mono text-[10px]"
+			}, {
+				default: D(() => [...u[7] ||= [g(" builder/grid-builder ", -1)]]),
+				_: 1
+			})]), V.value.length > 0 ? (S(), m("div", {
+				key: 0,
+				ref_key: "gridEl",
+				ref: J,
+				class: "rounded-md border border-dashed bg-background p-2",
+				style: x(De.value),
+				"data-testid": "grid-builder-canvas-grid"
+			}, [(S(!0), m(d, null, w(V.value, (e) => (S(), m("div", {
+				key: e.id,
+				style: x(Oe(e)),
+				"data-testid": `grid-builder-cell-${e.id}`,
+				class: b(["relative flex cursor-move touch-none select-none flex-col items-center justify-center gap-1 rounded border bg-card px-2 py-1 text-center text-xs transition-colors hover:border-primary", [E(B).selection.value.id === e.id ? "border-primary bg-accent/30 ring-2 ring-primary/30" : "", X.value === e.id ? "ring-2 ring-primary" : ""]]),
+				onClick: (t) => je(e.id),
+				onPointerdown: (t) => Fe(e, t)
+			}, [
+				h("span", A, T(e.label), 1),
+				h("span", j, T(e.w) + "×" + T(e.h) + " @ (" + T(e.x) + ", " + T(e.y) + ") ", 1),
+				h("span", {
+					class: "absolute bottom-0.5 right-0.5 h-2.5 w-2.5 cursor-nwse-resize rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary",
+					"data-testid": `grid-builder-resize-${e.id}`,
+					onClick: u[0] ||= O(() => {}, ["stop"]),
+					onPointerdown: O((t) => Ie(e, t), ["stop"])
+				}, null, 40, M)
+			], 46, _e))), 128))], 4)) : (S(), m("p", N, " Click \"Add cell\" or a preset to start the layout. "))]),
+			h("aside", P, [h("header", F, [u[9] ||= h("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), E(B).selection.value.id ? (S(), ee(E(r), {
+				key: 0,
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Clear selection",
+				onClick: Ne
+			}, {
+				default: D(() => [_(E(oe), { class: "h-3.5 w-3.5" })]),
+				_: 1
+			})) : p("", !0)]), W.value ? (S(), m("div", ve, [_(E(s), { class: "border-dashed" }, {
+				default: D(() => [_(E(o), { class: "py-2" }, {
+					default: D(() => [_(E(i), { class: "font-mono text-xs uppercase tracking-wide" }, {
+						default: D(() => [...u[10] ||= [g(" cell ", -1)]]),
+						_: 1
+					})]),
+					_: 1
+				}), _(E(a), { class: "flex flex-col gap-2 pb-3" }, {
+					default: D(() => [h("div", ye, [_(E(l), { for: "gb-label" }, {
+						default: D(() => [...u[11] ||= [g("Label", -1)]]),
+						_: 1
+					}), _(E(c), {
+						id: "gb-label",
+						"model-value": W.value.label,
+						"data-testid": "grid-builder-inspector-label",
+						onInput: u[1] ||= (e) => G({ label: e.target.value })
+					}, null, 8, ["model-value"])]), h("div", be, [
+						h("div", xe, [_(E(l), { for: "gb-x" }, {
+							default: D(() => [...u[12] ||= [g("X (col)", -1)]]),
+							_: 1
+						}), _(E(c), {
+							id: "gb-x",
+							type: "number",
+							min: "0",
+							"model-value": W.value.x,
+							"data-testid": "grid-builder-inspector-x",
+							onInput: u[2] ||= (e) => G({ x: K(e.target.value) })
+						}, null, 8, ["model-value"])]),
+						h("div", Se, [_(E(l), { for: "gb-y" }, {
+							default: D(() => [...u[13] ||= [g("Y (row)", -1)]]),
+							_: 1
+						}), _(E(c), {
+							id: "gb-y",
+							type: "number",
+							min: "0",
+							"model-value": W.value.y,
+							"data-testid": "grid-builder-inspector-y",
+							onInput: u[3] ||= (e) => G({ y: K(e.target.value) })
+						}, null, 8, ["model-value"])]),
+						h("div", Ce, [_(E(l), { for: "gb-w" }, {
+							default: D(() => [...u[14] ||= [g("Width", -1)]]),
+							_: 1
+						}), _(E(c), {
+							id: "gb-w",
+							type: "number",
+							min: "1",
+							"model-value": W.value.w,
+							"data-testid": "grid-builder-inspector-w",
+							onInput: u[4] ||= (e) => G({ w: q(e.target.value) })
+						}, null, 8, ["model-value"])]),
+						h("div", we, [_(E(l), { for: "gb-h" }, {
+							default: D(() => [...u[15] ||= [g("Height", -1)]]),
+							_: 1
+						}), _(E(c), {
+							id: "gb-h",
+							type: "number",
+							min: "1",
+							"model-value": W.value.h,
+							"data-testid": "grid-builder-inspector-h",
+							onInput: u[5] ||= (e) => G({ h: q(e.target.value) })
+						}, null, 8, ["model-value"])])
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}), _(E(r), {
+				variant: "destructive",
+				size: "sm",
+				class: "self-end",
+				"data-testid": "grid-builder-remove",
+				onClick: Me
+			}, {
+				default: D(() => [_(E(ae), { class: "h-3.5 w-3.5" }), u[16] ||= g(" Remove ", -1)]),
+				_: 1
+			})])) : (S(), m("p", I, " Select a cell on the canvas to edit its size and position. "))])
+		], 10, se));
+	}
+}), R = /* @__PURE__ */ e({ default: () => z }), z = L;
+//#endregion
+export { R as n, z as t };
+
+//# sourceMappingURL=GridBuilder-BxaojA1u.js.map

package/dist/chunks/GridBuilder-BxaojA1u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridBuilder-BxaojA1u.js","names":[],"sources":["../../src/components/compositions/elements/builder/GridBuilder.vue","../../src/components/compositions/elements/builder/GridBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GridBuilder — MVP visual grid layout designer.\n *\n * Three-pane layout:\n *   - LEFT  (Palette):    \"Add cell\" button plus a set of preset size\n *                         buttons (1x1, 2x2, 4x2, 6x4, 12x1). Click any\n *                         to append a new cell of that size.\n *   - MIDDLE (Canvas):    CSS-grid preview of the current layout. Each\n *                         cell is a clickable card; empty rows render a\n *                         dashed placeholder hint.\n *   - RIGHT (Inspector):  Edit the selected cell's label, x/y position\n *                         and w/h span via number inputs. Includes a\n *                         Remove button.\n *\n * Pointer-driven drag-to-reposition and resize-from-corner are wired\n * directly on each cell. Drags snap to the 12-column grid; the\n * resize handle (bottom-right) adjusts `w` / `h`. The inspector\n * remains the canonical numeric editor.\n *\n * State lives in `gridBuilderStore` (Pinia). The component accepts an\n * optional `modelValue` schema (v-modelable) and emits the current\n * schema on every mutation so the host page can persist it.\n */\nimport { computed, onMounted, onBeforeUnmount, 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 { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  useGridBuilder,\n  type GridBuilderItem,\n  type GridBuilderSchema,\n} from \"@/stores/gridBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GridBuilderProps {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: GridBuilderSchema\n  /**\n   * Identifier used to key the gridBuilderStore. Defaults to a stable\n   * auto-generated id so multiple builders on the same page don't\n   * collide.\n   */\n  builderId?: string\n  label?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n  helpText?: string\n  errors?: string[]\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<GridBuilderProps>(), {\n  errors: () => [],\n  item: () => ({}),\n})\n\nconst model = defineModel<GridBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `grid-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useGridBuilder(builderId.value)\n\nfunction isGridBuilderSchema(value: unknown): value is GridBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return (\n    typeof v.cols === \"number\" &&\n    typeof v.rowHeight === \"number\" &&\n    Array.isArray(v.items)\n  )\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n  const seed = model.value\n  if (isGridBuilderSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = {\n      cols: next.cols,\n      rowHeight: next.rowHeight,\n      items: next.items.map((it) => ({ ...it })),\n    }\n  },\n  { deep: true },\n)\n\ninterface CellTemplate {\n  label: string\n  w: number\n  h: number\n}\n\nconst cellTemplates: CellTemplate[] = [\n  { label: \"1×1\", w: 1, h: 1 },\n  { label: \"2×2\", w: 2, h: 2 },\n  { label: \"4×2\", w: 4, h: 2 },\n  { label: \"6×4\", w: 6, h: 4 },\n  { label: \"12×1\", w: 12, h: 1 },\n]\n\nconst items = computed<GridBuilderItem[]>(\n  () => builder.schema.value.items,\n)\nconst cols = computed<number>(() => builder.schema.value.cols)\nconst rowHeight = computed<number>(() => builder.schema.value.rowHeight)\n\nconst selectedItem = computed<GridBuilderItem | null>(() => {\n  const sel = builder.selection.value\n  if (!sel.id) {\n    return null\n  }\n  return items.value.find((it) => it.id === sel.id) ?? null\n})\n\nconst gridStyle = computed(() => ({\n  display: \"grid\",\n  gridTemplateColumns: `repeat(${cols.value}, minmax(0, 1fr))`,\n  gridAutoRows: `${rowHeight.value}px`,\n  gap: \"0.5rem\",\n}))\n\nfunction cellStyle(it: GridBuilderItem): Record<string, string | number> {\n  return {\n    gridColumn: `${it.x + 1} / span ${it.w}`,\n    gridRow: `${it.y + 1} / span ${it.h}`,\n  }\n}\n\nfunction onAddCell(): void {\n  const id = builder.addItem()\n  builder.select(id)\n}\n\nfunction onAddPresetCell(template: CellTemplate): void {\n  const id = builder.addItem({\n    w: template.w,\n    h: template.h,\n    label: `${template.label} cell`,\n  })\n  builder.select(id)\n}\n\nfunction onCellClick(itemId: string): void {\n  builder.select(itemId)\n}\n\nfunction onRemove(): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.removeItem(sel.id)\n  }\n}\n\nfunction onClearSelection(): void {\n  builder.select(null)\n}\n\nfunction patchSelected(patch: Partial<Omit<GridBuilderItem, \"id\">>): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.updateItem(sel.id, patch)\n  }\n}\n\nfunction parseInt0(value: string): number {\n  const n = Number.parseInt(value, 10)\n  return Number.isFinite(n) ? n : 0\n}\n\nfunction parseInt1(value: string): number {\n  const n = Number.parseInt(value, 10)\n  return Number.isFinite(n) && n >= 1 ? n : 1\n}\n\n/* ------------------------------------------------------------------ */\n/* Pointer-driven drag + resize                                       */\n/* ------------------------------------------------------------------ */\n\n/** Ref to the canvas grid wrapper — used to measure column width. */\nconst gridEl = ref<HTMLElement | null>(null)\n\ninterface DragState {\n  mode: \"drag\" | \"resize\"\n  itemId: string\n  pointerId: number\n  target: HTMLElement\n  startClientX: number\n  startClientY: number\n  startX: number\n  startY: number\n  startW: number\n  startH: number\n  cellWidthPx: number\n}\n\nconst activeDrag = ref<DragState | null>(null)\n/** Id of the cell currently being dragged or resized — drives the\n * `ring-2 ring-primary` visual feedback. */\nconst activeInteractionId = computed<string | null>(\n  () => activeDrag.value?.itemId ?? null,\n)\n\nfunction measureCellWidth(): number {\n  const el = gridEl.value\n  if (!el) {\n    return 0\n  }\n  const rect = el.getBoundingClientRect()\n  // Subtract horizontal padding so we measure the inner track. We\n  // assume uniform gaps; column width = (innerWidth - (cols-1)*gap) /\n  // cols, but for snap math the simple \"width/cols\" approximation is\n  // accurate enough at the scales we render.\n  return rect.width / cols.value\n}\n\nfunction beginDrag(\n  it: GridBuilderItem,\n  event: PointerEvent,\n  mode: \"drag\" | \"resize\",\n): void {\n  if (props.disabled || props.readonly) {\n    return\n  }\n  event.preventDefault()\n  event.stopPropagation()\n  // Always select the item we're about to manipulate so the inspector\n  // matches what the user sees.\n  builder.select(it.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      // jsdom or capture-disallowed targets: ignore.\n    }\n  }\n  activeDrag.value = {\n    mode,\n    itemId: it.id,\n    pointerId: event.pointerId,\n    target: target ?? (event.currentTarget as HTMLElement),\n    startClientX: event.clientX,\n    startClientY: event.clientY,\n    startX: it.x,\n    startY: it.y,\n    startW: it.w,\n    startH: it.h,\n    cellWidthPx: measureCellWidth(),\n  }\n  window.addEventListener(\"pointermove\", onPointerMove)\n  window.addEventListener(\"pointerup\", onPointerUp)\n  window.addEventListener(\"pointercancel\", onPointerUp)\n}\n\nfunction onCellPointerDown(\n  it: GridBuilderItem,\n  event: PointerEvent,\n): void {\n  // Ignore right-click / middle-click; only primary pointer drags.\n  if (event.button !== undefined && event.button !== 0) {\n    return\n  }\n  beginDrag(it, event, \"drag\")\n}\n\nfunction onResizeHandlePointerDown(\n  it: GridBuilderItem,\n  event: PointerEvent,\n): void {\n  if (event.button !== undefined && event.button !== 0) {\n    return\n  }\n  beginDrag(it, event, \"resize\")\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n  const state = activeDrag.value\n  if (!state) {\n    return\n  }\n  const cellW = state.cellWidthPx > 0 ? state.cellWidthPx : 1\n  const rowH = rowHeight.value > 0 ? rowHeight.value : 1\n  const dx = event.clientX - state.startClientX\n  const dy = event.clientY - state.startClientY\n  const colDelta = Math.round(dx / cellW)\n  const rowDelta = Math.round(dy / rowH)\n  if (state.mode === \"drag\") {\n    const nextX = state.startX + colDelta\n    const nextY = state.startY + rowDelta\n    builder.updateItem(state.itemId, { x: nextX, y: nextY })\n  } else {\n    const nextW = Math.max(1, state.startW + colDelta)\n    const nextH = Math.max(1, state.startH + rowDelta)\n    builder.updateItem(state.itemId, { w: nextW, h: nextH })\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  // Avoid the unused-param warning while leaving the signature intact.\n  void event\n}\n\nonBeforeUnmount(() => {\n  window.removeEventListener(\"pointermove\", onPointerMove)\n  window.removeEventListener(\"pointerup\", onPointerUp)\n  window.removeEventListener(\"pointercancel\", onPointerUp)\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'gxp-grid-builder grid gap-3 rounded-lg border bg-card',\n        props.classList,\n      )\n    \"\n    style=\"grid-template-columns: 220px 1fr 280px; min-height: 24rem\"\n    data-testid=\"grid-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=\"grid-builder-palette\"\n    >\n      <h4\n        class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n      >\n        {{ props.label ?? \"Grid palette\" }}\n      </h4>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        class=\"justify-start gap-2\"\n        data-testid=\"grid-builder-palette-add\"\n        :disabled=\"props.disabled || props.readonly\"\n        @click=\"onAddCell\"\n      >\n        <Plus class=\"h-3.5 w-3.5\" />\n        Add cell\n      </Button>\n      <div class=\"flex flex-col gap-1\">\n        <button\n          v-for=\"tpl in cellTemplates\"\n          :key=\"tpl.label\"\n          type=\"button\"\n          class=\"flex items-center 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 disabled:opacity-50\"\n          :data-testid=\"`grid-builder-palette-${tpl.w}x${tpl.h}`\"\n          :disabled=\"props.disabled || props.readonly\"\n          @click=\"onAddPresetCell(tpl)\"\n        >\n          <Plus class=\"h-3.5 w-3.5 shrink-0\" />\n          <span class=\"font-medium\">{{ tpl.label }} cell</span>\n        </button>\n      </div>\n      <p v-if=\"props.helpText\" class=\"text-xs text-muted-foreground\">\n        {{ props.helpText }}\n      </p>\n      <ul\n        v-if=\"props.errors.length\"\n        class=\"flex flex-col gap-0.5 text-xs text-destructive\"\n        role=\"alert\"\n      >\n        <li v-for=\"(err, i) in props.errors\" :key=\"i\">{{ err }}</li>\n      </ul>\n    </aside>\n\n    <section\n      class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n      data-testid=\"grid-builder-canvas\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Preview\n        </h4>\n        <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n          builder/grid-builder\n        </Badge>\n      </header>\n      <div\n        v-if=\"items.length > 0\"\n        ref=\"gridEl\"\n        class=\"rounded-md border border-dashed bg-background p-2\"\n        :style=\"gridStyle\"\n        data-testid=\"grid-builder-canvas-grid\"\n      >\n        <div\n          v-for=\"it in items\"\n          :key=\"it.id\"\n          :style=\"cellStyle(it)\"\n          :data-testid=\"`grid-builder-cell-${it.id}`\"\n          class=\"relative flex cursor-move touch-none select-none flex-col items-center justify-center gap-1 rounded border bg-card px-2 py-1 text-center text-xs transition-colors hover:border-primary\"\n          :class=\"[\n            builder.selection.value.id === it.id\n              ? 'border-primary bg-accent/30 ring-2 ring-primary/30'\n              : '',\n            activeInteractionId === it.id ? 'ring-2 ring-primary' : '',\n          ]\"\n          @click=\"onCellClick(it.id)\"\n          @pointerdown=\"(e: PointerEvent) => onCellPointerDown(it, e)\"\n        >\n          <span class=\"font-medium\">{{ it.label }}</span>\n          <span class=\"font-mono text-[10px] text-muted-foreground\">\n            {{ it.w }}×{{ it.h }} @ ({{ it.x }}, {{ it.y }})\n          </span>\n          <span\n            class=\"absolute bottom-0.5 right-0.5 h-2.5 w-2.5 cursor-nwse-resize rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary\"\n            :data-testid=\"`grid-builder-resize-${it.id}`\"\n            @click.stop\n            @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(it, e)\"\n          />\n        </div>\n      </div>\n      <p\n        v-else\n        class=\"py-6 text-center text-xs text-muted-foreground\"\n        data-testid=\"grid-builder-canvas-empty\"\n      >\n        Click \"Add cell\" or a preset to start the layout.\n      </p>\n    </section>\n\n    <aside\n      class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n      data-testid=\"grid-builder-inspector\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Inspector\n        </h4>\n        <Button\n          v-if=\"builder.selection.value.id\"\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      <p\n        v-if=\"!selectedItem\"\n        class=\"py-3 text-xs text-muted-foreground\"\n        data-testid=\"grid-builder-inspector-empty\"\n      >\n        Select a cell on the canvas to edit its size and position.\n      </p>\n\n      <div\n        v-else\n        class=\"flex flex-col gap-3\"\n        data-testid=\"grid-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              cell\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"gb-label\">Label</Label>\n              <Input\n                id=\"gb-label\"\n                :model-value=\"selectedItem.label\"\n                data-testid=\"grid-builder-inspector-label\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      label: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"grid grid-cols-2 gap-2\">\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-x\">X (col)</Label>\n                <Input\n                  id=\"gb-x\"\n                  type=\"number\"\n                  min=\"0\"\n                  :model-value=\"selectedItem.x\"\n                  data-testid=\"grid-builder-inspector-x\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        x: parseInt0((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-y\">Y (row)</Label>\n                <Input\n                  id=\"gb-y\"\n                  type=\"number\"\n                  min=\"0\"\n                  :model-value=\"selectedItem.y\"\n                  data-testid=\"grid-builder-inspector-y\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        y: parseInt0((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-w\">Width</Label>\n                <Input\n                  id=\"gb-w\"\n                  type=\"number\"\n                  min=\"1\"\n                  :model-value=\"selectedItem.w\"\n                  data-testid=\"grid-builder-inspector-w\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        w: parseInt1((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-h\">Height</Label>\n                <Input\n                  id=\"gb-h\"\n                  type=\"number\"\n                  min=\"1\"\n                  :model-value=\"selectedItem.h\"\n                  data-testid=\"grid-builder-inspector-h\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        h: parseInt1((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Button\n          variant=\"destructive\"\n          size=\"sm\"\n          class=\"self-end\"\n          data-testid=\"grid-builder-remove\"\n          @click=\"onRemove\"\n        >\n          <Trash2 class=\"h-3.5 w-3.5\" />\n          Remove\n        </Button>\n      </div>\n    </aside>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GridBuilder — MVP visual grid layout designer.\n *\n * Three-pane layout:\n *   - LEFT  (Palette):    \"Add cell\" button plus a set of preset size\n *                         buttons (1x1, 2x2, 4x2, 6x4, 12x1). Click any\n *                         to append a new cell of that size.\n *   - MIDDLE (Canvas):    CSS-grid preview of the current layout. Each\n *                         cell is a clickable card; empty rows render a\n *                         dashed placeholder hint.\n *   - RIGHT (Inspector):  Edit the selected cell's label, x/y position\n *                         and w/h span via number inputs. Includes a\n *                         Remove button.\n *\n * Pointer-driven drag-to-reposition and resize-from-corner are wired\n * directly on each cell. Drags snap to the 12-column grid; the\n * resize handle (bottom-right) adjusts `w` / `h`. The inspector\n * remains the canonical numeric editor.\n *\n * State lives in `gridBuilderStore` (Pinia). The component accepts an\n * optional `modelValue` schema (v-modelable) and emits the current\n * schema on every mutation so the host page can persist it.\n */\nimport { computed, onMounted, onBeforeUnmount, 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 { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  useGridBuilder,\n  type GridBuilderItem,\n  type GridBuilderSchema,\n} from \"@/stores/gridBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GridBuilderProps {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: GridBuilderSchema\n  /**\n   * Identifier used to key the gridBuilderStore. Defaults to a stable\n   * auto-generated id so multiple builders on the same page don't\n   * collide.\n   */\n  builderId?: string\n  label?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n  helpText?: string\n  errors?: string[]\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<GridBuilderProps>(), {\n  errors: () => [],\n  item: () => ({}),\n})\n\nconst model = defineModel<GridBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `grid-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useGridBuilder(builderId.value)\n\nfunction isGridBuilderSchema(value: unknown): value is GridBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return (\n    typeof v.cols === \"number\" &&\n    typeof v.rowHeight === \"number\" &&\n    Array.isArray(v.items)\n  )\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n  const seed = model.value\n  if (isGridBuilderSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = {\n      cols: next.cols,\n      rowHeight: next.rowHeight,\n      items: next.items.map((it) => ({ ...it })),\n    }\n  },\n  { deep: true },\n)\n\ninterface CellTemplate {\n  label: string\n  w: number\n  h: number\n}\n\nconst cellTemplates: CellTemplate[] = [\n  { label: \"1×1\", w: 1, h: 1 },\n  { label: \"2×2\", w: 2, h: 2 },\n  { label: \"4×2\", w: 4, h: 2 },\n  { label: \"6×4\", w: 6, h: 4 },\n  { label: \"12×1\", w: 12, h: 1 },\n]\n\nconst items = computed<GridBuilderItem[]>(\n  () => builder.schema.value.items,\n)\nconst cols = computed<number>(() => builder.schema.value.cols)\nconst rowHeight = computed<number>(() => builder.schema.value.rowHeight)\n\nconst selectedItem = computed<GridBuilderItem | null>(() => {\n  const sel = builder.selection.value\n  if (!sel.id) {\n    return null\n  }\n  return items.value.find((it) => it.id === sel.id) ?? null\n})\n\nconst gridStyle = computed(() => ({\n  display: \"grid\",\n  gridTemplateColumns: `repeat(${cols.value}, minmax(0, 1fr))`,\n  gridAutoRows: `${rowHeight.value}px`,\n  gap: \"0.5rem\",\n}))\n\nfunction cellStyle(it: GridBuilderItem): Record<string, string | number> {\n  return {\n    gridColumn: `${it.x + 1} / span ${it.w}`,\n    gridRow: `${it.y + 1} / span ${it.h}`,\n  }\n}\n\nfunction onAddCell(): void {\n  const id = builder.addItem()\n  builder.select(id)\n}\n\nfunction onAddPresetCell(template: CellTemplate): void {\n  const id = builder.addItem({\n    w: template.w,\n    h: template.h,\n    label: `${template.label} cell`,\n  })\n  builder.select(id)\n}\n\nfunction onCellClick(itemId: string): void {\n  builder.select(itemId)\n}\n\nfunction onRemove(): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.removeItem(sel.id)\n  }\n}\n\nfunction onClearSelection(): void {\n  builder.select(null)\n}\n\nfunction patchSelected(patch: Partial<Omit<GridBuilderItem, \"id\">>): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.updateItem(sel.id, patch)\n  }\n}\n\nfunction parseInt0(value: string): number {\n  const n = Number.parseInt(value, 10)\n  return Number.isFinite(n) ? n : 0\n}\n\nfunction parseInt1(value: string): number {\n  const n = Number.parseInt(value, 10)\n  return Number.isFinite(n) && n >= 1 ? n : 1\n}\n\n/* ------------------------------------------------------------------ */\n/* Pointer-driven drag + resize                                       */\n/* ------------------------------------------------------------------ */\n\n/** Ref to the canvas grid wrapper — used to measure column width. */\nconst gridEl = ref<HTMLElement | null>(null)\n\ninterface DragState {\n  mode: \"drag\" | \"resize\"\n  itemId: string\n  pointerId: number\n  target: HTMLElement\n  startClientX: number\n  startClientY: number\n  startX: number\n  startY: number\n  startW: number\n  startH: number\n  cellWidthPx: number\n}\n\nconst activeDrag = ref<DragState | null>(null)\n/** Id of the cell currently being dragged or resized — drives the\n * `ring-2 ring-primary` visual feedback. */\nconst activeInteractionId = computed<string | null>(\n  () => activeDrag.value?.itemId ?? null,\n)\n\nfunction measureCellWidth(): number {\n  const el = gridEl.value\n  if (!el) {\n    return 0\n  }\n  const rect = el.getBoundingClientRect()\n  // Subtract horizontal padding so we measure the inner track. We\n  // assume uniform gaps; column width = (innerWidth - (cols-1)*gap) /\n  // cols, but for snap math the simple \"width/cols\" approximation is\n  // accurate enough at the scales we render.\n  return rect.width / cols.value\n}\n\nfunction beginDrag(\n  it: GridBuilderItem,\n  event: PointerEvent,\n  mode: \"drag\" | \"resize\",\n): void {\n  if (props.disabled || props.readonly) {\n    return\n  }\n  event.preventDefault()\n  event.stopPropagation()\n  // Always select the item we're about to manipulate so the inspector\n  // matches what the user sees.\n  builder.select(it.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      // jsdom or capture-disallowed targets: ignore.\n    }\n  }\n  activeDrag.value = {\n    mode,\n    itemId: it.id,\n    pointerId: event.pointerId,\n    target: target ?? (event.currentTarget as HTMLElement),\n    startClientX: event.clientX,\n    startClientY: event.clientY,\n    startX: it.x,\n    startY: it.y,\n    startW: it.w,\n    startH: it.h,\n    cellWidthPx: measureCellWidth(),\n  }\n  window.addEventListener(\"pointermove\", onPointerMove)\n  window.addEventListener(\"pointerup\", onPointerUp)\n  window.addEventListener(\"pointercancel\", onPointerUp)\n}\n\nfunction onCellPointerDown(\n  it: GridBuilderItem,\n  event: PointerEvent,\n): void {\n  // Ignore right-click / middle-click; only primary pointer drags.\n  if (event.button !== undefined && event.button !== 0) {\n    return\n  }\n  beginDrag(it, event, \"drag\")\n}\n\nfunction onResizeHandlePointerDown(\n  it: GridBuilderItem,\n  event: PointerEvent,\n): void {\n  if (event.button !== undefined && event.button !== 0) {\n    return\n  }\n  beginDrag(it, event, \"resize\")\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n  const state = activeDrag.value\n  if (!state) {\n    return\n  }\n  const cellW = state.cellWidthPx > 0 ? state.cellWidthPx : 1\n  const rowH = rowHeight.value > 0 ? rowHeight.value : 1\n  const dx = event.clientX - state.startClientX\n  const dy = event.clientY - state.startClientY\n  const colDelta = Math.round(dx / cellW)\n  const rowDelta = Math.round(dy / rowH)\n  if (state.mode === \"drag\") {\n    const nextX = state.startX + colDelta\n    const nextY = state.startY + rowDelta\n    builder.updateItem(state.itemId, { x: nextX, y: nextY })\n  } else {\n    const nextW = Math.max(1, state.startW + colDelta)\n    const nextH = Math.max(1, state.startH + rowDelta)\n    builder.updateItem(state.itemId, { w: nextW, h: nextH })\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  // Avoid the unused-param warning while leaving the signature intact.\n  void event\n}\n\nonBeforeUnmount(() => {\n  window.removeEventListener(\"pointermove\", onPointerMove)\n  window.removeEventListener(\"pointerup\", onPointerUp)\n  window.removeEventListener(\"pointercancel\", onPointerUp)\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'gxp-grid-builder grid gap-3 rounded-lg border bg-card',\n        props.classList,\n      )\n    \"\n    style=\"grid-template-columns: 220px 1fr 280px; min-height: 24rem\"\n    data-testid=\"grid-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=\"grid-builder-palette\"\n    >\n      <h4\n        class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n      >\n        {{ props.label ?? \"Grid palette\" }}\n      </h4>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        class=\"justify-start gap-2\"\n        data-testid=\"grid-builder-palette-add\"\n        :disabled=\"props.disabled || props.readonly\"\n        @click=\"onAddCell\"\n      >\n        <Plus class=\"h-3.5 w-3.5\" />\n        Add cell\n      </Button>\n      <div class=\"flex flex-col gap-1\">\n        <button\n          v-for=\"tpl in cellTemplates\"\n          :key=\"tpl.label\"\n          type=\"button\"\n          class=\"flex items-center 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 disabled:opacity-50\"\n          :data-testid=\"`grid-builder-palette-${tpl.w}x${tpl.h}`\"\n          :disabled=\"props.disabled || props.readonly\"\n          @click=\"onAddPresetCell(tpl)\"\n        >\n          <Plus class=\"h-3.5 w-3.5 shrink-0\" />\n          <span class=\"font-medium\">{{ tpl.label }} cell</span>\n        </button>\n      </div>\n      <p v-if=\"props.helpText\" class=\"text-xs text-muted-foreground\">\n        {{ props.helpText }}\n      </p>\n      <ul\n        v-if=\"props.errors.length\"\n        class=\"flex flex-col gap-0.5 text-xs text-destructive\"\n        role=\"alert\"\n      >\n        <li v-for=\"(err, i) in props.errors\" :key=\"i\">{{ err }}</li>\n      </ul>\n    </aside>\n\n    <section\n      class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n      data-testid=\"grid-builder-canvas\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Preview\n        </h4>\n        <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n          builder/grid-builder\n        </Badge>\n      </header>\n      <div\n        v-if=\"items.length > 0\"\n        ref=\"gridEl\"\n        class=\"rounded-md border border-dashed bg-background p-2\"\n        :style=\"gridStyle\"\n        data-testid=\"grid-builder-canvas-grid\"\n      >\n        <div\n          v-for=\"it in items\"\n          :key=\"it.id\"\n          :style=\"cellStyle(it)\"\n          :data-testid=\"`grid-builder-cell-${it.id}`\"\n          class=\"relative flex cursor-move touch-none select-none flex-col items-center justify-center gap-1 rounded border bg-card px-2 py-1 text-center text-xs transition-colors hover:border-primary\"\n          :class=\"[\n            builder.selection.value.id === it.id\n              ? 'border-primary bg-accent/30 ring-2 ring-primary/30'\n              : '',\n            activeInteractionId === it.id ? 'ring-2 ring-primary' : '',\n          ]\"\n          @click=\"onCellClick(it.id)\"\n          @pointerdown=\"(e: PointerEvent) => onCellPointerDown(it, e)\"\n        >\n          <span class=\"font-medium\">{{ it.label }}</span>\n          <span class=\"font-mono text-[10px] text-muted-foreground\">\n            {{ it.w }}×{{ it.h }} @ ({{ it.x }}, {{ it.y }})\n          </span>\n          <span\n            class=\"absolute bottom-0.5 right-0.5 h-2.5 w-2.5 cursor-nwse-resize rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary\"\n            :data-testid=\"`grid-builder-resize-${it.id}`\"\n            @click.stop\n            @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(it, e)\"\n          />\n        </div>\n      </div>\n      <p\n        v-else\n        class=\"py-6 text-center text-xs text-muted-foreground\"\n        data-testid=\"grid-builder-canvas-empty\"\n      >\n        Click \"Add cell\" or a preset to start the layout.\n      </p>\n    </section>\n\n    <aside\n      class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n      data-testid=\"grid-builder-inspector\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Inspector\n        </h4>\n        <Button\n          v-if=\"builder.selection.value.id\"\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      <p\n        v-if=\"!selectedItem\"\n        class=\"py-3 text-xs text-muted-foreground\"\n        data-testid=\"grid-builder-inspector-empty\"\n      >\n        Select a cell on the canvas to edit its size and position.\n      </p>\n\n      <div\n        v-else\n        class=\"flex flex-col gap-3\"\n        data-testid=\"grid-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              cell\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"gb-label\">Label</Label>\n              <Input\n                id=\"gb-label\"\n                :model-value=\"selectedItem.label\"\n                data-testid=\"grid-builder-inspector-label\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      label: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"grid grid-cols-2 gap-2\">\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-x\">X (col)</Label>\n                <Input\n                  id=\"gb-x\"\n                  type=\"number\"\n                  min=\"0\"\n                  :model-value=\"selectedItem.x\"\n                  data-testid=\"grid-builder-inspector-x\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        x: parseInt0((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-y\">Y (row)</Label>\n                <Input\n                  id=\"gb-y\"\n                  type=\"number\"\n                  min=\"0\"\n                  :model-value=\"selectedItem.y\"\n                  data-testid=\"grid-builder-inspector-y\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        y: parseInt0((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-w\">Width</Label>\n                <Input\n                  id=\"gb-w\"\n                  type=\"number\"\n                  min=\"1\"\n                  :model-value=\"selectedItem.w\"\n                  data-testid=\"grid-builder-inspector-w\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        w: parseInt1((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"gb-h\">Height</Label>\n                <Input\n                  id=\"gb-h\"\n                  type=\"number\"\n                  min=\"1\"\n                  :model-value=\"selectedItem.h\"\n                  data-testid=\"grid-builder-inspector-h\"\n                  @input=\"\n                    (e: Event) =>\n                      patchSelected({\n                        h: parseInt1((e.target as HTMLInputElement).value),\n                      })\n                  \"\n                />\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Button\n          variant=\"destructive\"\n          size=\"sm\"\n          class=\"self-end\"\n          data-testid=\"grid-builder-remove\"\n          @click=\"onRemove\"\n        >\n          <Trash2 class=\"h-3.5 w-3.5\" />\n          Remove\n        </Button>\n      </div>\n    </aside>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/chunks/GridCard-Chdn2wRI.js

@@ -0,0 +1,64 @@
+import { n as e } from "./utils-DAErOi9O.js";
+import { n as t, o as n, r, s as i } from "./card-DAfWnvro.js";
+import { t as a } from "./ElementRenderer-DUhlfnFD.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+//#region src/components/compositions/elements/card/GridCard.vue?vue&type=script&setup=true&lang.ts
+var S = {
+	key: 0,
+	class: "col-span-full py-3 text-center text-sm text-muted-foreground"
+}, C = /* @__PURE__ */ m({
+	__name: "GridCard",
+	props: {
+		label: {},
+		title: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		gridCols: { default: 3 },
+		gridRowHeight: { default: 60 },
+		nestedElements: { default: () => [] },
+		item: { default: () => ({}) },
+		classList: {}
+	},
+	setup(m) {
+		let C = m, w = s(() => C.title ?? C.label), T = s(() => (C.nestedElements ?? []).filter((e) => typeof e == "object" && !!e && typeof e.type == "string")), E = s(() => ({
+			display: "grid",
+			gridTemplateColumns: `repeat(${C.gridCols}, minmax(0, 1fr))`,
+			gridAutoRows: `${C.gridRowHeight}px`,
+			gap: "0.5rem"
+		}));
+		return (s, m) => C.showCard === !1 ? (_(), u("div", {
+			key: 1,
+			class: h(b(e)(C.classList)),
+			style: g(E.value)
+		}, [(_(!0), u(o, null, v(T.value, (e) => (_(), c(a, {
+			key: e.id,
+			element: e,
+			item: C.item
+		}, null, 8, ["element", "item"]))), 128))], 6)) : (_(), c(b(i), {
+			key: 0,
+			class: h(b(e)(C.classList))
+		}, {
+			default: x(() => [w.value ? (_(), c(b(r), { key: 0 }, {
+				default: x(() => [p(b(t), null, {
+					default: x(() => [f(y(w.value), 1)]),
+					_: 1
+				})]),
+				_: 1
+			})) : l("", !0), p(b(n), null, {
+				default: x(() => [d("div", { style: g(E.value) }, [(_(!0), u(o, null, v(T.value, (e) => (_(), c(a, {
+					key: e.id,
+					element: e,
+					item: C.item
+				}, null, 8, ["element", "item"]))), 128)), T.value.length ? l("", !0) : (_(), u("p", S, " No elements configured. "))], 4)]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { C as default };
+
+//# sourceMappingURL=GridCard-Chdn2wRI.js.map

package/dist/chunks/GridCard-Chdn2wRI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridCard-Chdn2wRI.js","names":[],"sources":["../../src/components/compositions/elements/card/GridCard.vue","../../src/components/compositions/elements/card/GridCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * `card.grid` element composition.\n *\n * Renders nested child elements in a CSS grid with configurable column\n * count and row height. Children are rendered via ElementRenderer; the\n * grid layout is controlled by `gridCols` and `gridRowHeight`.\n *\n * For a visual drag-and-drop grid designer use `builder.grid-builder`.\n * This element focuses on static configured layouts.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GridCardProps {\n  label?: string\n  title?: string\n  showCard?: boolean\n  gridCols?: number\n  gridRowHeight?: number\n  nestedElements?: Array<Record<string, unknown>>\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<GridCardProps>(), {\n  showCard: true,\n  gridCols: 3,\n  gridRowHeight: 60,\n  nestedElements: () => [],\n  item: () => ({}),\n})\n\nconst heading = computed(() => props.title ?? props.label)\n\nconst children = computed(() =>\n  (props.nestedElements ?? []).filter(\n    (e): boolean =>\n      typeof e === \"object\" &&\n      e !== null &&\n      typeof (e as Record<string, unknown>).type === \"string\",\n  ) as unknown as CardElement[],\n)\n\nconst gridStyle = computed(() => ({\n  display: \"grid\",\n  gridTemplateColumns: `repeat(${props.gridCols}, minmax(0, 1fr))`,\n  gridAutoRows: `${props.gridRowHeight}px`,\n  gap: \"0.5rem\",\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      <div :style=\"gridStyle\">\n        <ElementRenderer\n          v-for=\"child in children\"\n          :key=\"child.id\"\n          :element=\"child\"\n          :item=\"props.item\"\n        />\n        <p\n          v-if=\"!children.length\"\n          class=\"col-span-full py-3 text-center text-sm text-muted-foreground\"\n        >\n          No elements configured.\n        </p>\n      </div>\n    </CardContent>\n  </Card>\n\n  <div v-else :class=\"cn(props.classList)\" :style=\"gridStyle\">\n    <ElementRenderer\n      v-for=\"child in children\"\n      :key=\"child.id\"\n      :element=\"child\"\n      :item=\"props.item\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * `card.grid` element composition.\n *\n * Renders nested child elements in a CSS grid with configurable column\n * count and row height. Children are rendered via ElementRenderer; the\n * grid layout is controlled by `gridCols` and `gridRowHeight`.\n *\n * For a visual drag-and-drop grid designer use `builder.grid-builder`.\n * This element focuses on static configured layouts.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GridCardProps {\n  label?: string\n  title?: string\n  showCard?: boolean\n  gridCols?: number\n  gridRowHeight?: number\n  nestedElements?: Array<Record<string, unknown>>\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<GridCardProps>(), {\n  showCard: true,\n  gridCols: 3,\n  gridRowHeight: 60,\n  nestedElements: () => [],\n  item: () => ({}),\n})\n\nconst heading = computed(() => props.title ?? props.label)\n\nconst children = computed(() =>\n  (props.nestedElements ?? []).filter(\n    (e): boolean =>\n      typeof e === \"object\" &&\n      e !== null &&\n      typeof (e as Record<string, unknown>).type === \"string\",\n  ) as unknown as CardElement[],\n)\n\nconst gridStyle = computed(() => ({\n  display: \"grid\",\n  gridTemplateColumns: `repeat(${props.gridCols}, minmax(0, 1fr))`,\n  gridAutoRows: `${props.gridRowHeight}px`,\n  gap: \"0.5rem\",\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      <div :style=\"gridStyle\">\n        <ElementRenderer\n          v-for=\"child in children\"\n          :key=\"child.id\"\n          :element=\"child\"\n          :item=\"props.item\"\n        />\n        <p\n          v-if=\"!children.length\"\n          class=\"col-span-full py-3 text-center text-sm text-muted-foreground\"\n        >\n          No elements configured.\n        </p>\n      </div>\n    </CardContent>\n  </Card>\n\n  <div v-else :class=\"cn(props.classList)\" :style=\"gridStyle\">\n    <ElementRenderer\n      v-for=\"child in children\"\n      :key=\"child.id\"\n      :element=\"child\"\n      :item=\"props.item\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAiCA,IAAM,IAAQ,GAQR,IAAU,QAAe,EAAM,SAAS,EAAM,KAAK,GAEnD,IAAW,SACd,EAAM,kBAAkB,CAAC,GAAG,QAC1B,MACC,OAAO,KAAM,cACb,KACA,OAAQ,EAA8B,QAAS,QACnD,CACF,GAEM,IAAY,SAAgB;GAChC,SAAS;GACT,qBAAqB,UAAU,EAAM,SAAS;GAC9C,cAAc,GAAG,EAAM,cAAc;GACrC,KAAK;EACP,EAAE;mBAIY,EAAM,aAAQ,WAsB1B,EAOM,OAAA;;GAPO,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;GAAI,OAAK,EAAE,EAAA,KAAS;cACxD,EAKE,GAAA,MAAA,EAJgB,EAAA,QAAT,YADT,EAKE,GAAA;GAHC,KAAK,EAAM;GACX,SAAS;GACT,MAAM,EAAM;qDA3BS,EAAA,GAA1B,EAoBO,EAAA,CAAA,GAAA;;GApBgC,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;;oBAGjD,CAFK,EAAA,SAAA,EAAA,GAAlB,EAEa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBADyB,CAApC,EAAoC,EAAA,CAAA,GAAA,MAAA;sBAAZ,CAAA,EAAA,EAAV,EAAA,KAAO,GAAA,CAAA,CAAA,CAAA;;;;oBAEvB,EAec,EAAA,CAAA,GAAA,MAAA;qBADN,CAbN,EAaM,OAAA,EAbA,OAAK,EAAE,EAAA,KAAS,EAAA,GAAA,EAAA,EAAA,EAAA,GACpB,EAKE,GAAA,MAAA,EAJgB,EAAA,QAAT,YADT,EAKE,GAAA;KAHC,KAAK,EAAM;KACX,SAAS;KACT,MAAM,EAAM;+CAGN,EAAA,MAAS,SAIlB,EAAA,IAAA,EAAA,KAJkB,EAAA,GADlB,EAKI,KALJ,GAGC,2BAED,EAAA,GAAA,CAAA,CAAA,CAAA"}