@esheet/renderer 0.0.4-0 → 0.0.4-1

package/dist/lib/EsheetRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EsheetRenderer.d.ts","sourceRoot":"","sources":["../../src/lib/EsheetRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,OAAO,EACZ,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAuB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAW9E,MAAM,WAAW,mBAAmB;IAClC;;+FAE2F;IAC3F,aAAa,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC;oFACgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAMD,gDAAgD;AAChD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE/C,gCAAgC;AAChC,MAAM,WAAW,kBAAkB;IACjC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,GAAG;QACvD,gGAAgG;QAChG,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAC;CACH;AAED,uDAAuD;AACvD,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,IAC/D,CAAC,SAAS,MAAM,GAAG,yBAAyB,GAAG,YAAY,CAAC;AAE9D,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,cAAc,EAAE,MAAM,YAAY,CAAC;IACnC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,EAAE,CAAC,CAAC,SAAS,cAAc,GAAG,QAAQ,EAC/C,OAAO,CAAC,EAAE,kBAAkB,GAAG;QAAE,MAAM,CAAC,EAAE,CAAC,CAAA;KAAE,KAC1C,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,YAAY,EAAE,MAAM,SAAS,CAAC;IAC9B,4BAA4B;IAC5B,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,6DAA6D;IAC7D,gBAAgB,EAAE,MAAM;QACtB,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;QAC9B,MAAM,EAAE,eAAe,EAAE,CAAC;KAC3B,CAAC;IACF,sDAAsD;IACtD,kBAAkB,EAAE,MAAM,OAAO,CAAC;IAClC,iHAAiH;IACjH,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,+FAA+F;IAC/F,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,cAAc,kGA2BzB,CAAC"}

package/dist/lib/EsheetRenderer.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createFormStore, createUIStore, normalizeResponses, hydrateDefinition, validateForm, } from '@esheet/core';
+import { exportResponseToFhir, } from '@esheet/adapters';
+import { createRendererTools } from './renderer-tools.js';
+import { FormStoreContext, UIContext, ZodIssuesPanel, useTouchMode, } from '@esheet/fields';
+import { ensureDefaultFieldComponentsRegistered } from './register-defaults.js';
+import { useRendererInit } from './hooks/useRendererInit.js';
+import { RendererBody } from './components/RendererBody.js';
+/**
+ * EsheetRenderer - Read-only questionnaire form renderer
+ *
+ * Renders a form in fill-out mode with conditional visibility logic.
+ * Reuses all field components from @esheet/fields.
+ *
+ * @example
+ * ```tsx
+ * const rendererRef = useRef<EsheetRendererHandle>(null);
+ *
+ * <EsheetRenderer
+ *   formData={myFormDefinition}
+ *   initialResponses={{ field1: 'answer' }}
+ *   ref={rendererRef}
+ * />
+ *
+ * // Later: get responses
+ * const responses = rendererRef.current?.getRawResponse();
+ * ```
+ */
+export const EsheetRenderer = React.forwardRef(function EsheetRenderer(props, ref) {
+    ensureDefaultFieldComponentsRegistered();
+    const formStore = React.useMemo(() => createFormStore(), []);
+    const uiStore = React.useMemo(() => createUIStore(), []);
+    React.useEffect(() => {
+        if (props.onRendererToolsReady)
+            props.onRendererToolsReady(createRendererTools(formStore));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [formStore]);
+    return (_jsx(FormStoreContext.Provider, { value: formStore, children: _jsx(UIContext.Provider, { value: uiStore, children: _jsx(EsheetRendererInner, { ...props, formStore: formStore, uiStore: uiStore, ref: ref }) }) }));
+});
+const EsheetRendererInner = React.forwardRef(function EsheetRendererInner({ formDataInput: formData, className = '', initialResponses, strict = false, onReady, formStore, uiStore, touchMode, onTouchModeChange, }, ref) {
+    const [validationErrors, setValidationErrors] = React.useState([]);
+    // Touch mode state using shared hook
+    const { isTouchEnabled, isManualOverride, setTouchMode: setTouchModeInternal, resetTouchMode: resetTouchModeInternal, } = useTouchMode({ mode: touchMode, onChange: onTouchModeChange });
+    // Initialize form definition and set preview mode
+    useRendererInit(formStore, uiStore, formData, initialResponses, setValidationErrors, strict, onReady);
+    // Expose ref API
+    React.useImperativeHandle(ref, () => ({
+        getRawResponse: () => formStore.getState().responses,
+        getResponse: (options) => {
+            const state = formStore.getState();
+            const responses = state.responses;
+            if (options?.format === 'fhir') {
+                // Build FHIR QuestionnaireResponse
+                const normalizedAnswers = normalizeResponses(responses);
+                // Try to get questionnaire URL from options or formSourceData
+                const fhirMeta = state.formSourceData;
+                const questionnaireUrl = options.fhir?.questionnaireUrl ??
+                    fhirMeta?.url ??
+                    `urn:uuid:${state.formId}`;
+                const exportOptions = {
+                    questionnaireUrl,
+                    status: options.fhir?.status ?? 'completed',
+                    subject: options.fhir?.subject,
+                    author: options.fhir?.author,
+                    resourceId: options.fhir?.resourceId,
+                };
+                // Rebuild form definition from normalized state
+                const formDefinition = {
+                    id: state.formId,
+                    fields: hydrateDefinition(state.normalized),
+                    _sourceData: state.formSourceData,
+                };
+                return exportResponseToFhir(formDefinition, normalizedAnswers, exportOptions);
+            }
+            // Native format (default)
+            return responses;
+        },
+        getFormStore: () => formStore,
+        getUIStore: () => uiStore,
+        getValidResponse: () => {
+            const state = formStore.getState();
+            const errors = validateForm(state.normalized, state.responses);
+            return {
+                response: errors.length === 0 ? state.responses : null,
+                errors,
+            };
+        },
+        isTouchModeEnabled: () => isTouchEnabled,
+        setTouchMode: setTouchModeInternal,
+        resetTouchMode: resetTouchModeInternal,
+    }), [
+        formStore,
+        uiStore,
+        isTouchEnabled,
+        setTouchModeInternal,
+        resetTouchModeInternal,
+    ]);
+    // Determine if touch mode class should be applied
+    // true: always apply, 'auto'/undefined: apply based on isTouchEnabled state, false: never apply (CSS only)
+    const applyTouchClass = touchMode === true ||
+        ((touchMode === 'auto' || touchMode === undefined) && isTouchEnabled);
+    // Apply disabled class when user explicitly disabled touch mode (prevents CSS media query)
+    const applyDisabledClass = isManualOverride && !isTouchEnabled;
+    const rootClasses = [
+        'esheet-renderer-root',
+        applyTouchClass && 'esheet-touch-active',
+        applyDisabledClass && 'touch-mode-disabled',
+        'ms:w-full ms:max-w-2xl ms:mx-auto ms:p-4 ms:text-mstext',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: rootClasses, children: [_jsx(ZodIssuesPanel, { issues: validationErrors }), _jsx(RendererBody, { form: formStore, ui: uiStore })] }));
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { FormStore, UIStore } from '@esheet/core';
+export interface FieldNodeProps {
+    id: string;
+    form: FormStore;
+    ui: UIStore;
+    /** Nesting depth for visual styling (default: 0) */
+    depth?: number;
+}
+/**
+ * FieldNode - Renders a single field or section with recursive children
+ *
+ * Looks up the field component from the registry and passes field props.
+ * For sections, recursively renders visible children.
+ */
+export declare const FieldNode: React.NamedExoticComponent<FieldNodeProps>;
+//# sourceMappingURL=FieldNode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldNode.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FieldNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAuB,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5E,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,OAAO,CAAC;IACZ,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,4CAiKpB,CAAC"}

package/dist/lib/components/FieldNode.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { getFieldComponent } from '@esheet/fields';
+/**
+ * FieldNode - Renders a single field or section with recursive children
+ *
+ * Looks up the field component from the registry and passes field props.
+ * For sections, recursively renders visible children.
+ */
+export const FieldNode = React.memo(function FieldNode({ id, form, ui, depth = 1, }) {
+    // Subscribe to field data
+    const field = React.useSyncExternalStore((cb) => form.subscribe(cb), () => form.getState().getField(id), () => form.getState().getField(id));
+    const normalized = React.useSyncExternalStore((cb) => form.subscribe(cb), () => form.getState().normalized, () => form.getState().normalized);
+    const responses = React.useSyncExternalStore((cb) => form.subscribe(cb), () => form.getState().responses, () => form.getState().responses);
+    // Get visible children for sections
+    const visibleChildIds = React.useMemo(() => {
+        if (!field || field.definition.fieldType !== 'section')
+            return [];
+        const node = normalized.byId[id];
+        if (!node || node.childIds.length === 0)
+            return [];
+        const cache = new Map();
+        const isFieldRenderable = (fieldId) => {
+            const cached = cache.get(fieldId);
+            if (cached !== undefined)
+                return cached;
+            const isVisible = form.getState().isVisible(fieldId);
+            if (!isVisible) {
+                cache.set(fieldId, false);
+                return false;
+            }
+            const childNode = normalized.byId[fieldId];
+            if (!childNode) {
+                cache.set(fieldId, false);
+                return false;
+            }
+            if (childNode.definition.fieldType !== 'section') {
+                cache.set(fieldId, true);
+                return true;
+            }
+            const hasRenderableChild = childNode.childIds.some((cid) => isFieldRenderable(cid));
+            cache.set(fieldId, hasRenderableChild);
+            return hasRenderableChild;
+        };
+        return node.childIds.filter((childId) => isFieldRenderable(childId));
+    }, [field, id, form, normalized, responses]);
+    // Render nested children for sections
+    const nestedChildren = React.useMemo(() => {
+        if (!field ||
+            field.definition.fieldType !== 'section' ||
+            visibleChildIds.length === 0) {
+            return null;
+        }
+        const containerClass = depth === 1
+            ? 'section-children ms:space-y-2'
+            : 'section-children ms:space-y-2 ms:border-l ms:border-msborder ms:pl-3';
+        return (_jsx("div", { className: containerClass, "data-depth": depth, children: visibleChildIds.map((childId) => (_jsx(FieldNode, { id: childId, form: form, ui: ui, depth: depth + 1 }, childId))) }));
+    }, [field, visibleChildIds, id, form, ui, depth]);
+    if (!field)
+        return null;
+    const Component = getFieldComponent(field.definition.fieldType);
+    // Check if field is enabled/required via conditional logic
+    const isVisible = form.getState().isVisible(field.definition.id);
+    const isEnabled = form.getState().isEnabled(field.definition.id);
+    const isRequired = form.getState().isRequired(field.definition.id);
+    const response = form.getState().getResponse(field.definition.id);
+    if (!isVisible)
+        return null;
+    const props = {
+        field,
+        form,
+        ui,
+        isSelected: false,
+        isPreview: true,
+        isEnabled,
+        isRequired,
+        response,
+        onRemove: () => undefined, // No-op in renderer
+        onUpdate: () => undefined, // No-op in renderer
+        onResponse: (value) => form.getState().setResponse(field.definition.id, value),
+    };
+    const isSection = field.definition.fieldType === 'section';
+    const parentNode = field.parentId
+        ? form.getState().getField(field.parentId)
+        : null;
+    const isChildOfSection = parentNode?.definition.fieldType === 'section';
+    const wrapperClass = `field-wrapper ms:bg-mssurface${isSection ? ' ms:mb-2 ms:border ms:border-msborder ms:rounded' : ''}${!isSection && !isChildOfSection
+        ? ' ms:mb-2 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' : ''}`;
+    return (_jsx("div", { className: wrapperClass, "data-field-type": field.definition.fieldType, "data-field-id": field.definition.id, "aria-disabled": !isEnabled || undefined, children: field.definition.fieldType === 'section' ? ((() => {
+            const SectionComponent = Component;
+            return (_jsx(SectionComponent, { ...props, nestedChildren: nestedChildren }));
+        })()) : (_jsx(Component, { ...props })) }));
+});

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

@@ -0,0 +1,14 @@
+import type { FormStore, UIStore } from '@esheet/core';
+export interface RendererBodyProps {
+    form: FormStore;
+    ui: UIStore;
+}
+/**
+ * RendererBody - Iterates over visible root fields and renders them
+ *
+ * Respects conditional visibility logic from form store.
+ * Only renders fields where isVisible() returns true.
+ * Sections recursively render their visible children.
+ */
+export declare function RendererBody({ form, ui }: RendererBodyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RendererBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RendererBody.d.ts","sourceRoot":"","sources":["../../../src/lib/components/RendererBody.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAGvD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,OAAO,CAAC;CACb;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,2CAyD3D"}

package/dist/lib/components/RendererBody.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { FieldNode } from './FieldNode.js';
+/**
+ * RendererBody - Iterates over visible root fields and renders them
+ *
+ * Respects conditional visibility logic from form store.
+ * Only renders fields where isVisible() returns true.
+ * Sections recursively render their visible children.
+ */
+export function RendererBody({ form, ui }) {
+    // Subscribe to form state for visibility updates and responses
+    const normalized = React.useSyncExternalStore((cb) => form.subscribe(cb), () => form.getState().normalized, () => form.getState().normalized);
+    const responses = React.useSyncExternalStore((cb) => form.subscribe(cb), () => form.getState().responses, () => form.getState().responses);
+    // Compute visible root fields
+    const visibleRootIds = React.useMemo(() => {
+        const cache = new Map();
+        const isFieldRenderable = (fieldId) => {
+            const cached = cache.get(fieldId);
+            if (cached !== undefined)
+                return cached;
+            const isVisible = form.getState().isVisible(fieldId);
+            if (!isVisible) {
+                cache.set(fieldId, false);
+                return false;
+            }
+            const node = normalized.byId[fieldId];
+            if (!node) {
+                cache.set(fieldId, false);
+                return false;
+            }
+            // Non-section fields are renderable if visible
+            if (node.definition.fieldType !== 'section') {
+                cache.set(fieldId, true);
+                return true;
+            }
+            // Sections are renderable only if they have at least one renderable child
+            const hasRenderableChild = node.childIds.some((childId) => isFieldRenderable(childId));
+            cache.set(fieldId, hasRenderableChild);
+            return hasRenderableChild;
+        };
+        return normalized.rootIds.filter((id) => isFieldRenderable(id));
+    }, [form, normalized, responses]);
+    return (_jsx("div", { className: "canvas-fields renderer-body ms:space-y-0", children: visibleRootIds.map((id) => (_jsx(FieldNode, { id: id, form: form, ui: ui }, id))) }));
+}

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

@@ -0,0 +1,3 @@
+export { RendererBody } from './RendererBody.js';
+export { FieldNode } from './FieldNode.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/lib/components/index.js

@@ -0,0 +1,2 @@
+export { RendererBody } from './RendererBody.js';
+export { FieldNode } from './FieldNode.js';

package/dist/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useRendererInit } from './useRendererInit.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/lib/hooks/index.js

@@ -0,0 +1 @@
+export { useRendererInit } from './useRendererInit.js';

package/dist/lib/hooks/useRendererInit.d.ts

@@ -0,0 +1,12 @@
+import { type FormResponse, type FormStore, type UIStore } from '@esheet/core';
+/**
+ * Initialize renderer with form definition.
+ *
+ * Auto-detects and converts the following input formats:
+ * - eSheet FormDefinition (object or JSON/YAML string)
+ * - FHIR R4 Questionnaire resource
+ * - MCP elicitation/create envelope
+ * - SurveyJS schema (has top-level `pages` or `elements` array)
+ */
+export declare function useRendererInit(form: FormStore, ui: UIStore, formData: unknown, initialResponses?: FormResponse, onValidationError?: (errors: string[]) => void, strict?: boolean, onReady?: () => void): void;
+//# sourceMappingURL=useRendererInit.d.ts.map

package/dist/lib/hooks/useRendererInit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRendererInit.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/useRendererInit.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,OAAO,EACb,MAAM,cAAc,CAAC;AAYtB;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,SAAS,EACf,EAAE,EAAE,OAAO,EACX,QAAQ,EAAE,OAAO,EACjB,gBAAgB,CAAC,EAAE,YAAY,EAC/B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC9C,MAAM,UAAQ,EACd,OAAO,CAAC,EAAE,MAAM,IAAI,GACnB,IAAI,CAqFN"}

package/dist/lib/hooks/useRendererInit.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import YAML from 'js-yaml';
+import { formatZodValidationError, formDefinitionSchema, } from '@esheet/core';
+import { importFromMcp, convertSurveyJS, isSurveyJSSchema, isMcpElicitationRequest, importFromFhir, isFhirQuestionnaire, } from '@esheet/adapters';
+/**
+ * Initialize renderer with form definition.
+ *
+ * Auto-detects and converts the following input formats:
+ * - eSheet FormDefinition (object or JSON/YAML string)
+ * - FHIR R4 Questionnaire resource
+ * - MCP elicitation/create envelope
+ * - SurveyJS schema (has top-level `pages` or `elements` array)
+ */
+export function useRendererInit(form, ui, formData, initialResponses, onValidationError, strict = false, onReady) {
+    // Store onReady in a ref so it never causes the effect to re-run
+    const onReadyRef = React.useRef(onReady);
+    onReadyRef.current = onReady;
+    React.useEffect(() => {
+        try {
+            // Parse input if string
+            let parsed;
+            if (typeof formData === 'string') {
+                const trimmed = formData.trim();
+                // Detect format: YAML if starts with non-brace, JSON otherwise
+                const isYaml = !trimmed.startsWith('{') && !trimmed.startsWith('[');
+                parsed = isYaml ? YAML.load(trimmed) : JSON.parse(trimmed);
+            }
+            else {
+                parsed = formData;
+            }
+            // Auto-detect and convert FHIR, MCP or SurveyJS input (skipped in strict mode)
+            if (!strict && isFhirQuestionnaire(parsed)) {
+                parsed = importFromFhir(parsed);
+            }
+            else if (!strict && isMcpElicitationRequest(parsed)) {
+                const mcpReq = parsed;
+                if (mcpReq.params.mode !== 'url') {
+                    parsed = importFromMcp(mcpReq.params.requestedSchema, {
+                        mcpId: mcpReq.id,
+                        mcpMessage: mcpReq.params.message,
+                    });
+                }
+            }
+            else if (!strict && isSurveyJSSchema(parsed)) {
+                parsed = convertSurveyJS(parsed);
+            }
+            // Validate schema
+            const validated = formDefinitionSchema.safeParse(parsed);
+            if (!validated.success) {
+                const errors = validated.error.issues.map(formatZodValidationError);
+                console.error('[EsheetRenderer] Invalid form definition:', validated.error.issues);
+                onValidationError?.(errors);
+                // Load empty form instead of crashing
+                form.getState().loadDefinition({
+                    id: 'invalid-form',
+                    title: 'Invalid Form',
+                    fields: [],
+                });
+                ui.getState().setMode('preview');
+                return;
+            }
+            // Clear any previous validation errors on success
+            onValidationError?.([]);
+            // Load validated definition
+            form.getState().loadDefinition(validated.data);
+            // Apply initial responses if provided
+            if (initialResponses && Object.keys(initialResponses).length > 0) {
+                for (const [fieldId, value] of Object.entries(initialResponses)) {
+                    form.getState().setResponse(fieldId, value);
+                }
+            }
+            // Set preview mode
+            ui.getState().setMode('preview');
+            onReadyRef.current?.();
+        }
+        catch (error) {
+            console.error('[EsheetRenderer] Failed to initialize:', error);
+            // Load empty form as fallback
+            form.getState().loadDefinition({
+                id: 'error-form',
+                title: 'Error',
+                fields: [],
+            });
+            ui.getState().setMode('preview');
+        }
+    }, [form, ui, formData, initialResponses, onValidationError, strict]);
+}

package/dist/lib/mcp/index.d.ts

@@ -0,0 +1,7 @@
+export { executeToolCall } from './tool-executor.js';
+export { RENDERER_TOOL_DEFINITIONS } from './tool-definitions.js';
+export { RENDERER_SYSTEM_PROMPT } from './system-prompt.js';
+export type { ToolDefinition } from './tool-definitions.js';
+export { useRendererMcpToolHandler } from './useRendererToolBridge.js';
+export type { UseRendererMcpToolHandlerOptions } from './useRendererToolBridge.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/mcp/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/mcp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvE,YAAY,EAAE,gCAAgC,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/lib/mcp/index.js

@@ -0,0 +1,4 @@
+export { executeToolCall } from './tool-executor.js';
+export { RENDERER_TOOL_DEFINITIONS } from './tool-definitions.js';
+export { RENDERER_SYSTEM_PROMPT } from './system-prompt.js';
+export { useRendererMcpToolHandler } from './useRendererToolBridge.js';

package/dist/lib/mcp/system-prompt.d.ts

@@ -0,0 +1,2 @@
+export declare const RENDERER_SYSTEM_PROMPT: string;
+//# sourceMappingURL=system-prompt.d.ts.map

package/dist/lib/mcp/system-prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-prompt.d.ts","sourceRoot":"","sources":["../../../src/lib/mcp/system-prompt.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,QAwByC,CAAC"}

package/dist/lib/mcp/system-prompt.js

@@ -0,0 +1,24 @@
+export const RENDERER_SYSTEM_PROMPT = 'Form renderer assistant. You can read the current form state, inspect field values, fill in responses, and clear answers.\n\n' +
+    'FILL WORKFLOW:\n' +
+    '1. Call get_form — returns {totalFields, filledCount, unfilledFields, filledFieldIds}.\n' +
+    '2. Fill every field in unfilledFields using fill_field.\n' +
+    '3. After each fill, check unfilledFields in the response for remaining empty fields. Fill them immediately.\n' +
+    '4. You are done when unfilledFields is empty.\n' +
+    'NEVER skip a field because you are unsure of its value — generate a realistic mock value for every field including dates, times, and appointment times.\n' +
+    'NEVER plan all fills upfront — conditional logic reveals new fields dynamically and you must respond to unfilledFields after each fill.\n\n' +
+    'TEXT FIELD FORMAT RULES — each text field includes a valueFormat property; use it exactly:\n' +
+    '  valueFormat "YYYY-MM-DD"       → date, e.g. "2026-05-21"\n' +
+    '  valueFormat "YYYY-MM-DDTHH:mm" → datetime-local, e.g. "2026-05-21T14:30"\n' +
+    '  valueFormat "YYYY-MM"          → month, e.g. "2026-05"\n' +
+    '  valueFormat "HH:mm"            → time (24-hour), e.g. "14:30"\n' +
+    'Wrong formats are rejected with an error — always use the valueFormat from the field schema.\n\n' +
+    'OTHER FIELD RULES:\n' +
+    '  radio/dropdown/boolean/rating/slider → single string matching an option value\n' +
+    '  check/multiselectdropdown            → array of strings matching option values\n' +
+    '  ranking                              → ordered array of option value strings\n' +
+    '  multitext                            → array of strings, one per option slot\n' +
+    '  singlematrix                         → { "Row Label": "Column Label" }\n' +
+    '  multimatrix                          → { "Row Label": ["Col1", "Col2"] }\n\n' +
+    'Use get_form_raw to see ALL fields. Use get_form_tree for visibility/enabled/required state. ' +
+    'Use get_valid_response before submitting. Use clear_responses to reset. ' +
+    'For conversational questions reply in plain text without calling a tool.';

package/dist/lib/mcp/tool-definitions.d.ts

@@ -0,0 +1,10 @@
+export interface ToolDefinition {
+    type: string;
+    function: {
+        name: string;
+        description: string;
+        parameters: Record<string, unknown>;
+    };
+}
+export declare const RENDERER_TOOL_DEFINITIONS: readonly ToolDefinition[];
+//# sourceMappingURL=tool-definitions.d.ts.map

package/dist/lib/mcp/tool-definitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-definitions.d.ts","sourceRoot":"","sources":["../../../src/lib/mcp/tool-definitions.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,yBAAyB,EAAE,SAAS,cAAc,EAsE9D,CAAC"}

package/dist/lib/mcp/tool-definitions.js

@@ -0,0 +1,66 @@
+export const RENDERER_TOOL_DEFINITIONS = [
+    {
+        type: 'function',
+        function: {
+            name: 'get_form',
+            description: 'Returns visible fields split into filled vs unfilled. Response: {formId, totalFields, filledCount, unfilledFields (full details), filledFieldIds (just IDs)}. Use unfilledFields to see what needs filling.\n\nFILL LOOP PATTERN:\n1. Call get_form — fill every field in unfilledFields using fill_field.\n2. Call get_form again. If new fields appeared in unfilledFields (revealed by conditional logic), fill those too.\n3. Repeat until unfilledFields is empty.\n\nNever assume you are done after a single pass — conditional logic frequently reveals new fields.',
+            parameters: { type: 'object', properties: {} },
+        },
+    },
+    {
+        type: 'function',
+        function: {
+            name: 'get_form_raw',
+            description: 'Returns ALL fields in the form regardless of visibility, conditional rules, or enabled state. Use this to see the full form schema.',
+            parameters: { type: 'object', properties: {} },
+        },
+    },
+    {
+        type: 'function',
+        function: {
+            name: 'get_responses',
+            description: 'Get the current raw response values for all fields.',
+            parameters: { type: 'object', properties: {} },
+        },
+    },
+    {
+        type: 'function',
+        function: {
+            name: 'get_valid_response',
+            description: 'Run form validation. Returns the full response object if all required fields pass, or null plus field-level errors if validation fails. Call this before submitting.',
+            parameters: { type: 'object', properties: {} },
+        },
+    },
+    {
+        type: 'function',
+        function: {
+            name: 'fill_field',
+            description: 'Set a response value for ONE visible field. Returns { result, filledCount, unfilledFields } where unfilledFields contains ONLY the fields still needing values (with full details including options/valueFormat). You are done when unfilledFields is empty.\n\nField type rules:\n- radio/dropdown/boolean/rating/slider: pass a single string matching one of the options values\n- check/multiselectdropdown: pass an array of strings matching option values\n- ranking: pass an ordered array of option value strings representing the desired rank order\n- multitext: pass an array of strings, one per option slot in order\n- singlematrix: pass an object { "Row Label": "Column Label" } for each row\n- multimatrix: pass an object { "Row Label": ["Col1", "Col2"] } for each row\n- text: use the valueFormat from the field\'s schema (e.g. YYYY-MM-DD for date, YYYY-MM-DDTHH:mm for datetime-local, YYYY-MM for month, HH:mm for time). Wrong formats are rejected with an error.',
+            parameters: {
+                type: 'object',
+                properties: {
+                    fieldId: { type: 'string' },
+                    fieldQuestion: { type: 'string' },
+                    value: {},
+                },
+                required: ['value'],
+            },
+        },
+    },
+    {
+        type: 'function',
+        function: {
+            name: 'clear_responses',
+            description: 'Clear all current form responses.',
+            parameters: { type: 'object', properties: {} },
+        },
+    },
+    {
+        type: 'function',
+        function: {
+            name: 'get_form_tree',
+            description: 'Get the full rendered field tree including visibility, enabled, and required state for each field given current responses.',
+            parameters: { type: 'object', properties: {} },
+        },
+    },
+];

package/dist/lib/mcp/tool-executor.d.ts

@@ -0,0 +1,5 @@
+import type { RendererTools } from '../renderer-tools.js';
+type ToolArgs = Record<string, unknown>;
+export declare function executeToolCall(toolName: string, args: ToolArgs, tools: RendererTools): string | Record<string, unknown>;
+export {};
+//# sourceMappingURL=tool-executor.d.ts.map

package/dist/lib/mcp/tool-executor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-executor.d.ts","sourceRoot":"","sources":["../../../src/lib/mcp/tool-executor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExC,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,aAAa,GACnB,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAoBlC"}

package/dist/lib/mcp/tool-executor.js

@@ -0,0 +1,55 @@
+export function executeToolCall(toolName, args, tools) {
+    switch (toolName) {
+        case 'get_form':
+            return getFormOptimized(tools);
+        case 'get_form_raw':
+            return tools.getFormRaw();
+        case 'get_responses':
+            return tools.getResponses();
+        case 'get_valid_response':
+            return tools.getValidResponse();
+        case 'fill_field':
+            return fillField(args, tools);
+        case 'clear_responses':
+            tools.clearResponses();
+            return 'Responses cleared';
+        case 'get_form_tree':
+            return { fields: tools.getFormTree() };
+        default:
+            return `Unknown tool: ${toolName}`;
+    }
+}
+/** Optimized get_form: returns full details only for unfilled fields to reduce token usage. */
+function getFormOptimized(tools) {
+    const form = tools.getForm();
+    const filledFields = form.fields.filter((f) => f.hasValue);
+    const unfilledFields = form.fields.filter((f) => !f.hasValue);
+    return {
+        formId: form.formId,
+        totalFields: form.fieldCount,
+        filledCount: filledFields.length,
+        // Only unfilled fields need full details (options, questions, etc.)
+        unfilledFields,
+        // Filled fields: just IDs for reference
+        filledFieldIds: filledFields.map((f) => f.id),
+    };
+}
+function fillField(args, tools) {
+    const fieldId = tools.resolveFieldId(args['fieldId'], args['fieldQuestion']);
+    if (!fieldId)
+        return 'Error: field not found — provide fieldId or fieldQuestion';
+    const result = tools.fillField(fieldId, args['value']);
+    if (typeof result === 'string')
+        return result; // format validation error
+    if (!result)
+        return `Error: field "${fieldId}" is not currently visible — call get_form to see the current visible fields`;
+    const form = tools.getForm();
+    // Return only unfilled fields with full details (token optimization)
+    const filledFields = form.fields.filter((f) => f.hasValue);
+    const unfilledFields = form.fields.filter((f) => !f.hasValue);
+    return {
+        result: `Field "${fieldId}" updated`,
+        filledCount: filledFields.length,
+        unfilledFields,
+    };
+}