@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/builder/FormBuilder.vue

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