@funnelsgrove/runtime 0.1.26 → 0.1.28

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/config/funnel.experiments.types.d.ts

@@ -7,10 +7,12 @@ export type FunnelExperimentDefinition = {
     launchDate: string;
     control: {
         stepId: string;
+        label?: string;
         trafficPercent: number;
     };
     variant: {
         stepId: string;
+        label?: string;
         trafficPercent: number;
     };
 };

package/dist/config/funnel.experiments.types.js

@@ -13,13 +13,7 @@ export const toManifestExperiments = (experiments) => experiments
     experimentId: experiment.id,
     stepId: experiment.control.stepId,
     variants: [
-        {
-            variantKey: 'control',
-            routeToStepId: experiment.control.stepId,
-        },
-        {
-            variantKey: 'variant_b',
-            routeToStepId: experiment.variant.stepId,
-        },
+        Object.assign(Object.assign({ variantKey: 'control' }, (experiment.control.label ? { label: experiment.control.label } : {})), { trafficPercent: experiment.control.trafficPercent, routeToStepId: experiment.control.stepId }),
+        Object.assign(Object.assign({ variantKey: 'variant_b' }, (experiment.variant.label ? { label: experiment.variant.label } : {})), { trafficPercent: experiment.variant.trafficPercent, routeToStepId: experiment.variant.stepId }),
     ],
 }));

package/dist/config/funnel.manifest.types.d.ts

@@ -9,6 +9,7 @@ export type FunnelManifestStep = {
     kind?: FunnelStepKind;
     name?: string;
     title: string;
+    tags?: readonly string[];
     assetIds?: readonly string[];
 };
 export type FunnelManifestImageAsset = {
@@ -28,8 +29,19 @@ export type FunnelManifestEdge = {
     toStepId: string;
     conditionId?: string;
 };
+export type FunnelManifestBranch = {
+    id: string;
+    name: string;
+    sourceStepId: string;
+    conditionId?: string;
+    label?: string;
+    tags?: readonly string[];
+    stepIds: readonly string[];
+};
 export type FunnelManifestExperimentVariant = {
     variantKey: string;
+    label?: string;
+    trafficPercent?: number;
     routeToStepId: string;
 };
 export type FunnelManifestExperiment = {
@@ -51,6 +63,7 @@ export type FunnelManifest = {
     steps: readonly FunnelManifestStep[];
     entryPoints?: readonly FunnelManifestEntryPoint[];
     edgesByStepId: Partial<Record<string, readonly FunnelManifestEdge[]>>;
+    branches?: readonly FunnelManifestBranch[];
     experiments: readonly FunnelManifestExperiment[];
 };
 export type FunnelStepComponentKey = string;

package/dist/runtime/funnel-manifest.validation.js

@@ -46,6 +46,22 @@ export const validateFunnelManifest = (manifest) => {
             assertValidReference(`edge from "${stepId}"`, edge.toStepId, validStepIds, errors);
         }
     }
+    pushDuplicateErrors('branch ids', (manifest.branches || []).map((branch) => branch.id), errors);
+    for (const branch of manifest.branches || []) {
+        if (!isDefinedString(branch.id)) {
+            errors.push('branch id is required');
+        }
+        if (!isDefinedString(branch.name)) {
+            errors.push(`branch "${branch.id || ''}" name is required`);
+        }
+        assertValidReference(`branch "${branch.id}" source`, branch.sourceStepId, validStepIds, errors);
+        if (branch.stepIds.length === 0) {
+            errors.push(`branch "${branch.id}" must own at least one step`);
+        }
+        for (const stepId of branch.stepIds) {
+            assertValidReference(`branch "${branch.id}" step`, stepId, validStepIds, errors);
+        }
+    }
     for (const experiment of manifest.experiments) {
         assertValidReference(`experiment "${experiment.experimentId}"`, experiment.stepId, validStepIds, errors);
         for (const variant of experiment.variants) {

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.26",
+  "version": "0.1.28",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",