@esheet/builder 0.0.4-0 → 0.0.4-1

package/dist/lib/components/FieldWrapper.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useFormApi } from '../hooks/useFormApi.js';
+import { useUiApi } from '../hooks/useUiApi.js';
+import { TrashIcon, ViewBigIcon, ViewSmallIcon, EditIcon, DragHandleIcon, } from '../icons.js';
+/**
+ * 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 function FieldWrapper({ fieldId, form, ui, dragHandleRef, isSelectedOverride, onSelectOverride, selectedVariant = 'default', forceExpandVersion, forceCollapseVersion, children, }) {
+    const [isExpanded, setIsExpanded] = React.useState(() => {
+        const collapseActive = forceCollapseVersion !== undefined &&
+            (forceExpandVersion === undefined ||
+                forceCollapseVersion > forceExpandVersion);
+        return !collapseActive;
+    });
+    const lastForceExpandVersionRef = React.useRef(forceExpandVersion);
+    const lastForceCollapseVersionRef = React.useRef(forceCollapseVersion);
+    const { field, response, isVisible, isEnabled, isRequired, instanceId, field_, } = useFormApi(fieldId);
+    const { mode, selectedFieldId, selectField, setEditModalOpen } = useUiApi();
+    const isPreview = mode === 'preview';
+    const isSelected = !isPreview && (isSelectedOverride ?? selectedFieldId === fieldId);
+    const handleSelect = (e) => {
+        e.stopPropagation();
+        if (onSelectOverride) {
+            onSelectOverride(e);
+            return;
+        }
+        selectField(fieldId);
+    };
+    const handleToggleExpand = (e) => {
+        e.stopPropagation();
+        if (!isSelected)
+            handleSelect(e);
+        setIsExpanded((prev) => !prev);
+    };
+    React.useEffect(() => {
+        if (forceExpandVersion === undefined)
+            return;
+        if (lastForceExpandVersionRef.current === forceExpandVersion)
+            return;
+        lastForceExpandVersionRef.current = forceExpandVersion;
+        setIsExpanded(true);
+    }, [forceExpandVersion]);
+    React.useEffect(() => {
+        if (forceCollapseVersion === undefined)
+            return;
+        if (lastForceCollapseVersionRef.current === forceCollapseVersion)
+            return;
+        lastForceCollapseVersionRef.current = forceCollapseVersion;
+        setIsExpanded(false);
+    }, [forceCollapseVersion]);
+    if (!field) {
+        return null;
+    }
+    // In preview mode, hide fields whose visibility rules evaluate to false.
+    if (isPreview && !isVisible) {
+        return null;
+    }
+    // --- Preview mode: minimal chrome, no builder controls ---
+    if (isPreview) {
+        const isSection = field.definition.fieldType === 'section';
+        const parentNode = field.parentId
+            ? form.getState().getField(field.parentId)
+            : null;
+        const isChildOfSection = parentNode?.definition.fieldType === 'section';
+        return (_jsx("div", { className: `field-wrapper ms:bg-mssurface${isSection ? ' ms:mb-1 ms:border ms:border-msborder ms:rounded' : ''}${!isSection && !isChildOfSection
+                ? ' ms:mb-1 ms:p-6 ms:border ms:border-msborder ms:rounded'
+                : ''}${isChildOfSection
+                ? ' ms:p-6 ms:border-b ms:border-msborder ms:last:border-b-0'
+                : ''}${!isEnabled ? ' ms:opacity-50 ms:pointer-events-none' : ''}`, "aria-disabled": !isEnabled || undefined, children: children({
+                field,
+                form,
+                ui,
+                isSelected: false,
+                isPreview: true,
+                isEnabled,
+                isRequired,
+                response,
+                onRemove: field_.remove,
+                onUpdate: field_.update,
+                onResponse: field_.setResponse,
+            }) }));
+    }
+    // --- Build/Code mode: collapsible with full editor chrome ---
+    const questionText = field.definition.fieldType === 'section'
+        ? field.definition.title || ''
+        : field.definition.question || '';
+    const questionPreview = questionText
+        ? questionText.length > 18
+            ? `${questionText.slice(0, 18)}...`
+            : questionText
+        : 'Untitled';
+    // While collapsed, keep the wrapper compact.
+    const effectiveExpanded = isExpanded;
+    // Base wrapper classes
+    let wrapperClass = isSelected
+        ? 'field-wrapper ms:group ms:relative ms:bg-mssurface ms:border-2 ms:border-msprimary ms:rounded-lg ms:transition-all ms:outline-none'
+        : 'field-wrapper ms:group ms:relative ms:bg-mssurface ms:border ms:border-msborder ms:rounded-lg ms:transition-all ms:hover:border-msprimary/30 ms:outline-none';
+    if (!effectiveExpanded) {
+        wrapperClass += ' ms:p-0';
+    }
+    else {
+        wrapperClass += ' ms:p-6';
+    }
+    // Header padding/margin adjustments
+    const headerClass = effectiveExpanded
+        ? 'field-wrapper-edit-header ms:flex ms:justify-between ms:items-center ms:gap-3 ms:px-3 ms:py-2.5 ms:-mx-6 ms:-mt-6 ms:mb-4 ms:bg-msbackgroundsecondary ms:border-b ms:border-msborder ms:rounded-t-lg'
+        : 'field-wrapper-edit-header ms:flex ms:justify-between ms:items-center ms:gap-3 ms:px-3 ms:py-2.5 ms:m-0 ms:bg-msbackgroundsecondary ms:border-b ms:border-msborder ms:rounded-lg';
+    return (_jsxs("div", { className: wrapperClass, onClick: handleSelect, "aria-selected": isSelected || undefined, tabIndex: -1, children: [_jsxs("div", { className: headerClass, children: [dragHandleRef !== undefined && (_jsx("div", { ref: dragHandleRef, className: "drag-handle ms:flex ms:items-center ms:p-1 ms:text-mstextmuted ms:cursor-grab ms:active:cursor-grabbing ms:shrink-0 ms:user-select-none", style: { touchAction: 'none' }, "aria-label": "Drag to reorder", children: _jsx(DragHandleIcon, { className: "ms:w-4 ms:h-4" }) })), _jsxs("div", { className: "ms:flex-1 ms:flex ms:items-center ms:gap-1.5 ms:min-w-0 ms:select-none", children: [_jsx("span", { className: "fieldtype-chip ms:inline-block ms:shrink-0 ms:text-xs ms:font-medium ms:text-msprimary ms:bg-msprimary/10 ms:px-2 ms:py-0.5 ms:rounded", children: field.definition.fieldType }), _jsxs("span", { className: "id-chip ms:inline-flex ms:items-center ms:gap-1 ms:min-w-0 ms:shrink ms:text-xs ms:font-mono ms:text-mssecondary ms:bg-mssecondary/10 ms:px-2 ms:py-0.5 ms:rounded", children: [_jsx("span", { className: "ms:opacity-70 ms:shrink-0", children: "id:" }), _jsx("span", { className: "ms:font-semibold ms:truncate", children: field.definition.id })] }), _jsx("span", { className: "question-label ms:text-xs ms:text-mstextmuted ms:truncate ms:min-w-0", children: questionPreview }), field.definition.required && (_jsx("span", { className: "required-indicator ms:text-msdanger ms:text-xs ms:font-bold ms:shrink-0", "aria-label": "Required", children: "*" }))] }), _jsxs("div", { className: "field-wrapper-actions ms:flex ms:items-center ms:gap-1 ms:shrink-0", children: [_jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (onSelectOverride) {
+                                        onSelectOverride(e);
+                                    }
+                                    else {
+                                        selectField(fieldId);
+                                    }
+                                    setEditModalOpen(true);
+                                }, className: "field-edit-btn ms:block ms:lg:hidden ms:p-1.5 ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msbackgroundhover ms:rounded ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none", title: "Edit", "aria-label": "Edit field", children: _jsx(EditIcon, { className: "ms:h-5 ms:w-5 ms:text-mstextmuted" }) }), _jsx("button", { type: "button", onClick: handleToggleExpand, "aria-expanded": effectiveExpanded, "aria-controls": `${instanceId}-fw-body-${fieldId}`, title: effectiveExpanded ? 'Collapse' : 'Expand', "aria-label": effectiveExpanded ? 'Collapse field' : 'Expand field', className: "field-collapse-btn ms:p-1.5 ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msbackgroundhover ms:rounded ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none", children: effectiveExpanded ? (_jsx(ViewSmallIcon, { className: "ms:collapse-icon ms:h-5 ms:w-5 ms:text-mstextmuted" })) : (_jsx(ViewBigIcon, { className: "ms:collapse-icon ms:h-5 ms:w-5 ms:text-mstextmuted" })) }), _jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    field_.remove();
+                                }, className: "field-delete-btn ms:p-1.5 ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msdanger/10 ms:hover:text-msdanger ms:rounded ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none", title: "Delete", "aria-label": "Delete field", children: _jsx(TrashIcon, { className: "ms:h-5 ms:w-5" }) })] })] }), _jsx("div", { id: `${instanceId}-fw-body-${fieldId}`, className: "field-wrapper-body", hidden: !effectiveExpanded || undefined, children: children({
+                    field,
+                    form,
+                    ui,
+                    isSelected,
+                    isPreview: false,
+                    isEnabled,
+                    isRequired,
+                    response,
+                    onRemove: field_.remove,
+                    onUpdate: field_.update,
+                    onResponse: field_.setResponse,
+                }) })] }));
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface MobileBottomDrawerProps {
+    title: string;
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+export declare function MobileBottomDrawer({ title, open, onClose, children, }: MobileBottomDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MobileBottomDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBottomDrawer.d.ts","sourceRoot":"","sources":["../../../src/lib/components/MobileBottomDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,kDA+BzB"}

package/dist/lib/components/MobileBottomDrawer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function MobileBottomDrawer({ title, open, onClose, children, }) {
+    if (!open)
+        return null;
+    return (_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: onClose, "aria-label": `Close ${title} 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: title }), _jsx("button", { type: "button", onClick: onClose, 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 ${title} drawer`, children: "Close" })] }), _jsx("div", { className: "ms:h-[calc(50dvh-45px)] ms:overflow-y-auto", children: children })] })] }));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ToolPanelProps {
+}
+/**
+ * ToolPanel - Left panel listing available field types.
+ *
+ * Clicking a button calls `form.addField(type)` and auto-selects
+ * the new field. Groups field types by category from the registry.
+ */
+export declare const ToolPanel: React.NamedExoticComponent<ToolPanelProps>;
+//# sourceMappingURL=ToolPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolPanel.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ToolPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,WAAW,cAAc;CAAG;AA2ClC;;;;;GAKG;AACH,eAAO,MAAM,SAAS,4CAuLpB,CAAC"}

package/dist/lib/components/ToolPanel.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { getRegisteredFieldTypes, getFieldTypeMeta, } from '@esheet/core';
+import { TextFieldsIcon, SelectionFieldsIcon, RatingIcon, MatrixIcon, RichContentIcon, OrganizationIcon, ChevronIcon, } from '../icons.js';
+import { useFormApi } from '../hooks/useFormApi.js';
+import { useUiApi } from '../hooks/useUiApi.js';
+/** Category display labels. */
+const CATEGORY_LABELS = {
+    text: 'Text Fields',
+    selection: 'Selection Fields',
+    rating: 'Rating & Ranking',
+    matrix: 'Matrix Fields',
+    rich: 'Rich Content',
+    organization: 'Organization',
+};
+/** Category icons mapped by display label. */
+const CATEGORY_ICONS = {
+    'Text Fields': TextFieldsIcon,
+    'Selection Fields': SelectionFieldsIcon,
+    'Rating & Ranking': RatingIcon,
+    'Matrix Fields': MatrixIcon,
+    'Rich Content': RichContentIcon,
+    Organization: OrganizationIcon,
+};
+import { getFieldComponent } from '@esheet/fields';
+/** Build category → field type[] map from the registry. Only includes types with a registered React component. */
+function buildCategories() {
+    const result = {};
+    for (const type of getRegisteredFieldTypes()) {
+        if (!getFieldComponent(type))
+            continue;
+        const meta = getFieldTypeMeta(type);
+        if (!meta)
+            continue;
+        const cat = meta.category ?? 'other';
+        const label = CATEGORY_LABELS[cat] ?? 'Other';
+        if (!result[label])
+            result[label] = [];
+        result[label].push({ type, label: meta.label });
+    }
+    return result;
+}
+/**
+ * ToolPanel - Left panel listing available field types.
+ *
+ * Clicking a button calls `form.addField(type)` and auto-selects
+ * the new field. Groups field types by category from the registry.
+ */
+export const ToolPanel = React.memo(function ToolPanel(_props) {
+    const { normalized, form: formApi, _form } = useFormApi();
+    const { selectedFieldId, selectField, selectFieldChild, _ui } = useUiApi();
+    const selectedField = selectedFieldId
+        ? normalized.byId[selectedFieldId]
+        : undefined;
+    const selectedSectionId = selectedField?.definition.fieldType === 'section'
+        ? selectedFieldId
+        : undefined;
+    const selectedSectionLabel = selectedSectionId
+        ? selectedField?.definition?.title ||
+            selectedField?.definition.id ||
+            selectedSectionId
+        : null;
+    const categories = React.useMemo(buildCategories, []);
+    const categoryNames = React.useMemo(() => Object.keys(categories), [categories]);
+    const orderedCategoryNames = React.useMemo(() => {
+        const org = categoryNames.includes('Organization') ? ['Organization'] : [];
+        const rest = categoryNames.filter((name) => name !== 'Organization');
+        return [...org, ...rest];
+    }, [categoryNames]);
+    const [collapsed, setCollapsed] = React.useState(() => new Set());
+    const toggleCategory = React.useCallback((name) => {
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(name))
+                next.delete(name);
+            else
+                next.add(name);
+            return next;
+        });
+    }, []);
+    const toggleAll = React.useCallback(() => {
+        setCollapsed((prev) => prev.size === categoryNames.length ? new Set() : new Set(categoryNames));
+    }, [categoryNames]);
+    const handleAdd = React.useCallback((type) => {
+        const curSelectedId = _ui.getState().selectedFieldId;
+        const curSelectedField = curSelectedId
+            ? _form.getState().getField(curSelectedId)
+            : undefined;
+        const sectionParentId = curSelectedField?.definition.fieldType === 'section'
+            ? curSelectedId
+            : undefined;
+        const newId = formApi.addField(type, sectionParentId ? { parentId: sectionParentId } : undefined);
+        if (newId) {
+            if (sectionParentId) {
+                selectFieldChild(sectionParentId, newId);
+            }
+            else {
+                selectField(newId);
+            }
+        }
+    }, [_form, _ui, formApi, selectField, selectFieldChild]);
+    const allCollapsed = collapsed.size === categoryNames.length;
+    return (_jsxs("div", { className: "tool-panel ms:flex ms:flex-1 ms:flex-col ms:min-h-0", children: [_jsxs("h3", { className: "tool-panel-title ms:sticky ms:top-0 ms:z-10 ms:bg-mssurface ms:text-sm ms:font-semibold ms:text-mstext ms:py-4 ms:px-4 ms:border-b ms:border-msborder ms:flex ms:items-center ms:justify-between", children: [_jsxs("div", { className: "ms:flex ms:min-w-0 ms:items-center ms:gap-2", children: [_jsx("span", { children: "Tools" }), _jsx("span", { className: `ms:inline-flex ms:min-w-0 ms:max-w-[120px] ms:flex-shrink ms:items-center ms:gap-1 ms:rounded-full ms:px-2.5 ms:py-1 ms:text-[11px] ms:font-medium ${selectedSectionId
+                                    ? 'ms:bg-msprimary/10 ms:text-msprimary'
+                                    : 'ms:bg-msbackgroundsecondary ms:text-mstextmuted'}`, title: selectedSectionId
+                                    ? `Adding into section: ${selectedSectionLabel ?? ''}`
+                                    : 'Adding into root', children: selectedSectionId ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => selectField(null), className: "ms:flex ms:min-w-0 ms:flex-1 ms:items-center ms:gap-1 ms:bg-transparent ms:p-0 ms:text-left ms:text-msprimary ms:outline-none ms:focus:outline-none ms:cursor-pointer", title: "Switch to adding into root", "aria-label": "Switch to adding into root", children: [_jsx("span", { className: "ms:inline-flex ms:h-1.5 ms:w-1.5 ms:rounded-full ms:bg-msprimary" }), _jsx("span", { className: "ms:min-w-0 ms:flex-shrink ms:truncate", children: (selectedSectionLabel ?? '').length > 12
+                                                        ? `${(selectedSectionLabel ?? '').slice(0, 12)}…`
+                                                        : selectedSectionLabel })] }), _jsx("button", { type: "button", onClick: () => selectField(null), className: "ms:inline-flex ms:h-4 ms:w-4 ms:flex-shrink-0 ms:items-center ms:justify-center ms:rounded-full ms:bg-transparent ms:text-msprimary ms:hover:bg-msprimary/15 ms:outline-none ms:focus:outline-none ms:cursor-pointer", title: "Switch to adding into root", "aria-label": "Switch to adding into root", children: "\u00D7" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "ms:inline-flex ms:h-1.5 ms:w-1.5 ms:rounded-full ms:bg-mstextmuted" }), _jsx("span", { className: "ms:min-w-0 ms:flex-shrink ms:truncate", children: "Adding into root" })] })) })] }), _jsx("button", { type: "button", onClick: toggleAll, className: "toggle-all-btn ms:flex-shrink-0 ms:text-xs ms:font-normal ms:text-mstextmuted ms:hover:text-mstext ms:bg-transparent ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ms:transition-colors", title: allCollapsed ? 'Expand all' : 'Collapse all', children: allCollapsed ? 'Expand all' : 'Collapse all' })] }), _jsx("div", { className: "tool-panel-body ms:flex-1 ms:min-h-0 ms:overflow-y-auto", children: orderedCategoryNames.map((categoryName) => {
+                    const items = categories[categoryName] ?? [];
+                    const isCollapsed = collapsed.has(categoryName);
+                    return (_jsxs("div", { className: "tool-category", children: [_jsxs("button", { type: "button", onClick: () => toggleCategory(categoryName), className: "tool-category-title ms:w-full ms:sticky ms:top-0 ms:z-[5] ms:bg-mssurface ms:text-xs ms:font-semibold ms:text-mstextmuted ms:px-4 ms:py-2.5 ms:border-b ms:border-msborder ms:border-0 ms:uppercase ms:tracking-wide ms:flex ms:items-center ms:gap-1.5 ms:cursor-pointer ms:hover:bg-msbackgroundhover ms:transition-colors ms:outline-none ms:focus:outline-none", "aria-expanded": !isCollapsed, children: [_jsx(ChevronIcon, { className: `ms:w-3.5 ms:h-3.5 ms:shrink-0 ms:transition-transform ${isCollapsed ? 'ms:-rotate-90' : ''}` }), CATEGORY_ICONS[categoryName] &&
+                                        React.createElement(CATEGORY_ICONS[categoryName], {
+                                            className: 'ms:w-3.5 ms:h-3.5 ms:shrink-0',
+                                        }), _jsx("span", { className: "ms:flex-1 ms:text-left", children: categoryName })] }), !isCollapsed && (_jsx("div", { className: "tool-items ms:grid ms:grid-cols-1 ms:gap-1.5 ms:px-3 ms:py-2", children: items.map(({ type, label }) => (_jsxs("button", { type: "button", className: "tool-btn ms:flex ms:items-center ms:gap-2 ms:px-3 ms:py-2 ms:text-sm ms:text-left ms:rounded-md ms:bg-msbackground ms:text-mstext ms:border ms:border-transparent ms:transition-colors ms:hover:bg-msprimary/10 ms:hover:border-msprimary/40 ms:hover:text-msprimary ms:cursor-pointer ms:outline-none ms:focus:outline-none ms:focus-visible:ring-2 ms:focus-visible:ring-msprimary", onClick: () => handleAdd(type), title: `Add ${label}`, children: [_jsx("span", { className: "tool-btn-plus ms:flex ms:items-center ms:justify-center ms:w-5 ms:h-5 ms:rounded ms:bg-msbackgroundsecondary ms:text-mstextmuted ms:text-xs ms:font-bold ms:shrink-0", children: "+" }), label] }, type))) }))] }, categoryName));
+                }) })] }));
+});

package/dist/lib/components/edit-panel/CommonEditor.d.ts

@@ -0,0 +1,16 @@
+import type { FieldDefinition } from '@esheet/core';
+export interface CommonEditorProps {
+    fieldId: string;
+    def: Omit<FieldDefinition, 'fields'>;
+    onUpdate: (patch: Partial<Omit<FieldDefinition, 'fields'>>) => void;
+    /** Called to rename the field ID. Returns false if the name collides. */
+    onRenameId: (newId: string) => boolean;
+}
+/**
+ * CommonEditor — shared property editors for all non-section fields.
+ *
+ * Renders: ID, Question, Sublabel (description), Required toggle,
+ * and InputTypeEditor for text/longtext fields.
+ */
+export declare function CommonEditor({ fieldId, def, onUpdate, onRenameId, }: CommonEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CommonEditor.d.ts.map

package/dist/lib/components/edit-panel/CommonEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonEditor.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/edit-panel/CommonEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,cAAc,CAAC;AAMnE,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,KAAK,IAAI,CAAC;IACpE,yEAAyE;IACzE,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACxC;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,GAAG,EACH,QAAQ,EACR,UAAU,GACX,EAAE,iBAAiB,2CAmEnB"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CustomCheckbox } from '@esheet/fields';
+import { useInstanceId } from '../../EsheetBuilder.js';
+import { DraftIdEditor } from './DraftIdEditor.js';
+import { InputTypeEditor } from './InputTypeEditor.js';
+/**
+ * CommonEditor — shared property editors for all non-section fields.
+ *
+ * Renders: ID, Question, Sublabel (description), Required toggle,
+ * and InputTypeEditor for text/longtext fields.
+ */
+export function CommonEditor({ fieldId, def, onUpdate, onRenameId, }) {
+    const instanceId = useInstanceId();
+    const showInputType = def.fieldType === 'text' || def.fieldType === 'longtext';
+    return (_jsxs("div", { className: "common-editor ms:space-y-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: `${instanceId}-editor-id-${fieldId}`, className: "edit-label ms:block ms:text-sm ms:font-medium ms:text-mstext ms:mb-1", children: "Field ID" }), _jsx(DraftIdEditor, { id: def.id, fieldId: fieldId, onCommit: onRenameId })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: `${instanceId}-editor-question-${fieldId}`, className: "edit-label ms:block ms:text-sm ms:text-mstext ms:mb-1", children: "Label / Question" }), _jsx("input", { id: `${instanceId}-editor-question-${fieldId}`, type: "text", value: def.question ?? '', onChange: (e) => onUpdate({ question: e.currentTarget.value }), placeholder: "Enter question text", className: "ms:w-full ms:min-w-0 ms:px-3 ms:py-2 ms:text-sm 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 ms:focus:border-msprimary ms:transition-colors" })] }), _jsxs("div", { className: "required-toggle ms:flex ms:items-center ms:gap-2 ms:text-sm ms:text-mstext", children: [_jsx(CustomCheckbox, { id: `${instanceId}-editor-required-${fieldId}`, checked: def.required ?? false, onChange: (checked) => onUpdate({ required: checked }), size: "sm" }), _jsx("label", { htmlFor: `${instanceId}-editor-required-${fieldId}`, className: "ms:cursor-pointer ms:select-none", children: "Required" })] }), showInputType && (_jsx(InputTypeEditor, { fieldId: fieldId, inputType: def.inputType ?? 'string', unit: def.unit, onChange: (patch) => onUpdate(patch) }))] }));
+}

package/dist/lib/components/edit-panel/DraftIdEditor.d.ts

@@ -0,0 +1,16 @@
+export interface DraftIdEditorProps {
+    /** Current persisted ID. */
+    id: string;
+    /** Parent field ID for prefixing the DOM id attribute. */
+    fieldId: string;
+    /** Called with the new ID when the user commits (blur / Enter). Returns false if invalid. */
+    onCommit: (newId: string) => boolean;
+}
+/**
+ * DraftIdEditor — edits a field ID with commit-on-blur/Enter.
+ *
+ * Keeps a local draft so keystrokes don't immediately rename the field.
+ * Reverts to the persisted `id` if the commit callback rejects.
+ */
+export declare function DraftIdEditor({ id, fieldId, onCommit }: DraftIdEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DraftIdEditor.d.ts.map

package/dist/lib/components/edit-panel/DraftIdEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraftIdEditor.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/edit-panel/DraftIdEditor.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,6FAA6F;IAC7F,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACtC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAmC1E"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useInstanceId } from '../../EsheetBuilder.js';
+/**
+ * DraftIdEditor — edits a field ID with commit-on-blur/Enter.
+ *
+ * Keeps a local draft so keystrokes don't immediately rename the field.
+ * Reverts to the persisted `id` if the commit callback rejects.
+ */
+export function DraftIdEditor({ id, fieldId, onCommit }) {
+    const instanceId = useInstanceId();
+    const [draft, setDraft] = React.useState(id);
+    // Sync draft when the external id changes (e.g. another editor renamed it).
+    React.useEffect(() => {
+        setDraft(id);
+    }, [id]);
+    const commit = () => {
+        const trimmed = draft.trim();
+        if (trimmed === id)
+            return; // no change
+        if (!trimmed || !onCommit(trimmed)) {
+            setDraft(id); // revert on rejection
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.target.blur();
+        }
+    };
+    return (_jsx("input", { id: `${instanceId}-editor-id-${fieldId}`, type: "text", value: draft, onChange: (e) => setDraft(e.currentTarget.value), onBlur: commit, onKeyDown: handleKeyDown, className: "ms:w-full ms:min-w-0 ms:px-2 ms:py-1 ms:text-sm ms:bg-transparent ms:border ms:border-msborder ms:rounded ms:text-mstext ms:font-mono ms:placeholder:text-mstextmuted ms:focus:outline-none ms:focus:ring-2 ms:focus:ring-msprimary ms:focus:border-msprimary" }));
+}

package/dist/lib/components/edit-panel/EditPanel.d.ts

@@ -0,0 +1,10 @@
+export interface EditPanelProps {
+}
+/**
+ * EditPanel — right panel for editing the selected field's properties.
+ *
+ * Shows Edit tab (common + per-type editors) and Logic tab.
+ * Renders nothing meaningful when no field is selected.
+ */
+export declare function EditPanel(_props: EditPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditPanel.d.ts.map

package/dist/lib/components/edit-panel/EditPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditPanel.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/edit-panel/EditPanel.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,cAAc;CAAG;AAElC;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,cAAc,2CAmI/C"}

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

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { getFieldTypeMeta, } from '@esheet/core';
+import { useInstanceId } from '../../EsheetBuilder.js';
+import { EditIcon, LogicIcon } from '../../icons.js';
+import { DraftIdEditor } from './DraftIdEditor.js';
+import { CommonEditor } from './CommonEditor.js';
+import { OptionListEditor } from './OptionListEditor.js';
+import { MatrixEditor } from './MatrixEditor.js';
+import { LogicEditor } from './LogicEditor.js';
+import { useFormApi } from '../../hooks/useFormApi.js';
+import { useUiApi } from '../../hooks/useUiApi.js';
+/**
+ * EditPanel — right panel for editing the selected field's properties.
+ *
+ * Shows Edit tab (common + per-type editors) and Logic tab.
+ * Renders nothing meaningful when no field is selected.
+ */
+export function EditPanel(_props) {
+    const { selectedFieldId, selectedFieldChildId, editTab, selectField, setEditTab, } = useUiApi();
+    const { normalized } = useFormApi(undefined);
+    // Bind field actions to the currently selected field
+    const { field_: selectedField_ } = useFormApi(selectedFieldId ?? undefined);
+    // Logic tab target: when a section is selected, edit logic for the active child.
+    const logicField = React.useMemo(() => {
+        if (!selectedFieldId)
+            return undefined;
+        const parent = normalized.byId[selectedFieldId];
+        if (!parent)
+            return undefined;
+        if (parent.definition.fieldType !== 'section' || !selectedFieldChildId) {
+            return parent;
+        }
+        return normalized.byId[selectedFieldChildId] ?? parent;
+    }, [normalized, selectedFieldId, selectedFieldChildId]);
+    const activeField = selectedFieldId
+        ? normalized.byId[selectedFieldId]
+        : undefined;
+    // No selection
+    if (!selectedFieldId || !activeField) {
+        return (_jsx("div", { className: "edit-panel-empty ms:flex ms:flex-1 ms:min-h-0 ms:items-center ms:justify-center ms:text-mstextmuted ms:text-sm ms:p-4 ms:text-center", children: "Select a field to edit its properties" }));
+    }
+    const def = activeField.definition;
+    const meta = getFieldTypeMeta(def.fieldType);
+    const logicTargetLabel = logicField
+        ? logicField.definition.fieldType === 'section'
+            ? logicField.definition.title || logicField.definition.id
+            : logicField.definition.question || logicField.definition.id
+        : '';
+    const logicTargetQuestion = logicField
+        ? logicField.definition.fieldType === 'section'
+            ? logicField.definition.title || ''
+            : logicField.definition.question || ''
+        : '';
+    const logicTargetQuestionShort = logicTargetQuestion
+        ? logicTargetQuestion.length > 18
+            ? `${logicTargetQuestion.slice(0, 18)}...`
+            : logicTargetQuestion
+        : logicTargetLabel;
+    const handleUpdate = (patch) => {
+        selectedField_.update(patch);
+    };
+    const handleRenameId = (newId) => {
+        const success = selectedField_.update({ id: newId });
+        if (success) {
+            selectField(newId);
+        }
+        return success;
+    };
+    const setTab = (tab) => setEditTab(tab);
+    return (_jsxs("div", { className: "edit-panel ms:flex ms:flex-1 ms:flex-col ms:min-h-0", children: [_jsx("div", { className: "edit-panel-tabs ms:sticky ms:top-0 ms:z-10 ms:bg-mssurface ms:border-b ms:border-msborder ms:px-4 ms:py-2.5 ms:shrink-0", children: _jsxs("div", { className: "ms:flex ms:gap-1 ms:rounded-lg ms:border ms:border-msborder ms:bg-msbackground ms:p-1", children: [_jsxs("button", { type: "button", onClick: () => setTab('edit'), className: `edit-tab-btn ms:flex-1 ms:flex ms:items-center ms:justify-center ms:gap-1.5 ms:px-3 ms:py-1.5 ms:rounded-md ms:text-xs ms:font-medium ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ${editTab === 'edit'
+                                ? '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(EditIcon, { className: "ms:w-3.5 ms:h-3.5" }), _jsx("span", { children: "Edit" })] }), _jsxs("button", { type: "button", onClick: () => setTab('logic'), className: `logic-tab-btn ms:flex-1 ms:flex ms:items-center ms:justify-center ms:gap-1.5 ms:px-3 ms:py-1.5 ms:rounded-md ms:text-xs ms:font-medium ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer ${editTab === 'logic'
+                                ? '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(LogicIcon, { className: "ms:w-3.5 ms:h-3.5" }), _jsx("span", { children: "Logic" })] })] }) }), _jsx("div", { className: "edit-panel-content ms:flex-1 ms:min-h-0 ms:p-4", children: editTab === 'edit' ? (_jsx(EditTabContent, { fieldId: selectedFieldId, def: def, meta: meta, onUpdate: handleUpdate, onRenameId: handleRenameId })) : logicField ? (_jsxs("div", { className: "ms:space-y-2", children: [_jsxs("div", { className: "ms:flex ms:flex-wrap ms:items-center ms:gap-1.5 ms:text-xs ms:text-mstextmuted ms:bg-msbackground ms:border ms:border-msborder ms:rounded ms:px-2.5 ms:py-1.5", children: [_jsx("span", { className: "ms:inline-block ms:text-xs ms:font-medium ms:text-msprimary ms:bg-msprimary/10 ms:px-2 ms:py-0.5 ms:rounded ms:shrink-0", children: logicField.definition.fieldType }), _jsx("span", { className: "ms:px-1.5 ms:py-0.5 ms:rounded ms:bg-mssurface ms:border ms:border-msborder ms:text-mstext ms:font-medium", children: logicTargetQuestionShort })] }), _jsx(LogicEditor, { fieldId: logicField.definition.id, rules: logicField.definition.rules ?? [] })] })) : null })] }));
+}
+function EditTabContent({ fieldId, def, meta, onUpdate, onRenameId, }) {
+    const isSection = def.fieldType === 'section';
+    if (isSection) {
+        return (_jsx(SectionEditContent, { fieldId: fieldId, def: def, onUpdate: onUpdate, onRenameId: onRenameId }));
+    }
+    return (_jsxs("div", { className: "edit-tab ms:space-y-4", children: [_jsx(CommonEditor, { fieldId: fieldId, def: def, onUpdate: onUpdate, onRenameId: onRenameId }), (meta?.hasOptions || meta?.hasMatrix) && (_jsx("hr", { className: "ms:border-msborder" })), meta?.hasOptions && def.options && (_jsx(OptionListEditor, { fieldId: fieldId, fieldType: def.fieldType, options: def.options })), meta?.hasMatrix && (_jsx(MatrixEditor, { fieldId: fieldId, rows: def.rows ?? [], columns: def.columns ?? [] }))] }));
+}
+function SectionEditContent({ fieldId, def, onUpdate, onRenameId, }) {
+    const instanceId = useInstanceId();
+    const { selectedFieldId, selectedFieldChildId, editTab, selectFieldChild, setEditTab, } = useUiApi();
+    const { normalized } = useFormApi();
+    const { field_: activeChildField_ } = useFormApi(selectedFieldId === fieldId && selectedFieldChildId
+        ? selectedFieldChildId
+        : undefined);
+    const childIds = normalized.byId[fieldId]?.childIds ?? [];
+    const childFields = childIds
+        .map((id) => normalized.byId[id])
+        .filter((node) => Boolean(node));
+    const activeChildId = selectedFieldId === fieldId ? selectedFieldChildId : null;
+    const hasActiveChild = activeChildId !== null &&
+        childFields.some((node) => node.definition.id === activeChildId);
+    const resolvedActiveChildId = hasActiveChild ? activeChildId : null;
+    const activeChildNode = childFields.find((node) => node.definition.id === resolvedActiveChildId);
+    const activeChildDef = activeChildNode?.definition;
+    const activeChildMeta = activeChildDef
+        ? getFieldTypeMeta(activeChildDef.fieldType)
+        : undefined;
+    React.useEffect(() => {
+        if (activeChildId !== null && resolvedActiveChildId !== activeChildId) {
+            selectFieldChild(fieldId, resolvedActiveChildId);
+            if (editTab === 'logic') {
+                setEditTab('logic');
+            }
+        }
+    }, [
+        activeChildId,
+        editTab,
+        fieldId,
+        resolvedActiveChildId,
+        selectFieldChild,
+        setEditTab,
+    ]);
+    const handleSelectChild = (childId) => {
+        selectFieldChild(fieldId, childId);
+        if (editTab === 'logic') {
+            setEditTab('logic');
+        }
+    };
+    const handleRenameChildId = (newId) => {
+        if (!activeChildDef)
+            return false;
+        const success = activeChildField_.update({ id: newId });
+        if (success) {
+            selectFieldChild(fieldId, newId);
+        }
+        return success;
+    };
+    const handleUpdateChild = (patch) => {
+        if (!activeChildDef)
+            return;
+        activeChildField_.update(patch);
+    };
+    const handleDeleteChild = () => {
+        if (!activeChildDef)
+            return;
+        activeChildField_.remove();
+        const nextChildId = childFields.find((node) => node.definition.id !== activeChildDef.id)?.definition.id;
+        selectFieldChild(fieldId, nextChildId ?? null);
+    };
+    return (_jsxs("div", { className: "section-editor ms:space-y-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: `${instanceId}-editor-id-${fieldId}`, className: "edit-label ms:block ms:text-sm ms:font-medium ms:text-mstext ms:mb-1", children: "Section ID" }), _jsx(DraftIdEditor, { id: def.id, fieldId: fieldId, onCommit: onRenameId })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: `${instanceId}-editor-title-${fieldId}`, className: "edit-label ms:block ms:text-sm ms:text-mstext ms:mb-1", children: "Section Title" }), _jsx("input", { id: `${instanceId}-editor-title-${fieldId}`, type: "text", value: def.title ?? '', onChange: (e) => onUpdate({ title: e.currentTarget.value }), placeholder: "Enter section title...", className: "ms:w-full ms:min-w-0 ms:px-3 ms:py-2 ms:text-sm 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 ms:focus:border-msprimary ms:transition-colors" })] }), _jsxs("div", { className: "ms:space-y-2", children: [_jsxs("div", { className: "ms:flex ms:items-center ms:justify-between ms:gap-2", children: [_jsx("span", { className: "ms:text-sm ms:font-medium ms:text-mstext", children: "Section Fields" }), _jsxs("span", { className: "ms:text-xs ms:text-mstextmuted", children: [childFields.length, " item", childFields.length === 1 ? '' : 's'] })] }), childFields.length === 0 ? (_jsx("div", { className: "ms:text-sm ms:text-mstextmuted ms:px-3 ms:py-2 ms:bg-msbackground ms:border ms:border-msborder ms:rounded", children: "No fields in this section yet." })) : (_jsxs("select", { id: `${instanceId}-editor-section-child-${fieldId}`, "aria-label": "Section child field selector", className: "ms:w-full ms:min-w-0 ms:px-3 ms:py-2 ms:text-sm 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:focus:border-msprimary ms:cursor-pointer", value: resolvedActiveChildId ?? '', onChange: (e) => handleSelectChild(e.currentTarget.value), children: [_jsx("option", { value: "", children: "Select a child field\u2026" }), childFields.map((node) => {
+                                const childMeta = getFieldTypeMeta(node.definition.fieldType);
+                                const label = node.definition.fieldType === 'section'
+                                    ? node.definition.title || node.definition.id
+                                    : node.definition.question || node.definition.id;
+                                return (_jsxs("option", { value: node.definition.id, children: [label, " - ", childMeta?.label || node.definition.fieldType] }, node.definition.id));
+                            })] }))] }), activeChildDef && (_jsxs("div", { className: "ms:space-y-4 ms:p-4 ms:bg-msbackground ms:border ms:border-msborder ms:rounded-lg", children: [_jsxs("div", { className: "ms:flex ms:items-center ms:justify-between ms:gap-2", children: [_jsx("span", { className: "ms:inline-flex ms:items-center ms:px-2.5 ms:py-0.5 ms:rounded-full ms:text-xs ms:font-medium ms:bg-msprimary/10 ms:text-msprimary", children: activeChildMeta?.label || activeChildDef.fieldType }), _jsxs("button", { type: "button", onClick: handleDeleteChild, className: "ms:flex ms:items-center ms:gap-1.5 ms:px-3 ms:py-1.5 ms:text-xs ms:font-medium ms:bg-mssurface ms:text-msdanger ms:hover:text-msdanger ms:hover:bg-msdanger/10 ms:border ms:border-msdanger/50 ms:rounded ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none ms:cursor-pointer", title: "Delete this field", children: [_jsx("span", { className: "ms:font-bold", children: "\u00D7" }), "Delete"] })] }), activeChildDef.fieldType === 'section' ? (_jsxs("div", { className: "ms:space-y-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: `${instanceId}-editor-active-section-id-${activeChildDef.id}`, className: "edit-label ms:block ms:text-sm ms:font-medium ms:text-mstext ms:mb-1", children: "Section ID" }), _jsx(DraftIdEditor, { id: activeChildDef.id, fieldId: activeChildDef.id, onCommit: handleRenameChildId })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: `${instanceId}-editor-active-section-title-${activeChildDef.id}`, className: "edit-label ms:block ms:text-sm ms:text-mstext ms:mb-1", children: "Section Title" }), _jsx("input", { id: `${instanceId}-editor-active-section-title-${activeChildDef.id}`, type: "text", value: activeChildDef.title ?? '', onChange: (e) => handleUpdateChild({
+                                            title: e.currentTarget.value,
+                                        }), placeholder: "Enter section title...", className: "ms:w-full ms:min-w-0 ms:px-3 ms:py-2 ms:text-sm 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 ms:focus:border-msprimary ms:transition-colors" })] })] })) : (_jsx(CommonEditor, { fieldId: activeChildDef.id, def: activeChildDef, onUpdate: handleUpdateChild, onRenameId: handleRenameChildId })), (activeChildMeta?.hasOptions || activeChildMeta?.hasMatrix) && (_jsx("hr", { className: "ms:border-msborder" })), activeChildMeta?.hasOptions &&
+                        activeChildDef.options && (_jsx(OptionListEditor, { fieldId: activeChildDef.id, fieldType: activeChildDef.fieldType, options: activeChildDef.options })), activeChildMeta?.hasMatrix && (_jsx(MatrixEditor, { fieldId: activeChildDef.id, rows: activeChildDef.rows ?? [], columns: activeChildDef.columns ?? [] }))] }))] }));
+}

package/dist/lib/components/edit-panel/InputTypeEditor.d.ts

@@ -0,0 +1,16 @@
+import type { TextInputType } from '@esheet/core';
+export interface InputTypeEditorProps {
+    fieldId: string;
+    inputType: TextInputType;
+    unit?: string;
+    onChange: (patch: {
+        inputType?: TextInputType;
+        unit?: string;
+    }) => void;
+}
+/**
+ * InputTypeEditor — dropdown for input type + optional unit selector.
+ * Only relevant for `text` and `longtext` fields.
+ */
+export declare function InputTypeEditor({ fieldId, inputType, unit, onChange, }: InputTypeEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputTypeEditor.d.ts.map

package/dist/lib/components/edit-panel/InputTypeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTypeEditor.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/edit-panel/InputTypeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AA+BlD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,aAAa,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,aAAa,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACzE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE,oBAAoB,2CA8DtB"}