@frontmcp/ui 0.5.0

package/src/theme/index.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @file index.ts
+ * @description Theme Module for FrontMCP UI.
+ *
+ * Provides comprehensive theming capabilities including:
+ * - Color palettes and semantic tokens
+ * - Typography and spacing configuration
+ * - CDN resource customization
+ * - Platform-specific configurations
+ * - Theme presets (GitHub/OpenAI default)
+ *
+ * @module @frontmcp/ui/theme
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_THEME = exports.GITHUB_OPENAI_THEME = exports.buildStyleBlock = exports.buildThemeCss = exports.createTheme = exports.mergeThemes = exports.getFallbackMode = exports.supportsFullInteractivity = exports.needsInlineScripts = exports.canUseCdn = exports.createPlatform = exports.getPlatform = exports.PLATFORM_PRESETS = exports.CUSTOM_PLATFORM = exports.NGROK_PLATFORM = exports.GEMINI_PLATFORM = exports.CLAUDE_PLATFORM = exports.OPENAI_PLATFORM = exports.buildCdnScriptsFromTheme = exports.buildCdnScripts = exports.buildFontStylesheetsFromTheme = exports.buildFontStylesheets = exports.buildFontPreconnectFromTheme = exports.buildFontPreconnect = exports.clearScriptCache = exports.isScriptCached = exports.getCachedScript = exports.fetchAndCacheScriptsFromTheme = exports.fetchAndCacheScripts = exports.fetchScript = exports.CDN = void 0;
+// CDN configuration
+var cdn_1 = require("./cdn");
+Object.defineProperty(exports, "CDN", { enumerable: true, get: function () { return cdn_1.CDN; } });
+Object.defineProperty(exports, "fetchScript", { enumerable: true, get: function () { return cdn_1.fetchScript; } });
+Object.defineProperty(exports, "fetchAndCacheScripts", { enumerable: true, get: function () { return cdn_1.fetchAndCacheScripts; } });
+Object.defineProperty(exports, "fetchAndCacheScriptsFromTheme", { enumerable: true, get: function () { return cdn_1.fetchAndCacheScriptsFromTheme; } });
+Object.defineProperty(exports, "getCachedScript", { enumerable: true, get: function () { return cdn_1.getCachedScript; } });
+Object.defineProperty(exports, "isScriptCached", { enumerable: true, get: function () { return cdn_1.isScriptCached; } });
+Object.defineProperty(exports, "clearScriptCache", { enumerable: true, get: function () { return cdn_1.clearScriptCache; } });
+Object.defineProperty(exports, "buildFontPreconnect", { enumerable: true, get: function () { return cdn_1.buildFontPreconnect; } });
+Object.defineProperty(exports, "buildFontPreconnectFromTheme", { enumerable: true, get: function () { return cdn_1.buildFontPreconnectFromTheme; } });
+Object.defineProperty(exports, "buildFontStylesheets", { enumerable: true, get: function () { return cdn_1.buildFontStylesheets; } });
+Object.defineProperty(exports, "buildFontStylesheetsFromTheme", { enumerable: true, get: function () { return cdn_1.buildFontStylesheetsFromTheme; } });
+Object.defineProperty(exports, "buildCdnScripts", { enumerable: true, get: function () { return cdn_1.buildCdnScripts; } });
+Object.defineProperty(exports, "buildCdnScriptsFromTheme", { enumerable: true, get: function () { return cdn_1.buildCdnScriptsFromTheme; } });
+// Platform configurations
+var platforms_1 = require("./platforms");
+Object.defineProperty(exports, "OPENAI_PLATFORM", { enumerable: true, get: function () { return platforms_1.OPENAI_PLATFORM; } });
+Object.defineProperty(exports, "CLAUDE_PLATFORM", { enumerable: true, get: function () { return platforms_1.CLAUDE_PLATFORM; } });
+Object.defineProperty(exports, "GEMINI_PLATFORM", { enumerable: true, get: function () { return platforms_1.GEMINI_PLATFORM; } });
+Object.defineProperty(exports, "NGROK_PLATFORM", { enumerable: true, get: function () { return platforms_1.NGROK_PLATFORM; } });
+Object.defineProperty(exports, "CUSTOM_PLATFORM", { enumerable: true, get: function () { return platforms_1.CUSTOM_PLATFORM; } });
+Object.defineProperty(exports, "PLATFORM_PRESETS", { enumerable: true, get: function () { return platforms_1.PLATFORM_PRESETS; } });
+Object.defineProperty(exports, "getPlatform", { enumerable: true, get: function () { return platforms_1.getPlatform; } });
+Object.defineProperty(exports, "createPlatform", { enumerable: true, get: function () { return platforms_1.createPlatform; } });
+Object.defineProperty(exports, "canUseCdn", { enumerable: true, get: function () { return platforms_1.canUseCdn; } });
+Object.defineProperty(exports, "needsInlineScripts", { enumerable: true, get: function () { return platforms_1.needsInlineScripts; } });
+Object.defineProperty(exports, "supportsFullInteractivity", { enumerable: true, get: function () { return platforms_1.supportsFullInteractivity; } });
+Object.defineProperty(exports, "getFallbackMode", { enumerable: true, get: function () { return platforms_1.getFallbackMode; } });
+// Theme configuration and types
+var theme_1 = require("./theme");
+// Theme utilities
+Object.defineProperty(exports, "mergeThemes", { enumerable: true, get: function () { return theme_1.mergeThemes; } });
+Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return theme_1.createTheme; } });
+Object.defineProperty(exports, "buildThemeCss", { enumerable: true, get: function () { return theme_1.buildThemeCss; } });
+Object.defineProperty(exports, "buildStyleBlock", { enumerable: true, get: function () { return theme_1.buildStyleBlock; } });
+// Theme presets (includes DEFAULT_THEME)
+var presets_1 = require("./presets");
+Object.defineProperty(exports, "GITHUB_OPENAI_THEME", { enumerable: true, get: function () { return presets_1.GITHUB_OPENAI_THEME; } });
+Object.defineProperty(exports, "DEFAULT_THEME", { enumerable: true, get: function () { return presets_1.DEFAULT_THEME; } });
+//# sourceMappingURL=index.js.map

package/src/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;GAYG;;;AAEH,oBAAoB;AACpB,6BAgBe;AAfb,0FAAA,GAAG,OAAA;AAGH,kGAAA,WAAW,OAAA;AACX,2GAAA,oBAAoB,OAAA;AACpB,oHAAA,6BAA6B,OAAA;AAC7B,sGAAA,eAAe,OAAA;AACf,qGAAA,cAAc,OAAA;AACd,uGAAA,gBAAgB,OAAA;AAChB,0GAAA,mBAAmB,OAAA;AACnB,mHAAA,4BAA4B,OAAA;AAC5B,2GAAA,oBAAoB,OAAA;AACpB,oHAAA,6BAA6B,OAAA;AAC7B,sGAAA,eAAe,OAAA;AACf,+GAAA,wBAAwB,OAAA;AAG1B,0BAA0B;AAC1B,yCAiBqB;AAZnB,4GAAA,eAAe,OAAA;AACf,4GAAA,eAAe,OAAA;AACf,4GAAA,eAAe,OAAA;AACf,2GAAA,cAAc,OAAA;AACd,4GAAA,eAAe,OAAA;AACf,6GAAA,gBAAgB,OAAA;AAChB,wGAAA,WAAW,OAAA;AACX,2GAAA,cAAc,OAAA;AACd,sGAAA,SAAS,OAAA;AACT,+GAAA,kBAAkB,OAAA;AAClB,sHAAA,yBAAyB,OAAA;AACzB,4GAAA,eAAe,OAAA;AAGjB,gCAAgC;AAChC,iCAqCiB;AALf,kBAAkB;AAClB,oGAAA,WAAW,OAAA;AACX,oGAAA,WAAW,OAAA;AACX,sGAAA,aAAa,OAAA;AACb,wGAAA,eAAe,OAAA;AAGjB,yCAAyC;AACzC,qCAA+D;AAAtD,8GAAA,mBAAmB,OAAA;AAAE,wGAAA,aAAa,OAAA","sourcesContent":["/**\n * @file index.ts\n * @description Theme Module for FrontMCP UI.\n *\n * Provides comprehensive theming capabilities including:\n * - Color palettes and semantic tokens\n * - Typography and spacing configuration\n * - CDN resource customization\n * - Platform-specific configurations\n * - Theme presets (GitHub/OpenAI default)\n *\n * @module @frontmcp/ui/theme\n */\n\n// CDN configuration\nexport {\n  CDN,\n  type CdnScriptOptions,\n  type ThemeCdnScriptOptions,\n  fetchScript,\n  fetchAndCacheScripts,\n  fetchAndCacheScriptsFromTheme,\n  getCachedScript,\n  isScriptCached,\n  clearScriptCache,\n  buildFontPreconnect,\n  buildFontPreconnectFromTheme,\n  buildFontStylesheets,\n  buildFontStylesheetsFromTheme,\n  buildCdnScripts,\n  buildCdnScriptsFromTheme,\n} from './cdn';\n\n// Platform configurations\nexport {\n  type PlatformId,\n  type NetworkMode,\n  type ScriptStrategy,\n  type PlatformCapabilities,\n  OPENAI_PLATFORM,\n  CLAUDE_PLATFORM,\n  GEMINI_PLATFORM,\n  NGROK_PLATFORM,\n  CUSTOM_PLATFORM,\n  PLATFORM_PRESETS,\n  getPlatform,\n  createPlatform,\n  canUseCdn,\n  needsInlineScripts,\n  supportsFullInteractivity,\n  getFallbackMode,\n} from './platforms';\n\n// Theme configuration and types\nexport {\n  // Utility types\n  type DeepPartial,\n  // Color types\n  type ColorScale,\n  type SemanticColors,\n  type SurfaceColors,\n  type TextColors,\n  type BorderColors,\n  type ThemeColors,\n  // Typography types\n  type FontFamilies,\n  type FontSizes,\n  type FontWeights,\n  type ThemeTypography,\n  // Spacing types\n  type ThemeSpacing,\n  type ThemeRadius,\n  type ThemeShadows,\n  // Component tokens\n  type ButtonTokens,\n  type CardTokens,\n  type InputTokens,\n  type ComponentTokens,\n  // CDN configuration types\n  type CdnScriptResource,\n  type ThemeCdnFonts,\n  type ThemeCdnIcons,\n  type ThemeCdnScripts,\n  type ThemeCdnConfig,\n  // Main theme config\n  type ThemeConfig,\n  // Theme utilities\n  mergeThemes,\n  createTheme,\n  buildThemeCss,\n  buildStyleBlock,\n} from './theme';\n\n// Theme presets (includes DEFAULT_THEME)\nexport { GITHUB_OPENAI_THEME, DEFAULT_THEME } from './presets';\n"]}

package/src/theme/platforms.d.ts

@@ -0,0 +1,106 @@
+/**
+ * LLM Platform Configurations
+ *
+ * Different LLM platforms have different capabilities for rendering UI:
+ * - OpenAI: Full support (Canvas/Apps SDK) - Tailwind + HTMX with network
+ * - Claude: Artifacts mode - Tailwind but NO network (scripts must be inlined)
+ * - Gemini: No interactive widget support
+ * - Custom MCP: Configurable based on client capabilities
+ *
+ * This module provides platform presets and utilities for building
+ * compatible UI across different environments.
+ */
+/**
+ * Known LLM platform identifiers
+ */
+export type PlatformId = 'openai' | 'claude' | 'gemini' | 'ngrok' | 'custom';
+/**
+ * Network access mode for the platform
+ */
+export type NetworkMode = 'full' | 'blocked' | 'limited';
+/**
+ * Script loading strategy
+ */
+export type ScriptStrategy = 'cdn' | 'inline' | 'cached';
+/**
+ * Platform capabilities configuration
+ */
+export interface PlatformCapabilities {
+    /** Platform identifier */
+    id: PlatformId;
+    /** Human-readable name */
+    name: string;
+    /** Whether platform supports interactive widgets */
+    supportsWidgets: boolean;
+    /** Whether platform supports Tailwind CSS */
+    supportsTailwind: boolean;
+    /** Whether platform supports HTMX/dynamic content */
+    supportsHtmx: boolean;
+    /** Network access mode */
+    networkMode: NetworkMode;
+    /** How to load scripts */
+    scriptStrategy: ScriptStrategy;
+    /** Allowed domains for network requests (if limited) */
+    allowedDomains?: string[];
+    /** Content Security Policy restrictions */
+    cspRestrictions?: string[];
+    /** Maximum inline script size (bytes) */
+    maxInlineSize?: number;
+    /** Additional platform-specific options */
+    options?: Record<string, unknown>;
+}
+/**
+ * OpenAI Platform Configuration
+ * Full support via Canvas/Apps SDK
+ */
+export declare const OPENAI_PLATFORM: PlatformCapabilities;
+/**
+ * Claude Platform Configuration
+ * Artifacts mode - no network access, must inline scripts
+ */
+export declare const CLAUDE_PLATFORM: PlatformCapabilities;
+/**
+ * Gemini Platform Configuration
+ * No interactive widget support
+ */
+export declare const GEMINI_PLATFORM: PlatformCapabilities;
+/**
+ * Ngrok Platform Configuration
+ * Bridge/tunnel - essential for HTMX
+ */
+export declare const NGROK_PLATFORM: PlatformCapabilities;
+/**
+ * Default custom MCP client configuration
+ */
+export declare const CUSTOM_PLATFORM: PlatformCapabilities;
+/**
+ * All platform presets
+ */
+export declare const PLATFORM_PRESETS: Record<PlatformId, PlatformCapabilities>;
+/**
+ * Get platform capabilities by ID
+ */
+export declare function getPlatform(id: PlatformId): PlatformCapabilities;
+/**
+ * Create custom platform configuration
+ */
+export declare function createPlatform(base: Partial<PlatformCapabilities> & {
+    id: PlatformId;
+    name: string;
+}): PlatformCapabilities;
+/**
+ * Check if platform can use CDN resources
+ */
+export declare function canUseCdn(platform: PlatformCapabilities): boolean;
+/**
+ * Check if platform needs inlined scripts
+ */
+export declare function needsInlineScripts(platform: PlatformCapabilities): boolean;
+/**
+ * Check if platform supports full interactivity
+ */
+export declare function supportsFullInteractivity(platform: PlatformCapabilities): boolean;
+/**
+ * Get fallback rendering mode for unsupported platforms
+ */
+export declare function getFallbackMode(platform: PlatformCapabilities): 'html' | 'markdown' | 'text';

package/src/theme/platforms.js

@@ -0,0 +1,161 @@
+"use strict";
+/**
+ * LLM Platform Configurations
+ *
+ * Different LLM platforms have different capabilities for rendering UI:
+ * - OpenAI: Full support (Canvas/Apps SDK) - Tailwind + HTMX with network
+ * - Claude: Artifacts mode - Tailwind but NO network (scripts must be inlined)
+ * - Gemini: No interactive widget support
+ * - Custom MCP: Configurable based on client capabilities
+ *
+ * This module provides platform presets and utilities for building
+ * compatible UI across different environments.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLATFORM_PRESETS = exports.CUSTOM_PLATFORM = exports.NGROK_PLATFORM = exports.GEMINI_PLATFORM = exports.CLAUDE_PLATFORM = exports.OPENAI_PLATFORM = void 0;
+exports.getPlatform = getPlatform;
+exports.createPlatform = createPlatform;
+exports.canUseCdn = canUseCdn;
+exports.needsInlineScripts = needsInlineScripts;
+exports.supportsFullInteractivity = supportsFullInteractivity;
+exports.getFallbackMode = getFallbackMode;
+// ============================================
+// Platform Presets
+// ============================================
+/**
+ * OpenAI Platform Configuration
+ * Full support via Canvas/Apps SDK
+ */
+exports.OPENAI_PLATFORM = {
+    id: 'openai',
+    name: 'OpenAI',
+    supportsWidgets: true,
+    supportsTailwind: true,
+    supportsHtmx: true,
+    networkMode: 'full',
+    scriptStrategy: 'cdn',
+    options: {
+        sdk: 'apps-sdk',
+        version: '1.0',
+    },
+};
+/**
+ * Claude Platform Configuration
+ * Artifacts mode - no network access, must inline scripts
+ */
+exports.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
+    },
+};
+/**
+ * Gemini Platform Configuration
+ * No interactive widget support
+ */
+exports.GEMINI_PLATFORM = {
+    id: 'gemini',
+    name: 'Gemini',
+    supportsWidgets: false,
+    supportsTailwind: false,
+    supportsHtmx: false,
+    networkMode: 'blocked',
+    scriptStrategy: 'inline',
+    options: {
+        fallback: 'markdown', // Fall back to markdown rendering
+    },
+};
+/**
+ * Ngrok Platform Configuration
+ * Bridge/tunnel - essential for HTMX
+ */
+exports.NGROK_PLATFORM = {
+    id: 'ngrok',
+    name: 'Ngrok Tunnel',
+    supportsWidgets: true,
+    supportsTailwind: true,
+    supportsHtmx: true,
+    networkMode: 'full',
+    scriptStrategy: 'cdn',
+    options: {
+        tunnelRequired: true,
+    },
+};
+/**
+ * Default custom MCP client configuration
+ */
+exports.CUSTOM_PLATFORM = {
+    id: 'custom',
+    name: 'Custom MCP Client',
+    supportsWidgets: true,
+    supportsTailwind: true,
+    supportsHtmx: true,
+    networkMode: 'full',
+    scriptStrategy: 'cdn',
+};
+/**
+ * All platform presets
+ */
+exports.PLATFORM_PRESETS = {
+    openai: exports.OPENAI_PLATFORM,
+    claude: exports.CLAUDE_PLATFORM,
+    gemini: exports.GEMINI_PLATFORM,
+    ngrok: exports.NGROK_PLATFORM,
+    custom: exports.CUSTOM_PLATFORM,
+};
+// ============================================
+// Platform Detection & Utilities
+// ============================================
+/**
+ * Get platform capabilities by ID
+ */
+function getPlatform(id) {
+    return exports.PLATFORM_PRESETS[id] ?? exports.CUSTOM_PLATFORM;
+}
+/**
+ * Create custom platform configuration
+ */
+function createPlatform(base) {
+    const preset = exports.PLATFORM_PRESETS[base.id] ?? exports.CUSTOM_PLATFORM;
+    return { ...preset, ...base };
+}
+/**
+ * Check if platform can use CDN resources
+ */
+function canUseCdn(platform) {
+    return platform.networkMode === 'full' && platform.scriptStrategy === 'cdn';
+}
+/**
+ * Check if platform needs inlined scripts
+ */
+function needsInlineScripts(platform) {
+    return platform.scriptStrategy === 'inline' || platform.networkMode === 'blocked';
+}
+/**
+ * Check if platform supports full interactivity
+ */
+function supportsFullInteractivity(platform) {
+    return platform.supportsWidgets && platform.supportsHtmx && platform.networkMode === 'full';
+}
+/**
+ * Get fallback rendering mode for unsupported platforms
+ */
+function getFallbackMode(platform) {
+    if (platform.supportsWidgets && platform.supportsTailwind) {
+        return 'html';
+    }
+    if (platform.options?.['fallback'] === 'markdown') {
+        return 'markdown';
+    }
+    return 'text';
+}
+//# sourceMappingURL=platforms.js.map

package/src/theme/platforms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"platforms.js","sourceRoot":"","sources":["../../../src/theme/platforms.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * LLM Platform Configurations\n *\n * Different LLM platforms have different capabilities for rendering UI:\n * - OpenAI: Full support (Canvas/Apps SDK) - Tailwind + HTMX with network\n * - Claude: Artifacts mode - Tailwind but NO network (scripts must be inlined)\n * - Gemini: No interactive widget support\n * - Custom MCP: Configurable based on client capabilities\n *\n * This module provides platform presets and utilities for building\n * compatible UI across different environments.\n */\n\n// ============================================\n// Platform Types\n// ============================================\n\n/**\n * Known LLM platform identifiers\n */\nexport type PlatformId = 'openai' | 'claude' | 'gemini' | 'ngrok' | 'custom';\n\n/**\n * Network access mode for the platform\n */\nexport type NetworkMode =\n  | 'full' // Full network access (CDN, API calls)\n  | 'blocked' // No network access (must inline everything)\n  | 'limited'; // Limited network (specific domains only)\n\n/**\n * Script loading strategy\n */\nexport type ScriptStrategy =\n  | 'cdn' // Load from CDN URLs\n  | 'inline' // Inline script content directly\n  | 'cached'; // Load once and cache for reuse\n\n/**\n * Platform capabilities configuration\n */\nexport interface PlatformCapabilities {\n  /** Platform identifier */\n  id: PlatformId;\n\n  /** Human-readable name */\n  name: string;\n\n  /** Whether platform supports interactive widgets */\n  supportsWidgets: boolean;\n\n  /** Whether platform supports Tailwind CSS */\n  supportsTailwind: boolean;\n\n  /** Whether platform supports HTMX/dynamic content */\n  supportsHtmx: boolean;\n\n  /** Network access mode */\n  networkMode: NetworkMode;\n\n  /** How to load scripts */\n  scriptStrategy: ScriptStrategy;\n\n  /** Allowed domains for network requests (if limited) */\n  allowedDomains?: string[];\n\n  /** Content Security Policy restrictions */\n  cspRestrictions?: string[];\n\n  /** Maximum inline script size (bytes) */\n  maxInlineSize?: number;\n\n  /** Additional platform-specific options */\n  options?: Record<string, unknown>;\n}\n\n// ============================================\n// Platform Presets\n// ============================================\n\n/**\n * OpenAI Platform Configuration\n * Full support via Canvas/Apps SDK\n */\nexport const OPENAI_PLATFORM: PlatformCapabilities = {\n  id: 'openai',\n  name: 'OpenAI',\n  supportsWidgets: true,\n  supportsTailwind: true,\n  supportsHtmx: true,\n  networkMode: 'full',\n  scriptStrategy: 'cdn',\n  options: {\n    sdk: 'apps-sdk',\n    version: '1.0',\n  },\n};\n\n/**\n * Claude Platform Configuration\n * Artifacts mode - no network access, must inline scripts\n */\nexport const CLAUDE_PLATFORM: PlatformCapabilities = {\n  id: 'claude',\n  name: 'Claude (Artifacts)',\n  supportsWidgets: true,\n  supportsTailwind: true,\n  supportsHtmx: false, // Network blocked, HTMX won't work for API calls\n  networkMode: 'blocked',\n  scriptStrategy: 'inline',\n  maxInlineSize: 100 * 1024, // 100KB limit for artifacts\n  cspRestrictions: [\"script-src 'unsafe-inline'\", \"connect-src 'none'\"],\n  options: {\n    mode: 'artifacts',\n    framework: 'react', // Claude artifacts prefer React\n  },\n};\n\n/**\n * Gemini Platform Configuration\n * No interactive widget support\n */\nexport const GEMINI_PLATFORM: PlatformCapabilities = {\n  id: 'gemini',\n  name: 'Gemini',\n  supportsWidgets: false,\n  supportsTailwind: false,\n  supportsHtmx: false,\n  networkMode: 'blocked',\n  scriptStrategy: 'inline',\n  options: {\n    fallback: 'markdown', // Fall back to markdown rendering\n  },\n};\n\n/**\n * Ngrok Platform Configuration\n * Bridge/tunnel - essential for HTMX\n */\nexport const NGROK_PLATFORM: PlatformCapabilities = {\n  id: 'ngrok',\n  name: 'Ngrok Tunnel',\n  supportsWidgets: true,\n  supportsTailwind: true,\n  supportsHtmx: true,\n  networkMode: 'full',\n  scriptStrategy: 'cdn',\n  options: {\n    tunnelRequired: true,\n  },\n};\n\n/**\n * Default custom MCP client configuration\n */\nexport const CUSTOM_PLATFORM: PlatformCapabilities = {\n  id: 'custom',\n  name: 'Custom MCP Client',\n  supportsWidgets: true,\n  supportsTailwind: true,\n  supportsHtmx: true,\n  networkMode: 'full',\n  scriptStrategy: 'cdn',\n};\n\n/**\n * All platform presets\n */\nexport const PLATFORM_PRESETS: Record<PlatformId, PlatformCapabilities> = {\n  openai: OPENAI_PLATFORM,\n  claude: CLAUDE_PLATFORM,\n  gemini: GEMINI_PLATFORM,\n  ngrok: NGROK_PLATFORM,\n  custom: CUSTOM_PLATFORM,\n};\n\n// ============================================\n// Platform Detection & Utilities\n// ============================================\n\n/**\n * Get platform capabilities by ID\n */\nexport function getPlatform(id: PlatformId): PlatformCapabilities {\n  return PLATFORM_PRESETS[id] ?? CUSTOM_PLATFORM;\n}\n\n/**\n * Create custom platform configuration\n */\nexport function createPlatform(\n  base: Partial<PlatformCapabilities> & { id: PlatformId; name: string },\n): PlatformCapabilities {\n  const preset = PLATFORM_PRESETS[base.id] ?? CUSTOM_PLATFORM;\n  return { ...preset, ...base };\n}\n\n/**\n * Check if platform can use CDN resources\n */\nexport function canUseCdn(platform: PlatformCapabilities): boolean {\n  return platform.networkMode === 'full' && platform.scriptStrategy === 'cdn';\n}\n\n/**\n * Check if platform needs inlined scripts\n */\nexport function needsInlineScripts(platform: PlatformCapabilities): boolean {\n  return platform.scriptStrategy === 'inline' || platform.networkMode === 'blocked';\n}\n\n/**\n * Check if platform supports full interactivity\n */\nexport function supportsFullInteractivity(platform: PlatformCapabilities): boolean {\n  return platform.supportsWidgets && platform.supportsHtmx && platform.networkMode === 'full';\n}\n\n/**\n * Get fallback rendering mode for unsupported platforms\n */\nexport function getFallbackMode(platform: PlatformCapabilities): 'html' | 'markdown' | 'text' {\n  if (platform.supportsWidgets && platform.supportsTailwind) {\n    return 'html';\n  }\n  if (platform.options?.['fallback'] === 'markdown') {\n    return 'markdown';\n  }\n  return 'text';\n}\n"]}

package/src/theme/presets/github-openai.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @file github-openai.ts
+ * @description Default theme with GitHub/OpenAI gray-black aesthetic.
+ *
+ * This is the new default theme for @frontmcp/ui, featuring a monochromatic
+ * gray-black color palette inspired by GitHub and OpenAI's design systems.
+ * Includes system UI font stack, smaller border radii, and subtle shadows.
+ *
+ * @example
+ * ```typescript
+ * import { GITHUB_OPENAI_THEME, createTheme } from '@frontmcp/ui';
+ *
+ * // Use directly
+ * baseLayout(content, { theme: GITHUB_OPENAI_THEME });
+ *
+ * // Or extend
+ * const myTheme = createTheme({
+ *   colors: { semantic: { primary: '#0969da' } },
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/theme/presets/github-openai
+ */
+import type { ThemeConfig } from '../theme';
+/**
+ * GitHub/OpenAI inspired default theme
+ *
+ * Color palette:
+ * - Primary: #24292f (near-black for primary actions)
+ * - Secondary: #57606a (medium gray for secondary)
+ * - Accent: #0969da (blue accent for links/highlights)
+ * - Success: #1a7f37 (GitHub green)
+ * - Warning: #9a6700 (amber warning)
+ * - Danger: #cf222e (GitHub red)
+ *
+ * Typography:
+ * - System UI font stack (Apple/GitHub style)
+ * - Monospace: ui-monospace, SFMono-Regular
+ *
+ * Design tokens:
+ * - Smaller border radii (6px default)
+ * - Subtle shadows with gray tones
+ * - Light gray borders (#d0d7de)
+ */
+export declare const GITHUB_OPENAI_THEME: ThemeConfig;
+/**
+ * Export as DEFAULT_THEME for backwards compatibility
+ */
+export declare const DEFAULT_THEME: ThemeConfig;

package/src/theme/presets/github-openai.js

@@ -0,0 +1,189 @@
+"use strict";
+/**
+ * @file github-openai.ts
+ * @description Default theme with GitHub/OpenAI gray-black aesthetic.
+ *
+ * This is the new default theme for @frontmcp/ui, featuring a monochromatic
+ * gray-black color palette inspired by GitHub and OpenAI's design systems.
+ * Includes system UI font stack, smaller border radii, and subtle shadows.
+ *
+ * @example
+ * ```typescript
+ * import { GITHUB_OPENAI_THEME, createTheme } from '@frontmcp/ui';
+ *
+ * // Use directly
+ * baseLayout(content, { theme: GITHUB_OPENAI_THEME });
+ *
+ * // Or extend
+ * const myTheme = createTheme({
+ *   colors: { semantic: { primary: '#0969da' } },
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/theme/presets/github-openai
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_THEME = exports.GITHUB_OPENAI_THEME = void 0;
+/**
+ * GitHub/OpenAI inspired default theme
+ *
+ * Color palette:
+ * - Primary: #24292f (near-black for primary actions)
+ * - Secondary: #57606a (medium gray for secondary)
+ * - Accent: #0969da (blue accent for links/highlights)
+ * - Success: #1a7f37 (GitHub green)
+ * - Warning: #9a6700 (amber warning)
+ * - Danger: #cf222e (GitHub red)
+ *
+ * Typography:
+ * - System UI font stack (Apple/GitHub style)
+ * - Monospace: ui-monospace, SFMono-Regular
+ *
+ * Design tokens:
+ * - Smaller border radii (6px default)
+ * - Subtle shadows with gray tones
+ * - Light gray borders (#d0d7de)
+ */
+exports.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',
+            },
+        },
+    },
+};
+/**
+ * Export as DEFAULT_THEME for backwards compatibility
+ */
+exports.DEFAULT_THEME = exports.GITHUB_OPENAI_THEME;
+//# sourceMappingURL=github-openai.js.map

package/src/theme/presets/github-openai.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"github-openai.js","sourceRoot":"","sources":["../../../../src/theme/presets/github-openai.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file github-openai.ts\n * @description Default theme with GitHub/OpenAI gray-black aesthetic.\n *\n * This is the new default theme for @frontmcp/ui, featuring a monochromatic\n * gray-black color palette inspired by GitHub and OpenAI's design systems.\n * Includes system UI font stack, smaller border radii, and subtle shadows.\n *\n * @example\n * ```typescript\n * import { GITHUB_OPENAI_THEME, createTheme } from '@frontmcp/ui';\n *\n * // Use directly\n * baseLayout(content, { theme: GITHUB_OPENAI_THEME });\n *\n * // Or extend\n * const myTheme = createTheme({\n *   colors: { semantic: { primary: '#0969da' } },\n * });\n * ```\n *\n * @module @frontmcp/ui/theme/presets/github-openai\n */\n\nimport type { ThemeConfig } from '../theme';\n\n/**\n * GitHub/OpenAI inspired default theme\n *\n * Color palette:\n * - Primary: #24292f (near-black for primary actions)\n * - Secondary: #57606a (medium gray for secondary)\n * - Accent: #0969da (blue accent for links/highlights)\n * - Success: #1a7f37 (GitHub green)\n * - Warning: #9a6700 (amber warning)\n * - Danger: #cf222e (GitHub red)\n *\n * Typography:\n * - System UI font stack (Apple/GitHub style)\n * - Monospace: ui-monospace, SFMono-Regular\n *\n * Design tokens:\n * - Smaller border radii (6px default)\n * - Subtle shadows with gray tones\n * - Light gray borders (#d0d7de)\n */\nexport const GITHUB_OPENAI_THEME: ThemeConfig = {\n  name: 'github-openai',\n\n  colors: {\n    semantic: {\n      // Primary: Near-black for main actions and branding\n      primary: '#24292f',\n      // Secondary: Medium gray for secondary elements\n      secondary: '#57606a',\n      // Accent: Blue for links, focus states, and highlights\n      accent: '#0969da',\n      // Status colors\n      success: '#1a7f37', // GitHub green\n      warning: '#9a6700', // Amber warning\n      danger: '#cf222e', // GitHub red\n      info: '#0969da', // Blue info\n    },\n    surface: {\n      // Pure white background\n      background: '#ffffff',\n      // Light gray surface (GitHub code background style)\n      surface: '#f6f8fa',\n      // White elevated surfaces (modals, cards)\n      elevated: '#ffffff',\n      // Dark semi-transparent overlay\n      overlay: 'rgba(27, 31, 36, 0.5)',\n    },\n    text: {\n      // Near-black for primary text\n      primary: '#24292f',\n      // Gray for secondary/muted text\n      secondary: '#57606a',\n      // Light gray for disabled text\n      disabled: '#8c959f',\n      // White for text on dark backgrounds\n      inverse: '#ffffff',\n      // Blue for links\n      link: '#0969da',\n    },\n    border: {\n      // Light gray border (GitHub style)\n      default: '#d0d7de',\n      // Medium gray on hover\n      hover: '#8c959f',\n      // Blue focus ring\n      focus: '#0969da',\n      // Subtle divider\n      divider: '#d8dee4',\n    },\n  },\n\n  typography: {\n    families: {\n      // System UI font stack (GitHub/Apple style)\n      sans: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"',\n      // Monospace stack\n      mono: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, \"Liberation Mono\", monospace',\n    },\n    sizes: {\n      xs: '0.75rem', // 12px\n      sm: '0.875rem', // 14px\n      base: '1rem', // 16px\n      lg: '1.125rem', // 18px\n      xl: '1.25rem', // 20px\n      '2xl': '1.5rem', // 24px\n      '3xl': '1.875rem', // 30px\n      '4xl': '2.25rem', // 36px\n    },\n    weights: {\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n    },\n  },\n\n  radius: {\n    none: '0',\n    sm: '3px', // GitHub uses smaller radii\n    md: '6px',\n    lg: '8px',\n    xl: '12px',\n    '2xl': '16px',\n    full: '9999px',\n  },\n\n  shadows: {\n    // Subtle shadows with gray tones\n    sm: '0 1px 0 rgba(27, 31, 36, 0.04)',\n    md: '0 3px 6px rgba(140, 149, 159, 0.15)',\n    lg: '0 8px 24px rgba(140, 149, 159, 0.2)',\n    xl: '0 12px 28px rgba(140, 149, 159, 0.3)',\n  },\n\n  components: {\n    button: {\n      radius: '6px',\n      paddingX: '16px',\n      paddingY: '5px',\n      fontSize: '14px',\n      fontWeight: '500',\n    },\n    card: {\n      radius: '6px',\n      padding: '16px',\n      shadow: '0 1px 0 rgba(27, 31, 36, 0.04)',\n      borderWidth: '1px',\n    },\n    input: {\n      radius: '6px',\n      paddingX: '12px',\n      paddingY: '5px',\n      borderWidth: '1px',\n      focusRingWidth: '3px',\n    },\n  },\n\n  cdn: {\n    fonts: {\n      preconnect: ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'],\n      stylesheets: [\n        // System UI fonts don't need external stylesheets, but we include\n        // Inter as an optional enhancement for consistent cross-platform rendering\n        'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',\n      ],\n    },\n    icons: {\n      script: {\n        url: 'https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js',\n      },\n    },\n    scripts: {\n      tailwind: 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4',\n      htmx: {\n        url: 'https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js',\n        integrity: 'sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA==',\n      },\n      alpine: {\n        url: 'https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js',\n        integrity: 'sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz',\n      },\n    },\n  },\n};\n\n/**\n * Export as DEFAULT_THEME for backwards compatibility\n */\nexport const DEFAULT_THEME = GITHUB_OPENAI_THEME;\n"]}

package/src/theme/presets/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @file index.ts
+ * @description Theme presets module exports.
+ *
+ * Provides pre-configured theme presets for different design aesthetics.
+ * The GitHub/OpenAI theme is the default for all @frontmcp/ui components.
+ *
+ * @module @frontmcp/ui/theme/presets
+ */
+export { GITHUB_OPENAI_THEME, DEFAULT_THEME } from './github-openai';

package/src/theme/presets/index.js

@@ -0,0 +1,17 @@
+"use strict";
+/**
+ * @file index.ts
+ * @description Theme presets module exports.
+ *
+ * Provides pre-configured theme presets for different design aesthetics.
+ * The GitHub/OpenAI theme is the default for all @frontmcp/ui components.
+ *
+ * @module @frontmcp/ui/theme/presets
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_THEME = exports.GITHUB_OPENAI_THEME = void 0;
+// GitHub/OpenAI theme (default)
+var github_openai_1 = require("./github-openai");
+Object.defineProperty(exports, "GITHUB_OPENAI_THEME", { enumerable: true, get: function () { return github_openai_1.GITHUB_OPENAI_THEME; } });
+Object.defineProperty(exports, "DEFAULT_THEME", { enumerable: true, get: function () { return github_openai_1.DEFAULT_THEME; } });
+//# sourceMappingURL=index.js.map

package/src/theme/presets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/theme/presets/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,gCAAgC;AAChC,iDAAqE;AAA5D,oHAAA,mBAAmB,OAAA;AAAE,8GAAA,aAAa,OAAA","sourcesContent":["/**\n * @file index.ts\n * @description Theme presets module exports.\n *\n * Provides pre-configured theme presets for different design aesthetics.\n * The GitHub/OpenAI theme is the default for all @frontmcp/ui components.\n *\n * @module @frontmcp/ui/theme/presets\n */\n\n// GitHub/OpenAI theme (default)\nexport { GITHUB_OPENAI_THEME, DEFAULT_THEME } from './github-openai';\n"]}