@esheet/builder 0.0.3 → 0.0.4-1

package/dist/lib/components/Canvas.js

@@ -0,0 +1,288 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Sortable from 'sortablejs';
+import { useFormApi } from '../hooks/useFormApi.js';
+import { useUiApi } from '../hooks/useUiApi.js';
+import { useVisibleRootIds } from '../hooks/useVisibleRootIds.js';
+import { FieldWrapper } from './FieldWrapper.js';
+import { getFieldComponent } from '@esheet/fields';
+import { ViewBigIcon, ViewSmallIcon } from '../icons.js';
+// ---------------------------------------------------------------------------
+// DraggableFieldItem — each field is both draggable and a drop target
+// ---------------------------------------------------------------------------
+function DraggableFieldItem({ id, form, ui, parentId, dragEnabled, isSelected = false, isActiveChild = false, forceExpandVersion, forceCollapseVersion, nestedChildren, }) {
+    const handleRef = React.useRef(null);
+    const field = form.getState().getField(id);
+    const handleSelectOverride = React.useCallback((e) => {
+        if (!parentId)
+            return;
+        e.stopPropagation();
+        ui.getState().selectFieldChild(parentId, id);
+    }, [id, parentId, ui]);
+    if (!field)
+        return null;
+    return (_jsx("div", { className: "field-canvas-wrapper ms:relative ms:pb-1 ms:last:pb-0", "data-field-id": id, "data-field-type": field.definition.fieldType, "data-selected": isSelected ? 'true' : 'false', children: _jsx(FieldWrapper, { fieldId: id, form: form, ui: ui, dragHandleRef: handleRef, forceExpandVersion: forceExpandVersion, forceCollapseVersion: forceCollapseVersion, isSelectedOverride: parentId ? isActiveChild : undefined, onSelectOverride: parentId ? handleSelectOverride : undefined, selectedVariant: parentId ? 'nested' : 'default', children: (props) => {
+                const Component = getFieldComponent(props.field.definition.fieldType);
+                if (props.field.definition.fieldType === 'section') {
+                    const SectionComponent = Component;
+                    return (_jsx(SectionComponent, { ...props, nestedChildren: nestedChildren }));
+                }
+                return _jsx(Component, { ...props });
+            } }) }));
+}
+// ---------------------------------------------------------------------------
+// Canvas — main field list panel with Sheet DnD
+// ---------------------------------------------------------------------------
+export const Canvas = React.memo(function Canvas({ form, ui, dragEnabled = true, }) {
+    const canvasRef = React.useRef(null);
+    const rootIds = useVisibleRootIds();
+    const { normalized, responses } = useFormApi();
+    const { mode, selectedFieldId, selectedFieldChildId } = useUiApi();
+    const [sectionExpandSignal, setSectionExpandSignal] = React.useState(null);
+    const [expandAllVersion, setExpandAllVersion] = React.useState(undefined);
+    const [collapseAllVersion, setCollapseAllVersion] = React.useState(undefined);
+    const [allExpanded, setAllExpanded] = React.useState(false);
+    const normalizedRef = React.useRef(normalized);
+    React.useEffect(() => {
+        normalizedRef.current = normalized;
+    }, [normalized]);
+    // Clear drag state when mode changes or modal closes
+    React.useEffect(() => {
+        ui.getState().clearDragState();
+    }, [dragEnabled, ui]);
+    // SortableJS setup for root and section child lists.
+    // Re-runs whenever `normalized` changes so newly added section child
+    // containers always get their own Sortable instance.
+    React.useEffect(() => {
+        const el = canvasRef.current;
+        if (!el || !dragEnabled)
+            return;
+        const resolveScrollContainer = (fromEl) => {
+            let node = fromEl;
+            while (node) {
+                const style = window.getComputedStyle(node);
+                const canScrollY = style.overflowY === 'auto' ||
+                    style.overflowY === 'scroll' ||
+                    style.overflowY === 'overlay';
+                if (canScrollY && node.scrollHeight > node.clientHeight)
+                    return node;
+                node = node.parentElement;
+            }
+            return document.scrollingElement instanceof HTMLElement
+                ? document.scrollingElement
+                : null;
+        };
+        const getParentId = (listEl) => {
+            const attr = listEl.getAttribute('data-parent-id');
+            return attr && attr.length > 0 ? attr : null;
+        };
+        const restoreDomToSource = (evt) => {
+            if (typeof evt.oldIndex !== 'number')
+                return;
+            const { item, from: sourceList, to: targetList } = evt;
+            if (sourceList !== targetList && item.parentElement === targetList) {
+                targetList.removeChild(item);
+            }
+            const clamped = Math.max(0, Math.min(evt.oldIndex, sourceList.children.length));
+            const ref = sourceList.children.item(clamped);
+            if (ref)
+                sourceList.insertBefore(item, ref);
+            else
+                sourceList.appendChild(item);
+        };
+        const listEls = [
+            el,
+            ...Array.from(el.querySelectorAll('[data-sortable-list="true"]')),
+        ];
+        const instances = listEls.map((listEl) => {
+            const scrollContainer = resolveScrollContainer(listEl);
+            return Sortable.create(listEl, {
+                group: 'builder-fields',
+                handle: '.drag-handle',
+                draggable: '.field-canvas-wrapper',
+                dataIdAttr: 'data-field-id',
+                animation: 150,
+                forceFallback: true,
+                fallbackOnBody: true,
+                fallbackTolerance: 3,
+                scroll: scrollContainer ?? true,
+                bubbleScroll: scrollContainer === null,
+                forceAutoScrollFallback: true,
+                scrollSensitivity: 220,
+                scrollSpeed: 13,
+                invertSwap: true,
+                swapThreshold: getParentId(listEl) !== null ? 0.21 : 0.5,
+                invertedSwapThreshold: getParentId(listEl) !== null ? 0.21 : 0.5,
+                emptyInsertThreshold: getParentId(listEl) !== null ? 40 : 18,
+                onChoose: (evt) => {
+                    const sourceId = evt.item.getAttribute('data-field-id');
+                    if (!sourceId)
+                        return;
+                    const sourceNode = normalizedRef.current.byId[sourceId];
+                    if (sourceNode?.parentId) {
+                        ui.getState().selectFieldChild(sourceNode.parentId, sourceId);
+                    }
+                    else {
+                        ui.getState().selectField(sourceId);
+                    }
+                },
+                onMove: (evt) => {
+                    // Toggle placeholder visibility without triggering a React re-render.
+                    // A re-render here would shift DOM indices and break restoreDomToSource.
+                    // Reset ALL placeholders first so any section we just left is restored.
+                    el.querySelectorAll('.section-empty-placeholder').forEach((ph) => {
+                        ph.style.display = '';
+                    });
+                    // Hide placeholder in the list currently being dragged into.
+                    if (getParentId(evt.to) !== null) {
+                        const ph = evt.to.querySelector('.section-empty-placeholder');
+                        if (ph)
+                            ph.style.display = 'none';
+                    }
+                    // Show placeholder when dragging the last child out of a section.
+                    if (evt.from !== evt.to &&
+                        getParentId(evt.from) !== null &&
+                        evt.from.querySelectorAll('.field-canvas-wrapper').length <= 1) {
+                        const ph = evt.from.querySelector('.section-empty-placeholder');
+                        if (ph)
+                            ph.style.display = '';
+                    }
+                    return true;
+                },
+                onEnd: (evt) => {
+                    // Clear any inline display overrides set during drag.
+                    el.querySelectorAll('.section-empty-placeholder').forEach((ph) => {
+                        ph.style.display = '';
+                    });
+                    const sourceId = evt.item.getAttribute('data-field-id');
+                    if (!sourceId)
+                        return;
+                    const newIndex = evt.newDraggableIndex ?? evt.newIndex;
+                    const oldIndex = evt.oldDraggableIndex ?? evt.oldIndex;
+                    if (typeof newIndex !== 'number')
+                        return;
+                    const fromParentId = getParentId(evt.from);
+                    const toParentId = getParentId(evt.to);
+                    // No-op: dropped back in the same position
+                    if (fromParentId === toParentId && oldIndex === newIndex)
+                        return;
+                    // Undo Sortable's DOM move so React can own the placement
+                    restoreDomToSource(evt);
+                    form.getState().moveField(sourceId, newIndex, toParentId);
+                    // Update selection to follow the moved field to its new location.
+                    if (toParentId !== null) {
+                        setSectionExpandSignal((prev) => ({
+                            sectionId: toParentId,
+                            version: (prev?.version ?? 0) + 1,
+                        }));
+                        ui.getState().selectFieldChild(toParentId, sourceId);
+                    }
+                    else {
+                        ui.getState().selectField(sourceId);
+                    }
+                    ui.getState().clearDragState();
+                },
+            });
+        });
+        return () => {
+            for (const instance of instances)
+                instance.destroy();
+        };
+    }, [dragEnabled, form, normalized, ui]);
+    // Preview-only renderability map
+    const previewRenderableMap = React.useMemo(() => {
+        if (mode !== 'preview')
+            return null;
+        const cache = new Map();
+        const visit = (fieldId) => {
+            const cached = cache.get(fieldId);
+            if (cached !== undefined)
+                return cached;
+            const isVisible = form.getState().isVisible(fieldId);
+            if (!isVisible) {
+                cache.set(fieldId, false);
+                return false;
+            }
+            const node = normalized.byId[fieldId];
+            if (!node) {
+                cache.set(fieldId, false);
+                return false;
+            }
+            if (node.definition.fieldType !== 'section') {
+                cache.set(fieldId, true);
+                return true;
+            }
+            const hasRenderableChild = node.childIds.some((childId) => visit(childId));
+            cache.set(fieldId, hasRenderableChild);
+            return hasRenderableChild;
+        };
+        for (const id of Object.keys(normalized.byId)) {
+            visit(id);
+        }
+        return cache;
+    }, [form, mode, normalized, responses]);
+    const items = React.useMemo(() => {
+        if (mode !== 'preview' || !previewRenderableMap)
+            return [...rootIds];
+        return rootIds.filter((id) => previewRenderableMap.get(id) === true);
+    }, [mode, previewRenderableMap, rootIds]);
+    const getVisibleChildIds = React.useCallback((parentId) => {
+        const parent = normalized.byId[parentId];
+        if (!parent || parent.childIds.length === 0)
+            return [];
+        if (mode !== 'preview')
+            return parent.childIds;
+        return parent.childIds.filter((childId) => previewRenderableMap?.get(childId) === true);
+    }, [mode, normalized, previewRenderableMap]);
+    const renderNestedChildren = React.useCallback((parentId, depth = 1) => {
+        const parent = normalized.byId[parentId];
+        if (!parent || parent.definition.fieldType !== 'section')
+            return null;
+        const childIds = getVisibleChildIds(parentId);
+        if (mode === 'preview' && childIds.length === 0)
+            return null;
+        const isEmpty = mode !== 'preview' && childIds.length === 0;
+        const containerClass = depth === 1
+            ? 'section-children'
+            : 'section-children ms:border-l ms:border-msborder ms:pl-3';
+        const emptyClass = isEmpty
+            ? ' ms:rounded-lg ms:border-2 ms:border-dashed ms:border-msprimary/30 ms:bg-gradient-to-br ms:from-msbackground ms:to-msbackgroundsecondary'
+            : ' ms:min-h-[2rem]';
+        return (_jsxs("div", { className: `${containerClass}${emptyClass}`, "data-depth": depth, "data-sortable-list": dragEnabled ? 'true' : undefined, "data-parent-id": parentId, children: [isEmpty && (_jsxs("div", { className: "section-empty-placeholder ms:flex ms:flex-col ms:items-center ms:justify-center ms:p-8 ms:text-center ms:pointer-events-none ms:select-none", children: [_jsx("p", { className: "ms:text-sm ms:font-semibold ms:text-mstext ms:mb-2", children: "No fields in this section" }), _jsx("p", { className: "ms:text-xs ms:text-mstextmuted ms:leading-relaxed", children: "Use the Tool Panel on the left to add fields." })] })), childIds.map((childId) => (_jsx(DraggableFieldItem, { id: childId, form: form, ui: ui, parentId: parentId, dragEnabled: dragEnabled, isSelected: selectedFieldId === parentId && selectedFieldChildId === childId, isActiveChild: selectedFieldId === parentId && selectedFieldChildId === childId, forceExpandVersion: sectionExpandSignal?.sectionId === childId
+                        ? sectionExpandSignal.version
+                        : expandAllVersion, forceCollapseVersion: collapseAllVersion, nestedChildren: renderNestedChildren(childId, depth + 1) }, childId)))] }));
+    }, [
+        collapseAllVersion,
+        dragEnabled,
+        expandAllVersion,
+        form,
+        getVisibleChildIds,
+        sectionExpandSignal,
+        selectedFieldChildId,
+        selectedFieldId,
+        ui,
+    ]);
+    // Clear selection on Escape key
+    React.useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                ui.getState().selectField(null);
+                ui.getState().clearDragState();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [ui]);
+    return (_jsxs("div", { className: "ms:flex ms:flex-col ms:flex-1 ms:min-h-0", children: [mode === 'build' && (_jsxs("div", { className: "ms:bg-mssurface ms:border-b ms:border-msborder ms:px-4 ms:py-4 ms:flex ms:items-center ms:justify-between ms:gap-2", children: [_jsx("span", { className: "ms:text-sm ms:font-semibold ms:text-mstext ms:select-none", children: "Fields" }), items.length > 0 && (_jsx("div", { className: "ms:flex ms:items-center ms:gap-1", children: _jsxs("button", { type: "button", title: allExpanded ? 'Collapse all' : 'Expand all', className: "ms:flex ms:items-center ms:gap-1 ms:px-2 ms:py-1 ms:text-xs ms:text-mstextmuted ms:hover:text-mstext ms:rounded ms:hover:bg-msbackgroundhover ms:transition-colors", onClick: (e) => {
+                                e.stopPropagation();
+                                if (allExpanded) {
+                                    setCollapseAllVersion((v) => (v ?? 0) + 1);
+                                }
+                                else {
+                                    setExpandAllVersion((v) => (v ?? 0) + 1);
+                                }
+                                setAllExpanded((v) => !v);
+                            }, children: [allExpanded ? (_jsx(ViewSmallIcon, { className: "ms:w-3.5 ms:h-3.5" })) : (_jsx(ViewBigIcon, { className: "ms:w-3.5 ms:h-3.5" })), allExpanded ? 'Collapse all' : 'Expand all'] }) }))] })), items.length === 0 ? (_jsx("div", { className: "canvas-empty ms:flex ms:flex-1 ms:items-center ms:justify-center ms:min-h-[200px] ms:text-mstextmuted ms:text-sm", children: "No fields yet. Add a field from the Tool Panel to get started." })) : (_jsx("div", { ref: canvasRef, className: "canvas-fields ms:space-y-0 ms:flex-1 ms:min-h-0 ms:overflow-y-auto ms:px-4 ms:pt-3 ms:pb-4", "data-sortable-list": dragEnabled ? 'true' : undefined, "data-parent-id": "", children: items.map((id) => (_jsx(DraggableFieldItem, { id: id, form: form, ui: ui, dragEnabled: dragEnabled, isSelected: selectedFieldId === id && selectedFieldChildId === null, forceExpandVersion: sectionExpandSignal?.sectionId === id
+                        ? sectionExpandSignal.version
+                        : expandAllVersion, forceCollapseVersion: collapseAllVersion, nestedChildren: renderNestedChildren(id) }, id))) }))] }));
+});

package/dist/lib/components/CodeView.d.ts

@@ -0,0 +1,12 @@
+import { type FormStore, type UIStore } from '@esheet/core';
+export interface CodeViewProps {
+    form: FormStore;
+    ui: UIStore;
+}
+/**
+ * CodeView — Monaco-based JSON/YAML editor for the form definition.
+ *
+ * Serialize on mount, live-validate on edit, auto-save on unmount.
+ */
+export declare function CodeView({ form, ui }: CodeViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CodeView.d.ts.map

package/dist/lib/components/CodeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeView.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CodeView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,OAAO,EACb,MAAM,cAAc,CAAC;AAWtB,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,OAAO,CAAC;CACb;AAgDD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,aAAa,2CA6OnD"}

package/dist/lib/components/CodeView.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Editor } from '@monaco-editor/react';
+import YAML from 'js-yaml';
+import { formatZodValidationError, formDefinitionJSONSchema, formDefinitionSchema, } from '@esheet/core';
+import { FeedbackModal } from './FeedbackModal.js';
+const FORM_SCHEMA_URI = 'inmemory://esheet/form-definition.schema.json';
+/** Detect dark mode from the document root and re-render on changes. */
+function useIsDark() {
+    const [isDark, setIsDark] = React.useState(() => document.documentElement.classList.contains('dark'));
+    React.useEffect(() => {
+        const observer = new MutationObserver(() => {
+            setIsDark(document.documentElement.classList.contains('dark'));
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function serialize(data, format) {
+    return format === 'json'
+        ? JSON.stringify(data, null, 2)
+        : YAML.dump(data, { indent: 2, lineWidth: -1 });
+}
+function parse(text, format) {
+    return format === 'json' ? JSON.parse(text) : YAML.load(text);
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * CodeView — Monaco-based JSON/YAML editor for the form definition.
+ *
+ * Serialize on mount, live-validate on edit, auto-save on unmount.
+ */
+export function CodeView({ form, ui }) {
+    // Track whether user actually edited (avoids spurious saves from StrictMode double-mount)
+    const dirtyRef = React.useRef(false);
+    const isDark = useIsDark();
+    const [format, setFormat] = React.useState('yaml');
+    const initialCode = React.useMemo(() => {
+        try {
+            return serialize(form.getState().hydrateDefinition(), 'yaml');
+        }
+        catch {
+            return '';
+        }
+    }, []);
+    const codeRef = React.useRef(initialCode);
+    const formatRef = React.useRef('yaml');
+    const formRef = React.useRef(form);
+    const uiRef = React.useRef(ui);
+    const [code, setCode] = React.useState(initialCode);
+    const [error, setError] = React.useState('');
+    const [feedback, setFeedback] = React.useState({
+        open: false,
+        title: '',
+        message: '',
+        details: undefined,
+        variant: 'info',
+    });
+    const showFeedback = React.useCallback((variant, title, message, details) => {
+        setFeedback({
+            open: true,
+            title,
+            message,
+            details,
+            variant,
+        });
+    }, []);
+    // Keep refs in sync
+    React.useEffect(() => {
+        formRef.current = form;
+        uiRef.current = ui;
+        formatRef.current = format;
+    });
+    // Clear error flag on mount
+    React.useEffect(() => {
+        ui.getState().setCodeEditorHasError(false);
+    }, []);
+    // --- Handlers ---
+    /** Register JSON schema IntelliSense before Monaco creates the editor. */
+    const handleBeforeMount = (monaco) => {
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            schemas: [
+                {
+                    uri: FORM_SCHEMA_URI,
+                    fileMatch: ['*'],
+                    schema: formDefinitionJSONSchema,
+                },
+            ],
+        });
+    };
+    const handleCodeChange = (value) => {
+        const text = value ?? '';
+        setCode(text);
+        codeRef.current = text;
+        dirtyRef.current = true;
+        // Live validation
+        try {
+            const parsed = parse(text || '{}', format);
+            const validated = formDefinitionSchema.safeParse(parsed);
+            if (!validated.success) {
+                const issues = validated.error.issues.map(formatZodValidationError);
+                setError(`Invalid ${format.toUpperCase()}: ${issues[0] ?? 'Schema validation failed'}`);
+                ui.getState().setCodeEditorHasError(true);
+                return;
+            }
+            setError('');
+            ui.getState().setCodeEditorHasError(false);
+        }
+        catch (err) {
+            const message = err.message;
+            setError(`Invalid ${format.toUpperCase()}: ${message}`);
+            ui.getState().setCodeEditorHasError(true);
+        }
+    };
+    const handleFormatChange = (newFormat) => {
+        try {
+            const data = parse(code, format);
+            const converted = serialize(data, newFormat);
+            setCode(converted);
+            codeRef.current = converted;
+            setFormat(newFormat);
+            setError('');
+            ui.getState().setCodeEditorHasError(false);
+        }
+        catch (err) {
+            const message = `Cannot convert: ${err.message}`;
+            setError(message);
+            ui.getState().setCodeEditorHasError(true);
+            showFeedback('error', 'Format Conversion Failed', message);
+        }
+    };
+    // Auto-save on unmount (switching away from Code mode)
+    React.useEffect(() => {
+        return () => {
+            if (!dirtyRef.current)
+                return;
+            const text = codeRef.current.trim();
+            const fs = formRef.current;
+            const uiApi = uiRef.current;
+            const fmt = formatRef.current;
+            if (!text) {
+                const currentId = fs.getState().hydrateDefinition().id;
+                fs.getState().loadDefinition({
+                    id: currentId,
+                    fields: [],
+                });
+                return;
+            }
+            try {
+                const parsed = parse(text, fmt);
+                const validated = formDefinitionSchema.safeParse(parsed);
+                if (!validated.success)
+                    return;
+                const next = validated.data;
+                // Only save if different from current definition
+                const current = fs.getState().hydrateDefinition();
+                if (JSON.stringify(current) === JSON.stringify(next))
+                    return;
+                fs.getState().loadDefinition(next);
+                uiApi.getState().setCodeEditorHasError(false);
+            }
+            catch {
+                // Error already shown in the editor header — don't push invalid data
+            }
+        };
+    }, []);
+    return (_jsxs("div", { className: "code-view-container ms:flex ms:flex-col ms:flex-1 ms:min-h-0 ms:bg-msbackground", children: [_jsx(FeedbackModal, { open: feedback.open, title: feedback.title, message: feedback.message, details: feedback.details, variant: feedback.variant, onClose: () => setFeedback((prev) => ({
+                    ...prev,
+                    open: false,
+                })) }), _jsxs("div", { className: "code-view-header ms:flex ms:items-center ms:justify-between ms:gap-3 ms:p-3 ms:bg-mssurface ms:border-b ms:border-msborder", children: [_jsx("div", { className: "format-toggle ms:flex ms:gap-1 ms:rounded-lg ms:border ms:border-msborder ms:bg-msbackground ms:p-1", children: ['yaml', 'json'].map((fmt) => (_jsx("button", { type: "button", onClick: () => handleFormatChange(fmt), className: `format-btn ms:px-3 ms:py-1 ms:rounded-md ms:text-sm ms:font-medium ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ${format === fmt
+                                ? 'ms:bg-msprimary ms:text-mstextsecondary ms:shadow-sm'
+                                : 'ms:bg-transparent ms:text-mstextmuted ms:hover:text-mstext ms:hover:bg-mssurface'}`, children: fmt.toUpperCase() }, fmt))) }), _jsxs("div", { className: "code-view-status ms:flex ms:items-center ms:gap-2", children: [_jsx("span", { className: "ms:text-xs ms:text-mstextmuted", children: "Auto-saves when switching tabs" }), error && (_jsx("span", { className: "ms:text-xs ms:text-msdanger ms:bg-msdanger/10 ms:px-3 ms:py-1 ms:rounded-lg", children: error }))] })] }), _jsx("div", { className: "code-view-editor ms:flex-1 ms:overflow-hidden", children: _jsx(Editor, { height: "100%", language: format === 'yaml' ? 'yaml' : 'json', value: code, onChange: handleCodeChange, beforeMount: handleBeforeMount, theme: isDark ? 'vs-dark' : 'light', options: {
+                        minimap: { enabled: false },
+                        fontSize: 13,
+                        lineHeight: 1.5,
+                        wordWrap: 'on',
+                        formatOnPaste: false,
+                        formatOnType: false,
+                        tabSize: 2,
+                        automaticLayout: true,
+                        scrollBeyondLastLine: false,
+                        padding: { top: 16 },
+                        contextmenu: true,
+                        accessibilitySupport: 'auto',
+                        ariaLabel: 'Code editor for form schema',
+                    } }) })] }));
+}

package/dist/lib/components/FeedbackModal.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type FeedbackModalVariant = 'info' | 'success' | 'warning' | 'error';
+export interface FeedbackModalProps {
+    open: boolean;
+    title: string;
+    message: string;
+    details?: string;
+    issues?: string[];
+    issuesTitle?: string;
+    issuesHint?: string;
+    content?: ReactNode;
+    variant?: FeedbackModalVariant;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    showCancel?: boolean;
+    onConfirm?: () => void;
+    onClose: () => void;
+}
+/**
+ * Reusable modal used for import and validation feedback.
+ */
+export declare function FeedbackModal({ open, title, message, details, issues, issuesTitle, issuesHint, content, variant, confirmLabel, cancelLabel, showCancel, onConfirm, onClose, }: FeedbackModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FeedbackModal.d.ts.map

package/dist/lib/components/FeedbackModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackModal.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FeedbackModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AASD;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,WAAW,EACX,UAAU,EACV,OAAO,EACP,OAAgB,EAChB,YAAmB,EACnB,WAAsB,EACtB,UAAkB,EAClB,SAAS,EACT,OAAO,GACR,EAAE,kBAAkB,kDA8EpB"}

package/dist/lib/components/FeedbackModal.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ZodIssuesPanel } from '@esheet/fields';
+const VARIANT_STYLES = {
+    info: 'ms:text-msprimary ms:bg-msprimary/10',
+    success: 'ms:text-msaccent ms:bg-msaccent/10',
+    warning: 'ms:text-mswarning ms:bg-mswarning/10',
+    error: 'ms:text-msdanger ms:bg-msdanger/10',
+};
+/**
+ * Reusable modal used for import and validation feedback.
+ */
+export function FeedbackModal({ open, title, message, details, issues, issuesTitle, issuesHint, content, variant = 'info', confirmLabel = 'OK', cancelLabel = 'Cancel', showCancel = false, onConfirm, onClose, }) {
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "feedback-modal-overlay ms:fixed ms:inset-0 ms:z-50 ms:flex ms:items-center ms:justify-center ms:bg-msoverlay ms:px-4 ms:py-8", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: onClose, children: _jsxs("div", { className: "feedback-modal-content ms:w-full ms:max-w-2xl ms:rounded-xl ms:bg-mssurface ms:border ms:border-msborder ms:shadow-2xl ms:p-5", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "ms:flex ms:items-start ms:gap-3 ms:mb-3", children: [_jsx("div", { className: `ms:inline-flex ms:h-7 ms:min-w-7 ms:items-center ms:justify-center ms:rounded-full ms:text-xs ms:font-semibold ${VARIANT_STYLES[variant]}`, children: "i" }), _jsxs("div", { className: "ms:min-w-0", children: [_jsx("h3", { className: "ms:text-base ms:font-semibold ms:text-mstext", children: title }), _jsx("p", { className: "ms:text-sm ms:text-mstextmuted ms:mt-1 ms:whitespace-pre-wrap", children: message })] })] }), issues && issues.length > 0 && (_jsx(ZodIssuesPanel, { title: issuesTitle ?? 'Validation Issues', issues: issues, hint: issuesHint ?? 'Please resolve these issues and try again.', className: "ms:mb-3 ms:p-4", variant: variant === 'error'
+                        ? 'error'
+                        : variant === 'warning'
+                            ? 'warning'
+                            : variant === 'success'
+                                ? 'success'
+                                : 'info' })), details && (_jsx("pre", { className: "ms:text-xs ms:text-mstext ms:bg-msbackground ms:border ms:border-msborder ms:rounded ms:p-2 ms:whitespace-pre-wrap ms:break-words ms:max-h-96 ms:overflow-auto", children: details })), content, _jsxs("div", { className: "ms:mt-4 ms:flex ms:justify-end ms:gap-2", children: [showCancel && (_jsx("button", { type: "button", onClick: onClose, className: "ms:px-4 ms:py-2 ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface ms:text-mstext ms:text-sm ms:font-medium ms:hover:bg-msbackground ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: cancelLabel })), _jsx("button", { type: "button", onClick: onConfirm ?? onClose, className: "ms:px-4 ms:py-2 ms:rounded-lg ms:bg-msprimary ms:text-mstextsecondary ms:text-sm ms:font-medium ms:hover:bg-msprimary/90 ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: confirmLabel })] })] }) }));
+}

package/dist/lib/components/FieldWrapper.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { FieldComponentProps, FormStore, UIStore } from '@esheet/core';
+/**
+ * Props exposed to the render function for custom field components.
+ * Identical to `FieldComponentProps` from core — kept as a named alias for
+ * backward-compatibility with existing builder consumers.
+ */
+export type FieldWrapperRenderProps = FieldComponentProps;
+export interface FieldWrapperProps {
+    /** The field ID */
+    fieldId: string;
+    /** The form store */
+    form: FormStore;
+    /** The UI store */
+    ui: UIStore;
+    /** Ref attached to the drag-handle element. */
+    dragHandleRef?: React.RefObject<HTMLDivElement | null>;
+    /** Optional override for selection state (used by nested section child interaction). */
+    isSelectedOverride?: boolean;
+    /** Optional override for click selection behavior. */
+    onSelectOverride?: (e: React.MouseEvent) => void;
+    /** Optional selected styling variant. */
+    selectedVariant?: 'default' | 'nested';
+    /** Optional signal used to force expand a field wrapper (used for section drop UX). */
+    forceExpandVersion?: number;
+    /** Optional signal used to force collapse a field wrapper. */
+    forceCollapseVersion?: number;
+    /** Render function that receives field data and tools */
+    children: (props: FieldWrapperRenderProps) => React.ReactNode;
+}
+/**
+ * FieldWrapper - Extensibility API for custom field components.
+ *
+ * Wraps a field with collapsible header, selection highlighting, edit/delete buttons, and drag handles.
+ * Exposes field data and tools to the render function, allowing users to create
+ * custom field types while getting all the built-in editor functionality.
+ *
+ * @example
+ * ```tsx
+ * <FieldWrapper fieldId={id} form={form} ui={ui}>
+ *   {({ field, onUpdate, onRemove }) => (
+ *     <div>
+ *       <input
+ *         value={field.question}
+ *         onChange={(e) => onUpdate({ question: e.target.value })}
+ *       />
+ *     </div>
+ *   )}
+ * </FieldWrapper>
+ * ```
+ */
+export declare function FieldWrapper({ fieldId, form, ui, dragHandleRef, isSelectedOverride, onSelectOverride, selectedVariant, forceExpandVersion, forceCollapseVersion, children, }: FieldWrapperProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FieldWrapper.d.ts.map

package/dist/lib/components/FieldWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FieldWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAW5E;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,mBAAmB,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,mBAAmB;IACnB,EAAE,EAAE,OAAO,CAAC;IACZ,+CAA+C;IAC/C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,wFAAwF;IACxF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACjD,yCAAyC;IACzC,eAAe,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACvC,uFAAuF;IACvF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yDAAyD;IACzD,QAAQ,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC/D;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,EAAE,EACF,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,eAA2B,EAC3B,kBAAkB,EAClB,oBAAoB,EACpB,QAAQ,GACT,EAAE,iBAAiB,kDAsQnB"}