@memberjunction/react-runtime 5.48.0 → 5.50.0

package/dist/utilities/component-library-theming.d.ts

@@ -0,0 +1,6 @@
+import { ComponentStyles } from '@memberjunction/interactive-component-types';
+export declare function buildAntdThemeConfig(styles: Partial<ComponentStyles> | undefined, antdLib: unknown): Record<string, unknown>;
+export declare function wrapWithLibraryThemeProviders(React: {
+    createElement: (type: unknown, props: unknown, ...children: unknown[]) => unknown;
+}, element: unknown, libraries: Record<string, unknown> | undefined, styles: Partial<ComponentStyles> | undefined): unknown;
+//# sourceMappingURL=component-library-theming.d.ts.map

package/dist/utilities/component-library-theming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-library-theming.d.ts","sourceRoot":"","sources":["../../src/utilities/component-library-theming.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAuC9E,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,SAAS,EAC5C,OAAO,EAAE,OAAO,GACf,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAgCzB;AAcD,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE;IAAE,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;CAAE,EAC5F,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAC9C,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,SAAS,GAC3C,OAAO,CAaT"}

package/dist/utilities/component-library-theming.js

@@ -0,0 +1,84 @@
+import { unwrapLibraryComponent } from './component-unwrapper.js';
+function colorLuminance(color) {
+    if (!color)
+        return 1;
+    const s = String(color).trim();
+    let r, g, b;
+    const hex = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(s);
+    if (hex) {
+        let h = hex[1];
+        if (h.length === 3)
+            h = h.split('').map((c) => c + c).join('');
+        const n = parseInt(h, 16);
+        r = (n >> 16) & 255;
+        g = (n >> 8) & 255;
+        b = n & 255;
+    }
+    else {
+        const m = /rgba?\(([^)]+)\)/i.exec(s);
+        if (!m)
+            return 1;
+        const p = m[1].split(',').map((x) => parseFloat(x));
+        r = p[0];
+        g = p[1];
+        b = p[2];
+        if ([r, g, b].some((v) => Number.isNaN(v)))
+            return 1;
+    }
+    return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+function radiusToNumber(radius) {
+    const raw = typeof radius === 'string' ? radius : (radius && (radius.md || radius.sm || radius.lg));
+    if (!raw)
+        return undefined;
+    const n = parseInt(String(raw), 10);
+    return Number.isNaN(n) ? undefined : n;
+}
+export function buildAntdThemeConfig(styles, antdLib) {
+    const colors = (styles?.colors || {});
+    const themeNS = antdLib ? unwrapLibraryComponent(antdLib, 'theme') : undefined;
+    const isDark = colorLuminance(colors['background']) < 0.5;
+    const token = {
+        colorPrimary: colors['primary'],
+        colorInfo: colors['info'] || colors['primary'],
+        colorSuccess: colors['success'],
+        colorWarning: colors['warning'],
+        colorError: colors['error'],
+        colorBgContainer: colors['surface'],
+        colorBgElevated: colors['surface'],
+        colorBgLayout: colors['background'],
+        colorText: colors['text'],
+        colorTextSecondary: colors['textSecondary'],
+        colorBorder: colors['border'],
+        colorBorderSecondary: colors['borderLight'] || colors['border'],
+        fontFamily: styles?.typography?.fontFamily,
+    };
+    const radius = radiusToNumber(styles?.borders?.radius);
+    if (radius !== undefined)
+        token['borderRadius'] = radius;
+    for (const k of Object.keys(token)) {
+        if (token[k] == null)
+            delete token[k];
+    }
+    const config = { token };
+    const algorithm = themeNS && (isDark ? themeNS.darkAlgorithm : themeNS.defaultAlgorithm);
+    if (algorithm) {
+        config['algorithm'] = algorithm;
+    }
+    return config;
+}
+export function wrapWithLibraryThemeProviders(React, element, libraries, styles) {
+    const antdLib = libraries?.['antd'];
+    if (!antdLib)
+        return element;
+    const ConfigProvider = unwrapLibraryComponent(antdLib, 'ConfigProvider');
+    if (!ConfigProvider)
+        return element;
+    try {
+        return React.createElement(ConfigProvider, { theme: buildAntdThemeConfig(styles, antdLib) }, element);
+    }
+    catch {
+        return element;
+    }
+}
+//# sourceMappingURL=component-library-theming.js.map

package/dist/utilities/component-library-theming.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-library-theming.js","sourceRoot":"","sources":["../../src/utilities/component-library-theming.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Auto-themes component libraries (Ant Design) from the MJ theme so\n * their built-in components inherit light/dark just like custom `styles.*` elements\n * do. Library components (antd `Table`, `Input`, `Select`, …) do not read `styles.*`\n * on their own — without their theme provider they render in the library's built-in\n * LIGHT theme even when the host is in dark mode. The host wraps the mounted React\n * tree once, and the provider's context flows to every library component below.\n *\n * TYPE-SAFETY NOTE (`unknown` usage): React and antd reach this module as UMD\n * globals loaded at runtime by the library loader — there are no compile-time\n * types for them in this package, and adding @types deps for runtime-loaded UMD\n * bundles would lie about the actual contract. `unknown` here is the narrow,\n * honest boundary type for those module surfaces (mirroring the existing\n * `unwrapLibraryComponent`); every access is funneled through the unwrapper or\n * an explicit shape check rather than blind property access. Do NOT widen these\n * to `any` — and do not treat this as precedent outside runtime-loaded UMD\n * boundaries (see the no-`any`/`unknown` rule in the root CLAUDE.md).\n * @module @memberjunction/react-runtime/utilities\n */\n\nimport { ComponentStyles } from '@memberjunction/interactive-component-types';\nimport { unwrapLibraryComponent } from './component-unwrapper';\n\n/** Relative luminance (0 = black, 1 = white) of a hex or rgb()/rgba() color; 1 if unparseable. */\nfunction colorLuminance(color: string | undefined): number {\n  if (!color) return 1;\n  const s = String(color).trim();\n  let r: number, g: number, b: number;\n  const hex = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(s);\n  if (hex) {\n    let h = hex[1];\n    if (h.length === 3) h = h.split('').map((c) => c + c).join('');\n    const n = parseInt(h, 16);\n    r = (n >> 16) & 255; g = (n >> 8) & 255; b = n & 255;\n  } else {\n    const m = /rgba?\\(([^)]+)\\)/i.exec(s);\n    if (!m) return 1;\n    const p = m[1].split(',').map((x) => parseFloat(x));\n    r = p[0]; g = p[1]; b = p[2];\n    if ([r, g, b].some((v) => Number.isNaN(v))) return 1;\n  }\n  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;\n}\n\n/** Parse a radius token (e.g. '8px' or a size map) into a number for antd's borderRadius. */\nfunction radiusToNumber(radius: ComponentStyles['borders']['radius'] | undefined): number | undefined {\n  const raw = typeof radius === 'string' ? radius : (radius && (radius.md || radius.sm || radius.lg));\n  if (!raw) return undefined;\n  const n = parseInt(String(raw), 10);\n  return Number.isNaN(n) ? undefined : n;\n}\n\n/**\n * Builds an Ant Design v5 `ConfigProvider` `theme` config from ComponentStyles:\n * maps the MJ color/typography tokens onto antd seed/map tokens and selects antd's\n * dark algorithm when the theme's background is dark. `antdLib` is the loaded antd\n * module (used only to read its `theme` algorithm namespace). Unmapped tokens are\n * omitted so antd falls back to its own defaults.\n */\nexport function buildAntdThemeConfig(\n  styles: Partial<ComponentStyles> | undefined,\n  antdLib: unknown,\n): Record<string, unknown> {\n  const colors = (styles?.colors || {}) as Record<string, string | undefined>;\n  const themeNS = antdLib ? unwrapLibraryComponent(antdLib, 'theme') : undefined;\n  const isDark = colorLuminance(colors['background']) < 0.5;\n\n  const token: Record<string, unknown> = {\n    colorPrimary: colors['primary'],\n    colorInfo: colors['info'] || colors['primary'],\n    colorSuccess: colors['success'],\n    colorWarning: colors['warning'],\n    colorError: colors['error'],\n    colorBgContainer: colors['surface'],\n    colorBgElevated: colors['surface'],\n    colorBgLayout: colors['background'],\n    colorText: colors['text'],\n    colorTextSecondary: colors['textSecondary'],\n    colorBorder: colors['border'],\n    colorBorderSecondary: colors['borderLight'] || colors['border'],\n    fontFamily: styles?.typography?.fontFamily,\n  };\n  const radius = radiusToNumber(styles?.borders?.radius);\n  if (radius !== undefined) token['borderRadius'] = radius;\n  for (const k of Object.keys(token)) {\n    if (token[k] == null) delete token[k];\n  }\n\n  const config: Record<string, unknown> = { token };\n  const algorithm = themeNS && (isDark ? themeNS.darkAlgorithm : themeNS.defaultAlgorithm);\n  if (algorithm) {\n    config['algorithm'] = algorithm;\n  }\n  return config;\n}\n\n/**\n * Wraps a React element in loaded component libraries' theme providers so their\n * built-in components inherit the MJ theme (including dark mode). Currently themes\n * Ant Design via `ConfigProvider` when the `antd` library is loaded; otherwise\n * returns the element unchanged. Because `ConfigProvider` supplies React context,\n * one wrap at the root themes every antd component in the subtree — including those\n * inside child components. `libraries` is keyed by global-variable name (e.g. `antd`).\n *\n * A generated component that also wraps its own `ConfigProvider` simply nests under\n * this one (antd merges nested configs), so this is safe alongside component-level\n * theming.\n */\nexport function wrapWithLibraryThemeProviders(\n  React: { createElement: (type: unknown, props: unknown, ...children: unknown[]) => unknown },\n  element: unknown,\n  libraries: Record<string, unknown> | undefined,\n  styles: Partial<ComponentStyles> | undefined,\n): unknown {\n  const antdLib = libraries?.['antd'];\n  if (!antdLib) return element;\n\n  const ConfigProvider = unwrapLibraryComponent(antdLib, 'ConfigProvider');\n  if (!ConfigProvider) return element;\n\n  try {\n    return React.createElement(ConfigProvider, { theme: buildAntdThemeConfig(styles, antdLib) }, element);\n  } catch {\n    // Never let theming wrap break rendering — fall back to the unwrapped element.\n    return element;\n  }\n}\n"]}

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

@@ -1,4 +1,5 @@
 import { ComponentStyles } from '@memberjunction/interactive-component-types';
 export declare function SetupStyles(): ComponentStyles;
 export declare const createDefaultComponentStyles: typeof SetupStyles;
+export declare function BuildStylesFromTheme(root?: Element): ComponentStyles;
 //# 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,CAyG7C;AAGD,eAAO,MAAM,4BAA4B,oBAAc,CAAC"}
+{"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"}

package/dist/utilities/component-styles.js

@@ -3,6 +3,7 @@ export function SetupStyles() {
         colors: {
             primary: '#5B4FE9',
             primaryHover: '#4940D4',
+            primaryActive: '#3E37B8',
             primaryLight: '#E8E6FF',
             secondary: '#64748B',
             secondaryHover: '#475569',
@@ -21,6 +22,8 @@ export function SetupStyles() {
             textSecondary: '#64748B',
             textTertiary: '#94A3B8',
             textInverse: '#FFFFFF',
+            link: '#5B4FE9',
+            linkHover: '#4940D4',
             border: '#E2E8F0',
             borderLight: '#F1F5F9',
             borderFocus: '#5B4FE9',
@@ -87,8 +90,65 @@ export function SetupStyles() {
             normal: '250ms ease-in-out',
             slow: '350ms ease-in-out',
         },
-        overflow: 'auto'
+        overflow: 'auto',
+        chartPalette: [
+            '#2196F3', '#4CAF50', '#FF9800', '#E91E63', '#9C27B0',
+            '#00BCD4', '#F44336', '#8BC34A', '#FF5722', '#3F51B5',
+        ],
     };
 }
 export const createDefaultComponentStyles = SetupStyles;
+const THEME_COLOR_TOKEN_MAP = {
+    primary: '--mj-brand-primary',
+    primaryHover: '--mj-brand-primary-hover',
+    primaryActive: '--mj-brand-primary-active',
+    primaryLight: '--mj-brand-primary-light',
+    success: '--mj-status-success',
+    successLight: '--mj-status-success-bg',
+    warning: '--mj-status-warning',
+    warningLight: '--mj-status-warning-bg',
+    error: '--mj-status-error',
+    errorLight: '--mj-status-error-bg',
+    info: '--mj-status-info',
+    infoLight: '--mj-status-info-bg',
+    background: '--mj-bg-page',
+    surface: '--mj-bg-surface',
+    surfaceHover: '--mj-bg-surface-hover',
+    text: '--mj-text-primary',
+    textSecondary: '--mj-text-secondary',
+    textTertiary: '--mj-text-muted',
+    textInverse: '--mj-text-inverse',
+    link: '--mj-text-link',
+    linkHover: '--mj-text-link-hover',
+    border: '--mj-border-default',
+    borderLight: '--mj-border-subtle',
+    borderFocus: '--mj-border-focus',
+};
+const VIZ_TOKEN_COUNT = 10;
+export function BuildStylesFromTheme(root) {
+    const base = SetupStyles();
+    const el = root ?? (typeof document !== 'undefined' ? document.documentElement : undefined);
+    if (!el || typeof getComputedStyle === 'undefined') {
+        return base;
+    }
+    const cs = getComputedStyle(el);
+    const read = (token) => cs.getPropertyValue(token).trim();
+    for (const [path, token] of Object.entries(THEME_COLOR_TOKEN_MAP)) {
+        const value = read(token);
+        if (value) {
+            base.colors[path] = value;
+        }
+    }
+    const palette = [];
+    for (let i = 1; i <= VIZ_TOKEN_COUNT; i++) {
+        const value = read(`--mj-viz-${i}`);
+        if (value) {
+            palette.push(value);
+        }
+    }
+    if (palette.length > 0) {
+        base.chartPalette = palette;
+    }
+    return base;
+}
 //# 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":"AAYA,MAAM,UAAU,WAAW;IAEzB,OAAO;QACL,MAAM,EAAE;YAEN,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YACvB,YAAY,EAAE,SAAS;YAGvB,SAAS,EAAE,SAAS;YACpB,cAAc,EAAE,SAAS;YAGzB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YACvB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,SAAS;YACrB,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,SAAS;YAGpB,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;YAGvB,IAAI,EAAE,SAAS;YACf,aAAa,EAAE,SAAS;YACxB,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,SAAS;YAGtB,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,SAAS;YACtB,WAAW,EAAE,SAAS;YAGtB,MAAM,EAAE,qBAAqB;YAC7B,YAAY,EAAE,oBAAoB;YAClC,WAAW,EAAE,qBAAqB;SACnC;QACD,OAAO,EAAE;YACP,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;SACb;QACD,UAAU,EAAE;YACV,UAAU,EAAE,4EAA4E;YACxF,QAAQ,EAAE;gBACR,EAAE,EAAE,MAAM;gBACV,EAAE,EAAE,MAAM;gBACV,EAAE,EAAE,MAAM;gBACV,EAAE,EAAE,MAAM;gBACV,EAAE,EAAE,MAAM;gBACV,GAAG,EAAE,MAAM;gBACX,IAAI,EAAE,MAAM;aACb;YACD,UAAU,EAAE;gBACV,KAAK,EAAE,KAAK;gBACZ,OAAO,EAAE,KAAK;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACZ;YACD,UAAU,EAAE;gBACV,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,KAAK;gBACb,OAAO,EAAE,MAAM;aAChB;SACF;QACD,OAAO,EAAE;YACP,MAAM,EAAE;gBACN,EAAE,EAAE,KAAK;gBACT,EAAE,EAAE,KAAK;gBACT,EAAE,EAAE,MAAM;gBACV,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,QAAQ;aACf;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,KAAK;gBACb,KAAK,EAAE,KAAK;aACb;SACF;QACD,OAAO,EAAE;YACP,EAAE,EAAE,iCAAiC;YACrC,EAAE,EAAE,uEAAuE;YAC3E,EAAE,EAAE,yEAAyE;YAC7E,EAAE,EAAE,2EAA2E;YAC/E,KAAK,EAAE,uCAAuC;SAC/C;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,MAAM,EAAE,mBAAmB;YAC3B,IAAI,EAAE,mBAAmB;SAC1B;QACD,QAAQ,EAAE,MAAM;KACjB,CAAA;AACH,CAAC;AAGD,MAAM,CAAC,MAAM,4BAA4B,GAAG,WAAW,CAAC","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      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      // 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  }\n}\n\n// Also export with the original name for backward compatibility\nexport const createDefaultComponentStyles = SetupStyles;"]}
+{"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}"]}

package/dist/utilities/index.d.ts

@@ -1,4 +1,5 @@
 export * from './component-styles.js';
+export * from './component-library-theming.js';
 export * from './standard-libraries.js';
 export * from './library-loader.js';
 export * from './library-registry.js';

package/dist/utilities/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAKA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAKA,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}

package/dist/utilities/index.js

@@ -1,4 +1,5 @@
 export * from './component-styles.js';
+export * from './component-library-theming.js';
 export * from './standard-libraries.js';
 export * from './library-loader.js';
 export * from './library-registry.js';

package/dist/utilities/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAKA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["/**\n * @fileoverview Utilities module exports\n * @module @memberjunction/react-runtime/utilities\n */\n\nexport * from './component-styles';\nexport * from './standard-libraries';\nexport * from './library-loader';\nexport * from './library-registry';\nexport * from './library-dependency-resolver';\nexport * from './component-error-analyzer';\nexport * from './resource-manager';\nexport * from './cache-manager';\nexport * from './component-unwrapper';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utilities/index.ts"],"names":[],"mappings":"AAKA,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["/**\n * @fileoverview Utilities module exports\n * @module @memberjunction/react-runtime/utilities\n */\n\nexport * from './component-styles';\nexport * from './component-library-theming';\nexport * from './standard-libraries';\nexport * from './library-loader';\nexport * from './library-registry';\nexport * from './library-dependency-resolver';\nexport * from './component-error-analyzer';\nexport * from './resource-manager';\nexport * from './cache-manager';\nexport * from './component-unwrapper';"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/react-runtime",
-  "version": "5.48.0",
+  "version": "5.50.0",
   "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",
@@ -29,11 +29,11 @@
   },
   "homepage": "https://github.com/MemberJunction/MJ#readme",
   "dependencies": {
-    "@memberjunction/core": "5.48.0",
-    "@memberjunction/global": "5.48.0",
-    "@memberjunction/interactive-component-types": "5.48.0",
-    "@memberjunction/core-entities": "5.48.0",
-    "@memberjunction/graphql-dataprovider": "5.48.0",
+    "@memberjunction/core": "5.50.0",
+    "@memberjunction/global": "5.50.0",
+    "@memberjunction/interactive-component-types": "5.50.0",
+    "@memberjunction/core-entities": "5.50.0",
+    "@memberjunction/graphql-dataprovider": "5.50.0",
     "@babel/standalone": "^7.29.1",
     "rxjs": "^7.8.2"
   },

package/src/index.ts

@@ -86,11 +86,17 @@ export {
 
 // Export utilities
 
-export { 
+export {
   SetupStyles,
-  createDefaultComponentStyles 
+  createDefaultComponentStyles,
+  BuildStylesFromTheme
 } from './utilities/component-styles';
 
+export {
+  buildAntdThemeConfig,
+  wrapWithLibraryThemeProviders
+} from './utilities/component-library-theming';
+
 export {
   StandardLibraries,
   StandardLibraryManager,

package/src/utilities/component-library-theming.ts

@@ -0,0 +1,127 @@
+/**
+ * @fileoverview Auto-themes component libraries (Ant Design) from the MJ theme so
+ * their built-in components inherit light/dark just like custom `styles.*` elements
+ * do. Library components (antd `Table`, `Input`, `Select`, …) do not read `styles.*`
+ * on their own — without their theme provider they render in the library's built-in
+ * LIGHT theme even when the host is in dark mode. The host wraps the mounted React
+ * tree once, and the provider's context flows to every library component below.
+ *
+ * TYPE-SAFETY NOTE (`unknown` usage): React and antd reach this module as UMD
+ * globals loaded at runtime by the library loader — there are no compile-time
+ * types for them in this package, and adding @types deps for runtime-loaded UMD
+ * bundles would lie about the actual contract. `unknown` here is the narrow,
+ * honest boundary type for those module surfaces (mirroring the existing
+ * `unwrapLibraryComponent`); every access is funneled through the unwrapper or
+ * an explicit shape check rather than blind property access. Do NOT widen these
+ * to `any` — and do not treat this as precedent outside runtime-loaded UMD
+ * boundaries (see the no-`any`/`unknown` rule in the root CLAUDE.md).
+ * @module @memberjunction/react-runtime/utilities
+ */
+
+import { ComponentStyles } from '@memberjunction/interactive-component-types';
+import { unwrapLibraryComponent } from './component-unwrapper';
+
+/** Relative luminance (0 = black, 1 = white) of a hex or rgb()/rgba() color; 1 if unparseable. */
+function colorLuminance(color: string | undefined): number {
+  if (!color) return 1;
+  const s = String(color).trim();
+  let r: number, g: number, b: number;
+  const hex = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(s);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+    const n = parseInt(h, 16);
+    r = (n >> 16) & 255; g = (n >> 8) & 255; b = n & 255;
+  } else {
+    const m = /rgba?\(([^)]+)\)/i.exec(s);
+    if (!m) return 1;
+    const p = m[1].split(',').map((x) => parseFloat(x));
+    r = p[0]; g = p[1]; b = p[2];
+    if ([r, g, b].some((v) => Number.isNaN(v))) return 1;
+  }
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+
+/** Parse a radius token (e.g. '8px' or a size map) into a number for antd's borderRadius. */
+function radiusToNumber(radius: ComponentStyles['borders']['radius'] | undefined): number | undefined {
+  const raw = typeof radius === 'string' ? radius : (radius && (radius.md || radius.sm || radius.lg));
+  if (!raw) return undefined;
+  const n = parseInt(String(raw), 10);
+  return Number.isNaN(n) ? undefined : n;
+}
+
+/**
+ * Builds an Ant Design v5 `ConfigProvider` `theme` config from ComponentStyles:
+ * maps the MJ color/typography tokens onto antd seed/map tokens and selects antd's
+ * dark algorithm when the theme's background is dark. `antdLib` is the loaded antd
+ * module (used only to read its `theme` algorithm namespace). Unmapped tokens are
+ * omitted so antd falls back to its own defaults.
+ */
+export function buildAntdThemeConfig(
+  styles: Partial<ComponentStyles> | undefined,
+  antdLib: unknown,
+): Record<string, unknown> {
+  const colors = (styles?.colors || {}) as Record<string, string | undefined>;
+  const themeNS = antdLib ? unwrapLibraryComponent(antdLib, 'theme') : undefined;
+  const isDark = colorLuminance(colors['background']) < 0.5;
+
+  const token: Record<string, unknown> = {
+    colorPrimary: colors['primary'],
+    colorInfo: colors['info'] || colors['primary'],
+    colorSuccess: colors['success'],
+    colorWarning: colors['warning'],
+    colorError: colors['error'],
+    colorBgContainer: colors['surface'],
+    colorBgElevated: colors['surface'],
+    colorBgLayout: colors['background'],
+    colorText: colors['text'],
+    colorTextSecondary: colors['textSecondary'],
+    colorBorder: colors['border'],
+    colorBorderSecondary: colors['borderLight'] || colors['border'],
+    fontFamily: styles?.typography?.fontFamily,
+  };
+  const radius = radiusToNumber(styles?.borders?.radius);
+  if (radius !== undefined) token['borderRadius'] = radius;
+  for (const k of Object.keys(token)) {
+    if (token[k] == null) delete token[k];
+  }
+
+  const config: Record<string, unknown> = { token };
+  const algorithm = themeNS && (isDark ? themeNS.darkAlgorithm : themeNS.defaultAlgorithm);
+  if (algorithm) {
+    config['algorithm'] = algorithm;
+  }
+  return config;
+}
+
+/**
+ * Wraps a React element in loaded component libraries' theme providers so their
+ * built-in components inherit the MJ theme (including dark mode). Currently themes
+ * Ant Design via `ConfigProvider` when the `antd` library is loaded; otherwise
+ * returns the element unchanged. Because `ConfigProvider` supplies React context,
+ * one wrap at the root themes every antd component in the subtree — including those
+ * inside child components. `libraries` is keyed by global-variable name (e.g. `antd`).
+ *
+ * A generated component that also wraps its own `ConfigProvider` simply nests under
+ * this one (antd merges nested configs), so this is safe alongside component-level
+ * theming.
+ */
+export function wrapWithLibraryThemeProviders(
+  React: { createElement: (type: unknown, props: unknown, ...children: unknown[]) => unknown },
+  element: unknown,
+  libraries: Record<string, unknown> | undefined,
+  styles: Partial<ComponentStyles> | undefined,
+): unknown {
+  const antdLib = libraries?.['antd'];
+  if (!antdLib) return element;
+
+  const ConfigProvider = unwrapLibraryComponent(antdLib, 'ConfigProvider');
+  if (!ConfigProvider) return element;
+
+  try {
+    return React.createElement(ConfigProvider, { theme: buildAntdThemeConfig(styles, antdLib) }, element);
+  } catch {
+    // Never let theming wrap break rendering — fall back to the unwrapped element.
+    return element;
+  }
+}

package/src/utilities/component-styles.ts

@@ -17,8 +17,9 @@ export function SetupStyles(): ComponentStyles {
       // Primary colors - modern purple/blue gradient feel
       primary: '#5B4FE9',
       primaryHover: '#4940D4',
+      primaryActive: '#3E37B8',
       primaryLight: '#E8E6FF',
-      
+
       // Secondary colors - sophisticated gray
       secondary: '#64748B',
       secondaryHover: '#475569',
@@ -43,7 +44,11 @@ export function SetupStyles(): ComponentStyles {
       textSecondary: '#64748B',
       textTertiary: '#94A3B8',
       textInverse: '#FFFFFF',
-      
+
+      // Link colors
+      link: '#5B4FE9',
+      linkHover: '#4940D4',
+
       // Border colors
       border: '#E2E8F0',
       borderLight: '#F1F5F9',
@@ -113,9 +118,103 @@ export function SetupStyles(): ComponentStyles {
       normal: '250ms ease-in-out',
       slow: '350ms ease-in-out',
     },
-    overflow: 'auto' // Default overflow style        
+    overflow: 'auto', // Default overflow style
+    // Default categorical palette for multi-series charts. Overridden per-theme
+    // from the host's `--mj-viz-*` tokens by BuildStylesFromTheme().
+    chartPalette: [
+      '#2196F3', '#4CAF50', '#FF9800', '#E91E63', '#9C27B0',
+      '#00BCD4', '#F44336', '#8BC34A', '#FF5722', '#3F51B5',
+    ],
   }
 }
 
 // Also export with the original name for backward compatibility
-export const createDefaultComponentStyles = SetupStyles;
+export const createDefaultComponentStyles = SetupStyles;
+
+/**
+ * The `--mj-*` semantic token → `ComponentStyles` mapping used by the theme bridge.
+ * Keys are ComponentStyles color paths; values are the CSS custom property to read.
+ * Only theme-defining tokens with a clear semantic equivalent are mapped; every
+ * other field keeps its `SetupStyles()` default.
+ */
+const THEME_COLOR_TOKEN_MAP: Record<string, string> = {
+  // Brand / primary + interactive states
+  primary: '--mj-brand-primary',
+  primaryHover: '--mj-brand-primary-hover',
+  primaryActive: '--mj-brand-primary-active',
+  primaryLight: '--mj-brand-primary-light',
+  // Status
+  success: '--mj-status-success',
+  successLight: '--mj-status-success-bg',
+  warning: '--mj-status-warning',
+  warningLight: '--mj-status-warning-bg',
+  error: '--mj-status-error',
+  errorLight: '--mj-status-error-bg',
+  info: '--mj-status-info',
+  infoLight: '--mj-status-info-bg',
+  // Surfaces (MJ: page = tinted, surface = elevated/white in light mode)
+  background: '--mj-bg-page',
+  surface: '--mj-bg-surface',
+  surfaceHover: '--mj-bg-surface-hover',
+  // Text
+  text: '--mj-text-primary',
+  textSecondary: '--mj-text-secondary',
+  textTertiary: '--mj-text-muted',
+  textInverse: '--mj-text-inverse',
+  // Links
+  link: '--mj-text-link',
+  linkHover: '--mj-text-link-hover',
+  // Borders / focus
+  border: '--mj-border-default',
+  borderLight: '--mj-border-subtle',
+  borderFocus: '--mj-border-focus',
+};
+
+/** Number of `--mj-viz-N` categorical tokens the bridge probes for `chartPalette`. */
+const VIZ_TOKEN_COUNT = 10;
+
+/**
+ * Reads the live MJ theme (`--mj-*` custom properties on the document root) and
+ * layers it over `SetupStyles()`, producing a `ComponentStyles` that follows the
+ * host's active theme — including dark mode and interactive-state (hover/active/
+ * focus) families — instead of the frozen default palette. This is the Phase 1
+ * theme bridge that gives generated components shell↔content cohesion.
+ *
+ * DOM-guarded: in non-DOM environments (Node test harness, SSR) there is no
+ * computed theme to read, so it returns `SetupStyles()` unchanged. Any individual
+ * token that is absent falls back to its `SetupStyles()` default, so a page
+ * without MJ tokens loaded also degrades cleanly.
+ *
+ * @param root optional element to read tokens from (defaults to document root).
+ */
+export function BuildStylesFromTheme(root?: Element): ComponentStyles {
+  const base = SetupStyles();
+
+  const el = root ?? (typeof document !== 'undefined' ? document.documentElement : undefined);
+  if (!el || typeof getComputedStyle === 'undefined') {
+    return base;
+  }
+
+  const cs = getComputedStyle(el);
+  const read = (token: string): string => cs.getPropertyValue(token).trim();
+
+  for (const [path, token] of Object.entries(THEME_COLOR_TOKEN_MAP)) {
+    const value = read(token);
+    if (value) {
+      base.colors[path] = value;
+    }
+  }
+
+  const palette: string[] = [];
+  for (let i = 1; i <= VIZ_TOKEN_COUNT; i++) {
+    const value = read(`--mj-viz-${i}`);
+    if (value) {
+      palette.push(value);
+    }
+  }
+  if (palette.length > 0) {
+    base.chartPalette = palette;
+  }
+
+  return base;
+}

package/src/utilities/index.ts

@@ -4,6 +4,7 @@
  */
 
 export * from './component-styles';
+export * from './component-library-theming';
 export * from './standard-libraries';
 export * from './library-loader';
 export * from './library-registry';