@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/chunks/FormBuilder-D314W1mI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilder-D314W1mI.js","names":[],"sources":["../../src/components/compositions/elements/builder/FormBuilder.vue","../../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        <!-- Zoom breadcrumb — shown when focused into a card element -->\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            <!-- Mode toggle -->\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      <!-- ─── LIST MODE ──────────────────────────────────────────────── -->\n      <template v-if=\"canvasMode === 'list'\">\n        <!-- Preview section: full CardRenderer when at root, element preview when zoomed -->\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        <!-- Drag-sortable grid canvas — scoped to active container -->\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            <!-- Center-top reorder handle -->\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            <!-- Top-right resize handle -->\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            <!-- Non-card element: label + type badge -->\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            <!-- Card-type element: label + nested droppable container -->\n            <template v-else>\n              <!-- Zoom-in button — top-left, shown on hover or when selected -->\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              <!-- Nested mini-grid for children -->\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 &amp; 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      <!-- ─── INLINE MODE ────────────────────────────────────────────── -->\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              <!-- Center-top reorder handle -->\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              <!-- Top-right resize handle -->\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              <!-- Zoom-in button — card elements only, top-left, shown on hover or when selected -->\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              <!-- Live element render — card elements get resolved nestedElements -->\n              <ElementRenderer\n                :element=\"resolveElementForRender(elId)\"\n                :item=\"props.item\"\n              />\n            </div>\n          </div>\n        </div>\n      </template>\n    </section>\n\n    <!-- ─── INSPECTOR (collapsed) ──────────────────────────────────────── -->\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    <!-- ─── INSPECTOR (expanded) ─────────────────────────────────────── -->\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              <!-- boolean switch / checkbox → toggle row -->\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              <!-- option-select → native select -->\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              <!-- textarea -->\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              <!-- default: text input (covers input.*, picker.*, display.*, etc.) -->\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            <!-- Base fields always shown (not in every EditConfig) -->\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","<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        <!-- Zoom breadcrumb — shown when focused into a card element -->\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            <!-- Mode toggle -->\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      <!-- ─── LIST MODE ──────────────────────────────────────────────── -->\n      <template v-if=\"canvasMode === 'list'\">\n        <!-- Preview section: full CardRenderer when at root, element preview when zoomed -->\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        <!-- Drag-sortable grid canvas — scoped to active container -->\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            <!-- Center-top reorder handle -->\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            <!-- Top-right resize handle -->\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            <!-- Non-card element: label + type badge -->\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            <!-- Card-type element: label + nested droppable container -->\n            <template v-else>\n              <!-- Zoom-in button — top-left, shown on hover or when selected -->\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              <!-- Nested mini-grid for children -->\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 &amp; 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      <!-- ─── INLINE MODE ────────────────────────────────────────────── -->\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              <!-- Center-top reorder handle -->\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              <!-- Top-right resize handle -->\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              <!-- Zoom-in button — card elements only, top-left, shown on hover or when selected -->\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              <!-- Live element render — card elements get resolved nestedElements -->\n              <ElementRenderer\n                :element=\"resolveElementForRender(elId)\"\n                :item=\"props.item\"\n              />\n            </div>\n          </div>\n        </div>\n      </template>\n    </section>\n\n    <!-- ─── INSPECTOR (collapsed) ──────────────────────────────────────── -->\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    <!-- ─── INSPECTOR (expanded) ─────────────────────────────────────── -->\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              <!-- boolean switch / checkbox → toggle row -->\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              <!-- option-select → native select -->\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              <!-- textarea -->\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              <!-- default: text input (covers input.*, picker.*, display.*, etc.) -->\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            <!-- Base fields always shown (not in every EditConfig) -->\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyFA,IAAM,IAAQ,GAIR,IAAQ,GAAsC,GAAC,YAAY,GAE7D,IAAa;EACjB,SAAS,KAAqB;GAE5B,OADA,KAAc,GACP,gBAAgB,KAAK,IAAI,EAAE,GAAG;EACvC;EACA,IAAM,KAAa,EAAY,GAAW,CAAC,GAErC,KAAY,QAAuB,EAAM,aAAa,GAAW,KAAK,GAGtE,IAAa,EAAuB,MAAM,GAO1C,IAAe,EAAmB,IAAI,GACtC,IAAW,QAAe,EAAa,UAAU,IAAI,GACrD,KAAoB,QACxB,EAAa,QACR,EAAQ,OAAO,MAAM,SAAS,EAAa,UAAU,OACtD,IACN;EAEA,SAAS,GAAS,GAAyB;GAEzC,AADA,EAAa,QAAQ,GACrB,EAAQ,OAAO,WAAW,CAAS;EACrC;EAEA,SAAS,KAAgB;GACvB,EAAa,QAAQ;EACvB;EAEA,IAAM,IAAU,GAAe,GAAU,KAAK;EAE9C,SAAS,GAAgB,GAAwC;GAC/D,IAAI,OAAO,KAAU,aAAY,GAC/B,OAAO;GAET,IAAM,IAAI;GACV,OACE,OAAO,EAAE,cAAe,YACxB,OAAO,EAAE,SAAU,YACnB,EAAE,UAAU,QACZ,OAAO,EAAE,YAAa,YACtB,EAAE,aAAa;EAEnB;EAWA,AARA,SAAgB;GACd,IAAM,IAAO,EAAM;GACnB,AAAI,GAAgB,CAAI,KACtB,EAAQ,WAAW,CAAI;EAE3B,CAAC,GAGD,SACQ,EAAQ,OAAO,QACpB,MAAS;GACR,EAAM,QAAQ;EAChB,GACA,EAAE,MAAM,GAAK,CACf;EAEA,IAAM,IAAW,QACT,EAAQ,OAAO,MAAM,MAAM,EAAQ,OAAO,MAAM,WACxD,GAEM,IAAwB,QAAe,EAAQ,OAAO,MAAM,UAAU,GAGtE,IAA0B,QAAe,EAAa,SAAS,EAAsB,KAAK,GAG1F,IAAoB,QACxB,EAAa,QAAQ,EAAe,EAAa,KAAK,IAAI,EAAgB,KAC5E,GAEM,IAAkB,QAAyB;GAC/C,IAAM,IAAO,EAAS;GAItB,OAHK,IAGI,EAA4C,eAA4B,CAAC,IAFzE,CAAC;EAGZ,CAAC;EAGD,SAAS,EAAc,GAA4B;GACjD,IAAM,IAAK,EAAQ,OAAO,MAAM,SAAS;GAEzC,OADK,IACE,OAAQ,EAA0C,QAAQ,EAAE,EAAE,WAAW,OAAO,IADvE;EAElB;EAGA,SAAS,EAAe,GAA+B;GACrD,IAAM,IAAS,EAAQ,OAAO,OACxB,IAAO,EAAO,MAAM;GAC1B,IAAI,GAAM,OAAS,EAA4C,eAAwC,CAAC;GACxG,IAAM,IAAK,EAAO,SAAS;GAE3B,OADI,IAAa,EAA0C,eAAwC,CAAC,IAC7F,CAAC;EACV;EAMA,SAAS,GAAwB,GAAgC;GAC/D,IAAM,IAAK,EAAQ,OAAO,MAAM,SAAS;GACzC,IAAI,CAAC,EAAc,CAAS,GAAG,OAAO;GAGtC,IAAM,KADY,EAAI,eAAwC,CAAC,GAE5D,KAAK,MAAO,EAAQ,OAAO,MAAM,SAAS,EAAG,EAC7C,OAAO,OAAO;GACjB,OAAO;IAAE,GAAG;IAAI;GAAe;EACjC;EAEA,IAAM,KAAgB,QAElB,OAAO,QAAQ,EAAsB,EAMrC,KAAK,CAAC,GAAM,QAAW;GACvB;GACA;GACA,QAAQ,GAAqB;EAC/B,EAAE,CACJ,GAEM,IAAiB,GAAkC,CAAC,CAAC;EAE3D,SAAS,GAAY,GAAoB;GACvC,EAAe,KAAQ,CAAC,EAAe;EACzC;EAEA,IAAM,IAAkB,QAAmC;GACzD,IAAM,IAAM,EAAQ,UAAU;GAI9B,OAHI,EAAI,SAAS,aAAa,CAAC,EAAI,KAC1B,OAEF,EAAQ,OAAO,MAAM,SAAS,EAAI,OAAO;EAClD,CAAC,GAGK,IAAsB,QAAuB;GACjD,IAAM,IAAM,EAAQ,UAAU;GAE9B,IADI,EAAI,SAAS,aAAa,CAAC,EAAI,MAC/B,EAAgB,MAAM,SAAS,EAAI,EAAE,GAAG,OAAO,EAAsB;GACzE,KAAK,IAAM,CAAC,GAAM,MAAO,OAAO,QAAQ,EAAQ,OAAO,MAAM,QAAQ,GAAG;IACtE,IAAM,IAAM;IACZ,IAAI,OAAO,EAAI,QAAS,YAAa,EAAI,KAAgB,WAAW,OAAO,MACnE,EAAI,eAAwC,CAAC,GAAG,SAAS,EAAI,EAAE,GACnE,OAAO;GAGb;GACA,OAAO,EAAsB;EAC/B,CAAC,GAEK,KAAwB,QAAyB,EAAe,EAAoB,KAAK,CAAC,GAE1F,IAAgB,QAAuB;GAC3C,IAAM,IAAM,EAAQ,UAAU;GAE9B,OADI,EAAI,SAAS,aAAa,CAAC,EAAI,KAAW,KACvC,GAAsB,MAAM,QAAQ,EAAI,EAAE;EACnD,CAAC,GAEK,KAAc,QAAwB;GAC1C,IAAM,IAAO,GAAsB;GACnC,OAAO,EAAc,SAAS,KAAK,EAAc,QAAQ,EAAK,SAAS;EACzE,CAAC;EAED,SAAS,GAAa,GAA+C,GAAqB;GACxF,IAAM,IAAM,EAAQ,UAAU,OAE1B;GACJ,AAKE,IALE,EAAa,QACD,EAAa,QAClB,EAAI,SAAS,aAAa,EAAI,MAAM,EAAc,EAAI,EAAE,IACnD,EAAI,KAEJ,EAAQ,OAAO,MAAM;GAErC,IAAM,IAAQ,EAAQ,WAAW,GAAa,GAAG,EAAS,GAAG,GAAO;GACpE,EAAQ,OAAO,WAAW,CAAK;EACjC;EAEA,SAAS,EAAqB,GAAyB;GACrD,EAAQ,OAAO,WAAW,CAAS;EACrC;EAEA,SAAS,KAAiB;GACpB,EAAc,SAAS,KAC3B,EAAQ,eAAe,EAAoB,OAAO,EAAc,OAAO,EAAc,QAAQ,CAAC;EAChG;EAEA,SAAS,KAAmB;GACrB,GAAY,SACjB,EAAQ,eAAe,EAAoB,OAAO,EAAc,OAAO,EAAc,QAAQ,CAAC;EAChG;EAEA,SAAS,KAAiB;GACxB,IAAM,IAAM,EAAQ,UAAU;GAC9B,AAAI,EAAI,SAAS,aAAa,EAAI,KAChC,EAAQ,cAAc,EAAI,EAAE,IACnB,EAAI,SAAS,UAAU,EAAI,MACpC,EAAQ,WAAW,EAAI,EAAE;EAE7B;EAEA,SAAS,KAAyB;GAChC,EAAQ,OAAO,MAAM,IAAI;EAC3B;EAEA,SAAS,GAAc,GAAmC;GACxD,IAAM,IAAM,EAAQ,UAAU;GAC9B,AAAI,EAAI,SAAS,aAAa,EAAI,MAChC,EAAQ,cAAc,EAAI,IAAI,CAAK;EAEvC;EAQA,IAAM,KAAkB,QAAoE;GAC1F,IAAM,IAAK,EAAgB;GAC3B,IAAI,CAAC,GAAI,OAAO,CAAC;GAEjB,IAAM,IAAa,GAAqB,EAAG,IAAI;GAC/C,IAAI,CAAC,GAAY,OAAO,CAAC;GAEzB,IAAM,EAAE,aAAU,EAAiB,EAAG,IAAI,GACpC,IAAc;IAAE,GAAI;IAA2C;GAAM;GAE3E,OAAO,OAAO,QAAQ,CAAU,EAC7B,QAAQ,GAAG,OAAU;IACpB,IAAM,IAAK,EAAyB;IAKpC,OAHI,GAAG,WAAW,sBAAsB,KACpC,GAAG,WAAW,UAAU,KACxB,GAAG,WAAW,OAAO,IAAU,KAC5B,GAAa,GAAyB,CAAW;GAC1D,CAAC,EACA,KAAK,CAAC,GAAW,QAAW;IAAE;IAAiB;GAAwB,EAAE;EAC9E,CAAC;EAED,SAAS,EAAc,GAA4B;GACjD,IAAM,IAAK,EAAgB;GAK3B,OAHI,MAAc,WAAW,GAAI,OACxB,EAAiB,OAAO,EAAG,IAAI,CAAC,EAAE,QAEpC,IAAK,MAAc;EAC5B;EAEA,SAAS,EAAa,GAAmB,GAAsB;GAE7D,IAAI,MAAc,SAAS;IACzB,IAAM,IAAK,EAAgB;IAC3B,IAAI,CAAC,GAAI;IACT,IAAM,EAAE,gBAAa,EAAiB,EAAG,IAAI;IAC7C,GAAc,EAAE,MAAM,EAAgB,GAAU,OAAO,CAAK,CAAC,EAAE,CAAoC;IACnG;GACF;GACA,GAAc,GAAG,IAAY,EAAM,CAAyB;EAC9D;EAMA,IAAM,IAAW,EAAwB,IAAI,GAcvC,IAAa,EAA0B,IAAI,GAC3C,IAAkB,EAAmB,IAAI,GACzC,IAAkB,EAAmB,IAAI;EAG/C,SAAS,EAAW,GAA2B;GAE7C,IAAM,IADK,EAAQ,OAAO,MAAM,SAAS,IACxB;GACjB,OAAO,OAAO,KAAS,YAAY,KAAQ,KAAK,KAAQ,IAAI,IAAO;EACrE;EAEA,SAAS,GAAiB,GAA2C;GACnE,OAAO,EAAE,YAAY,QAAQ,EAAW,CAAS,IAAI;EACvD;EAEA,SAAS,GACP,GACA,GACA,GACA,GACA,GACM;GACN,IAAI,EAAM,WAAW,GAAG;GAGxB,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAQ,OAAO,WAAW,CAAS;GACnC,IAAM,IAAS,EAAM;GACrB,IAAI;IACF,EAAO,kBAAkB,EAAM,SAAS;GAC1C,QAAQ,CAER;GAkBA,AAjBA,EAAW,QAAQ;IACjB;IACA;IACA;IACA;IACA,cAAc,EAAM;IACpB,cAAc,EAAW,CAAS;IAClC,gBAAgB,EAAS,OAAO,sBAAsB,EAAE,SAAS;IACjE,WAAW,EAAM;IACjB,eAAe;GACjB,GACI,MAAS,cACX,EAAgB,QAAQ,GACxB,EAAgB,QAAQ,IAE1B,OAAO,iBAAiB,eAAe,EAAiB,GACxD,OAAO,iBAAiB,aAAa,CAAe,GACpD,OAAO,iBAAiB,iBAAiB,CAAe;EAC1D;EAEA,SAAS,GACP,GACA,GACA,GACA,GACM;GACN,GAAc,WAAW,GAAW,GAAa,GAAO,CAAK;EAC/D;EAEA,SAAS,GACP,GACA,GACM;GACN,GAAc,UAAU,GAAW,EAAsB,OAAO,IAAI,CAAK;EAC3E;EAEA,SAAS,GAAkB,GAA2B;GACpD,IAAM,IAAQ,EAAW;GACzB,IAAI,CAAC,GAAO;GAEZ,IAAI,EAAM,SAAS,UAAU;IAC3B,IAAM,IAAK,EAAM,UAAU,EAAM,cAC3B,KAAQ,EAAM,iBAAiB,IAAI,EAAM,iBAAiB,OAAO,GACjE,IAAW,KAAK,MAAM,IAAK,CAAI,GAC/B,IAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAM,eAAe,CAAQ,CAAC;IACtE,EAAQ,cAAc,EAAM,WAAW,EAAE,SAAS,EAAQ,CAAoC;IAC9F;GACF;GAEA,IAAM,IAAS,SAAS,iBAAiB,EAAM,SAAS,EAAM,OAAO;GACrE,IAAI,CAAC,GAAQ;GAGb,IAAM,IAAe,EAAuB,QAAQ,qBAAqB,GACnE,IAAO,GAAoC,QAAQ,eAAe;GACxE,EAAgB,QAAQ;GAGxB,IAAI,IAA2B,EAAuB,QAAQ,4BAA4B;GAK1F,IAHI,KAAW,KAAe,CAAC,EAAY,SAAS,CAAO,MACzD,IAAU,OAER,GAAS;IACX,IAAM,IAAM,OAAO,SAChB,EAAwB,QAAQ,qBAAqB,MACtD,EACF;IACA,AAAI,KAAO,MAAG,EAAgB,QAAQ;GACxC,OAEE,EAAgB,QAAQ,IAAM,EAAe,CAAG,EAAE,SAAS;EAE/D;EAEA,SAAS,EAAgB,GAA2B;GAClD,IAAM,IAAQ,EAAW;GACzB,IAAI,CAAC,GAAO;IACV,GAAgB;IAChB;GACF;GACA,IAAI;IACF,EAAM,cAAc,sBAAsB,EAAM,SAAS;GAC3D,QAAQ,CAER;GACA,IAAI,EAAM,SAAS,aAAa,EAAgB,UAAU,MAAM;IAC9D,IAAM,IAAkB,EAAgB,SAAS,EAAM;IACvD,AAAI,MAAoB,EAAM,kBAEnB,EAAgB,UAAU,EAAM,aACzC,EAAQ,eAAe,EAAM,iBAAiB,EAAM,WAAW,EAAgB,KAAK,IAFpF,EAAQ,YAAY,EAAM,iBAAiB,GAAiB,EAAM,WAAW,EAAgB,KAAK;GAItG;GACA,GAAgB;EAElB;EAEA,SAAS,KAAwB;GAM/B,AALA,EAAW,QAAQ,MACnB,EAAgB,QAAQ,MACxB,EAAgB,QAAQ,MACxB,OAAO,oBAAoB,eAAe,EAAiB,GAC3D,OAAO,oBAAoB,aAAa,CAAe,GACvD,OAAO,oBAAoB,iBAAiB,CAAe;EAC7D;EAEA,SAAsB;GACpB,GAAgB;EAClB,CAAC;EAED,IAAM,KAAmB,QACvB,EAAgB,QACZ,oBACA,gBACN;yBAIE,EAokBM,OAAA;GAnkBH,OAAK,EAAE,EAAA,EAAA,EAAE,yDAA0D,EAAM,SAAS,CAAA;GAClF,OAAK,EAAA;IAAA,qBAAyB,GAAA;IAAgB,WAAA;IAAA,YAAA;GAAA,CAAA;GAC/C,eAAY;GACX,qBAAmB,EAAM,QAAQ,KAAA;;GAElC,EAgDQ,SAhDR,IAgDQ,CA5CN,EAEK,MAFL,IAEK,EADA,EAAM,SAAK,iBAAA,GAAA,CAAA,GAEhB,EAwCM,OAxCN,IAwCM,EAAA,EAAA,EAAA,GAvCJ,EAsCM,GAAA,MAAA,EArCY,GAAA,QAAT,YADT,EAsCM,OAAA,EApCH,KAAK,EAAM,KAAA,GAAA,CAEZ,EAgBS,UAAA;IAfP,MAAK;IACL,OAAM;IACL,eAAW,wBAA0B,EAAM;IAC3C,UAAK,MAAE,GAAY,EAAM,IAAI;OAE9B,EAGE,EAAA,EAAA,GAAA,EAFA,OAAK,EAAA,CAAC,uFACE,EAAe,EAAM,QAAI,cAAA,EAAA,CAAA,EAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GAEnC,EAKO,QALP,IAKO,CAJL,EAA8D,QAA9D,IAA8D,EAAjC,EAAM,KAAK,YAAY,GAAA,CAAA,GACpD,EAEO,QAFP,IAEO,EADF,EAAM,KAAK,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,EAAA,GAMvB,EAAe,EAAM,SAAA,EAAA,GAD7B,EAeM,OAfN,IAeM,EAAA,EAAA,EAAA,GAXJ,EAUS,GAAA,MAAA,EATe,EAAM,SAArB,YADT,EAUS,UAAA;IARN,KAAK,EAAY;IAClB,MAAK;IACL,OAAM;IACL,eAAW,wBAA0B,EAAM,KAAI,GAAI,EAAY;IAC/D,UAAK,MAAE,GAAa,EAAM,MAAM,EAAY,KAAK;OAElD,EAAuD,EAAA,EAAA,GAAA,EAAjD,OAAM,yCAAwC,CAAA,GAAA,EAAG,MACvD,EAAG,EAAY,KAAK,GAAA,CAAA,CAAA,GAAA,GAAA,EAAA;GAO9B,EA6UU,WA7UV,IA6UU,CAzUR,EAsDS,UAtDT,IAsDS,CAnDC,EAAA,SAAA,EAAA,GADR,EAkBM,OAlBN,IAkBM;IAbJ,EAQS,UAAA;KAPP,MAAK;KACL,OAAM;KACN,eAAY;KACX,SAAO;QAER,EAAiC,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GAAA,AAAA,EAAA,QAC9B,EAAsB,QAAA,MAAhB,aAAS,EAAA,CAAA,CAAA;cAEjB,EAA+C,QAAA,EAAzC,OAAM,2BAA0B,GAAC,KAAC,EAAA;IACxC,EAEO,QAFP,IAEO,EADD,GAAA,OAAsD,SAAK,MAAA,GAAA,CAAA;oBAGnE,EAgCM,OAhCN,IAgCM,CA/BJ,EAEK,MAFL,IAEK,EADA,EAAA,UAAU,WAAA,WAA2B,EAAA,QAAQ,iBAAA,SAAA,GAAA,CAAA,GAElD,EA2BM,OA3BN,IA2BM,CAzBJ,EAqBM,OArBN,IAqBM,CApBJ,EASS,UAAA;IARP,MAAK;IACL,OAAK,EAAA,CAAC,2CACE,EAAA,UAAU,SAAA,qCAAA,6CAAA,CAAA;IAClB,OAAM;IACN,eAAY;IACX,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAU;OAElB,EAAkC,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,GAAA,CAAA,GAEjC,EASS,UAAA;IARP,MAAK;IACL,OAAK,EAAA,CAAC,2CACE,EAAA,UAAU,WAAA,qCAAA,6CAAA,CAAA;IAClB,OAAM;IACN,eAAY;IACX,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAU;OAElB,EAAkC,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAGnC,EAEQ,EAAA,CAAA,GAAA;IAFD,SAAQ;IAAU,OAAM;;qBAE/B,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAFuD,0BAEvD,EAAA,CAAA,CAAA,CAAA;;aAMU,EAAA,UAAU,UAAA,EAAA,GAA1B,EA2LW,GAAA,EAAA,KAAA,EAAA,GAAA,CAzLT,EA+BM,OA/BN,IA+BM,CA9BY,EAAA,SAAY,EAAA,SAAA,EAAA,GAA5B,EAcW,GAAA,EAAA,KAAA,EAAA,GAAA,EAAA,EAAA,GAbT,GAKW,IAAA,MAAA;qBADP,CAHF,EAGE,IAAA;KAFC,SAAS,GAAwB,EAAA,KAAY;KAC7C,MAAM,EAAM;;;QAIR,EAAA,MAAkB,SAK3B,EAAA,IAAA,EAAA,KAL2B,EAAA,GAD3B,EAMI,KANJ,IAIC,8CAED,EAAA,GAAA,EAAA,KAEmB,EAAA,SAAA,EAAA,GAArB,EAcW,GAAA,EAAA,KAAA,EAAA,GAAA,CAbT,EAKE,IAAA;IAJC,MAAM,EAAA;IACN,MAAM,EAAM;IACZ,UAAU,EAAA,CAAA,EAAQ,OAAO,MAAM;IAC/B,OAAO,EAAA,CAAA,EAAQ,OAAO,MAAM;;;;;;OAGvB,EAAA,MAAgB,WAAM,KAAA,EAAA,GAD9B,EAMI,KANJ,IAIC,8CAED,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,GAKJ,EAsJM,OAAA;aArJA;IAAJ,KAAI;IACJ,OAAM;IACN,OAAA,EAAA,yBAAA,4BAAA;IACC,qBAAmB,EAAA;IACpB,eAAY;OAGH,EAAA,MAAkB,SAI3B,EAAA,IAAA,EAAA,KAJ2B,EAAA,GAD3B,EAKI,KALJ,IAGC,kCAED,KAAA,EAAA,EAAA,GACA,EAwIM,GAAA,MAAA,EAvIoB,EAAA,QAAhB,GAAM,YADhB,EAwIM,OAAA;IAtIH,KAAK;IACL,4BAA0B;IAC1B,eAAW,oBAAsB;IAClC,OAAK,EAAA,CAAC,4FAA0F;KACxE,EAAc,CAAI,IAAA,mBAAA;KAAmE,EAAA,CAAA,EAAQ,UAAU,MAAM,SAAI,aAAkB,EAAA,CAAA,EAAQ,UAAU,MAAM,OAAO,IAAA,gCAAA;KAAgH,EAAA,OAAY,cAAc,KAAQ,EAAA,MAAW,SAAI,YAAA,mCAAA;KAAsG,EAAA,UAAoB,EAAA,SAAyC,EAAA,UAAoB,KAAuB,EAAA,OAAY,SAAI,aAAgC,EAAA,OAAY,cAAc,IAAA,wCAAA;;IAelnB,OAAK,EAAE,GAAiB,CAAI,CAAA;IAC5B,UAAK,MAAE,EAAqB,CAAI;;IAGjC,EAOO,QAAA;KANL,OAAM;KACN,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;KACV,eAAW,GAAQ,MAAoB,GAA2B,GAAM,EAAA,OAAyB,GAAO,CAAC,GAAA,CAAA,MAAA,CAAA;QAE1G,EAAwD,EAAA,CAAA,GAAA,EAAxC,OAAM,gCAA+B,CAAA,CAAA,GAAA,IAAA,EAAA;IAIvD,EAOO,QAAA;KANL,OAAM;KACL,OAAK,UAAY,EAAW,CAAI,EAAA;KAChC,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;KACV,eAAW,GAAQ,MAAoB,GAA0B,GAAM,CAAC,GAAA,CAAA,MAAA,CAAA;QAEzE,EAA2D,EAAA,CAAA,GAAA,EAAxC,OAAM,gCAA+B,CAAA,CAAA,GAAA,IAAA,EAAA;IAIzC,EAAc,CAAI,UAUnC,EAgFW,GAAA,EAAA,KAAA,EAAA,GAAA;KA9ET,EASS,UAAA;MARP,MAAK;MACL,OAAK,EAAA,CAAC,+MAA6M,EAAA,gBACzL,EAAA,CAAA,EAAQ,UAAU,MAAM,SAAI,aAAkB,EAAA,CAAA,EAAQ,UAAU,MAAM,OAAO,EAAI,CAAA,CAAA;MAC3G,OAAM;MACN,eAAY;MACX,SAAK,GAAA,MAAO,GAAS,CAAI,GAAA,CAAA,MAAA,CAAA;SAE1B,EAA6B,EAAA,EAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,GAAA,IAAA,EAAA;KAE5B,EAOM,OAAA,MAAA,CANJ,EAEO,QAFP,IAEO,EADF,EAAA,CAAA,EAAQ,OAAO,MAAM,SAAS,IAAO,SAAK,WAAA,GAAA,CAAA,GAE/C,EAEQ,EAAA,CAAA,GAAA;MAFD,SAAQ;MAAU,OAAM;;uBACkB,CAAA,EAAA,EAA5C,EAAA,CAAA,EAAQ,OAAO,MAAM,SAAS,IAAO,IAAI,GAAA,CAAA,CAAA,CAAA;;;KAIhD,EA0DM,OAAA;MAzDJ,OAAM;MACN,OAAA,EAAA,yBAAA,4BAAA;MACC,qBAAmB;MACnB,SAAK,GAAA,MAAO,EAAqB,CAAI,GAAA,CAAA,MAAA,CAAA;SAG7B,EAAe,CAAI,EAAE,SAI9B,EAAA,IAAA,EAAA,KAJ8B,EAAA,GAD9B,EAKI,KALJ,IAGC,gDAED,KAAA,EAAA,EAAA,GACA,EA6CM,GAAA,MAAA,EA5C0B,EAAe,CAAI,IAAzC,GAAS,YADnB,EA6CM,OAAA;MA3CH,KAAK;MACL,4BAA0B;MAC1B,eAAW,oBAAsB;MAClC,OAAK,EAAA,CAAC,2IAAyI;OACjH,EAAA,CAAA,EAAQ,UAAU,MAAM,SAAI,aAAkB,EAAA,CAAA,EAAQ,UAAU,MAAM,OAAO,IAAA,gCAAA;OAAqI,EAAA,OAAY,cAAc,KAAW,EAAA,MAAW,SAAI,YAAA,mCAAA;OAAwH,EAAA,UAAoB,KAA4B,EAAA,UAAoB,KAAgC,EAAA,OAAY,SAAI,aAAsC,EAAA,OAAY,cAAc,IAAA,wCAAA;;MAc/kB,OAAK,EAAE,GAAiB,CAAO,CAAA;MAC/B,SAAK,GAAA,MAAO,EAAqB,CAAO,GAAA,CAAA,MAAA,CAAA;;MAEzC,EAOO,QAAA;OANL,OAAM;OACN,OAAM;OACL,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;OACV,eAAW,GAAQ,MAAoB,GAA2B,GAAS,GAAM,GAAU,CAAC,GAAA,CAAA,MAAA,CAAA;UAE7F,EAAwD,EAAA,CAAA,GAAA,EAAxC,OAAM,gCAA+B,CAAA,CAAA,GAAA,IAAA,EAAA;MAEvD,EAOO,QAAA;OANL,OAAM;OACL,OAAK,UAAY,EAAW,CAAO,EAAA;OACnC,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;OACV,eAAW,GAAQ,MAAoB,GAA0B,GAAS,CAAC,GAAA,CAAA,MAAA,CAAA;UAE5E,EAA2D,EAAA,CAAA,GAAA,EAAxC,OAAM,gCAA+B,CAAA,CAAA,GAAA,IAAA,EAAA;MAE1D,EAEO,QAFP,IAEO,EADF,EAAA,CAAA,EAAQ,OAAO,MAAM,SAAS,IAAU,SAAK,WAAA,GAAA,CAAA;MAElD,EAEQ,EAAA,CAAA,GAAA;OAFD,SAAQ;OAAY,OAAM;;wBACmB,CAAA,EAAA,EAA/C,EAAA,CAAA,EAAQ,OAAO,MAAM,SAAS,IAAU,IAAI,GAAA,CAAA,CAAA,CAAA;;;;eAtFpB,EAAA,GAAnC,EAOW,GAAA,EAAA,KAAA,EAAA,GAAA,CANT,EAEO,QAFP,IAEO,EADF,EAAA,CAAA,EAAQ,OAAO,MAAM,SAAS,IAAO,SAAK,WAAA,GAAA,CAAA,GAE/C,EAEQ,EAAA,CAAA,GAAA;KAFD,SAAQ;KAAY,OAAM;;sBACgB,CAAA,EAAA,EAA5C,EAAA,CAAA,EAAQ,OAAO,MAAM,SAAS,IAAO,IAAI,GAAA,CAAA,CAAA,CAAA;;;+CA4FpD,EA+EM,OA/EN,IA+EM,CA7EI,EAAA,MAAkB,WAAM,KAAA,EAAA,GADhC,EAMI,KANJ,IAIC,8CAED,MAAA,EAAA,GACA,EAsEM,OAAA;;aApEA;IAAJ,KAAI;IACJ,OAAM;IACN,OAAA,EAAA,yBAAA,4BAAA;IACC,qBAAmB,EAAA;IACpB,eAAY;eAEZ,EA6DM,GAAA,MAAA,EA5DoB,EAAA,QAAhB,GAAM,YADhB,EA6DM,OAAA;IA3DH,KAAK;IACL,4BAA0B;IAC1B,eAAW,oBAAsB;IAClC,OAAK,EAAA,CAAC,qFAAmF;KAC/D,EAAA,CAAA,EAAQ,UAAU,MAAM,SAAI,aAAkB,EAAA,CAAA,EAAQ,UAAU,MAAM,OAAO,IAAA,0CAAA;KAAmJ,EAAA,OAAY,cAAc,KAAQ,EAAA,MAAW,SAAI,YAAA,mCAAA;KAA4G,EAAA,UAAoB,EAAA,SAA2C,EAAA,UAAoB,KAAyB,EAAA,OAAY,SAAI,aAAkC,EAAA,OAAY,cAAc,IAAA,wCAAA;;IAc9kB,OAAK,EAAE,GAAiB,CAAI,CAAA;IAC5B,UAAK,MAAE,EAAqB,CAAI;;IAGjC,EAOO,QAAA;KANL,OAAM;KACN,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;KACV,eAAW,GAAQ,MAAoB,GAA2B,GAAM,EAAA,OAAyB,GAAO,CAAC,GAAA,CAAA,MAAA,CAAA;QAE1G,EAAwD,EAAA,CAAA,GAAA,EAAxC,OAAM,gCAA+B,CAAA,CAAA,GAAA,IAAA,EAAA;IAIvD,EAOO,QAAA;KANL,OAAM;KACL,OAAK,UAAY,EAAW,CAAI,EAAA;KAChC,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;KACV,eAAW,GAAQ,MAAoB,GAA0B,GAAM,CAAC,GAAA,CAAA,MAAA,CAAA;QAEzE,EAA2D,EAAA,CAAA,GAAA,EAAxC,OAAM,gCAA+B,CAAA,CAAA,GAAA,IAAA,EAAA;IAKlD,EAAc,CAAI,KAAA,EAAA,GAD1B,EAUS,UAAA;;KARP,MAAK;KACL,OAAK,EAAA,CAAC,2MAAyM,EAAA,gBACrL,EAAA,CAAA,EAAQ,UAAU,MAAM,SAAI,aAAkB,EAAA,CAAA,EAAQ,UAAU,MAAM,OAAO,EAAI,CAAA,CAAA;KAC3G,OAAM;KACN,eAAY;KACX,SAAK,GAAA,MAAO,GAAS,CAAI,GAAA,CAAA,MAAA,CAAA;QAE1B,EAAiC,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,GAAA,IAAA,EAAA,KAAA,EAAA,IAAA,EAAA;IAIhC,EAGE,IAAA;KAFC,SAAS,GAAwB,CAAI;KACrC,MAAM,EAAM;;;GAUhB,EAAA,cAwBT,EAkKQ,SAlKR,IAkKQ,CA7JN,EAYS,UAZT,IAYS,CAAA,AAAA,EAAA,QAXP,EAEK,MAAA,EAFD,OAAM,sEAAqE,GAAC,eAEhF,EAAA,GACA,EAOS,EAAA,CAAA,GAAA;IANP,SAAQ;IACR,MAAK;IACL,cAAW;IACV,SAAO;;qBAEiB,CAAzB,EAAyB,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,CAAA;;SAI1B,EA8IM,OA9IN,IA8IM,CA1IJ,EA0GO,EAAA,EAAA,GAAA,EA1GD,OAAM,gBAAe,GAAA;qBAKZ,CAJb,EAIa,EAAA,EAAA,GAAA,EAJD,OAAM,OAAM,GAAA;sBAGV,CAFZ,EAEY,EAAA,EAAA,GAAA,EAFD,OAAM,4CAA2C,GAAA;uBAChC,CAAA,EAAA,EAAvB,EAAA,MAAgB,IAAI,GAAA,CAAA,CAAA,CAAA;;;;QAG3B,EAmGc,EAAA,EAAA,GAAA,EAnGD,OAAM,2BAA0B,GAAA;sBAET;cADlC,EA4EW,GAAA,MAAA,EA3EO,GAAA,QAAT,wBACD,EAAM,UAAA,GAAA,CAIJ,EAAM,KAAK,MAAM,SAAQ,EAAG,WAAU,UAAA,KAAA,EAAA,GAD9C,EAaM,OAbN,IAaM,CATJ,EAEQ,EAAA,CAAA,GAAA;OAFA,KAAG,MAAQ,EAAM;OAAa,OAAM;;wBACD,CAAA,EAAA,EAAtC,EAAM,KAAK,SAAS,EAAM,SAAS,GAAA,CAAA,CAAA,CAAA;;yBAExC,EAKE,EAAA,EAAA,GAAA;OAJC,IAAE,MAAQ,EAAM;OAChB,eAAa,EAAQ,EAAc,EAAM,SAAS;OAClD,eAAW,0BAA4B,EAAM;OAC7C,wBAAqB,MAAe,EAAa,EAAM,WAAW,CAAC;;;;;;cAM3D,EAAM,KAAK,MAAM,SAAQ,EAAG,WAAU,gBAAA,KAAA,EAAA,GADnD,EAsBM,OAtBN,IAsBM,CAlBJ,EAEQ,EAAA,CAAA,GAAA,EAFA,KAAG,MAAQ,EAAM,YAAA,GAAA;wBACkB,CAAA,EAAA,EAAtC,EAAM,KAAK,SAAS,EAAM,SAAS,GAAA,CAAA,CAAA,CAAA;;yBAExC,EAcS,UAAA;OAbN,IAAE,MAAQ,EAAM;OACjB,OAAM;OACL,OAAO,OAAO,EAAc,EAAM,SAAS,KAAA,EAAA;OAC3C,eAAW,0BAA4B,EAAM;OAC7C,WAAS,MAAa,EAAa,EAAM,WAAY,EAAE,OAA6B,KAAK;kBAE1F,EAMS,GAAA,MAAA,EALQ,EAAM,KAAK,iBAAa,CAAA,IAAhC,YADT,EAMS,UAAA;OAJN,KAAK,EAAI;OACT,OAAO,EAAI;WAET,EAAI,KAAK,GAAA,GAAA,EAAA,0BAOL,EAAM,KAAK,SAAI,oBAAA,EAAA,GAD5B,EAaM,OAbN,IAaM,CATJ,EAEQ,EAAA,CAAA,GAAA,EAFA,KAAG,MAAQ,EAAM,YAAA,GAAA;wBACkB,CAAA,EAAA,EAAtC,EAAM,KAAK,SAAS,EAAM,SAAS,GAAA,CAAA,CAAA,CAAA;;yBAExC,EAKE,EAAA,EAAA,GAAA;OAJC,IAAE,MAAQ,EAAM;OAChB,eAAa,OAAO,EAAc,EAAM,SAAS,KAAA,EAAA;OACjD,eAAW,0BAA4B,EAAM;OAC7C,UAAQ,MAAa,EAAa,EAAM,WAAY,EAAE,OAA+B,KAAK;;;;;;oBAK/F,EAaM,OAbN,IAaM,CATJ,EAEQ,EAAA,CAAA,GAAA,EAFA,KAAG,MAAQ,EAAM,YAAA,GAAA;wBACkB,CAAA,EAAA,EAAtC,EAAM,KAAK,SAAS,EAAM,SAAS,GAAA,CAAA,CAAA,CAAA;;yBAExC,EAKE,EAAA,EAAA,GAAA;OAJC,IAAE,MAAQ,EAAM;OAChB,eAAa,OAAO,EAAc,EAAM,SAAS,KAAA,EAAA;OACjD,eAAW,0BAA4B,EAAM;OAC7C,UAAQ,MAAa,EAAa,EAAM,WAAY,EAAE,OAA4B,KAAK;;;;;;;MAK7E,GAAA,MAAgB,UAAA,EAAA,GAAjC,GAAwD,EAAA,EAAA,GAAA;;OAAf,OAAM;;MAG/C,EAQM,OARN,IAQM,CAPJ,EAAsC,EAAA,CAAA,GAAA,EAA/B,KAAI,UAAS,GAAA;wBAAU,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAT,aAAS,EAAA,CAAA,CAAA,CAAA;;UAC9B,EAKE,EAAA,EAAA,GAAA;OAJA,IAAG;OACF,eAAa,OAAO,EAAa,UAAA,KAAA,EAAA;OAClC,eAAY;OACX,SAAK,AAAA,EAAA,QAAG,MAAa,EAAY,YAAc,EAAE,OAA+B,KAAK;;MAG1F,EAOM,OAPN,IAOM,CANJ,EAAyC,EAAA,CAAA,GAAA,EAAlC,KAAI,cAAa,GAAA;wBAAS,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAR,YAAQ,EAAA,CAAA,CAAA,CAAA;;UACjC,EAIE,EAAA,EAAA,GAAA;OAHA,IAAG;OACF,eAAa,EAAQ,EAAa,UAAA;OAClC,uBAAkB,AAAA,EAAA,QAAG,MAAe,EAAY,YAAa,CAAC;;;;;;OAMvE,EA6BM,OA7BN,IA6BM;IA5BJ,EAQS,EAAA,CAAA,GAAA;KAPP,SAAQ;KACR,MAAK;KACJ,UAAU,EAAA,SAAa;KACxB,eAAY;KACX,SAAO;;sBAEuB,CAA/B,EAA+B,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,CAAA;;;IAE9B,EAQS,EAAA,CAAA,GAAA;KAPP,SAAQ;KACR,MAAK;KACJ,UAAQ,CAAG,GAAA;KACZ,eAAY;KACX,SAAO;;sBAEyB,CAAjC,EAAiC,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,CAAA;;;IAEhC,EASS,EAAA,CAAA,GAAA;KARP,SAAQ;KACR,MAAK;KACL,OAAM;KACN,eAAY;KACX,SAAO;;sBAEsB,CAA9B,EAA8B,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GAAA,AAAA,EAAA,QAAA,EAAG,YAEhC,EAAA,CAAA,CAAA;;;cAvLG,EAAA,GADT,EAsBQ,SAtBR,IAsBQ,CAjBN,EAgBkB,EAAA,CAAA,GAAA,MAAA;qBADN,CAdV,EAcU,EAAA,CAAA,GAAA,MAAA;sBAJS,CATjB,EASiB,EAAA,CAAA,GAAA,EATD,YAAA,GAAQ,GAAA;uBAQf,CAPP,EAOO,QAPP,IAOO,CADL,EAAwB,EAAA,EAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA;;SAGzB,EAEiB,EAAA,EAAA,GAAA,EAFD,MAAK,OAAM,GAAA;uBAE3B,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAF4B,4DAE5B,EAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/GitCodeEditor-CQnTM-xQ.js

@@ -0,0 +1,244 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./button-BAwcISlK.js";
+import { o as ee, r as te, s as r } from "./card-DAfWnvro.js";
+import { t as i } from "./input-tw5ZQGKQ.js";
+import { l as a, n as o, s, t as c, u as l } from "./select-DZcdBLiy.js";
+import { t as ne } from "./textarea-lgNOfYRH.js";
+import { t as re } from "./field-frame-n5oLDNBT.js";
+import { Fragment as ie, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, onMounted as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, watch as T, withCtx as E } from "vue";
+import { GitBranch as ae, Loader2 as D, Save as oe } from "@lucide/vue";
+//#region src/components/compositions/elements/code/GitCodeEditor.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "flex flex-wrap items-center gap-2" }, k = {
+	key: 0,
+	class: "flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground",
+	"data-testid": "git-code-editor-repository"
+}, A = {
+	class: "min-w-40",
+	"data-testid": "git-code-editor-branch-wrapper"
+}, j = {
+	key: 0,
+	class: "text-[10px] uppercase tracking-wide text-muted-foreground",
+	"data-testid": "git-code-editor-language"
+}, M = {
+	key: 0,
+	class: "flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground",
+	"data-testid": "git-code-editor-loading"
+}, N = /* @__PURE__ */ _({
+	__name: "GitCodeEditor",
+	props: {
+		repository: {},
+		branch: {},
+		path: {},
+		modelValue: {},
+		onLoadBranches: {},
+		onLoadFile: {},
+		onSaveFile: {},
+		language: { default: "plaintext" },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		label: { default: "Git Code Editor" },
+		hideLabel: { type: Boolean },
+		name: {},
+		id: {},
+		helpText: {},
+		errors: { default: () => [] },
+		classList: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:branch",
+		"update:path",
+		"update:language"
+	],
+	setup(e, { expose: _, emit: N }) {
+		let P = e, F = N, I = x(P.modelValue ?? ""), L = x(P.branch ?? ""), R = x(P.path ?? ""), z = x(P.language ?? "plaintext");
+		T(() => P.modelValue, (e) => {
+			e !== void 0 && e !== I.value && (I.value = e);
+		}), T(() => P.branch, (e) => {
+			e !== void 0 && e !== L.value && (L.value = e);
+		}), T(() => P.path, (e) => {
+			e !== void 0 && e !== R.value && (R.value = e);
+		}), T(() => P.language, (e) => {
+			e !== void 0 && e !== z.value && (z.value = e);
+		});
+		function B(e) {
+			let t = e ?? "";
+			I.value = t, F("update:modelValue", t);
+		}
+		function V(e) {
+			L.value = e, F("update:branch", e);
+		}
+		function H(e) {
+			let t = e === void 0 ? "" : String(e);
+			R.value = t, F("update:path", t);
+		}
+		let U = x([]), W = x(!1), G = x(null);
+		async function K() {
+			if (P.onLoadBranches) {
+				W.value = !0, G.value = null;
+				try {
+					let e = await P.onLoadBranches();
+					U.value = Array.isArray(e) ? e : [];
+				} catch (e) {
+					G.value = e instanceof Error ? e.message : String(e), U.value = [];
+				} finally {
+					W.value = !1;
+				}
+			}
+		}
+		let q = x(!1), J = x(null), Y = 0;
+		async function X() {
+			if (!P.onLoadFile || !R.value || !L.value) return;
+			let e = ++Y;
+			q.value = !0, J.value = null;
+			try {
+				let t = await P.onLoadFile(R.value, L.value);
+				if (e !== Y) return;
+				let n = t?.content ?? "";
+				I.value = n, F("update:modelValue", n), t?.language && (z.value = t.language, F("update:language", t.language));
+			} catch (t) {
+				if (e !== Y) return;
+				J.value = t instanceof Error ? t.message : String(t);
+			} finally {
+				e === Y && (q.value = !1);
+			}
+		}
+		T([L, R], () => {
+			X();
+		});
+		let Z = x(!1), Q = x(null);
+		async function $() {
+			if (P.onSaveFile && !(!R.value || !L.value)) {
+				Z.value = !0, Q.value = null;
+				try {
+					await P.onSaveFile(R.value, L.value, I.value);
+				} catch (e) {
+					Q.value = e instanceof Error ? e.message : String(e);
+				} finally {
+					Z.value = !1;
+				}
+			}
+		}
+		let se = u(() => {
+			let e = new Set(U.value);
+			return L.value && e.add(L.value), Array.from(e);
+		}), ce = u(() => {
+			let e = [...P.errors ?? []];
+			return J.value && e.push(J.value), Q.value && e.push(Q.value), e;
+		}), le = u(() => !!P.onSaveFile);
+		return y(() => {
+			K(), X();
+		}), _({
+			reload: X,
+			save: $
+		}), (u, _) => (b(), d(w(re), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: ce.value,
+			class: v(w(t)(P.classList))
+		}, {
+			default: E(() => [g(w(r), {
+				"data-element-name": P.name ?? void 0,
+				"data-testid": "git-code-editor"
+			}, {
+				default: E(() => [g(w(te), { class: "flex flex-col gap-2 border-b py-3" }, {
+					default: E(() => [m("div", O, [
+						P.repository ? (b(), p("div", k, [g(w(ae), { class: "size-3.5" }), m("span", null, C(P.repository), 1)])) : f("", !0),
+						m("div", A, [g(w(l), {
+							"model-value": L.value,
+							disabled: e.disabled || e.readonly || W.value,
+							"onUpdate:modelValue": _[0] ||= (e) => V(String(e ?? ""))
+						}, {
+							default: E(() => [g(w(o), {
+								"data-testid": "git-code-editor-branch-trigger",
+								"aria-label": "Branch"
+							}, {
+								default: E(() => [g(w(c), { placeholder: "Select branch" })]),
+								_: 1
+							}), g(w(a), null, {
+								default: E(() => [(b(!0), p(ie, null, S(se.value, (e) => (b(), d(w(s), {
+									key: e,
+									value: e,
+									"data-testid": `git-code-editor-branch-${e}`
+								}, {
+									default: E(() => [h(C(e), 1)]),
+									_: 2
+								}, 1032, ["value", "data-testid"]))), 128))]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["model-value", "disabled"])]),
+						g(w(i), {
+							"model-value": R.value,
+							placeholder: "path/to/file",
+							class: "flex-1 min-w-48",
+							disabled: e.disabled || e.readonly,
+							"data-testid": "git-code-editor-path-input",
+							"onUpdate:modelValue": H
+						}, null, 8, ["model-value", "disabled"]),
+						le.value ? (b(), d(w(n), {
+							key: 1,
+							type: "button",
+							variant: "default",
+							size: "sm",
+							disabled: Z.value || e.disabled || e.readonly || !R.value || !L.value,
+							"data-testid": "git-code-editor-save",
+							onClick: $
+						}, {
+							default: E(() => [Z.value ? (b(), d(w(D), {
+								key: 0,
+								class: "size-4 animate-spin"
+							})) : (b(), d(w(oe), {
+								key: 1,
+								class: "size-4"
+							})), m("span", null, C(Z.value ? "Saving…" : "Save"), 1)]),
+							_: 1
+						}, 8, ["disabled"])) : f("", !0)
+					]), z.value ? (b(), p("p", j, C(z.value), 1)) : f("", !0)]),
+					_: 1
+				}), g(w(ee), { class: "p-0" }, {
+					default: E(() => [q.value ? (b(), p("div", M, [g(w(D), { class: "size-4 animate-spin" }), _[1] ||= m("span", null, "Loading file…", -1)])) : f("", !0), g(w(ne), {
+						id: e.id,
+						"model-value": I.value,
+						readonly: e.readonly || q.value,
+						disabled: e.disabled,
+						required: e.required,
+						rows: 16,
+						spellcheck: "false",
+						class: "min-h-64 rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0",
+						"data-element-name": P.name ?? void 0,
+						"data-testid": "git-code-editor-textarea",
+						"onUpdate:modelValue": B
+					}, null, 8, [
+						"id",
+						"model-value",
+						"readonly",
+						"disabled",
+						"required",
+						"data-element-name"
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["data-element-name"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors",
+			"class"
+		]));
+	}
+}), P = /* @__PURE__ */ e({ default: () => F }), F = N;
+//#endregion
+export { P as n, F as t };
+
+//# sourceMappingURL=GitCodeEditor-CQnTM-xQ.js.map

package/dist/chunks/GitCodeEditor-CQnTM-xQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GitCodeEditor-CQnTM-xQ.js","names":[],"sources":["../../src/components/compositions/elements/code/GitCodeEditor.vue","../../src/components/compositions/elements/code/GitCodeEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven git code editor composition. Wraps a textarea editor\n * with a branch switcher, file-path input, and a save button. The\n * composition makes no HTTP calls — the consumer supplies Promise-\n * returning callbacks for loading branches, loading a file, and\n * (optionally) saving it.\n *\n *   <GitCodeEditor\n *     repository=\"gramercy/plugins\"\n *     v-model:branch=\"branch\"\n *     v-model:path=\"path\"\n *     v-model=\"content\"\n *     :on-load-branches=\"loadBranches\"\n *     :on-load-file=\"loadFile\"\n *     :on-save-file=\"saveFile\"\n *   />\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { GitBranch, Loader2, Save } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GitCodeEditorLoadedFile {\n  content: string\n  language?: string\n}\n\nexport interface GitCodeEditorProps {\n  /** Repository identifier (display only). */\n  repository?: string\n  /** Current branch (v-modelable). */\n  branch?: string\n  /** Current file path (v-modelable). */\n  path?: string\n  /** File content (v-modelable via modelValue). */\n  modelValue?: string\n  /** Lists the branches for the branch selector. */\n  onLoadBranches?: () => Promise<string[]>\n  /** REQUIRED loader for the current (path, branch). */\n  onLoadFile?: (\n    path: string,\n    branch: string,\n  ) => Promise<GitCodeEditorLoadedFile>\n  /** Optional save callback. When omitted, the save button is hidden. */\n  onSaveFile?: (path: string, branch: string, content: string) => Promise<void>\n  /** Syntax hint. Default plaintext; overridden by `onLoadFile`'s response. */\n  language?: string\n  readonly?: boolean\n  disabled?: boolean\n  required?: boolean\n  label?: string\n  hideLabel?: boolean\n  name?: string | null\n  id?: string\n  helpText?: string\n  errors?: string[]\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<GitCodeEditorProps>(), {\n  errors: () => [],\n  language: \"plaintext\",\n  label: \"Git Code Editor\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string]\n  \"update:branch\": [value: string]\n  \"update:path\": [value: string]\n  \"update:language\": [value: string]\n}>()\n\nconst content = ref<string>(props.modelValue ?? \"\")\nconst branchRef = ref<string>(props.branch ?? \"\")\nconst pathRef = ref<string>(props.path ?? \"\")\nconst languageRef = ref<string>(props.language ?? \"plaintext\")\n\nwatch(\n  () => props.modelValue,\n  (next) => {\n    if (next !== undefined && next !== content.value) {\n      content.value = next\n    }\n  },\n)\nwatch(\n  () => props.branch,\n  (next) => {\n    if (next !== undefined && next !== branchRef.value) {\n      branchRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.path,\n  (next) => {\n    if (next !== undefined && next !== pathRef.value) {\n      pathRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.language,\n  (next) => {\n    if (next !== undefined && next !== languageRef.value) {\n      languageRef.value = next\n    }\n  },\n)\n\nfunction updateContent(next: string | undefined): void {\n  const value = next ?? \"\"\n  content.value = value\n  emit(\"update:modelValue\", value)\n}\n\nfunction updateBranch(next: string): void {\n  branchRef.value = next\n  emit(\"update:branch\", next)\n}\n\nfunction updatePath(next: string | number | undefined): void {\n  const v = next === undefined ? \"\" : String(next)\n  pathRef.value = v\n  emit(\"update:path\", v)\n}\n\n// --- branches loader -------------------------------------------------\nconst branches = ref<string[]>([])\nconst branchesLoading = ref<boolean>(false)\nconst branchesError = ref<string | null>(null)\n\nasync function loadBranches(): Promise<void> {\n  if (!props.onLoadBranches) {\n    return\n  }\n  branchesLoading.value = true\n  branchesError.value = null\n  try {\n    const next = await props.onLoadBranches()\n    branches.value = Array.isArray(next) ? next : []\n  } catch (err) {\n    branchesError.value = err instanceof Error ? err.message : String(err)\n    branches.value = []\n  } finally {\n    branchesLoading.value = false\n  }\n}\n\n// --- file loader -----------------------------------------------------\nconst fileLoading = ref<boolean>(false)\nconst fileError = ref<string | null>(null)\nlet fileToken = 0\n\nasync function loadFile(): Promise<void> {\n  if (!props.onLoadFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  const myToken = ++fileToken\n  fileLoading.value = true\n  fileError.value = null\n  try {\n    const result = await props.onLoadFile(pathRef.value, branchRef.value)\n    if (myToken !== fileToken) {\n      return\n    }\n    const next = result?.content ?? \"\"\n    content.value = next\n    emit(\"update:modelValue\", next)\n    if (result?.language) {\n      languageRef.value = result.language\n      emit(\"update:language\", result.language)\n    }\n  } catch (err) {\n    if (myToken !== fileToken) {\n      return\n    }\n    fileError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    if (myToken === fileToken) {\n      fileLoading.value = false\n    }\n  }\n}\n\nwatch([branchRef, pathRef], () => {\n  void loadFile()\n})\n\n// --- save ------------------------------------------------------------\nconst saving = ref<boolean>(false)\nconst saveError = ref<string | null>(null)\n\nasync function save(): Promise<void> {\n  if (!props.onSaveFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  saving.value = true\n  saveError.value = null\n  try {\n    await props.onSaveFile(pathRef.value, branchRef.value, content.value)\n  } catch (err) {\n    saveError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    saving.value = false\n  }\n}\n\nconst branchOptions = computed<string[]>(() => {\n  const all = new Set(branches.value)\n  if (branchRef.value) {\n    all.add(branchRef.value)\n  }\n  return Array.from(all)\n})\n\nconst allErrors = computed<string[]>(() => {\n  const out = [...(props.errors ?? [])]\n  if (fileError.value) {\n    out.push(fileError.value)\n  }\n  if (saveError.value) {\n    out.push(saveError.value)\n  }\n  return out\n})\n\nconst showSave = computed<boolean>(() => Boolean(props.onSaveFile))\n\nonMounted(() => {\n  void loadBranches()\n  void loadFile()\n})\n\ndefineExpose({ reload: loadFile, save })\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n    :class=\"cn(props.classList)\"\n  >\n    <Card\n      :data-element-name=\"props.name ?? undefined\"\n      data-testid=\"git-code-editor\"\n    >\n      <CardHeader class=\"flex flex-col gap-2 border-b py-3\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <div\n            v-if=\"props.repository\"\n            class=\"flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground\"\n            data-testid=\"git-code-editor-repository\"\n          >\n            <GitBranch class=\"size-3.5\" />\n            <span>{{ props.repository }}</span>\n          </div>\n\n          <div class=\"min-w-40\" data-testid=\"git-code-editor-branch-wrapper\">\n            <Select\n              :model-value=\"branchRef\"\n              :disabled=\"disabled || readonly || branchesLoading\"\n              @update:model-value=\"(v) => updateBranch(String(v ?? ''))\"\n            >\n              <SelectTrigger\n                data-testid=\"git-code-editor-branch-trigger\"\n                :aria-label=\"'Branch'\"\n              >\n                <SelectValue placeholder=\"Select branch\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem\n                  v-for=\"b in branchOptions\"\n                  :key=\"b\"\n                  :value=\"b\"\n                  :data-testid=\"`git-code-editor-branch-${b}`\"\n                >\n                  {{ b }}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <Input\n            :model-value=\"pathRef\"\n            placeholder=\"path/to/file\"\n            class=\"flex-1 min-w-48\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"git-code-editor-path-input\"\n            @update:model-value=\"updatePath\"\n          />\n\n          <Button\n            v-if=\"showSave\"\n            type=\"button\"\n            variant=\"default\"\n            size=\"sm\"\n            :disabled=\"\n              saving || disabled || readonly || !pathRef || !branchRef\n            \"\n            data-testid=\"git-code-editor-save\"\n            @click=\"save\"\n          >\n            <Loader2 v-if=\"saving\" class=\"size-4 animate-spin\" />\n            <Save v-else class=\"size-4\" />\n            <span>{{ saving ? \"Saving…\" : \"Save\" }}</span>\n          </Button>\n        </div>\n        <p\n          v-if=\"languageRef\"\n          class=\"text-[10px] uppercase tracking-wide text-muted-foreground\"\n          data-testid=\"git-code-editor-language\"\n        >\n          {{ languageRef }}\n        </p>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div\n          v-if=\"fileLoading\"\n          class=\"flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground\"\n          data-testid=\"git-code-editor-loading\"\n        >\n          <Loader2 class=\"size-4 animate-spin\" />\n          <span>Loading file…</span>\n        </div>\n        <Textarea\n          :id=\"id\"\n          :model-value=\"content\"\n          :readonly=\"readonly || fileLoading\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :rows=\"16\"\n          spellcheck=\"false\"\n          class=\"min-h-64 rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0\"\n          :data-element-name=\"props.name ?? undefined\"\n          data-testid=\"git-code-editor-textarea\"\n          @update:model-value=\"updateContent\"\n        />\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven git code editor composition. Wraps a textarea editor\n * with a branch switcher, file-path input, and a save button. The\n * composition makes no HTTP calls — the consumer supplies Promise-\n * returning callbacks for loading branches, loading a file, and\n * (optionally) saving it.\n *\n *   <GitCodeEditor\n *     repository=\"gramercy/plugins\"\n *     v-model:branch=\"branch\"\n *     v-model:path=\"path\"\n *     v-model=\"content\"\n *     :on-load-branches=\"loadBranches\"\n *     :on-load-file=\"loadFile\"\n *     :on-save-file=\"saveFile\"\n *   />\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { GitBranch, Loader2, Save } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GitCodeEditorLoadedFile {\n  content: string\n  language?: string\n}\n\nexport interface GitCodeEditorProps {\n  /** Repository identifier (display only). */\n  repository?: string\n  /** Current branch (v-modelable). */\n  branch?: string\n  /** Current file path (v-modelable). */\n  path?: string\n  /** File content (v-modelable via modelValue). */\n  modelValue?: string\n  /** Lists the branches for the branch selector. */\n  onLoadBranches?: () => Promise<string[]>\n  /** REQUIRED loader for the current (path, branch). */\n  onLoadFile?: (\n    path: string,\n    branch: string,\n  ) => Promise<GitCodeEditorLoadedFile>\n  /** Optional save callback. When omitted, the save button is hidden. */\n  onSaveFile?: (path: string, branch: string, content: string) => Promise<void>\n  /** Syntax hint. Default plaintext; overridden by `onLoadFile`'s response. */\n  language?: string\n  readonly?: boolean\n  disabled?: boolean\n  required?: boolean\n  label?: string\n  hideLabel?: boolean\n  name?: string | null\n  id?: string\n  helpText?: string\n  errors?: string[]\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<GitCodeEditorProps>(), {\n  errors: () => [],\n  language: \"plaintext\",\n  label: \"Git Code Editor\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string]\n  \"update:branch\": [value: string]\n  \"update:path\": [value: string]\n  \"update:language\": [value: string]\n}>()\n\nconst content = ref<string>(props.modelValue ?? \"\")\nconst branchRef = ref<string>(props.branch ?? \"\")\nconst pathRef = ref<string>(props.path ?? \"\")\nconst languageRef = ref<string>(props.language ?? \"plaintext\")\n\nwatch(\n  () => props.modelValue,\n  (next) => {\n    if (next !== undefined && next !== content.value) {\n      content.value = next\n    }\n  },\n)\nwatch(\n  () => props.branch,\n  (next) => {\n    if (next !== undefined && next !== branchRef.value) {\n      branchRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.path,\n  (next) => {\n    if (next !== undefined && next !== pathRef.value) {\n      pathRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.language,\n  (next) => {\n    if (next !== undefined && next !== languageRef.value) {\n      languageRef.value = next\n    }\n  },\n)\n\nfunction updateContent(next: string | undefined): void {\n  const value = next ?? \"\"\n  content.value = value\n  emit(\"update:modelValue\", value)\n}\n\nfunction updateBranch(next: string): void {\n  branchRef.value = next\n  emit(\"update:branch\", next)\n}\n\nfunction updatePath(next: string | number | undefined): void {\n  const v = next === undefined ? \"\" : String(next)\n  pathRef.value = v\n  emit(\"update:path\", v)\n}\n\n// --- branches loader -------------------------------------------------\nconst branches = ref<string[]>([])\nconst branchesLoading = ref<boolean>(false)\nconst branchesError = ref<string | null>(null)\n\nasync function loadBranches(): Promise<void> {\n  if (!props.onLoadBranches) {\n    return\n  }\n  branchesLoading.value = true\n  branchesError.value = null\n  try {\n    const next = await props.onLoadBranches()\n    branches.value = Array.isArray(next) ? next : []\n  } catch (err) {\n    branchesError.value = err instanceof Error ? err.message : String(err)\n    branches.value = []\n  } finally {\n    branchesLoading.value = false\n  }\n}\n\n// --- file loader -----------------------------------------------------\nconst fileLoading = ref<boolean>(false)\nconst fileError = ref<string | null>(null)\nlet fileToken = 0\n\nasync function loadFile(): Promise<void> {\n  if (!props.onLoadFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  const myToken = ++fileToken\n  fileLoading.value = true\n  fileError.value = null\n  try {\n    const result = await props.onLoadFile(pathRef.value, branchRef.value)\n    if (myToken !== fileToken) {\n      return\n    }\n    const next = result?.content ?? \"\"\n    content.value = next\n    emit(\"update:modelValue\", next)\n    if (result?.language) {\n      languageRef.value = result.language\n      emit(\"update:language\", result.language)\n    }\n  } catch (err) {\n    if (myToken !== fileToken) {\n      return\n    }\n    fileError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    if (myToken === fileToken) {\n      fileLoading.value = false\n    }\n  }\n}\n\nwatch([branchRef, pathRef], () => {\n  void loadFile()\n})\n\n// --- save ------------------------------------------------------------\nconst saving = ref<boolean>(false)\nconst saveError = ref<string | null>(null)\n\nasync function save(): Promise<void> {\n  if (!props.onSaveFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  saving.value = true\n  saveError.value = null\n  try {\n    await props.onSaveFile(pathRef.value, branchRef.value, content.value)\n  } catch (err) {\n    saveError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    saving.value = false\n  }\n}\n\nconst branchOptions = computed<string[]>(() => {\n  const all = new Set(branches.value)\n  if (branchRef.value) {\n    all.add(branchRef.value)\n  }\n  return Array.from(all)\n})\n\nconst allErrors = computed<string[]>(() => {\n  const out = [...(props.errors ?? [])]\n  if (fileError.value) {\n    out.push(fileError.value)\n  }\n  if (saveError.value) {\n    out.push(saveError.value)\n  }\n  return out\n})\n\nconst showSave = computed<boolean>(() => Boolean(props.onSaveFile))\n\nonMounted(() => {\n  void loadBranches()\n  void loadFile()\n})\n\ndefineExpose({ reload: loadFile, save })\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n    :class=\"cn(props.classList)\"\n  >\n    <Card\n      :data-element-name=\"props.name ?? undefined\"\n      data-testid=\"git-code-editor\"\n    >\n      <CardHeader class=\"flex flex-col gap-2 border-b py-3\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <div\n            v-if=\"props.repository\"\n            class=\"flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground\"\n            data-testid=\"git-code-editor-repository\"\n          >\n            <GitBranch class=\"size-3.5\" />\n            <span>{{ props.repository }}</span>\n          </div>\n\n          <div class=\"min-w-40\" data-testid=\"git-code-editor-branch-wrapper\">\n            <Select\n              :model-value=\"branchRef\"\n              :disabled=\"disabled || readonly || branchesLoading\"\n              @update:model-value=\"(v) => updateBranch(String(v ?? ''))\"\n            >\n              <SelectTrigger\n                data-testid=\"git-code-editor-branch-trigger\"\n                :aria-label=\"'Branch'\"\n              >\n                <SelectValue placeholder=\"Select branch\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem\n                  v-for=\"b in branchOptions\"\n                  :key=\"b\"\n                  :value=\"b\"\n                  :data-testid=\"`git-code-editor-branch-${b}`\"\n                >\n                  {{ b }}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <Input\n            :model-value=\"pathRef\"\n            placeholder=\"path/to/file\"\n            class=\"flex-1 min-w-48\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"git-code-editor-path-input\"\n            @update:model-value=\"updatePath\"\n          />\n\n          <Button\n            v-if=\"showSave\"\n            type=\"button\"\n            variant=\"default\"\n            size=\"sm\"\n            :disabled=\"\n              saving || disabled || readonly || !pathRef || !branchRef\n            \"\n            data-testid=\"git-code-editor-save\"\n            @click=\"save\"\n          >\n            <Loader2 v-if=\"saving\" class=\"size-4 animate-spin\" />\n            <Save v-else class=\"size-4\" />\n            <span>{{ saving ? \"Saving…\" : \"Save\" }}</span>\n          </Button>\n        </div>\n        <p\n          v-if=\"languageRef\"\n          class=\"text-[10px] uppercase tracking-wide text-muted-foreground\"\n          data-testid=\"git-code-editor-language\"\n        >\n          {{ languageRef }}\n        </p>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div\n          v-if=\"fileLoading\"\n          class=\"flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground\"\n          data-testid=\"git-code-editor-loading\"\n        >\n          <Loader2 class=\"size-4 animate-spin\" />\n          <span>Loading file…</span>\n        </div>\n        <Textarea\n          :id=\"id\"\n          :model-value=\"content\"\n          :readonly=\"readonly || fileLoading\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :rows=\"16\"\n          spellcheck=\"false\"\n          class=\"min-h-64 rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0\"\n          :data-element-name=\"props.name ?? undefined\"\n          data-testid=\"git-code-editor-textarea\"\n          @update:model-value=\"updateContent\"\n        />\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEA,IAAM,IAAQ,GAMR,IAAO,GAOP,IAAU,EAAY,EAAM,cAAc,EAAE,GAC5C,IAAY,EAAY,EAAM,UAAU,EAAE,GAC1C,IAAU,EAAY,EAAM,QAAQ,EAAE,GACtC,IAAc,EAAY,EAAM,YAAY,WAAW;EA0B7D,AAxBA,QACQ,EAAM,aACX,MAAS;GACR,AAAI,MAAS,KAAA,KAAa,MAAS,EAAQ,UACzC,EAAQ,QAAQ;EAEpB,CACF,GACA,QACQ,EAAM,SACX,MAAS;GACR,AAAI,MAAS,KAAA,KAAa,MAAS,EAAU,UAC3C,EAAU,QAAQ;EAEtB,CACF,GACA,QACQ,EAAM,OACX,MAAS;GACR,AAAI,MAAS,KAAA,KAAa,MAAS,EAAQ,UACzC,EAAQ,QAAQ;EAEpB,CACF,GACA,QACQ,EAAM,WACX,MAAS;GACR,AAAI,MAAS,KAAA,KAAa,MAAS,EAAY,UAC7C,EAAY,QAAQ;EAExB,CACF;EAEA,SAAS,EAAc,GAAgC;GACrD,IAAM,IAAQ,KAAQ;GAEtB,AADA,EAAQ,QAAQ,GAChB,EAAK,qBAAqB,CAAK;EACjC;EAEA,SAAS,EAAa,GAAoB;GAExC,AADA,EAAU,QAAQ,GAClB,EAAK,iBAAiB,CAAI;EAC5B;EAEA,SAAS,EAAW,GAAyC;GAC3D,IAAM,IAAI,MAAS,KAAA,IAAY,KAAK,OAAO,CAAI;GAE/C,AADA,EAAQ,QAAQ,GAChB,EAAK,eAAe,CAAC;EACvB;EAGA,IAAM,IAAW,EAAc,CAAC,CAAC,GAC3B,IAAkB,EAAa,EAAK,GACpC,IAAgB,EAAmB,IAAI;EAE7C,eAAe,IAA8B;GACtC,MAAM,gBAIX;IADA,EAAgB,QAAQ,IACxB,EAAc,QAAQ;IACtB,IAAI;KACF,IAAM,IAAO,MAAM,EAAM,eAAe;KACxC,EAAS,QAAQ,MAAM,QAAQ,CAAI,IAAI,IAAO,CAAC;IACjD,SAAS,GAAK;KAEZ,AADA,EAAc,QAAQ,aAAe,QAAQ,EAAI,UAAU,OAAO,CAAG,GACrE,EAAS,QAAQ,CAAC;IACpB,UAAU;KACR,EAAgB,QAAQ;IAC1B;GATsB;EAUxB;EAGA,IAAM,IAAc,EAAa,EAAK,GAChC,IAAY,EAAmB,IAAI,GACrC,IAAY;EAEhB,eAAe,IAA0B;GAIvC,IAHI,CAAC,EAAM,cAGP,CAAC,EAAQ,SAAS,CAAC,EAAU,OAC/B;GAEF,IAAM,IAAU,EAAE;GAElB,AADA,EAAY,QAAQ,IACpB,EAAU,QAAQ;GAClB,IAAI;IACF,IAAM,IAAS,MAAM,EAAM,WAAW,EAAQ,OAAO,EAAU,KAAK;IACpE,IAAI,MAAY,GACd;IAEF,IAAM,IAAO,GAAQ,WAAW;IAGhC,AAFA,EAAQ,QAAQ,GAChB,EAAK,qBAAqB,CAAI,GAC1B,GAAQ,aACV,EAAY,QAAQ,EAAO,UAC3B,EAAK,mBAAmB,EAAO,QAAQ;GAE3C,SAAS,GAAK;IACZ,IAAI,MAAY,GACd;IAEF,EAAU,QAAQ,aAAe,QAAQ,EAAI,UAAU,OAAO,CAAG;GACnE,UAAU;IACR,AAAI,MAAY,MACd,EAAY,QAAQ;GAExB;EACF;EAEA,EAAM,CAAC,GAAW,CAAO,SAAS;GAChC,EAAc;EAChB,CAAC;EAGD,IAAM,IAAS,EAAa,EAAK,GAC3B,IAAY,EAAmB,IAAI;EAEzC,eAAe,IAAsB;GAC9B,MAAM,cAGP,GAAC,EAAQ,SAAS,CAAC,EAAU,QAIjC;IADA,EAAO,QAAQ,IACf,EAAU,QAAQ;IAClB,IAAI;KACF,MAAM,EAAM,WAAW,EAAQ,OAAO,EAAU,OAAO,EAAQ,KAAK;IACtE,SAAS,GAAK;KACZ,EAAU,QAAQ,aAAe,QAAQ,EAAI,UAAU,OAAO,CAAG;IACnE,UAAU;KACR,EAAO,QAAQ;IACjB;GAPkB;EAQpB;EAEA,IAAM,KAAgB,QAAyB;GAC7C,IAAM,IAAM,IAAI,IAAI,EAAS,KAAK;GAIlC,OAHI,EAAU,SACZ,EAAI,IAAI,EAAU,KAAK,GAElB,MAAM,KAAK,CAAG;EACvB,CAAC,GAEK,KAAY,QAAyB;GACzC,IAAM,IAAM,CAAC,GAAI,EAAM,UAAU,CAAC,CAAE;GAOpC,OANI,EAAU,SACZ,EAAI,KAAK,EAAU,KAAK,GAEtB,EAAU,SACZ,EAAI,KAAK,EAAU,KAAK,GAEnB;EACT,CAAC,GAEK,KAAW,QAAwB,EAAQ,EAAM,UAAW;SAElE,QAAgB;GAEd,AADA,EAAkB,GAClB,EAAc;EAChB,CAAC,GAED,EAAa;GAAE,QAAQ;GAAU;EAAK,CAAC,mBAIrC,EA0Ga,EAAA,EAAA,GAAA;GAzGV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,GAAA;GACR,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;;oBAkGnB,CAhGP,EAgGO,EAAA,CAAA,GAAA;IA/FJ,qBAAmB,EAAM,QAAQ,KAAA;IAClC,eAAY;;qBAsEC,CApEb,EAoEa,EAAA,EAAA,GAAA,EApED,OAAM,oCAAmC,GAAA;sBA4D7C,CA3DN,EA2DM,OA3DN,GA2DM;MAzDI,EAAM,cAAA,EAAA,GADd,EAOM,OAPN,GAOM,CAFJ,EAA8B,EAAA,EAAA,GAAA,EAAnB,OAAM,WAAU,CAAA,GAC3B,EAAmC,QAAA,MAAA,EAA1B,EAAM,UAAU,GAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAG3B,EAuBM,OAvBN,GAuBM,CAtBJ,EAqBS,EAAA,CAAA,GAAA;OApBN,eAAa,EAAA;OACb,UAAU,EAAA,YAAY,EAAA,YAAY,EAAA;OAClC,uBAAkB,AAAA,EAAA,QAAG,MAAM,EAAa,OAAO,KAAC,EAAA,CAAA;;wBAOjC,CALhB,EAKgB,EAAA,CAAA,GAAA;QAJd,eAAY;QACX,cAAY;;yBAE8B,CAA3C,EAA2C,EAAA,CAAA,GAAA,EAA9B,aAAY,gBAAe,CAAA,CAAA,CAAA;;WAE1C,EASgB,EAAA,CAAA,GAAA,MAAA;yBAPc,EAAA,EAAA,EAAA,GAD5B,EAOa,IAAA,MAAA,EANC,GAAA,QAAL,YADT,EAOa,EAAA,CAAA,GAAA;SALV,KAAK;SACL,OAAO;SACP,eAAW,0BAA4B;;0BAEjC,CAAA,EAAA,EAAJ,CAAC,GAAA,CAAA,CAAA,CAAA;;;;;;;MAMZ,EAOE,EAAA,CAAA,GAAA;OANC,eAAa,EAAA;OACd,aAAY;OACZ,OAAM;OACL,UAAU,EAAA,YAAY,EAAA;OACvB,eAAY;OACX,uBAAoB;;MAIf,GAAA,SAAA,EAAA,GADR,EAcS,EAAA,CAAA,GAAA;;OAZP,MAAK;OACL,SAAQ;OACR,MAAK;OACJ,UAAyB,EAAA,SAAU,EAAA,YAAY,EAAA,YAAQ,CAAK,EAAA,SAAO,CAAK,EAAA;OAGzE,eAAY;OACX,SAAO;;wBAE6C,CAAtC,EAAA,SAAA,EAAA,GAAf,EAAqD,EAAA,CAAA,GAAA;;QAA9B,OAAM;mBAC7B,EAA8B,EAAA,EAAA,GAAA;;QAAjB,OAAM;YACnB,EAA8C,QAAA,MAAA,EAArC,EAAA,QAAM,YAAA,MAAA,GAAA,CAAA,CAAA,CAAA;;;SAIX,EAAA,SAAA,EAAA,GADR,EAMI,KANJ,GAMI,EADC,EAAA,KAAW,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;QAGlB,EAsBc,EAAA,EAAA,GAAA,EAtBD,OAAM,MAAK,GAAA;sBAQhB,CANE,EAAA,SAAA,EAAA,GADR,EAOM,OAPN,GAOM,CAFJ,EAAuC,EAAA,CAAA,GAAA,EAA9B,OAAM,sBAAqB,CAAA,GAAA,AAAA,EAAA,OACpC,EAA0B,QAAA,MAApB,iBAAa,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAErB,EAYE,EAAA,EAAA,GAAA;MAXC,IAAI,EAAA;MACJ,eAAa,EAAA;MACb,UAAU,EAAA,YAAY,EAAA;MACtB,UAAU,EAAA;MACV,UAAU,EAAA;MACV,MAAM;MACP,YAAW;MACX,OAAM;MACL,qBAAmB,EAAM,QAAQ,KAAA;MAClC,eAAY;MACX,uBAAoB"}