npm - @gxp-dev/mod-ui - Versions diffs - 2.0.8 → 2.0.12 - Mend

@gxp-dev/mod-ui 2.0.8 → 2.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2181) hide show

package/dist/components/compositions/elements/builder/FormBuilder.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormBuilder.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/FormBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * FormBuilder — visual schema builder.\n *\n * Three-pane layout:\n * - LEFT (Palette): Clickable list of element types from\n * CardElementMetadataMap. Click to append a\n * new element to the root card.\n * - MIDDLE (Canvas): Live preview via CardRenderer plus a drag-\n * sortable grid canvas. Each element block shows\n * a center-top reorder handle and a top-right\n * resize handle on hover.\n * - RIGHT (Inspector): Property panel for the selected element.\n * Every input writes through the\n * formBuilderStore.\n *\n * State is owned by `formBuilderStore` (Pinia). The builder accepts an\n * optional initial schema via `modelValue` and emits the current schema\n * through `update:modelValue` so the host page can save it like any\n * other form field.\n *\n * Drag reorder: center-top handle → pointer events snap element to new\n * index in elementList.\n * Drag resize: top-right handle → pointer events set colSpan (1–4) on\n * the element, mapping to 25/50/75/100 % of the canvas width.\n */\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from \"vue\"\nimport {\n ArrowDown,\n ArrowUp,\n ChevronRight,\n ChevronsLeftRight,\n GripHorizontal,\n Info,\n LayoutList,\n Maximize2,\n Minimize2,\n PencilLine,\n Plus,\n Trash2,\n X,\n} from \"@lucide/vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport { CardElementMetadataMap, CardElementStylesMap, getElementEditConfig } from \"@/definitions/elements\"\nimport type { EditConfigField } from \"@/definitions/shared/base\"\nimport { joinElementType, splitElementType } from \"@/definitions/shared/base\"\nimport { shouldRender } from \"@/engine/useDisplayConditions\"\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 { Separator } from \"@/components/ui/separator\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { Switch } from \"@/components/ui/switch\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport {\n useFormBuilder,\n type BuilderSchema,\n} from \"@/stores/formBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface FormBuilderProps {\n /** Initial / current schema. Two-way bindable via v-model. */\n modelValue?: BuilderSchema\n /**\n * Identifier used to key the formBuilderStore. Defaults to a stable\n * auto-generated id so multiple FormBuilders 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}\n\nconst props = withDefaults(defineProps<FormBuilderProps>(), {\n item: () => ({}),\n})\n\nconst model = defineModel<BuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `form-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\n\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\n/** Controls which canvas view is active. */\nconst canvasMode = ref<\"inline\" | \"list\">(\"list\")\n\n/**\n * When non-null the canvas is \"zoomed into\" a specific card-type element.\n * Only that card's children are shown and editable. Schema storage is\n * unaffected — this is purely a UI focus state.\n */\nconst zoomedCardId = ref<string | null>(null)\nconst isZoomed = computed(() => zoomedCardId.value !== null)\nconst zoomedCardElement = computed(() =>\n zoomedCardId.value\n ? (builder.schema.value.elements[zoomedCardId.value] ?? null)\n : null,\n)\n\nfunction zoomInto(elementId: string): void {\n zoomedCardId.value = elementId\n builder.select(\"element\", elementId)\n}\n\nfunction zoomOut(): void {\n zoomedCardId.value = null\n}\n\nconst builder = useFormBuilder(builderId.value)\n\nfunction isBuilderSchema(value: unknown): value is BuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n const v = value as Record<string, unknown>\n return (\n typeof v.rootCardId === \"string\" &&\n typeof v.cards === \"object\" &&\n v.cards !== null &&\n typeof v.elements === \"object\" &&\n v.elements !== null\n )\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n const seed = model.value\n if (isBuilderSchema(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 = next\n },\n { deep: true },\n)\n\nconst rootCard = computed(\n () => builder.schema.value.cards[builder.schema.value.rootCardId],\n)\n\nconst canvasRootContainerId = computed(() => builder.schema.value.rootCardId)\n\n/** Active container for the visible canvas — root unless zoomed into a card element. */\nconst activeCanvasContainerId = computed(() => zoomedCardId.value ?? canvasRootContainerId.value)\n\n/** The element list shown in the canvas — scoped to the zoomed card when active. */\nconst activeElementList = computed(() =>\n zoomedCardId.value ? getElementList(zoomedCardId.value) : rootElementList.value,\n)\n\nconst rootElementList = computed<string[]>(() => {\n const card = rootCard.value\n if (!card) {\n return []\n }\n return ((card as unknown as Record<string, unknown>).elementList as string[]) ?? []\n})\n\n/** True when an element's type starts with \"card.\" — it acts as a nested container. */\nfunction isCardElement(elementId: string): boolean {\n const el = builder.schema.value.elements[elementId]\n if (!el) return false\n return String((el as unknown as Record<string, unknown>).type ?? \"\").startsWith(\"card.\")\n}\n\n/** Returns the elementList for any container (card or card-type element). */\nfunction getElementList(containerId: string): string[] {\n const schema = builder.schema.value\n const card = schema.cards[containerId]\n if (card) return ((card as unknown as Record<string, unknown>).elementList as string[] | undefined) ?? []\n const el = schema.elements[containerId]\n if (el) return ((el as unknown as Record<string, unknown>).elementList as string[] | undefined) ?? []\n return []\n}\n\n/**\n * For inline-mode rendering: augments a card-type element with resolved\n * `nestedElements` so the composition receives actual child objects, not IDs.\n */\nfunction resolveElementForRender(elementId: string): CardElement {\n const el = builder.schema.value.elements[elementId]!\n if (!isCardElement(elementId)) return el\n const bag = el as unknown as Record<string, unknown>\n const childIds = (bag.elementList as string[] | undefined) ?? []\n const nestedElements = childIds\n .map((id) => builder.schema.value.elements[id])\n .filter(Boolean)\n return { ...el, nestedElements } as unknown as CardElement\n}\n\nconst paletteGroups = computed(() =>\n (\n Object.entries(CardElementMetadataMap) as Array<\n [\n keyof typeof CardElementMetadataMap,\n (typeof CardElementMetadataMap)[keyof typeof CardElementMetadataMap],\n ]\n >\n ).map(([type, meta]) => ({\n type,\n meta,\n styles: CardElementStylesMap[type],\n })),\n)\n\nconst expandedGroups = reactive<Record<string, boolean>>({})\n\nfunction toggleGroup(type: string): void {\n expandedGroups[type] = !expandedGroups[type]\n}\n\nconst selectedElement = computed<CardElement | null>(() => {\n const sel = builder.selection.value\n if (sel.kind !== \"element\" || !sel.id) {\n return null\n }\n return builder.schema.value.elements[sel.id] ?? null\n})\n\n/** ID of the container that owns the currently selected element. */\nconst selectedContainerId = computed<string>(() => {\n const sel = builder.selection.value\n if (sel.kind !== \"element\" || !sel.id) return canvasRootContainerId.value\n if (rootElementList.value.includes(sel.id)) return canvasRootContainerId.value\n for (const [elId, el] of Object.entries(builder.schema.value.elements)) {\n const bag = el as unknown as Record<string, unknown>\n if (typeof bag.type === \"string\" && (bag.type as string).startsWith(\"card.\")) {\n if (((bag.elementList as string[] | undefined) ?? []).includes(sel.id)) {\n return elId\n }\n }\n }\n return canvasRootContainerId.value\n})\n\nconst selectedContainerList = computed<string[]>(() => getElementList(selectedContainerId.value))\n\nconst selectedIndex = computed<number>(() => {\n const sel = builder.selection.value\n if (sel.kind !== \"element\" || !sel.id) return -1\n return selectedContainerList.value.indexOf(sel.id)\n})\n\nconst canMoveDown = computed<boolean>(() => {\n const list = selectedContainerList.value\n return selectedIndex.value >= 0 && selectedIndex.value < list.length - 1\n})\n\nfunction onStyleClick(category: keyof typeof CardElementMetadataMap, style: string): void {\n const sel = builder.selection.value\n // Priority: 1) zoomed card container, 2) selected card element, 3) root.\n let containerId: string\n if (zoomedCardId.value) {\n containerId = zoomedCardId.value\n } else if (sel.kind === \"element\" && sel.id && isCardElement(sel.id)) {\n containerId = sel.id\n } else {\n containerId = builder.schema.value.rootCardId\n }\n const newId = builder.addElement(containerId, `${category}.${style}`)\n builder.select(\"element\", newId)\n}\n\nfunction onCanvasElementClick(elementId: string): void {\n builder.select(\"element\", elementId)\n}\n\nfunction onMoveUp(): void {\n if (selectedIndex.value <= 0) return\n builder.reorderElement(selectedContainerId.value, selectedIndex.value, selectedIndex.value - 1)\n}\n\nfunction onMoveDown(): void {\n if (!canMoveDown.value) return\n builder.reorderElement(selectedContainerId.value, selectedIndex.value, selectedIndex.value + 1)\n}\n\nfunction onRemove(): void {\n const sel = builder.selection.value\n if (sel.kind === \"element\" && sel.id) {\n builder.removeElement(sel.id)\n } else if (sel.kind === \"card\" && sel.id) {\n builder.removeCard(sel.id)\n }\n}\n\nfunction onClearSelection(): void {\n builder.select(null, null)\n}\n\nfunction patchSelected(patch: Partial<CardElement>): void {\n const sel = builder.selection.value\n if (sel.kind === \"element\" && sel.id) {\n builder.updateElement(sel.id, patch)\n }\n}\n\n/**\n * Dynamically resolved list of inspector fields for the selected element.\n * Uses the category-level EditConfig and evaluates conditionParams against a\n * virtual item that includes `style` extracted from the dot-notation type so\n * conditions like `{ name: \"style\", logic: \"==\", value: \"textarea\" }` work.\n */\nconst inspectorFields = computed<Array<{ fieldName: string; spec: EditConfigField }>>(() => {\n const el = selectedElement.value\n if (!el) return []\n\n const editConfig = getElementEditConfig(el.type)\n if (!editConfig) return []\n\n const { style } = splitElementType(el.type)\n const virtualItem = { ...(el as unknown as Record<string, unknown>), style }\n\n return Object.entries(editConfig)\n .filter(([, spec]) => {\n const t = (spec as EditConfigField).type as string\n // Skip fields that need complex nested renderers in the inspector.\n if (t?.startsWith(\"configuration-block.\")) return false\n if (t?.startsWith(\"builder.\")) return false\n if (t?.startsWith(\"code.\")) return false\n return shouldRender(spec as EditConfigField, virtualItem)\n })\n .map(([fieldName, spec]) => ({ fieldName, spec: spec as EditConfigField }))\n})\n\nfunction getFieldValue(fieldName: string): unknown {\n const el = selectedElement.value as unknown as Record<string, unknown> | null\n // `style` is not stored separately — derive it from the dot-notation `type`.\n if (fieldName === \"style\" && el?.type) {\n return splitElementType(String(el.type)).style\n }\n return el?.[fieldName] ?? \"\"\n}\n\nfunction onFieldInput(fieldName: string, value: unknown): void {\n // A style change means the element type changes: \"boolean.checkbox\" → \"boolean.switch\".\n if (fieldName === \"style\") {\n const el = selectedElement.value\n if (!el) return\n const { category } = splitElementType(el.type)\n patchSelected({ type: joinElementType(category, String(value)) } as unknown as Partial<CardElement>)\n return\n }\n patchSelected({ [fieldName]: value } as Partial<CardElement>)\n}\n\n/* ------------------------------------------------------------------ */\n/* Drag-reorder + drag-resize */\n/* ------------------------------------------------------------------ */\n\nconst canvasEl = ref<HTMLElement | null>(null)\n\ninterface FormDragState {\n mode: \"reorder\" | \"resize\"\n elementId: string\n fromContainerId: string\n fromIndex: number\n startClientX: number\n startColSpan: number\n containerWidth: number\n pointerId: number\n captureTarget: HTMLElement\n}\n\nconst activeDrag = ref<FormDragState | null>(null)\nconst dropTargetIndex = ref<number | null>(null)\nconst dropContainerId = ref<string | null>(null)\n\n/** colSpan (1–4) is stored directly on the element as a builder prop. */\nfunction getColSpan(elementId: string): number {\n const el = builder.schema.value.elements[elementId] as unknown as Record<string, unknown>\n const span = el?.colSpan\n return typeof span === \"number\" && span >= 1 && span <= 4 ? span : 4\n}\n\nfunction elementGridStyle(elementId: string): Record<string, string> {\n return { gridColumn: `span ${getColSpan(elementId)}` }\n}\n\nfunction beginFormDrag(\n mode: \"reorder\" | \"resize\",\n elementId: string,\n fromContainerId: string,\n fromIndex: number,\n event: PointerEvent,\n): void {\n if (event.button !== 0) return\n event.preventDefault()\n event.stopPropagation()\n builder.select(\"element\", elementId)\n const target = event.target as HTMLElement\n try {\n target.setPointerCapture(event.pointerId)\n } catch {\n // jsdom or restricted context\n }\n activeDrag.value = {\n mode,\n elementId,\n fromContainerId,\n fromIndex,\n startClientX: event.clientX,\n startColSpan: getColSpan(elementId),\n containerWidth: canvasEl.value?.getBoundingClientRect().width ?? 0,\n pointerId: event.pointerId,\n captureTarget: target,\n }\n if (mode === \"reorder\") {\n dropTargetIndex.value = fromIndex\n dropContainerId.value = fromContainerId\n }\n window.addEventListener(\"pointermove\", onFormPointerMove)\n window.addEventListener(\"pointerup\", onFormPointerUp)\n window.addEventListener(\"pointercancel\", onFormPointerUp)\n}\n\nfunction onReorderHandlePointerDown(\n elementId: string,\n containerId: string,\n index: number,\n event: PointerEvent,\n): void {\n beginFormDrag(\"reorder\", elementId, containerId, index, event)\n}\n\nfunction onResizeHandlePointerDown(\n elementId: string,\n event: PointerEvent,\n): void {\n beginFormDrag(\"resize\", elementId, canvasRootContainerId.value, -1, event)\n}\n\nfunction onFormPointerMove(event: PointerEvent): void {\n const state = activeDrag.value\n if (!state) return\n\n if (state.mode === \"resize\") {\n const dx = event.clientX - state.startClientX\n const colW = (state.containerWidth > 0 ? state.containerWidth : 400) / 4\n const colDelta = Math.round(dx / colW)\n const newSpan = Math.max(1, Math.min(4, state.startColSpan + colDelta))\n builder.updateElement(state.elementId, { colSpan: newSpan } as unknown as Partial<CardElement>)\n return\n }\n\n const target = document.elementFromPoint(event.clientX, event.clientY)\n if (!target) return\n\n // Determine which container the pointer is over (innermost wins).\n const containerEl = (target as HTMLElement).closest(\"[data-container-id]\")\n const cId = (containerEl as HTMLElement | null)?.dataset.containerId ?? null\n dropContainerId.value = cId\n\n // Find the element block index within that container.\n let blockEl: Element | null = (target as HTMLElement).closest(\"[data-element-block-index]\")\n // Discard if the block is outside (ancestor of) the detected container.\n if (blockEl && containerEl && !containerEl.contains(blockEl)) {\n blockEl = null\n }\n if (blockEl) {\n const idx = Number.parseInt(\n (blockEl as HTMLElement).dataset.elementBlockIndex ?? \"-1\",\n 10,\n )\n if (idx >= 0) dropTargetIndex.value = idx\n } else {\n // Hovering over empty space in the container — drop at end.\n dropTargetIndex.value = cId ? getElementList(cId).length : null\n }\n}\n\nfunction onFormPointerUp(event: PointerEvent): void {\n const state = activeDrag.value\n if (!state) {\n cleanupFormDrag()\n return\n }\n try {\n state.captureTarget.releasePointerCapture(state.pointerId)\n } catch {\n // ignore\n }\n if (state.mode === \"reorder\" && dropTargetIndex.value !== null) {\n const targetContainer = dropContainerId.value ?? state.fromContainerId\n if (targetContainer !== state.fromContainerId) {\n builder.moveElement(state.fromContainerId, targetContainer, state.elementId, dropTargetIndex.value)\n } else if (dropTargetIndex.value !== state.fromIndex) {\n builder.reorderElement(state.fromContainerId, state.fromIndex, dropTargetIndex.value)\n }\n }\n cleanupFormDrag()\n void event\n}\n\nfunction cleanupFormDrag(): void {\n activeDrag.value = null\n dropTargetIndex.value = null\n dropContainerId.value = null\n window.removeEventListener(\"pointermove\", onFormPointerMove)\n window.removeEventListener(\"pointerup\", onFormPointerUp)\n window.removeEventListener(\"pointercancel\", onFormPointerUp)\n}\n\nonBeforeUnmount(() => {\n cleanupFormDrag()\n})\n\nconst outerGridColumns = computed(() =>\n selectedElement.value\n ? \"220px 1fr 280px\"\n : \"220px 1fr 2rem\",\n)\n</script>\n\n<template>\n <div\n :class=\"cn('gxp-form-builder grid gap-3 rounded-lg border bg-card', props.classList)\"\n :style=\"{ gridTemplateColumns: outerGridColumns, minHeight: '24rem', transition: 'grid-template-columns 200ms ease' }\"\n data-testid=\"form-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=\"form-builder-palette\"\n >\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n {{ props.label ?? \"Element palette\" }}\n </h4>\n <div class=\"flex flex-col gap-0.5\">\n <div\n v-for=\"entry in paletteGroups\"\n :key=\"entry.type\"\n >\n <button\n type=\"button\"\n class=\"flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent/30\"\n :data-testid=\"`form-builder-palette-${entry.type}`\"\n @click=\"toggleGroup(entry.type)\"\n >\n <ChevronRight\n class=\"mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-150\"\n :class=\"expandedGroups[entry.type] ? 'rotate-90' : ''\"\n />\n <span class=\"flex min-w-0 flex-col gap-0.5\">\n <span class=\"font-medium\">{{ entry.meta.displayLabel }}</span>\n <span class=\"line-clamp-2 text-[10px] text-muted-foreground\">\n {{ entry.meta.description }}\n </span>\n </span>\n </button>\n\n <div\n v-if=\"expandedGroups[entry.type]\"\n class=\"ml-5 flex flex-col gap-0.5 pb-1\"\n >\n <button\n v-for=\"styleOption in entry.styles\"\n :key=\"styleOption.value\"\n type=\"button\"\n class=\"flex items-center gap-1.5 rounded border bg-background px-2 py-1 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40\"\n :data-testid=\"`form-builder-palette-${entry.type}-${styleOption.value}`\"\n @click=\"onStyleClick(entry.type, styleOption.value)\"\n >\n <Plus class=\"h-3 w-3 shrink-0 text-muted-foreground\" />\n {{ styleOption.label }}\n </button>\n </div>\n </div>\n </div>\n </aside>\n\n <section\n class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n data-testid=\"form-builder-canvas\"\n >\n <header class=\"flex flex-col gap-2\">\n \n <div\n v-if=\"isZoomed\"\n class=\"flex items-center gap-2 rounded-md border bg-muted/40 px-2.5 py-1.5 text-xs\"\n data-testid=\"form-builder-zoom-breadcrumb\"\n >\n <button\n type=\"button\"\n class=\"flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground\"\n data-testid=\"form-builder-zoom-out\"\n @click=\"zoomOut\"\n >\n <Minimize2 class=\"h-3.5 w-3.5\" />\n <span>Full form</span>\n </button>\n <span class=\"text-muted-foreground/50\">/</span>\n <span class=\"font-medium\">\n {{ (zoomedCardElement as Record<string, unknown> | null)?.label ?? 'Card' }}\n </span>\n </div>\n <div class=\"flex items-center justify-between\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n {{ canvasMode === \"inline\" ? \"Canvas\" : isZoomed ? \"Card preview\" : \"Preview\" }}\n </h4>\n <div class=\"flex items-center gap-2\">\n \n <div class=\"flex items-center rounded-md border p-0.5\">\n <button\n type=\"button\"\n class=\"rounded px-1.5 py-0.5 transition-colors\"\n :class=\"canvasMode === 'list' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'\"\n title=\"List mode — separate preview and element list\"\n data-testid=\"form-builder-mode-list\"\n @click=\"canvasMode = 'list'\"\n >\n <LayoutList class=\"h-3.5 w-3.5\" />\n </button>\n <button\n type=\"button\"\n class=\"rounded px-1.5 py-0.5 transition-colors\"\n :class=\"canvasMode === 'inline' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'\"\n title=\"Inline mode — live interactive canvas\"\n data-testid=\"form-builder-mode-inline\"\n @click=\"canvasMode = 'inline'\"\n >\n <PencilLine class=\"h-3.5 w-3.5\" />\n </button>\n </div>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/form-builder\n </Badge>\n </div>\n </div>\n </header>\n\n \n <template v-if=\"canvasMode === 'list'\">\n \n <div class=\"rounded-md border border-dashed bg-background p-3\">\n <template v-if=\"isZoomed && zoomedCardId\">\n <Suspense>\n <ElementRenderer\n :element=\"resolveElementForRender(zoomedCardId)\"\n :item=\"props.item\"\n />\n </Suspense>\n <p\n v-if=\"!activeElementList.length\"\n class=\"py-6 text-center text-xs text-muted-foreground\"\n data-testid=\"form-builder-canvas-empty\"\n >\n Click an element in the palette to add it.\n </p>\n </template>\n <template v-else-if=\"rootCard\">\n <CardRenderer\n :card=\"rootCard\"\n :item=\"props.item\"\n :elements=\"builder.schema.value.elements\"\n :cards=\"builder.schema.value.cards\"\n />\n <p\n v-if=\"rootElementList.length === 0\"\n class=\"py-6 text-center text-xs text-muted-foreground\"\n data-testid=\"form-builder-canvas-empty\"\n >\n Click an element in the palette to add it.\n </p>\n </template>\n </div>\n\n \n <div\n ref=\"canvasEl\"\n class=\"grid gap-2 text-xs\"\n style=\"grid-template-columns: repeat(4, minmax(0, 1fr))\"\n :data-container-id=\"activeCanvasContainerId\"\n data-testid=\"form-builder-canvas-list\"\n >\n <p\n v-if=\"!activeElementList.length\"\n class=\"col-span-full py-4 text-center text-muted-foreground\"\n >\n Add elements from the palette.\n </p>\n <div\n v-for=\"(elId, index) in activeElementList\"\n :key=\"elId\"\n :data-element-block-index=\"index\"\n :data-testid=\"`form-builder-row-${elId}`\"\n class=\"group relative cursor-pointer select-none rounded border bg-background transition-colors\"\n :class=\"[\n isCardElement(elId) ? 'px-2 pb-2 pt-5' : 'px-2 pb-2 pt-5 text-center',\n builder.selection.value.kind === 'element' && builder.selection.value.id === elId\n ? 'border-primary bg-accent/30'\n : 'hover:border-primary/50',\n activeDrag?.elementId === elId && activeDrag.mode === 'reorder'\n ? 'opacity-40 ring-2 ring-primary'\n : '',\n dropContainerId === activeCanvasContainerId &&\n dropTargetIndex === index &&\n activeDrag?.mode === 'reorder' &&\n activeDrag?.elementId !== elId\n ? 'ring-2 ring-primary/60 bg-primary/5'\n : '',\n ]\"\n :style=\"elementGridStyle(elId)\"\n @click=\"onCanvasElementClick(elId)\"\n >\n \n <span\n class=\"absolute left-1/2 top-0.5 -translate-x-1/2 cursor-grab touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing\"\n title=\"Drag to reorder\"\n @click.stop\n @pointerdown.stop=\"(e: PointerEvent) => onReorderHandlePointerDown(elId, activeCanvasContainerId, index, e)\"\n >\n <GripHorizontal class=\"h-3 w-3 text-muted-foreground\" />\n </span>\n\n \n <span\n class=\"absolute right-0.5 top-0.5 cursor-ew-resize touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100\"\n :title=\"`Width: ${getColSpan(elId)}/4 — drag to resize`\"\n @click.stop\n @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(elId, e)\"\n >\n <ChevronsLeftRight class=\"h-3 w-3 text-muted-foreground\" />\n </span>\n\n \n <template v-if=\"!isCardElement(elId)\">\n <span class=\"block truncate font-medium leading-tight\">\n {{ builder.schema.value.elements[elId]?.label ?? \"(unnamed)\" }}\n </span>\n <Badge variant=\"secondary\" class=\"mt-1 font-mono text-[9px]\">\n {{ builder.schema.value.elements[elId]?.type }}\n </Badge>\n </template>\n\n \n <template v-else>\n \n <button\n type=\"button\"\n class=\"absolute left-0.5 top-0.5 z-10 flex h-5 w-5 items-center justify-center rounded bg-muted/60 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:bg-muted hover:text-foreground\"\n :class=\"{ '!opacity-100': builder.selection.value.kind === 'element' && builder.selection.value.id === elId }\"\n title=\"Zoom into this card\"\n data-testid=\"form-builder-zoom-in\"\n @click.stop=\"zoomInto(elId)\"\n >\n <Maximize2 class=\"h-3 w-3\" />\n </button>\n <div>\n <span class=\"block truncate font-medium leading-tight\">\n {{ builder.schema.value.elements[elId]?.label ?? \"(unnamed)\" }}\n </span>\n <Badge variant=\"outline\" class=\"mt-1 font-mono text-[9px]\">\n {{ builder.schema.value.elements[elId]?.type }}\n </Badge>\n </div>\n \n <div\n class=\"mt-1.5 grid gap-1 rounded border border-dashed bg-muted/20 p-1\"\n style=\"grid-template-columns: repeat(4, minmax(0, 1fr))\"\n :data-container-id=\"elId\"\n @click.stop=\"onCanvasElementClick(elId)\"\n >\n <p\n v-if=\"!getElementList(elId).length\"\n class=\"col-span-full py-2 text-center text-[10px] text-muted-foreground\"\n >\n Drop elements here — or select & use palette\n </p>\n <div\n v-for=\"(childId, childIdx) in getElementList(elId)\"\n :key=\"childId\"\n :data-element-block-index=\"childIdx\"\n :data-testid=\"`form-builder-row-${childId}`\"\n class=\"group/child relative cursor-pointer select-none rounded border bg-background px-1.5 pb-1 pt-4 text-center text-[10px] transition-colors\"\n :class=\"[\n builder.selection.value.kind === 'element' && builder.selection.value.id === childId\n ? 'border-primary bg-accent/30'\n : 'hover:border-primary/50',\n activeDrag?.elementId === childId && activeDrag.mode === 'reorder'\n ? 'opacity-40 ring-2 ring-primary'\n : '',\n dropContainerId === elId &&\n dropTargetIndex === childIdx &&\n activeDrag?.mode === 'reorder' &&\n activeDrag?.elementId !== childId\n ? 'ring-2 ring-primary/60 bg-primary/5'\n : '',\n ]\"\n :style=\"elementGridStyle(childId)\"\n @click.stop=\"onCanvasElementClick(childId)\"\n >\n <span\n class=\"absolute left-1/2 top-0.5 -translate-x-1/2 cursor-grab touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover/child:opacity-100 active:cursor-grabbing\"\n title=\"Drag to reorder\"\n @click.stop\n @pointerdown.stop=\"(e: PointerEvent) => onReorderHandlePointerDown(childId, elId, childIdx, e)\"\n >\n <GripHorizontal class=\"h-3 w-3 text-muted-foreground\" />\n </span>\n <span\n class=\"absolute right-0.5 top-0.5 cursor-ew-resize touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover/child:opacity-100\"\n :title=\"`Width: ${getColSpan(childId)}/4 — drag to resize`\"\n @click.stop\n @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(childId, e)\"\n >\n <ChevronsLeftRight class=\"h-3 w-3 text-muted-foreground\" />\n </span>\n <span class=\"block truncate font-medium leading-tight\">\n {{ builder.schema.value.elements[childId]?.label ?? \"(unnamed)\" }}\n </span>\n <Badge variant=\"secondary\" class=\"mt-0.5 font-mono text-[9px]\">\n {{ builder.schema.value.elements[childId]?.type }}\n </Badge>\n </div>\n </div>\n </template>\n </div>\n </div>\n </template>\n\n \n <template v-else>\n <div class=\"rounded-md border border-dashed bg-background p-2\">\n <p\n v-if=\"activeElementList.length === 0\"\n class=\"py-6 text-center text-xs text-muted-foreground\"\n data-testid=\"form-builder-canvas-empty\"\n >\n Click an element in the palette to add it.\n </p>\n <div\n v-else\n ref=\"canvasEl\"\n class=\"grid gap-3\"\n style=\"grid-template-columns: repeat(4, minmax(0, 1fr))\"\n :data-container-id=\"activeCanvasContainerId\"\n data-testid=\"form-builder-canvas-list\"\n >\n <div\n v-for=\"(elId, index) in activeElementList\"\n :key=\"elId\"\n :data-element-block-index=\"index\"\n :data-testid=\"`form-builder-row-${elId}`\"\n class=\"group relative cursor-pointer rounded border pt-8 px-1.5 pb-1.5 transition-colors\"\n :class=\"[\n builder.selection.value.kind === 'element' && builder.selection.value.id === elId\n ? 'border-primary ring-1 ring-primary/30'\n : 'border-transparent hover:border-primary/40',\n activeDrag?.elementId === elId && activeDrag.mode === 'reorder'\n ? 'opacity-40 ring-2 ring-primary'\n : '',\n dropContainerId === activeCanvasContainerId &&\n dropTargetIndex === index &&\n activeDrag?.mode === 'reorder' &&\n activeDrag?.elementId !== elId\n ? 'ring-2 ring-primary/60 bg-primary/5'\n : '',\n ]\"\n :style=\"elementGridStyle(elId)\"\n @click=\"onCanvasElementClick(elId)\"\n >\n \n <span\n class=\"absolute left-1/2 top-1 z-10 -translate-x-1/2 cursor-grab touch-none rounded-sm bg-muted/80 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing\"\n title=\"Drag to reorder\"\n @click.stop\n @pointerdown.stop=\"(e: PointerEvent) => onReorderHandlePointerDown(elId, activeCanvasContainerId, index, e)\"\n >\n <GripHorizontal class=\"h-3 w-3 text-muted-foreground\" />\n </span>\n\n \n <span\n class=\"absolute right-1 top-1 z-10 cursor-ew-resize touch-none rounded-sm bg-muted/80 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100\"\n :title=\"`Width: ${getColSpan(elId)}/4 — drag to resize`\"\n @click.stop\n @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(elId, e)\"\n >\n <ChevronsLeftRight class=\"h-3 w-3 text-muted-foreground\" />\n </span>\n\n \n <button\n v-if=\"isCardElement(elId)\"\n type=\"button\"\n class=\"absolute left-1 top-1 z-10 flex h-5 w-5 items-center justify-center rounded bg-muted/80 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:bg-muted hover:text-foreground\"\n :class=\"{ '!opacity-100': builder.selection.value.kind === 'element' && builder.selection.value.id === elId }\"\n title=\"Zoom into this card\"\n data-testid=\"form-builder-zoom-in\"\n @click.stop=\"zoomInto(elId)\"\n >\n <Maximize2 class=\"h-3.5 w-3.5\" />\n </button>\n\n \n <ElementRenderer\n :element=\"resolveElementForRender(elId)\"\n :item=\"props.item\"\n />\n </div>\n </div>\n </div>\n </template>\n </section>\n\n \n <aside\n v-if=\"!selectedElement\"\n class=\"flex items-start justify-center border-l pt-3 overflow-hidden\"\n data-testid=\"form-builder-inspector\"\n >\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger as-child>\n <span\n class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-muted-foreground\"\n tabindex=\"0\"\n aria-label=\"Select an element on the canvas to edit its properties\"\n data-testid=\"form-builder-inspector-empty\"\n >\n <Info class=\"h-4 w-4\" />\n </span>\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n Select an element on the canvas to edit its properties\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n </aside>\n\n \n <aside\n v-else\n class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n data-testid=\"form-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 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 <div\n class=\"flex flex-col gap-3\"\n data-testid=\"form-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 {{ selectedElement.type }}\n </CardTitle>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-2 pb-3\">\n <template\n v-for=\"field in inspectorFields\"\n :key=\"field.fieldName\"\n >\n \n <div\n v-if=\"field.spec.type?.toString().startsWith('boolean.')\"\n class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n >\n <Label :for=\"`fb-${field.fieldName}`\" class=\"cursor-pointer\">\n {{ field.spec.label ?? field.fieldName }}\n </Label>\n <Switch\n :id=\"`fb-${field.fieldName}`\"\n :model-value=\"Boolean(getFieldValue(field.fieldName))\"\n :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n @update:model-value=\"(v: boolean) => onFieldInput(field.fieldName, v)\"\n />\n </div>\n\n \n <div\n v-else-if=\"field.spec.type?.toString().startsWith('option-select.')\"\n class=\"flex flex-col gap-1\"\n >\n <Label :for=\"`fb-${field.fieldName}`\">\n {{ field.spec.label ?? field.fieldName }}\n </Label>\n <select\n :id=\"`fb-${field.fieldName}`\"\n class=\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring\"\n :value=\"String(getFieldValue(field.fieldName) ?? '')\"\n :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n @change=\"(e: Event) => onFieldInput(field.fieldName, (e.target as HTMLSelectElement).value)\"\n >\n <option\n v-for=\"opt in (field.spec.selectOptions as Array<{label: string; value: string}> ?? [])\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n >\n {{ opt.label }}\n </option>\n </select>\n </div>\n\n \n <div\n v-else-if=\"field.spec.type === 'input.textarea'\"\n class=\"flex flex-col gap-1\"\n >\n <Label :for=\"`fb-${field.fieldName}`\">\n {{ field.spec.label ?? field.fieldName }}\n </Label>\n <Textarea\n :id=\"`fb-${field.fieldName}`\"\n :model-value=\"String(getFieldValue(field.fieldName) ?? '')\"\n :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n @input=\"(e: Event) => onFieldInput(field.fieldName, (e.target as HTMLTextAreaElement).value)\"\n />\n </div>\n\n \n <div\n v-else\n class=\"flex flex-col gap-1\"\n >\n <Label :for=\"`fb-${field.fieldName}`\">\n {{ field.spec.label ?? field.fieldName }}\n </Label>\n <Input\n :id=\"`fb-${field.fieldName}`\"\n :model-value=\"String(getFieldValue(field.fieldName) ?? '')\"\n :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n @input=\"(e: Event) => onFieldInput(field.fieldName, (e.target as HTMLInputElement).value)\"\n />\n </div>\n </template>\n\n <Separator v-if=\"inspectorFields.length\" class=\"my-1\" />\n\n \n <div class=\"flex flex-col gap-1\">\n <Label for=\"fb-help\">Help text</Label>\n <Textarea\n id=\"fb-help\"\n :model-value=\"String(getFieldValue('helpText') ?? '')\"\n data-testid=\"form-builder-inspector-help\"\n @input=\"(e: Event) => onFieldInput('helpText', (e.target as HTMLTextAreaElement).value)\"\n />\n </div>\n <div class=\"flex items-center justify-between rounded border bg-background px-2 py-1\">\n <Label for=\"fb-disabled\">Disabled</Label>\n <Switch\n id=\"fb-disabled\"\n :model-value=\"Boolean(getFieldValue('disabled'))\"\n @update:model-value=\"(v: boolean) => onFieldInput('disabled', v)\"\n />\n </div>\n </CardContent>\n </Card>\n\n <div class=\"flex items-center gap-1\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n :disabled=\"selectedIndex <= 0\"\n data-testid=\"form-builder-move-up\"\n @click=\"onMoveUp\"\n >\n <ArrowUp class=\"h-3.5 w-3.5\" />\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n :disabled=\"!canMoveDown\"\n data-testid=\"form-builder-move-down\"\n @click=\"onMoveDown\"\n >\n <ArrowDown class=\"h-3.5 w-3.5\" />\n </Button>\n <Button\n variant=\"destructive\"\n size=\"sm\"\n class=\"ml-auto\"\n data-testid=\"form-builder-remove\"\n @click=\"onRemove\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n Remove\n </Button>\n </div>\n </div>\n </aside>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/builder/GridBuilder.js ADDED Viewed

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

package/dist/components/compositions/elements/builder/GridBuilder.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GridBuilder.js","names":[],"sources":["../../../../../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"],"mappings":""}

package/dist/components/compositions/elements/builder/GridBuilder.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,387 @@
+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 { useGridBuilder as ee } from "../../../../stores/gridBuilderStore.js";
+import { Fragment as l, computed as u, createBlock as te, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as ne, onMounted as re, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useModel as ie, watch as ae, withCtx as T, withModifiers as E } from "vue";
+import { Plus as D, Trash2 as oe, X as se } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/GridBuilder.vue?vue&type=script&setup=true&lang.ts
+var ce = ["data-element-name"], le = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "grid-builder-palette"
+}, ue = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, de = { class: "flex flex-col gap-1" }, fe = [
+	"data-testid",
+	"disabled",
+	"onClick"
+], pe = { class: "font-medium" }, me = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, he = {
+	key: 1,
+	class: "flex flex-col gap-0.5 text-xs text-destructive",
+	role: "alert"
+}, ge = {
+	class: "flex flex-col gap-3 overflow-y-auto p-3",
+	"data-testid": "grid-builder-canvas"
+}, O = { class: "flex items-center justify-between" }, k = [
+	"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"
+}, L = {
+	key: 1,
+	class: "flex flex-col gap-3",
+	"data-testid": "grid-builder-inspector-fields"
+}, _e = { class: "flex flex-col gap-1" }, ve = { class: "grid grid-cols-2 gap-2" }, ye = { class: "flex flex-col gap-1" }, be = { class: "flex flex-col gap-1" }, xe = { class: "flex flex-col gap-1" }, Se = { class: "flex flex-col gap-1" }, R = /* @__PURE__ */ g({
+	__name: "GridBuilder",
+	props: /* @__PURE__ */ _({
+		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(g) {
+		let _ = g, R = ie(g, "modelValue"), z = 0;
+		function Ce() {
+			return z += 1, `grid-builder-${Date.now()}-${z}`;
+		}
+		let we = x(Ce()), B = ee(u(() => _.builderId ?? we.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);
+		}
+		re(() => {
+			let e = R.value;
+			Te(e) && B.loadSchema(e);
+		}), ae(() => B.schema.value, (e) => {
+			R.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 = u(() => B.schema.value.items), H = u(() => B.schema.value.cols), U = u(() => B.schema.value.rowHeight), W = u(() => {
+			let e = B.selection.value;
+			return e.id ? V.value.find((t) => t.id === e.id) ?? null : null;
+		}), De = u(() => ({
+			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 = x(null), Y = x(null), X = u(() => Y.value?.itemId ?? null);
+		function Pe() {
+			let e = J.value;
+			return e ? e.getBoundingClientRect().width / H.value : 0;
+		}
+		function Z(e, t, n) {
+			if (_.disabled || _.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 ne(() => {
+			window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		}), (ee, u) => (b(), f("div", {
+			class: v(w(e)("gxp-grid-builder grid gap-3 rounded-lg border bg-card", _.classList)),
+			style: {
+				"grid-template-columns": "220px 1fr 280px",
+				"min-height": "24rem"
+			},
+			"data-testid": "grid-builder",
+			"data-element-name": _.name ?? void 0
+		}, [
+			p("aside", le, [
+				p("h4", ue, C(_.label ?? "Grid palette"), 1),
+				h(w(n), {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					class: "justify-start gap-2",
+					"data-testid": "grid-builder-palette-add",
+					disabled: _.disabled || _.readonly,
+					onClick: ke
+				}, {
+					default: T(() => [h(w(D), { class: "h-3.5 w-3.5" }), u[6] ||= m(" Add cell ", -1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				p("div", de, [(b(), f(l, null, S(Ee, (e) => p("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: _.disabled || _.readonly,
+					onClick: (t) => Ae(e)
+				}, [h(w(D), { class: "h-3.5 w-3.5 shrink-0" }), p("span", pe, C(e.label) + " cell", 1)], 8, fe)), 64))]),
+				_.helpText ? (b(), f("p", me, C(_.helpText), 1)) : d("", !0),
+				_.errors.length ? (b(), f("ul", he, [(b(!0), f(l, null, S(_.errors, (e, t) => (b(), f("li", { key: t }, C(e), 1))), 128))])) : d("", !0)
+			]),
+			p("section", ge, [p("header", O, [u[8] ||= p("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Preview ", -1), h(w(t), {
+				variant: "outline",
+				class: "font-mono text-[10px]"
+			}, {
+				default: T(() => [...u[7] ||= [m(" builder/grid-builder ", -1)]]),
+				_: 1
+			})]), V.value.length > 0 ? (b(), f("div", {
+				key: 0,
+				ref_key: "gridEl",
+				ref: J,
+				class: "rounded-md border border-dashed bg-background p-2",
+				style: y(De.value),
+				"data-testid": "grid-builder-canvas-grid"
+			}, [(b(!0), f(l, null, S(V.value, (e) => (b(), f("div", {
+				key: e.id,
+				style: y(Oe(e)),
+				"data-testid": `grid-builder-cell-${e.id}`,
+				class: v(["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", [w(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)
+			}, [
+				p("span", A, C(e.label), 1),
+				p("span", j, C(e.w) + "×" + C(e.h) + " @ (" + C(e.x) + ", " + C(e.y) + ") ", 1),
+				p("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] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((t) => Ie(e, t), ["stop"])
+				}, null, 40, M)
+			], 46, k))), 128))], 4)) : (b(), f("p", N, " Click \"Add cell\" or a preset to start the layout. "))]),
+			p("aside", P, [p("header", F, [u[9] ||= p("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), w(B).selection.value.id ? (b(), te(w(n), {
+				key: 0,
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Clear selection",
+				onClick: Ne
+			}, {
+				default: T(() => [h(w(se), { class: "h-3.5 w-3.5" })]),
+				_: 1
+			})) : d("", !0)]), W.value ? (b(), f("div", L, [h(w(r), { class: "border-dashed" }, {
+				default: T(() => [h(w(a), { class: "py-2" }, {
+					default: T(() => [h(w(o), { class: "font-mono text-xs uppercase tracking-wide" }, {
+						default: T(() => [...u[10] ||= [m(" cell ", -1)]]),
+						_: 1
+					})]),
+					_: 1
+				}), h(w(i), { class: "flex flex-col gap-2 pb-3" }, {
+					default: T(() => [p("div", _e, [h(w(c), { for: "gb-label" }, {
+						default: T(() => [...u[11] ||= [m("Label", -1)]]),
+						_: 1
+					}), h(w(s), {
+						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"])]), p("div", ve, [
+						p("div", ye, [h(w(c), { for: "gb-x" }, {
+							default: T(() => [...u[12] ||= [m("X (col)", -1)]]),
+							_: 1
+						}), h(w(s), {
+							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"])]),
+						p("div", be, [h(w(c), { for: "gb-y" }, {
+							default: T(() => [...u[13] ||= [m("Y (row)", -1)]]),
+							_: 1
+						}), h(w(s), {
+							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"])]),
+						p("div", xe, [h(w(c), { for: "gb-w" }, {
+							default: T(() => [...u[14] ||= [m("Width", -1)]]),
+							_: 1
+						}), h(w(s), {
+							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"])]),
+						p("div", Se, [h(w(c), { for: "gb-h" }, {
+							default: T(() => [...u[15] ||= [m("Height", -1)]]),
+							_: 1
+						}), h(w(s), {
+							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
+			}), h(w(n), {
+				variant: "destructive",
+				size: "sm",
+				class: "self-end",
+				"data-testid": "grid-builder-remove",
+				onClick: Me
+			}, {
+				default: T(() => [h(w(oe), { class: "h-3.5 w-3.5" }), u[16] ||= m(" Remove ", -1)]),
+				_: 1
+			})])) : (b(), f("p", I, " Select a cell on the canvas to edit its size and position. "))])
+		], 10, ce));
+	}
+});
+//#endregion
+export { R as default };
+//# sourceMappingURL=GridBuilder.vue_vue_type_script_setup_true_lang.js.map