@funnelsgrove/runtime 0.1.25 → 0.1.27

package/dist/config/builder-preview.protocol.d.ts

@@ -6,6 +6,8 @@ export declare const BUILDER_PREVIEW_DEFINITION_PATCH = "builder.preview.definit
 export declare const BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED = "builder.preview.variableValuesChanged";
 export declare const BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED = "builder.preview.paywallPlansChanged";
 export declare const BUILDER_PREVIEW_THEME_CHANGED = "builder.preview.themeChanged";
+export declare const BUILDER_PREVIEW_EDIT_MODE_CHANGED = "builder.preview.editModeChanged";
+export declare const BUILDER_PREVIEW_TEXT_EDITED = "builder.preview.textEdited";
 export type BuilderPreviewReadyMessage = {
     type: typeof BUILDER_PREVIEW_READY;
     stepId: string;
@@ -80,3 +82,15 @@ export type BuilderPreviewThemeChangedMessage = {
     type: typeof BUILDER_PREVIEW_THEME_CHANGED;
     cssVariables: Record<string, string>;
 };
+export type BuilderPreviewEditModeChangedMessage = {
+    type: typeof BUILDER_PREVIEW_EDIT_MODE_CHANGED;
+    enabled: boolean;
+};
+export type BuilderPreviewTextEditedMessage = {
+    type: typeof BUILDER_PREVIEW_TEXT_EDITED;
+    stepId: string;
+    tag: string;
+    index: number;
+    value: string;
+    previousValue: string;
+};

package/dist/config/builder-preview.protocol.js

@@ -6,3 +6,5 @@ export const BUILDER_PREVIEW_DEFINITION_PATCH = 'builder.preview.definitionPatch
 export const BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED = 'builder.preview.variableValuesChanged';
 export const BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED = 'builder.preview.paywallPlansChanged';
 export const BUILDER_PREVIEW_THEME_CHANGED = 'builder.preview.themeChanged';
+export const BUILDER_PREVIEW_EDIT_MODE_CHANGED = 'builder.preview.editModeChanged';
+export const BUILDER_PREVIEW_TEXT_EDITED = 'builder.preview.textEdited';

package/dist/runtime/funnel-runtime.js

@@ -1,4 +1,5 @@
 import { getChoiceTargetsFromEdges, isManifestStepId, resolveInitialStepId, resolveNextStepId, } from './route-resolver.js';
+const terminalStepIdsByOrder = ['paywall', 'subscription-started', 'manage-subscription'];
 export const getFunnelStepSequence = (manifest) => manifest.steps.map((step) => step.id);
 export const getFunnelStepIdsByEdgeOrder = (graph) => {
     const stepIds = graph.steps.map((step) => step.id).filter(Boolean);
@@ -24,6 +25,9 @@ export const getFunnelStepIdsByEdgeOrder = (graph) => {
     for (const entryPointStepId of graph.entryPointStepIds || []) {
         visit(entryPointStepId);
     }
+    for (const terminalStepId of terminalStepIdsByOrder) {
+        visit(terminalStepId);
+    }
     return orderedStepIds.length > 0 ? orderedStepIds : stepIds;
 };
 export const getFunnelEntryPoints = (manifest) => (manifest.entryPoints || []).map((entryPoint) => (Object.assign(Object.assign({}, entryPoint), { stepId: entryPoint.stepId })));

package/dist/runtime/preview-bridge.d.ts

@@ -44,6 +44,9 @@ type PreviewBridgeMessage = {
 } | {
     kind: 'themeChanged';
     cssVariables: Record<string, string>;
+} | {
+    kind: 'editModeChanged';
+    enabled: boolean;
 } | {
     kind: 'goToStep';
     stepId: string;
@@ -52,6 +55,7 @@ export declare const parsePreviewQuickEditPatch: (value: unknown) => PreviewQuic
 export declare const parsePreviewBridgeMessage: (value: unknown) => PreviewBridgeMessage | null;
 export declare const applyPreviewThemeVariables: (cssVariables: Record<string, string>) => void;
 export declare const applyPreviewQuickEditPatch: (patch: PreviewQuickEditPatch) => void;
+export declare const setPreviewInlineEditMode: (enabled: boolean, getActiveStepId: () => string) => void;
 export declare function emitPreviewVariableValues(stepId: FunnelStepId, values: Record<string, string>): void;
 export declare function usePreviewVariableValues(stepId: FunnelStepId, values: Record<string, string>): void;
 export type PreviewBridgeOptions = {

package/dist/runtime/preview-bridge.js

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useRef } from 'react';
-import { BUILDER_PREVIEW_ACTIVE_STEP_CHANGED, BUILDER_PREVIEW_DEFINITION_PATCH, BUILDER_PREVIEW_GO_TO_STEP, BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED, BUILDER_PREVIEW_READY, BUILDER_PREVIEW_RUNTIME_MODE_CHANGED, BUILDER_PREVIEW_THEME_CHANGED, BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED, } from '../config/builder-preview.protocol.js';
+import { BUILDER_PREVIEW_ACTIVE_STEP_CHANGED, BUILDER_PREVIEW_DEFINITION_PATCH, BUILDER_PREVIEW_EDIT_MODE_CHANGED, BUILDER_PREVIEW_GO_TO_STEP, BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED, BUILDER_PREVIEW_READY, BUILDER_PREVIEW_RUNTIME_MODE_CHANGED, BUILDER_PREVIEW_TEXT_EDITED, BUILDER_PREVIEW_THEME_CHANGED, BUILDER_PREVIEW_VARIABLE_VALUES_CHANGED, } from '../config/builder-preview.protocol.js';
 import { isPreviewFrameRuntime } from '../services/preview-frame.service.js';
 import { logger } from '../services/logger.js';
 import { applyPreviewDefinitionPatch, applyPreviewPaywallPlansPatch } from './preview-definition-overrides.js';
@@ -160,6 +160,12 @@ export const parsePreviewBridgeMessage = (value) => {
         const cssVariables = parseThemeCssVariables(value.cssVariables);
         return cssVariables ? { kind: 'themeChanged', cssVariables } : null;
     }
+    if (messageType === BUILDER_PREVIEW_EDIT_MODE_CHANGED) {
+        return {
+            kind: 'editModeChanged',
+            enabled: value.enabled === true,
+        };
+    }
     if (messageType === BUILDER_PREVIEW_GO_TO_STEP) {
         const stepId = typeof value.stepId === 'string' ? value.stepId.trim() : '';
         return stepId ? { kind: 'goToStep', stepId } : null;
@@ -249,6 +255,136 @@ export const applyPreviewQuickEditPatch = (patch) => {
         }
     }
 };
+const INLINE_EDIT_STYLE_ID = 'builder-preview-inline-edit-style';
+const INLINE_EDITABLE_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, span, button, a, li, label, blockquote';
+let inlineEditCleanup = null;
+const isInlineEditableElement = (element) => {
+    var _a;
+    if (!(element instanceof HTMLElement) || !element.matches(INLINE_EDITABLE_SELECTOR)) {
+        return false;
+    }
+    return element.children.length === 0 && Boolean((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+};
+const emitPreviewTextEdited = (input) => {
+    if (typeof window === 'undefined' || window.parent === window) {
+        return;
+    }
+    const stageRoot = document.querySelector('.step-stage-transition');
+    if (!(stageRoot instanceof HTMLElement)) {
+        return;
+    }
+    const tag = input.element.tagName.toLowerCase();
+    const index = Array.from(stageRoot.querySelectorAll(tag)).indexOf(input.element) + 1;
+    if (index < 1) {
+        return;
+    }
+    window.parent.postMessage({
+        type: BUILDER_PREVIEW_TEXT_EDITED,
+        stepId: input.stepId,
+        tag,
+        index,
+        value: input.value,
+        previousValue: input.previousValue,
+    }, '*');
+};
+const enablePreviewInlineEditMode = (getActiveStepId) => {
+    const style = document.createElement('style');
+    style.id = INLINE_EDIT_STYLE_ID;
+    style.textContent = [
+        `.step-stage-transition :is(${INLINE_EDITABLE_SELECTOR}):hover { outline: 1.5px dashed rgba(59, 130, 246, 0.85); outline-offset: 2px; cursor: text; }`,
+        '.step-stage-transition [contenteditable="true"] { outline: 1.5px solid rgba(59, 130, 246, 0.95); outline-offset: 2px; cursor: text; }',
+    ].join('\n');
+    document.head.appendChild(style);
+    let session = null;
+    const endSession = (commit) => {
+        if (!session) {
+            return;
+        }
+        const { element, previousValue, cancelled } = session;
+        session = null;
+        element.removeAttribute('contenteditable');
+        const value = element.textContent || '';
+        if (!commit || cancelled) {
+            element.textContent = previousValue;
+            return;
+        }
+        if (value !== previousValue) {
+            emitPreviewTextEdited({
+                stepId: getActiveStepId(),
+                element,
+                previousValue,
+                value,
+            });
+        }
+    };
+    const handleClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const stageRoot = document.querySelector('.step-stage-transition');
+        if (!(stageRoot instanceof HTMLElement) || !stageRoot.contains(target)) {
+            return;
+        }
+        // Edit mode is modal: clicks select text to edit instead of driving the
+        // funnel (button taps, navigation).
+        event.preventDefault();
+        event.stopPropagation();
+        if ((session === null || session === void 0 ? void 0 : session.element) === target) {
+            return;
+        }
+        endSession(true);
+        if (!isInlineEditableElement(target)) {
+            return;
+        }
+        session = {
+            element: target,
+            previousValue: target.textContent || '',
+            cancelled: false,
+        };
+        target.setAttribute('contenteditable', 'true');
+        target.focus();
+    };
+    const handleKeyDown = (event) => {
+        if (!session) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            endSession(true);
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            session.cancelled = true;
+            endSession(false);
+        }
+    };
+    const handleFocusOut = () => {
+        endSession(true);
+    };
+    document.addEventListener('click', handleClick, true);
+    document.addEventListener('keydown', handleKeyDown, true);
+    document.addEventListener('focusout', handleFocusOut, true);
+    return () => {
+        var _a;
+        endSession(true);
+        document.removeEventListener('click', handleClick, true);
+        document.removeEventListener('keydown', handleKeyDown, true);
+        document.removeEventListener('focusout', handleFocusOut, true);
+        (_a = document.getElementById(INLINE_EDIT_STYLE_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+    };
+};
+export const setPreviewInlineEditMode = (enabled, getActiveStepId) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    inlineEditCleanup === null || inlineEditCleanup === void 0 ? void 0 : inlineEditCleanup();
+    inlineEditCleanup = null;
+    if (enabled) {
+        inlineEditCleanup = enablePreviewInlineEditMode(getActiveStepId);
+    }
+};
 function emitPreviewActiveStepChanged(stepId) {
     if (typeof window === 'undefined' || window.parent === window) {
         return;
@@ -288,9 +424,16 @@ export function usePreviewVariableValues(stepId, values) {
 }
 export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableStepId, setRuntimeMode, shouldLockToInitialStep, }) {
     const previewReadySentRef = useRef(false);
+    const activeStepIdRef = useRef(activeStepId);
     useEffect(() => {
+        activeStepIdRef.current = activeStepId;
         emitPreviewActiveStepChanged(activeStepId);
     }, [activeStepId]);
+    useEffect(() => {
+        return () => {
+            setPreviewInlineEditMode(false, () => '');
+        };
+    }, []);
     useEffect(() => {
         if (!isPreviewFrameRuntime() || previewReadySentRef.current) {
             return;
@@ -323,6 +466,10 @@ export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableSt
                 applyPreviewThemeVariables(action.cssVariables);
                 return;
             }
+            if (action.kind === 'editModeChanged') {
+                setPreviewInlineEditMode(action.enabled, () => activeStepIdRef.current);
+                return;
+            }
             if (action.kind === 'runtimeModeChanged') {
                 setRuntimeMode(action.mode);
                 return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/runtime",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",