@frontmcp/ui 0.5.0 → 0.6.0

package/esm/theme/cdn.d.ts

@@ -0,0 +1,195 @@
+/**
+ * @file cdn.ts
+ * @description CDN Configuration for FrontMCP UI.
+ *
+ * Centralized configuration for all CDN resources used by FrontMCP UI.
+ * All resources are loaded at runtime - no build step required.
+ *
+ * For platforms with blocked network (e.g., Claude Artifacts),
+ * scripts can be fetched once and cached for inline injection.
+ *
+ * CDN URLs can be customized via theme configuration for:
+ * - Using private CDN mirrors
+ * - Self-hosting resources
+ * - Compliance with CSP policies
+ *
+ * @example
+ * ```typescript
+ * import { buildCdnScriptsFromTheme, DEFAULT_THEME } from '@frontmcp/ui';
+ *
+ * // Use default CDN URLs
+ * const scripts = buildCdnScripts();
+ *
+ * // Use theme-configured CDN URLs
+ * const themedScripts = buildCdnScriptsFromTheme(DEFAULT_THEME);
+ * ```
+ *
+ * @module @frontmcp/ui/theme/cdn
+ */
+import type { ThemeConfig } from './theme';
+/**
+ * CDN resource configuration
+ */
+export declare const CDN: {
+    /**
+     * Tailwind CSS v4 Browser CDN
+     * Generates styles on-the-fly with @theme support
+     * @see https://tailwindcss.com/docs/installation/play-cdn
+     */
+    readonly 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
+     */
+    readonly htmx: {
+        readonly url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js";
+        readonly integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA==";
+    };
+    /**
+     * Alpine.js - Lightweight reactive framework
+     * Used for more complex client-side interactions
+     * @see https://alpinejs.dev
+     */
+    readonly alpine: {
+        readonly url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js";
+        readonly integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz";
+    };
+    /**
+     * Google Fonts - Inter for modern UI typography
+     */
+    readonly fonts: {
+        readonly preconnect: readonly ["https://fonts.googleapis.com", "https://fonts.gstatic.com"];
+        readonly inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
+        readonly mono: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap";
+    };
+    /**
+     * Lucide Icons - Beautiful & consistent icons
+     * @see https://lucide.dev
+     */
+    readonly icons: {
+        readonly url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js";
+        readonly integrity: "sha384-wpLmHb7v7V1LsEuTmPQ9tXqWZvTtRWWVqJuE+Yz6X0I6O2T6bHJVeXH1lVWqF4qE";
+    };
+};
+/**
+ * Fetch a script and cache its content
+ */
+export declare function fetchScript(url: string): Promise<string>;
+/**
+ * Fetch and cache all required scripts for offline use
+ * Call this at startup to prepare for blocked-network platforms
+ */
+export declare function fetchAndCacheScripts(options?: {
+    tailwind?: boolean;
+    htmx?: boolean;
+    alpine?: boolean;
+    icons?: boolean;
+}): Promise<Map<string, string>>;
+/**
+ * Get cached script content
+ */
+export declare function getCachedScript(url: string): string | undefined;
+/**
+ * Check if a script is cached
+ */
+export declare function isScriptCached(url: string): boolean;
+/**
+ * Clear the script cache
+ */
+export declare function clearScriptCache(): void;
+/**
+ * Options for building CDN script tags
+ */
+export interface CdnScriptOptions {
+    /** Include Tailwind CSS (default: true) */
+    tailwind?: boolean;
+    /** Include HTMX (default: true) */
+    htmx?: boolean;
+    /** Include Alpine.js (default: false) */
+    alpine?: boolean;
+    /** Include Lucide icons (default: false) */
+    icons?: boolean;
+    /** Include Inter font (default: true) */
+    interFont?: boolean;
+    /** Include JetBrains Mono font (default: false) */
+    monoFont?: boolean;
+    /** Use inline scripts from cache (for blocked network) */
+    inline?: boolean;
+}
+/**
+ * Build font preconnect links
+ */
+export declare function buildFontPreconnect(): string;
+/**
+ * Build font stylesheet links
+ */
+export declare function buildFontStylesheets(options?: {
+    inter?: boolean;
+    mono?: boolean;
+}): string;
+/**
+ * Build all CDN script tags based on options
+ *
+ * @remarks
+ * When `inline: true` is specified, scripts must be pre-cached via `fetchAndCacheScripts()`.
+ * Uncached scripts will be silently skipped with a console warning.
+ */
+export declare function buildCdnScripts(options?: CdnScriptOptions): string;
+/**
+ * Options for theme-aware CDN script building
+ */
+export interface ThemeCdnScriptOptions {
+    /** Include Tailwind CSS (default: true) */
+    tailwind?: boolean;
+    /** Include HTMX (default: true) */
+    htmx?: boolean;
+    /** Include Alpine.js (default: false) */
+    alpine?: boolean;
+    /** Include icon library (default: false) */
+    icons?: boolean;
+    /** Use inline scripts from cache (for blocked network) */
+    inline?: boolean;
+}
+/**
+ * Build font preconnect links from theme CDN configuration
+ *
+ * @param theme - Theme configuration with CDN settings
+ * @returns HTML preconnect link tags
+ */
+export declare function buildFontPreconnectFromTheme(theme: ThemeConfig): string;
+/**
+ * Build font stylesheet links from theme CDN configuration
+ *
+ * @param theme - Theme configuration with CDN settings
+ * @returns HTML stylesheet link tags
+ */
+export declare function buildFontStylesheetsFromTheme(theme: ThemeConfig): string;
+/**
+ * Build all CDN script tags from theme configuration
+ *
+ * Uses theme.cdn configuration if available, falls back to global CDN defaults.
+ *
+ * @remarks
+ * When `inline: true` is specified, scripts must be pre-cached via `fetchAndCacheScriptsFromTheme()`.
+ * Uncached scripts will be silently skipped with a console warning.
+ *
+ * @param theme - Theme configuration with CDN settings
+ * @param options - Script inclusion options
+ * @returns HTML script tags
+ */
+export declare function buildCdnScriptsFromTheme(theme: ThemeConfig, options?: ThemeCdnScriptOptions): string;
+/**
+ * Fetch and cache scripts based on theme CDN configuration
+ *
+ * @param theme - Theme configuration with CDN settings
+ * @param options - Which scripts to cache
+ * @returns Map of cached script URLs to content
+ */
+export declare function fetchAndCacheScriptsFromTheme(theme: ThemeConfig, options?: {
+    tailwind?: boolean;
+    htmx?: boolean;
+    alpine?: boolean;
+    icons?: boolean;
+}): Promise<Map<string, string>>;
+//# sourceMappingURL=cdn.d.ts.map

package/esm/theme/cdn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../../../src/theme/cdn.ts"],"names":[],"mappings":"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"}

package/esm/theme/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+export { CDN, type CdnScriptOptions, type ThemeCdnScriptOptions, fetchScript, fetchAndCacheScripts, fetchAndCacheScriptsFromTheme, getCachedScript, isScriptCached, clearScriptCache, buildFontPreconnect, buildFontPreconnectFromTheme, buildFontStylesheets, buildFontStylesheetsFromTheme, buildCdnScripts, buildCdnScriptsFromTheme, } from './cdn';
+export { type PlatformId, type NetworkMode, type ScriptStrategy, type PlatformCapabilities, OPENAI_PLATFORM, CLAUDE_PLATFORM, GEMINI_PLATFORM, NGROK_PLATFORM, CUSTOM_PLATFORM, PLATFORM_PRESETS, getPlatform, createPlatform, canUseCdn, needsInlineScripts, supportsFullInteractivity, getFallbackMode, } from './platforms';
+export { type DeepPartial, type ColorScale, type SemanticColors, type SurfaceColors, type TextColors, type BorderColors, type ThemeColors, type FontFamilies, type FontSizes, type FontWeights, type ThemeTypography, type ThemeSpacing, type ThemeRadius, type ThemeShadows, type ButtonTokens, type CardTokens, type InputTokens, type ComponentTokens, type CdnScriptResource, type ThemeCdnFonts, type ThemeCdnIcons, type ThemeCdnScripts, type ThemeCdnConfig, type ThemeConfig, mergeThemes, createTheme, buildThemeCss, buildStyleBlock, } from './theme';
+export { GITHUB_OPENAI_THEME, DEFAULT_THEME } from './presets';
+//# sourceMappingURL=index.d.ts.map

package/esm/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EACL,GAAG,EACH,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,WAAW,EACX,oBAAoB,EACpB,6BAA6B,EAC7B,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,4BAA4B,EAC5B,oBAAoB,EACpB,6BAA6B,EAC7B,eAAe,EACf,wBAAwB,GACzB,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,yBAAyB,EACzB,eAAe,GAChB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,WAAW,EAEhB,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,eAAe,EAEpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EAEjB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,eAAe,EAEpB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,cAAc,EAEnB,KAAK,WAAW,EAEhB,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}