@funnelsgrove/runtime 0.1.18 → 0.1.19

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

@@ -5,6 +5,7 @@ export declare const BUILDER_PREVIEW_RUNTIME_MODE_CHANGED = "builder.preview.run
 export declare const BUILDER_PREVIEW_DEFINITION_PATCH = "builder.preview.definitionPatch";
 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 type BuilderPreviewReadyMessage = {
     type: typeof BUILDER_PREVIEW_READY;
     stepId: string;
@@ -75,3 +76,7 @@ export type BuilderPreviewPaywallPlansChangedMessage = {
     stepId: string;
     plans: BuilderPreviewPaywallPlan[];
 };
+export type BuilderPreviewThemeChangedMessage = {
+    type: typeof BUILDER_PREVIEW_THEME_CHANGED;
+    cssVariables: Record<string, string>;
+};

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

@@ -5,3 +5,4 @@ export const BUILDER_PREVIEW_RUNTIME_MODE_CHANGED = 'builder.preview.runtimeMode
 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';

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

@@ -41,12 +41,16 @@ type PreviewBridgeMessage = {
     kind: 'paywallPlansChanged';
     stepId: string;
     plans: BuilderPreviewPaywallPlan[];
+} | {
+    kind: 'themeChanged';
+    cssVariables: Record<string, string>;
 } | {
     kind: 'goToStep';
     stepId: string;
 };
 export declare const parsePreviewQuickEditPatch: (value: unknown) => PreviewQuickEditPatch | null;
 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 function emitPreviewVariableValues(stepId: FunnelStepId, values: Record<string, string>): void;
 export declare function usePreviewVariableValues(stepId: FunnelStepId, values: Record<string, string>): void;

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_VARIABLE_VALUES_CHANGED, } from '../config/builder-preview.protocol.js';
+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 { isPreviewFrameRuntime } from '../services/preview-frame.service.js';
 import { logger } from '../services/logger.js';
 import { applyPreviewDefinitionPatch, applyPreviewPaywallPlansPatch } from './preview-definition-overrides.js';
@@ -107,6 +107,13 @@ export const parsePreviewQuickEditPatch = (value) => {
     }
     return null;
 };
+const parseThemeCssVariables = (value) => {
+    if (!isRecord(value)) {
+        return null;
+    }
+    const cssVariables = Object.fromEntries(Object.entries(value).filter((entry) => entry[0].startsWith('--') && typeof entry[1] === 'string'));
+    return Object.keys(cssVariables).length > 0 ? cssVariables : null;
+};
 export const parsePreviewBridgeMessage = (value) => {
     if (!isRecord(value)) {
         return null;
@@ -149,12 +156,33 @@ export const parsePreviewBridgeMessage = (value) => {
             }
             : null;
     }
+    if (messageType === BUILDER_PREVIEW_THEME_CHANGED) {
+        const cssVariables = parseThemeCssVariables(value.cssVariables);
+        return cssVariables ? { kind: 'themeChanged', cssVariables } : null;
+    }
     if (messageType === BUILDER_PREVIEW_GO_TO_STEP) {
         const stepId = typeof value.stepId === 'string' ? value.stepId.trim() : '';
         return stepId ? { kind: 'goToStep', stepId } : null;
     }
     return null;
 };
+export const applyPreviewThemeVariables = (cssVariables) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const targets = [
+        document.documentElement,
+        document.body,
+        ...Array.from(document.querySelectorAll('.page-root')),
+    ].filter((target) => Boolean(target));
+    for (const target of targets) {
+        for (const [key, value] of Object.entries(cssVariables)) {
+            if (key.startsWith('--')) {
+                target.style.setProperty(key, value);
+            }
+        }
+    }
+};
 export const applyPreviewQuickEditPatch = (patch) => {
     if (typeof document === 'undefined') {
         return;
@@ -291,6 +319,10 @@ export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableSt
                 applyPreviewPaywallPlansPatch(action.stepId, action.plans);
                 return;
             }
+            if (action.kind === 'themeChanged') {
+                applyPreviewThemeVariables(action.cssVariables);
+                return;
+            }
             if (action.kind === 'runtimeModeChanged') {
                 setRuntimeMode(action.mode);
                 return;

package/dist/runtime/use-funnel-flow-controller.d.ts

@@ -9,7 +9,16 @@ export type FunnelFlowControllerExperiment<StepId extends string> = FunnelManife
     })[];
 };
 type StepComponentRegistry = Record<string, unknown>;
+type FunnelFlowAnalyticsAdapter = {
+    trackFirstStepViewed?: (input: {
+        stepId: string;
+        stepName: string;
+        occurredAt: string;
+        featureFlags?: Record<string, string>;
+    }) => string | null;
+};
 type UseFunnelFlowControllerInput<StepId extends string> = {
+    analytics?: FunnelFlowAnalyticsAdapter;
     initialStepId?: StepId;
     lockToInitialStep?: boolean;
     defaultStepId: StepId;
@@ -63,5 +72,5 @@ export declare function computeRenderSuspended(input: {
     }>;
     isPreviewRuntime?: boolean;
 }): boolean;
-export declare function useFunnelFlowController<StepId extends string>({ initialStepId, lockToInitialStep, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }: UseFunnelFlowControllerInput<StepId>): UseFunnelFlowControllerResult<StepId>;
+export declare function useFunnelFlowController<StepId extends string>({ analytics, initialStepId, lockToInitialStep, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }: UseFunnelFlowControllerInput<StepId>): UseFunnelFlowControllerResult<StepId>;
 export {};

package/dist/runtime/use-funnel-flow-controller.js

@@ -54,7 +54,7 @@ export function computeRenderSuspended(input) {
     }
     return input.experiments.some((experiment) => experiment.stepId === input.activeStepId);
 }
-export function useFunnelFlowController({ initialStepId, lockToInitialStep = false, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }) {
+export function useFunnelFlowController({ analytics, initialStepId, lockToInitialStep = false, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }) {
     var _a, _b;
     const [runtimeMode, setRuntimeMode] = useRuntimeMode();
     const [editorModeEnabled, setEditorModeEnabled] = useState(false);
@@ -106,6 +106,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
     const attributesRef = useRef(attributes);
     const postHogFeatureFlagsRef = useRef({});
     const prevStepIdRef = useRef(null);
+    const firstStepViewedTrackedRef = useRef(false);
     const stepStartedAtByIdRef = useRef({});
     const engagedStepIdsRef = useRef(new Set());
     const currentUserIdRef = useRef(user.id);
@@ -368,6 +369,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
         recordStepCompletion(stepId, choices);
     }, [recordStepCompletion]);
     useEffect(() => {
+        var _a;
         if (safeActiveStepId !== activeStepId) {
             logger.warn(`[FunnelFlow] Unknown or non-renderable step "${activeStepId}", falling back to "${safeActiveStepId}".`);
             setActiveStepId(safeActiveStepId);
@@ -391,6 +393,15 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
                 startedAt,
             });
             capturePostHogStepEvent('step_started', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, environment: runtimeMode, step_id: renderedStepId, step_name: stepName, started_at: startedAt }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            if (!firstStepViewedTrackedRef.current && safeActiveStepId === defaultStepId) {
+                firstStepViewedTrackedRef.current = true;
+                (_a = analytics === null || analytics === void 0 ? void 0 : analytics.trackFirstStepViewed) === null || _a === void 0 ? void 0 : _a.call(analytics, {
+                    stepId: renderedStepId,
+                    stepName,
+                    occurredAt: startedAt,
+                    featureFlags: postHogFeatureFlagsRef.current,
+                });
+            }
         }
         attributesAtStepStart.current = Object.assign({}, attributesRef.current);
         prevStepIdRef.current = renderedStepId;
@@ -425,6 +436,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
         return () => window.clearTimeout(timer);
     }, [
         activeStepId,
+        analytics,
         defaultStepId,
         isPreviewRuntime,
         recordStepCompletion,

package/package.json

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