@esheet/builder 0.0.4-0 → 0.0.4-1

package/dist/lib/components/BuilderHeader.js

@@ -0,0 +1,390 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import YAML from 'js-yaml';
+import { formatZodValidationError, formDefinitionSchema, isExpressionValid, hasOptions, } from '@esheet/core';
+import { importFromMcp, exportToMcp, convertSurveyJS, isSurveyJSSchema, isMcpElicitationRequest, importFromFhir, exportToFhir, isFhirQuestionnaire, } from '@esheet/adapters';
+import { VEditorIcon, CodeIcon, PreviewIcon, UploadIcon, DownloadIcon, } from '../icons.js';
+import { FeedbackModal } from './FeedbackModal.js';
+import { useUiApi } from '../hooks/useUiApi.js';
+import { useFormApi } from '../hooks/useFormApi.js';
+const MODES = [
+    { value: 'build', label: 'Build', Icon: VEditorIcon },
+    { value: 'code', label: 'Code', Icon: CodeIcon },
+    { value: 'preview', label: 'Preview', Icon: PreviewIcon },
+];
+function sanitizeFormId(value) {
+    return value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+function flattenFields(fields, pathPrefix = 'fields') {
+    const flat = [];
+    for (let i = 0; i < fields.length; i += 1) {
+        const field = fields[i];
+        const path = `${pathPrefix}[${i}]`;
+        flat.push({ field, path });
+        if (field.fieldType === 'section' &&
+            field.fields &&
+            field.fields.length > 0) {
+            flat.push(...flattenFields(field.fields, `${path}.fields`));
+        }
+    }
+    return flat;
+}
+function extractExpressionFieldRefs(expression) {
+    const refs = new Set();
+    const regex = /\{([^{}]+)\}/g;
+    let match = regex.exec(expression);
+    while (match) {
+        const ref = match[1]?.trim();
+        if (ref)
+            refs.add(ref);
+        match = regex.exec(expression);
+    }
+    return Array.from(refs);
+}
+function collectImportWarnings(fields) {
+    const warnings = [];
+    const flat = flattenFields(fields);
+    const allIds = new Set(flat.map((entry) => entry.field.id));
+    const idCounts = new Map();
+    for (const entry of flat) {
+        idCounts.set(entry.field.id, (idCounts.get(entry.field.id) ?? 0) + 1);
+    }
+    for (const [id, count] of idCounts.entries()) {
+        if (count > 1) {
+            warnings.push(`Duplicate field id '${id}' appears ${count} times.`);
+        }
+    }
+    for (const entry of flat) {
+        const { field, path } = entry;
+        if (hasOptions(field)) {
+            if (!field.options || field.options.length === 0) {
+                warnings.push(`${field.id}: ${path} has no options for fieldType '${field.fieldType}'.`);
+            }
+        }
+        if (field.fieldType === 'singlematrix' ||
+            field.fieldType === 'multimatrix') {
+            if (!field.rows || field.rows.length === 0) {
+                warnings.push(`${field.id}: ${path} has no rows.`);
+            }
+            if (!field.columns || field.columns.length === 0) {
+                warnings.push(`${field.id}: ${path} has no columns.`);
+            }
+        }
+        if (!field.rules || field.rules.length === 0)
+            continue;
+        for (let r = 0; r < field.rules.length; r += 1) {
+            const rule = field.rules[r];
+            for (let c = 0; c < rule.conditions.length; c += 1) {
+                const cond = rule.conditions[c];
+                const condPath = `${path}.rules[${r}].conditions[${c}]`;
+                const isExpression = cond.conditionType === 'expression' ||
+                    (!!cond.expression && cond.expression.trim().length > 0);
+                if (isExpression) {
+                    const expression = cond.expression?.trim() ?? '';
+                    if (!expression) {
+                        warnings.push(`${field.id}: ${condPath} has empty expression.`);
+                        continue;
+                    }
+                    if (!isExpressionValid(expression)) {
+                        warnings.push(`${field.id}: invalid expression at ${condPath} -> ${expression}`);
+                        continue;
+                    }
+                    const refs = extractExpressionFieldRefs(expression);
+                    for (const ref of refs) {
+                        if (!allIds.has(ref)) {
+                            warnings.push(`${field.id}: ${condPath} references missing field '{${ref}}'.`);
+                        }
+                    }
+                    continue;
+                }
+                if (!cond.targetId) {
+                    warnings.push(`${field.id}: ${condPath} is missing targetId.`);
+                }
+                else if (!allIds.has(cond.targetId)) {
+                    warnings.push(`${field.id}: ${condPath} targetId '${cond.targetId}' does not exist.`);
+                }
+                if (!cond.operator) {
+                    warnings.push(`${field.id}: ${condPath} is missing operator.`);
+                }
+            }
+        }
+    }
+    return warnings;
+}
+function formatDryRunDetails(result) {
+    try {
+        return JSON.stringify(result, null, 2);
+    }
+    catch {
+        return 'Unable to serialize dry-run output.';
+    }
+}
+/**
+ * BuilderHeader — top bar with Build/Code/Preview mode toggle and Import/Export actions.
+ */
+export function BuilderHeader(_props) {
+    const fileInputRef = React.useRef(null);
+    const [exportIdModalOpen, setExportIdModalOpen] = React.useState(false);
+    const [exportIdInput, setExportIdInput] = React.useState('');
+    const [exportIdError, setExportIdError] = React.useState('');
+    const [exportFormat, setExportFormat] = React.useState('esheet');
+    const [feedback, setFeedback] = React.useState({
+        open: false,
+        title: '',
+        message: '',
+        details: undefined,
+        variant: 'info',
+    });
+    const [dryRunFeedback, setDryRunFeedback] = React.useState({
+        open: false,
+        title: '',
+        message: '',
+        details: undefined,
+        variant: 'info',
+    });
+    const showFeedback = React.useCallback((variant, title, message, details, issues, issuesTitle, issuesHint) => {
+        setFeedback({
+            open: true,
+            variant,
+            title,
+            message,
+            details,
+            issues,
+            issuesTitle,
+            issuesHint,
+        });
+    }, []);
+    const showDryRunFeedback = React.useCallback((variant, title, message, details) => {
+        setDryRunFeedback({ open: true, variant, title, message, details });
+    }, []);
+    const { mode, codeEditorHasError: codeHasError, setMode } = useUiApi();
+    const { _form: form } = useFormApi();
+    React.useEffect(() => {
+        if (mode !== 'preview') {
+            setDryRunFeedback((prev) => prev.open
+                ? {
+                    ...prev,
+                    open: false,
+                }
+                : prev);
+        }
+    }, [mode]);
+    const finalizeExport = React.useCallback((definition) => {
+        const json = JSON.stringify(definition, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${definition.id}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }, []);
+    const handleConfirmExportId = React.useCallback(() => {
+        if (exportFormat === 'mcp') {
+            const definition = form.getState().hydrateDefinition();
+            const schema = exportToMcp(definition);
+            const filename = (definition.id || 'form') + '-mcp-schema.json';
+            const blob = new Blob([JSON.stringify(schema, null, 2)], {
+                type: 'application/json',
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            a.click();
+            URL.revokeObjectURL(url);
+            setExportIdModalOpen(false);
+            return;
+        }
+        if (exportFormat === 'fhir') {
+            const definition = form.getState().hydrateDefinition();
+            const fhirQuestionnaire = exportToFhir(definition);
+            const filename = (definition.id || 'form') + '-fhir-questionnaire.json';
+            const blob = new Blob([JSON.stringify(fhirQuestionnaire, null, 2)], {
+                type: 'application/json',
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            a.click();
+            URL.revokeObjectURL(url);
+            setExportIdModalOpen(false);
+            return;
+        }
+        const nextId = sanitizeFormId(exportIdInput);
+        if (!nextId) {
+            setExportIdError('Enter a valid id (letters, numbers, dashes, underscores).');
+            return;
+        }
+        form.getState().setFormId(nextId);
+        const definition = form.getState().hydrateDefinition();
+        finalizeExport(definition);
+        setExportIdModalOpen(false);
+        setExportIdError('');
+    }, [exportFormat, exportIdInput, finalizeExport, form]);
+    const handleExport = () => {
+        const definition = form.getState().hydrateDefinition();
+        const currentId = definition.id.trim();
+        const suggested = currentId || sanitizeFormId(definition.title ?? 'form') || 'form';
+        setExportIdInput(suggested);
+        setExportIdError('');
+        setExportIdModalOpen(true);
+    };
+    const handleImport = (e) => {
+        const file = e.currentTarget.files?.[0];
+        if (!file)
+            return;
+        const fileName = file.name.toLowerCase();
+        const isYaml = fileName.endsWith('.yaml') || fileName.endsWith('.yml');
+        const fileFormat = isYaml ? 'YAML' : 'JSON';
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+            try {
+                const content = ev.target?.result;
+                const parsed = isYaml ? YAML.load(content) : JSON.parse(content);
+                // Auto-detect MCP elicitation schema (JSON only).
+                // Accepts: full elicitation/create envelope or raw requestedSchema object.
+                if (!isYaml) {
+                    if (isMcpElicitationRequest(parsed)) {
+                        const mcpReq = parsed;
+                        if (mcpReq.params.mode === 'url') {
+                            showFeedback('error', 'URL Mode Not Supported', 'This MCP elicitation uses URL mode (out-of-band). Only form mode schemas can be imported into the builder.');
+                            return;
+                        }
+                        const formDef = importFromMcp(mcpReq.params.requestedSchema, {
+                            formId: form.getState().hydrateDefinition().id || 'mcp-form',
+                            ...(typeof mcpReq.params.message === 'string' &&
+                                mcpReq.params.message.length > 0
+                                ? { description: mcpReq.params.message }
+                                : {}),
+                            mcpId: mcpReq.id,
+                            mcpMessage: mcpReq.params.message,
+                        });
+                        form.getState().loadDefinition(formDef);
+                        showFeedback('success', 'Import Successful', `Loaded ${formDef.fields.length} field(s) from MCP elicitation schema.`);
+                        return;
+                    }
+                    // Raw requestedSchema: { type: 'object', properties: {...} }
+                    const p = parsed;
+                    if (p?.type === 'object' && p?.properties) {
+                        const formDef = importFromMcp(p, {
+                            formId: form.getState().hydrateDefinition().id || 'mcp-form',
+                        });
+                        form.getState().loadDefinition(formDef);
+                        showFeedback('success', 'Import Successful', `Loaded ${formDef.fields.length} field(s) from MCP elicitation schema.`);
+                        return;
+                    }
+                }
+                if (!isYaml && isFhirQuestionnaire(parsed)) {
+                    const formDef = importFromFhir(parsed);
+                    form.getState().loadDefinition(formDef);
+                    const meta = formDef._sourceData;
+                    const allWarnings = meta?._conversionWarnings ?? [];
+                    // Split by severity: info vs warning/error
+                    const infoItems = allWarnings.filter((w) => w.severity === 'info');
+                    const warnItems = allWarnings.filter((w) => w.severity !== 'info');
+                    const hasActualWarnings = warnItems.length > 0;
+                    if (allWarnings.length > 0) {
+                        const items = hasActualWarnings ? warnItems : infoItems;
+                        const prefix = hasActualWarnings ? '⚠️' : 'ℹ️';
+                        showFeedback(hasActualWarnings ? 'warning' : 'success', hasActualWarnings
+                            ? 'Import Successful (with warnings)'
+                            : 'Import Successful', `Loaded ${formDef.fields.length} field(s) from FHIR Questionnaire.`, undefined, items.map((w) => `${prefix} [${w.code}] ${w.itemLinkId ?? 'form'}: ${w.message}`), hasActualWarnings ? 'Import Warnings' : 'Import Notes');
+                    }
+                    else {
+                        showFeedback('success', 'Import Successful', `Loaded ${formDef.fields.length} field(s) from FHIR Questionnaire.`);
+                    }
+                    return;
+                }
+                if (!isYaml && isSurveyJSSchema(parsed)) {
+                    const formDef = convertSurveyJS(parsed);
+                    form.getState().loadDefinition(formDef);
+                    showFeedback('success', 'Import Successful', `Loaded ${formDef.fields.length} field(s) from SurveyJS schema.`);
+                    return;
+                }
+                const validated = formDefinitionSchema.safeParse(parsed);
+                if (!validated.success) {
+                    const issues = validated.error.issues.map(formatZodValidationError);
+                    const shownIssues = issues.slice(0, 8);
+                    showFeedback('error', 'Import Failed', `The file is valid ${fileFormat} but does not match the form schema.`, issues.length > shownIssues.length
+                        ? `Showing ${shownIssues.length} of ${issues.length} issue(s).`
+                        : undefined, shownIssues, 'Unsupported Form Definition', 'Fix these issues, then try importing again.');
+                    return;
+                }
+                const importWarnings = collectImportWarnings(validated.data.fields);
+                if (importWarnings.length > 0) {
+                    const shownWarnings = importWarnings.slice(0, 10);
+                    showFeedback('error', 'Import Blocked', `This definition contains ${importWarnings.length} unsupported issue(s) and was not imported.`, importWarnings.length > shownWarnings.length
+                        ? `Showing ${shownWarnings.length} of ${importWarnings.length} issue(s).`
+                        : undefined, shownWarnings, 'Unsupported Configuration', 'Resolve these issues before importing this file.');
+                    return;
+                }
+                form.getState().loadDefinition(validated.data);
+                showFeedback('success', 'Import Successful', `Loaded ${validated.data.fields.length} field(s).`);
+            }
+            catch {
+                showFeedback('error', 'Import Failed', `Invalid ${fileFormat} file format.`);
+            }
+        };
+        reader.readAsText(file);
+        // Reset so the same file can be re-imported
+        e.currentTarget.value = '';
+    };
+    const handleDryRunSubmit = () => {
+        const state = form.getState();
+        const errors = state.getErrors();
+        if (errors.length > 0) {
+            const result = {
+                wouldSubmit: false,
+                errorCount: errors.length,
+                errors,
+                response: null,
+            };
+            showDryRunFeedback('warning', 'Dry Run Submit Failed', `Submit would fail validation with ${errors.length} error(s).`, formatDryRunDetails(result));
+            return;
+        }
+        const response = state.hydrateResponse({ status: 'draft' });
+        const result = {
+            wouldSubmit: true,
+            errorCount: 0,
+            errors: [],
+            response,
+        };
+        showDryRunFeedback('success', 'Dry Run Submit Passed', 'Submit would pass validation.', formatDryRunDetails(result));
+    };
+    return (_jsxs("header", { className: "builder-header ms:w-full ms:bg-mssurface ms:border ms:border-msborder ms:rounded-lg ms:shadow-sm ms:shrink-0", children: [_jsx(FeedbackModal, { open: exportIdModalOpen, title: "Export Form", message: exportFormat === 'mcp' || exportFormat === 'fhir'
+                    ? 'Choose a format to export your form.'
+                    : `Do you want to use '${sanitizeFormId(exportIdInput) || exportIdInput}' as the form id? You can edit it below before exporting.`, content: _jsxs("div", { className: "ms:space-y-4 ms:mb-2", children: [_jsxs("div", { className: "ms:flex ms:gap-4", children: [_jsxs("label", { className: "ms:flex ms:items-center ms:gap-2 ms:text-sm ms:text-mstext ms:cursor-pointer", children: [_jsx("input", { type: "radio", name: "export-format", value: "esheet", checked: exportFormat === 'esheet', onChange: () => setExportFormat('esheet') }), "eSheet JSON"] }), _jsxs("label", { className: "ms:flex ms:items-center ms:gap-2 ms:text-sm ms:text-mstext ms:cursor-pointer", children: [_jsx("input", { type: "radio", name: "export-format", value: "mcp", checked: exportFormat === 'mcp', onChange: () => setExportFormat('mcp') }), "MCP Elicitation Schema"] }), _jsxs("label", { className: "ms:flex ms:items-center ms:gap-2 ms:text-sm ms:text-mstext ms:cursor-pointer", children: [_jsx("input", { type: "radio", name: "export-format", value: "fhir", checked: exportFormat === 'fhir', onChange: () => setExportFormat('fhir') }), "FHIR R4 Questionnaire"] })] }), exportFormat === 'esheet' && (_jsxs("div", { className: "ms:space-y-2", children: [_jsx("label", { htmlFor: `${form.getState().instanceId}-export-form-id`, className: "ms:block ms:text-sm ms:font-medium ms:text-mstext", children: "Form ID" }), _jsx("input", { id: `${form.getState().instanceId}-export-form-id`, "aria-label": "Form ID", type: "text", value: exportIdInput, onChange: (e) => {
+                                        setExportIdInput(e.target.value);
+                                        if (exportIdError)
+                                            setExportIdError('');
+                                    }, placeholder: "my-form-id", className: "ms:px-3 ms:py-2 ms:h-10 ms:w-full ms:border ms:border-msborder ms:bg-mssurface ms:text-mstext ms:rounded-lg ms:focus:border-msprimary ms:focus:ring-1 ms:focus:ring-msprimary/30 ms:outline-none ms:transition-colors" }), exportIdError && (_jsx("p", { className: "ms:text-xs ms:text-msdanger", children: exportIdError }))] })), exportFormat === 'mcp' && (_jsxs("p", { className: "ms:text-sm ms:text-mstextmuted", children: ["Exports as a flat", ' ', _jsx("code", { className: "ms:font-mono ms:text-xs ms:bg-msbackground ms:px-1 ms:py-0.5 ms:rounded", children: "requestedSchema" }), ' ', "object. Field IDs, required fields, and supported types are preserved. Unsupported types (matrix, signature, etc.) are omitted."] })), exportFormat === 'fhir' && (_jsxs("p", { className: "ms:text-sm ms:text-mstextmuted", children: ["Exports as a FHIR R4", ' ', _jsx("code", { className: "ms:font-mono ms:text-xs ms:bg-msbackground ms:px-1 ms:py-0.5 ms:rounded", children: "Questionnaire" }), ' ', "resource. Supports standard item types, enableWhen logic, and common extensions. DTR profiles are applied when applicable."] }))] }), variant: "info", confirmLabel: exportFormat === 'mcp'
+                    ? 'Export MCP Schema'
+                    : exportFormat === 'fhir'
+                        ? 'Export FHIR Questionnaire'
+                        : 'Use This ID & Export', cancelLabel: "Cancel", showCancel: true, onConfirm: handleConfirmExportId, onClose: () => {
+                    setExportIdModalOpen(false);
+                    setExportIdError('');
+                } }), _jsx(FeedbackModal, { open: feedback.open, title: feedback.title, message: feedback.message, details: feedback.details, issues: feedback.issues, issuesTitle: feedback.issuesTitle, issuesHint: feedback.issuesHint, variant: feedback.variant, onClose: () => setFeedback((prev) => ({
+                    ...prev,
+                    open: false,
+                })) }), _jsx("div", { className: "ms:hidden ms:lg:block", children: _jsx(FeedbackModal, { open: dryRunFeedback.open, title: dryRunFeedback.title, message: dryRunFeedback.message, details: dryRunFeedback.details, variant: dryRunFeedback.variant, onClose: () => setDryRunFeedback((prev) => ({
+                        ...prev,
+                        open: false,
+                    })) }) }), dryRunFeedback.open && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "ms:lg:hidden ms:fixed ms:inset-0 ms:z-40 ms:bg-msoverlay ms:border-0", onClick: () => setDryRunFeedback((prev) => ({
+                            ...prev,
+                            open: false,
+                        })), "aria-label": "Close Dry Run result drawer" }), _jsxs("div", { className: "ms:lg:hidden ms:fixed ms:left-0 ms:right-0 ms:bottom-0 ms:z-50 ms:h-[50dvh] ms:bg-mssurface ms:border-t ms:border-msborder ms:rounded-t-2xl ms:shadow-2xl ms:overflow-hidden", children: [_jsxs("div", { className: "ms:flex ms:items-center ms:justify-between ms:px-4 ms:py-2 ms:border-b ms:border-msborder", children: [_jsx("span", { className: "ms:text-sm ms:font-medium ms:text-mstext", children: "Dry Run Result" }), _jsx("button", { type: "button", onClick: () => setDryRunFeedback((prev) => ({
+                                            ...prev,
+                                            open: false,
+                                        })), className: "ms:px-2 ms:py-1 ms:bg-transparent ms:text-mstextmuted ms:border-0 ms:outline-none ms:focus:outline-none", "aria-label": "Close Dry Run result drawer", children: "Close" })] }), _jsxs("div", { className: "ms:h-[calc(50dvh-45px)] ms:overflow-y-auto ms:p-4 ms:space-y-3", children: [_jsx("h3", { className: "ms:text-sm ms:font-semibold ms:text-mstext", children: dryRunFeedback.title }), _jsx("p", { className: "ms:text-sm ms:text-mstextmuted", children: dryRunFeedback.message }), dryRunFeedback.details && (_jsx("pre", { className: "ms:rounded-lg ms:border ms:border-msborder ms:bg-msbackground ms:p-3 ms:text-xs ms:overflow-auto ms:whitespace-pre-wrap ms:break-words ms:text-mstext", children: dryRunFeedback.details }))] })] })] })), _jsx("div", { className: "ms:px-4 ms:py-4", children: _jsxs("div", { className: "ms:flex ms:flex-wrap ms:items-center ms:justify-between ms:gap-3", children: [_jsx("div", { className: "mode-toggle ms:flex ms:gap-1 ms:rounded-lg ms:border ms:border-msborder ms:bg-msbackground ms:p-1 ms:w-fit", children: MODES.map(({ value, label, Icon }) => (_jsxs("button", { type: "button", onClick: () => setMode(value), disabled: codeHasError && value !== 'code', className: `mode-btn ms:flex ms:items-center ms:justify-center ms:gap-2 ms:px-2 ms:lg:px-4 ms:py-2 ms:rounded-lg ms:text-xs ms:lg:text-sm ms:font-medium ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none ${codeHasError && value !== 'code'
+                                    ? 'ms:bg-transparent ms:text-mstextmuted/50 ms:cursor-not-allowed'
+                                    : 'ms:cursor-pointer'} ${mode === value
+                                    ? 'ms:bg-msprimary ms:text-mstextsecondary ms:shadow-sm'
+                                    : 'ms:bg-transparent ms:text-mstextmuted ms:hover:text-mstext ms:hover:bg-mssurface'}`, children: [_jsx(Icon, { className: "ms:w-5 ms:h-5" }), _jsx("span", { children: label })] }, value))) }), _jsxs("div", { className: "header-actions ms:flex ms:gap-1 ms:items-center", children: [_jsxs("label", { className: "header-import-label ms:group ms:px-2 ms:py-2 ms:lg:px-3 ms:lg:py-2 ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface ms:hover:bg-msprimary ms:hover:text-mstextsecondary ms:hover:border-msprimary ms:cursor-pointer ms:text-xs ms:lg:text-sm ms:font-medium ms:transition-colors ms:flex ms:items-center ms:lg:gap-2 ms:gap-0 ms:text-mstext", children: [_jsx(UploadIcon, { className: "ms:w-4 ms:h-4 ms:text-mstext ms:group-hover:text-mstextsecondary ms:transition-colors" }), _jsx("span", { className: "ms:hidden ms:sm:inline", children: "Import" }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".json,.yaml,.yml,application/json,application/x-yaml,text/yaml", onChange: handleImport, "aria-label": "Import form (JSON or YAML)", className: "ms:hidden" })] }), _jsxs("button", { type: "button", onClick: handleExport, className: "export-btn ms:group ms:px-2 ms:py-2 ms:lg:px-3 ms:lg:py-2 ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface ms:hover:bg-msprimary ms:hover:text-mstextsecondary ms:hover:border-msprimary ms:text-xs ms:lg:text-sm ms:font-medium ms:transition-colors ms:flex ms:items-center ms:lg:gap-2 ms:gap-0 ms:outline-none ms:focus:outline-none ms:text-mstext ms:cursor-pointer", title: "Export", children: [_jsx(DownloadIcon, { className: "ms:w-4 ms:h-4 ms:text-mstext ms:group-hover:text-mstextsecondary ms:transition-colors" }), _jsx("span", { className: "ms:hidden ms:sm:inline", children: "Export" })] }), mode === 'preview' && (_jsxs("button", { type: "button", onClick: handleDryRunSubmit, "aria-label": "Dry run submit", title: "Dry Run Submit", className: "dry-run-submit-btn ms:group ms:px-2 ms:py-2 ms:lg:px-3 ms:lg:py-2 ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface ms:hover:bg-msprimary ms:hover:text-mstextsecondary ms:hover:border-msprimary ms:text-xs ms:lg:text-sm ms:font-medium ms:transition-colors ms:flex ms:items-center ms:lg:gap-2 ms:gap-0 ms:outline-none ms:focus:outline-none ms:text-mstext ms:cursor-pointer", children: [_jsx("span", { className: "ms:hidden ms:sm:inline", children: "Dry Run Submit" }), _jsx("span", { className: "ms:sm:hidden", children: "Dry Run" })] }))] })] }) })] }));
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { FormStore, UIStore } from '@esheet/core';
+export interface CanvasProps {
+    /** The form store */
+    form: FormStore;
+    /** The UI store */
+    ui: UIStore;
+    /** Whether drag-and-drop reordering is enabled (default: true) */
+    dragEnabled?: boolean;
+}
+export declare const Canvas: React.NamedExoticComponent<CanvasProps>;
+//# sourceMappingURL=Canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAuB,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAS5E,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,mBAAmB;IACnB,EAAE,EAAE,OAAO,CAAC;IACZ,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqFD,eAAO,MAAM,MAAM,yCAkZjB,CAAC"}