@frontmcp/ui 0.5.0 → 0.6.0

package/esm/theme/index.js

@@ -0,0 +1,700 @@
+// libs/ui/src/theme/cdn.ts
+var CDN = {
+  /**
+   * Tailwind CSS v4 Browser CDN
+   * Generates styles on-the-fly with @theme support
+   * @see https://tailwindcss.com/docs/installation/play-cdn
+   */
+  tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
+  /**
+   * HTMX 2.x - High power tools for HTML
+   * Enables AJAX, WebSockets, Server Sent Events directly in HTML
+   * @see https://htmx.org
+   */
+  htmx: {
+    url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
+    integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
+  },
+  /**
+   * Alpine.js - Lightweight reactive framework
+   * Used for more complex client-side interactions
+   * @see https://alpinejs.dev
+   */
+  alpine: {
+    url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
+    integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
+  },
+  /**
+   * Google Fonts - Inter for modern UI typography
+   */
+  fonts: {
+    preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+    inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+    mono: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
+  },
+  /**
+   * Lucide Icons - Beautiful & consistent icons
+   * @see https://lucide.dev
+   */
+  icons: {
+    url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js",
+    integrity: "sha384-wpLmHb7v7V1LsEuTmPQ9tXqWZvTtRWWVqJuE+Yz6X0I6O2T6bHJVeXH1lVWqF4qE"
+  }
+};
+var scriptCache = /* @__PURE__ */ new Map();
+async function fetchScript(url) {
+  if (scriptCache.has(url)) {
+    return scriptCache.get(url);
+  }
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch script: ${url} (${response.status})`);
+  }
+  const content = await response.text();
+  scriptCache.set(url, content);
+  return content;
+}
+async function fetchAndCacheScripts(options = {}) {
+  const { tailwind = true, htmx = true, alpine = false, icons = false } = options;
+  const urls = [];
+  if (tailwind) urls.push(CDN.tailwind);
+  if (htmx) urls.push(CDN.htmx.url);
+  if (alpine) urls.push(CDN.alpine.url);
+  if (icons) urls.push(CDN.icons.url);
+  await Promise.all(urls.map(fetchScript));
+  return scriptCache;
+}
+function getCachedScript(url) {
+  return scriptCache.get(url);
+}
+function isScriptCached(url) {
+  return scriptCache.has(url);
+}
+function clearScriptCache() {
+  scriptCache.clear();
+}
+function buildFontPreconnect() {
+  return CDN.fonts.preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ");
+}
+function buildFontStylesheets(options = {}) {
+  const { inter = true, mono = false } = options;
+  const links = [];
+  if (inter) {
+    links.push(`<link href="${CDN.fonts.inter}" rel="stylesheet">`);
+  }
+  if (mono) {
+    links.push(`<link href="${CDN.fonts.mono}" rel="stylesheet">`);
+  }
+  return links.join("\n  ");
+}
+function buildScriptTag(url, integrity, options = {}) {
+  const attrs = [`src="${url}"`];
+  if (integrity) {
+    attrs.push(`integrity="${integrity}"`);
+    attrs.push('crossorigin="anonymous"');
+  }
+  if (options.defer) attrs.push("defer");
+  if (options.async) attrs.push("async");
+  return `<script ${attrs.join(" ")}></script>`;
+}
+function buildInlineScriptTag(content) {
+  return `<script>${content}</script>`;
+}
+function buildCdnScripts(options = {}) {
+  const { tailwind = true, htmx = true, alpine = false, icons = false, inline = false } = options;
+  const scripts = [];
+  if (inline) {
+    if (tailwind) {
+      if (isScriptCached(CDN.tailwind)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.tailwind)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+    if (htmx) {
+      if (isScriptCached(CDN.htmx.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.htmx.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+    if (alpine) {
+      if (isScriptCached(CDN.alpine.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.alpine.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+    if (icons) {
+      if (isScriptCached(CDN.icons.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(CDN.icons.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Lucide icons script not cached. Call fetchAndCacheScripts() first."
+        );
+      }
+    }
+  } else {
+    if (tailwind) {
+      scripts.push(buildScriptTag(CDN.tailwind));
+    }
+    if (htmx) {
+      scripts.push(buildScriptTag(CDN.htmx.url, CDN.htmx.integrity));
+    }
+    if (alpine) {
+      scripts.push(buildScriptTag(CDN.alpine.url, CDN.alpine.integrity, { defer: true }));
+    }
+    if (icons) {
+      scripts.push(buildScriptTag(CDN.icons.url, CDN.icons.integrity));
+    }
+  }
+  return scripts.join("\n  ");
+}
+function buildFontPreconnectFromTheme(theme) {
+  const preconnect = theme.cdn?.fonts?.preconnect ?? CDN.fonts.preconnect;
+  return preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ");
+}
+function buildFontStylesheetsFromTheme(theme) {
+  const stylesheets = theme.cdn?.fonts?.stylesheets ?? [CDN.fonts.inter];
+  return stylesheets.map((url) => `<link href="${url}" rel="stylesheet">`).join("\n  ");
+}
+function buildCdnScriptsFromTheme(theme, options = {}) {
+  const { tailwind = true, htmx = true, alpine = false, icons = false, inline = false } = options;
+  const scripts = [];
+  const tailwindUrl = theme.cdn?.scripts?.tailwind ?? CDN.tailwind;
+  const htmxConfig = theme.cdn?.scripts?.htmx ?? CDN.htmx;
+  const alpineConfig = theme.cdn?.scripts?.alpine ?? CDN.alpine;
+  const iconsConfig = theme.cdn?.icons?.script ?? CDN.icons;
+  if (inline) {
+    if (tailwind) {
+      if (isScriptCached(tailwindUrl)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(tailwindUrl)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScriptsFromTheme() first."
+        );
+      }
+    }
+    if (htmx) {
+      if (isScriptCached(htmxConfig.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(htmxConfig.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScriptsFromTheme() first."
+        );
+      }
+    }
+    if (alpine) {
+      if (isScriptCached(alpineConfig.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(alpineConfig.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScriptsFromTheme() first."
+        );
+      }
+    }
+    if (icons) {
+      if (isScriptCached(iconsConfig.url)) {
+        scripts.push(buildInlineScriptTag(getCachedScript(iconsConfig.url)));
+      } else {
+        console.warn(
+          "[frontmcp/ui] Inline mode requested but icons script not cached. Call fetchAndCacheScriptsFromTheme() first."
+        );
+      }
+    }
+  } else {
+    if (tailwind) {
+      scripts.push(buildScriptTag(tailwindUrl));
+    }
+    if (htmx) {
+      scripts.push(buildScriptTag(htmxConfig.url, htmxConfig.integrity));
+    }
+    if (alpine) {
+      scripts.push(buildScriptTag(alpineConfig.url, alpineConfig.integrity, { defer: true }));
+    }
+    if (icons) {
+      scripts.push(buildScriptTag(iconsConfig.url, iconsConfig.integrity));
+    }
+  }
+  return scripts.join("\n  ");
+}
+async function fetchAndCacheScriptsFromTheme(theme, options = {}) {
+  const { tailwind = true, htmx = true, alpine = false, icons = false } = options;
+  const urls = [];
+  const tailwindUrl = theme.cdn?.scripts?.tailwind ?? CDN.tailwind;
+  const htmxConfig = theme.cdn?.scripts?.htmx ?? CDN.htmx;
+  const alpineConfig = theme.cdn?.scripts?.alpine ?? CDN.alpine;
+  const iconsConfig = theme.cdn?.icons?.script ?? CDN.icons;
+  if (tailwind) urls.push(tailwindUrl);
+  if (htmx) urls.push(htmxConfig.url);
+  if (alpine) urls.push(alpineConfig.url);
+  if (icons) urls.push(iconsConfig.url);
+  await Promise.all(urls.map(fetchScript));
+  return scriptCache;
+}
+
+// libs/ui/src/theme/platforms.ts
+var OPENAI_PLATFORM = {
+  id: "openai",
+  name: "OpenAI",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: true,
+  networkMode: "full",
+  scriptStrategy: "cdn",
+  options: {
+    sdk: "apps-sdk",
+    version: "1.0"
+  }
+};
+var CLAUDE_PLATFORM = {
+  id: "claude",
+  name: "Claude (Artifacts)",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: false,
+  // Network blocked, HTMX won't work for API calls
+  networkMode: "blocked",
+  scriptStrategy: "inline",
+  maxInlineSize: 100 * 1024,
+  // 100KB limit for artifacts
+  cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
+  options: {
+    mode: "artifacts",
+    framework: "react"
+    // Claude artifacts prefer React
+  }
+};
+var GEMINI_PLATFORM = {
+  id: "gemini",
+  name: "Gemini",
+  supportsWidgets: false,
+  supportsTailwind: false,
+  supportsHtmx: false,
+  networkMode: "blocked",
+  scriptStrategy: "inline",
+  options: {
+    fallback: "markdown"
+    // Fall back to markdown rendering
+  }
+};
+var NGROK_PLATFORM = {
+  id: "ngrok",
+  name: "Ngrok Tunnel",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: true,
+  networkMode: "full",
+  scriptStrategy: "cdn",
+  options: {
+    tunnelRequired: true
+  }
+};
+var CUSTOM_PLATFORM = {
+  id: "custom",
+  name: "Custom MCP Client",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: true,
+  networkMode: "full",
+  scriptStrategy: "cdn"
+};
+var PLATFORM_PRESETS = {
+  openai: OPENAI_PLATFORM,
+  claude: CLAUDE_PLATFORM,
+  gemini: GEMINI_PLATFORM,
+  ngrok: NGROK_PLATFORM,
+  custom: CUSTOM_PLATFORM
+};
+function getPlatform(id) {
+  return PLATFORM_PRESETS[id] ?? CUSTOM_PLATFORM;
+}
+function createPlatform(base) {
+  const preset = PLATFORM_PRESETS[base.id] ?? CUSTOM_PLATFORM;
+  return { ...preset, ...base };
+}
+function canUseCdn(platform) {
+  return platform.networkMode === "full" && platform.scriptStrategy === "cdn";
+}
+function needsInlineScripts(platform) {
+  return platform.scriptStrategy === "inline" || platform.networkMode === "blocked";
+}
+function supportsFullInteractivity(platform) {
+  return platform.supportsWidgets && platform.supportsHtmx && platform.networkMode === "full";
+}
+function getFallbackMode(platform) {
+  if (platform.supportsWidgets && platform.supportsTailwind) {
+    return "html";
+  }
+  if (platform.options?.["fallback"] === "markdown") {
+    return "markdown";
+  }
+  return "text";
+}
+
+// libs/ui/src/theme/presets/github-openai.ts
+var GITHUB_OPENAI_THEME = {
+  name: "github-openai",
+  colors: {
+    semantic: {
+      // Primary: Near-black for main actions and branding
+      primary: "#24292f",
+      // Secondary: Medium gray for secondary elements
+      secondary: "#57606a",
+      // Accent: Blue for links, focus states, and highlights
+      accent: "#0969da",
+      // Status colors
+      success: "#1a7f37",
+      // GitHub green
+      warning: "#9a6700",
+      // Amber warning
+      danger: "#cf222e",
+      // GitHub red
+      info: "#0969da"
+      // Blue info
+    },
+    surface: {
+      // Pure white background
+      background: "#ffffff",
+      // Light gray surface (GitHub code background style)
+      surface: "#f6f8fa",
+      // White elevated surfaces (modals, cards)
+      elevated: "#ffffff",
+      // Dark semi-transparent overlay
+      overlay: "rgba(27, 31, 36, 0.5)"
+    },
+    text: {
+      // Near-black for primary text
+      primary: "#24292f",
+      // Gray for secondary/muted text
+      secondary: "#57606a",
+      // Light gray for disabled text
+      disabled: "#8c959f",
+      // White for text on dark backgrounds
+      inverse: "#ffffff",
+      // Blue for links
+      link: "#0969da"
+    },
+    border: {
+      // Light gray border (GitHub style)
+      default: "#d0d7de",
+      // Medium gray on hover
+      hover: "#8c959f",
+      // Blue focus ring
+      focus: "#0969da",
+      // Subtle divider
+      divider: "#d8dee4"
+    }
+  },
+  typography: {
+    families: {
+      // System UI font stack (GitHub/Apple style)
+      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+      // Monospace stack
+      mono: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace'
+    },
+    sizes: {
+      xs: "0.75rem",
+      // 12px
+      sm: "0.875rem",
+      // 14px
+      base: "1rem",
+      // 16px
+      lg: "1.125rem",
+      // 18px
+      xl: "1.25rem",
+      // 20px
+      "2xl": "1.5rem",
+      // 24px
+      "3xl": "1.875rem",
+      // 30px
+      "4xl": "2.25rem"
+      // 36px
+    },
+    weights: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700"
+    }
+  },
+  radius: {
+    none: "0",
+    sm: "3px",
+    // GitHub uses smaller radii
+    md: "6px",
+    lg: "8px",
+    xl: "12px",
+    "2xl": "16px",
+    full: "9999px"
+  },
+  shadows: {
+    // Subtle shadows with gray tones
+    sm: "0 1px 0 rgba(27, 31, 36, 0.04)",
+    md: "0 3px 6px rgba(140, 149, 159, 0.15)",
+    lg: "0 8px 24px rgba(140, 149, 159, 0.2)",
+    xl: "0 12px 28px rgba(140, 149, 159, 0.3)"
+  },
+  components: {
+    button: {
+      radius: "6px",
+      paddingX: "16px",
+      paddingY: "5px",
+      fontSize: "14px",
+      fontWeight: "500"
+    },
+    card: {
+      radius: "6px",
+      padding: "16px",
+      shadow: "0 1px 0 rgba(27, 31, 36, 0.04)",
+      borderWidth: "1px"
+    },
+    input: {
+      radius: "6px",
+      paddingX: "12px",
+      paddingY: "5px",
+      borderWidth: "1px",
+      focusRingWidth: "3px"
+    }
+  },
+  cdn: {
+    fonts: {
+      preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+      stylesheets: [
+        // System UI fonts don't need external stylesheets, but we include
+        // Inter as an optional enhancement for consistent cross-platform rendering
+        "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      ]
+    },
+    icons: {
+      script: {
+        url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js"
+      }
+    },
+    scripts: {
+      tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
+      htmx: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
+        integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
+      },
+      alpine: {
+        url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
+        integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
+      }
+    }
+  }
+};
+var DEFAULT_THEME = GITHUB_OPENAI_THEME;
+
+// libs/ui/src/theme/theme.ts
+var DEFAULT_THEME2 = DEFAULT_THEME;
+function mergeThemesCore(base, override) {
+  const baseColors = base.colors ?? { semantic: { primary: "#24292f" } };
+  const filterStrings = (arr) => arr.filter((s) => s !== void 0);
+  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(/* @__PURE__ */ new Set([...base.cdn?.fonts?.preconnect ?? [], ...override.cdn?.fonts?.preconnect ?? []]))
+        ),
+        stylesheets: filterStrings(
+          Array.from(/* @__PURE__ */ 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")
+  };
+}
+function mergeThemes(base, override) {
+  const merged = mergeThemesCore(base, override);
+  let darkVariant;
+  if (override.dark !== void 0) {
+    const darkBase = base.dark ?? base;
+    const { dark: _nestedDark, ...overrideDarkWithoutNested } = override.dark;
+    darkVariant = mergeThemesCore(darkBase, overrideDarkWithoutNested);
+  } else if (base.dark !== void 0) {
+    const { dark: _nestedDark, ...baseDarkWithoutNested } = base.dark;
+    darkVariant = baseDarkWithoutNested;
+  }
+  return {
+    ...merged,
+    dark: darkVariant
+  };
+}
+function createTheme(overrides) {
+  return mergeThemes(DEFAULT_THEME2, overrides);
+}
+function emitColorScale(lines, name, scale) {
+  for (const [shade, value] of Object.entries(scale)) {
+    if (value) lines.push(`--color-${name}-${shade}: ${value};`);
+  }
+}
+function buildThemeCss(theme) {
+  const lines = [];
+  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};`);
+  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};`);
+  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};`);
+  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};`);
+  if (theme.colors.custom) {
+    for (const [key, value] of Object.entries(theme.colors.custom)) {
+      lines.push(`--color-${key}: ${value};`);
+    }
+  }
+  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};`);
+  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};`);
+  if (theme.customVars) {
+    for (const [key, value] of Object.entries(theme.customVars)) {
+      lines.push(`${key}: ${value};`);
+    }
+  }
+  return lines.join("\n      ");
+}
+function buildStyleBlock(theme) {
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  return `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>`;
+}
+export {
+  CDN,
+  CLAUDE_PLATFORM,
+  CUSTOM_PLATFORM,
+  DEFAULT_THEME,
+  GEMINI_PLATFORM,
+  GITHUB_OPENAI_THEME,
+  NGROK_PLATFORM,
+  OPENAI_PLATFORM,
+  PLATFORM_PRESETS,
+  buildCdnScripts,
+  buildCdnScriptsFromTheme,
+  buildFontPreconnect,
+  buildFontPreconnectFromTheme,
+  buildFontStylesheets,
+  buildFontStylesheetsFromTheme,
+  buildStyleBlock,
+  buildThemeCss,
+  canUseCdn,
+  clearScriptCache,
+  createPlatform,
+  createTheme,
+  fetchAndCacheScripts,
+  fetchAndCacheScriptsFromTheme,
+  fetchScript,
+  getCachedScript,
+  getFallbackMode,
+  getPlatform,
+  isScriptCached,
+  mergeThemes,
+  needsInlineScripts,
+  supportsFullInteractivity
+};