@funnelsgrove/runtime 0.1.0 → 0.1.1

package/README.md

@@ -6,7 +6,8 @@ Shared funnel runtime contracts and helpers.
 
 - 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`.
+- Local repo installs still resolve this package through npm workspaces when another workspace depends on version `0.1.1`.
+- The build normalizes generated relative ESM imports to explicit `.js` files for published package consumers.
 
 ## Use This Package For
 
@@ -16,7 +17,9 @@ Shared funnel runtime contracts and helpers.
 - preview-bridge parsing and preview/runtime detection
 - published theme contract and CSS variable helpers
 - funnel context, base controls, and reusable runtime UI primitives
+- subscription handoff and subscription management screens whose copy stays funnel-local
 - browser-safe API client helpers used by funnels
+- a shared test-mode developer info box for funnel-local preview tooling
 
 ## Responsibilities
 
@@ -28,10 +31,25 @@ Shared funnel runtime contracts and helpers.
 
 - reusable runtime helpers that any funnel can use
 - shared browser/event/storage helpers tied to funnel behavior
+- funnel-scoped paywall state helpers that keep runtime-owned storage keys under `fg_...`
 - 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
+- shared preview-checkout publishable key fallback used by paywalls when only the seed placeholder is configured
 - default runtime config values for API/bootstrap wiring
+- env-backed support email rendering for shared subscription management screens
+- full-step subscription management surfaces that avoid exposing an outer page background rim
+- subscription handoff link rendering for iOS, Android, and desktop/web fallbacks from runtime env
+- subscription handoff browser-only values are resolved after mount so published success routes hydrate without text mismatches
+- public subscription summaries with provider plan and period metadata for funnel-local management screens
+- a bottom-right `RuntimeDevInfoBox` that funnels can mount in test mode to inspect public runtime config with one canonical env/config name per row, copy the current funnel user id/email, switch to live mode, and clear funnel-scoped paywall state
+
+## Storage Conventions
+
+- runtime user ids stay funnel-scoped under `funnel:<funnelId>:user-id`
+- runtime-generated user ids use the `u_` prefix
+- paywall state is stored through runtime helpers under `fg_state:<funnelId>`
+- developer reset controls should clear paywall state through `clearPaywallStateValue`, including any funnel-provided legacy keys
 
 ## What Does Not Belong Here
 
@@ -40,3 +58,4 @@ Shared funnel runtime contracts and helpers.
 - billing catalog data
 - analytics SDK transport
 - Stripe checkout UI
+- funnel-specific developer widget copy, config extras, or legacy storage keys

package/dist/components/FunnelContext.d.ts

@@ -1,5 +1,5 @@
-import type { FunnelStepId } from '../runtime/funnel-runtime';
-import type { FunnelUserAnswers } from '../sdk/userAnswers';
+import type { FunnelStepId } from '../runtime/funnel-runtime.js';
+import type { FunnelUserAnswers } from '../sdk/userAnswers.js';
 /** A single record of a completed step, stored in the user's history. */
 export type StepCompletionRecord = {
     stepId: string;
@@ -12,11 +12,13 @@ export type FunnelUser = {
     name: string;
     email: string;
     attributes: FunnelUserAnswers;
+    document?: Record<string, unknown>;
     /** Ordered history of every step the user has completed. */
     completedSteps?: StepCompletionRecord[];
 };
 export type FunnelContextValue = {
     activeStepId: FunnelStepId;
+    isBuilder: boolean;
     goToStep: (stepId: string) => void;
     goNext: () => void;
     goChoice: (choice: 'yes' | 'no', stepId?: string) => void;
@@ -40,4 +42,5 @@ type FunnelProviderProps = {
 };
 export declare function FunnelProvider({ value, children }: FunnelProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useFunnel(): FunnelContextValue;
+export declare function useOptionalFunnel(): FunnelContextValue | null;
 export {};

package/dist/components/FunnelContext.js

@@ -12,3 +12,6 @@ export function useFunnel() {
     }
     return context;
 }
+export function useOptionalFunnel() {
+    return useContext(FunnelContext);
+}

package/dist/components/FunnelEditorPanel.d.ts

@@ -1,10 +1,8 @@
-import type { RuntimeMode } from '../services/runtime-mode.service';
+import type { RuntimeMode } from '../services/runtime-mode.service.js';
 export type FunnelEditorPanelExperiment = {
     experimentId: string;
-    status: 'draft' | 'active';
     variants: readonly {
-        id: string;
-        label: string;
+        variantKey: string;
     }[];
 };
 type FunnelEditorPanelProps<Experiment extends FunnelEditorPanelExperiment> = {
@@ -13,7 +11,7 @@ type FunnelEditorPanelProps<Experiment extends FunnelEditorPanelExperiment> = {
     experimentAssignmentForEditor: (experiment: Experiment) => string;
     funnelExperiments: readonly Experiment[];
     onRuntimeModeChange: (mode: RuntimeMode) => void;
-    onSelectVariant: (experiment: Experiment, variantId: string) => void;
+    onSelectVariant: (experiment: Experiment, variantKey: string) => void;
     onToggleExpanded: () => void;
     runtimeMode: RuntimeMode;
 };

package/dist/components/FunnelEditorPanel.js

@@ -5,10 +5,10 @@ export function FunnelEditorPanel({ editorModeEnabled, editorPanelExpanded, expe
         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) => {
+                                    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.id, children: variant.label }, variant.id))) })] }, experiment.experimentId));
+                                                }, children: experiment.variants.map((variant) => (_jsx("option", { value: variant.variantKey, children: variant.variantKey }, variant.variantKey))) })] }, experiment.experimentId));
                                 }) }))] })] })) : null] }));
 }
 export const funnelEditorPanelStyles = `

package/dist/components/ManageSubscriptionScreen.d.ts

@@ -0,0 +1,51 @@
+import type { LinkItem, ReasonItem } from '../content/step-content.js';
+export type ManageSubscriptionContent = {
+    subscriptionsStage: {
+        title: string;
+        loadingLabel: string;
+        emptyLabel: string;
+        listAriaLabel: string;
+        supportPrefix: string;
+        continueLabel: string;
+        rowSelectedLabel: string;
+        rowSelectLabel: string;
+        subscriptionSuffix: string;
+        renewsOnPrefix: string;
+        cancelScheduledLabel: string;
+        notCancellableLabel: string;
+    };
+    whyStage: {
+        title: string;
+        backLabel: string;
+        reasonsAriaLabel: string;
+        reasons: readonly ReasonItem[];
+    };
+    confirmStage: {
+        title: string;
+        reasonPrefix: string;
+        selectedPlanPrefix: string;
+        missingSelectionLabel: string;
+        cancelLabel: string;
+        cancellingLabel: string;
+        backLabel: string;
+    };
+    doneStage: {
+        title: string;
+        cancelledMessage: string;
+        emptyMessage: string;
+        returnHomeLabel: string;
+    };
+    supportLink: LinkItem;
+    errorMessages: {
+        load: string;
+        cancel: string;
+    };
+};
+type ManageSubscriptionScreenProps = {
+    stepId: string;
+    content: ManageSubscriptionContent;
+    homeStepId: string;
+    nodeId?: string;
+};
+export declare function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, }: ManageSubscriptionScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ManageSubscriptionScreen.js

@@ -0,0 +1,349 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { apiService } from '../services/api.service.js';
+import { buildPreviewManageSubscriptionsFallback, isPreviewFrameRuntime, } from '../services/preview-frame.service.js';
+import { runtimePublicConfig } from '../services/public-env.js';
+import { useFunnel } from './FunnelContext.js';
+const supportEmail = runtimePublicConfig.supportEmail;
+const isCancellableSubscription = (subscription) => {
+    const normalizedStatus = subscription.status.trim().toLowerCase();
+    return normalizedStatus !== 'canceled' && !subscription.cancelAtPeriodEnd;
+};
+const formatDate = (value) => {
+    if (!value) {
+        return 'n/a';
+    }
+    const timestamp = Date.parse(value);
+    if (!Number.isFinite(timestamp)) {
+        return 'n/a';
+    }
+    return new Date(timestamp).toLocaleDateString();
+};
+const getRowActionLabel = (subscription, isSelected, content) => {
+    if (isCancellableSubscription(subscription)) {
+        return isSelected
+            ? content.subscriptionsStage.rowSelectedLabel
+            : content.subscriptionsStage.rowSelectLabel;
+    }
+    if (subscription.cancelAtPeriodEnd) {
+        return content.subscriptionsStage.cancelScheduledLabel;
+    }
+    return content.subscriptionsStage.notCancellableLabel;
+};
+export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, }) {
+    var _a, _b, _c, _d;
+    const { goToStep, setAnswer } = useFunnel();
+    const supportLinkLabel = supportEmail;
+    const supportLinkHref = `mailto:${supportEmail}`;
+    const [stage, setStage] = useState('subscriptions');
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedReasonId, setSelectedReasonId] = useState('');
+    const [selectedSubscriptionId, setSelectedSubscriptionId] = useState(null);
+    const [cancelInFlight, setCancelInFlight] = useState(false);
+    const [cancelCompleted, setCancelCompleted] = useState(false);
+    useEffect(() => {
+        let active = true;
+        const load = async () => {
+            var _a;
+            setLoading(true);
+            setError(null);
+            if (isPreviewFrameRuntime()) {
+                const payload = buildPreviewManageSubscriptionsFallback(apiService.getOrCreateClientUserId());
+                if (active) {
+                    setData(payload);
+                    setSelectedSubscriptionId(null);
+                    setLoading(false);
+                }
+                return;
+            }
+            try {
+                const payload = await apiService.getManageSubscriptions();
+                if (!active) {
+                    return;
+                }
+                setData(payload);
+                const firstCancellable = (_a = payload.subscriptions.find(isCancellableSubscription)) !== null && _a !== void 0 ? _a : null;
+                setSelectedSubscriptionId((current) => {
+                    var _a;
+                    const currentStillCancellable = payload.subscriptions.some((subscription) => {
+                        return subscription.id === current && isCancellableSubscription(subscription);
+                    });
+                    if (current && currentStillCancellable) {
+                        return current;
+                    }
+                    return (_a = firstCancellable === null || firstCancellable === void 0 ? void 0 : firstCancellable.id) !== null && _a !== void 0 ? _a : null;
+                });
+            }
+            catch (nextError) {
+                if (!active) {
+                    return;
+                }
+                setError(nextError instanceof Error ? nextError.message : content.errorMessages.load);
+            }
+            finally {
+                if (active) {
+                    setLoading(false);
+                }
+            }
+        };
+        void load();
+        return () => {
+            active = false;
+        };
+    }, [content.errorMessages.load]);
+    const subscriptions = useMemo(() => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.subscriptions) !== null && _a !== void 0 ? _a : []; }, [data]);
+    const cancellableSubscriptions = useMemo(() => {
+        return subscriptions.filter(isCancellableSubscription);
+    }, [subscriptions]);
+    const selectedReason = (_b = (_a = content.whyStage.reasons.find((reason) => reason.id === selectedReasonId)) !== null && _a !== void 0 ? _a : content.whyStage.reasons[0]) !== null && _b !== void 0 ? _b : null;
+    const selectedSubscription = (_d = (_c = cancellableSubscriptions.find((subscription) => subscription.id === selectedSubscriptionId)) !== null && _c !== void 0 ? _c : cancellableSubscriptions[0]) !== null && _d !== void 0 ? _d : null;
+    const handleContinueFromSubscriptions = () => {
+        const hasCancellableSubscription = cancellableSubscriptions.length > 0;
+        setAnswer('manageSubscriptionHasActive', hasCancellableSubscription);
+        if (!hasCancellableSubscription) {
+            setCancelCompleted(false);
+            setStage('done');
+            return;
+        }
+        setStage('why');
+    };
+    const handleReasonSelected = (reasonId) => {
+        setSelectedReasonId(reasonId);
+        setAnswer('manageSubscriptionReason', reasonId);
+        setStage('confirm');
+    };
+    const handleCancelSubscription = async () => {
+        if (!selectedSubscription || !selectedReason || cancelInFlight) {
+            return;
+        }
+        setCancelInFlight(true);
+        setError(null);
+        try {
+            const payload = await apiService.updateSubscription({
+                subscriptionId: selectedSubscription.id,
+                action: 'cancel',
+            });
+            setData(payload);
+            setAnswer('manageSubscriptionCancelled', true);
+            setAnswer('manageSubscriptionCancelledId', selectedSubscription.id);
+            setAnswer('manageSubscriptionReason', selectedReason.id);
+            setCancelCompleted(true);
+            setStage('done');
+        }
+        catch (nextError) {
+            setError(nextError instanceof Error ? nextError.message : content.errorMessages.cancel);
+        }
+        finally {
+            setCancelInFlight(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("section", { className: 'manage-subscription-step', "data-node-id": nodeId || stepId, children: _jsxs("article", { className: 'manage-subscription-card', children: [stage === 'subscriptions' ? (_jsxs(_Fragment, { children: [_jsx("h1", { className: 'manage-subscription-title', children: content.subscriptionsStage.title }), _jsxs("section", { className: 'manage-subscription-list-card', "aria-label": content.subscriptionsStage.listAriaLabel, children: [loading ? (_jsx("p", { className: 'manage-subscription-muted', children: content.subscriptionsStage.loadingLabel })) : null, error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, !loading && !error && subscriptions.length === 0 ? (_jsx("p", { className: 'manage-subscription-empty', children: content.subscriptionsStage.emptyLabel })) : null, !loading && subscriptions.length > 0 ? (_jsx("ul", { className: 'manage-subscription-list', role: 'list', children: subscriptions.map((subscription) => {
+                                                const canCancel = isCancellableSubscription(subscription);
+                                                const isSelected = (selectedSubscription === null || selectedSubscription === void 0 ? void 0 : selectedSubscription.id) === subscription.id;
+                                                return (_jsx("li", { children: _jsxs("button", { type: 'button', className: isSelected
+                                                            ? 'manage-subscription-row is-selected'
+                                                            : 'manage-subscription-row', disabled: !canCancel, onClick: () => setSelectedSubscriptionId(subscription.id), children: [_jsxs("span", { children: [_jsxs("strong", { children: [subscription.environment.toUpperCase(), ' ', content.subscriptionsStage.subscriptionSuffix] }), _jsxs("small", { children: [subscription.status, " \u00B7 ", content.subscriptionsStage.renewsOnPrefix, ' ', formatDate(subscription.currentPeriodEnd)] })] }), _jsx("span", { children: getRowActionLabel(subscription, isSelected, content) })] }) }, subscription.id));
+                                            }) })) : null] }), _jsxs("p", { className: 'manage-subscription-support', children: [content.subscriptionsStage.supportPrefix, ' ', _jsx("a", { href: supportLinkHref, children: supportLinkLabel })] }), _jsx("button", { type: 'button', className: 'manage-subscription-primary', disabled: loading, onClick: handleContinueFromSubscriptions, children: content.subscriptionsStage.continueLabel })] })) : null, stage === 'why' ? (_jsxs(_Fragment, { children: [_jsx("h1", { className: 'manage-subscription-title', children: content.whyStage.title }), _jsx("ul", { className: 'manage-subscription-reason-list', role: 'list', "aria-label": content.whyStage.reasonsAriaLabel, children: content.whyStage.reasons.map((reason) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: 'manage-subscription-reason', onClick: () => handleReasonSelected(reason.id), children: [_jsx("span", { className: 'manage-subscription-reason-icon', "aria-hidden": true, children: reason.icon }), _jsx("span", { className: 'manage-subscription-reason-label', children: reason.label }), _jsx("span", { className: 'manage-subscription-reason-arrow', "aria-hidden": true, children: "\u203A" })] }) }, reason.id))) }), _jsx("button", { type: 'button', className: 'manage-subscription-secondary', onClick: () => setStage('subscriptions'), children: content.whyStage.backLabel })] })) : null, stage === 'confirm' ? (_jsxs(_Fragment, { children: [_jsx("h1", { className: 'manage-subscription-title', children: content.confirmStage.title }), _jsxs("p", { className: 'manage-subscription-confirm-copy', children: [content.confirmStage.reasonPrefix, " ", (selectedReason === null || selectedReason === void 0 ? void 0 : selectedReason.label) || ''] }), selectedSubscription ? (_jsxs("p", { className: 'manage-subscription-confirm-meta', children: [content.confirmStage.selectedPlanPrefix, ' ', selectedSubscription.environment.toUpperCase(), ' ', content.subscriptionsStage.subscriptionSuffix] })) : (_jsx("p", { className: 'manage-subscription-error', children: content.confirmStage.missingSelectionLabel })), error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', disabled: !selectedSubscription || !selectedReason || cancelInFlight, onClick: () => {
+                                        void handleCancelSubscription();
+                                    }, children: cancelInFlight
+                                        ? content.confirmStage.cancellingLabel
+                                        : content.confirmStage.cancelLabel }), _jsx("button", { type: 'button', className: 'manage-subscription-secondary', onClick: () => setStage('why'), children: content.confirmStage.backLabel })] })) : null, stage === 'done' ? (_jsxs(_Fragment, { children: [_jsx("h1", { className: 'manage-subscription-title', children: content.doneStage.title }), _jsx("p", { className: 'manage-subscription-confirm-copy', children: cancelCompleted
+                                        ? content.doneStage.cancelledMessage
+                                        : content.doneStage.emptyMessage }), _jsxs("p", { className: 'manage-subscription-support', children: [content.subscriptionsStage.supportPrefix, ' ', _jsx("a", { href: supportLinkHref, children: supportLinkLabel })] }), _jsx("button", { type: 'button', className: 'manage-subscription-primary', onClick: () => goToStep(homeStepId), children: content.doneStage.returnHomeLabel })] })) : null] }) }), _jsx("style", { children: manageSubscriptionScreenStyles })] }));
+}
+const manageSubscriptionScreenStyles = `
+.manage-subscription-step {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--color-primary, #4db53f) 8%, var(--color-surface, #fff) 92%);
+  padding: 0;
+  font-family: var(--font-family-base, Inter, sans-serif);
+}
+
+.manage-subscription-card {
+  box-sizing: border-box;
+  min-height: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 18px;
+}
+
+.manage-subscription-title {
+  margin: 0;
+  color: var(--color-text, #262729);
+  font-size: 48px;
+  line-height: 1.1;
+  font-weight: 700;
+  text-align: center;
+}
+
+.manage-subscription-list-card {
+  margin-top: 22px;
+  border-radius: 14px;
+  background: var(--color-surface, #fff);
+  padding: 14px;
+}
+
+.manage-subscription-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 10px;
+}
+
+.manage-subscription-row {
+  width: 100%;
+  border: 1px solid var(--color-border, #dce2ff);
+  background: var(--color-surface, #fff);
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--color-text, #262729);
+  cursor: pointer;
+  text-align: left;
+}
+
+.manage-subscription-row:disabled {
+  opacity: 0.62;
+  cursor: default;
+}
+
+.manage-subscription-row span {
+  display: grid;
+  gap: 4px;
+}
+
+.manage-subscription-row small {
+  color: var(--color-text-muted, #5f6b74);
+  font-size: 12px;
+}
+
+.manage-subscription-row.is-selected {
+  border-color: var(--color-primary, #4db53f);
+  box-shadow: inset 0 0 0 1px var(--color-primary, #4db53f);
+}
+
+.manage-subscription-support {
+  margin: 24px 0 0;
+  color: var(--color-text-muted, #5f6b74);
+  font-size: 17px;
+  line-height: 1.45;
+  text-align: center;
+}
+
+.manage-subscription-support a {
+  color: var(--color-primary, #4db53f);
+  font-weight: 600;
+}
+
+.manage-subscription-primary {
+  margin-top: 24px;
+  width: 100%;
+  min-height: 60px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--color-secondary, #f28100);
+  color: var(--color-surface, #fff);
+  font-size: 34px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.manage-subscription-primary:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.manage-subscription-secondary {
+  margin-top: 12px;
+  width: 100%;
+  min-height: 52px;
+  border: 1px solid var(--color-border, #dce2ff);
+  border-radius: 10px;
+  background: var(--color-surface, #fff);
+  color: var(--color-secondary, #f28100);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.manage-subscription-reason-list {
+  margin: 20px 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 10px;
+}
+
+.manage-subscription-reason {
+  width: 100%;
+  border: 0;
+  border-radius: 14px;
+  background: var(--color-surface, #fff);
+  padding: 14px 16px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 12px;
+  color: var(--color-text, #262729);
+  cursor: pointer;
+}
+
+.manage-subscription-reason-icon {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.manage-subscription-reason-label {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.35;
+  text-align: left;
+}
+
+.manage-subscription-reason-arrow {
+  font-size: 44px;
+  color: var(--color-primary, #4db53f);
+  line-height: 0.7;
+}
+
+.manage-subscription-confirm-copy {
+  margin: 22px 0 0;
+  color: var(--color-text-muted, #5f6b74);
+  font-size: 18px;
+  line-height: 1.45;
+  text-align: center;
+}
+
+.manage-subscription-confirm-meta {
+  margin: 10px 0 0;
+  color: var(--color-text, #262729);
+  font-size: 16px;
+  text-align: center;
+}
+
+.manage-subscription-muted,
+.manage-subscription-empty {
+  margin: 0;
+  color: var(--color-text-muted, #5f6b74);
+  font-size: 17px;
+  text-align: center;
+}
+
+.manage-subscription-error {
+  margin: 14px 0 0;
+  color: var(--color-danger, #c74b43);
+  font-size: 14px;
+  text-align: center;
+}
+`;

package/dist/components/RuntimeDevInfoBox.d.ts

@@ -0,0 +1,23 @@
+import type { FunnelUser } from './FunnelContext.js';
+import { type PaywallStateOptions } from '../services/funnel-state.service.js';
+import type { RuntimeMode } from '../services/runtime-mode.service.js';
+export type RuntimeDevInfoValue = {
+    label: string;
+    value: string | number | boolean | null | undefined;
+    source?: string;
+};
+type RuntimeDevInfoBoxProps = {
+    runtimeMode: RuntimeMode;
+    user: Pick<FunnelUser, 'id' | 'email'>;
+    onSwitchToLiveMode: () => void;
+    configValues?: readonly RuntimeDevInfoValue[];
+    initialConfigOpen?: boolean;
+    initialExpanded?: boolean;
+    paywallStateOptions?: PaywallStateOptions;
+    reloadOnReset?: boolean;
+    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: 1400;\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 {};