@esheet/builder 0.0.4-0 → 0.0.4-2

package/dist/lib/components/edit-panel/LogicEditor.js

@@ -0,0 +1,392 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { CONDITION_OPERATORS, CONDITIONAL_EFFECTS, getFieldTypeMeta, hasOptions, isExpressionValid, } from '@esheet/core';
+import { TrashIcon, PlusIcon } from '../../icons.js';
+import { useInstanceId } from '../../EsheetBuilder.js';
+import { useFormApi } from '../../hooks/useFormApi.js';
+/**
+ * LogicEditor — manage conditional rules (visible / enable / required)
+ * for the selected field.
+ *
+ * Rules are grouped by effect. Multiple rules with the same effect
+ * use OR semantics (any rule can trigger the effect). Within a rule,
+ * conditions combine with the rule's logic mode (AND / OR).
+ */
+export function LogicEditor({ fieldId, rules }) {
+    const instanceId = useInstanceId();
+    const { normalized, field_ } = useFormApi(fieldId);
+    const otherFields = React.useMemo(() => buildOtherFields(normalized, fieldId), [normalized, fieldId]);
+    const updateRules = (next) => {
+        field_.update({ rules: next });
+    };
+    // ── Handlers ────────────────────────────────────────────────
+    const handleAddRule = (effect) => {
+        // Pick a default target — first available field
+        const defaultTarget = otherFields.length > 0 ? otherFields[0].id : '';
+        const newRule = {
+            effect,
+            logic: 'AND',
+            conditions: [
+                {
+                    conditionType: 'field',
+                    targetId: defaultTarget,
+                    operator: 'equals',
+                    expected: '',
+                },
+            ],
+        };
+        updateRules([...rules, newRule]);
+    };
+    const handleRemoveRule = (ruleIdx) => {
+        updateRules(rules.filter((_, i) => i !== ruleIdx));
+    };
+    const handleUpdateRule = (ruleIdx, patch) => {
+        updateRules(rules.map((r, i) => (i === ruleIdx ? { ...r, ...patch } : r)));
+    };
+    const handleUpdateCondition = (ruleIdx, condIdx, patch) => {
+        updateRules(rules.map((r, i) => {
+            if (i !== ruleIdx)
+                return r;
+            const conditions = r.conditions.map((c, j) => j === condIdx ? { ...c, ...patch } : c);
+            return { ...r, conditions };
+        }));
+    };
+    const handleAddCondition = (ruleIdx) => {
+        const defaultTarget = otherFields.length > 0 ? otherFields[0].id : '';
+        updateRules(rules.map((r, i) => {
+            if (i !== ruleIdx)
+                return r;
+            return {
+                ...r,
+                conditions: [
+                    ...r.conditions,
+                    {
+                        conditionType: 'field',
+                        targetId: defaultTarget,
+                        operator: 'equals',
+                        expected: '',
+                    },
+                ],
+            };
+        }));
+    };
+    const handleRemoveCondition = (ruleIdx, condIdx) => {
+        const next = rules.flatMap((r, i) => {
+            if (i !== ruleIdx)
+                return [r];
+            const conditions = r.conditions.filter((_, j) => j !== condIdx);
+            return conditions.length === 0 ? [] : [{ ...r, conditions }];
+        });
+        updateRules(next);
+    };
+    // ── Group rules by effect ──────────────────────────────────
+    const grouped = groupByEffect(rules);
+    if (otherFields.length === 0) {
+        return (_jsx("div", { className: "logic-editor-empty ms:text-sm ms:text-mstextmuted ms:text-center ms:py-6", children: "Add more fields to the form to create logic rules." }));
+    }
+    return (_jsx("div", { className: "logic-editor ms:space-y-5", children: CONDITIONAL_EFFECTS.map((effect) => (_jsx(EffectSection, { instanceId: instanceId, fieldId: fieldId, effect: effect, ruleEntries: grouped[effect], otherFields: otherFields, onAddRule: () => handleAddRule(effect), onRemoveRule: handleRemoveRule, onUpdateRule: handleUpdateRule, onAddCondition: handleAddCondition, onRemoveCondition: handleRemoveCondition, onUpdateCondition: handleUpdateCondition }, effect))) }));
+}
+const EFFECT_LABELS = {
+    visible: 'Visible',
+    enable: 'Enable',
+    required: 'Required',
+};
+const EFFECT_DESCRIPTIONS = {
+    visible: 'Show this field when…',
+    enable: 'Enable this field when…',
+    required: 'Require this field when…',
+};
+function EffectSection({ instanceId, fieldId, effect, ruleEntries, otherFields, onAddRule, onRemoveRule, onUpdateRule, onAddCondition, onRemoveCondition, onUpdateCondition, }) {
+    const hasRules = ruleEntries.length > 0;
+    return (_jsxs("div", { className: "effect-section ms:space-y-2", children: [_jsxs("div", { className: "effect-header ms:flex ms:items-center ms:justify-between", children: [_jsxs("div", { children: [_jsx("span", { className: "ms:text-sm ms:font-medium ms:text-mstext", children: EFFECT_LABELS[effect] }), _jsx("span", { className: "ms:text-xs ms:text-mstextmuted ms:ml-2", children: hasRules
+                                    ? `${ruleEntries.length} rule${ruleEntries.length > 1 ? 's' : ''}`
+                                    : 'Always' })] }), _jsxs("button", { type: "button", onClick: onAddRule, "aria-label": `Add ${effect} rule`, className: "add-rule-btn ms:flex ms:items-center ms:gap-1 ms:px-2 ms:py-1 ms:text-xs ms:font-medium ms:bg-transparent ms:text-msprimary ms:border ms:border-msprimary/40 ms:rounded ms:hover:bg-msprimary/10 ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: [_jsx(PlusIcon, { className: "ms:w-3 ms:h-3" }), _jsx("span", { children: "Rule" })] })] }), ruleEntries.map(({ rule, globalIdx }, localIdx) => (_jsxs(React.Fragment, { children: [localIdx > 0 && (_jsx("div", { className: "or-divider ms:text-xs ms:text-mstextmuted ms:text-center ms:py-0.5", children: "\u2014 OR \u2014" })), _jsx(RuleCard, { instanceId: instanceId, fieldId: fieldId, rule: rule, globalIdx: globalIdx, otherFields: otherFields, onRemove: () => onRemoveRule(globalIdx), onUpdate: (patch) => onUpdateRule(globalIdx, patch), onAddCondition: () => onAddCondition(globalIdx), onRemoveCondition: (condIdx) => onRemoveCondition(globalIdx, condIdx), onUpdateCondition: (condIdx, patch) => onUpdateCondition(globalIdx, condIdx, patch) })] }, globalIdx))), !hasRules && (_jsx("div", { className: "ms:text-xs ms:text-mstextmuted ms:italic", children: EFFECT_DESCRIPTIONS[effect] }))] }));
+}
+function RuleCard({ instanceId, fieldId, rule, globalIdx, otherFields, onRemove, onUpdate, onAddCondition, onRemoveCondition, onUpdateCondition, }) {
+    return (_jsxs("div", { className: "rule-card ms:border ms:border-msborder ms:rounded-lg ms:bg-mssurface ms:shadow-sm", children: [_jsxs("div", { className: "rule-header ms:flex ms:items-center ms:justify-between ms:px-3 ms:py-2 ms:border-b ms:border-msborder ms:bg-msbackground ms:rounded-t-lg", children: [_jsxs("div", { className: "ms:flex ms:items-center ms:gap-2", children: [_jsx("span", { className: "ms:text-xs ms:text-mstextmuted", children: "Match" }), _jsx(LogicToggle, { instanceId: instanceId, fieldId: fieldId, ruleIdx: globalIdx, value: rule.logic, onChange: (logic) => onUpdate({ logic }) }), _jsx("span", { className: "ms:text-xs ms:text-mstextmuted", children: rule.logic === 'AND' ? 'all conditions' : 'any condition' })] }), _jsx("button", { type: "button", onClick: onRemove, "aria-label": "Remove rule", className: "remove-rule-btn ms:p-1 ms:rounded ms:bg-transparent ms:text-mstextmuted ms:hover:text-msdanger ms:border-0 ms:outline-none ms:focus:outline-none ms:transition-colors ms:cursor-pointer", children: _jsx(TrashIcon, { className: "ms:w-3.5 ms:h-3.5" }) })] }), _jsxs("div", { className: "rule-conditions ms:p-3 ms:space-y-3", children: [rule.conditions.map((cond, condIdx) => (_jsx(ConditionRow, { instanceId: instanceId, fieldId: fieldId, ruleIdx: globalIdx, condIdx: condIdx, condition: cond, otherFields: otherFields, onUpdate: (patch) => onUpdateCondition(condIdx, patch), onRemove: () => onRemoveCondition(condIdx), canRemove: rule.conditions.length > 1 }, condIdx))), _jsx("button", { type: "button", onClick: onAddCondition, className: "add-condition-btn ms:w-full ms:px-2 ms:py-1.5 ms:text-xs ms:font-medium ms:bg-transparent ms:text-msprimary ms:border ms:border-dashed ms:border-msprimary/40 ms:rounded ms:hover:bg-msprimary/10 ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: "+ Add Condition" })] })] }));
+}
+function LogicToggle({ instanceId, fieldId, ruleIdx, value, onChange, }) {
+    const id = `${instanceId}-logic-toggle-${fieldId}-${ruleIdx}`;
+    return (_jsxs("div", { className: "logic-toggle ms:flex ms:rounded ms:border ms:border-msborder ms:overflow-hidden", children: [_jsx("button", { type: "button", id: `${id}-and`, "aria-label": "Match all conditions (AND)", onClick: () => onChange('AND'), className: `ms:px-2 ms:py-0.5 ms:text-xs ms:font-medium ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ms:transition-colors ${value === 'AND'
+                    ? 'ms:bg-msprimary ms:text-mstextsecondary'
+                    : 'ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msbackgroundhover'}`, children: "AND" }), _jsx("button", { type: "button", id: `${id}-or`, "aria-label": "Match any condition (OR)", onClick: () => onChange('OR'), className: `ms:px-2 ms:py-0.5 ms:text-xs ms:font-medium ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ms:transition-colors ${value === 'OR'
+                    ? 'ms:bg-msprimary ms:text-mstextsecondary'
+                    : 'ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msbackgroundhover'}`, children: "OR" })] }));
+}
+const EXPRESSION_OPERATOR_CHIPS = [
+    '>',
+    '>=',
+    '<',
+    '<=',
+    '==',
+    '!=',
+    '===',
+    '!==',
+    '&&',
+    '||',
+    '+',
+    '-',
+    '*',
+    '/',
+];
+/** Operators that don't need an expected value. */
+const UNARY_OPERATORS = new Set(['empty', 'notEmpty']);
+/** Operators that only make sense for numeric / countable values. */
+const NUMERIC_OPERATORS = new Set([
+    'greaterThan',
+    'greaterThanOrEqual',
+    'lessThan',
+    'lessThanOrEqual',
+]);
+const OPERATOR_LABELS = {
+    equals: 'equals',
+    notEquals: 'not equals',
+    contains: 'contains',
+    includes: 'includes',
+    empty: 'is empty',
+    notEmpty: 'is not empty',
+    greaterThan: '>',
+    greaterThanOrEqual: '>=',
+    lessThan: '<',
+    lessThanOrEqual: '<=',
+};
+function ConditionRow({ instanceId, fieldId, ruleIdx, condIdx, condition, otherFields, onUpdate, onRemove, canRemove, }) {
+    const idPrefix = `${instanceId}-logic-cond-${fieldId}-${ruleIdx}-${condIdx}`;
+    const conditionType = condition.conditionType ?? 'field';
+    const target = otherFields.find((f) => f.id === (condition.targetId ?? ''));
+    const operator = condition.operator ?? 'equals';
+    const isUnary = UNARY_OPERATORS.has(operator);
+    // Assisted expression state
+    const inputRef = React.useRef(null);
+    const [fieldPickerOpen, setFieldPickerOpen] = React.useState(false);
+    const knownFieldIds = React.useMemo(() => new Set(otherFields.map((f) => f.id)), [otherFields]);
+    const expressionErrors = React.useMemo(() => validateExpressionLocally(condition.expression ?? '', knownFieldIds, otherFields), [condition.expression, knownFieldIds, otherFields]);
+    React.useEffect(() => {
+        if (!fieldPickerOpen)
+            return;
+        const handleClick = () => setFieldPickerOpen(false);
+        document.addEventListener('click', handleClick);
+        return () => document.removeEventListener('click', handleClick);
+    }, [fieldPickerOpen]);
+    const insertAtCursor = React.useCallback((text) => {
+        const el = inputRef.current;
+        if (!el) {
+            onUpdate({ expression: (condition.expression ?? '') + text });
+            return;
+        }
+        const start = el.selectionStart ?? el.value.length;
+        const end = el.selectionEnd ?? el.value.length;
+        const next = el.value.slice(0, start) + text + el.value.slice(end);
+        const newCursor = start + text.length;
+        onUpdate({ expression: next });
+        requestAnimationFrame(() => {
+            el.setSelectionRange(newCursor, newCursor);
+            el.focus();
+        });
+    }, [condition.expression, onUpdate]);
+    // Determine available operators based on target type
+    const availableOperators = getAvailableOperators(target, condition.propertyAccessor);
+    // If target changed and operator is now invalid, reset it
+    const resolvedOperator = conditionType === 'field' && availableOperators.includes(operator)
+        ? operator
+        : availableOperators[0];
+    if (conditionType === 'field' && resolvedOperator !== condition.operator) {
+        // Schedule reset for next tick to avoid render-during-render
+        Promise.resolve().then(() => onUpdate({ operator: resolvedOperator, expected: '' }));
+    }
+    return (_jsxs("div", { className: "condition-row ms:flex ms:flex-col ms:gap-1.5 ms:p-2.5 ms:border ms:border-msborder ms:rounded-md ms:bg-msbackground", children: [_jsxs("div", { className: "ms:flex ms:items-center ms:justify-between ms:gap-1.5", children: [_jsxs("div", { className: "ms:inline-flex ms:rounded ms:border ms:border-msborder ms:overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onUpdate({
+                                    conditionType: 'field',
+                                    expression: '',
+                                    targetId: condition.targetId || otherFields[0]?.id || '',
+                                    operator: 'equals',
+                                    expected: '',
+                                }), className: `ms:px-2 ms:py-0.5 ms:text-xs ms:font-medium ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ms:transition-colors ${conditionType === 'field'
+                                    ? 'ms:bg-msprimary ms:text-mstextsecondary'
+                                    : 'ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msbackgroundhover'}`, children: "Field" }), _jsx("button", { type: "button", onClick: () => onUpdate({
+                                    conditionType: 'expression',
+                                    expression: condition.expression ?? '',
+                                    targetId: undefined,
+                                    propertyAccessor: undefined,
+                                    operator: undefined,
+                                    expected: undefined,
+                                }), className: `ms:px-2 ms:py-0.5 ms:text-xs ms:font-medium ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ms:transition-colors ${conditionType === 'expression'
+                                    ? 'ms:bg-msprimary ms:text-mstextsecondary'
+                                    : 'ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msbackgroundhover'}`, children: "Expression" })] }), canRemove && (_jsx("button", { type: "button", onClick: onRemove, "aria-label": `Remove condition ${condIdx + 1}`, className: "remove-condition-btn ms:shrink-0 ms:p-1.5 ms:rounded ms:bg-transparent ms:text-mstextmuted ms:hover:text-msdanger ms:border-0 ms:outline-none ms:focus:outline-none ms:transition-colors ms:cursor-pointer", children: _jsx(TrashIcon, { className: "ms:w-3.5 ms:h-3.5" }) }))] }), conditionType === 'field' ? (_jsxs("select", { id: `${idPrefix}-target`, "aria-label": "Target field", value: condition.targetId ?? '', onChange: (e) => onUpdate({ targetId: e.currentTarget.value, expected: '' }), className: "condition-target ms:w-full ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary ms:cursor-pointer", children: [!target && condition.targetId && (_jsxs("option", { value: condition.targetId, children: ["\u26A0 ", condition.targetId, " (missing)"] })), otherFields.map((f) => (_jsxs("option", { value: f.id, children: [f.label, " (", f.fieldType, ")"] }, f.id)))] })) : (_jsxs("div", { className: "ms:flex ms:flex-col ms:gap-1.5", children: [_jsx("input", { ref: inputRef, id: `${idPrefix}-expression`, "aria-label": "Expression", type: "text", value: condition.expression ?? '', onChange: (e) => onUpdate({ expression: e.currentTarget.value }), placeholder: "{fieldId} > 0", className: "condition-expression-input ms:w-full ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:font-mono ms:placeholder:text-mstextmuted ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary" }), _jsxs("div", { className: "condition-expression-toolbar ms:flex ms:flex-wrap ms:items-center ms:gap-1", children: [_jsxs("div", { className: "ms:relative", children: [_jsxs("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            setFieldPickerOpen((v) => !v);
+                                        }, className: "condition-field-picker-btn ms:px-1.5 ms:py-0.5 ms:text-xs ms:font-medium ms:bg-transparent ms:text-msprimary ms:border ms:border-msprimary/40 ms:rounded ms:hover:bg-msprimary/10 ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: ['{ }', " Field"] }), fieldPickerOpen && (_jsx("div", { className: "condition-field-picker-dropdown ms:absolute ms:top-full ms:left-0 ms:mt-0.5 ms:z-50 ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:shadow-lg ms:min-w-max ms:max-h-48 ms:overflow-y-auto", onClick: (e) => e.stopPropagation(), children: otherFields.map((f) => (_jsxs("button", { type: "button", onClick: () => {
+                                                insertAtCursor(`{${f.id}}`);
+                                                setFieldPickerOpen(false);
+                                            }, className: "ms:flex ms:flex-col ms:w-full ms:px-2 ms:py-1.5 ms:text-left ms:bg-transparent ms:border-0 ms:text-mstext ms:hover:bg-msbackgroundhover ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: [_jsx("span", { className: "ms:text-xs ms:font-medium", children: f.label }), _jsx("span", { className: "ms:text-xs ms:text-mstextmuted ms:font-mono", children: '{' + f.id + '}' })] }, f.id))) }))] }), EXPRESSION_OPERATOR_CHIPS.map((op) => (_jsx("button", { type: "button", onClick: () => insertAtCursor(` ${op} `), className: "operator-chip ms:px-1.5 ms:py-0.5 ms:text-xs ms:font-mono ms:bg-transparent ms:text-mstextmuted ms:border ms:border-msborder ms:rounded ms:hover:bg-msbackgroundhover ms:hover:text-mstext ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: op }, op)))] }), expressionErrors.length > 0 && (_jsx("ul", { className: "condition-expression-errors ms:list-none ms:p-0 ms:m-0 ms:space-y-0.5", children: expressionErrors.map((err, i) => (_jsx("li", { className: "ms:text-xs ms:text-msdanger", children: err }, i))) }))] })), conditionType === 'field' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ms:flex ms:gap-1.5", children: [_jsxs("select", { id: `${idPrefix}-accessor`, "aria-label": "Property accessor", value: condition.propertyAccessor ?? '', onChange: (e) => onUpdate({
+                                    propertyAccessor: e.currentTarget.value || undefined,
+                                    expected: '',
+                                }), className: "condition-accessor ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary ms:cursor-pointer", children: [_jsx("option", { value: "", children: "value" }), _jsx("option", { value: "length", children: "length" }), _jsx("option", { value: "count", children: "count" })] }), _jsx("select", { id: `${idPrefix}-operator`, "aria-label": "Operator", value: resolvedOperator, onChange: (e) => onUpdate({
+                                    operator: e.currentTarget.value,
+                                    expected: '',
+                                }), className: "condition-operator ms:flex-1 ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary ms:cursor-pointer", children: availableOperators.map((op) => (_jsx("option", { value: op, children: OPERATOR_LABELS[op] }, op))) })] }), !isUnary && (_jsx(ExpectedValueInput, { idPrefix: idPrefix, target: target, condition: condition, onUpdate: onUpdate }))] }))] }));
+}
+function ExpectedValueInput({ idPrefix, target, condition, onUpdate, }) {
+    const operator = condition.operator ?? 'equals';
+    const expected = condition.expected ?? '';
+    // Boolean fields always compare as true/false (the stored option id for the
+    // Yes option is "o1" / true-ish, but the condition engine compares the
+    // option id directly). Show a hardcoded Yes/No picker using the actual
+    // option ids from the field so the condition value is always correct.
+    if (target?.fieldType === 'boolean') {
+        if (operator === 'equals' || operator === 'notEquals') {
+            const yesOpt = target.options?.find((o) => o.value.toLowerCase() === 'yes');
+            const noOpt = target.options?.find((o) => o.value.toLowerCase() === 'no');
+            return (_jsxs("select", { id: `${idPrefix}-expected`, "aria-label": "Expected value", value: expected, onChange: (e) => onUpdate({ expected: e.currentTarget.value }), className: "condition-expected ms:w-full ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary ms:cursor-pointer", children: [_jsx("option", { value: "", children: "Select a value\u2026" }), yesOpt && _jsx("option", { value: yesOpt.id, children: "Yes" }), noOpt && _jsx("option", { value: noOpt.id, children: "No" })] }));
+        }
+    }
+    // If target has options and we're using equals/notEquals/includes,
+    // show a dropdown of option values
+    if (target?.hasOptions && target.options && target.options.length > 0) {
+        if (operator === 'equals' ||
+            operator === 'notEquals' ||
+            operator === 'includes') {
+            return (_jsxs("select", { id: `${idPrefix}-expected`, "aria-label": "Expected value", value: expected, onChange: (e) => onUpdate({ expected: e.currentTarget.value }), className: "condition-expected ms:w-full ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary ms:cursor-pointer", children: [_jsx("option", { value: "", children: "Select a value\u2026" }), target.options.map((opt) => (_jsx("option", { value: opt.id, children: opt.value }, opt.id)))] }));
+        }
+    }
+    // Numeric operators → number input
+    if (NUMERIC_OPERATORS.has(operator) || condition.propertyAccessor) {
+        return (_jsx("input", { id: `${idPrefix}-expected`, "aria-label": "Expected value", type: "number", value: expected, onChange: (e) => onUpdate({ expected: e.currentTarget.value }), placeholder: "Enter a number", className: "condition-expected ms:w-full ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:placeholder:text-mstextmuted ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary" }));
+    }
+    // Default: text input
+    return (_jsx("input", { id: `${idPrefix}-expected`, "aria-label": "Expected value", type: "text", value: expected, onChange: (e) => onUpdate({ expected: e.currentTarget.value }), placeholder: "Enter expected value", className: "condition-expected ms:w-full ms:min-w-0 ms:px-2 ms:py-1.5 ms:text-xs ms:bg-mssurface ms:border ms:border-msborder ms:rounded ms:text-mstext ms:placeholder:text-mstextmuted ms:focus:outline-none ms:focus:ring-1 ms:focus:ring-msprimary" }));
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Resolve available operators based on target field type. */
+function getAvailableOperators(target, propertyAccessor) {
+    if (!target)
+        return [...CONDITION_OPERATORS];
+    if (propertyAccessor) {
+        return [
+            'equals',
+            'notEquals',
+            'greaterThan',
+            'greaterThanOrEqual',
+            'lessThan',
+            'lessThanOrEqual',
+        ];
+    }
+    return getOperatorsForTarget(target);
+}
+function getOperatorsForTarget(target) {
+    const answerType = target.answerType;
+    // Multi-value answers should use inclusion semantics, not scalar equality.
+    if (answerType === 'multiselection' || answerType === 'multitext') {
+        return ['includes', 'empty', 'notEmpty'];
+    }
+    // Matrix answers are object maps; only empty checks are meaningful without accessor.
+    if (answerType === 'matrix') {
+        return ['empty', 'notEmpty'];
+    }
+    // Single-value selection fields (radio/dropdown/boolean etc.).
+    if (answerType === 'selection') {
+        const ops = [
+            'equals',
+            'notEquals',
+            'empty',
+            'notEmpty',
+        ];
+        if (target.supportsNumericCompare) {
+            ops.push('greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual');
+        }
+        return ops;
+    }
+    // Text-like scalar values.
+    if (answerType === 'text') {
+        const ops = [
+            'equals',
+            'notEquals',
+            'contains',
+            'empty',
+            'notEmpty',
+        ];
+        if (target.supportsNumericCompare) {
+            ops.push('greaterThan', 'greaterThanOrEqual', 'lessThan', 'lessThanOrEqual');
+        }
+        return ops;
+    }
+    // Fallback: conservative scalar checks.
+    return ['equals', 'notEquals', 'empty', 'notEmpty'];
+}
+/** Collect other fields from the normalized map (exclude self). */
+function buildOtherFields(normalized, selfId) {
+    const result = [];
+    for (const [id, node] of Object.entries(normalized.byId)) {
+        if (id === selfId)
+            continue;
+        // Skip sections — they don't have answerable values
+        if (node.definition.fieldType === 'section')
+            continue;
+        const meta = getFieldTypeMeta(node.definition.fieldType);
+        const supportsNumericCompare = node.definition.fieldType === 'rating' ||
+            node.definition.fieldType === 'slider' ||
+            (node.definition.fieldType === 'text' &&
+                node.definition.inputType === 'number');
+        result.push({
+            id,
+            label: node.definition.question || node.definition.id,
+            fieldType: node.definition.fieldType,
+            hasOptions: meta?.hasOptions ?? false,
+            options: hasOptions(node.definition)
+                ? node.definition.options
+                : undefined,
+            answerType: meta?.answerType ?? 'none',
+            supportsNumericCompare,
+        });
+    }
+    return result;
+}
+/** Group rules by effect, preserving original indices for update callbacks. */
+function groupByEffect(rules) {
+    const result = {
+        visible: [],
+        enable: [],
+        required: [],
+    };
+    rules.forEach((rule, idx) => {
+        if (result[rule.effect]) {
+            result[rule.effect].push({ rule, globalIdx: idx });
+        }
+    });
+    return result;
+}
+function validateExpressionLocally(expr, knownFieldIds, otherFields) {
+    if (!expr.trim())
+        return [];
+    const errors = [];
+    const fieldMap = new Map(otherFields.map((f) => [f.id, f]));
+    // Unknown field references
+    for (const match of expr.matchAll(/\{([^}]+)\}/g)) {
+        const id = match[1].trim();
+        if (id && !knownFieldIds.has(id)) {
+            errors.push(`Unknown field: {${id}}`);
+        }
+    }
+    // Syntax check
+    if (!isExpressionValid(expr)) {
+        errors.push('Expression syntax is invalid.');
+    }
+    // Type-aware: warn when a non-numeric field is used with a relational operator.
+    // Strip == and != first so their < > characters don't trigger false positives.
+    const stripped = expr.replace(/===|!==|==|!=/g, '    ');
+    for (const match of expr.matchAll(/\{([^}]+)\}/g)) {
+        const id = match[1].trim();
+        const field = fieldMap.get(id);
+        if (!field || field.supportsNumericCompare)
+            continue;
+        const start = match.index;
+        const end = start + match[0].length;
+        const before = stripped.slice(Math.max(0, start - 4), start);
+        const after = stripped.slice(end, end + 4);
+        if (/[<>]/.test(before) || /[<>]/.test(after)) {
+            errors.push(`{${id}} is a ${field.fieldType} field — numeric comparison (> < >= <=) may not produce meaningful results. Use == or !=.`);
+        }
+    }
+    return errors;
+}

package/dist/lib/components/edit-panel/MatrixEditor.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { TrashIcon } from '@esheet/fields';
+import { useInstanceId } from '../../EsheetBuilder.js';
+import { useFormApi } from '../../hooks/useFormApi.js';
+const MAX_ROWS = 10;
+const MAX_COLUMNS = 10;
+/**
+ * MatrixEditor — add / edit / remove rows and columns for matrix fields.
+ * Max 10 rows, max 10 columns.
+ */
+export function MatrixEditor({ fieldId, rows, columns }) {
+    const instanceId = useInstanceId();
+    const { row: rowApi, column: columnApi } = useFormApi(fieldId);
+    const rowsRef = React.useRef(null);
+    const colsRef = React.useRef(null);
+    const handleAddRow = () => {
+        rowApi.add();
+        requestAnimationFrame(() => {
+            if (rowsRef.current)
+                rowsRef.current.scrollTop = rowsRef.current.scrollHeight;
+        });
+    };
+    const handleAddColumn = () => {
+        columnApi.add();
+        requestAnimationFrame(() => {
+            if (colsRef.current)
+                colsRef.current.scrollTop = colsRef.current.scrollHeight;
+        });
+    };
+    return (_jsxs("div", { className: "matrix-editor ms:space-y-4", children: [_jsxs("div", { className: "matrix-rows ms:space-y-2", children: [_jsx("span", { className: "edit-label ms:block ms:text-sm ms:font-medium ms:text-mstext", children: "Rows" }), rows.length >= MAX_ROWS && (_jsxs("div", { className: "ms:text-xs ms:text-mstextmuted ms:italic", children: ["Maximum ", MAX_ROWS, " rows"] })), _jsx("div", { ref: rowsRef, className: "row-list ms:space-y-2", children: rows.map((row, idx) => (_jsxs("div", { className: "row-item ms:flex ms:items-center ms:gap-2 ms:px-3 ms:py-2 ms:border ms:border-msborder ms:rounded-lg ms:shadow-sm ms:hover:border-msprimary/50 ms:transition-colors", children: [_jsxs("span", { className: "ms:text-xs ms:text-mstextmuted ms:w-5 ms:text-right ms:shrink-0", children: [idx + 1, "."] }), _jsx("input", { id: `${instanceId}-editor-row-${fieldId}-${row.id}`, "aria-label": `Row ${idx + 1}`, type: "text", value: row.value, onChange: (e) => rowApi.update(row.id, e.currentTarget.value), placeholder: `Row ${idx + 1}`, className: "ms:flex-1 ms:min-w-0 ms:outline-none ms:bg-transparent ms:text-mstext ms:placeholder:text-mstextmuted ms:border-0 ms:text-sm" }), _jsx("button", { type: "button", onClick: () => rowApi.remove(row.id), "aria-label": `Remove row ${idx + 1}`, className: "remove-row-btn ms:shrink-0 ms:p-0.5 ms:rounded ms:bg-transparent ms:text-mstextmuted ms:hover:text-msdanger ms:border-0 ms:outline-none ms:focus:outline-none ms:transition-colors ms:cursor-pointer", children: _jsx(TrashIcon, { className: "ms:w-4 ms:h-4" }) })] }, row.id))) }), rows.length < MAX_ROWS && (_jsx("button", { type: "button", onClick: handleAddRow, className: "add-row-btn ms:w-full ms:px-3 ms:py-2 ms:text-sm ms:font-medium ms:bg-mssurface ms:text-msprimary ms:border ms:border-msprimary/50 ms:rounded-lg ms:hover:bg-msprimary/10 ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: "+ Add Row" }))] }), _jsxs("div", { className: "matrix-columns ms:space-y-2", children: [_jsx("span", { className: "edit-label ms:block ms:text-sm ms:font-medium ms:text-mstext", children: "Columns" }), columns.length >= MAX_COLUMNS && (_jsxs("div", { className: "ms:text-xs ms:text-mstextmuted ms:italic", children: ["Maximum ", MAX_COLUMNS, " columns"] })), _jsx("div", { ref: colsRef, className: "column-list ms:space-y-2", children: columns.map((col, idx) => (_jsxs("div", { className: "column-item ms:flex ms:items-center ms:gap-2 ms:px-3 ms:py-2 ms:border ms:border-msborder ms:rounded-lg ms:shadow-sm ms:hover:border-msprimary/50 ms:transition-colors", children: [_jsxs("span", { className: "ms:text-xs ms:text-mstextmuted ms:w-5 ms:text-right ms:shrink-0", children: [idx + 1, "."] }), _jsx("input", { id: `${instanceId}-editor-col-${fieldId}-${col.id}`, "aria-label": `Column ${idx + 1}`, type: "text", value: col.value, onChange: (e) => columnApi.update(col.id, e.currentTarget.value), placeholder: `Column ${idx + 1}`, className: "ms:flex-1 ms:min-w-0 ms:outline-none ms:bg-transparent ms:text-mstext ms:placeholder:text-mstextmuted ms:border-0 ms:text-sm" }), _jsx("button", { type: "button", onClick: () => columnApi.remove(col.id), "aria-label": `Remove column ${idx + 1}`, className: "remove-col-btn ms:shrink-0 ms:p-0.5 ms:rounded ms:bg-transparent ms:text-mstextmuted ms:hover:text-msdanger ms:border-0 ms:outline-none ms:focus:outline-none ms:transition-colors ms:cursor-pointer", children: _jsx(TrashIcon, { className: "ms:w-4 ms:h-4" }) })] }, col.id))) }), columns.length < MAX_COLUMNS && (_jsx("button", { type: "button", onClick: handleAddColumn, className: "add-col-btn ms:w-full ms:px-3 ms:py-2 ms:text-sm ms:font-medium ms:bg-mssurface ms:text-msprimary ms:border ms:border-msprimary/50 ms:rounded-lg ms:hover:bg-msprimary/10 ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: "+ Add Column" }))] })] }));
+}

package/dist/lib/components/edit-panel/OptionListEditor.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { TrashIcon } from '@esheet/fields';
+import { useInstanceId } from '../../EsheetBuilder.js';
+import { useFormApi } from '../../hooks/useFormApi.js';
+/**
+ * OptionListEditor — add / edit / remove options for choice fields.
+ *
+ * Disables delete for boolean (fixed Yes/No).
+ * Uses form.addOption / updateOption / removeOption directly.
+ */
+export function OptionListEditor({ fieldId, fieldType, options, }) {
+    const instanceId = useInstanceId();
+    const { option } = useFormApi(fieldId);
+    const listRef = React.useRef(null);
+    const isBoolean = fieldType === 'boolean';
+    const label = fieldType === 'multitext' ? 'Text Inputs' : 'Options';
+    const handleAdd = () => {
+        option.add();
+        requestAnimationFrame(() => {
+            if (listRef.current) {
+                listRef.current.scrollTop = listRef.current.scrollHeight;
+            }
+        });
+    };
+    return (_jsxs("div", { className: "option-list-editor ms:space-y-2", children: [_jsx("span", { className: "edit-label ms:block ms:text-sm ms:font-medium ms:text-mstext", children: label }), _jsx("div", { ref: listRef, className: "option-list ms:space-y-2", children: options.map((opt, idx) => (_jsxs("div", { className: "option-row ms:flex ms:items-center ms:gap-2 ms:px-3 ms:py-2 ms:border ms:border-msborder ms:rounded-lg ms:shadow-sm ms:hover:border-msprimary/50 ms:transition-colors", children: [_jsx("input", { id: `${instanceId}-editor-option-${fieldId}-${opt.id}`, "aria-label": `Option ${idx + 1}`, type: "text", value: opt.value, onChange: (e) => option.update(opt.id, e.currentTarget.value), placeholder: `Option ${idx + 1}`, className: "ms:flex-1 ms:min-w-0 ms:outline-none ms:bg-transparent ms:text-mstext ms:placeholder:text-mstextmuted ms:border-0 ms:text-sm" }), !isBoolean && (_jsx("button", { type: "button", onClick: () => option.remove(opt.id), "aria-label": `Remove option ${idx + 1}`, className: "remove-option-btn ms:shrink-0 ms:p-0.5 ms:rounded ms:bg-transparent ms:text-mstextmuted ms:hover:text-msdanger ms:border-0 ms:outline-none ms:focus:outline-none ms:transition-colors ms:cursor-pointer", children: _jsx(TrashIcon, { className: "ms:w-4 ms:h-4" }) }))] }, opt.id))) }), !isBoolean && (_jsxs("button", { type: "button", onClick: handleAdd, className: "add-option-btn ms:w-full ms:px-3 ms:py-2 ms:text-sm ms:font-medium ms:bg-mssurface ms:text-msprimary ms:border ms:border-msprimary/50 ms:rounded-lg ms:hover:bg-msprimary/10 ms:transition-colors ms:outline-none ms:focus:outline-none ms:cursor-pointer", children: ["+ Add ", fieldType === 'multitext' ? 'Input' : 'Option'] }))] }));
+}

package/dist/lib/hooks/useFormApi.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useStore } from 'zustand';
+import { useFormStore } from '@esheet/fields';
+/**
+ * useFormApi — reactive field state + form store actions.
+ *
+ * Touches only the FormStore. For UI state (mode, selection, tabs) use
+ * useUiApi(). For the computed visible root IDs use useVisibleRootIds().
+ *
+ * @param fieldId - The field to bind to. Pass undefined for form-level ops only.
+ */
+export function useFormApi(fieldId) {
+    const form = useFormStore();
+    // --- Reactive field state ---
+    const field = useStore(form, (s) => fieldId ? s.getField(fieldId) : undefined);
+    const response = useStore(form, (s) => fieldId ? s.getResponse(fieldId) : undefined);
+    const isVisible = useStore(form, (s) => fieldId ? s.isVisible(fieldId) : true);
+    const isEnabled = useStore(form, (s) => fieldId ? s.isEnabled(fieldId) : true);
+    const isRequired = useStore(form, (s) => fieldId ? s.isRequired(fieldId) : false);
+    // --- Reactive form-level state ---
+    const normalized = useStore(form, (s) => s.normalized);
+    const responses = useStore(form, (s) => s.responses);
+    const instanceId = useStore(form, (s) => s.instanceId);
+    return React.useMemo(() => ({
+        field,
+        response,
+        isVisible,
+        isEnabled,
+        isRequired,
+        normalized,
+        responses,
+        instanceId,
+        form: {
+            addField: (type, opts) => form.getState().addField(type, opts),
+            loadDefinition: form.getState().loadDefinition,
+            setFormId: form.getState().setFormId,
+            hydrateDefinition: () => form.getState().hydrateDefinition(),
+            hydrateResponse: () => form.getState().hydrateResponse(),
+            resetResponses: () => form.getState().resetResponses(),
+        },
+        field_: {
+            update: (patch) => fieldId ? form.getState().updateField(fieldId, patch) : false,
+            remove: () => (fieldId ? form.getState().removeField(fieldId) : false),
+            move: (toIndex, toParentId) => fieldId
+                ? form.getState().moveField(fieldId, toIndex, toParentId)
+                : false,
+            setResponse: (resp) => fieldId ? form.getState().setResponse(fieldId, resp) : undefined,
+            clearResponse: () => fieldId ? form.getState().clearResponse(fieldId) : undefined,
+        },
+        option: {
+            add: (value) => fieldId ? form.getState().addOption(fieldId, value) : null,
+            update: (optId, value) => fieldId ? form.getState().updateOption(fieldId, optId, value) : false,
+            remove: (optId) => fieldId ? form.getState().removeOption(fieldId, optId) : false,
+        },
+        row: {
+            add: (value) => fieldId ? form.getState().addRow(fieldId, value) : null,
+            update: (rowId, value) => fieldId ? form.getState().updateRow(fieldId, rowId, value) : false,
+            remove: (rowId) => fieldId ? form.getState().removeRow(fieldId, rowId) : false,
+        },
+        column: {
+            add: (value) => fieldId ? form.getState().addColumn(fieldId, value) : null,
+            update: (colId, value) => fieldId ? form.getState().updateColumn(fieldId, colId, value) : false,
+            remove: (colId) => fieldId ? form.getState().removeColumn(fieldId, colId) : false,
+        },
+        _form: form,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        fieldId,
+        field,
+        response,
+        isVisible,
+        isEnabled,
+        isRequired,
+        normalized,
+        responses,
+        instanceId,
+        form,
+    ]);
+}

package/dist/lib/hooks/useUiApi.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useStore } from 'zustand';
+import { useUI } from '@esheet/fields';
+/**
+ * useUiApi — lightweight hook for components that only need UI state/actions.
+ *
+ * Useful when you don't need field-scoped state. Requires UIContext provider.
+ */
+export function useUiApi() {
+    const ui = useUI();
+    const mode = useStore(ui, (s) => s.mode);
+    const selectedFieldId = useStore(ui, (s) => s.selectedFieldId);
+    const selectedFieldChildId = useStore(ui, (s) => s.selectedFieldChildId);
+    const editTab = useStore(ui, (s) => s.editTab);
+    const codeEditorHasError = useStore(ui, (s) => s.codeEditorHasError);
+    return React.useMemo(() => ({
+        mode,
+        selectedFieldId,
+        selectedFieldChildId,
+        editTab,
+        codeEditorHasError,
+        selectField: (id) => ui.getState().selectField(id),
+        selectFieldChild: (parentId, childId) => ui.getState().selectFieldChild(parentId, childId),
+        setMode: (m) => ui.getState().setMode(m),
+        setEditTab: (tab) => ui.getState().setEditTab(tab),
+        setEditModalOpen: (open) => ui.getState().setEditModalOpen(open),
+        clearDragState: () => ui.getState().clearDragState(),
+        _ui: ui,
+    }), [
+        mode,
+        selectedFieldId,
+        selectedFieldChildId,
+        editTab,
+        codeEditorHasError,
+        ui,
+    ]);
+}

package/dist/lib/hooks/useVisibleRootIds.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useStore } from 'zustand';
+import { useFormStore, useUI } from '@esheet/fields';
+/**
+ * useVisibleRootIds — returns the root field IDs to render.
+ *
+ * In build/code mode: all root IDs.
+ * In preview mode: only IDs whose visibility rules evaluate to true.
+ *
+ * Requires both FormStoreContext and UIContext providers.
+ * Uses a stable-ref cache so the array reference only changes when content does.
+ */
+export function useVisibleRootIds() {
+    const form = useFormStore();
+    const ui = useUI();
+    const normalized = useStore(form, (s) => s.normalized);
+    const responses = useStore(form, (s) => s.responses);
+    const mode = useStore(ui, (s) => s.mode);
+    const cacheRef = React.useRef([]);
+    return React.useMemo(() => {
+        const rootIds = mode !== 'preview'
+            ? normalized.rootIds
+            : normalized.rootIds.filter((id) => form.getState().isVisible(id));
+        const prev = cacheRef.current;
+        if (prev.length === rootIds.length &&
+            prev.every((v, i) => v === rootIds[i])) {
+            return prev;
+        }
+        cacheRef.current = rootIds;
+        return rootIds;
+    }, [normalized, responses, mode, form]);
+}