@funnelsgrove/runtime 0.1.0

package/README.md

@@ -0,0 +1,42 @@
+# @funnelsgrove/runtime
+
+Shared funnel runtime contracts and helpers.
+
+## Build And Publish
+
+- Build distributable output with `npm run build --workspace @funnelsgrove/runtime`.
+- Publish from the repo root with `npm publish --workspace @funnelsgrove/runtime --access public`.
+- Local repo installs still resolve this package through npm workspaces when another workspace depends on version `0.1.0`.
+
+## Use This Package For
+
+- manifest types and validation
+- route resolution and entry-point handling
+- experiment assignment helpers
+- preview-bridge parsing and preview/runtime detection
+- published theme contract and CSS variable helpers
+- funnel context, base controls, and reusable runtime UI primitives
+- browser-safe API client helpers used by funnels
+
+## Responsibilities
+
+- keep funnel mechanics consistent across every funnel
+- expose stable contracts for routing, previews, and step identity
+- avoid funnel-specific copy, visual design, or billing plan catalogs
+
+## What Belongs Here
+
+- reusable runtime helpers that any funnel can use
+- shared browser/event/storage helpers tied to funnel behavior
+- hosted-path navigation helpers so static previews keep their `/published/f/...` or `/catalog/...` prefix
+- generic context and base component primitives
+- safe local-only fallbacks when no real SDK publishable key is configured
+- default runtime config values for API/bootstrap wiring
+
+## What Does Not Belong Here
+
+- funnel-specific step JSX
+- brand/theme assets
+- billing catalog data
+- analytics SDK transport
+- Stripe checkout UI

package/dist/components/FunnelContext.d.ts

@@ -0,0 +1,43 @@
+import type { FunnelStepId } from '../runtime/funnel-runtime';
+import type { FunnelUserAnswers } from '../sdk/userAnswers';
+/** A single record of a completed step, stored in the user's history. */
+export type StepCompletionRecord = {
+    stepId: string;
+    stepName: string;
+    completedAt: string;
+    choices: FunnelUserAnswers;
+};
+export type FunnelUser = {
+    id: string;
+    name: string;
+    email: string;
+    attributes: FunnelUserAnswers;
+    /** Ordered history of every step the user has completed. */
+    completedSteps?: StepCompletionRecord[];
+};
+export type FunnelContextValue = {
+    activeStepId: FunnelStepId;
+    goToStep: (stepId: string) => void;
+    goNext: () => void;
+    goChoice: (choice: 'yes' | 'no', stepId?: string) => void;
+    getChoiceTargets: (stepId?: string) => {
+        yes?: FunnelStepId;
+        no?: FunnelStepId;
+    } | null;
+    setAnswer: <K extends keyof FunnelUserAnswers>(key: K, value: FunnelUserAnswers[K]) => void;
+    getAnswer: <K extends keyof FunnelUserAnswers>(key: K) => FunnelUserAnswers[K] | undefined;
+    answers: FunnelUserAnswers;
+    setAttribute: (key: string, value: unknown) => void;
+    attributes: FunnelUserAnswers;
+    user: FunnelUser;
+    setUser: (user: FunnelUser) => void;
+    /** Manually record a step as completed (used by custom step components). */
+    completeStep: (stepId: string, choices?: Record<string, unknown>) => void;
+};
+type FunnelProviderProps = {
+    value: FunnelContextValue;
+    children: React.ReactNode;
+};
+export declare function FunnelProvider({ value, children }: FunnelProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useFunnel(): FunnelContextValue;
+export {};

package/dist/components/FunnelContext.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const FunnelContext = createContext(null);
+export function FunnelProvider({ value, children }) {
+    return _jsx(FunnelContext.Provider, { value: value, children: children });
+}
+export function useFunnel() {
+    const context = useContext(FunnelContext);
+    if (!context) {
+        throw new Error('useFunnel must be used inside FunnelProvider');
+    }
+    return context;
+}

package/dist/components/FunnelEditorPanel.d.ts

@@ -0,0 +1,22 @@
+import type { RuntimeMode } from '../services/runtime-mode.service';
+export type FunnelEditorPanelExperiment = {
+    experimentId: string;
+    status: 'draft' | 'active';
+    variants: readonly {
+        id: string;
+        label: string;
+    }[];
+};
+type FunnelEditorPanelProps<Experiment extends FunnelEditorPanelExperiment> = {
+    editorModeEnabled: boolean;
+    editorPanelExpanded: boolean;
+    experimentAssignmentForEditor: (experiment: Experiment) => string;
+    funnelExperiments: readonly Experiment[];
+    onRuntimeModeChange: (mode: RuntimeMode) => void;
+    onSelectVariant: (experiment: Experiment, variantId: string) => void;
+    onToggleExpanded: () => void;
+    runtimeMode: RuntimeMode;
+};
+export declare function FunnelEditorPanel<Experiment extends FunnelEditorPanelExperiment>({ editorModeEnabled, editorPanelExpanded, experimentAssignmentForEditor, funnelExperiments, onRuntimeModeChange, onSelectVariant, onToggleExpanded, runtimeMode, }: FunnelEditorPanelProps<Experiment>): import("react/jsx-runtime").JSX.Element | null;
+export declare const funnelEditorPanelStyles = "\n.funnel-editor-panel {\n  position: fixed;\n  top: 12px;\n  right: 12px;\n  z-index: 1200;\n  border-radius: 12px;\n  border: 1px solid rgba(33, 41, 82, 0.25);\n  background: rgba(255, 255, 255, 0.98);\n  color: #202538;\n  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);\n}\n\n.funnel-editor-panel.is-collapsed {\n  width: auto;\n}\n\n.funnel-editor-panel.is-expanded {\n  width: 184px;\n}\n\n.funnel-editor-panel-toggle {\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: left;\n}\n\n.funnel-editor-panel-content {\n  border-top: 1px solid rgba(33, 41, 82, 0.15);\n  padding: 10px 12px 12px;\n}\n\n.funnel-editor-panel-label {\n  margin: 0 0 8px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  color: #53608a;\n}\n\n.funnel-editor-panel-options {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n}\n\n.funnel-editor-panel-options button {\n  border: 1px solid rgba(63, 81, 181, 0.3);\n  border-radius: 8px;\n  background: #eef1ff;\n  color: #3f51b5;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 10px 0;\n  cursor: pointer;\n}\n\n.funnel-editor-panel-options button.is-active {\n  border-color: #3f51b5;\n  background: #3f51b5;\n  color: #ffffff;\n}\n\n.funnel-editor-panel-tests {\n  margin-top: 10px;\n}\n\n.funnel-editor-panel-helper {\n  margin: 0;\n  font-size: 11px;\n  color: #5a6387;\n}\n\n.funnel-editor-panel-test-list {\n  display: grid;\n  gap: 8px;\n}\n\n.funnel-editor-panel-test-item {\n  display: grid;\n  gap: 6px;\n  font-size: 11px;\n  color: #445073;\n}\n\n.funnel-editor-panel-test-item select {\n  height: 28px;\n  border: 1px solid rgba(63, 81, 181, 0.25);\n  border-radius: 8px;\n  background: #f5f7ff;\n  color: #26315a;\n  font-size: 12px;\n  padding: 0 8px;\n}\n";
+export {};

package/dist/components/FunnelEditorPanel.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FunnelEditorPanel({ editorModeEnabled, editorPanelExpanded, experimentAssignmentForEditor, funnelExperiments, onRuntimeModeChange, onSelectVariant, onToggleExpanded, runtimeMode, }) {
+    if (!editorModeEnabled) {
+        return null;
+    }
+    return (_jsxs("aside", { className: `funnel-editor-panel ${editorPanelExpanded ? 'is-expanded' : 'is-collapsed'}`, children: [_jsx("button", { type: 'button', className: 'funnel-editor-panel-toggle', onClick: onToggleExpanded, children: editorPanelExpanded ? 'Hide editor' : 'Editor' }), editorPanelExpanded ? (_jsxs("div", { className: 'funnel-editor-panel-content', children: [_jsx("p", { className: 'funnel-editor-panel-label', children: "MODE" }), _jsxs("div", { className: 'funnel-editor-panel-options', children: [_jsx("button", { type: 'button', className: runtimeMode === 'test' ? 'is-active' : '', onClick: () => onRuntimeModeChange('test'), children: "Test" }), _jsx("button", { type: 'button', className: runtimeMode === 'live' ? 'is-active' : '', onClick: () => onRuntimeModeChange('live'), children: "Live" })] }), _jsxs("div", { className: 'funnel-editor-panel-tests', children: [_jsx("p", { className: 'funnel-editor-panel-label', children: "A/B TESTS" }), funnelExperiments.length === 0 ? (_jsx("p", { className: 'funnel-editor-panel-helper', children: "No configured tests." })) : (_jsx("div", { className: 'funnel-editor-panel-test-list', children: funnelExperiments.map((experiment) => {
+                                    const assignedVariantId = experimentAssignmentForEditor(experiment);
+                                    return (_jsxs("label", { className: 'funnel-editor-panel-test-item', children: [_jsxs("span", { children: [experiment.experimentId, experiment.status === 'active' ? ' (running)' : ' (stopped)'] }), _jsx("select", { value: assignedVariantId, onChange: (event) => {
+                                                    onSelectVariant(experiment, event.target.value);
+                                                }, children: experiment.variants.map((variant) => (_jsx("option", { value: variant.id, children: variant.label }, variant.id))) })] }, experiment.experimentId));
+                                }) }))] })] })) : null] }));
+}
+export const funnelEditorPanelStyles = `
+.funnel-editor-panel {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  z-index: 1200;
+  border-radius: 12px;
+  border: 1px solid rgba(33, 41, 82, 0.25);
+  background: rgba(255, 255, 255, 0.98);
+  color: #202538;
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
+}
+
+.funnel-editor-panel.is-collapsed {
+  width: auto;
+}
+
+.funnel-editor-panel.is-expanded {
+  width: 184px;
+}
+
+.funnel-editor-panel-toggle {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.funnel-editor-panel-content {
+  border-top: 1px solid rgba(33, 41, 82, 0.15);
+  padding: 10px 12px 12px;
+}
+
+.funnel-editor-panel-label {
+  margin: 0 0 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #53608a;
+}
+
+.funnel-editor-panel-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.funnel-editor-panel-options button {
+  border: 1px solid rgba(63, 81, 181, 0.3);
+  border-radius: 8px;
+  background: #eef1ff;
+  color: #3f51b5;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.funnel-editor-panel-options button.is-active {
+  border-color: #3f51b5;
+  background: #3f51b5;
+  color: #ffffff;
+}
+
+.funnel-editor-panel-tests {
+  margin-top: 10px;
+}
+
+.funnel-editor-panel-helper {
+  margin: 0;
+  font-size: 11px;
+  color: #5a6387;
+}
+
+.funnel-editor-panel-test-list {
+  display: grid;
+  gap: 8px;
+}
+
+.funnel-editor-panel-test-item {
+  display: grid;
+  gap: 6px;
+  font-size: 11px;
+  color: #445073;
+}
+
+.funnel-editor-panel-test-item select {
+  height: 28px;
+  border: 1px solid rgba(63, 81, 181, 0.25);
+  border-radius: 8px;
+  background: #f5f7ff;
+  color: #26315a;
+  font-size: 12px;
+  padding: 0 8px;
+}
+`;

package/dist/components/shared/PrimaryButton.d.ts

@@ -0,0 +1,8 @@
+type PrimaryButtonProps = {
+    onClick: () => void;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+export declare function PrimaryButton({ onClick, children, className, disabled, }: PrimaryButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/shared/PrimaryButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PrimaryButton({ onClick, children, className, disabled = false, }) {
+    return (_jsx("button", { className: className ? `primary-button ${className}` : 'primary-button', type: "button", onClick: onClick, disabled: disabled, children: children }));
+}

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

@@ -0,0 +1,4 @@
+export declare const BUILDER_PREVIEW_READY = "builder.preview.ready";
+export declare const BUILDER_PREVIEW_ACTIVE_STEP_CHANGED = "builder.preview.activeStepChanged";
+export declare const BUILDER_PREVIEW_GO_TO_STEP = "builder.preview.goToStep";
+export declare const BUILDER_PREVIEW_RUNTIME_MODE_CHANGED = "builder.preview.runtimeModeChanged";

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

@@ -0,0 +1,4 @@
+export const BUILDER_PREVIEW_READY = 'builder.preview.ready';
+export const BUILDER_PREVIEW_ACTIVE_STEP_CHANGED = 'builder.preview.activeStepChanged';
+export const BUILDER_PREVIEW_GO_TO_STEP = 'builder.preview.goToStep';
+export const BUILDER_PREVIEW_RUNTIME_MODE_CHANGED = 'builder.preview.runtimeModeChanged';

package/dist/config/funnel-theme.d.ts

@@ -0,0 +1,59 @@
+import type { FunnelManifest } from './funnel.manifest.types';
+export type FunnelThemeColors = {
+    background: string;
+    text: string;
+    accent: string;
+    button: string;
+    surface: string;
+    border: string;
+};
+export type FunnelThemeTypography = {
+    fontFamily: string;
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        bold: number;
+    };
+    lineHeights: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+};
+export type FunnelThemeLayout = {
+    shellWidth: number;
+    maxWidth: number;
+    safeAreaOffsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+};
+export type FunnelTheme = {
+    colors: FunnelThemeColors;
+    typography: FunnelThemeTypography;
+    layout: FunnelThemeLayout;
+};
+export type FunnelRuntimeDefaults = {
+    apiUrl: string;
+    funnelId: string | null;
+    sdkPublishableKey: string | null;
+};
+export type PublishedFunnelSnapshot = {
+    templateArchitectureVersion: number;
+    runtime: FunnelRuntimeDefaults;
+    manifest: FunnelManifest;
+    theme: FunnelTheme;
+};
+export declare const defaultFunnelTheme: FunnelTheme;
+export declare const defaultFunnelRuntimeDefaults: FunnelRuntimeDefaults;
+export declare const createThemeCssVariables: (theme: FunnelTheme) => Record<string, string>;

package/dist/config/funnel-theme.js

@@ -0,0 +1,69 @@
+export const defaultFunnelTheme = {
+    colors: {
+        background: '#ffffff',
+        text: '#262729',
+        accent: '#3f51b5',
+        button: '#4db53f',
+        surface: '#ffffff',
+        border: '#dce2ff',
+    },
+    typography: {
+        fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        fontSizes: {
+            xs: '12px',
+            sm: '14px',
+            md: '16px',
+            lg: '20px',
+            xl: '28px',
+            xxl: '36px',
+        },
+        fontWeights: {
+            regular: 400,
+            medium: 500,
+            bold: 700,
+        },
+        lineHeights: {
+            tight: 1.2,
+            normal: 1.45,
+            relaxed: 1.65,
+        },
+    },
+    layout: {
+        shellWidth: 430,
+        maxWidth: 430,
+        safeAreaOffsets: {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+    },
+};
+export const defaultFunnelRuntimeDefaults = {
+    apiUrl: 'https://sdk-api.funnelsgrove.com',
+    funnelId: null,
+    sdkPublishableKey: null,
+};
+export const createThemeCssVariables = (theme) => {
+    return {
+        '--color-bg': theme.colors.background,
+        '--color-text': theme.colors.text,
+        '--color-accent': theme.colors.accent,
+        '--color-button': theme.colors.button,
+        '--color-surface': theme.colors.surface,
+        '--color-border': theme.colors.border,
+        '--font-family-base': theme.typography.fontFamily,
+        '--font-family-display': theme.typography.fontFamily,
+        '--font-weight-regular': String(theme.typography.fontWeights.regular),
+        '--font-weight-medium': String(theme.typography.fontWeights.medium),
+        '--font-weight-bold': String(theme.typography.fontWeights.bold),
+        '--line-height-body': String(theme.typography.lineHeights.normal),
+        '--line-height-heading': String(theme.typography.lineHeights.tight),
+        '--shell-width': `${theme.layout.shellWidth}px`,
+        '--max-width': `${theme.layout.maxWidth}px`,
+        '--safe-area-offset-top': `${theme.layout.safeAreaOffsets.top}px`,
+        '--safe-area-offset-right': `${theme.layout.safeAreaOffsets.right}px`,
+        '--safe-area-offset-bottom': `${theme.layout.safeAreaOffsets.bottom}px`,
+        '--safe-area-offset-left': `${theme.layout.safeAreaOffsets.left}px`,
+    };
+};

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

@@ -0,0 +1,50 @@
+import type { FunnelStepKind, FunnelStepType } from '../steps/types';
+export type TemplateArchitectureVersion = number;
+export type FunnelManifestStep = {
+    id: string;
+    path: string;
+    filePath: `src/steps/${string}.tsx`;
+    componentKey: string;
+    type: FunnelStepType;
+    kind?: FunnelStepKind;
+    name?: string;
+    title: string;
+};
+export type FunnelManifestEntryPoint = {
+    id: string;
+    stepId: string;
+    isDefault?: boolean;
+};
+export type FunnelManifestEdge = {
+    toStepId: string;
+    conditionId?: string;
+};
+export type FunnelManifestExperimentVariant = {
+    id: string;
+    label: string;
+    trafficPercent: number;
+    routeToStepId: string;
+};
+export type FunnelManifestExperiment = {
+    experimentId: string;
+    status: 'draft' | 'active';
+    stepId: string;
+    variants: readonly FunnelManifestExperimentVariant[];
+};
+export type FunnelManifest = {
+    templateArchitectureVersion: TemplateArchitectureVersion;
+    meta: {
+        title: string;
+        description: string;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    assets: Record<string, string>;
+    steps: readonly FunnelManifestStep[];
+    entryPoints: readonly FunnelManifestEntryPoint[];
+    edgesByStepId: Partial<Record<string, readonly FunnelManifestEdge[]>>;
+    experiments: readonly FunnelManifestExperiment[];
+};
+export type FunnelStepComponentKey = string;

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

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export * from './config/builder-preview.protocol';
+export * from './config/funnel.manifest.types';
+export * from './config/funnel-theme';
+export * from './runtime/experiment-assignment';
+export * from './runtime/browser-helpers';
+export * from './runtime/funnel-flow';
+export * from './runtime/funnel-manifest.validation';
+export * from './runtime/funnel-runtime';
+export * from './runtime/use-funnel-flow-controller';
+export * from './runtime/preview-bridge';
+export * from './runtime/route-resolver';
+export * from './services/api.service';
+export * from './services/logger';
+export * from './services/preview-frame.service';
+export * from './services/runtime-api.config';
+export * from './services/runtime-mode.service';
+export * from './sdk/userAnswers';
+export * from './components/FunnelContext';
+export * from './components/FunnelEditorPanel';
+export * from './components/shared/PrimaryButton';
+export * from './steps/types';

package/dist/index.js

@@ -0,0 +1,21 @@
+export * from './config/builder-preview.protocol';
+export * from './config/funnel.manifest.types';
+export * from './config/funnel-theme';
+export * from './runtime/experiment-assignment';
+export * from './runtime/browser-helpers';
+export * from './runtime/funnel-flow';
+export * from './runtime/funnel-manifest.validation';
+export * from './runtime/funnel-runtime';
+export * from './runtime/use-funnel-flow-controller';
+export * from './runtime/preview-bridge';
+export * from './runtime/route-resolver';
+export * from './services/api.service';
+export * from './services/logger';
+export * from './services/preview-frame.service';
+export * from './services/runtime-api.config';
+export * from './services/runtime-mode.service';
+export * from './sdk/userAnswers';
+export * from './components/FunnelContext';
+export * from './components/FunnelEditorPanel';
+export * from './components/shared/PrimaryButton';
+export * from './steps/types';

package/dist/runtime/browser-helpers.d.ts

@@ -0,0 +1,9 @@
+export declare const canUseDom: () => boolean;
+export declare const readWindowStorageValue: (storageKey: string) => string | null;
+export declare const writeWindowStorageValue: (storageKey: string, value: string) => void;
+export declare const dispatchWindowCustomEvent: <Detail>(eventType: string, detail: Detail) => void;
+export declare const buildHostedStepLocation: (input: {
+    currentHref: string;
+    stepPath: string;
+    stepId: string;
+}) => string;

package/dist/runtime/browser-helpers.js

@@ -0,0 +1,57 @@
+export const canUseDom = () => {
+    return typeof window !== 'undefined';
+};
+export const readWindowStorageValue = (storageKey) => {
+    if (!canUseDom()) {
+        return null;
+    }
+    try {
+        return window.localStorage.getItem(storageKey);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+export const writeWindowStorageValue = (storageKey, value) => {
+    if (!canUseDom()) {
+        return;
+    }
+    try {
+        window.localStorage.setItem(storageKey, value);
+    }
+    catch (_a) {
+        // ignore storage access failures
+    }
+};
+export const dispatchWindowCustomEvent = (eventType, detail) => {
+    if (!canUseDom()) {
+        return;
+    }
+    window.dispatchEvent(new CustomEvent(eventType, {
+        detail,
+    }));
+};
+const getHostedFunnelBaseSegments = (pathname) => {
+    const pathSegments = pathname.split('/').filter(Boolean);
+    if (pathSegments[0] === 'published' && pathSegments[1] === 'f' && pathSegments[2]) {
+        return pathSegments.slice(0, 3);
+    }
+    if (pathSegments[0] === 'preview' && pathSegments[1] === 's' && pathSegments[2]) {
+        return pathSegments.slice(0, 3);
+    }
+    if (pathSegments[0] === 'catalog' && pathSegments[1]) {
+        return pathSegments.slice(0, 2);
+    }
+    return [];
+};
+export const buildHostedStepLocation = (input) => {
+    const nextUrl = new URL(input.currentHref);
+    const normalizedStepPath = input.stepPath.startsWith('/') ? input.stepPath : `/${input.stepPath}`;
+    const hostedBaseSegments = getHostedFunnelBaseSegments(nextUrl.pathname);
+    nextUrl.pathname =
+        hostedBaseSegments.length > 0
+            ? `/${hostedBaseSegments.join('/')}${normalizedStepPath}`
+            : normalizedStepPath;
+    nextUrl.searchParams.set('step', input.stepId);
+    return `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`;
+};

package/dist/runtime/experiment-assignment.d.ts

@@ -0,0 +1,4 @@
+import type { FunnelManifestExperiment } from '../config/funnel.manifest.types';
+export declare const getExperimentAssignmentStorageKey: (funnelId: string, userId: string, experimentId: string) => string;
+export declare const getExperimentAssignmentAttributeKey: (experimentId: string) => string;
+export declare const chooseAssignedVariantId: (experiment: FunnelManifestExperiment, userId: string, existingVariantId?: string | null) => string | null;

package/dist/runtime/experiment-assignment.js

@@ -0,0 +1,32 @@
+const hashToBucket = (input) => {
+    let hash = 0;
+    for (let index = 0; index < input.length; index += 1) {
+        hash = (hash * 31 + input.charCodeAt(index)) % 104729;
+    }
+    return Math.abs(hash % 100);
+};
+export const getExperimentAssignmentStorageKey = (funnelId, userId, experimentId) => {
+    return `funnel:experiment:${funnelId}:${userId}:${experimentId}`;
+};
+export const getExperimentAssignmentAttributeKey = (experimentId) => {
+    return `experiment.${experimentId}.variant`;
+};
+export const chooseAssignedVariantId = (experiment, userId, existingVariantId) => {
+    var _a;
+    if (!userId.trim()) {
+        return null;
+    }
+    const variantsById = new Map(experiment.variants.map((variant) => [variant.id, variant]));
+    if (existingVariantId && variantsById.has(existingVariantId)) {
+        return existingVariantId;
+    }
+    const bucket = hashToBucket(`${experiment.experimentId}:${userId}`);
+    let cumulative = 0;
+    for (const variant of experiment.variants) {
+        cumulative += Number.isFinite(variant.trafficPercent) ? variant.trafficPercent : 0;
+        if (bucket < cumulative) {
+            return variant.id;
+        }
+    }
+    return ((_a = experiment.variants[experiment.variants.length - 1]) === null || _a === void 0 ? void 0 : _a.id) || null;
+};

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

@@ -0,0 +1,23 @@
+import type { FunnelManifestExperiment } from '../config/funnel.manifest.types';
+import type { FunnelUserAnswers } from '../sdk/userAnswers';
+export declare const isPreviewStepLockRequested: () => boolean;
+export declare const getRequestedEntryPointId: () => string | null;
+export declare const getRuntimeFunnelIdentity: () => string;
+export declare const getAssignedVariantId: (experiment: FunnelManifestExperiment, userId: string, storage: {
+    read: (storageKey: string) => string | null;
+    write: (storageKey: string, variantId: string) => void;
+}) => string | null;
+export declare const resolveNextStepFromContext: <StepId extends string>(input: {
+    stepId: StepId;
+    attributes: FunnelUserAnswers;
+    userId: string;
+    safeInitialStepId: StepId;
+    resolveRenderableStepId: (stepId: string | null | undefined) => StepId | null;
+    getConfiguredNextStepId: (stepId: StepId, context: {
+        attributes: FunnelUserAnswers;
+        userId: string;
+        getAssignedVariantId: (experiment: FunnelManifestExperiment) => string | null;
+    }) => StepId | null;
+    getSequentialNextStepId: (stepId: StepId) => StepId | null;
+    getAssignedVariantId: (experiment: FunnelManifestExperiment, userId: string) => string | null;
+}) => StepId;