@open-mercato/core 0.8.1-develop.7296.1.2111d779db → 0.9.0

package/dist/modules/forms/backend/forms/[id]/studio/canvas/SectionContainer.js

@@ -0,0 +1,340 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Separator } from "@open-mercato/ui/primitives/separator";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { ArrowDown, ArrowUp, GripVertical, Trash2 } from "../lucide-icons.js";
+import {
+  GridSlot,
+  SectionCellSlot,
+  SectionColGapDrop,
+  SectionRowGapDrop
+} from "./GridSlot.js";
+import { GhostCell, HorizontalDropBar, VerticalDropBar } from "./DropIndicator.js";
+const SECTION_DRAGGABLE_PREFIX = "section:";
+const sectionDraggableId = (sectionKey) => `${SECTION_DRAGGABLE_PREFIX}${sectionKey}`;
+const COLUMNS_TO_GRID_CLASS = {
+  1: "grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-4"
+};
+const GAP_TO_CLASS = {
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+function SectionContainer(props) {
+  const {
+    view,
+    isSelected,
+    onSelect,
+    onDelete,
+    onMove,
+    onTitleCommit,
+    activeLocale,
+    pageChipLabel,
+    titlePlaceholder,
+    deleteAriaLabel,
+    dragHandleAriaLabel,
+    moveUpAriaLabel,
+    moveDownAriaLabel,
+    canMoveUp,
+    canMoveDown,
+    dropIndicator,
+    children,
+    isFocusedForTitleEdit,
+    onTitleEditConsumed
+  } = props;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: sectionDraggableId(view.key) });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const initialTitle = view.title?.[activeLocale] ?? "";
+  const [editingTitle, setEditingTitle] = React.useState(false);
+  const [titleDraft, setTitleDraft] = React.useState(initialTitle);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!editingTitle) setTitleDraft(initialTitle);
+  }, [initialTitle, editingTitle]);
+  React.useEffect(() => {
+    if (isFocusedForTitleEdit) {
+      setEditingTitle(true);
+      onTitleEditConsumed?.();
+    }
+  }, [isFocusedForTitleEdit, onTitleEditConsumed]);
+  React.useEffect(() => {
+    if (editingTitle) {
+      const node = inputRef.current;
+      if (node) {
+        node.focus();
+        node.select();
+      }
+    }
+  }, [editingTitle]);
+  const commit = React.useCallback(() => {
+    setEditingTitle(false);
+    if (titleDraft !== initialTitle) {
+      onTitleCommit(view.key, titleDraft);
+    }
+  }, [titleDraft, initialTitle, onTitleCommit, view.key]);
+  const cancel = React.useCallback(() => {
+    setEditingTitle(false);
+    setTitleDraft(initialTitle);
+  }, [initialTitle]);
+  const handleHeaderClick = React.useCallback(() => {
+    if (!editingTitle) onSelect(view.key);
+  }, [editingTitle, onSelect, view.key]);
+  const showTitleHeader = !view.hideTitle;
+  const containerClass = "relative rounded-lg border bg-background p-4 " + (isSelected ? "border-primary/30" : "border-border") + (dropIndicator ? " ring-1 ring-primary/30" : "");
+  const visibleTitle = initialTitle.length > 0 ? initialTitle : titlePlaceholder;
+  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, style, "data-section-key": view.key, className: containerClass, children: [
+    dropIndicator ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: [
+          "pointer-events-none absolute left-4 right-4 h-0.5 rounded-full bg-primary",
+          dropIndicator === "before" ? "-top-2" : "-bottom-2"
+        ].join(" "),
+        "aria-hidden": "true"
+      }
+    ) : null,
+    view.kind === "ending" ? /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(Tag, { variant: "neutral", dot: true, children: props.t("forms.studio.canvas.ending.chip") }) }) : pageChipLabel ? /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(Tag, { variant: "neutral", dot: true, children: pageChipLabel }) }) : null,
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        className: "mb-3 flex items-center justify-between gap-2",
+        onClick: handleHeaderClick,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing",
+                "aria-label": dragHandleAriaLabel,
+                ...attributes,
+                ...listeners,
+                children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4", "aria-hidden": "true" })
+              }
+            ),
+            showTitleHeader ? editingTitle ? /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref: inputRef,
+                "data-no-dnd": "true",
+                value: titleDraft,
+                placeholder: titlePlaceholder,
+                "aria-label": titlePlaceholder,
+                onChange: (event) => setTitleDraft(event.target.value),
+                onBlur: commit,
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    commit();
+                  } else if (event.key === "Escape") {
+                    event.preventDefault();
+                    cancel();
+                  }
+                },
+                className: "h-8 min-w-0 flex-1 px-2 py-1 text-sm font-semibold"
+              }
+            ) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onSelect(view.key);
+                  setEditingTitle(true);
+                },
+                className: "h-auto min-w-0 flex-1 justify-start truncate px-0 py-0 text-left text-sm font-semibold text-foreground hover:underline",
+                children: visibleTitle
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm italic text-muted-foreground", children: titlePlaceholder })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                "aria-label": moveUpAriaLabel,
+                variant: "ghost",
+                size: "sm",
+                disabled: !canMoveUp,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onMove(view.key, "up");
+                },
+                children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                "aria-label": moveDownAriaLabel,
+                variant: "ghost",
+                size: "sm",
+                disabled: !canMoveDown,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onMove(view.key, "down");
+                },
+                children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                "aria-label": deleteAriaLabel,
+                variant: "ghost",
+                size: "sm",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onDelete(view.key);
+                },
+                children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    view.divider ? /* @__PURE__ */ jsx(Separator, { className: "mb-3" }) : null,
+    children
+  ] });
+}
+const sectionGridClasses = (columns, gap) => `grid grid-cols-1 ${COLUMNS_TO_GRID_CLASS[columns]} ${GAP_TO_CLASS[gap]}`;
+function SectionGridBody({
+  view,
+  isEmpty,
+  emptyCopy,
+  children,
+  layoutPlan,
+  renderField,
+  gridDropTarget,
+  resizingFieldKey,
+  resizingPreviewSpan,
+  gridRef
+}) {
+  if (isEmpty) {
+    if (view.columns === 1) {
+      return /* @__PURE__ */ jsx(GridSlot, { sectionKey: view.key, columnIndex: null, isEmpty: true, copy: emptyCopy });
+    }
+    const cellTarget2 = gridDropTarget && gridDropTarget.kind === "cell" ? gridDropTarget : null;
+    return /* @__PURE__ */ jsx("div", { ref: gridRef, className: sectionGridClasses(view.columns, view.gap), children: Array.from({ length: view.columns }).map((_, c) => {
+      const showCellGhost = !!cellTarget2 && cellTarget2.rowIndex === 0 && cellTarget2.columnIndex === c;
+      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          SectionCellSlot,
+          {
+            sectionKey: view.key,
+            rowIndex: 0,
+            columnIndex: c,
+            copy: c === 0 ? emptyCopy : ""
+          }
+        ),
+        showCellGhost ? /* @__PURE__ */ jsx(GhostCell, {}) : null
+      ] }, `empty-cell-${c}`);
+    }) });
+  }
+  if (view.columns === 1 || !layoutPlan || !renderField) {
+    return /* @__PURE__ */ jsxs("div", { ref: gridRef, className: sectionGridClasses(view.columns, view.gap), children: [
+      children,
+      /* @__PURE__ */ jsx("div", { className: "sm:col-span-full md:col-span-full", children: /* @__PURE__ */ jsx(GridSlot, { sectionKey: view.key, columnIndex: null, copy: emptyCopy }) })
+    ] });
+  }
+  const rowGapTarget = gridDropTarget && gridDropTarget.kind === "row-gap" ? gridDropTarget : null;
+  const colGapTarget = gridDropTarget && gridDropTarget.kind === "col-gap" ? gridDropTarget : null;
+  const cellTarget = gridDropTarget && gridDropTarget.kind === "cell" ? gridDropTarget : null;
+  return /* @__PURE__ */ jsxs("div", { ref: gridRef, className: sectionGridClasses(view.columns, view.gap), children: [
+    layoutPlan.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionRowGapDrop, { sectionKey: view.key, rowIndex }),
+      rowGapTarget && rowGapTarget.rowIndex === rowIndex ? /* @__PURE__ */ jsx("div", { className: "relative col-span-full h-0", children: /* @__PURE__ */ jsx(HorizontalDropBar, { position: "top" }) }) : null,
+      row.cells.map((cell, cellIndex) => {
+        const showLeftColGap = !!colGapTarget && colGapTarget.rowIndex === rowIndex && colGapTarget.columnIndex === cellIndex;
+        const showRightColGap = !!colGapTarget && colGapTarget.rowIndex === rowIndex && colGapTarget.columnIndex === view.columns && cellIndex === row.cells.length - 1;
+        if (cell.kind === "field") {
+          const isResizingThis = !!resizingFieldKey && resizingFieldKey === cell.fieldKey && !!resizingPreviewSpan;
+          const previewSpan = isResizingThis ? Math.min(resizingPreviewSpan ?? cell.span, view.columns) : cell.span;
+          const spanClass = SPAN_TO_GRID_CLASS[previewSpan];
+          const isLastCell = cellIndex === row.cells.length - 1;
+          return /* @__PURE__ */ jsxs("div", { className: `relative ${spanClass}`, children: [
+            /* @__PURE__ */ jsx(
+              SectionColGapDrop,
+              {
+                sectionKey: view.key,
+                rowIndex,
+                columnIndex: cellIndex,
+                edge: "left"
+              }
+            ),
+            showLeftColGap ? /* @__PURE__ */ jsx(VerticalDropBar, { position: "left" }) : null,
+            renderField(cell.fieldKey, cell.linearIndex),
+            isResizingThis ? /* @__PURE__ */ jsx(GhostCell, {}) : null,
+            isLastCell ? /* @__PURE__ */ jsx(
+              SectionColGapDrop,
+              {
+                sectionKey: view.key,
+                rowIndex,
+                columnIndex: view.columns,
+                edge: "right"
+              }
+            ) : null,
+            showRightColGap ? /* @__PURE__ */ jsx(VerticalDropBar, { position: "right" }) : null
+          ] }, `cell-${rowIndex}-${cellIndex}`);
+        }
+        const showCellGhost = !!cellTarget && cellTarget.rowIndex === rowIndex && cellTarget.columnIndex === cellIndex;
+        return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          showLeftColGap ? /* @__PURE__ */ jsx(VerticalDropBar, { position: "left" }) : null,
+          /* @__PURE__ */ jsx(
+            SectionCellSlot,
+            {
+              sectionKey: view.key,
+              rowIndex,
+              columnIndex: cellIndex,
+              copy: emptyCopy
+            }
+          ),
+          showCellGhost ? /* @__PURE__ */ jsx(GhostCell, {}) : null
+        ] }, `cell-${rowIndex}-${cellIndex}`);
+      })
+    ] }, `row-${rowIndex}`)),
+    /* @__PURE__ */ jsx(SectionRowGapDrop, { sectionKey: view.key, rowIndex: layoutPlan.rows.length }),
+    rowGapTarget && rowGapTarget.rowIndex === layoutPlan.rows.length ? /* @__PURE__ */ jsx("div", { className: "relative col-span-full h-0", children: /* @__PURE__ */ jsx(HorizontalDropBar, { position: "top" }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "sm:col-span-full md:col-span-full", children: /* @__PURE__ */ jsx(GridSlot, { sectionKey: view.key, columnIndex: null, copy: emptyCopy }) })
+  ] });
+}
+const SPAN_TO_GRID_CLASS = {
+  1: "sm:col-span-1",
+  2: "sm:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4"
+};
+export {
+  SECTION_DRAGGABLE_PREFIX,
+  SectionContainer,
+  SectionGridBody,
+  sectionDraggableId,
+  sectionGridClasses
+};
+//# sourceMappingURL=SectionContainer.js.map

package/dist/modules/forms/backend/forms/[id]/studio/canvas/SectionContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/canvas/SectionContainer.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Separator } from '@open-mercato/ui/primitives/separator'\nimport { Tag } from '@open-mercato/ui/primitives/tag'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport { ArrowDown, ArrowUp, GripVertical, Trash2 } from '../lucide-icons'\nimport {\n  GridSlot,\n  SectionCellSlot,\n  SectionColGapDrop,\n  SectionRowGapDrop,\n} from './GridSlot'\nimport { GhostCell, HorizontalDropBar, VerticalDropBar } from './DropIndicator'\nimport type { RowLayout } from './row-layout'\nimport type { ActiveDropTarget } from '../types'\nimport type { ResolvedSectionView } from '../../../../../services/form-version-compiler'\n\ntype GridDropTarget = Exclude<ActiveDropTarget, null | { kind: 'sortable' }>\n\ntype RowGapTarget = Extract<GridDropTarget, { kind: 'row-gap' }>\ntype ColGapTarget = Extract<GridDropTarget, { kind: 'col-gap' }>\ntype CellTarget = Extract<GridDropTarget, { kind: 'cell' }>\n\nexport const SECTION_DRAGGABLE_PREFIX = 'section:'\n\nexport const sectionDraggableId = (sectionKey: string): string =>\n  `${SECTION_DRAGGABLE_PREFIX}${sectionKey}`\n\nconst COLUMNS_TO_GRID_CLASS: Record<1 | 2 | 3 | 4, string> = {\n  1: 'grid-cols-1',\n  2: 'sm:grid-cols-2',\n  3: 'sm:grid-cols-2 md:grid-cols-3',\n  4: 'sm:grid-cols-2 md:grid-cols-4',\n}\n\nconst GAP_TO_CLASS: Record<'sm' | 'md' | 'lg', string> = {\n  sm: 'gap-2',\n  md: 'gap-4',\n  lg: 'gap-6',\n}\n\nexport type SectionContainerProps = {\n  view: ResolvedSectionView\n  isSelected: boolean\n  onSelect: (sectionKey: string) => void\n  onDelete: (sectionKey: string) => void\n  onMove: (sectionKey: string, direction: 'up' | 'down') => void\n  onTitleCommit: (sectionKey: string, title: string) => void\n  /** Currently active locale for inline title edits (Decision 26b). */\n  activeLocale: string\n  pageIndex: number | null\n  pageChipLabel: string | null\n  emptyDropCopy: string\n  titlePlaceholder: string\n  deleteAriaLabel: string\n  dragHandleAriaLabel: string\n  moveUpAriaLabel: string\n  moveDownAriaLabel: string\n  canMoveUp: boolean\n  canMoveDown: boolean\n  dropIndicator?: 'before' | 'after' | null\n  t: TranslateFn\n  children: React.ReactNode\n  isFocusedForTitleEdit?: boolean\n  onTitleEditConsumed?: () => void\n}\n\n/**\n * Renders one `OmSection` (or `kind: 'page'` boundary) including header,\n * inline-editable title, drag handle, optional divider, and grid body.\n *\n * Phase C wires the section reorder DnD via `useSortable` keyed on\n * `section:<key>` so the parent `SortableContext` can list all sections.\n */\nexport function SectionContainer(props: SectionContainerProps) {\n  const {\n    view,\n    isSelected,\n    onSelect,\n    onDelete,\n    onMove,\n    onTitleCommit,\n    activeLocale,\n    pageChipLabel,\n    titlePlaceholder,\n    deleteAriaLabel,\n    dragHandleAriaLabel,\n    moveUpAriaLabel,\n    moveDownAriaLabel,\n    canMoveUp,\n    canMoveDown,\n    dropIndicator,\n    children,\n    isFocusedForTitleEdit,\n    onTitleEditConsumed,\n  } = props\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: sectionDraggableId(view.key) })\n\n  const style: React.CSSProperties = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    opacity: isDragging ? 0.5 : 1,\n  }\n\n  const initialTitle = view.title?.[activeLocale] ?? ''\n  const [editingTitle, setEditingTitle] = React.useState(false)\n  const [titleDraft, setTitleDraft] = React.useState(initialTitle)\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n  React.useEffect(() => {\n    if (!editingTitle) setTitleDraft(initialTitle)\n  }, [initialTitle, editingTitle])\n\n  React.useEffect(() => {\n    if (isFocusedForTitleEdit) {\n      setEditingTitle(true)\n      onTitleEditConsumed?.()\n    }\n  }, [isFocusedForTitleEdit, onTitleEditConsumed])\n\n  React.useEffect(() => {\n    if (editingTitle) {\n      const node = inputRef.current\n      if (node) {\n        node.focus()\n        node.select()\n      }\n    }\n  }, [editingTitle])\n\n  const commit = React.useCallback(() => {\n    setEditingTitle(false)\n    if (titleDraft !== initialTitle) {\n      onTitleCommit(view.key, titleDraft)\n    }\n  }, [titleDraft, initialTitle, onTitleCommit, view.key])\n\n  const cancel = React.useCallback(() => {\n    setEditingTitle(false)\n    setTitleDraft(initialTitle)\n  }, [initialTitle])\n\n  const handleHeaderClick = React.useCallback(() => {\n    if (!editingTitle) onSelect(view.key)\n  }, [editingTitle, onSelect, view.key])\n\n  const showTitleHeader = !view.hideTitle\n  const containerClass =\n    'relative rounded-lg border bg-background p-4 ' +\n    (isSelected ? 'border-primary/30' : 'border-border') +\n    (dropIndicator ? ' ring-1 ring-primary/30' : '')\n\n  const visibleTitle = initialTitle.length > 0 ? initialTitle : titlePlaceholder\n\n  return (\n    <div ref={setNodeRef} style={style} data-section-key={view.key} className={containerClass}>\n      {dropIndicator ? (\n        <span\n          className={[\n            'pointer-events-none absolute left-4 right-4 h-0.5 rounded-full bg-primary',\n            dropIndicator === 'before' ? '-top-2' : '-bottom-2',\n          ].join(' ')}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n      {view.kind === 'ending' ? (\n        <div className=\"mb-2\">\n          <Tag variant=\"neutral\" dot>\n            {props.t('forms.studio.canvas.ending.chip')}\n          </Tag>\n        </div>\n      ) : pageChipLabel ? (\n        <div className=\"mb-2\">\n          <Tag variant=\"neutral\" dot>\n            {pageChipLabel}\n          </Tag>\n        </div>\n      ) : null}\n      <header\n        className=\"mb-3 flex items-center justify-between gap-2\"\n        onClick={handleHeaderClick}\n      >\n        <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n          <IconButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing\"\n            aria-label={dragHandleAriaLabel}\n            {...attributes}\n            {...listeners}\n          >\n            <GripVertical className=\"size-4\" aria-hidden=\"true\" />\n          </IconButton>\n          {showTitleHeader ? (\n            editingTitle ? (\n              <Input\n                ref={inputRef}\n                data-no-dnd=\"true\"\n                value={titleDraft}\n                placeholder={titlePlaceholder}\n                aria-label={titlePlaceholder}\n                onChange={(event) => setTitleDraft(event.target.value)}\n                onBlur={commit}\n                onKeyDown={(event) => {\n                  if (event.key === 'Enter') {\n                    event.preventDefault()\n                    commit()\n                  } else if (event.key === 'Escape') {\n                    event.preventDefault()\n                    cancel()\n                  }\n                }}\n                className=\"h-8 min-w-0 flex-1 px-2 py-1 text-sm font-semibold\"\n              />\n            ) : (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                onClick={(event) => {\n                  event.stopPropagation()\n                  onSelect(view.key)\n                  setEditingTitle(true)\n                }}\n                className=\"h-auto min-w-0 flex-1 justify-start truncate px-0 py-0 text-left text-sm font-semibold text-foreground hover:underline\"\n              >\n                {visibleTitle}\n              </Button>\n            )\n          ) : (\n            <span className=\"flex-1 text-sm italic text-muted-foreground\">{titlePlaceholder}</span>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <IconButton\n            type=\"button\"\n            aria-label={moveUpAriaLabel}\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={!canMoveUp}\n            onClick={(event) => {\n              event.stopPropagation()\n              onMove(view.key, 'up')\n            }}\n          >\n            <ArrowUp className=\"size-4\" aria-hidden=\"true\" />\n          </IconButton>\n          <IconButton\n            type=\"button\"\n            aria-label={moveDownAriaLabel}\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={!canMoveDown}\n            onClick={(event) => {\n              event.stopPropagation()\n              onMove(view.key, 'down')\n            }}\n          >\n            <ArrowDown className=\"size-4\" aria-hidden=\"true\" />\n          </IconButton>\n          <IconButton\n            type=\"button\"\n            aria-label={deleteAriaLabel}\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={(event) => {\n              event.stopPropagation()\n              onDelete(view.key)\n            }}\n          >\n            <Trash2 className=\"size-4\" aria-hidden=\"true\" />\n          </IconButton>\n        </div>\n      </header>\n      {view.divider ? <Separator className=\"mb-3\" /> : null}\n      {children}\n    </div>\n  )\n}\n\nexport const sectionGridClasses = (\n  columns: 1 | 2 | 3 | 4,\n  gap: 'sm' | 'md' | 'lg',\n): string => `grid grid-cols-1 ${COLUMNS_TO_GRID_CLASS[columns]} ${GAP_TO_CLASS[gap]}`\n\n/**\n * Body wrapper that lays out child rows in a CSS grid based on the\n * resolved `columns` value. Empty sections fall back to a single\n * full-width drop zone (Decision 28).\n *\n * Phase 1 grid DnD \u2014 when `columns > 1` and a `layoutPlan` is provided,\n * the body owns layout: it walks the `RowLayout` rows, renders each\n * field via `renderField(fieldKey, fieldIndex)`, and interleaves\n * per-cell + per-gap droppables. `columns === 1` keeps legacy children\n * rendering for regression safety.\n */\nexport function SectionGridBody({\n  view,\n  isEmpty,\n  emptyCopy,\n  children,\n  layoutPlan,\n  renderField,\n  gridDropTarget,\n  resizingFieldKey,\n  resizingPreviewSpan,\n  gridRef,\n}: {\n  view: ResolvedSectionView\n  isEmpty: boolean\n  emptyCopy: string\n  children?: React.ReactNode\n  layoutPlan?: RowLayout\n  renderField?: (fieldKey: string, fieldIndex: number) => React.ReactNode\n  gridDropTarget?: GridDropTarget | null\n  resizingFieldKey?: string | null\n  resizingPreviewSpan?: 1 | 2 | 3 | 4 | null\n  gridRef?: React.Ref<HTMLDivElement>\n}) {\n  if (isEmpty) {\n    // Phase 5 \u2014 multi-column sections render a silhouette of ghost cells so\n    // the column structure is visible before any field is dropped. The\n    // single-column case keeps the legacy big-rectangle for regression safety.\n    if (view.columns === 1) {\n      return <GridSlot sectionKey={view.key} columnIndex={null} isEmpty copy={emptyCopy} />\n    }\n    const cellTarget: CellTarget | null =\n      gridDropTarget && gridDropTarget.kind === 'cell' ? gridDropTarget : null\n    return (\n      <div ref={gridRef} className={sectionGridClasses(view.columns, view.gap)}>\n        {Array.from({ length: view.columns }).map((_, c) => {\n          const showCellGhost =\n            !!cellTarget && cellTarget.rowIndex === 0 && cellTarget.columnIndex === c\n          return (\n            <div key={`empty-cell-${c}`} className=\"relative\">\n              <SectionCellSlot\n                sectionKey={view.key}\n                rowIndex={0}\n                columnIndex={c}\n                copy={c === 0 ? emptyCopy : ''}\n              />\n              {showCellGhost ? <GhostCell /> : null}\n            </div>\n          )\n        })}\n      </div>\n    )\n  }\n\n  if (view.columns === 1 || !layoutPlan || !renderField) {\n    return (\n      <div ref={gridRef} className={sectionGridClasses(view.columns, view.gap)}>\n        {children}\n        <div className=\"sm:col-span-full md:col-span-full\">\n          <GridSlot sectionKey={view.key} columnIndex={null} copy={emptyCopy} />\n        </div>\n      </div>\n    )\n  }\n\n  const rowGapTarget: RowGapTarget | null =\n    gridDropTarget && gridDropTarget.kind === 'row-gap' ? gridDropTarget : null\n  const colGapTarget: ColGapTarget | null =\n    gridDropTarget && gridDropTarget.kind === 'col-gap' ? gridDropTarget : null\n  const cellTarget: CellTarget | null =\n    gridDropTarget && gridDropTarget.kind === 'cell' ? gridDropTarget : null\n\n  // Decision 6b \u2014 per-cell + per-gap droppables; column hint is informational.\n  return (\n    <div ref={gridRef} className={sectionGridClasses(view.columns, view.gap)}>\n      {layoutPlan.rows.map((row, rowIndex) => (\n        <React.Fragment key={`row-${rowIndex}`}>\n          <SectionRowGapDrop sectionKey={view.key} rowIndex={rowIndex} />\n          {rowGapTarget && rowGapTarget.rowIndex === rowIndex ? (\n            <div className=\"relative col-span-full h-0\">\n              <HorizontalDropBar position=\"top\" />\n            </div>\n          ) : null}\n          {row.cells.map((cell, cellIndex) => {\n            const showLeftColGap =\n              !!colGapTarget &&\n              colGapTarget.rowIndex === rowIndex &&\n              colGapTarget.columnIndex === cellIndex\n            const showRightColGap =\n              !!colGapTarget &&\n              colGapTarget.rowIndex === rowIndex &&\n              colGapTarget.columnIndex === view.columns &&\n              cellIndex === row.cells.length - 1\n            if (cell.kind === 'field') {\n              const isResizingThis =\n                !!resizingFieldKey &&\n                resizingFieldKey === cell.fieldKey &&\n                !!resizingPreviewSpan\n              const previewSpan = isResizingThis\n                ? (Math.min(resizingPreviewSpan ?? cell.span, view.columns) as 1 | 2 | 3 | 4)\n                : cell.span\n              const spanClass = SPAN_TO_GRID_CLASS[previewSpan]\n              const isLastCell = cellIndex === row.cells.length - 1\n              return (\n                <div key={`cell-${rowIndex}-${cellIndex}`} className={`relative ${spanClass}`}>\n                  <SectionColGapDrop\n                    sectionKey={view.key}\n                    rowIndex={rowIndex}\n                    columnIndex={cellIndex}\n                    edge=\"left\"\n                  />\n                  {showLeftColGap ? <VerticalDropBar position=\"left\" /> : null}\n                  {renderField(cell.fieldKey, cell.linearIndex)}\n                  {isResizingThis ? <GhostCell /> : null}\n                  {isLastCell ? (\n                    <SectionColGapDrop\n                      sectionKey={view.key}\n                      rowIndex={rowIndex}\n                      columnIndex={view.columns}\n                      edge=\"right\"\n                    />\n                  ) : null}\n                  {showRightColGap ? <VerticalDropBar position=\"right\" /> : null}\n                </div>\n              )\n            }\n            const showCellGhost =\n              !!cellTarget &&\n              cellTarget.rowIndex === rowIndex &&\n              cellTarget.columnIndex === cellIndex\n            return (\n              <div key={`cell-${rowIndex}-${cellIndex}`} className=\"relative\">\n                {showLeftColGap ? <VerticalDropBar position=\"left\" /> : null}\n                <SectionCellSlot\n                  sectionKey={view.key}\n                  rowIndex={rowIndex}\n                  columnIndex={cellIndex}\n                  copy={emptyCopy}\n                />\n                {showCellGhost ? <GhostCell /> : null}\n              </div>\n            )\n          })}\n        </React.Fragment>\n      ))}\n      <SectionRowGapDrop sectionKey={view.key} rowIndex={layoutPlan.rows.length} />\n      {rowGapTarget && rowGapTarget.rowIndex === layoutPlan.rows.length ? (\n        <div className=\"relative col-span-full h-0\">\n          <HorizontalDropBar position=\"top\" />\n        </div>\n      ) : null}\n      <div className=\"sm:col-span-full md:col-span-full\">\n        <GridSlot sectionKey={view.key} columnIndex={null} copy={emptyCopy} />\n      </div>\n    </div>\n  )\n}\n\nconst SPAN_TO_GRID_CLASS: Record<1 | 2 | 3 | 4, string> = {\n  1: 'sm:col-span-1',\n  2: 'sm:col-span-2',\n  3: 'md:col-span-3',\n  4: 'md:col-span-4',\n}\n"],
+  "mappings": "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",
+  "names": ["cellTarget"]
+}

package/dist/modules/forms/backend/forms/[id]/studio/canvas/grid-collision.js

@@ -0,0 +1,24 @@
+import {
+  closestCenter,
+  closestCorners,
+  pointerWithin
+} from "@dnd-kit/core";
+import { parseSectionDropId } from "./GridSlot.js";
+function isGapCollision(collision) {
+  const parsed = parseSectionDropId(String(collision.id));
+  return parsed?.kind === "col-gap" || parsed?.kind === "row-gap";
+}
+const gridAwareCollision = (args) => {
+  const pointerHits = pointerWithin(args);
+  if (pointerHits.length > 0) {
+    const gapHits = pointerHits.filter(isGapCollision);
+    if (gapHits.length > 0) return gapHits;
+  }
+  const cornerHits = closestCorners(args);
+  if (cornerHits.length > 0) return cornerHits;
+  return closestCenter(args);
+};
+export {
+  gridAwareCollision
+};
+//# sourceMappingURL=grid-collision.js.map

package/dist/modules/forms/backend/forms/[id]/studio/canvas/grid-collision.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/canvas/grid-collision.ts"],
+  "sourcesContent": ["// Decision 2a \u2014 gap droppables win over cells when the pointer is inside one.\nimport {\n  closestCenter,\n  closestCorners,\n  pointerWithin,\n  type Collision,\n  type CollisionDetection,\n} from '@dnd-kit/core'\nimport { parseSectionDropId } from './GridSlot'\n\nfunction isGapCollision(collision: Collision): boolean {\n  const parsed = parseSectionDropId(String(collision.id))\n  return parsed?.kind === 'col-gap' || parsed?.kind === 'row-gap'\n}\n\nexport const gridAwareCollision: CollisionDetection = (args) => {\n  const pointerHits = pointerWithin(args)\n  if (pointerHits.length > 0) {\n    const gapHits = pointerHits.filter(isGapCollision)\n    if (gapHits.length > 0) return gapHits\n  }\n  const cornerHits = closestCorners(args)\n  if (cornerHits.length > 0) return cornerHits\n  return closestCenter(args)\n}\n"],
+  "mappings": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,0BAA0B;AAEnC,SAAS,eAAe,WAA+B;AACrD,QAAM,SAAS,mBAAmB,OAAO,UAAU,EAAE,CAAC;AACtD,SAAO,QAAQ,SAAS,aAAa,QAAQ,SAAS;AACxD;AAEO,MAAM,qBAAyC,CAAC,SAAS;AAC9D,QAAM,cAAc,cAAc,IAAI;AACtC,MAAI,YAAY,SAAS,GAAG;AAC1B,UAAM,UAAU,YAAY,OAAO,cAAc;AACjD,QAAI,QAAQ,SAAS,EAAG,QAAO;AAAA,EACjC;AACA,QAAM,aAAa,eAAe,IAAI;AACtC,MAAI,WAAW,SAAS,EAAG,QAAO;AAClC,SAAO,cAAc,IAAI;AAC3B;",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/canvas/keyboard-coordinates.js

@@ -0,0 +1,91 @@
+import { KeyboardCode } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { FIELD_DRAGGABLE_PREFIX } from "./FieldRow.js";
+const ARROW_TO_DIRECTION = {
+  [KeyboardCode.Up]: "up",
+  [KeyboardCode.Down]: "down",
+  [KeyboardCode.Left]: "left",
+  [KeyboardCode.Right]: "right"
+};
+function nextGridCoordinates(input) {
+  const { current, direction, rowHeight, colWidth, gapPx } = input;
+  const safeRow = Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : 0;
+  const safeCol = Number.isFinite(colWidth) && colWidth > 0 ? colWidth : 0;
+  const safeGap = Number.isFinite(gapPx) && gapPx >= 0 ? gapPx : 0;
+  const xStep = safeCol + safeGap;
+  const yStep = safeRow + safeGap;
+  switch (direction) {
+    case "up":
+      return { x: current.x, y: current.y - yStep };
+    case "down":
+      return { x: current.x, y: current.y + yStep };
+    case "left":
+      return { x: current.x - xStep, y: current.y };
+    case "right":
+      return { x: current.x + xStep, y: current.y };
+    default:
+      return current;
+  }
+}
+function findSectionElement(activeId) {
+  if (typeof document === "undefined") return null;
+  if (!activeId.startsWith(FIELD_DRAGGABLE_PREFIX)) return null;
+  const fieldKey = activeId.slice(FIELD_DRAGGABLE_PREFIX.length);
+  if (!fieldKey) return null;
+  const fieldNode = document.querySelector(`[data-field-key="${CSS.escape(fieldKey)}"]`);
+  if (!fieldNode) return null;
+  return fieldNode.closest("[data-section-key]");
+}
+function readSectionColumns(section) {
+  const grids = section.querySelectorAll(":scope div");
+  for (const node of Array.from(grids)) {
+    const style = typeof window !== "undefined" ? window.getComputedStyle(node) : null;
+    if (!style) continue;
+    if (style.display !== "grid") continue;
+    const template = style.gridTemplateColumns;
+    if (!template || template === "none") continue;
+    return template.split(" ").filter(Boolean).length;
+  }
+  return 1;
+}
+function readGridGap(section) {
+  const grids = section.querySelectorAll(":scope div");
+  for (const node of Array.from(grids)) {
+    const style = typeof window !== "undefined" ? window.getComputedStyle(node) : null;
+    if (!style) continue;
+    if (style.display !== "grid") continue;
+    const raw = style.columnGap || style.gap || "0";
+    const parsed = Number.parseFloat(raw);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  return 0;
+}
+const gridKeyboardCoordinates = (event, args) => {
+  const direction = ARROW_TO_DIRECTION[event.code];
+  if (!direction) return sortableKeyboardCoordinates(event, args);
+  const activeId = String(args.active);
+  const section = findSectionElement(activeId);
+  if (!section) return sortableKeyboardCoordinates(event, args);
+  const columns = readSectionColumns(section);
+  if (columns <= 1) return sortableKeyboardCoordinates(event, args);
+  const sectionRect = section.getBoundingClientRect();
+  if (!sectionRect || sectionRect.width <= 0) return sortableKeyboardCoordinates(event, args);
+  const gapPx = readGridGap(section);
+  const colWidth = (sectionRect.width - gapPx * (columns - 1)) / columns;
+  const collisionRect = args.context.collisionRect;
+  const rowHeight = collisionRect?.height ?? sectionRect.height / Math.max(1, columns);
+  const current = args.currentCoordinates;
+  event.preventDefault();
+  return nextGridCoordinates({
+    current,
+    direction,
+    rowHeight,
+    colWidth,
+    gapPx
+  });
+};
+export {
+  gridKeyboardCoordinates,
+  nextGridCoordinates
+};
+//# sourceMappingURL=keyboard-coordinates.js.map

package/dist/modules/forms/backend/forms/[id]/studio/canvas/keyboard-coordinates.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/canvas/keyboard-coordinates.ts"],
+  "sourcesContent": ["// Phase 7 \u2014 grid-aware keyboard coordinate getter.\n//\n// `@dnd-kit/sortable`'s `sortableKeyboardCoordinates` only steps along the\n// linear sortable list; in a multi-column section grid, arrow keys cannot\n// traverse columns. This module wraps the default getter with a pure\n// \"compute next coordinates\" helper for the grid case and a DOM-aware\n// `KeyboardCoordinateGetter` that detects the active draggable's parent\n// section (via `data-section-key`) and decides whether to apply grid math\n// or fall back to the default sortable behaviour.\n//\n// The pure `nextGridCoordinates` helper is exported separately so unit\n// tests can pin direction \u2192 delta mapping without DOM scaffolding.\n\nimport { KeyboardCode, type KeyboardCoordinateGetter } from '@dnd-kit/core'\nimport { sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport { FIELD_DRAGGABLE_PREFIX } from './FieldRow'\n\nexport type GridDirection = 'up' | 'down' | 'left' | 'right'\n\nconst ARROW_TO_DIRECTION: Record<string, GridDirection> = {\n  [KeyboardCode.Up]: 'up',\n  [KeyboardCode.Down]: 'down',\n  [KeyboardCode.Left]: 'left',\n  [KeyboardCode.Right]: 'right',\n}\n\nexport function nextGridCoordinates(input: {\n  current: { x: number; y: number }\n  direction: GridDirection\n  rowHeight: number\n  colWidth: number\n  gapPx: number\n}): { x: number; y: number } {\n  const { current, direction, rowHeight, colWidth, gapPx } = input\n  const safeRow = Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : 0\n  const safeCol = Number.isFinite(colWidth) && colWidth > 0 ? colWidth : 0\n  const safeGap = Number.isFinite(gapPx) && gapPx >= 0 ? gapPx : 0\n  const xStep = safeCol + safeGap\n  const yStep = safeRow + safeGap\n  switch (direction) {\n    case 'up':\n      return { x: current.x, y: current.y - yStep }\n    case 'down':\n      return { x: current.x, y: current.y + yStep }\n    case 'left':\n      return { x: current.x - xStep, y: current.y }\n    case 'right':\n      return { x: current.x + xStep, y: current.y }\n    default:\n      return current\n  }\n}\n\nfunction findSectionElement(activeId: string): HTMLElement | null {\n  if (typeof document === 'undefined') return null\n  if (!activeId.startsWith(FIELD_DRAGGABLE_PREFIX)) return null\n  const fieldKey = activeId.slice(FIELD_DRAGGABLE_PREFIX.length)\n  if (!fieldKey) return null\n  const fieldNode = document.querySelector<HTMLElement>(`[data-field-key=\"${CSS.escape(fieldKey)}\"]`)\n  if (!fieldNode) return null\n  return fieldNode.closest<HTMLElement>('[data-section-key]')\n}\n\nfunction readSectionColumns(section: HTMLElement): number {\n  // The grid wrapper is the section's first descendant with `display: grid`.\n  // We rely on `gridTemplateColumns` because Tailwind's responsive classes\n  // resolve to a concrete CSS value at runtime.\n  const grids = section.querySelectorAll<HTMLElement>(':scope div')\n  for (const node of Array.from(grids)) {\n    const style = typeof window !== 'undefined' ? window.getComputedStyle(node) : null\n    if (!style) continue\n    if (style.display !== 'grid') continue\n    const template = style.gridTemplateColumns\n    if (!template || template === 'none') continue\n    return template.split(' ').filter(Boolean).length\n  }\n  return 1\n}\n\nfunction readGridGap(section: HTMLElement): number {\n  const grids = section.querySelectorAll<HTMLElement>(':scope div')\n  for (const node of Array.from(grids)) {\n    const style = typeof window !== 'undefined' ? window.getComputedStyle(node) : null\n    if (!style) continue\n    if (style.display !== 'grid') continue\n    const raw = style.columnGap || style.gap || '0'\n    const parsed = Number.parseFloat(raw)\n    return Number.isFinite(parsed) ? parsed : 0\n  }\n  return 0\n}\n\n/**\n * KeyboardCoordinateGetter that adds left/right column traversal for\n * field draggables sitting inside multi-column section grids. Falls back\n * to the standard sortable coordinate getter for sections, ungrouped\n * fields, and single-column sections so existing keyboard behaviour\n * stays identical.\n */\nexport const gridKeyboardCoordinates: KeyboardCoordinateGetter = (event, args) => {\n  const direction = ARROW_TO_DIRECTION[event.code]\n  if (!direction) return sortableKeyboardCoordinates(event, args)\n\n  const activeId = String(args.active)\n  const section = findSectionElement(activeId)\n  if (!section) return sortableKeyboardCoordinates(event, args)\n\n  const columns = readSectionColumns(section)\n  if (columns <= 1) return sortableKeyboardCoordinates(event, args)\n\n  const sectionRect = section.getBoundingClientRect()\n  if (!sectionRect || sectionRect.width <= 0) return sortableKeyboardCoordinates(event, args)\n\n  const gapPx = readGridGap(section)\n  const colWidth = (sectionRect.width - gapPx * (columns - 1)) / columns\n  const collisionRect = args.context.collisionRect\n  const rowHeight = collisionRect?.height ?? sectionRect.height / Math.max(1, columns)\n\n  const current = args.currentCoordinates\n  event.preventDefault()\n  return nextGridCoordinates({\n    current,\n    direction,\n    rowHeight,\n    colWidth,\n    gapPx,\n  })\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/canvas/overlay-size.js

@@ -0,0 +1,11 @@
+import { GAP_PX } from "./resize-math.js";
+function computeOverlayWidthPx(input) {
+  const gapPx = GAP_PX[input.gap];
+  const colWidth = (input.sectionWidthPx - (input.columns - 1) * gapPx) / input.columns;
+  const clampedSpan = Math.max(1, Math.min(input.span, input.columns));
+  return clampedSpan * colWidth + (clampedSpan - 1) * gapPx;
+}
+export {
+  computeOverlayWidthPx
+};
+//# sourceMappingURL=overlay-size.js.map

package/dist/modules/forms/backend/forms/[id]/studio/canvas/overlay-size.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/canvas/overlay-size.ts"],
+  "sourcesContent": ["// Phase 4 \u2014 pure helper that returns the pixel width the DragOverlay should\n// render at so what's being dragged matches the target cell's footprint.\nimport { GAP_PX } from './resize-math'\n\nexport function computeOverlayWidthPx(input: {\n  sectionWidthPx: number\n  columns: 1 | 2 | 3 | 4\n  span: 1 | 2 | 3 | 4\n  gap: 'sm' | 'md' | 'lg'\n}): number {\n  const gapPx = GAP_PX[input.gap]\n  const colWidth = (input.sectionWidthPx - (input.columns - 1) * gapPx) / input.columns\n  const clampedSpan = Math.max(1, Math.min(input.span, input.columns))\n  return clampedSpan * colWidth + (clampedSpan - 1) * gapPx\n}\n"],
+  "mappings": "AAEA,SAAS,cAAc;AAEhB,SAAS,sBAAsB,OAK3B;AACT,QAAM,QAAQ,OAAO,MAAM,GAAG;AAC9B,QAAM,YAAY,MAAM,kBAAkB,MAAM,UAAU,KAAK,SAAS,MAAM;AAC9E,QAAM,cAAc,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,MAAM,MAAM,OAAO,CAAC;AACnE,SAAO,cAAc,YAAY,cAAc,KAAK;AACtD;",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/canvas/resize-math.js

@@ -0,0 +1,27 @@
+const GAP_PX = {
+  sm: 8,
+  md: 16,
+  lg: 24
+};
+function clampSpan(value, lo, hi) {
+  const bounded = Math.max(lo, Math.min(hi, value));
+  return bounded < 1 ? 1 : bounded > 4 ? 4 : bounded;
+}
+function computeResizedSpan(input) {
+  const { sectionLeft, sectionWidth, fieldLeft, pointerClientX, columns, startSpan, gapPx } = input;
+  if (columns <= 1) return 1;
+  const safeWidth = sectionWidth > 0 ? sectionWidth : 0;
+  const colWidth = (safeWidth - (columns - 1) * gapPx) / columns;
+  if (!Number.isFinite(colWidth) || colWidth <= 0) return startSpan;
+  const startColIndexRaw = Math.round((fieldLeft - sectionLeft) / (colWidth + gapPx));
+  const startColIndex = Math.max(0, Math.min(columns - 1, startColIndexRaw));
+  const maxSpan = Math.max(1, columns - startColIndex);
+  const pointerDelta = pointerClientX - fieldLeft;
+  const rawSpan = Math.ceil(pointerDelta / (colWidth + gapPx));
+  return clampSpan(rawSpan, 1, maxSpan);
+}
+export {
+  GAP_PX,
+  computeResizedSpan
+};
+//# sourceMappingURL=resize-math.js.map

package/dist/modules/forms/backend/forms/[id]/studio/canvas/resize-math.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/canvas/resize-math.ts"],
+  "sourcesContent": ["import type { RowLayoutSpan } from './row-layout'\n\nexport const GAP_PX: Record<'sm' | 'md' | 'lg', number> = {\n  sm: 8,\n  md: 16,\n  lg: 24,\n}\n\nexport type ResizedSpanInput = {\n  sectionLeft: number\n  sectionWidth: number\n  fieldLeft: number\n  pointerClientX: number\n  columns: 1 | 2 | 3 | 4\n  startSpan: 1 | 2 | 3 | 4\n  gapPx: number\n}\n\nfunction clampSpan(value: number, lo: number, hi: number): RowLayoutSpan {\n  const bounded = Math.max(lo, Math.min(hi, value))\n  return (bounded < 1 ? 1 : bounded > 4 ? 4 : bounded) as RowLayoutSpan\n}\n\nexport function computeResizedSpan(input: ResizedSpanInput): RowLayoutSpan {\n  const { sectionLeft, sectionWidth, fieldLeft, pointerClientX, columns, startSpan, gapPx } = input\n  if (columns <= 1) return 1\n  const safeWidth = sectionWidth > 0 ? sectionWidth : 0\n  const colWidth = (safeWidth - (columns - 1) * gapPx) / columns\n  if (!Number.isFinite(colWidth) || colWidth <= 0) return startSpan\n  const startColIndexRaw = Math.round((fieldLeft - sectionLeft) / (colWidth + gapPx))\n  const startColIndex = Math.max(0, Math.min(columns - 1, startColIndexRaw))\n  const maxSpan = Math.max(1, columns - startColIndex)\n  const pointerDelta = pointerClientX - fieldLeft\n  const rawSpan = Math.ceil(pointerDelta / (colWidth + gapPx))\n  return clampSpan(rawSpan, 1, maxSpan)\n}\n"],
+  "mappings": "AAEO,MAAM,SAA6C;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAYA,SAAS,UAAU,OAAe,IAAY,IAA2B;AACvE,QAAM,UAAU,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC;AAChD,SAAQ,UAAU,IAAI,IAAI,UAAU,IAAI,IAAI;AAC9C;AAEO,SAAS,mBAAmB,OAAwC;AACzE,QAAM,EAAE,aAAa,cAAc,WAAW,gBAAgB,SAAS,WAAW,MAAM,IAAI;AAC5F,MAAI,WAAW,EAAG,QAAO;AACzB,QAAM,YAAY,eAAe,IAAI,eAAe;AACpD,QAAM,YAAY,aAAa,UAAU,KAAK,SAAS;AACvD,MAAI,CAAC,OAAO,SAAS,QAAQ,KAAK,YAAY,EAAG,QAAO;AACxD,QAAM,mBAAmB,KAAK,OAAO,YAAY,gBAAgB,WAAW,MAAM;AAClF,QAAM,gBAAgB,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,GAAG,gBAAgB,CAAC;AACzE,QAAM,UAAU,KAAK,IAAI,GAAG,UAAU,aAAa;AACnD,QAAM,eAAe,iBAAiB;AACtC,QAAM,UAAU,KAAK,KAAK,gBAAgB,WAAW,MAAM;AAC3D,SAAO,UAAU,SAAS,GAAG,OAAO;AACtC;",
+  "names": []
+}