@frontmcp/ui 0.5.1 → 0.6.0

package/src/theme/theme.js

@@ -1,332 +0,0 @@
-"use strict";
-/**
- * @file theme.ts
- * @description Theme Configuration System for FrontMCP UI.
- *
- * Provides a comprehensive theming system with:
- * - Color palettes with semantic naming
- * - Typography configuration
- * - Spacing and sizing
- * - Component-specific tokens
- * - Customizable CDN URLs for fonts, icons, and scripts
- * - Dark mode support
- * - Tailwind CSS v4 @theme integration
- *
- * @example
- * ```typescript
- * import { createTheme, DEFAULT_THEME } from '@frontmcp/ui';
- *
- * // Use the default GitHub/OpenAI theme
- * const theme = DEFAULT_THEME;
- *
- * // Or create a custom theme
- * const customTheme = createTheme({
- *   colors: {
- *     semantic: { primary: '#0969da' },
- *   },
- *   cdn: {
- *     fonts: {
- *       preconnect: ['https://fonts.googleapis.com'],
- *       stylesheets: ['https://fonts.googleapis.com/css2?family=Roboto&display=swap'],
- *     },
- *   },
- * });
- * ```
- *
- * @module @frontmcp/ui/theme
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_THEME = exports.GITHUB_OPENAI_THEME = void 0;
-exports.mergeThemes = mergeThemes;
-exports.createTheme = createTheme;
-exports.buildThemeCss = buildThemeCss;
-exports.buildStyleBlock = buildStyleBlock;
-// Import default theme from presets (must be at top, used in createTheme)
-const presets_1 = require("./presets");
-// ============================================
-// Default Theme (GitHub/OpenAI Style)
-// ============================================
-/**
- * Default FrontMCP theme - GitHub/OpenAI inspired gray-black aesthetic
- *
- * Re-exported from presets for convenience. The default theme features:
- * - Monochromatic gray-black color palette
- * - System UI font stack
- * - Smaller border radii (GitHub style)
- * - Subtle shadows with gray tones
- *
- * @see ./presets/github-openai.ts for full theme definition
- */
-exports.GITHUB_OPENAI_THEME = presets_1.GITHUB_OPENAI_THEME;
-exports.DEFAULT_THEME = presets_1.DEFAULT_THEME;
-// ============================================
-// Theme Builder Utilities
-// ============================================
-/**
- * Deep merge two theme configurations (internal helper without dark handling)
- * Accepts DeepPartial<ThemeConfig> for both base and override to safely handle partial nested properties
- * Note: This function assumes at least one of base/override provides required values (typically DEFAULT_THEME)
- */
-function mergeThemesCore(base, override) {
-    // Provide safe defaults for required nested properties
-    const baseColors = base.colors ?? { semantic: { primary: '#24292f' } };
-    // Filter out undefined values from arrays
-    const filterStrings = (arr) => arr.filter((s) => s !== undefined);
-    return {
-        ...base,
-        ...override,
-        colors: {
-            ...baseColors,
-            ...override.colors,
-            semantic: { ...baseColors.semantic, ...override.colors?.semantic },
-            surface: { ...baseColors.surface, ...override.colors?.surface },
-            text: { ...baseColors.text, ...override.colors?.text },
-            border: { ...baseColors.border, ...override.colors?.border },
-            custom: { ...baseColors.custom, ...override.colors?.custom },
-        },
-        typography: {
-            ...base.typography,
-            ...override.typography,
-            families: { ...base.typography?.families, ...override.typography?.families },
-            sizes: { ...base.typography?.sizes, ...override.typography?.sizes },
-            weights: { ...base.typography?.weights, ...override.typography?.weights },
-            lineHeight: { ...base.typography?.lineHeight, ...override.typography?.lineHeight },
-        },
-        spacing: { ...base.spacing, ...override.spacing },
-        radius: { ...base.radius, ...override.radius },
-        shadows: { ...base.shadows, ...override.shadows },
-        components: {
-            ...base.components,
-            ...override.components,
-            button: { ...base.components?.button, ...override.components?.button },
-            card: { ...base.components?.card, ...override.components?.card },
-            input: { ...base.components?.input, ...override.components?.input },
-        },
-        cdn: {
-            ...base.cdn,
-            ...override.cdn,
-            fonts: {
-                // Concatenate then dedupe so base entries are preserved without duplicates
-                preconnect: filterStrings(Array.from(new Set([...(base.cdn?.fonts?.preconnect ?? []), ...(override.cdn?.fonts?.preconnect ?? [])]))),
-                stylesheets: filterStrings(Array.from(new Set([...(base.cdn?.fonts?.stylesheets ?? []), ...(override.cdn?.fonts?.stylesheets ?? [])]))),
-            },
-            icons: {
-                ...base.cdn?.icons,
-                ...override.cdn?.icons,
-                // Deep merge script to preserve integrity when only url is overridden
-                script: (override.cdn?.icons?.script
-                    ? { ...base.cdn?.icons?.script, ...override.cdn?.icons?.script }
-                    : base.cdn?.icons?.script),
-            },
-            scripts: {
-                // tailwind is a simple string, just use override or base
-                tailwind: override.cdn?.scripts?.tailwind ?? base.cdn?.scripts?.tailwind,
-                // Deep merge htmx/alpine to preserve integrity when only url is overridden
-                htmx: (override.cdn?.scripts?.htmx
-                    ? { ...base.cdn?.scripts?.htmx, ...override.cdn?.scripts?.htmx }
-                    : base.cdn?.scripts?.htmx),
-                alpine: (override.cdn?.scripts?.alpine
-                    ? { ...base.cdn?.scripts?.alpine, ...override.cdn?.scripts?.alpine }
-                    : base.cdn?.scripts?.alpine),
-            },
-        },
-        customVars: { ...base.customVars, ...override.customVars },
-        customCss: [base.customCss, override.customCss].filter(Boolean).join('\n'),
-    };
-}
-/**
- * Deep merge two theme configurations
- *
- * @remarks
- * Dark variant handling:
- * - When override.dark is provided, it's merged on top of base.dark (if present) or base
- * - The resulting dark variant never contains a nested .dark property
- * - This prevents infinite recursion and ensures clean dark theme composition
- */
-function mergeThemes(base, override) {
-    // Merge the main (light) theme properties
-    const merged = mergeThemesCore(base, override);
-    // Handle dark variant separately to avoid nested .dark properties
-    let darkVariant;
-    if (override.dark !== undefined) {
-        // Merge override.dark on top of base.dark (or base if no base.dark)
-        // darkBase may be partial (from base.dark) - mergeThemesCore handles this safely
-        const darkBase = base.dark ?? base;
-        // Strip any .dark from override.dark to prevent nesting
-        const { dark: _nestedDark, ...overrideDarkWithoutNested } = override.dark;
-        darkVariant = mergeThemesCore(darkBase, overrideDarkWithoutNested);
-    }
-    else if (base.dark !== undefined) {
-        // Preserve base.dark, but strip any nested .dark property
-        const { dark: _nestedDark, ...baseDarkWithoutNested } = base.dark;
-        darkVariant = baseDarkWithoutNested;
-    }
-    return {
-        ...merged,
-        dark: darkVariant,
-    };
-}
-/**
- * Create a theme by extending the default theme
- */
-function createTheme(overrides) {
-    return mergeThemes(exports.DEFAULT_THEME, overrides);
-}
-/**
- * Emit color scale CSS variables
- */
-function emitColorScale(lines, name, scale) {
-    for (const [shade, value] of Object.entries(scale)) {
-        if (value)
-            lines.push(`--color-${name}-${shade}: ${value};`);
-    }
-}
-/**
- * Build Tailwind @theme CSS from theme configuration
- */
-function buildThemeCss(theme) {
-    const lines = [];
-    // Colors - semantic
-    const semantic = theme.colors.semantic;
-    if (typeof semantic.primary === 'string') {
-        lines.push(`--color-primary: ${semantic.primary};`);
-    }
-    else if (semantic.primary) {
-        emitColorScale(lines, 'primary', semantic.primary);
-    }
-    if (semantic.secondary) {
-        if (typeof semantic.secondary === 'string') {
-            lines.push(`--color-secondary: ${semantic.secondary};`);
-        }
-        else {
-            emitColorScale(lines, 'secondary', semantic.secondary);
-        }
-    }
-    if (semantic.accent) {
-        if (typeof semantic.accent === 'string') {
-            lines.push(`--color-accent: ${semantic.accent};`);
-        }
-        else {
-            emitColorScale(lines, 'accent', semantic.accent);
-        }
-    }
-    if (semantic.neutral) {
-        if (typeof semantic.neutral === 'string') {
-            lines.push(`--color-neutral: ${semantic.neutral};`);
-        }
-        else {
-            emitColorScale(lines, 'neutral', semantic.neutral);
-        }
-    }
-    if (semantic.success)
-        lines.push(`--color-success: ${semantic.success};`);
-    if (semantic.warning)
-        lines.push(`--color-warning: ${semantic.warning};`);
-    if (semantic.danger)
-        lines.push(`--color-danger: ${semantic.danger};`);
-    if (semantic.info)
-        lines.push(`--color-info: ${semantic.info};`);
-    // Colors - surface
-    const surface = theme.colors.surface;
-    if (surface?.background)
-        lines.push(`--color-background: ${surface.background};`);
-    if (surface?.surface)
-        lines.push(`--color-surface: ${surface.surface};`);
-    if (surface?.elevated)
-        lines.push(`--color-elevated: ${surface.elevated};`);
-    if (surface?.overlay)
-        lines.push(`--color-overlay: ${surface.overlay};`);
-    // Colors - text
-    const text = theme.colors.text;
-    if (text?.primary)
-        lines.push(`--color-text-primary: ${text.primary};`);
-    if (text?.secondary)
-        lines.push(`--color-text-secondary: ${text.secondary};`);
-    if (text?.disabled)
-        lines.push(`--color-text-disabled: ${text.disabled};`);
-    if (text?.inverse)
-        lines.push(`--color-text-inverse: ${text.inverse};`);
-    if (text?.link)
-        lines.push(`--color-text-link: ${text.link};`);
-    // Colors - border
-    const border = theme.colors.border;
-    if (border?.default)
-        lines.push(`--color-border: ${border.default};`);
-    if (border?.hover)
-        lines.push(`--color-border-hover: ${border.hover};`);
-    if (border?.focus)
-        lines.push(`--color-border-focus: ${border.focus};`);
-    if (border?.divider)
-        lines.push(`--color-divider: ${border.divider};`);
-    // Colors - custom
-    if (theme.colors.custom) {
-        for (const [key, value] of Object.entries(theme.colors.custom)) {
-            lines.push(`--color-${key}: ${value};`);
-        }
-    }
-    // Typography
-    const typography = theme.typography;
-    if (typography?.families?.sans)
-        lines.push(`--font-sans: ${typography.families.sans};`);
-    if (typography?.families?.serif)
-        lines.push(`--font-serif: ${typography.families.serif};`);
-    if (typography?.families?.mono)
-        lines.push(`--font-mono: ${typography.families.mono};`);
-    if (typography?.families?.display)
-        lines.push(`--font-display: ${typography.families.display};`);
-    // Radius
-    const radius = theme.radius;
-    if (radius?.none)
-        lines.push(`--radius-none: ${radius.none};`);
-    if (radius?.sm)
-        lines.push(`--radius-sm: ${radius.sm};`);
-    if (radius?.md)
-        lines.push(`--radius-md: ${radius.md};`);
-    if (radius?.lg)
-        lines.push(`--radius-lg: ${radius.lg};`);
-    if (radius?.xl)
-        lines.push(`--radius-xl: ${radius.xl};`);
-    if (radius?.['2xl'])
-        lines.push(`--radius-2xl: ${radius['2xl']};`);
-    if (radius?.full)
-        lines.push(`--radius-full: ${radius.full};`);
-    // Custom vars
-    if (theme.customVars) {
-        for (const [key, value] of Object.entries(theme.customVars)) {
-            lines.push(`${key}: ${value};`);
-        }
-    }
-    return lines.join('\n      ');
-}
-/**
- * Build complete style block with @theme and custom CSS
- *
- * @remarks
- * **Security/Trust Model:**
- * The `theme.customCss` property is injected directly into a `<style>` tag without
- * sanitization. This is intentional - CSS customization requires full CSS syntax support.
- *
- * **Trust assumptions:**
- * - Theme configurations should only come from trusted sources (developer-defined themes)
- * - Never pass user-provided input directly to `customCss`
- * - If you need user-customizable styles, validate/sanitize them before including in a theme
- *
- * **Why no sanitization:**
- * - CSS sanitization is complex and often breaks legitimate styles
- * - The theme system is designed for developer use, not end-user customization
- * - Developers creating themes are trusted to provide safe CSS
- *
- * @param theme - Theme configuration with optional customCss
- * @returns HTML style block with Tailwind @theme directive
- */
-function buildStyleBlock(theme) {
-    const themeCss = buildThemeCss(theme);
-    const customCss = theme.customCss || '';
-    return `<style type="text/tailwindcss">
-    @theme {
-      ${themeCss}
-    }
-    ${customCss}
-  </style>`;
-}
-//# sourceMappingURL=theme.js.map

package/src/theme/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file theme.ts\n * @description Theme Configuration System for FrontMCP UI.\n *\n * Provides a comprehensive theming system with:\n * - Color palettes with semantic naming\n * - Typography configuration\n * - Spacing and sizing\n * - Component-specific tokens\n * - Customizable CDN URLs for fonts, icons, and scripts\n * - Dark mode support\n * - Tailwind CSS v4 @theme integration\n *\n * @example\n * ```typescript\n * import { createTheme, DEFAULT_THEME } from '@frontmcp/ui';\n *\n * // Use the default GitHub/OpenAI theme\n * const theme = DEFAULT_THEME;\n *\n * // Or create a custom theme\n * const customTheme = createTheme({\n *   colors: {\n *     semantic: { primary: '#0969da' },\n *   },\n *   cdn: {\n *     fonts: {\n *       preconnect: ['https://fonts.googleapis.com'],\n *       stylesheets: ['https://fonts.googleapis.com/css2?family=Roboto&display=swap'],\n *     },\n *   },\n * });\n * ```\n *\n * @module @frontmcp/ui/theme\n */\n\n// Import default theme from presets (must be at top, used in createTheme)\nimport { DEFAULT_THEME as _DEFAULT_THEME, GITHUB_OPENAI_THEME as _GITHUB_OPENAI_THEME } from './presets';\n\n// ============================================\n// Utility Types\n// ============================================\n\n/**\n * Deep partial type - makes all properties and nested properties optional\n */\nexport type DeepPartial<T> = T extends object\n  ? {\n      [P in keyof T]?: DeepPartial<T[P]>;\n    }\n  : T;\n\n// ============================================\n// Color Types\n// ============================================\n\n/**\n * Semantic color scale (50-950)\n */\nexport interface ColorScale {\n  50?: string;\n  100?: string;\n  200?: string;\n  300?: string;\n  400?: string;\n  500?: string;\n  600?: string;\n  700?: string;\n  800?: string;\n  900?: string;\n  950?: string;\n}\n\n/**\n * Semantic color tokens\n */\nexport interface SemanticColors {\n  /** Primary brand color */\n  primary: string | ColorScale;\n  /** Secondary brand color */\n  secondary?: string | ColorScale;\n  /** Accent/highlight color */\n  accent?: string | ColorScale;\n  /** Neutral/gray tones */\n  neutral?: string | ColorScale;\n  /** Success state */\n  success?: string;\n  /** Warning state */\n  warning?: string;\n  /** Error/danger state */\n  danger?: string;\n  /** Info state */\n  info?: string;\n}\n\n/**\n * Surface colors for backgrounds\n */\nexport interface SurfaceColors {\n  /** Page background */\n  background?: string;\n  /** Card/panel background */\n  surface?: string;\n  /** Elevated surface (modal, dropdown) */\n  elevated?: string;\n  /** Overlay/backdrop */\n  overlay?: string;\n}\n\n/**\n * Text colors\n */\nexport interface TextColors {\n  /** Primary text */\n  primary?: string;\n  /** Secondary/muted text */\n  secondary?: string;\n  /** Disabled text */\n  disabled?: string;\n  /** Inverse text (on dark backgrounds) */\n  inverse?: string;\n  /** Link text */\n  link?: string;\n}\n\n/**\n * Border colors\n */\nexport interface BorderColors {\n  /** Default border */\n  default?: string;\n  /** Hover border */\n  hover?: string;\n  /** Focus border */\n  focus?: string;\n  /** Divider lines */\n  divider?: string;\n}\n\n/**\n * Complete color configuration\n */\nexport interface ThemeColors {\n  /** Semantic colors */\n  semantic: SemanticColors;\n  /** Surface/background colors */\n  surface?: SurfaceColors;\n  /** Text colors */\n  text?: TextColors;\n  /** Border colors */\n  border?: BorderColors;\n  /** Additional custom colors */\n  custom?: Record<string, string>;\n}\n\n// ============================================\n// Typography Types\n// ============================================\n\n/**\n * Font family configuration\n */\nexport interface FontFamilies {\n  /** Sans-serif (default) */\n  sans?: string;\n  /** Serif */\n  serif?: string;\n  /** Monospace */\n  mono?: string;\n  /** Display/heading */\n  display?: string;\n}\n\n/**\n * Font size configuration\n */\nexport interface FontSizes {\n  xs?: string;\n  sm?: string;\n  base?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n  '3xl'?: string;\n  '4xl'?: string;\n  '5xl'?: string;\n}\n\n/**\n * Font weight configuration\n */\nexport interface FontWeights {\n  normal?: string;\n  medium?: string;\n  semibold?: string;\n  bold?: string;\n}\n\n/**\n * Complete typography configuration\n */\nexport interface ThemeTypography {\n  families?: FontFamilies;\n  sizes?: FontSizes;\n  weights?: FontWeights;\n  lineHeight?: {\n    tight?: string;\n    normal?: string;\n    relaxed?: string;\n  };\n}\n\n// ============================================\n// Spacing & Sizing Types\n// ============================================\n\n/**\n * Spacing scale\n */\nexport interface ThemeSpacing {\n  px?: string;\n  0?: string;\n  1?: string;\n  2?: string;\n  3?: string;\n  4?: string;\n  5?: string;\n  6?: string;\n  8?: string;\n  10?: string;\n  12?: string;\n  16?: string;\n  20?: string;\n  24?: string;\n}\n\n/**\n * Border radius\n */\nexport interface ThemeRadius {\n  none?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  '2xl'?: string;\n  full?: string;\n}\n\n/**\n * Shadow configuration\n */\nexport interface ThemeShadows {\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n}\n\n// ============================================\n// Component Tokens\n// ============================================\n\n/**\n * Button component tokens\n */\nexport interface ButtonTokens {\n  radius?: string;\n  paddingX?: string;\n  paddingY?: string;\n  fontSize?: string;\n  fontWeight?: string;\n}\n\n/**\n * Card component tokens\n */\nexport interface CardTokens {\n  radius?: string;\n  padding?: string;\n  shadow?: string;\n  borderWidth?: string;\n}\n\n/**\n * Input component tokens\n */\nexport interface InputTokens {\n  radius?: string;\n  paddingX?: string;\n  paddingY?: string;\n  borderWidth?: string;\n  focusRingWidth?: string;\n}\n\n/**\n * Component-specific tokens\n */\nexport interface ComponentTokens {\n  button?: ButtonTokens;\n  card?: CardTokens;\n  input?: InputTokens;\n}\n\n// ============================================\n// CDN Configuration Types\n// ============================================\n\n/**\n * Script resource with optional integrity hash\n */\nexport interface CdnScriptResource {\n  /** URL to the script */\n  url: string;\n  /** Subresource integrity hash */\n  integrity?: string;\n}\n\n/**\n * Font CDN configuration\n */\nexport interface ThemeCdnFonts {\n  /** Preconnect URLs for font providers */\n  preconnect?: string[];\n  /** Font stylesheet URLs */\n  stylesheets?: string[];\n}\n\n/**\n * Icon CDN configuration\n */\nexport interface ThemeCdnIcons {\n  /** Icon library script */\n  script?: CdnScriptResource;\n}\n\n/**\n * Scripts CDN configuration\n */\nexport interface ThemeCdnScripts {\n  /** Tailwind CSS Browser CDN URL */\n  tailwind?: string;\n  /** HTMX script resource */\n  htmx?: CdnScriptResource;\n  /** Alpine.js script resource */\n  alpine?: CdnScriptResource;\n}\n\n/**\n * Complete CDN configuration for theme\n *\n * Allows customizing all external resource URLs used by the theme.\n * Useful for:\n * - Using private CDN mirrors\n * - Self-hosting resources\n * - Compliance with CSP policies\n * - Using different font families\n */\nexport interface ThemeCdnConfig {\n  /** Font configuration */\n  fonts?: ThemeCdnFonts;\n  /** Icon library configuration */\n  icons?: ThemeCdnIcons;\n  /** Script CDN configuration */\n  scripts?: ThemeCdnScripts;\n}\n\n// ============================================\n// Complete Theme Configuration\n// ============================================\n\n/**\n * Complete theme configuration\n */\nexport interface ThemeConfig {\n  /** Theme name/identifier */\n  name?: string;\n\n  /** Color configuration */\n  colors: ThemeColors;\n\n  /** Typography configuration */\n  typography?: ThemeTypography;\n\n  /** Spacing scale */\n  spacing?: ThemeSpacing;\n\n  /** Border radius */\n  radius?: ThemeRadius;\n\n  /** Shadows */\n  shadows?: ThemeShadows;\n\n  /** Component-specific tokens */\n  components?: ComponentTokens;\n\n  /** CDN resource configuration */\n  cdn?: ThemeCdnConfig;\n\n  /** Dark mode variant */\n  dark?: Partial<ThemeConfig>;\n\n  /** Additional CSS custom properties */\n  customVars?: Record<string, string>;\n\n  /** Additional CSS (outside @theme) */\n  customCss?: string;\n}\n\n// ============================================\n// Default Theme (GitHub/OpenAI Style)\n// ============================================\n\n/**\n * Default FrontMCP theme - GitHub/OpenAI inspired gray-black aesthetic\n *\n * Re-exported from presets for convenience. The default theme features:\n * - Monochromatic gray-black color palette\n * - System UI font stack\n * - Smaller border radii (GitHub style)\n * - Subtle shadows with gray tones\n *\n * @see ./presets/github-openai.ts for full theme definition\n */\nexport const GITHUB_OPENAI_THEME = _GITHUB_OPENAI_THEME;\nexport const DEFAULT_THEME = _DEFAULT_THEME;\n\n// ============================================\n// Theme Builder Utilities\n// ============================================\n\n/**\n * Deep merge two theme configurations (internal helper without dark handling)\n * Accepts DeepPartial<ThemeConfig> for both base and override to safely handle partial nested properties\n * Note: This function assumes at least one of base/override provides required values (typically DEFAULT_THEME)\n */\nfunction mergeThemesCore(\n  base: DeepPartial<ThemeConfig>,\n  override: DeepPartial<ThemeConfig>,\n): Omit<ThemeConfig, 'dark'> {\n  // Provide safe defaults for required nested properties\n  const baseColors = base.colors ?? { semantic: { primary: '#24292f' } };\n\n  // Filter out undefined values from arrays\n  const filterStrings = (arr: (string | undefined)[]): string[] => arr.filter((s): s is string => s !== undefined);\n\n  return {\n    ...base,\n    ...override,\n    colors: {\n      ...baseColors,\n      ...override.colors,\n      semantic: { ...baseColors.semantic, ...override.colors?.semantic } as ThemeColors['semantic'],\n      surface: { ...baseColors.surface, ...override.colors?.surface },\n      text: { ...baseColors.text, ...override.colors?.text },\n      border: { ...baseColors.border, ...override.colors?.border },\n      custom: { ...baseColors.custom, ...override.colors?.custom } as Record<string, string> | undefined,\n    },\n    typography: {\n      ...base.typography,\n      ...override.typography,\n      families: { ...base.typography?.families, ...override.typography?.families },\n      sizes: { ...base.typography?.sizes, ...override.typography?.sizes },\n      weights: { ...base.typography?.weights, ...override.typography?.weights },\n      lineHeight: { ...base.typography?.lineHeight, ...override.typography?.lineHeight },\n    },\n    spacing: { ...base.spacing, ...override.spacing },\n    radius: { ...base.radius, ...override.radius },\n    shadows: { ...base.shadows, ...override.shadows },\n    components: {\n      ...base.components,\n      ...override.components,\n      button: { ...base.components?.button, ...override.components?.button },\n      card: { ...base.components?.card, ...override.components?.card },\n      input: { ...base.components?.input, ...override.components?.input },\n    },\n    cdn: {\n      ...base.cdn,\n      ...override.cdn,\n      fonts: {\n        // Concatenate then dedupe so base entries are preserved without duplicates\n        preconnect: filterStrings(\n          Array.from(new Set([...(base.cdn?.fonts?.preconnect ?? []), ...(override.cdn?.fonts?.preconnect ?? [])])),\n        ),\n        stylesheets: filterStrings(\n          Array.from(new Set([...(base.cdn?.fonts?.stylesheets ?? []), ...(override.cdn?.fonts?.stylesheets ?? [])])),\n        ),\n      },\n      icons: {\n        ...base.cdn?.icons,\n        ...override.cdn?.icons,\n        // Deep merge script to preserve integrity when only url is overridden\n        script: (override.cdn?.icons?.script\n          ? { ...base.cdn?.icons?.script, ...override.cdn?.icons?.script }\n          : base.cdn?.icons?.script) as CdnScriptResource | undefined,\n      },\n      scripts: {\n        // tailwind is a simple string, just use override or base\n        tailwind: override.cdn?.scripts?.tailwind ?? base.cdn?.scripts?.tailwind,\n        // Deep merge htmx/alpine to preserve integrity when only url is overridden\n        htmx: (override.cdn?.scripts?.htmx\n          ? { ...base.cdn?.scripts?.htmx, ...override.cdn?.scripts?.htmx }\n          : base.cdn?.scripts?.htmx) as CdnScriptResource | undefined,\n        alpine: (override.cdn?.scripts?.alpine\n          ? { ...base.cdn?.scripts?.alpine, ...override.cdn?.scripts?.alpine }\n          : base.cdn?.scripts?.alpine) as CdnScriptResource | undefined,\n      },\n    },\n    customVars: { ...base.customVars, ...override.customVars } as Record<string, string> | undefined,\n    customCss: [base.customCss, override.customCss].filter(Boolean).join('\\n'),\n  };\n}\n\n/**\n * Deep merge two theme configurations\n *\n * @remarks\n * Dark variant handling:\n * - When override.dark is provided, it's merged on top of base.dark (if present) or base\n * - The resulting dark variant never contains a nested .dark property\n * - This prevents infinite recursion and ensures clean dark theme composition\n */\nexport function mergeThemes(base: ThemeConfig, override: DeepPartial<ThemeConfig>): ThemeConfig {\n  // Merge the main (light) theme properties\n  const merged = mergeThemesCore(base, override);\n\n  // Handle dark variant separately to avoid nested .dark properties\n  let darkVariant: Partial<ThemeConfig> | undefined;\n\n  if (override.dark !== undefined) {\n    // Merge override.dark on top of base.dark (or base if no base.dark)\n    // darkBase may be partial (from base.dark) - mergeThemesCore handles this safely\n    const darkBase = base.dark ?? base;\n    // Strip any .dark from override.dark to prevent nesting\n    const { dark: _nestedDark, ...overrideDarkWithoutNested } = override.dark;\n    darkVariant = mergeThemesCore(darkBase, overrideDarkWithoutNested);\n  } else if (base.dark !== undefined) {\n    // Preserve base.dark, but strip any nested .dark property\n    const { dark: _nestedDark, ...baseDarkWithoutNested } = base.dark;\n    darkVariant = baseDarkWithoutNested;\n  }\n\n  return {\n    ...merged,\n    dark: darkVariant,\n  };\n}\n\n/**\n * Create a theme by extending the default theme\n */\nexport function createTheme(overrides: Partial<ThemeConfig>): ThemeConfig {\n  return mergeThemes(DEFAULT_THEME, overrides);\n}\n\n/**\n * Emit color scale CSS variables\n */\nfunction emitColorScale(lines: string[], name: string, scale: ColorScale): void {\n  for (const [shade, value] of Object.entries(scale)) {\n    if (value) lines.push(`--color-${name}-${shade}: ${value};`);\n  }\n}\n\n/**\n * Build Tailwind @theme CSS from theme configuration\n */\nexport function buildThemeCss(theme: ThemeConfig): string {\n  const lines: string[] = [];\n\n  // Colors - semantic\n  const semantic = theme.colors.semantic;\n  if (typeof semantic.primary === 'string') {\n    lines.push(`--color-primary: ${semantic.primary};`);\n  } else if (semantic.primary) {\n    emitColorScale(lines, 'primary', semantic.primary);\n  }\n  if (semantic.secondary) {\n    if (typeof semantic.secondary === 'string') {\n      lines.push(`--color-secondary: ${semantic.secondary};`);\n    } else {\n      emitColorScale(lines, 'secondary', semantic.secondary);\n    }\n  }\n  if (semantic.accent) {\n    if (typeof semantic.accent === 'string') {\n      lines.push(`--color-accent: ${semantic.accent};`);\n    } else {\n      emitColorScale(lines, 'accent', semantic.accent);\n    }\n  }\n  if (semantic.neutral) {\n    if (typeof semantic.neutral === 'string') {\n      lines.push(`--color-neutral: ${semantic.neutral};`);\n    } else {\n      emitColorScale(lines, 'neutral', semantic.neutral);\n    }\n  }\n  if (semantic.success) lines.push(`--color-success: ${semantic.success};`);\n  if (semantic.warning) lines.push(`--color-warning: ${semantic.warning};`);\n  if (semantic.danger) lines.push(`--color-danger: ${semantic.danger};`);\n  if (semantic.info) lines.push(`--color-info: ${semantic.info};`);\n\n  // Colors - surface\n  const surface = theme.colors.surface;\n  if (surface?.background) lines.push(`--color-background: ${surface.background};`);\n  if (surface?.surface) lines.push(`--color-surface: ${surface.surface};`);\n  if (surface?.elevated) lines.push(`--color-elevated: ${surface.elevated};`);\n  if (surface?.overlay) lines.push(`--color-overlay: ${surface.overlay};`);\n\n  // Colors - text\n  const text = theme.colors.text;\n  if (text?.primary) lines.push(`--color-text-primary: ${text.primary};`);\n  if (text?.secondary) lines.push(`--color-text-secondary: ${text.secondary};`);\n  if (text?.disabled) lines.push(`--color-text-disabled: ${text.disabled};`);\n  if (text?.inverse) lines.push(`--color-text-inverse: ${text.inverse};`);\n  if (text?.link) lines.push(`--color-text-link: ${text.link};`);\n\n  // Colors - border\n  const border = theme.colors.border;\n  if (border?.default) lines.push(`--color-border: ${border.default};`);\n  if (border?.hover) lines.push(`--color-border-hover: ${border.hover};`);\n  if (border?.focus) lines.push(`--color-border-focus: ${border.focus};`);\n  if (border?.divider) lines.push(`--color-divider: ${border.divider};`);\n\n  // Colors - custom\n  if (theme.colors.custom) {\n    for (const [key, value] of Object.entries(theme.colors.custom)) {\n      lines.push(`--color-${key}: ${value};`);\n    }\n  }\n\n  // Typography\n  const typography = theme.typography;\n  if (typography?.families?.sans) lines.push(`--font-sans: ${typography.families.sans};`);\n  if (typography?.families?.serif) lines.push(`--font-serif: ${typography.families.serif};`);\n  if (typography?.families?.mono) lines.push(`--font-mono: ${typography.families.mono};`);\n  if (typography?.families?.display) lines.push(`--font-display: ${typography.families.display};`);\n\n  // Radius\n  const radius = theme.radius;\n  if (radius?.none) lines.push(`--radius-none: ${radius.none};`);\n  if (radius?.sm) lines.push(`--radius-sm: ${radius.sm};`);\n  if (radius?.md) lines.push(`--radius-md: ${radius.md};`);\n  if (radius?.lg) lines.push(`--radius-lg: ${radius.lg};`);\n  if (radius?.xl) lines.push(`--radius-xl: ${radius.xl};`);\n  if (radius?.['2xl']) lines.push(`--radius-2xl: ${radius['2xl']};`);\n  if (radius?.full) lines.push(`--radius-full: ${radius.full};`);\n\n  // Custom vars\n  if (theme.customVars) {\n    for (const [key, value] of Object.entries(theme.customVars)) {\n      lines.push(`${key}: ${value};`);\n    }\n  }\n\n  return lines.join('\\n      ');\n}\n\n/**\n * Build complete style block with @theme and custom CSS\n *\n * @remarks\n * **Security/Trust Model:**\n * The `theme.customCss` property is injected directly into a `<style>` tag without\n * sanitization. This is intentional - CSS customization requires full CSS syntax support.\n *\n * **Trust assumptions:**\n * - Theme configurations should only come from trusted sources (developer-defined themes)\n * - Never pass user-provided input directly to `customCss`\n * - If you need user-customizable styles, validate/sanitize them before including in a theme\n *\n * **Why no sanitization:**\n * - CSS sanitization is complex and often breaks legitimate styles\n * - The theme system is designed for developer use, not end-user customization\n * - Developers creating themes are trusted to provide safe CSS\n *\n * @param theme - Theme configuration with optional customCss\n * @returns HTML style block with Tailwind @theme directive\n */\nexport function buildStyleBlock(theme: ThemeConfig): string {\n  const themeCss = buildThemeCss(theme);\n  const customCss = theme.customCss || '';\n\n  return `<style type=\"text/tailwindcss\">\n    @theme {\n      ${themeCss}\n    }\n    ${customCss}\n  </style>`;\n}\n"]}

package/src/tool-template/builder.d.ts

@@ -1,212 +0,0 @@
-/**
- * Tool Template Builder
- *
- * Provides utilities for building and rendering tool UI templates
- * with the MCP Bridge runtime.
- *
- * Supports multiple template types with auto-detection:
- * - HTML strings and template builder functions
- * - React components (imported or JSX strings)
- * - MDX content (Markdown + JSX)
- */
-import type { TemplateContext, TemplateBuilderFn, ToolUIConfig, ToolUITemplate } from '../runtime/types';
-import type { ThemeConfig, PlatformCapabilities, DeepPartial } from '../theme';
-/**
- * Options for rendering a tool template
- */
-export interface RenderTemplateOptions<In = Record<string, unknown>, Out = unknown> {
-    /** UI configuration from tool metadata */
-    ui: ToolUIConfig<In, Out>;
-    /** Tool name */
-    toolName: string;
-    /** Tool input arguments */
-    input: In;
-    /** Tool output (raw result from execute) */
-    output: Out;
-    /** Structured content (parsed output for widgets) */
-    structuredContent?: unknown;
-    /** Theme configuration */
-    theme?: DeepPartial<ThemeConfig>;
-    /** Platform capabilities */
-    platform?: PlatformCapabilities;
-}
-/**
- * Result of rendering a tool template
- */
-export interface RenderedTemplate {
-    /** Complete HTML document string */
-    html: string;
-    /** MIME type for the response */
-    mimeType: string;
-    /** OpenAI-specific metadata (if applicable) */
-    openaiMeta?: Record<string, unknown>;
-}
-/**
- * Build template context from render options
- */
-export declare function buildTemplateContext<In = Record<string, unknown>, Out = unknown>(input: In, output: Out, structuredContent?: unknown): TemplateContext<In, Out>;
-/**
- * Execute a template builder function or return static template.
- * This is used for simple HTML templates only.
- */
-export declare function executeTemplate<In = Record<string, unknown>, Out = unknown>(template: TemplateBuilderFn<In, Out> | string, ctx: TemplateContext<In, Out>): string;
-/**
- * Render a template using the appropriate renderer (auto-detected).
- *
- * This function detects the template type and routes to the appropriate
- * renderer (HTML, React, or MDX).
- *
- * @param template - The template to render
- * @param ctx - Template context with input/output/helpers
- * @param options - Additional render options
- * @returns Promise resolving to rendered HTML string
- */
-export declare function renderTemplate<In = Record<string, unknown>, Out = unknown>(template: ToolUITemplate<In, Out>, ctx: TemplateContext<In, Out>, options?: {
-    hydrate?: boolean;
-    mdxComponents?: Record<string, any>;
-}): Promise<{
-    html: string;
-    rendererType: string;
-}>;
-/**
- * Render a tool UI template to a complete HTML document (sync version).
- *
- * This is the sync entry point for rendering simple HTML tool UIs. It:
- * 1. Builds the template context with input/output/helpers
- * 2. Executes the template builder function
- * 3. Wraps the content in a complete HTML document with MCP Bridge
- * 4. Applies CSP and theme configuration
- *
- * Note: For React/MDX templates, use `renderToolTemplateAsync` instead.
- *
- * @param options - Render options
- * @returns Rendered template with HTML and metadata
- *
- * @example
- * ```typescript
- * const result = renderToolTemplate({
- *   ui: toolMetadata.ui,
- *   toolName: 'get_weather',
- *   input: { location: 'San Francisco' },
- *   output: { temperature: 72, conditions: 'sunny' },
- * });
- *
- * // Use result.html for the response body
- * // Use result.mimeType for Content-Type header
- * ```
- */
-export declare function renderToolTemplate<In = Record<string, unknown>, Out = unknown>(options: RenderTemplateOptions<In, Out>): RenderedTemplate;
-/**
- * Render a tool UI template to a complete HTML document (async version).
- *
- * This is the async entry point that supports all template types:
- * - HTML strings and template builder functions
- * - React components (imported or JSX strings)
- * - MDX content (Markdown + JSX)
- *
- * The template type is auto-detected and the appropriate renderer is used.
- *
- * @param options - Render options
- * @returns Promise resolving to rendered template with HTML and metadata
- *
- * @example React component
- * ```typescript
- * import { WeatherWidget } from './weather-widget.tsx';
- *
- * const result = await renderToolTemplateAsync({
- *   ui: { template: WeatherWidget, hydrate: true },
- *   toolName: 'get_weather',
- *   input: { location: 'San Francisco' },
- *   output: { temperature: 72, conditions: 'sunny' },
- * });
- * ```
- *
- * @example MDX content
- * ```typescript
- * const result = await renderToolTemplateAsync({
- *   ui: {
- *     template: `# Weather in {output.location}\nTemperature: {output.temperature}°F`,
- *   },
- *   toolName: 'get_weather',
- *   input: { location: 'San Francisco' },
- *   output: { temperature: 72, location: 'San Francisco' },
- * });
- * ```
- */
-export declare function renderToolTemplateAsync<In = Record<string, unknown>, Out = unknown>(options: RenderTemplateOptions<In, Out>): Promise<RenderedTemplate & {
-    rendererType: string;
-}>;
-/**
- * Create a typed template builder with automatic input/output typing.
- *
- * This is a convenience function that helps TypeScript infer the
- * correct types for template builder functions.
- *
- * @example
- * ```typescript
- * interface WeatherInput {
- *   location: string;
- * }
- *
- * interface WeatherOutput {
- *   temperature: number;
- *   conditions: string;
- * }
- *
- * const weatherTemplate = createTemplate<WeatherInput, WeatherOutput>((ctx) => `
- *   <div class="p-4">
- *     <h2>Weather in ${ctx.helpers.escapeHtml(ctx.input.location)}</h2>
- *     <p>${ctx.output.temperature}°F - ${ctx.output.conditions}</p>
- *   </div>
- * `);
- * ```
- */
-export declare function createTemplate<In = Record<string, unknown>, Out = unknown>(builder: TemplateBuilderFn<In, Out>): TemplateBuilderFn<In, Out>;
-/**
- * Create a ToolUIConfig with proper typing
- *
- * @example
- * ```typescript
- * const ui = createToolUI<WeatherInput, WeatherOutput>({
- *   template: (ctx) => `<div>${ctx.output.temperature}°F</div>`,
- *   csp: { connectDomains: ['https://api.weather.com'] },
- *   widgetAccessible: true,
- * });
- * ```
- */
-export declare function createToolUI<In = Record<string, unknown>, Out = unknown>(config: ToolUIConfig<In, Out>): ToolUIConfig<In, Out>;
-/**
- * Create a container div with common styling
- */
-export declare function container(content: string, className?: string): string;
-/**
- * Create a heading element
- */
-export declare function heading(text: string, level?: 1 | 2 | 3 | 4): string;
-/**
- * Create a paragraph element
- */
-export declare function paragraph(text: string, className?: string): string;
-/**
- * Create a key-value display
- */
-export declare function keyValue(key: string, value: string | number | boolean, className?: string): string;
-/**
- * Create a simple data list
- */
-export declare function dataList(items: Array<{
-    key: string;
-    value: string | number | boolean;
-}>): string;
-/**
- * Create an error display
- */
-export declare function errorDisplay(message: string, details?: string): string;
-/**
- * Create a success display
- */
-export declare function successDisplay(message: string, details?: string): string;
-/**
- * Create a loading indicator
- */
-export declare function loadingDisplay(message?: string): string;