@teleporthq/teleport-plugin-next-workflows 0.43.1

package/dist/esm/workflow-component-plugin.js

@@ -0,0 +1,1756 @@
+import { ChunkType, FileType, } from '@teleporthq/teleport-types';
+import * as types from '@babel/types';
+import { StringUtils } from '@teleporthq/teleport-shared';
+import { splitIntoSegments } from './segment-splitter';
+import { getAPIRouteFileName, hasStreamingAINode } from './api-route-generator';
+import { REALTIME_TRIGGER_TYPES, REALTIME_NODE_TYPES } from './graph-utils';
+import { neutraliseIsLoggedInGates } from './is-logged-in-gate';
+import { formControlPropertyReads } from './trigger-generator';
+const DOM_TO_REACT_EVENT = {
+    mousedown: 'onMouseDown',
+    mouseup: 'onMouseUp',
+    mousemove: 'onMouseMove',
+    mouseenter: 'onMouseEnter',
+    mouseleave: 'onMouseLeave',
+    mouseover: 'onMouseOver',
+    mouseout: 'onMouseOut',
+    contextmenu: 'onContextMenu',
+    dblclick: 'onDoubleClick',
+    touchstart: 'onTouchStart',
+    touchend: 'onTouchEnd',
+    touchmove: 'onTouchMove',
+    touchcancel: 'onTouchCancel',
+    keydown: 'onKeyDown',
+    keyup: 'onKeyUp',
+    keypress: 'onKeyPress',
+    pointerdown: 'onPointerDown',
+    pointerup: 'onPointerUp',
+    pointermove: 'onPointerMove',
+    pointerenter: 'onPointerEnter',
+    pointerleave: 'onPointerLeave',
+    pointercancel: 'onPointerCancel',
+    animationstart: 'onAnimationStart',
+    animationend: 'onAnimationEnd',
+    animationiteration: 'onAnimationIteration',
+    transitionend: 'onTransitionEnd',
+    compositionstart: 'onCompositionStart',
+    compositionend: 'onCompositionEnd',
+    compositionupdate: 'onCompositionUpdate',
+    drop: 'onDrop',
+    dragover: 'onDragOver',
+    dragenter: 'onDragEnter',
+    dragleave: 'onDragLeave',
+    dragstart: 'onDragStart',
+    dragend: 'onDragEnd',
+    drag: 'onDrag',
+};
+const getReactEventProp = (triggerType, config) => {
+    switch (triggerType) {
+        case 'event-element-clicked':
+            return 'onClick';
+        case 'event-form-submitted':
+            return 'onSubmit';
+        case 'event-input-updated':
+            return 'onChange';
+        case 'event-element-event': {
+            const eventType = config.eventType || 'click';
+            if (DOM_TO_REACT_EVENT[eventType]) {
+                return DOM_TO_REACT_EVENT[eventType];
+            }
+            return 'on' + eventType.charAt(0).toUpperCase() + eventType.slice(1);
+        }
+        default:
+            return null;
+    }
+};
+const getDOMEventName = (triggerType, config) => {
+    switch (triggerType) {
+        case 'event-element-clicked':
+            return config.eventType || 'click';
+        case 'event-form-submitted':
+            return 'submit';
+        case 'event-input-updated':
+            return 'input';
+        case 'event-element-event':
+            return config.eventType || 'click';
+        default:
+            return 'click';
+    }
+};
+// Recursively check whether `nodes` — or the body of any `general-custom-node`
+// they invoke, resolved via `customNodes` — contains a node with the given
+// type. Used to decide when a page needs to wire up a dependency (e.g. the
+// `teleportProductFavourites` setter for `state-update-global-state`) whose
+// actual use is nested inside a shared custom-node workflow.
+const hasNodeTypeTransitively = (nodes, targetType, customNodes, visited) => {
+    for (const node of nodes) {
+        if (node.type === targetType) {
+            return true;
+        }
+        if (node.type === 'general-custom-node' && customNodes) {
+            const customNodeId = (node.config || {}).customNodeId;
+            if (customNodeId && !visited.has(customNodeId)) {
+                visited.add(customNodeId);
+                const cn = customNodes[customNodeId];
+                if (cn &&
+                    Array.isArray(cn.nodes) &&
+                    hasNodeTypeTransitively(cn.nodes, targetType, customNodes, visited)) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+};
+// State names that live in GlobalContext (useGlobalContext) rather than in the
+// per-page or GlobalStateProvider registry. When a workflow reads or writes
+// any of these via state-{get,update}-global-state, the page must bridge the
+// GlobalContext setter/value into its stateSetters/stateValues maps so the
+// runtime handler can actually mutate the React state that Navigation and
+// other components read from.
+const GLOBAL_CONTEXT_STATE_NAMES = new Set(['currentUser']);
+const hasGlobalContextStateRefTransitively = (nodes, customNodes, visited) => {
+    var _a;
+    for (const node of nodes) {
+        if (node.type === 'state-update-global-state' || node.type === 'state-get-global-state') {
+            const prop = (_a = node.config) === null || _a === void 0 ? void 0 : _a.property;
+            if (typeof prop === 'string' && GLOBAL_CONTEXT_STATE_NAMES.has(prop)) {
+                return true;
+            }
+        }
+        if (node.type === 'general-custom-node' && customNodes) {
+            const customNodeId = (node.config || {}).customNodeId;
+            if (customNodeId && !visited.has(customNodeId)) {
+                visited.add(customNodeId);
+                const cn = customNodes[customNodeId];
+                if (cn &&
+                    Array.isArray(cn.nodes) &&
+                    hasGlobalContextStateRefTransitively(cn.nodes, customNodes, visited)) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+};
+export const createNextWorkflowPlugin = (config) => {
+    const { isPage = false } = config || {};
+    const workflowPlugin = async (structure) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const { uidl, chunks, options, dependencies } = structure;
+        const workflows = options.workflows;
+        if (!workflows || !workflows.workflows) {
+            return structure;
+        }
+        const relevantWorkflows = getRelevantWorkflows(workflows, uidl, isPage);
+        if (relevantWorkflows.length === 0) {
+            return structure;
+        }
+        const jsxComponent = chunks.find((chunk) => chunk.name === 'jsx-component' &&
+            typeof chunk.content === 'object' &&
+            'type' in chunk.content &&
+            chunk.content.type === 'VariableDeclaration');
+        if (!jsxComponent) {
+            return structure;
+        }
+        const stateDefinitions = uidl.stateDefinitions || {};
+        // Classify triggers into element-bound vs lifecycle
+        const elementTriggers = [];
+        const lifecycleWorkflows = [];
+        const stateChangeWorkflows = [];
+        const globalStateChangeWorkflows = [];
+        for (const wf of relevantWorkflows) {
+            const trigger = wf.trigger;
+            const triggerConfig = (trigger.config || {});
+            if (trigger.type === 'event-state-change') {
+                const triggerStateDefs = triggerConfig.stateDefinitions;
+                if (triggerStateDefs && triggerStateDefs.length > 0) {
+                    stateChangeWorkflows.push(wf);
+                }
+                continue;
+            }
+            if (trigger.type === 'event-global-state-change') {
+                const gsDefs = triggerConfig.globalStateDefinitions;
+                if (gsDefs && gsDefs.length > 0) {
+                    globalStateChangeWorkflows.push(wf);
+                }
+                continue;
+            }
+            const reactProp = getReactEventProp(trigger.type, triggerConfig);
+            if (reactProp) {
+                const elementId = (triggerConfig.elementHtmlId ||
+                    triggerConfig.nodeId ||
+                    triggerConfig.formNodeId);
+                if (elementId) {
+                    elementTriggers.push({ workflow: wf, elementId, reactProp, triggerConfig });
+                }
+                else {
+                    lifecycleWorkflows.push(wf);
+                }
+            }
+            else {
+                lifecycleWorkflows.push(wf);
+            }
+        }
+        // Pre-scan: find which element triggers can be matched to JSX elements
+        const componentBody = jsxComponent.content
+            .declarations[0].init.body;
+        const returnStatement = componentBody.body.find((s) => s.type === 'ReturnStatement');
+        let matchedElements = new Map();
+        const matchedElementTriggers = [];
+        const unmatchedElementTriggers = [];
+        if (returnStatement && returnStatement.argument && elementTriggers.length > 0) {
+            const targetIds = new Set(elementTriggers.map((t) => t.elementId));
+            matchedElements = findJSXElementsById(returnStatement.argument, targetIds);
+            for (const et of elementTriggers) {
+                if (matchedElements.has(et.elementId)) {
+                    matchedElementTriggers.push(et);
+                }
+                // If the element is not found in this page's JSX tree, skip it.
+                // Elements on this page have their id set in attrs.id and will be found by
+                // findJSXElementsById. Elements on other pages won't be found and would
+                // produce dead-code fallback handlers (document.getElementById returns null).
+            }
+        }
+        // Collect only workflows that have at least one active trigger on this page
+        const activeWorkflowIds = new Set();
+        for (const et of matchedElementTriggers) {
+            activeWorkflowIds.add(et.workflow.id);
+        }
+        for (const et of unmatchedElementTriggers) {
+            activeWorkflowIds.add(et.workflow.id);
+        }
+        for (const wf of lifecycleWorkflows) {
+            activeWorkflowIds.add(wf.id);
+        }
+        for (const wf of stateChangeWorkflows) {
+            activeWorkflowIds.add(wf.id);
+        }
+        for (const wf of globalStateChangeWorkflows) {
+            activeWorkflowIds.add(wf.id);
+        }
+        const activeWorkflows = relevantWorkflows.filter((wf) => activeWorkflowIds.has(wf.id));
+        const AUTH_NODE_TYPES = new Set([
+            'account-login',
+            'account-signup',
+            'account-logout',
+            'account-social-login',
+        ]);
+        const hasAuthNodes = activeWorkflows.some((wf) => wf.nodes.some((n) => AUTH_NODE_TYPES.has(n.type)));
+        // Broader flag: also fires when any workflow reads or writes a
+        // GlobalContext-managed state (currently `currentUser`) via
+        // state-{get,update}-global-state. Non-auth pages (e.g. /profile/[id])
+        // that update the logged-in user's record need the same
+        // stateSetters.currentUser → useGlobalContext().setCurrentUser bridge
+        // that auth pages already get — otherwise the workflow handler silently
+        // no-ops because stateSetters.currentUser is undefined.
+        const hasCurrentUserGlobalRefs = activeWorkflows.some((wf) => hasGlobalContextStateRefTransitively(wf.nodes, workflows.customNodes, new Set()));
+        const needsGlobalContextBridge = hasAuthNodes || hasCurrentUserGlobalRefs;
+        const hasAudioNodes = activeWorkflows.some((wf) => wf.nodes.some((n) => n.type === 'audio-play' || n.type === 'audio-stop'));
+        const hasCustomNodes = activeWorkflows.some((wf) => wf.nodes.some((n) => n.type === 'general-custom-node'));
+        // Walk into referenced custom-node workflows as well: the Add/Remove
+        // favourites flows (and similar shared logic) update global state from
+        // inside a `general-custom-node`, not directly on the page. Without the
+        // transitive check the page would skip plumbing the setter through
+        // `__createWorkflowHandlers`, and the workflow would mutate only the
+        // workflow's own context while the React state — and therefore the
+        // heart-icon toggle — stayed stale.
+        const hasGlobalStateUpdateNodes = activeWorkflows.some((wf) => hasNodeTypeTransitively(wf.nodes, 'state-update-global-state', workflows.customNodes, new Set()));
+        const hasGlobalStateChangeTriggers = globalStateChangeWorkflows.length > 0;
+        const needsGlobalState = hasGlobalStateUpdateNodes || hasGlobalStateChangeTriggers;
+        const globalStateDefs = (options.globalStateDefinitions || {});
+        const hasRealtimeUsage = activeWorkflows.some((wf) => REALTIME_TRIGGER_TYPES.has(wf.trigger.type) ||
+            wf.nodes.some((n) => REALTIME_NODE_TYPES.has(n.type)));
+        const outputOptionsForHydration = (_a = uidl.outputOptions) !== null && _a !== void 0 ? _a : {};
+        const initialPropsForHydration = outputOptionsForHydration.initialPropsData;
+        const formDataStateKeyForHydration = Object.keys(stateDefinitions).find((key) => {
+            const def = stateDefinitions[key];
+            return (def.type === 'object' &&
+                typeof def.defaultValue === 'object' &&
+                def.defaultValue !== null &&
+                !Array.isArray(def.defaultValue) &&
+                Object.keys(def.defaultValue).length > 0);
+        });
+        const needsAdminFormHydration = !!(((_b = initialPropsForHydration === null || initialPropsForHydration === void 0 ? void 0 : initialPropsForHydration.exposeAs) === null || _b === void 0 ? void 0 : _b.name) && formDataStateKeyForHydration);
+        // Row-owned self-guarded pages: the page-load SQL filters by
+        // user_id OR anonymous-localStorage UUID, so guest checkout
+        // buyers MUST be allowed through the workflow's
+        // `isLoggedIn === true` gate. See
+        // `neutraliseIsLoggedInGates` for the precise pattern this
+        // recognises and rewires; the source-of-truth row-owner flag is
+        // surfaced from the project UIDL via `options.auth`.
+        const pageIdForAuth = (_c = uidl.outputOptions) === null || _c === void 0 ? void 0 : _c.pageId;
+        const pageProtection = pageIdForAuth && ((_d = options.auth) === null || _d === void 0 ? void 0 : _d.pageProtection)
+            ? options.auth.pageProtection[pageIdForAuth]
+            : undefined;
+        const isRowOwnedSelfGuardedPage = !!(pageProtection &&
+            pageProtection.rowOwnerColumn &&
+            (!pageProtection.allowedRoles || pageProtection.allowedRoles.length === 0));
+        const moduleCode = generateModuleLevelCode(activeWorkflows, matchedElementTriggers, unmatchedElementTriggers, lifecycleWorkflows, stateChangeWorkflows, globalStateChangeWorkflows, hasAudioNodes, needsAdminFormHydration, isRowOwnedSelfGuardedPage);
+        if (moduleCode) {
+            chunks.push({
+                type: ChunkType.STRING,
+                name: 'workflow-module',
+                fileType: FileType.JS,
+                content: moduleCode,
+                linkAfter: ['import-local'],
+            });
+            const hasLifecycleOrFallback = lifecycleWorkflows.length > 0 || unmatchedElementTriggers.length > 0 || hasAudioNodes;
+            const hasStateChangeTriggers = stateChangeWorkflows.length > 0;
+            injectWorkflowCode(componentBody, stateDefinitions, matchedElementTriggers, matchedElements, hasLifecycleOrFallback, needsGlobalContextBridge, stateChangeWorkflows, needsGlobalState ? globalStateDefs : undefined, globalStateChangeWorkflows);
+            // For update/detail pages: initialize form state from props
+            const initialPropsData = (_e = uidl.outputOptions) === null || _e === void 0 ? void 0 : _e.initialPropsData;
+            if (((_f = initialPropsData === null || initialPropsData === void 0 ? void 0 : initialPropsData.exposeAs) === null || _f === void 0 ? void 0 : _f.name) && formDataStateKeyForHydration) {
+                const propName = initialPropsData.exposeAs.name;
+                const formDataStateKey = formDataStateKeyForHydration;
+                const setterName = StringUtils.createStateStoringFunction(formDataStateKey);
+                // Find the corresponding selected item ID state key
+                // Convention: if form data key is "usersSelectedItemData", ID key is "usersSelectedItemId"
+                const idStateKey = formDataStateKey.replace(/Data$/, 'Id');
+                const hasIdState = idStateKey !== formDataStateKey && stateDefinitions[idStateKey];
+                const idSetterName = hasIdState ? StringUtils.createStateStoringFunction(idStateKey) : null;
+                const defaultVal = (_h = (_g = stateDefinitions[formDataStateKey]) === null || _g === void 0 ? void 0 : _g.defaultValue) !== null && _h !== void 0 ? _h : {};
+                // Build the if-body statements
+                const ifBodyStatements = [
+                    types.expressionStatement(types.callExpression(types.identifier(setterName), [
+                        types.callExpression(types.identifier('__normalizeAdminFormRow'), [
+                            types.memberExpression(types.identifier('props'), types.identifier(propName)),
+                            defaultValueToLiteral(defaultVal),
+                        ]),
+                    ])),
+                ];
+                // Also set the selected item ID from props[propName].id
+                if (idSetterName) {
+                    ifBodyStatements.push(types.expressionStatement(types.callExpression(types.identifier(idSetterName), [
+                        types.callExpression(types.identifier('String'), [
+                            types.memberExpression(types.memberExpression(types.identifier('props'), types.identifier(propName)), types.identifier('id')),
+                        ]),
+                    ])));
+                }
+                // Also hydrate a sibling "initial" snapshot state if one exists by
+                // convention (e.g. `initialAccountFormData` paired with
+                // `accountFormData`). The auth account-form uses this snapshot as
+                // the baseline for its dirty-check workflow; without seeding the
+                // snapshot from props, `accountFormData` reflects the real user on
+                // first render while the snapshot is still the empty default, so
+                // the dirty check fires and the Update Account button is stuck on
+                // `changed`. Setting both in the same effect keeps the button
+                // accurately `idle` until the user actually edits a field.
+                const initialStateKey = 'initial' + formDataStateKey.charAt(0).toUpperCase() + formDataStateKey.slice(1);
+                if (initialStateKey !== formDataStateKey && stateDefinitions[initialStateKey]) {
+                    const initialSetterName = StringUtils.createStateStoringFunction(initialStateKey);
+                    const initialDefaultVal = (_k = (_j = stateDefinitions[initialStateKey]) === null || _j === void 0 ? void 0 : _j.defaultValue) !== null && _k !== void 0 ? _k : defaultVal;
+                    ifBodyStatements.push(types.expressionStatement(types.callExpression(types.identifier(initialSetterName), [
+                        types.callExpression(types.identifier('__normalizeAdminFormRow'), [
+                            types.memberExpression(types.identifier('props'), types.identifier(propName)),
+                            defaultValueToLiteral(initialDefaultVal),
+                        ]),
+                    ])));
+                }
+                // Generate: useEffect(() => { if (props[propName]) { setter(props[propName]); idSetter(String(props[propName].id)) } }, [])
+                const useEffectCall = types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
+                    types.arrowFunctionExpression([], types.blockStatement([
+                        types.ifStatement(types.memberExpression(types.identifier('props'), types.identifier(propName)), types.blockStatement(ifBodyStatements)),
+                    ])),
+                    types.arrayExpression([]),
+                ]));
+                // Insert useEffect after the workflow ref initialization (before the return statement)
+                const returnIdx = componentBody.body.findIndex((stmt) => types.isReturnStatement(stmt));
+                if (returnIdx > -1) {
+                    componentBody.body.splice(returnIdx, 0, useEffectCall);
+                }
+                dependencies.useEffect = {
+                    type: 'library',
+                    path: 'react',
+                    version: '>=16.8.0',
+                    meta: { namedImport: true },
+                };
+            }
+            dependencies.useRef = {
+                type: 'library',
+                path: 'react',
+                version: '>=16.8.0',
+                meta: { namedImport: true },
+            };
+            if (hasLifecycleOrFallback || hasStateChangeTriggers || hasGlobalStateChangeTriggers) {
+                dependencies.useEffect = {
+                    type: 'library',
+                    path: 'react',
+                    version: '>=16.8.0',
+                    meta: { namedImport: true },
+                };
+            }
+            const folderDepth = (((_l = uidl.outputOptions) === null || _l === void 0 ? void 0 : _l.folderPath) || []).length;
+            const pathPrefix = '../'.repeat(1 + folderDepth);
+            dependencies.workflowRuntime = {
+                type: 'local',
+                path: `${pathPrefix}utils/workflows/runtime`,
+            };
+            dependencies.workflowClientHandlers = {
+                type: 'local',
+                path: `${pathPrefix}utils/workflows/node-handlers-client`,
+            };
+            if (hasCustomNodes) {
+                dependencies.workflowCustomNodes = {
+                    type: 'local',
+                    path: `${pathPrefix}utils/workflows/custom-nodes`,
+                };
+            }
+            if (needsGlobalContextBridge) {
+                dependencies.useGlobalContext = {
+                    type: 'local',
+                    path: '@/global-context',
+                    meta: { namedImport: true },
+                };
+            }
+            if (needsGlobalState && Object.keys(globalStateDefs).length > 0) {
+                dependencies.useGlobalState = {
+                    type: 'local',
+                    path: '@/global-state-context',
+                    meta: { namedImport: true },
+                };
+            }
+            if (hasRealtimeUsage) {
+                dependencies.__realtimeClient = {
+                    type: 'local',
+                    path: `${pathPrefix}utils/realtime/client`,
+                };
+            }
+        }
+        return structure;
+    };
+    return workflowPlugin;
+};
+const defaultValueToLiteral = (val) => {
+    if (val === null) {
+        return types.nullLiteral();
+    }
+    if (typeof val === 'string') {
+        return types.stringLiteral(val);
+    }
+    if (typeof val === 'number') {
+        return types.numericLiteral(val);
+    }
+    if (typeof val === 'boolean') {
+        return types.booleanLiteral(val);
+    }
+    if (Array.isArray(val)) {
+        return types.arrayExpression(val.map((item) => defaultValueToLiteral(item)));
+    }
+    if (typeof val === 'object') {
+        const o = val;
+        return types.objectExpression(Object.keys(o).map((k) => types.objectProperty(types.stringLiteral(k), defaultValueToLiteral(o[k]))));
+    }
+    return types.nullLiteral();
+};
+const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+const resolveStateDefinitionKey = (rawName, stateDefinitions) => {
+    if (stateDefinitions[rawName]) {
+        return rawName;
+    }
+    const normalized = StringUtils.createStateOrPropStoringValue(rawName);
+    if (stateDefinitions[normalized]) {
+        return normalized;
+    }
+    return undefined;
+};
+const injectWorkflowCode = (componentBody, stateDefinitions, matchedTriggers, matchedElements, hasLifecycleOrFallback, needsGlobalContextBridge, stateChangeWorkflows, globalStateDefinitions, globalStateChangeWorkflows) => {
+    const stateSetterProperties = [];
+    const stateTypeProperties = [];
+    const stateValueProperties = [];
+    for (const [key, def] of Object.entries(stateDefinitions)) {
+        const setterName = StringUtils.createStateStoringFunction(key);
+        stateSetterProperties.push(types.objectProperty(types.identifier(key), types.identifier(setterName)));
+        stateTypeProperties.push(types.objectProperty(types.identifier(key), types.stringLiteral(def.type || 'string')));
+        stateValueProperties.push(types.objectProperty(types.identifier(key), types.identifier(key)));
+    }
+    const globalStateStatements = [];
+    if (globalStateDefinitions && Object.keys(globalStateDefinitions).length > 0) {
+        const destructuredProps = [];
+        for (const def of Object.values(globalStateDefinitions)) {
+            const setterName = `set${capitalize(def.name)}`;
+            destructuredProps.push(types.objectProperty(types.identifier(def.name), types.identifier(def.name), false, true));
+            destructuredProps.push(types.objectProperty(types.identifier(setterName), types.identifier(setterName), false, true));
+            stateSetterProperties.push(types.objectProperty(types.identifier(def.name), types.identifier(setterName)));
+            stateTypeProperties.push(types.objectProperty(types.identifier(def.name), types.stringLiteral(def.type || 'string')));
+            stateValueProperties.push(types.objectProperty(types.identifier(def.name), types.identifier(def.name)));
+        }
+        // Always destructure refreshGlobalState for refreshFromDataSource support.
+        // If no data source bindings exist, the context won't provide it, but
+        // destructuring it will safely produce `undefined` rather than a ReferenceError.
+        destructuredProps.push(types.objectProperty(types.identifier('refreshGlobalState'), types.identifier('refreshGlobalState'), false, true));
+        const gsDecl = types.variableDeclaration('const', [
+            types.variableDeclarator(types.objectPattern(destructuredProps), types.callExpression(types.identifier('useGlobalState'), [])),
+        ]);
+        globalStateStatements.push(gsDecl);
+    }
+    const authStatements = [];
+    if (needsGlobalContextBridge) {
+        // const __globalCtx = useGlobalContext()
+        const globalCtxDecl = types.variableDeclaration('const', [
+            types.variableDeclarator(types.identifier('__globalCtx'), types.callExpression(types.identifier('useGlobalContext'), [])),
+        ]);
+        authStatements.push(globalCtxDecl);
+        stateSetterProperties.push(types.objectProperty(types.identifier('currentUser'), types.memberExpression(types.identifier('__globalCtx'), types.identifier('setCurrentUser'))));
+        stateTypeProperties.push(types.objectProperty(types.identifier('currentUser'), types.stringLiteral('object')));
+        // Bridge the value too: state-get-global-state reads from __stateValues
+        // (seeded by stateValuesRef.current), so it needs currentUser here for
+        // workflows that merge the freshly-updated row with the previous snapshot.
+        // Use `__globalCtx.currentUser` rather than the `currentUser` shorthand to
+        // avoid depending on the locale-mapper-component plugin having already
+        // destructured it into page scope.
+        stateValueProperties.push(types.objectProperty(types.identifier('currentUser'), types.memberExpression(types.identifier('__globalCtx'), types.identifier('currentUser'))));
+    }
+    // const __wfRef = useRef(null)
+    const useRefDecl = types.variableDeclaration('const', [
+        types.variableDeclarator(types.identifier('__wfRef'), types.callExpression(types.identifier('useRef'), [types.nullLiteral()])),
+    ]);
+    // const __wfStateRef = useRef({})
+    const stateRefDecl = types.variableDeclaration('const', [
+        types.variableDeclarator(types.identifier('__wfStateRef'), types.callExpression(types.identifier('useRef'), [types.objectExpression([])])),
+    ]);
+    // __wfStateRef.current = { isLoading, searchQuery, countries, ... }
+    const stateRefUpdate = types.expressionStatement(types.assignmentExpression('=', types.memberExpression(types.identifier('__wfStateRef'), types.identifier('current')), types.objectExpression(stateValueProperties)));
+    const createHandlersArgs = [
+        types.objectExpression(stateSetterProperties),
+        types.objectExpression(stateTypeProperties),
+        types.identifier('__wfStateRef'),
+    ];
+    // if (!__wfRef.current) { __wfRef.current = __createWorkflowHandlers({...}, {...}, __wfStateRef) }
+    const initBlock = types.ifStatement(types.unaryExpression('!', types.memberExpression(types.identifier('__wfRef'), types.identifier('current'))), types.blockStatement([
+        types.expressionStatement(types.assignmentExpression('=', types.memberExpression(types.identifier('__wfRef'), types.identifier('current')), types.callExpression(types.identifier('__createWorkflowHandlers'), createHandlersArgs))),
+    ]));
+    const statementsToInsert = [
+        ...globalStateStatements,
+        ...authStatements,
+        useRefDecl,
+        stateRefDecl,
+    ];
+    const needsMountRef = (stateChangeWorkflows && stateChangeWorkflows.length > 0) ||
+        (globalStateChangeWorkflows && globalStateChangeWorkflows.length > 0);
+    if (needsMountRef) {
+        statementsToInsert.push(types.variableDeclaration('const', [
+            types.variableDeclarator(types.identifier('__wfMountRef'), types.callExpression(types.identifier('useRef'), [types.objectExpression([])])),
+        ]));
+    }
+    statementsToInsert.push(stateRefUpdate, initBlock);
+    if (hasLifecycleOrFallback) {
+        const useEffectStatement = types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
+            types.arrowFunctionExpression([], types.blockStatement([
+                types.returnStatement(types.callExpression(types.memberExpression(types.memberExpression(types.identifier('__wfRef'), types.identifier('current')), types.identifier('setupLifecycleTriggers')), [])),
+            ])),
+            types.arrayExpression([]),
+        ]));
+        statementsToInsert.push(useEffectStatement);
+    }
+    if (stateChangeWorkflows && stateChangeWorkflows.length > 0) {
+        for (const wf of stateChangeWorkflows) {
+            const safeId = wf.id.replace(/[^a-zA-Z0-9]/g, '_');
+            const triggerConfig = (wf.trigger.config || {});
+            const triggerStateDefs = triggerConfig.stateDefinitions;
+            if (!triggerStateDefs || triggerStateDefs.length === 0) {
+                continue;
+            }
+            const validStateNames = triggerStateDefs
+                .map((sd) => resolveStateDefinitionKey(sd.name, stateDefinitions))
+                .filter((name) => name !== undefined);
+            if (validStateNames.length === 0) {
+                continue;
+            }
+            const stateChangeEffect = types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
+                types.arrowFunctionExpression([], types.blockStatement([
+                    types.ifStatement(types.unaryExpression('!', types.memberExpression(types.memberExpression(types.identifier('__wfMountRef'), types.identifier('current')), types.stringLiteral(safeId), true)), types.blockStatement([
+                        types.expressionStatement(types.assignmentExpression('=', types.memberExpression(types.memberExpression(types.identifier('__wfMountRef'), types.identifier('current')), types.stringLiteral(safeId), true), types.booleanLiteral(true))),
+                        types.returnStatement(null),
+                    ])),
+                    types.expressionStatement(types.callExpression(types.memberExpression(types.memberExpression(types.memberExpression(types.identifier('__wfRef'), types.identifier('current')), types.identifier('stateChangeTriggers')), types.stringLiteral(safeId), true), [])),
+                ])),
+                types.arrayExpression(validStateNames.map((name) => types.identifier(name))),
+            ]));
+            statementsToInsert.push(stateChangeEffect);
+        }
+    }
+    if (globalStateChangeWorkflows && globalStateChangeWorkflows.length > 0) {
+        for (const wf of globalStateChangeWorkflows) {
+            const safeId = wf.id.replace(/[^a-zA-Z0-9]/g, '_');
+            const triggerConfig = (wf.trigger.config || {});
+            const gsDefs = triggerConfig.globalStateDefinitions;
+            if (!gsDefs || gsDefs.length === 0) {
+                continue;
+            }
+            const gsKey = `gs_${safeId}`;
+            const watchedNames = gsDefs.map((d) => d.name);
+            const makeCurrentValuesObj = () => types.objectExpression(gsDefs.map((d) => types.objectProperty(types.identifier(d.name), types.identifier(d.name))));
+            const gsChangeEffect = types.expressionStatement(types.callExpression(types.identifier('useEffect'), [
+                types.arrowFunctionExpression([], types.blockStatement([
+                    types.ifStatement(types.unaryExpression('!', types.memberExpression(types.memberExpression(types.identifier('__wfMountRef'), types.identifier('current')), types.stringLiteral(gsKey), true)), types.blockStatement([
+                        types.expressionStatement(types.assignmentExpression('=', types.memberExpression(types.memberExpression(types.identifier('__wfMountRef'), types.identifier('current')), types.stringLiteral(gsKey), true), makeCurrentValuesObj())),
+                        types.returnStatement(null),
+                    ])),
+                    types.expressionStatement(types.callExpression(types.memberExpression(types.memberExpression(types.identifier('__wfRef'), types.identifier('current')), types.identifier('onGlobalStateUpdate')), [
+                        types.stringLiteral(gsKey),
+                        types.memberExpression(types.identifier('__wfMountRef'), types.identifier('current')),
+                        makeCurrentValuesObj(),
+                    ])),
+                ])),
+                types.arrayExpression(watchedNames.map((name) => types.identifier(name))),
+            ]));
+            statementsToInsert.push(gsChangeEffect);
+        }
+    }
+    const returnIndex = componentBody.body.findIndex((s) => s.type === 'ReturnStatement');
+    if (returnIndex !== -1) {
+        componentBody.body.splice(returnIndex, 0, ...statementsToInsert);
+    }
+    else {
+        componentBody.body.push(...statementsToInsert);
+    }
+    // Inject React event props on matched JSX elements
+    if (matchedTriggers.length > 0) {
+        const triggersByElement = new Map();
+        for (const trigger of matchedTriggers) {
+            const list = triggersByElement.get(trigger.elementId) || [];
+            list.push(trigger);
+            triggersByElement.set(trigger.elementId, list);
+        }
+        for (const [elementId, openingElement] of matchedElements) {
+            const triggers = triggersByElement.get(elementId) || [];
+            const byProp = new Map();
+            for (const t of triggers) {
+                const list = byProp.get(t.reactProp) || [];
+                list.push(t);
+                byProp.set(t.reactProp, list);
+            }
+            for (const [reactProp] of byProp) {
+                // __wfRef.current.elementTriggers['elementId']['reactProp']
+                const wfHandlerExpr = types.memberExpression(types.memberExpression(types.memberExpression(types.memberExpression(types.identifier('__wfRef'), types.identifier('current')), types.identifier('elementTriggers')), types.stringLiteral(elementId), true), types.stringLiteral(reactProp), true);
+                const existingAttrIndex = openingElement.attributes.findIndex((attr) => types.isJSXAttribute(attr) &&
+                    types.isJSXIdentifier(attr.name) &&
+                    attr.name.name === reactProp);
+                if (existingAttrIndex !== -1) {
+                    // Element already has this event prop — combine both handlers
+                    const existingAttr = openingElement.attributes[existingAttrIndex];
+                    let existingExpr;
+                    if (types.isJSXExpressionContainer(existingAttr.value) &&
+                        types.isExpression(existingAttr.value.expression)) {
+                        existingExpr = existingAttr.value.expression;
+                    }
+                    else {
+                        continue;
+                    }
+                    // (event) => { existingHandler(event); __wfRef.current.elementTriggers[...](event); }
+                    const eventParam = types.identifier('event');
+                    const combinedBody = types.blockStatement([
+                        types.expressionStatement(types.callExpression(existingExpr, [eventParam])),
+                        types.expressionStatement(types.callExpression(wfHandlerExpr, [eventParam])),
+                    ]);
+                    const combinedHandler = types.arrowFunctionExpression([eventParam], combinedBody);
+                    openingElement.attributes[existingAttrIndex] = types.jSXAttribute(types.jSXIdentifier(reactProp), types.jSXExpressionContainer(combinedHandler));
+                }
+                else {
+                    // No existing prop — add directly
+                    openingElement.attributes.push(types.jSXAttribute(types.jSXIdentifier(reactProp), types.jSXExpressionContainer(wfHandlerExpr)));
+                }
+            }
+        }
+    }
+};
+const findJSXElementsById = (node, targetIds) => {
+    const results = new Map();
+    const traverse = (n) => {
+        if (!n || typeof n !== 'object') {
+            return;
+        }
+        if (types.isJSXOpeningElement(n)) {
+            for (const attr of n.attributes) {
+                if (types.isJSXAttribute(attr) &&
+                    types.isJSXIdentifier(attr.name) &&
+                    attr.name.name === 'id' &&
+                    types.isStringLiteral(attr.value) &&
+                    targetIds.has(attr.value.value)) {
+                    results.set(attr.value.value, n);
+                }
+            }
+        }
+        const keys = Object.keys(n);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (key === 'type' || key === 'start' || key === 'end' || key === 'loc') {
+                continue;
+            }
+            const child = n[key];
+            if (Array.isArray(child)) {
+                for (let j = 0; j < child.length; j++) {
+                    if (child[j] && typeof child[j] === 'object' && child[j].type) {
+                        traverse(child[j]);
+                    }
+                }
+            }
+            else if (child && typeof child === 'object' && child.type) {
+                traverse(child);
+            }
+        }
+    };
+    traverse(node);
+    return results;
+};
+const generateModuleLevelCode = (allWorkflows, matchedElementTriggers, unmatchedElementTriggers, lifecycleWorkflows, stateChangeWorkflows, globalStateChangeWorkflows, hasAudioNodes, includeAdminFormHydrationHelper, isRowOwnedSelfGuardedPage) => {
+    if (allWorkflows.length === 0) {
+        return '';
+    }
+    const adminFormHydrationPrelude = includeAdminFormHydrationHelper
+        ? `function __normalizeTagsForFormInput(v) {
+  if (v == null) return ''
+  if (Array.isArray(v)) return v.map(String).join(', ')
+  if (typeof v === 'string') {
+    var s = v.trim()
+    if (s[0] === '{' && s[s.length - 1] === '}') {
+      var inner = s.slice(1, -1)
+      if (!inner) return ''
+      return inner.split(',').map(function(part) {
+        var t = part.trim()
+        if (t[0] === '"' && t[t.length - 1] === '"') return t.slice(1, -1).replace(/""/g, '"')
+        return t
+      }).filter(Boolean).join(', ')
+    }
+    return v
+  }
+  return String(v)
+}
+function __normalizeAdminFormRow(row, defaults) {
+  if (row == null || typeof row !== 'object') return defaults
+  var out = {}
+  var keys = Object.keys(defaults)
+  for (var i = 0; i < keys.length; i++) {
+    var k = keys[i]
+    var camel = k.replace(/_([a-z])/g, function(_, ch) { return ch.toUpperCase() })
+    var v = row[k]
+    if (v === undefined) v = row[camel]
+    if (k === 'tags') {
+      v = __normalizeTagsForFormInput(v)
+    }
+    if (k === 'gallery_images' || k === 'additional_image_urls') {
+      if (Array.isArray(v)) v = v.map(String).join(String.fromCharCode(10))
+      else if (v != null && typeof v === 'object') v = JSON.stringify(v)
+      else if (typeof v !== 'string') v = v == null ? '' : String(v)
+    }
+    out[k] = v !== undefined && v !== null ? v : defaults[k]
+  }
+  return out
+}
+
+`
+        : '';
+    const configLines = [];
+    const elementHandlerLines = [];
+    const lifecycleLines = [];
+    // Lifecycle workflows on row-owned self-guarded pages — see the
+    // signal carrying that label in `createNextWorkflowPlugin`. The
+    // AI-generated page-load workflow for a details page typically
+    // looks like:
+    //   resolve-user → evaluate-auth → IF (isLoggedIn === true)
+    //     TRUE  → SQL fetch (filtered by user_id OR anonymousUserId)
+    //     FALSE → navigation-go-to-page (home / sign-in)
+    // For guest checkout we WANT the SQL to run so the
+    // anonymousUserId fallback in its WHERE clause can match the
+    // order. Rewiring the IF's FALSE branch to the TRUE branch's
+    // target turns the gate into a no-op without removing the IF
+    // node itself (the runtime still evaluates it; the redirect
+    // target just stops being reachable for that path).
+    const lifecycleIdSet = new Set(lifecycleWorkflows.map((w) => w.id));
+    for (const wf of allWorkflows) {
+        const safeId = wf.id.replace(/[^a-zA-Z0-9]/g, '_');
+        const segments = splitIntoSegments(wf);
+        const serverSegments = segments.filter((s) => s.env === 'server');
+        const serverUrls = {};
+        serverSegments.forEach((seg) => {
+            serverUrls[seg.id] = `/api/workflows/${getAPIRouteFileName(wf.id, seg.id, wf.name)}`;
+        });
+        if (isRowOwnedSelfGuardedPage && lifecycleIdSet.has(wf.id)) {
+            neutraliseIsLoggedInGates(wf, segments);
+        }
+        const segmentsJson = JSON.stringify(segments.map((s) => ({
+            id: s.id,
+            env: s.env,
+            hasStreamingAI: hasStreamingAINode(s),
+            nodes: s.nodes.map((n) => ({
+                id: n.id,
+                type: n.type,
+                config: n.config,
+                stepNumber: n.stepNumber,
+                label: n.label,
+            })),
+            edges: s.edges.map((e) => ({
+                id: e.id,
+                source: e.source,
+                target: e.target,
+                sourceHandle: e.sourceHandle,
+                targetHandle: e.targetHandle,
+                data: e.data,
+            })),
+        })));
+        const nodesJson = JSON.stringify(wf.nodes.map((n) => ({
+            id: n.id,
+            type: n.type,
+            config: n.config,
+            stepNumber: n.stepNumber,
+            label: n.label,
+        })));
+        const edgesJson = JSON.stringify(wf.edges.map((e) => ({
+            id: e.id,
+            source: e.source,
+            target: e.target,
+            sourceHandle: e.sourceHandle,
+            targetHandle: e.targetHandle,
+            data: e.data,
+        })));
+        configLines.push(`const __wfConfig_${safeId} = {\n` +
+            `  triggerNodeId: '${wf.trigger.nodeId}',\n` +
+            `  segments: ${segmentsJson},\n` +
+            (wf.errorHandler ? `  errorHandlerNodeId: '${wf.errorHandler.nodeId}',\n` : '') +
+            `  nodes: ${nodesJson},\n` +
+            `  edges: ${edgesJson}\n` +
+            `};\n` +
+            `const __wfServerUrls_${safeId} = ${JSON.stringify(serverUrls)};`);
+    }
+    // Group matched element triggers by elementId → reactProp → handlers
+    const byElement = new Map();
+    for (const et of matchedElementTriggers) {
+        if (!byElement.has(et.elementId)) {
+            byElement.set(et.elementId, new Map());
+        }
+        const propMap = byElement.get(et.elementId);
+        if (!propMap.has(et.reactProp)) {
+            propMap.set(et.reactProp, []);
+        }
+        propMap.get(et.reactProp).push(et);
+    }
+    for (const [elementId, propMap] of byElement) {
+        const propEntries = [];
+        for (const [reactProp, triggers] of propMap) {
+            if (triggers.length === 1) {
+                const handler = generateElementHandler(triggers[0]);
+                propEntries.push(`    ${reactProp}: ${handler}`);
+            }
+            else {
+                const handlerDefs = triggers.map((t) => {
+                    const sid = t.workflow.id.replace(/[^a-zA-Z0-9]/g, '_');
+                    return `      const __h_${sid} = ${generateElementHandler(t)};`;
+                });
+                const handlerCalls = triggers.map((t) => {
+                    const sid = t.workflow.id.replace(/[^a-zA-Z0-9]/g, '_');
+                    return `        await __h_${sid}(event);`;
+                });
+                propEntries.push(`    ${reactProp}: (function() {\n` +
+                    handlerDefs.join('\n') +
+                    '\n' +
+                    `      return async function(event) {\n` +
+                    handlerCalls.join('\n') +
+                    '\n' +
+                    `      };\n` +
+                    `    })()`);
+            }
+        }
+        elementHandlerLines.push(`  elementTriggers['${elementId}'] = {\n${propEntries.join(',\n')}\n  };`);
+    }
+    // Unmatched element triggers → addEventListener fallback in setupLifecycleTriggers
+    for (const et of unmatchedElementTriggers) {
+        const safeId = et.workflow.id.replace(/[^a-zA-Z0-9]/g, '_');
+        const code = generateUnmatchedElementFallback(et, safeId);
+        if (code) {
+            lifecycleLines.push(code);
+        }
+    }
+    // Lifecycle triggers
+    for (const wf of lifecycleWorkflows) {
+        const safeId = wf.id.replace(/[^a-zA-Z0-9]/g, '_');
+        const code = generateLifecycleTrigger(wf, safeId);
+        if (code) {
+            lifecycleLines.push(code);
+        }
+    }
+    // State change trigger handlers
+    const stateChangeHandlerLines = [];
+    for (const wf of stateChangeWorkflows) {
+        const safeId = wf.id.replace(/[^a-zA-Z0-9]/g, '_');
+        stateChangeHandlerLines.push(`  stateChangeTriggers['${safeId}'] = function() {\n` +
+            `    const triggerContext = { timestamp: Date.now() };\n` +
+            `    __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});\n` +
+            `  };`);
+    }
+    // Global state change trigger handlers
+    const globalStateChangeHandlerLines = [];
+    for (const wf of globalStateChangeWorkflows) {
+        const safeId = wf.id.replace(/[^a-zA-Z0-9]/g, '_');
+        const gsKey = `gs_${safeId}`;
+        const triggerConfig = (wf.trigger.config || {});
+        const gsDefs = triggerConfig.globalStateDefinitions;
+        if (!gsDefs || gsDefs.length === 0) {
+            continue;
+        }
+        const defsJson = JSON.stringify(gsDefs.map((d) => ({ globalStateId: d.globalStateId, name: d.name })));
+        globalStateChangeHandlerLines.push(`  globalStateChangeTriggers['${gsKey}'] = function(prev, current) {\n` +
+            `    const defs = ${defsJson};\n` +
+            `    for (let i = 0; i < defs.length; i++) {\n` +
+            `      const d = defs[i];\n` +
+            `      if (current[d.name] !== prev[d.name]) {\n` +
+            `        __execWf(__wfConfig_${safeId}, {\n` +
+            `          globalStateId: d.globalStateId,\n` +
+            `          globalStateName: d.name,\n` +
+            `          previousValue: prev[d.name],\n` +
+            `          newValue: current[d.name],\n` +
+            `          timestamp: Date.now()\n` +
+            `        }, __wfServerUrls_${safeId});\n` +
+            `      }\n` +
+            `    }\n` +
+            `  };`);
+    }
+    return `${adminFormHydrationPrelude}
+// --- Workflow Configuration (auto-generated) ---
+${configLines.join('\n\n')}
+
+function __createWorkflowHandlers(stateSetters, stateTypes, stateValuesRef) {
+  const __handlers = Object.assign({}, workflowClientHandlers);
+
+  var __stateNameMap = {};
+  var __setterKeys = Object.keys(stateSetters);
+  for (var __i = 0; __i < __setterKeys.length; __i++) {
+    __stateNameMap[__setterKeys[__i]] = __setterKeys[__i];
+    var __snake = __setterKeys[__i].replace(/[A-Z]/g, function(l) { return '_' + l.toLowerCase(); });
+    if (__snake !== __setterKeys[__i]) __stateNameMap[__snake] = __setterKeys[__i];
+  }
+  function __resolveName(name) { return __stateNameMap[name] || name; }
+
+  function __coerceValue(value, property) {
+    const type = stateTypes[property];
+    // Defensive unwrap for a recurring AI-wiring bug: workflows
+    // sometimes bind a setter input straight to the output of a
+    // "state-get-local-state" node instead of dereferencing its
+    // ".value" field. The documented output shape is
+    // { value, key } — forwarding that object to setState makes
+    // React crash with "Objects are not valid as a React child
+    // (found: object with keys {value, key})". When the shape is
+    // unambiguous (exactly two keys, "value" and "key") AND the
+    // target state is not declared as an object type (objects can
+    // legitimately carry such a structure), unwrap to .value so the
+    // setter receives the primitive the workflow author intended.
+    if (
+      value &&
+      typeof value === 'object' &&
+      !Array.isArray(value) &&
+      type !== 'object' &&
+      'value' in value &&
+      'key' in value &&
+      Object.keys(value).length === 2
+    ) {
+      value = value.value;
+    }
+    if (type === 'boolean') return value === 'true' || value === true;
+    if (type === 'number' && typeof value === 'string') {
+      const parsed = Number(value);
+      if (!isNaN(parsed)) return parsed;
+    }
+    return value;
+  }
+
+  function __stateUpdateHandler(config, context) {
+    var prop = __resolveName(config.property);
+
+    if (config.refreshFromDataSource && typeof refreshGlobalState === 'function') {
+      refreshGlobalState(prop);
+      return Promise.resolve({ success: true, property: prop, refreshFromDataSource: true });
+    }
+
+    const value = __coerceValue(config.value, prop);
+    if (config.objectUpdateMode === 'property' && config.objectPropertyPath) {
+      const currentObj = (context && context.__stateValues && context.__stateValues[prop] != null)
+        ? context.__stateValues[prop]
+        : (stateValuesRef.current[prop] || {});
+      if (currentObj[config.objectPropertyPath] === value) {
+        return Promise.resolve({ success: true, property: prop, value: currentObj });
+      }
+      const newObj = Object.assign({}, currentObj);
+      newObj[config.objectPropertyPath] = value;
+      if (context && context.__stateValues) context.__stateValues[prop] = newObj;
+      if (stateSetters[prop]) stateSetters[prop](newObj);
+      return Promise.resolve({ success: true, property: prop, value: newObj });
+    }
+    var prevValue = (context && context.__stateValues) ? context.__stateValues[prop] : stateValuesRef.current[prop];
+    if (prevValue === value) {
+      return Promise.resolve({ success: true, property: prop, value: value });
+    }
+    if (context && context.__stateValues) context.__stateValues[prop] = value;
+    if (stateSetters[prop]) stateSetters[prop](value);
+    return Promise.resolve({ success: true, property: prop, value: value });
+  }
+
+  __handlers['state-update-local-state'] = __stateUpdateHandler;
+  __handlers['state-update-global-state'] = __stateUpdateHandler;
+
+  __handlers['state-get-local-state'] = function(config, context) {
+    var prop = __resolveName(config.property);
+    // Always read the LATEST committed state from stateValuesRef.current
+    // instead of the trigger-time snapshot in context.__stateValues. React
+    // 17 (which the generated app pins to) does not batch setState calls
+    // fired from useEffect or .then chains, so a single state-change can
+    // produce two renders that each fire the trigger with a different
+    // snapshot. The async invocations race to the final stateSetters
+    // write, and the stale-snapshot one can win — leaving the Update
+    // Account button stuck on 'changed' even when current and initial
+    // form data are equal. Reading latest makes every invocation converge
+    // to the same result so the race is harmless. Server segments still
+    // use the snapshot from their request body (this handler is the
+    // client implementation only).
+    var live = (stateValuesRef && stateValuesRef.current) || (context && context.__stateValues) || {};
+    // The schema declares state-get-local-state output as { value, key } —
+    // emit both so workflows that bind to .key (the configured property
+    // name) don't silently resolve to undefined. We return the original
+    // config.property the user typed in the editor, not the resolved
+    // camelCase variant from __resolveName, so the binding matches what
+    // the GUI showed at edit time.
+    return Promise.resolve({ value: live[prop], key: config.property });
+  };
+
+  __handlers['state-batch-update'] = function(config, context) {
+    var updates = config.updates || [];
+    var updatedKeys = [];
+    for (var i = 0; i < updates.length; i++) {
+      var u = updates[i];
+      var key = __resolveName(u.key);
+      var val = __coerceValue(u.value, key);
+      if (context && context.__stateValues) context.__stateValues[key] = val;
+      if (stateSetters[key]) stateSetters[key](val);
+      updatedKeys.push(key);
+    }
+    return Promise.resolve({ updatedKeys: updatedKeys, updateCount: updatedKeys.length });
+  };
+
+  function __execWf(config, triggerContext, serverUrls) {
+    triggerContext.__stateValues = Object.assign({}, stateValuesRef.current);
+    var fullConfig = typeof workflowCustomNodes !== 'undefined'
+      ? Object.assign({}, config, { customNodes: workflowCustomNodes })
+      : config;
+    return workflowRuntime.executeWorkflowWithSegments(fullConfig, triggerContext, __handlers, serverUrls)
+      .then(function(ctx) {
+        if (ctx && ctx.__previousNodeResult && ctx.__previousNodeResult.checkoutUrl) {
+          window.location.href = ctx.__previousNodeResult.checkoutUrl;
+        }
+        return ctx;
+      })
+      .catch(function(err) { console.error('[workflow]', err); });
+  }
+
+  if (stateSetters.currentUser) {
+    const __wrapAuth = function(nodeType, extractUser) {
+      const orig = __handlers[nodeType];
+      if (!orig) return;
+      __handlers[nodeType] = async function(config, context) {
+        const result = await orig(config, context);
+        const user = extractUser(result);
+        if (user !== undefined) stateSetters.currentUser(user);
+        return result;
+      };
+    };
+    __wrapAuth('account-login', function(r) { return r && r.success ? r.user || null : undefined; });
+    __wrapAuth('account-signup', function(r) { return r && r.success ? r.user || null : undefined; });
+    __wrapAuth('account-logout', function(r) { return r && r.success ? null : undefined; });
+  }
+
+  const elementTriggers = {};
+${elementHandlerLines.join('\n')}
+
+  const setupLifecycleTriggers = function() {
+    const cleanups = [];
+${lifecycleLines.join('\n')}
+${hasAudioNodes
+        ? `    cleanups.push(function() {
+      var instances = typeof window !== 'undefined' && window.__teleportAudioInstances;
+      if (instances) {
+        instances.forEach(function(audio) { try { audio.pause(); audio.currentTime = 0; } catch(e) {} });
+        instances.clear();
+      }
+    });`
+        : ''}
+    return function() {
+      cleanups.forEach(function(fn) { if (typeof fn === 'function') fn(); });
+    };
+  };
+
+  const stateChangeTriggers = {};
+${stateChangeHandlerLines.join('\n')}
+
+  const globalStateChangeTriggers = {};
+${globalStateChangeHandlerLines.join('\n')}
+
+  function __onGlobalStateUpdate(key, mountRef, currentValues) {
+    const prev = mountRef[key];
+    const trigger = globalStateChangeTriggers[key];
+    if (prev && trigger) trigger(prev, currentValues);
+    mountRef[key] = Object.assign({}, currentValues);
+  }
+
+  return {
+    elementTriggers: elementTriggers,
+    setupLifecycleTriggers: setupLifecycleTriggers,
+    stateChangeTriggers: stateChangeTriggers,
+    onGlobalStateUpdate: __onGlobalStateUpdate
+  };
+}
+// --- End Workflow Configuration ---
+`;
+};
+const generateElementHandler = (et) => {
+    const safeId = et.workflow.id.replace(/[^a-zA-Z0-9]/g, '_');
+    const config = et.triggerConfig;
+    const elementId = et.elementId;
+    switch (et.workflow.trigger.type) {
+        case 'event-element-clicked': {
+            const preventDefault = config.preventDefault;
+            const stopPropagation = config.stopPropagation;
+            const debounce = config.debounce;
+            let body = '';
+            if (preventDefault) {
+                body += '    event.preventDefault();\n';
+            }
+            if (stopPropagation) {
+                body += '    event.stopPropagation();\n';
+            }
+            // Use `currentTarget` (the element the listener is attached to) instead
+            // of `target` (the deepest child clicked) so workflows reading
+            // `previousContext.element.dataset.*` still see the data attributes on
+            // the bound element when the user clicks a child — e.g. the payment
+            // provider row sets `data-provider-name` on the row div, but a click
+            // on the inner label span would otherwise resolve to an empty dataset.
+            body +=
+                `    const __te = event.currentTarget || event.target;\n` +
+                    `    const triggerContext = { elementId: '${elementId}', triggerElement: __te, element: __te, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY };\n` +
+                    `    return __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});`;
+            if (debounce) {
+                return (`(function() {\n` +
+                    `      let timer = null;\n` +
+                    `      return function(event) {\n` +
+                    `        clearTimeout(timer);\n` +
+                    `        timer = setTimeout(async function() {\n` +
+                    `    ${body}\n` +
+                    `        }, ${debounce});\n` +
+                    `      };\n` +
+                    `    })()`);
+            }
+            return `async function(event) {\n${body}\n  }`;
+        }
+        case 'event-form-submitted': {
+            const preventDefault = config.preventDefault !== false;
+            return (`async function(event) {\n` +
+                (preventDefault ? '    event.preventDefault();\n' : '') +
+                `    const formData = {};\n` +
+                `    const fd = new FormData(event.target);\n` +
+                `    fd.forEach(function(v, k) { formData[k] = v; });\n` +
+                `    const triggerContext = { formData: formData, formId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() };\n` +
+                `    return __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});\n` +
+                `  }`);
+        }
+        case 'event-input-updated': {
+            const debounce = config.debounce;
+            if (debounce) {
+                // Plan v35 D4 — the debounce wraps the WORKFLOW execution, but the
+                // generated handler MUST also dispatch a custom `__wfDebouncedInput`
+                // event so the controlled-input wrapper can update React state
+                // IMMEDIATELY (before the debounce fires). Without this, the input's
+                // `value={…}` prop only changes after the 300ms delay, the user sees
+                // a frozen text field, and the workflow never gets a chance to run
+                // because every keystroke clears the timer.
+                return (`(function() {\n` +
+                    `      let timer = null;\n` +
+                    `      return function(event) {\n` +
+                    `        const value = event.target.value;\n` +
+                    `        // Plan v35 D4 — dispatch IMMEDIATELY so the controlled-input mirror\n` +
+                    `        // state updates without waiting for the workflow debounce.\n` +
+                    `        try {\n` +
+                    `          event.target.dispatchEvent(new CustomEvent('__wfDebouncedInput', { detail: { value: value, elementId: '${elementId}' }, bubbles: true }));\n` +
+                    `        } catch (e) { /* non-fatal */ }\n` +
+                    `        clearTimeout(timer);\n` +
+                    `        timer = setTimeout(async function() {\n` +
+                    `          const triggerContext = { value: value, elementId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() };\n` +
+                    `          __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});\n` +
+                    `        }, ${debounce});\n` +
+                    `      };\n` +
+                    `    })()`);
+            }
+            return (`async function(event) {\n` +
+                `    const triggerContext = { value: event.target.value, elementId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() };\n` +
+                `    return __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});\n` +
+                `  }`);
+        }
+        case 'event-element-event': {
+            const preventDefault = config.preventDefault;
+            const stopPropagation = config.stopPropagation;
+            const eventType = config.eventType || 'click';
+            const isDropEvent = eventType === 'drop';
+            return (`async function(event) {\n` +
+                (preventDefault ? '    event.preventDefault();\n' : '') +
+                (stopPropagation ? '    event.stopPropagation();\n' : '') +
+                `    const __te = event.currentTarget || event.target;\n` +
+                // `formControlPropertyReads(...)` injects `value`, `checked`, `files`
+                // so dropdown/input/checkbox/file-picker `change` events surface the
+                // user's choice as `triggerContext.value` (etc.) — without this every
+                // `state-update-local-state` node bound to `Trigger.value` writes
+                // `undefined` and the picker becomes a no-op.
+                `    const triggerContext = { elementId: '${elementId}', eventType: '${eventType}', triggerElement: __te, element: __te, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY, offsetX: event.offsetX, offsetY: event.offsetY, button: event.button, deltaX: event.deltaX, deltaY: event.deltaY, deltaMode: event.deltaMode, key: event.key, ${formControlPropertyReads('__te')} };\n` +
+                (isDropEvent
+                    ? '    if (event.dataTransfer && event.dataTransfer.files) { triggerContext.files = Array.from(event.dataTransfer.files); }\n'
+                    : '') +
+                `    return __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});\n` +
+                `  }`);
+        }
+        default:
+            return (`async function(event) {\n` +
+                `    const __te = event.currentTarget || event.target;\n` +
+                `    const triggerContext = { elementId: '${elementId}', triggerElement: __te, element: __te, timestamp: Date.now() };\n` +
+                `    return __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});\n` +
+                `  }`);
+    }
+};
+const generateUnmatchedElementFallback = (et, safeId) => {
+    const config = et.triggerConfig;
+    const elementId = et.elementId;
+    const domEvent = getDOMEventName(et.workflow.trigger.type, config);
+    const preventDefault = config.preventDefault;
+    const stopPropagation = config.stopPropagation;
+    const debounce = config.debounce;
+    const isForm = et.workflow.trigger.type === 'event-form-submitted';
+    const isInput = et.workflow.trigger.type === 'event-input-updated';
+    let handlerBody = '';
+    if (preventDefault || isForm) {
+        handlerBody += '        event.preventDefault();\n';
+    }
+    if (stopPropagation) {
+        handlerBody += '        event.stopPropagation();\n';
+    }
+    if (isForm) {
+        handlerBody +=
+            `        const formData = {};\n` +
+                `        const fd = new FormData(event.target);\n` +
+                `        fd.forEach(function(v, k) { formData[k] = v; });\n` +
+                `        const triggerContext = { formData: formData, formId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() };\n`;
+    }
+    else if (isInput) {
+        handlerBody += `        const triggerContext = { value: event.target.value, elementId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() };\n`;
+    }
+    else if (et.workflow.trigger.type === 'event-element-event') {
+        // See `event-element-event` in `generateElementHandler` for why we
+        // include `value`/`checked`/`files` unconditionally.
+        handlerBody += `        const triggerContext = { elementId: '${elementId}', eventType: '${domEvent}', triggerElement: event.target, element: event.target, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY, offsetX: event.offsetX, offsetY: event.offsetY, button: event.button, deltaX: event.deltaX, deltaY: event.deltaY, deltaMode: event.deltaMode, key: event.key, ${formControlPropertyReads('event.target')} };\n`;
+        if (domEvent === 'drop') {
+            handlerBody += `        if (event.dataTransfer && event.dataTransfer.files) { triggerContext.files = Array.from(event.dataTransfer.files); }\n`;
+        }
+    }
+    else {
+        handlerBody += `        const triggerContext = { elementId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY };\n`;
+    }
+    handlerBody += `        __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});`;
+    let handlerCode;
+    if (debounce) {
+        handlerCode =
+            `(function() {\n` +
+                `        let timer = null;\n` +
+                `        return function(event) {\n` +
+                `          clearTimeout(timer);\n` +
+                `          timer = setTimeout(function() {\n` +
+                `    ${handlerBody}\n` +
+                `          }, ${debounce});\n` +
+                `        };\n` +
+                `      })()`;
+    }
+    else {
+        handlerCode = `function(event) {\n` + `${handlerBody}\n` + `      }`;
+    }
+    return (`    // Fallback: ${et.workflow.name || et.workflow.id} → ${domEvent} on '${elementId}'\n` +
+        `    const __el_${safeId} = document.getElementById('${elementId}');\n` +
+        `    if (__el_${safeId}) {\n` +
+        `      const __h_${safeId} = ${handlerCode};\n` +
+        `      __el_${safeId}.addEventListener('${domEvent}', __h_${safeId});\n` +
+        `      cleanups.push(function() { __el_${safeId}.removeEventListener('${domEvent}', __h_${safeId}); });\n` +
+        `    }`);
+};
+const normalizeKeyName = (key) => {
+    const keyMap = { space: ' ' };
+    return keyMap[key] || key;
+};
+const generateLifecycleTrigger = (wf, safeId) => {
+    const trigger = wf.trigger;
+    const config = (trigger.config || {});
+    const execCall = `__execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId})`;
+    switch (trigger.type) {
+        case 'event-page-loaded': {
+            const delay = config.delay;
+            return (`    // Page loaded (${wf.name || wf.id})\n` +
+                `    {\n` +
+                `      const triggerContext = { url: window.location.href, timestamp: Date.now(), referrer: document.referrer };\n` +
+                (delay
+                    ? `      setTimeout(function() { ${execCall}; }, ${delay});\n`
+                    : `      ${execCall};\n`) +
+                `    }`);
+        }
+        case 'event-element-visible': {
+            const nodeId = config.nodeId;
+            const threshold = config.threshold || 0;
+            const once = config.once;
+            return (`    // Element visible (${wf.name || wf.id})\n` +
+                `    const __visEl_${safeId} = document.getElementById('${nodeId}');\n` +
+                `    if (__visEl_${safeId}) {\n` +
+                `      const __obs_${safeId} = new IntersectionObserver(function(entries) {\n` +
+                `        entries.forEach(function(entry) {\n` +
+                `          if (entry.isIntersecting) {\n` +
+                `            const triggerContext = { elementId: '${nodeId}', timestamp: Date.now(), intersectionRatio: entry.intersectionRatio };\n` +
+                `            ${execCall};\n` +
+                (once ? `            __obs_${safeId}.disconnect();\n` : '') +
+                `          }\n` +
+                `        });\n` +
+                `      }, { threshold: ${threshold} });\n` +
+                `      __obs_${safeId}.observe(__visEl_${safeId});\n` +
+                `      cleanups.push(function() { __obs_${safeId}.disconnect(); });\n` +
+                `    }`);
+        }
+        case 'event-user-logged-in':
+        case 'event-user-logged-out': {
+            const eventName = trigger.type === 'event-user-logged-in'
+                ? 'workflow:user-logged-in'
+                : 'workflow:user-logged-out';
+            return (`    // ${trigger.type} (${wf.name || wf.id})\n` +
+                `    const __h_${safeId} = function(event) {\n` +
+                `      const triggerContext = event.detail || {};\n` +
+                `      triggerContext.timestamp = Date.now();\n` +
+                `      ${execCall};\n` +
+                `    };\n` +
+                `    window.addEventListener('${eventName}', __h_${safeId});\n` +
+                `    cleanups.push(function() { window.removeEventListener('${eventName}', __h_${safeId}); });`);
+        }
+        case 'event-unhandled-error':
+            return (`    // Unhandled error (${wf.name || wf.id})\n` +
+                `    const __h_${safeId} = function(event) {\n` +
+                `      const triggerContext = { message: event.message, stack: event.error ? event.error.stack : '', filename: event.filename, lineno: event.lineno, colno: event.colno };\n` +
+                `      ${execCall};\n` +
+                `    };\n` +
+                `    window.addEventListener('error', __h_${safeId});\n` +
+                `    cleanups.push(function() { window.removeEventListener('error', __h_${safeId}); });`);
+        case 'event-custom-triggered': {
+            const eventName = config.eventName;
+            return (`    // Custom event '${eventName}' (${wf.name || wf.id})\n` +
+                `    const __h_${safeId} = function(event) {\n` +
+                `      const triggerContext = { eventName: '${eventName}', eventData: event.detail, timestamp: Date.now() };\n` +
+                `      ${execCall};\n` +
+                `    };\n` +
+                `    window.addEventListener('workflow:custom:${eventName}', __h_${safeId});\n` +
+                `    cleanups.push(function() { window.removeEventListener('workflow:custom:${eventName}', __h_${safeId}); });`);
+        }
+        case 'event-data-item-added':
+        case 'event-data-item-updated':
+        case 'event-data-item-deleted': {
+            const eventName = `workflow:data:${trigger.type.replace('event-data-item-', '')}`;
+            return (`    // ${trigger.type} (${wf.name || wf.id})\n` +
+                `    const __h_${safeId} = function(event) {\n` +
+                `      if (event.detail && event.detail.dataSourceId === '${config.dataSourceId}' && event.detail.tableName === '${config.tableName}') {\n` +
+                `        const triggerContext = event.detail;\n` +
+                `        triggerContext.timestamp = Date.now();\n` +
+                `        ${execCall};\n` +
+                `      }\n` +
+                `    };\n` +
+                `    window.addEventListener('${eventName}', __h_${safeId});\n` +
+                `    cleanups.push(function() { window.removeEventListener('${eventName}', __h_${safeId}); });`);
+        }
+        case 'event-key-pressed': {
+            const rawKey = config.key;
+            const key = normalizeKeyName(rawKey);
+            const ignoreRepeat = config.ignoreRepeat;
+            const kpPreventDefault = config.preventDefault;
+            const kpElementId = config.elementHtmlId;
+            return (`    // Key pressed '${rawKey}' (${wf.name || wf.id})\n` +
+                `    const __kpHandler_${safeId} = function(event) {\n` +
+                `      if (event.key !== '${key}') return;\n` +
+                (ignoreRepeat ? `      if (event.repeat) return;\n` : '') +
+                (kpPreventDefault ? `      event.preventDefault();\n` : '') +
+                `      const triggerContext = {\n` +
+                `        key: event.key, code: event.code, repeat: event.repeat,\n` +
+                `        shiftKey: event.shiftKey, ctrlKey: event.ctrlKey, altKey: event.altKey, metaKey: event.metaKey,\n` +
+                `        timestamp: Date.now()\n` +
+                `      };\n` +
+                `      ${execCall};\n` +
+                `    };\n` +
+                (kpElementId
+                    ? `    const __kpTarget_${safeId} = document.getElementById('${kpElementId}');\n` +
+                        `    if (__kpTarget_${safeId}) {\n` +
+                        `      __kpTarget_${safeId}.addEventListener('keydown', __kpHandler_${safeId});\n` +
+                        `      cleanups.push(function() { __kpTarget_${safeId}.removeEventListener('keydown', __kpHandler_${safeId}); });\n` +
+                        `    }`
+                    : `    document.addEventListener('keydown', __kpHandler_${safeId});\n` +
+                        `    cleanups.push(function() { document.removeEventListener('keydown', __kpHandler_${safeId}); });`));
+        }
+        case 'event-key-released': {
+            const rawKrKey = config.key;
+            const krKey = normalizeKeyName(rawKrKey);
+            const krElementId = config.elementHtmlId;
+            return (`    // Key released '${rawKrKey}' (${wf.name || wf.id})\n` +
+                `    const __krHandler_${safeId} = function(event) {\n` +
+                `      if (event.key !== '${krKey}') return;\n` +
+                `      const triggerContext = {\n` +
+                `        key: event.key, code: event.code,\n` +
+                `        shiftKey: event.shiftKey, ctrlKey: event.ctrlKey, altKey: event.altKey, metaKey: event.metaKey,\n` +
+                `        timestamp: Date.now()\n` +
+                `      };\n` +
+                `      ${execCall};\n` +
+                `    };\n` +
+                (krElementId
+                    ? `    const __krTarget_${safeId} = document.getElementById('${krElementId}');\n` +
+                        `    if (__krTarget_${safeId}) {\n` +
+                        `      __krTarget_${safeId}.addEventListener('keyup', __krHandler_${safeId});\n` +
+                        `      cleanups.push(function() { __krTarget_${safeId}.removeEventListener('keyup', __krHandler_${safeId}); });\n` +
+                        `    }`
+                    : `    document.addEventListener('keyup', __krHandler_${safeId});\n` +
+                        `    cleanups.push(function() { document.removeEventListener('keyup', __krHandler_${safeId}); });`));
+        }
+        case 'event-interval': {
+            const intervalMs = config.intervalMs;
+            const autoStart = config.autoStart !== false;
+            const controlEventName = config.controlEventName;
+            const maxTicks = config.maxTicks;
+            const runWhileHidden = config.runWhileHidden;
+            let intervalCode = `    // Interval ${intervalMs}ms (${wf.name || wf.id})\n` +
+                `    var __iv_tickNum_${safeId} = 0;\n` +
+                `    var __iv_startTime_${safeId} = 0;\n` +
+                `    var __iv_lastTick_${safeId} = 0;\n` +
+                `    var __iv_id_${safeId} = null;\n` +
+                `    var __iv_running_${safeId} = false;\n` +
+                `    var __iv_destroyed_${safeId} = false;\n` +
+                `    function __iv_tick_${safeId}() {\n` +
+                `      __iv_tickNum_${safeId}++;\n` +
+                `      var now = Date.now();\n` +
+                `      var triggerContext = {\n` +
+                `        tickNumber: __iv_tickNum_${safeId},\n` +
+                `        deltaTime: __iv_lastTick_${safeId} ? now - __iv_lastTick_${safeId} : ${intervalMs},\n` +
+                `        elapsedTime: now - __iv_startTime_${safeId},\n` +
+                `        timestamp: now,\n` +
+                `        isFirstTick: __iv_tickNum_${safeId} === 1\n` +
+                `      };\n` +
+                `      __iv_lastTick_${safeId} = now;\n` +
+                (maxTicks && maxTicks > 0
+                    ? `      if (__iv_tickNum_${safeId} >= ${maxTicks}) { __iv_stop_${safeId}(); }\n`
+                    : '') +
+                `      ${execCall};\n` +
+                `    }\n` +
+                `    function __iv_start_${safeId}() {\n` +
+                `      if (__iv_id_${safeId} || __iv_destroyed_${safeId}) return;\n` +
+                `      if (__iv_startTime_${safeId} === 0) {\n` +
+                `        __iv_startTime_${safeId} = Date.now();\n` +
+                `        __iv_lastTick_${safeId} = __iv_startTime_${safeId};\n` +
+                `        __iv_tickNum_${safeId} = 0;\n` +
+                `      }\n` +
+                `      __iv_id_${safeId} = setInterval(__iv_tick_${safeId}, ${intervalMs});\n` +
+                `      __iv_running_${safeId} = true;\n` +
+                `    }\n` +
+                `    function __iv_stop_${safeId}() {\n` +
+                `      if (__iv_id_${safeId}) clearInterval(__iv_id_${safeId});\n` +
+                `      __iv_id_${safeId} = null;\n` +
+                `      __iv_running_${safeId} = false;\n` +
+                `    }\n`;
+            if (!runWhileHidden) {
+                intervalCode +=
+                    `    var __iv_wasRunning_${safeId} = false;\n` +
+                        `    var __iv_visHandler_${safeId} = function() {\n` +
+                        `      if (__iv_destroyed_${safeId}) return;\n` +
+                        `      if (document.hidden) {\n` +
+                        `        __iv_wasRunning_${safeId} = __iv_running_${safeId};\n` +
+                        `        if (__iv_running_${safeId}) __iv_stop_${safeId}();\n` +
+                        `      } else if (__iv_wasRunning_${safeId}) {\n` +
+                        `        __iv_start_${safeId}();\n` +
+                        `        __iv_wasRunning_${safeId} = false;\n` +
+                        `      }\n` +
+                        `    };\n` +
+                        `    document.addEventListener('visibilitychange', __iv_visHandler_${safeId});\n`;
+            }
+            if (controlEventName) {
+                intervalCode +=
+                    `    var __iv_ctrlHandler_${safeId} = function() {\n` +
+                        `      if (__iv_running_${safeId}) { __iv_stop_${safeId}(); }\n` +
+                        `      else { __iv_start_${safeId}(); }\n` +
+                        `    };\n` +
+                        `    window.addEventListener('${controlEventName}', __iv_ctrlHandler_${safeId});\n`;
+            }
+            if (autoStart) {
+                intervalCode += `    __iv_start_${safeId}();\n`;
+            }
+            intervalCode +=
+                `    cleanups.push(function() {\n` +
+                    `      __iv_destroyed_${safeId} = true;\n` +
+                    `      __iv_stop_${safeId}();\n` +
+                    (!runWhileHidden
+                        ? `      document.removeEventListener('visibilitychange', __iv_visHandler_${safeId});\n`
+                        : '') +
+                    (controlEventName
+                        ? `      window.removeEventListener('${controlEventName}', __iv_ctrlHandler_${safeId});\n`
+                        : '') +
+                    `    });`;
+            return intervalCode;
+        }
+        case 'event-window-resize': {
+            const wrMinWidth = config.minWidth;
+            const wrMaxWidth = config.maxWidth;
+            const wrMinHeight = config.minHeight;
+            const wrMaxHeight = config.maxHeight;
+            const wrDebounce = config.debounceMs || 150;
+            const wrHasThresholds = wrMinWidth != null || wrMaxWidth != null || wrMinHeight != null || wrMaxHeight != null;
+            const wrMeetsConds = [
+                wrMinWidth != null ? `w >= ${wrMinWidth}` : null,
+                wrMaxWidth != null ? `w <= ${wrMaxWidth}` : null,
+                wrMinHeight != null ? `h >= ${wrMinHeight}` : null,
+                wrMaxHeight != null ? `h <= ${wrMaxHeight}` : null,
+            ].filter(Boolean);
+            const wrPrevMeetsConds = [
+                wrMinWidth != null ? `pw >= ${wrMinWidth}` : null,
+                wrMaxWidth != null ? `pw <= ${wrMaxWidth}` : null,
+                wrMinHeight != null ? `ph >= ${wrMinHeight}` : null,
+                wrMaxHeight != null ? `ph <= ${wrMaxHeight}` : null,
+            ].filter(Boolean);
+            let wrCode = `    // Window resize (${wf.name || wf.id})\n` +
+                `    var __wr_prevW_${safeId} = window.innerWidth;\n` +
+                `    var __wr_prevH_${safeId} = window.innerHeight;\n` +
+                `    var __wr_timer_${safeId} = null;\n` +
+                `    var __wr_handler_${safeId} = function() {\n` +
+                `      clearTimeout(__wr_timer_${safeId});\n` +
+                `      __wr_timer_${safeId} = setTimeout(function() {\n` +
+                `        var w = window.innerWidth;\n` +
+                `        var h = window.innerHeight;\n` +
+                `        var pw = __wr_prevW_${safeId};\n` +
+                `        var ph = __wr_prevH_${safeId};\n`;
+            if (wrHasThresholds) {
+                wrCode +=
+                    `        var meets = ${wrMeetsConds.join(' && ')};\n` +
+                        `        var prevMet = ${wrPrevMeetsConds.join(' && ')};\n` +
+                        `        var crossedBreakpoint = meets !== prevMet;\n` +
+                        `        if (meets) {\n` +
+                        `          var triggerContext = { width: w, height: h, previousWidth: pw, previousHeight: ph, crossedBreakpoint: crossedBreakpoint, timestamp: Date.now() };\n` +
+                        `          ${execCall};\n` +
+                        `        }\n`;
+            }
+            else {
+                wrCode +=
+                    `        var triggerContext = { width: w, height: h, previousWidth: pw, previousHeight: ph, crossedBreakpoint: false, timestamp: Date.now() };\n` +
+                        `        ${execCall};\n`;
+            }
+            wrCode +=
+                `        __wr_prevW_${safeId} = w;\n` +
+                    `        __wr_prevH_${safeId} = h;\n` +
+                    `      }, ${wrDebounce});\n` +
+                    `    };\n` +
+                    `    window.addEventListener('resize', __wr_handler_${safeId});\n` +
+                    `    cleanups.push(function() {\n` +
+                    `      window.removeEventListener('resize', __wr_handler_${safeId});\n` +
+                    `      clearTimeout(__wr_timer_${safeId});\n` +
+                    `    });`;
+            return wrCode;
+        }
+        case 'realtime-on-channel-message':
+        case 'realtime-on-channel-event':
+        case 'realtime-on-user-joined-channel':
+        case 'realtime-on-user-left-channel': {
+            const channelName = config.channelName;
+            return generateRealtimeLifecycleTrigger(trigger.type, channelName, config, execCall, safeId, wf);
+        }
+        default:
+            return '';
+    }
+};
+const generateRealtimeLifecycleTrigger = (triggerType, channelName, config, execCall, safeId, wf) => {
+    const subscribeCode = generateRealtimeSubscribeCode(triggerType, channelName, config, execCall, safeId);
+    const unsubscribeCode = generateRealtimeUnsubscribeCode(triggerType, safeId, config);
+    return (`    // ${triggerType} (${wf.name || wf.id})\n` +
+        `    let __rtActive_${safeId} = true;\n` +
+        `    let __rtCleanupFn_${safeId} = null;\n` +
+        `    const __rt_${safeId} = typeof window !== 'undefined' ? window.__teleportRealtime : null;\n` +
+        `    if (__rt_${safeId}) {\n` +
+        `      const __rtClient_${safeId} = __rt_${safeId}.getAblyClient();\n` +
+        `      if (__rtClient_${safeId}) {\n` +
+        `        __rt_${safeId}.whenReady().then(function() {\n` +
+        `          if (!__rtActive_${safeId}) return;\n` +
+        `          const nsChannel = __rt_${safeId}.getNamespacedChannelName('${channelName}');\n` +
+        `          const channel = __rtClient_${safeId}.channels.get(nsChannel);\n` +
+        `          __rt_${safeId}.incrementChannelRef(nsChannel);\n` +
+        subscribeCode +
+        `          __rtCleanupFn_${safeId} = function() {\n` +
+        unsubscribeCode +
+        `            __rt_${safeId}.decrementChannelRef(nsChannel);\n` +
+        `          };\n` +
+        `        });\n` +
+        `      }\n` +
+        `    }\n` +
+        `    cleanups.push(function() {\n` +
+        `      __rtActive_${safeId} = false;\n` +
+        `      if (__rtCleanupFn_${safeId}) __rtCleanupFn_${safeId}();\n` +
+        `    });`);
+};
+const generateRealtimeSubscribeCode = (triggerType, channelName, config, execCall, safeId) => {
+    switch (triggerType) {
+        case 'realtime-on-channel-message':
+            return (`          const __msgH_${safeId} = function(message) {\n` +
+                `            if (message.name !== 'message') return;\n` +
+                `            const d = message.data || {};\n` +
+                `            const triggerContext = {\n` +
+                `              channelName: d.channelName || '${channelName}',\n` +
+                `              message: d.message || '',\n` +
+                `              messageData: d.messageData || null,\n` +
+                `              senderId: d.senderId || '',\n` +
+                `              senderName: d.senderName || '',\n` +
+                `              messageId: d.messageId || '',\n` +
+                `              timestamp: d.timestamp || Date.now()\n` +
+                `            };\n` +
+                `            ${execCall};\n` +
+                `          };\n` +
+                `          channel.subscribe('message', __msgH_${safeId});\n`);
+        case 'realtime-on-channel-event': {
+            const eventName = config.eventName || '';
+            const ablyEventName = `event:${eventName}`;
+            return (`          const __evtH_${safeId} = function(message) {\n` +
+                `            const d = message.data || {};\n` +
+                `            const triggerContext = {\n` +
+                `              channelName: d.channelName || '${channelName}',\n` +
+                `              eventName: d.eventName || '${eventName}',\n` +
+                `              eventData: d.eventData || null,\n` +
+                `              senderId: d.senderId || '',\n` +
+                `              senderName: d.senderName || '',\n` +
+                `              timestamp: d.timestamp || Date.now()\n` +
+                `            };\n` +
+                `            ${execCall};\n` +
+                `          };\n` +
+                `          channel.subscribe('${ablyEventName}', __evtH_${safeId});\n`);
+        }
+        case 'realtime-on-user-joined-channel':
+            return (`          const __presH_${safeId} = function(presenceMessage) {\n` +
+                `            const pd = presenceMessage.data || {};\n` +
+                `            const triggerContext = {\n` +
+                `              channelName: '${channelName}',\n` +
+                `              userId: pd.userId || presenceMessage.clientId || '',\n` +
+                `              userName: pd.userName || '',\n` +
+                `              userData: pd.userData || null,\n` +
+                `              timestamp: presenceMessage.timestamp || Date.now()\n` +
+                `            };\n` +
+                `            ${execCall};\n` +
+                `          };\n` +
+                `          channel.presence.subscribe('enter', __presH_${safeId});\n`);
+        case 'realtime-on-user-left-channel':
+            return (`          const __presH_${safeId} = function(presenceMessage) {\n` +
+                `            const pd = presenceMessage.data || {};\n` +
+                `            const triggerContext = {\n` +
+                `              channelName: '${channelName}',\n` +
+                `              userId: pd.userId || presenceMessage.clientId || '',\n` +
+                `              userName: pd.userName || '',\n` +
+                `              timestamp: presenceMessage.timestamp || Date.now()\n` +
+                `            };\n` +
+                `            ${execCall};\n` +
+                `          };\n` +
+                `          channel.presence.subscribe('leave', __presH_${safeId});\n`);
+        default:
+            return '';
+    }
+};
+const generateRealtimeUnsubscribeCode = (triggerType, safeId, config) => {
+    switch (triggerType) {
+        case 'realtime-on-channel-message':
+            return `            channel.unsubscribe('message', __msgH_${safeId});\n`;
+        case 'realtime-on-channel-event': {
+            const eventName = (config === null || config === void 0 ? void 0 : config.eventName) || '';
+            const ablyEventName = `event:${eventName}`;
+            return `            channel.unsubscribe('${ablyEventName}', __evtH_${safeId});\n`;
+        }
+        case 'realtime-on-user-joined-channel':
+            return `            channel.presence.unsubscribe('enter', __presH_${safeId});\n`;
+        case 'realtime-on-user-left-channel':
+            return `            channel.presence.unsubscribe('leave', __presH_${safeId});\n`;
+        default:
+            return '';
+    }
+};
+const getRelevantWorkflows = (workflows, uidl, isPage) => {
+    var _a, _b;
+    const relevant = [];
+    const pageId = ((_a = uidl.outputOptions) === null || _a === void 0 ? void 0 : _a.pageId) || ((_b = uidl.outputOptions) === null || _b === void 0 ? void 0 : _b.fileName) || uidl.name || '';
+    const allWorkflows = Object.values(workflows.workflows);
+    allWorkflows.forEach((wf) => {
+        const trigger = wf.trigger;
+        if (trigger.type === 'event-cron-triggered') {
+            return;
+        }
+        if (trigger.type === 'event-webhook-received') {
+            return;
+        }
+        if (trigger.type === 'event-state-change') {
+            const cfg = trigger.config || {};
+            const stateDefs = cfg.stateDefinitions;
+            let boundContainerType = cfg.boundContainerType;
+            if (!boundContainerType) {
+                if (stateDefs === null || stateDefs === void 0 ? void 0 : stateDefs.some((s) => s.pageOrComponentName)) {
+                    boundContainerType = 'component';
+                }
+                else if (!isPage && stateDefs && stateDefs.length > 0) {
+                    boundContainerType = 'component';
+                }
+                else {
+                    boundContainerType = 'page';
+                }
+            }
+            const matchesContainer = boundContainerType === 'page' ? isPage : !isPage;
+            if (!matchesContainer) {
+                return;
+            }
+            const boundFromConfig = cfg.boundPageOrComponentId;
+            const matchesByName = !!stateDefs &&
+                stateDefs.some((sd) => sd.pageOrComponentName && sd.pageOrComponentName === uidl.name);
+            const matchesById = boundFromConfig === pageId ||
+                (!!stateDefs && stateDefs.some((sd) => sd.pageOrComponentId === pageId));
+            if (matchesByName || matchesById) {
+                relevant.push(wf);
+            }
+            return;
+        }
+        if (trigger.type === 'event-global-state-change') {
+            if (!isPage) {
+                return;
+            }
+            const selectedPages = trigger.config.selectedPages;
+            if (selectedPages &&
+                selectedPages.length > 0 &&
+                !selectedPages.some((p) => p.id === pageId)) {
+                return;
+            }
+            relevant.push(wf);
+            return;
+        }
+        if (trigger.scope === 'global') {
+            return;
+        }
+        if (trigger.scope === 'page' && isPage) {
+            const triggerPageId = trigger.config.pageId;
+            const selectedPages = trigger.config.selectedPages;
+            if (triggerPageId && triggerPageId !== pageId) {
+                return;
+            }
+            if (selectedPages && !selectedPages.some((p) => p.id === pageId)) {
+                return;
+            }
+            relevant.push(wf);
+            return;
+        }
+        if (trigger.scope === 'element') {
+            // If the element-scoped trigger specifies which pages it belongs to, filter by page.
+            // This prevents including ALL element-scoped workflows on every page (massive bloat).
+            const elementSelectedPages = trigger.config.selectedPages;
+            if (isPage && elementSelectedPages && elementSelectedPages.length > 0) {
+                if (!elementSelectedPages.some((p) => p.id === pageId)) {
+                    return;
+                }
+            }
+            relevant.push(wf);
+            return;
+        }
+    });
+    return relevant;
+};
+//# sourceMappingURL=workflow-component-plugin.js.map