@funnelsgrove/runtime 0.1.63 → 0.3.0

package/dist/components/FunnelEditorPanel.d.ts

@@ -1,4 +1,3 @@
-import type { RuntimeMode } from '../services/runtime-mode.service.js';
 export type FunnelEditorPanelExperiment = {
     experimentId: string;
     variants: readonly {
@@ -10,11 +9,9 @@ type FunnelEditorPanelProps<Experiment extends FunnelEditorPanelExperiment> = {
     editorPanelExpanded: boolean;
     experimentAssignmentForEditor: (experiment: Experiment) => string;
     funnelExperiments: readonly Experiment[];
-    onRuntimeModeChange: (mode: RuntimeMode) => void;
     onSelectVariant: (experiment: Experiment, variantKey: 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 declare function FunnelEditorPanel<Experiment extends FunnelEditorPanelExperiment>({ editorModeEnabled, editorPanelExpanded, experimentAssignmentForEditor, funnelExperiments, onSelectVariant, onToggleExpanded, }: 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-tests {\n  margin-top: 0;\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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function FunnelEditorPanel({ editorModeEnabled, editorPanelExpanded, experimentAssignmentForEditor, funnelExperiments, onRuntimeModeChange, onSelectVariant, onToggleExpanded, runtimeMode, }) {
+export function FunnelEditorPanel({ editorModeEnabled, editorPanelExpanded, experimentAssignmentForEditor, funnelExperiments, onSelectVariant, onToggleExpanded, }) {
     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 assignedVariantKey = experimentAssignmentForEditor(experiment);
-                                    return (_jsxs("label", { className: 'funnel-editor-panel-test-item', children: [_jsx("span", { children: experiment.experimentId }), _jsx("select", { value: assignedVariantKey, onChange: (event) => {
-                                                    onSelectVariant(experiment, event.target.value);
-                                                }, children: experiment.variants.map((variant) => (_jsx("option", { value: variant.variantKey, children: variant.variantKey }, variant.variantKey))) })] }, experiment.experimentId));
-                                }) }))] })] })) : 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 ? (_jsx("div", { className: 'funnel-editor-panel-content', children: _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 assignedVariantKey = experimentAssignmentForEditor(experiment);
+                                return (_jsxs("label", { className: 'funnel-editor-panel-test-item', children: [_jsx("span", { children: experiment.experimentId }), _jsx("select", { value: assignedVariantKey, onChange: (event) => {
+                                                onSelectVariant(experiment, event.target.value);
+                                            }, children: experiment.variants.map((variant) => (_jsx("option", { value: variant.variantKey, children: variant.variantKey }, variant.variantKey))) })] }, experiment.experimentId));
+                            }) }))] }) })) : null] }));
 }
 export const funnelEditorPanelStyles = `
 .funnel-editor-panel {
@@ -58,32 +58,8 @@ export const funnelEditorPanelStyles = `
   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;
+  margin-top: 0;
 }
 
 .funnel-editor-panel-helper {

package/dist/components/PaymentRuntimeBoundary.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type PaymentRuntimeBoundaryProps = {
+    children: ReactNode;
+    fallback?: ReactNode;
+};
+export declare function PaymentRuntimeBoundary({ children, fallback, }: PaymentRuntimeBoundaryProps): ReactNode;
+export {};

package/dist/components/PaymentRuntimeBoundary.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRuntimeEnvironmentReady } from '../services/runtime-mode.service.js';
+const defaultFallback = (_jsx("section", { role: 'status', "aria-live": 'polite', "aria-busy": 'true', style: {
+        alignItems: 'center',
+        background: 'inherit',
+        color: 'inherit',
+        display: 'grid',
+        justifyItems: 'center',
+        minHeight: '100dvh',
+        width: '100%',
+    }, children: "Loading secure checkout" }));
+export function PaymentRuntimeBoundary({ children, fallback = defaultFallback, }) {
+    const runtimeEnvironmentReady = useRuntimeEnvironmentReady();
+    return runtimeEnvironmentReady ? children : fallback;
+}

package/dist/components/RuntimeDevInfoBox.d.ts

@@ -9,7 +9,6 @@ export type RuntimeDevInfoValue = {
 type RuntimeDevInfoBoxProps = {
     runtimeMode: RuntimeMode;
     user: Pick<FunnelUser, 'id' | 'email'>;
-    onSwitchToLiveMode: () => void;
     configValues?: readonly RuntimeDevInfoValue[];
     initialConfigOpen?: boolean;
     initialExpanded?: boolean;
@@ -18,6 +17,6 @@ type RuntimeDevInfoBoxProps = {
     title?: string;
 };
 export declare const copyRuntimeDevInfoValue: (value: string) => Promise<boolean>;
-export declare function RuntimeDevInfoBox({ runtimeMode, user, onSwitchToLiveMode, configValues, initialConfigOpen, initialExpanded, paywallStateOptions, reloadOnReset, title, }: RuntimeDevInfoBoxProps): import("react/jsx-runtime").JSX.Element | null;
-export declare const runtimeDevInfoBoxStyles = "\n.runtime-dev-info {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  z-index: 100000;\n  width: min(392px, calc(100vw - 32px));\n  color: #f8fafc;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  pointer-events: none;\n}\n\n.runtime-dev-info * {\n  box-sizing: border-box;\n}\n\n.runtime-dev-info-pill,\n.runtime-dev-info-panel {\n  pointer-events: auto;\n}\n\n.runtime-dev-info.is-collapsed {\n  width: auto;\n}\n\n.runtime-dev-info-pill {\n  min-height: 56px;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  border: 1px solid rgb(255 255 255 / 12%);\n  border-radius: 28px;\n  background: #11161d;\n  color: inherit;\n  padding: 0 20px;\n  box-shadow: 0 18px 42px rgb(15 23 42 / 24%);\n  cursor: pointer;\n}\n\n.runtime-dev-info-wordmark {\n  font-size: 17px;\n  font-weight: 800;\n  letter-spacing: 0;\n}\n\n.runtime-dev-info-chevron {\n  color: #cbd5e1;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1;\n}\n\n.runtime-dev-info-panel {\n  margin-top: 10px;\n  border: 1px solid rgb(255 255 255 / 12%);\n  border-radius: 20px;\n  background: #11161d;\n  box-shadow: 0 22px 50px rgb(15 23 42 / 30%);\n  overflow: hidden;\n}\n\n.runtime-dev-info-status-row,\n.runtime-dev-info-config-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.runtime-dev-info-status-row {\n  padding: 18px 20px 14px;\n}\n\n.runtime-dev-info-title,\n.runtime-dev-info-config-head p,\n.runtime-dev-info-help p {\n  margin: 0;\n}\n\n.runtime-dev-info-title {\n  color: #e5e7eb;\n  font-size: 16px;\n  font-weight: 750;\n  line-height: 1.2;\n}\n\n.runtime-dev-info-badge {\n  border: 1px solid #3b82f6;\n  border-radius: 999px;\n  color: #60a5fa;\n  font-size: 12px;\n  font-weight: 750;\n  line-height: 1;\n  padding: 7px 10px;\n}\n\n.runtime-dev-info-identities {\n  display: grid;\n  gap: 10px;\n  padding: 0 20px 18px;\n}\n\n.runtime-dev-info-identity-card {\n  min-width: 0;\n  border: 1px solid rgb(255 255 255 / 10%);\n  border-radius: 10px;\n  background: rgb(255 255 255 / 4%);\n  padding: 10px;\n}\n\n.runtime-dev-info-identity-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.runtime-dev-info-identity-value {\n  min-width: 0;\n  flex: 1;\n  color: #f8fafc;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\n.runtime-dev-info-identity-label,\n.runtime-dev-info-config-name {\n  display: block;\n  margin-top: 5px;\n  color: #94a3b8;\n  font-size: 12px;\n  line-height: 1.25;\n}\n\n.runtime-dev-info-identity-value,\n.runtime-dev-info-config-value,\n.runtime-dev-info-help code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  font-size: 12px;\n  letter-spacing: 0;\n}\n\n.runtime-dev-info-config-value,\n.runtime-dev-info-help code {\n  color: #dbeafe;\n}\n\n.runtime-dev-info-identity-main button,\n.runtime-dev-info-actions button,\n.runtime-dev-info-config-head button {\n  min-height: 30px;\n  border: 1px solid rgb(255 255 255 / 14%);\n  border-radius: 8px;\n  background: rgb(255 255 255 / 6%);\n  color: #e5e7eb;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.runtime-dev-info-identity-main button {\n  flex: 0 0 auto;\n  padding: 0 9px;\n}\n\n.runtime-dev-info-actions {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 8px;\n  border-top: 1px solid rgb(255 255 255 / 10%);\n  padding: 14px 20px;\n}\n\n.runtime-dev-info-actions button {\n  width: 100%;\n  padding: 0 8px;\n}\n\n.runtime-dev-info-actions button:hover,\n.runtime-dev-info-identity-main button:hover,\n.runtime-dev-info-config-head button:hover {\n  background: rgb(255 255 255 / 12%);\n}\n\n.runtime-dev-info-config {\n  border-top: 1px solid rgb(255 255 255 / 10%);\n  padding: 14px 20px;\n}\n\n.runtime-dev-info-config-head {\n  margin-bottom: 10px;\n  color: #e5e7eb;\n  font-size: 13px;\n  font-weight: 750;\n}\n\n.runtime-dev-info-config-head button {\n  padding: 0 10px;\n}\n\n.runtime-dev-info-config-list {\n  display: grid;\n  gap: 5px;\n  max-height: 220px;\n  overflow: auto;\n}\n\n.runtime-dev-info-config-row {\n  min-width: 0;\n  border-bottom: 1px solid rgb(255 255 255 / 8%);\n  padding: 7px 0;\n}\n\n.runtime-dev-info-config-value {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\n.runtime-dev-info-config-name {\n  font-size: 11px;\n}\n\n.runtime-dev-info-help {\n  display: grid;\n  gap: 6px;\n  border-top: 1px solid rgb(255 255 255 / 10%);\n  padding: 14px 20px 18px;\n  color: #94a3b8;\n  font-size: 12px;\n  line-height: 1.45;\n}\n\n@media (max-width: 430px) {\n  .runtime-dev-info {\n    right: 10px;\n    bottom: 10px;\n    width: min(360px, calc(100vw - 20px));\n  }\n\n  .runtime-dev-info-actions {\n    grid-template-columns: 1fr;\n  }\n\n  .runtime-dev-info-identity-main {\n    align-items: flex-start;\n  }\n}\n";
+export declare function RuntimeDevInfoBox({ runtimeMode, user, configValues, initialConfigOpen, initialExpanded, paywallStateOptions, reloadOnReset, title, }: RuntimeDevInfoBoxProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const runtimeDevInfoBoxStyles = "\n.runtime-dev-info {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  z-index: 100000;\n  width: min(392px, calc(100vw - 32px));\n  color: #f8fafc;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  pointer-events: none;\n}\n\n.runtime-dev-info * {\n  box-sizing: border-box;\n}\n\n.runtime-dev-info-pill,\n.runtime-dev-info-panel {\n  pointer-events: auto;\n}\n\n.runtime-dev-info.is-collapsed {\n  width: auto;\n}\n\n.runtime-dev-info-pill {\n  min-height: 56px;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  border: 1px solid rgb(255 255 255 / 12%);\n  border-radius: 28px;\n  background: #11161d;\n  color: inherit;\n  padding: 0 20px;\n  box-shadow: 0 18px 42px rgb(15 23 42 / 24%);\n  cursor: pointer;\n}\n\n.runtime-dev-info-wordmark {\n  font-size: 17px;\n  font-weight: 800;\n  letter-spacing: 0;\n}\n\n.runtime-dev-info-chevron {\n  color: #cbd5e1;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 1;\n}\n\n.runtime-dev-info-panel {\n  margin-top: 10px;\n  border: 1px solid rgb(255 255 255 / 12%);\n  border-radius: 20px;\n  background: #11161d;\n  box-shadow: 0 22px 50px rgb(15 23 42 / 30%);\n  overflow: hidden;\n}\n\n.runtime-dev-info-status-row,\n.runtime-dev-info-config-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.runtime-dev-info-status-row {\n  padding: 18px 20px 14px;\n}\n\n.runtime-dev-info-title,\n.runtime-dev-info-config-head p {\n  margin: 0;\n}\n\n.runtime-dev-info-title {\n  color: #e5e7eb;\n  font-size: 16px;\n  font-weight: 750;\n  line-height: 1.2;\n}\n\n.runtime-dev-info-badge {\n  border: 1px solid #3b82f6;\n  border-radius: 999px;\n  color: #60a5fa;\n  font-size: 12px;\n  font-weight: 750;\n  line-height: 1;\n  padding: 7px 10px;\n}\n\n.runtime-dev-info-identities {\n  display: grid;\n  gap: 10px;\n  padding: 0 20px 18px;\n}\n\n.runtime-dev-info-identity-card {\n  min-width: 0;\n  border: 1px solid rgb(255 255 255 / 10%);\n  border-radius: 10px;\n  background: rgb(255 255 255 / 4%);\n  padding: 10px;\n}\n\n.runtime-dev-info-identity-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.runtime-dev-info-identity-value {\n  min-width: 0;\n  flex: 1;\n  color: #f8fafc;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\n.runtime-dev-info-identity-label,\n.runtime-dev-info-config-name {\n  display: block;\n  margin-top: 5px;\n  color: #94a3b8;\n  font-size: 12px;\n  line-height: 1.25;\n}\n\n.runtime-dev-info-identity-value,\n.runtime-dev-info-config-value {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\n  font-size: 12px;\n  letter-spacing: 0;\n}\n\n.runtime-dev-info-config-value {\n  color: #dbeafe;\n}\n\n.runtime-dev-info-identity-main button,\n.runtime-dev-info-actions button,\n.runtime-dev-info-config-head button {\n  min-height: 30px;\n  border: 1px solid rgb(255 255 255 / 14%);\n  border-radius: 8px;\n  background: rgb(255 255 255 / 6%);\n  color: #e5e7eb;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.runtime-dev-info-identity-main button {\n  flex: 0 0 auto;\n  padding: 0 9px;\n}\n\n.runtime-dev-info-actions {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n  border-top: 1px solid rgb(255 255 255 / 10%);\n  padding: 14px 20px;\n}\n\n.runtime-dev-info-actions button {\n  width: 100%;\n  padding: 0 8px;\n}\n\n.runtime-dev-info-actions button:hover,\n.runtime-dev-info-identity-main button:hover,\n.runtime-dev-info-config-head button:hover {\n  background: rgb(255 255 255 / 12%);\n}\n\n.runtime-dev-info-config {\n  border-top: 1px solid rgb(255 255 255 / 10%);\n  padding: 14px 20px;\n}\n\n.runtime-dev-info-config-head {\n  margin-bottom: 10px;\n  color: #e5e7eb;\n  font-size: 13px;\n  font-weight: 750;\n}\n\n.runtime-dev-info-config-head button {\n  padding: 0 10px;\n}\n\n.runtime-dev-info-config-list {\n  display: grid;\n  gap: 5px;\n  max-height: 220px;\n  overflow: auto;\n}\n\n.runtime-dev-info-config-row {\n  min-width: 0;\n  border-bottom: 1px solid rgb(255 255 255 / 8%);\n  padding: 7px 0;\n}\n\n.runtime-dev-info-config-value {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\n.runtime-dev-info-config-name {\n  font-size: 11px;\n}\n\n@media (max-width: 430px) {\n  .runtime-dev-info {\n    right: 10px;\n    bottom: 10px;\n    width: min(360px, calc(100vw - 20px));\n  }\n\n  .runtime-dev-info-actions {\n    grid-template-columns: 1fr;\n  }\n\n  .runtime-dev-info-identity-main {\n    align-items: flex-start;\n  }\n}\n";
 export {};

package/dist/components/RuntimeDevInfoBox.js

@@ -73,7 +73,7 @@ export const copyRuntimeDevInfoValue = async (value) => {
         return false;
     }
 };
-export function RuntimeDevInfoBox({ runtimeMode, user, onSwitchToLiveMode, configValues = [], initialConfigOpen = false, initialExpanded = false, paywallStateOptions, reloadOnReset = true, title = 'Funnel sandbox', }) {
+export function RuntimeDevInfoBox({ runtimeMode, user, configValues = [], initialConfigOpen = false, initialExpanded = false, paywallStateOptions, reloadOnReset = true, title = 'Funnel sandbox', }) {
     const [expanded, setExpanded] = useState(initialExpanded);
     const [configOpen, setConfigOpen] = useState(initialConfigOpen);
     const [copiedKey, setCopiedKey] = useState(null);
@@ -114,12 +114,12 @@ export function RuntimeDevInfoBox({ runtimeMode, user, onSwitchToLiveMode, confi
             value: normalizeDisplayValue(user.email),
         },
     ];
-    return (_jsxs("aside", { className: `runtime-dev-info ${expanded ? 'is-expanded' : 'is-collapsed'}`, children: [_jsxs("button", { type: 'button', className: 'runtime-dev-info-pill', onClick: () => setExpanded((current) => !current), "aria-expanded": expanded, children: [_jsx("span", { className: 'runtime-dev-info-wordmark', children: "funnelgrove" }), _jsx("span", { className: 'runtime-dev-info-chevron', "aria-hidden": 'true', children: expanded ? 'v' : '>' })] }), expanded ? (_jsxs("div", { className: 'runtime-dev-info-panel', children: [_jsxs("div", { className: 'runtime-dev-info-status-row', children: [_jsx("p", { className: 'runtime-dev-info-title', children: title }), _jsx("span", { className: 'runtime-dev-info-badge', children: "Test" })] }), _jsx("div", { className: 'runtime-dev-info-identities', children: userRows.map((row) => (_jsxs("div", { className: 'runtime-dev-info-identity-card', children: [_jsxs("div", { className: 'runtime-dev-info-identity-main', children: [_jsx("code", { className: 'runtime-dev-info-identity-value', children: row.value }), _jsx("button", { type: 'button', onClick: () => copyValue(row.value, row.key), children: copiedKey === row.key ? 'Copied' : 'Copy' })] }), _jsx("span", { className: 'runtime-dev-info-identity-label', children: row.label })] }, row.key))) }), _jsxs("div", { className: 'runtime-dev-info-actions', children: [_jsx("button", { type: 'button', onClick: () => setConfigOpen((current) => !current), children: configOpen ? 'Hide config' : 'View config' }), _jsx("button", { type: 'button', onClick: onSwitchToLiveMode, children: "Switch to live mode" }), _jsx("button", { type: 'button', onClick: handleResetState, children: resetDone ? 'Timers reset' : 'Reset timers' })] }), configOpen ? (_jsxs("div", { className: 'runtime-dev-info-config', children: [_jsxs("div", { className: 'runtime-dev-info-config-head', children: [_jsx("p", { children: "Runtime config" }), _jsx("button", { type: 'button', onClick: () => {
+    return (_jsxs("aside", { className: `runtime-dev-info ${expanded ? 'is-expanded' : 'is-collapsed'}`, children: [_jsxs("button", { type: 'button', className: 'runtime-dev-info-pill', onClick: () => setExpanded((current) => !current), "aria-expanded": expanded, children: [_jsx("span", { className: 'runtime-dev-info-wordmark', children: "funnelgrove" }), _jsx("span", { className: 'runtime-dev-info-chevron', "aria-hidden": 'true', children: expanded ? 'v' : '>' })] }), expanded ? (_jsxs("div", { className: 'runtime-dev-info-panel', children: [_jsxs("div", { className: 'runtime-dev-info-status-row', children: [_jsx("p", { className: 'runtime-dev-info-title', children: title }), _jsx("span", { className: 'runtime-dev-info-badge', children: "Test" })] }), _jsx("div", { className: 'runtime-dev-info-identities', children: userRows.map((row) => (_jsxs("div", { className: 'runtime-dev-info-identity-card', children: [_jsxs("div", { className: 'runtime-dev-info-identity-main', children: [_jsx("code", { className: 'runtime-dev-info-identity-value', children: row.value }), _jsx("button", { type: 'button', onClick: () => copyValue(row.value, row.key), children: copiedKey === row.key ? 'Copied' : 'Copy' })] }), _jsx("span", { className: 'runtime-dev-info-identity-label', children: row.label })] }, row.key))) }), _jsxs("div", { className: 'runtime-dev-info-actions', children: [_jsx("button", { type: 'button', onClick: () => setConfigOpen((current) => !current), children: configOpen ? 'Hide config' : 'View config' }), _jsx("button", { type: 'button', onClick: handleResetState, children: resetDone ? 'Timers reset' : 'Reset timers' })] }), configOpen ? (_jsxs("div", { className: 'runtime-dev-info-config', children: [_jsxs("div", { className: 'runtime-dev-info-config-head', children: [_jsx("p", { children: "Runtime config" }), _jsx("button", { type: 'button', onClick: () => {
                                             const value = configItems
                                                 .map((item) => `${item.source || item.label}=${normalizeDisplayValue(item.value)}`)
                                                 .join('\n');
                                             copyValue(value, 'config');
-                                        }, children: copiedKey === 'config' ? 'Copied' : 'Copy all' })] }), _jsx("div", { className: 'runtime-dev-info-config-list', children: configItems.map((item) => (_jsxs("div", { className: 'runtime-dev-info-config-row', children: [_jsx("code", { className: 'runtime-dev-info-config-value', children: normalizeDisplayValue(item.value) }), _jsx("span", { className: 'runtime-dev-info-config-name', children: item.source || item.label })] }, `${item.source || item.label}:${item.label}`))) })] })) : null, _jsxs("div", { className: 'runtime-dev-info-help', children: [_jsxs("p", { children: ["Use ", _jsx("code", { children: "?mode=test" }), " to force test mode."] }), _jsxs("p", { children: ["Use ", _jsx("code", { children: "?mode=prod" }), " or ", _jsx("code", { children: "?mode=production" }), " for live mode."] })] })] })) : null] }));
+                                        }, children: copiedKey === 'config' ? 'Copied' : 'Copy all' })] }), _jsx("div", { className: 'runtime-dev-info-config-list', children: configItems.map((item) => (_jsxs("div", { className: 'runtime-dev-info-config-row', children: [_jsx("code", { className: 'runtime-dev-info-config-value', children: normalizeDisplayValue(item.value) }), _jsx("span", { className: 'runtime-dev-info-config-name', children: item.source || item.label })] }, `${item.source || item.label}:${item.label}`))) })] })) : null] })) : null] }));
 }
 export const runtimeDevInfoBoxStyles = `
 .runtime-dev-info {
@@ -195,8 +195,7 @@ export const runtimeDevInfoBoxStyles = `
 }
 
 .runtime-dev-info-title,
-.runtime-dev-info-config-head p,
-.runtime-dev-info-help p {
+.runtime-dev-info-config-head p {
   margin: 0;
 }
 
@@ -255,15 +254,13 @@ export const runtimeDevInfoBoxStyles = `
 }
 
 .runtime-dev-info-identity-value,
-.runtime-dev-info-config-value,
-.runtime-dev-info-help code {
+.runtime-dev-info-config-value {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
   font-size: 12px;
   letter-spacing: 0;
 }
 
-.runtime-dev-info-config-value,
-.runtime-dev-info-help code {
+.runtime-dev-info-config-value {
   color: #dbeafe;
 }
 
@@ -288,7 +285,7 @@ export const runtimeDevInfoBoxStyles = `
 
 .runtime-dev-info-actions {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
   border-top: 1px solid rgb(255 255 255 / 10%);
   padding: 14px 20px;
@@ -345,16 +342,6 @@ export const runtimeDevInfoBoxStyles = `
   font-size: 11px;
 }
 
-.runtime-dev-info-help {
-  display: grid;
-  gap: 6px;
-  border-top: 1px solid rgb(255 255 255 / 10%);
-  padding: 14px 20px 18px;
-  color: #94a3b8;
-  font-size: 12px;
-  line-height: 1.45;
-}
-
 @media (max-width: 430px) {
   .runtime-dev-info {
     right: 10px;

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

@@ -1,7 +1,6 @@
 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";
 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";
@@ -16,10 +15,6 @@ export type BuilderPreviewActiveStepChangedMessage = {
     type: typeof BUILDER_PREVIEW_ACTIVE_STEP_CHANGED;
     stepId: string;
 };
-export type BuilderPreviewRuntimeModeChangedMessage = {
-    type: typeof BUILDER_PREVIEW_RUNTIME_MODE_CHANGED;
-    mode: 'test' | 'live';
-};
 export type BuilderPreviewGoToStepMessage = {
     type: typeof BUILDER_PREVIEW_GO_TO_STEP;
     stepId: string;

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

@@ -1,7 +1,6 @@
 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';
 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';

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export * from './sdk/userAnswers.js';
 export * from './components/FunnelContext.js';
 export * from './components/FunnelEditorPanel.js';
 export * from './components/ManageSubscriptionScreen.js';
+export * from './components/PaymentRuntimeBoundary.js';
 export * from './components/RuntimeDevInfoBox.js';
 export * from './components/SubscriptionHandoffScreen.js';
 export * from './components/shared/PrimaryButton.js';

package/dist/index.js

@@ -44,6 +44,7 @@ export * from './sdk/userAnswers.js';
 export * from './components/FunnelContext.js';
 export * from './components/FunnelEditorPanel.js';
 export * from './components/ManageSubscriptionScreen.js';
+export * from './components/PaymentRuntimeBoundary.js';
 export * from './components/RuntimeDevInfoBox.js';
 export * from './components/SubscriptionHandoffScreen.js';
 export * from './components/shared/PrimaryButton.js';

package/dist/runtime/offer-set-runtime.d.ts

@@ -55,6 +55,7 @@ export type GeneratedOfferSetDiscount = {
     readonly metadata?: Record<string, unknown> | null;
 };
 export type GeneratedOfferSet = {
+    readonly id?: string | null;
     readonly key: string;
     readonly isActive?: boolean | null;
     readonly metadata?: Record<string, unknown> | null;
@@ -74,6 +75,7 @@ export type OfferSetRuntimeDiscount = {
     readonly previousDiscountPercent: number;
 };
 export type OfferSetRuntimePlanOverrides = {
+    offerSetId?: string;
     offerSetKey?: string;
     projectPlanId?: string;
     providerPlanId?: string;

package/dist/runtime/offer-set-runtime.js

@@ -159,7 +159,7 @@ const buildGeneratedPlanOverrides = (item, mode, isDefault) => {
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (projectPlanId ? { projectPlanId } : {})), (providerPlanId ? { providerPlanId } : {})), (paymentMode ? { paymentMode } : {})), (analyticsPurchaseValue !== null ? { analyticsPurchaseValue } : {})), (title ? { title } : {})), (description ? { description } : {})), (priceLabel ? { priceLabel } : {})), (perDayAmount ? { perDayAmount } : {})), (perDayLabel ? { perDayLabel } : {})), (amountCents !== null ? { amountCents: Math.max(0, Math.round(amountCents)) } : {})), (checkoutSummaryLabel ? { checkoutSummaryLabel } : {})), (billingInterval ? { billingInterval } : {})), (billingIntervalCount !== null ? { billingIntervalCount: Math.max(1, Math.round(billingIntervalCount)) } : {})), (followUpProviderPlanId ? { followUpProviderPlanId } : {})), (followUpPlanTitle ? { followUpPlanTitle } : {})), (followUpBillingInterval ? { followUpBillingInterval } : {})), (followUpBillingIntervalCount !== null ? { followUpBillingIntervalCount: Math.max(1, Math.round(followUpBillingIntervalCount)) } : {})), (introIterations !== null ? { introIterations: Math.max(1, Math.round(introIterations)) } : {})), (featuredTag ? { featuredTag } : {})), (oldPriceLabel ? { oldPriceLabel } : {})), (isDefault ? { isDefault: true } : {}));
 };
 export const applyGeneratedOfferSetToPlanCatalog = (baseCatalog, mode, offerSet) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (!offerSet) {
         return Object.assign({}, baseCatalog);
     }
@@ -179,7 +179,7 @@ export const applyGeneratedOfferSetToPlanCatalog = (baseCatalog, mode, offerSet)
         if (!key) {
             continue;
         }
-        nextCatalog[key] = Object.assign(Object.assign(Object.assign({}, ((_c = nextCatalog[key]) !== null && _c !== void 0 ? _c : {})), { offerSetKey: offerSet.key }), buildGeneratedPlanOverrides(item, mode, getOfferSetItemKind(item) === 'plan' && key === defaultPlanKey));
+        nextCatalog[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, ((_c = nextCatalog[key]) !== null && _c !== void 0 ? _c : {})), (((_d = offerSet.id) === null || _d === void 0 ? void 0 : _d.trim()) ? { offerSetId: offerSet.id.trim() } : {})), { offerSetKey: offerSet.key }), buildGeneratedPlanOverrides(item, mode, getOfferSetItemKind(item) === 'plan' && key === defaultPlanKey));
     }
     return nextCatalog;
 };

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

@@ -1,5 +1,4 @@
 import { type BuilderPreviewDefinitionPatch, type BuilderPreviewPaywallPlan } from '../config/builder-preview.protocol.js';
-import type { RuntimeMode } from '../services/runtime-mode.service.js';
 import type { FunnelStepId } from './funnel-runtime.js';
 export type PreviewQuickEditPatch = {
     kind: 'tagText';
@@ -34,9 +33,6 @@ type PreviewBridgeMessage = {
 } | {
     kind: 'quickEditPatch';
     patch: PreviewQuickEditPatch;
-} | {
-    kind: 'runtimeModeChanged';
-    mode: RuntimeMode;
 } | {
     kind: 'paywallPlansChanged';
     stepId: string;
@@ -62,8 +58,7 @@ export type PreviewBridgeOptions = {
     activeStepId: FunnelStepId;
     onGoToStep: (stepId: FunnelStepId) => void;
     resolveRenderableStepId: (stepId: string) => FunnelStepId | null;
-    setRuntimeMode: (mode: RuntimeMode) => void;
     shouldLockToInitialStep: boolean;
 };
-export declare function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableStepId, setRuntimeMode, shouldLockToInitialStep, }: PreviewBridgeOptions): void;
+export declare function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableStepId, shouldLockToInitialStep, }: PreviewBridgeOptions): void;
 export {};

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_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 { 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_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';
@@ -130,12 +130,6 @@ export const parsePreviewBridgeMessage = (value) => {
         const patch = parsePreviewDefinitionPatch(value.patch);
         return patch ? { kind: 'definitionPatch', patch } : null;
     }
-    if (messageType === BUILDER_PREVIEW_RUNTIME_MODE_CHANGED) {
-        return {
-            kind: 'runtimeModeChanged',
-            mode: value.mode === 'live' ? 'live' : 'test',
-        };
-    }
     if (messageType === BUILDER_PREVIEW_PAYWALL_PLANS_CHANGED) {
         const stepId = typeof value.stepId === 'string' ? value.stepId.trim() : '';
         const plans = Array.isArray(value.plans)
@@ -422,7 +416,7 @@ export function usePreviewVariableValues(stepId, values) {
         emitPreviewVariableValues(stepId, values);
     }, [serializedValues, stepId, values]);
 }
-export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableStepId, setRuntimeMode, shouldLockToInitialStep, }) {
+export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableStepId, shouldLockToInitialStep, }) {
     const previewReadySentRef = useRef(false);
     const activeStepIdRef = useRef(activeStepId);
     useEffect(() => {
@@ -470,10 +464,6 @@ export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableSt
                 setPreviewInlineEditMode(action.enabled, () => activeStepIdRef.current);
                 return;
             }
-            if (action.kind === 'runtimeModeChanged') {
-                setRuntimeMode(action.mode);
-                return;
-            }
             if (shouldLockToInitialStep) {
                 return;
             }
@@ -494,7 +484,6 @@ export function usePreviewBridge({ activeStepId, onGoToStep, resolveRenderableSt
         activeStepId,
         onGoToStep,
         resolveRenderableStepId,
-        setRuntimeMode,
         shouldLockToInitialStep,
     ]);
 }

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

@@ -154,7 +154,6 @@ type UseFunnelFlowControllerResult<StepId extends string> = {
     runtimeMode: 'test' | 'live';
     setEditorPanelExpanded: Dispatch<SetStateAction<boolean>>;
     setEditorVariantSelection: (experiment: FunnelFlowControllerExperiment<StepId>, variantKey: string) => void;
-    setRuntimeMode: (mode: 'test' | 'live') => void;
     showShellContinue: boolean;
 };
 export declare function resolveFunnelEventAttribution(document: unknown, provisionalAttribution: FunnelUserAttribution | null): FunnelUserAttribution | null;

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

@@ -271,7 +271,7 @@ export function resolveRenderedExperimentStepId(input) {
 }
 export function useFunnelFlowController({ api = apiService, analytics, stepContractVersion, initialStepId, initialAttributes, lockToInitialStep = false, defaultStepId, stepSequence, stepById, stepComponentById, funnelExperiments, getPathForStep, getStepIdFromPath, getSequentialNextStepId, getChoiceTargetsForStep, isFunnelStepId, resolveConfiguredNextStep, resolveRuntimeInitialStepId, }) {
     var _a, _b;
-    const [runtimeMode, setRuntimeMode] = useRuntimeMode();
+    const [runtimeMode] = useRuntimeMode();
     const [editorModeEnabled, setEditorModeEnabled] = useState(() => isEditorEnabled());
     const [editorPanelExpanded, setEditorPanelExpanded] = useState(false);
     const [postHogReady, setPostHogReady] = useState(() => isPostHogReady());
@@ -1267,7 +1267,6 @@ export function useFunnelFlowController({ api = apiService, analytics, stepContr
             }
         },
         resolveRenderableStepId,
-        setRuntimeMode,
         shouldLockToInitialStep,
     });
     const setEditorVariantSelection = useCallback((experiment, variantKey) => {
@@ -1374,7 +1373,6 @@ export function useFunnelFlowController({ api = apiService, analytics, stepContr
         runtimeMode,
         setEditorPanelExpanded,
         setEditorVariantSelection,
-        setRuntimeMode,
         showShellContinue: !hideActionBar && !isAutoAdvanceStep && !choiceTargets,
     };
 }

package/dist/services/api.service.js

@@ -2,60 +2,12 @@ import { buildSdkHeaders, FUNNEL_ID, FUNNEL_VERSION_ID, getFunnelSdkPublishableK
 import { funnelSdkService } from './funnel-sdk.service.js';
 import { mergeFunnelUserAttribution, } from '../runtime/funnel-attribution.js';
 import { applyUrlUserAttributesToUser, hasUrlUserProfileAttributes, resolveUrlUserAttributes, } from '../runtime/url-user-attributes.js';
+import { getRuntimeMode } from './runtime-mode.service.js';
 const DEFAULT_USER_ID_STORAGE_KEY = 'funnel:user-id';
 const DEFAULT_BOOTSTRAP_IDEMPOTENCY_KEY_STORAGE_KEY = 'funnel:bootstrap-idempotency-key';
-const DEFAULT_FUNNEL_DOMAIN_SIGNAL = 'funnelsgrove';
 const canUseDom = () => {
     return typeof window !== 'undefined';
 };
-const normalizeRuntimeEnvironment = (value) => {
-    if (typeof value !== 'string') {
-        return null;
-    }
-    const normalized = value.trim().toLowerCase();
-    if (normalized === 'test') {
-        return 'test';
-    }
-    if (normalized === 'live' || normalized === 'prod' || normalized === 'production') {
-        return 'live';
-    }
-    return null;
-};
-const readCookieValue = (name) => {
-    var _a, _b;
-    if (!canUseDom() || typeof document === 'undefined') {
-        return null;
-    }
-    return (((_b = (_a = document.cookie) === null || _a === void 0 ? void 0 : _a.split(';').map((part) => part.trim()).find((part) => part.startsWith(`${name}=`))) === null || _b === void 0 ? void 0 : _b.slice(name.length + 1)) || null);
-};
-const resolveRuntimeAnalyticsEnvironment = () => {
-    var _a, _b, _c, _d;
-    if (!canUseDom()) {
-        return 'live';
-    }
-    try {
-        const queryMode = normalizeRuntimeEnvironment(new URLSearchParams(((_a = window.location) === null || _a === void 0 ? void 0 : _a.search) || '').get('mode'));
-        if (queryMode) {
-            return queryMode;
-        }
-        const cookieMode = normalizeRuntimeEnvironment(readCookieValue('funnel-mode'));
-        if (cookieMode) {
-            return cookieMode;
-        }
-        const hostname = ((_c = (_b = window.location) === null || _b === void 0 ? void 0 : _b.hostname) === null || _c === void 0 ? void 0 : _c.trim().toLowerCase()) || '';
-        if (hostname.includes(DEFAULT_FUNNEL_DOMAIN_SIGNAL)) {
-            return 'test';
-        }
-        const storageMode = normalizeRuntimeEnvironment((_d = window.localStorage) === null || _d === void 0 ? void 0 : _d.getItem('funnel-mode'));
-        if (storageMode) {
-            return storageMode;
-        }
-    }
-    catch (_e) {
-        return 'live';
-    }
-    return 'live';
-};
 const isRecord = (value) => {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 };
@@ -329,7 +281,7 @@ class ApiService {
         }
         const metadata = {
             source: 'funnel-session',
-            environment: resolveRuntimeAnalyticsEnvironment(),
+            environment: getRuntimeMode(),
         };
         const fingerprint = await digestBootstrapRequest({
             funnelVersionId: asString(FUNNEL_VERSION_ID),
@@ -381,7 +333,7 @@ class ApiService {
             },
             metadata: {
                 source: 'funnel',
-                environment: resolveRuntimeAnalyticsEnvironment(),
+                environment: getRuntimeMode(),
             },
             attribution: options === null || options === void 0 ? void 0 : options.attribution,
         });

package/dist/services/funnel-sdk.service.d.ts

@@ -10,6 +10,8 @@ export type FunnelSdkJsonObject = Record<string, unknown>;
 export type FunnelSdkListPaymentPlansResponse = {
     funnelId?: string;
     environment?: FunnelSdkRuntimeMode;
+    offerSetId?: string;
+    offerSetKey?: string;
     plans: FunnelSdkPaymentPlan[];
 };
 export type FunnelSdkBootstrapUserInput = {
@@ -72,6 +74,7 @@ export type FunnelSdkUploadPhotoInput = {
 };
 export type FunnelSdkCreateHostedCheckoutSessionInput = {
     planId: string;
+    offerSetId?: string | null;
     offerSetKey?: string | null;
     amountCents: number;
     successUrl: string;
@@ -95,6 +98,7 @@ export type FunnelSdkCreateHostedCheckoutSessionResponse = {
 };
 export type FunnelSdkCreateSubscriptionCheckoutInput = {
     planId: string;
+    offerSetId?: string | null;
     offerSetKey?: string | null;
     amountCents: number;
     returnUrl: string;
@@ -124,6 +128,7 @@ export type FunnelSdkCreateSubscriptionCheckoutResponse = {
 };
 export type FunnelSdkCreateOneTimeCheckoutInput = {
     planId: string;
+    offerSetId?: string | null;
     offerSetKey?: string | null;
     amountCents: number;
     returnUrl: string;
@@ -146,6 +151,7 @@ export type FunnelSdkCreateOneTimeCheckoutResponse = {
 export type FunnelSdkUpdateSubscriptionCheckoutPlanInput = {
     checkoutSessionId: string;
     planId: string;
+    offerSetId?: string | null;
     offerSetKey?: string | null;
     amountCents: number;
     analyticsMetadata?: Record<string, unknown> | null;
@@ -187,6 +193,8 @@ export type FunnelSdkVerifySubscriptionCheckoutResponse = {
  */
 export type FunnelSdkCreateOneTimePaymentIntentInput = {
     planId: string;
+    offerSetId?: string | null;
+    offerSetKey?: string | null;
     amountCents: number;
     analyticsMetadata?: Record<string, unknown> | null;
     couponId?: string | null;
@@ -250,6 +258,8 @@ declare class FunnelSdkService {
     uploadPhoto<ResponsePayload = FunnelSdkJsonObject>(input: FunnelSdkUploadPhotoInput): Promise<ResponsePayload>;
     listPaymentPlans(input?: {
         environment?: FunnelSdkRuntimeMode;
+        offerSetId?: string | null;
+        offerSetKey?: string | null;
         runtimeConfig?: FunnelSdkRuntimeConfigOverrides;
     }): Promise<FunnelSdkListPaymentPlansResponse>;
     createHostedCheckoutSession(input: FunnelSdkCreateHostedCheckoutSessionInput): Promise<FunnelSdkCreateHostedCheckoutSessionResponse>;

package/dist/services/funnel-sdk.service.js

@@ -193,6 +193,8 @@ class FunnelSdkService {
             searchParams: {
                 environment: input.environment,
                 funnelId,
+                offerSetId: input.offerSetId,
+                offerSetKey: input.offerSetKey,
             },
             errorMessage: 'Unable to load payment plans',
         });
@@ -201,6 +203,7 @@ class FunnelSdkService {
         return this.postJson('/sdk/public/payments/checkout-session', {
             runtimeConfig: input.runtimeConfig,
             body: {
+                offerSetId: input.offerSetId,
                 offerSetKey: input.offerSetKey,
                 planId: input.planId,
                 providerPlanId: input.providerPlanId,
@@ -224,6 +227,7 @@ class FunnelSdkService {
         return this.postJson('/sdk/public/payments/subscriptions', {
             runtimeConfig: input.runtimeConfig,
             body: {
+                offerSetId: input.offerSetId,
                 offerSetKey: input.offerSetKey,
                 planId: input.planId,
                 providerPlanId: input.providerPlanId,
@@ -251,6 +255,7 @@ class FunnelSdkService {
         return this.postJson('/sdk/public/payments/one-time-checkout', {
             runtimeConfig: input.runtimeConfig,
             body: {
+                offerSetId: input.offerSetId,
                 offerSetKey: input.offerSetKey,
                 planId: input.planId,
                 providerPlanId: input.providerPlanId,
@@ -272,6 +277,7 @@ class FunnelSdkService {
             runtimeConfig: input.runtimeConfig,
             body: {
                 checkoutSessionId: input.checkoutSessionId,
+                offerSetId: input.offerSetId,
                 offerSetKey: input.offerSetKey,
                 planId: input.planId,
                 providerPlanId: input.providerPlanId,
@@ -306,6 +312,8 @@ class FunnelSdkService {
         return this.postJson('/sdk/public/payments/intents', {
             runtimeConfig: input.runtimeConfig,
             body: {
+                offerSetId: input.offerSetId,
+                offerSetKey: input.offerSetKey,
                 planId: input.planId,
                 amountCents: input.amountCents,
                 couponId: input.couponId,

package/dist/services/runtime-mode.service.d.ts

@@ -1,8 +1,8 @@
 export type RuntimeMode = 'test' | 'live';
 export type FunnelMode = 'test' | 'production';
+export declare const isSystemPreviewHostname: (value: string) => boolean;
 export declare const isEditorEnabled: () => boolean;
 export declare const getFunnelMode: () => FunnelMode;
 export declare const getRuntimeMode: () => RuntimeMode;
-export declare const setFunnelMode: (mode: FunnelMode) => void;
-export declare const setRuntimeMode: (mode: RuntimeMode) => void;
-export declare const useRuntimeMode: () => [RuntimeMode, (mode: RuntimeMode) => void];
+export declare const useRuntimeMode: () => readonly [RuntimeMode];
+export declare const useRuntimeEnvironmentReady: () => boolean;

package/dist/services/runtime-mode.service.js

@@ -1,48 +1,40 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
-const EDITOR_MODE_STORAGE_KEY = 'funnel:editor:mode';
-const FUNNEL_MODE_STORAGE_KEY = 'funnel-mode';
-const FUNNEL_MODE_COOKIE_NAME = 'funnel-mode';
-const MODE_CHANGE_EVENT = 'funnel:editor-mode-changed';
-const DEFAULT_FUNNEL_DOMAIN_SIGNAL = 'funnelsgrove';
-const FUNNEL_MODE_COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
+import { useSyncExternalStore } from 'react';
+const SYSTEM_PREVIEW_DOMAINS = ['funnelsgrove.org', 'funnelsgrove.com'];
 const canUseDom = () => {
     return typeof window !== 'undefined';
 };
-const toFunnelMode = (value) => {
-    if (typeof value !== 'string') {
-        return null;
-    }
-    const normalized = value.trim().toLowerCase();
-    if (normalized === 'test') {
-        return 'test';
-    }
-    if (normalized === 'prod' || normalized === 'production' || normalized === 'live') {
-        return 'production';
-    }
-    return null;
-};
-const toRuntimeMode = (value) => {
-    return toFunnelMode(value) === 'production' ? 'live' : 'test';
+const normalizeHostname = (value) => {
+    return value.trim().toLowerCase().replace(/^\[|\]$/g, '').replace(/\.+$/, '');
 };
-const toRuntimeModeFromFunnelMode = (mode) => {
-    return mode === 'production' ? 'live' : 'test';
+const isExactOrSubdomain = (hostname, domain) => {
+    return hostname === domain || hostname.endsWith(`.${domain}`);
 };
-const toFunnelModeFromRuntimeMode = (mode) => {
-    return mode === 'live' ? 'production' : 'test';
+const isIpv4Loopback = (hostname) => {
+    const match = /^127((?:\.\d{1,3}){3})$/.exec(hostname);
+    return match
+        ? match[1].slice(1).split('.').every((octet) => Number(octet) <= 255)
+        : false;
 };
-const normalizeHostname = (value) => {
-    return value.trim().toLowerCase().replace(/\.+$/, '');
+const isMappedIpv4Loopback = (hostname) => {
+    const mappedIpv4 = /^::ffff:([0-9a-f]{1,4}):[0-9a-f]{1,4}$/.exec(hostname);
+    return Boolean(mappedIpv4
+        && Number.parseInt(mappedIpv4[1], 16) >= 0x7f00
+        && Number.parseInt(mappedIpv4[1], 16) <= 0x7fff);
 };
-const isDefaultPublishedDomain = () => {
-    if (!canUseDom()) {
-        return false;
-    }
-    const hostname = normalizeHostname(window.location.hostname || '');
+export const isSystemPreviewHostname = (value) => {
+    const hostname = normalizeHostname(value);
     if (!hostname) {
         return false;
     }
-    return hostname.includes(DEFAULT_FUNNEL_DOMAIN_SIGNAL);
+    if (hostname === 'localhost' ||
+        hostname.endsWith('.localhost') ||
+        isIpv4Loopback(hostname) ||
+        hostname === '::1' ||
+        isMappedIpv4Loopback(hostname)) {
+        return true;
+    }
+    return SYSTEM_PREVIEW_DOMAINS.some((domain) => isExactOrSubdomain(hostname, domain));
 };
 export const isEditorEnabled = () => {
     if (!canUseDom()) {
@@ -55,197 +47,31 @@ export const isEditorEnabled = () => {
         return false;
     }
 };
-const readStoredEditorMode = () => {
-    if (!canUseDom()) {
-        return null;
-    }
-    try {
-        const storedValue = window.localStorage.getItem(EDITOR_MODE_STORAGE_KEY);
-        if (!storedValue) {
-            return null;
-        }
-        return toRuntimeMode(storedValue);
-    }
-    catch (_a) {
-        return null;
-    }
-};
-const readCookieValue = (name) => {
-    if (typeof document === 'undefined') {
-        return null;
-    }
-    try {
-        const target = `${encodeURIComponent(name)}=`;
-        const entry = document.cookie
-            .split(';')
-            .map((item) => item.trim())
-            .find((item) => item.startsWith(target));
-        return entry ? decodeURIComponent(entry.slice(target.length)) : null;
-    }
-    catch (_a) {
-        return null;
-    }
-};
-const writeFunnelModeCookie = (mode) => {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    try {
-        document.cookie = [
-            `${encodeURIComponent(FUNNEL_MODE_COOKIE_NAME)}=${encodeURIComponent(mode)}`,
-            'Path=/',
-            `Max-Age=${FUNNEL_MODE_COOKIE_MAX_AGE_SECONDS}`,
-            'SameSite=Lax',
-        ].join('; ');
-    }
-    catch (_a) {
-        // ignore cookie failures
-    }
-};
-const readFunnelModeCookie = () => {
-    return toFunnelMode(readCookieValue(FUNNEL_MODE_COOKIE_NAME));
-};
-const readFunnelModeStorage = () => {
-    if (!canUseDom()) {
-        return null;
-    }
-    try {
-        return toFunnelMode(window.localStorage.getItem(FUNNEL_MODE_STORAGE_KEY));
-    }
-    catch (_a) {
-        return null;
-    }
-};
-const persistFunnelMode = (mode, options = {}) => {
-    if (!canUseDom()) {
-        return;
-    }
-    try {
-        window.localStorage.setItem(FUNNEL_MODE_STORAGE_KEY, mode);
-    }
-    catch (_a) {
-        // ignore storage failures
-    }
-    writeFunnelModeCookie(mode);
-    if (options.emit === false) {
-        return;
-    }
-    emitModeChange(toRuntimeModeFromFunnelMode(mode));
-};
-const readQueryFunnelMode = () => {
-    if (!canUseDom()) {
-        return null;
-    }
-    try {
-        return toFunnelMode(new URLSearchParams(window.location.search).get('mode'));
-    }
-    catch (_a) {
-        return null;
-    }
-};
-const emitModeChange = (mode) => {
-    if (!canUseDom()) {
-        return;
-    }
-    window.dispatchEvent(new CustomEvent(MODE_CHANGE_EVENT, {
-        detail: {
-            mode,
-        },
-    }));
-};
 export const getFunnelMode = () => {
     if (!canUseDom()) {
         return 'production';
     }
-    const queryMode = readQueryFunnelMode();
-    if (queryMode) {
-        persistFunnelMode(queryMode, { emit: false });
-        return queryMode;
-    }
-    const cookieMode = readFunnelModeCookie();
-    if (cookieMode) {
-        return cookieMode;
-    }
-    if (isDefaultPublishedDomain()) {
-        return 'test';
-    }
-    return readFunnelModeStorage() || 'production';
+    return isSystemPreviewHostname(window.location.hostname || '') ? 'test' : 'production';
 };
 export const getRuntimeMode = () => {
-    if (!canUseDom()) {
-        return 'live';
-    }
-    const queryMode = readQueryFunnelMode();
-    if (queryMode) {
-        persistFunnelMode(queryMode, { emit: false });
-        return toRuntimeModeFromFunnelMode(queryMode);
-    }
-    if (!isEditorEnabled()) {
-        return toRuntimeModeFromFunnelMode(getFunnelMode());
-    }
-    return readStoredEditorMode() || 'test';
+    return getFunnelMode() === 'test' ? 'test' : 'live';
 };
-export const setFunnelMode = (mode) => {
-    if (!canUseDom()) {
-        return;
-    }
-    persistFunnelMode(mode);
+const subscribeRuntimeEnvironment = () => {
+    return () => undefined;
 };
-export const setRuntimeMode = (mode) => {
-    if (!canUseDom()) {
-        return;
-    }
-    const normalizedMode = toRuntimeMode(mode);
-    try {
-        window.localStorage.setItem(EDITOR_MODE_STORAGE_KEY, normalizedMode);
-    }
-    catch (_a) {
-        // ignore storage failures
-    }
-    persistFunnelMode(toFunnelModeFromRuntimeMode(normalizedMode));
+const getServerRuntimeMode = () => {
+    return 'live';
 };
-const subscribeRuntimeMode = (listener) => {
-    if (!canUseDom()) {
-        return () => undefined;
-    }
-    const onModeChanged = (event) => {
-        var _a;
-        const customEvent = event;
-        listener(toRuntimeMode((_a = customEvent.detail) === null || _a === void 0 ? void 0 : _a.mode));
-    };
-    const onStorageChanged = (event) => {
-        if (event.key !== EDITOR_MODE_STORAGE_KEY && event.key !== FUNNEL_MODE_STORAGE_KEY) {
-            return;
-        }
-        listener(getRuntimeMode());
-    };
-    window.addEventListener(MODE_CHANGE_EVENT, onModeChanged);
-    window.addEventListener('storage', onStorageChanged);
-    return () => {
-        window.removeEventListener(MODE_CHANGE_EVENT, onModeChanged);
-        window.removeEventListener('storage', onStorageChanged);
-    };
+const getRuntimeEnvironmentReady = () => {
+    return true;
+};
+const getServerRuntimeEnvironmentReady = () => {
+    return false;
 };
 export const useRuntimeMode = () => {
-    const [mode, setMode] = useState('live');
-    useEffect(() => {
-        const syncMode = () => {
-            setMode(getRuntimeMode());
-        };
-        syncMode();
-        const unsubscribe = subscribeRuntimeMode((nextMode) => {
-            setMode(nextMode);
-        });
-        window.addEventListener('popstate', syncMode);
-        return () => {
-            unsubscribe();
-            window.removeEventListener('popstate', syncMode);
-        };
-    }, []);
-    const updateMode = useCallback((nextMode) => {
-        const normalizedMode = toRuntimeMode(nextMode);
-        setRuntimeMode(normalizedMode);
-        setMode(normalizedMode);
-    }, []);
-    return [mode, updateMode];
+    const mode = useSyncExternalStore(subscribeRuntimeEnvironment, getRuntimeMode, getServerRuntimeMode);
+    return [mode];
+};
+export const useRuntimeEnvironmentReady = () => {
+    return useSyncExternalStore(subscribeRuntimeEnvironment, getRuntimeEnvironmentReady, getServerRuntimeEnvironmentReady);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/runtime",
-  "version": "0.1.63",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",