@funnelsgrove/runtime 0.1.0 → 0.1.2

package/dist/config/font-config.js

@@ -0,0 +1,101 @@
+const FONT_REGISTRY = [
+    {
+        name: 'SF Pro Text',
+        category: 'sans-serif',
+        fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        weights: [400, 500, 600, 700, 800],
+        hasItalic: true,
+        source: 'system',
+    },
+    {
+        name: 'Inter',
+        category: 'sans-serif',
+        fallbacks: '"Segoe UI", sans-serif',
+        weights: [400, 500, 600, 700, 800],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Inter',
+    },
+    {
+        name: 'Roboto',
+        category: 'sans-serif',
+        fallbacks: '"Helvetica Neue", Arial, sans-serif',
+        weights: [400, 500, 700],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Roboto',
+    },
+    {
+        name: 'Open Sans',
+        category: 'sans-serif',
+        fallbacks: '"Helvetica Neue", Arial, sans-serif',
+        weights: [400, 500, 600, 700, 800],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Open+Sans',
+    },
+    {
+        name: 'Lato',
+        category: 'sans-serif',
+        fallbacks: '"Helvetica Neue", Arial, sans-serif',
+        weights: [400, 700],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Lato',
+    },
+    {
+        name: 'Poppins',
+        category: 'sans-serif',
+        fallbacks: '"Segoe UI", sans-serif',
+        weights: [400, 500, 600, 700],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Poppins',
+    },
+    {
+        name: 'Montserrat',
+        category: 'sans-serif',
+        fallbacks: '"Helvetica Neue", sans-serif',
+        weights: [400, 500, 600, 700, 800],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Montserrat',
+    },
+    {
+        name: 'Playfair Display',
+        category: 'serif',
+        fallbacks: 'Georgia, "Times New Roman", serif',
+        weights: [400, 500, 600, 700],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Playfair+Display',
+    },
+    {
+        name: 'Philosopher',
+        category: 'serif',
+        fallbacks: 'Georgia, serif',
+        weights: [400, 700],
+        hasItalic: true,
+        source: 'google',
+        googleFontFamily: 'Philosopher',
+    },
+];
+export const getFontRegistry = () => {
+    return FONT_REGISTRY;
+};
+export const getFontByName = (name) => {
+    return FONT_REGISTRY.find((f) => f.name === name);
+};
+export const buildFontFamilyString = (font) => {
+    var _a;
+    const def = getFontByName(font.family);
+    const fallbacks = (_a = def === null || def === void 0 ? void 0 : def.fallbacks) !== null && _a !== void 0 ? _a : font.fallbacks;
+    return `"${font.family}", ${fallbacks}`;
+};
+export const buildGoogleFontsUrl = (font) => {
+    const def = getFontByName(font.family);
+    if (!def || def.source !== 'google' || !def.googleFontFamily)
+        return null;
+    const weights = def.weights.join(';');
+    return `https://fonts.googleapis.com/css2?family=${def.googleFontFamily}:wght@${weights}&display=swap`;
+};

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

@@ -1,14 +1,60 @@
-import type { FunnelManifest } from './funnel.manifest.types';
-export type FunnelThemeColors = {
+import type { FunnelManifest } from './funnel.manifest.types.js';
+export type FunnelThemeInterfaceColors = {
     background: string;
+    primary: string;
+    primaryText: string;
+    secondary: string;
+    secondaryText: string;
     text: string;
-    accent: string;
-    button: string;
-    surface: string;
-    border: string;
+};
+export type FunnelThemeInterfaceOpacity = Record<keyof FunnelThemeInterfaceColors, number>;
+export type FunnelThemeColors = {
+    interface: FunnelThemeInterfaceColors;
+    interfaceOpacity: FunnelThemeInterfaceOpacity;
+    semantic: {
+        accent: string;
+        button: string;
+        buttonText: string;
+        surface: string;
+        border: string;
+        warning: string;
+        danger: string;
+    };
+    derived: {
+        bgMuted: string;
+        bgSuccess: string;
+        bgWarning: string;
+        bgDanger: string;
+        bgNeutral: string;
+        textMuted: string;
+        accentSoft: string;
+        accentMuted: string;
+    };
+};
+export type FunnelThemeDarkOverrides = {
+    interface?: Partial<FunnelThemeInterfaceColors>;
+    interfaceOpacity?: Partial<FunnelThemeColors['interfaceOpacity']>;
+    semantic?: Partial<FunnelThemeColors['semantic']>;
+    derived?: Partial<FunnelThemeColors['derived']>;
+};
+export type FunnelThemeDevicePreset = {
+    name: string;
+    shellWidth: number;
+    maxWidth: number;
+};
+export type FunnelThemeDeviceSize = {
+    activePreset: string;
+    presets: FunnelThemeDevicePreset[];
+    padding: number;
+    cornerRadius: number;
+};
+export type FunnelThemeFont = {
+    family: string;
+    style: 'Normal' | 'Italic';
+    fallbacks: string;
 };
 export type FunnelThemeTypography = {
-    fontFamily: string;
+    font: FunnelThemeFont;
     fontSizes: {
         xs: string;
         sm: string;
@@ -20,7 +66,9 @@ export type FunnelThemeTypography = {
     fontWeights: {
         regular: number;
         medium: number;
+        semibold: number;
         bold: number;
+        heavy: number;
     };
     lineHeights: {
         tight: number;
@@ -29,8 +77,6 @@ export type FunnelThemeTypography = {
     };
 };
 export type FunnelThemeLayout = {
-    shellWidth: number;
-    maxWidth: number;
     safeAreaOffsets: {
         top: number;
         right: number;
@@ -39,8 +85,11 @@ export type FunnelThemeLayout = {
     };
 };
 export type FunnelTheme = {
+    interfaceMode: 'light' | 'dark';
     colors: FunnelThemeColors;
+    darkOverrides: FunnelThemeDarkOverrides;
     typography: FunnelThemeTypography;
+    deviceSize: FunnelThemeDeviceSize;
     layout: FunnelThemeLayout;
 };
 export type FunnelRuntimeDefaults = {
@@ -56,4 +105,6 @@ export type PublishedFunnelSnapshot = {
 };
 export declare const defaultFunnelTheme: FunnelTheme;
 export declare const defaultFunnelRuntimeDefaults: FunnelRuntimeDefaults;
-export declare const createThemeCssVariables: (theme: FunnelTheme) => Record<string, string>;
+export declare const normalizeFunnelTheme: (theme: unknown) => FunnelTheme;
+export declare const resolveColors: (theme: FunnelTheme, mode: "light" | "dark") => FunnelThemeColors;
+export declare const createThemeCssVariables: (theme: FunnelTheme, mode?: "light" | "dark") => Record<string, string>;

package/dist/config/funnel-theme.js

@@ -1,14 +1,50 @@
+// --- Default theme ---
 export const defaultFunnelTheme = {
+    interfaceMode: 'light',
     colors: {
-        background: '#ffffff',
-        text: '#262729',
-        accent: '#3f51b5',
-        button: '#4db53f',
-        surface: '#ffffff',
-        border: '#dce2ff',
+        interface: {
+            background: '#f4effd',
+            primary: '#ff9332',
+            primaryText: '#ffffff',
+            secondary: '#3f51b5',
+            secondaryText: '#ffffff',
+            text: '#404040',
+        },
+        interfaceOpacity: {
+            background: 100,
+            primary: 100,
+            primaryText: 100,
+            secondary: 100,
+            secondaryText: 100,
+            text: 100,
+        },
+        semantic: {
+            accent: '#3f51b5',
+            button: '#4db53f',
+            buttonText: '#ffffff',
+            surface: '#ffffff',
+            border: '#dce2ff',
+            warning: '#f28100',
+            danger: '#dd3333',
+        },
+        derived: {
+            bgMuted: '#f5f7fb',
+            bgSuccess: '#f0f7f1',
+            bgWarning: '#fffdf9',
+            bgDanger: '#fff5f2',
+            bgNeutral: '#f4f1ef',
+            textMuted: '#4d5470',
+            accentSoft: 'rgb(63 81 181 / 15%)',
+            accentMuted: '#a1a9d6',
+        },
     },
+    darkOverrides: {},
     typography: {
-        fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        font: {
+            family: 'SF Pro Text',
+            style: 'Normal',
+            fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        },
         fontSizes: {
             xs: '12px',
             sm: '14px',
@@ -20,7 +56,9 @@ export const defaultFunnelTheme = {
         fontWeights: {
             regular: 400,
             medium: 500,
+            semibold: 600,
             bold: 700,
+            heavy: 800,
         },
         lineHeights: {
             tight: 1.2,
@@ -28,15 +66,14 @@ export const defaultFunnelTheme = {
             relaxed: 1.65,
         },
     },
+    deviceSize: {
+        activePreset: 'Universal',
+        presets: [{ name: 'Universal', shellWidth: 430, maxWidth: 430 }],
+        padding: 16,
+        cornerRadius: 16,
+    },
     layout: {
-        shellWidth: 430,
-        maxWidth: 430,
-        safeAreaOffsets: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
+        safeAreaOffsets: { top: 0, right: 0, bottom: 0, left: 0 },
     },
 };
 export const defaultFunnelRuntimeDefaults = {
@@ -44,26 +81,309 @@ export const defaultFunnelRuntimeDefaults = {
     funnelId: null,
     sdkPublishableKey: null,
 };
-export const createThemeCssVariables = (theme) => {
+const asRecord = (value) => {
+    return typeof value === 'object' && value !== null ? value : {};
+};
+const str = (value, fallback) => {
+    return typeof value === 'string' ? value : fallback;
+};
+const num = (value, fallback) => {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+};
+const parseLegacyFontFamily = (value, fallback) => {
+    if (typeof value !== 'string')
+        return fallback;
+    const parts = value
+        .split(',')
+        .map((part) => part.trim())
+        .filter(Boolean);
+    if (parts.length === 0)
+        return fallback;
+    const family = parts[0].replace(/^['"]|['"]$/g, '');
+    const fallbacks = parts.slice(1).join(', ');
+    return {
+        family: family || fallback.family,
+        style: fallback.style,
+        fallbacks: fallbacks || fallback.fallbacks,
+    };
+};
+export const normalizeFunnelTheme = (theme) => {
+    var _a, _b, _c, _d;
+    const raw = asRecord(theme);
+    const defaults = defaultFunnelTheme;
+    const rawColors = asRecord(raw.colors);
+    const rawInterface = asRecord(rawColors.interface);
+    const rawOpacity = asRecord(rawColors.interfaceOpacity);
+    const rawSemantic = asRecord(rawColors.semantic);
+    const rawDerived = asRecord(rawColors.derived);
+    const rawLegacyColors = rawInterface.background || rawSemantic.accent ? {} : rawColors;
+    const rawDarkOverrides = asRecord(raw.darkOverrides);
+    const rawDarkInterface = asRecord(rawDarkOverrides.interface);
+    const rawDarkSemantic = asRecord(rawDarkOverrides.semantic);
+    const rawDarkDerived = asRecord(rawDarkOverrides.derived);
+    const rawDarkOpacity = asRecord(rawDarkOverrides.interfaceOpacity);
+    const rawTypo = asRecord(raw.typography);
+    const rawFont = asRecord(rawTypo.font);
+    const rawLegacyFont = parseLegacyFontFamily(rawTypo.fontFamily, defaults.typography.font);
+    const rawSizes = asRecord(rawTypo.fontSizes);
+    const rawWeights = asRecord(rawTypo.fontWeights);
+    const rawLineHeights = asRecord(rawTypo.lineHeights);
+    const rawDevice = asRecord(raw.deviceSize);
+    const rawPresets = Array.isArray(rawDevice.presets) ? rawDevice.presets : [];
+    const rawLayout = asRecord(raw.layout);
+    const rawSafe = asRecord(rawLayout.safeAreaOffsets);
+    const hasLegacyDevicePreset = typeof rawLayout.shellWidth === 'number' || typeof rawLayout.maxWidth === 'number';
+    const darkOverrides = {};
+    if (Object.keys(rawDarkInterface).length > 0) {
+        darkOverrides.interface = {};
+        if (typeof rawDarkInterface.background === 'string') {
+            darkOverrides.interface.background = rawDarkInterface.background;
+        }
+        if (typeof rawDarkInterface.primary === 'string') {
+            darkOverrides.interface.primary = rawDarkInterface.primary;
+        }
+        if (typeof rawDarkInterface.primaryText === 'string') {
+            darkOverrides.interface.primaryText = rawDarkInterface.primaryText;
+        }
+        if (typeof rawDarkInterface.secondary === 'string') {
+            darkOverrides.interface.secondary = rawDarkInterface.secondary;
+        }
+        if (typeof rawDarkInterface.secondaryText === 'string') {
+            darkOverrides.interface.secondaryText = rawDarkInterface.secondaryText;
+        }
+        if (typeof rawDarkInterface.text === 'string') {
+            darkOverrides.interface.text = rawDarkInterface.text;
+        }
+    }
+    if (Object.keys(rawDarkSemantic).length > 0) {
+        darkOverrides.semantic = {};
+        for (const key of Object.keys(rawDarkSemantic)) {
+            if (typeof rawDarkSemantic[key] === 'string') {
+                darkOverrides.semantic[key] = rawDarkSemantic[key];
+            }
+        }
+    }
+    if (Object.keys(rawDarkDerived).length > 0) {
+        darkOverrides.derived = {};
+        for (const key of Object.keys(rawDarkDerived)) {
+            if (typeof rawDarkDerived[key] === 'string') {
+                darkOverrides.derived[key] = rawDarkDerived[key];
+            }
+        }
+    }
+    if (Object.keys(rawDarkOpacity).length > 0) {
+        darkOverrides.interfaceOpacity = {};
+        if (typeof rawDarkOpacity.background === 'number') {
+            darkOverrides.interfaceOpacity.background = rawDarkOpacity.background;
+        }
+        if (typeof rawDarkOpacity.primary === 'number') {
+            darkOverrides.interfaceOpacity.primary = rawDarkOpacity.primary;
+        }
+        if (typeof rawDarkOpacity.primaryText === 'number') {
+            darkOverrides.interfaceOpacity.primaryText = rawDarkOpacity.primaryText;
+        }
+        if (typeof rawDarkOpacity.secondary === 'number') {
+            darkOverrides.interfaceOpacity.secondary = rawDarkOpacity.secondary;
+        }
+        if (typeof rawDarkOpacity.secondaryText === 'number') {
+            darkOverrides.interfaceOpacity.secondaryText = rawDarkOpacity.secondaryText;
+        }
+        if (typeof rawDarkOpacity.text === 'number') {
+            darkOverrides.interfaceOpacity.text = rawDarkOpacity.text;
+        }
+    }
+    return {
+        interfaceMode: str(raw.interfaceMode, defaults.interfaceMode),
+        colors: {
+            interface: {
+                background: str(rawInterface.background, str(rawLegacyColors.background, defaults.colors.interface.background)),
+                primary: str(rawInterface.primary, str(rawLegacyColors.primary, str(rawLegacyColors.accent, defaults.colors.interface.primary))),
+                primaryText: str(rawInterface.primaryText, str(rawLegacyColors.primaryText, str(rawLegacyColors.buttonText, defaults.colors.interface.primaryText))),
+                secondary: str(rawInterface.secondary, str(rawLegacyColors.secondary, str(rawLegacyColors.accent, defaults.colors.interface.secondary))),
+                secondaryText: str(rawInterface.secondaryText, str(rawLegacyColors.secondaryText, str(rawLegacyColors.text, defaults.colors.interface.secondaryText))),
+                text: str(rawInterface.text, str(rawLegacyColors.text, defaults.colors.interface.text)),
+            },
+            interfaceOpacity: {
+                background: num(rawOpacity.background, defaults.colors.interfaceOpacity.background),
+                primary: num(rawOpacity.primary, defaults.colors.interfaceOpacity.primary),
+                primaryText: num(rawOpacity.primaryText, defaults.colors.interfaceOpacity.primaryText),
+                secondary: num(rawOpacity.secondary, defaults.colors.interfaceOpacity.secondary),
+                secondaryText: num(rawOpacity.secondaryText, defaults.colors.interfaceOpacity.secondaryText),
+                text: num(rawOpacity.text, defaults.colors.interfaceOpacity.text),
+            },
+            semantic: {
+                accent: str(rawSemantic.accent, str(rawLegacyColors.accent, str(rawLegacyColors.primary, defaults.colors.semantic.accent))),
+                button: str(rawSemantic.button, str(rawLegacyColors.button, defaults.colors.semantic.button)),
+                buttonText: str(rawSemantic.buttonText, str(rawLegacyColors.buttonText, defaults.colors.semantic.buttonText)),
+                surface: str(rawSemantic.surface, str(rawLegacyColors.surface, defaults.colors.semantic.surface)),
+                border: str(rawSemantic.border, str(rawLegacyColors.border, defaults.colors.semantic.border)),
+                warning: str(rawSemantic.warning, str(rawLegacyColors.warning, defaults.colors.semantic.warning)),
+                danger: str(rawSemantic.danger, str(rawLegacyColors.danger, defaults.colors.semantic.danger)),
+            },
+            derived: {
+                bgMuted: str(rawDerived.bgMuted, defaults.colors.derived.bgMuted),
+                bgSuccess: str(rawDerived.bgSuccess, defaults.colors.derived.bgSuccess),
+                bgWarning: str(rawDerived.bgWarning, defaults.colors.derived.bgWarning),
+                bgDanger: str(rawDerived.bgDanger, defaults.colors.derived.bgDanger),
+                bgNeutral: str(rawDerived.bgNeutral, defaults.colors.derived.bgNeutral),
+                textMuted: str(rawDerived.textMuted, defaults.colors.derived.textMuted),
+                accentSoft: str(rawDerived.accentSoft, defaults.colors.derived.accentSoft),
+                accentMuted: str(rawDerived.accentMuted, defaults.colors.derived.accentMuted),
+            },
+        },
+        darkOverrides,
+        typography: {
+            font: {
+                family: str(rawFont.family, rawLegacyFont.family),
+                style: str(rawFont.style, rawLegacyFont.style),
+                fallbacks: str(rawFont.fallbacks, rawLegacyFont.fallbacks),
+            },
+            fontSizes: {
+                xs: str(rawSizes.xs, defaults.typography.fontSizes.xs),
+                sm: str(rawSizes.sm, defaults.typography.fontSizes.sm),
+                md: str(rawSizes.md, defaults.typography.fontSizes.md),
+                lg: str(rawSizes.lg, defaults.typography.fontSizes.lg),
+                xl: str(rawSizes.xl, defaults.typography.fontSizes.xl),
+                xxl: str(rawSizes.xxl, defaults.typography.fontSizes.xxl),
+            },
+            fontWeights: {
+                regular: num(rawWeights.regular, defaults.typography.fontWeights.regular),
+                medium: num(rawWeights.medium, defaults.typography.fontWeights.medium),
+                semibold: num(rawWeights.semibold, defaults.typography.fontWeights.semibold),
+                bold: num(rawWeights.bold, defaults.typography.fontWeights.bold),
+                heavy: num(rawWeights.heavy, defaults.typography.fontWeights.heavy),
+            },
+            lineHeights: {
+                tight: num(rawLineHeights.tight, defaults.typography.lineHeights.tight),
+                normal: num(rawLineHeights.normal, defaults.typography.lineHeights.normal),
+                relaxed: num(rawLineHeights.relaxed, defaults.typography.lineHeights.relaxed),
+            },
+        },
+        deviceSize: {
+            activePreset: str(rawDevice.activePreset, defaults.deviceSize.activePreset),
+            presets: rawPresets.length > 0
+                ? rawPresets.map((preset) => {
+                    const record = asRecord(preset);
+                    return {
+                        name: str(record.name, 'Universal'),
+                        shellWidth: num(record.shellWidth, 430),
+                        maxWidth: num(record.maxWidth, 430),
+                    };
+                })
+                : hasLegacyDevicePreset
+                    ? [
+                        {
+                            name: defaults.deviceSize.activePreset,
+                            shellWidth: num(rawLayout.shellWidth, (_b = (_a = defaults.deviceSize.presets[0]) === null || _a === void 0 ? void 0 : _a.shellWidth) !== null && _b !== void 0 ? _b : 430),
+                            maxWidth: num(rawLayout.maxWidth, (_d = (_c = defaults.deviceSize.presets[0]) === null || _c === void 0 ? void 0 : _c.maxWidth) !== null && _d !== void 0 ? _d : 430),
+                        },
+                    ]
+                    : defaults.deviceSize.presets,
+            padding: num(rawDevice.padding, defaults.deviceSize.padding),
+            cornerRadius: num(rawDevice.cornerRadius, defaults.deviceSize.cornerRadius),
+        },
+        layout: {
+            safeAreaOffsets: {
+                top: num(rawSafe.top, defaults.layout.safeAreaOffsets.top),
+                right: num(rawSafe.right, defaults.layout.safeAreaOffsets.right),
+                bottom: num(rawSafe.bottom, defaults.layout.safeAreaOffsets.bottom),
+                left: num(rawSafe.left, defaults.layout.safeAreaOffsets.left),
+            },
+        },
+    };
+};
+// --- Color resolution for light/dark ---
+export const resolveColors = (theme, mode) => {
+    const normalizedTheme = normalizeFunnelTheme(theme);
+    if (mode === 'light')
+        return normalizedTheme.colors;
+    return {
+        interface: Object.assign(Object.assign({}, normalizedTheme.colors.interface), normalizedTheme.darkOverrides.interface),
+        interfaceOpacity: Object.assign(Object.assign({}, normalizedTheme.colors.interfaceOpacity), normalizedTheme.darkOverrides.interfaceOpacity),
+        semantic: Object.assign(Object.assign({}, normalizedTheme.colors.semantic), normalizedTheme.darkOverrides.semantic),
+        derived: Object.assign(Object.assign({}, normalizedTheme.colors.derived), normalizedTheme.darkOverrides.derived),
+    };
+};
+// --- Opacity helpers ---
+const hexToRgb = (hex) => {
+    const cleaned = hex.replace('#', '');
+    if (cleaned.length !== 6)
+        return null;
+    const value = parseInt(cleaned, 16);
+    if (Number.isNaN(value))
+        return null;
+    return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
+};
+const applyOpacity = (color, opacity) => {
+    if (opacity >= 100)
+        return color;
+    const rgb = hexToRgb(color);
+    if (!rgb)
+        return color;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${(opacity / 100).toFixed(2)})`;
+};
+// --- Active preset resolution ---
+const resolveActivePreset = (deviceSize) => {
+    var _a, _b;
+    return ((_b = (_a = deviceSize.presets.find((p) => p.name === deviceSize.activePreset)) !== null && _a !== void 0 ? _a : deviceSize.presets[0]) !== null && _b !== void 0 ? _b : { name: 'Universal', shellWidth: 430, maxWidth: 430 });
+};
+// --- CSS variable generation ---
+export const createThemeCssVariables = (theme, mode) => {
+    const normalizedTheme = normalizeFunnelTheme(theme);
+    const effectiveMode = mode !== null && mode !== void 0 ? mode : normalizedTheme.interfaceMode;
+    const colors = resolveColors(normalizedTheme, effectiveMode);
+    const preset = resolveActivePreset(normalizedTheme.deviceSize);
+    const fontFamily = `"${normalizedTheme.typography.font.family}", ${normalizedTheme.typography.font.fallbacks}`;
     return {
-        '--color-bg': theme.colors.background,
-        '--color-text': theme.colors.text,
-        '--color-accent': theme.colors.accent,
-        '--color-button': theme.colors.button,
-        '--color-surface': theme.colors.surface,
-        '--color-border': theme.colors.border,
-        '--font-family-base': theme.typography.fontFamily,
-        '--font-family-display': theme.typography.fontFamily,
-        '--font-weight-regular': String(theme.typography.fontWeights.regular),
-        '--font-weight-medium': String(theme.typography.fontWeights.medium),
-        '--font-weight-bold': String(theme.typography.fontWeights.bold),
-        '--line-height-body': String(theme.typography.lineHeights.normal),
-        '--line-height-heading': String(theme.typography.lineHeights.tight),
-        '--shell-width': `${theme.layout.shellWidth}px`,
-        '--max-width': `${theme.layout.maxWidth}px`,
-        '--safe-area-offset-top': `${theme.layout.safeAreaOffsets.top}px`,
-        '--safe-area-offset-right': `${theme.layout.safeAreaOffsets.right}px`,
-        '--safe-area-offset-bottom': `${theme.layout.safeAreaOffsets.bottom}px`,
-        '--safe-area-offset-left': `${theme.layout.safeAreaOffsets.left}px`,
+        '--color-bg': applyOpacity(colors.interface.background, colors.interfaceOpacity.background),
+        '--color-bg-raw': colors.interface.background,
+        '--color-bg-opacity': String(colors.interfaceOpacity.background),
+        '--color-primary': applyOpacity(colors.interface.primary, colors.interfaceOpacity.primary),
+        '--color-primary-raw': colors.interface.primary,
+        '--color-primary-opacity': String(colors.interfaceOpacity.primary),
+        '--color-primary-text': applyOpacity(colors.interface.primaryText, colors.interfaceOpacity.primaryText),
+        '--color-primary-text-raw': colors.interface.primaryText,
+        '--color-primary-text-opacity': String(colors.interfaceOpacity.primaryText),
+        '--color-secondary': applyOpacity(colors.interface.secondary, colors.interfaceOpacity.secondary),
+        '--color-secondary-raw': colors.interface.secondary,
+        '--color-secondary-opacity': String(colors.interfaceOpacity.secondary),
+        '--color-secondary-text': applyOpacity(colors.interface.secondaryText, colors.interfaceOpacity.secondaryText),
+        '--color-secondary-text-raw': colors.interface.secondaryText,
+        '--color-secondary-text-opacity': String(colors.interfaceOpacity.secondaryText),
+        '--color-text': applyOpacity(colors.interface.text, colors.interfaceOpacity.text),
+        '--color-text-raw': colors.interface.text,
+        '--color-text-opacity': String(colors.interfaceOpacity.text),
+        '--color-accent': colors.semantic.accent,
+        '--color-button': colors.semantic.button,
+        '--color-button-text': colors.semantic.buttonText,
+        '--color-surface': colors.semantic.surface,
+        '--color-border': colors.semantic.border,
+        '--color-warning': colors.semantic.warning,
+        '--color-danger': colors.semantic.danger,
+        '--color-bg-muted': colors.derived.bgMuted,
+        '--color-bg-success': colors.derived.bgSuccess,
+        '--color-bg-warning': colors.derived.bgWarning,
+        '--color-bg-danger': colors.derived.bgDanger,
+        '--color-bg-neutral': colors.derived.bgNeutral,
+        '--color-text-muted': colors.derived.textMuted,
+        '--color-accent-soft': colors.derived.accentSoft,
+        '--color-accent-muted': colors.derived.accentMuted,
+        '--font-family-base': fontFamily,
+        '--font-family-display': fontFamily,
+        '--font-weight-regular': String(normalizedTheme.typography.fontWeights.regular),
+        '--font-weight-medium': String(normalizedTheme.typography.fontWeights.medium),
+        '--font-weight-semibold': String(normalizedTheme.typography.fontWeights.semibold),
+        '--font-weight-bold': String(normalizedTheme.typography.fontWeights.bold),
+        '--font-weight-heavy': String(normalizedTheme.typography.fontWeights.heavy),
+        '--line-height-body': String(normalizedTheme.typography.lineHeights.normal),
+        '--line-height-heading': String(normalizedTheme.typography.lineHeights.tight),
+        '--shell-width': `${preset.shellWidth}px`,
+        '--max-width': `${preset.maxWidth}px`,
+        '--padding': `${normalizedTheme.deviceSize.padding}px`,
+        '--corner-radius': `${normalizedTheme.deviceSize.cornerRadius}px`,
+        '--safe-area-offset-top': `${normalizedTheme.layout.safeAreaOffsets.top}px`,
+        '--safe-area-offset-right': `${normalizedTheme.layout.safeAreaOffsets.right}px`,
+        '--safe-area-offset-bottom': `${normalizedTheme.layout.safeAreaOffsets.bottom}px`,
+        '--safe-area-offset-left': `${normalizedTheme.layout.safeAreaOffsets.left}px`,
     };
 };

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

@@ -1,4 +1,4 @@
-import type { FunnelStepKind, FunnelStepType } from '../steps/types';
+import type { FunnelStepKind, FunnelStepType } from '../steps/types.js';
 export type TemplateArchitectureVersion = number;
 export type FunnelManifestStep = {
     id: string;
@@ -9,7 +9,16 @@ export type FunnelManifestStep = {
     kind?: FunnelStepKind;
     name?: string;
     title: string;
+    assetIds?: readonly string[];
 };
+export type FunnelManifestImageAsset = {
+    type: 'image';
+    src: string;
+    width?: number;
+    height?: number;
+    preload?: 'idle' | false;
+};
+export type FunnelManifestAsset = string | FunnelManifestImageAsset;
 export type FunnelManifestEntryPoint = {
     id: string;
     stepId: string;
@@ -20,14 +29,11 @@ export type FunnelManifestEdge = {
     conditionId?: string;
 };
 export type FunnelManifestExperimentVariant = {
-    id: string;
-    label: string;
-    trafficPercent: number;
+    variantKey: string;
     routeToStepId: string;
 };
 export type FunnelManifestExperiment = {
     experimentId: string;
-    status: 'draft' | 'active';
     stepId: string;
     variants: readonly FunnelManifestExperimentVariant[];
 };
@@ -41,9 +47,9 @@ export type FunnelManifest = {
         width: number;
         height: number;
     };
-    assets: Record<string, string>;
+    assets: Record<string, FunnelManifestAsset>;
     steps: readonly FunnelManifestStep[];
-    entryPoints: readonly FunnelManifestEntryPoint[];
+    entryPoints?: readonly FunnelManifestEntryPoint[];
     edgesByStepId: Partial<Record<string, readonly FunnelManifestEdge[]>>;
     experiments: readonly FunnelManifestExperiment[];
 };