@memberjunction/react-runtime 5.51.0 → 6.1.0-edge.1

package/dist/utilities/component-styles.d.ts

@@ -1,5 +1,6 @@
-import { ComponentStyles } from '@memberjunction/interactive-component-types';
+import { ComponentStyles, StyleOverrides } from '@memberjunction/interactive-component-types';
 export declare function SetupStyles(): ComponentStyles;
 export declare const createDefaultComponentStyles: typeof SetupStyles;
 export declare function BuildStylesFromTheme(root?: Element): ComponentStyles;
+export declare function ApplyStyleOverrides<T extends Partial<ComponentStyles>>(base: T, overrides?: StyleOverrides): T;
 //# sourceMappingURL=component-styles.d.ts.map

package/dist/utilities/component-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-styles.d.ts","sourceRoot":"","sources":["../../src/utilities/component-styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAO9E,wBAAgB,WAAW,IAAI,eAAe,CAoH7C;AAGD,eAAO,MAAM,4BAA4B,oBAAc,CAAC;AA0DxD,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,eAAe,CA8BpE"}
+{"version":3,"file":"component-styles.d.ts","sourceRoot":"","sources":["../../src/utilities/component-styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAO9F,wBAAgB,WAAW,IAAI,eAAe,CAyI7C;AAGD,eAAO,MAAM,4BAA4B,oBAAc,CAAC;AAyExD,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,eAAe,CAoDpE;AA4CD,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,cAAc,GAAG,CAAC,CA0B9G"}

package/dist/utilities/component-styles.js

@@ -9,15 +9,24 @@ export function SetupStyles() {
             secondaryHover: '#475569',
             success: '#10B981',
             successLight: '#D1FAE5',
+            successText: '#047857',
+            successBorder: '#b7eb8f',
             warning: '#F59E0B',
             warningLight: '#FEF3C7',
+            warningText: '#8c6c00',
+            warningBorder: '#ffe58f',
             error: '#EF4444',
             errorLight: '#FEE2E2',
+            errorText: '#B91C1C',
+            errorBorder: '#FECACA',
             info: '#3B82F6',
             infoLight: '#DBEAFE',
+            infoText: '#1D4ED8',
+            infoBorder: '#91d5ff',
             background: '#FFFFFF',
             surface: '#F8FAFC',
             surfaceHover: '#F1F5F9',
+            overlay: 'rgba(0, 0, 0, 0.5)',
             text: '#1E293B',
             textSecondary: '#64748B',
             textTertiary: '#94A3B8',
@@ -95,6 +104,14 @@ export function SetupStyles() {
             '#2196F3', '#4CAF50', '#FF9800', '#E91E63', '#9C27B0',
             '#00BCD4', '#F44336', '#8BC34A', '#FF5722', '#3F51B5',
         ],
+        sequentialScale: [
+            '#E3F2FD', '#BBDEFB', '#90CAF9', '#42A5F5', '#2196F3', '#1976D2', '#0D47A1',
+        ],
+        divergingScale: {
+            low: '#F44336',
+            mid: '#EEEEEE',
+            high: '#4CAF50',
+        },
     };
 }
 export const createDefaultComponentStyles = SetupStyles;
@@ -103,17 +120,28 @@ const THEME_COLOR_TOKEN_MAP = {
     primaryHover: '--mj-brand-primary-hover',
     primaryActive: '--mj-brand-primary-active',
     primaryLight: '--mj-brand-primary-light',
+    secondary: '--mj-brand-secondary',
+    secondaryHover: '--mj-brand-secondary-hover',
     success: '--mj-status-success',
     successLight: '--mj-status-success-bg',
+    successText: '--mj-status-success-text',
+    successBorder: '--mj-status-success-border',
     warning: '--mj-status-warning',
     warningLight: '--mj-status-warning-bg',
+    warningText: '--mj-status-warning-text',
+    warningBorder: '--mj-status-warning-border',
     error: '--mj-status-error',
     errorLight: '--mj-status-error-bg',
+    errorText: '--mj-status-error-text',
+    errorBorder: '--mj-status-error-border',
     info: '--mj-status-info',
     infoLight: '--mj-status-info-bg',
+    infoText: '--mj-status-info-text',
+    infoBorder: '--mj-status-info-border',
     background: '--mj-bg-page',
     surface: '--mj-bg-surface',
     surfaceHover: '--mj-bg-surface-hover',
+    overlay: '--mj-bg-overlay',
     text: '--mj-text-primary',
     textSecondary: '--mj-text-secondary',
     textTertiary: '--mj-text-muted',
@@ -125,6 +153,7 @@ const THEME_COLOR_TOKEN_MAP = {
     borderFocus: '--mj-border-focus',
 };
 const VIZ_TOKEN_COUNT = 10;
+const VIZ_SEQ_TOKEN_COUNT = 7;
 export function BuildStylesFromTheme(root) {
     const base = SetupStyles();
     const el = root ?? (typeof document !== 'undefined' ? document.documentElement : undefined);
@@ -149,6 +178,56 @@ export function BuildStylesFromTheme(root) {
     if (palette.length > 0) {
         base.chartPalette = palette;
     }
+    const sequential = [];
+    for (let i = 1; i <= VIZ_SEQ_TOKEN_COUNT; i++) {
+        const value = read(`--mj-viz-seq-${i}`);
+        if (value) {
+            sequential.push(value);
+        }
+    }
+    if (sequential.length > 1) {
+        base.sequentialScale = sequential;
+    }
+    const divLow = read('--mj-viz-div-low');
+    const divHigh = read('--mj-viz-div-high');
+    if (divLow && divHigh) {
+        const divMid = read('--mj-viz-div-mid');
+        base.divergingScale = divMid ? { low: divLow, mid: divMid, high: divHigh } : { low: divLow, high: divHigh };
+    }
     return base;
 }
+const FONT_SCALE_FACTOR = { small: 0.875, large: 1.25 };
+const MIN_FONT_SIZE_PX = 10;
+function scaleFontSizes(fontSize, factor) {
+    const scaled = {};
+    for (const [key, value] of Object.entries(fontSize)) {
+        const px = typeof value === 'string' ? /^\s*(\d+(?:\.\d+)?)px\s*$/.exec(value) : null;
+        scaled[key] = px
+            ? `${Math.max(MIN_FONT_SIZE_PX, Math.round(parseFloat(px[1]) * factor))}px`
+            : value;
+    }
+    return scaled;
+}
+export function ApplyStyleOverrides(base, overrides) {
+    if (!overrides) {
+        return base;
+    }
+    const hasChartPalette = Array.isArray(overrides.chartPalette) && overrides.chartPalette.length > 0;
+    const hasSequential = Array.isArray(overrides.sequentialScale) && overrides.sequentialScale.length > 1;
+    const hasDiverging = !!overrides.divergingScale?.low && !!overrides.divergingScale?.high;
+    const fontFactor = overrides.fontScale ? FONT_SCALE_FACTOR[overrides.fontScale] : undefined;
+    const hasFontScale = !!fontFactor && !!base.typography?.fontSize;
+    if (!hasChartPalette && !hasSequential && !hasDiverging && !hasFontScale) {
+        return base;
+    }
+    return {
+        ...base,
+        ...(hasChartPalette ? { chartPalette: overrides.chartPalette } : {}),
+        ...(hasSequential ? { sequentialScale: overrides.sequentialScale } : {}),
+        ...(hasDiverging ? { divergingScale: overrides.divergingScale } : {}),
+        ...(hasFontScale
+            ? { typography: { ...base.typography, fontSize: scaleFontSizes(base.typography.fontSize, fontFactor) } }
+            : {}),
+    };
+}
 //# sourceMappingURL=component-styles.js.map

package/dist/utilities/component-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-styles.js","sourceRoot":"","sources":["../../src/utilities/component-styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Default component styles for React runtime\n * @module @memberjunction/react-runtime/utilities\n */\n\nimport { ComponentStyles } from '@memberjunction/interactive-component-types';\n\n/**\n * Creates the default component styles for Skip components\n * These provide a modern, contemporary look and feel\n * Copied from skip-chat implementation\n */\nexport function SetupStyles(): ComponentStyles {\n  // Return modern, contemporary styles for generated components\n  return {\n    colors: {\n      // Primary colors - modern purple/blue gradient feel\n      primary: '#5B4FE9',\n      primaryHover: '#4940D4',\n      primaryActive: '#3E37B8',\n      primaryLight: '#E8E6FF',\n\n      // Secondary colors - sophisticated gray\n      secondary: '#64748B',\n      secondaryHover: '#475569',\n      \n      // Status colors\n      success: '#10B981',\n      successLight: '#D1FAE5',\n      warning: '#F59E0B',\n      warningLight: '#FEF3C7',\n      error: '#EF4444',\n      errorLight: '#FEE2E2',\n      info: '#3B82F6',\n      infoLight: '#DBEAFE',\n      \n      // Base colors\n      background: '#FFFFFF',\n      surface: '#F8FAFC',\n      surfaceHover: '#F1F5F9',\n      \n      // Text colors with better contrast\n      text: '#1E293B',\n      textSecondary: '#64748B',\n      textTertiary: '#94A3B8',\n      textInverse: '#FFFFFF',\n\n      // Link colors\n      link: '#5B4FE9',\n      linkHover: '#4940D4',\n\n      // Border colors\n      border: '#E2E8F0',\n      borderLight: '#F1F5F9',\n      borderFocus: '#5B4FE9',\n      \n      // Shadows (as color strings for easy use)\n      shadow: 'rgba(0, 0, 0, 0.05)',\n      shadowMedium: 'rgba(0, 0, 0, 0.1)',\n      shadowLarge: 'rgba(0, 0, 0, 0.15)',\n    },\n    spacing: {\n      xs: '4px',\n      sm: '8px',\n      md: '16px',\n      lg: '24px',\n      xl: '32px',\n      xxl: '48px',\n      xxxl: '64px',\n    },\n    typography: {\n      fontFamily: '-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif',\n      fontSize: {\n        xs: '11px',\n        sm: '12px',\n        md: '14px',\n        lg: '16px',\n        xl: '20px',\n        xxl: '24px',\n        xxxl: '32px',\n      },\n      fontWeight: {\n        light: '300',\n        regular: '400',\n        medium: '500',\n        semibold: '600',\n        bold: '700',\n      },\n      lineHeight: {\n        tight: '1.25',\n        normal: '1.5',\n        relaxed: '1.75',\n      },\n    },\n    borders: {\n      radius: {\n        sm: '6px',\n        md: '8px',\n        lg: '12px',\n        xl: '16px',\n        full: '9999px',\n      },\n      width: {\n        thin: '1px',\n        medium: '2px',\n        thick: '3px',\n      },\n    },\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n    },\n    transitions: {\n      fast: '150ms ease-in-out',\n      normal: '250ms ease-in-out',\n      slow: '350ms ease-in-out',\n    },\n    overflow: 'auto', // Default overflow style\n    // Default categorical palette for multi-series charts. Overridden per-theme\n    // from the host's `--mj-viz-*` tokens by BuildStylesFromTheme().\n    chartPalette: [\n      '#2196F3', '#4CAF50', '#FF9800', '#E91E63', '#9C27B0',\n      '#00BCD4', '#F44336', '#8BC34A', '#FF5722', '#3F51B5',\n    ],\n  }\n}\n\n// Also export with the original name for backward compatibility\nexport const createDefaultComponentStyles = SetupStyles;\n\n/**\n * The `--mj-*` semantic token → `ComponentStyles` mapping used by the theme bridge.\n * Keys are ComponentStyles color paths; values are the CSS custom property to read.\n * Only theme-defining tokens with a clear semantic equivalent are mapped; every\n * other field keeps its `SetupStyles()` default.\n */\nconst THEME_COLOR_TOKEN_MAP: Record<string, string> = {\n  // Brand / primary + interactive states\n  primary: '--mj-brand-primary',\n  primaryHover: '--mj-brand-primary-hover',\n  primaryActive: '--mj-brand-primary-active',\n  primaryLight: '--mj-brand-primary-light',\n  // Status\n  success: '--mj-status-success',\n  successLight: '--mj-status-success-bg',\n  warning: '--mj-status-warning',\n  warningLight: '--mj-status-warning-bg',\n  error: '--mj-status-error',\n  errorLight: '--mj-status-error-bg',\n  info: '--mj-status-info',\n  infoLight: '--mj-status-info-bg',\n  // Surfaces (MJ: page = tinted, surface = elevated/white in light mode)\n  background: '--mj-bg-page',\n  surface: '--mj-bg-surface',\n  surfaceHover: '--mj-bg-surface-hover',\n  // Text\n  text: '--mj-text-primary',\n  textSecondary: '--mj-text-secondary',\n  textTertiary: '--mj-text-muted',\n  textInverse: '--mj-text-inverse',\n  // Links\n  link: '--mj-text-link',\n  linkHover: '--mj-text-link-hover',\n  // Borders / focus\n  border: '--mj-border-default',\n  borderLight: '--mj-border-subtle',\n  borderFocus: '--mj-border-focus',\n};\n\n/** Number of `--mj-viz-N` categorical tokens the bridge probes for `chartPalette`. */\nconst VIZ_TOKEN_COUNT = 10;\n\n/**\n * Reads the live MJ theme (`--mj-*` custom properties on the document root) and\n * layers it over `SetupStyles()`, producing a `ComponentStyles` that follows the\n * host's active theme — including dark mode and interactive-state (hover/active/\n * focus) families — instead of the frozen default palette. This is the Phase 1\n * theme bridge that gives generated components shell↔content cohesion.\n *\n * DOM-guarded: in non-DOM environments (Node test harness, SSR) there is no\n * computed theme to read, so it returns `SetupStyles()` unchanged. Any individual\n * token that is absent falls back to its `SetupStyles()` default, so a page\n * without MJ tokens loaded also degrades cleanly.\n *\n * @param root optional element to read tokens from (defaults to document root).\n */\nexport function BuildStylesFromTheme(root?: Element): ComponentStyles {\n  const base = SetupStyles();\n\n  const el = root ?? (typeof document !== 'undefined' ? document.documentElement : undefined);\n  if (!el || typeof getComputedStyle === 'undefined') {\n    return base;\n  }\n\n  const cs = getComputedStyle(el);\n  const read = (token: string): string => cs.getPropertyValue(token).trim();\n\n  for (const [path, token] of Object.entries(THEME_COLOR_TOKEN_MAP)) {\n    const value = read(token);\n    if (value) {\n      base.colors[path] = value;\n    }\n  }\n\n  const palette: string[] = [];\n  for (let i = 1; i <= VIZ_TOKEN_COUNT; i++) {\n    const value = read(`--mj-viz-${i}`);\n    if (value) {\n      palette.push(value);\n    }\n  }\n  if (palette.length > 0) {\n    base.chartPalette = palette;\n  }\n\n  return base;\n}"]}
+{"version":3,"file":"component-styles.js","sourceRoot":"","sources":["../../src/utilities/component-styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Default component styles for React runtime\n * @module @memberjunction/react-runtime/utilities\n */\n\nimport { ComponentStyles, StyleOverrides } from '@memberjunction/interactive-component-types';\n\n/**\n * Creates the default component styles for Skip components\n * These provide a modern, contemporary look and feel\n * Copied from skip-chat implementation\n */\nexport function SetupStyles(): ComponentStyles {\n  // Return modern, contemporary styles for generated components\n  return {\n    colors: {\n      // Primary colors - modern purple/blue gradient feel\n      primary: '#5B4FE9',\n      primaryHover: '#4940D4',\n      primaryActive: '#3E37B8',\n      primaryLight: '#E8E6FF',\n\n      // Secondary colors - sophisticated gray\n      secondary: '#64748B',\n      secondaryHover: '#475569',\n      \n      // Status colors\n      success: '#10B981',\n      successLight: '#D1FAE5',\n      successText: '#047857',\n      successBorder: '#b7eb8f',\n      warning: '#F59E0B',\n      warningLight: '#FEF3C7',\n      warningText: '#8c6c00',\n      warningBorder: '#ffe58f',\n      error: '#EF4444',\n      errorLight: '#FEE2E2',\n      errorText: '#B91C1C',\n      errorBorder: '#FECACA',\n      info: '#3B82F6',\n      infoLight: '#DBEAFE',\n      infoText: '#1D4ED8',\n      infoBorder: '#91d5ff',\n\n      // Base colors\n      background: '#FFFFFF',\n      surface: '#F8FAFC',\n      surfaceHover: '#F1F5F9',\n      overlay: 'rgba(0, 0, 0, 0.5)', // Modal scrim\n      \n      // Text colors with better contrast\n      text: '#1E293B',\n      textSecondary: '#64748B',\n      textTertiary: '#94A3B8',\n      textInverse: '#FFFFFF',\n\n      // Link colors\n      link: '#5B4FE9',\n      linkHover: '#4940D4',\n\n      // Border colors\n      border: '#E2E8F0',\n      borderLight: '#F1F5F9',\n      borderFocus: '#5B4FE9',\n      \n      // Shadows (as color strings for easy use)\n      shadow: 'rgba(0, 0, 0, 0.05)',\n      shadowMedium: 'rgba(0, 0, 0, 0.1)',\n      shadowLarge: 'rgba(0, 0, 0, 0.15)',\n    },\n    spacing: {\n      xs: '4px',\n      sm: '8px',\n      md: '16px',\n      lg: '24px',\n      xl: '32px',\n      xxl: '48px',\n      xxxl: '64px',\n    },\n    typography: {\n      fontFamily: '-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", Roboto, sans-serif',\n      fontSize: {\n        xs: '11px',\n        sm: '12px',\n        md: '14px',\n        lg: '16px',\n        xl: '20px',\n        xxl: '24px',\n        xxxl: '32px',\n      },\n      fontWeight: {\n        light: '300',\n        regular: '400',\n        medium: '500',\n        semibold: '600',\n        bold: '700',\n      },\n      lineHeight: {\n        tight: '1.25',\n        normal: '1.5',\n        relaxed: '1.75',\n      },\n    },\n    borders: {\n      radius: {\n        sm: '6px',\n        md: '8px',\n        lg: '12px',\n        xl: '16px',\n        full: '9999px',\n      },\n      width: {\n        thin: '1px',\n        medium: '2px',\n        thick: '3px',\n      },\n    },\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\n      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',\n    },\n    transitions: {\n      fast: '150ms ease-in-out',\n      normal: '250ms ease-in-out',\n      slow: '350ms ease-in-out',\n    },\n    overflow: 'auto', // Default overflow style\n    // Default categorical palette for multi-series charts. Overridden per-theme\n    // from the host's `--mj-viz-*` tokens by BuildStylesFromTheme().\n    chartPalette: [\n      '#2196F3', '#4CAF50', '#FF9800', '#E91E63', '#9C27B0',\n      '#00BCD4', '#F44336', '#8BC34A', '#FF5722', '#3F51B5',\n    ],\n    // Default sequential (single-hue) intensity ramp, light-to-dark, for heatmaps\n    // and density shading. Overridden per-theme from `--mj-viz-seq-*`.\n    sequentialScale: [\n      '#E3F2FD', '#BBDEFB', '#90CAF9', '#42A5F5', '#2196F3', '#1976D2', '#0D47A1',\n    ],\n    // Default diverging ramp for measures with a meaningful midpoint.\n    // Overridden per-theme from `--mj-viz-div-*`.\n    divergingScale: {\n      low: '#F44336',\n      mid: '#EEEEEE',\n      high: '#4CAF50',\n    },\n  }\n}\n\n// Also export with the original name for backward compatibility\nexport const createDefaultComponentStyles = SetupStyles;\n\n/**\n * The `--mj-*` semantic token → `ComponentStyles` mapping used by the theme bridge.\n * Keys are ComponentStyles color paths; values are the CSS custom property to read.\n * Only theme-defining tokens with a clear semantic equivalent are mapped; every\n * other field keeps its `SetupStyles()` default.\n */\nconst THEME_COLOR_TOKEN_MAP: Record<string, string> = {\n  // Brand / primary + interactive states\n  primary: '--mj-brand-primary',\n  primaryHover: '--mj-brand-primary-hover',\n  primaryActive: '--mj-brand-primary-active',\n  primaryLight: '--mj-brand-primary-light',\n  // Secondary\n  secondary: '--mj-brand-secondary',\n  secondaryHover: '--mj-brand-secondary-hover',\n  // Status\n  success: '--mj-status-success',\n  successLight: '--mj-status-success-bg',\n  successText: '--mj-status-success-text',\n  successBorder: '--mj-status-success-border',\n  warning: '--mj-status-warning',\n  warningLight: '--mj-status-warning-bg',\n  warningText: '--mj-status-warning-text',\n  warningBorder: '--mj-status-warning-border',\n  error: '--mj-status-error',\n  errorLight: '--mj-status-error-bg',\n  errorText: '--mj-status-error-text',\n  errorBorder: '--mj-status-error-border',\n  info: '--mj-status-info',\n  infoLight: '--mj-status-info-bg',\n  infoText: '--mj-status-info-text',\n  infoBorder: '--mj-status-info-border',\n  // Surfaces (MJ: page = tinted, surface = elevated/white in light mode)\n  background: '--mj-bg-page',\n  surface: '--mj-bg-surface',\n  surfaceHover: '--mj-bg-surface-hover',\n  overlay: '--mj-bg-overlay',\n  // Text\n  text: '--mj-text-primary',\n  textSecondary: '--mj-text-secondary',\n  textTertiary: '--mj-text-muted',\n  textInverse: '--mj-text-inverse',\n  // Links\n  link: '--mj-text-link',\n  linkHover: '--mj-text-link-hover',\n  // Borders / focus\n  border: '--mj-border-default',\n  borderLight: '--mj-border-subtle',\n  borderFocus: '--mj-border-focus',\n};\n\n/** Number of `--mj-viz-N` categorical tokens the bridge probes for `chartPalette`. */\nconst VIZ_TOKEN_COUNT = 10;\n\n/** Number of `--mj-viz-seq-N` tokens the bridge probes for `sequentialScale`. */\nconst VIZ_SEQ_TOKEN_COUNT = 7;\n\n/**\n * Reads the live MJ theme (`--mj-*` custom properties on the document root) and\n * layers it over `SetupStyles()`, producing a `ComponentStyles` that follows the\n * host's active theme — including dark mode and interactive-state (hover/active/\n * focus) families — instead of the frozen default palette. This is the Phase 1\n * theme bridge that gives generated components shell↔content cohesion.\n *\n * DOM-guarded: in non-DOM environments (Node test harness, SSR) there is no\n * computed theme to read, so it returns `SetupStyles()` unchanged. Any individual\n * token that is absent falls back to its `SetupStyles()` default, so a page\n * without MJ tokens loaded also degrades cleanly.\n *\n * @param root optional element to read tokens from (defaults to document root).\n */\nexport function BuildStylesFromTheme(root?: Element): ComponentStyles {\n  const base = SetupStyles();\n\n  const el = root ?? (typeof document !== 'undefined' ? document.documentElement : undefined);\n  if (!el || typeof getComputedStyle === 'undefined') {\n    return base;\n  }\n\n  const cs = getComputedStyle(el);\n  const read = (token: string): string => cs.getPropertyValue(token).trim();\n\n  for (const [path, token] of Object.entries(THEME_COLOR_TOKEN_MAP)) {\n    const value = read(token);\n    if (value) {\n      base.colors[path] = value;\n    }\n  }\n\n  const palette: string[] = [];\n  for (let i = 1; i <= VIZ_TOKEN_COUNT; i++) {\n    const value = read(`--mj-viz-${i}`);\n    if (value) {\n      palette.push(value);\n    }\n  }\n  if (palette.length > 0) {\n    base.chartPalette = palette;\n  }\n\n  const sequential: string[] = [];\n  for (let i = 1; i <= VIZ_SEQ_TOKEN_COUNT; i++) {\n    const value = read(`--mj-viz-seq-${i}`);\n    if (value) {\n      sequential.push(value);\n    }\n  }\n  // A ramp needs at least two stops to interpolate; a single resolved token is\n  // treated as an incomplete theme and left on the default.\n  if (sequential.length > 1) {\n    base.sequentialScale = sequential;\n  }\n\n  // Endpoints are required for a diverging scale to mean anything; `mid` is\n  // optional, so only the low/high pair gates the swap.\n  const divLow = read('--mj-viz-div-low');\n  const divHigh = read('--mj-viz-div-high');\n  if (divLow && divHigh) {\n    const divMid = read('--mj-viz-div-mid');\n    base.divergingScale = divMid ? { low: divLow, mid: divMid, high: divHigh } : { low: divLow, high: divHigh };\n  }\n\n  return base;\n}\n\n/** Multipliers applied to the whole `fontSize` ladder per `StyleOverrides.fontScale`. */\nconst FONT_SCALE_FACTOR: Record<string, number> = { small: 0.875, large: 1.25 };\n\n/** Smallest px size the scale may produce, so `small` cannot render text illegible. */\nconst MIN_FONT_SIZE_PX = 10;\n\n/**\n * Rescales every px value in a `fontSize` token map, leaving anything not expressed\n * in whole px (rem, em, clamp(), a keyword) untouched rather than guessing at it.\n */\nfunction scaleFontSizes(fontSize: Record<string, string | undefined>, factor: number): Record<string, string | undefined> {\n  const scaled: Record<string, string | undefined> = {};\n  for (const [key, value] of Object.entries(fontSize)) {\n    const px = typeof value === 'string' ? /^\\s*(\\d+(?:\\.\\d+)?)px\\s*$/.exec(value) : null;\n    scaled[key] = px\n      ? `${Math.max(MIN_FONT_SIZE_PX, Math.round(parseFloat(px[1]) * factor))}px`\n      : value;\n  }\n  return scaled;\n}\n\n/**\n * Layers explicitly user-requested styling (`ComponentSpec.styleOverrides`) over\n * theme-resolved styles, producing the `styles` a component actually receives.\n *\n * This is what lets \"make the charts blue\" be honored without a color literal ever\n * entering generated code: the request is carried as spec data and resolved here,\n * above the org theme, so the component keeps reading `styles.chartPalette` and\n * friends. Of the color slots only visualization ones are merged — the override\n * contract deliberately has no background/text/border slots, since those cannot be\n * flipped for dark mode without derived per-mode variants.\n *\n * `fontScale` is the one non-color slot, and it rescales the `typography.fontSize`\n * ladder in place. Doing it here rather than in the generator is what makes a type\n * scale hold: every token moves at once, so text inside registry components and\n * third-party libraries scales along with the generated markup.\n *\n * Returns `base` unchanged when there are no overrides, and never mutates `base`.\n *\n * @param base theme-resolved styles (from `BuildStylesFromTheme()` or `SetupStyles()`)\n * @param overrides the spec's `styleOverrides`, if any\n */\nexport function ApplyStyleOverrides<T extends Partial<ComponentStyles>>(base: T, overrides?: StyleOverrides): T {\n  if (!overrides) {\n    return base;\n  }\n\n  const hasChartPalette = Array.isArray(overrides.chartPalette) && overrides.chartPalette.length > 0;\n  // A ramp needs at least two stops to interpolate between.\n  const hasSequential = Array.isArray(overrides.sequentialScale) && overrides.sequentialScale.length > 1;\n  const hasDiverging = !!overrides.divergingScale?.low && !!overrides.divergingScale?.high;\n  // 'normal' — and any unrecognized value — leaves the ladder alone.\n  const fontFactor = overrides.fontScale ? FONT_SCALE_FACTOR[overrides.fontScale] : undefined;\n  const hasFontScale = !!fontFactor && !!base.typography?.fontSize;\n\n  if (!hasChartPalette && !hasSequential && !hasDiverging && !hasFontScale) {\n    return base;\n  }\n\n  return {\n    ...base,\n    ...(hasChartPalette ? { chartPalette: overrides.chartPalette } : {}),\n    ...(hasSequential ? { sequentialScale: overrides.sequentialScale } : {}),\n    ...(hasDiverging ? { divergingScale: overrides.divergingScale } : {}),\n    ...(hasFontScale\n      ? { typography: { ...base.typography!, fontSize: scaleFontSizes(base.typography!.fontSize, fontFactor!) } }\n      : {}),\n  };\n}"]}

package/package.json

@@ -1,20 +1,10 @@
 {
   "name": "@memberjunction/react-runtime",
-  "version": "5.51.0",
+  "version": "6.1.0-edge.1",
   "description": "Platform-agnostic React component runtime for MemberJunction. Provides core compilation, registry, and execution capabilities for React components in any JavaScript environment.",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "npm run build:node && npm run build:umd",
-    "build:node": "tsc && tsc-alias -f",
-    "build:umd": "webpack --config webpack.umd.config.cjs",
-    "build:clean": "rimraf ./dist && npm run build",
-    "watch": "tsc -w",
-    "patchVersion": "npm version patch",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "keywords": [
     "memberjunction",
     "react",
@@ -29,11 +19,11 @@
   },
   "homepage": "https://github.com/MemberJunction/MJ#readme",
   "dependencies": {
-    "@memberjunction/core": "5.51.0",
-    "@memberjunction/global": "5.51.0",
-    "@memberjunction/interactive-component-types": "5.51.0",
-    "@memberjunction/core-entities": "5.51.0",
-    "@memberjunction/graphql-dataprovider": "5.51.0",
+    "@memberjunction/core": "6.1.0-edge.1",
+    "@memberjunction/global": "6.1.0-edge.1",
+    "@memberjunction/interactive-component-types": "6.1.0-edge.1",
+    "@memberjunction/core-entities": "6.1.0-edge.1",
+    "@memberjunction/graphql-dataprovider": "6.1.0-edge.1",
     "@babel/standalone": "^7.29.1",
     "rxjs": "^7.8.2"
   },
@@ -52,5 +42,15 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/MemberJunction/MJ"
+  },
+  "scripts": {
+    "build": "npm run build:node && npm run build:umd",
+    "build:node": "tsc && tsc-alias -f",
+    "build:umd": "webpack --config webpack.umd.config.cjs",
+    "build:clean": "rimraf ./dist && npm run build",
+    "watch": "tsc -w",
+    "patchVersion": "npm version patch",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}

package/src/__tests__/component-styles.test.ts

@@ -0,0 +1,252 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { ComponentStyles, StyleOverrides } from '@memberjunction/interactive-component-types';
+import { SetupStyles, BuildStylesFromTheme, ApplyStyleOverrides } from '../utilities/component-styles';
+
+/**
+ * Installs a `getComputedStyle` stub resolving the given token map, so the theme
+ * bridge can be exercised in the node test environment (which has no DOM).
+ * Returns a throwaway element to pass as the bridge's `root`.
+ */
+function stubTheme(tokens: Record<string, string>): Element {
+  (globalThis as Record<string, unknown>).getComputedStyle = () => ({
+    getPropertyValue: (token: string) => tokens[token] ?? '',
+  });
+  return {} as Element;
+}
+
+afterEach(() => {
+  delete (globalThis as Record<string, unknown>).getComputedStyle;
+});
+
+describe('SetupStyles visualization defaults', () => {
+  it('ships a multi-stop sequential ramp', () => {
+    const scale = SetupStyles().sequentialScale;
+    expect(scale && scale.length).toBeGreaterThan(1);
+  });
+
+  it('ships a diverging ramp with both endpoints', () => {
+    const diverging = SetupStyles().divergingScale;
+    expect(diverging?.low).toBeTruthy();
+    expect(diverging?.high).toBeTruthy();
+  });
+});
+
+describe('SetupStyles overlay and status defaults', () => {
+  it('ships an overlay scrim and status text/border colors', () => {
+    const colors = SetupStyles().colors;
+    expect(colors.overlay).toBeTruthy();
+    for (const key of [
+      'successText', 'successBorder',
+      'warningText', 'warningBorder',
+      'errorText', 'errorBorder',
+      'infoText', 'infoBorder',
+    ]) {
+      expect(colors[key]).toBeTruthy();
+    }
+  });
+});
+
+describe('BuildStylesFromTheme visualization ramps', () => {
+  it('populates both ramps from --mj-viz-seq-* / --mj-viz-div-* tokens', () => {
+    const root = stubTheme({
+      '--mj-viz-seq-1': '#eef', '--mj-viz-seq-2': '#99f', '--mj-viz-seq-3': '#22a',
+      '--mj-viz-div-low': '#c00', '--mj-viz-div-mid': '#eee', '--mj-viz-div-high': '#0c0',
+    });
+
+    const styles = BuildStylesFromTheme(root);
+
+    expect(styles.sequentialScale).toEqual(['#eef', '#99f', '#22a']);
+    expect(styles.divergingScale).toEqual({ low: '#c00', mid: '#eee', high: '#0c0' });
+  });
+
+  it('omits mid when the theme does not define it', () => {
+    const root = stubTheme({ '--mj-viz-div-low': '#c00', '--mj-viz-div-high': '#0c0' });
+
+    expect(BuildStylesFromTheme(root).divergingScale).toEqual({ low: '#c00', high: '#0c0' });
+  });
+
+  it('keeps the default ramp when only one sequential stop resolves', () => {
+    // A single stop cannot be interpolated, so a partially-themed page should
+    // fall back rather than render a one-color "ramp".
+    const root = stubTheme({ '--mj-viz-seq-1': '#eef' });
+
+    expect(BuildStylesFromTheme(root).sequentialScale).toEqual(SetupStyles().sequentialScale);
+  });
+
+  it('keeps the default diverging ramp when an endpoint is missing', () => {
+    const root = stubTheme({ '--mj-viz-div-low': '#c00' });
+
+    expect(BuildStylesFromTheme(root).divergingScale).toEqual(SetupStyles().divergingScale);
+  });
+});
+
+describe('BuildStylesFromTheme overlay and status bridging', () => {
+  it('bridges the overlay scrim from --mj-bg-overlay', () => {
+    const root = stubTheme({ '--mj-bg-overlay': 'rgba(15, 23, 42, 0.5)' });
+
+    expect(BuildStylesFromTheme(root).colors.overlay).toBe('rgba(15, 23, 42, 0.5)');
+  });
+
+  it('bridges status text and border tokens', () => {
+    const root = stubTheme({
+      '--mj-status-success-text': '#0a7d43',
+      '--mj-status-error-border': '#f5c2c0',
+    });
+
+    const styles = BuildStylesFromTheme(root);
+
+    expect(styles.colors.successText).toBe('#0a7d43');
+    expect(styles.colors.errorBorder).toBe('#f5c2c0');
+  });
+
+  it('bridges the secondary palette from --mj-brand-secondary tokens', () => {
+    const root = stubTheme({
+      '--mj-brand-secondary': '#092340',
+      '--mj-brand-secondary-hover': '#004a71',
+    });
+
+    const styles = BuildStylesFromTheme(root);
+
+    expect(styles.colors.secondary).toBe('#092340');
+    expect(styles.colors.secondaryHover).toBe('#004a71');
+  });
+
+  it('keeps the defaults when the tokens are absent', () => {
+    const root = stubTheme({});
+    const styles = BuildStylesFromTheme(root);
+    const defaults = SetupStyles().colors;
+
+    expect(styles.colors.overlay).toBe(defaults.overlay);
+    expect(styles.colors.warningText).toBe(defaults.warningText);
+  });
+});
+
+describe('ApplyStyleOverrides', () => {
+  const base = (): ComponentStyles => SetupStyles();
+  const userRequest = (partial: Partial<StyleOverrides>): StyleOverrides =>
+    ({ ...partial, source: 'user-request' });
+
+  it('returns the base untouched when there are no overrides', () => {
+    const input = base();
+    expect(ApplyStyleOverrides(input, undefined)).toBe(input);
+  });
+
+  it('returns the base untouched when no slot carries a usable value', () => {
+    const input = base();
+    expect(ApplyStyleOverrides(input, userRequest({ chartPalette: [] }))).toBe(input);
+  });
+
+  it('replaces the chart palette with the requested colors', () => {
+    const styles = ApplyStyleOverrides(base(), userRequest({ chartPalette: ['#00f', '#fc0'] }));
+    expect(styles.chartPalette).toEqual(['#00f', '#fc0']);
+  });
+
+  it('replaces the diverging ramp for a red-to-green request', () => {
+    const styles = ApplyStyleOverrides(base(), userRequest({ divergingScale: { low: '#f00', high: '#0f0' } }));
+    expect(styles.divergingScale).toEqual({ low: '#f00', high: '#0f0' });
+  });
+
+  it('ignores a diverging override missing an endpoint', () => {
+    const overrides = userRequest({ divergingScale: { low: '#f00', high: '' } });
+    expect(ApplyStyleOverrides(base(), overrides).divergingScale).toEqual(SetupStyles().divergingScale);
+  });
+
+  it('ignores a single-stop sequential override', () => {
+    const styles = ApplyStyleOverrides(base(), userRequest({ sequentialScale: ['#00f'] }));
+    expect(styles.sequentialScale).toEqual(SetupStyles().sequentialScale);
+  });
+
+  it('leaves non-visualization tokens alone', () => {
+    const input = base();
+    const styles = ApplyStyleOverrides(input, userRequest({ chartPalette: ['#00f'] }));
+    expect(styles.colors.primary).toBe(input.colors.primary);
+    expect(styles.typography.fontFamily).toBe(input.typography.fontFamily);
+  });
+
+  it('does not mutate the base styles', () => {
+    const input = base();
+    const original = [...(input.chartPalette ?? [])];
+    ApplyStyleOverrides(input, userRequest({ chartPalette: ['#00f', '#fc0'] }));
+    expect(input.chartPalette).toEqual(original);
+  });
+
+  it('applies overrides over theme-bridged styles, not just defaults', () => {
+    const root = stubTheme({ '--mj-viz-1': '#111', '--mj-viz-2': '#222' });
+    const themed = BuildStylesFromTheme(root);
+
+    const styles = ApplyStyleOverrides(themed, userRequest({ chartPalette: ['#00f'] }));
+
+    expect(styles.chartPalette).toEqual(['#00f']);
+    // The theme still supplies everything the user did not ask about.
+    expect(styles.colors.primary).toBe(themed.colors.primary);
+  });
+});
+
+describe('ApplyStyleOverrides fontScale', () => {
+  const orgDefault = (partial: Partial<StyleOverrides>): StyleOverrides =>
+    ({ ...partial, source: 'organization-default' });
+
+  it('scales every fontSize token up together for large', () => {
+    // The point of doing this here rather than in the generator: one factor, whole ladder.
+    const styles = ApplyStyleOverrides(SetupStyles(), orgDefault({ fontScale: 'large' }));
+    expect(styles.typography.fontSize).toEqual({
+      xs: '14px', sm: '15px', md: '18px', lg: '20px', xl: '25px', xxl: '30px', xxxl: '40px',
+    });
+  });
+
+  it('scales every fontSize token down together for small', () => {
+    const styles = ApplyStyleOverrides(SetupStyles(), orgDefault({ fontScale: 'small' }));
+    expect(styles.typography.fontSize).toEqual({
+      xs: '10px', sm: '11px', md: '12px', lg: '14px', xl: '18px', xxl: '21px', xxxl: '28px',
+    });
+  });
+
+  it('treats normal as no override at all', () => {
+    const input = SetupStyles();
+    expect(ApplyStyleOverrides(input, orgDefault({ fontScale: 'normal' }))).toBe(input);
+  });
+
+  it('ignores an unrecognized scale rather than guessing a factor', () => {
+    const input = SetupStyles();
+    const overrides = orgDefault({ fontScale: 'huge' as unknown as 'large' });
+    expect(ApplyStyleOverrides(input, overrides)).toBe(input);
+  });
+
+  it('holds a floor so small cannot render text illegible', () => {
+    const base = SetupStyles();
+    base.typography.fontSize = { xs: '9px', sm: '12px', md: '14px', lg: '16px', xl: '20px' };
+    const styles = ApplyStyleOverrides(base, orgDefault({ fontScale: 'small' }));
+    expect(styles.typography.fontSize.xs).toBe('10px');
+  });
+
+  it('leaves sizes not expressed in px alone rather than guessing', () => {
+    const base = SetupStyles();
+    base.typography.fontSize = { sm: '0.875rem', md: '14px', lg: 'clamp(1rem, 2vw, 2rem)', xl: '20px' };
+    const styles = ApplyStyleOverrides(base, orgDefault({ fontScale: 'large' }));
+    expect(styles.typography.fontSize).toEqual({
+      sm: '0.875rem', md: '18px', lg: 'clamp(1rem, 2vw, 2rem)', xl: '25px',
+    });
+  });
+
+  it('keeps fontFamily, weights, spacing and colors untouched', () => {
+    const input = SetupStyles();
+    const styles = ApplyStyleOverrides(input, orgDefault({ fontScale: 'large' }));
+    expect(styles.typography.fontFamily).toBe(input.typography.fontFamily);
+    expect(styles.typography.fontWeight).toEqual(input.typography.fontWeight);
+    expect(styles.spacing).toEqual(input.spacing);
+    expect(styles.colors.primary).toBe(input.colors.primary);
+  });
+
+  it('does not mutate the base ladder', () => {
+    const input = SetupStyles();
+    ApplyStyleOverrides(input, orgDefault({ fontScale: 'large' }));
+    expect(input.typography.fontSize.md).toBe('14px');
+  });
+
+  it('combines with a color override in one pass', () => {
+    const styles = ApplyStyleOverrides(
+      SetupStyles(), orgDefault({ fontScale: 'small', chartPalette: ['#00f', '#fc0'] }));
+    expect(styles.chartPalette).toEqual(['#00f', '#fc0']);
+    expect(styles.typography.fontSize.md).toBe('12px');
+  });
+});

package/src/index.ts

@@ -89,7 +89,8 @@ export {
 export {
   SetupStyles,
   createDefaultComponentStyles,
-  BuildStylesFromTheme
+  BuildStylesFromTheme,
+  ApplyStyleOverrides
 } from './utilities/component-styles';
 
 export {