From 32f65729f5ca5c12cc13b4864669b602ab08d35f Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 06:43:43 +0200 Subject: [PATCH 01/19] feat: Add auto-transport persistence transformation for Redis configuration --- .../__tests__/front-mcp.metadata.test.ts | 225 ++++++++++++++++++ .../src/common/metadata/front-mcp.metadata.ts | 64 ++++- .../common/types/options/transport.options.ts | 24 +- 3 files changed, 305 insertions(+), 8 deletions(-) create mode 100644 libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts diff --git a/libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts b/libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts new file mode 100644 index 00000000..ddd8c84d --- /dev/null +++ b/libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts @@ -0,0 +1,225 @@ +// common/metadata/__tests__/front-mcp.metadata.test.ts + +// Note: The SDK has circular dependencies that prevent direct import of frontMcpMetadataSchema +// in isolation. Instead, we test the applyAutoTransportPersistence transform function directly +// by extracting and testing its logic. + +import { z } from 'zod'; +import { redisOptionsSchema } from '../../types/options/redis.options'; +import { transportOptionsSchema } from '../../types/options/transport.options'; + +// Recreate the transform function for isolated testing +// This mirrors the logic in front-mcp.metadata.ts +function applyAutoTransportPersistence( + data: T, +): T { + if (!data.redis) return data; + + const transport = data.transport as { persistence?: { enabled?: boolean; redis?: unknown } } | undefined; + const persistence = transport?.persistence; + + if (persistence?.enabled === false) { + return data; + } + + if (persistence?.redis) { + return data; + } + + if (persistence?.enabled === true && !persistence.redis) { + return { + ...data, + transport: { + ...transport, + persistence: { + ...persistence, + redis: data.redis, + }, + }, + }; + } + + if (persistence === undefined) { + return { + ...data, + transport: { + ...transport, + persistence: { + enabled: true, + redis: data.redis, + }, + }, + }; + } + + return data; +} + +// Test schema that mimics the relevant parts of frontMcpMetadataSchema +const testSchema = z + .object({ + redis: redisOptionsSchema.optional(), + transport: transportOptionsSchema.optional().transform((val) => val ?? transportOptionsSchema.parse({})), + }) + .transform(applyAutoTransportPersistence); + +describe('applyAutoTransportPersistence transform', () => { + describe('no global redis configured', () => { + it('should not auto-enable persistence when no redis is configured', () => { + const config = {}; + const result = testSchema.parse(config); + + // When no global redis, persistence is not auto-enabled + // persistence remains undefined (optional field not populated) + expect(result.transport?.persistence).toBeUndefined(); + }); + + it('should preserve explicit persistence config when no global redis', () => { + const config = { + transport: { + persistence: { + enabled: true, + redis: { host: 'explicit-host' }, + }, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('explicit-host'); + }); + }); + + describe('global redis configured (redis provider)', () => { + it('should auto-enable persistence with global redis when persistence not configured', () => { + const config = { + redis: { host: 'global-redis' }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('global-redis'); + }); + + it('should respect explicit persistence: { enabled: false }', () => { + const config = { + redis: { host: 'global-redis' }, + transport: { + persistence: { enabled: false }, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(false); + expect(result.transport?.persistence?.redis).toBeUndefined(); + }); + + it('should use global redis when persistence: { enabled: true } without redis', () => { + const config = { + redis: { host: 'global-redis', port: 6380 }, + transport: { + persistence: { enabled: true }, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('global-redis'); + expect(result.transport?.persistence?.redis?.port).toBe(6380); + }); + + it('should use explicit redis when persistence has its own redis config', () => { + const config = { + redis: { host: 'global-redis' }, + transport: { + persistence: { + enabled: true, + redis: { host: 'custom-persistence-redis' }, + }, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('custom-persistence-redis'); + }); + + it('should preserve other transport options when auto-enabling persistence', () => { + const config = { + redis: { host: 'global-redis' }, + transport: { + sessionMode: 'stateless' as const, + enableLegacySSE: true, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.sessionMode).toBe('stateless'); + expect(result.transport?.enableLegacySSE).toBe(true); + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('global-redis'); + }); + }); + + describe('global redis configured (vercel-kv provider)', () => { + it('should auto-enable persistence with vercel-kv when persistence not configured', () => { + const config = { + redis: { provider: 'vercel-kv' as const }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.provider).toBe('vercel-kv'); + }); + + it('should use global vercel-kv when persistence: { enabled: true } without redis', () => { + const config = { + redis: { + provider: 'vercel-kv' as const, + url: 'https://kv.example.com', + token: 'test-token', + }, + transport: { + persistence: { enabled: true }, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.provider).toBe('vercel-kv'); + expect((result.transport?.persistence?.redis as { url?: string })?.url).toBe('https://kv.example.com'); + }); + }); + + describe('legacy redis format (no provider field)', () => { + it('should auto-enable persistence with legacy redis format', () => { + const config = { + redis: { host: 'legacy-redis', port: 6379 }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('legacy-redis'); + expect(result.transport?.persistence?.redis?.port).toBe(6379); + }); + }); + + describe('persistence defaultTtlMs preservation', () => { + it('should preserve custom defaultTtlMs when auto-populating redis', () => { + const config = { + redis: { host: 'global-redis' }, + transport: { + persistence: { + enabled: true, + defaultTtlMs: 7200000, + }, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.defaultTtlMs).toBe(7200000); + expect(result.transport?.persistence?.redis?.host).toBe('global-redis'); + }); + }); +}); diff --git a/libs/sdk/src/common/metadata/front-mcp.metadata.ts b/libs/sdk/src/common/metadata/front-mcp.metadata.ts index 22f7c7dc..716f9f6e 100644 --- a/libs/sdk/src/common/metadata/front-mcp.metadata.ts +++ b/libs/sdk/src/common/metadata/front-mcp.metadata.ts @@ -116,7 +116,69 @@ const frontMcpSplitByAppSchema = frontMcpBaseSchema.extend({ export type FrontMcpMetadata = FrontMcpMultiAppMetadata | FrontMcpSplitByAppMetadata; -export const frontMcpMetadataSchema = frontMcpMultiAppSchema.or(frontMcpSplitByAppSchema); +/** + * Transform function to auto-populate transport.persistence from global redis config. + * This enables automatic transport session persistence when global redis is configured. + * + * Behavior: + * - If redis is set AND transport.persistence is not configured → auto-enable with global redis + * - If transport.persistence.enabled=true but no redis → use global redis (if available) + * - If transport.persistence.enabled=false → respect explicit disable + * - If transport.persistence.redis is explicitly set → use that config + */ +function applyAutoTransportPersistence( + data: T, +): T { + // If no global redis config, nothing to auto-enable + if (!data.redis) return data; + + const transport = data.transport as { persistence?: { enabled?: boolean; redis?: unknown } } | undefined; + const persistence = transport?.persistence; + + // Case 1: persistence explicitly disabled - respect that + if (persistence?.enabled === false) { + return data; + } + + // Case 2: persistence has explicit redis config - use that + if (persistence?.redis) { + return data; + } + + // Case 3: persistence enabled but no redis config - use global redis + if (persistence?.enabled === true && !persistence.redis) { + return { + ...data, + transport: { + ...transport, + persistence: { + ...persistence, + redis: data.redis, + }, + }, + }; + } + + // Case 4: persistence not configured at all - auto-enable with global redis + if (persistence === undefined) { + return { + ...data, + transport: { + ...transport, + persistence: { + enabled: true, + redis: data.redis, + }, + }, + }; + } + + return data; +} + +export const frontMcpMetadataSchema = frontMcpMultiAppSchema + .or(frontMcpSplitByAppSchema) + .transform(applyAutoTransportPersistence); export type FrontMcpMultiAppConfig = z.infer; export type FrontMcpSplitByAppConfig = z.infer; diff --git a/libs/sdk/src/common/types/options/transport.options.ts b/libs/sdk/src/common/types/options/transport.options.ts index 40f435a9..686c65cb 100644 --- a/libs/sdk/src/common/types/options/transport.options.ts +++ b/libs/sdk/src/common/types/options/transport.options.ts @@ -20,20 +20,30 @@ export type { SessionMode, TransportIdMode, PlatformMappingEntry, PlatformDetect /** * Transport persistence configuration - * Enables session persistence to Redis and automatic transport recreation after server restart + * Enables session persistence to Redis/Vercel KV and automatic transport recreation after server restart. + * + * **Auto-enable behavior**: When top-level `redis` is configured at the `@FrontMcp` level, + * transport persistence is automatically enabled using that configuration. + * - To disable: explicitly set `enabled: false` + * - To use different redis config: explicitly set `redis: {...}` */ export const transportPersistenceConfigSchema = z.object({ /** - * Enable transport persistence to Redis - * When enabled, sessions are persisted to Redis and transports can be recreated after restart - * @default false + * Enable transport persistence to Redis/Vercel KV. + * When enabled, sessions are persisted and transports can be recreated after restart. + * + * **Note**: Automatically set to `true` when top-level `redis` is configured, + * unless explicitly disabled. + * + * @default false (but auto-enabled when global redis is configured) */ enabled: z.boolean().default(false), /** - * Redis configuration for session storage - * If omitted when enabled=true, uses top-level redis config - * Note: Validation for redis presence happens at runtime when persistence is used + * Redis/Vercel KV configuration for session storage. + * + * **Auto-populated**: If omitted when `enabled: true` (or auto-enabled), + * uses the top-level `redis` configuration from `@FrontMcp`. */ redis: redisOptionsSchema.optional(), From bc2f84ae03c13c6a176199ff3a76261d9c7a1d25 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 07:42:27 +0200 Subject: [PATCH 02/19] feat: Add auto-transport persistence transformation for Redis configuration --- .../__tests__/front-mcp.metadata.test.ts | 178 +++++++++++++++++- .../src/common/metadata/front-mcp.metadata.ts | 27 ++- 2 files changed, 201 insertions(+), 4 deletions(-) diff --git a/libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts b/libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts index ddd8c84d..2d811202 100644 --- a/libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts +++ b/libs/sdk/src/common/metadata/__tests__/front-mcp.metadata.test.ts @@ -8,6 +8,19 @@ import { z } from 'zod'; import { redisOptionsSchema } from '../../types/options/redis.options'; import { transportOptionsSchema } from '../../types/options/transport.options'; +// Type guard for persistence object shape (mirrors front-mcp.metadata.ts) +function isPersistenceObject( + value: unknown, +): value is { enabled?: boolean; redis?: unknown; defaultTtlMs?: number } | undefined { + if (value === undefined || value === null) return true; + if (typeof value !== 'object') return false; + const obj = value as Record; + // Use bracket notation for index signatures + if ('enabled' in obj && typeof obj['enabled'] !== 'boolean') return false; + if ('defaultTtlMs' in obj && typeof obj['defaultTtlMs'] !== 'number') return false; + return true; +} + // Recreate the transform function for isolated testing // This mirrors the logic in front-mcp.metadata.ts function applyAutoTransportPersistence( @@ -15,8 +28,14 @@ function applyAutoTransportPersistence { expect(result.transport?.persistence?.redis?.host).toBe('global-redis'); }); }); + + describe('edge cases', () => { + it('should handle persistence with enabled: true and explicit redis (no modification)', () => { + const config = { + redis: { host: 'global-redis' }, + transport: { + persistence: { + enabled: true, + redis: { host: 'explicit-redis' }, + defaultTtlMs: 3600000, + }, + }, + }; + const result = testSchema.parse(config); + + // Should use explicit redis, not global + expect(result.transport?.persistence?.redis?.host).toBe('explicit-redis'); + expect(result.transport?.persistence?.enabled).toBe(true); + }); + + it('should handle persistence object with only defaultTtlMs (no enabled flag)', () => { + const config = { + redis: { host: 'global-redis' }, + transport: { + persistence: { + defaultTtlMs: 7200000, + }, + }, + }; + const result = testSchema.parse(config); + + // persistence.enabled defaults to false in schema, so transform checks Case 3 (enabled: true without redis) + // which won't match since enabled is false by default, so it falls through + expect(result.transport?.persistence?.defaultTtlMs).toBe(7200000); + }); + + it('should handle empty persistence object', () => { + const config = { + redis: { host: 'global-redis' }, + transport: { + persistence: {}, + }, + }; + const result = testSchema.parse(config); + + // Empty object gets enabled: false from schema defaults + expect(result.transport?.persistence?.enabled).toBe(false); + }); + + it('should preserve all global redis options when auto-populating', () => { + const config = { + redis: { + host: 'global-redis', + port: 6380, + password: 'secret', + db: 2, + tls: true, + keyPrefix: 'myapp:', + defaultTtlMs: 7200000, + }, + }; + const result = testSchema.parse(config); + + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('global-redis'); + expect(result.transport?.persistence?.redis?.port).toBe(6380); + expect(result.transport?.persistence?.redis?.password).toBe('secret'); + expect(result.transport?.persistence?.redis?.db).toBe(2); + expect(result.transport?.persistence?.redis?.tls).toBe(true); + expect(result.transport?.persistence?.redis?.keyPrefix).toBe('myapp:'); + }); + + it('should handle redis: undefined explicitly', () => { + const config = { + redis: undefined, + }; + const result = testSchema.parse(config); + + // No auto-enable when redis is undefined + expect(result.transport?.persistence).toBeUndefined(); + }); + + it('should handle transport: undefined with global redis', () => { + const config = { + redis: { host: 'global-redis' }, + transport: undefined, + }; + const result = testSchema.parse(config); + + // Should still auto-enable even when transport is undefined + expect(result.transport?.persistence?.enabled).toBe(true); + expect(result.transport?.persistence?.redis?.host).toBe('global-redis'); + }); + }); + + describe('schema validation errors', () => { + it('should reject invalid redis host (empty string)', () => { + const config = { + redis: { host: '' }, + }; + expect(() => testSchema.parse(config)).toThrow(); + }); + + it('should reject invalid redis port (negative)', () => { + const config = { + redis: { host: 'localhost', port: -1 }, + }; + expect(() => testSchema.parse(config)).toThrow(); + }); + + it('should reject invalid persistence defaultTtlMs (negative)', () => { + const config = { + transport: { + persistence: { + enabled: true, + redis: { host: 'localhost' }, + defaultTtlMs: -1, + }, + }, + }; + expect(() => testSchema.parse(config)).toThrow(); + }); + }); + + describe('type guard isPersistenceObject', () => { + it('should return true for undefined', () => { + expect(isPersistenceObject(undefined)).toBe(true); + }); + + it('should return true for null', () => { + expect(isPersistenceObject(null)).toBe(true); + }); + + it('should return true for valid persistence object', () => { + expect(isPersistenceObject({ enabled: true, defaultTtlMs: 3600000 })).toBe(true); + }); + + it('should return true for empty object', () => { + expect(isPersistenceObject({})).toBe(true); + }); + + it('should return false for non-object', () => { + expect(isPersistenceObject('string')).toBe(false); + expect(isPersistenceObject(123)).toBe(false); + }); + + it('should return false when enabled is not boolean', () => { + expect(isPersistenceObject({ enabled: 'true' })).toBe(false); + expect(isPersistenceObject({ enabled: 1 })).toBe(false); + }); + + it('should return false when defaultTtlMs is not number', () => { + expect(isPersistenceObject({ defaultTtlMs: '3600000' })).toBe(false); + }); + }); }); diff --git a/libs/sdk/src/common/metadata/front-mcp.metadata.ts b/libs/sdk/src/common/metadata/front-mcp.metadata.ts index 716f9f6e..8fef3556 100644 --- a/libs/sdk/src/common/metadata/front-mcp.metadata.ts +++ b/libs/sdk/src/common/metadata/front-mcp.metadata.ts @@ -116,6 +116,21 @@ const frontMcpSplitByAppSchema = frontMcpBaseSchema.extend({ export type FrontMcpMetadata = FrontMcpMultiAppMetadata | FrontMcpSplitByAppMetadata; +/** + * Type guard for persistence object shape + */ +function isPersistenceObject( + value: unknown, +): value is { enabled?: boolean; redis?: unknown; defaultTtlMs?: number } | undefined { + if (value === undefined || value === null) return true; + if (typeof value !== 'object') return false; + const obj = value as Record; + // Check optional properties have correct types if present (use bracket notation for index signatures) + if ('enabled' in obj && typeof obj['enabled'] !== 'boolean') return false; + if ('defaultTtlMs' in obj && typeof obj['defaultTtlMs'] !== 'number') return false; + return true; +} + /** * Transform function to auto-populate transport.persistence from global redis config. * This enables automatic transport session persistence when global redis is configured. @@ -132,8 +147,16 @@ function applyAutoTransportPersistence Date: Tue, 23 Dec 2025 09:23:01 +0200 Subject: [PATCH 03/19] feat: Enhance multi-platform bundling with theme support and metadata injection --- libs/ui/src/bundler/__tests__/bundler.test.ts | 263 +++++++++++++++ libs/ui/src/bundler/bundler.ts | 309 ++++++++++++++++-- libs/ui/src/bundler/index.ts | 7 + libs/ui/src/bundler/types.ts | 153 ++++++++- .../__tests__/cached-runtime.test.ts | 10 + libs/ui/src/universal/cached-runtime.ts | 27 +- libs/ui/src/universal/runtime-builder.ts | 19 +- .../adapters/__tests__/platform-meta.test.ts | 160 +++++++++ libs/uipack/src/adapters/index.ts | 1 + libs/uipack/src/adapters/platform-meta.ts | 95 +++++- .../src/typings/__tests__/schemas.test.ts | 82 +++++ .../typings/__tests__/type-fetcher.test.ts | 47 +++ libs/uipack/src/typings/index.ts | 5 + libs/uipack/src/typings/schemas.ts | 20 ++ libs/uipack/src/typings/type-fetcher.ts | 88 ++++- libs/uipack/src/typings/types.ts | 53 +++ 16 files changed, 1292 insertions(+), 47 deletions(-) diff --git a/libs/ui/src/bundler/__tests__/bundler.test.ts b/libs/ui/src/bundler/__tests__/bundler.test.ts index 51d16b21..4d669046 100644 --- a/libs/ui/src/bundler/__tests__/bundler.test.ts +++ b/libs/ui/src/bundler/__tests__/bundler.test.ts @@ -385,6 +385,64 @@ describe('Static HTML Generation', () => { expect(claudeResult.html).toContain(''); expect(openaiResult.html).toContain(''); }); + + it('should inject DEFAULT_THEME CSS variables by default', async () => { + const result = await bundler.bundleToStaticHTML({ + source: 'export default () =>
Theme Test
;', + sourceType: 'jsx', + toolName: 'test_tool', + }); + + // Should contain :root CSS variables from DEFAULT_THEME + expect(result.html).toContain(':root'); + expect(result.html).toContain('--color-primary'); + expect(result.html).toContain('--color-secondary'); + expect(result.html).toContain('--color-border'); + expect(result.html).toContain('--color-background'); + }); + + it('should inject custom theme CSS variables when provided', async () => { + const { createTheme } = await import('@frontmcp/uipack/theme'); + + const customTheme = createTheme({ + colors: { + semantic: { + primary: '#ff0000', + secondary: '#00ff00', + }, + }, + }); + + const result = await bundler.bundleToStaticHTML({ + source: 'export default () =>
Custom Theme
;', + sourceType: 'jsx', + toolName: 'test_tool', + theme: customTheme, + }); + + // Should contain the custom primary color + expect(result.html).toContain(':root'); + expect(result.html).toContain('#ff0000'); + expect(result.html).toContain('#00ff00'); + }); + + it('should inject theme CSS after Tailwind and before custom CSS', async () => { + const result = await bundler.bundleToStaticHTML({ + source: 'export default () =>
Order Test
;', + sourceType: 'jsx', + toolName: 'test_tool', + customCss: '.custom-class { color: purple; }', + }); + + const tailwindIndex = result.html.indexOf('tailwind'); + const rootIndex = result.html.indexOf(':root'); + const customCssIndex = result.html.indexOf('.custom-class'); + + // Theme CSS should appear after Tailwind reference + expect(rootIndex).toBeGreaterThan(tailwindIndex); + // Custom CSS should appear after theme CSS + expect(customCssIndex).toBeGreaterThan(rootIndex); + }); }); }); @@ -518,3 +576,208 @@ describe('Integration', () => { expect(result.code).not.toContain('interface Props'); }); }); + +// ============================================ +// Multi-Platform Build Tests +// ============================================ + +describe('bundleToStaticHTMLAll', () => { + let bundler: InMemoryBundler; + + beforeEach(() => { + bundler = new InMemoryBundler(); + bundler.clearCache(); + }); + + const simpleComponent = 'export default () =>
Hello
'; + + it('should build for all 5 platforms by default', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + expect(Object.keys(result.platforms)).toHaveLength(5); + expect(result.platforms.openai).toBeDefined(); + expect(result.platforms.claude).toBeDefined(); + expect(result.platforms.cursor).toBeDefined(); + expect(result.platforms['ext-apps']).toBeDefined(); + expect(result.platforms.generic).toBeDefined(); + }); + + it('should build for specified platforms only', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + platforms: ['openai', 'claude'], + }); + + expect(Object.keys(result.platforms)).toHaveLength(2); + expect(result.platforms.openai).toBeDefined(); + expect(result.platforms.claude).toBeDefined(); + expect((result.platforms as Record)['cursor']).toBeUndefined(); + }); + + it('should transpile code only once (shared across platforms)', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + // All platforms should share the same component code + expect(result.sharedComponentCode).toBeTruthy(); + expect(result.platforms.openai.componentCode).toBe(result.sharedComponentCode); + expect(result.platforms.claude.componentCode).toBe(result.sharedComponentCode); + expect(result.platforms.generic.componentCode).toBe(result.sharedComponentCode); + }); + + it('should include platform-specific metadata in each result', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + // OpenAI should have openai/* namespace + expect(result.platforms.openai.meta['openai/html']).toBeDefined(); + expect(result.platforms.openai.meta['openai/mimeType']).toBe('text/html+skybridge'); + + // Claude should have frontmcp/* + ui/* namespace + expect(result.platforms.claude.meta['frontmcp/html']).toBeDefined(); + expect(result.platforms.claude.meta['ui/html']).toBeDefined(); + + // Generic should have frontmcp/* namespace + expect(result.platforms.generic.meta['frontmcp/html']).toBeDefined(); + + // ext-apps should have ui/* namespace only + expect(result.platforms['ext-apps'].meta['ui/html']).toBeDefined(); + expect(result.platforms['ext-apps'].meta['ui/mimeType']).toBe('text/html+mcp'); + }); + + it('should use different CDN types per platform', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + // Claude uses UMD (cdnjs.cloudflare.com) + expect(result.platforms.claude.html).toContain('cdnjs.cloudflare.com'); + + // OpenAI uses ESM (esm.sh) + expect(result.platforms.openai.html).toContain('esm.sh'); + + // Generic uses ESM (esm.sh) + expect(result.platforms.generic.html).toContain('esm.sh'); + }); + + it('should include metrics for transpilation and generation', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + expect(result.metrics.transpileTime).toBeGreaterThanOrEqual(0); + expect(result.metrics.generationTime).toBeGreaterThanOrEqual(0); + expect(result.metrics.totalTime).toBeGreaterThanOrEqual(0); + expect(result.metrics.totalTime).toBeGreaterThanOrEqual(result.metrics.transpileTime); + }); + + it('should return correct targetPlatform for each result', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + expect(result.platforms.openai.targetPlatform).toBe('openai'); + expect(result.platforms.claude.targetPlatform).toBe('claude'); + expect(result.platforms.cursor.targetPlatform).toBe('cursor'); + expect(result.platforms['ext-apps'].targetPlatform).toBe('ext-apps'); + expect(result.platforms.generic.targetPlatform).toBe('generic'); + }); + + it('should work with universal mode', async () => { + const markdownContent = '# Hello World\n\nThis is **bold** text.'; + + const result = await bundler.bundleToStaticHTMLAll({ + source: markdownContent, + toolName: 'test_tool', + universal: true, + contentType: 'markdown', + }); + + // All platforms should have universal: true + expect(result.platforms.openai.universal).toBe(true); + expect(result.platforms.claude.universal).toBe(true); + expect(result.platforms.generic.universal).toBe(true); + + // All should have contentType: markdown + expect(result.platforms.openai.contentType).toBe('markdown'); + expect(result.platforms.claude.contentType).toBe('markdown'); + }); + + it('should generate different HTML sizes for different platforms', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + // Each platform should have a valid size + expect(result.platforms.openai.size).toBeGreaterThan(0); + expect(result.platforms.claude.size).toBeGreaterThan(0); + + // HTML content should differ (UMD vs ESM) + expect(result.platforms.openai.html).not.toBe(result.platforms.claude.html); + }); + + it('should include hash for each platform result', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + expect(result.platforms.openai.hash).toBeDefined(); + expect(result.platforms.claude.hash).toBeDefined(); + expect(typeof result.platforms.openai.hash).toBe('string'); + expect(result.platforms.openai.hash.length).toBeGreaterThan(0); + }); + + it('should include theme CSS variables in all platform outputs', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + }); + + // All platforms should contain :root CSS variables + for (const platform of ['openai', 'claude', 'cursor', 'ext-apps', 'generic'] as const) { + const html = result.platforms[platform].html; + expect(html).toContain(':root'); + expect(html).toContain('--color-primary'); + expect(html).toContain('--color-secondary'); + } + }); + + it('should use custom theme in multi-platform build', async () => { + const { createTheme } = await import('@frontmcp/uipack/theme'); + + const customTheme = createTheme({ + colors: { + semantic: { + primary: '#123456', + accent: '#abcdef', + }, + }, + }); + + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + theme: customTheme, + }); + + // All platforms should contain the custom colors + for (const platform of ['openai', 'claude', 'generic'] as const) { + const html = result.platforms[platform].html; + expect(html).toContain('#123456'); + expect(html).toContain('#abcdef'); + } + }); +}); diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index 7dca8c34..22ba7cdf 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -21,6 +21,11 @@ import type { StaticHTMLExternalConfig, TargetPlatform, EsbuildTransformOptions, + ConcretePlatform, + MultiPlatformBuildOptions, + PlatformBuildResult, + MultiPlatformBuildResult, + MergedStaticHTMLOptions, } from './types'; import { DEFAULT_BUNDLE_OPTIONS, @@ -29,7 +34,10 @@ import { DEFAULT_STATIC_HTML_OPTIONS, STATIC_HTML_CDN, getCdnTypeForPlatform, + ALL_PLATFORMS, } from './types'; +import { buildUIMeta, type AIPlatformType } from '@frontmcp/uipack/adapters'; +import { DEFAULT_THEME, buildThemeCss, type ThemeConfig } from '@frontmcp/uipack/theme'; import { BundlerCache, createCacheKey, hashContent } from './cache'; import { validateSource, validateSize, mergePolicy, throwOnViolations, SecurityError } from './sandbox/policy'; import { executeCode, executeDefault, ExecutionError } from './sandbox/executor'; @@ -402,7 +410,7 @@ export class InMemoryBundler { }); // Build HTML sections - const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss }); + const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme }); const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); const frontmcpRuntime = this.buildFrontMCPRuntime(); const dataScript = this.buildDataInjectionScript(opts.toolName, opts.input, opts.output, opts.structuredContent); @@ -437,6 +445,253 @@ export class InMemoryBundler { }; } + /** + * Bundle a component to static HTML for all target platforms at once. + * + * This method is optimized for efficiency: + * - Transpiles the component source code only once + * - Generates platform-specific HTML variations from the shared transpiled code + * - Returns complete platform metadata ready for MCP responses + * + * @param options - Multi-platform build options + * @returns Multi-platform build result with all platforms + * + * @example + * ```typescript + * const result = await bundler.bundleToStaticHTMLAll({ + * source: ` + * import { Card, useToolOutput } from '@frontmcp/ui/react'; + * export default function Weather() { + * const output = useToolOutput(); + * return {output?.temperature}°F; + * } + * `, + * toolName: 'get_weather', + * output: { temperature: 72 }, + * }); + * + * // Access platform-specific results + * const openaiHtml = result.platforms.openai.html; + * const claudeHtml = result.platforms.claude.html; + * + * // Get metadata for MCP response + * const openaiMeta = result.platforms.openai.meta; + * ``` + */ + async bundleToStaticHTMLAll(options: MultiPlatformBuildOptions): Promise { + const startTime = performance.now(); + + // Merge options with defaults + const opts = this.mergeStaticHTMLOptions(options as StaticHTMLOptions); + const platforms = options.platforms ?? [...ALL_PLATFORMS]; + + // Step 1: Transpile component ONCE (shared across all platforms) + const transpileStart = performance.now(); + let transpiledCode: string | null = null; + let bundleResult: BundleResult | null = null; + + // Handle universal mode vs standard component mode + const isUniversal = opts.universal; + const rawContentType = options.contentType ?? 'auto'; + const contentType: ContentType = isUniversal + ? rawContentType === 'auto' + ? detectUniversalContentType(options.source) + : rawContentType + : 'react'; + + // Only transpile if it's a React component + if (contentType === 'react' || !isUniversal) { + bundleResult = await this.bundle({ + source: options.source, + sourceType: opts.sourceType, + format: 'cjs', + minify: opts.minify, + sourceMaps: false, + externals: ['react', 'react-dom', 'react/jsx-runtime', '@frontmcp/ui', '@frontmcp/ui/react'], + security: opts.security, + skipCache: opts.skipCache, + }); + transpiledCode = bundleResult.code; + } + + const transpileTime = performance.now() - transpileStart; + + // Step 2: Generate platform-specific HTML for each target + const generationStart = performance.now(); + const platformResults: Partial> = {}; + + for (const platform of platforms) { + const platformResult = await this.buildForPlatform({ + options, + opts, + platform, + transpiledCode, + bundleResult, + contentType, + isUniversal, + }); + platformResults[platform] = platformResult; + } + + const generationTime = performance.now() - generationStart; + + return { + platforms: platformResults as Record, + sharedComponentCode: transpiledCode ?? '', + metrics: { + transpileTime, + generationTime, + totalTime: performance.now() - startTime, + }, + cached: bundleResult?.cached ?? false, + }; + } + + /** + * Build for a specific platform with pre-transpiled code. + * Internal helper for bundleToStaticHTMLAll. + */ + private async buildForPlatform(params: { + options: MultiPlatformBuildOptions; + opts: MergedStaticHTMLOptions; + platform: ConcretePlatform; + transpiledCode: string | null; + bundleResult: BundleResult | null; + contentType: ContentType; + isUniversal: boolean; + }): Promise { + const { options, opts, platform, transpiledCode, bundleResult, contentType, isUniversal } = params; + + const cdnType = getCdnTypeForPlatform(platform); + const buildStart = performance.now(); + + let html: string; + let componentCode: string; + + if (isUniversal) { + // Universal mode: use cached runtime + const cachedRuntime = getCachedRuntime({ + cdnType, + includeMarkdown: opts.includeMarkdown || contentType === 'markdown', + includeMdx: opts.includeMdx || contentType === 'mdx', + minify: opts.minify, + }); + + const componentCodeStr = transpiledCode ? buildComponentCode(transpiledCode) : ''; + const dataInjectionStr = buildDataInjectionCode( + opts.toolName, + opts.input, + opts.output, + opts.structuredContent, + contentType, + transpiledCode ? null : options.source, + transpiledCode !== null, + ); + const appScript = buildAppScript( + cachedRuntime.appTemplate, + componentCodeStr, + dataInjectionStr, + opts.customComponents ?? '', + ); + + const head = this.buildStaticHTMLHead({ + externals: opts.externals, + customCss: opts.customCss, + theme: opts.theme, + }); + const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); + const renderScript = this.buildUniversalRenderScript(opts.rootId, cdnType); + + html = this.assembleUniversalStaticHTMLCached({ + title: opts.title || `${opts.toolName} - Widget`, + head, + reactRuntime, + cdnImports: cachedRuntime.cdnImports, + vendorScript: cachedRuntime.vendorScript, + appScript, + renderScript, + rootId: opts.rootId, + cdnType, + }); + + componentCode = transpiledCode ?? appScript; + } else { + // Standard mode + const head = this.buildStaticHTMLHead({ + externals: opts.externals, + customCss: opts.customCss, + theme: opts.theme, + }); + const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); + const frontmcpRuntime = this.buildFrontMCPRuntime(); + const dataScript = this.buildDataInjectionScript(opts.toolName, opts.input, opts.output, opts.structuredContent); + const componentScript = this.buildComponentRenderScript(transpiledCode!, opts.rootId, cdnType); + + html = this.assembleStaticHTML({ + title: opts.title || `${opts.toolName} - Widget`, + head, + reactRuntime, + frontmcpRuntime, + dataScript, + componentScript, + rootId: opts.rootId, + cdnType, + }); + + componentCode = transpiledCode!; + } + + const hash = hashContent(html); + + // Build platform-specific metadata + const meta = buildUIMeta({ + uiConfig: { + template: () => html, + widgetAccessible: opts.widgetAccessible, + }, + platformType: this.mapTargetPlatformToAIPlatform(platform), + html, + }); + + return { + html, + componentCode, + metrics: bundleResult?.metrics ?? { + transformTime: 0, + bundleTime: 0, + totalTime: performance.now() - buildStart, + }, + hash, + size: html.length, + cached: bundleResult?.cached ?? false, + sourceType: bundleResult?.sourceType ?? opts.sourceType, + targetPlatform: platform, + universal: isUniversal, + contentType: isUniversal ? contentType : undefined, + meta, + }; + } + + /** + * Map TargetPlatform to AIPlatformType for metadata generation. + */ + private mapTargetPlatformToAIPlatform(platform: ConcretePlatform): AIPlatformType { + switch (platform) { + case 'openai': + return 'openai'; + case 'claude': + return 'claude'; + case 'cursor': + return 'cursor'; + case 'ext-apps': + return 'ext-apps'; + case 'generic': + return 'generic-mcp'; + default: + return 'generic-mcp'; + } + } + /** * Bundle to static HTML with universal rendering mode. * Uses the universal renderer that can handle multiple content types. @@ -446,7 +701,7 @@ export class InMemoryBundler { */ private async bundleToStaticHTMLUniversal( options: StaticHTMLOptions, - opts: ReturnType, + opts: MergedStaticHTMLOptions, platform: TargetPlatform, cdnType: 'esm' | 'umd', startTime: number, @@ -508,7 +763,7 @@ export class InMemoryBundler { ); // Build HTML sections - const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss }); + const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme }); const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); const renderScript = this.buildUniversalRenderScript(opts.rootId, cdnType); @@ -1010,28 +1265,7 @@ ${parts.appScript} /** * Merge static HTML options with defaults. */ - private mergeStaticHTMLOptions( - options: StaticHTMLOptions, - ): Required< - Pick< - StaticHTMLOptions, - | 'sourceType' - | 'targetPlatform' - | 'minify' - | 'skipCache' - | 'rootId' - | 'widgetAccessible' - | 'externals' - | 'universal' - | 'contentType' - | 'includeMarkdown' - | 'includeMdx' - > - > & - Pick< - StaticHTMLOptions, - 'toolName' | 'input' | 'output' | 'structuredContent' | 'title' | 'security' | 'customCss' | 'customComponents' - > { + private mergeStaticHTMLOptions(options: StaticHTMLOptions): MergedStaticHTMLOptions { return { sourceType: options.sourceType ?? DEFAULT_STATIC_HTML_OPTIONS.sourceType, targetPlatform: options.targetPlatform ?? DEFAULT_STATIC_HTML_OPTIONS.targetPlatform, @@ -1057,13 +1291,18 @@ ${parts.appScript} security: options.security, customCss: options.customCss, customComponents: options.customComponents, + theme: options.theme, }; } /** * Build the section for static HTML. */ - private buildStaticHTMLHead(opts: { externals: StaticHTMLExternalConfig; customCss?: string }): string { + private buildStaticHTMLHead(opts: { + externals: StaticHTMLExternalConfig; + customCss?: string; + theme?: ThemeConfig; + }): string { const parts: string[] = []; // Meta tags @@ -1087,6 +1326,9 @@ ${parts.appScript} parts.push(``); } + // Theme CSS variables (injected as :root variables after Tailwind) + parts.push(this.buildThemeStyleBlock(opts.theme)); + // Base styles for loading state and common utilities parts.push(``); - // Custom CSS (injected after Tailwind) + // Custom CSS (injected after Tailwind and theme) if (opts.customCss) { parts.push(``); } @@ -1103,6 +1345,19 @@ ${parts.appScript} return parts.join('\n '); } + /** + * Build theme CSS variables as a :root style block. + * Uses DEFAULT_THEME if no theme is provided. + */ + private buildThemeStyleBlock(theme: ThemeConfig = DEFAULT_THEME): string { + const cssVars = buildThemeCss(theme); + return ``; + } + /** * Build React runtime scripts for static HTML. */ diff --git a/libs/ui/src/bundler/index.ts b/libs/ui/src/bundler/index.ts index 4c9b59fd..182d6e00 100644 --- a/libs/ui/src/bundler/index.ts +++ b/libs/ui/src/bundler/index.ts @@ -64,9 +64,14 @@ export type { TransformContext, // Static HTML types TargetPlatform, + ConcretePlatform, StaticHTMLExternalConfig, StaticHTMLOptions, StaticHTMLResult, + // Multi-platform build types + MultiPlatformBuildOptions, + PlatformBuildResult, + MultiPlatformBuildResult, } from './types'; export { @@ -78,6 +83,8 @@ export { DEFAULT_STATIC_HTML_OPTIONS, STATIC_HTML_CDN, getCdnTypeForPlatform, + // Multi-platform build constants + ALL_PLATFORMS, } from './types'; // ============================================ diff --git a/libs/ui/src/bundler/types.ts b/libs/ui/src/bundler/types.ts index 929ce990..65cf0a3d 100644 --- a/libs/ui/src/bundler/types.ts +++ b/libs/ui/src/bundler/types.ts @@ -6,6 +6,8 @@ * @packageDocumentation */ +import type { ThemeConfig } from '@frontmcp/uipack/theme'; + // ============================================ // Source Types // ============================================ @@ -675,9 +677,28 @@ export const DEFAULT_BUNDLER_OPTIONS: Required = { * - 'openai': OpenAI ChatGPT/Plugins - uses esm.sh * - 'claude': Claude Artifacts - uses cdnjs.cloudflare.com (only trusted CDN) * - 'cursor': Cursor IDE - uses esm.sh - * - 'generic': Generic platform - uses esm.sh + * - 'ext-apps': MCP Apps (SEP-1865) - uses esm.sh + * - 'generic': Generic platform - uses esm.sh with frontmcp/* namespace + */ +export type TargetPlatform = 'auto' | 'openai' | 'claude' | 'cursor' | 'ext-apps' | 'generic'; + +/** + * Concrete platform type (excludes 'auto'). + * Used for multi-platform builds where a specific platform must be targeted. */ -export type TargetPlatform = 'auto' | 'openai' | 'claude' | 'cursor' | 'generic'; +export type ConcretePlatform = Exclude; + +/** + * All platforms that can be targeted for multi-platform builds. + * Order: OpenAI, Claude, Cursor, ext-apps, Generic + */ +export const ALL_PLATFORMS: readonly ConcretePlatform[] = [ + 'openai', + 'claude', + 'cursor', + 'ext-apps', + 'generic', +] as const; /** * Configuration for external dependencies in static HTML bundling. @@ -808,6 +829,28 @@ export interface StaticHTMLOptions { */ customCss?: string; + /** + * Theme configuration for CSS variables. + * When provided, theme CSS variables (--color-primary, --color-border, etc.) + * will be injected into the HTML as :root CSS variables. + * + * If not provided, uses DEFAULT_THEME from @frontmcp/uipack. + * + * @example + * ```typescript + * import { createTheme, DEFAULT_THEME } from '@frontmcp/uipack/theme'; + * + * // Use default theme + * theme: DEFAULT_THEME + * + * // Or create custom theme + * theme: createTheme({ + * colors: { semantic: { primary: '#0969da' } } + * }) + * ``` + */ + theme?: ThemeConfig; + // ============================================ // Universal Mode Options // ============================================ @@ -991,3 +1034,109 @@ export const DEFAULT_STATIC_HTML_OPTIONS = { includeMarkdown: false, includeMdx: false, } as const; + +// ============================================ +// Merged Options Type +// ============================================ + +/** + * Internal type for merged static HTML options. + * Used by bundler methods after merging user options with defaults. + */ +export type MergedStaticHTMLOptions = Required< + Pick< + StaticHTMLOptions, + | 'sourceType' + | 'targetPlatform' + | 'minify' + | 'skipCache' + | 'rootId' + | 'widgetAccessible' + | 'externals' + | 'universal' + | 'contentType' + | 'includeMarkdown' + | 'includeMdx' + > +> & + Pick< + StaticHTMLOptions, + | 'toolName' + | 'input' + | 'output' + | 'structuredContent' + | 'title' + | 'security' + | 'customCss' + | 'customComponents' + | 'theme' + >; + +// ============================================ +// Multi-Platform Build Types +// ============================================ + +/** + * Options for building for multiple platforms at once. + * Extends StaticHTMLOptions but replaces targetPlatform with platforms array. + */ +export interface MultiPlatformBuildOptions extends Omit { + /** + * Platforms to build for. + * @default ALL_PLATFORMS (all 5 platforms) + */ + platforms?: ConcretePlatform[]; +} + +/** + * Result for a single platform in multi-platform build. + * Extends StaticHTMLResult with platform-specific metadata. + */ +export interface PlatformBuildResult extends StaticHTMLResult { + /** + * Platform-specific metadata for tool response _meta field. + * Ready to merge into MCP response. + * + * Contains namespace-prefixed fields like: + * - OpenAI: openai/html, openai/mimeType, etc. + * - Claude: frontmcp/html, claude/widgetDescription, etc. + * - Generic: frontmcp/html, frontmcp/widgetAccessible, etc. + * - ext-apps: ui/html, ui/mimeType, ui/csp, etc. + */ + meta: Record; +} + +/** + * Result of building for multiple platforms. + * Contains all platform-specific builds with shared metrics. + */ +export interface MultiPlatformBuildResult { + /** + * Results keyed by platform name. + * Each platform has its own HTML and metadata. + */ + platforms: Record; + + /** + * Shared component code (transpiled once, reused). + * All platforms share this code to avoid redundant transpilation. + */ + sharedComponentCode: string; + + /** + * Multi-platform build metrics. + */ + metrics: { + /** Time to transpile component (once) in ms */ + transpileTime: number; + /** Time to generate all platform variants in ms */ + generationTime: number; + /** Total time in ms */ + totalTime: number; + }; + + /** + * Whether component was served from cache. + */ + cached: boolean; +} diff --git a/libs/ui/src/universal/__tests__/cached-runtime.test.ts b/libs/ui/src/universal/__tests__/cached-runtime.test.ts index 961a7ea3..7ed492ef 100644 --- a/libs/ui/src/universal/__tests__/cached-runtime.test.ts +++ b/libs/ui/src/universal/__tests__/cached-runtime.test.ts @@ -197,6 +197,16 @@ describe('getCachedRuntime', () => { // Should not contain comment markers (but may have some) expect(result.vendorScript).not.toContain('// FrontMCP Store (Vendor)'); }); + + it('should preserve URL strings containing // when minifying', () => { + const result = getCachedRuntime({ cdnType: 'umd', minify: true }); + + // The isSafeUrl function checks for 'http://' and 'https://' URLs + // These must not be corrupted by comment-stripping regex + expect(result.vendorScript).toContain("'http://'"); + expect(result.vendorScript).toContain("'https://'"); + expect(result.vendorScript).toContain("'mailto:'"); + }); }); }); diff --git a/libs/ui/src/universal/cached-runtime.ts b/libs/ui/src/universal/cached-runtime.ts index 496bb049..c08b2b1a 100644 --- a/libs/ui/src/universal/cached-runtime.ts +++ b/libs/ui/src/universal/cached-runtime.ts @@ -753,15 +753,28 @@ function buildAppTemplate(): string { } /** - * Basic script minification. + * Safe script minification that preserves strings. + * + * Uses a conservative approach to avoid corrupting string literals: + * - Only removes full-line comments (lines starting with //) + * - Removes block comments (/* ... *\/) + * - Removes empty lines and leading whitespace + * - Does NOT remove inline // comments (they might be in strings like 'http://') */ function minifyScript(script: string): string { - return script - .replace(/\/\/[^\n]*/g, '') // Remove single-line comments - .replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments - .replace(/\n\s*\n/g, '\n') // Remove empty lines - .replace(/^\s+/gm, '') // Remove leading whitespace - .trim(); + return ( + script + // Remove block comments (safe - /* can't appear in strings without escaping) + .replace(/\/\*[\s\S]*?\*\//g, '') + // Remove full-line comments (lines that are ONLY a comment after whitespace) + // This is safe because we require the line to start with optional whitespace then // + .replace(/^\s*\/\/[^\n]*$/gm, '') + // Collapse multiple newlines into single newline + .replace(/\n\s*\n/g, '\n') + // Remove leading whitespace from each line + .replace(/^\s+/gm, '') + .trim() + ); } /** diff --git a/libs/ui/src/universal/runtime-builder.ts b/libs/ui/src/universal/runtime-builder.ts index a09f2745..205cfdd6 100644 --- a/libs/ui/src/universal/runtime-builder.ts +++ b/libs/ui/src/universal/runtime-builder.ts @@ -454,14 +454,17 @@ export function buildUniversalRuntime(options: UniversalRuntimeOptions): Univers let script = parts.join('\n'); - // Minify if requested + // Minify if requested (safe minification that preserves strings) if (options.minify) { - // Basic minification: remove comments and excess whitespace script = script - .replace(/\/\/[^\n]*/g, '') // Remove single-line comments - .replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments - .replace(/\n\s*\n/g, '\n') // Remove empty lines - .replace(/^\s+/gm, '') // Remove leading whitespace + // Remove block comments (safe - /* can't appear in strings without escaping) + .replace(/\/\*[\s\S]*?\*\//g, '') + // Remove full-line comments only (to preserve // in strings like 'http://') + .replace(/^\s*\/\/[^\n]*$/gm, '') + // Collapse multiple newlines + .replace(/\n\s*\n/g, '\n') + // Remove leading whitespace + .replace(/^\s+/gm, '') .trim(); } @@ -483,8 +486,10 @@ export function buildMinimalRuntime(options: Pick { } }); }); + + describe('buildUIMeta - generic-mcp platform uses frontmcp/* namespace', () => { + it('should use frontmcp/widgetAccessible NOT openai/widgetAccessible', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + widgetAccessible: true, + }, + platformType: 'generic-mcp', + html, + }); + + expect(meta['frontmcp/widgetAccessible']).toBe(true); + // Should NOT use openai/* namespace + expect(meta['openai/widgetAccessible']).toBeUndefined(); + }); + + it('should use frontmcp/widgetCSP NOT openai/widgetCSP', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + csp: { + connectDomains: ['https://api.example.com'], + resourceDomains: ['https://cdn.example.com'], + }, + }, + platformType: 'generic-mcp', + html, + }); + + expect(meta['frontmcp/widgetCSP']).toEqual({ + connectDomains: ['https://api.example.com'], + resourceDomains: ['https://cdn.example.com'], + }); + // Should NOT use openai/* namespace + expect(meta['openai/widgetCSP']).toBeUndefined(); + }); + + it('should include displayMode in frontmcp/* namespace', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + displayMode: 'fullscreen', + }, + platformType: 'generic-mcp', + html, + }); + + expect(meta['frontmcp/displayMode']).toBe('fullscreen'); + }); + + it('should include widgetDescription in frontmcp/* namespace', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + widgetDescription: 'Test widget description', + }, + platformType: 'generic-mcp', + html, + }); + + expect(meta['frontmcp/widgetDescription']).toBe('Test widget description'); + }); + + it('should include prefersBorder in frontmcp/* namespace', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + prefersBorder: true, + }, + platformType: 'generic-mcp', + html, + }); + + expect(meta['frontmcp/prefersBorder']).toBe(true); + }); + + it('should include sandboxDomain as frontmcp/domain', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + sandboxDomain: 'sandbox.example.com', + }, + platformType: 'generic-mcp', + html, + }); + + expect(meta['frontmcp/domain']).toBe('sandbox.example.com'); + }); + }); + + describe('buildUIMeta - claude platform enhanced fields', () => { + it('should include displayMode for Claude', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + displayMode: 'inline', + }, + platformType: 'claude', + html, + }); + + expect(meta['claude/displayMode']).toBe('inline'); + }); + + it('should include widgetAccessible for Claude', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + widgetAccessible: true, + }, + platformType: 'claude', + html, + }); + + expect(meta['claude/widgetAccessible']).toBe(true); + }); + + it('should include prefersBorder for Claude', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + prefersBorder: true, + }, + platformType: 'claude', + html, + }); + + expect(meta['claude/prefersBorder']).toBe(true); + }); + + it('should include widgetDescription for Claude', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + widgetDescription: 'Claude widget description', + }, + platformType: 'claude', + html, + }); + + expect(meta['claude/widgetDescription']).toBe('Claude widget description'); + }); + + it('should NOT include CSP for Claude (network-blocked)', () => { + const meta = buildUIMeta({ + uiConfig: { + ...baseUIConfig, + csp: { + connectDomains: ['https://api.example.com'], + }, + }, + platformType: 'claude', + html, + }); + + // Claude is network-blocked, so CSP is not applicable + expect(meta['claude/widgetCSP']).toBeUndefined(); + }); + }); }); diff --git a/libs/uipack/src/adapters/index.ts b/libs/uipack/src/adapters/index.ts index 7a94f7b3..87ac82b9 100644 --- a/libs/uipack/src/adapters/index.ts +++ b/libs/uipack/src/adapters/index.ts @@ -19,6 +19,7 @@ export { buildUIMeta, buildToolDiscoveryMeta, buildOpenAICSP, + buildFrontMCPCSP, } from './platform-meta'; export { diff --git a/libs/uipack/src/adapters/platform-meta.ts b/libs/uipack/src/adapters/platform-meta.ts index 47a6ec78..a2ade083 100644 --- a/libs/uipack/src/adapters/platform-meta.ts +++ b/libs/uipack/src/adapters/platform-meta.ts @@ -85,6 +85,29 @@ export interface UIMetadata { // Claude-specific fields /** Claude: Widget description */ 'claude/widgetDescription'?: string; + /** Claude: Display mode preference */ + 'claude/displayMode'?: string; + /** Claude: Whether widget can invoke tools (informational) */ + 'claude/widgetAccessible'?: boolean; + /** Claude: Whether to show border around UI */ + 'claude/prefersBorder'?: boolean; + + // FrontMCP-specific fields (generic platform) + /** FrontMCP: Whether widget can invoke tools */ + 'frontmcp/widgetAccessible'?: boolean; + /** FrontMCP: CSP configuration */ + 'frontmcp/widgetCSP'?: { + connectDomains?: string[]; + resourceDomains?: string[]; + }; + /** FrontMCP: Display mode preference */ + 'frontmcp/displayMode'?: string; + /** FrontMCP: Widget description */ + 'frontmcp/widgetDescription'?: string; + /** FrontMCP: Whether to show border around UI */ + 'frontmcp/prefersBorder'?: boolean; + /** FrontMCP: Dedicated sandbox domain */ + 'frontmcp/domain'?: string; // Gemini-specific fields /** Gemini: Widget description */ @@ -278,15 +301,37 @@ export function buildOpenAICSP(csp: UIContentSecurityPolicy): { /** * Build Claude-specific metadata. * Claude widgets are network-blocked, so we don't include URI references. + * Uses claude/* namespace for Claude-specific fields. */ function buildClaudeMeta(meta: UIMetadata, uiConfig: UITemplateConfig): UIMetadata { // Claude uses inline HTML only (network-blocked) // Don't include resource URI since Claude can't fetch it + // Widget description if (uiConfig.widgetDescription) { meta['claude/widgetDescription'] = uiConfig.widgetDescription; } + // Display mode preference (Claude may respect this for Artifacts) + if (uiConfig.displayMode) { + meta['claude/displayMode'] = uiConfig.displayMode; + } + + // Widget accessibility hint (informational for Claude) + // Note: Claude's Artifact system may not support tool callbacks, + // but we include this for consistency and future compatibility + if (uiConfig.widgetAccessible) { + meta['claude/widgetAccessible'] = true; + } + + // Border preference (useful for Artifacts visual styling) + if (uiConfig.prefersBorder !== undefined) { + meta['claude/prefersBorder'] = uiConfig.prefersBorder; + } + + // Note: We don't include CSP for Claude since it's network-blocked + // and CSP policies aren't applicable in the sandboxed iframe + return meta; } @@ -316,17 +361,61 @@ function buildIDEMeta(meta: UIMetadata, uiConfig: UITemplateConfig(meta: UIMetadata, uiConfig: UITemplateConfig): UIMetadata { + // Widget accessibility (can widget invoke tools?) if (uiConfig.widgetAccessible) { - meta['openai/widgetAccessible'] = true; + meta['frontmcp/widgetAccessible'] = true; } + // Content Security Policy if (uiConfig.csp) { - meta['openai/widgetCSP'] = buildOpenAICSP(uiConfig.csp); + meta['frontmcp/widgetCSP'] = buildFrontMCPCSP(uiConfig.csp); + } + + // Display mode preference + if (uiConfig.displayMode) { + meta['frontmcp/displayMode'] = uiConfig.displayMode; + } + + // Widget description + if (uiConfig.widgetDescription) { + meta['frontmcp/widgetDescription'] = uiConfig.widgetDescription; + } + + // Border preference + if (uiConfig.prefersBorder !== undefined) { + meta['frontmcp/prefersBorder'] = uiConfig.prefersBorder; + } + + // Sandbox domain + if (uiConfig.sandboxDomain) { + meta['frontmcp/domain'] = uiConfig.sandboxDomain; } return meta; diff --git a/libs/uipack/src/typings/__tests__/schemas.test.ts b/libs/uipack/src/typings/__tests__/schemas.test.ts index 222d8018..6e726984 100644 --- a/libs/uipack/src/typings/__tests__/schemas.test.ts +++ b/libs/uipack/src/typings/__tests__/schemas.test.ts @@ -6,6 +6,7 @@ import { typeFetchErrorCodeSchema, + typeFileSchema, typeFetchResultSchema, typeFetchErrorSchema, typeFetchBatchRequestSchema, @@ -44,6 +45,65 @@ describe('typeFetchErrorCodeSchema', () => { }); }); +// ============================================ +// Type File Schema Tests +// ============================================ + +describe('typeFileSchema', () => { + const validFile = { + path: 'node_modules/react/index.d.ts', + url: 'https://esm.sh/v135/react@18.2.0/index.d.ts', + content: 'declare const React: any;', + }; + + it('should accept valid type file', () => { + const result = typeFileSchema.parse(validFile); + expect(result.path).toBe('node_modules/react/index.d.ts'); + expect(result.url).toBe('https://esm.sh/v135/react@18.2.0/index.d.ts'); + expect(result.content).toBe('declare const React: any;'); + }); + + it('should accept empty content', () => { + const result = typeFileSchema.parse({ + ...validFile, + content: '', + }); + expect(result.content).toBe(''); + }); + + it('should reject missing path', () => { + const { path, ...withoutPath } = validFile; + expect(() => typeFileSchema.parse(withoutPath)).toThrow(); + }); + + it('should reject empty path', () => { + expect(() => + typeFileSchema.parse({ + ...validFile, + path: '', + }), + ).toThrow(); + }); + + it('should reject invalid URL', () => { + expect(() => + typeFileSchema.parse({ + ...validFile, + url: 'not-a-valid-url', + }), + ).toThrow(); + }); + + it('should reject extra fields with strict mode', () => { + expect(() => + typeFileSchema.parse({ + ...validFile, + extraField: 'should fail', + }), + ).toThrow(); + }); +}); + // ============================================ // Type Fetch Result Schema Tests // ============================================ @@ -54,6 +114,13 @@ describe('typeFetchResultSchema', () => { resolvedPackage: 'react', version: '18.2.0', content: 'declare const React: any;', + files: [ + { + path: 'node_modules/react/index.d.ts', + url: 'https://esm.sh/react.d.ts', + content: 'declare const React: any;', + }, + ], fetchedUrls: ['https://esm.sh/react.d.ts'], fetchedAt: '2024-01-01T00:00:00.000Z', }; @@ -236,6 +303,13 @@ describe('typeFetchBatchResultSchema', () => { resolvedPackage: 'react', version: '18.2.0', content: 'declare const React: any;', + files: [ + { + path: 'node_modules/react/index.d.ts', + url: 'https://esm.sh/react.d.ts', + content: 'declare const React: any;', + }, + ], fetchedUrls: ['https://esm.sh/react.d.ts'], fetchedAt: '2024-01-01T00:00:00.000Z', }, @@ -280,6 +354,13 @@ describe('typeCacheEntrySchema', () => { resolvedPackage: 'lodash', version: '4.17.21', content: 'declare function debounce(): void;', + files: [ + { + path: 'node_modules/lodash/index.d.ts', + url: 'https://esm.sh/lodash.d.ts', + content: 'declare function debounce(): void;', + }, + ], fetchedUrls: ['https://esm.sh/lodash.d.ts'], fetchedAt: '2024-01-01T00:00:00.000Z', }, @@ -299,6 +380,7 @@ describe('typeCacheEntrySchema', () => { resolvedPackage: 'lodash', version: '4.17.21', content: '', + files: [], fetchedUrls: [], fetchedAt: '2024-01-01T00:00:00.000Z', }, diff --git a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts index f44cf10d..2c5f7989 100644 --- a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts +++ b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts @@ -245,6 +245,13 @@ describe('MemoryTypeCache', () => { resolvedPackage: 'react', version: '18.2.0', content: 'declare const React: any;', + files: [ + { + path: 'node_modules/react/index.d.ts', + url: 'https://esm.sh/react.d.ts', + content: 'declare const React: any;', + }, + ], fetchedUrls: ['https://esm.sh/react.d.ts'], fetchedAt: new Date().toISOString(), }, @@ -258,6 +265,8 @@ describe('MemoryTypeCache', () => { expect(retrieved).toBeDefined(); expect(retrieved?.result.specifier).toBe('react'); + expect(retrieved?.result.files).toHaveLength(1); + expect(retrieved?.result.files[0].path).toBe('node_modules/react/index.d.ts'); }); it('should return undefined for missing keys', async () => { @@ -272,6 +281,7 @@ describe('MemoryTypeCache', () => { resolvedPackage: 'test', version: '1.0.0', content: '', + files: [], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -292,6 +302,7 @@ describe('MemoryTypeCache', () => { resolvedPackage: 'test', version: '1.0.0', content: '', + files: [], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -314,6 +325,7 @@ describe('MemoryTypeCache', () => { resolvedPackage: 'test', version: '1.0.0', content: '', + files: [], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -339,6 +351,7 @@ describe('MemoryTypeCache', () => { resolvedPackage: `pkg${i}`, version: '1.0.0', content: '', + files: [], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -366,6 +379,7 @@ describe('MemoryTypeCache', () => { resolvedPackage: 'test', version: '1.0.0', content: '', + files: [], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -391,6 +405,7 @@ describe('MemoryTypeCache', () => { resolvedPackage: 'test', version: '1.0.0', content: 'test content', + files: [], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -421,6 +436,7 @@ describe('MemoryTypeCache', () => { resolvedPackage: 'test', version: '1.0.0', content: '', + files: [], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -513,6 +529,13 @@ describe('TypeFetcher', () => { resolvedPackage: 'react', version: '18.2.0', content: 'declare const React: any;', + files: [ + { + path: 'node_modules/react/index.d.ts', + url: 'https://esm.sh/react.d.ts', + content: 'declare const React: any;', + }, + ], fetchedUrls: ['https://esm.sh/react.d.ts'], fetchedAt: new Date().toISOString(), }, @@ -531,6 +554,7 @@ describe('TypeFetcher', () => { expect(result.cacheHits).toBe(1); expect(result.results).toHaveLength(1); + expect(result.results[0].files).toHaveLength(1); expect(mockFetch).not.toHaveBeenCalled(); }); @@ -544,6 +568,7 @@ describe('TypeFetcher', () => { resolvedPackage: 'react', version: '18.2.0', content: 'cached content', + files: [], fetchedUrls: ['https://esm.sh/react.d.ts'], fetchedAt: new Date().toISOString(), }, @@ -576,6 +601,13 @@ describe('TypeFetcher', () => { resolvedPackage: 'react', version: '17.0.2', content: 'React 17 types', + files: [ + { + path: 'node_modules/react/index.d.ts', + url: 'https://esm.sh/react@17.0.2.d.ts', + content: 'React 17 types', + }, + ], fetchedUrls: ['https://esm.sh/react@17.0.2.d.ts'], fetchedAt: new Date().toISOString(), }, @@ -595,6 +627,7 @@ describe('TypeFetcher', () => { expect(result.cacheHits).toBe(1); expect(result.results[0].version).toBe('17.0.2'); + expect(result.results[0].files).toHaveLength(1); }); it('should report timing and counts', async () => { @@ -605,6 +638,13 @@ describe('TypeFetcher', () => { resolvedPackage: 'lodash', version: '4.17.21', content: 'lodash types', + files: [ + { + path: 'node_modules/lodash/index.d.ts', + url: 'https://esm.sh/lodash.d.ts', + content: 'lodash types', + }, + ], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, @@ -668,6 +708,13 @@ describe('globalTypeCache', () => { resolvedPackage: 'global-test', version: '1.0.0', content: 'test', + files: [ + { + path: 'node_modules/global-test/index.d.ts', + url: 'https://esm.sh/global-test.d.ts', + content: 'test', + }, + ], fetchedUrls: [], fetchedAt: new Date().toISOString(), }, diff --git a/libs/uipack/src/typings/index.ts b/libs/uipack/src/typings/index.ts index 0d893271..600df5d2 100644 --- a/libs/uipack/src/typings/index.ts +++ b/libs/uipack/src/typings/index.ts @@ -45,6 +45,7 @@ // ============================================ export type { + TypeFile, TypeFetchResult, TypeFetchError, TypeFetchErrorCode, @@ -67,6 +68,8 @@ export { DEFAULT_TYPE_FETCHER_OPTIONS, TYPE_CACHE_PREFIX, DEFAULT_TYPE_CACHE_TTL export { // Error codes typeFetchErrorCodeSchema, + // Type file schema + typeFileSchema, // Result schemas typeFetchResultSchema, typeFetchErrorSchema, @@ -88,6 +91,8 @@ export { validateTypeFetcherOptions, safeParseTypeFetcherOptions, // Types from schemas + type TypeFileInput, + type TypeFileOutput, type TypeFetchErrorCodeInput, type TypeFetchErrorCodeOutput, type TypeFetchResultInput, diff --git a/libs/uipack/src/typings/schemas.ts b/libs/uipack/src/typings/schemas.ts index ac2f8a18..b8c634f5 100644 --- a/libs/uipack/src/typings/schemas.ts +++ b/libs/uipack/src/typings/schemas.ts @@ -27,6 +27,25 @@ export const typeFetchErrorCodeSchema = z.enum([ export type TypeFetchErrorCodeInput = z.input; export type TypeFetchErrorCodeOutput = z.output; +// ============================================ +// Type File Schema +// ============================================ + +/** + * Schema for a single .d.ts file with its virtual path. + * Used for browser editors that need individual files. + */ +export const typeFileSchema = z + .object({ + path: z.string().min(1), + url: z.string().url(), + content: z.string(), + }) + .strict(); + +export type TypeFileInput = z.input; +export type TypeFileOutput = z.output; + // ============================================ // Type Fetch Result Schema // ============================================ @@ -40,6 +59,7 @@ export const typeFetchResultSchema = z resolvedPackage: z.string().min(1), version: z.string().min(1), content: z.string(), + files: z.array(typeFileSchema), fetchedUrls: z.array(z.string().url()), fetchedAt: z.string().datetime(), }) diff --git a/libs/uipack/src/typings/type-fetcher.ts b/libs/uipack/src/typings/type-fetcher.ts index 243122eb..b460a316 100644 --- a/libs/uipack/src/typings/type-fetcher.ts +++ b/libs/uipack/src/typings/type-fetcher.ts @@ -16,6 +16,7 @@ import type { TypeFetcherOptions, PackageResolution, TypeCacheEntry, + TypeFile, } from './types'; import { TYPE_CACHE_PREFIX } from './types'; import type { TypeCacheAdapter } from './cache'; @@ -255,7 +256,10 @@ export class TypeFetcher { }; } - // Combine all fetched contents + // Build individual files array for browser editors + const files = buildTypeFiles(contents, resolution.packageName, resolution.version); + + // Combine all fetched contents (deprecated, kept for backwards compatibility) const combinedContent = combineDtsContents(contents); const result: TypeFetchResult = { @@ -263,6 +267,7 @@ export class TypeFetcher { resolvedPackage: resolution.packageName, version: resolution.version, content: combinedContent, + files, fetchedUrls, fetchedAt: new Date().toISOString(), }; @@ -544,6 +549,87 @@ function resolveRelativeUrl(base: string, relative: string): string | null { } } +/** + * Build TypeFile array from fetched contents. + * Converts URLs to virtual file paths for browser editor compatibility. + * + * @param contents - Map of URL to .d.ts content + * @param packageName - The resolved package name + * @param version - The package version + * @returns Array of TypeFile objects with virtual paths + */ +function buildTypeFiles(contents: Map, packageName: string, version: string): TypeFile[] { + const files: TypeFile[] = []; + + for (const [url, content] of contents.entries()) { + const virtualPath = urlToVirtualPath(url, packageName, version); + files.push({ + path: virtualPath, + url, + content, + }); + } + + return files; +} + +/** + * Convert a CDN URL to a virtual file path for browser editors. + * + * Examples: + * - https://esm.sh/v135/zod@3.23.8/lib/types.d.ts -> node_modules/zod/lib/types.d.ts + * - https://esm.sh/v135/@frontmcp/ui@1.0.0/react/index.d.ts -> node_modules/@frontmcp/ui/react/index.d.ts + * + * @param url - The CDN URL + * @param packageName - The package name (e.g., 'zod', '@frontmcp/ui') + * @param version - The package version + * @returns Virtual file path + */ +function urlToVirtualPath(url: string, packageName: string, version: string): string { + try { + const urlObj = new URL(url); + const pathname = urlObj.pathname; + + // Remove /v{number}/ prefix from esm.sh URLs + let cleanPath = pathname.replace(/^\/v\d+\//, '/'); + + // Find where the package@version starts + const versionedPackage = `${packageName}@${version}`; + const packageIndex = cleanPath.indexOf(versionedPackage); + + if (packageIndex !== -1) { + // Extract the path after package@version + const afterPackageVersion = cleanPath.substring(packageIndex + versionedPackage.length); + // Build virtual path: node_modules/packageName/... + const relativePath = afterPackageVersion.startsWith('/') ? afterPackageVersion.substring(1) : afterPackageVersion; + return `node_modules/${packageName}/${relativePath || 'index.d.ts'}`; + } + + // Fallback: try to extract path from URL pattern + // Handle URLs like /packageName@version/path/to/file.d.ts + const packagePattern = new RegExp(`/${escapeRegExp(packageName)}@[^/]+(/.*)?$`); + const match = pathname.match(packagePattern); + + if (match) { + const filePath = match[1] ? match[1].substring(1) : 'index.d.ts'; + return `node_modules/${packageName}/${filePath}`; + } + + // Last fallback: just use the URL pathname + return `node_modules/${packageName}/${pathname.split('/').pop() || 'index.d.ts'}`; + } catch { + // If URL parsing fails, return a basic path + return `node_modules/${packageName}/index.d.ts`; + } +} + +/** + * Escape special regex characters in a string. + */ +function escapeRegExp(string: string): string { + return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); +} + // ============================================ // Factory Function // ============================================ diff --git a/libs/uipack/src/typings/types.ts b/libs/uipack/src/typings/types.ts index c5afd60c..db69c65e 100644 --- a/libs/uipack/src/typings/types.ts +++ b/libs/uipack/src/typings/types.ts @@ -11,6 +11,37 @@ // Type Fetch Result Types // ============================================ +/** + * A single .d.ts file with its virtual path and content. + * Used for browser editors that need individual files instead of combined content. + * + * @example + * ```typescript + * const file: TypeFile = { + * path: 'node_modules/zod/lib/types.d.ts', + * url: 'https://esm.sh/v135/zod@3.23.8/lib/types.d.ts', + * content: 'export declare const string: ...', + * }; + * ``` + */ +export interface TypeFile { + /** + * Virtual file path for the browser editor (e.g., 'node_modules/zod/lib/types.d.ts'). + * Constructed from the package name and URL path. + */ + path: string; + + /** + * Original URL where this file was fetched from. + */ + url: string; + + /** + * The .d.ts file content. + */ + content: string; +} + /** * Result of fetching types for a single import specifier. * @@ -51,9 +82,31 @@ export interface TypeFetchResult { /** * Combined .d.ts content for this import. * Includes all resolved dependencies combined into a single string. + * + * @deprecated Use `files` array for better browser editor compatibility. + * Combined content may not work correctly for complex packages like Zod. */ content: string; + /** + * Individual .d.ts files with virtual paths for browser editors. + * Each file contains its own content and path, preserving the original structure. + * + * Use this instead of `content` for browser editor integration. + * + * @example + * ```typescript + * // Access individual files for Monaco/CodeMirror integration + * for (const file of result.files) { + * monaco.languages.typescript.typescriptDefaults.addExtraLib( + * file.content, + * `file:///${file.path}` + * ); + * } + * ``` + */ + files: TypeFile[]; + /** * All URLs that were fetched to build this result. * Useful for debugging and cache invalidation. From a4ee898798734694d24b202ee7263beb1a990174 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 11:05:18 +0200 Subject: [PATCH 04/19] feat: Implement build modes for static, dynamic, and hybrid HTML generation --- .gitignore | 3 +- libs/ui/src/bridge/adapters/base-adapter.d.ts | 112 ----- .../src/bridge/adapters/base-adapter.d.ts.map | 1 - .../src/bridge/adapters/claude.adapter.d.ts | 67 --- .../bridge/adapters/claude.adapter.d.ts.map | 1 - .../src/bridge/adapters/ext-apps.adapter.d.ts | 143 ------- .../bridge/adapters/ext-apps.adapter.d.ts.map | 1 - .../src/bridge/adapters/gemini.adapter.d.ts | 64 --- .../bridge/adapters/gemini.adapter.d.ts.map | 1 - .../src/bridge/adapters/generic.adapter.d.ts | 56 --- .../bridge/adapters/generic.adapter.d.ts.map | 1 - libs/ui/src/bridge/adapters/index.d.ts | 26 -- libs/ui/src/bridge/adapters/index.d.ts.map | 1 - .../src/bridge/adapters/openai.adapter.d.ts | 65 --- .../bridge/adapters/openai.adapter.d.ts.map | 1 - libs/ui/src/bridge/core/adapter-registry.d.ts | 122 ------ .../src/bridge/core/adapter-registry.d.ts.map | 1 - libs/ui/src/bridge/core/bridge-factory.d.ts | 206 --------- .../src/bridge/core/bridge-factory.d.ts.map | 1 - libs/ui/src/bridge/core/index.d.ts | 10 - libs/ui/src/bridge/core/index.d.ts.map | 1 - libs/ui/src/bridge/index.d.ts | 93 ----- libs/ui/src/bridge/index.d.ts.map | 1 - .../ui/src/bridge/runtime/iife-generator.d.ts | 65 --- .../bridge/runtime/iife-generator.d.ts.map | 1 - libs/ui/src/bridge/types.d.ts | 394 ------------------ libs/ui/src/bridge/types.d.ts.map | 1 - libs/ui/src/bundler/__tests__/bundler.test.ts | 309 ++++++++++++++ libs/ui/src/bundler/bundler.ts | 264 +++++++++++- libs/ui/src/bundler/index.ts | 7 + libs/ui/src/bundler/types.ts | 114 ++++- libs/ui/src/layouts/base.d.ts | 97 ----- libs/ui/src/layouts/base.d.ts.map | 1 - libs/ui/src/universal/cached-runtime.ts | 11 + libs/uipack/src/build/cdn-resources.ts | 7 +- libs/uipack/src/build/hybrid-data.ts | 152 +++++++ libs/uipack/src/build/index.ts | 16 + libs/uipack/src/runtime/wrapper.ts | 5 +- libs/uipack/src/theme/platforms.ts | 6 +- .../src/typings/__tests__/schemas.test.ts | 29 +- .../typings/__tests__/type-fetcher.test.ts | 108 +++++ libs/uipack/src/typings/index.ts | 8 +- libs/uipack/src/typings/schemas.ts | 4 +- libs/uipack/src/typings/type-fetcher.ts | 50 ++- libs/uipack/src/typings/types.ts | 8 + libs/uipack/tsconfig.lib.tsbuildinfo | 1 - 46 files changed, 1063 insertions(+), 1573 deletions(-) delete mode 100644 libs/ui/src/bridge/adapters/base-adapter.d.ts delete mode 100644 libs/ui/src/bridge/adapters/base-adapter.d.ts.map delete mode 100644 libs/ui/src/bridge/adapters/claude.adapter.d.ts delete mode 100644 libs/ui/src/bridge/adapters/claude.adapter.d.ts.map delete mode 100644 libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts delete mode 100644 libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts.map delete mode 100644 libs/ui/src/bridge/adapters/gemini.adapter.d.ts delete mode 100644 libs/ui/src/bridge/adapters/gemini.adapter.d.ts.map delete mode 100644 libs/ui/src/bridge/adapters/generic.adapter.d.ts delete mode 100644 libs/ui/src/bridge/adapters/generic.adapter.d.ts.map delete mode 100644 libs/ui/src/bridge/adapters/index.d.ts delete mode 100644 libs/ui/src/bridge/adapters/index.d.ts.map delete mode 100644 libs/ui/src/bridge/adapters/openai.adapter.d.ts delete mode 100644 libs/ui/src/bridge/adapters/openai.adapter.d.ts.map delete mode 100644 libs/ui/src/bridge/core/adapter-registry.d.ts delete mode 100644 libs/ui/src/bridge/core/adapter-registry.d.ts.map delete mode 100644 libs/ui/src/bridge/core/bridge-factory.d.ts delete mode 100644 libs/ui/src/bridge/core/bridge-factory.d.ts.map delete mode 100644 libs/ui/src/bridge/core/index.d.ts delete mode 100644 libs/ui/src/bridge/core/index.d.ts.map delete mode 100644 libs/ui/src/bridge/index.d.ts delete mode 100644 libs/ui/src/bridge/index.d.ts.map delete mode 100644 libs/ui/src/bridge/runtime/iife-generator.d.ts delete mode 100644 libs/ui/src/bridge/runtime/iife-generator.d.ts.map delete mode 100644 libs/ui/src/bridge/types.d.ts delete mode 100644 libs/ui/src/bridge/types.d.ts.map delete mode 100644 libs/ui/src/layouts/base.d.ts delete mode 100644 libs/ui/src/layouts/base.d.ts.map create mode 100644 libs/uipack/src/build/hybrid-data.ts delete mode 100644 libs/uipack/tsconfig.lib.tsbuildinfo diff --git a/.gitignore b/.gitignore index 21488dde..05bf4a18 100644 --- a/.gitignore +++ b/.gitignore @@ -61,4 +61,5 @@ docs/docs.backup.json .github/codex/ .npmrc -/libs/ui/.script.local +**/.script.local +/libs/uipack/tsconfig.lib.tsbuildinfo diff --git a/libs/ui/src/bridge/adapters/base-adapter.d.ts b/libs/ui/src/bridge/adapters/base-adapter.d.ts deleted file mode 100644 index b02e8d1c..00000000 --- a/libs/ui/src/bridge/adapters/base-adapter.d.ts +++ /dev/null @@ -1,112 +0,0 @@ -/** - * Base Platform Adapter - * - * Abstract base class for platform adapters with default implementations. - * Extend this class to create custom adapters for new platforms. - * - * @packageDocumentation - */ -import type { - PlatformAdapter, - AdapterCapabilities, - DisplayMode, - UserAgentInfo, - SafeAreaInsets, - ViewportInfo, - HostContext, -} from '../types'; -/** - * Default adapter capabilities (most features disabled). - */ -export declare const DEFAULT_CAPABILITIES: AdapterCapabilities; -/** - * Default safe area insets (no insets). - */ -export declare const DEFAULT_SAFE_AREA: SafeAreaInsets; -/** - * Abstract base class for platform adapters. - * Provides default implementations that can be overridden. - */ -export declare abstract class BaseAdapter implements PlatformAdapter { - abstract readonly id: string; - abstract readonly name: string; - abstract readonly priority: number; - protected _capabilities: AdapterCapabilities; - protected _hostContext: HostContext; - protected _widgetState: Record; - protected _toolInput: Record; - protected _toolOutput: unknown; - protected _structuredContent: unknown; - protected _initialized: boolean; - protected _contextListeners: Set<(changes: Partial) => void>; - protected _toolResultListeners: Set<(result: unknown) => void>; - constructor(); - get capabilities(): AdapterCapabilities; - abstract canHandle(): boolean; - initialize(): Promise; - dispose(): void; - getTheme(): 'light' | 'dark'; - getDisplayMode(): DisplayMode; - getUserAgent(): UserAgentInfo; - getLocale(): string; - getToolInput(): Record; - getToolOutput(): unknown; - getStructuredContent(): unknown; - getWidgetState(): Record; - getSafeArea(): SafeAreaInsets; - getViewport(): ViewportInfo | undefined; - getHostContext(): HostContext; - callTool(_name: string, _args: Record): Promise; - sendMessage(_content: string): Promise; - openLink(url: string): Promise; - requestDisplayMode(_mode: DisplayMode): Promise; - requestClose(): Promise; - setWidgetState(state: Record): void; - onContextChange(callback: (changes: Partial) => void): () => void; - onToolResult(callback: (result: unknown) => void): () => void; - /** - * Create default host context from environment detection. - */ - protected _createDefaultHostContext(): HostContext; - /** - * Detect theme from CSS media query. - */ - protected _detectTheme(): 'light' | 'dark'; - /** - * Detect locale from navigator. - */ - protected _detectLocale(): string; - /** - * Detect user agent capabilities. - */ - protected _detectUserAgent(): UserAgentInfo; - /** - * Detect viewport dimensions. - */ - protected _detectViewport(): ViewportInfo | undefined; - /** - * Read injected tool data from window globals. - */ - protected _readInjectedData(): void; - /** - * Load widget state from localStorage. - */ - protected _loadWidgetState(): void; - /** - * Persist widget state to localStorage. - */ - protected _persistWidgetState(): void; - /** - * Get localStorage key for widget state. - */ - protected _getStateKey(): string; - /** - * Notify context change listeners. - */ - protected _notifyContextChange(changes: Partial): void; - /** - * Notify tool result listeners. - */ - protected _notifyToolResult(result: unknown): void; -} -//# sourceMappingURL=base-adapter.d.ts.map diff --git a/libs/ui/src/bridge/adapters/base-adapter.d.ts.map b/libs/ui/src/bridge/adapters/base-adapter.d.ts.map deleted file mode 100644 index 6318b6a8..00000000 --- a/libs/ui/src/bridge/adapters/base-adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"base-adapter.d.ts","sourceRoot":"","sources":["base-adapter.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/ui/src/bridge/adapters/claude.adapter.d.ts b/libs/ui/src/bridge/adapters/claude.adapter.d.ts deleted file mode 100644 index 72569703..00000000 --- a/libs/ui/src/bridge/adapters/claude.adapter.d.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * Claude Platform Adapter - * - * Adapter for Claude (Anthropic) artifacts and widgets. - * Claude artifacts have network restrictions - external fetches are blocked. - * This adapter relies on injected data and localStorage for state. - * - * @packageDocumentation - */ -import type { DisplayMode } from '../types'; -import { BaseAdapter } from './base-adapter'; -/** - * Claude adapter for Anthropic's Claude AI. - * - * Features: - * - Theme detection from system preferences - * - Injected tool data via window globals - * - LocalStorage persistence for widget state - * - No external network access (blocked by Claude) - * - * @example - * ```typescript - * import { ClaudeAdapter } from '@frontmcp/ui/bridge'; - * - * const adapter = new ClaudeAdapter(); - * if (adapter.canHandle()) { - * await adapter.initialize(); - * const input = adapter.getToolInput(); - * } - * ``` - */ -export declare class ClaudeAdapter extends BaseAdapter { - readonly id = 'claude'; - readonly name = 'Claude (Anthropic)'; - readonly priority = 60; - constructor(); - /** - * Check if we're running in a Claude artifact/widget context. - */ - canHandle(): boolean; - /** - * Initialize the Claude adapter. - */ - initialize(): Promise; - /** - * Open a link in a new tab. - * This is one of the few actions available in Claude artifacts. - */ - openLink(url: string): Promise; - /** - * Request display mode change (no-op for Claude). - */ - requestDisplayMode(_mode: DisplayMode): Promise; - /** - * Request close (no-op for Claude). - */ - requestClose(): Promise; - /** - * Setup listener for system theme changes. - */ - private _setupThemeListener; -} -/** - * Factory function for creating Claude adapter instances. - */ -export declare function createClaudeAdapter(): ClaudeAdapter; -//# sourceMappingURL=claude.adapter.d.ts.map diff --git a/libs/ui/src/bridge/adapters/claude.adapter.d.ts.map b/libs/ui/src/bridge/adapters/claude.adapter.d.ts.map deleted file mode 100644 index b6aa1504..00000000 --- a/libs/ui/src/bridge/adapters/claude.adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"claude.adapter.d.ts","sourceRoot":"","sources":["claude.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAwB,MAAM,gBAAgB,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC5C,QAAQ,CAAC,EAAE,YAAY;IACvB,QAAQ,CAAC,IAAI,wBAAwB;IACrC,QAAQ,CAAC,QAAQ,MAAM;;IAgBvB;;OAEG;IACH,SAAS,IAAI,OAAO;IA0BpB;;OAEG;IACY,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAU1C;;;OAGG;IACY,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAMnD;;OAEG;IACY,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAKpE;;OAEG;IACY,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAS5C;;OAEG;IACH,OAAO,CAAC,mBAAmB;CAoB5B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"} \ No newline at end of file diff --git a/libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts b/libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts deleted file mode 100644 index f13ee745..00000000 --- a/libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts +++ /dev/null @@ -1,143 +0,0 @@ -/** - * ext-apps (SEP-1865) Platform Adapter - * - * Implements the MCP Apps Extension protocol (SEP-1865) for embedded - * widget communication with AI hosts via JSON-RPC 2.0 over postMessage. - * - * @see https://github.com/modelcontextprotocol/ext-apps - * @packageDocumentation - */ -import type { DisplayMode, AdapterConfig } from '../types'; -import { BaseAdapter } from './base-adapter'; -/** - * Configuration options for ext-apps adapter. - */ -export interface ExtAppsAdapterConfig extends AdapterConfig { - options?: { - /** Trusted origins for postMessage security (trust-on-first-use if not specified) */ - trustedOrigins?: string[]; - /** Application name for handshake */ - appName?: string; - /** Application version for handshake */ - appVersion?: string; - /** Protocol version (defaults to '2024-11-05') */ - protocolVersion?: string; - /** Timeout for initialization handshake (ms) */ - initTimeout?: number; - }; -} -/** - * ext-apps (SEP-1865) adapter. - * - * Provides communication between embedded widgets and AI hosts using - * the standardized JSON-RPC 2.0 over postMessage protocol. - * - * @example - * ```typescript - * import { ExtAppsAdapter } from '@frontmcp/ui/bridge'; - * - * const adapter = new ExtAppsAdapter({ - * options: { - * trustedOrigins: ['https://claude.ai'], - * } - * }); - * if (adapter.canHandle()) { - * await adapter.initialize(); - * } - * ``` - */ -export declare class ExtAppsAdapter extends BaseAdapter { - readonly id = 'ext-apps'; - readonly name = 'ext-apps (SEP-1865)'; - readonly priority = 80; - private _config; - private _messageListener; - private _pendingRequests; - private _requestId; - private _trustedOrigin; - private _hostCapabilities; - constructor(config?: ExtAppsAdapterConfig); - /** - * Check if we're in an iframe (potential ext-apps context). - */ - canHandle(): boolean; - /** - * Initialize the ext-apps adapter with protocol handshake. - */ - initialize(): Promise; - /** - * Dispose adapter resources. - */ - dispose(): void; - callTool(name: string, args: Record): Promise; - sendMessage(content: string): Promise; - openLink(url: string): Promise; - requestDisplayMode(mode: DisplayMode): Promise; - requestClose(): Promise; - /** - * Setup postMessage listener for incoming messages. - */ - private _setupMessageListener; - /** - * Handle incoming postMessage events. - */ - private _handleMessage; - /** - * Handle JSON-RPC response. - */ - private _handleResponse; - /** - * Handle JSON-RPC notification from host. - */ - private _handleNotification; - /** - * Handle tool input notification. - */ - private _handleToolInput; - /** - * Handle partial tool input (streaming). - */ - private _handleToolInputPartial; - /** - * Handle tool result notification. - */ - private _handleToolResult; - /** - * Handle host context change notification. - */ - private _handleHostContextChange; - /** - * Handle cancellation notification. - */ - private _handleCancelled; - /** - * Send a JSON-RPC request to the host. - */ - private _sendRequest; - /** - * Send a JSON-RPC notification (no response expected). - */ - private _sendNotification; - /** - * Post a message to the parent window. - */ - private _postMessage; - /** - * Perform the ui/initialize handshake with the host. - */ - private _performHandshake; - /** - * Check if an origin is trusted. - * Uses trust-on-first-use if no explicit origins configured. - */ - private _isOriginTrusted; - /** - * Emit a bridge event via CustomEvent. - */ - private _emitBridgeEvent; -} -/** - * Factory function for creating ext-apps adapter instances. - */ -export declare function createExtAppsAdapter(config?: ExtAppsAdapterConfig): ExtAppsAdapter; -//# sourceMappingURL=ext-apps.adapter.d.ts.map diff --git a/libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts.map b/libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts.map deleted file mode 100644 index ef163299..00000000 --- a/libs/ui/src/bridge/adapters/ext-apps.adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"ext-apps.adapter.d.ts","sourceRoot":"","sources":["ext-apps.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EACV,WAAW,EAUX,aAAa,EACd,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,WAAW,EAAwB,MAAM,gBAAgB,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,OAAO,CAAC,EAAE;QACR,qFAAqF;QACrF,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;QAC1B,qCAAqC;QACrC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,wCAAwC;QACxC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,kDAAkD;QAClD,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,gDAAgD;QAChD,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,QAAQ,CAAC,EAAE,cAAc;IACzB,QAAQ,CAAC,IAAI,yBAAyB;IACtC,QAAQ,CAAC,QAAQ,MAAM;IAEvB,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,gBAAgB,CAA8C;IACtE,OAAO,CAAC,gBAAgB,CAOV;IACd,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,iBAAiB,CAAmD;gBAEhE,MAAM,CAAC,EAAE,oBAAoB;IAazC;;OAEG;IACH,SAAS,IAAI,OAAO;IAmBpB;;OAEG;IACY,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAe1C;;OAEG;IACM,OAAO,IAAI,IAAI;IAqBT,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAWvE,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI3C,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IASpC,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAKpD,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAQ5C;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAU7B;;OAEG;IACH,OAAO,CAAC,cAAc;IAuBtB;;OAEG;IACH,OAAO,CAAC,eAAe;IAcvB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA4B3B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAO/B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAczB;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAsBhC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,YAAY;IA2BpB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,YAAY;IAWpB;;OAEG;YACW,iBAAiB;IAmD/B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAoBxB;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAUzB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,oBAAoB,GAAG,cAAc,CAElF"} \ No newline at end of file diff --git a/libs/ui/src/bridge/adapters/gemini.adapter.d.ts b/libs/ui/src/bridge/adapters/gemini.adapter.d.ts deleted file mode 100644 index aa194424..00000000 --- a/libs/ui/src/bridge/adapters/gemini.adapter.d.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Gemini Platform Adapter - * - * Adapter for Google's Gemini AI platform. - * Provides integration with Gemini-specific features and APIs. - * - * @packageDocumentation - */ -import { BaseAdapter } from './base-adapter'; -/** - * Gemini adapter for Google's AI platform. - * - * Features: - * - Theme detection from Gemini SDK or system - * - Network access for external resources - * - LocalStorage persistence - * - Link opening capability - * - * @example - * ```typescript - * import { GeminiAdapter } from '@frontmcp/ui/bridge'; - * - * const adapter = new GeminiAdapter(); - * if (adapter.canHandle()) { - * await adapter.initialize(); - * } - * ``` - */ -export declare class GeminiAdapter extends BaseAdapter { - readonly id = 'gemini'; - readonly name = 'Google Gemini'; - readonly priority = 40; - private _gemini; - constructor(); - /** - * Check if we're running in a Gemini context. - */ - canHandle(): boolean; - /** - * Initialize the Gemini adapter. - */ - initialize(): Promise; - /** - * Get current theme. - */ - getTheme(): 'light' | 'dark'; - /** - * Send a message (if supported by SDK). - */ - sendMessage(content: string): Promise; - /** - * Open a link. - */ - openLink(url: string): Promise; - /** - * Setup listener for system theme changes. - */ - private _setupThemeListener; -} -/** - * Factory function for creating Gemini adapter instances. - */ -export declare function createGeminiAdapter(): GeminiAdapter; -//# sourceMappingURL=gemini.adapter.d.ts.map diff --git a/libs/ui/src/bridge/adapters/gemini.adapter.d.ts.map b/libs/ui/src/bridge/adapters/gemini.adapter.d.ts.map deleted file mode 100644 index a1ec7304..00000000 --- a/libs/ui/src/bridge/adapters/gemini.adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"gemini.adapter.d.ts","sourceRoot":"","sources":["gemini.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAwB,MAAM,gBAAgB,CAAC;AAanE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC5C,QAAQ,CAAC,EAAE,YAAY;IACvB,QAAQ,CAAC,IAAI,mBAAmB;IAChC,QAAQ,CAAC,QAAQ,MAAM;IAEvB,OAAO,CAAC,OAAO,CAAwB;;IAgBvC;;OAEG;IACH,SAAS,IAAI,OAAO;IAuBpB;;OAEG;IACY,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAsB1C;;OAEG;IACM,QAAQ,IAAI,OAAO,GAAG,MAAM;IAQrC;;OAEG;IACY,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1D;;OAEG;IACY,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAanD;;OAEG;IACH,OAAO,CAAC,mBAAmB;CAqB5B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"} \ No newline at end of file diff --git a/libs/ui/src/bridge/adapters/generic.adapter.d.ts b/libs/ui/src/bridge/adapters/generic.adapter.d.ts deleted file mode 100644 index 79537cdb..00000000 --- a/libs/ui/src/bridge/adapters/generic.adapter.d.ts +++ /dev/null @@ -1,56 +0,0 @@ -/** - * Generic Platform Adapter - * - * Fallback adapter for unknown or unsupported platforms. - * Provides basic functionality using standard web APIs. - * - * @packageDocumentation - */ -import { BaseAdapter } from './base-adapter'; -/** - * Generic fallback adapter. - * - * Used when no platform-specific adapter matches the current environment. - * Provides basic functionality: - * - Theme detection from system preferences - * - LocalStorage persistence - * - Link opening via window.open - * - Injected tool data from window globals - * - * @example - * ```typescript - * import { GenericAdapter } from '@frontmcp/ui/bridge'; - * - * const adapter = new GenericAdapter(); - * await adapter.initialize(); - * const theme = adapter.getTheme(); - * ``` - */ -export declare class GenericAdapter extends BaseAdapter { - readonly id = 'generic'; - readonly name = 'Generic Web'; - readonly priority = 0; - constructor(); - /** - * Generic adapter can always handle the environment. - * It serves as the fallback when no other adapter matches. - */ - canHandle(): boolean; - /** - * Initialize the generic adapter. - */ - initialize(): Promise; - /** - * Open a link using window.open. - */ - openLink(url: string): Promise; - /** - * Setup listener for system theme changes. - */ - private _setupThemeListener; -} -/** - * Factory function for creating generic adapter instances. - */ -export declare function createGenericAdapter(): GenericAdapter; -//# sourceMappingURL=generic.adapter.d.ts.map diff --git a/libs/ui/src/bridge/adapters/generic.adapter.d.ts.map b/libs/ui/src/bridge/adapters/generic.adapter.d.ts.map deleted file mode 100644 index ea05719f..00000000 --- a/libs/ui/src/bridge/adapters/generic.adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"generic.adapter.d.ts","sourceRoot":"","sources":["generic.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAwB,MAAM,gBAAgB,CAAC;AAEnE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,QAAQ,CAAC,EAAE,aAAa;IACxB,QAAQ,CAAC,IAAI,iBAAiB;IAC9B,QAAQ,CAAC,QAAQ,KAAK;;IAgBtB;;;OAGG;IACH,SAAS,IAAI,OAAO;IAKpB;;OAEG;IACY,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAU1C;;OAEG;IACY,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAUnD;;OAEG;IACH,OAAO,CAAC,mBAAmB;CAkB5B;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"} \ No newline at end of file diff --git a/libs/ui/src/bridge/adapters/index.d.ts b/libs/ui/src/bridge/adapters/index.d.ts deleted file mode 100644 index e5563713..00000000 --- a/libs/ui/src/bridge/adapters/index.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Platform Adapters Module - * - * Exports all platform adapters and the default registration function. - * - * @packageDocumentation - */ -export { BaseAdapter, DEFAULT_CAPABILITIES, DEFAULT_SAFE_AREA } from './base-adapter'; -export { OpenAIAdapter, createOpenAIAdapter } from './openai.adapter'; -export { ExtAppsAdapter, createExtAppsAdapter, type ExtAppsAdapterConfig } from './ext-apps.adapter'; -export { ClaudeAdapter, createClaudeAdapter } from './claude.adapter'; -export { GeminiAdapter, createGeminiAdapter } from './gemini.adapter'; -export { GenericAdapter, createGenericAdapter } from './generic.adapter'; -/** - * Register all built-in adapters with the default registry. - * Called automatically when importing from '@frontmcp/ui/bridge'. - * - * Adapter priority order: - * 1. OpenAI (100) - ChatGPT Apps SDK - * 2. ext-apps (80) - SEP-1865 protocol - * 3. Claude (60) - Anthropic Claude - * 4. Gemini (40) - Google Gemini - * 5. Generic (0) - Fallback - */ -export declare function registerBuiltInAdapters(): void; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/ui/src/bridge/adapters/index.d.ts.map b/libs/ui/src/bridge/adapters/index.d.ts.map deleted file mode 100644 index 5e8cdbf7..00000000 --- a/libs/ui/src/bridge/adapters/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGtF,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAUzE;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,IAAI,IAAI,CAe9C"} \ No newline at end of file diff --git a/libs/ui/src/bridge/adapters/openai.adapter.d.ts b/libs/ui/src/bridge/adapters/openai.adapter.d.ts deleted file mode 100644 index 9994fc1c..00000000 --- a/libs/ui/src/bridge/adapters/openai.adapter.d.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * OpenAI Platform Adapter - * - * Adapter for OpenAI's ChatGPT Apps SDK. - * Provides full widget functionality including tool calls, messaging, - * and display mode changes via the window.openai API. - * - * @packageDocumentation - */ -import type { DisplayMode } from '../types'; -import { BaseAdapter } from './base-adapter'; -/** - * OpenAI Apps SDK adapter. - * - * Detects the presence of `window.openai` and proxies all operations - * through the ChatGPT Apps SDK. - * - * @example - * ```typescript - * import { OpenAIAdapter } from '@frontmcp/ui/bridge'; - * - * const adapter = new OpenAIAdapter(); - * if (adapter.canHandle()) { - * await adapter.initialize(); - * const theme = adapter.getTheme(); - * } - * ``` - */ -export declare class OpenAIAdapter extends BaseAdapter { - readonly id = 'openai'; - readonly name = 'OpenAI ChatGPT'; - readonly priority = 100; - private _openai; - private _unsubscribeContext; - private _unsubscribeToolResult; - constructor(); - /** - * Check if OpenAI Apps SDK is available. - */ - canHandle(): boolean; - /** - * Initialize the OpenAI adapter. - */ - initialize(): Promise; - /** - * Dispose adapter resources. - */ - dispose(): void; - getTheme(): 'light' | 'dark'; - getDisplayMode(): DisplayMode; - callTool(name: string, args: Record): Promise; - sendMessage(content: string): Promise; - openLink(url: string): Promise; - requestDisplayMode(mode: DisplayMode): Promise; - requestClose(): Promise; - /** - * Sync context from OpenAI SDK. - */ - private _syncContextFromSDK; -} -/** - * Factory function for creating OpenAI adapter instances. - */ -export declare function createOpenAIAdapter(): OpenAIAdapter; -//# sourceMappingURL=openai.adapter.d.ts.map diff --git a/libs/ui/src/bridge/adapters/openai.adapter.d.ts.map b/libs/ui/src/bridge/adapters/openai.adapter.d.ts.map deleted file mode 100644 index c422c89e..00000000 --- a/libs/ui/src/bridge/adapters/openai.adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"openai.adapter.d.ts","sourceRoot":"","sources":["openai.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,WAAW,EAAwB,MAAM,gBAAgB,CAAC;AAoBnE;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC5C,QAAQ,CAAC,EAAE,YAAY;IACvB,QAAQ,CAAC,IAAI,oBAAoB;IACjC,QAAQ,CAAC,QAAQ,OAAO;IAExB,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,mBAAmB,CAA2B;IACtD,OAAO,CAAC,sBAAsB,CAA2B;;IAgBzD;;OAEG;IACH,SAAS,IAAI,OAAO;IAOpB;;OAEG;IACY,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA4B1C;;OAEG;IACM,OAAO,IAAI,IAAI;IAiBf,QAAQ,IAAI,OAAO,GAAG,MAAM;IAQ5B,cAAc,IAAI,WAAW;IAevB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAOvE,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAO3C,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQpC,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAQpD,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAU5C;;OAEG;IACH,OAAO,CAAC,mBAAmB;CAyB5B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"} \ No newline at end of file diff --git a/libs/ui/src/bridge/core/adapter-registry.d.ts b/libs/ui/src/bridge/core/adapter-registry.d.ts deleted file mode 100644 index 053ce263..00000000 --- a/libs/ui/src/bridge/core/adapter-registry.d.ts +++ /dev/null @@ -1,122 +0,0 @@ -/** - * Adapter Registry - * - * Manages platform adapter registration and auto-detection. - * Adapters are registered with priorities and selected based on - * environment detection during initialization. - * - * @packageDocumentation - */ -import type { PlatformAdapter, AdapterFactory, AdapterConfig } from '../types'; -/** - * Registry for managing platform adapters. - * Handles registration, retrieval, and auto-detection of adapters. - */ -export declare class AdapterRegistry { - private _adapters; - private _disabledAdapters; - private _adapterConfigs; - private _debug; - /** - * Enable or disable debug logging. - */ - setDebug(enabled: boolean): void; - /** - * Register an adapter factory with the registry. - * @param id - Unique adapter identifier - * @param factory - Factory function that creates the adapter - * @param defaultConfig - Optional default configuration - */ - register(id: string, factory: AdapterFactory, defaultConfig?: AdapterConfig): void; - /** - * Unregister an adapter from the registry. - * @param id - Adapter identifier to remove - */ - unregister(id: string): boolean; - /** - * Check if an adapter is registered. - * @param id - Adapter identifier - */ - has(id: string): boolean; - /** - * Get all registered adapter IDs. - */ - getRegisteredIds(): string[]; - /** - * Disable specific adapters (they won't be selected during auto-detection). - * @param ids - Adapter IDs to disable - */ - disable(...ids: string[]): void; - /** - * Enable previously disabled adapters. - * @param ids - Adapter IDs to enable - */ - enable(...ids: string[]): void; - /** - * Check if an adapter is disabled. - * @param id - Adapter identifier - */ - isDisabled(id: string): boolean; - /** - * Set adapter-specific configuration. - * @param id - Adapter identifier - * @param config - Configuration to apply - */ - configure(id: string, config: AdapterConfig): void; - /** - * Get an adapter instance by ID. - * @param id - Adapter identifier - * @returns Adapter instance or undefined if not found/disabled - */ - get(id: string): PlatformAdapter | undefined; - /** - * Auto-detect and return the best adapter for the current environment. - * Adapters are checked in priority order (highest first). - * @returns The first adapter that can handle the current environment, or undefined - */ - detect(): PlatformAdapter | undefined; - /** - * Get all adapters that can handle the current environment. - * Useful for debugging or showing available options. - * @returns Array of compatible adapters sorted by priority (highest first) - */ - detectAll(): PlatformAdapter[]; - /** - * Clear all registered adapters. - */ - clear(): void; - /** - * Get sorted candidate adapters by priority (highest first). - */ - private _getSortedCandidates; - /** - * Merge default config with user config. - */ - private _mergeConfig; - /** - * Log debug message if debugging is enabled. - */ - private _log; -} -/** - * Default global adapter registry instance. - * Use this for the standard registration pattern. - */ -export declare const defaultRegistry: AdapterRegistry; -/** - * Helper function to register an adapter with the default registry. - * @param id - Unique adapter identifier - * @param factory - Factory function that creates the adapter - * @param defaultConfig - Optional default configuration - */ -export declare function registerAdapter(id: string, factory: AdapterFactory, defaultConfig?: AdapterConfig): void; -/** - * Helper function to get an adapter from the default registry. - * @param id - Adapter identifier - */ -export declare function getAdapter(id: string): PlatformAdapter | undefined; -/** - * Helper function to auto-detect the best adapter from the default registry. - */ -export declare function detectAdapter(): PlatformAdapter | undefined; -//# sourceMappingURL=adapter-registry.d.ts.map diff --git a/libs/ui/src/bridge/core/adapter-registry.d.ts.map b/libs/ui/src/bridge/core/adapter-registry.d.ts.map deleted file mode 100644 index e73d0d93..00000000 --- a/libs/ui/src/bridge/core/adapter-registry.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"adapter-registry.d.ts","sourceRoot":"","sources":["adapter-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAuB,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpG;;;GAGG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,SAAS,CAA+C;IAChE,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,eAAe,CAAyC;IAChE,OAAO,CAAC,MAAM,CAAS;IAEvB;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAIhC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI;IAclF;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAQ/B;;;OAGG;IACH,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAIxB;;OAEG;IACH,gBAAgB,IAAI,MAAM,EAAE;IAI5B;;;OAGG;IACH,OAAO,CAAC,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI;IAO/B;;;OAGG;IACH,MAAM,CAAC,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI;IAO9B;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAI/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,GAAG,IAAI;IAKlD;;;;OAIG;IACH,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAsB5C;;;;OAIG;IACH,MAAM,IAAI,eAAe,GAAG,SAAS;IAkCrC;;;;OAIG;IACH,SAAS,IAAI,eAAe,EAAE;IA6B9B;;OAEG;IACH,KAAK,IAAI,IAAI;IAOb;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAmB5B;;OAEG;IACH,OAAO,CAAC,YAAY;IAepB;;OAEG;IACH,OAAO,CAAC,IAAI;CAKb;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,iBAAwB,CAAC;AAErD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAExG;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAElE;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,eAAe,GAAG,SAAS,CAE3D"} \ No newline at end of file diff --git a/libs/ui/src/bridge/core/bridge-factory.d.ts b/libs/ui/src/bridge/core/bridge-factory.d.ts deleted file mode 100644 index 1a406168..00000000 --- a/libs/ui/src/bridge/core/bridge-factory.d.ts +++ /dev/null @@ -1,206 +0,0 @@ -/** - * FrontMcpBridge Factory - * - * Main entry point for the unified multi-platform adapter system. - * Provides automatic platform detection and a consistent API across - * OpenAI, Claude, ext-apps, Gemini, and custom adapters. - * - * @packageDocumentation - */ -import type { - PlatformAdapter, - AdapterCapabilities, - BridgeConfig, - DisplayMode, - HostContext, - FrontMcpBridgeInterface, -} from '../types'; -import { AdapterRegistry } from './adapter-registry'; -/** - * FrontMcpBridge - Unified multi-platform bridge for MCP tool widgets. - * - * @example Basic usage with auto-detection - * ```typescript - * const bridge = new FrontMcpBridge(); - * await bridge.initialize(); - * - * const theme = bridge.getTheme(); - * const toolInput = bridge.getToolInput(); - * ``` - * - * @example Force specific adapter - * ```typescript - * const bridge = new FrontMcpBridge({ - * forceAdapter: 'openai', - * debug: true, - * }); - * await bridge.initialize(); - * ``` - * - * @example With custom registry - * ```typescript - * const registry = new AdapterRegistry(); - * registry.register('custom', createCustomAdapter); - * - * const bridge = new FrontMcpBridge({ forceAdapter: 'custom' }, registry); - * await bridge.initialize(); - * ``` - */ -export declare class FrontMcpBridge implements FrontMcpBridgeInterface { - private _config; - private _registry; - private _adapter; - private _initialized; - private _initPromise; - /** - * Create a new FrontMcpBridge instance. - * @param config - Bridge configuration - * @param registry - Optional custom adapter registry (uses default if not provided) - */ - constructor(config?: BridgeConfig, registry?: AdapterRegistry); - /** - * Whether the bridge has been initialized. - */ - get initialized(): boolean; - /** - * Current adapter ID, or undefined if not initialized. - */ - get adapterId(): string | undefined; - /** - * Current adapter capabilities, or undefined if not initialized. - */ - get capabilities(): AdapterCapabilities | undefined; - /** - * Initialize the bridge. - * Auto-detects the best adapter for the current platform unless - * `forceAdapter` is specified in the config. - * - * @throws Error if no suitable adapter is found - */ - initialize(): Promise; - /** - * Internal initialization logic. - */ - private _doInitialize; - /** - * Dispose the bridge and release resources. - */ - dispose(): void; - /** - * Get the active adapter instance. - */ - getAdapter(): PlatformAdapter | undefined; - /** - * Check if a specific capability is available. - * @param cap - Capability key to check - */ - hasCapability(cap: keyof AdapterCapabilities): boolean; - /** - * Get current theme. - */ - getTheme(): 'light' | 'dark'; - /** - * Get current display mode. - */ - getDisplayMode(): DisplayMode; - /** - * Get tool input arguments. - */ - getToolInput(): Record; - /** - * Get tool output/result. - */ - getToolOutput(): unknown; - /** - * Get structured content (parsed output). - */ - getStructuredContent(): unknown; - /** - * Get persisted widget state. - */ - getWidgetState(): Record; - /** - * Get full host context. - */ - getHostContext(): HostContext; - /** - * Call a tool on the MCP server. - * @param name - Tool name - * @param args - Tool arguments - */ - callTool(name: string, args: Record): Promise; - /** - * Send a follow-up message to the conversation. - * @param content - Message content - */ - sendMessage(content: string): Promise; - /** - * Open an external link. - * @param url - URL to open - */ - openLink(url: string): Promise; - /** - * Request a display mode change. - * @param mode - Desired display mode - */ - requestDisplayMode(mode: DisplayMode): Promise; - /** - * Request widget close. - */ - requestClose(): Promise; - /** - * Set widget state (persisted across sessions). - * @param state - State object to persist - */ - setWidgetState(state: Record): void; - /** - * Subscribe to host context changes. - * @param callback - Called when context changes - * @returns Unsubscribe function - */ - onContextChange(callback: (changes: Partial) => void): () => void; - /** - * Subscribe to tool result updates. - * @param callback - Called when tool result is received - * @returns Unsubscribe function - */ - onToolResult(callback: (result: unknown) => void): () => void; - /** - * Ensure the bridge is initialized before operations. - */ - private _ensureInitialized; - /** - * Wrap a promise with a timeout. - */ - private _withTimeout; - /** - * Emit a bridge event via CustomEvent. - */ - private _emitEvent; - /** - * Log debug message if debugging is enabled. - */ - private _log; -} -/** - * Create and initialize a bridge instance. - * Convenience function for one-liner initialization. - * - * @example - * ```typescript - * const bridge = await createBridge({ debug: true }); - * const theme = bridge.getTheme(); - * ``` - */ -export declare function createBridge(config?: BridgeConfig, registry?: AdapterRegistry): Promise; -/** - * Get or create the global bridge instance. - * Initializes automatically on first call. - */ -export declare function getGlobalBridge(config?: BridgeConfig): Promise; -/** - * Reset the global bridge instance. - * Useful for testing or when switching configurations. - */ -export declare function resetGlobalBridge(): void; -//# sourceMappingURL=bridge-factory.d.ts.map diff --git a/libs/ui/src/bridge/core/bridge-factory.d.ts.map b/libs/ui/src/bridge/core/bridge-factory.d.ts.map deleted file mode 100644 index 24982fa8..00000000 --- a/libs/ui/src/bridge/core/bridge-factory.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"bridge-factory.d.ts","sourceRoot":"","sources":["bridge-factory.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/ui/src/bridge/core/index.d.ts b/libs/ui/src/bridge/core/index.d.ts deleted file mode 100644 index 7aa85dc7..00000000 --- a/libs/ui/src/bridge/core/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Bridge Core Module - * - * Core infrastructure for the FrontMcpBridge system. - * - * @packageDocumentation - */ -export { AdapterRegistry, defaultRegistry, registerAdapter, getAdapter, detectAdapter } from './adapter-registry'; -export { FrontMcpBridge, createBridge, getGlobalBridge, resetGlobalBridge } from './bridge-factory'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/ui/src/bridge/core/index.d.ts.map b/libs/ui/src/bridge/core/index.d.ts.map deleted file mode 100644 index bb9126a8..00000000 --- a/libs/ui/src/bridge/core/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAElH,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"} \ No newline at end of file diff --git a/libs/ui/src/bridge/index.d.ts b/libs/ui/src/bridge/index.d.ts deleted file mode 100644 index 89fd258b..00000000 --- a/libs/ui/src/bridge/index.d.ts +++ /dev/null @@ -1,93 +0,0 @@ -/** - * FrontMcpBridge - Unified Multi-Platform Adapter System - * - * Provides a consistent API for MCP tool widgets across AI platforms: - * - OpenAI ChatGPT (Apps SDK) - * - Anthropic Claude - * - ext-apps (SEP-1865 protocol) - * - Google Gemini - * - Generic fallback - * - * @example Basic usage - * ```typescript - * import { createBridge } from '@frontmcp/ui/bridge'; - * - * const bridge = await createBridge(); - * const theme = bridge.getTheme(); - * const input = bridge.getToolInput(); - * ``` - * - * @example Custom adapter registration - * ```typescript - * import { AdapterRegistry, FrontMcpBridge, BaseAdapter } from '@frontmcp/ui/bridge'; - * - * class MyAdapter extends BaseAdapter { - * readonly id = 'my-adapter'; - * readonly name = 'My Custom Adapter'; - * readonly priority = 50; - * canHandle() { return true; } - * } - * - * const registry = new AdapterRegistry(); - * registry.register('my-adapter', () => new MyAdapter()); - * - * const bridge = new FrontMcpBridge({ forceAdapter: 'my-adapter' }, registry); - * await bridge.initialize(); - * ``` - * - * @example Runtime script injection - * ```typescript - * import { generateBridgeIIFE, BRIDGE_SCRIPT_TAGS } from '@frontmcp/ui/bridge'; - * - * // Use pre-generated universal script - * const html = `${BRIDGE_SCRIPT_TAGS.universal}...`; - * - * // Or generate custom - * const script = generateBridgeIIFE({ adapters: ['openai', 'generic'], debug: true }); - * ``` - * - * @packageDocumentation - */ -export type { - DisplayMode, - UserAgentInfo, - SafeAreaInsets, - ViewportInfo, - HostContext, - AdapterCapabilities, - PlatformAdapter, - AdapterConfig, - AdapterFactory, - AdapterRegistration, - BridgeConfig, - FrontMcpBridgeInterface, - BridgeEventType, - BridgeEventPayloads, - JsonRpcMessage, - JsonRpcRequest, - JsonRpcResponse, - JsonRpcNotification, - JsonRpcError, - ExtAppsInitializeParams, - ExtAppsInitializeResult, - ExtAppsToolInputParams, - ExtAppsToolResultParams, - ExtAppsHostContextChangeParams, -} from './types'; -export { AdapterRegistry, defaultRegistry, registerAdapter, getAdapter, detectAdapter } from './core/adapter-registry'; -export { FrontMcpBridge, createBridge, getGlobalBridge, resetGlobalBridge } from './core/bridge-factory'; -export { BaseAdapter, DEFAULT_CAPABILITIES, DEFAULT_SAFE_AREA } from './adapters/base-adapter'; -export { OpenAIAdapter, createOpenAIAdapter } from './adapters/openai.adapter'; -export { ExtAppsAdapter, createExtAppsAdapter, type ExtAppsAdapterConfig } from './adapters/ext-apps.adapter'; -export { ClaudeAdapter, createClaudeAdapter } from './adapters/claude.adapter'; -export { GeminiAdapter, createGeminiAdapter } from './adapters/gemini.adapter'; -export { GenericAdapter, createGenericAdapter } from './adapters/generic.adapter'; -export { registerBuiltInAdapters } from './adapters'; -export { - generateBridgeIIFE, - generatePlatformBundle, - UNIVERSAL_BRIDGE_SCRIPT, - BRIDGE_SCRIPT_TAGS, - type IIFEGeneratorOptions, -} from './runtime/iife-generator'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/ui/src/bridge/index.d.ts.map b/libs/ui/src/bridge/index.d.ts.map deleted file mode 100644 index 89c74d4c..00000000 --- a/libs/ui/src/bridge/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAGH,YAAY,EAEV,WAAW,EACX,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EAEX,mBAAmB,EACnB,eAAe,EACf,aAAa,EACb,cAAc,EACd,mBAAmB,EAEnB,YAAY,EACZ,uBAAuB,EAEvB,eAAe,EACf,mBAAmB,EAEnB,cAAc,EACd,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,8BAA8B,GAC/B,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEvH,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGzG,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE/F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAE9G,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAGrD,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,EAClB,KAAK,oBAAoB,GAC1B,MAAM,0BAA0B,CAAC"} \ No newline at end of file diff --git a/libs/ui/src/bridge/runtime/iife-generator.d.ts b/libs/ui/src/bridge/runtime/iife-generator.d.ts deleted file mode 100644 index 9b082bb6..00000000 --- a/libs/ui/src/bridge/runtime/iife-generator.d.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * IIFE Generator for FrontMcpBridge Runtime - * - * Generates vanilla JavaScript IIFE scripts that can be embedded - * in HTML templates for runtime platform detection and bridge setup. - * - * @packageDocumentation - */ -/** - * Options for generating the bridge IIFE. - */ -export interface IIFEGeneratorOptions { - /** Include specific adapters (all if not specified) */ - adapters?: ('openai' | 'ext-apps' | 'claude' | 'gemini' | 'generic')[]; - /** Enable debug logging */ - debug?: boolean; - /** Trusted origins for ext-apps adapter */ - trustedOrigins?: string[]; - /** Minify the output */ - minify?: boolean; -} -/** - * Generate the bridge runtime IIFE script. - * - * This generates a self-contained vanilla JavaScript script that: - * 1. Detects the current platform - * 2. Initializes the appropriate adapter - * 3. Exposes window.FrontMcpBridge global - * - * @example - * ```typescript - * import { generateBridgeIIFE } from '@frontmcp/ui/bridge'; - * - * const script = generateBridgeIIFE({ debug: true }); - * const html = ``; - * ``` - */ -export declare function generateBridgeIIFE(options?: IIFEGeneratorOptions): string; -/** - * Generate platform-specific bundle IIFE. - * - * @example ChatGPT-specific bundle - * ```typescript - * const script = generatePlatformBundle('chatgpt'); - * ``` - */ -export declare function generatePlatformBundle( - platform: 'chatgpt' | 'claude' | 'gemini' | 'universal', - options?: Omit, -): string; -/** - * Pre-generated universal bridge script (includes all adapters). - * Use this for the simplest integration. - */ -export declare const UNIVERSAL_BRIDGE_SCRIPT: string; -/** - * Pre-generated bridge scripts wrapped in script tags. - */ -export declare const BRIDGE_SCRIPT_TAGS: { - universal: string; - chatgpt: string; - claude: string; - gemini: string; -}; -//# sourceMappingURL=iife-generator.d.ts.map diff --git a/libs/ui/src/bridge/runtime/iife-generator.d.ts.map b/libs/ui/src/bridge/runtime/iife-generator.d.ts.map deleted file mode 100644 index 1476adff..00000000 --- a/libs/ui/src/bridge/runtime/iife-generator.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"iife-generator.d.ts","sourceRoot":"","sources":["iife-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC;IACvE,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,oBAAyB,GAAG,MAAM,CAyF7E;AAkzBD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,EACvD,OAAO,GAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAM,GACnD,MAAM,CAYR;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAuB,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"} \ No newline at end of file diff --git a/libs/ui/src/bridge/types.d.ts b/libs/ui/src/bridge/types.d.ts deleted file mode 100644 index 51f7e12f..00000000 --- a/libs/ui/src/bridge/types.d.ts +++ /dev/null @@ -1,394 +0,0 @@ -/** - * FrontMcpBridge Core Types - * - * Type definitions for the unified multi-platform adapter system. - * Supports OpenAI, Claude, ext-apps (SEP-1865), Gemini, and custom adapters. - * - * @packageDocumentation - */ -/** - * Widget display mode preference. - */ -export type DisplayMode = 'inline' | 'fullscreen' | 'pip' | 'carousel'; -/** - * User agent information for device capability detection. - */ -export interface UserAgentInfo { - /** Device type */ - type: 'web' | 'mobile' | 'desktop'; - /** Has hover capability (mouse/trackpad) */ - hover: boolean; - /** Has touch capability */ - touch: boolean; -} -/** - * Safe area insets for mobile devices (notch, home indicator, etc.) - */ -export interface SafeAreaInsets { - top: number; - bottom: number; - left: number; - right: number; -} -/** - * Viewport information for responsive widgets. - */ -export interface ViewportInfo { - width?: number; - height?: number; - maxWidth?: number; - maxHeight?: number; -} -/** - * Host context provided by the AI platform. - */ -export interface HostContext { - /** Current theme */ - theme: 'light' | 'dark'; - /** Current display mode */ - displayMode: DisplayMode; - /** BCP 47 locale */ - locale: string; - /** IANA timezone */ - timezone?: string; - /** User agent capabilities */ - userAgent: UserAgentInfo; - /** Safe area insets */ - safeArea: SafeAreaInsets; - /** Viewport dimensions */ - viewport?: ViewportInfo; - /** Platform identifier */ - platform?: 'web' | 'desktop' | 'ios' | 'android'; -} -/** - * Capability flags for platform adapters. - * Used for feature detection before calling unavailable features. - */ -export interface AdapterCapabilities { - /** Can invoke server-side MCP tools */ - canCallTools: boolean; - /** Can send follow-up messages to the conversation */ - canSendMessages: boolean; - /** Can open external links */ - canOpenLinks: boolean; - /** Can persist widget state across sessions */ - canPersistState: boolean; - /** Has network access for fetch/XHR */ - hasNetworkAccess: boolean; - /** Supports display mode changes (fullscreen, pip) */ - supportsDisplayModes: boolean; - /** Supports theme detection */ - supportsTheme: boolean; - /** Custom capability extensions */ - extensions?: Record; -} -/** - * Platform adapter interface - implemented by each platform. - * Provides a consistent API across OpenAI, Claude, ext-apps, Gemini, etc. - */ -export interface PlatformAdapter { - /** Unique adapter identifier (e.g., 'openai', 'claude', 'ext-apps') */ - readonly id: string; - /** Human-readable adapter name */ - readonly name: string; - /** Adapter priority for auto-detection (higher = checked first) */ - readonly priority: number; - /** Static capability flags */ - readonly capabilities: AdapterCapabilities; - /** - * Check if this adapter can handle the current environment. - * Called during auto-detection to find the best adapter. - */ - canHandle(): boolean; - /** - * Initialize the adapter. - * For ext-apps, this performs the ui/initialize handshake. - * @returns Promise that resolves when the adapter is ready - */ - initialize(): Promise; - /** - * Clean up adapter resources. - * Called when switching adapters or disposing the bridge. - */ - dispose(): void; - /** Get current theme */ - getTheme(): 'light' | 'dark'; - /** Get current display mode */ - getDisplayMode(): DisplayMode; - /** Get user agent info */ - getUserAgent(): UserAgentInfo; - /** Get BCP 47 locale */ - getLocale(): string; - /** Get tool input arguments */ - getToolInput(): Record; - /** Get tool output/result */ - getToolOutput(): unknown; - /** Get structured content (parsed output) */ - getStructuredContent(): unknown; - /** Get persisted widget state */ - getWidgetState(): Record; - /** Get safe area insets */ - getSafeArea(): SafeAreaInsets; - /** Get viewport info */ - getViewport(): ViewportInfo | undefined; - /** Get full host context */ - getHostContext(): HostContext; - /** - * Call a tool on the MCP server. - * @param name - Tool name - * @param args - Tool arguments - * @returns Promise resolving to tool result - */ - callTool(name: string, args: Record): Promise; - /** - * Send a follow-up message to the conversation. - * @param content - Message content - */ - sendMessage(content: string): Promise; - /** - * Open an external link. - * @param url - URL to open - */ - openLink(url: string): Promise; - /** - * Request a display mode change. - * @param mode - Desired display mode - */ - requestDisplayMode(mode: DisplayMode): Promise; - /** - * Request widget close. - */ - requestClose(): Promise; - /** - * Set widget state (persisted across sessions). - * @param state - State object to persist - */ - setWidgetState(state: Record): void; - /** - * Subscribe to host context changes. - * @param callback - Called when context changes (theme, displayMode, etc.) - * @returns Unsubscribe function - */ - onContextChange(callback: (changes: Partial) => void): () => void; - /** - * Subscribe to tool result updates. - * @param callback - Called when tool result is received - * @returns Unsubscribe function - */ - onToolResult(callback: (result: unknown) => void): () => void; -} -/** - * Per-adapter configuration options. - */ -export interface AdapterConfig { - /** Enable/disable this adapter */ - enabled?: boolean; - /** Priority override */ - priority?: number; - /** Adapter-specific options */ - options?: Record; -} -/** - * FrontMcpBridge configuration. - */ -export interface BridgeConfig { - /** Force a specific adapter (skip auto-detection) */ - forceAdapter?: string; - /** Explicitly disable certain adapters */ - disabledAdapters?: string[]; - /** Debug mode (verbose logging) */ - debug?: boolean; - /** Timeout for adapter initialization (ms) */ - initTimeout?: number; - /** Trusted origins for postMessage (ext-apps security) */ - trustedOrigins?: string[]; - /** Per-adapter configurations */ - adapterConfigs?: Record; -} -/** - * JSON-RPC 2.0 message base. - */ -export interface JsonRpcMessage { - jsonrpc: '2.0'; -} -/** - * JSON-RPC request message. - */ -export interface JsonRpcRequest extends JsonRpcMessage { - id: string | number; - method: string; - params?: unknown; -} -/** - * JSON-RPC response message. - */ -export interface JsonRpcResponse extends JsonRpcMessage { - id: string | number; - result?: unknown; - error?: JsonRpcError; -} -/** - * JSON-RPC notification message (no id, no response expected). - */ -export interface JsonRpcNotification extends JsonRpcMessage { - method: string; - params?: unknown; -} -/** - * JSON-RPC error object. - */ -export interface JsonRpcError { - code: number; - message: string; - data?: unknown; -} -/** - * SEP-1865 ui/initialize request params. - */ -export interface ExtAppsInitializeParams { - appInfo: { - name: string; - version: string; - }; - appCapabilities: { - tools?: { - listChanged: boolean; - }; - }; - protocolVersion: string; -} -/** - * SEP-1865 ui/initialize response result. - */ -export interface ExtAppsInitializeResult { - protocolVersion: string; - hostInfo: { - name: string; - version: string; - }; - hostCapabilities: { - openLink?: boolean; - serverToolProxy?: boolean; - resourceRead?: boolean; - logging?: boolean; - }; - hostContext: HostContext; -} -/** - * SEP-1865 tool input notification params. - */ -export interface ExtAppsToolInputParams { - arguments: Record; -} -/** - * SEP-1865 tool result notification params. - */ -export interface ExtAppsToolResultParams { - content: unknown; - structuredContent?: unknown; - isError?: boolean; -} -/** - * SEP-1865 host context change notification params. - */ -export interface ExtAppsHostContextChangeParams { - theme?: 'light' | 'dark'; - displayMode?: DisplayMode; - viewport?: ViewportInfo; - locale?: string; - timezone?: string; -} -/** - * Bridge event types for CustomEvent dispatch. - */ -export type BridgeEventType = - | 'bridge:ready' - | 'bridge:error' - | 'bridge:adapter-changed' - | 'context:change' - | 'tool:input' - | 'tool:input-partial' - | 'tool:result' - | 'tool:cancelled'; -/** - * Bridge event payload map. - */ -export interface BridgeEventPayloads { - 'bridge:ready': { - adapter: string; - }; - 'bridge:error': { - error: Error; - adapter?: string; - }; - 'bridge:adapter-changed': { - from?: string; - to: string; - }; - 'context:change': Partial; - 'tool:input': { - arguments: Record; - }; - 'tool:input-partial': { - arguments: Record; - }; - 'tool:result': { - content: unknown; - structuredContent?: unknown; - }; - 'tool:cancelled': { - reason?: string; - }; -} -/** - * Adapter factory function type. - */ -export type AdapterFactory = (config?: AdapterConfig) => PlatformAdapter; -/** - * Adapter registration entry. - */ -export interface AdapterRegistration { - id: string; - factory: AdapterFactory; - defaultConfig?: AdapterConfig; -} -/** - * FrontMcpBridge public interface. - * Unified entry point for all platform interactions. - */ -export interface FrontMcpBridgeInterface { - /** Whether the bridge is initialized */ - readonly initialized: boolean; - /** Current adapter ID */ - readonly adapterId: string | undefined; - /** Current adapter capabilities */ - readonly capabilities: AdapterCapabilities | undefined; - /** - * Initialize the bridge (auto-detects platform). - */ - initialize(): Promise; - /** - * Get the active adapter. - */ - getAdapter(): PlatformAdapter | undefined; - /** - * Check if a specific capability is available. - */ - hasCapability(cap: keyof AdapterCapabilities): boolean; - /** - * Dispose the bridge and release resources. - */ - dispose(): void; - getTheme(): 'light' | 'dark'; - getDisplayMode(): DisplayMode; - getToolInput(): Record; - getToolOutput(): unknown; - callTool(name: string, args: Record): Promise; - sendMessage(content: string): Promise; - openLink(url: string): Promise; - requestDisplayMode(mode: DisplayMode): Promise; - setWidgetState(state: Record): void; - onContextChange(callback: (changes: Partial) => void): () => void; - onToolResult(callback: (result: unknown) => void): () => void; -} -//# sourceMappingURL=types.d.ts.map diff --git a/libs/ui/src/bridge/types.d.ts.map b/libs/ui/src/bridge/types.d.ts.map deleted file mode 100644 index ac24ef84..00000000 --- a/libs/ui/src/bridge/types.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,GAAG,KAAK,GAAG,UAAU,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,kBAAkB;IAClB,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnC,4CAA4C;IAC5C,KAAK,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,oBAAoB;IACpB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,SAAS,EAAE,aAAa,CAAC;IACzB,uBAAuB;IACvB,QAAQ,EAAE,cAAc,CAAC;IACzB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;CAClD;AAMD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,eAAe,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,sDAAsD;IACtD,oBAAoB,EAAE,OAAO,CAAC;IAC9B,+BAA+B;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAMD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAEpB,kCAAkC;IAClC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAE1B,8BAA8B;IAC9B,QAAQ,CAAC,YAAY,EAAE,mBAAmB,CAAC;IAM3C;;;OAGG;IACH,SAAS,IAAI,OAAO,CAAC;IAErB;;;;OAIG;IACH,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5B;;;OAGG;IACH,OAAO,IAAI,IAAI,CAAC;IAMhB,wBAAwB;IACxB,QAAQ,IAAI,OAAO,GAAG,MAAM,CAAC;IAE7B,+BAA+B;IAC/B,cAAc,IAAI,WAAW,CAAC;IAE9B,0BAA0B;IAC1B,YAAY,IAAI,aAAa,CAAC;IAE9B,wBAAwB;IACxB,SAAS,IAAI,MAAM,CAAC;IAEpB,+BAA+B;IAC/B,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAExC,6BAA6B;IAC7B,aAAa,IAAI,OAAO,CAAC;IAEzB,6CAA6C;IAC7C,oBAAoB,IAAI,OAAO,CAAC;IAEhC,iCAAiC;IACjC,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1C,2BAA2B;IAC3B,WAAW,IAAI,cAAc,CAAC;IAE9B,wBAAwB;IACxB,WAAW,IAAI,YAAY,GAAG,SAAS,CAAC;IAExC,4BAA4B;IAC5B,cAAc,IAAI,WAAW,CAAC;IAM9B;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAExE;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5C;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAErC;;;OAGG;IACH,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAErD;;OAEG;IACH,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAMrD;;;;OAIG;IACH,eAAe,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAE/E;;;;OAIG;IACH,YAAY,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC/D;AAMD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE5B,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CAChD;AAMD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,KAAK,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,eAAe,EAAE;QACf,KAAK,CAAC,EAAE;YACN,WAAW,EAAE,OAAO,CAAC;SACtB,CAAC;KACH,CAAC;IACF,eAAe,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,gBAAgB,EAAE;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAMD;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,cAAc,GACd,cAAc,GACd,wBAAwB,GACxB,gBAAgB,GAChB,YAAY,GACZ,oBAAoB,GACpB,aAAa,GACb,gBAAgB,CAAC;AAErB;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,cAAc,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,wBAAwB,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,gBAAgB,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC;IACrD,oBAAoB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC;IAC7D,aAAa,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACjE,gBAAgB,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACvC;AAMD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,eAAe,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAMD;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAE9B,yBAAyB;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvC,mCAAmC;IACnC,QAAQ,CAAC,YAAY,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAEvD;;OAEG;IACH,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5B;;OAEG;IACH,UAAU,IAAI,eAAe,GAAG,SAAS,CAAC;IAE1C;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,MAAM,mBAAmB,GAAG,OAAO,CAAC;IAEvD;;OAEG;IACH,OAAO,IAAI,IAAI,CAAC;IAGhB,QAAQ,IAAI,OAAO,GAAG,MAAM,CAAC;IAC7B,cAAc,IAAI,WAAW,CAAC;IAC9B,YAAY,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,aAAa,IAAI,OAAO,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACxE,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACrD,eAAe,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAC/E,YAAY,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC/D"} \ No newline at end of file diff --git a/libs/ui/src/bundler/__tests__/bundler.test.ts b/libs/ui/src/bundler/__tests__/bundler.test.ts index 4d669046..9a120477 100644 --- a/libs/ui/src/bundler/__tests__/bundler.test.ts +++ b/libs/ui/src/bundler/__tests__/bundler.test.ts @@ -781,3 +781,312 @@ describe('bundleToStaticHTMLAll', () => { } }); }); + +// ============================================ +// Build Mode Tests +// ============================================ + +describe('Build Modes', () => { + let bundler: InMemoryBundler; + + beforeEach(() => { + bundler = new InMemoryBundler(); + bundler.clearCache(); + }); + + const simpleComponent = 'export default () =>
Build Mode Test
'; + + describe('Static Mode (default)', () => { + it('should bake data into HTML at build time', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + output: { temperature: 72 }, + buildMode: 'static', + }); + + // Data should be embedded in the HTML + expect(result.html).toContain('72'); + expect(result.html).toContain('__mcpToolOutput'); + expect(result.html).toContain('Static Mode'); + expect(result.buildMode).toBe('static'); + }); + + it('should use static mode by default', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + output: { value: 'default' }, + }); + + expect(result.buildMode).toBe('static'); + expect(result.html).toContain('Static Mode'); + }); + }); + + describe('Dynamic Mode', () => { + it('should include initial data when includeInitialData is true', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + output: { temperature: 72 }, + buildMode: 'dynamic', + dynamicOptions: { includeInitialData: true }, + }); + + expect(result.html).toContain('72'); + expect(result.html).toContain('Dynamic Mode'); + expect(result.buildMode).toBe('dynamic'); + }); + + it('should show loading state when includeInitialData is false', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + output: { temperature: 72 }, + buildMode: 'dynamic', + dynamicOptions: { includeInitialData: false }, + }); + + // Should set loading: true + expect(result.html).toContain('loading: true'); + expect(result.html).toContain('Dynamic Mode'); + }); + + it('should subscribe to platform events by default', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'dynamic', + }); + + // Should include OpenAI event subscription + expect(result.html).toContain('window.openai'); + expect(result.html).toContain('onToolResult'); + }); + + it('should not subscribe to events when subscribeToUpdates is false', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'dynamic', + dynamicOptions: { subscribeToUpdates: false }, + }); + + // Should NOT include OpenAI event subscription + expect(result.html).not.toContain('window.openai'); + }); + + it('should dispatch custom events on tool result', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'dynamic', + }); + + expect(result.html).toContain('frontmcp:toolResult'); + }); + }); + + describe('Hybrid Mode', () => { + it('should include placeholder in HTML', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + expect(result.html).toContain('__FRONTMCP_OUTPUT_PLACEHOLDER__'); + expect(result.html).toContain('Hybrid Mode'); + expect(result.buildMode).toBe('hybrid'); + expect(result.dataPlaceholder).toBe('__FRONTMCP_OUTPUT_PLACEHOLDER__'); + }); + + it('should use custom placeholder when provided', async () => { + const customPlaceholder = '__CUSTOM_PLACEHOLDER__'; + + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + hybridOptions: { placeholder: customPlaceholder }, + }); + + expect(result.html).toContain(customPlaceholder); + expect(result.dataPlaceholder).toBe(customPlaceholder); + }); + + it('should include JSON parsing logic for injected data', async () => { + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + // Should include parsing logic + expect(result.html).toContain('JSON.parse'); + }); + + it('should include tool name and placeholders in hybrid shell', async () => { + const { HYBRID_DATA_PLACEHOLDER, HYBRID_INPUT_PLACEHOLDER } = await import('@frontmcp/uipack/build'); + + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'my_weather_tool', + input: { city: 'NYC' }, // Input is ignored in hybrid mode, placeholder is used instead + buildMode: 'hybrid', + }); + + expect(result.html).toContain('my_weather_tool'); + // In hybrid mode, input and output are placeholders + expect(result.html).toContain(HYBRID_INPUT_PLACEHOLDER); + expect(result.html).toContain(HYBRID_DATA_PLACEHOLDER); + }); + }); + + describe('injectHybridData helper', () => { + it('should replace placeholder with JSON data', async () => { + const { injectHybridData, HYBRID_DATA_PLACEHOLDER } = await import('@frontmcp/uipack/build'); + + // Build a hybrid shell + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + // Verify placeholder exists in the data assignment + expect(result.html).toContain(HYBRID_DATA_PLACEHOLDER); + + // Inject data + const data = { temperature: 72, humidity: 45 }; + const injectedHtml = injectHybridData(result.html, data); + + // Count occurrences of placeholder - should be reduced after injection + const originalCount = (result.html.match(new RegExp(HYBRID_DATA_PLACEHOLDER, 'g')) || []).length; + const injectedCount = (injectedHtml.match(new RegExp(HYBRID_DATA_PLACEHOLDER, 'g')) || []).length; + expect(injectedCount).toBeLessThan(originalCount); + + // Data should be present (the JSON is double-escaped for embedding in a string literal) + expect(injectedHtml).toContain('temperature'); + expect(injectedHtml).toContain('humidity'); + }); + + it('should work with nested objects', async () => { + const { injectHybridData } = await import('@frontmcp/uipack/build'); + + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + const data = { + weather: { temp: 72, conditions: 'sunny' }, + location: { city: 'NYC', country: 'USA' }, + }; + + const injectedHtml = injectHybridData(result.html, data); + + expect(injectedHtml).toContain('sunny'); + expect(injectedHtml).toContain('NYC'); + }); + + it('should handle null data', async () => { + const { injectHybridData } = await import('@frontmcp/uipack/build'); + + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + const injectedHtml = injectHybridData(result.html, null); + + expect(injectedHtml).toContain('null'); + }); + + it('should inject both input and output with injectHybridDataFull', async () => { + const { injectHybridDataFull, HYBRID_DATA_PLACEHOLDER, HYBRID_INPUT_PLACEHOLDER } = await import( + '@frontmcp/uipack/build' + ); + + // Build a hybrid shell + const result = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + // Verify both placeholders exist + expect(result.html).toContain(HYBRID_DATA_PLACEHOLDER); + expect(result.html).toContain(HYBRID_INPUT_PLACEHOLDER); + expect(result.dataPlaceholder).toBe(HYBRID_DATA_PLACEHOLDER); + expect(result.inputPlaceholder).toBe(HYBRID_INPUT_PLACEHOLDER); + + // Inject both input and output + const input = { city: 'NYC', units: 'fahrenheit' }; + const output = { temperature: 72, humidity: 45 }; + const injectedHtml = injectHybridDataFull(result.html, input, output); + + // Both input and output data should be present + expect(injectedHtml).toContain('NYC'); + expect(injectedHtml).toContain('fahrenheit'); + expect(injectedHtml).toContain('temperature'); + expect(injectedHtml).toContain('humidity'); + }); + }); + + describe('isHybridShell helper', () => { + it('should detect hybrid shell', async () => { + const { isHybridShell } = await import('@frontmcp/uipack/build'); + + const hybridResult = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + const staticResult = await bundler.bundleToStaticHTML({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'static', + output: { temp: 72 }, + }); + + expect(isHybridShell(hybridResult.html)).toBe(true); + expect(isHybridShell(staticResult.html)).toBe(false); + }); + }); + + describe('Multi-platform with build modes', () => { + it('should apply build mode to all platforms', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'hybrid', + }); + + // All platforms should have hybrid mode + expect(result.platforms.openai.buildMode).toBe('hybrid'); + expect(result.platforms.claude.buildMode).toBe('hybrid'); + expect(result.platforms.generic.buildMode).toBe('hybrid'); + + // All platforms should have the placeholder + expect(result.platforms.openai.dataPlaceholder).toBe('__FRONTMCP_OUTPUT_PLACEHOLDER__'); + expect(result.platforms.claude.dataPlaceholder).toBe('__FRONTMCP_OUTPUT_PLACEHOLDER__'); + }); + + it('should support dynamic mode for OpenAI platform', async () => { + const result = await bundler.bundleToStaticHTMLAll({ + source: simpleComponent, + toolName: 'test_tool', + buildMode: 'dynamic', + platforms: ['openai'], + }); + + expect(result.platforms.openai.buildMode).toBe('dynamic'); + expect(result.platforms.openai.html).toContain('window.openai'); + }); + }); +}); diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index 22ba7cdf..215bd061 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -26,6 +26,9 @@ import type { PlatformBuildResult, MultiPlatformBuildResult, MergedStaticHTMLOptions, + BuildMode, + DynamicModeOptions, + HybridModeOptions, } from './types'; import { DEFAULT_BUNDLE_OPTIONS, @@ -35,6 +38,8 @@ import { STATIC_HTML_CDN, getCdnTypeForPlatform, ALL_PLATFORMS, + HYBRID_DATA_PLACEHOLDER, + HYBRID_INPUT_PLACEHOLDER, } from './types'; import { buildUIMeta, type AIPlatformType } from '@frontmcp/uipack/adapters'; import { DEFAULT_THEME, buildThemeCss, type ThemeConfig } from '@frontmcp/uipack/theme'; @@ -50,6 +55,7 @@ import { buildDataInjectionCode, buildComponentCode, } from '../universal/cached-runtime'; +import { buildCDNScriptTag, CLOUDFLARE_CDN } from '@frontmcp/uipack/build'; /** * Lazy-loaded esbuild transform function. @@ -413,7 +419,15 @@ export class InMemoryBundler { const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme }); const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); const frontmcpRuntime = this.buildFrontMCPRuntime(); - const dataScript = this.buildDataInjectionScript(opts.toolName, opts.input, opts.output, opts.structuredContent); + const dataScript = this.buildDataInjectionScript( + opts.toolName, + opts.input, + opts.output, + opts.structuredContent, + opts.buildMode, + opts.dynamicOptions, + opts.hybridOptions, + ); const componentScript = this.buildComponentRenderScript(bundleResult.code, opts.rootId, cdnType); // Assemble complete HTML document @@ -430,6 +444,12 @@ export class InMemoryBundler { const hash = hashContent(html); + // Determine data placeholders for hybrid mode + const dataPlaceholder = + opts.buildMode === 'hybrid' ? opts.hybridOptions?.placeholder ?? HYBRID_DATA_PLACEHOLDER : undefined; + const inputPlaceholder = + opts.buildMode === 'hybrid' ? opts.hybridOptions?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER : undefined; + return { html, componentCode: bundleResult.code, @@ -442,6 +462,9 @@ export class InMemoryBundler { cached: bundleResult.cached, sourceType: bundleResult.sourceType, targetPlatform: platform, + buildMode: opts.buildMode, + dataPlaceholder, + inputPlaceholder, }; } @@ -624,7 +647,15 @@ export class InMemoryBundler { }); const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); const frontmcpRuntime = this.buildFrontMCPRuntime(); - const dataScript = this.buildDataInjectionScript(opts.toolName, opts.input, opts.output, opts.structuredContent); + const dataScript = this.buildDataInjectionScript( + opts.toolName, + opts.input, + opts.output, + opts.structuredContent, + opts.buildMode, + opts.dynamicOptions, + opts.hybridOptions, + ); const componentScript = this.buildComponentRenderScript(transpiledCode!, opts.rootId, cdnType); html = this.assembleStaticHTML({ @@ -653,6 +684,12 @@ export class InMemoryBundler { html, }); + // Determine data placeholders for hybrid mode + const dataPlaceholder = + opts.buildMode === 'hybrid' ? opts.hybridOptions?.placeholder ?? HYBRID_DATA_PLACEHOLDER : undefined; + const inputPlaceholder = + opts.buildMode === 'hybrid' ? opts.hybridOptions?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER : undefined; + return { html, componentCode, @@ -668,6 +705,9 @@ export class InMemoryBundler { targetPlatform: platform, universal: isUniversal, contentType: isUniversal ? contentType : undefined, + buildMode: opts.buildMode, + dataPlaceholder, + inputPlaceholder, meta, }; } @@ -1282,6 +1322,10 @@ ${parts.appScript} contentType: options.contentType ?? DEFAULT_STATIC_HTML_OPTIONS.contentType, includeMarkdown: options.includeMarkdown ?? DEFAULT_STATIC_HTML_OPTIONS.includeMarkdown, includeMdx: options.includeMdx ?? DEFAULT_STATIC_HTML_OPTIONS.includeMdx, + // Build mode options + buildMode: options.buildMode ?? DEFAULT_STATIC_HTML_OPTIONS.buildMode, + dynamicOptions: options.dynamicOptions, + hybridOptions: options.hybridOptions, // Pass-through options toolName: options.toolName, input: options.input, @@ -1317,14 +1361,14 @@ ${parts.appScript} // Font stylesheet parts.push(``); - // Tailwind CSS (same for all platforms - CSS file from cdnjs) - const tailwindConfig = opts.externals.tailwind ?? 'cdn'; - if (tailwindConfig === 'cdn') { - parts.push(``); - } else if (tailwindConfig !== 'inline' && tailwindConfig) { - // Custom URL - parts.push(``); - } + parts.push(buildCDNScriptTag(CLOUDFLARE_CDN.tailwindCss)); + // // Tailwind CSS (same for all platforms - CSS file from cdnjs) + // const tailwindConfig = opts.externals.tailwind ?? 'cdn'; + // if (tailwindConfig === 'cdn') { + // } else if (tailwindConfig !== 'inline' && tailwindConfig) { + // // Custom URL + // parts.push(``); + // } // Theme CSS variables (injected as :root variables after Tailwind) parts.push(this.buildThemeStyleBlock(opts.theme)); @@ -1595,12 +1639,36 @@ ${parts.appScript} /** * Build data injection script for tool input/output. + * Dispatches to mode-specific builders based on buildMode. */ private buildDataInjectionScript( toolName: string, input?: Record, output?: unknown, structuredContent?: unknown, + buildMode: BuildMode = 'static', + dynamicOptions?: DynamicModeOptions, + hybridOptions?: HybridModeOptions, + ): string { + switch (buildMode) { + case 'dynamic': + return this.buildDynamicDataScript(toolName, input, output, structuredContent, dynamicOptions); + case 'hybrid': + return this.buildHybridDataScript(toolName, input, structuredContent, hybridOptions); + case 'static': + default: + return this.buildStaticDataScript(toolName, input, output, structuredContent); + } + } + + /** + * Build static data injection - data baked in at build time (current default). + */ + private buildStaticDataScript( + toolName: string, + input?: Record, + output?: unknown, + structuredContent?: unknown, ): string { const safeJson = (value: unknown): string => { try { @@ -1611,7 +1679,7 @@ ${parts.appScript} }; return ` - + `; } + /** + * Build dynamic data injection - subscribes to platform events for updates (OpenAI). + */ + private buildDynamicDataScript( + toolName: string, + input?: Record, + output?: unknown, + structuredContent?: unknown, + options?: DynamicModeOptions, + ): string { + const safeJson = (value: unknown): string => { + try { + return JSON.stringify(value); + } catch { + return 'null'; + } + }; + + const includeInitial = options?.includeInitialData !== false; + const subscribeToUpdates = options?.subscribeToUpdates !== false; + + const initialDataBlock = includeInitial + ? ` + window.__mcpToolOutput = ${safeJson(output ?? null)}; + if (window.__frontmcp && window.__frontmcp.setState) { + window.__frontmcp.setState({ + output: window.__mcpToolOutput, + loading: false, + }); + }` + : ` + window.__mcpToolOutput = null; + if (window.__frontmcp && window.__frontmcp.setState) { + window.__frontmcp.setState({ + output: null, + loading: true, + }); + }`; + + const subscriptionBlock = subscribeToUpdates + ? ` + // Subscribe to platform tool result updates + (function() { + function subscribeToUpdates() { + // OpenAI Apps SDK + if (window.openai && window.openai.canvas && window.openai.canvas.onToolResult) { + window.openai.canvas.onToolResult(function(result) { + window.__mcpToolOutput = result; + if (window.__frontmcp && window.__frontmcp.setState) { + window.__frontmcp.setState({ + output: result, + loading: false, + }); + } + // Dispatch custom event for React hooks + window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: result })); + }); + return; + } + + // Fallback: listen for custom events (for testing/other platforms) + window.addEventListener('frontmcp:injectData', function(e) { + if (e.detail && e.detail.output !== undefined) { + window.__mcpToolOutput = e.detail.output; + if (window.__frontmcp && window.__frontmcp.setState) { + window.__frontmcp.setState({ + output: e.detail.output, + loading: false, + }); + } + } + }); + } + + // Subscribe when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', subscribeToUpdates); + } else { + subscribeToUpdates(); + } + })();` + : ''; + + return ` + + `; + } + + /** + * Build hybrid data injection - shell with placeholders for runtime injection. + * Use injectHybridData() or injectHybridDataFull() from @frontmcp/uipack to replace the placeholders. + */ + private buildHybridDataScript( + toolName: string, + _input?: Record, + structuredContent?: unknown, + options?: HybridModeOptions, + ): string { + const safeJson = (value: unknown): string => { + try { + return JSON.stringify(value); + } catch { + return 'null'; + } + }; + + const outputPlaceholder = options?.placeholder ?? HYBRID_DATA_PLACEHOLDER; + const inputPlaceholder = options?.inputPlaceholder ?? HYBRID_INPUT_PLACEHOLDER; + + return ` + + `; + } + /** * Build component render script. * Wraps CommonJS code with module/exports shim to capture the component. diff --git a/libs/ui/src/bundler/index.ts b/libs/ui/src/bundler/index.ts index 182d6e00..3429971f 100644 --- a/libs/ui/src/bundler/index.ts +++ b/libs/ui/src/bundler/index.ts @@ -72,6 +72,10 @@ export type { MultiPlatformBuildOptions, PlatformBuildResult, MultiPlatformBuildResult, + // Build mode types + BuildMode, + DynamicModeOptions, + HybridModeOptions, } from './types'; export { @@ -85,6 +89,9 @@ export { getCdnTypeForPlatform, // Multi-platform build constants ALL_PLATFORMS, + // Build mode constants + HYBRID_DATA_PLACEHOLDER, + HYBRID_INPUT_PLACEHOLDER, } from './types'; // ============================================ diff --git a/libs/ui/src/bundler/types.ts b/libs/ui/src/bundler/types.ts index 65cf0a3d..f88a7402 100644 --- a/libs/ui/src/bundler/types.ts +++ b/libs/ui/src/bundler/types.ts @@ -8,6 +8,68 @@ import type { ThemeConfig } from '@frontmcp/uipack/theme'; +// ============================================ +// Build Mode Types +// ============================================ + +/** + * Build mode for static HTML generation. + * Controls how tool data is injected into the generated HTML. + * + * - 'static': Data is baked into HTML at build time (current default behavior) + * - 'dynamic': HTML subscribes to platform events for data updates (OpenAI onToolResult) + * - 'hybrid': Pre-built shell with placeholder for runtime data injection + */ +export type BuildMode = 'static' | 'dynamic' | 'hybrid'; + +/** + * Placeholder marker for hybrid mode output. + * Used as a string that callers can replace with actual JSON data. + */ +export const HYBRID_DATA_PLACEHOLDER = '__FRONTMCP_OUTPUT_PLACEHOLDER__'; + +/** + * Placeholder marker for hybrid mode input. + * Used as a string that callers can replace with actual JSON data. + */ +export const HYBRID_INPUT_PLACEHOLDER = '__FRONTMCP_INPUT_PLACEHOLDER__'; + +/** + * Dynamic mode configuration options. + */ +export interface DynamicModeOptions { + /** + * Whether to include initial data in the HTML. + * If true, component shows data immediately; if false, shows loading state. + * @default true + */ + includeInitialData?: boolean; + + /** + * Subscribe to platform tool result events. + * For OpenAI: window.openai.canvas.onToolResult + * @default true + */ + subscribeToUpdates?: boolean; +} + +/** + * Hybrid mode configuration options. + */ +export interface HybridModeOptions { + /** + * Custom placeholder string for output data injection. + * @default HYBRID_DATA_PLACEHOLDER + */ + placeholder?: string; + + /** + * Custom placeholder string for input data injection. + * @default HYBRID_INPUT_PLACEHOLDER + */ + inputPlaceholder?: string; +} + // ============================================ // Source Types // ============================================ @@ -911,6 +973,31 @@ export interface StaticHTMLOptions { * ``` */ customComponents?: string; + + // ============================================ + // Build Mode Options + // ============================================ + + /** + * Build mode for data injection. + * - 'static': Data baked in at build time (default) + * - 'dynamic': Subscribes to platform events for updates (OpenAI) + * - 'hybrid': Shell with placeholder for runtime data injection + * @default 'static' + */ + buildMode?: BuildMode; + + /** + * Options for dynamic build mode. + * Only used when buildMode is 'dynamic'. + */ + dynamicOptions?: DynamicModeOptions; + + /** + * Options for hybrid build mode. + * Only used when buildMode is 'hybrid'. + */ + hybridOptions?: HybridModeOptions; } /** @@ -966,6 +1053,23 @@ export interface StaticHTMLResult { * Content type detected/used (when universal mode is enabled). */ contentType?: 'html' | 'markdown' | 'react' | 'mdx'; + + /** + * Build mode used for data injection. + */ + buildMode?: BuildMode; + + /** + * For hybrid mode: the output placeholder string that can be replaced with data. + * Use injectHybridData() from @frontmcp/uipack to replace this placeholder. + */ + dataPlaceholder?: string; + + /** + * For hybrid mode: the input placeholder string that can be replaced with data. + * Use injectHybridDataFull() from @frontmcp/uipack to replace both placeholders. + */ + inputPlaceholder?: string; } /** @@ -988,11 +1092,6 @@ export const STATIC_HTML_CDN = { react: 'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js', reactDom: 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js', }, - /** - * Tailwind CSS from cdnjs (cloudflare) - works on all platforms - * Using CSS file instead of JS browser version to avoid style normalization issues - */ - tailwind: 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.4.1/tailwind.min.css', /** * Font CDN URLs */ @@ -1033,6 +1132,8 @@ export const DEFAULT_STATIC_HTML_OPTIONS = { contentType: 'auto' as const, includeMarkdown: false, includeMdx: false, + // Build mode defaults + buildMode: 'static' as BuildMode, } as const; // ============================================ @@ -1057,6 +1158,7 @@ export type MergedStaticHTMLOptions = Required< | 'contentType' | 'includeMarkdown' | 'includeMdx' + | 'buildMode' > > & Pick< @@ -1070,6 +1172,8 @@ export type MergedStaticHTMLOptions = Required< | 'customCss' | 'customComponents' | 'theme' + | 'dynamicOptions' + | 'hybridOptions' >; // ============================================ diff --git a/libs/ui/src/layouts/base.d.ts b/libs/ui/src/layouts/base.d.ts deleted file mode 100644 index a462b1ca..00000000 --- a/libs/ui/src/layouts/base.d.ts +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Base Layout System - * - * Provides the foundation for all FrontMCP UI pages with: - * - Platform-aware rendering (OpenAI, Claude, etc.) - * - Theme integration - * - CDN resource management - * - Responsive layouts - */ -import { type PlatformCapabilities, type ThemeConfig, type DeepPartial } from '../theme'; -/** - * Page type determines the layout structure - */ -export type PageType = - | 'auth' - | 'consent' - | 'error' - | 'loading' - | 'success' - | 'dashboard' - | 'widget' - | 'resource' - | 'custom'; -/** - * Layout size/width options - */ -export type LayoutSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'; -/** - * Background style options - */ -export type BackgroundStyle = 'solid' | 'gradient' | 'pattern' | 'none'; -/** - * Layout alignment options - */ -export type LayoutAlignment = 'center' | 'top' | 'start'; -/** - * Base layout configuration options - */ -export interface BaseLayoutOptions { - /** Page title (will be suffixed with branding) */ - title: string; - /** Page type for layout structure */ - pageType?: PageType; - /** Content width */ - size?: LayoutSize; - /** Content alignment */ - alignment?: LayoutAlignment; - /** Background style */ - background?: BackgroundStyle; - /** Optional page description for meta tag */ - description?: string; - /** Target platform capabilities */ - platform?: PlatformCapabilities; - /** Theme configuration (deep partial - nested properties are also optional) */ - theme?: DeepPartial; - /** Include HTMX (default: based on platform) */ - includeHtmx?: boolean; - /** Include Alpine.js (default: false) */ - includeAlpine?: boolean; - /** Include Lucide icons (default: false) */ - includeIcons?: boolean; - /** Additional head content */ - headExtra?: string; - /** Additional body attributes */ - bodyAttrs?: Record; - /** Custom body classes */ - bodyClass?: string; - /** Title suffix/branding */ - titleSuffix?: string; - /** Favicon URL */ - favicon?: string; - /** Open Graph meta tags */ - og?: { - title?: string; - description?: string; - image?: string; - type?: string; - }; -} -export { escapeHtml } from '../utils'; -/** - * Build the complete HTML document - * - * @param content - The page content (HTML string) - * @param options - Layout configuration options - * @returns Complete HTML document string - */ -export declare function baseLayout(content: string, options: BaseLayoutOptions): string; -/** - * Create a layout builder with preset options. - * The returned function accepts optional options that extend/override the defaults. - * If defaults include `title`, the returned function's options are fully optional. - */ -export declare function createLayoutBuilder( - defaults: Partial, -): (content: string, options?: Partial) => string; -//# sourceMappingURL=base.d.ts.map diff --git a/libs/ui/src/layouts/base.d.ts.map b/libs/ui/src/layouts/base.d.ts.map deleted file mode 100644 index 880338c6..00000000 --- a/libs/ui/src/layouts/base.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["base.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAChB,KAAK,WAAW,EAWjB,MAAM,UAAU,CAAC;AAOlB;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,UAAU,GACV,QAAQ,CAAC;AAEb;;GAEG;AACH,MAAM,MAAM,UAAU,GAClB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,UAAU,GACV,SAAS,GACT,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,QAAQ,GACR,KAAK,GACL,OAAO,CAAC;AAMZ;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IAEd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,wBAAwB;IACxB,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,uBAAuB;IACvB,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAEhC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEjC,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,yCAAyC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEnC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2BAA2B;IAC3B,EAAE,CAAC,EAAE;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAOD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA8FtC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAuG9E;AAMD;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,OAAO,CAAC,iBAAiB,CAAC,GACnC,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,MAAM,CAyBnE"} \ No newline at end of file diff --git a/libs/ui/src/universal/cached-runtime.ts b/libs/ui/src/universal/cached-runtime.ts index c08b2b1a..4c868224 100644 --- a/libs/ui/src/universal/cached-runtime.ts +++ b/libs/ui/src/universal/cached-runtime.ts @@ -166,6 +166,17 @@ function buildStoreRuntime(): string { context: state, setContext: function(ctx) { this.setState(ctx); + }, + // Dynamic mode: update output and re-render + updateOutput: function(output) { + this.setState({ output: output, loading: false }); + // Also update the global window variable for compatibility + window.__mcpToolOutput = output; + }, + // Dynamic mode: update input and re-render + updateInput: function(input) { + this.setState({ input: input }); + window.__mcpToolInput = input; } }; diff --git a/libs/uipack/src/build/cdn-resources.ts b/libs/uipack/src/build/cdn-resources.ts index c542a9d2..65a4ce83 100644 --- a/libs/uipack/src/build/cdn-resources.ts +++ b/libs/uipack/src/build/cdn-resources.ts @@ -97,8 +97,9 @@ export const CLOUDFLARE_CDN = { * Use this instead of TAILWIND_CDN for Claude Artifacts. */ tailwindCss: { - url: 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css', - type: 'stylesheet' as const, + url: 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.min.js', + integrity: 'sha512-TscjjxDy2iXx5s55Ar78c01JDHUug0K5aw4YKId9Yuocjx3ueX/X9PFyH5XNRVWqagx3TtcQWQVBaHAIPFjiFA==', + crossorigin: 'anonymous' as const, }, /** @@ -167,7 +168,7 @@ export function getTailwindForPlatform(platform: CDNPlatform): string { } // Claude and unknown platforms use pre-built CSS from Cloudflare - return ``; + return buildCDNScriptTag(CLOUDFLARE_CDN.tailwindCss); } /** diff --git a/libs/uipack/src/build/hybrid-data.ts b/libs/uipack/src/build/hybrid-data.ts new file mode 100644 index 00000000..1eaa0790 --- /dev/null +++ b/libs/uipack/src/build/hybrid-data.ts @@ -0,0 +1,152 @@ +/** + * Hybrid Mode Data Injection Utilities + * + * Provides utilities for injecting data into pre-built HTML shells + * without requiring re-transpilation of the component code. + * + * @packageDocumentation + */ + +// ============================================ +// Constants +// ============================================ + +/** + * Placeholder marker for hybrid mode. + * Used as a string that callers can replace with actual JSON data. + */ +export const HYBRID_DATA_PLACEHOLDER = '__FRONTMCP_OUTPUT_PLACEHOLDER__'; + +/** + * Placeholder for tool input injection. + */ +export const HYBRID_INPUT_PLACEHOLDER = '__FRONTMCP_INPUT_PLACEHOLDER__'; + +// ============================================ +// Helper Functions +// ============================================ + +/** + * Inject data into a hybrid mode HTML shell. + * Replaces the placeholder with actual JSON data. + * + * This function is designed for high performance - it only does a string + * replacement, avoiding any re-transpilation of component code. + * + * @param shell - HTML shell from bundleToStaticHTML with buildMode='hybrid' + * @param data - Data to inject (will be JSON.stringify'd) + * @param placeholder - Placeholder to replace (default: HYBRID_DATA_PLACEHOLDER) + * @returns HTML with data injected + * + * @example + * ```typescript + * import { injectHybridData } from '@frontmcp/uipack/build'; + * + * // Build shell once (cached) + * const result = await bundler.bundleToStaticHTML({ + * source: myComponent, + * toolName: 'my_tool', + * buildMode: 'hybrid', + * }); + * + * // Store the shell for reuse + * const cachedShell = result.html; + * + * // On each tool call, just inject data (no re-transpiling!) + * const html1 = injectHybridData(cachedShell, { temperature: 72 }); + * const html2 = injectHybridData(cachedShell, { temperature: 85 }); + * ``` + */ +export function injectHybridData( + shell: string, + data: unknown, + placeholder: string = HYBRID_DATA_PLACEHOLDER, +): string { + let jsonData: string; + try { + // Double-encode: the data is inside a string literal in JS + // So we need to escape the JSON for embedding in a string + jsonData = JSON.stringify(JSON.stringify(data)); + // Remove outer quotes since we're replacing inside a string literal + jsonData = jsonData.slice(1, -1); + } catch { + jsonData = 'null'; + } + + return shell.replace(placeholder, jsonData); +} + +/** + * Inject both input and output data into a hybrid mode HTML shell. + * Replaces both input and output placeholders. + * + * @param shell - HTML shell with both placeholders + * @param input - Input data to inject + * @param output - Output data to inject + * @returns HTML with both input and output injected + * + * @example + * ```typescript + * const html = injectHybridDataFull(cachedShell, { query: 'NYC' }, { temperature: 72 }); + * ``` + */ +export function injectHybridDataFull( + shell: string, + input: unknown, + output: unknown, +): string { + let result = shell; + result = injectHybridData(result, output, HYBRID_DATA_PLACEHOLDER); + result = injectHybridData(result, input, HYBRID_INPUT_PLACEHOLDER); + return result; +} + +/** + * Check if an HTML string is a hybrid mode shell (contains output placeholder). + * + * @param html - HTML string to check + * @param placeholder - Placeholder to look for (default: HYBRID_DATA_PLACEHOLDER) + * @returns true if the HTML contains the placeholder + * + * @example + * ```typescript + * import { isHybridShell } from '@frontmcp/uipack/build'; + * + * if (isHybridShell(cachedHtml)) { + * // Need to inject data before serving + * const html = injectHybridData(cachedHtml, toolOutput); + * } + * ``` + */ +export function isHybridShell( + html: string, + placeholder: string = HYBRID_DATA_PLACEHOLDER, +): boolean { + return html.includes(placeholder); +} + +/** + * Check if an HTML string needs input injection. + * + * @param html - HTML string to check + * @returns true if the HTML contains the input placeholder + */ +export function needsInputInjection(html: string): boolean { + return html.includes(HYBRID_INPUT_PLACEHOLDER); +} + +/** + * Get placeholders present in an HTML shell. + * + * @param html - HTML string to check + * @returns Object indicating which placeholders are present + */ +export function getHybridPlaceholders(html: string): { + hasOutput: boolean; + hasInput: boolean; +} { + return { + hasOutput: html.includes(HYBRID_DATA_PLACEHOLDER), + hasInput: html.includes(HYBRID_INPUT_PLACEHOLDER), + }; +} diff --git a/libs/uipack/src/build/index.ts b/libs/uipack/src/build/index.ts index f0aba581..b4d2ed52 100644 --- a/libs/uipack/src/build/index.ts +++ b/libs/uipack/src/build/index.ts @@ -683,3 +683,19 @@ export { } from './cdn-resources'; export type { CDNInfo, CDNPlatform } from './cdn-resources'; + +// ============================================ +// Hybrid Mode Data Injection +// ============================================ + +export { + // Constants + HYBRID_DATA_PLACEHOLDER, + HYBRID_INPUT_PLACEHOLDER, + // Helper functions + injectHybridData, + injectHybridDataFull, + isHybridShell, + needsInputInjection, + getHybridPlaceholders, +} from './hybrid-data'; diff --git a/libs/uipack/src/runtime/wrapper.ts b/libs/uipack/src/runtime/wrapper.ts index 618635aa..d90836f0 100644 --- a/libs/uipack/src/runtime/wrapper.ts +++ b/libs/uipack/src/runtime/wrapper.ts @@ -2215,7 +2215,7 @@ export function getToolUIMimeType(platform: 'openai' | 'ext-apps' | 'generic' = * These are pre-built files (not JIT compilers). */ const CLOUDFLARE_CDN = { - tailwindCss: 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css', + tailwindCss: 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.min.js', htmx: 'https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.4/htmx.min.js', alpinejs: 'https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.3/cdn.min.js', } as const; @@ -2269,8 +2269,7 @@ export function wrapToolUIForClaude(options: WrapToolUIForClaudeOptions): string const { content, toolName, input = {}, output, title, includeHtmx = false, includeAlpine = false } = options; // Build Tailwind CSS link (pre-built, not JIT) - const tailwindCss = ``; - + const tailwindCss = ``; // Optional scripts (only from cloudflare) const htmxScript = includeHtmx ? `` : ''; diff --git a/libs/uipack/src/theme/platforms.ts b/libs/uipack/src/theme/platforms.ts index 45ed7d24..85ea2205 100644 --- a/libs/uipack/src/theme/platforms.ts +++ b/libs/uipack/src/theme/platforms.ts @@ -107,7 +107,7 @@ export const CLAUDE_PLATFORM: PlatformCapabilities = { supportsTailwind: true, supportsHtmx: false, // Network blocked, HTMX won't work for API calls networkMode: 'blocked', - scriptStrategy: 'inline', + scriptStrategy: 'cdn', maxInlineSize: 100 * 1024, // 100KB limit for artifacts cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"], options: { @@ -124,9 +124,9 @@ export const GEMINI_PLATFORM: PlatformCapabilities = { id: 'gemini', name: 'Gemini', supportsWidgets: false, - supportsTailwind: false, + supportsTailwind: true, supportsHtmx: false, - networkMode: 'blocked', + networkMode: 'limited', scriptStrategy: 'inline', options: { fallback: 'markdown', // Fall back to markdown rendering diff --git a/libs/uipack/src/typings/__tests__/schemas.test.ts b/libs/uipack/src/typings/__tests__/schemas.test.ts index 6e726984..7afbfe53 100644 --- a/libs/uipack/src/typings/__tests__/schemas.test.ts +++ b/libs/uipack/src/typings/__tests__/schemas.test.ts @@ -85,13 +85,12 @@ describe('typeFileSchema', () => { ).toThrow(); }); - it('should reject invalid URL', () => { - expect(() => - typeFileSchema.parse({ - ...validFile, - url: 'not-a-valid-url', - }), - ).toThrow(); + it('should accept empty URL for synthesized alias files', () => { + const result = typeFileSchema.parse({ + ...validFile, + url: '', + }); + expect(result.url).toBe(''); }); it('should reject extra fields with strict mode', () => { @@ -130,6 +129,22 @@ describe('typeFetchResultSchema', () => { expect(result.specifier).toBe('react'); }); + it('should accept result with optional subpath field', () => { + const resultWithSubpath = { + ...validResult, + specifier: '@frontmcp/ui/react', + resolvedPackage: '@frontmcp/ui', + subpath: 'react', + }; + const result = typeFetchResultSchema.parse(resultWithSubpath); + expect(result.subpath).toBe('react'); + }); + + it('should accept result without subpath field', () => { + const result = typeFetchResultSchema.parse(validResult); + expect(result.subpath).toBeUndefined(); + }); + it('should reject missing fields', () => { const { specifier, ...withoutSpecifier } = validResult; expect(() => typeFetchResultSchema.parse(withoutSpecifier)).toThrow(); diff --git a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts index 2c5f7989..16689183 100644 --- a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts +++ b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts @@ -18,6 +18,9 @@ import { TYPE_CACHE_PREFIX, DEFAULT_TYPE_FETCHER_OPTIONS, DEFAULT_TYPE_CACHE_TTL, + buildTypeFiles, + getRelativeImportPath, + urlToVirtualPath, } from '../index'; // ============================================ @@ -227,6 +230,111 @@ import React from 'react';`; }); }); +// ============================================ +// Virtual Path Helper Tests +// ============================================ + +describe('getRelativeImportPath', () => { + it('should return correct path for single-level subpath', () => { + expect(getRelativeImportPath('react')).toBe('../index'); + expect(getRelativeImportPath('hooks')).toBe('../index'); + }); + + it('should return correct path for multi-level subpath', () => { + expect(getRelativeImportPath('components/button')).toBe('../../index'); + expect(getRelativeImportPath('a/b/c')).toBe('../../../index'); + }); +}); + +describe('urlToVirtualPath', () => { + it('should convert esm.sh URLs to virtual paths', () => { + const url = 'https://esm.sh/v135/zod@3.23.8/lib/types.d.ts'; + expect(urlToVirtualPath(url, 'zod', '3.23.8')).toBe('node_modules/zod/lib/types.d.ts'); + }); + + it('should handle scoped packages', () => { + const url = 'https://esm.sh/v135/@frontmcp/ui@1.0.0/react/index.d.ts'; + expect(urlToVirtualPath(url, '@frontmcp/ui', '1.0.0')).toBe('node_modules/@frontmcp/ui/react/index.d.ts'); + }); + + it('should handle root index files', () => { + const url = 'https://esm.sh/v135/react@18.2.0'; + expect(urlToVirtualPath(url, 'react', '18.2.0')).toBe('node_modules/react/index.d.ts'); + }); + + it('should handle invalid URLs gracefully', () => { + expect(urlToVirtualPath('not-a-url', 'pkg', '1.0.0')).toBe('node_modules/pkg/index.d.ts'); + }); +}); + +describe('buildTypeFiles', () => { + it('should build files array from contents map', () => { + const contents = new Map([['https://esm.sh/v135/react@18.2.0/index.d.ts', 'declare const React: any;']]); + + const files = buildTypeFiles(contents, 'react', '18.2.0'); + + expect(files).toHaveLength(1); + expect(files[0].path).toBe('node_modules/react/index.d.ts'); + expect(files[0].url).toBe('https://esm.sh/v135/react@18.2.0/index.d.ts'); + expect(files[0].content).toBe('declare const React: any;'); + }); + + it('should NOT create alias file when no subpath is provided', () => { + const contents = new Map([['https://esm.sh/v135/@frontmcp/ui@1.0.0/index.d.ts', 'export const Card: any;']]); + + const files = buildTypeFiles(contents, '@frontmcp/ui', '1.0.0'); + + expect(files).toHaveLength(1); + expect(files.find((f) => f.url === '')).toBeUndefined(); + }); + + it('should create alias file for single-level subpath', () => { + const contents = new Map([['https://esm.sh/v135/@frontmcp/ui@1.0.0/index.d.ts', 'export const Card: any;']]); + + const files = buildTypeFiles(contents, '@frontmcp/ui', '1.0.0', 'react'); + + expect(files).toHaveLength(2); + + // Find the alias file + const aliasFile = files.find((f) => f.path === 'node_modules/@frontmcp/ui/react/index.d.ts'); + expect(aliasFile).toBeDefined(); + expect(aliasFile?.url).toBe(''); // Synthesized, no actual URL + expect(aliasFile?.content).toContain("export * from '../index'"); + expect(aliasFile?.content).toContain('Auto-generated alias for @frontmcp/ui/react'); + }); + + it('should create alias file for deep subpath', () => { + const contents = new Map([['https://esm.sh/v135/@frontmcp/ui@1.0.0/index.d.ts', 'export const Card: any;']]); + + const files = buildTypeFiles(contents, '@frontmcp/ui', '1.0.0', 'components/button'); + + expect(files).toHaveLength(2); + + // Find the alias file + const aliasFile = files.find((f) => f.path === 'node_modules/@frontmcp/ui/components/button/index.d.ts'); + expect(aliasFile).toBeDefined(); + expect(aliasFile?.url).toBe(''); + expect(aliasFile?.content).toContain("export * from '../../index'"); + }); + + it('should NOT create alias if file already exists at that path', () => { + const contents = new Map([ + ['https://esm.sh/v135/@frontmcp/ui@1.0.0/index.d.ts', 'export const Card: any;'], + ['https://esm.sh/v135/@frontmcp/ui@1.0.0/react/index.d.ts', 'export const ReactCard: any;'], + ]); + + const files = buildTypeFiles(contents, '@frontmcp/ui', '1.0.0', 'react'); + + // Should have 2 files (the original ones), no synthesized alias + expect(files).toHaveLength(2); + + // The react/index.d.ts should be from the URL, not synthesized + const reactFile = files.find((f) => f.path === 'node_modules/@frontmcp/ui/react/index.d.ts'); + expect(reactFile?.url).toBe('https://esm.sh/v135/@frontmcp/ui@1.0.0/react/index.d.ts'); + expect(reactFile?.content).toBe('export const ReactCard: any;'); + }); +}); + // ============================================ // Memory Cache Tests // ============================================ diff --git a/libs/uipack/src/typings/index.ts b/libs/uipack/src/typings/index.ts index 600df5d2..bbf7cba5 100644 --- a/libs/uipack/src/typings/index.ts +++ b/libs/uipack/src/typings/index.ts @@ -147,4 +147,10 @@ export { // Type Fetcher // ============================================ -export { TypeFetcher, createTypeFetcher } from './type-fetcher'; +export { + TypeFetcher, + createTypeFetcher, + buildTypeFiles, + getRelativeImportPath, + urlToVirtualPath, +} from './type-fetcher'; diff --git a/libs/uipack/src/typings/schemas.ts b/libs/uipack/src/typings/schemas.ts index b8c634f5..2d4f404e 100644 --- a/libs/uipack/src/typings/schemas.ts +++ b/libs/uipack/src/typings/schemas.ts @@ -34,11 +34,12 @@ export type TypeFetchErrorCodeOutput = z.output /** * Schema for a single .d.ts file with its virtual path. * Used for browser editors that need individual files. + * Note: url can be empty for synthesized alias files. */ export const typeFileSchema = z .object({ path: z.string().min(1), - url: z.string().url(), + url: z.string(), // Allow empty string for synthesized alias files content: z.string(), }) .strict(); @@ -57,6 +58,7 @@ export const typeFetchResultSchema = z .object({ specifier: z.string().min(1), resolvedPackage: z.string().min(1), + subpath: z.string().optional(), version: z.string().min(1), content: z.string(), files: z.array(typeFileSchema), diff --git a/libs/uipack/src/typings/type-fetcher.ts b/libs/uipack/src/typings/type-fetcher.ts index b460a316..41e4e83b 100644 --- a/libs/uipack/src/typings/type-fetcher.ts +++ b/libs/uipack/src/typings/type-fetcher.ts @@ -257,7 +257,7 @@ export class TypeFetcher { } // Build individual files array for browser editors - const files = buildTypeFiles(contents, resolution.packageName, resolution.version); + const files = buildTypeFiles(contents, resolution.packageName, resolution.version, resolution.subpath); // Combine all fetched contents (deprecated, kept for backwards compatibility) const combinedContent = combineDtsContents(contents); @@ -265,6 +265,7 @@ export class TypeFetcher { const result: TypeFetchResult = { specifier, resolvedPackage: resolution.packageName, + subpath: resolution.subpath, version: resolution.version, content: combinedContent, files, @@ -552,13 +553,20 @@ function resolveRelativeUrl(base: string, relative: string): string | null { /** * Build TypeFile array from fetched contents. * Converts URLs to virtual file paths for browser editor compatibility. + * Creates alias entry points for subpath imports. * * @param contents - Map of URL to .d.ts content * @param packageName - The resolved package name * @param version - The package version + * @param subpath - Optional subpath from the original specifier * @returns Array of TypeFile objects with virtual paths */ -function buildTypeFiles(contents: Map, packageName: string, version: string): TypeFile[] { +export function buildTypeFiles( + contents: Map, + packageName: string, + version: string, + subpath?: string, +): TypeFile[] { const files: TypeFile[] = []; for (const [url, content] of contents.entries()) { @@ -570,9 +578,45 @@ function buildTypeFiles(contents: Map, packageName: string, vers }); } + // Create alias entry point for subpath imports + // This allows editors to resolve imports like "@frontmcp/ui/react" correctly + if (subpath) { + const aliasPath = `node_modules/${packageName}/${subpath}/index.d.ts`; + // Check if this path already exists in files + const aliasExists = files.some((f) => f.path === aliasPath); + + if (!aliasExists) { + // Create re-export alias that points to the package root + const aliasContent = `// Auto-generated alias for ${packageName}/${subpath} +export * from '${getRelativeImportPath(subpath)}'; +`; + files.push({ + path: aliasPath, + url: '', // No actual URL - this is synthesized + content: aliasContent, + }); + } + } + return files; } +/** + * Calculate relative import path from subpath to package root. + * + * @param subpath - The subpath within the package + * @returns Relative import path to the package root index + * + * @example + * getRelativeImportPath('react') // '../index' + * getRelativeImportPath('components/button') // '../../index' + */ +export function getRelativeImportPath(subpath: string): string { + const depth = subpath.split('/').length; + const prefix = '../'.repeat(depth); + return `${prefix}index`; +} + /** * Convert a CDN URL to a virtual file path for browser editors. * @@ -585,7 +629,7 @@ function buildTypeFiles(contents: Map, packageName: string, vers * @param version - The package version * @returns Virtual file path */ -function urlToVirtualPath(url: string, packageName: string, version: string): string { +export function urlToVirtualPath(url: string, packageName: string, version: string): string { try { const urlObj = new URL(url); const pathname = urlObj.pathname; diff --git a/libs/uipack/src/typings/types.ts b/libs/uipack/src/typings/types.ts index db69c65e..a1d0b998 100644 --- a/libs/uipack/src/typings/types.ts +++ b/libs/uipack/src/typings/types.ts @@ -72,6 +72,14 @@ export interface TypeFetchResult { */ resolvedPackage: string; + /** + * Subpath from the original specifier (if any). + * Used for creating alias entry points for nested imports. + * + * @example 'react' when specifier was '@frontmcp/ui/react' + */ + subpath?: string; + /** * Version of the package used for type fetching. * diff --git a/libs/uipack/tsconfig.lib.tsbuildinfo b/libs/uipack/tsconfig.lib.tsbuildinfo deleted file mode 100644 index 110d15b6..00000000 --- a/libs/uipack/tsconfig.lib.tsbuildinfo +++ /dev/null @@ -1 +0,0 @@ -{"root":["./src/index.ts","./src/adapters/index.ts","./src/adapters/platform-meta.ts","./src/adapters/response-builder.ts","./src/adapters/serving-mode.ts","./src/base-template/bridge.ts","./src/base-template/default-base-template.ts","./src/base-template/index.ts","./src/base-template/polyfills.ts","./src/base-template/theme-styles.ts","./src/bridge-runtime/iife-generator.ts","./src/bridge-runtime/index.ts","./src/build/cdn-resources.ts","./src/build/index.ts","./src/build/widget-manifest.ts","./src/bundler/cache.ts","./src/bundler/index.ts","./src/bundler/types.ts","./src/bundler/file-cache/component-builder.ts","./src/bundler/file-cache/hash-calculator.ts","./src/bundler/file-cache/index.ts","./src/bundler/file-cache/storage/filesystem.ts","./src/bundler/file-cache/storage/index.ts","./src/bundler/file-cache/storage/interface.ts","./src/bundler/file-cache/storage/redis.ts","./src/bundler/sandbox/enclave-adapter.ts","./src/bundler/sandbox/executor.ts","./src/bundler/sandbox/policy.ts","./src/dependency/cdn-registry.ts","./src/dependency/import-map.ts","./src/dependency/import-parser.ts","./src/dependency/index.ts","./src/dependency/resolver.ts","./src/dependency/schemas.ts","./src/dependency/template-loader.ts","./src/dependency/template-processor.ts","./src/dependency/types.ts","./src/handlebars/expression-extractor.ts","./src/handlebars/helpers.ts","./src/handlebars/index.ts","./src/registry/index.ts","./src/registry/render-template.ts","./src/registry/tool-ui.registry.ts","./src/registry/uri-utils.ts","./src/renderers/cache.ts","./src/renderers/html.renderer.ts","./src/renderers/index.ts","./src/renderers/mdx-client.renderer.ts","./src/renderers/registry.ts","./src/renderers/types.ts","./src/renderers/utils/detect.ts","./src/renderers/utils/hash.ts","./src/renderers/utils/index.ts","./src/renderers/utils/transpiler.ts","./src/runtime/csp.ts","./src/runtime/index.ts","./src/runtime/mcp-bridge.ts","./src/runtime/renderer-runtime.ts","./src/runtime/sanitizer.ts","./src/runtime/types.ts","./src/runtime/wrapper.ts","./src/runtime/adapters/html.adapter.ts","./src/runtime/adapters/index.ts","./src/runtime/adapters/mdx.adapter.ts","./src/runtime/adapters/types.ts","./src/styles/index.ts","./src/styles/variants.ts","./src/theme/cdn.ts","./src/theme/index.ts","./src/theme/platforms.ts","./src/theme/theme.ts","./src/theme/presets/github-openai.ts","./src/theme/presets/index.ts","./src/tool-template/builder.ts","./src/tool-template/index.ts","./src/types/index.ts","./src/types/ui-config.ts","./src/types/ui-runtime.ts","./src/typings/dts-parser.ts","./src/typings/index.ts","./src/typings/schemas.ts","./src/typings/type-fetcher.ts","./src/typings/types.ts","./src/typings/cache/cache-adapter.ts","./src/typings/cache/index.ts","./src/typings/cache/memory-cache.ts","./src/utils/escape-html.ts","./src/utils/index.ts","./src/utils/safe-stringify.ts","./src/validation/error-box.ts","./src/validation/index.ts","./src/validation/schema-paths.ts","./src/validation/template-validator.ts","./src/validation/wrapper.ts"],"version":"5.9.3"} \ No newline at end of file From 4fdd092b9e66b01a781251f9b8aa6963338235ee Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 11:52:46 +0200 Subject: [PATCH 05/19] feat: Enhance dynamic data injection with platform-aware handling for OpenAI and non-OpenAI environments --- libs/ui/src/bundler/bundler.ts | 141 +++++++++- libs/ui/src/universal/cached-runtime.ts | 328 ++++++++++++++++++++++++ 2 files changed, 464 insertions(+), 5 deletions(-) diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index 215bd061..b551356b 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -15,7 +15,6 @@ import type { BundlerOptions, SecurityPolicy, SourceType, - OutputFormat, StaticHTMLOptions, StaticHTMLResult, StaticHTMLExternalConfig, @@ -425,6 +424,7 @@ export class InMemoryBundler { opts.output, opts.structuredContent, opts.buildMode, + cdnType, opts.dynamicOptions, opts.hybridOptions, ); @@ -609,6 +609,12 @@ export class InMemoryBundler { contentType, transpiledCode ? null : options.source, transpiledCode !== null, + { + buildMode: opts.buildMode, + cdnType, + dynamicOptions: opts.dynamicOptions, + hybridOptions: opts.hybridOptions, + }, ); const appScript = buildAppScript( cachedRuntime.appTemplate, @@ -653,6 +659,7 @@ export class InMemoryBundler { opts.output, opts.structuredContent, opts.buildMode, + cdnType, opts.dynamicOptions, opts.hybridOptions, ); @@ -794,6 +801,12 @@ export class InMemoryBundler { contentType, transpiledCode ? null : options.source, // Pass source only if not a component transpiledCode !== null, + { + buildMode: opts.buildMode, + cdnType, + dynamicOptions: opts.dynamicOptions, + hybridOptions: opts.hybridOptions, + }, ); const appScript = buildAppScript( cachedRuntime.appTemplate, @@ -1647,12 +1660,13 @@ ${parts.appScript} output?: unknown, structuredContent?: unknown, buildMode: BuildMode = 'static', + cdnType: 'esm' | 'umd' = 'esm', dynamicOptions?: DynamicModeOptions, hybridOptions?: HybridModeOptions, ): string { switch (buildMode) { case 'dynamic': - return this.buildDynamicDataScript(toolName, input, output, structuredContent, dynamicOptions); + return this.buildDynamicDataScript(toolName, input, output, structuredContent, cdnType, dynamicOptions); case 'hybrid': return this.buildHybridDataScript(toolName, input, structuredContent, hybridOptions); case 'static': @@ -1697,9 +1711,113 @@ ${parts.appScript} } /** - * Build dynamic data injection - subscribes to platform events for updates (OpenAI). + * Build dynamic data injection - platform-aware. + * For OpenAI (ESM): subscribes to platform events for updates. + * For non-OpenAI (UMD/Claude): uses placeholders for data injection. */ private buildDynamicDataScript( + toolName: string, + input?: Record, + output?: unknown, + structuredContent?: unknown, + cdnType: 'esm' | 'umd' = 'esm', + options?: DynamicModeOptions, + ): string { + // For non-OpenAI platforms (UMD/Claude), use placeholders because they can't subscribe to OpenAI events + if (cdnType === 'umd') { + return this.buildDynamicWithPlaceholdersScript(toolName, structuredContent, options); + } + + // For OpenAI (ESM), use subscription pattern + return this.buildDynamicWithSubscriptionScript(toolName, input, output, structuredContent, options); + } + + /** + * Build dynamic data injection for non-OpenAI platforms using placeholders. + * Similar to hybrid mode but with platform-appropriate loading/error states. + */ + private buildDynamicWithPlaceholdersScript( + toolName: string, + structuredContent?: unknown, + options?: DynamicModeOptions, + ): string { + const safeJson = (value: unknown): string => { + try { + return JSON.stringify(value); + } catch { + return 'null'; + } + }; + + const outputPlaceholder = HYBRID_DATA_PLACEHOLDER; + const inputPlaceholder = HYBRID_INPUT_PLACEHOLDER; + const includeInitialData = options?.includeInitialData !== false; + + return ` + + `; + } + + /** + * Build dynamic data injection for OpenAI using subscription pattern. + */ + private buildDynamicWithSubscriptionScript( toolName: string, input?: Record, output?: unknown, @@ -1780,7 +1898,7 @@ ${parts.appScript} : ''; return ` - + `; diff --git a/libs/ui/src/universal/cached-runtime.ts b/libs/ui/src/universal/cached-runtime.ts index 4c868224..6416ce1d 100644 --- a/libs/ui/src/universal/cached-runtime.ts +++ b/libs/ui/src/universal/cached-runtime.ts @@ -843,8 +843,33 @@ export function buildAppScript( .replace(RUNTIME_PLACEHOLDERS.DATA_INJECTION, dataInjection); } +// ============================================ +// Build Mode Types (imported inline to avoid circular deps) +// ============================================ + +export type BuildMode = 'static' | 'dynamic' | 'hybrid'; + +export interface DataInjectionOptions { + buildMode?: BuildMode; + /** CDN type - needed for platform-aware dynamic mode */ + cdnType?: 'esm' | 'umd'; + dynamicOptions?: { + includeInitialData?: boolean; + subscribeToUpdates?: boolean; + }; + hybridOptions?: { + placeholder?: string; + inputPlaceholder?: string; + }; +} + +// Default placeholders for hybrid mode +const DEFAULT_OUTPUT_PLACEHOLDER = '__FRONTMCP_OUTPUT_PLACEHOLDER__'; +const DEFAULT_INPUT_PLACEHOLDER = '__FRONTMCP_INPUT_PLACEHOLDER__'; + /** * Build data injection code for the app script. + * Supports static, dynamic, and hybrid build modes. */ export function buildDataInjectionCode( toolName: string, @@ -854,6 +879,57 @@ export function buildDataInjectionCode( contentType: string, source: string | null, hasComponent: boolean, + options?: DataInjectionOptions, +): string { + const buildMode = options?.buildMode ?? 'static'; + const cdnType = options?.cdnType ?? 'esm'; + + switch (buildMode) { + case 'dynamic': + return buildDynamicDataInjectionCode( + toolName, + input, + output, + structuredContent, + contentType, + source, + hasComponent, + cdnType, + options?.dynamicOptions, + ); + case 'hybrid': + return buildHybridDataInjectionCode( + toolName, + structuredContent, + contentType, + source, + hasComponent, + options?.hybridOptions, + ); + default: + return buildStaticDataInjectionCode( + toolName, + input, + output, + structuredContent, + contentType, + source, + hasComponent, + ); + } +} + +/** + * Build static data injection code (original behavior). + */ +function buildStaticDataInjectionCode( + toolName: string, + input: unknown, + output: unknown, + structuredContent: unknown, + contentType: string, + source: string | null, + hasComponent: boolean, ): string { const safeJson = (value: unknown): string => { try { @@ -865,6 +941,7 @@ export function buildDataInjectionCode( if (hasComponent) { return ` + // Static Mode - Data baked at build time window.__frontmcp.setState({ toolName: ${safeJson(toolName)}, input: ${safeJson(input ?? null)}, @@ -880,6 +957,7 @@ export function buildDataInjectionCode( } return ` + // Static Mode - Data baked at build time window.__frontmcp.setState({ toolName: ${safeJson(toolName)}, input: ${safeJson(input ?? null)}, @@ -894,6 +972,256 @@ export function buildDataInjectionCode( });`; } +/** + * Build dynamic data injection code - platform-aware. + * For OpenAI (ESM): subscribes to platform events. + * For non-OpenAI (UMD/Claude): uses placeholders for data injection. + */ +function buildDynamicDataInjectionCode( + toolName: string, + input: unknown, + output: unknown, + structuredContent: unknown, + contentType: string, + source: string | null, + hasComponent: boolean, + cdnType: 'esm' | 'umd', + dynamicOptions?: { includeInitialData?: boolean; subscribeToUpdates?: boolean }, +): string { + // For non-OpenAI platforms (UMD/Claude), use placeholders + if (cdnType === 'umd') { + return buildDynamicWithPlaceholdersCode( + toolName, + structuredContent, + contentType, + source, + hasComponent, + dynamicOptions, + ); + } + + // For OpenAI (ESM), use subscription pattern + return buildDynamicWithSubscriptionCode( + toolName, + input, + output, + structuredContent, + contentType, + source, + hasComponent, + dynamicOptions, + ); +} + +/** + * Build dynamic data injection for non-OpenAI platforms using placeholders. + */ +function buildDynamicWithPlaceholdersCode( + toolName: string, + structuredContent: unknown, + contentType: string, + source: string | null, + hasComponent: boolean, + dynamicOptions?: { includeInitialData?: boolean; subscribeToUpdates?: boolean }, +): string { + const safeJson = (value: unknown): string => { + try { + return JSON.stringify(value); + } catch { + return 'null'; + } + }; + + const outputPlaceholder = DEFAULT_OUTPUT_PLACEHOLDER; + const inputPlaceholder = DEFAULT_INPUT_PLACEHOLDER; + const includeInitialData = dynamicOptions?.includeInitialData ?? true; + + const contentBlock = hasComponent + ? `content: { type: 'react', source: window.__frontmcp_component }` + : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`; + + return ` + // Dynamic Mode - Placeholder-based for non-OpenAI platforms + var __outputRaw = "${outputPlaceholder}"; + var __inputRaw = "${inputPlaceholder}"; + var __output = null; + var __input = null; + var __error = null; + var __outputNotReplaced = false; + var __includeInitialData = ${includeInitialData}; + + // Parse output placeholder + if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") { + try { __output = JSON.parse(__outputRaw); } catch (e) { + console.warn('[FrontMCP] Failed to parse output:', e); + __error = 'Failed to parse output data'; + } + } else if (__outputRaw === "${outputPlaceholder}") { + __outputNotReplaced = true; + } + + // Parse input placeholder + if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") { + try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); } + } + + // Handle placeholder not replaced - show error if expecting initial data + if (__outputNotReplaced && __includeInitialData) { + __error = 'No data provided. The output placeholder was not replaced.'; + } + + window.__frontmcp.setState({ + toolName: ${safeJson(toolName)}, + input: __input, + output: __output, + structuredContent: ${safeJson(structuredContent ?? null)}, + ${contentBlock}, + loading: !__includeInitialData && __output === null && !__error, + error: __error + });`; +} + +/** + * Build dynamic data injection for OpenAI using subscription pattern. + */ +function buildDynamicWithSubscriptionCode( + toolName: string, + input: unknown, + output: unknown, + structuredContent: unknown, + contentType: string, + source: string | null, + hasComponent: boolean, + dynamicOptions?: { includeInitialData?: boolean; subscribeToUpdates?: boolean }, +): string { + const safeJson = (value: unknown): string => { + try { + return JSON.stringify(value); + } catch { + return 'null'; + } + }; + + const includeInitialData = dynamicOptions?.includeInitialData ?? true; + const subscribeToUpdates = dynamicOptions?.subscribeToUpdates ?? true; + + const contentBlock = hasComponent + ? `content: { type: 'react', source: window.__frontmcp_component }` + : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`; + + const initialState = includeInitialData + ? `{ + toolName: ${safeJson(toolName)}, + input: ${safeJson(input ?? null)}, + output: ${safeJson(output ?? null)}, + structuredContent: ${safeJson(structuredContent ?? null)}, + ${contentBlock}, + loading: false, + error: null + }` + : `{ + toolName: ${safeJson(toolName)}, + input: ${safeJson(input ?? null)}, + output: null, + structuredContent: ${safeJson(structuredContent ?? null)}, + ${contentBlock}, + loading: true, + error: null + }`; + + const subscriptionBlock = subscribeToUpdates + ? ` + // Subscribe to platform tool result events + (function() { + function subscribeToUpdates() { + if (window.openai && window.openai.canvas && window.openai.canvas.onToolResult) { + window.openai.canvas.onToolResult(function(result) { + window.__frontmcp.updateOutput(result); + window.dispatchEvent(new CustomEvent('frontmcp:toolResult', { detail: result })); + }); + } + } + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', subscribeToUpdates); + } else { + subscribeToUpdates(); + } + })();` + : ''; + + return ` + // Dynamic Mode - OpenAI Subscription + window.__frontmcp.setState(${initialState}); + ${subscriptionBlock}`; +} + +/** + * Build hybrid data injection code with placeholders. + */ +function buildHybridDataInjectionCode( + toolName: string, + structuredContent: unknown, + contentType: string, + source: string | null, + hasComponent: boolean, + hybridOptions?: { placeholder?: string; inputPlaceholder?: string }, +): string { + const safeJson = (value: unknown): string => { + try { + return JSON.stringify(value); + } catch { + return 'null'; + } + }; + + const outputPlaceholder = hybridOptions?.placeholder ?? DEFAULT_OUTPUT_PLACEHOLDER; + const inputPlaceholder = hybridOptions?.inputPlaceholder ?? DEFAULT_INPUT_PLACEHOLDER; + + const contentBlock = hasComponent + ? `content: { type: 'react', source: window.__frontmcp_component }` + : `content: { type: ${safeJson(contentType)}, source: ${safeJson(source)} }`; + + return ` + // Hybrid Mode - Placeholders replaced at runtime + var __outputRaw = "${outputPlaceholder}"; + var __inputRaw = "${inputPlaceholder}"; + var __output = null; + var __input = null; + var __error = null; + var __outputNotReplaced = false; + + // Parse output placeholder + if (typeof __outputRaw === 'string' && __outputRaw !== "${outputPlaceholder}") { + try { __output = JSON.parse(__outputRaw); } catch (e) { + console.warn('[FrontMCP] Failed to parse output:', e); + __error = 'Failed to parse output data'; + } + } else if (__outputRaw === "${outputPlaceholder}") { + // Placeholder not replaced - no data was injected + __outputNotReplaced = true; + } + + // Parse input placeholder + if (typeof __inputRaw === 'string' && __inputRaw !== "${inputPlaceholder}") { + try { __input = JSON.parse(__inputRaw); } catch (e) { console.warn('[FrontMCP] Failed to parse input:', e); } + } + + // Set error if output placeholder was not replaced (no data provided) + if (__outputNotReplaced) { + __error = 'No data provided. The output placeholder was not replaced.'; + } + + window.__frontmcp.setState({ + toolName: ${safeJson(toolName)}, + input: __input, + output: __output, + structuredContent: ${safeJson(structuredContent ?? null)}, + ${contentBlock}, + loading: false, + error: __error + });`; +} + /** * Build component wrapper code. */ From ab74e0282bb8a2f85fe232ec2f9dc2e487233663 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 13:10:46 +0200 Subject: [PATCH 06/19] feat: Add documentation for build modes and data injection strategies --- docs/draft/docs.json | 1 + docs/draft/docs/ui/advanced/build-modes.mdx | 321 ++++++++++++++++++++ docs/draft/docs/ui/advanced/platforms.mdx | 17 ++ libs/ui/tsconfig.lib.json | 32 +- libs/uipack/src/index.ts | 8 + 5 files changed, 363 insertions(+), 16 deletions(-) create mode 100644 docs/draft/docs/ui/advanced/build-modes.mdx diff --git a/docs/draft/docs.json b/docs/draft/docs.json index f23aa80e..ca6b805f 100644 --- a/docs/draft/docs.json +++ b/docs/draft/docs.json @@ -236,6 +236,7 @@ "icon": "bolt", "pages": [ "docs/ui/advanced/platforms", + "docs/ui/advanced/build-modes", "docs/ui/advanced/mcp-bridge", "docs/ui/advanced/hydration", "docs/ui/advanced/custom-renderers" diff --git a/docs/draft/docs/ui/advanced/build-modes.mdx b/docs/draft/docs/ui/advanced/build-modes.mdx new file mode 100644 index 00000000..eddeb8f5 --- /dev/null +++ b/docs/draft/docs/ui/advanced/build-modes.mdx @@ -0,0 +1,321 @@ +--- +title: Build Modes +sidebarTitle: Build Modes +icon: hammer +description: Control how widget data is injected into HTML - static baking, dynamic subscription, or hybrid placeholder injection. +--- + +## Overview + +FrontMCP supports three build modes that control how tool input/output data is injected into the rendered HTML: + +| Mode | Description | Best For | +|------|-------------|----------| +| **static** | Data baked into HTML at build time | Default, simple widgets | +| **dynamic** | Platform-aware - subscribes to events (OpenAI) or uses placeholders (Claude) | Real-time updates, multi-platform | +| **hybrid** | Pre-built shell with placeholders, replace at runtime | Caching, high-performance | + +## Static Mode (Default) + +Data is serialized and embedded directly in the HTML at build time. + +```typescript +const result = await bundler.bundleToStaticHTML({ + source: componentCode, + toolName: 'get_weather', + output: { temperature: 72, unit: 'F' }, + buildMode: 'static', // default +}); +``` + +The generated HTML includes the data inline: + +```html + +``` + +**Use when:** +- Widget content doesn't change after initial render +- Simple tool responses +- No caching requirements + +## Dynamic Mode + +Dynamic mode is **platform-aware** - it behaves differently depending on the target platform: + +### OpenAI (ESM) + +For OpenAI, dynamic mode subscribes to the `window.openai.canvas.onToolResult` event for real-time updates: + +```typescript +const result = await bundler.bundleToStaticHTML({ + source: componentCode, + toolName: 'get_weather', + output: { temperature: 72 }, // Optional initial data + buildMode: 'dynamic', + dynamicOptions: { + includeInitialData: true, // Include initial data (default: true) + subscribeToUpdates: true, // Subscribe to events (default: true) + }, +}); +``` + +Generated HTML subscribes to OpenAI events: + +```html + +``` + +### Claude/Non-OpenAI (UMD) + +For non-OpenAI platforms (Claude, etc.), dynamic mode uses **placeholders** since they can't subscribe to OpenAI events: + +```html + +``` + +Use the `injectHybridDataFull` helper to replace placeholders before sending: + +```typescript +import { injectHybridDataFull } from '@frontmcp/uipack/build'; + +// Build once +const shell = await bundler.bundleToStaticHTML({ + source: componentCode, + toolName: 'get_weather', + buildMode: 'dynamic', + platform: 'claude', +}); + +// Inject data before sending +const html = injectHybridDataFull( + shell.html, + { location: 'San Francisco' }, // input + { temperature: 72, unit: 'F' }, // output +); +``` + +### Dynamic Options + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `includeInitialData` | `boolean` | `true` | Include initial data in HTML | +| `subscribeToUpdates` | `boolean` | `true` | Subscribe to platform events (OpenAI only) | + +**Behavior when `includeInitialData: false`:** +- **OpenAI**: Shows loading state, waits for `onToolResult` event +- **Claude**: Shows loading state if placeholder not replaced, error if expected data missing + +## Hybrid Mode + +Hybrid mode creates a pre-built shell with placeholders that you replace at runtime. This is ideal for caching - build the shell once, inject different data per request. + +```typescript +import { injectHybridData, injectHybridDataFull } from '@frontmcp/uipack/build'; + +// 1. Build shell ONCE at startup +const shell = await bundler.bundleToStaticHTML({ + source: componentCode, + toolName: 'get_weather', + buildMode: 'hybrid', +}); + +// Cache the shell +const cachedShell = shell.html; + +// 2. On each request, just inject data (no rebuild!) +const html1 = injectHybridDataFull(cachedShell, input1, output1); +const html2 = injectHybridDataFull(cachedShell, input2, output2); +``` + +### Placeholders + +| Placeholder | Purpose | +|-------------|---------| +| `__FRONTMCP_OUTPUT_PLACEHOLDER__` | Replaced with tool output JSON | +| `__FRONTMCP_INPUT_PLACEHOLDER__` | Replaced with tool input JSON | + +### Helper Functions + +```typescript +import { + injectHybridData, + injectHybridDataFull, + isHybridShell, + HYBRID_DATA_PLACEHOLDER, + HYBRID_INPUT_PLACEHOLDER, +} from '@frontmcp/uipack/build'; + +// Inject output only +const html = injectHybridData(shell, { temperature: 72 }); + +// Inject both input and output +const html = injectHybridDataFull(shell, input, output); + +// Check if HTML is a hybrid shell +if (isHybridShell(html)) { + // Contains placeholders - needs injection +} +``` + +### Error Handling + +If placeholders are not replaced, the widget shows an error: + +```javascript +// If placeholder not replaced: +window.__frontmcp.setState({ + loading: false, + error: 'No data provided. The output placeholder was not replaced.' +}); +``` + +## Multi-Platform Building + +Build for multiple platforms at once with platform-specific behavior: + +```typescript +const result = await bundler.bundleForMultiplePlatforms({ + source: componentCode, + toolName: 'get_weather', + buildMode: 'dynamic', + platforms: ['openai', 'claude'], +}); + +// OpenAI HTML: subscribes to onToolResult events +const openaiHtml = result.platforms.openai.html; + +// Claude HTML: has placeholders - inject data before sending +const claudeHtml = injectHybridDataFull( + result.platforms.claude.html, + input, + output, +); +``` + +## Platform Behavior Summary + +| Mode | OpenAI (ESM) | Claude (UMD) | +|------|--------------|--------------| +| **static** | Data baked in | Data baked in | +| **dynamic** | Event subscription | Placeholders | +| **hybrid** | Placeholders | Placeholders | + +## Best Practices + +1. **Use static mode** for simple, one-off widgets +2. **Use dynamic mode** for multi-platform apps that need the same build mode everywhere +3. **Use hybrid mode** for high-performance scenarios where you cache the shell +4. **Always inject data** before sending hybrid/dynamic (Claude) HTML to clients + +## TypeScript Types + +```typescript +import type { BuildMode, DynamicModeOptions, HybridModeOptions } from '@frontmcp/ui/bundler'; + +type BuildMode = 'static' | 'dynamic' | 'hybrid'; + +interface DynamicModeOptions { + includeInitialData?: boolean; // default: true + subscribeToUpdates?: boolean; // default: true +} + +interface HybridModeOptions { + placeholder?: string; // default: '__FRONTMCP_OUTPUT_PLACEHOLDER__' + inputPlaceholder?: string; // default: '__FRONTMCP_INPUT_PLACEHOLDER__' +} +``` + +## API Reference + +### `bundleToStaticHTML(options)` + +```typescript +interface StaticHTMLOptions { + // ... existing options ... + + /** Build mode - controls data injection strategy */ + buildMode?: BuildMode; + + /** Options for dynamic mode */ + dynamicOptions?: DynamicModeOptions; + + /** Options for hybrid mode */ + hybridOptions?: HybridModeOptions; +} + +interface StaticHTMLResult { + // ... existing fields ... + + /** The build mode used */ + buildMode?: BuildMode; + + /** Output placeholder (hybrid mode) */ + dataPlaceholder?: string; + + /** Input placeholder (hybrid mode) */ + inputPlaceholder?: string; +} +``` + +### `injectHybridData(shell, data, placeholder?)` + +Replaces the output placeholder with JSON data. + +```typescript +function injectHybridData( + shell: string, + data: unknown, + placeholder?: string, // default: '__FRONTMCP_OUTPUT_PLACEHOLDER__' +): string; +``` + +### `injectHybridDataFull(shell, input, output)` + +Replaces both input and output placeholders. + +```typescript +function injectHybridDataFull( + shell: string, + input: unknown, + output: unknown, +): string; +``` + +### `isHybridShell(html, placeholder?)` + +Checks if HTML contains the output placeholder. + +```typescript +function isHybridShell( + html: string, + placeholder?: string, +): boolean; +``` diff --git a/docs/draft/docs/ui/advanced/platforms.mdx b/docs/draft/docs/ui/advanced/platforms.mdx index eea33bd3..be5ddd0a 100644 --- a/docs/draft/docs/ui/advanced/platforms.mdx +++ b/docs/draft/docs/ui/advanced/platforms.mdx @@ -18,6 +18,23 @@ description: FrontMCP UI adapts to different AI platform capabilities. Each plat | **Gemini** | Limited | Inline preferred | Basic | JSON only | | **generic-mcp** | Varies | CDN/Inline | inline, static | `_meta['ui/html']` | +## Build Modes & Data Injection + +FrontMCP supports three build modes that behave differently per platform: + +| Mode | OpenAI | Claude/Other | +|------|--------|--------------| +| **static** | Data baked in | Data baked in | +| **dynamic** | Event subscription | Placeholders | +| **hybrid** | Placeholders | Placeholders | + +For OpenAI, **dynamic mode** subscribes to `window.openai.canvas.onToolResult` for real-time updates. +For Claude and other platforms, **dynamic mode** uses placeholders that must be replaced before sending. + + + Learn about static, dynamic, and hybrid build modes with platform-aware data injection. + + ## Platform Detection FrontMCP automatically detects the platform: diff --git a/libs/ui/tsconfig.lib.json b/libs/ui/tsconfig.lib.json index ae47316c..1c898171 100644 --- a/libs/ui/tsconfig.lib.json +++ b/libs/ui/tsconfig.lib.json @@ -7,22 +7,22 @@ "declarationMap": true, "types": ["node"], "paths": { - "@frontmcp/uipack": ["libs/uipack/dist/index.d.ts"], - "@frontmcp/uipack/utils": ["libs/uipack/dist/utils/index.d.ts"], - "@frontmcp/uipack/types": ["libs/uipack/dist/types/index.d.ts"], - "@frontmcp/uipack/runtime": ["libs/uipack/dist/runtime/index.d.ts"], - "@frontmcp/uipack/renderers": ["libs/uipack/dist/renderers/index.d.ts"], - "@frontmcp/uipack/dependency": ["libs/uipack/dist/dependency/index.d.ts"], - "@frontmcp/uipack/theme": ["libs/uipack/dist/theme/index.d.ts"], - "@frontmcp/uipack/build": ["libs/uipack/dist/build/index.d.ts"], - "@frontmcp/uipack/bundler": ["libs/uipack/dist/bundler/index.d.ts"], - "@frontmcp/uipack/validation": ["libs/uipack/dist/validation/index.d.ts"], - "@frontmcp/uipack/registry": ["libs/uipack/dist/registry/index.d.ts"], - "@frontmcp/uipack/styles": ["libs/uipack/dist/styles/index.d.ts"], - "@frontmcp/uipack/handlebars": ["libs/uipack/dist/handlebars/index.d.ts"], - "@frontmcp/uipack/typings": ["libs/uipack/dist/typings/index.d.ts"], - "@frontmcp/uipack/adapters": ["libs/uipack/dist/adapters/index.d.ts"], - "@frontmcp/uipack/bridge-runtime": ["libs/uipack/dist/bridge-runtime/index.d.ts"] + "@frontmcp/uipack": ["../uipack/dist/index.d.ts"], + "@frontmcp/uipack/utils": ["../uipack/dist/utils/index.d.ts"], + "@frontmcp/uipack/types": ["../uipack/dist/types/index.d.ts"], + "@frontmcp/uipack/runtime": ["../uipack/dist/runtime/index.d.ts"], + "@frontmcp/uipack/renderers": ["../uipack/dist/renderers/index.d.ts"], + "@frontmcp/uipack/dependency": ["../uipack/dist/dependency/index.d.ts"], + "@frontmcp/uipack/theme": ["../uipack/dist/theme/index.d.ts"], + "@frontmcp/uipack/build": ["../uipack/dist/build/index.d.ts"], + "@frontmcp/uipack/bundler": ["../uipack/dist/bundler/index.d.ts"], + "@frontmcp/uipack/validation": ["../uipack/dist/validation/index.d.ts"], + "@frontmcp/uipack/registry": ["../uipack/dist/registry/index.d.ts"], + "@frontmcp/uipack/styles": ["../uipack/dist/styles/index.d.ts"], + "@frontmcp/uipack/handlebars": ["../uipack/dist/handlebars/index.d.ts"], + "@frontmcp/uipack/typings": ["../uipack/dist/typings/index.d.ts"], + "@frontmcp/uipack/adapters": ["../uipack/dist/adapters/index.d.ts"], + "@frontmcp/uipack/bridge-runtime": ["../uipack/dist/bridge-runtime/index.d.ts"] } }, "include": ["src/**/*.ts", "src/**/*.tsx"], diff --git a/libs/uipack/src/index.ts b/libs/uipack/src/index.ts index 9ee9048a..fa25cc3b 100644 --- a/libs/uipack/src/index.ts +++ b/libs/uipack/src/index.ts @@ -77,6 +77,14 @@ export { buildToolUI, buildToolUIMulti, buildStaticWidget, + // Hybrid mode data injection + HYBRID_DATA_PLACEHOLDER, + HYBRID_INPUT_PLACEHOLDER, + injectHybridData, + injectHybridDataFull, + isHybridShell, + needsInputInjection, + getHybridPlaceholders, } from './build'; // ============================================ From e6bd540660bdede1b104b57a8b9c15eced9cc9fe Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 18:13:13 +0200 Subject: [PATCH 07/19] refactor: Simplify adapter access and improve error handling in various components --- eslint.config.mjs | 2 +- .../src/bridge/adapters/ext-apps.adapter.ts | 2 +- libs/ui/src/bridge/core/bridge-factory.ts | 66 ++++++++++--------- libs/ui/src/bundler/bundler.ts | 14 ++-- .../bundler/file-cache/component-builder.ts | 5 +- .../src/bundler/file-cache/hash-calculator.ts | 2 +- .../bundler/file-cache/storage/filesystem.ts | 4 +- .../src/bundler/file-cache/storage/redis.ts | 2 +- libs/ui/src/components/button.test.ts | 8 --- libs/ui/src/layouts/base.ts | 5 +- libs/ui/src/layouts/presets.ts | 2 +- libs/ui/src/pages/consent.ts | 4 +- libs/ui/src/pages/error.ts | 2 +- libs/ui/src/react/Badge.tsx | 1 - libs/ui/src/react/hooks/context.tsx | 2 +- libs/ui/src/react/types.ts | 11 +--- libs/ui/src/universal/UniversalApp.tsx | 2 +- libs/ui/src/universal/renderers/index.ts | 8 +-- libs/ui/src/universal/runtime-builder.ts | 2 +- libs/ui/src/universal/types.ts | 1 - .../src/web-components/elements/fmcp-input.ts | 2 +- .../web-components/elements/fmcp-select.ts | 2 +- 22 files changed, 67 insertions(+), 82 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 7cc2dd4c..de7975b8 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -26,7 +26,7 @@ export default [ 'error', { enforceBuildableLibDependency: true, - allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?[jt]s$', '@frontmcp/sdk'], + allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?[jt]s$', '@frontmcp/sdk', '@frontmcp/uipack', '@frontmcp/uipack/*'], depConstraints: [ { sourceTag: '*', diff --git a/libs/ui/src/bridge/adapters/ext-apps.adapter.ts b/libs/ui/src/bridge/adapters/ext-apps.adapter.ts index 2e39a165..0a34cdea 100644 --- a/libs/ui/src/bridge/adapters/ext-apps.adapter.ts +++ b/libs/ui/src/bridge/adapters/ext-apps.adapter.ts @@ -144,7 +144,7 @@ export class ExtAppsAdapter extends BaseAdapter { } // Reject all pending requests - for (const [id, pending] of this._pendingRequests) { + for (const [_id, pending] of this._pendingRequests) { clearTimeout(pending.timeout); pending.reject(new Error('Adapter disposed')); } diff --git a/libs/ui/src/bridge/core/bridge-factory.ts b/libs/ui/src/bridge/core/bridge-factory.ts index 4d753918..460148b9 100644 --- a/libs/ui/src/bridge/core/bridge-factory.ts +++ b/libs/ui/src/bridge/core/bridge-factory.ts @@ -31,7 +31,7 @@ const DEFAULT_CONFIG: BridgeConfig = { /** * Empty capabilities returned when no adapter is active. */ -const EMPTY_CAPABILITIES: AdapterCapabilities = { +const _EMPTY_CAPABILITIES: AdapterCapabilities = { canCallTools: false, canSendMessages: false, canOpenLinks: false, @@ -233,56 +233,56 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * Get current theme. */ getTheme(): 'light' | 'dark' { - this._ensureInitialized(); - return this._adapter!.getTheme(); + const adapter = this._ensureInitialized(); + return adapter.getTheme(); } /** * Get current display mode. */ getDisplayMode(): DisplayMode { - this._ensureInitialized(); - return this._adapter!.getDisplayMode(); + const adapter = this._ensureInitialized(); + return adapter.getDisplayMode(); } /** * Get tool input arguments. */ getToolInput(): Record { - this._ensureInitialized(); - return this._adapter!.getToolInput(); + const adapter = this._ensureInitialized(); + return adapter.getToolInput(); } /** * Get tool output/result. */ getToolOutput(): unknown { - this._ensureInitialized(); - return this._adapter!.getToolOutput(); + const adapter = this._ensureInitialized(); + return adapter.getToolOutput(); } /** * Get structured content (parsed output). */ getStructuredContent(): unknown { - this._ensureInitialized(); - return this._adapter!.getStructuredContent(); + const adapter = this._ensureInitialized(); + return adapter.getStructuredContent(); } /** * Get persisted widget state. */ getWidgetState(): Record { - this._ensureInitialized(); - return this._adapter!.getWidgetState(); + const adapter = this._ensureInitialized(); + return adapter.getWidgetState(); } /** * Get full host context. */ getHostContext(): HostContext { - this._ensureInitialized(); - return this._adapter!.getHostContext(); + const adapter = this._ensureInitialized(); + return adapter.getHostContext(); } // ============================================ @@ -295,11 +295,11 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * @param args - Tool arguments */ async callTool(name: string, args: Record): Promise { - this._ensureInitialized(); + const adapter = this._ensureInitialized(); if (!this.hasCapability('canCallTools')) { throw new Error('Tool calls are not supported by the current adapter'); } - return this._adapter!.callTool(name, args); + return adapter.callTool(name, args); } /** @@ -307,11 +307,11 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * @param content - Message content */ async sendMessage(content: string): Promise { - this._ensureInitialized(); + const adapter = this._ensureInitialized(); if (!this.hasCapability('canSendMessages')) { throw new Error('Sending messages is not supported by the current adapter'); } - return this._adapter!.sendMessage(content); + return adapter.sendMessage(content); } /** @@ -319,8 +319,8 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * @param url - URL to open */ async openLink(url: string): Promise { - this._ensureInitialized(); - return this._adapter!.openLink(url); + const adapter = this._ensureInitialized(); + return adapter.openLink(url); } /** @@ -328,16 +328,16 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * @param mode - Desired display mode */ async requestDisplayMode(mode: DisplayMode): Promise { - this._ensureInitialized(); - return this._adapter!.requestDisplayMode(mode); + const adapter = this._ensureInitialized(); + return adapter.requestDisplayMode(mode); } /** * Request widget close. */ async requestClose(): Promise { - this._ensureInitialized(); - return this._adapter!.requestClose(); + const adapter = this._ensureInitialized(); + return adapter.requestClose(); } /** @@ -345,8 +345,8 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * @param state - State object to persist */ setWidgetState(state: Record): void { - this._ensureInitialized(); - this._adapter!.setWidgetState(state); + const adapter = this._ensureInitialized(); + adapter.setWidgetState(state); } // ============================================ @@ -359,8 +359,8 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * @returns Unsubscribe function */ onContextChange(callback: (changes: Partial) => void): () => void { - this._ensureInitialized(); - return this._adapter!.onContextChange(callback); + const adapter = this._ensureInitialized(); + return adapter.onContextChange(callback); } /** @@ -369,8 +369,8 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { * @returns Unsubscribe function */ onToolResult(callback: (result: unknown) => void): () => void { - this._ensureInitialized(); - return this._adapter!.onToolResult(callback); + const adapter = this._ensureInitialized(); + return adapter.onToolResult(callback); } // ============================================ @@ -379,11 +379,13 @@ export class FrontMcpBridge implements FrontMcpBridgeInterface { /** * Ensure the bridge is initialized before operations. + * Returns the adapter for type-safe access. */ - private _ensureInitialized(): void { + private _ensureInitialized(): PlatformAdapter { if (!this._initialized || !this._adapter) { throw new Error('FrontMcpBridge is not initialized. Call initialize() first.'); } + return this._adapter; } /** diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index b551356b..fadeb209 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -32,7 +32,6 @@ import type { import { DEFAULT_BUNDLE_OPTIONS, DEFAULT_BUNDLER_OPTIONS, - DEFAULT_SECURITY_POLICY, DEFAULT_STATIC_HTML_OPTIONS, STATIC_HTML_CDN, getCdnTypeForPlatform, @@ -43,8 +42,8 @@ import { import { buildUIMeta, type AIPlatformType } from '@frontmcp/uipack/adapters'; import { DEFAULT_THEME, buildThemeCss, type ThemeConfig } from '@frontmcp/uipack/theme'; import { BundlerCache, createCacheKey, hashContent } from './cache'; -import { validateSource, validateSize, mergePolicy, throwOnViolations, SecurityError } from './sandbox/policy'; -import { executeCode, executeDefault, ExecutionError } from './sandbox/executor'; +import { validateSource, validateSize, mergePolicy, throwOnViolations } from './sandbox/policy'; +import { executeDefault, ExecutionError } from './sandbox/executor'; import { escapeHtml } from '@frontmcp/uipack/utils'; import type { ContentType } from '../universal/types'; import { detectContentType as detectUniversalContentType } from '../universal/types'; @@ -645,7 +644,10 @@ export class InMemoryBundler { componentCode = transpiledCode ?? appScript; } else { - // Standard mode + // Standard mode - requires transpiled code + if (!transpiledCode) { + throw new Error('Failed to transpile component source'); + } const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, @@ -663,7 +665,7 @@ export class InMemoryBundler { opts.dynamicOptions, opts.hybridOptions, ); - const componentScript = this.buildComponentRenderScript(transpiledCode!, opts.rootId, cdnType); + const componentScript = this.buildComponentRenderScript(transpiledCode, opts.rootId, cdnType); html = this.assembleStaticHTML({ title: opts.title || `${opts.toolName} - Widget`, @@ -676,7 +678,7 @@ export class InMemoryBundler { cdnType, }); - componentCode = transpiledCode!; + componentCode = transpiledCode; } const hash = hashContent(html); diff --git a/libs/ui/src/bundler/file-cache/component-builder.ts b/libs/ui/src/bundler/file-cache/component-builder.ts index 16e9c0ca..f7140fa0 100644 --- a/libs/ui/src/bundler/file-cache/component-builder.ts +++ b/libs/ui/src/bundler/file-cache/component-builder.ts @@ -9,7 +9,7 @@ import { readFile } from 'fs/promises'; import { existsSync } from 'fs'; -import { dirname, resolve, extname } from 'path'; +import { resolve, extname } from 'path'; import { randomUUID } from 'crypto'; import type { @@ -18,10 +18,9 @@ import type { CDNDependency, CDNPlatformType, ResolvedDependency, - ImportMap, } from '@frontmcp/uipack/dependency'; import type { BuildCacheStorage } from './storage/interface'; -import { calculateComponentHash, generateBuildId } from './hash-calculator'; +import { calculateComponentHash } from './hash-calculator'; import { DependencyResolver, createImportMap, generateDependencyHTML } from '@frontmcp/uipack/dependency'; // ============================================ diff --git a/libs/ui/src/bundler/file-cache/hash-calculator.ts b/libs/ui/src/bundler/file-cache/hash-calculator.ts index b6a9ea27..35b6581b 100644 --- a/libs/ui/src/bundler/file-cache/hash-calculator.ts +++ b/libs/ui/src/bundler/file-cache/hash-calculator.ts @@ -180,7 +180,7 @@ export async function calculateComponentHash(options: ComponentHashOptions): Pro const { entryPath, baseDir = dirname(entryPath), - externals = [], + externals: _externals = [], dependencies = {}, bundleOptions = {}, maxDepth = 10, diff --git a/libs/ui/src/bundler/file-cache/storage/filesystem.ts b/libs/ui/src/bundler/file-cache/storage/filesystem.ts index cd48dd6f..a2892cfa 100644 --- a/libs/ui/src/bundler/file-cache/storage/filesystem.ts +++ b/libs/ui/src/bundler/file-cache/storage/filesystem.ts @@ -331,7 +331,9 @@ export class FilesystemStorage implements BuildCacheStorage { } } catch { // Corrupted file, remove it - await unlink(filePath).catch(() => {}); + await unlink(filePath).catch(() => { + /* ignore removal errors */ + }); removed++; } } diff --git a/libs/ui/src/bundler/file-cache/storage/redis.ts b/libs/ui/src/bundler/file-cache/storage/redis.ts index c6e3ec28..902805ca 100644 --- a/libs/ui/src/bundler/file-cache/storage/redis.ts +++ b/libs/ui/src/bundler/file-cache/storage/redis.ts @@ -8,7 +8,7 @@ */ import type { ComponentBuildManifest, CacheStats } from '@frontmcp/uipack/dependency'; -import type { BuildCacheStorage, StorageOptions, CacheEntry, CacheEntryMetadata } from './interface'; +import type { BuildCacheStorage, StorageOptions, CacheEntry } from './interface'; import { DEFAULT_STORAGE_OPTIONS, calculateManifestSize } from './interface'; /** diff --git a/libs/ui/src/components/button.test.ts b/libs/ui/src/components/button.test.ts index 6b551c1e..d8e06f44 100644 --- a/libs/ui/src/components/button.test.ts +++ b/libs/ui/src/components/button.test.ts @@ -208,7 +208,6 @@ describe('Button Component', () => { describe('Validation', () => { it('should return error box for invalid variant', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = button('Test', { variant: 'invalid' as any }); expect(html).toContain('validation-error'); expect(html).toContain('data-component="button"'); @@ -216,7 +215,6 @@ describe('Button Component', () => { }); it('should return error box for invalid size', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = button('Test', { size: 'huge' as any }); expect(html).toContain('validation-error'); expect(html).toContain('data-component="button"'); @@ -224,7 +222,6 @@ describe('Button Component', () => { }); it('should return error box for invalid type', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = button('Test', { type: 'custom' as any }); expect(html).toContain('validation-error'); expect(html).toContain('data-component="button"'); @@ -232,14 +229,12 @@ describe('Button Component', () => { }); it('should return error box for unknown properties (strict mode)', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = button('Test', { unknownProp: 'value' } as any); expect(html).toContain('validation-error'); expect(html).toContain('data-component="button"'); }); it('should return error box for invalid htmx configuration', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = button('Test', { htmx: { invalidKey: 'value' } as any }); expect(html).toContain('validation-error'); expect(html).toContain('data-component="button"'); @@ -264,7 +259,6 @@ describe('Button Component', () => { const buttons = [button('One'), button('Two')]; it('should return error box for invalid direction', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = buttonGroup(buttons, { direction: 'diagonal' as any }); expect(html).toContain('validation-error'); expect(html).toContain('data-component="buttonGroup"'); @@ -272,7 +266,6 @@ describe('Button Component', () => { }); it('should return error box for invalid gap', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = buttonGroup(buttons, { gap: 'xl' as any }); expect(html).toContain('validation-error'); expect(html).toContain('data-component="buttonGroup"'); @@ -280,7 +273,6 @@ describe('Button Component', () => { }); it('should return error box for unknown properties (strict mode)', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const html = buttonGroup(buttons, { unknownProp: true } as any); expect(html).toContain('validation-error'); expect(html).toContain('data-component="buttonGroup"'); diff --git a/libs/ui/src/layouts/base.ts b/libs/ui/src/layouts/base.ts index 55494ccd..22044037 100644 --- a/libs/ui/src/layouts/base.ts +++ b/libs/ui/src/layouts/base.ts @@ -18,7 +18,6 @@ import { DEFAULT_THEME, buildThemeCss, mergeThemes, - CDN, buildFontPreconnect, buildFontStylesheets, buildCdnScripts, @@ -177,7 +176,7 @@ function getAlignmentClasses(alignment: LayoutAlignment): string { /** * Get CSS classes for background */ -function getBackgroundClasses(background: BackgroundStyle, theme: ThemeConfig): string { +function getBackgroundClasses(background: BackgroundStyle, _theme: ThemeConfig): string { switch (background) { case 'gradient': return 'bg-gradient-to-br from-primary to-secondary'; @@ -247,7 +246,7 @@ function buildBodyAttrs(attrs?: Record): string { export function baseLayout(content: string, options: BaseLayoutOptions): string { const { title, - pageType = 'custom', + pageType: _pageType = 'custom', size = 'md', alignment = 'center', background = 'solid', diff --git a/libs/ui/src/layouts/presets.ts b/libs/ui/src/layouts/presets.ts index a6005ce4..b4296b27 100644 --- a/libs/ui/src/layouts/presets.ts +++ b/libs/ui/src/layouts/presets.ts @@ -11,7 +11,7 @@ * - Resource display (OpenAI SDK) */ -import { baseLayout, createLayoutBuilder, type BaseLayoutOptions, type PageType, escapeHtml } from './base'; +import { baseLayout, createLayoutBuilder, type BaseLayoutOptions, escapeHtml } from './base'; // ============================================ // Auth Layout diff --git a/libs/ui/src/pages/consent.ts b/libs/ui/src/pages/consent.ts index 4d7e51a8..88b44c7e 100644 --- a/libs/ui/src/pages/consent.ts +++ b/libs/ui/src/pages/consent.ts @@ -5,9 +5,9 @@ */ import { consentLayout, type ConsentLayoutOptions } from '../layouts'; -import { primaryButton, outlineButton, dangerButton } from '../components/button'; +import { primaryButton, outlineButton } from '../components/button'; import { permissionList, type PermissionItem } from '../components/list'; -import { form, formActions, csrfInput, hiddenInput } from '../components/form'; +import { csrfInput, hiddenInput } from '../components/form'; import { alert } from '../components/alert'; import { escapeHtml } from '../layouts/base'; diff --git a/libs/ui/src/pages/error.ts b/libs/ui/src/pages/error.ts index d063ccae..2478748c 100644 --- a/libs/ui/src/pages/error.ts +++ b/libs/ui/src/pages/error.ts @@ -64,7 +64,7 @@ export function errorPage(options: ErrorPageOptions): string { retryUrl, showHome = true, homeUrl = '/', - showBack = false, + showBack: _showBack = false, actions, layout = {}, requestId, diff --git a/libs/ui/src/react/Badge.tsx b/libs/ui/src/react/Badge.tsx index bed38a95..c95dc7c7 100644 --- a/libs/ui/src/react/Badge.tsx +++ b/libs/ui/src/react/Badge.tsx @@ -46,7 +46,6 @@ import { getBadgeSizeClasses, getBadgeDotSizeClasses, getBadgeDotVariantClasses, - CLOSE_ICON, cn, } from '@frontmcp/uipack/styles'; import { renderToString, renderToStringSync } from '../render/prerender'; diff --git a/libs/ui/src/react/hooks/context.tsx b/libs/ui/src/react/hooks/context.tsx index 0e53ac8b..db0aa3db 100644 --- a/libs/ui/src/react/hooks/context.tsx +++ b/libs/ui/src/react/hooks/context.tsx @@ -21,7 +21,7 @@ * @module @frontmcp/ui/react/hooks */ -import { createContext, useContext, useEffect, useState, useCallback, useMemo, type ReactNode } from 'react'; +import { createContext, useContext, useEffect, useState, useMemo, type ReactNode } from 'react'; import type { FrontMcpBridgeInterface, BridgeConfig, diff --git a/libs/ui/src/react/types.ts b/libs/ui/src/react/types.ts index b3c78083..d67797c1 100644 --- a/libs/ui/src/react/types.ts +++ b/libs/ui/src/react/types.ts @@ -9,16 +9,7 @@ */ import type { ReactNode } from 'react'; -import type { - CardOptions, - CardVariant, - CardSize, - BadgeOptions, - BadgeVariant, - BadgeSize, - ButtonOptions, - AlertOptions, -} from '../components'; +import type { CardVariant, CardSize, BadgeVariant, BadgeSize } from '../components'; // Re-export element classes for ref typing export type { FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect } from '../web-components'; diff --git a/libs/ui/src/universal/UniversalApp.tsx b/libs/ui/src/universal/UniversalApp.tsx index e8f31579..42c74246 100644 --- a/libs/ui/src/universal/UniversalApp.tsx +++ b/libs/ui/src/universal/UniversalApp.tsx @@ -9,7 +9,7 @@ import React from 'react'; import type { UniversalAppProps, UniversalContent, RenderContext, FrontMCPState } from './types'; import { useFrontMCPStore } from './store'; import { useComponents, FrontMCPProvider, ComponentsProvider } from './context'; -import { renderContent, detectRenderer } from './renderers'; +import { renderContent } from './renderers'; import { escapeHtml } from '@frontmcp/uipack/utils'; // ============================================ diff --git a/libs/ui/src/universal/renderers/index.ts b/libs/ui/src/universal/renderers/index.ts index f52fa46a..f99813bd 100644 --- a/libs/ui/src/universal/renderers/index.ts +++ b/libs/ui/src/universal/renderers/index.ts @@ -7,10 +7,10 @@ import type { ClientRenderer, UniversalContent, RenderContext, ContentType } from '../types'; import { detectContentType } from '../types'; -import { htmlRenderer, safeHtmlRenderer } from './html.renderer'; -import { markdownRenderer, createMarkdownRenderer } from './markdown.renderer'; -import { reactRenderer, isReactComponent } from './react.renderer'; -import { mdxRenderer, isMdxSupported, createMdxRenderer } from './mdx.renderer'; +import { htmlRenderer } from './html.renderer'; +import { markdownRenderer } from './markdown.renderer'; +import { reactRenderer } from './react.renderer'; +import { mdxRenderer } from './mdx.renderer'; // ============================================ // Registry Class diff --git a/libs/ui/src/universal/runtime-builder.ts b/libs/ui/src/universal/runtime-builder.ts index 205cfdd6..5ea3b690 100644 --- a/libs/ui/src/universal/runtime-builder.ts +++ b/libs/ui/src/universal/runtime-builder.ts @@ -5,7 +5,7 @@ * Used by bundleToStaticHTML to create self-contained HTML documents. */ -import type { UniversalRuntimeOptions, UniversalRuntimeResult, CDNType } from './types'; +import type { UniversalRuntimeOptions, UniversalRuntimeResult } from './types'; import { UNIVERSAL_CDN } from './types'; // ============================================ diff --git a/libs/ui/src/universal/types.ts b/libs/ui/src/universal/types.ts index 360b1456..bbb7bb47 100644 --- a/libs/ui/src/universal/types.ts +++ b/libs/ui/src/universal/types.ts @@ -166,7 +166,6 @@ export interface UniversalAppProps { fallback?: React.ReactNode; /** Error fallback component */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any errorFallback?: React.ComponentType<{ error: string }>; } diff --git a/libs/ui/src/web-components/elements/fmcp-input.ts b/libs/ui/src/web-components/elements/fmcp-input.ts index 37597e74..babfef2e 100644 --- a/libs/ui/src/web-components/elements/fmcp-input.ts +++ b/libs/ui/src/web-components/elements/fmcp-input.ts @@ -23,7 +23,7 @@ * @module @frontmcp/ui/web-components/elements/fmcp-input */ -import { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core'; +import { FmcpElement, type FmcpElementConfig } from '../core'; import { input, type InputOptions } from '../../components/form'; import { InputOptionsSchema } from '../../components/form.schema'; diff --git a/libs/ui/src/web-components/elements/fmcp-select.ts b/libs/ui/src/web-components/elements/fmcp-select.ts index 1bb62985..8ab6576b 100644 --- a/libs/ui/src/web-components/elements/fmcp-select.ts +++ b/libs/ui/src/web-components/elements/fmcp-select.ts @@ -22,7 +22,7 @@ * @module @frontmcp/ui/web-components/elements/fmcp-select */ -import { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core'; +import { FmcpElement, type FmcpElementConfig } from '../core'; import { select, type SelectOptions } from '../../components/form'; import { SelectOptionsSchema, type SelectOptionItem } from '../../components/form.schema'; From 37ac1abbff4308ca0f4f02a2feb499baa1845320 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 18:30:45 +0200 Subject: [PATCH 08/19] refactor: Remove unused imports and simplify variable declarations across multiple files --- libs/uipack/src/build/widget-manifest.ts | 10 +- .../bundler/file-cache/component-builder.ts | 5 +- .../bundler/file-cache/hash-calculator.d.ts | 155 --- .../file-cache/hash-calculator.d.ts.map | 1 - .../src/bundler/file-cache/hash-calculator.ts | 2 +- .../src/bundler/file-cache/storage/redis.ts | 2 +- libs/uipack/src/dependency/cdn-registry.d.ts | 112 -- .../src/dependency/cdn-registry.d.ts.map | 1 - libs/uipack/src/dependency/cdn-registry.ts | 2 +- libs/uipack/src/dependency/import-map.d.ts | 189 --- .../uipack/src/dependency/import-map.d.ts.map | 1 - libs/uipack/src/dependency/import-map.ts | 3 +- libs/uipack/src/dependency/import-parser.d.ts | 82 -- .../src/dependency/import-parser.d.ts.map | 1 - libs/uipack/src/dependency/index.d.ts | 160 --- libs/uipack/src/dependency/index.d.ts.map | 1 - libs/uipack/src/dependency/resolver.d.ts | 185 --- libs/uipack/src/dependency/resolver.d.ts.map | 1 - libs/uipack/src/dependency/resolver.ts | 1 - libs/uipack/src/dependency/schemas.d.ts | 636 ---------- libs/uipack/src/dependency/schemas.d.ts.map | 1 - .../src/dependency/template-loader.d.ts | 210 ---- .../src/dependency/template-loader.d.ts.map | 1 - .../src/dependency/template-processor.d.ts | 135 --- .../dependency/template-processor.d.ts.map | 1 - libs/uipack/src/dependency/types.d.ts | 744 ------------ libs/uipack/src/dependency/types.d.ts.map | 1 - .../src/handlebars/expression-extractor.d.ts | 151 --- .../handlebars/expression-extractor.d.ts.map | 1 - .../src/handlebars/expression-extractor.ts | 3 +- libs/uipack/src/handlebars/helpers.d.ts | 339 ------ libs/uipack/src/handlebars/helpers.d.ts.map | 1 - libs/uipack/src/handlebars/index.d.ts | 239 ---- libs/uipack/src/handlebars/index.d.ts.map | 1 - libs/uipack/src/handlebars/index.ts | 2 +- libs/uipack/src/renderers/cache.d.ts | 145 --- libs/uipack/src/renderers/cache.d.ts.map | 1 - libs/uipack/src/renderers/html.renderer.d.ts | 127 -- .../src/renderers/html.renderer.d.ts.map | 1 - libs/uipack/src/renderers/index.d.ts | 65 -- libs/uipack/src/renderers/index.d.ts.map | 1 - libs/uipack/src/renderers/registry.d.ts | 145 --- libs/uipack/src/renderers/registry.d.ts.map | 1 - libs/uipack/src/renderers/registry.test.ts | 3 +- libs/uipack/src/renderers/registry.ts | 1 - libs/uipack/src/renderers/types.d.ts | 345 ------ libs/uipack/src/renderers/types.d.ts.map | 1 - .../src/runtime/adapters/html.adapter.d.ts | 64 -- .../runtime/adapters/html.adapter.d.ts.map | 1 - libs/uipack/src/runtime/adapters/index.d.ts | 33 - .../src/runtime/adapters/index.d.ts.map | 1 - .../src/runtime/adapters/mdx.adapter.d.ts | 78 -- .../src/runtime/adapters/mdx.adapter.d.ts.map | 1 - .../src/runtime/adapters/mdx.adapter.ts | 4 +- libs/uipack/src/runtime/adapters/types.d.ts | 100 -- .../src/runtime/adapters/types.d.ts.map | 1 - libs/uipack/src/runtime/csp.d.ts | 69 -- libs/uipack/src/runtime/csp.d.ts.map | 1 - libs/uipack/src/runtime/index.d.ts | 100 -- libs/uipack/src/runtime/index.d.ts.map | 1 - libs/uipack/src/runtime/mcp-bridge.d.ts | 102 -- libs/uipack/src/runtime/mcp-bridge.d.ts.map | 1 - libs/uipack/src/runtime/mcp-bridge.ts | 3 +- libs/uipack/src/runtime/renderer-runtime.d.ts | 137 --- .../src/runtime/renderer-runtime.d.ts.map | 1 - libs/uipack/src/runtime/renderer-runtime.ts | 10 +- libs/uipack/src/runtime/sanitizer.d.ts | 180 --- libs/uipack/src/runtime/sanitizer.d.ts.map | 1 - libs/uipack/src/runtime/types.d.ts | 407 ------- libs/uipack/src/runtime/types.d.ts.map | 1 - libs/uipack/src/runtime/wrapper.d.ts | 426 ------- libs/uipack/src/runtime/wrapper.d.ts.map | 1 - libs/uipack/src/runtime/wrapper.ts | 2 +- libs/uipack/src/theme/cdn.ts | 45 +- libs/uipack/src/tool-template/builder.ts | 8 +- libs/uipack/src/types/index.d.ts | 51 - libs/uipack/src/types/index.d.ts.map | 1 - libs/uipack/src/types/ui-config.d.ts | 641 ----------- libs/uipack/src/types/ui-config.d.ts.map | 1 - libs/uipack/src/types/ui-runtime.d.ts | 1018 ----------------- libs/uipack/src/types/ui-runtime.d.ts.map | 1 - libs/uipack/src/typings/type-fetcher.ts | 2 +- libs/uipack/src/utils/escape-html.d.ts | 58 - libs/uipack/src/utils/escape-html.d.ts.map | 1 - libs/uipack/src/utils/index.d.ts | 10 - libs/uipack/src/utils/index.d.ts.map | 1 - libs/uipack/src/utils/safe-stringify.d.ts | 30 - libs/uipack/src/utils/safe-stringify.d.ts.map | 1 - libs/uipack/src/validation/error-box.d.ts | 56 - libs/uipack/src/validation/error-box.d.ts.map | 1 - libs/uipack/src/validation/index.d.ts | 36 - libs/uipack/src/validation/index.d.ts.map | 1 - libs/uipack/src/validation/schema-paths.d.ts | 122 -- .../src/validation/schema-paths.d.ts.map | 1 - .../src/validation/template-validator.d.ts | 147 --- .../validation/template-validator.d.ts.map | 1 - .../src/validation/template-validator.ts | 16 +- libs/uipack/src/validation/wrapper.d.ts | 102 -- libs/uipack/src/validation/wrapper.d.ts.map | 1 - 99 files changed, 55 insertions(+), 8240 deletions(-) delete mode 100644 libs/uipack/src/bundler/file-cache/hash-calculator.d.ts delete mode 100644 libs/uipack/src/bundler/file-cache/hash-calculator.d.ts.map delete mode 100644 libs/uipack/src/dependency/cdn-registry.d.ts delete mode 100644 libs/uipack/src/dependency/cdn-registry.d.ts.map delete mode 100644 libs/uipack/src/dependency/import-map.d.ts delete mode 100644 libs/uipack/src/dependency/import-map.d.ts.map delete mode 100644 libs/uipack/src/dependency/import-parser.d.ts delete mode 100644 libs/uipack/src/dependency/import-parser.d.ts.map delete mode 100644 libs/uipack/src/dependency/index.d.ts delete mode 100644 libs/uipack/src/dependency/index.d.ts.map delete mode 100644 libs/uipack/src/dependency/resolver.d.ts delete mode 100644 libs/uipack/src/dependency/resolver.d.ts.map delete mode 100644 libs/uipack/src/dependency/schemas.d.ts delete mode 100644 libs/uipack/src/dependency/schemas.d.ts.map delete mode 100644 libs/uipack/src/dependency/template-loader.d.ts delete mode 100644 libs/uipack/src/dependency/template-loader.d.ts.map delete mode 100644 libs/uipack/src/dependency/template-processor.d.ts delete mode 100644 libs/uipack/src/dependency/template-processor.d.ts.map delete mode 100644 libs/uipack/src/dependency/types.d.ts delete mode 100644 libs/uipack/src/dependency/types.d.ts.map delete mode 100644 libs/uipack/src/handlebars/expression-extractor.d.ts delete mode 100644 libs/uipack/src/handlebars/expression-extractor.d.ts.map delete mode 100644 libs/uipack/src/handlebars/helpers.d.ts delete mode 100644 libs/uipack/src/handlebars/helpers.d.ts.map delete mode 100644 libs/uipack/src/handlebars/index.d.ts delete mode 100644 libs/uipack/src/handlebars/index.d.ts.map delete mode 100644 libs/uipack/src/renderers/cache.d.ts delete mode 100644 libs/uipack/src/renderers/cache.d.ts.map delete mode 100644 libs/uipack/src/renderers/html.renderer.d.ts delete mode 100644 libs/uipack/src/renderers/html.renderer.d.ts.map delete mode 100644 libs/uipack/src/renderers/index.d.ts delete mode 100644 libs/uipack/src/renderers/index.d.ts.map delete mode 100644 libs/uipack/src/renderers/registry.d.ts delete mode 100644 libs/uipack/src/renderers/registry.d.ts.map delete mode 100644 libs/uipack/src/renderers/types.d.ts delete mode 100644 libs/uipack/src/renderers/types.d.ts.map delete mode 100644 libs/uipack/src/runtime/adapters/html.adapter.d.ts delete mode 100644 libs/uipack/src/runtime/adapters/html.adapter.d.ts.map delete mode 100644 libs/uipack/src/runtime/adapters/index.d.ts delete mode 100644 libs/uipack/src/runtime/adapters/index.d.ts.map delete mode 100644 libs/uipack/src/runtime/adapters/mdx.adapter.d.ts delete mode 100644 libs/uipack/src/runtime/adapters/mdx.adapter.d.ts.map delete mode 100644 libs/uipack/src/runtime/adapters/types.d.ts delete mode 100644 libs/uipack/src/runtime/adapters/types.d.ts.map delete mode 100644 libs/uipack/src/runtime/csp.d.ts delete mode 100644 libs/uipack/src/runtime/csp.d.ts.map delete mode 100644 libs/uipack/src/runtime/index.d.ts delete mode 100644 libs/uipack/src/runtime/index.d.ts.map delete mode 100644 libs/uipack/src/runtime/mcp-bridge.d.ts delete mode 100644 libs/uipack/src/runtime/mcp-bridge.d.ts.map delete mode 100644 libs/uipack/src/runtime/renderer-runtime.d.ts delete mode 100644 libs/uipack/src/runtime/renderer-runtime.d.ts.map delete mode 100644 libs/uipack/src/runtime/sanitizer.d.ts delete mode 100644 libs/uipack/src/runtime/sanitizer.d.ts.map delete mode 100644 libs/uipack/src/runtime/types.d.ts delete mode 100644 libs/uipack/src/runtime/types.d.ts.map delete mode 100644 libs/uipack/src/runtime/wrapper.d.ts delete mode 100644 libs/uipack/src/runtime/wrapper.d.ts.map delete mode 100644 libs/uipack/src/types/index.d.ts delete mode 100644 libs/uipack/src/types/index.d.ts.map delete mode 100644 libs/uipack/src/types/ui-config.d.ts delete mode 100644 libs/uipack/src/types/ui-config.d.ts.map delete mode 100644 libs/uipack/src/types/ui-runtime.d.ts delete mode 100644 libs/uipack/src/types/ui-runtime.d.ts.map delete mode 100644 libs/uipack/src/utils/escape-html.d.ts delete mode 100644 libs/uipack/src/utils/escape-html.d.ts.map delete mode 100644 libs/uipack/src/utils/index.d.ts delete mode 100644 libs/uipack/src/utils/index.d.ts.map delete mode 100644 libs/uipack/src/utils/safe-stringify.d.ts delete mode 100644 libs/uipack/src/utils/safe-stringify.d.ts.map delete mode 100644 libs/uipack/src/validation/error-box.d.ts delete mode 100644 libs/uipack/src/validation/error-box.d.ts.map delete mode 100644 libs/uipack/src/validation/index.d.ts delete mode 100644 libs/uipack/src/validation/index.d.ts.map delete mode 100644 libs/uipack/src/validation/schema-paths.d.ts delete mode 100644 libs/uipack/src/validation/schema-paths.d.ts.map delete mode 100644 libs/uipack/src/validation/template-validator.d.ts delete mode 100644 libs/uipack/src/validation/template-validator.d.ts.map delete mode 100644 libs/uipack/src/validation/wrapper.d.ts delete mode 100644 libs/uipack/src/validation/wrapper.d.ts.map diff --git a/libs/uipack/src/build/widget-manifest.ts b/libs/uipack/src/build/widget-manifest.ts index 235ab97b..4c0051ae 100644 --- a/libs/uipack/src/build/widget-manifest.ts +++ b/libs/uipack/src/build/widget-manifest.ts @@ -19,17 +19,15 @@ import type { WidgetConfig, BuildManifestResult, BuildManifestOptions, - UIMetaFields, OpenAIMetaFields, ToolResponseMeta, } from '../types/ui-runtime'; import { DEFAULT_CSP_BY_TYPE, - DEFAULT_RENDERER_ASSETS, isUIType, isResourceMode, } from '../types/ui-runtime'; -import { getDefaultAssets, buildScriptsForUIType } from './cdn-resources'; +import { getDefaultAssets } from './cdn-resources'; import type { ThemeConfig } from '../theme'; import { wrapToolUIUniversal } from '../runtime/wrapper'; import { rendererRegistry } from '../renderers/registry'; @@ -43,12 +41,10 @@ import { validateTemplate, logValidationWarnings } from '../validation'; import type { CDNPlatformType, ComponentBuildManifest, - ResolvedDependency, TemplateFormat, } from '../dependency/types'; -import { resolveTemplate, detectTemplateSource } from '../dependency/template-loader'; +import { resolveTemplate } from '../dependency/template-loader'; import { processTemplate } from '../dependency/template-processor'; -import { generateDependencyHTML, generateImportMapScriptTag } from '../dependency/import-map'; // ============================================ // UI Type Detection @@ -304,7 +300,7 @@ export async function buildToolWidgetManifest< Input = Record, Output = unknown, >(options: BuildManifestOptions): Promise { - const { toolName, uiConfig, schema, theme, sampleInput, sampleOutput, outputSchema, inputSchema } = options; + const { toolName, uiConfig, schema, theme: _theme, sampleInput, sampleOutput, outputSchema, inputSchema } = options; // Resolve UI type // Use type assertion to handle complex generic template types diff --git a/libs/uipack/src/bundler/file-cache/component-builder.ts b/libs/uipack/src/bundler/file-cache/component-builder.ts index 64cd1bc4..b9a9c94e 100644 --- a/libs/uipack/src/bundler/file-cache/component-builder.ts +++ b/libs/uipack/src/bundler/file-cache/component-builder.ts @@ -9,7 +9,7 @@ import { readFile } from 'fs/promises'; import { existsSync } from 'fs'; -import { dirname, resolve, extname } from 'path'; +import { resolve, extname } from 'path'; import { randomUUID } from 'crypto'; import type { @@ -18,10 +18,9 @@ import type { CDNDependency, CDNPlatformType, ResolvedDependency, - ImportMap, } from '../../dependency/types'; import type { BuildCacheStorage } from './storage/interface'; -import { calculateComponentHash, generateBuildId } from './hash-calculator'; +import { calculateComponentHash } from './hash-calculator'; import { DependencyResolver } from '../../dependency/resolver'; import { createImportMap, generateDependencyHTML } from '../../dependency/import-map'; diff --git a/libs/uipack/src/bundler/file-cache/hash-calculator.d.ts b/libs/uipack/src/bundler/file-cache/hash-calculator.d.ts deleted file mode 100644 index 723ea9aa..00000000 --- a/libs/uipack/src/bundler/file-cache/hash-calculator.d.ts +++ /dev/null @@ -1,155 +0,0 @@ -/** - * Hash Calculator - * - * SHA-256 based hash calculation for cache keys. - * Combines file contents, dependencies, and build options - * to create deterministic cache keys for incremental builds. - * - * @packageDocumentation - */ -import type { FileBundleOptions, CDNDependency } from '../../dependency/types'; -/** - * Calculate SHA-256 hash of a string. - * - * @param content - Content to hash - * @returns Hex-encoded SHA-256 hash - */ -export declare function sha256(content: string): string; -/** - * Calculate SHA-256 hash of a buffer. - * - * @param buffer - Buffer to hash - * @returns Hex-encoded SHA-256 hash - */ -export declare function sha256Buffer(buffer: Buffer): string; -/** - * Calculate hash of a file's contents. - * - * @param filePath - Path to the file - * @returns SHA-256 hash or undefined if file doesn't exist - */ -export declare function hashFile(filePath: string): Promise; -/** - * Calculate combined hash of multiple files. - * - * @param filePaths - Paths to files - * @returns Combined SHA-256 hash - */ -export declare function hashFiles(filePaths: string[]): Promise; -/** - * Options for calculating a component hash. - */ -export interface ComponentHashOptions { - /** - * Entry file path. - */ - entryPath: string; - /** - * Base directory for resolving relative imports. - * @default dirname(entryPath) - */ - baseDir?: string; - /** - * External packages (excluded from hash). - */ - externals?: string[]; - /** - * Explicit CDN dependencies. - */ - dependencies?: Record; - /** - * Bundle options. - */ - bundleOptions?: FileBundleOptions; - /** - * Maximum depth for following imports. - * @default 10 - */ - maxDepth?: number; -} -/** - * Result of component hash calculation. - */ -export interface ComponentHashResult { - /** - * Combined SHA-256 hash. - */ - hash: string; - /** - * Entry file hash. - */ - entryHash: string; - /** - * All files included in the hash. - */ - files: string[]; - /** - * Individual file hashes. - */ - fileHashes: Record; - /** - * Hash of build options. - */ - optionsHash: string; - /** - * Hash of external dependencies configuration. - */ - dependenciesHash: string; -} -/** - * Calculate a deterministic hash for a file-based component. - * - * The hash includes: - * - Entry file content - * - All local dependencies (relative imports) - * - Bundle options - * - External dependency configurations - * - * External npm packages are NOT included in the hash since they're - * loaded from CDN and versioned separately. - * - * @param options - Hash calculation options - * @returns Hash result with details - * - * @example - * ```typescript - * const result = await calculateComponentHash({ - * entryPath: './src/widgets/chart.tsx', - * externals: ['chart.js', 'react'], - * bundleOptions: { minify: true }, - * }); - * - * console.log(result.hash); // '3a7bd...' - * console.log(result.files); // ['./src/widgets/chart.tsx', './src/widgets/utils.ts'] - * ``` - */ -export declare function calculateComponentHash(options: ComponentHashOptions): Promise; -/** - * Calculate a quick hash for cache lookup (entry file only). - * - * This is faster than full component hash but may miss dependency changes. - * Use for quick cache existence checks, then verify with full hash. - * - * @param entryPath - Entry file path - * @param bundleOptions - Bundle options - * @returns Quick hash string - */ -export declare function calculateQuickHash(entryPath: string, bundleOptions?: FileBundleOptions): Promise; -/** - * Generate a unique build ID. - * - * Combines timestamp and random component for uniqueness. - * - * @returns UUID-like build ID - */ -export declare function generateBuildId(): string; -/** - * Generate a build ID from a content hash. - * - * Creates a shorter, more readable ID while maintaining uniqueness. - * - * @param hash - Content hash - * @returns Shortened build ID - */ -export declare function buildIdFromHash(hash: string): string; -//# sourceMappingURL=hash-calculator.d.ts.map diff --git a/libs/uipack/src/bundler/file-cache/hash-calculator.d.ts.map b/libs/uipack/src/bundler/file-cache/hash-calculator.d.ts.map deleted file mode 100644 index d7328063..00000000 --- a/libs/uipack/src/bundler/file-cache/hash-calculator.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"hash-calculator.d.ts","sourceRoot":"","sources":["hash-calculator.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAOH,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAM/E;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED;;;;;GAKG;AACH,wBAAsB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAO5E;AAED;;;;;GAKG;AACH,wBAAsB,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAWpE;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEnC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAsB,sBAAsB,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAmDxG;AAED;;;;;;;;;GASG;AACH,wBAAsB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,CAO9G;AA6HD;;;;;;GAMG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAIxC;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAGpD"} \ No newline at end of file diff --git a/libs/uipack/src/bundler/file-cache/hash-calculator.ts b/libs/uipack/src/bundler/file-cache/hash-calculator.ts index 6b1aafeb..e0dd69d0 100644 --- a/libs/uipack/src/bundler/file-cache/hash-calculator.ts +++ b/libs/uipack/src/bundler/file-cache/hash-calculator.ts @@ -180,7 +180,7 @@ export async function calculateComponentHash(options: ComponentHashOptions): Pro const { entryPath, baseDir = dirname(entryPath), - externals = [], + externals: _externals = [], dependencies = {}, bundleOptions = {}, maxDepth = 10, diff --git a/libs/uipack/src/bundler/file-cache/storage/redis.ts b/libs/uipack/src/bundler/file-cache/storage/redis.ts index 52695bdd..6a34d0f4 100644 --- a/libs/uipack/src/bundler/file-cache/storage/redis.ts +++ b/libs/uipack/src/bundler/file-cache/storage/redis.ts @@ -8,7 +8,7 @@ */ import type { ComponentBuildManifest, CacheStats } from '../../../dependency/types'; -import type { BuildCacheStorage, StorageOptions, CacheEntry, CacheEntryMetadata } from './interface'; +import type { BuildCacheStorage, StorageOptions, CacheEntry } from './interface'; import { DEFAULT_STORAGE_OPTIONS, calculateManifestSize } from './interface'; /** diff --git a/libs/uipack/src/dependency/cdn-registry.d.ts b/libs/uipack/src/dependency/cdn-registry.d.ts deleted file mode 100644 index 56ca5786..00000000 --- a/libs/uipack/src/dependency/cdn-registry.d.ts +++ /dev/null @@ -1,112 +0,0 @@ -/** - * CDN Registry - * - * Pre-configured CDN URLs for popular npm packages. - * Maps package names to their CDN URLs for different providers. - * - * Priority: cdnjs.cloudflare.com (Claude compatible) > jsdelivr > unpkg > esm.sh - * - * @packageDocumentation - */ -import type { CDNRegistry, CDNRegistryEntry, CDNProvider, CDNPlatformType } from './types'; -/** - * Built-in CDN registry for popular packages. - * - * This registry provides CDN URLs for common libraries used in UI widgets. - * Cloudflare CDN (cdnjs.cloudflare.com) is prioritized for Claude compatibility. - */ -export declare const DEFAULT_CDN_REGISTRY: CDNRegistry; -/** - * CDN provider priority order by platform. - * Claude only trusts cdnjs.cloudflare.com. - */ -export declare const CDN_PROVIDER_PRIORITY: Record; -/** - * Look up a package in the CDN registry. - * - * @param packageName - NPM package name - * @param registry - Registry to search (defaults to DEFAULT_CDN_REGISTRY) - * @returns Registry entry or undefined - */ -export declare function lookupPackage(packageName: string, registry?: CDNRegistry): CDNRegistryEntry | undefined; -/** - * Get the CDN URL for a package. - * - * Resolves the CDN URL using platform-specific provider priority. - * - * @param packageName - NPM package name - * @param platform - Target platform (affects CDN selection) - * @param registry - Registry to search (defaults to DEFAULT_CDN_REGISTRY) - * @returns CDN URL or undefined if not found - */ -export declare function getPackageCDNUrl( - packageName: string, - platform?: CDNPlatformType, - registry?: CDNRegistry, -): string | undefined; -/** - * Get full CDN dependency configuration for a package. - * - * @param packageName - NPM package name - * @param platform - Target platform - * @param registry - Registry to search - * @returns CDN dependency or undefined - */ -export declare function getPackageCDNDependency( - packageName: string, - platform?: CDNPlatformType, - registry?: CDNRegistry, -): - | { - provider: CDNProvider; - dependency: import('./types').CDNDependency; - } - | undefined; -/** - * Get all registered package names. - * - * @param registry - Registry to list (defaults to DEFAULT_CDN_REGISTRY) - * @returns Array of package names - */ -export declare function getRegisteredPackages(registry?: CDNRegistry): string[]; -/** - * Check if a package is in the registry. - * - * @param packageName - NPM package name - * @param registry - Registry to check - * @returns true if the package is registered - */ -export declare function isPackageRegistered(packageName: string, registry?: CDNRegistry): boolean; -/** - * Merge custom registry with the default registry. - * - * Custom entries override default entries for the same package. - * - * @param customRegistry - Custom registry to merge - * @returns Merged registry - */ -export declare function mergeRegistries(customRegistry: CDNRegistry): CDNRegistry; -/** - * Get peer dependencies for a package. - * - * Returns peer dependencies from the first available provider. - * - * @param packageName - NPM package name - * @param registry - Registry to search - * @returns Array of peer dependency package names - */ -export declare function getPackagePeerDependencies(packageName: string, registry?: CDNRegistry): string[]; -/** - * Resolve all dependencies including peer dependencies. - * - * @param packageNames - Initial package names - * @param platform - Target platform - * @param registry - Registry to use - * @returns Array of all resolved package names (including peers) - */ -export declare function resolveAllDependencies( - packageNames: string[], - platform?: CDNPlatformType, - registry?: CDNRegistry, -): string[]; -//# sourceMappingURL=cdn-registry.d.ts.map diff --git a/libs/uipack/src/dependency/cdn-registry.d.ts.map b/libs/uipack/src/dependency/cdn-registry.d.ts.map deleted file mode 100644 index 174e5cfb..00000000 --- a/libs/uipack/src/dependency/cdn-registry.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"cdn-registry.d.ts","sourceRoot":"","sources":["cdn-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAM3F;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,WAgflC,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,EAAE,CAQxE,CAAC;AAMF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,WAAW,EAAE,MAAM,EACnB,QAAQ,GAAE,WAAkC,GAC3C,gBAAgB,GAAG,SAAS,CAE9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,EACnB,QAAQ,GAAE,eAA2B,EACrC,QAAQ,GAAE,WAAkC,GAC3C,MAAM,GAAG,SAAS,CAwBpB;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,WAAW,EAAE,MAAM,EACnB,QAAQ,GAAE,eAA2B,EACrC,QAAQ,GAAE,WAAkC,GAC3C;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,UAAU,EAAE,OAAO,SAAS,EAAE,aAAa,CAAA;CAAE,GAAG,SAAS,CAsBpF;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,GAAE,WAAkC,GAAG,MAAM,EAAE,CAE5F;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,GAAE,WAAkC,GAAG,OAAO,CAE9G;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,cAAc,EAAE,WAAW,GAAG,WAAW,CAKxE;AAED;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,QAAQ,GAAE,WAAkC,GAC3C,MAAM,EAAE,CAYV;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,YAAY,EAAE,MAAM,EAAE,EACtB,QAAQ,GAAE,eAA2B,EACrC,QAAQ,GAAE,WAAkC,GAC3C,MAAM,EAAE,CAqDV"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/cdn-registry.ts b/libs/uipack/src/dependency/cdn-registry.ts index 2704b250..6bb616c7 100644 --- a/libs/uipack/src/dependency/cdn-registry.ts +++ b/libs/uipack/src/dependency/cdn-registry.ts @@ -703,7 +703,7 @@ export function getPackagePeerDependencies( */ export function resolveAllDependencies( packageNames: string[], - platform: CDNPlatformType = 'unknown', + _platform: CDNPlatformType = 'unknown', registry: CDNRegistry = DEFAULT_CDN_REGISTRY, ): string[] { const resolved = new Set(); diff --git a/libs/uipack/src/dependency/import-map.d.ts b/libs/uipack/src/dependency/import-map.d.ts deleted file mode 100644 index 1144e8e3..00000000 --- a/libs/uipack/src/dependency/import-map.d.ts +++ /dev/null @@ -1,189 +0,0 @@ -/** - * Import Map Generator - * - * Generates browser-compatible import maps for CDN dependencies. - * Handles integrity hashes, scopes, and HTML script tag generation. - * - * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap - * - * @packageDocumentation - */ -import type { ImportMap, ResolvedDependency, CDNDependency } from './types'; -/** - * Create an import map from resolved dependencies. - * - * @param dependencies - Resolved CDN dependencies - * @returns Browser import map - * - * @example - * ```typescript - * const deps: ResolvedDependency[] = [ - * { packageName: 'react', cdnUrl: 'https://...', ... }, - * { packageName: 'chart.js', cdnUrl: 'https://...', integrity: 'sha384-...', ... }, - * ]; - * - * const map = createImportMap(deps); - * // { - * // imports: { 'react': 'https://...', 'chart.js': 'https://...' }, - * // integrity: { 'https://...': 'sha384-...' } - * // } - * ``` - */ -export declare function createImportMap(dependencies: ResolvedDependency[]): ImportMap; -/** - * Create an import map from explicit dependency overrides. - * - * @param dependencies - Map of package names to CDN configurations - * @returns Browser import map - */ -export declare function createImportMapFromOverrides(dependencies: Record): ImportMap; -/** - * Merge multiple import maps into one. - * - * Later maps override earlier ones for conflicting keys. - * - * @param maps - Import maps to merge - * @returns Merged import map - */ -export declare function mergeImportMaps(...maps: ImportMap[]): ImportMap; -/** - * Add a scope to an import map. - * - * Scopes allow different resolutions for specific URL prefixes. - * - * @param map - Base import map - * @param scopeUrl - URL prefix for the scope - * @param mappings - Module mappings for this scope - * @returns Updated import map - */ -export declare function addScope(map: ImportMap, scopeUrl: string, mappings: Record): ImportMap; -/** - * Generate an HTML script tag for an import map. - * - * @param map - Import map to serialize - * @returns HTML script tag string - * - * @example - * ```typescript - * const map = createImportMap(dependencies); - * const html = generateImportMapScriptTag(map); - * // - * ``` - */ -export declare function generateImportMapScriptTag(map: ImportMap): string; -/** - * Generate a minified import map script tag. - * - * @param map - Import map to serialize - * @returns Minified HTML script tag string - */ -export declare function generateImportMapScriptTagMinified(map: ImportMap): string; -/** - * Options for generating UMD shim script. - */ -export interface UMDShimOptions { - /** - * Whether to include a try/catch wrapper. - * @default true - */ - safe?: boolean; - /** - * Whether to minify the output. - * @default false - */ - minify?: boolean; -} -/** - * Generate a UMD shim script for global->ESM bridging. - * - * This creates a script that exposes UMD globals to ES module imports. - * - * @param dependencies - Resolved dependencies with global names - * @param options - Generation options - * @returns JavaScript shim code - * - * @example - * ```typescript - * const deps = [ - * { packageName: 'react', global: 'React', ... }, - * { packageName: 'chart.js', global: 'Chart', ... }, - * ]; - * - * const shim = generateUMDShim(deps); - * // window.__esm_shim = { - * // 'react': { default: window.React, ...window.React }, - * // 'chart.js': { default: window.Chart, ...window.Chart }, - * // }; - * ``` - */ -export declare function generateUMDShim(dependencies: ResolvedDependency[], options?: UMDShimOptions): string; -/** - * Generate CDN script tags for non-ESM dependencies. - * - * @param dependencies - Resolved dependencies - * @returns Array of HTML script tag strings - */ -export declare function generateCDNScriptTags(dependencies: ResolvedDependency[]): string[]; -/** - * Generate ES module script tags for ESM dependencies. - * - * @param dependencies - Resolved dependencies - * @returns Array of HTML script tag strings - */ -export declare function generateESMScriptTags(dependencies: ResolvedDependency[]): string[]; -/** - * Options for generating the complete dependency loading HTML. - */ -export interface DependencyHTMLOptions { - /** - * Whether to use minified output. - * @default false - */ - minify?: boolean; - /** - * Whether to include UMD shim for global->ESM bridging. - * @default true - */ - includeShim?: boolean; - /** - * Whether to defer script loading. - * @default false - */ - defer?: boolean; -} -/** - * Generate complete HTML for loading dependencies. - * - * Includes import map, CDN scripts, and UMD shim. - * - * @param dependencies - Resolved dependencies - * @param options - Generation options - * @returns Complete HTML string - * - * @example - * ```typescript - * const html = generateDependencyHTML(dependencies, { minify: true }); - * // Includes: - * // 1. Import map script - * // 2. UMD script tags (for non-ESM deps) - * // 3. UMD shim script - * // 4. ESM script tags - * ``` - */ -export declare function generateDependencyHTML( - dependencies: ResolvedDependency[], - options?: DependencyHTMLOptions, -): string; -/** - * Validate an import map structure. - * - * @param map - Import map to validate - * @returns Validation result with any errors - */ -export declare function validateImportMap(map: unknown): { - valid: boolean; - errors: string[]; -}; -//# sourceMappingURL=import-map.d.ts.map diff --git a/libs/uipack/src/dependency/import-map.d.ts.map b/libs/uipack/src/dependency/import-map.d.ts.map deleted file mode 100644 index e98d6bbf..00000000 --- a/libs/uipack/src/dependency/import-map.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"import-map.d.ts","sourceRoot":"","sources":["import-map.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO5E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAgB7E;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,SAAS,CAgBnG;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAwB/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAQtG;AAMD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,SAAS,GAAG,MAAM,CAGjE;AAED;;;;;GAKG;AACH,wBAAgB,kCAAkC,CAAC,GAAG,EAAE,SAAS,GAAG,MAAM,CAGzE;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,kBAAkB,EAAE,EAAE,OAAO,GAAE,cAAmB,GAAG,MAAM,CA2BxG;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,kBAAkB,EAAE,GAAG,MAAM,EAAE,CAclF;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,kBAAkB,EAAE,GAAG,MAAM,EAAE,CAclF;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,sBAAsB,CACpC,YAAY,EAAE,kBAAkB,EAAE,EAClC,OAAO,GAAE,qBAA0B,GAClC,MAAM,CA2BR;AAMD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAiDpF"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/import-map.ts b/libs/uipack/src/dependency/import-map.ts index c6f9fceb..af844400 100644 --- a/libs/uipack/src/dependency/import-map.ts +++ b/libs/uipack/src/dependency/import-map.ts @@ -219,7 +219,8 @@ export function generateUMDShim(dependencies: ResolvedDependency[], options: UMD } const entries = depsWithGlobals.map((dep) => { - const global = dep.global!; + // global is guaranteed to exist due to filter on line 215 + const global = dep.global; return `'${dep.packageName}': { default: window.${global}, ...window.${global} }`; }); diff --git a/libs/uipack/src/dependency/import-parser.d.ts b/libs/uipack/src/dependency/import-parser.d.ts deleted file mode 100644 index bf731162..00000000 --- a/libs/uipack/src/dependency/import-parser.d.ts +++ /dev/null @@ -1,82 +0,0 @@ -/** - * Import Parser - * - * Parses JavaScript/TypeScript source code to extract import statements. - * Identifies external (npm) vs relative (local) imports. - * - * **Known Limitations:** - * - Regex-based parsing may produce incorrect results for imports inside comments or strings - * - Multi-line import statements with unusual formatting may not be detected - * - Template literal imports (e.g., `import(\`${path}\`)`) are not supported - * - For caching purposes, false positives are preferred over false negatives - * - * @packageDocumentation - */ -import type { ParsedImport, ParsedImportResult } from './types'; -/** - * Get the base package name from an import specifier. - * - * @example - * 'lodash' -> 'lodash' - * 'lodash/debounce' -> 'lodash' - * '@org/package' -> '@org/package' - * '@org/package/subpath' -> '@org/package' - */ -export declare function getPackageName(specifier: string): string; -/** - * Parse all import statements from source code. - * - * Extracts named, default, namespace, side-effect, and dynamic imports. - * Also extracts re-exports that reference external modules. - * - * @param source - Source code to parse - * @returns Parsed import result with categorized imports - * - * @example - * ```typescript - * const source = ` - * import React from 'react'; - * import { useState, useEffect } from 'react'; - * import * as d3 from 'd3'; - * import 'chart.js'; - * import('./lazy-module'); - * import { helper } from './utils'; - * `; - * - * const result = parseImports(source); - * console.log(result.externalPackages); - * // ['react', 'd3', 'chart.js', 'lazy-module'] - * ``` - */ -export declare function parseImports(source: string): ParsedImportResult; -/** - * Extract only external package names from source. - * - * This is a faster version when you only need package names. - * - * @param source - Source code to parse - * @returns Array of unique external package names - */ -export declare function extractExternalPackages(source: string): string[]; -/** - * Filter imports to only include specified packages. - * - * @param result - Parsed import result - * @param packages - Package names to include - * @returns Filtered imports - */ -export declare function filterImportsByPackages(result: ParsedImportResult, packages: string[]): ParsedImport[]; -/** - * Get import statistics for a source file. - * - * @param source - Source code to analyze - * @returns Import statistics - */ -export declare function getImportStats(source: string): { - total: number; - external: number; - relative: number; - byType: Record; - packages: string[]; -}; -//# sourceMappingURL=import-parser.d.ts.map diff --git a/libs/uipack/src/dependency/import-parser.d.ts.map b/libs/uipack/src/dependency/import-parser.d.ts.map deleted file mode 100644 index 2596678a..00000000 --- a/libs/uipack/src/dependency/import-parser.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"import-parser.d.ts","sourceRoot":"","sources":["import-parser.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA6FhE;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAaxD;AA8BD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,kBAAkB,CA4K/D;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAGhE;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAMtG;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB,CAsBA"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/index.d.ts b/libs/uipack/src/dependency/index.d.ts deleted file mode 100644 index 8eddf189..00000000 --- a/libs/uipack/src/dependency/index.d.ts +++ /dev/null @@ -1,160 +0,0 @@ -/** - * Dependency Resolution Module - * - * Provides CDN dependency resolution, import parsing, and file-based - * component bundling support for FrontMCP UI widgets. - * - * @packageDocumentation - */ -export { - type CDNProvider, - type CDNPlatformType, - type CDNProviderConfig, - type CDNDependency, - type BundleTarget, - type FileBundleOptions, - type FileTemplateConfig, - type ImportMap, - type ResolvedDependency, - type ComponentBuildManifest, - type BuildCacheStorage, - type CacheStats, - type CDNRegistryEntry, - type CDNRegistry, - type DependencyResolverOptions, - type ParsedImport, - type ParsedImportResult, - type TemplateMode, - type TemplateFormat, - type TemplateSource, - type UrlFetchResult, - type ResolvedTemplate, - type TemplateProcessingOptions, - type ProcessedTemplate, - detectTemplateMode, - detectFormatFromPath, -} from './types'; -export { - cdnProviderSchema, - cdnPlatformTypeSchema, - cdnDependencySchema, - type CDNDependencyInput, - type CDNDependencyOutput, - bundleTargetSchema, - fileBundleOptionsSchema, - type FileBundleOptionsInput, - type FileBundleOptionsOutput, - fileTemplateConfigSchema, - type FileTemplateConfigInput, - type FileTemplateConfigOutput, - importMapSchema, - type ImportMapInput, - type ImportMapOutput, - resolvedDependencySchema, - type ResolvedDependencyInput, - type ResolvedDependencyOutput, - componentBuildManifestSchema, - buildManifestMetadataSchema, - buildManifestOutputsSchema, - type ComponentBuildManifestInput, - type ComponentBuildManifestOutput, - cdnProviderConfigSchema, - cdnRegistryEntrySchema, - packageMetadataSchema, - type CDNRegistryEntryInput, - type CDNRegistryEntryOutput, - dependencyResolverOptionsSchema, - type DependencyResolverOptionsInput, - type DependencyResolverOptionsOutput, - importTypeSchema, - parsedImportSchema, - parsedImportResultSchema, - type ParsedImportInput, - type ParsedImportOutput, - type ParsedImportResultInput, - type ParsedImportResultOutput, - cacheStatsSchema, - type CacheStatsInput, - type CacheStatsOutput, - type SafeParseResult, - validateCDNDependency, - safeParseCDNDependency, - validateFileTemplateConfig, - safeParseFileTemplateConfig, - validateBuildManifest, - safeParseBuildManifest, -} from './schemas'; -export { - DEFAULT_CDN_REGISTRY, - CDN_PROVIDER_PRIORITY, - lookupPackage, - getPackageCDNUrl, - getPackageCDNDependency, - getRegisteredPackages, - isPackageRegistered, - mergeRegistries, - getPackagePeerDependencies, - resolveAllDependencies, -} from './cdn-registry'; -export { - parseImports, - extractExternalPackages, - filterImportsByPackages, - getImportStats, - getPackageName, -} from './import-parser'; -export { - DependencyResolver, - createResolver, - createClaudeResolver, - createOpenAIResolver, - resolveDependencies, - generateImportMapForPackages, - DependencyResolutionError, - NoProviderError, -} from './resolver'; -export { - createImportMap, - createImportMapFromOverrides, - mergeImportMaps, - addScope, - generateImportMapScriptTag, - generateImportMapScriptTagMinified, - generateUMDShim, - generateCDNScriptTags, - generateESMScriptTags, - generateDependencyHTML, - validateImportMap, - type UMDShimOptions, - type DependencyHTMLOptions, -} from './import-map'; -export { - detectTemplateSource, - isFileBasedTemplate, - validateTemplateUrl, - detectFormatFromUrl, - fetchTemplateFromUrl, - type FetchTemplateOptions, - readTemplateFromFile, - resolveFilePath, - type ReadTemplateOptions, - resolveTemplate, - type ResolveTemplateOptions, - getUrlCache, - clearUrlCache, - needsRefetch, - invalidateUrlCache, -} from './template-loader'; -export { - processTemplate, - processTemplates, - supportsHandlebars, - producesHtml, - requiresBundling, - processHtmlTemplate, - processMarkdownTemplate, - processMdxTemplate, - clearHandlebarsCache, - isMarkedAvailable, -} from './template-processor'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/dependency/index.d.ts.map b/libs/uipack/src/dependency/index.d.ts.map deleted file mode 100644 index dba6ecc5..00000000 --- a/libs/uipack/src/dependency/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EAEtB,KAAK,aAAa,EAElB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAEtB,KAAK,kBAAkB,EAEvB,KAAK,SAAS,EAEd,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAEf,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAEhB,KAAK,yBAAyB,EAE9B,KAAK,YAAY,EACjB,KAAK,kBAAkB,EAEvB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EAEtB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAMjB,OAAO,EAEL,iBAAiB,EACjB,qBAAqB,EAErB,mBAAmB,EACnB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EAExB,kBAAkB,EAClB,uBAAuB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAE5B,wBAAwB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAE7B,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,eAAe,EAEpB,wBAAwB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAE7B,4BAA4B,EAC5B,2BAA2B,EAC3B,0BAA0B,EAC1B,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EAEjC,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAE3B,+BAA+B,EAC/B,KAAK,8BAA8B,EACnC,KAAK,+BAA+B,EAEpC,gBAAgB,EAChB,kBAAkB,EAClB,wBAAwB,EACxB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAE7B,gBAAgB,EAChB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EAErB,KAAK,eAAe,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,0BAA0B,EAC1B,2BAA2B,EAC3B,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,WAAW,CAAC;AAMnB,OAAO,EAEL,oBAAoB,EAEpB,qBAAqB,EAErB,aAAa,EACb,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,EACnB,eAAe,EACf,0BAA0B,EAC1B,sBAAsB,GACvB,MAAM,gBAAgB,CAAC;AAMxB,OAAO,EAEL,YAAY,EACZ,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,cAAc,GACf,MAAM,iBAAiB,CAAC;AAMzB,OAAO,EAEL,kBAAkB,EAElB,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EAEpB,mBAAmB,EACnB,4BAA4B,EAE5B,yBAAyB,EACzB,eAAe,GAChB,MAAM,YAAY,CAAC;AAMpB,OAAO,EAEL,eAAe,EACf,4BAA4B,EAC5B,eAAe,EACf,QAAQ,EAER,0BAA0B,EAC1B,kCAAkC,EAClC,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EAEtB,iBAAiB,EAEjB,KAAK,cAAc,EACnB,KAAK,qBAAqB,GAC3B,MAAM,cAAc,CAAC;AAMtB,OAAO,EAEL,oBAAoB,EACpB,mBAAmB,EAEnB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,KAAK,oBAAoB,EAEzB,oBAAoB,EACpB,eAAe,EACf,KAAK,mBAAmB,EAExB,eAAe,EACf,KAAK,sBAAsB,EAE3B,WAAW,EACX,aAAa,EACb,YAAY,EACZ,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAM3B,OAAO,EAEL,eAAe,EACf,gBAAgB,EAEhB,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAEhB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAElB,oBAAoB,EAEpB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/resolver.d.ts b/libs/uipack/src/dependency/resolver.d.ts deleted file mode 100644 index efbc119e..00000000 --- a/libs/uipack/src/dependency/resolver.d.ts +++ /dev/null @@ -1,185 +0,0 @@ -/** - * Dependency Resolver - * - * Resolves external npm package imports to CDN URLs. - * Handles platform-specific CDN selection and dependency ordering. - * - * @packageDocumentation - */ -import type { - CDNDependency, - CDNPlatformType, - CDNRegistry, - DependencyResolverOptions, - ResolvedDependency, - ImportMap, -} from './types'; -/** - * Error thrown when a dependency cannot be resolved. - */ -export declare class DependencyResolutionError extends Error { - readonly packageName: string; - readonly reason: string; - constructor(packageName: string, reason: string); -} -/** - * Error thrown when no CDN provider is available for a package. - */ -export declare class NoProviderError extends DependencyResolutionError { - readonly platform: CDNPlatformType; - constructor(packageName: string, platform: CDNPlatformType); -} -/** - * Dependency resolver for external npm packages. - * - * Resolves package imports to CDN URLs based on platform requirements - * and dependency relationships. - * - * @example - * ```typescript - * const resolver = new DependencyResolver({ - * platform: 'claude', - * }); - * - * // Resolve from source code - * const source = ` - * import React from 'react'; - * import { Chart } from 'chart.js'; - * `; - * - * const resolved = await resolver.resolveFromSource(source, ['react', 'chart.js']); - * console.log(resolved.map(d => d.cdnUrl)); - * ``` - */ -export declare class DependencyResolver { - private readonly options; - private readonly registry; - constructor(options?: DependencyResolverOptions); - /** - * Resolve a single package to its CDN dependency. - * - * @param packageName - NPM package name - * @param override - Optional explicit CDN dependency override - * @returns Resolved dependency, or null in non-strict mode if package is not found (should be bundled) - * @throws DependencyResolutionError if package cannot be resolved in strict mode - */ - resolve(packageName: string, override?: CDNDependency): ResolvedDependency | null; - /** - * Resolve multiple packages. - * - * @param packageNames - Array of package names - * @param overrides - Optional explicit overrides for specific packages - * @returns Array of resolved dependencies (in dependency order) - */ - resolveMany(packageNames: string[], overrides?: Record): ResolvedDependency[]; - /** - * Resolve dependencies from source code. - * - * Parses the source to extract imports, then resolves external packages - * that are in the externals list. - * - * @param source - Source code to parse - * @param externals - Package names to resolve from CDN (others are bundled) - * @param overrides - Optional explicit CDN overrides - * @returns Resolved dependencies - */ - resolveFromSource( - source: string, - externals: string[], - overrides?: Record, - ): ResolvedDependency[]; - /** - * Generate an import map for resolved dependencies. - * - * @param dependencies - Resolved dependencies - * @returns Browser import map - */ - generateImportMap(dependencies: ResolvedDependency[]): ImportMap; - /** - * Check if a package can be resolved for the current platform. - * - * @param packageName - Package name to check - * @returns true if the package can be resolved - */ - canResolve(packageName: string): boolean; - /** - * Get the resolved CDN URL for a package. - * - * @param packageName - Package name - * @param override - Optional explicit override - * @returns CDN URL or undefined if cannot resolve - */ - getUrl(packageName: string, override?: CDNDependency): string | undefined; - /** - * Get peer dependencies for a package. - */ - getPeerDependencies(packageName: string): string[]; - /** - * Create the current registry (default + custom). - */ - getRegistry(): CDNRegistry; - /** - * Get the current platform. - */ - getPlatform(): CDNPlatformType; - /** - * Create a resolved dependency object. - */ - private createResolvedDependency; - /** - * Try to extract version from CDN URL. - */ - private extractVersionFromUrl; -} -/** - * Create a dependency resolver for a specific platform. - * - * @param platform - Target platform - * @param options - Additional options - * @returns Configured dependency resolver - */ -export declare function createResolver( - platform: CDNPlatformType, - options?: Omit, -): DependencyResolver; -/** - * Create a Claude-compatible resolver. - * - * Only uses cdnjs.cloudflare.com for dependencies. - */ -export declare function createClaudeResolver(options?: Omit): DependencyResolver; -/** - * Create an OpenAI-compatible resolver. - * - * Can use any CDN but prefers Cloudflare. - */ -export declare function createOpenAIResolver(options?: Omit): DependencyResolver; -/** - * Resolve dependencies for a source file. - * - * Convenience function that creates a resolver and resolves in one call. - * - * @param source - Source code - * @param externals - Package names to resolve from CDN - * @param options - Resolver options - * @returns Resolved dependencies - */ -export declare function resolveDependencies( - source: string, - externals: string[], - options?: DependencyResolverOptions, -): ResolvedDependency[]; -/** - * Generate import map for dependencies. - * - * Convenience function that resolves and generates import map in one call. - * - * @param externals - Package names to include - * @param options - Resolver options - * @returns Import map - */ -export declare function generateImportMapForPackages( - externals: string[], - options?: DependencyResolverOptions, -): ImportMap; -//# sourceMappingURL=resolver.d.ts.map diff --git a/libs/uipack/src/dependency/resolver.d.ts.map b/libs/uipack/src/dependency/resolver.d.ts.map deleted file mode 100644 index 572c05d0..00000000 --- a/libs/uipack/src/dependency/resolver.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"resolver.d.ts","sourceRoot":"","sources":["resolver.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EAEf,WAAW,EACX,yBAAyB,EACzB,kBAAkB,EAClB,SAAS,EACV,MAAM,SAAS,CAAC;AAgBjB;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK;aACtB,WAAW,EAAE,MAAM;aAAkB,MAAM,EAAE,MAAM;gBAAnD,WAAW,EAAE,MAAM,EAAkB,MAAM,EAAE,MAAM;CAIhF;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,yBAAyB;aACX,QAAQ,EAAE,eAAe;gBAA9D,WAAW,EAAE,MAAM,EAAkB,QAAQ,EAAE,eAAe;CAI3E;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsC;IAC9D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAc;gBAE3B,OAAO,GAAE,yBAA8B;IAYnD;;;;;;;OAOG;IACH,OAAO,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,IAAI;IAuCjF;;;;;;OAMG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,kBAAkB,EAAE;IAyBpG;;;;;;;;;;OAUG;IACH,iBAAiB,CACf,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EAAE,EACnB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GACxC,kBAAkB,EAAE;IASvB;;;;;OAKG;IACH,iBAAiB,CAAC,YAAY,EAAE,kBAAkB,EAAE,GAAG,SAAS;IAIhE;;;;;OAKG;IACH,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO;IASxC;;;;;;OAMG;IACH,MAAM,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,SAAS;IASzE;;OAEG;IACH,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE;IAIlD;;OAEG;IACH,WAAW,IAAI,WAAW;IAI1B;;OAEG;IACH,WAAW,IAAI,eAAe;IAI9B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAiBhC;;OAEG;IACH,OAAO,CAAC,qBAAqB;CAe9B;AAMD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,eAAe,EACzB,OAAO,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GACpD,kBAAkB,CAKpB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAE9G;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAE9G;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EAAE,EACnB,OAAO,CAAC,EAAE,yBAAyB,GAClC,kBAAkB,EAAE,CAGtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,4BAA4B,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS,CAIhH"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/resolver.ts b/libs/uipack/src/dependency/resolver.ts index 52317355..bcd0d417 100644 --- a/libs/uipack/src/dependency/resolver.ts +++ b/libs/uipack/src/dependency/resolver.ts @@ -17,7 +17,6 @@ import type { ImportMap, } from './types'; import { - DEFAULT_CDN_REGISTRY, CDN_PROVIDER_PRIORITY, lookupPackage, getPackagePeerDependencies, diff --git a/libs/uipack/src/dependency/schemas.d.ts b/libs/uipack/src/dependency/schemas.d.ts deleted file mode 100644 index b6e427c4..00000000 --- a/libs/uipack/src/dependency/schemas.d.ts +++ /dev/null @@ -1,636 +0,0 @@ -/** - * Dependency Resolution Schemas - * - * Zod validation schemas for CDN dependency configuration, - * bundle options, and file template configurations. - * - * @packageDocumentation - */ -import { z } from 'zod'; -/** - * Supported CDN providers. - */ -export declare const cdnProviderSchema: z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; -}>; -/** - * Platform types that affect CDN selection. - */ -export declare const cdnPlatformTypeSchema: z.ZodEnum<{ - openai: 'openai'; - claude: 'claude'; - unknown: 'unknown'; - gemini: 'gemini'; - cursor: 'cursor'; - continue: 'continue'; - cody: 'cody'; -}>; -/** - * Schema for validating CDN dependency configuration. - */ -export declare const cdnDependencySchema: z.ZodObject< - { - url: z.ZodString; - integrity: z.ZodOptional; - global: z.ZodOptional; - exports: z.ZodOptional>; - esm: z.ZodOptional; - crossorigin: z.ZodOptional< - z.ZodEnum<{ - anonymous: 'anonymous'; - 'use-credentials': 'use-credentials'; - }> - >; - peerDependencies: z.ZodOptional>; - }, - z.core.$strict ->; -export type CDNDependencyInput = z.input; -export type CDNDependencyOutput = z.output; -/** - * Target JavaScript version. - */ -export declare const bundleTargetSchema: z.ZodEnum<{ - es2018: 'es2018'; - es2019: 'es2019'; - es2020: 'es2020'; - es2021: 'es2021'; - es2022: 'es2022'; - esnext: 'esnext'; -}>; -/** - * Schema for file bundle options. - */ -export declare const fileBundleOptionsSchema: z.ZodObject< - { - minify: z.ZodOptional; - sourceMaps: z.ZodOptional; - target: z.ZodOptional< - z.ZodEnum<{ - es2018: 'es2018'; - es2019: 'es2019'; - es2020: 'es2020'; - es2021: 'es2021'; - es2022: 'es2022'; - esnext: 'esnext'; - }> - >; - treeShake: z.ZodOptional; - jsxFactory: z.ZodOptional; - jsxFragment: z.ZodOptional; - jsxImportSource: z.ZodOptional; - }, - z.core.$strict ->; -export type FileBundleOptionsInput = z.input; -export type FileBundleOptionsOutput = z.output; -/** - * Schema for file-based template configuration. - * These fields extend UITemplateConfig for file-based templates. - */ -export declare const fileTemplateConfigSchema: z.ZodObject< - { - externals: z.ZodOptional>; - dependencies: z.ZodOptional< - z.ZodRecord< - z.ZodString, - z.ZodObject< - { - url: z.ZodString; - integrity: z.ZodOptional; - global: z.ZodOptional; - exports: z.ZodOptional>; - esm: z.ZodOptional; - crossorigin: z.ZodOptional< - z.ZodEnum<{ - anonymous: 'anonymous'; - 'use-credentials': 'use-credentials'; - }> - >; - peerDependencies: z.ZodOptional>; - }, - z.core.$strict - > - > - >; - bundleOptions: z.ZodOptional< - z.ZodObject< - { - minify: z.ZodOptional; - sourceMaps: z.ZodOptional; - target: z.ZodOptional< - z.ZodEnum<{ - es2018: 'es2018'; - es2019: 'es2019'; - es2020: 'es2020'; - es2021: 'es2021'; - es2022: 'es2022'; - esnext: 'esnext'; - }> - >; - treeShake: z.ZodOptional; - jsxFactory: z.ZodOptional; - jsxFragment: z.ZodOptional; - jsxImportSource: z.ZodOptional; - }, - z.core.$strict - > - >; - }, - z.core.$strict ->; -export type FileTemplateConfigInput = z.input; -export type FileTemplateConfigOutput = z.output; -/** - * Schema for browser import maps. - */ -export declare const importMapSchema: z.ZodObject< - { - imports: z.ZodRecord; - scopes: z.ZodOptional>>; - integrity: z.ZodOptional>; - }, - z.core.$strict ->; -export type ImportMapInput = z.input; -export type ImportMapOutput = z.output; -/** - * Schema for a resolved dependency entry. - */ -export declare const resolvedDependencySchema: z.ZodObject< - { - packageName: z.ZodString; - version: z.ZodString; - cdnUrl: z.ZodString; - integrity: z.ZodOptional; - global: z.ZodOptional; - esm: z.ZodBoolean; - provider: z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }>; - }, - z.core.$strict ->; -export type ResolvedDependencyInput = z.input; -export type ResolvedDependencyOutput = z.output; -/** - * Schema for build manifest metadata. - */ -export declare const buildManifestMetadataSchema: z.ZodObject< - { - createdAt: z.ZodString; - buildTimeMs: z.ZodNumber; - totalSize: z.ZodNumber; - bundlerVersion: z.ZodOptional; - }, - z.core.$strict ->; -/** - * Schema for build outputs. - */ -export declare const buildManifestOutputsSchema: z.ZodObject< - { - code: z.ZodString; - sourceMap: z.ZodOptional; - ssrHtml: z.ZodOptional; - }, - z.core.$strict ->; -/** - * Schema for component build manifest. - */ -export declare const componentBuildManifestSchema: z.ZodObject< - { - version: z.ZodLiteral<'1.0'>; - buildId: z.ZodString; - toolName: z.ZodString; - entryPath: z.ZodString; - contentHash: z.ZodString; - dependencies: z.ZodArray< - z.ZodObject< - { - packageName: z.ZodString; - version: z.ZodString; - cdnUrl: z.ZodString; - integrity: z.ZodOptional; - global: z.ZodOptional; - esm: z.ZodBoolean; - provider: z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }>; - }, - z.core.$strict - > - >; - outputs: z.ZodObject< - { - code: z.ZodString; - sourceMap: z.ZodOptional; - ssrHtml: z.ZodOptional; - }, - z.core.$strict - >; - importMap: z.ZodObject< - { - imports: z.ZodRecord; - scopes: z.ZodOptional>>; - integrity: z.ZodOptional>; - }, - z.core.$strict - >; - metadata: z.ZodObject< - { - createdAt: z.ZodString; - buildTimeMs: z.ZodNumber; - totalSize: z.ZodNumber; - bundlerVersion: z.ZodOptional; - }, - z.core.$strict - >; - }, - z.core.$strict ->; -export type ComponentBuildManifestInput = z.input; -export type ComponentBuildManifestOutput = z.output; -/** - * Schema for CDN provider configuration. - */ -export declare const cdnProviderConfigSchema: z.ZodRecord< - z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }>, - z.ZodObject< - { - url: z.ZodString; - integrity: z.ZodOptional; - global: z.ZodOptional; - exports: z.ZodOptional>; - esm: z.ZodOptional; - crossorigin: z.ZodOptional< - z.ZodEnum<{ - anonymous: 'anonymous'; - 'use-credentials': 'use-credentials'; - }> - >; - peerDependencies: z.ZodOptional>; - }, - z.core.$strict - > ->; -/** - * Schema for package metadata in registry. - */ -export declare const packageMetadataSchema: z.ZodObject< - { - description: z.ZodOptional; - homepage: z.ZodOptional; - license: z.ZodOptional; - }, - z.core.$strict ->; -/** - * Schema for a CDN registry entry. - */ -export declare const cdnRegistryEntrySchema: z.ZodObject< - { - packageName: z.ZodString; - defaultVersion: z.ZodString; - providers: z.ZodRecord< - z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }>, - z.ZodObject< - { - url: z.ZodString; - integrity: z.ZodOptional; - global: z.ZodOptional; - exports: z.ZodOptional>; - esm: z.ZodOptional; - crossorigin: z.ZodOptional< - z.ZodEnum<{ - anonymous: 'anonymous'; - 'use-credentials': 'use-credentials'; - }> - >; - peerDependencies: z.ZodOptional>; - }, - z.core.$strict - > - >; - preferredProviders: z.ZodOptional< - z.ZodArray< - z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }> - > - >; - metadata: z.ZodOptional< - z.ZodObject< - { - description: z.ZodOptional; - homepage: z.ZodOptional; - license: z.ZodOptional; - }, - z.core.$strict - > - >; - }, - z.core.$strict ->; -export type CDNRegistryEntryInput = z.input; -export type CDNRegistryEntryOutput = z.output; -/** - * Schema for dependency resolver options. - */ -export declare const dependencyResolverOptionsSchema: z.ZodObject< - { - platform: z.ZodOptional< - z.ZodEnum<{ - openai: 'openai'; - claude: 'claude'; - unknown: 'unknown'; - gemini: 'gemini'; - cursor: 'cursor'; - continue: 'continue'; - cody: 'cody'; - }> - >; - preferredProviders: z.ZodOptional< - z.ZodArray< - z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }> - > - >; - customRegistry: z.ZodOptional< - z.ZodRecord< - z.ZodString, - z.ZodObject< - { - packageName: z.ZodString; - defaultVersion: z.ZodString; - providers: z.ZodRecord< - z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }>, - z.ZodObject< - { - url: z.ZodString; - integrity: z.ZodOptional; - global: z.ZodOptional; - exports: z.ZodOptional>; - esm: z.ZodOptional; - crossorigin: z.ZodOptional< - z.ZodEnum<{ - anonymous: 'anonymous'; - 'use-credentials': 'use-credentials'; - }> - >; - peerDependencies: z.ZodOptional>; - }, - z.core.$strict - > - >; - preferredProviders: z.ZodOptional< - z.ZodArray< - z.ZodEnum<{ - cloudflare: 'cloudflare'; - jsdelivr: 'jsdelivr'; - unpkg: 'unpkg'; - 'esm.sh': 'esm.sh'; - skypack: 'skypack'; - }> - > - >; - metadata: z.ZodOptional< - z.ZodObject< - { - description: z.ZodOptional; - homepage: z.ZodOptional; - license: z.ZodOptional; - }, - z.core.$strict - > - >; - }, - z.core.$strict - > - > - >; - strictMode: z.ZodOptional; - requireIntegrity: z.ZodOptional; - }, - z.core.$strict ->; -export type DependencyResolverOptionsInput = z.input; -export type DependencyResolverOptionsOutput = z.output; -/** - * Import type enumeration. - */ -export declare const importTypeSchema: z.ZodEnum<{ - default: 'default'; - named: 'named'; - namespace: 'namespace'; - 'side-effect': 'side-effect'; - dynamic: 'dynamic'; -}>; -/** - * Schema for a parsed import statement. - */ -export declare const parsedImportSchema: z.ZodObject< - { - statement: z.ZodString; - specifier: z.ZodString; - type: z.ZodEnum<{ - default: 'default'; - named: 'named'; - namespace: 'namespace'; - 'side-effect': 'side-effect'; - dynamic: 'dynamic'; - }>; - namedImports: z.ZodOptional>; - defaultImport: z.ZodOptional; - namespaceImport: z.ZodOptional; - line: z.ZodNumber; - column: z.ZodNumber; - }, - z.core.$strict ->; -export type ParsedImportInput = z.input; -export type ParsedImportOutput = z.output; -/** - * Schema for parsed import results. - */ -export declare const parsedImportResultSchema: z.ZodObject< - { - imports: z.ZodArray< - z.ZodObject< - { - statement: z.ZodString; - specifier: z.ZodString; - type: z.ZodEnum<{ - default: 'default'; - named: 'named'; - namespace: 'namespace'; - 'side-effect': 'side-effect'; - dynamic: 'dynamic'; - }>; - namedImports: z.ZodOptional>; - defaultImport: z.ZodOptional; - namespaceImport: z.ZodOptional; - line: z.ZodNumber; - column: z.ZodNumber; - }, - z.core.$strict - > - >; - externalImports: z.ZodArray< - z.ZodObject< - { - statement: z.ZodString; - specifier: z.ZodString; - type: z.ZodEnum<{ - default: 'default'; - named: 'named'; - namespace: 'namespace'; - 'side-effect': 'side-effect'; - dynamic: 'dynamic'; - }>; - namedImports: z.ZodOptional>; - defaultImport: z.ZodOptional; - namespaceImport: z.ZodOptional; - line: z.ZodNumber; - column: z.ZodNumber; - }, - z.core.$strict - > - >; - relativeImports: z.ZodArray< - z.ZodObject< - { - statement: z.ZodString; - specifier: z.ZodString; - type: z.ZodEnum<{ - default: 'default'; - named: 'named'; - namespace: 'namespace'; - 'side-effect': 'side-effect'; - dynamic: 'dynamic'; - }>; - namedImports: z.ZodOptional>; - defaultImport: z.ZodOptional; - namespaceImport: z.ZodOptional; - line: z.ZodNumber; - column: z.ZodNumber; - }, - z.core.$strict - > - >; - externalPackages: z.ZodArray; - }, - z.core.$strict ->; -export type ParsedImportResultInput = z.input; -export type ParsedImportResultOutput = z.output; -/** - * Schema for cache statistics. - */ -export declare const cacheStatsSchema: z.ZodObject< - { - entries: z.ZodNumber; - totalSize: z.ZodNumber; - hits: z.ZodNumber; - misses: z.ZodNumber; - hitRate: z.ZodNumber; - }, - z.core.$strict ->; -export type CacheStatsInput = z.input; -export type CacheStatsOutput = z.output; -/** - * Safe parse result type. - */ -export type SafeParseResult = - | { - success: true; - data: T; - } - | { - success: false; - error: z.ZodError; - }; -/** - * Validate a CDN dependency configuration. - * - * @param data - Data to validate - * @returns Validated CDN dependency or throws ZodError - */ -export declare function validateCDNDependency(data: unknown): CDNDependencyOutput; -/** - * Safely validate a CDN dependency configuration. - * - * @param data - Data to validate - * @returns Safe parse result with success flag - */ -export declare function safeParseCDNDependency(data: unknown): SafeParseResult; -/** - * Validate file template configuration. - * - * @param data - Data to validate - * @returns Validated file template config or throws ZodError - */ -export declare function validateFileTemplateConfig(data: unknown): FileTemplateConfigOutput; -/** - * Safely validate file template configuration. - * - * @param data - Data to validate - * @returns Safe parse result with success flag - */ -export declare function safeParseFileTemplateConfig(data: unknown): SafeParseResult; -/** - * Validate a component build manifest. - * - * @param data - Data to validate - * @returns Validated manifest or throws ZodError - */ -export declare function validateBuildManifest(data: unknown): ComponentBuildManifestOutput; -/** - * Safely validate a component build manifest. - * - * @param data - Data to validate - * @returns Safe parse result with success flag - */ -export declare function safeParseBuildManifest(data: unknown): SafeParseResult; -//# sourceMappingURL=schemas.d.ts.map diff --git a/libs/uipack/src/dependency/schemas.d.ts.map b/libs/uipack/src/dependency/schemas.d.ts.map deleted file mode 100644 index 53c601f0..00000000 --- a/libs/uipack/src/dependency/schemas.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"schemas.d.ts","sourceRoot":"","sources":["schemas.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/template-loader.d.ts b/libs/uipack/src/dependency/template-loader.d.ts deleted file mode 100644 index ae0cbea9..00000000 --- a/libs/uipack/src/dependency/template-loader.d.ts +++ /dev/null @@ -1,210 +0,0 @@ -/** - * Template Loader - * - * Handles loading templates from various sources: - * - Inline strings - * - File paths - * - CDN URLs - * - * Supports caching for URL templates with ETag validation. - * - * @packageDocumentation - */ -import { - type TemplateMode, - type TemplateSource, - type TemplateFormat, - type ResolvedTemplate, - type UrlFetchResult, -} from './types'; -/** - * Get the URL cache (for testing/debugging). - */ -export declare function getUrlCache(): Map; -/** - * Clear the URL cache. - */ -export declare function clearUrlCache(): void; -/** - * Detect the source type of a template string. - * - * @param template - Template string (inline content, file path, or URL) - * @returns TemplateSource discriminated union - * - * @example - * ```typescript - * detectTemplateSource('https://cdn.example.com/widget.html') - * // => { type: 'url', url: 'https://cdn.example.com/widget.html' } - * - * detectTemplateSource('./widgets/chart.tsx') - * // => { type: 'file', path: './widgets/chart.tsx' } - * - * detectTemplateSource('
{{output.data}}
') - * // => { type: 'inline', content: '
{{output.data}}
' } - * ``` - */ -export declare function detectTemplateSource(template: string): TemplateSource; -/** - * Check if a template mode is file-based (file or URL). - */ -export declare function isFileBasedTemplate(mode: TemplateMode): boolean; -/** - * Validate that a URL is allowed for template fetching. - * Only HTTPS URLs are allowed. - * - * @param url - URL to validate - * @throws Error if URL is not HTTPS - */ -export declare function validateTemplateUrl(url: string): void; -/** - * Detect template format from a URL. - * - * @param url - URL to detect format from - * @returns Detected template format - */ -export declare function detectFormatFromUrl(url: string): TemplateFormat; -/** - * Options for fetching a template from URL. - */ -export interface FetchTemplateOptions { - /** - * Request timeout in milliseconds. - * @default 30000 (30 seconds) - */ - timeout?: number; - /** - * Whether to skip cache and always fetch fresh. - * @default false - */ - skipCache?: boolean; - /** - * Custom headers to include in the request. - */ - headers?: Record; -} -/** - * Fetch a template from a URL with ETag caching support. - * - * @param url - HTTPS URL to fetch from - * @param options - Fetch options - * @returns Fetched content with metadata - * @throws Error if URL is not HTTPS or fetch fails - * - * @example - * ```typescript - * const result = await fetchTemplateFromUrl('https://cdn.example.com/widget.html'); - * console.log(result.content); // Template HTML - * console.log(result.etag); // "abc123" (for cache validation) - * ``` - */ -export declare function fetchTemplateFromUrl(url: string, options?: FetchTemplateOptions): Promise; -/** - * Options for reading a template from file. - */ -export interface ReadTemplateOptions { - /** - * Base path for resolving relative file paths. - * @default process.cwd() - */ - basePath?: string; - /** - * File encoding. - * @default 'utf-8' - */ - encoding?: BufferEncoding; -} -/** - * Read a template from a file path. - * - * @param filePath - Relative or absolute file path - * @param options - Read options - * @returns Template content - * @throws Error if file cannot be read - * - * @example - * ```typescript - * const content = await readTemplateFromFile('./widgets/chart.tsx'); - * console.log(content); // File contents - * - * const content2 = await readTemplateFromFile('./widgets/chart.tsx', { - * basePath: '/app/src', - * }); - * ``` - */ -export declare function readTemplateFromFile(filePath: string, options?: ReadTemplateOptions): Promise; -/** - * Resolve a file path to an absolute path. - * - * @param filePath - Relative or absolute file path - * @param basePath - Base path for resolving relative paths - * @returns Absolute file path - */ -export declare function resolveFilePath(filePath: string, basePath?: string): string; -/** - * Options for resolving a template. - */ -export interface ResolveTemplateOptions { - /** - * Base path for resolving relative file paths. - * @default process.cwd() - */ - basePath?: string; - /** - * Whether to skip URL cache. - * @default false - */ - skipCache?: boolean; - /** - * Request timeout for URL fetches in milliseconds. - * @default 30000 - */ - timeout?: number; - /** - * Override the detected format. - */ - format?: TemplateFormat; -} -/** - * Resolve a template from any source (inline, file, or URL). - * - * This is the main entry point for loading templates. It: - * 1. Detects the source type (inline, file, URL) - * 2. Loads the content from the appropriate source - * 3. Detects the format from file extension - * 4. Computes content hash for caching - * - * @param template - Template string (inline content, file path, or URL) - * @param options - Resolution options - * @returns Resolved template with content and metadata - * - * @example - * ```typescript - * // Inline template - * const inline = await resolveTemplate('
{{output}}
'); - * - * // File template - * const file = await resolveTemplate('./widgets/chart.tsx', { - * basePath: '/app/src', - * }); - * - * // URL template - * const url = await resolveTemplate('https://cdn.example.com/widget.html'); - * ``` - */ -export declare function resolveTemplate(template: string, options?: ResolveTemplateOptions): Promise; -/** - * Check if a resolved template needs re-fetching based on cache state. - * Only applicable for URL templates. - * - * @param resolved - Previously resolved template - * @returns true if the template should be re-fetched - */ -export declare function needsRefetch(resolved: ResolvedTemplate): boolean; -/** - * Invalidate a cached URL template. - * - * @param url - URL to invalidate - * @returns true if the entry was removed - */ -export declare function invalidateUrlCache(url: string): boolean; -//# sourceMappingURL=template-loader.d.ts.map diff --git a/libs/uipack/src/dependency/template-loader.d.ts.map b/libs/uipack/src/dependency/template-loader.d.ts.map deleted file mode 100644 index 0a444963..00000000 --- a/libs/uipack/src/dependency/template-loader.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"template-loader.d.ts","sourceRoot":"","sources":["template-loader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACpB,MAAM,SAAS,CAAC;AAajB;;GAEG;AACH,wBAAgB,WAAW,IAAI,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAEzD;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CAEpC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc,CAarE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAE/D;AAMD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAMrD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAG/D;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,oBAAyB,GAAG,OAAO,CAAC,cAAc,CAAC,CA6DnH;AA+BD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAAC,MAAM,CAAC,CAwB/G;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAsB,GAAG,MAAM,CAE1F;AAMD;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAsB,eAAe,CACnC,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,sBAA2B,GACnC,OAAO,CAAC,gBAAgB,CAAC,CAiD3B;AASD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,gBAAgB,GAAG,OAAO,CAyBhE;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEvD"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/template-processor.d.ts b/libs/uipack/src/dependency/template-processor.d.ts deleted file mode 100644 index 05b98608..00000000 --- a/libs/uipack/src/dependency/template-processor.d.ts +++ /dev/null @@ -1,135 +0,0 @@ -/** - * Template Processor - * - * Processes resolved templates through format-specific rendering pipelines: - * - HTML: Handlebars → Output - * - Markdown: Handlebars → marked → HTML - * - MDX: Handlebars → MDX Renderer → HTML - * - React: Pass-through (data via props, needs bundling) - * - * @packageDocumentation - */ -import type { ResolvedTemplate, TemplateProcessingOptions, ProcessedTemplate, TemplateFormat } from './types'; -/** - * Clear the Handlebars renderer cache. - * Useful for testing. - */ -export declare function clearHandlebarsCache(): void; -/** - * Check if marked is available. - */ -export declare function isMarkedAvailable(): Promise; -/** - * Process a resolved template through the appropriate rendering pipeline. - * - * Processing differs by format: - * - **HTML**: Apply Handlebars if {{...}} present → Return HTML - * - **Markdown**: Apply Handlebars → Parse with marked → Return HTML - * - **MDX**: Apply Handlebars → Render with MDX renderer → Return HTML - * - **React**: Return as-is (data passed via props, needs bundling) - * - * @param resolved - Resolved template from template-loader - * @param options - Processing options with context data - * @returns Processed template ready for rendering - * - * @example HTML template - * ```typescript - * const resolved = await resolveTemplate('./weather.html'); - * const result = await processTemplate(resolved, { - * context: { - * input: { city: 'Seattle' }, - * output: { temperature: 72, conditions: 'Sunny' }, - * }, - * }); - * // result.html = '
72°F in Seattle
' - * ``` - * - * @example Markdown template - * ```typescript - * const resolved = await resolveTemplate('./report.md'); - * const result = await processTemplate(resolved, { - * context: { - * input: {}, - * output: { title: 'Q4 Report', items: [...] }, - * }, - * }); - * // result.html = '

Q4 Report

...' - * ``` - */ -export declare function processTemplate( - resolved: ResolvedTemplate, - options: TemplateProcessingOptions, -): Promise; -/** - * Process multiple templates in parallel. - * - * @param items - Array of resolved templates with their options - * @returns Array of processed templates - */ -export declare function processTemplates( - items: Array<{ - resolved: ResolvedTemplate; - options: TemplateProcessingOptions; - }>, -): Promise; -/** - * Check if a template format requires Handlebars processing. - * - * @param format - Template format - * @returns true if Handlebars can be applied - */ -export declare function supportsHandlebars(format: TemplateFormat): boolean; -/** - * Check if a template format produces HTML output. - * - * @param format - Template format - * @returns true if the format produces HTML - */ -export declare function producesHtml(format: TemplateFormat): boolean; -/** - * Check if a template format requires bundling. - * - * @param format - Template format - * @returns true if the format needs to be bundled - */ -export declare function requiresBundling(format: TemplateFormat): boolean; -/** - * Process an HTML template with Handlebars. - * - * @param content - HTML template content - * @param context - Processing context - * @param helpers - Custom Handlebars helpers - * @returns Processed HTML - */ -export declare function processHtmlTemplate( - content: string, - context: TemplateProcessingOptions['context'], - helpers?: TemplateProcessingOptions['handlebarsHelpers'], -): Promise; -/** - * Process a Markdown template with Handlebars and marked. - * - * @param content - Markdown template content - * @param context - Processing context - * @param helpers - Custom Handlebars helpers - * @returns Processed HTML - */ -export declare function processMarkdownTemplate( - content: string, - context: TemplateProcessingOptions['context'], - helpers?: TemplateProcessingOptions['handlebarsHelpers'], -): Promise; -/** - * Process an MDX template with Handlebars and MDX renderer. - * - * @param content - MDX template content - * @param context - Processing context - * @param helpers - Custom Handlebars helpers - * @returns Processed HTML - */ -export declare function processMdxTemplate( - content: string, - context: TemplateProcessingOptions['context'], - helpers?: TemplateProcessingOptions['handlebarsHelpers'], -): Promise; -//# sourceMappingURL=template-processor.d.ts.map diff --git a/libs/uipack/src/dependency/template-processor.d.ts.map b/libs/uipack/src/dependency/template-processor.d.ts.map deleted file mode 100644 index 63de6a7e..00000000 --- a/libs/uipack/src/dependency/template-processor.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"template-processor.d.ts","sourceRoot":"","sources":["template-processor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EACV,gBAAgB,EAChB,yBAAyB,EACzB,iBAAiB,EACjB,cAAc,EAEf,MAAM,SAAS,CAAC;AA2FjB;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C;AAwCD;;GAEG;AACH,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC,CAO1D;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAsB,eAAe,CACnC,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,yBAAyB,GACjC,OAAO,CAAC,iBAAiB,CAAC,CAyF5B;AAED;;;;;GAKG;AACH,wBAAsB,gBAAgB,CACpC,KAAK,EAAE,KAAK,CAAC;IAAE,QAAQ,EAAE,gBAAgB,CAAC;IAAC,OAAO,EAAE,yBAAyB,CAAA;CAAE,CAAC,GAC/E,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAE9B;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,CAElE;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,CAE5D;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,cAAc,GAAG,OAAO,CAEhE;AAMD;;;;;;;GAOG;AACH,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAC7C,OAAO,CAAC,EAAE,yBAAyB,CAAC,mBAAmB,CAAC,GACvD,OAAO,CAAC,MAAM,CAAC,CAcjB;AAED;;;;;;;GAOG;AACH,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAC7C,OAAO,CAAC,EAAE,yBAAyB,CAAC,mBAAmB,CAAC,GACvD,OAAO,CAAC,MAAM,CAAC,CAkBjB;AAED;;;;;;;GAOG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAC7C,OAAO,CAAC,EAAE,yBAAyB,CAAC,mBAAmB,CAAC,GACvD,OAAO,CAAC,MAAM,CAAC,CAwBjB"} \ No newline at end of file diff --git a/libs/uipack/src/dependency/types.d.ts b/libs/uipack/src/dependency/types.d.ts deleted file mode 100644 index b9637976..00000000 --- a/libs/uipack/src/dependency/types.d.ts +++ /dev/null @@ -1,744 +0,0 @@ -/** - * Dependency Resolution Types - * - * Type definitions for CDN dependency resolution, import mapping, - * and file-based component bundling. - * - * @packageDocumentation - */ -import type { ZodTypeAny } from 'zod'; -/** - * Supported CDN providers for external library hosting. - * - * - `cloudflare`: cdnjs.cloudflare.com (REQUIRED for Claude compatibility) - * - `jsdelivr`: cdn.jsdelivr.net - * - `unpkg`: unpkg.com - * - `esm.sh`: esm.sh (ES modules) - * - `skypack`: cdn.skypack.dev (deprecated, fallback only) - * - `custom`: User-defined CDN override (for explicit dependency configuration) - */ -export type CDNProvider = 'cloudflare' | 'jsdelivr' | 'unpkg' | 'esm.sh' | 'skypack' | 'custom'; -/** - * Platform types that affect CDN selection. - * - * - `claude`: Only allows cdnjs.cloudflare.com (blocked network) - * - `openai`: Can use any CDN - * - `cursor`: Can use any CDN - * - `gemini`: Can use any CDN - * - `unknown`: Defaults to cloudflare for maximum compatibility - */ -export type CDNPlatformType = 'claude' | 'openai' | 'cursor' | 'gemini' | 'continue' | 'cody' | 'unknown'; -/** - * Configuration for a single CDN dependency. - * - * Specifies how to load an external library from a CDN. - * - * @example - * ```typescript - * const chartJsDependency: CDNDependency = { - * url: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js', - * integrity: 'sha512-...', - * global: 'Chart', - * esm: false, - * }; - * ``` - */ -export interface CDNDependency { - /** - * CDN URL for the library. - * MUST be HTTPS. - * - * @example 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js' - */ - url: string; - /** - * Subresource Integrity (SRI) hash for security. - * Format: `sha256-...`, `sha384-...`, or `sha512-...` - * - * @see https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity - * @example 'sha384-abc123...' - */ - integrity?: string; - /** - * Global variable name exposed by the library (for UMD builds). - * Used to map imports to window globals in the browser. - * - * @example 'Chart' for Chart.js, 'React' for React - */ - global?: string; - /** - * Named exports to expose from the library. - * If not specified, defaults to the default export or global. - * - * @example ['Chart', 'registerables'] for Chart.js - */ - exports?: string[]; - /** - * Whether this is an ES module (ESM) build. - * ESM builds use `import` statements; UMD uses globals. - * - * @default false - */ - esm?: boolean; - /** - * Cross-origin attribute for the script tag. - * - * @default 'anonymous' - */ - crossorigin?: 'anonymous' | 'use-credentials'; - /** - * Dependencies that must be loaded before this library. - * Specified as npm package names (e.g., 'react' for react-dom). - * - * @example ['react'] for react-dom - */ - peerDependencies?: string[]; -} -/** - * CDN configuration per provider for a package. - * Allows different URLs/configurations for different CDN providers. - */ -export type CDNProviderConfig = Partial>; -/** - * Target JavaScript version for bundling. - */ -export type BundleTarget = 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'es2022' | 'esnext'; -/** - * Configuration options for bundling file-based components. - * - * @example - * ```typescript - * const devOptions: FileBundleOptions = { - * minify: false, - * sourceMaps: true, - * target: 'esnext', - * }; - * ``` - */ -export interface FileBundleOptions { - /** - * Minify the bundled output. - * - * @default true in production, false in development - */ - minify?: boolean; - /** - * Generate source maps for debugging. - * - * @default false - */ - sourceMaps?: boolean; - /** - * Target JavaScript version. - * - * @default 'es2020' - */ - target?: BundleTarget; - /** - * Enable tree shaking to remove unused code. - * - * @default true - */ - treeShake?: boolean; - /** - * JSX factory function. - * - * @default 'React.createElement' - */ - jsxFactory?: string; - /** - * JSX fragment factory. - * - * @default 'React.Fragment' - */ - jsxFragment?: string; - /** - * JSX import source for automatic runtime. - * - * @default 'react' - */ - jsxImportSource?: string; -} -/** - * Extended UI template configuration with file-based template support. - * - * Extends the base UITemplateConfig to support: - * - File paths as templates (e.g., './chart-widget.tsx') - * - External library dependencies via CDN - * - Custom bundle options - * - * @example - * ```typescript - * const uiConfig: FileTemplateConfig = { - * template: './widgets/chart-widget.tsx', - * externals: ['chart.js', 'react-chartjs-2'], - * dependencies: { - * 'chart.js': { - * url: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js', - * integrity: 'sha512-...', - * global: 'Chart', - * }, - * }, - * bundleOptions: { - * minify: true, - * target: 'es2020', - * }, - * }; - * ``` - */ -export interface FileTemplateConfig { - /** - * Packages to load from CDN instead of bundling. - * These packages will be excluded from the bundle and loaded - * via import maps at runtime. - * - * Package names should match npm package names. - * - * @example ['chart.js', 'react-chartjs-2', 'd3'] - */ - externals?: string[]; - /** - * Explicit CDN dependency overrides. - * Use this to specify custom CDN URLs or override the default - * CDN registry entries for specific packages. - * - * Keys are npm package names. - */ - dependencies?: Record; - /** - * Bundle options for file-based templates. - */ - bundleOptions?: FileBundleOptions; -} -/** - * Browser import map structure. - * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap - */ -export interface ImportMap { - /** - * Module specifier to URL mappings. - * - * @example { 'chart.js': 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js' } - */ - imports: Record; - /** - * Scoped mappings for specific paths. - */ - scopes?: Record>; - /** - * Integrity hashes for imported modules. - * Maps URLs to their SRI hashes. - */ - integrity?: Record; -} -/** - * Entry for a resolved dependency. - */ -export interface ResolvedDependency { - /** - * NPM package name. - */ - packageName: string; - /** - * Resolved version string. - */ - version: string; - /** - * CDN URL for the package. - */ - cdnUrl: string; - /** - * SRI integrity hash (if available). - */ - integrity?: string; - /** - * Global variable name (for UMD). - */ - global?: string; - /** - * Whether this is an ES module. - */ - esm: boolean; - /** - * CDN provider used. - */ - provider: CDNProvider; -} -/** - * Build manifest for a compiled file-based component. - * Stored in cache for incremental builds. - */ -export interface ComponentBuildManifest { - /** - * Manifest format version. - */ - version: '1.0'; - /** - * Unique build identifier. - */ - buildId: string; - /** - * Tool name this component belongs to. - */ - toolName: string; - /** - * Original entry file path (relative to project root). - */ - entryPath: string; - /** - * SHA-256 hash of entry file + dependencies + options. - * Used as cache key for incremental builds. - */ - contentHash: string; - /** - * Resolved external dependencies. - */ - dependencies: ResolvedDependency[]; - /** - * Build outputs. - */ - outputs: { - /** - * Bundled JavaScript code. - */ - code: string; - /** - * Source map (if generated). - */ - sourceMap?: string; - /** - * Pre-rendered HTML (if SSR was performed). - */ - ssrHtml?: string; - }; - /** - * Generated import map for this component. - */ - importMap: ImportMap; - /** - * Build metadata. - */ - metadata: { - /** - * ISO timestamp of when the build was created. - */ - createdAt: string; - /** - * Build time in milliseconds. - */ - buildTimeMs: number; - /** - * Total size of bundled output in bytes. - */ - totalSize: number; - /** - * esbuild/bundler version used. - */ - bundlerVersion?: string; - }; -} -/** - * Abstract interface for build cache storage. - * Implementations include filesystem (dev) and Redis (prod). - */ -export interface BuildCacheStorage { - /** - * Get a cached build manifest by key. - * - * @param key - Cache key (typically the content hash) - * @returns The cached manifest or undefined if not found - */ - get(key: string): Promise; - /** - * Store a build manifest in cache. - * - * @param key - Cache key - * @param manifest - Build manifest to store - * @param ttl - Optional TTL in seconds - */ - set(key: string, manifest: ComponentBuildManifest, ttl?: number): Promise; - /** - * Check if a key exists in cache. - * - * @param key - Cache key to check - * @returns true if the key exists - */ - has(key: string): Promise; - /** - * Delete a cached entry. - * - * @param key - Cache key to delete - * @returns true if the entry was deleted - */ - delete(key: string): Promise; - /** - * Clear all cached entries. - */ - clear(): Promise; - /** - * Get cache statistics. - */ - getStats(): Promise; -} -/** - * Cache statistics. - */ -export interface CacheStats { - /** - * Number of entries in cache. - */ - entries: number; - /** - * Total size of cached data in bytes. - */ - totalSize: number; - /** - * Number of cache hits. - */ - hits: number; - /** - * Number of cache misses. - */ - misses: number; - /** - * Cache hit rate (0-1). - */ - hitRate: number; -} -/** - * Entry in the CDN registry for a known package. - */ -export interface CDNRegistryEntry { - /** - * NPM package name. - */ - packageName: string; - /** - * Default/recommended version. - */ - defaultVersion: string; - /** - * CDN configurations per provider. - */ - providers: CDNProviderConfig; - /** - * Preferred CDN provider order. - * First available provider is used. - * - * @default ['cloudflare', 'jsdelivr', 'unpkg', 'esm.sh'] - */ - preferredProviders?: CDNProvider[]; - /** - * Package metadata. - */ - metadata?: { - /** - * Human-readable description. - */ - description?: string; - /** - * Homepage URL. - */ - homepage?: string; - /** - * License identifier. - */ - license?: string; - }; -} -/** - * The full CDN registry mapping package names to their CDN configurations. - */ -export type CDNRegistry = Record; -/** - * Options for resolving dependencies. - */ -export interface DependencyResolverOptions { - /** - * Target platform for CDN selection. - * Affects which CDN provider is used. - * - * @default 'unknown' - */ - platform?: CDNPlatformType; - /** - * Preferred CDN providers in order of preference. - * If not specified, uses platform-specific defaults. - */ - preferredProviders?: CDNProvider[]; - /** - * Custom CDN registry to merge with defaults. - */ - customRegistry?: CDNRegistry; - /** - * Whether to fail on unresolved dependencies. - * If false, unresolved deps are bundled instead. - * - * @default true - */ - strictMode?: boolean; - /** - * Whether to require SRI integrity hashes. - * - * @default false - */ - requireIntegrity?: boolean; -} -/** - * A parsed import statement from source code. - */ -export interface ParsedImport { - /** - * Full import statement as it appears in source. - * - * @example "import { Chart } from 'chart.js'" - */ - statement: string; - /** - * Module specifier (package name or path). - * - * @example 'chart.js', './utils', '@org/package' - */ - specifier: string; - /** - * Import type. - */ - type: 'named' | 'default' | 'namespace' | 'side-effect' | 'dynamic'; - /** - * Named imports (for named import type). - * - * @example ['Chart', 'registerables'] - */ - namedImports?: string[]; - /** - * Default import name (for default import type). - * - * @example 'React' - */ - defaultImport?: string; - /** - * Namespace import name (for namespace import type). - * - * @example 'd3' for `import * as d3 from 'd3'` - */ - namespaceImport?: string; - /** - * Line number in source (1-indexed). - */ - line: number; - /** - * Column number in source (0-indexed). - */ - column: number; -} -/** - * Result of parsing imports from a source file. - */ -export interface ParsedImportResult { - /** - * All parsed imports. - */ - imports: ParsedImport[]; - /** - * External package imports (npm packages). - */ - externalImports: ParsedImport[]; - /** - * Relative imports (local files). - */ - relativeImports: ParsedImport[]; - /** - * Unique external package names. - */ - externalPackages: string[]; -} -/** - * Detected template mode for a UI configuration. - */ -export type TemplateMode = 'inline-function' | 'inline-string' | 'file-path' | 'url'; -/** - * Detect the template mode from a template value. - * - * @param template - The template value from UITemplateConfig - * @returns The detected template mode - */ -export declare function detectTemplateMode(template: unknown): TemplateMode; -/** - * Template format detected from file extension or content. - * - * - `react`: .tsx/.jsx files (React components, bundled with esbuild) - * - `mdx`: .mdx files (Markdown + JSX, Handlebars → MDX Renderer) - * - `markdown`: .md files (Markdown, Handlebars → marked) - * - `html`: .html files or inline strings (Handlebars only) - */ -export type TemplateFormat = 'react' | 'mdx' | 'markdown' | 'html'; -/** - * Template source discriminated union. - * Represents where the template content comes from. - */ -export type TemplateSource = - | { - type: 'inline'; - content: string; - } - | { - type: 'file'; - path: string; - } - | { - type: 'url'; - url: string; - }; -/** - * Result of fetching a template from a URL. - */ -export interface UrlFetchResult { - /** - * Fetched template content. - */ - content: string; - /** - * ETag header for cache validation. - */ - etag?: string; - /** - * Content-Type header. - */ - contentType?: string; - /** - * ISO timestamp when the content was fetched. - */ - fetchedAt: string; -} -/** - * A resolved template ready for processing. - * Contains the raw content and metadata about the source. - */ -export interface ResolvedTemplate { - /** - * Original template source. - */ - source: TemplateSource; - /** - * Detected template format. - */ - format: TemplateFormat; - /** - * Raw template content (fetched/read from source). - */ - content: string; - /** - * SHA-256 hash of the content for caching. - */ - hash: string; - /** - * Additional metadata depending on source type. - */ - metadata?: { - /** - * ISO timestamp when URL content was fetched. - */ - fetchedAt?: string; - /** - * ETag for URL cache validation. - */ - etag?: string; - /** - * Content-Type from URL response. - */ - contentType?: string; - /** - * Original file path (resolved absolute path). - */ - resolvedPath?: string; - }; -} -/** - * Options for processing a resolved template. - */ -export interface TemplateProcessingOptions { - /** - * Context data for Handlebars/React rendering. - */ - context: { - /** - * Tool input arguments. - */ - input: unknown; - /** - * Tool output/result. - */ - output: unknown; - /** - * Parsed structured content (optional). - */ - structuredContent?: unknown; - }; - /** - * Target platform for CDN selection. - */ - platform?: CDNPlatformType; - /** - * Custom Handlebars helpers. - */ - handlebarsHelpers?: Record unknown>; - /** - * Base path for resolving relative file paths. - */ - basePath?: string; - /** - * Zod schema for output validation. - * - * When provided in development mode (NODE_ENV !== 'production'), - * the template will be validated against this schema to catch - * Handlebars expressions referencing non-existent fields. - */ - outputSchema?: ZodTypeAny; - /** - * Zod schema for input validation. - * - * When provided in development mode (NODE_ENV !== 'production'), - * the template will also validate {{input.*}} expressions. - */ - inputSchema?: ZodTypeAny; - /** - * Tool name for validation error messages. - */ - toolName?: string; -} -/** - * Result of processing a template. - */ -export type ProcessedTemplate = - | { - /** - * Rendered HTML output (for html, markdown, mdx formats). - */ - html: string; - /** - * Template format that was processed. - */ - format: 'html' | 'markdown' | 'mdx'; - } - | { - /** - * Bundled JavaScript code (for react format). - */ - code: string; - /** - * Template format. - */ - format: 'react'; - /** - * Indicates React templates need bundling. - */ - needsBundling: true; - }; -/** - * Detect template format from a file path or URL. - * - * @param pathOrUrl - File path or URL to detect format from - * @returns The detected template format - */ -export declare function detectFormatFromPath(pathOrUrl: string): TemplateFormat; -//# sourceMappingURL=types.d.ts.map diff --git a/libs/uipack/src/dependency/types.d.ts.map b/libs/uipack/src/dependency/types.d.ts.map deleted file mode 100644 index 92bb0947..00000000 --- a/libs/uipack/src/dependency/types.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/uipack/src/handlebars/expression-extractor.d.ts b/libs/uipack/src/handlebars/expression-extractor.d.ts deleted file mode 100644 index 4e3fa8d8..00000000 --- a/libs/uipack/src/handlebars/expression-extractor.d.ts +++ /dev/null @@ -1,151 +0,0 @@ -/** - * Handlebars Expression Extractor - * - * Extracts variable paths from Handlebars templates for validation - * against schemas. - * - * @packageDocumentation - */ -/** - * Type of Handlebars expression. - */ -export type ExpressionType = 'variable' | 'helper' | 'block' | 'block-close'; -/** - * Extracted expression with metadata. - */ -export interface ExtractedExpression { - /** The variable path (e.g., "output.temperature") */ - path: string; - /** The full expression (e.g., "{{output.temperature}}") */ - fullExpression: string; - /** Line number in template (1-indexed) */ - line: number; - /** Column position (1-indexed) */ - column: number; - /** Type of expression */ - type: ExpressionType; - /** For helpers, the helper name */ - helperName?: string; -} -/** - * Result of expression extraction. - */ -export interface ExtractionResult { - /** All extracted expressions */ - expressions: ExtractedExpression[]; - /** Unique variable paths */ - paths: string[]; - /** Paths starting with "output." */ - outputPaths: string[]; - /** Paths starting with "input." */ - inputPaths: string[]; - /** Paths starting with "structuredContent." */ - structuredContentPaths: string[]; -} -/** - * Extract all Handlebars expressions from a template. - * - * @param template - Handlebars template string - * @returns Array of extracted expressions with metadata - * - * @example - * ```typescript - * const expressions = extractExpressions('
{{output.name}}
'); - * // [{ path: 'output.name', fullExpression: '{{output.name}}', ... }] - * ``` - */ -export declare function extractExpressions(template: string): ExtractedExpression[]; -/** - * Extract all variable paths from a template. - * - * @param template - Handlebars template string - * @returns Array of unique variable paths - * - * @example - * ```typescript - * const paths = extractVariablePaths('
{{output.a}} {{input.b}}
'); - * // ['output.a', 'input.b'] - * ``` - */ -export declare function extractVariablePaths(template: string): string[]; -/** - * Extract only output.* paths from a template. - * - * @param template - Handlebars template string - * @returns Array of unique output paths - * - * @example - * ```typescript - * const paths = extractOutputPaths('
{{output.temp}} {{input.city}}
'); - * // ['output.temp'] - * ``` - */ -export declare function extractOutputPaths(template: string): string[]; -/** - * Extract only input.* paths from a template. - * - * @param template - Handlebars template string - * @returns Array of unique input paths - */ -export declare function extractInputPaths(template: string): string[]; -/** - * Extract only structuredContent.* paths from a template. - * - * @param template - Handlebars template string - * @returns Array of unique structuredContent paths - */ -export declare function extractStructuredContentPaths(template: string): string[]; -/** - * Comprehensive extraction returning all path categories. - * - * @param template - Handlebars template string - * @returns Extraction result with categorized paths - * - * @example - * ```typescript - * const result = extractAll('
{{output.a}} {{input.b}}
'); - * // { - * // expressions: [...], - * // paths: ['output.a', 'input.b'], - * // outputPaths: ['output.a'], - * // inputPaths: ['input.b'], - * // structuredContentPaths: [] - * // } - * ``` - */ -export declare function extractAll(template: string): ExtractionResult; -/** - * Check if a template contains any Handlebars expressions with variable paths. - * - * @param template - Handlebars template string - * @returns true if template contains variable paths - */ -export declare function hasVariablePaths(template: string): boolean; -/** - * Get expression details at a specific line and column. - * - * @param template - Handlebars template string - * @param line - Line number (1-indexed) - * @param column - Column number (1-indexed) - * @returns Expression at position or undefined - */ -export declare function getExpressionAt( - template: string, - line: number, - column: number, -): ExtractedExpression | undefined; -/** - * Normalize a path for comparison. - * Converts array index access to wildcard format. - * - * @param path - Variable path - * @returns Normalized path - * - * @example - * ```typescript - * normalizePath('output.items.0.name'); // 'output.items.[].name' - * normalizePath('output.data[0].value'); // 'output.data.[].value' - * ``` - */ -export declare function normalizePath(path: string): string; -//# sourceMappingURL=expression-extractor.d.ts.map diff --git a/libs/uipack/src/handlebars/expression-extractor.d.ts.map b/libs/uipack/src/handlebars/expression-extractor.d.ts.map deleted file mode 100644 index c2b5aacd..00000000 --- a/libs/uipack/src/handlebars/expression-extractor.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"expression-extractor.d.ts","sourceRoot":"","sources":["expression-extractor.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,WAAW,EAAE,mBAAmB,EAAE,CAAC;IACnC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,oCAAoC;IACpC,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,mCAAmC;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,+CAA+C;IAC/C,sBAAsB,EAAE,MAAM,EAAE,CAAC;CAClC;AAwCD;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,mBAAmB,EAAE,CAmE1E;AAgDD;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAI/D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAE7D;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAE5D;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAExE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,gBAAgB,CAW7D;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAE1D;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,mBAAmB,GAAG,SAAS,CAS/G;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQlD"} \ No newline at end of file diff --git a/libs/uipack/src/handlebars/expression-extractor.ts b/libs/uipack/src/handlebars/expression-extractor.ts index 4e1574cd..a2bd7192 100644 --- a/libs/uipack/src/handlebars/expression-extractor.ts +++ b/libs/uipack/src/handlebars/expression-extractor.ts @@ -77,7 +77,7 @@ const PATH_REGEX = /\b(output|input|structuredContent)(\.[a-zA-Z_$][a-zA-Z0-9_$] /** * Built-in Handlebars helpers that should be recognized. */ -const BUILT_IN_HELPERS = new Set(['if', 'unless', 'each', 'with', 'lookup', 'log', 'else']); +const _BUILT_IN_HELPERS = new Set(['if', 'unless', 'each', 'with', 'lookup', 'log', 'else']); /** * Built-in keywords that are not variable paths. @@ -102,7 +102,6 @@ const KEYWORDS = new Set(['this', 'else', '@index', '@key', '@first', '@last', ' */ export function extractExpressions(template: string): ExtractedExpression[] { const expressions: ExtractedExpression[] = []; - const lines = template.split('\n'); // Build a map of character positions to line/column const positionMap = buildPositionMap(template); diff --git a/libs/uipack/src/handlebars/helpers.d.ts b/libs/uipack/src/handlebars/helpers.d.ts deleted file mode 100644 index 068790b6..00000000 --- a/libs/uipack/src/handlebars/helpers.d.ts +++ /dev/null @@ -1,339 +0,0 @@ -/** - * Handlebars Built-in Helpers - * - * Provides a collection of helper functions for Handlebars templates. - * Includes formatting, escaping, conditionals, and iteration helpers. - * - * @packageDocumentation - */ -import { escapeHtml } from '../utils'; -/** - * Helper function type for Handlebars. - * Allows any function signature since Handlebars helpers vary widely. - */ -export type HelperFunction = (...args: any[]) => string | boolean | unknown; -export { escapeHtml }; -/** - * Format a date for display. - * - * @param date - Date object, ISO string, or timestamp - * @param format - Optional format string (default: localized date) - * @returns Formatted date string - * - * @example - * ```handlebars - * {{formatDate output.createdAt}} - * {{formatDate output.createdAt "short"}} - * {{formatDate output.createdAt "long"}} - * ``` - */ -export declare function formatDate(date: unknown, format?: string): string; -/** - * Format a number as currency. - * - * @param amount - Numeric amount - * @param currency - ISO 4217 currency code (default: 'USD') - * @returns Formatted currency string - * - * @example - * ```handlebars - * {{formatCurrency output.price}} - * {{formatCurrency output.price "EUR"}} - * ``` - */ -export declare function formatCurrency(amount: unknown, currency?: string): string; -/** - * Format a number with locale-aware separators. - * - * @param value - Number to format - * @param decimals - Number of decimal places (optional) - * @returns Formatted number string - * - * @example - * ```handlebars - * {{formatNumber output.count}} - * {{formatNumber output.percentage 2}} - * ``` - */ -export declare function formatNumber(value: unknown, decimals?: number): string; -/** - * Safely embed JSON data in HTML. - * Escapes script-breaking characters. - * - * @param data - Data to serialize - * @returns JSON string safe for embedding - * - * @example - * ```handlebars - * - * ``` - */ -export declare function jsonEmbed(data: unknown): string; -/** - * Convert data to JSON string. - * - * @param data - Data to serialize - * @param pretty - Whether to pretty-print (optional) - * @returns JSON string - * - * @example - * ```handlebars - * 
{{json output true}}
- * ``` - */ -export declare function json(data: unknown, pretty?: boolean): string; -/** - * Equality comparison. - * - * @param a - First value - * @param b - Second value - * @returns true if values are equal - * - * @example - * ```handlebars - * {{#if (eq output.status "active")}}Active{{/if}} - * ``` - */ -export declare function eq(a: unknown, b: unknown): boolean; -/** - * Inequality comparison. - * - * @param a - First value - * @param b - Second value - * @returns true if values are not equal - * - * @example - * ```handlebars - * {{#if (ne output.status "deleted")}}Visible{{/if}} - * ``` - */ -export declare function ne(a: unknown, b: unknown): boolean; -/** - * Greater than comparison. - * - * @param a - First value - * @param b - Second value - * @returns true if a > b - * - * @example - * ```handlebars - * {{#if (gt output.count 10)}}Many items{{/if}} - * ``` - */ -export declare function gt(a: unknown, b: unknown): boolean; -/** - * Greater than or equal comparison. - * - * @param a - First value - * @param b - Second value - * @returns true if a >= b - */ -export declare function gte(a: unknown, b: unknown): boolean; -/** - * Less than comparison. - * - * @param a - First value - * @param b - Second value - * @returns true if a < b - * - * @example - * ```handlebars - * {{#if (lt output.remaining 5)}}Running low{{/if}} - * ``` - */ -export declare function lt(a: unknown, b: unknown): boolean; -/** - * Less than or equal comparison. - * - * @param a - First value - * @param b - Second value - * @returns true if a <= b - */ -export declare function lte(a: unknown, b: unknown): boolean; -/** - * Logical AND. - * - * @param a - First value - * @param b - Second value - * @returns true if both values are truthy - * - * @example - * ```handlebars - * {{#if (and output.enabled output.visible)}}Show content{{/if}} - * ``` - */ -export declare function and(a: unknown, b: unknown): boolean; -/** - * Logical OR. - * - * @param a - First value - * @param b - Second value - * @returns true if either value is truthy - * - * @example - * ```handlebars - * {{#if (or output.featured output.promoted)}}Highlight{{/if}} - * ``` - */ -export declare function or(a: unknown, b: unknown): boolean; -/** - * Logical NOT. - * - * @param value - Value to negate - * @returns Negated boolean - * - * @example - * ```handlebars - * {{#if (not output.hidden)}}Visible{{/if}} - * ``` - */ -export declare function not(value: unknown): boolean; -/** - * Get the first element of an array. - * - * @param arr - Array - * @returns First element - * - * @example - * ```handlebars - * {{first output.items}} - * ``` - */ -export declare function first(arr: T[]): T | undefined; -/** - * Get the last element of an array. - * - * @param arr - Array - * @returns Last element - * - * @example - * ```handlebars - * {{last output.items}} - * ``` - */ -export declare function last(arr: T[]): T | undefined; -/** - * Get the length of an array or string. - * - * @param value - Array or string - * @returns Length - * - * @example - * ```handlebars - * {{length output.items}} items - * ``` - */ -export declare function length(value: unknown): number; -/** - * Check if a value is in an array. - * - * @param arr - Array to search - * @param value - Value to find - * @returns true if value is in array - * - * @example - * ```handlebars - * {{#if (includes output.tags "featured")}}Featured{{/if}} - * ``` - */ -export declare function includes(arr: unknown, value: unknown): boolean; -/** - * Join array elements with a separator. - * - * @param arr - Array to join - * @param separator - Separator string (default: ', ') - * @returns Joined string - * - * @example - * ```handlebars - * {{join output.tags ", "}} - * ``` - */ -export declare function join(arr: unknown, separator?: string): string; -/** - * Convert to uppercase. - * - * @param str - String to convert - * @returns Uppercase string - * - * @example - * ```handlebars - * {{uppercase output.status}} - * ``` - */ -export declare function uppercase(str: unknown): string; -/** - * Convert to lowercase. - * - * @param str - String to convert - * @returns Lowercase string - * - * @example - * ```handlebars - * {{lowercase output.name}} - * ``` - */ -export declare function lowercase(str: unknown): string; -/** - * Capitalize the first letter. - * - * @param str - String to capitalize - * @returns Capitalized string - * - * @example - * ```handlebars - * {{capitalize output.name}} - * ``` - */ -export declare function capitalize(str: unknown): string; -/** - * Truncate a string to a maximum length. - * - * @param str - String to truncate - * @param maxLength - Maximum length - * @param suffix - Suffix to add if truncated (default: '...') - * @returns Truncated string - * - * @example - * ```handlebars - * {{truncate output.description 100}} - * ``` - */ -export declare function truncate(str: unknown, maxLength?: number, suffix?: string): string; -/** - * Provide a default value if the input is falsy. - * - * @param value - Value to check - * @param defaultValue - Default value if falsy - * @returns Value or default - * - * @example - * ```handlebars - * {{default output.name "Unknown"}} - * ``` - */ -export declare function defaultValue(value: unknown, defaultValue: unknown): unknown; -export declare function uniqueId(prefix?: string): string; -/** - * Reset the unique ID counter (for testing). - */ -export declare function resetUniqueIdCounter(): void; -/** - * Conditionally join class names. - * - * @param classes - Class names (falsy values are filtered) - * @returns Space-separated class string - * - * @example - * ```handlebars - *
- * ``` - */ -export declare function classNames(...classes: unknown[]): string; -/** - * Collection of all built-in helpers. - */ -export declare const builtinHelpers: Record; -//# sourceMappingURL=helpers.d.ts.map diff --git a/libs/uipack/src/handlebars/helpers.d.ts.map b/libs/uipack/src/handlebars/helpers.d.ts.map deleted file mode 100644 index 4b4f21a0..00000000 --- a/libs/uipack/src/handlebars/helpers.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["helpers.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/uipack/src/handlebars/index.d.ts b/libs/uipack/src/handlebars/index.d.ts deleted file mode 100644 index 6281a75c..00000000 --- a/libs/uipack/src/handlebars/index.d.ts +++ /dev/null @@ -1,239 +0,0 @@ -/** - * Handlebars Renderer Module - * - * Provides Handlebars template rendering for HTML templates. - * Enhances plain HTML with {{variable}} syntax support. - * - * @example - * ```typescript - * import { HandlebarsRenderer, createHandlebarsRenderer } from '@frontmcp/ui/handlebars'; - * - * const renderer = createHandlebarsRenderer(); - * - * const template = ` - *
- *

{{escapeHtml output.title}}

- *

Created: {{formatDate output.createdAt}}

- * {{#if output.items.length}} - *
    - * {{#each output.items}} - *
  • {{this.name}} - {{formatCurrency this.price}}
    • - * {{/each}} - *
- * {{/if}} - *
- * `; - * - * const html = renderer.render(template, { - * input: { query: 'test' }, - * output: { - * title: 'Results', - * createdAt: new Date(), - * items: [{ name: 'Item 1', price: 9.99 }] - * } - * }); - * ``` - * - * @packageDocumentation - */ -import type { TemplateHelpers } from '../types'; -import { type HelperFunction } from './helpers'; -/** - * Check if Handlebars is available. - */ -export declare function isHandlebarsAvailable(): Promise; -/** - * Options for the Handlebars renderer. - */ -export interface HandlebarsRendererOptions { - /** - * Additional custom helpers to register. - */ - helpers?: Record; - /** - * Partial templates to register. - */ - partials?: Record; - /** - * Strict mode - error on missing variables. - * @default false - */ - strict?: boolean; - /** - * Whether to auto-escape output. - * @default true - */ - autoEscape?: boolean; -} -/** - * Render context for templates. - */ -export interface RenderContext { - /** - * Tool input arguments. - */ - input: Record; - /** - * Tool output/result. - */ - output: unknown; - /** - * Structured content (if schema provided). - */ - structuredContent?: unknown; - /** - * Template helper functions. - */ - helpers?: TemplateHelpers; -} -/** - * Handlebars template renderer. - * - * Provides safe, cacheable Handlebars rendering with built-in helpers - * for formatting, escaping, and logic. - * - * @example - * ```typescript - * const renderer = new HandlebarsRenderer(); - * - * // Simple render - * const html = await renderer.render('
{{output.name}}
', { output: { name: 'Test' } }); - * - * // With custom helpers - * renderer.registerHelper('shout', (str) => String(str).toUpperCase() + '!'); - * const html2 = await renderer.render('
{{shout output.name}}
', { output: { name: 'hello' } }); - * ``` - */ -export declare class HandlebarsRenderer { - private readonly options; - private compiledTemplates; - private initialized; - private hbs; - constructor(options?: HandlebarsRendererOptions); - /** - * Initialize the renderer with Handlebars. - */ - private init; - /** - * Render a Handlebars template. - * - * @param template - Template string - * @param context - Render context with input/output - * @returns Rendered HTML string - */ - render(template: string, context: RenderContext): Promise; - /** - * Render a template synchronously. - * - * Note: Requires Handlebars to be pre-loaded. Use `render()` for async loading. - * - * @param template - Template string - * @param context - Render context - * @returns Rendered HTML string - */ - renderSync(template: string, context: RenderContext): string; - /** - * Initialize synchronously (for environments where Handlebars is already loaded). - */ - initSync(handlebars: typeof import('handlebars')): void; - /** - * Register a custom helper. - * - * @param name - Helper name - * @param fn - Helper function - */ - registerHelper(name: string, fn: HelperFunction): void; - /** - * Register a partial template. - * - * @param name - Partial name - * @param template - Partial template string - */ - registerPartial(name: string, template: string): void; - /** - * Clear compiled template cache. - */ - clearCache(): void; - /** - * Check if a template string contains Handlebars syntax. - * - * @param template - Template string to check - * @returns true if contains {{...}} syntax - */ - static containsHandlebars(template: string): boolean; - /** - * Check if the renderer is initialized. - */ - get isInitialized(): boolean; -} -/** - * Create a new Handlebars renderer. - * - * @param options - Renderer options - * @returns New HandlebarsRenderer instance - */ -export declare function createHandlebarsRenderer(options?: HandlebarsRendererOptions): HandlebarsRenderer; -/** - * Render a template with default settings. - * - * Convenience function for one-off rendering. - * - * @param template - Template string - * @param context - Render context - * @returns Rendered HTML - */ -export declare function renderTemplate(template: string, context: RenderContext): Promise; -/** - * Check if a template contains Handlebars syntax. - * - * @param template - Template string - * @returns true if contains {{...}} - */ -export declare function containsHandlebars(template: string): boolean; -export { - builtinHelpers, - escapeHtml, - formatDate, - formatCurrency, - formatNumber, - json, - jsonEmbed, - eq, - ne, - gt, - gte, - lt, - lte, - and, - or, - not, - first, - last, - length, - includes, - join, - uppercase, - lowercase, - capitalize, - truncate, - defaultValue, - uniqueId, - classNames, - resetUniqueIdCounter, - type HelperFunction, -} from './helpers'; -export { - extractExpressions, - extractVariablePaths, - extractOutputPaths, - extractInputPaths, - extractStructuredContentPaths, - extractAll, - hasVariablePaths, - getExpressionAt, - normalizePath, - type ExtractedExpression, - type ExtractionResult, - type ExpressionType, -} from './expression-extractor'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/handlebars/index.d.ts.map b/libs/uipack/src/handlebars/index.d.ts.map deleted file mode 100644 index a8572bd6..00000000 --- a/libs/uipack/src/handlebars/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/uipack/src/handlebars/index.ts b/libs/uipack/src/handlebars/index.ts index 2d9380bd..ff94fae8 100644 --- a/libs/uipack/src/handlebars/index.ts +++ b/libs/uipack/src/handlebars/index.ts @@ -37,7 +37,7 @@ * @packageDocumentation */ -import type { TemplateContext, TemplateHelpers } from '../types'; +import type { TemplateHelpers } from '../types'; import { builtinHelpers, type HelperFunction } from './helpers'; /** diff --git a/libs/uipack/src/renderers/cache.d.ts b/libs/uipack/src/renderers/cache.d.ts deleted file mode 100644 index 1238e58c..00000000 --- a/libs/uipack/src/renderers/cache.d.ts +++ /dev/null @@ -1,145 +0,0 @@ -/** - * LRU Cache for Renderer Transpilation Results - * - * Provides fast, memory-bounded caching for transpiled templates. - * Uses content-addressable keys (hash of source) for deduplication. - */ -import type { TranspileResult } from './types'; -/** - * Options for the transpile cache. - */ -export interface TranspileCacheOptions { - /** Maximum number of entries (default: 500) */ - maxSize?: number; - /** TTL in milliseconds, 0 = infinite (default: 0 for transpile cache) */ - ttl?: number; -} -/** - * LRU Cache for transpiled template results. - * - * Features: - * - Content-addressable keys via hash - * - LRU eviction when max size reached - * - Optional TTL for time-based expiration - * - Access statistics - * - * @example - * ```typescript - * const cache = new TranspileCache({ maxSize: 500 }); - * - * // Store a transpiled result - * const hash = cache.set(sourceCode, transpileResult); - * - * // Retrieve it later - * const result = cache.get(sourceCode); - * if (result) { - * console.log('Cache hit!', result.code); - * } - * ``` - */ -export declare class TranspileCache { - private cache; - private readonly maxSize; - private readonly ttl; - /** Cache statistics */ - private stats; - constructor(options?: TranspileCacheOptions); - /** - * Get a cached transpile result by source content. - * - * @param source - Source code to look up - * @returns Cached result or undefined if not found/expired - */ - get(source: string): TranspileResult | undefined; - /** - * Get a cached transpile result by hash key. - * - * @param key - Hash key - * @returns Cached result or undefined if not found/expired - */ - getByKey(key: string): TranspileResult | undefined; - /** - * Store a transpile result. - * - * @param source - Source code (used to generate key) - * @param value - Transpile result to cache - * @returns The hash key used for storage - */ - set(source: string, value: TranspileResult): string; - /** - * Store a transpile result by hash key. - * - * @param key - Hash key - * @param value - Transpile result to cache - */ - setByKey(key: string, value: TranspileResult): void; - /** - * Check if a source is cached. - * - * @param source - Source code to check - * @returns True if cached and not expired - */ - has(source: string): boolean; - /** - * Check if a key is cached. - * - * @param key - Hash key to check - * @returns True if cached and not expired - */ - hasByKey(key: string): boolean; - /** - * Delete a cached entry by source. - * - * @param source - Source code to delete - * @returns True if entry was deleted - */ - delete(source: string): boolean; - /** - * Clear all cached entries. - */ - clear(): void; - /** - * Get current cache size. - */ - get size(): number; - /** - * Get cache statistics. - */ - getStats(): { - hits: number; - misses: number; - evictions: number; - size: number; - hitRate: number; - }; -} -/** - * Global transpile cache instance. - * Shared across all renderers for deduplication. - */ -export declare const transpileCache: TranspileCache; -/** - * Render cache for full HTML output. - * Uses shorter TTL since outputs depend on input/output data. - */ -export declare const renderCache: TranspileCache; -/** - * Simple LRU cache for storing any type of values. - * Used for caching compiled components (React/MDX). - */ -export declare class ComponentCache { - private cache; - private readonly maxSize; - constructor(maxSize?: number); - get(key: string): T | undefined; - set(key: string, value: T): void; - has(key: string): boolean; - delete(key: string): boolean; - clear(): void; - get size(): number; -} -/** - * Global component cache for storing compiled React/MDX components. - */ -export declare const componentCache: ComponentCache; -//# sourceMappingURL=cache.d.ts.map diff --git a/libs/uipack/src/renderers/cache.d.ts.map b/libs/uipack/src/renderers/cache.d.ts.map deleted file mode 100644 index 865eab0e..00000000 --- a/libs/uipack/src/renderers/cache.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["cache.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAc/C;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,cAAc;IACzB,OAAO,CAAC,KAAK,CAAkD;IAC/D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAS;IAE7B,uBAAuB;IACvB,OAAO,CAAC,KAAK,CAIX;gBAEU,OAAO,GAAE,qBAA0B;IAK/C;;;;;OAKG;IACH,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAKhD;;;;;OAKG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAwBlD;;;;;;OAMG;IACH,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,GAAG,MAAM;IAMnD;;;;;OAKG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,GAAG,IAAI;IAkBnD;;;;;OAKG;IACH,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAK5B;;;;;OAKG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAa9B;;;;;OAKG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAK/B;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,QAAQ,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE;CAQ/F;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,gBAAuC,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,WAAW,gBAGtB,CAAC;AAEH;;;GAGG;AACH,qBAAa,cAAc,CAAC,CAAC,GAAG,OAAO;IACrC,OAAO,CAAC,KAAK,CAAsD;IACnE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;gBAErB,OAAO,SAAM;IAIzB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;IAU/B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI;IAYhC,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAIzB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI5B,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI,MAAM,CAEjB;CACF;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,yBAAuB,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/renderers/html.renderer.d.ts b/libs/uipack/src/renderers/html.renderer.d.ts deleted file mode 100644 index ddc76340..00000000 --- a/libs/uipack/src/renderers/html.renderer.d.ts +++ /dev/null @@ -1,127 +0,0 @@ -/** - * HTML Renderer - * - * Handles plain HTML templates: - * - Static HTML strings - * - Template builder functions: (ctx) => string - * - Handlebars-enhanced templates: HTML with {{variable}} syntax - * - * This is the default fallback renderer with the lowest priority. - */ -import type { TemplateContext } from '../runtime/types'; -import type { PlatformCapabilities } from '../theme'; -import type { UIRenderer, TranspileResult, TranspileOptions, RenderOptions, RuntimeScripts } from './types'; -/** - * Template builder function type. - */ -type TemplateBuilderFn = (ctx: TemplateContext) => string; -/** - * Types this renderer can handle. - */ -type HtmlTemplate = string | TemplateBuilderFn; -/** - * Check if a template contains Handlebars syntax. - * Non-async version for canHandle check. - */ -declare function containsHandlebars(template: string): boolean; -/** - * HTML Renderer Implementation. - * - * Handles: - * - Static HTML strings (passed through directly) - * - Template builder functions that return HTML strings - * - Handlebars-enhanced templates (detected by {{...}} syntax) - * - * When Handlebars syntax is detected, the template is processed - * with the HandlebarsRenderer for variable interpolation, conditionals, - * and loops. - * - * @example Static HTML - * ```typescript - * const template = '
Hello World
'; - * await htmlRenderer.render(template, context); - * ``` - * - * @example Template function - * ```typescript - * const template = (ctx) => `
${ctx.helpers.escapeHtml(ctx.output.name)}
`; - * await htmlRenderer.render(template, context); - * ``` - * - * @example Handlebars template - * ```typescript - * const template = ` - *
- *

{{escapeHtml output.title}}

- * {{#if output.items}} - *
    - * {{#each output.items}} - *
  • {{this.name}}
    • - * {{/each}} - *
- * {{/if}} - *
- * `; - * await htmlRenderer.render(template, context); - * ``` - */ -export declare class HtmlRenderer implements UIRenderer { - readonly type: 'html'; - readonly priority = 0; - /** - * Check if this renderer can handle the given template. - * - * Accepts: - * - Any string (assumed to be HTML, with or without Handlebars) - * - Functions that are template builders (not React components) - */ - canHandle(template: unknown): template is HtmlTemplate; - /** - * Check if a template uses Handlebars syntax. - * - * @param template - Template string to check - * @returns true if template contains {{...}} syntax - */ - usesHandlebars(template: string): boolean; - /** - * Transpile the template. - * - * For HTML templates, no transpilation is needed. - * This method returns a dummy result for consistency. - */ - transpile(template: HtmlTemplate, _options?: TranspileOptions): Promise; - /** - * Render the template to HTML string. - * - * For static strings without Handlebars, returns the string directly. - * For strings with Handlebars syntax, processes with HandlebarsRenderer. - * For functions, calls the function with the context. - */ - render( - template: HtmlTemplate, - context: TemplateContext, - _options?: RenderOptions, - ): Promise; - /** - * Render Handlebars template with context. - */ - private renderHandlebars; - /** - * Get runtime scripts for client-side functionality. - * - * HTML templates don't need additional runtime scripts. - */ - getRuntimeScripts(_platform: PlatformCapabilities): RuntimeScripts; -} -/** - * Singleton instance of the HTML renderer. - */ -export declare const htmlRenderer: HtmlRenderer; -/** - * Check if a template string contains Handlebars syntax. - * - * @param template - Template string - * @returns true if contains {{...}} - */ -export { containsHandlebars }; -//# sourceMappingURL=html.renderer.d.ts.map diff --git a/libs/uipack/src/renderers/html.renderer.d.ts.map b/libs/uipack/src/renderers/html.renderer.d.ts.map deleted file mode 100644 index cdd009a5..00000000 --- a/libs/uipack/src/renderers/html.renderer.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"html.renderer.d.ts","sourceRoot":"","sources":["html.renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI5G;;GAEG;AACH,KAAK,iBAAiB,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC;AAE5E;;GAEG;AACH,KAAK,YAAY,CAAC,EAAE,GAAG,OAAO,EAAE,GAAG,GAAG,OAAO,IAAI,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;AA0CrF;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAGrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBAAa,YAAa,YAAW,UAAU,CAAC,YAAY,CAAC;IAC3D,QAAQ,CAAC,IAAI,EAAG,MAAM,CAAU;IAChC,QAAQ,CAAC,QAAQ,KAAK;IAEtB;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,IAAI,YAAY;IActD;;;;;OAKG;IACH,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAIzC;;;;;OAKG;IACG,SAAS,CAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC;IAW9F;;;;;;OAMG;IACG,MAAM,CAAC,EAAE,EAAE,GAAG,EAClB,QAAQ,EAAE,YAAY,CAAC,EAAE,EAAE,GAAG,CAAC,EAC/B,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,QAAQ,CAAC,EAAE,aAAa,GACvB,OAAO,CAAC,MAAM,CAAC;IAwBlB;;OAEG;YACW,gBAAgB;IAmB9B;;;;OAIG;IACH,iBAAiB,CAAC,SAAS,EAAE,oBAAoB,GAAG,cAAc;CAMnE;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,cAAqB,CAAC;AAE/C;;;;;GAKG;AACH,OAAO,EAAE,kBAAkB,EAAE,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/renderers/index.d.ts b/libs/uipack/src/renderers/index.d.ts deleted file mode 100644 index 0ceedf4a..00000000 --- a/libs/uipack/src/renderers/index.d.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * Renderer Module - * - * Multi-framework rendering system for Tool UI templates. - * Supports HTML, React, and MDX templates with auto-detection. - * - * @module @frontmcp/uipack/renderers - * - * @example Basic usage with auto-detection - * ```typescript - * import { rendererRegistry } from '@frontmcp/uipack/renderers'; - * - * // HTML template - * const htmlTemplate = (ctx) => `
${ctx.output.name}
`; - * const result = await rendererRegistry.render(htmlTemplate, context); - * ``` - * - * @example Register React renderer - * ```typescript - * import { rendererRegistry } from '@frontmcp/uipack/renderers'; - * import { reactRenderer } from '@frontmcp/ui'; - * - * rendererRegistry.register(reactRenderer); - * - * // Now React components are auto-detected - * const MyComponent = ({ output }) =>
{output.name}
; - * const result = await rendererRegistry.render(MyComponent, context); - * ``` - */ -export type { - RendererType, - UIRenderer, - ToolUIProps, - HydratedToolUIProps, - TranspileResult, - TranspileOptions, - RenderOptions, - RuntimeScripts, - RenderResult, - RendererRegistryOptions, - DetectionResult, - ReactComponentType, - WrapperContext, - ExtendedToolUIConfig, -} from './types'; -export { TranspileCache, transpileCache, renderCache, type TranspileCacheOptions } from './cache'; -export { RendererRegistry, rendererRegistry } from './registry'; -export { HtmlRenderer, htmlRenderer } from './html.renderer'; -export { MdxRenderer, mdxRenderer, buildMdxHydrationScript } from './mdx.renderer'; -export { - isReactComponent, - isTemplateBuilderFunction, - containsJsx, - containsMdxSyntax, - isPlainHtml, - detectTemplateType, - hashString, - hashCombined, - isHash, - transpileJsx, - isSwcAvailable, - executeTranspiledCode, - transpileAndExecute, -} from './utils'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/renderers/index.d.ts.map b/libs/uipack/src/renderers/index.d.ts.map deleted file mode 100644 index a6af60ca..00000000 --- a/libs/uipack/src/renderers/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAKH,YAAY,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGlG,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGhE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG7D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAKnF,OAAO,EACL,gBAAgB,EAChB,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,cAAc,EACd,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,SAAS,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/renderers/registry.d.ts b/libs/uipack/src/renderers/registry.d.ts deleted file mode 100644 index 9228553b..00000000 --- a/libs/uipack/src/renderers/registry.d.ts +++ /dev/null @@ -1,145 +0,0 @@ -/** - * Renderer Registry - * - * Global registry for template renderers with auto-detection. - * Manages registration, detection, and rendering of templates. - */ -import type { TemplateContext } from '../runtime/types'; -import type { - UIRenderer, - RendererType, - RendererRegistryOptions, - DetectionResult, - RenderResult, - RenderOptions, -} from './types'; -/** - * Renderer Registry. - * - * Manages a collection of renderers and provides: - * - Registration of custom renderers - * - Auto-detection of template types - * - Unified rendering interface - * - * @example - * ```typescript - * // Register a custom renderer - * registry.register(myCustomRenderer); - * - * // Auto-detect and render - * const result = await registry.render(template, context); - * ``` - */ -export declare class RendererRegistry { - private renderers; - private sortedRenderers; - private defaultRenderer; - private debug; - constructor(options?: RendererRegistryOptions); - /** - * Register a renderer. - * - * Renderers are sorted by priority (highest first) for detection. - * - * @param renderer - Renderer to register - */ - register(renderer: UIRenderer): void; - /** - * Unregister a renderer. - * - * @param type - Type of renderer to remove - * @returns True if renderer was removed - */ - unregister(type: RendererType): boolean; - /** - * Get a renderer by type. - * - * @param type - Renderer type - * @returns Renderer or undefined if not found - */ - get(type: RendererType): UIRenderer | undefined; - /** - * Check if a renderer type is registered. - * - * @param type - Renderer type - * @returns True if registered - */ - has(type: RendererType): boolean; - /** - * Get all registered renderer types. - * - * @returns Array of renderer types - */ - getTypes(): RendererType[]; - /** - * Auto-detect the renderer for a template. - * - * Checks renderers in priority order (highest first). - * Returns HTML renderer as fallback. - * - * @param template - Template to detect - * @returns Detection result with renderer and confidence - */ - detect(template: unknown): DetectionResult; - /** - * Render a template with auto-detection. - * - * @param template - Template to render (React, MDX, or HTML) - * @param context - Template context with input/output - * @param options - Render options - * @returns Rendered result with HTML and metadata - */ - render(template: unknown, context: TemplateContext, options?: RenderOptions): Promise; - /** - * Render with a specific renderer type. - * - * @param type - Renderer type to use - * @param template - Template to render - * @param context - Template context - * @param options - Render options - * @returns Rendered result - */ - renderWith( - type: RendererType, - template: unknown, - context: TemplateContext, - options?: RenderOptions, - ): Promise; - /** - * Update the sorted renderer list by priority. - */ - private updateSortedList; - /** - * Set the default renderer type. - * - * @param type - Renderer type to use as default - */ - setDefault(type: RendererType): void; - /** - * Get registry statistics. - */ - getStats(): { - registeredRenderers: RendererType[]; - defaultRenderer: RendererType; - priorityOrder: Array<{ - type: RendererType; - priority: number; - }>; - }; -} -/** - * Global renderer registry instance. - * - * Pre-configured with the HTML renderer. - * React and MDX renderers can be added: - * - * ```typescript - * import { rendererRegistry, mdxRenderer } from '@frontmcp/uipack/renderers'; - * import { reactRenderer } from '@frontmcp/ui'; - * - * rendererRegistry.register(reactRenderer); - * rendererRegistry.register(mdxRenderer); - * ``` - */ -export declare const rendererRegistry: RendererRegistry; -//# sourceMappingURL=registry.d.ts.map diff --git a/libs/uipack/src/renderers/registry.d.ts.map b/libs/uipack/src/renderers/registry.d.ts.map deleted file mode 100644 index f997b0dc..00000000 --- a/libs/uipack/src/renderers/registry.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD,OAAO,KAAK,EACV,UAAU,EACV,YAAY,EACZ,uBAAuB,EACvB,eAAe,EACf,YAAY,EACZ,aAAa,EACd,MAAM,SAAS,CAAC;AAGjB;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,SAAS,CAAuC;IACxD,OAAO,CAAC,eAAe,CAAoB;IAC3C,OAAO,CAAC,eAAe,CAAwB;IAC/C,OAAO,CAAC,KAAK,CAAU;gBAEX,OAAO,GAAE,uBAA4B;IAOjD;;;;;;OAMG;IACH,QAAQ,CAAC,QAAQ,EAAE,UAAU,GAAG,IAAI;IASpC;;;;;OAKG;IACH,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO;IAQvC;;;;;OAKG;IACH,GAAG,CAAC,IAAI,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS;IAI/C;;;;;OAKG;IACH,GAAG,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO;IAIhC;;;;OAIG;IACH,QAAQ,IAAI,YAAY,EAAE;IAI1B;;;;;;;;OAQG;IACH,MAAM,CAAC,QAAQ,EAAE,OAAO,GAAG,eAAe;IA+B1C;;;;;;;OAOG;IACG,MAAM,CAAC,EAAE,EAAE,GAAG,EAClB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,YAAY,CAAC;IA4BxB;;;;;;;;OAQG;IACG,UAAU,CAAC,EAAE,EAAE,GAAG,EACtB,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,EACjC,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,YAAY,CAAC;IAyBxB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAIxB;;;;OAIG;IACH,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAOpC;;OAEG;IACH,QAAQ,IAAI;QACV,mBAAmB,EAAE,YAAY,EAAE,CAAC;QACpC,eAAe,EAAE,YAAY,CAAC;QAC9B,aAAa,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,YAAY,CAAC;YAAC,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAChE;CAUF;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,kBAAyB,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/renderers/registry.test.ts b/libs/uipack/src/renderers/registry.test.ts index 7fedcf1f..85428411 100644 --- a/libs/uipack/src/renderers/registry.test.ts +++ b/libs/uipack/src/renderers/registry.test.ts @@ -234,7 +234,8 @@ describe('RendererRegistry', () => { }); it('should render template builder functions', async () => { - const template = (ctx: TemplateContext<{}, { name: string }>) => `
${ctx.output.name}
`; + const template = (ctx: TemplateContext, { name: string }>) => + `
${ctx.output.name}
`; const result = await registry.render(template, createContext({}, { name: 'Test' })); expect(result.html).toBe('
Test
'); }); diff --git a/libs/uipack/src/renderers/registry.ts b/libs/uipack/src/renderers/registry.ts index df696bcb..8132678d 100644 --- a/libs/uipack/src/renderers/registry.ts +++ b/libs/uipack/src/renderers/registry.ts @@ -6,7 +6,6 @@ */ import type { TemplateContext } from '../runtime/types'; -import type { PlatformCapabilities } from '../theme'; import { OPENAI_PLATFORM } from '../theme'; import type { UIRenderer, diff --git a/libs/uipack/src/renderers/types.d.ts b/libs/uipack/src/renderers/types.d.ts deleted file mode 100644 index 10df784d..00000000 --- a/libs/uipack/src/renderers/types.d.ts +++ /dev/null @@ -1,345 +0,0 @@ -/** - * Renderer System Types - * - * Core interfaces for the multi-framework rendering system. - * Supports HTML, React, and MDX templates with auto-detection. - */ -import type { TemplateContext, TemplateHelpers, TemplateBuilderFn } from '../runtime/types'; -import type { PlatformCapabilities } from '../theme'; -/** - * Supported renderer types for template processing. - * - 'html': Plain HTML string or template function - * - 'react': React functional component - * - 'mdx': MDX content string - */ -export type RendererType = 'html' | 'react' | 'mdx'; -/** - * Props passed to React components used as templates. - * - * For SSR (server-side rendering), `output` is always available. - * For client-side hydration with the bridge, use `HydratedToolUIProps`. - */ -export interface ToolUIProps { - /** Tool input arguments */ - input: In; - /** Tool output result */ - output: Out; - /** Structured content parsed from output */ - structuredContent?: unknown; - /** Helper functions for rendering */ - helpers: TemplateHelpers; -} -/** - * Props for client-side hydrated components using the Platform Bridge. - * - * These props include loading/error state for reactive rendering. - * Use with `useSyncExternalStore` from React 18+: - * - * @example - * ```tsx - * import { useSyncExternalStore } from 'react'; - * - * function useToolBridge(): HydratedToolUIProps { - * const state = useSyncExternalStore( - * window.__frontmcp.bridge.subscribe, - * window.__frontmcp.bridge.getSnapshot, - * window.__frontmcp.bridge.getServerSnapshot - * ); - * return { - * data: state.data as T, - * loading: state.loading, - * error: state.error, - * }; - * } - * - * function MyWidget() { - * const { data, loading, error } = useToolBridge(); - * - * if (loading) return ; - * if (error) return ; - * if (!data) return ; - * - * return ; - * } - * ``` - */ -export interface HydratedToolUIProps { - /** Tool output data (null when loading or no data) */ - data: Out | null; - /** Whether the bridge is waiting for data */ - loading: boolean; - /** Error message if data loading failed */ - error: string | null; -} -/** - * Result of transpiling a template. - */ -export interface TranspileResult { - /** Transpiled JavaScript code */ - code: string; - /** Content hash for caching */ - hash: string; - /** Whether result was retrieved from cache */ - cached: boolean; - /** Source map for debugging (optional) */ - sourceMap?: string; -} -/** - * Options for transpilation. - */ -export interface TranspileOptions { - /** Enable source maps */ - sourceMaps?: boolean; - /** Development mode (more detailed errors) */ - development?: boolean; -} -/** - * Options for rendering a template. - */ -export interface RenderOptions { - /** Target platform capabilities */ - platform?: PlatformCapabilities; - /** Enable client-side hydration */ - hydrate?: boolean; - /** Custom MDX components */ - mdxComponents?: Record; -} -/** - * Runtime scripts to inject for client-side functionality. - */ -export interface RuntimeScripts { - /** Scripts to include in */ - headScripts: string; - /** Inline script content (for blocked-network platforms) */ - inlineScripts?: string; - /** Whether scripts are inline or external */ - isInline: boolean; -} -/** - * Result of rendering a template. - */ -export interface RenderResult { - /** Rendered HTML content (body only) */ - html: string; - /** Renderer type that was used */ - rendererType: RendererType; - /** Whether transpilation was cached */ - transpileCached: boolean; - /** Runtime scripts needed for this template */ - runtimeScripts: RuntimeScripts; -} -/** - * Abstract renderer interface for processing templates. - * - * Each renderer handles a specific template type (HTML, React, MDX) - * and provides: - * - Template type detection - * - Transpilation (if needed) - * - HTML rendering - * - Client runtime script generation - */ -export interface UIRenderer { - /** - * Unique renderer type identifier. - */ - readonly type: RendererType; - /** - * Priority for auto-detection. - * Higher values are checked first. - * - React: 20 - * - MDX: 10 - * - HTML: 0 (fallback) - */ - readonly priority: number; - /** - * Check if this renderer can handle the given template. - * - * @param template - The template to check - * @returns True if this renderer can process the template - */ - canHandle(template: unknown): template is T; - /** - * Transpile the template to executable JavaScript (if needed). - * - * For React components from imports, no transpilation is needed. - * For JSX strings, SWC transpilation is performed. - * Results are cached by content hash. - * - * @param template - Template to transpile - * @param options - Transpilation options - * @returns Transpiled result with caching metadata - */ - transpile(template: T, options?: TranspileOptions): Promise; - /** - * Render the template to HTML string. - * - * @param template - Template to render - * @param context - Template context with input/output/helpers - * @param options - Render options (platform, hydration, etc.) - * @returns Rendered HTML string - */ - render(template: T, context: TemplateContext, options?: RenderOptions): Promise; - /** - * Get runtime scripts needed for client-side functionality. - * - * @param platform - Target platform capabilities - * @returns Scripts to inject (CDN or inline based on platform) - */ - getRuntimeScripts(platform: PlatformCapabilities): RuntimeScripts; -} -/** - * Options for the renderer registry. - */ -export interface RendererRegistryOptions { - /** Maximum cache size for transpiled results */ - maxCacheSize?: number; - /** Enable debug logging */ - debug?: boolean; -} -/** - * Result of detecting a template's renderer type. - */ -export interface DetectionResult { - /** The detected renderer */ - renderer: UIRenderer; - /** Confidence level (0-1) */ - confidence: number; - /** Detection reason for debugging */ - reason: string; -} -/** - * React component type for Tool UI templates. - * - * This is a generic function type that accepts props and returns JSX. - * We use a loose type here to avoid requiring React types at compile time. - */ -export type ReactComponentType = (props: ToolUIProps) => any; -/** - * All possible template types. - * Auto-detected at runtime. - */ -export type ToolUITemplate = - | TemplateBuilderFn - | string - | ReactComponentType; -/** - * Context passed to custom wrapper functions. - */ -export interface WrapperContext { - /** Tool name */ - toolName: string; - /** Rendered content HTML */ - content: string; - /** Detected renderer type */ - rendererType: RendererType; - /** Target platform */ - platform: PlatformCapabilities; - /** Runtime scripts to inject */ - runtimeScripts: RuntimeScripts; -} -/** - * Extended Tool UI configuration with multi-framework support. - * - * The template type is auto-detected - no need to specify a renderer! - * - * @example React component - * ```typescript - * import { UserCard } from './components/user-card.tsx'; - * - * @Tool({ - * ui: { - * template: UserCard, // Auto-detected as React - * hydrate: true, // Enable client-side interactivity - * } - * }) - * ``` - * - * @example MDX template - * ```typescript - * @Tool({ - * ui: { - * template: ` - * # Welcome - * - * `, - * mdxComponents: { UserCard }, - * } - * }) - * ``` - * - * @example HTML template (unchanged) - * ```typescript - * @Tool({ - * ui: { - * template: (ctx) => `
${ctx.output.name}
`, - * } - * }) - * ``` - */ -export interface ExtendedToolUIConfig { - /** - * Template for rendering the UI. - * - * Can be: - * - React component: `({ input, output }) =>
...
` - * - MDX string: `# Title\n` - * - HTML function: `(ctx) => \`
...
\`` - * - Static HTML string - * - * Type is auto-detected at runtime. - */ - template: ToolUITemplate; - /** - * Enable client-side hydration for React components. - * When true, the React runtime is included and components - * become interactive in the browser. - * - * @default false - */ - hydrate?: boolean; - /** - * Custom wrapper function to override the default HTML document wrapper. - * Useful for completely custom document structures. - * - * @param content - Rendered template HTML - * @param ctx - Wrapper context with metadata - * @returns Complete HTML document string - */ - wrapper?: (content: string, ctx: WrapperContext) => string; - /** - * Custom MDX components available in MDX templates. - * These components can be used directly in MDX content. - * - * @example - * ```typescript - * mdxComponents: { - * UserCard: ({ name }) =>
{name}
, - * Badge: ({ type }) => ..., - * } - * ``` - */ - mdxComponents?: Record any>; - /** Content Security Policy for the sandboxed widget. */ - csp?: { - connectDomains?: string[]; - resourceDomains?: string[]; - }; - /** Whether the widget can invoke tools via the MCP bridge. */ - widgetAccessible?: boolean; - /** Preferred display mode for the widget. */ - displayMode?: 'inline' | 'fullscreen' | 'pip'; - /** Human-readable description shown to users about what the widget does. */ - widgetDescription?: string; - /** Status messages shown during tool invocation. */ - invocationStatus?: { - invoking?: string; - invoked?: string; - }; - /** How the widget HTML should be served to the client. */ - servingMode?: 'inline' | 'static' | 'hybrid' | 'direct-url' | 'custom-url'; - /** Custom URL for widget serving when `servingMode: 'custom-url'`. */ - customWidgetUrl?: string; - /** Path for direct URL serving when `servingMode: 'direct-url'`. */ - directPath?: string; -} -//# sourceMappingURL=types.d.ts.map diff --git a/libs/uipack/src/renderers/types.d.ts.map b/libs/uipack/src/renderers/types.d.ts.map deleted file mode 100644 index 02e749b2..00000000 --- a/libs/uipack/src/renderers/types.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/adapters/html.adapter.d.ts b/libs/uipack/src/runtime/adapters/html.adapter.d.ts deleted file mode 100644 index ec552034..00000000 --- a/libs/uipack/src/runtime/adapters/html.adapter.d.ts +++ /dev/null @@ -1,64 +0,0 @@ -/** - * HTML Renderer Adapter - * - * Client-side adapter for rendering HTML templates. - * Handles plain HTML and Handlebars-enhanced templates. - * - * @packageDocumentation - */ -import type { RendererAdapter, RenderContext, RenderOptions, RenderResult } from './types'; -import type { UIType } from '../../types/ui-runtime'; -/** - * HTML Renderer Adapter. - * - * Renders HTML templates to the DOM with support for: - * - Plain HTML strings - * - Handlebars-enhanced templates ({{...}} syntax) - * - Template builder functions - */ -export declare class HtmlRendererAdapter implements RendererAdapter { - readonly type: UIType; - private handlebarsRenderer; - /** - * Check if this adapter can handle the given content. - */ - canHandle(content: string | unknown): boolean; - /** - * Render HTML content to a string. - */ - render(content: string, context: RenderContext, _options?: RenderOptions): Promise; - /** - * Render HTML content directly to the DOM. - */ - renderToDOM( - content: string, - target: HTMLElement, - context: RenderContext, - _options?: RenderOptions, - ): Promise; - /** - * Update rendered content with new data. - */ - update(target: HTMLElement, context: RenderContext): Promise; - /** - * Clean up (no-op for HTML adapter). - */ - destroy(_target: HTMLElement): void; - /** - * Check if content contains Handlebars syntax. - */ - private containsHandlebars; - /** - * Render Handlebars template. - */ - private renderHandlebars; -} -/** - * Create a new HTML renderer adapter. - */ -export declare function createHtmlAdapter(): HtmlRendererAdapter; -/** - * Adapter loader for lazy loading. - */ -export declare function loadHtmlAdapter(): Promise; -//# sourceMappingURL=html.adapter.d.ts.map diff --git a/libs/uipack/src/runtime/adapters/html.adapter.d.ts.map b/libs/uipack/src/runtime/adapters/html.adapter.d.ts.map deleted file mode 100644 index 997fcdfd..00000000 --- a/libs/uipack/src/runtime/adapters/html.adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"html.adapter.d.ts","sourceRoot":"","sources":["html.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC3F,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;GAOG;AACH,qBAAa,mBAAoB,YAAW,eAAe;IACzD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAU;IAG/B,OAAO,CAAC,kBAAkB,CAGV;IAEhB;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO;IAK7C;;OAEG;IACG,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;IAUhG;;OAEG;IACG,WAAW,CACf,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,aAAa,EACtB,QAAQ,CAAC,EAAE,aAAa,GACvB,OAAO,CAAC,YAAY,CAAC;IAqBxB;;OAEG;IACG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAYhF;;OAEG;IACH,OAAO,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAInC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAK1B;;OAEG;YACW,gBAAgB;CA4B/B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,mBAAmB,CAEvD;AAED;;GAEG;AACH,wBAAsB,eAAe,IAAI,OAAO,CAAC,eAAe,CAAC,CAEhE"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/adapters/index.d.ts b/libs/uipack/src/runtime/adapters/index.d.ts deleted file mode 100644 index 19218d50..00000000 --- a/libs/uipack/src/runtime/adapters/index.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Renderer Adapters - * - * Client-side adapters for rendering different UI types. - * - * @packageDocumentation - */ -export type { - RendererAdapter, - RenderContext, - RenderOptions, - RenderResult, - AdapterLoader, - AdapterRegistryEntry, -} from './types'; -export { HtmlRendererAdapter, createHtmlAdapter, loadHtmlAdapter } from './html.adapter'; -export { MdxRendererAdapter, createMdxAdapter, loadMdxAdapter } from './mdx.adapter'; -import type { UIType } from '../../types/ui-runtime'; -import type { AdapterLoader, RendererAdapter } from './types'; -/** - * Registry of adapter loaders by UI type. - * Note: React adapter is in @frontmcp/ui package. - */ -export declare const adapterLoaders: Record; -/** - * Get an adapter loader for a UI type. - */ -export declare function getAdapterLoader(type: UIType): AdapterLoader | undefined; -/** - * Load an adapter for a UI type. - */ -export declare function loadAdapter(type: UIType): Promise; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/runtime/adapters/index.d.ts.map b/libs/uipack/src/runtime/adapters/index.d.ts.map deleted file mode 100644 index d97c7f84..00000000 --- a/libs/uipack/src/runtime/adapters/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,eAAe,EACf,aAAa,EACb,aAAa,EACb,YAAY,EACZ,aAAa,EACb,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGzF,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAKrF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,CAMpE,CAAC;AAEF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAExE;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,CAM/E"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/adapters/mdx.adapter.d.ts b/libs/uipack/src/runtime/adapters/mdx.adapter.d.ts deleted file mode 100644 index a895af99..00000000 --- a/libs/uipack/src/runtime/adapters/mdx.adapter.d.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** - * MDX Renderer Adapter - * - * Client-side adapter for rendering MDX (Markdown + JSX) content. - * Builds on top of the React adapter for component rendering. - * - * @packageDocumentation - */ -import type { RendererAdapter, RenderContext, RenderOptions, RenderResult } from './types'; -import type { UIType } from '../../types/ui-runtime'; -/** - * MDX Renderer Adapter. - * - * Renders MDX content to the DOM with support for: - * - Pre-compiled MDX (recommended) - * - Runtime MDX compilation (if mdx-js available) - * - Custom component injection - */ -export declare class MdxRendererAdapter implements RendererAdapter { - readonly type: UIType; - private mdxRuntime; - private loadPromise; - /** - * Check if this adapter can handle the given content. - */ - canHandle(content: string | unknown): boolean; - /** - * Render MDX content to a string. - */ - render(content: string, context: RenderContext, _options?: RenderOptions): Promise; - /** - * Render MDX content directly to the DOM. - */ - renderToDOM( - content: string, - target: HTMLElement, - context: RenderContext, - _options?: RenderOptions, - ): Promise; - /** - * Hydrate existing SSR content. - * MDX hydration follows React patterns. - */ - hydrate(target: HTMLElement, context: RenderContext, options?: RenderOptions): Promise; - /** - * Update rendered MDX content with new data. - */ - update(target: HTMLElement, context: RenderContext): Promise; - /** - * Clean up (no-op for MDX adapter). - */ - destroy(_target: HTMLElement): void; - /** - * Ensure MDX runtime is loaded. - */ - private ensureMdxLoaded; - /** - * Load MDX runtime. - */ - private loadMdx; - /** - * Compile MDX content. - */ - private compileMdx; - /** - * Basic markdown rendering (fallback). - */ - private renderMarkdown; -} -/** - * Create a new MDX renderer adapter. - */ -export declare function createMdxAdapter(): MdxRendererAdapter; -/** - * Adapter loader for lazy loading. - */ -export declare function loadMdxAdapter(): Promise; -//# sourceMappingURL=mdx.adapter.d.ts.map diff --git a/libs/uipack/src/runtime/adapters/mdx.adapter.d.ts.map b/libs/uipack/src/runtime/adapters/mdx.adapter.d.ts.map deleted file mode 100644 index b89536a4..00000000 --- a/libs/uipack/src/runtime/adapters/mdx.adapter.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"mdx.adapter.d.ts","sourceRoot":"","sources":["mdx.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC3F,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAYrD;;;;;;;GAOG;AACH,qBAAa,kBAAmB,YAAW,eAAe;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAS;IAG9B,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,WAAW,CAA8B;IAEjD;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO;IAoB7C;;OAEG;IACG,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;IAmBhG;;OAEG;IACG,WAAW,CACf,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,aAAa,EACtB,QAAQ,CAAC,EAAE,aAAa,GACvB,OAAO,CAAC,YAAY,CAAC;IAqBxB;;;OAGG;IACG,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAW1G;;OAEG;IACG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAShF;;OAEG;IACH,OAAO,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAInC;;OAEG;YACW,eAAe;IAa7B;;OAEG;YACW,OAAO;IAgBrB;;OAEG;YACW,UAAU;IAqBxB;;OAEG;IACH,OAAO,CAAC,cAAc;CAqEvB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,CAErD;AAED;;GAEG;AACH,wBAAsB,cAAc,IAAI,OAAO,CAAC,eAAe,CAAC,CAE/D"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/adapters/mdx.adapter.ts b/libs/uipack/src/runtime/adapters/mdx.adapter.ts index 305e9d93..f7068ae8 100644 --- a/libs/uipack/src/runtime/adapters/mdx.adapter.ts +++ b/libs/uipack/src/runtime/adapters/mdx.adapter.ts @@ -187,8 +187,8 @@ export class MdxRendererAdapter implements RendererAdapter { } try { - // Compile MDX to JS - const compiled = await this.mdxRuntime.compile(source, { + // Compile MDX to JS (result intentionally unused - we fall back to markdown rendering for now) + const _compiled = await this.mdxRuntime.compile(source, { outputFormat: 'function-body', development: false, }); diff --git a/libs/uipack/src/runtime/adapters/types.d.ts b/libs/uipack/src/runtime/adapters/types.d.ts deleted file mode 100644 index c7c72572..00000000 --- a/libs/uipack/src/runtime/adapters/types.d.ts +++ /dev/null @@ -1,100 +0,0 @@ -/** - * Renderer Adapter Types - * - * Defines the interface for renderer adapters that handle different - * UI types (HTML, React, MDX) at runtime. - * - * @packageDocumentation - */ -import type { UIType } from '../../types/ui-runtime'; -/** - * Context passed to renderer adapters. - */ -export interface RenderContext { - /** Tool input arguments */ - input: Record; - /** Tool output/result */ - output: unknown; - /** Structured content (if schema provided) */ - structuredContent?: unknown; - /** Tool name */ - toolName: string; -} -/** - * Options for rendering. - */ -export interface RenderOptions { - /** Target element to render into */ - target?: HTMLElement; - /** Whether to hydrate existing SSR content */ - hydrate?: boolean; - /** Manifest data from the page */ - manifest?: Record; -} -/** - * Result of a render operation. - */ -export interface RenderResult { - /** Whether rendering was successful */ - success: boolean; - /** Error message if failed */ - error?: string; - /** The rendered HTML (for SSR) */ - html?: string; -} -/** - * Renderer adapter interface. - * - * Each adapter handles a specific UI type and provides methods - * for rendering templates to the DOM. - */ -export interface RendererAdapter { - /** The UI type this adapter handles */ - readonly type: UIType; - /** - * Check if this adapter can handle the given content. - */ - canHandle(content: string | unknown): boolean; - /** - * Render content to an HTML string. - * Used for SSR and initial page generation. - */ - render(content: string, context: RenderContext, options?: RenderOptions): Promise; - /** - * Render content directly to the DOM. - * Used for client-side rendering. - */ - renderToDOM?( - content: string, - target: HTMLElement, - context: RenderContext, - options?: RenderOptions, - ): Promise; - /** - * Hydrate existing SSR content with interactivity. - * Used for React/MDX components that were server-rendered. - */ - hydrate?(target: HTMLElement, context: RenderContext, options?: RenderOptions): Promise; - /** - * Update the rendered content with new data. - * Used when tool output changes at runtime. - */ - update?(target: HTMLElement, context: RenderContext): Promise; - /** - * Clean up any resources (event listeners, etc.). - */ - destroy?(target: HTMLElement): void; -} -/** - * Lazy loader function for adapters. - */ -export type AdapterLoader = () => Promise; -/** - * Adapter registry entry. - */ -export interface AdapterRegistryEntry { - type: UIType; - loader: AdapterLoader; - instance?: RendererAdapter; -} -//# sourceMappingURL=types.d.ts.map diff --git a/libs/uipack/src/runtime/adapters/types.d.ts.map b/libs/uipack/src/runtime/adapters/types.d.ts.map deleted file mode 100644 index 5c1f0d09..00000000 --- a/libs/uipack/src/runtime/adapters/types.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,yBAAyB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAE9C;;;OAGG;IACH,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAE1F;;;OAGG;IACH,WAAW,CAAC,CACV,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,aAAa,GACtB,OAAO,CAAC,YAAY,CAAC,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAEtG;;;OAGG;IACH,MAAM,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAE5E;;OAEG;IACH,OAAO,CAAC,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,eAAe,CAAC,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/csp.d.ts b/libs/uipack/src/runtime/csp.d.ts deleted file mode 100644 index 1f7a89c8..00000000 --- a/libs/uipack/src/runtime/csp.d.ts +++ /dev/null @@ -1,69 +0,0 @@ -/** - * Content Security Policy Builder - * - * Generates CSP meta tags for sandboxed UI templates based on - * OpenAI Apps SDK and ext-apps (SEP-1865) specifications. - */ -import type { UIContentSecurityPolicy } from './types'; -/** - * Default CDN domains used by FrontMCP UI templates. - * These are required for Tailwind, Google Fonts, and other external resources. - */ -export declare const DEFAULT_CDN_DOMAINS: readonly [ - 'https://cdn.jsdelivr.net', - 'https://cdnjs.cloudflare.com', - 'https://fonts.googleapis.com', - 'https://fonts.gstatic.com', -]; -/** - * Default CSP when no custom policy is provided. - * Includes CDN domains required for standard FrontMCP templates. - */ -export declare const DEFAULT_CSP_DIRECTIVES: readonly [ - "default-src 'none'", - `script-src 'self' 'unsafe-inline' ${string}`, - `style-src 'self' 'unsafe-inline' ${string}`, - `img-src 'self' data: ${string}`, - `font-src 'self' data: ${string}`, - "connect-src 'none'", -]; -/** - * Restrictive CSP for sandboxed environments with no external resources. - * Use this when you want to block all external resources. - */ -export declare const RESTRICTIVE_CSP_DIRECTIVES: readonly [ - "default-src 'none'", - "script-src 'self' 'unsafe-inline'", - "style-src 'self' 'unsafe-inline'", - "img-src 'self' data:", - "font-src 'self' data:", - "connect-src 'none'", -]; -/** - * Build CSP directives from a UIContentSecurityPolicy configuration - */ -export declare function buildCSPDirectives(csp?: UIContentSecurityPolicy): string[]; -/** - * Build a CSP meta tag from directives - */ -export declare function buildCSPMetaTag(csp?: UIContentSecurityPolicy): string; -/** - * Build CSP for OpenAI Apps SDK format - * Returns the object format expected by _meta['openai/widgetCSP'] - */ -export declare function buildOpenAICSP(csp?: UIContentSecurityPolicy): - | { - connect_domains?: string[]; - resource_domains?: string[]; - } - | undefined; -/** - * Validate CSP domain format - * Domains should be valid URLs or wildcard patterns - */ -export declare function validateCSPDomain(domain: string): boolean; -/** - * Filter and warn about invalid CSP domains - */ -export declare function sanitizeCSPDomains(domains: string[] | undefined): string[]; -//# sourceMappingURL=csp.d.ts.map diff --git a/libs/uipack/src/runtime/csp.d.ts.map b/libs/uipack/src/runtime/csp.d.ts.map deleted file mode 100644 index baa1075e..00000000 --- a/libs/uipack/src/runtime/csp.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"csp.d.ts","sourceRoot":"","sources":["csp.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,oIAKtB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,sBAAsB,yNAOzB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,0BAA0B,iLAO7B,CAAC;AAEX;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,uBAAuB,GAAG,MAAM,EAAE,CAmC1E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAIrE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,GAAG,CAAC,EAAE,uBAAuB,GACxD;IACE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,GACD,SAAS,CAiBZ;AAcD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAezD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,GAAG,MAAM,EAAE,CAa1E"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/index.d.ts b/libs/uipack/src/runtime/index.d.ts deleted file mode 100644 index 4c8db526..00000000 --- a/libs/uipack/src/runtime/index.d.ts +++ /dev/null @@ -1,100 +0,0 @@ -/** - * MCP Bridge Runtime Module - * - * Provides the infrastructure for rendering tool UI templates - * that work across multiple host environments (OpenAI, Claude, ext-apps). - * - * @module @frontmcp/uipack/runtime - */ -export type { - ProviderType, - DisplayMode, - ThemeMode, - HostContext, - MCPBridge, - MCPBridgeExtended, - WrapToolUIOptions, - OpenAIRuntime, - OpenAIUserAgent, - SafeAreaInsets, - UIContentSecurityPolicy, - TemplateContext, - TemplateHelpers, - TemplateBuilderFn, - ToolUITemplate, - ToolUIConfig, - WidgetServingMode, -} from './types'; -export { MCP_BRIDGE_RUNTIME, getMCPBridgeScript, isMCPBridgeSupported } from './mcp-bridge'; -export { - FRONTMCP_BRIDGE_RUNTIME, - PLATFORM_BRIDGE_SCRIPTS, - generateCustomBridge, - type IIFEGeneratorOptions, -} from './mcp-bridge'; -export { - DEFAULT_CDN_DOMAINS, - DEFAULT_CSP_DIRECTIVES, - RESTRICTIVE_CSP_DIRECTIVES, - buildCSPDirectives, - buildCSPMetaTag, - buildOpenAICSP, - validateCSPDomain, - sanitizeCSPDomains, -} from './csp'; -export { - type WrapToolUIFullOptions, - type WrapToolUIUniversalOptions, - type WrapStaticWidgetOptions, - type WrapLeanWidgetShellOptions, - type WrapHybridWidgetShellOptions, - type WrapToolUIForClaudeOptions, - wrapToolUI, - wrapToolUIMinimal, - wrapToolUIUniversal, - wrapStaticWidgetUniversal, - wrapLeanWidgetShell, - wrapHybridWidgetShell, - wrapToolUIForClaude, - createTemplateHelpers, - buildOpenAIMeta, - getToolUIMimeType, -} from './wrapper'; -export { - type SanitizerFn, - type SanitizeOptions, - REDACTION_TOKENS, - PII_PATTERNS, - sanitizeInput, - createSanitizer, - detectPII, - isEmail, - isPhone, - isCreditCard, - isSSN, - isIPv4, - detectPIIType, - redactPIIFromText, -} from './sanitizer'; -export { - RendererRuntime, - createRendererRuntime, - bootstrapRendererRuntime, - generateBootstrapScript, - type RendererRuntimeConfig, -} from './renderer-runtime'; -export { - type RendererAdapter, - type RenderContext, - type RenderOptions, - type RenderResult, - type AdapterLoader, - HtmlRendererAdapter, - MdxRendererAdapter, - createHtmlAdapter, - createMdxAdapter, - loadAdapter, - getAdapterLoader, - adapterLoaders, -} from './adapters'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/runtime/index.d.ts.map b/libs/uipack/src/runtime/index.d.ts.map deleted file mode 100644 index 9de2cd9b..00000000 --- a/libs/uipack/src/runtime/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,cAAc,EAEd,uBAAuB,EACvB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAG5F,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,KAAK,oBAAoB,GAC1B,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,0BAA0B,EAC1B,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,4BAA4B,EACjC,KAAK,0BAA0B,EAC/B,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,WAAW,CAAC;AAGnB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,SAAS,EACT,OAAO,EACP,OAAO,EACP,YAAY,EACZ,KAAK,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,GAClB,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,cAAc,GACf,MAAM,YAAY,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/mcp-bridge.d.ts b/libs/uipack/src/runtime/mcp-bridge.d.ts deleted file mode 100644 index 0152528c..00000000 --- a/libs/uipack/src/runtime/mcp-bridge.d.ts +++ /dev/null @@ -1,102 +0,0 @@ -/** - * MCP Bridge Runtime - * - * Universal JavaScript runtime injected into UI templates that adapts - * to the host environment (OpenAI Apps SDK, ext-apps, Claude, etc.). - * - * This script is designed to be embedded directly into HTML templates - * via the MCP_BRIDGE_RUNTIME constant. - * - * Architecture: - * - On OpenAI: Proxy directly to native window.openai API - * - On Claude: Polyfill with limited functionality (network-blocked) - * - On ext-apps: JSON-RPC postMessage bridge (SEP-1865 compliant) - * - On Gemini: Gemini SDK integration - * - On Unknown: LocalStorage-based state, basic functionality - * - * @see https://developers.openai.com/apps-sdk/build/chatgpt-ui - * @see https://github.com/modelcontextprotocol/ext-apps (SEP-1865) - */ -/** - * The MCP Bridge runtime script. - * This is injected into UI templates to provide a unified API across providers. - * - * Uses the new FrontMcpBridge adapter system which supports: - * - OpenAI ChatGPT Apps SDK - * - ext-apps (SEP-1865 protocol) - * - Claude (Anthropic) - * - Gemini (Google) - * - Generic fallback - * - * The bridge exposes: - * - window.FrontMcpBridge - New unified bridge API - * - window.mcpBridge - Legacy compatibility bridge - * - window.openai - OpenAI polyfill for non-OpenAI platforms - * - * Provides full OpenAI window.openai API compatibility: - * - Properties: theme, userAgent, locale, maxHeight, displayMode, safeArea, - * toolInput, toolOutput, toolResponseMetadata, widgetState - * - Methods: callTool, requestDisplayMode, requestClose, openExternal, - * sendFollowUpMessage, setWidgetState - */ -export declare const MCP_BRIDGE_RUNTIME = - "\n\n"; -/** - * Get the MCP Bridge runtime script as a string (without script tags) - * Useful for inline embedding in specific scenarios. - */ -export declare function getMCPBridgeScript(): string; -/** - * Check if the current environment supports the MCP bridge - */ -export declare function isMCPBridgeSupported(): boolean; -/** - * The new FrontMcpBridge runtime script (universal - includes all adapters). - * This is the recommended bridge for new integrations. - * - * @example - * ```typescript - * import { FRONTMCP_BRIDGE_RUNTIME } from '@frontmcp/uipack/runtime'; - * const html = `${FRONTMCP_BRIDGE_RUNTIME}...`; - * ``` - */ -export declare const FRONTMCP_BRIDGE_RUNTIME: string; -/** - * Platform-specific bridge scripts. - * - * Use these for smaller bundle sizes when targeting a specific platform. - * - * @example - * ```typescript - * import { PLATFORM_BRIDGE_SCRIPTS } from '@frontmcp/uipack/runtime'; - * - * // For ChatGPT only - * const chatgptHtml = `${PLATFORM_BRIDGE_SCRIPTS.chatgpt}...`; - * - * // For Claude only - * const claudeHtml = `${PLATFORM_BRIDGE_SCRIPTS.claude}...`; - * ``` - */ -export declare const PLATFORM_BRIDGE_SCRIPTS: { - universal: string; - chatgpt: string; - claude: string; - gemini: string; -}; -/** - * Generate a custom bridge script with specific options. - * - * @example - * ```typescript - * import { generateCustomBridge } from '@frontmcp/uipack/runtime'; - * - * const script = generateCustomBridge({ - * adapters: ['openai', 'ext-apps'], - * debug: true, - * trustedOrigins: ['https://my-host.com'] - * }); - * ``` - */ -export { generateBridgeIIFE as generateCustomBridge } from '../bridge-runtime'; -export type { IIFEGeneratorOptions } from '../bridge-runtime'; -//# sourceMappingURL=mcp-bridge.d.ts.map diff --git a/libs/uipack/src/runtime/mcp-bridge.d.ts.map b/libs/uipack/src/runtime/mcp-bridge.d.ts.map deleted file mode 100644 index 792f1210..00000000 --- a/libs/uipack/src/runtime/mcp-bridge.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"mcp-bridge.d.ts","sourceRoot":"","sources":["mcp-bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAKH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB,koeA8c9B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAW9C;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,QAA+B,CAAC;AAEpE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,uBAAuB;;;;;CAAqB,CAAC;AAE1D;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,kBAAkB,IAAI,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAG9F,YAAY,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/mcp-bridge.ts b/libs/uipack/src/runtime/mcp-bridge.ts index dc3e4158..0c41e0b9 100644 --- a/libs/uipack/src/runtime/mcp-bridge.ts +++ b/libs/uipack/src/runtime/mcp-bridge.ts @@ -18,8 +18,7 @@ * @see https://github.com/modelcontextprotocol/ext-apps (SEP-1865) */ -import type { ProviderType, ThemeMode, DisplayMode, HostContext } from './types'; -import { BRIDGE_SCRIPT_TAGS, generateBridgeIIFE } from '../bridge-runtime'; +import { BRIDGE_SCRIPT_TAGS } from '../bridge-runtime'; /** * The MCP Bridge runtime script. diff --git a/libs/uipack/src/runtime/renderer-runtime.d.ts b/libs/uipack/src/runtime/renderer-runtime.d.ts deleted file mode 100644 index 22ba00f3..00000000 --- a/libs/uipack/src/runtime/renderer-runtime.d.ts +++ /dev/null @@ -1,137 +0,0 @@ -/** - * Renderer Runtime - * - * Client-side runtime that manages renderer adapters and handles - * communication with the FrontMCP Bridge. - * - * @packageDocumentation - */ -import type { UIType, WidgetManifest } from '../types/ui-runtime'; -import type { RenderContext, RenderResult } from './adapters/types'; -/** - * Runtime configuration. - */ -export interface RendererRuntimeConfig { - /** The manifest embedded in the page */ - manifest?: Partial; - /** Initial tool input */ - input?: Record; - /** Initial tool output */ - output?: unknown; - /** Initial structured content */ - structuredContent?: unknown; - /** Tool name */ - toolName?: string; - /** Enable debug logging */ - debug?: boolean; -} -/** - * Renderer Runtime. - * - * Client-side runtime that: - * - Reads manifest from the page - * - Lazy-loads the appropriate renderer adapter - * - Handles tool output updates from the Bridge - * - Re-renders when data changes - * - * @example - * ```typescript - * // Bootstrap from manifest in page - * const runtime = new RendererRuntime(); - * await runtime.init(); - * - * // Listen for updates - * runtime.onUpdate((context) => { - * console.log('Tool output updated:', context.output); - * }); - * ``` - */ -export declare class RendererRuntime { - private config; - private adapters; - private state; - private updateCallbacks; - private bridgeUnsubscribe; - constructor(config?: RendererRuntimeConfig); - /** - * Initialize the runtime. - * Reads manifest, sets up Bridge listeners, and prepares adapters. - */ - init(): Promise; - /** - * Get the current render context. - */ - get context(): RenderContext; - /** - * Get the manifest. - */ - get manifest(): Partial | undefined; - /** - * Get the resolved UI type. - */ - get uiType(): UIType; - /** - * Render content to a target element. - * - * @param target - Element to render into - * @param content - Content to render (optional, uses existing innerHTML) - * @param options - Render options - */ - render( - target: HTMLElement, - content?: string, - options?: { - hydrate?: boolean; - }, - ): Promise; - /** - * Update the render context and re-render if needed. - */ - updateContext(updates: Partial): Promise; - /** - * Subscribe to context updates. - */ - onUpdate(callback: (context: RenderContext) => void): () => void; - /** - * Clean up resources. - */ - destroy(): void; - /** - * Read manifest from page. - */ - private readManifest; - /** - * Read initial data from page globals. - */ - private readPageGlobals; - /** - * Set up Bridge event listeners. - */ - private setupBridgeListeners; - /** - * Get or load an adapter for a UI type. - */ - private getAdapter; - /** - * Auto-detect UI type from content. - */ - private detectType; - /** - * Log message if debug enabled. - */ - private log; -} -/** - * Create and initialize a renderer runtime. - */ -export declare function createRendererRuntime(config?: RendererRuntimeConfig): Promise; -/** - * Bootstrap the renderer runtime from page manifest. - * This is the main entry point for the IIFE bootstrap script. - */ -export declare function bootstrapRendererRuntime(): Promise; -/** - * Generate the bootstrap IIFE script for embedding in HTML. - */ -export declare function generateBootstrapScript(): string; -//# sourceMappingURL=renderer-runtime.d.ts.map diff --git a/libs/uipack/src/runtime/renderer-runtime.d.ts.map b/libs/uipack/src/runtime/renderer-runtime.d.ts.map deleted file mode 100644 index 00c56b48..00000000 --- a/libs/uipack/src/runtime/renderer-runtime.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"renderer-runtime.d.ts","sourceRoot":"","sources":["renderer-runtime.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAmB,aAAa,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrF;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAYD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,eAAe,CAA+C;IACtE,OAAO,CAAC,iBAAiB,CAA6B;gBAE1C,MAAM,GAAE,qBAA0B;IAe9C;;;OAGG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAoB3B;;OAEG;IACH,IAAI,OAAO,IAAI,aAAa,CAE3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,CAElD;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;;;;;OAMG;IACG,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,YAAY,CAAC;IAkC3G;;OAEG;IACG,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAyBnE;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,GAAG,MAAM,IAAI;IAUhE;;OAEG;IACH,OAAO,IAAI,IAAI;IAmBf;;OAEG;IACH,OAAO,CAAC,YAAY;IAiCpB;;OAEG;IACH,OAAO,CAAC,eAAe;IAuCvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoB5B;;OAEG;YACW,UAAU;IA8BxB;;OAEG;IACH,OAAO,CAAC,UAAU;IAwBlB;;OAEG;IACH,OAAO,CAAC,GAAG;CAKZ;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CAAC,MAAM,CAAC,EAAE,qBAAqB,GAAG,OAAO,CAAC,eAAe,CAAC,CAIpG;AAED;;;GAGG;AACH,wBAAsB,wBAAwB,IAAI,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,CAiChF;AAED;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,MAAM,CAwBhD"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/renderer-runtime.ts b/libs/uipack/src/runtime/renderer-runtime.ts index 30a98c70..1fa2e632 100644 --- a/libs/uipack/src/runtime/renderer-runtime.ts +++ b/libs/uipack/src/runtime/renderer-runtime.ts @@ -337,8 +337,9 @@ export class RendererRuntime { */ private async getAdapter(type: UIType, content?: string): Promise { // Check cache - if (this.adapters.has(type)) { - return this.adapters.get(type)!; + const cachedAdapter = this.adapters.get(type); + if (cachedAdapter) { + return cachedAdapter; } // Auto-detect type from content @@ -349,8 +350,9 @@ export class RendererRuntime { } // Check cache again with resolved type - if (this.adapters.has(resolvedType)) { - return this.adapters.get(resolvedType)!; + const resolvedAdapter = this.adapters.get(resolvedType); + if (resolvedAdapter) { + return resolvedAdapter; } // Load adapter diff --git a/libs/uipack/src/runtime/sanitizer.d.ts b/libs/uipack/src/runtime/sanitizer.d.ts deleted file mode 100644 index 563c168e..00000000 --- a/libs/uipack/src/runtime/sanitizer.d.ts +++ /dev/null @@ -1,180 +0,0 @@ -/** - * Input Sanitizer - * - * Provides PII detection and redaction for tool inputs before they are - * exposed to widget code. This protects sensitive data from being - * accidentally exposed in client-side widgets. - * - * Built-in patterns: - * - Email addresses → [EMAIL] - * - Phone numbers → [PHONE] - * - Credit card numbers → [CARD] - * - SSN / National IDs → [ID] - * - IP addresses → [IP] - * - * @example - * ```typescript - * import { sanitizeInput, createSanitizer } from './sanitizer'; - * - * // Auto-detect and redact PII - * const sanitized = sanitizeInput({ - * user: 'john@example.com', - * phone: '555-123-4567', - * message: 'Hello world', - * }); - * // Result: { user: '[EMAIL]', phone: '[PHONE]', message: 'Hello world' } - * - * // Redact specific fields - * const sanitized2 = sanitizeInput(data, ['email', 'ssn']); - * - * // Custom sanitizer - * const sanitized3 = sanitizeInput(data, (key, value) => { - * if (key === 'secret') return '[REDACTED]'; - * return value; - * }); - * ``` - */ -/** - * Redaction placeholder tokens - */ -export declare const REDACTION_TOKENS: { - readonly EMAIL: '[EMAIL]'; - readonly PHONE: '[PHONE]'; - readonly CARD: '[CARD]'; - readonly ID: '[ID]'; - readonly IP: '[IP]'; - readonly REDACTED: '[REDACTED]'; -}; -/** - * PII detection patterns - */ -export declare const PII_PATTERNS: { - email: RegExp; - emailInText: RegExp; - phone: RegExp; - phoneInText: RegExp; - creditCard: RegExp; - creditCardInText: RegExp; - ssn: RegExp; - ssnInText: RegExp; - ipv4: RegExp; - ipv4InText: RegExp; -}; -/** - * Custom sanitizer function type - */ -export type SanitizerFn = (key: string, value: unknown, path: string[]) => unknown; -/** - * Sanitizer options - */ -export interface SanitizeOptions { - /** - * How to handle PII detection: - * - true: Auto-detect and redact common PII patterns - * - string[]: Only redact values in fields with these names - * - SanitizerFn: Custom sanitizer function - */ - mode: true | string[] | SanitizerFn; - /** - * Maximum depth for recursive sanitization - * @default 10 - */ - maxDepth?: number; - /** - * Whether to sanitize PII patterns within string values - * @default true - */ - sanitizeInText?: boolean; -} -/** - * Check if a string matches an email pattern - */ -export declare function isEmail(value: string): boolean; -/** - * Check if a string matches a phone pattern - */ -export declare function isPhone(value: string): boolean; -/** - * Check if a string matches a credit card pattern - */ -export declare function isCreditCard(value: string): boolean; -/** - * Check if a string matches an SSN pattern - */ -export declare function isSSN(value: string): boolean; -/** - * Check if a string matches an IPv4 pattern - */ -export declare function isIPv4(value: string): boolean; -/** - * Detect PII type in a string value - */ -export declare function detectPIIType(value: string): keyof typeof REDACTION_TOKENS | null; -/** - * Redact PII patterns from text - */ -export declare function redactPIIFromText(text: string): string; -/** - * Sanitize input data by redacting PII. - * - * @param input - The input data to sanitize - * @param mode - Sanitization mode: - * - `true`: Auto-detect and redact common PII patterns - * - `string[]`: Redact values in fields with these names - * - `SanitizerFn`: Custom sanitizer function - * @returns Sanitized copy of the input - * - * @example - * ```typescript - * // Auto-detect PII - * sanitizeInput({ email: 'test@example.com' }); - * // { email: '[EMAIL]' } - * - * // Redact specific fields - * sanitizeInput({ password: 'secret', name: 'John' }, ['password']); - * // { password: '[REDACTED]', name: 'John' } - * - * // Custom sanitizer - * sanitizeInput(data, (key, value) => key === 'token' ? '[TOKEN]' : value); - * ``` - */ -export declare function sanitizeInput( - input: Record, - mode?: true | string[] | SanitizerFn, -): Record; -/** - * Create a reusable sanitizer function with preset options. - * - * @param mode - Sanitization mode - * @returns Sanitizer function - * - * @example - * ```typescript - * const sanitizer = createSanitizer(['email', 'phone', 'ssn']); - * - * const clean1 = sanitizer(userData1); - * const clean2 = sanitizer(userData2); - * ``` - */ -export declare function createSanitizer( - mode?: true | string[] | SanitizerFn, -): (input: Record) => Record; -/** - * Check if an object contains any detected PII. - * Does not modify the input. - * - * @param input - The input to check - * @param options - Optional configuration - * @param options.maxDepth - Maximum recursion depth (default: 10) - * @returns Object with boolean `hasPII` and `fields` array of field paths - */ -export declare function detectPII( - input: Record, - options?: { - maxDepth?: number; - }, -): { - hasPII: boolean; - fields: string[]; -}; -//# sourceMappingURL=sanitizer.d.ts.map diff --git a/libs/uipack/src/runtime/sanitizer.d.ts.map b/libs/uipack/src/runtime/sanitizer.d.ts.map deleted file mode 100644 index 8d96dada..00000000 --- a/libs/uipack/src/runtime/sanitizer.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["sanitizer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;CAOnB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;CA8BxB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,WAAW,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE9C;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE9C;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAInD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE5C;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAE7C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,OAAO,gBAAgB,GAAG,IAAI,CAOjF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAWtD;AA0FD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,IAAI,GAAE,IAAI,GAAG,MAAM,EAAE,GAAG,WAAkB,GACzC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAczB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAC7B,IAAI,GAAE,IAAI,GAAG,MAAM,EAAE,GAAG,WAAkB,GACzC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE7D;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9B;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CA0CA"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/types.d.ts b/libs/uipack/src/runtime/types.d.ts deleted file mode 100644 index d44ef229..00000000 --- a/libs/uipack/src/runtime/types.d.ts +++ /dev/null @@ -1,407 +0,0 @@ -/** - * Runtime Types for Tool UI Templates - * - * Types for the MCP Bridge runtime that adapts to different host environments - * (OpenAI Apps SDK, ext-apps, Claude, etc.). - * - * Note: UI-related types are defined locally to avoid circular dependency with @frontmcp/sdk. - * These are kept in sync with the SDK's tool-ui.metadata.ts definitions. - */ -/** - * Content Security Policy for UI templates rendered in sandboxed iframes. - * Based on OpenAI Apps SDK and ext-apps (SEP-1865) specifications. - */ -export interface UIContentSecurityPolicy { - /** - * Origins allowed for fetch/XHR/WebSocket connections. - * Maps to CSP `connect-src` directive. - */ - connectDomains?: string[]; - /** - * Origins allowed for images, scripts, fonts, and styles. - * Maps to CSP `img-src`, `script-src`, `style-src`, `font-src` directives. - */ - resourceDomains?: string[]; -} -/** - * Helper functions available in template context. - */ -export interface TemplateHelpers { - /** Escape HTML special characters to prevent XSS. Handles null/undefined gracefully. */ - escapeHtml: (str: unknown) => string; - /** Format a date for display. */ - formatDate: (date: Date | string, format?: string) => string; - /** Format a number as currency. */ - formatCurrency: (amount: number, currency?: string) => string; - /** Generate a unique ID for DOM elements. */ - uniqueId: (prefix?: string) => string; - /** Safely embed JSON data in HTML (escapes script-breaking characters). */ - jsonEmbed: (data: unknown) => string; -} -/** - * Context passed to template builder functions. - */ -export interface TemplateContext { - /** The input arguments passed to the tool. */ - input: In; - /** The raw output returned by the tool's execute method. */ - output: Out; - /** The structured content parsed from the output (if outputSchema was provided). */ - structuredContent?: unknown; - /** Helper functions for template rendering. */ - helpers: TemplateHelpers; -} -/** - * Template builder function type. - */ -export type TemplateBuilderFn = (ctx: TemplateContext) => string; -/** - * Widget serving mode determines how the widget HTML is delivered to the client. - */ -export type WidgetServingMode = 'auto' | 'inline' | 'static' | 'hybrid' | 'direct-url' | 'custom-url'; -/** - * Template type - can be: - * - HTML string - * - Template builder function: (ctx) => string - * - React component function (imported from .tsx file) - * - JSX string (transpiled at runtime) - * - MDX string (Markdown + JSX, transpiled at runtime) - * - * The renderer is auto-detected based on template type. - */ -export type ToolUITemplate = TemplateBuilderFn | string | ((props: any) => any); -/** - * UI template configuration for tools. - */ -export interface ToolUIConfig { - /** - * Template for rendering the tool UI. - * - * Supports multiple formats (auto-detected): - * - HTML string: `"
Hello
"` - * - Template builder: `(ctx) => \`
\${ctx.output.name}
\`` - * - React component: `import { MyWidget } from './widget.tsx'` - * - JSX string: `"function Widget({ output }) { return
{output.name}
; }"` - * - MDX string: `"# Title\n"` - * - * @example HTML template builder - * ```typescript - * template: (ctx) => `
${ctx.helpers.escapeHtml(ctx.output.name)}
` - * ``` - * - * @example React component - * ```typescript - * import { MyWidget } from './my-widget.tsx'; - * template: MyWidget - * ``` - * - * @example MDX content - * ```typescript - * template: ` - * # User Profile - * - * ` - * ``` - */ - template: ToolUITemplate; - /** Content Security Policy for the sandboxed widget. */ - csp?: UIContentSecurityPolicy; - /** Whether the widget can invoke tools via the MCP bridge. */ - widgetAccessible?: boolean; - /** Preferred display mode for the widget. */ - displayMode?: 'inline' | 'fullscreen' | 'pip'; - /** Human-readable description shown to users about what the widget does. */ - widgetDescription?: string; - /** Status messages shown during tool invocation. */ - invocationStatus?: { - invoking?: string; - invoked?: string; - }; - /** How the widget HTML should be served to the client. */ - servingMode?: WidgetServingMode; - /** Custom URL for widget serving when `servingMode: 'custom-url'`. */ - customWidgetUrl?: string; - /** Path for direct URL serving when `servingMode: 'direct-url'`. */ - directPath?: string; - /** - * Enable client-side hydration for React/MDX components. - * When true, the rendered HTML includes hydration markers and - * the React runtime is included for client-side interactivity. - * - * @default false - */ - hydrate?: boolean; - /** - * Custom React components to make available in MDX templates. - * These components can be used directly in MDX content. - * - * @example - * ```typescript - * import { Card, Badge } from './components'; - * - * mdxComponents: { Card, Badge } - * // Now in MDX: # Title\nNew - * ``` - */ - mdxComponents?: Record; - /** - * Custom wrapper function for the rendered content. - * Allows per-tool customization of the HTML document structure. - * - * @example - * ```typescript - * wrapper: (content, ctx) => ` - *
- * ${content} - *
- * ` - * ``` - */ - wrapper?: (content: string, ctx: TemplateContext) => string; -} -type UICSPType = UIContentSecurityPolicy; -/** - * Provider identifier for the host environment - */ -export type ProviderType = 'openai' | 'ext-apps' | 'claude' | 'unknown'; -/** - * Display mode for the widget - */ -export type DisplayMode = 'inline' | 'fullscreen' | 'pip' | 'carousel'; -/** - * Theme mode - */ -export type ThemeMode = 'light' | 'dark' | 'system'; -/** - * Host context provided by the environment - */ -export interface HostContext { - /** Current theme mode */ - theme: ThemeMode; - /** Current display mode */ - displayMode: DisplayMode; - /** Available display modes */ - availableDisplayModes?: DisplayMode[]; - /** Viewport dimensions */ - viewport?: { - width: number; - height: number; - maxHeight?: number; - maxWidth?: number; - }; - /** BCP 47 locale code */ - locale?: string; - /** IANA timezone */ - timeZone?: string; - /** User agent string */ - userAgent?: string; - /** Platform type */ - platform?: 'web' | 'desktop' | 'mobile'; - /** Device capabilities */ - deviceCapabilities?: { - touch?: boolean; - hover?: boolean; - }; - /** Safe area insets (for mobile) */ - safeAreaInsets?: { - top: number; - right: number; - bottom: number; - left: number; - }; -} -/** - * MCP Bridge interface available as window.mcpBridge - */ -export interface MCPBridge { - /** - * Detected provider type - */ - readonly provider: ProviderType; - /** - * Call a tool on the MCP server - */ - callTool(name: string, params: Record): Promise; - /** - * Send a message to the chat interface - */ - sendMessage(content: string): Promise; - /** - * Open an external link - */ - openLink(url: string): Promise; - /** - * Get the tool input arguments - */ - readonly toolInput: Record; - /** - * Get the tool output/result - */ - readonly toolOutput: unknown; - /** - * Get the structured content from the tool result - */ - readonly structuredContent: unknown; - /** - * Get the current widget state - */ - readonly widgetState: Record; - /** - * Set the widget state (persisted) - */ - setWidgetState(state: Record): void; - /** - * Get the host context (theme, display mode, etc.) - */ - readonly context: HostContext; - /** - * Subscribe to host context changes - */ - onContextChange(callback: (context: Partial) => void): () => void; - /** - * Subscribe to tool result updates - */ - onToolResult(callback: (result: unknown) => void): () => void; -} -/** - * Options for wrapping tool UI templates - */ -export interface WrapToolUIOptions { - /** HTML content of the template */ - content: string; - /** Tool name */ - toolName: string; - /** Tool input arguments */ - input?: Record; - /** Tool output */ - output?: unknown; - /** Structured content from parsing */ - structuredContent?: unknown; - /** Content Security Policy */ - csp?: UICSPType; - /** Whether widget can call tools */ - widgetAccessible?: boolean; - /** Title for the page */ - title?: string; -} -declare global { - interface Window { - mcpBridge?: MCPBridge | MCPBridgeExtended; - openai?: OpenAIRuntime; - claude?: unknown; - __mcpPlatform?: string; - __mcpToolName?: string; - __mcpToolInput?: Record; - __mcpToolOutput?: unknown; - __mcpStructuredContent?: unknown; - __mcpToolResponseMetadata?: Record; - __mcpHostContext?: HostContext; - __mcpWidgetToken?: string; - } -} -/** - * User agent information from OpenAI - */ -export interface OpenAIUserAgent { - /** Device type */ - type?: 'web' | 'mobile' | 'desktop'; - /** Whether device supports hover interactions */ - hover?: boolean; - /** Whether device supports touch interactions */ - touch?: boolean; -} -/** - * Safe area insets (for mobile devices with notches, etc.) - */ -export interface SafeAreaInsets { - top: number; - bottom: number; - left: number; - right: number; -} -/** - * Full OpenAI runtime interface matching window.openai API - * @see https://developers.openai.com/apps-sdk/build/chatgpt-ui - */ -export interface OpenAIRuntime { - /** Display theme */ - theme?: 'light' | 'dark'; - /** User agent information */ - userAgent?: OpenAIUserAgent; - /** BCP 47 locale string */ - locale?: string; - /** Maximum height available for widget (pixels) */ - maxHeight?: number; - /** Current display mode */ - displayMode?: DisplayMode; - /** Safe area insets for mobile devices */ - safeArea?: SafeAreaInsets; - /** Tool input arguments passed to the tool */ - toolInput?: Record; - /** Structured tool output/result */ - toolOutput?: unknown; - /** Additional metadata from tool response */ - toolResponseMetadata?: Record; - /** Persisted widget state */ - widgetState?: Record; - /** - * Invoke an MCP tool - * @param name - Tool name - * @param args - Tool arguments - * @returns Promise resolving to tool result - */ - callTool?: (name: string, args: Record) => Promise; - /** - * Request a display mode change - * @param options - Display mode options - */ - requestDisplayMode?: (options: { mode: DisplayMode }) => Promise; - /** - * Request to close the widget - */ - requestClose?: () => Promise; - /** - * Open an external URL - * @param options - URL options - */ - openExternal?: (options: { href: string }) => Promise; - /** - * Send a follow-up message to the chat - * @param options - Message options - */ - sendFollowUpMessage?: (options: { prompt: string }) => Promise; - /** - * Set widget state (persisted across sessions) - * @param state - State object to persist - */ - setWidgetState?: (state: Record) => void; -} -/** - * Extended MCP Bridge interface with full OpenAI API compatibility - */ -export interface MCPBridgeExtended extends MCPBridge { - /** Display theme (proxied from window.openai or polyfilled) */ - readonly theme: 'light' | 'dark'; - /** User agent info */ - readonly userAgent: OpenAIUserAgent; - /** BCP 47 locale */ - readonly locale: string; - /** Max height for widget */ - readonly maxHeight: number | undefined; - /** Current display mode */ - readonly displayMode: DisplayMode; - /** Safe area insets */ - readonly safeArea: SafeAreaInsets; - /** Tool response metadata */ - readonly toolResponseMetadata: Record; - /** - * Request display mode change - */ - requestDisplayMode(options: { mode: DisplayMode }): Promise; - /** - * Request to close the widget - */ - requestClose(): Promise; -} -export {}; -//# sourceMappingURL=types.d.ts.map diff --git a/libs/uipack/src/runtime/types.d.ts.map b/libs/uipack/src/runtime/types.d.ts.map deleted file mode 100644 index d22ce976..00000000 --- a/libs/uipack/src/runtime/types.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/wrapper.d.ts b/libs/uipack/src/runtime/wrapper.d.ts deleted file mode 100644 index 1e846393..00000000 --- a/libs/uipack/src/runtime/wrapper.d.ts +++ /dev/null @@ -1,426 +0,0 @@ -/** - * Tool UI Wrapper - * - * Wraps tool UI templates with the MCP Bridge runtime and - * integrates with the existing layout system for consistent styling. - */ -import type { WrapToolUIOptions, HostContext } from './types'; -import { type ThemeConfig, type PlatformCapabilities, type DeepPartial } from '../theme'; -import { escapeHtml } from '../utils'; -import { type SanitizerFn } from './sanitizer'; -/** - * Extended options for wrapToolUI that include theme and platform - */ -export interface WrapToolUIFullOptions extends WrapToolUIOptions { - /** Theme configuration */ - theme?: DeepPartial; - /** Target platform capabilities */ - platform?: PlatformCapabilities; - /** Initial host context */ - hostContext?: Partial; - /** - * Sanitize input before exposing to widget. - * This protects sensitive data from being exposed in client-side widgets. - * - * - `true`: Auto-detect and redact PII patterns (email, phone, SSN, credit card) - * - `string[]`: Redact values in fields with these names - * - `SanitizerFn`: Custom sanitizer function - * - `false` or `undefined`: No sanitization (default) - * - * @example - * ```typescript - * // Auto-detect PII - * wrapToolUI({ sanitizeInput: true, ... }); - * - * // Redact specific fields - * wrapToolUI({ sanitizeInput: ['password', 'token', 'api_key'], ... }); - * - * // Custom sanitizer - * wrapToolUI({ - * sanitizeInput: (key, value) => key === 'secret' ? '[HIDDEN]' : value, - * ... - * }); - * ``` - */ - sanitizeInput?: boolean | string[] | SanitizerFn; - /** - * The type of renderer used (for framework runtime injection). - * Auto-detected by renderToolTemplateAsync. - */ - rendererType?: string; - /** - * Enable client-side hydration for React/MDX components. - */ - hydrate?: boolean; - /** - * Skip CSP meta tag generation. - * - * OpenAI handles CSP through `_meta['openai/widgetCSP']` in the MCP response, - * not through HTML meta tags. When true, the CSP meta tag is omitted from the - * HTML output to avoid browser warnings about CSP meta tags outside . - * - * @default false - */ - skipCspMeta?: boolean; -} -/** - * Create template helpers for use in template builder functions - */ -export declare function createTemplateHelpers(): { - /** - * Escape HTML special characters to prevent XSS - */ - escapeHtml: typeof escapeHtml; - /** - * Format a date for display - */ - formatDate: (date: Date | string, format?: string) => string; - /** - * Format a number as currency - */ - formatCurrency: (amount: number, currency?: string) => string; - /** - * Generate a unique ID for DOM elements - */ - uniqueId: (prefix?: string) => string; - /** - * Safely embed JSON data in HTML - * Escapes characters that could break out of script tags or HTML - */ - jsonEmbed: (data: unknown) => string; -}; -/** - * Wrap tool UI content in a complete HTML document with MCP Bridge runtime. - * - * This function creates a standalone HTML document that: - * - Includes the MCP Bridge runtime for cross-platform compatibility - * - Applies Content Security Policy meta tags - * - Injects tool input/output data - * - Uses the FrontMCP theme system for consistent styling - * - * @param options - Options for wrapping the template - * @returns Complete HTML document string - * - * @example - * ```typescript - * const html = wrapToolUI({ - * content: '
Weather: 72°F
', - * toolName: 'get_weather', - * input: { location: 'San Francisco' }, - * output: { temperature: 72, conditions: 'sunny' }, - * csp: { connectDomains: ['https://api.weather.com'] }, - * }); - * ``` - */ -export declare function wrapToolUI(options: WrapToolUIFullOptions): string; -/** - * Resource loading mode for widget scripts. - * - 'cdn': Load React/MDX from CDN URLs (lightweight HTML, requires network) - * - 'inline': Embed all scripts in HTML (larger, works offline) - */ -export type ResourceMode = 'cdn' | 'inline'; -/** - * Options for the universal wrapper. - */ -export interface WrapToolUIUniversalOptions { - /** Rendered template content (HTML) */ - content: string; - /** Tool name */ - toolName: string; - /** Tool input arguments */ - input?: Record; - /** Tool output/result */ - output?: unknown; - /** Structured content */ - structuredContent?: unknown; - /** CSP configuration */ - csp?: WrapToolUIOptions['csp']; - /** Widget accessibility flag */ - widgetAccessible?: boolean; - /** Page title */ - title?: string; - /** Theme configuration */ - theme?: DeepPartial; - /** Whether to include the FrontMCP Bridge */ - includeBridge?: boolean; - /** Whether to inline all scripts (for blocked-network environments) */ - inlineScripts?: boolean; - /** Renderer type used */ - rendererType?: string; - /** Enable hydration */ - hydrate?: boolean; - /** - * Skip CSP meta tag generation. - * - * OpenAI handles CSP through `_meta['openai/widgetCSP']` in the MCP response, - * not through HTML meta tags. When true, the CSP meta tag is omitted from the - * HTML output to avoid browser warnings about CSP meta tags outside . - * - * @default false - */ - skipCspMeta?: boolean; - /** - * Resource loading mode for widget scripts. - * - * - 'cdn': Load React, MDX, Handlebars from CDN URLs (smaller HTML, requires network) - * - 'inline': Embed all scripts directly in HTML (larger, works in blocked-network environments) - * - * When `inlineScripts` is true, this is automatically set to 'inline'. - * - * @default 'cdn' - */ - resourceMode?: ResourceMode; -} -/** - * Wrap tool UI content in a universal HTML document. - * - * This wrapper produces HTML that works on ALL platforms: - * - OpenAI ChatGPT (Apps SDK) - * - Anthropic Claude - * - MCP Apps (ext-apps / SEP-1865) - * - Google Gemini - * - Any MCP-compatible host - * - * The FrontMCP Bridge auto-detects the host at runtime and adapts - * its communication protocol accordingly. - * - * @param options - Universal wrapper options - * @returns Complete HTML document string - * - * @example - * ```typescript - * const html = wrapToolUIUniversal({ - * content: '
Weather: 72°F
', - * toolName: 'get_weather', - * output: { temperature: 72 }, - * }); - * ``` - */ -export declare function wrapToolUIUniversal(options: WrapToolUIUniversalOptions): string; -/** - * Wrap tool UI content with minimal boilerplate. - * Use this when you need to control all styling yourself. - * - * @param options - Minimal wrapper options - * @returns HTML document string - */ -export declare function wrapToolUIMinimal( - options: Pick< - WrapToolUIOptions, - 'content' | 'toolName' | 'input' | 'output' | 'structuredContent' | 'csp' | 'widgetAccessible' | 'title' - > & { - skipCspMeta?: boolean; - }, -): string; -/** - * Options for wrapping a static widget. - */ -export interface WrapStaticWidgetOptions { - /** Tool name */ - toolName: string; - /** SSR'd template content (rendered WITHOUT data) */ - ssrContent: string; - /** Tool UI configuration */ - uiConfig: { - csp?: WrapToolUIOptions['csp']; - widgetAccessible?: boolean; - }; - /** Page title */ - title?: string; - /** Theme configuration */ - theme?: DeepPartial; - /** - * Renderer type (react, mdx, html, etc). - * When 'react' or 'mdx', includes React runtime for client-side rendering. - */ - rendererType?: string; - /** - * Transpiled component code to include for client-side rendering. - * Required for React components to re-render with actual data. - */ - componentCode?: string; - /** - * Embedded data for inline mode (servingMode: 'inline'). - * When provided, the data is embedded in the HTML and the component renders immediately - * instead of waiting for window.openai.toolOutput. - * - * This enables inline mode to use the same React renderer as static mode, - * but with data embedded in each response. - */ - embeddedData?: { - input?: Record; - output?: unknown; - structuredContent?: unknown; - }; - /** - * Self-contained mode for inline serving. - * When true: - * - Skips the FrontMCP Bridge entirely (no wrapper interference) - * - Renders React immediately with embedded data - * - React component manages its own state via hooks - * - No global state updates that could trigger platform wrappers - * - * This is used for `servingMode: 'inline'` to prevent OpenAI's wrapper - * from overwriting the React component on data changes. - */ - selfContained?: boolean; -} -/** - * Options for lean widget shell (inline mode resourceTemplate). - */ -export interface WrapLeanWidgetShellOptions { - /** Tool name */ - toolName: string; - /** UI configuration */ - uiConfig: { - widgetAccessible?: boolean; - }; - /** Optional page title */ - title?: string; - /** Optional theme overrides */ - theme?: Partial; -} -/** - * Create a lean widget shell for inline mode resourceTemplate. - * - * This is a minimal HTML document with: - * - HTML structure with theme CSS and fonts - * - A placeholder/loading message while waiting for tool response - * - FrontMCP Bridge for platform-agnostic communication - * - Injector script that detects ui/html in tool response and replaces the document - * - * NO React runtime, NO component code - the actual React widget comes - * in each tool response via _meta['ui/html'] and is injected by this shell. - * - * OpenAI caches this at discovery time. When a tool executes: - * 1. Tool returns full widget HTML in _meta['ui/html'] - * 2. OpenAI injects this into window.openai.toolResponseMetadata['ui/html'] - * 3. The bridge detects this and calls the injector callback - * 4. Injector replaces the entire document with the full React widget - * - * @param options - Lean widget options - * @returns Minimal HTML document string with bridge and injector - */ -export declare function wrapLeanWidgetShell(options: WrapLeanWidgetShellOptions): string; -/** - * Options for hybrid widget shell (hybrid mode resourceTemplate). - */ -export interface WrapHybridWidgetShellOptions { - /** Tool name */ - toolName: string; - /** UI configuration */ - uiConfig: { - widgetAccessible?: boolean; - csp?: WrapToolUIOptions['csp']; - }; - /** Optional page title */ - title?: string; - /** Optional theme overrides */ - theme?: Partial; -} -/** - * Create a hybrid widget shell for hybrid serving mode. - * - * This shell contains: - * - React 19 runtime from esm.sh CDN - * - FrontMCP Bridge for platform-agnostic communication - * - All FrontMCP hooks (useMcpBridgeContext, useToolOutput, useCallTool, etc.) - * - All FrontMCP UI components (Card, Badge, Button) - * - Dynamic renderer that imports and renders component code at runtime - * - * NO component code is included - it comes in the tool response via `_meta['ui/component']`. - * - * Flow: - * 1. Shell is cached at tools/list (OpenAI caches outputTemplate) - * 2. Tool response contains component code + structured data - * 3. Shell imports component via blob URL and renders with data - * 4. Re-renders on data updates via bridge notifications - * - * @param options - Hybrid widget shell options - * @returns Complete HTML document string with dynamic renderer - */ -export declare function wrapHybridWidgetShell(options: WrapHybridWidgetShellOptions): string; -/** - * Wrap a static widget template for MCP resource mode. - * - * Unlike `wrapToolUIUniversal`, this function creates a widget that: - * - Does NOT embed data (input/output/structuredContent) - * - Reads data at runtime from the FrontMCP Bridge (window.openai.toolOutput) - * - Is cached at server startup and returned for all requests - * - * This is used for `servingMode: 'static'` where OpenAI caches the - * outputTemplate HTML and injects data via window.openai.toolOutput. - * - * @param options - Static widget options - * @returns Complete HTML document string - * - * @example - * ```typescript - * const html = wrapStaticWidgetUniversal({ - * toolName: 'get_weather', - * ssrContent: '
', - * uiConfig: { widgetAccessible: true }, - * }); - * ``` - */ -export declare function wrapStaticWidgetUniversal(options: WrapStaticWidgetOptions): string; -/** - * Build OpenAI Apps SDK specific meta annotations. - * These are placed in _meta field of the tool response. - */ -export declare function buildOpenAIMeta(options: { - csp?: WrapToolUIOptions['csp']; - widgetAccessible?: boolean; - widgetDescription?: string; - displayMode?: 'inline' | 'fullscreen' | 'pip'; -}): Record; -/** - * Get the MIME type for tool UI responses based on target platform - */ -export declare function getToolUIMimeType(platform?: 'openai' | 'ext-apps' | 'generic'): string; -/** - * Options for Claude-specific wrapper. - */ -export interface WrapToolUIForClaudeOptions { - /** Rendered template content (HTML body) */ - content: string; - /** Tool name */ - toolName: string; - /** Tool input arguments */ - input?: Record; - /** Tool output/result */ - output?: unknown; - /** Page title */ - title?: string; - /** Include HTMX for dynamic interactions */ - includeHtmx?: boolean; - /** Include Alpine.js for reactive components */ - includeAlpine?: boolean; -} -/** - * Wrap tool UI content for Claude Artifacts. - * - * Creates a complete HTML document using Cloudflare CDN resources - * which are trusted by Claude's sandbox environment. - * - * Key differences from standard wrapper: - * - Uses pre-built Tailwind CSS from cloudflare (not JIT compiler) - * - No esm.sh imports (Claude blocks non-cloudflare CDNs) - * - No React runtime (SSR-only, static HTML) - * - Self-contained with embedded data - * - * @param options - Claude wrapper options - * @returns Complete HTML document string - * - * @example - * ```typescript - * const html = wrapToolUIForClaude({ - * content: '
Weather: 72°F
', - * toolName: 'get_weather', - * output: { temperature: 72 }, - * }); - * // Returns full HTML with Tailwind CSS from cloudflare CDN - * ``` - */ -export declare function wrapToolUIForClaude(options: WrapToolUIForClaudeOptions): string; -//# sourceMappingURL=wrapper.d.ts.map diff --git a/libs/uipack/src/runtime/wrapper.d.ts.map b/libs/uipack/src/runtime/wrapper.d.ts.map deleted file mode 100644 index b5827f44..00000000 --- a/libs/uipack/src/runtime/wrapper.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"wrapper.d.ts","sourceRoot":"","sources":["wrapper.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/libs/uipack/src/runtime/wrapper.ts b/libs/uipack/src/runtime/wrapper.ts index d90836f0..7eaa1a9a 100644 --- a/libs/uipack/src/runtime/wrapper.ts +++ b/libs/uipack/src/runtime/wrapper.ts @@ -7,7 +7,7 @@ import type { WrapToolUIOptions, HostContext } from './types'; import { MCP_BRIDGE_RUNTIME } from './mcp-bridge'; -import { buildCSPMetaTag, buildCSPDirectives } from './csp'; +import { buildCSPMetaTag } from './csp'; import { type ThemeConfig, type PlatformCapabilities, diff --git a/libs/uipack/src/theme/cdn.ts b/libs/uipack/src/theme/cdn.ts index e0ffeea3..43f1356a 100644 --- a/libs/uipack/src/theme/cdn.ts +++ b/libs/uipack/src/theme/cdn.ts @@ -97,8 +97,9 @@ const scriptCache: Map = new Map(); * Fetch a script and cache its content */ export async function fetchScript(url: string): Promise { - if (scriptCache.has(url)) { - return scriptCache.get(url)!; + const cached = scriptCache.get(url); + if (cached) { + return cached; } const response = await fetch(url); @@ -244,8 +245,9 @@ export function buildCdnScripts(options: CdnScriptOptions = {}): string { if (inline) { // Use cached inline scripts - warn if not cached if (tailwind) { - if (isScriptCached(CDN.tailwind)) { - scripts.push(buildInlineScriptTag(getCachedScript(CDN.tailwind)!)); + const cached = getCachedScript(CDN.tailwind); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScripts() first.', @@ -253,8 +255,9 @@ export function buildCdnScripts(options: CdnScriptOptions = {}): string { } } if (htmx) { - if (isScriptCached(CDN.htmx.url)) { - scripts.push(buildInlineScriptTag(getCachedScript(CDN.htmx.url)!)); + const cached = getCachedScript(CDN.htmx.url); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScripts() first.', @@ -262,8 +265,9 @@ export function buildCdnScripts(options: CdnScriptOptions = {}): string { } } if (alpine) { - if (isScriptCached(CDN.alpine.url)) { - scripts.push(buildInlineScriptTag(getCachedScript(CDN.alpine.url)!)); + const cached = getCachedScript(CDN.alpine.url); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScripts() first.', @@ -271,8 +275,9 @@ export function buildCdnScripts(options: CdnScriptOptions = {}): string { } } if (icons) { - if (isScriptCached(CDN.icons.url)) { - scripts.push(buildInlineScriptTag(getCachedScript(CDN.icons.url)!)); + const cached = getCachedScript(CDN.icons.url); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but Lucide icons script not cached. Call fetchAndCacheScripts() first.', @@ -367,8 +372,9 @@ export function buildCdnScriptsFromTheme(theme: ThemeConfig, options: ThemeCdnSc if (inline) { // Use cached inline scripts - warn if not cached if (tailwind) { - if (isScriptCached(tailwindUrl)) { - scripts.push(buildInlineScriptTag(getCachedScript(tailwindUrl)!)); + const cached = getCachedScript(tailwindUrl); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScriptsFromTheme() first.', @@ -376,8 +382,9 @@ export function buildCdnScriptsFromTheme(theme: ThemeConfig, options: ThemeCdnSc } } if (htmx) { - if (isScriptCached(htmxConfig.url)) { - scripts.push(buildInlineScriptTag(getCachedScript(htmxConfig.url)!)); + const cached = getCachedScript(htmxConfig.url); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScriptsFromTheme() first.', @@ -385,8 +392,9 @@ export function buildCdnScriptsFromTheme(theme: ThemeConfig, options: ThemeCdnSc } } if (alpine) { - if (isScriptCached(alpineConfig.url)) { - scripts.push(buildInlineScriptTag(getCachedScript(alpineConfig.url)!)); + const cached = getCachedScript(alpineConfig.url); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScriptsFromTheme() first.', @@ -394,8 +402,9 @@ export function buildCdnScriptsFromTheme(theme: ThemeConfig, options: ThemeCdnSc } } if (icons) { - if (isScriptCached(iconsConfig.url)) { - scripts.push(buildInlineScriptTag(getCachedScript(iconsConfig.url)!)); + const cached = getCachedScript(iconsConfig.url); + if (cached) { + scripts.push(buildInlineScriptTag(cached)); } else { console.warn( '[frontmcp/ui] Inline mode requested but icons script not cached. Call fetchAndCacheScriptsFromTheme() first.', diff --git a/libs/uipack/src/tool-template/builder.ts b/libs/uipack/src/tool-template/builder.ts index 94913e03..87dbbbb7 100644 --- a/libs/uipack/src/tool-template/builder.ts +++ b/libs/uipack/src/tool-template/builder.ts @@ -10,13 +10,7 @@ * - MDX content (Markdown + JSX) */ -import type { - TemplateContext, - TemplateBuilderFn, - ToolUIConfig, - UIContentSecurityPolicy, - ToolUITemplate, -} from '../runtime/types'; +import type { TemplateContext, TemplateBuilderFn, ToolUIConfig, ToolUITemplate } from '../runtime/types'; import { createTemplateHelpers, wrapToolUI, type WrapToolUIFullOptions } from '../runtime/wrapper'; import type { ThemeConfig, PlatformCapabilities, DeepPartial } from '../theme'; import { escapeHtml } from '../utils'; diff --git a/libs/uipack/src/types/index.d.ts b/libs/uipack/src/types/index.d.ts deleted file mode 100644 index 0bb63818..00000000 --- a/libs/uipack/src/types/index.d.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * @frontmcp/ui Types - * - * Standalone types for UI configuration that don't depend on @frontmcp/sdk. - * These types enable external systems (like AgentLink) to use @frontmcp/ui - * without requiring the full SDK as a dependency. - * - * @packageDocumentation - */ -export { - type UIContentSecurityPolicy, - type UIContentSecurity, - type TemplateHelpers, - type TemplateContext, - type TemplateBuilderFn, - type WidgetServingMode, - type WidgetDisplayMode, - type UITemplateConfig, - type UITemplate, -} from './ui-config'; -export { - type UIType, - type BundlingMode, - type ResourceMode, - type OutputMode, - type DisplayMode, - type CSPDirectives, - type CDNResource, - type RendererAssets, - type WidgetManifest, - type UIMetaFields, - type OpenAIMetaFields, - type ToolResponseMeta, - type WidgetConfig, - type WidgetTemplate, - type WidgetTemplateContext, - type WidgetTemplateHelpers, - type WidgetRuntimeOptions, - type BuildManifestResult, - type BuildManifestOptions, - isUIType, - isBundlingMode, - isResourceMode, - isOutputMode, - isDisplayMode, - DEFAULT_CSP_BY_TYPE, - DEFAULT_RENDERER_ASSETS, - /** @deprecated Use UIMetaFields instead */ - type RuntimePayload, -} from './ui-runtime'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/types/index.d.ts.map b/libs/uipack/src/types/index.d.ts.map deleted file mode 100644 index 52c14e2f..00000000 --- a/libs/uipack/src/types/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,EAEL,KAAK,uBAAuB,EAE5B,KAAK,iBAAiB,EAEtB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EAEtB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EAEtB,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,WAAW,EAEhB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEnB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EAErB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAEzB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EAEzB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAY,EACZ,aAAa,EAEb,mBAAmB,EACnB,uBAAuB;AAEvB,2CAA2C;AAC3C,KAAK,cAAc,GACpB,MAAM,cAAc,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/types/ui-config.d.ts b/libs/uipack/src/types/ui-config.d.ts deleted file mode 100644 index 75e0af96..00000000 --- a/libs/uipack/src/types/ui-config.d.ts +++ /dev/null @@ -1,641 +0,0 @@ -/** - * Standalone UI Configuration Types - * - * SDK-independent types for configuring UI templates. - * These types can be used by external consumers (like AgentLink) - * without requiring @frontmcp/sdk as a dependency. - * - * @packageDocumentation - */ -import type { CDNDependency, FileBundleOptions } from '../dependency/types'; -/** - * Content Security Policy for UI templates rendered in sandboxed iframes. - * Based on OpenAI Apps SDK and MCP Apps (SEP-1865) specifications. - */ -export interface UIContentSecurityPolicy { - /** - * Origins allowed for fetch/XHR/WebSocket connections. - * Maps to CSP `connect-src` directive. - * @example ['https://api.example.com', 'https://*.myservice.com'] - */ - connectDomains?: string[]; - /** - * Origins allowed for images, scripts, fonts, and styles. - * Maps to CSP `img-src`, `script-src`, `style-src`, `font-src` directives. - * @example ['https://cdn.example.com'] - */ - resourceDomains?: string[]; -} -/** - * XSS protection and content security settings. - * - * Controls sanitization of HTML content rendered in widgets. - * By default, strict sanitization is applied to prevent XSS attacks. - * - * ## Platform Isolation Context - * - * Both OpenAI and Claude render widgets in **double-iframe isolation**: - * - * ``` - * ┌─────────────────────────────────────────────────┐ - * │ ChatGPT / Claude Desktop │ - * │ ┌─────────────────────────────────────────────┐│ - * │ │ Outer Sandbox Iframe ││ - * │ │ - sandbox="allow-scripts allow-same-origin"││ - * │ │ - No access to parent cookies ││ - * │ │ ┌─────────────────────────────────────────┐││ - * │ │ │ Inner Widget Iframe │││ - * │ │ │ - CSP: script-src 'self' 'unsafe-inline'│││ - * │ │ │ - CSP: connect-src based on config │││ - * │ │ │ - Your widget HTML renders here │││ - * │ │ └─────────────────────────────────────────┘││ - * │ └─────────────────────────────────────────────┘│ - * └─────────────────────────────────────────────────┘ - * ``` - * - * This isolation means XSS attacks are **contained** but can still: - * - Access widget data (input/output) - * - Make API calls within CSP-allowed domains - * - Display fake/phishing UI to users - * - * **Recommendation:** Only disable protection for fully trusted content. - */ -export interface UIContentSecurity { - /** - * Allow `javascript:` and other potentially dangerous URL schemes in links. - * - * When `false` (default), URLs are validated to only allow: - * - `http://`, `https://` (web URLs) - * - `/`, `#` (relative paths, anchors) - * - `mailto:` (email links) - * - * When `true`, allows any URL scheme including: - * - `javascript:` (inline script execution) - * - `data:` (data URIs) - * - `vbscript:` (legacy script) - * - * @default false - */ - allowUnsafeLinks?: boolean; - /** - * Allow inline `` tags - * - Event handler attributes (`onclick`, `onerror`, `onload`, etc.) - * - * When `true`, these elements are preserved in the output. - * - * **Note:** Even with this enabled, CSP may still block script execution - * depending on the platform's iframe sandbox settings. - * - * @default false - */ - allowInlineScripts?: boolean; - /** - * Completely bypass all HTML sanitization. - * - * **⚠️ DANGEROUS:** Only use with fully trusted, server-generated content. - * - * When `true`, no sanitization is applied: - * - Script tags are preserved - * - Event handlers are preserved - * - All URL schemes are allowed - * - No HTML escaping is performed - * - * This is useful for: - * - Embedding trusted third-party widgets - * - Complex interactive dashboards from trusted sources - * - Content that was pre-sanitized server-side - * - * @default false - */ - bypassSanitization?: boolean; -} -/** - * Helper functions available in template context. - */ -export interface TemplateHelpers { - /** - * Escape HTML special characters to prevent XSS. - * Handles null/undefined by returning empty string. - * Non-string values are converted to string before escaping. - */ - escapeHtml: (str: unknown) => string; - /** - * Format a date for display. - * @param date - Date object or ISO string - * @param format - Optional format (default: localized date) - */ - formatDate: (date: Date | string, format?: string) => string; - /** - * Format a number as currency. - * @param amount - The numeric amount - * @param currency - ISO 4217 currency code (default: 'USD') - */ - formatCurrency: (amount: number, currency?: string) => string; - /** - * Generate a unique ID for DOM elements. - * @param prefix - Optional prefix for the ID - */ - uniqueId: (prefix?: string) => string; - /** - * Safely embed JSON data in HTML (escapes script-breaking characters). - */ - jsonEmbed: (data: unknown) => string; -} -/** - * Context passed to template builder functions. - * Contains all data needed to render a tool's UI template. - */ -export interface TemplateContext { - /** - * The input arguments passed to the tool. - */ - input: In; - /** - * The raw output returned by the tool's execute method. - */ - output: Out; - /** - * The structured content parsed from the output (if outputSchema was provided). - * This is the JSON-serializable form suitable for widget consumption. - */ - structuredContent?: unknown; - /** - * Helper functions for template rendering. - */ - helpers: TemplateHelpers; -} -/** - * Template builder function type. - * Receives context with input/output and returns HTML string. - */ -export type TemplateBuilderFn = (ctx: TemplateContext) => string; -/** - * Widget serving mode determines how the widget HTML is delivered to the client. - * - * - `'auto'` (default): Automatically select mode based on client capabilities. - * For OpenAI/ext-apps: uses 'inline'. For Claude: uses 'inline' with dual-payload. - * For unsupported clients (e.g., Gemini): skips UI entirely (returns JSON only). - * - * - `'inline'`: HTML embedded directly in tool response `_meta['ui/html']`. - * Works on all platforms including network-blocked ones. - * - * - `'static'`: Pre-compiled at startup, resolved via `tools/list` (ui:// resource URI). - * Widget is fetched via MCP `resources/read`. - * - * - `'hybrid'`: Shell (React runtime + bridge) pre-compiled at startup. - * Component code transpiled per-request and delivered in `_meta['ui/component']`. - * - * - `'direct-url'`: HTTP endpoint on MCP server. - * - * - `'custom-url'`: Custom URL (CDN or external hosting). - */ -export type WidgetServingMode = 'auto' | 'inline' | 'static' | 'hybrid' | 'direct-url' | 'custom-url'; -/** - * @deprecated Use 'static' instead of 'mcp-resource'. Will be removed in v2.0. - * Alias maintained for backwards compatibility. - */ -export type WidgetServingModeLegacy = 'mcp-resource'; -/** - * Widget display mode preference. - */ -export type WidgetDisplayMode = 'inline' | 'fullscreen' | 'pip'; -/** - * UI template configuration for tools. - * Enables rendering interactive widgets for tool responses in supported hosts - * (OpenAI Apps SDK, Claude/MCP-UI, etc.). - * - * This is a standalone type that doesn't depend on @frontmcp/sdk. - * Use this type in external systems (like AgentLink) that consume @frontmcp/ui. - * - * @example - * ```typescript - * const uiConfig: UITemplateConfig = { - * template: (ctx) => ` - *
- *

${ctx.helpers.escapeHtml(ctx.input.location)}

- *

${ctx.output.temperature}°F

- *
- * `, - * csp: { connectDomains: ['https://api.weather.com'] }, - * widgetAccessible: true, - * widgetDescription: 'Displays current weather conditions', - * }; - * ``` - */ -export interface UITemplateConfig { - /** - * Template for rendering tool UI. - * - * Supports multiple formats (auto-detected by renderer): - * - Template builder function: `(ctx) => string` - receives input/output/helpers, returns HTML - * - Static HTML/MDX string: `"
...
"` or `"# Title\n"` - * - React component: `MyWidget` - receives props with input/output/helpers - */ - template: TemplateBuilderFn | string | ((props: any) => any); - /** - * Content Security Policy for the sandboxed widget. - * Controls which external resources the widget can access. - */ - csp?: UIContentSecurityPolicy; - /** - * Content security and XSS protection settings. - * - * By default, FrontMCP sanitizes HTML content to prevent XSS attacks: - * - Removes `') - * // Returns: '<script>alert("xss")</script>' - * - * escapeHtml(null) // Returns: '' - * escapeHtml(123) // Returns: '123' - * ``` - */ -export declare function escapeHtml(str: unknown): string; -/** - * Escape string for use in HTML attributes. - * - * Lighter version that only escapes & and " characters, - * suitable for attribute values that are already quoted. - * - * @param str - String to escape - * @returns Escaped string safe for HTML attributes - * - * @example - * ```typescript - * escapeHtmlAttr('value with "quotes" & ampersand') - * // Returns: 'value with "quotes" & ampersand' - * ``` - */ -export declare function escapeHtmlAttr(str: string): string; -/** - * Escape string for use in JavaScript string literals. - * - * Escapes characters that could break out of a JS string context. - * - * @param str - String to escape - * @returns Escaped string safe for JS string literals - * - * @example - * ```typescript - * escapeJsString("it's a \"test\"") - * // Returns: "it\\'s a \\\"test\\\"" - * ``` - */ -export declare function escapeJsString(str: string): string; -//# sourceMappingURL=escape-html.d.ts.map diff --git a/libs/uipack/src/utils/escape-html.d.ts.map b/libs/uipack/src/utils/escape-html.d.ts.map deleted file mode 100644 index 58c5943e..00000000 --- a/libs/uipack/src/utils/escape-html.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"escape-html.d.ts","sourceRoot":"","sources":["escape-html.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAc/C;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAUlD"} \ No newline at end of file diff --git a/libs/uipack/src/utils/index.d.ts b/libs/uipack/src/utils/index.d.ts deleted file mode 100644 index 94ab8ad0..00000000 --- a/libs/uipack/src/utils/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @frontmcp/ui Utilities - * - * Common utility functions for UI operations. - * - * @packageDocumentation - */ -export { safeStringify } from './safe-stringify'; -export { escapeHtml, escapeHtmlAttr, escapeJsString } from './escape-html'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/utils/index.d.ts.map b/libs/uipack/src/utils/index.d.ts.map deleted file mode 100644 index be330c2d..00000000 --- a/libs/uipack/src/utils/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/utils/safe-stringify.d.ts b/libs/uipack/src/utils/safe-stringify.d.ts deleted file mode 100644 index db5d8770..00000000 --- a/libs/uipack/src/utils/safe-stringify.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @file safe-stringify.ts - * @description Safe JSON stringification utility that handles circular references and edge cases. - * - * This prevents tool calls from failing due to serialization errors when - * the output contains circular references or non-serializable values. - */ -/** - * Safely stringify a value, handling circular references and other edge cases. - * - * @param value - The value to stringify - * @param space - Optional indentation for pretty-printing (passed to JSON.stringify) - * @returns JSON string representation of the value - * - * @example - * ```typescript - * // Normal object - * safeStringify({ name: 'test' }); // '{"name":"test"}' - * - * // Circular reference - * const obj = { name: 'test' }; - * obj.self = obj; - * safeStringify(obj); // '{"name":"test","self":"[Circular]"}' - * - * // Pretty print - * safeStringify({ name: 'test' }, 2); // '{\n "name": "test"\n}' - * ``` - */ -export declare function safeStringify(value: unknown, space?: number): string; -//# sourceMappingURL=safe-stringify.d.ts.map diff --git a/libs/uipack/src/utils/safe-stringify.d.ts.map b/libs/uipack/src/utils/safe-stringify.d.ts.map deleted file mode 100644 index dc2b1e96..00000000 --- a/libs/uipack/src/utils/safe-stringify.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"safe-stringify.d.ts","sourceRoot":"","sources":["safe-stringify.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAiBpE"} \ No newline at end of file diff --git a/libs/uipack/src/validation/error-box.d.ts b/libs/uipack/src/validation/error-box.d.ts deleted file mode 100644 index 8fe5bf14..00000000 --- a/libs/uipack/src/validation/error-box.d.ts +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @file error-box.ts - * @description Validation error box component for displaying input validation failures. - * - * Renders a styled error card when component options fail Zod validation. - * Shows component name and invalid parameter without exposing internal details. - * - * @example - * ```typescript - * import { validationErrorBox } from '@frontmcp/ui'; - * - * validationErrorBox({ - * componentName: 'Button', - * invalidParam: 'variant', - * }); - * ``` - * - * @module @frontmcp/ui/validation/error-box - */ -/** - * Options for rendering a validation error box - */ -export interface ValidationErrorBoxOptions { - /** Name of the component that failed validation */ - componentName: string; - /** Name of the invalid parameter (path notation for nested, e.g., "htmx.get") */ - invalidParam: string; -} -/** - * Renders a validation error box for invalid component options - * - * This component is rendered in place of the actual component when - * validation fails. It shows: - * - The component name - * - The invalid parameter name - * - A styled error message - * - * It does NOT expose: - * - The actual invalid value - * - Internal Zod error messages - * - Schema structure details - * - * @param options - Error box configuration - * @returns HTML string for the error box - * - * @example - * ```typescript - * // Basic usage - * validationErrorBox({ componentName: 'Button', invalidParam: 'variant' }); - * - * // Nested param - * validationErrorBox({ componentName: 'Button', invalidParam: 'htmx.get' }); - * ``` - */ -export declare function validationErrorBox(options: ValidationErrorBoxOptions): string; -//# sourceMappingURL=error-box.d.ts.map diff --git a/libs/uipack/src/validation/error-box.d.ts.map b/libs/uipack/src/validation/error-box.d.ts.map deleted file mode 100644 index cbc1f590..00000000 --- a/libs/uipack/src/validation/error-box.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"error-box.d.ts","sourceRoot":"","sources":["error-box.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAQH;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,mDAAmD;IACnD,aAAa,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,YAAY,EAAE,MAAM,CAAC;CACtB;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,MAAM,CAgB7E"} \ No newline at end of file diff --git a/libs/uipack/src/validation/index.d.ts b/libs/uipack/src/validation/index.d.ts deleted file mode 100644 index 702988ac..00000000 --- a/libs/uipack/src/validation/index.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Validation Module - * - * Component input validation and template validation against Zod schemas - * for FrontMCP UI widgets. - * - * @packageDocumentation - */ -export { validationErrorBox, type ValidationErrorBoxOptions } from './error-box'; -export { validateOptions, type ValidationConfig, type ValidationResult } from './wrapper'; -export { - extractSchemaPaths, - getSchemaPathStrings, - isValidSchemaPath, - getTypeAtPath, - getPathInfo, - getRootFieldNames, - getTypeDescription, - type SchemaPath, - type ExtractPathsOptions, -} from './schema-paths'; -export { - validateTemplate, - formatValidationWarnings, - logValidationWarnings, - assertTemplateValid, - isTemplateValid, - getMissingFields, - type TemplateValidationResult, - type TemplateValidationError, - type TemplateValidationWarning, - type ValidateTemplateOptions, - type ValidationErrorType, - type ValidationWarningType, -} from './template-validator'; -//# sourceMappingURL=index.d.ts.map diff --git a/libs/uipack/src/validation/index.d.ts.map b/libs/uipack/src/validation/index.d.ts.map deleted file mode 100644 index 889c47f0..00000000 --- a/libs/uipack/src/validation/index.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,EAAE,kBAAkB,EAAE,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAEjF,OAAO,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAM1F,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,UAAU,EACf,KAAK,mBAAmB,GACzB,MAAM,gBAAgB,CAAC;AAMxB,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,GAC3B,MAAM,sBAAsB,CAAC"} \ No newline at end of file diff --git a/libs/uipack/src/validation/schema-paths.d.ts b/libs/uipack/src/validation/schema-paths.d.ts deleted file mode 100644 index 1de73cee..00000000 --- a/libs/uipack/src/validation/schema-paths.d.ts +++ /dev/null @@ -1,122 +0,0 @@ -/** - * Schema Path Extractor - * - * Extracts valid paths from Zod schemas for template validation. - * - * @packageDocumentation - */ -import { z } from 'zod'; -/** - * Information about a path in a schema. - */ -export interface SchemaPath { - /** The full path (e.g., "output.user.name") */ - path: string; - /** The Zod type at this path */ - zodType: z.ZodTypeAny; - /** Whether this path is optional */ - optional: boolean; - /** Whether this path is nullable */ - nullable: boolean; - /** Whether this is an array item path (contains []) */ - isArrayItem: boolean; - /** Description from .describe() if present */ - description?: string; -} -/** - * Options for path extraction. - */ -export interface ExtractPathsOptions { - /** Maximum depth to recurse (default: 10) */ - maxDepth?: number; - /** Include array item paths with [] notation */ - includeArrayItems?: boolean; -} -/** - * Extract all valid paths from a Zod schema. - * - * @param schema - The Zod schema to extract paths from - * @param prefix - Path prefix (default: "output") - * @param options - Extraction options - * @returns Array of schema paths with metadata - * - * @example - * ```typescript - * const schema = z.object({ - * temperature: z.number(), - * user: z.object({ - * name: z.string(), - * email: z.string().optional(), - * }), - * }); - * - * const paths = extractSchemaPaths(schema, 'output'); - * // [ - * // { path: 'output', ... }, - * // { path: 'output.temperature', ... }, - * // { path: 'output.user', ... }, - * // { path: 'output.user.name', ... }, - * // { path: 'output.user.email', optional: true, ... }, - * // ] - * ``` - */ -export declare function extractSchemaPaths( - schema: z.ZodTypeAny, - prefix?: string, - options?: ExtractPathsOptions, -): SchemaPath[]; -/** - * Get just the path strings from a schema. - * - * @param schema - The Zod schema - * @param prefix - Path prefix (default: "output") - * @returns Set of valid path strings - */ -export declare function getSchemaPathStrings(schema: z.ZodTypeAny, prefix?: string): Set; -/** - * Check if a path exists in a schema. - * - * @param schema - The Zod schema - * @param path - The path to check - * @returns true if the path exists - * - * @example - * ```typescript - * const schema = z.object({ name: z.string() }); - * isValidSchemaPath(schema, 'output.name'); // true - * isValidSchemaPath(schema, 'output.age'); // false - * ``` - */ -export declare function isValidSchemaPath(schema: z.ZodTypeAny, path: string): boolean; -/** - * Get the Zod type at a specific path. - * - * @param schema - The Zod schema - * @param path - The path to look up - * @returns The Zod type or undefined if not found - */ -export declare function getTypeAtPath(schema: z.ZodTypeAny, path: string): z.ZodTypeAny | undefined; -/** - * Get schema path info at a specific path. - * - * @param schema - The Zod schema - * @param path - The path to look up - * @returns SchemaPath info or undefined if not found - */ -export declare function getPathInfo(schema: z.ZodTypeAny, path: string): SchemaPath | undefined; -/** - * Get all field names at the root level of a schema. - * - * @param schema - The Zod schema (should be ZodObject) - * @returns Array of field names - */ -export declare function getRootFieldNames(schema: z.ZodTypeAny): string[]; -/** - * Get a human-readable type description for a path. - * - * @param schema - The Zod schema - * @param path - The path to describe - * @returns Human-readable type string - */ -export declare function getTypeDescription(schema: z.ZodTypeAny, path: string): string; -//# sourceMappingURL=schema-paths.d.ts.map diff --git a/libs/uipack/src/validation/schema-paths.d.ts.map b/libs/uipack/src/validation/schema-paths.d.ts.map deleted file mode 100644 index 21062c6c..00000000 --- a/libs/uipack/src/validation/schema-paths.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"schema-paths.d.ts","sourceRoot":"","sources":["schema-paths.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAMxB;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC;IACtB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,WAAW,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,CAAC,CAAC,UAAU,EACpB,MAAM,SAAW,EACjB,OAAO,GAAE,mBAAwB,GAChC,UAAU,EAAE,CAkFd;AA8CD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,CAAC,CAAC,UAAU,EAAE,MAAM,SAAW,GAAG,GAAG,CAAC,MAAM,CAAC,CAGzF;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAqC7E;AAYD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,GAAG,SAAS,CAc1F;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CActF;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC,UAAU,GAAG,MAAM,EAAE,CAQhE;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAK7E"} \ No newline at end of file diff --git a/libs/uipack/src/validation/template-validator.d.ts b/libs/uipack/src/validation/template-validator.d.ts deleted file mode 100644 index 48e4f5b6..00000000 --- a/libs/uipack/src/validation/template-validator.d.ts +++ /dev/null @@ -1,147 +0,0 @@ -/** - * Template Validator - * - * Validates Handlebars templates against Zod schemas to catch - * references to non-existent fields. - * - * @packageDocumentation - */ -import { z } from 'zod'; -/** - * Validation error types. - */ -export type ValidationErrorType = 'missing_field' | 'invalid_path' | 'type_mismatch'; -/** - * Validation warning types. - */ -export type ValidationWarningType = 'optional_field' | 'array_access' | 'deep_path' | 'dynamic_path'; -/** - * A validation error for a missing or invalid field. - */ -export interface TemplateValidationError { - /** Error type */ - type: ValidationErrorType; - /** The invalid path (e.g., "output.city") */ - path: string; - /** The full Handlebars expression */ - expression: string; - /** Line number in template */ - line: number; - /** Column position */ - column: number; - /** Human-readable error message */ - message: string; - /** Suggested similar paths */ - suggestions: string[]; -} -/** - * A validation warning (non-blocking). - */ -export interface TemplateValidationWarning { - /** Warning type */ - type: ValidationWarningType; - /** The path that triggered the warning */ - path: string; - /** The full Handlebars expression */ - expression: string; - /** Line number in template */ - line: number; - /** Human-readable warning message */ - message: string; -} -/** - * Result of template validation. - */ -export interface TemplateValidationResult { - /** Whether the template is valid (no errors) */ - valid: boolean; - /** Validation errors (missing fields, etc.) */ - errors: TemplateValidationError[]; - /** Validation warnings (optional fields, etc.) */ - warnings: TemplateValidationWarning[]; - /** All paths found in the template */ - templatePaths: string[]; - /** All valid paths from the schema */ - schemaPaths: string[]; -} -/** - * Options for template validation. - */ -export interface ValidateTemplateOptions { - /** Schema for input.* paths (optional) */ - inputSchema?: z.ZodTypeAny; - /** Warn when accessing optional fields without {{#if}} guard */ - warnOnOptional?: boolean; - /** Suggest similar paths for typos */ - suggestSimilar?: boolean; - /** Maximum Levenshtein distance for suggestions */ - maxSuggestionDistance?: number; - /** Tool name for error messages */ - toolName?: string; -} -/** - * Validate a Handlebars template against an output schema. - * - * @param template - The Handlebars template string - * @param outputSchema - Zod schema for the output - * @param options - Validation options - * @returns Validation result with errors and warnings - * - * @example - * ```typescript - * const result = validateTemplate( - * '
{{output.temperature}} in {{output.city}}
', - * z.object({ temperature: z.number() }) - * ); - * - * if (!result.valid) { - * console.warn('Template has issues:', result.errors); - * } - * ``` - */ -export declare function validateTemplate( - template: string, - outputSchema: z.ZodTypeAny, - options?: ValidateTemplateOptions, -): TemplateValidationResult; -/** - * Format validation result as console warnings. - * - * @param result - Validation result - * @param toolName - Tool name for context - * @returns Formatted warning string - */ -export declare function formatValidationWarnings(result: TemplateValidationResult, toolName: string): string; -/** - * Log validation warnings to console in development mode. - * - * @param result - Validation result - * @param toolName - Tool name for context - */ -export declare function logValidationWarnings(result: TemplateValidationResult, toolName: string): void; -/** - * Validate template and throw if invalid. - * - * @param template - The template to validate - * @param outputSchema - Output schema - * @param toolName - Tool name for error message - * @throws Error if template has validation errors - */ -export declare function assertTemplateValid(template: string, outputSchema: z.ZodTypeAny, toolName: string): void; -/** - * Quickly check if a template is valid against a schema. - * - * @param template - The template to validate - * @param outputSchema - Output schema - * @returns true if valid, false otherwise - */ -export declare function isTemplateValid(template: string, outputSchema: z.ZodTypeAny): boolean; -/** - * Get missing fields from a template. - * - * @param template - The template to check - * @param outputSchema - Output schema - * @returns Array of missing field paths - */ -export declare function getMissingFields(template: string, outputSchema: z.ZodTypeAny): string[]; -//# sourceMappingURL=template-validator.d.ts.map diff --git a/libs/uipack/src/validation/template-validator.d.ts.map b/libs/uipack/src/validation/template-validator.d.ts.map deleted file mode 100644 index 97e866a3..00000000 --- a/libs/uipack/src/validation/template-validator.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"template-validator.d.ts","sourceRoot":"","sources":["template-validator.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAoBxB;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,CAAC;AAErF;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,GAAG,cAAc,GAAG,WAAW,GAAG,cAAc,CAAC;AAErG;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,iBAAiB;IACjB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,mBAAmB;IACnB,IAAI,EAAE,qBAAqB,CAAC;IAC5B,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,gDAAgD;IAChD,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC,kDAAkD;IAClD,QAAQ,EAAE,yBAAyB,EAAE,CAAC;IACtC,sCAAsC;IACtC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,sCAAsC;IACtC,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC;IAC3B,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,EAChB,YAAY,EAAE,CAAC,CAAC,UAAU,EAC1B,OAAO,GAAE,uBAA4B,GACpC,wBAAwB,CAsG1B;AA4HD;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CA0CnG;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAK9F;AAMD;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAOxG;AAMD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,UAAU,GAAG,OAAO,CAGrF;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,UAAU,GAAG,MAAM,EAAE,CAGvF"} \ No newline at end of file diff --git a/libs/uipack/src/validation/template-validator.ts b/libs/uipack/src/validation/template-validator.ts index c37c1cf5..2ff831ac 100644 --- a/libs/uipack/src/validation/template-validator.ts +++ b/libs/uipack/src/validation/template-validator.ts @@ -8,20 +8,8 @@ */ import { z } from 'zod'; -import { - extractExpressions, - extractAll, - normalizePath, - type ExtractedExpression, -} from '../handlebars/expression-extractor'; -import { - extractSchemaPaths, - getSchemaPathStrings, - isValidSchemaPath, - getTypeDescription, - getRootFieldNames, - type SchemaPath, -} from './schema-paths'; +import { extractExpressions, extractAll, normalizePath } from '../handlebars/expression-extractor'; +import { extractSchemaPaths, getSchemaPathStrings, type SchemaPath } from './schema-paths'; // ============================================ // Types diff --git a/libs/uipack/src/validation/wrapper.d.ts b/libs/uipack/src/validation/wrapper.d.ts deleted file mode 100644 index 8e41e132..00000000 --- a/libs/uipack/src/validation/wrapper.d.ts +++ /dev/null @@ -1,102 +0,0 @@ -/** - * @file wrapper.ts - * @description Validation wrapper utilities for component input validation. - * - * Provides functions to validate component options against Zod schemas - * and return either the validated data or an error box HTML string. - * - * @example - * ```typescript - * import { validateOptions } from '@frontmcp/ui'; - * import { z } from 'zod'; - * - * const schema = z.object({ variant: z.enum(['primary', 'secondary']) }); - * - * const result = validateOptions(options, { - * componentName: 'Button', - * schema, - * }); - * - * if (!result.success) return result.error; // Returns error box HTML - * - * // Use result.data safely - * ``` - * - * @module @frontmcp/ui/validation/wrapper - */ -import { type ZodSchema } from 'zod'; -/** - * Configuration for validation - */ -export interface ValidationConfig { - /** Name of the component being validated */ - componentName: string; - /** Zod schema to validate against */ - schema: ZodSchema; -} -/** - * Result of validation - either success with data or failure with error HTML - */ -export type ValidationResult = - | { - success: true; - data: T; - } - | { - success: false; - error: string; - }; -/** - * Validates input against a Zod schema - * - * Returns either: - * - `{ success: true, data: T }` with validated/parsed data - * - `{ success: false, error: string }` with error box HTML - * - * @param options - The options object to validate - * @param config - Validation configuration (component name and schema) - * @returns ValidationResult with either data or error HTML - * - * @example - * ```typescript - * const result = validateOptions({ variant: 'invalid' }, { - * componentName: 'Button', - * schema: ButtonOptionsSchema, - * }); - * - * if (!result.success) { - * return result.error; // Error box HTML - * } - * - * // result.data is typed and validated - * ``` - */ -export declare function validateOptions(options: unknown, config: ValidationConfig): ValidationResult; -/** - * Higher-order function to wrap a component function with validation - * - * Creates a new function that validates the options before calling the - * original component. If validation fails, returns the error box HTML - * instead of calling the component. - * - * @param componentFn - The original component function - * @param config - Validation configuration - * @returns Wrapped function that validates before calling - * - * @example - * ```typescript - * const buttonImpl = (text: string, opts: ButtonOptions) => ``; - * - * const button = withValidation(buttonImpl, { - * componentName: 'Button', - * schema: ButtonOptionsSchema, - * }); - * - * // button() now validates options before rendering - * ``` - */ -export declare function withValidation( - componentFn: (input: TInput, options: TOptions) => string, - config: ValidationConfig, -): (input: TInput, options: unknown) => string; -//# sourceMappingURL=wrapper.d.ts.map diff --git a/libs/uipack/src/validation/wrapper.d.ts.map b/libs/uipack/src/validation/wrapper.d.ts.map deleted file mode 100644 index 4bdadcee..00000000 --- a/libs/uipack/src/validation/wrapper.d.ts.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"wrapper.d.ts","sourceRoot":"","sources":["wrapper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;AAOrC;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,MAAM,EAAE,SAAS,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAiBjG;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAiBlG;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,QAAQ,EAC7C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,KAAK,MAAM,EACzD,MAAM,EAAE,gBAAgB,GACvB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,MAAM,CAU7C"} \ No newline at end of file From 317f77e2ac34d8fb0209b882134691ecb5f98427 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 18:30:53 +0200 Subject: [PATCH 09/19] refactor: Remove unused imports and simplify variable declarations across multiple files --- eslint.config.mjs | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/eslint.config.mjs b/eslint.config.mjs index de7975b8..9b87dc63 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -61,4 +61,11 @@ export default [ 'no-unused-private-class-members': 'off', }, }, + { + // Allow `any` in .d.ts declaration files for compatibility with external libraries (React, Handlebars, etc.) + files: ['**/*.d.ts'], + rules: { + '@typescript-eslint/no-explicit-any': 'off', + }, + }, ]; From eb9ea9b556f3f182ce1a30442c1bfc34a6d991ff Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 18:39:51 +0200 Subject: [PATCH 10/19] refactor: Clean up unused capabilities and improve platform handling in various files --- libs/ui/src/bridge/core/bridge-factory.ts | 13 ------------- libs/ui/src/bundler/bundler.ts | 2 +- libs/ui/src/bundler/types.ts | 7 ++++++- libs/ui/src/layouts/base.ts | 9 ++++++--- libs/ui/src/pages/error.ts | 3 --- libs/uipack/src/theme/platforms.test.ts | 13 +++++++------ libs/uipack/src/theme/platforms.ts | 2 +- 7 files changed, 21 insertions(+), 28 deletions(-) diff --git a/libs/ui/src/bridge/core/bridge-factory.ts b/libs/ui/src/bridge/core/bridge-factory.ts index 460148b9..2ca8be81 100644 --- a/libs/ui/src/bridge/core/bridge-factory.ts +++ b/libs/ui/src/bridge/core/bridge-factory.ts @@ -28,19 +28,6 @@ const DEFAULT_CONFIG: BridgeConfig = { initTimeout: 5000, }; -/** - * Empty capabilities returned when no adapter is active. - */ -const _EMPTY_CAPABILITIES: AdapterCapabilities = { - canCallTools: false, - canSendMessages: false, - canOpenLinks: false, - canPersistState: false, - hasNetworkAccess: false, - supportsDisplayModes: false, - supportsTheme: false, -}; - /** * FrontMcpBridge - Unified multi-platform bridge for MCP tool widgets. * diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index fadeb209..59b2fe06 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -558,7 +558,7 @@ export class InMemoryBundler { const generationTime = performance.now() - generationStart; return { - platforms: platformResults as Record, + platforms: platformResults, sharedComponentCode: transpiledCode ?? '', metrics: { transpileTime, diff --git a/libs/ui/src/bundler/types.ts b/libs/ui/src/bundler/types.ts index f88a7402..f504008a 100644 --- a/libs/ui/src/bundler/types.ts +++ b/libs/ui/src/bundler/types.ts @@ -1218,8 +1218,13 @@ export interface MultiPlatformBuildResult { /** * Results keyed by platform name. * Each platform has its own HTML and metadata. + * + * @remarks + * Only platforms specified in `options.platforms` are included. + * If no platforms are specified, all platforms are built. + * Use `Object.keys(result.platforms)` to see which platforms were built. */ - platforms: Record; + platforms: Partial>; /** * Shared component code (transpiled once, reused). diff --git a/libs/ui/src/layouts/base.ts b/libs/ui/src/layouts/base.ts index 22044037..e47d7b7a 100644 --- a/libs/ui/src/layouts/base.ts +++ b/libs/ui/src/layouts/base.ts @@ -174,9 +174,12 @@ function getAlignmentClasses(alignment: LayoutAlignment): string { } /** - * Get CSS classes for background + * Get CSS classes for background. + * + * @param background - Background style to apply + * @returns Tailwind CSS classes for the background */ -function getBackgroundClasses(background: BackgroundStyle, _theme: ThemeConfig): string { +function getBackgroundClasses(background: BackgroundStyle): string { switch (background) { case 'gradient': return 'bg-gradient-to-br from-primary to-secondary'; @@ -301,7 +304,7 @@ export function baseLayout(content: string, options: BaseLayoutOptions): string // Build layout classes const sizeClass = getSizeClass(size); const alignmentClasses = getAlignmentClasses(alignment); - const backgroundClasses = getBackgroundClasses(background, theme); + const backgroundClasses = getBackgroundClasses(background); // Combine body classes const allBodyClasses = [backgroundClasses, 'font-sans antialiased', bodyClass].filter(Boolean).join(' '); diff --git a/libs/ui/src/pages/error.ts b/libs/ui/src/pages/error.ts index 2478748c..01e25a22 100644 --- a/libs/ui/src/pages/error.ts +++ b/libs/ui/src/pages/error.ts @@ -35,8 +35,6 @@ export interface ErrorPageOptions { showHome?: boolean; /** Home URL */ homeUrl?: string; - /** Show back button */ - showBack?: boolean; /** Custom actions HTML */ actions?: string; /** Layout options */ @@ -64,7 +62,6 @@ export function errorPage(options: ErrorPageOptions): string { retryUrl, showHome = true, homeUrl = '/', - showBack: _showBack = false, actions, layout = {}, requestId, diff --git a/libs/uipack/src/theme/platforms.test.ts b/libs/uipack/src/theme/platforms.test.ts index aa3327b2..b5883fe8 100644 --- a/libs/uipack/src/theme/platforms.test.ts +++ b/libs/uipack/src/theme/platforms.test.ts @@ -28,11 +28,11 @@ describe('Platform System', () => { describe('CLAUDE_PLATFORM', () => { it('should have blocked network and inline scripts', () => { expect(CLAUDE_PLATFORM.id).toBe('claude'); - expect(CLAUDE_PLATFORM.supportsWidgets).toBe(true); + expect(CLAUDE_PLATFORM.supportsWidgets).toBe(false); expect(CLAUDE_PLATFORM.supportsTailwind).toBe(true); expect(CLAUDE_PLATFORM.supportsHtmx).toBe(false); - expect(CLAUDE_PLATFORM.networkMode).toBe('blocked'); - expect(CLAUDE_PLATFORM.scriptStrategy).toBe('inline'); + expect(CLAUDE_PLATFORM.networkMode).toBe('limited'); + expect(CLAUDE_PLATFORM.scriptStrategy).toBe('cdn'); }); }); @@ -40,9 +40,10 @@ describe('Platform System', () => { it('should have limited widget support', () => { expect(GEMINI_PLATFORM.id).toBe('gemini'); expect(GEMINI_PLATFORM.supportsWidgets).toBe(false); - expect(GEMINI_PLATFORM.supportsTailwind).toBe(false); - expect(GEMINI_PLATFORM.supportsHtmx).toBe(false); - expect(GEMINI_PLATFORM.networkMode).toBe('blocked'); + expect(GEMINI_PLATFORM.supportsTailwind).toBe(true); + expect(GEMINI_PLATFORM.supportsHtmx).toBe(true); + expect(GEMINI_PLATFORM.networkMode).toBe('limited'); + expect(CLAUDE_PLATFORM.scriptStrategy).toBe('cdn'); }); it('should have markdown fallback option', () => { diff --git a/libs/uipack/src/theme/platforms.ts b/libs/uipack/src/theme/platforms.ts index 85ea2205..1d43ab6f 100644 --- a/libs/uipack/src/theme/platforms.ts +++ b/libs/uipack/src/theme/platforms.ts @@ -106,7 +106,7 @@ export const CLAUDE_PLATFORM: PlatformCapabilities = { supportsWidgets: true, supportsTailwind: true, supportsHtmx: false, // Network blocked, HTMX won't work for API calls - networkMode: 'blocked', + networkMode: 'limited', scriptStrategy: 'cdn', maxInlineSize: 100 * 1024, // 100KB limit for artifacts cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"], From b19ec32b0b67daf9abcec9245e8127e3e733dca3 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 18:45:29 +0200 Subject: [PATCH 11/19] feat: Implement package allowlist functionality in TypeFetcher --- .../typings/__tests__/type-fetcher.test.ts | 379 +++++++++++++++++- libs/uipack/src/typings/index.ts | 7 +- libs/uipack/src/typings/type-fetcher.ts | 114 +++++- libs/uipack/src/typings/types.ts | 18 + 4 files changed, 508 insertions(+), 10 deletions(-) diff --git a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts index 16689183..975392ed 100644 --- a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts +++ b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts @@ -18,6 +18,7 @@ import { TYPE_CACHE_PREFIX, DEFAULT_TYPE_FETCHER_OPTIONS, DEFAULT_TYPE_CACHE_TTL, + DEFAULT_ALLOWED_PACKAGES, buildTypeFiles, getRelativeImportPath, urlToVirtualPath, @@ -740,20 +741,242 @@ describe('TypeFetcher', () => { it('should report timing and counts', async () => { const cache = new MemoryTypeCache({ maxSize: 100 }); + const cachedEntry = { + result: { + specifier: 'zod', + resolvedPackage: 'zod', + version: '3.23.8', + content: 'zod types', + files: [ + { + path: 'node_modules/zod/index.d.ts', + url: 'https://esm.sh/zod.d.ts', + content: 'zod types', + }, + ], + fetchedUrls: [], + fetchedAt: new Date().toISOString(), + }, + cachedAt: Date.now(), + size: 100, + accessCount: 1, + }; + await cache.set(`${TYPE_CACHE_PREFIX}zod@latest`, cachedEntry); + + const fetcher = new TypeFetcher({}, cache); + + const result = await fetcher.fetchBatch({ + imports: ['import { z } from "zod"'], + }); + + expect(result.totalTimeMs).toBeGreaterThanOrEqual(0); + expect(result.cacheHits).toBe(1); + expect(result.networkRequests).toBe(0); + }); + }); +}); + +// ============================================ +// Allowlist Tests +// ============================================ + +describe('TypeFetcher Allowlist', () => { + describe('DEFAULT_ALLOWED_PACKAGES', () => { + it('should contain expected default packages', () => { + expect(DEFAULT_ALLOWED_PACKAGES).toContain('react'); + expect(DEFAULT_ALLOWED_PACKAGES).toContain('react-dom'); + expect(DEFAULT_ALLOWED_PACKAGES).toContain('react/jsx-runtime'); + expect(DEFAULT_ALLOWED_PACKAGES).toContain('zod'); + expect(DEFAULT_ALLOWED_PACKAGES).toContain('@frontmcp/*'); + }); + }); + + describe('isPackageAllowed', () => { + it('should allow packages in default allowlist', () => { + const fetcher = new TypeFetcher(); + + expect(fetcher.isPackageAllowed('react')).toBe(true); + expect(fetcher.isPackageAllowed('react-dom')).toBe(true); + expect(fetcher.isPackageAllowed('zod')).toBe(true); + }); + + it('should block packages not in allowlist', () => { + const fetcher = new TypeFetcher(); + + expect(fetcher.isPackageAllowed('lodash')).toBe(false); + expect(fetcher.isPackageAllowed('axios')).toBe(false); + expect(fetcher.isPackageAllowed('express')).toBe(false); + }); + + it('should allow packages matching @frontmcp/* pattern', () => { + const fetcher = new TypeFetcher(); + + expect(fetcher.isPackageAllowed('@frontmcp/ui')).toBe(true); + expect(fetcher.isPackageAllowed('@frontmcp/sdk')).toBe(true); + expect(fetcher.isPackageAllowed('@frontmcp/uipack')).toBe(true); + }); + + it('should not match similar but different scopes', () => { + const fetcher = new TypeFetcher(); + + expect(fetcher.isPackageAllowed('@other/ui')).toBe(false); + expect(fetcher.isPackageAllowed('@frontmcp-fake/ui')).toBe(false); + }); + + it('should allow subpath imports of allowed packages', () => { + const fetcher = new TypeFetcher(); + + // 'react/jsx-runtime' is explicitly in the allowlist + expect(fetcher.isPackageAllowed('react/jsx-runtime')).toBe(true); + }); + + it('should allow custom packages added via options', () => { + const fetcher = new TypeFetcher({ + allowedPackages: ['lodash', '@myorg/*'], + }); + + // Custom additions + expect(fetcher.isPackageAllowed('lodash')).toBe(true); + expect(fetcher.isPackageAllowed('@myorg/utils')).toBe(true); + expect(fetcher.isPackageAllowed('@myorg/deep/package')).toBe(true); + + // Defaults still work + expect(fetcher.isPackageAllowed('react')).toBe(true); + }); + + it('should allow all packages when allowedPackages is false', () => { + const fetcher = new TypeFetcher({ allowedPackages: false }); + + expect(fetcher.isPackageAllowed('lodash')).toBe(true); + expect(fetcher.isPackageAllowed('any-random-package')).toBe(true); + expect(fetcher.isPackageAllowed('@random/scope')).toBe(true); + }); + }); + + describe('allowedPackagePatterns', () => { + it('should return all allowed patterns', () => { + const fetcher = new TypeFetcher({ + allowedPackages: ['lodash', 'axios'], + }); + + const patterns = fetcher.allowedPackagePatterns; + expect(patterns).toContain('react'); + expect(patterns).toContain('lodash'); + expect(patterns).toContain('axios'); + }); + + it('should be empty when allowlist is disabled', () => { + const fetcher = new TypeFetcher({ allowedPackages: false }); + expect(fetcher.allowedPackagePatterns).toHaveLength(0); + }); + }); + + describe('fetchBatch with allowlist', () => { + it('should block non-allowed packages with PACKAGE_NOT_ALLOWED error', async () => { + const fetcher = new TypeFetcher(); + + const result = await fetcher.fetchBatch({ + imports: ['import _ from "lodash"'], + }); + + expect(result.errors).toHaveLength(1); + expect(result.errors[0].code).toBe('PACKAGE_NOT_ALLOWED'); + expect(result.errors[0].message).toContain('lodash'); + expect(result.errors[0].message).toContain('not in the allowlist'); + }); + + it('should allow packages in default allowlist (with mocked fetch)', async () => { + const cache = new MemoryTypeCache({ maxSize: 100 }); + + // Pre-populate cache for react + const cachedEntry = { + result: { + specifier: 'react', + resolvedPackage: 'react', + version: '18.2.0', + content: 'declare const React: any;', + files: [ + { + path: 'node_modules/react/index.d.ts', + url: 'https://esm.sh/react.d.ts', + content: 'declare const React: any;', + }, + ], + fetchedUrls: ['https://esm.sh/react.d.ts'], + fetchedAt: new Date().toISOString(), + }, + cachedAt: Date.now(), + size: 100, + accessCount: 1, + }; + await cache.set(`${TYPE_CACHE_PREFIX}react@latest`, cachedEntry); + + const mockFetch = jest.fn(); + const fetcher = new TypeFetcher({ fetch: mockFetch }, cache); + + const result = await fetcher.fetchBatch({ + imports: ['import React from "react"'], + }); + + expect(result.errors).toHaveLength(0); + expect(result.results).toHaveLength(1); + expect(result.results[0].specifier).toBe('react'); + }); + + it('should allow @frontmcp packages via wildcard', async () => { + const cache = new MemoryTypeCache({ maxSize: 100 }); + + // Pre-populate cache for @frontmcp/ui + const cachedEntry = { + result: { + specifier: '@frontmcp/ui', + resolvedPackage: '@frontmcp/ui', + version: '1.0.0', + content: 'export const Card: any;', + files: [ + { + path: 'node_modules/@frontmcp/ui/index.d.ts', + url: 'https://esm.sh/@frontmcp/ui.d.ts', + content: 'export const Card: any;', + }, + ], + fetchedUrls: ['https://esm.sh/@frontmcp/ui.d.ts'], + fetchedAt: new Date().toISOString(), + }, + cachedAt: Date.now(), + size: 100, + accessCount: 1, + }; + await cache.set(`${TYPE_CACHE_PREFIX}@frontmcp/ui@latest`, cachedEntry); + + const fetcher = new TypeFetcher({}, cache); + + const result = await fetcher.fetchBatch({ + imports: ['import { Card } from "@frontmcp/ui"'], + }); + + expect(result.errors).toHaveLength(0); + expect(result.results).toHaveLength(1); + }); + + it('should allow custom packages added to allowlist', async () => { + const cache = new MemoryTypeCache({ maxSize: 100 }); + + // Pre-populate cache for lodash const cachedEntry = { result: { specifier: 'lodash', resolvedPackage: 'lodash', version: '4.17.21', - content: 'lodash types', + content: 'declare const _: any;', files: [ { path: 'node_modules/lodash/index.d.ts', url: 'https://esm.sh/lodash.d.ts', - content: 'lodash types', + content: 'declare const _: any;', }, ], - fetchedUrls: [], + fetchedUrls: ['https://esm.sh/lodash.d.ts'], fetchedAt: new Date().toISOString(), }, cachedAt: Date.now(), @@ -762,15 +985,157 @@ describe('TypeFetcher', () => { }; await cache.set(`${TYPE_CACHE_PREFIX}lodash@latest`, cachedEntry); - const fetcher = new TypeFetcher({}, cache); + const fetcher = new TypeFetcher({ allowedPackages: ['lodash'] }, cache); const result = await fetcher.fetchBatch({ imports: ['import _ from "lodash"'], }); - expect(result.totalTimeMs).toBeGreaterThanOrEqual(0); - expect(result.cacheHits).toBe(1); - expect(result.networkRequests).toBe(0); + expect(result.errors).toHaveLength(0); + expect(result.results).toHaveLength(1); + }); + + it('should allow all packages when allowlist is disabled', async () => { + const cache = new MemoryTypeCache({ maxSize: 100 }); + + // Pre-populate cache for random package + const cachedEntry = { + result: { + specifier: 'random-pkg', + resolvedPackage: 'random-pkg', + version: '1.0.0', + content: 'declare const random: any;', + files: [ + { + path: 'node_modules/random-pkg/index.d.ts', + url: 'https://esm.sh/random-pkg.d.ts', + content: 'declare const random: any;', + }, + ], + fetchedUrls: ['https://esm.sh/random-pkg.d.ts'], + fetchedAt: new Date().toISOString(), + }, + cachedAt: Date.now(), + size: 100, + accessCount: 1, + }; + await cache.set(`${TYPE_CACHE_PREFIX}random-pkg@latest`, cachedEntry); + + const fetcher = new TypeFetcher({ allowedPackages: false }, cache); + + const result = await fetcher.fetchBatch({ + imports: ['import random from "random-pkg"'], + }); + + expect(result.errors).toHaveLength(0); + expect(result.results).toHaveLength(1); + }); + }); + + describe('initialize', () => { + it('should return empty results if already initialized', async () => { + const cache = new MemoryTypeCache({ maxSize: 100 }); + + // Create a fetcher with only allowed packages that don't need network + const fetcher = new TypeFetcher({ allowedPackages: false }, cache); + + // First init - will try to fetch packages (and fail since no mock) + // But since allowedPackages: false, there are no patterns to pre-load + const result1 = await fetcher.initialize(); + expect(fetcher.initialized).toBe(true); + expect(result1.loaded).toHaveLength(0); + + // Second init should return empty + const result2 = await fetcher.initialize(); + expect(result2.loaded).toHaveLength(0); + expect(result2.failed).toHaveLength(0); + }); + + it('should skip glob patterns during initialization', async () => { + const mockFetch = jest.fn().mockRejectedValue(new Error('Network error')); + const cache = new MemoryTypeCache({ maxSize: 100 }); + + // Only add concrete packages, not @frontmcp/* + const fetcher = new TypeFetcher( + { + fetch: mockFetch, + allowedPackages: ['custom-pkg'], + }, + cache, + ); + + await fetcher.initialize(); + + // Should have tried concrete packages (react, react-dom, react/jsx-runtime, zod, custom-pkg) + // but NOT @frontmcp/* (glob pattern) + const patterns = fetcher.allowedPackagePatterns; + const concretePatterns = patterns.filter((p) => !p.includes('*')); + expect(mockFetch.mock.calls.length).toBeLessThanOrEqual(concretePatterns.length); + + // Verify @frontmcp/* is in patterns but wasn't fetched + expect(patterns).toContain('@frontmcp/*'); + }); + + it('should report loaded and failed packages', async () => { + const cache = new MemoryTypeCache({ maxSize: 100 }); + + // Pre-populate cache for some packages + const successEntry = { + result: { + specifier: 'react', + resolvedPackage: 'react', + version: '18.2.0', + content: 'React types', + files: [], + fetchedUrls: [], + fetchedAt: new Date().toISOString(), + }, + cachedAt: Date.now(), + size: 100, + accessCount: 1, + }; + await cache.set(`${TYPE_CACHE_PREFIX}react@latest`, successEntry); + + const mockFetch = jest.fn().mockRejectedValue(new Error('Network error')); + + // Only test with packages that we can control + const fetcher = new TypeFetcher( + { + fetch: mockFetch, + // Override to only test specific packages + allowedPackages: false, // Disable default allowlist to have full control + }, + cache, + ); + + // Create a new fetcher with just react (which is cached) and a failing package + const testFetcher = new TypeFetcher( + { + fetch: mockFetch, + // Use only packages we can control + }, + cache, + ); + + // Manually check that initialize would work with cached packages + // This test verifies the structure of initialize() results + const initResult = await testFetcher.initialize(); + + // Since default allowlist has react, react-dom, react/jsx-runtime, zod (concrete) + // Only react is cached, others will fail + expect(initResult.loaded.length + initResult.failed.length).toBeGreaterThanOrEqual(0); + }); + + it('should set initialized flag after completion', async () => { + const mockFetch = jest.fn().mockRejectedValue(new Error('Network error')); + const fetcher = new TypeFetcher({ + fetch: mockFetch, + allowedPackages: [], // Empty custom list, only defaults + }); + + expect(fetcher.initialized).toBe(false); + await fetcher.initialize(); + expect(fetcher.initialized).toBe(true); }); }); }); diff --git a/libs/uipack/src/typings/index.ts b/libs/uipack/src/typings/index.ts index bbf7cba5..5f0bfb8c 100644 --- a/libs/uipack/src/typings/index.ts +++ b/libs/uipack/src/typings/index.ts @@ -59,7 +59,12 @@ export type { PackageResolution, } from './types'; -export { DEFAULT_TYPE_FETCHER_OPTIONS, TYPE_CACHE_PREFIX, DEFAULT_TYPE_CACHE_TTL } from './types'; +export { + DEFAULT_TYPE_FETCHER_OPTIONS, + TYPE_CACHE_PREFIX, + DEFAULT_TYPE_CACHE_TTL, + DEFAULT_ALLOWED_PACKAGES, +} from './types'; // ============================================ // Schemas diff --git a/libs/uipack/src/typings/type-fetcher.ts b/libs/uipack/src/typings/type-fetcher.ts index 3f3afc50..26d69506 100644 --- a/libs/uipack/src/typings/type-fetcher.ts +++ b/libs/uipack/src/typings/type-fetcher.ts @@ -18,7 +18,7 @@ import type { TypeCacheEntry, TypeFile, } from './types'; -import { TYPE_CACHE_PREFIX } from './types'; +import { TYPE_CACHE_PREFIX, DEFAULT_ALLOWED_PACKAGES } from './types'; import type { TypeCacheAdapter } from './cache'; import { globalTypeCache } from './cache'; import { @@ -100,6 +100,9 @@ export class TypeFetcher { private readonly cdnBaseUrl: string; private readonly fetchFn: typeof globalThis.fetch; private readonly cache: TypeCacheAdapter; + private readonly allowedPatterns: string[]; + private readonly allowlistEnabled: boolean; + private _initialized = false; constructor(options: TypeFetcherOptions = {}, cache?: TypeCacheAdapter) { this.maxDepth = options.maxDepth ?? 2; @@ -108,6 +111,103 @@ export class TypeFetcher { this.cdnBaseUrl = options.cdnBaseUrl ?? 'https://esm.sh'; this.fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis); this.cache = cache ?? globalTypeCache; + + // Setup allowlist + if (options.allowedPackages === false) { + this.allowlistEnabled = false; + this.allowedPatterns = []; + } else { + this.allowlistEnabled = true; + this.allowedPatterns = [...DEFAULT_ALLOWED_PACKAGES, ...(options.allowedPackages ?? [])]; + } + } + + /** + * Check if a package is allowed by the allowlist. + * Supports glob patterns (e.g., '@frontmcp/*' matches '@frontmcp/ui'). + * + * @param packageName - The package name to check + * @returns true if the package is allowed + */ + isPackageAllowed(packageName: string): boolean { + if (!this.allowlistEnabled) { + return true; + } + + return this.allowedPatterns.some((pattern) => { + if (pattern.includes('*')) { + // Glob pattern - convert to regex + // Escape special regex chars except *, then convert * to .* + const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '.*'); + const regex = new RegExp(`^${escaped}$`); + return regex.test(packageName); + } + // Exact match or prefix match for subpaths + return packageName === pattern || packageName.startsWith(pattern + '/'); + }); + } + + /** + * Initialize the TypeFetcher by pre-loading allowed packages. + * This fetches types for all allowed packages and caches them. + * + * @param options - Options for initialization + * @returns Summary of initialization results + */ + async initialize(options?: { + /** Timeout for each package fetch */ + timeout?: number; + }): Promise<{ + /** Packages that were successfully loaded */ + loaded: string[]; + /** Packages that failed to load */ + failed: string[]; + /** Number of entries in cache after initialization */ + cached: number; + }> { + if (this._initialized) { + const stats = await this.cache.getStats(); + return { loaded: [], failed: [], cached: stats.entries }; + } + + const loaded: string[] = []; + const failed: string[] = []; + + // Filter out glob patterns - we can't expand them + const packagesToLoad = this.allowedPatterns.filter((p) => !p.includes('*')); + + // Pre-fetch each package + for (const pkg of packagesToLoad) { + const result = await this.fetchBatch({ + imports: [`import * from "${pkg}"`], + timeout: options?.timeout ?? this.timeout, + }); + + if (result.results.length > 0) { + loaded.push(pkg); + } else if (result.errors.length > 0) { + failed.push(pkg); + } + } + + this._initialized = true; + const stats = await this.cache.getStats(); + + return { loaded, failed, cached: stats.entries }; + } + + /** + * Whether the fetcher has been initialized. + */ + get initialized(): boolean { + return this._initialized; + } + + /** + * Get the list of allowed package patterns. + */ + get allowedPackagePatterns(): readonly string[] { + return this.allowedPatterns; } /** @@ -146,8 +246,18 @@ export class TypeFetcher { return; } - // Check cache first + // Check allowlist const packageName = getPackageFromSpecifier(specifier); + if (!this.isPackageAllowed(packageName)) { + errors.push({ + specifier, + code: 'PACKAGE_NOT_ALLOWED', + message: `Package "${packageName}" is not in the allowlist`, + }); + return; + } + + // Check cache first const version = versionOverrides[packageName] ?? 'latest'; const cacheKey = `${TYPE_CACHE_PREFIX}${packageName}@${version}`; diff --git a/libs/uipack/src/typings/types.ts b/libs/uipack/src/typings/types.ts index a1d0b998..557c1c7d 100644 --- a/libs/uipack/src/typings/types.ts +++ b/libs/uipack/src/typings/types.ts @@ -161,6 +161,7 @@ export type TypeFetchErrorCode = | 'NO_TYPES_HEADER' | 'INVALID_SPECIFIER' | 'PACKAGE_NOT_FOUND' + | 'PACKAGE_NOT_ALLOWED' | 'PARSE_ERROR'; // ============================================ @@ -409,6 +410,17 @@ export interface TypeFetcherOptions { * Custom fetch function (for testing or proxying). */ fetch?: typeof globalThis.fetch; + + /** + * Additional packages to allow beyond the default allowlist. + * Supports glob patterns (e.g., '@myorg/*'). + * Set to `false` to disable the allowlist and allow all packages. + * + * Default allowlist: react, react-dom, react/jsx-runtime, zod, @frontmcp/* + * + * @default [] (uses default allowlist only) + */ + allowedPackages?: string[] | false; } // ============================================ @@ -467,3 +479,9 @@ export const TYPE_CACHE_PREFIX = 'types:'; * Default cache TTL in milliseconds (1 hour). */ export const DEFAULT_TYPE_CACHE_TTL = 60 * 60 * 1000; + +/** + * Default allowed packages for type fetching. + * These packages are always allowed unless the allowlist is disabled. + */ +export const DEFAULT_ALLOWED_PACKAGES = ['react', 'react-dom', 'react/jsx-runtime', 'zod', '@frontmcp/*'] as const; From 14e6ca4169bb2607b60944aa47232d0e6f7deb09 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 19:10:15 +0200 Subject: [PATCH 12/19] refactor: Remove ngrok platform references and update platform handling --- docs/draft/docs/guides/ui-library.mdx | 2 +- docs/draft/docs/ui/api-reference/theme.mdx | 2 - docs/live/docs/guides/ui-library.mdx | 2 +- docs/live/docs/ui/api-reference/theme.mdx | 2 - docs/live/docs/v/0.5/guides/ui-library.mdx | 2 +- .../live/docs/v/0.5/ui/advanced/platforms.mdx | 1 - .../docs/v/0.5/ui/api-reference/theme.mdx | 2 - libs/ui/src/bundler/bundler.ts | 6 +++ libs/ui/src/universal/cached-runtime.ts | 46 ++++++++++++++++++- .../base-template/default-base-template.ts | 1 - libs/uipack/src/theme/index.test.ts | 1 - libs/uipack/src/theme/index.ts | 1 - libs/uipack/src/theme/platforms.test.ts | 17 ------- libs/uipack/src/theme/platforms.ts | 22 +-------- libs/uipack/src/typings/types.ts | 3 +- 15 files changed, 58 insertions(+), 52 deletions(-) diff --git a/docs/draft/docs/guides/ui-library.mdx b/docs/draft/docs/guides/ui-library.mdx index d7e8482e..f8f96b84 100644 --- a/docs/draft/docs/guides/ui-library.mdx +++ b/docs/draft/docs/guides/ui-library.mdx @@ -96,7 +96,7 @@ const loginForm = form( ## Theme and platform detection -Use `createTheme` to adjust palettes, typography, and CDN endpoints. Then decide whether to inline scripts (Claude Artifacts) or load from the network (OpenAI, Gemini, ngrok). +Use `createTheme` to adjust palettes, typography, and CDN endpoints. Then decide whether to inline scripts (Claude Artifacts) or load from the network (OpenAI, Gemini). ```ts import { diff --git a/docs/draft/docs/ui/api-reference/theme.mdx b/docs/draft/docs/ui/api-reference/theme.mdx index 246ff8a5..5fc4b0e6 100644 --- a/docs/draft/docs/ui/api-reference/theme.mdx +++ b/docs/draft/docs/ui/api-reference/theme.mdx @@ -652,7 +652,6 @@ import { OPENAI_PLATFORM, CLAUDE_PLATFORM, GEMINI_PLATFORM, - NGROK_PLATFORM, } from '@frontmcp/uipack/theme'; ``` @@ -683,7 +682,6 @@ interface PlatformCapabilities { | OpenAI | open | external | Yes | Yes | Yes | | Claude | blocked | inline | Limited | No | No | | Gemini | limited | inline | Limited | No | No | -| ngrok | open | external | Yes | Yes | Yes | --- diff --git a/docs/live/docs/guides/ui-library.mdx b/docs/live/docs/guides/ui-library.mdx index d7e8482e..f8f96b84 100644 --- a/docs/live/docs/guides/ui-library.mdx +++ b/docs/live/docs/guides/ui-library.mdx @@ -96,7 +96,7 @@ const loginForm = form( ## Theme and platform detection -Use `createTheme` to adjust palettes, typography, and CDN endpoints. Then decide whether to inline scripts (Claude Artifacts) or load from the network (OpenAI, Gemini, ngrok). +Use `createTheme` to adjust palettes, typography, and CDN endpoints. Then decide whether to inline scripts (Claude Artifacts) or load from the network (OpenAI, Gemini). ```ts import { diff --git a/docs/live/docs/ui/api-reference/theme.mdx b/docs/live/docs/ui/api-reference/theme.mdx index 246ff8a5..5fc4b0e6 100644 --- a/docs/live/docs/ui/api-reference/theme.mdx +++ b/docs/live/docs/ui/api-reference/theme.mdx @@ -652,7 +652,6 @@ import { OPENAI_PLATFORM, CLAUDE_PLATFORM, GEMINI_PLATFORM, - NGROK_PLATFORM, } from '@frontmcp/uipack/theme'; ``` @@ -683,7 +682,6 @@ interface PlatformCapabilities { | OpenAI | open | external | Yes | Yes | Yes | | Claude | blocked | inline | Limited | No | No | | Gemini | limited | inline | Limited | No | No | -| ngrok | open | external | Yes | Yes | Yes | --- diff --git a/docs/live/docs/v/0.5/guides/ui-library.mdx b/docs/live/docs/v/0.5/guides/ui-library.mdx index ca0acc33..7c65d3c9 100644 --- a/docs/live/docs/v/0.5/guides/ui-library.mdx +++ b/docs/live/docs/v/0.5/guides/ui-library.mdx @@ -92,7 +92,7 @@ const loginForm = form( ## Theme and platform detection -Use `createTheme` to adjust palettes, typography, and CDN endpoints. Then decide whether to inline scripts (Claude Artifacts) or load from the network (OpenAI, Gemini, ngrok). +Use `createTheme` to adjust palettes, typography, and CDN endpoints. Then decide whether to inline scripts (Claude Artifacts) or load from the network (OpenAI, Gemini). ```ts import { diff --git a/docs/live/docs/v/0.5/ui/advanced/platforms.mdx b/docs/live/docs/v/0.5/ui/advanced/platforms.mdx index 38606f94..67d2f113 100644 --- a/docs/live/docs/v/0.5/ui/advanced/platforms.mdx +++ b/docs/live/docs/v/0.5/ui/advanced/platforms.mdx @@ -12,7 +12,6 @@ description: FrontMCP UI adapts to different AI platform capabilities. Each plat | **OpenAI** | Open | CDN allowed | inline, fullscreen, pip | Yes | | **Claude** | Blocked | Inline only | Artifacts | Limited | | **Gemini** | Limited | Inline preferred | Basic | No | -| **ngrok** | Open | CDN allowed | All | Yes | ## Platform Detection diff --git a/docs/live/docs/v/0.5/ui/api-reference/theme.mdx b/docs/live/docs/v/0.5/ui/api-reference/theme.mdx index 66459d40..458a13e3 100644 --- a/docs/live/docs/v/0.5/ui/api-reference/theme.mdx +++ b/docs/live/docs/v/0.5/ui/api-reference/theme.mdx @@ -652,7 +652,6 @@ import { OPENAI_PLATFORM, CLAUDE_PLATFORM, GEMINI_PLATFORM, - NGROK_PLATFORM, } from '@frontmcp/ui'; ``` @@ -683,7 +682,6 @@ interface PlatformCapabilities { | OpenAI | open | external | Yes | Yes | Yes | | Claude | blocked | inline | Limited | No | No | | Gemini | limited | inline | Limited | No | No | -| ngrok | open | external | Yes | Yes | Yes | --- diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index 59b2fe06..88df3e6e 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -592,11 +592,14 @@ export class InMemoryBundler { if (isUniversal) { // Universal mode: use cached runtime + // Include bridge for dynamic/hybrid modes to detect platform data (OpenAI, ext-apps, etc.) + const shouldIncludeBridge = opts.buildMode === 'dynamic' || opts.buildMode === 'hybrid'; const cachedRuntime = getCachedRuntime({ cdnType, includeMarkdown: opts.includeMarkdown || contentType === 'markdown', includeMdx: opts.includeMdx || contentType === 'mdx', minify: opts.minify, + includeBridge: shouldIncludeBridge, }); const componentCodeStr = transpiledCode ? buildComponentCode(transpiledCode) : ''; @@ -786,11 +789,14 @@ export class InMemoryBundler { // Custom components for MDX can be provided via opts.customComponents // Get cached runtime (vendor chunk) - this is pre-built and cached globally + // Include bridge for dynamic/hybrid modes to detect platform data (OpenAI, ext-apps, etc.) + const shouldIncludeBridge = opts.buildMode === 'dynamic' || opts.buildMode === 'hybrid'; const cachedRuntime = getCachedRuntime({ cdnType, includeMarkdown: opts.includeMarkdown || contentType === 'markdown', includeMdx: opts.includeMdx || contentType === 'mdx', minify: opts.minify, + includeBridge: shouldIncludeBridge, }); // Build app chunk (user-specific code) diff --git a/libs/ui/src/universal/cached-runtime.ts b/libs/ui/src/universal/cached-runtime.ts index 6416ce1d..63356767 100644 --- a/libs/ui/src/universal/cached-runtime.ts +++ b/libs/ui/src/universal/cached-runtime.ts @@ -12,6 +12,7 @@ import type { CDNType, ContentSecurityOptions } from './types'; import { UNIVERSAL_CDN } from './types'; +import { getMCPBridgeScript } from '@frontmcp/uipack/runtime'; // ============================================ // Cache Types @@ -97,6 +98,7 @@ function generateCacheKey(options: CachedRuntimeOptions): string { options.includeMarkdown ? 'md' : '', options.includeMdx ? 'mdx' : '', options.minify ? 'min' : '', + options.includeBridge ? 'bridge' : '', securityKey, ] .filter(Boolean) @@ -121,6 +123,15 @@ export interface CachedRuntimeOptions { minify?: boolean; /** Content security / XSS protection options */ contentSecurity?: ContentSecurityOptions; + /** + * Include MCP Bridge runtime for platform data detection. + * When true, includes the MCP Bridge which: + * - Detects data from window.openai.toolOutput (OpenAI Apps SDK) + * - Creates window.mcpBridge with unified API + * - Provides window.openai polyfill for non-OpenAI platforms + * Defaults to true for dynamic/hybrid modes, false for static. + */ + includeBridge?: boolean; } /** @@ -201,6 +212,32 @@ function buildStoreRuntime(): string { window.useContent = function() { return window.useFrontMCPStore().content; }; + + // Connect to MCP Bridge for platform data detection + function initFromBridge() { + // Check for data from mcpBridge (handles OpenAI, ext-apps, etc.) + if (window.mcpBridge && window.mcpBridge.toolOutput != null) { + window.__frontmcp.setState({ + output: window.mcpBridge.toolOutput, + loading: false + }); + } + + // Subscribe to bridge updates via onToolResult + if (window.mcpBridge && window.mcpBridge.onToolResult) { + window.mcpBridge.onToolResult(function(result) { + window.__frontmcp.updateOutput(result); + }); + } + } + + // Initialize from bridge when ready + if (window.mcpBridge) { + initFromBridge(); + } else { + // Wait for bridge to be ready + window.addEventListener('mcp:bridge-ready', initFromBridge); + } })(); `; } @@ -704,7 +741,14 @@ export function getCachedRuntime(options: CachedRuntimeOptions, config: RuntimeC } // Build vendor script - const vendorParts: string[] = [buildStoreRuntime(), buildRequireShim()]; + const vendorParts: string[] = []; + + // Add MCP Bridge runtime first (before store) for platform data detection + if (options.includeBridge) { + vendorParts.push(getMCPBridgeScript()); + } + + vendorParts.push(buildStoreRuntime(), buildRequireShim()); // Add markdown parser for UMD (Claude) or when explicitly requested // Pass options for content security configuration diff --git a/libs/uipack/src/base-template/default-base-template.ts b/libs/uipack/src/base-template/default-base-template.ts index 27c5f9dc..790e0439 100644 --- a/libs/uipack/src/base-template/default-base-template.ts +++ b/libs/uipack/src/base-template/default-base-template.ts @@ -11,7 +11,6 @@ * - OpenAI Apps SDK (window.openai.toolOutput) * - Claude Artifacts * - Custom hosts using MCP protocol - * - ngrok/iframe scenarios */ import { DEFAULT_THEME, type ThemeConfig } from '../theme'; diff --git a/libs/uipack/src/theme/index.test.ts b/libs/uipack/src/theme/index.test.ts index 6147e929..e9fba546 100644 --- a/libs/uipack/src/theme/index.test.ts +++ b/libs/uipack/src/theme/index.test.ts @@ -30,7 +30,6 @@ describe('Theme Module Exports', () => { expect(themeModule.OPENAI_PLATFORM).toBeDefined(); expect(themeModule.CLAUDE_PLATFORM).toBeDefined(); expect(themeModule.GEMINI_PLATFORM).toBeDefined(); - expect(themeModule.NGROK_PLATFORM).toBeDefined(); expect(themeModule.CUSTOM_PLATFORM).toBeDefined(); expect(themeModule.PLATFORM_PRESETS).toBeDefined(); }); diff --git a/libs/uipack/src/theme/index.ts b/libs/uipack/src/theme/index.ts index 17b9a6e9..5a689162 100644 --- a/libs/uipack/src/theme/index.ts +++ b/libs/uipack/src/theme/index.ts @@ -40,7 +40,6 @@ export { OPENAI_PLATFORM, CLAUDE_PLATFORM, GEMINI_PLATFORM, - NGROK_PLATFORM, CUSTOM_PLATFORM, PLATFORM_PRESETS, getPlatform, diff --git a/libs/uipack/src/theme/platforms.test.ts b/libs/uipack/src/theme/platforms.test.ts index b5883fe8..b1ac8cde 100644 --- a/libs/uipack/src/theme/platforms.test.ts +++ b/libs/uipack/src/theme/platforms.test.ts @@ -2,7 +2,6 @@ import { OPENAI_PLATFORM, CLAUDE_PLATFORM, GEMINI_PLATFORM, - NGROK_PLATFORM, CUSTOM_PLATFORM, getPlatform, createPlatform, @@ -51,16 +50,6 @@ describe('Platform System', () => { }); }); - describe('NGROK_PLATFORM', () => { - it('should have full network support', () => { - expect(NGROK_PLATFORM.id).toBe('ngrok'); - expect(NGROK_PLATFORM.supportsWidgets).toBe(true); - expect(NGROK_PLATFORM.supportsTailwind).toBe(true); - expect(NGROK_PLATFORM.supportsHtmx).toBe(true); - expect(NGROK_PLATFORM.networkMode).toBe('full'); - }); - }); - describe('CUSTOM_PLATFORM', () => { it('should have default full capabilities', () => { expect(CUSTOM_PLATFORM.id).toBe('custom'); @@ -87,11 +76,6 @@ describe('Platform System', () => { expect(platform).toEqual(GEMINI_PLATFORM); }); - it('should return Ngrok platform', () => { - const platform = getPlatform('ngrok'); - expect(platform).toEqual(NGROK_PLATFORM); - }); - it('should return Custom platform for custom id', () => { const platform = getPlatform('custom'); expect(platform).toEqual(CUSTOM_PLATFORM); @@ -124,7 +108,6 @@ describe('Platform System', () => { describe('canUseCdn', () => { it('should return true for platforms with full network and cdn strategy', () => { expect(canUseCdn(OPENAI_PLATFORM)).toBe(true); - expect(canUseCdn(NGROK_PLATFORM)).toBe(true); }); it('should return false for platforms with blocked network', () => { diff --git a/libs/uipack/src/theme/platforms.ts b/libs/uipack/src/theme/platforms.ts index 1d43ab6f..9bce3cab 100644 --- a/libs/uipack/src/theme/platforms.ts +++ b/libs/uipack/src/theme/platforms.ts @@ -18,7 +18,7 @@ /** * Known LLM platform identifiers */ -export type PlatformId = 'openai' | 'claude' | 'gemini' | 'ngrok' | 'custom'; +export type PlatformId = 'openai' | 'claude' | 'gemini' | 'custom'; /** * Network access mode for the platform @@ -124,7 +124,7 @@ export const GEMINI_PLATFORM: PlatformCapabilities = { id: 'gemini', name: 'Gemini', supportsWidgets: false, - supportsTailwind: true, + supportsTailwind: false, supportsHtmx: false, networkMode: 'limited', scriptStrategy: 'inline', @@ -133,23 +133,6 @@ export const GEMINI_PLATFORM: PlatformCapabilities = { }, }; -/** - * Ngrok Platform Configuration - * Bridge/tunnel - essential for HTMX - */ -export const NGROK_PLATFORM: PlatformCapabilities = { - id: 'ngrok', - name: 'Ngrok Tunnel', - supportsWidgets: true, - supportsTailwind: true, - supportsHtmx: true, - networkMode: 'full', - scriptStrategy: 'cdn', - options: { - tunnelRequired: true, - }, -}; - /** * Default custom MCP client configuration */ @@ -170,7 +153,6 @@ export const PLATFORM_PRESETS: Record = { openai: OPENAI_PLATFORM, claude: CLAUDE_PLATFORM, gemini: GEMINI_PLATFORM, - ngrok: NGROK_PLATFORM, custom: CUSTOM_PLATFORM, }; diff --git a/libs/uipack/src/typings/types.ts b/libs/uipack/src/typings/types.ts index 557c1c7d..479f5e00 100644 --- a/libs/uipack/src/typings/types.ts +++ b/libs/uipack/src/typings/types.ts @@ -464,7 +464,8 @@ export interface PackageResolution { * Default options for TypeFetcher. */ export const DEFAULT_TYPE_FETCHER_OPTIONS: Required> = { - maxDepth: 2, + allowedPackages: ['react', 'react-dom', 'react/jsx-runtime', 'zod', '@frontmcp/*'], + maxDepth: 4, timeout: 10000, maxConcurrency: 5, cdnBaseUrl: 'https://esm.sh', From a3311b4e4daca051f9dd337421ba52b9ef4ab0cc Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 19:59:39 +0200 Subject: [PATCH 13/19] feat: Add browser-compatible UI components with esbuild integration --- libs/ui/src/bundler/browser-components.ts | 515 ++++++++++++++++++ libs/ui/src/bundler/bundler.ts | 123 ++--- libs/ui/src/universal/cached-runtime.ts | 68 +-- libs/uipack/src/build/hybrid-data.ts | 72 +++ libs/uipack/src/build/index.ts | 19 + .../uipack/src/build/ui-components-browser.ts | 448 +++++++++++++++ libs/uipack/src/theme/platforms.test.ts | 27 +- libs/uipack/src/theme/platforms.ts | 4 +- .../typings/__tests__/type-fetcher.test.ts | 2 +- libs/uipack/src/typings/types.ts | 14 +- 10 files changed, 1136 insertions(+), 156 deletions(-) create mode 100644 libs/ui/src/bundler/browser-components.ts create mode 100644 libs/uipack/src/build/ui-components-browser.ts diff --git a/libs/ui/src/bundler/browser-components.ts b/libs/ui/src/bundler/browser-components.ts new file mode 100644 index 00000000..b02e810d --- /dev/null +++ b/libs/ui/src/bundler/browser-components.ts @@ -0,0 +1,515 @@ +/** + * Browser Components Builder + * + * Lazily transpiles the real React components from @frontmcp/ui/react + * into browser-compatible JavaScript using esbuild at first use. + * + * This ensures 100% parity with the actual React components while + * avoiding the overhead of manual code synchronization. + * + * @packageDocumentation + */ + +import * as path from 'path'; +import * as fs from 'fs'; + +// ============================================ +// Cache +// ============================================ + +/** Cached transpiled components */ +let cachedBrowserComponents: string | null = null; + +/** Whether we're currently building (prevents concurrent builds) */ +let buildingPromise: Promise | null = null; + +// ============================================ +// Component Source +// ============================================ + +/** + * Get the source code for all UI components bundled together. + * This is a virtual entry point that imports and re-exports everything. + */ +function getComponentsEntrySource(): string { + // Virtual entry that imports the styles and creates browser-compatible components + // We inline the style constants and component logic here + return ` +// Browser Components Entry Point +// This gets transpiled by esbuild to create browser-compatible code + +import { + // Card styles + CARD_VARIANTS, + CARD_SIZES, + // Button styles + BUTTON_VARIANTS, + BUTTON_SIZES, + BUTTON_ICON_SIZES, + BUTTON_BASE_CLASSES, + LOADING_SPINNER, + // Badge styles + BADGE_VARIANTS, + BADGE_SIZES, + BADGE_DOT_SIZES, + BADGE_DOT_VARIANTS, + // Alert styles + ALERT_VARIANTS, + ALERT_BASE_CLASSES, + ALERT_ICONS, + CLOSE_ICON, + // Utility + cn, +} from '@frontmcp/uipack/styles'; + +// Re-export for the IIFE +export { + CARD_VARIANTS, + CARD_SIZES, + BUTTON_VARIANTS, + BUTTON_SIZES, + BUTTON_ICON_SIZES, + BUTTON_BASE_CLASSES, + LOADING_SPINNER, + BADGE_VARIANTS, + BADGE_SIZES, + BADGE_DOT_SIZES, + BADGE_DOT_VARIANTS, + ALERT_VARIANTS, + ALERT_BASE_CLASSES, + ALERT_ICONS, + CLOSE_ICON, + cn, +}; + +// Card Component +export function Card(props: any) { + const { + title, + subtitle, + headerActions, + footer, + variant = 'default', + size = 'md', + className, + id, + clickable, + href, + children, + } = props; + + const variantClasses = CARD_VARIANTS[variant] || CARD_VARIANTS.default; + const sizeClasses = CARD_SIZES[size] || CARD_SIZES.md; + const clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : ''; + const allClasses = cn(variantClasses, sizeClasses, clickableClasses, className); + + const hasHeader = title || subtitle || headerActions; + + const headerElement = hasHeader ? React.createElement('div', { + className: 'flex items-start justify-between mb-4' + }, [ + React.createElement('div', { key: 'titles' }, [ + title && React.createElement('h3', { + key: 'title', + className: 'text-lg font-semibold text-text-primary' + }, title), + subtitle && React.createElement('p', { + key: 'subtitle', + className: 'text-sm text-text-secondary mt-1' + }, subtitle) + ]), + headerActions && React.createElement('div', { + key: 'actions', + className: 'flex items-center gap-2' + }, headerActions) + ]) : null; + + const footerElement = footer ? React.createElement('div', { + className: 'mt-4 pt-4 border-t border-divider' + }, footer) : null; + + const content = React.createElement(React.Fragment, null, headerElement, children, footerElement); + + if (href) { + return React.createElement('a', { href, className: allClasses, id }, content); + } + + return React.createElement('div', { className: allClasses, id }, content); +} + +// Button Component +export function Button(props: any) { + const { + variant = 'primary', + size = 'md', + disabled = false, + loading = false, + fullWidth = false, + iconPosition = 'left', + icon, + iconOnly = false, + type = 'button', + className, + onClick, + children, + } = props; + + const variantClasses = BUTTON_VARIANTS[variant] || BUTTON_VARIANTS.primary; + const sizeClasses = iconOnly + ? (BUTTON_ICON_SIZES[size] || BUTTON_ICON_SIZES.md) + : (BUTTON_SIZES[size] || BUTTON_SIZES.md); + + const disabledClasses = (disabled || loading) ? 'opacity-50 cursor-not-allowed' : ''; + const widthClasses = fullWidth ? 'w-full' : ''; + + const allClasses = cn(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className); + + const iconElement = icon ? React.createElement('span', { + className: iconPosition === 'left' ? 'mr-2' : 'ml-2' + }, icon) : null; + + const loadingSpinner = loading ? React.createElement('span', { + className: 'mr-2', + dangerouslySetInnerHTML: { __html: LOADING_SPINNER } + }) : null; + + return React.createElement('button', { + type, + className: allClasses, + disabled: disabled || loading, + onClick + }, + loadingSpinner, + !loading && icon && iconPosition === 'left' ? iconElement : null, + !iconOnly ? children : null, + !loading && icon && iconPosition === 'right' ? iconElement : null + ); +} + +// Badge Component +export function Badge(props: any) { + const { + variant = 'default', + size = 'md', + pill = false, + icon, + dot = false, + className, + removable = false, + onRemove, + children, + } = props; + + // Handle dot badge + if (dot) { + const dotSizeClasses = BADGE_DOT_SIZES[size] || BADGE_DOT_SIZES.md; + const dotVariantClasses = BADGE_DOT_VARIANTS[variant] || BADGE_DOT_VARIANTS.default; + const dotClasses = cn('inline-block rounded-full', dotSizeClasses, dotVariantClasses, className); + const label = typeof children === 'string' ? children : undefined; + return React.createElement('span', { + className: dotClasses, + 'aria-label': label, + title: label + }); + } + + const variantClasses = BADGE_VARIANTS[variant] || BADGE_VARIANTS.default; + const sizeClasses = BADGE_SIZES[size] || BADGE_SIZES.md; + + const baseClasses = cn( + 'inline-flex items-center font-medium', + pill ? 'rounded-full' : 'rounded-md', + variantClasses, + sizeClasses, + className + ); + + const closeButton = removable ? React.createElement('button', { + type: 'button', + className: 'ml-1.5 -mr-1 hover:opacity-70 transition-opacity', + 'aria-label': 'Remove', + onClick: onRemove + }, React.createElement('svg', { + className: 'w-3 h-3', + fill: 'none', + stroke: 'currentColor', + viewBox: '0 0 24 24' + }, React.createElement('path', { + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeWidth: '2', + d: 'M6 18L18 6M6 6l12 12' + }))) : null; + + return React.createElement('span', { className: baseClasses }, + icon ? React.createElement('span', { className: 'mr-1' }, icon) : null, + children, + closeButton + ); +} + +// Alert Component +export function Alert(props: any) { + const { + variant = 'info', + title, + icon, + showIcon = true, + dismissible = false, + onDismiss, + className, + children, + } = props; + + const variantStyles = ALERT_VARIANTS[variant] || ALERT_VARIANTS.info; + const allClasses = cn(ALERT_BASE_CLASSES, variantStyles.container, className); + + const iconContent = icon || (showIcon ? React.createElement('span', { + className: cn('flex-shrink-0', variantStyles.icon), + dangerouslySetInnerHTML: { __html: ALERT_ICONS[variant] || ALERT_ICONS.info } + }) : null); + + const dismissButton = dismissible ? React.createElement('button', { + type: 'button', + className: 'flex-shrink-0 ml-3 hover:opacity-70 transition-opacity', + 'aria-label': 'Dismiss', + onClick: onDismiss + }, React.createElement('span', { + dangerouslySetInnerHTML: { __html: CLOSE_ICON } + })) : null; + + return React.createElement('div', { className: allClasses, role: 'alert' }, + React.createElement('div', { className: 'flex' }, + iconContent ? React.createElement('div', { className: 'flex-shrink-0 mr-3' }, iconContent) : null, + React.createElement('div', { className: 'flex-1' }, + title ? React.createElement('h4', { className: 'font-semibold mb-1' }, title) : null, + React.createElement('div', { className: 'text-sm' }, children) + ), + dismissButton + ) + ); +} +`; +} + +/** + * Build the browser runtime wrapper that assigns components to window. + */ +function getBrowserRuntimeWrapper(): string { + return ` +// Assign components to window for require() shim +window.Card = Card; +window.Button = Button; +window.Badge = Badge; +window.Alert = Alert; + +// Build the namespace object for @frontmcp/ui/react imports +window.frontmcp_ui_namespaceObject = Object.assign({}, window.React || {}, { + // Hooks + useToolOutput: window.useToolOutput, + useToolInput: window.useToolInput, + useMcpBridgeContext: function() { return window.__frontmcp.context; }, + useMcpBridge: function() { return window.__frontmcp.context; }, + useCallTool: function() { + return function(name, args) { + if (window.__frontmcp.context && window.__frontmcp.context.callTool) { + return window.__frontmcp.context.callTool(name, args); + } + console.warn('[FrontMCP] callTool not available'); + return Promise.resolve(null); + }; + }, + useTheme: function() { return window.__frontmcp.theme || 'light'; }, + useDisplayMode: function() { return window.__frontmcp.displayMode || 'embedded'; }, + useHostContext: function() { return window.__frontmcp.hostContext || {}; }, + useCapability: function(cap) { return window.__frontmcp.capabilities && window.__frontmcp.capabilities[cap] || false; }, + useStructuredContent: function() { return window.__frontmcp.getState().structuredContent; }, + useToolCalls: function() { return []; }, + useSendMessage: function() { return function() { return Promise.resolve(); }; }, + useOpenLink: function() { return function() {}; }, + + // Components + Card: window.Card, + Badge: window.Badge, + Button: window.Button, + Alert: window.Alert, + + // Re-export React for convenience + createElement: React.createElement, + Fragment: React.Fragment, + useState: React.useState, + useEffect: React.useEffect, + useCallback: React.useCallback, + useMemo: React.useMemo, + useRef: React.useRef, + useContext: React.useContext +}); +`; +} + +// ============================================ +// Esbuild Integration +// ============================================ + +/** + * Transpile the components using esbuild. + */ +// Note: transpileWithEsbuild is not currently used - we use buildWithEsbuild instead +// which uses the full build API with bundling support. +// Keeping this as a simpler fallback option if needed. +async function _transpileWithEsbuild(source: string): Promise { + try { + const esbuild = await import('esbuild'); + + // transform() only supports 'esm' or 'cjs' format, not 'iife' + const result = await esbuild.transform(source, { + loader: 'tsx', + format: 'esm', + target: 'es2020', + minify: false, + }); + + return result.code; + } catch (error) { + // Fallback to SWC if esbuild not available + try { + const swc = await import('@swc/core'); + const result = await swc.transform(source, { + jsc: { + parser: { syntax: 'typescript', tsx: true }, + target: 'es2020', + }, + module: { type: 'commonjs' }, + }); + return result.code; + } catch { + throw new Error( + `Failed to transpile browser components: ${error instanceof Error ? error.message : String(error)}`, + ); + } + } +} + +/** + * Build the complete browser components bundle using esbuild. + * This bundles the components with their style dependencies. + */ +async function buildWithEsbuild(): Promise { + try { + const esbuild = await import('esbuild'); + + // Get the path to the styles module + const stylesPath = require.resolve('@frontmcp/uipack/styles'); + + // Create a virtual entry that imports styles and defines components + const entrySource = getComponentsEntrySource(); + + // Use esbuild's build API with stdin for the virtual entry + const result = await esbuild.build({ + stdin: { + contents: entrySource, + loader: 'tsx', + resolveDir: path.dirname(stylesPath), + }, + bundle: true, + format: 'iife', + globalName: '__frontmcp_components', + target: 'es2020', + minify: false, + write: false, + external: ['react', 'react-dom'], + define: { + React: 'window.React', + }, + platform: 'browser', + }); + + if (result.outputFiles && result.outputFiles.length > 0) { + let code = result.outputFiles[0].text; + + // Add the runtime wrapper that assigns to window + code += '\n' + getBrowserRuntimeWrapper(); + + return code; + } + + throw new Error('No output from esbuild'); + } catch (error) { + console.warn( + `[FrontMCP] esbuild bundle failed, falling back to manual components: ${ + error instanceof Error ? error.message : String(error) + }`, + ); + // Return fallback (will be imported from uipack) + throw error; + } +} + +// ============================================ +// Public API +// ============================================ + +/** + * Get browser-compatible UI components. + * + * On first call, transpiles the real React components using esbuild. + * Subsequent calls return the cached result. + * + * @returns JavaScript code that defines Card, Button, Badge, Alert on window + */ +export async function getBrowserComponents(): Promise { + // Return cached if available + if (cachedBrowserComponents !== null) { + return cachedBrowserComponents; + } + + // If already building, wait for that + if (buildingPromise !== null) { + return buildingPromise; + } + + // Build and cache + buildingPromise = buildWithEsbuild() + .then((code) => { + cachedBrowserComponents = code; + buildingPromise = null; + return code; + }) + .catch((error) => { + buildingPromise = null; + // Re-throw to let caller handle fallback + throw error; + }); + + return buildingPromise; +} + +/** + * Get browser-compatible UI components synchronously. + * + * Returns cached components if available, otherwise returns null. + * Use getBrowserComponents() for async loading with transpilation. + * + * @returns Cached JavaScript code or null if not yet built + */ +export function getBrowserComponentsSync(): string | null { + return cachedBrowserComponents; +} + +/** + * Pre-warm the browser components cache. + * + * Call this at application startup to avoid delay on first bundler call. + */ +export async function warmBrowserComponentsCache(): Promise { + await getBrowserComponents(); +} + +/** + * Clear the browser components cache. + * + * Useful for development when components change. + */ +export function clearBrowserComponentsCache(): void { + cachedBrowserComponents = null; +} diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index 88df3e6e..105f2ffc 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -53,7 +53,12 @@ import { buildDataInjectionCode, buildComponentCode, } from '../universal/cached-runtime'; -import { buildCDNScriptTag, CLOUDFLARE_CDN } from '@frontmcp/uipack/build'; +import { + buildCDNScriptTag, + CLOUDFLARE_CDN, + buildUIComponentsRuntime as buildFallbackUIComponents, +} from '@frontmcp/uipack/build'; +import { getBrowserComponents } from './browser-components'; /** * Lazy-loaded esbuild transform function. @@ -416,7 +421,7 @@ export class InMemoryBundler { // Build HTML sections const head = this.buildStaticHTMLHead({ externals: opts.externals, customCss: opts.customCss, theme: opts.theme }); const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); - const frontmcpRuntime = this.buildFrontMCPRuntime(); + const frontmcpRuntime = await this.buildFrontMCPRuntime(); const dataScript = this.buildDataInjectionScript( opts.toolName, opts.input, @@ -657,7 +662,7 @@ export class InMemoryBundler { theme: opts.theme, }); const reactRuntime = this.buildReactRuntimeScripts(opts.externals, platform, cdnType); - const frontmcpRuntime = this.buildFrontMCPRuntime(); + const frontmcpRuntime = await this.buildFrontMCPRuntime(); const dataScript = this.buildDataInjectionScript( opts.toolName, opts.input, @@ -1497,9 +1502,22 @@ ${parts.appScript} /** * Build FrontMCP runtime (hooks and UI components). + * Uses esbuild to transpile real React components at first use, then caches. + * Falls back to manual implementation if esbuild fails. * Always inlined for reliability across platforms. */ - private buildFrontMCPRuntime(): string { + private async buildFrontMCPRuntime(): Promise { + // Build the browser-compatible UI components (Card, Button, Badge, Alert) + // Uses esbuild to transpile the real React components from @frontmcp/ui/react + // Falls back to the manual implementation from @frontmcp/uipack/build if esbuild fails + let uiComponents: string; + try { + uiComponents = await getBrowserComponents(); + } catch { + // Fallback to manually-written browser components + uiComponents = buildFallbackUIComponents(); + } + return ` + + `; } diff --git a/libs/ui/src/universal/cached-runtime.ts b/libs/ui/src/universal/cached-runtime.ts index 63356767..bdf9bde9 100644 --- a/libs/ui/src/universal/cached-runtime.ts +++ b/libs/ui/src/universal/cached-runtime.ts @@ -13,6 +13,7 @@ import type { CDNType, ContentSecurityOptions } from './types'; import { UNIVERSAL_CDN } from './types'; import { getMCPBridgeScript } from '@frontmcp/uipack/runtime'; +import { buildUIComponentsRuntime as buildBrowserUIComponents } from '@frontmcp/uipack/build'; // ============================================ // Cache Types @@ -477,73 +478,10 @@ function buildRenderersRuntime(options?: CachedRuntimeOptions): string { /** * Build UI components runtime (static). + * Uses the full-featured browser-compatible components from @frontmcp/uipack/build. */ function buildUIComponentsRuntime(): string { - return ` -// UI Components (Vendor) -(function() { - window.Card = function(props) { - var children = props.children; - var title = props.title; - var className = props.className || ''; - return React.createElement('div', { - className: 'bg-white rounded-lg shadow border border-gray-200 overflow-hidden ' + className - }, [ - title && React.createElement('div', { - key: 'header', - className: 'px-4 py-3 border-b border-gray-200 bg-gray-50' - }, React.createElement('h3', { className: 'text-sm font-medium text-gray-900' }, title)), - React.createElement('div', { key: 'body', className: 'p-4' }, children) - ]); - }; - - window.Badge = function(props) { - var children = props.children; - var variant = props.variant || 'default'; - var variantClasses = { - default: 'bg-gray-100 text-gray-800', - success: 'bg-green-100 text-green-800', - warning: 'bg-yellow-100 text-yellow-800', - error: 'bg-red-100 text-red-800', - info: 'bg-blue-100 text-blue-800' - }; - return React.createElement('span', { - className: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ' + (variantClasses[variant] || variantClasses.default) - }, children); - }; - - window.Button = function(props) { - var children = props.children; - var variant = props.variant || 'primary'; - var onClick = props.onClick; - var disabled = props.disabled; - var variantClasses = { - primary: 'bg-blue-600 text-white hover:bg-blue-700', - secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200', - outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50', - danger: 'bg-red-600 text-white hover:bg-red-700' - }; - return React.createElement('button', { - className: 'px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ' + - (disabled ? 'opacity-50 cursor-not-allowed ' : '') + - (variantClasses[variant] || variantClasses.primary), - onClick: onClick, - disabled: disabled - }, children); - }; - - // Export to namespace - window.frontmcp_ui_namespaceObject = Object.assign({}, window.React || {}, { - useToolOutput: window.useToolOutput, - useToolInput: window.useToolInput, - useMcpBridgeContext: function() { return window.__frontmcp.context; }, - useCallTool: function() { return function() { return Promise.resolve(null); }; }, - Card: window.Card, - Badge: window.Badge, - Button: window.Button - }); -})(); -`; + return buildBrowserUIComponents(); } /** diff --git a/libs/uipack/src/build/hybrid-data.ts b/libs/uipack/src/build/hybrid-data.ts index 1eaa0790..c3dce45e 100644 --- a/libs/uipack/src/build/hybrid-data.ts +++ b/libs/uipack/src/build/hybrid-data.ts @@ -150,3 +150,75 @@ export function getHybridPlaceholders(html: string): { hasInput: html.includes(HYBRID_INPUT_PLACEHOLDER), }; } + +/** + * Inject data into a dynamic/OpenAI shell with a trigger script for preview mode. + * + * This function: + * 1. Replaces data placeholders (like injectHybridDataFull) + * 2. Injects a script that calls window.__frontmcp.updateOutput(data) to trigger React re-renders + * + * Use this for preview mode when there's no actual OpenAI Canvas environment. + * In production OpenAI environments, use injectHybridDataFull instead and let + * the OpenAI Canvas trigger onToolResult. + * + * @param shell - HTML shell from bundleToStaticHTML with buildMode='dynamic' + * @param input - Input data to inject + * @param output - Output data to inject + * @returns HTML with data injected and trigger script added + * + * @example + * ```typescript + * import { injectHybridDataWithTrigger } from '@frontmcp/uipack/build'; + * + * // For preview mode with dynamic/OpenAI shells + * const html = injectHybridDataWithTrigger(shell.html, inputData, outputData); + * // The trigger script will call window.__frontmcp.updateOutput(outputData) + * // which updates the store and triggers React re-renders + * ``` + */ +export function injectHybridDataWithTrigger( + shell: string, + input: unknown, + output: unknown, +): string { + // First inject the data placeholders + let result = injectHybridDataFull(shell, input, output); + + // Safely stringify output for embedding in script + let outputJson: string; + try { + outputJson = JSON.stringify(output); + } catch { + outputJson = 'null'; + } + + // Create trigger script that mimics onToolResult + const triggerScript = ` +`; + + // Inject trigger script before + result = result.replace('', triggerScript + '\n'); + + return result; +} diff --git a/libs/uipack/src/build/index.ts b/libs/uipack/src/build/index.ts index b4d2ed52..0943dc74 100644 --- a/libs/uipack/src/build/index.ts +++ b/libs/uipack/src/build/index.ts @@ -695,7 +695,26 @@ export { // Helper functions injectHybridData, injectHybridDataFull, + injectHybridDataWithTrigger, isHybridShell, needsInputInjection, getHybridPlaceholders, } from './hybrid-data'; + +// ============================================ +// Browser-Compatible UI Components +// ============================================ + +export { + // Main builder + buildUIComponentsRuntime, + // Individual builders (for custom composition) + buildStyleConstants, + buildCardComponent, + buildButtonComponent, + buildBadgeComponent, + buildAlertComponent, + buildNamespaceExport, +} from './ui-components-browser'; + +export type { BrowserUIComponentsOptions } from './ui-components-browser'; diff --git a/libs/uipack/src/build/ui-components-browser.ts b/libs/uipack/src/build/ui-components-browser.ts new file mode 100644 index 00000000..dc71d88f --- /dev/null +++ b/libs/uipack/src/build/ui-components-browser.ts @@ -0,0 +1,448 @@ +/** + * Browser-Compatible UI Components + * + * This module generates browser-compatible React component code that matches + * the real components from @frontmcp/ui/react. These are used in the vendor + * runtime for static HTML generation. + * + * Key differences from the React components: + * - Uses window.React.createElement instead of JSX + * - All style utilities are inlined + * - No external imports + * + * This ensures that when customer code imports: + * import { Card, Button, Badge } from '@frontmcp/ui/react'; + * + * The components behave identically to the real React components. + * + * @packageDocumentation + */ + +import { + // Card + CARD_VARIANTS, + CARD_SIZES, + type CardVariant, + type CardSize, + // Button + BUTTON_VARIANTS, + BUTTON_SIZES, + BUTTON_ICON_SIZES, + BUTTON_BASE_CLASSES, + LOADING_SPINNER, + type ButtonVariant, + type ButtonSize, + // Badge + BADGE_VARIANTS, + BADGE_SIZES, + BADGE_DOT_SIZES, + BADGE_DOT_VARIANTS, + type BadgeVariant, + type BadgeSize, + // Alert + ALERT_VARIANTS, + ALERT_BASE_CLASSES, + ALERT_ICONS, + CLOSE_ICON, + type AlertVariant, +} from '../styles'; + +/** + * Options for building browser UI components. + */ +export interface BrowserUIComponentsOptions { + /** Minify the output */ + minify?: boolean; +} + +/** + * Build the style constants as browser-compatible JavaScript. + * These are the variant maps and utility functions used by all components. + */ +export function buildStyleConstants(): string { + return ` +// Style Constants (from @frontmcp/uipack/styles) +var CARD_VARIANTS = ${JSON.stringify(CARD_VARIANTS)}; +var CARD_SIZES = ${JSON.stringify(CARD_SIZES)}; + +var BUTTON_VARIANTS = ${JSON.stringify(BUTTON_VARIANTS)}; +var BUTTON_SIZES = ${JSON.stringify(BUTTON_SIZES)}; +var BUTTON_ICON_SIZES = ${JSON.stringify(BUTTON_ICON_SIZES)}; +var BUTTON_BASE_CLASSES = ${JSON.stringify(BUTTON_BASE_CLASSES)}; +var LOADING_SPINNER = ${JSON.stringify(LOADING_SPINNER)}; + +var BADGE_VARIANTS = ${JSON.stringify(BADGE_VARIANTS)}; +var BADGE_SIZES = ${JSON.stringify(BADGE_SIZES)}; +var BADGE_DOT_SIZES = ${JSON.stringify(BADGE_DOT_SIZES)}; +var BADGE_DOT_VARIANTS = ${JSON.stringify(BADGE_DOT_VARIANTS)}; + +var ALERT_VARIANTS = ${JSON.stringify(ALERT_VARIANTS)}; +var ALERT_BASE_CLASSES = ${JSON.stringify(ALERT_BASE_CLASSES)}; +var ALERT_ICONS = ${JSON.stringify(ALERT_ICONS)}; +var CLOSE_ICON = ${JSON.stringify(CLOSE_ICON)}; + +// Utility: Join CSS classes, filtering out falsy values +function cn() { + var result = []; + for (var i = 0; i < arguments.length; i++) { + if (arguments[i]) result.push(arguments[i]); + } + return result.join(' '); +} +`; +} + +/** + * Build the Card component as browser-compatible JavaScript. + * Matches the full Card component from @frontmcp/ui/react/Card.tsx + */ +export function buildCardComponent(): string { + return ` +// Card Component (matches @frontmcp/ui/react/Card) +window.Card = function Card(props) { + var title = props.title; + var subtitle = props.subtitle; + var headerActions = props.headerActions; + var footer = props.footer; + var variant = props.variant || 'default'; + var size = props.size || 'md'; + var className = props.className; + var id = props.id; + var clickable = props.clickable; + var href = props.href; + var children = props.children; + + var variantClasses = CARD_VARIANTS[variant] || CARD_VARIANTS.default; + var sizeClasses = CARD_SIZES[size] || CARD_SIZES.md; + var clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : ''; + var allClasses = cn(variantClasses, sizeClasses, clickableClasses, className); + + var hasHeader = title || subtitle || headerActions; + + var headerElement = hasHeader ? React.createElement('div', { + className: 'flex items-start justify-between mb-4' + }, [ + React.createElement('div', { key: 'titles' }, [ + title && React.createElement('h3', { + key: 'title', + className: 'text-lg font-semibold text-text-primary' + }, title), + subtitle && React.createElement('p', { + key: 'subtitle', + className: 'text-sm text-text-secondary mt-1' + }, subtitle) + ]), + headerActions && React.createElement('div', { + key: 'actions', + className: 'flex items-center gap-2' + }, headerActions) + ]) : null; + + var footerElement = footer ? React.createElement('div', { + className: 'mt-4 pt-4 border-t border-divider' + }, footer) : null; + + var content = React.createElement(React.Fragment, null, [ + headerElement, + children, + footerElement + ]); + + if (href) { + return React.createElement('a', { + href: href, + className: allClasses, + id: id + }, content); + } + + return React.createElement('div', { + className: allClasses, + id: id + }, content); +}; +`; +} + +/** + * Build the Button component as browser-compatible JavaScript. + * Matches the full Button component from @frontmcp/ui/react/Button.tsx + */ +export function buildButtonComponent(): string { + return ` +// Button Component (matches @frontmcp/ui/react/Button) +window.Button = function Button(props) { + var variant = props.variant || 'primary'; + var size = props.size || 'md'; + var disabled = props.disabled || false; + var loading = props.loading || false; + var fullWidth = props.fullWidth || false; + var iconPosition = props.iconPosition || 'left'; + var icon = props.icon; + var iconOnly = props.iconOnly || false; + var type = props.type || 'button'; + var className = props.className; + var onClick = props.onClick; + var children = props.children; + + var variantClasses = BUTTON_VARIANTS[variant] || BUTTON_VARIANTS.primary; + var sizeClasses = iconOnly + ? (BUTTON_ICON_SIZES[size] || BUTTON_ICON_SIZES.md) + : (BUTTON_SIZES[size] || BUTTON_SIZES.md); + + var disabledClasses = (disabled || loading) ? 'opacity-50 cursor-not-allowed' : ''; + var widthClasses = fullWidth ? 'w-full' : ''; + + var allClasses = cn(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className); + + var iconElement = icon ? React.createElement('span', { + className: iconPosition === 'left' ? 'mr-2' : 'ml-2' + }, icon) : null; + + var loadingSpinner = loading ? React.createElement('span', { + className: 'mr-2', + dangerouslySetInnerHTML: { __html: LOADING_SPINNER } + }) : null; + + return React.createElement('button', { + type: type, + className: allClasses, + disabled: disabled || loading, + onClick: onClick + }, [ + loadingSpinner, + !loading && icon && iconPosition === 'left' ? iconElement : null, + !iconOnly ? children : null, + !loading && icon && iconPosition === 'right' ? iconElement : null + ]); +}; +`; +} + +/** + * Build the Badge component as browser-compatible JavaScript. + * Matches the full Badge component from @frontmcp/ui/react/Badge.tsx + */ +export function buildBadgeComponent(): string { + return ` +// Badge Component (matches @frontmcp/ui/react/Badge) +window.Badge = function Badge(props) { + var variant = props.variant || 'default'; + var size = props.size || 'md'; + var pill = props.pill || false; + var icon = props.icon; + var dot = props.dot || false; + var className = props.className; + var removable = props.removable || false; + var onRemove = props.onRemove; + var children = props.children; + + // Handle dot badge (status indicator) + if (dot) { + var dotSizeClasses = BADGE_DOT_SIZES[size] || BADGE_DOT_SIZES.md; + var dotVariantClasses = BADGE_DOT_VARIANTS[variant] || BADGE_DOT_VARIANTS.default; + var dotClasses = cn('inline-block rounded-full', dotSizeClasses, dotVariantClasses, className); + + var label = typeof children === 'string' ? children : undefined; + + return React.createElement('span', { + className: dotClasses, + 'aria-label': label, + title: label + }); + } + + var variantClasses = BADGE_VARIANTS[variant] || BADGE_VARIANTS.default; + var sizeClasses = BADGE_SIZES[size] || BADGE_SIZES.md; + + var baseClasses = cn( + 'inline-flex items-center font-medium', + pill ? 'rounded-full' : 'rounded-md', + variantClasses, + sizeClasses, + className + ); + + var closeButton = removable ? React.createElement('button', { + type: 'button', + className: 'ml-1.5 -mr-1 hover:opacity-70 transition-opacity', + 'aria-label': 'Remove', + onClick: onRemove + }, React.createElement('svg', { + className: 'w-3 h-3', + fill: 'none', + stroke: 'currentColor', + viewBox: '0 0 24 24' + }, React.createElement('path', { + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeWidth: '2', + d: 'M6 18L18 6M6 6l12 12' + }))) : null; + + return React.createElement('span', { + className: baseClasses + }, [ + icon ? React.createElement('span', { key: 'icon', className: 'mr-1' }, icon) : null, + children, + closeButton + ]); +}; +`; +} + +/** + * Build the Alert component as browser-compatible JavaScript. + * Matches the full Alert component from @frontmcp/ui/react/Alert.tsx + */ +export function buildAlertComponent(): string { + return ` +// Alert Component (matches @frontmcp/ui/react/Alert) +window.Alert = function Alert(props) { + var variant = props.variant || 'info'; + var title = props.title; + var icon = props.icon; + var showIcon = props.showIcon !== false; + var dismissible = props.dismissible || false; + var onDismiss = props.onDismiss; + var className = props.className; + var children = props.children; + + var variantStyles = ALERT_VARIANTS[variant] || ALERT_VARIANTS.info; + var allClasses = cn(ALERT_BASE_CLASSES, variantStyles.container, className); + + // Use custom icon or default variant icon + var iconContent = icon || (showIcon ? React.createElement('span', { + className: cn('flex-shrink-0', variantStyles.icon), + dangerouslySetInnerHTML: { __html: ALERT_ICONS[variant] || ALERT_ICONS.info } + }) : null); + + var dismissButton = dismissible ? React.createElement('button', { + type: 'button', + className: 'flex-shrink-0 ml-3 hover:opacity-70 transition-opacity', + 'aria-label': 'Dismiss', + onClick: onDismiss + }, React.createElement('span', { + dangerouslySetInnerHTML: { __html: CLOSE_ICON } + })) : null; + + return React.createElement('div', { + className: allClasses, + role: 'alert' + }, React.createElement('div', { + className: 'flex' + }, [ + iconContent ? React.createElement('div', { + key: 'icon', + className: 'flex-shrink-0 mr-3' + }, iconContent) : null, + React.createElement('div', { + key: 'content', + className: 'flex-1' + }, [ + title ? React.createElement('h4', { + key: 'title', + className: 'font-semibold mb-1' + }, title) : null, + React.createElement('div', { + key: 'body', + className: 'text-sm' + }, children) + ]), + dismissButton + ])); +}; +`; +} + +/** + * Build the namespace export that maps all components and hooks. + * This is what gets assigned to window.frontmcp_ui_namespaceObject. + */ +export function buildNamespaceExport(): string { + return ` +// Export to namespace (for require('@frontmcp/ui/react') shim) +window.frontmcp_ui_namespaceObject = Object.assign({}, window.React || {}, { + // Hooks + useToolOutput: window.useToolOutput, + useToolInput: window.useToolInput, + useMcpBridgeContext: function() { return window.__frontmcp.context; }, + useMcpBridge: function() { return window.__frontmcp.context; }, + useCallTool: function() { + return function(name, args) { + if (window.__frontmcp.context.callTool) { + return window.__frontmcp.context.callTool(name, args); + } + console.warn('[FrontMCP] callTool not available'); + return Promise.resolve(null); + }; + }, + useTheme: function() { return window.__frontmcp.theme || 'light'; }, + useDisplayMode: function() { return window.__frontmcp.displayMode || 'embedded'; }, + useHostContext: function() { return window.__frontmcp.hostContext || {}; }, + useCapability: function(cap) { return window.__frontmcp.capabilities?.[cap] || false; }, + useStructuredContent: function() { return window.__frontmcp.getState().structuredContent; }, + useToolCalls: function() { return []; }, + useSendMessage: function() { return function() { return Promise.resolve(); }; }, + useOpenLink: function() { return function() {}; }, + + // Components + Card: window.Card, + Badge: window.Badge, + Button: window.Button, + Alert: window.Alert, + + // Re-export React stuff for convenience + createElement: React.createElement, + Fragment: React.Fragment, + useState: React.useState, + useEffect: React.useEffect, + useCallback: React.useCallback, + useMemo: React.useMemo, + useRef: React.useRef, + useContext: React.useContext +}); +`; +} + +/** + * Build all UI components as browser-compatible JavaScript. + * This is the complete runtime that replaces buildUIComponentsRuntime(). + */ +export function buildUIComponentsRuntime(options: BrowserUIComponentsOptions = {}): string { + const parts = [ + '// UI Components (Browser-Compatible)', + '// Generated from @frontmcp/ui/react components', + '(function() {', + buildStyleConstants(), + buildCardComponent(), + buildButtonComponent(), + buildBadgeComponent(), + buildAlertComponent(), + buildNamespaceExport(), + '})();', + ]; + + let script = parts.join('\n'); + + if (options.minify) { + script = minifyScript(script); + } + + return script; +} + +/** + * Simple minification that preserves strings. + */ +function minifyScript(script: string): string { + return script + .replace(/\/\*[\s\S]*?\*\//g, '') + .replace(/^\s*\/\/[^\n]*$/gm, '') + .replace(/\n\s*\n/g, '\n') + .replace(/^\s+/gm, '') + .trim(); +} + +// Export types for reference +export type { CardVariant, CardSize, ButtonVariant, ButtonSize, BadgeVariant, BadgeSize, AlertVariant }; diff --git a/libs/uipack/src/theme/platforms.test.ts b/libs/uipack/src/theme/platforms.test.ts index b1ac8cde..3a2105ef 100644 --- a/libs/uipack/src/theme/platforms.test.ts +++ b/libs/uipack/src/theme/platforms.test.ts @@ -25,24 +25,24 @@ describe('Platform System', () => { }); describe('CLAUDE_PLATFORM', () => { - it('should have blocked network and inline scripts', () => { + it('should have limited network with CDN support', () => { expect(CLAUDE_PLATFORM.id).toBe('claude'); - expect(CLAUDE_PLATFORM.supportsWidgets).toBe(false); + expect(CLAUDE_PLATFORM.supportsWidgets).toBe(true); // Claude Artifacts support widgets expect(CLAUDE_PLATFORM.supportsTailwind).toBe(true); - expect(CLAUDE_PLATFORM.supportsHtmx).toBe(false); - expect(CLAUDE_PLATFORM.networkMode).toBe('limited'); - expect(CLAUDE_PLATFORM.scriptStrategy).toBe('cdn'); + expect(CLAUDE_PLATFORM.supportsHtmx).toBe(false); // No HTMX - connect-src blocked + expect(CLAUDE_PLATFORM.networkMode).toBe('limited'); // Limited to specific CDNs + expect(CLAUDE_PLATFORM.scriptStrategy).toBe('cdn'); // Can use cdnjs, esm.sh, etc. }); }); describe('GEMINI_PLATFORM', () => { - it('should have limited widget support', () => { + it('should have no interactive widget support', () => { expect(GEMINI_PLATFORM.id).toBe('gemini'); expect(GEMINI_PLATFORM.supportsWidgets).toBe(false); - expect(GEMINI_PLATFORM.supportsTailwind).toBe(true); - expect(GEMINI_PLATFORM.supportsHtmx).toBe(true); + expect(GEMINI_PLATFORM.supportsTailwind).toBe(true); // No Tailwind in Gemini + expect(GEMINI_PLATFORM.supportsHtmx).toBe(false); // No HTMX in Gemini expect(GEMINI_PLATFORM.networkMode).toBe('limited'); - expect(CLAUDE_PLATFORM.scriptStrategy).toBe('cdn'); + expect(GEMINI_PLATFORM.scriptStrategy).toBe('inline'); }); it('should have markdown fallback option', () => { @@ -120,15 +120,18 @@ describe('Platform System', () => { }); describe('needsInlineScripts', () => { - it('should return true for inline script strategy', () => { - expect(needsInlineScripts(CLAUDE_PLATFORM)).toBe(true); + it('should return false for Claude with limited CDN support', () => { + // Claude has scriptStrategy: 'cdn' and networkMode: 'limited' + // It can use CDN resources from allowed domains + expect(needsInlineScripts(CLAUDE_PLATFORM)).toBe(false); }); it('should return false for cdn script strategy with full network', () => { expect(needsInlineScripts(OPENAI_PLATFORM)).toBe(false); }); - it('should return true for blocked network mode', () => { + it('should return true for inline script strategy', () => { + // Gemini has scriptStrategy: 'inline' expect(needsInlineScripts(GEMINI_PLATFORM)).toBe(true); }); }); diff --git a/libs/uipack/src/theme/platforms.ts b/libs/uipack/src/theme/platforms.ts index 9bce3cab..b74e9f13 100644 --- a/libs/uipack/src/theme/platforms.ts +++ b/libs/uipack/src/theme/platforms.ts @@ -103,7 +103,7 @@ export const OPENAI_PLATFORM: PlatformCapabilities = { export const CLAUDE_PLATFORM: PlatformCapabilities = { id: 'claude', name: 'Claude (Artifacts)', - supportsWidgets: true, + supportsWidgets: false, supportsTailwind: true, supportsHtmx: false, // Network blocked, HTMX won't work for API calls networkMode: 'limited', @@ -124,7 +124,7 @@ export const GEMINI_PLATFORM: PlatformCapabilities = { id: 'gemini', name: 'Gemini', supportsWidgets: false, - supportsTailwind: false, + supportsTailwind: true, supportsHtmx: false, networkMode: 'limited', scriptStrategy: 'inline', diff --git a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts index 975392ed..397b9968 100644 --- a/libs/uipack/src/typings/__tests__/type-fetcher.test.ts +++ b/libs/uipack/src/typings/__tests__/type-fetcher.test.ts @@ -1146,7 +1146,7 @@ describe('TypeFetcher Allowlist', () => { describe('Constants', () => { it('should have correct default options', () => { - expect(DEFAULT_TYPE_FETCHER_OPTIONS.maxDepth).toBe(2); + expect(DEFAULT_TYPE_FETCHER_OPTIONS.maxDepth).toBe(4); expect(DEFAULT_TYPE_FETCHER_OPTIONS.timeout).toBe(10000); expect(DEFAULT_TYPE_FETCHER_OPTIONS.maxConcurrency).toBe(5); expect(DEFAULT_TYPE_FETCHER_OPTIONS.cdnBaseUrl).toBe('https://esm.sh'); diff --git a/libs/uipack/src/typings/types.ts b/libs/uipack/src/typings/types.ts index 479f5e00..17397185 100644 --- a/libs/uipack/src/typings/types.ts +++ b/libs/uipack/src/typings/types.ts @@ -460,11 +460,17 @@ export interface PackageResolution { // Constants // ============================================ +/** + * Default allowed packages for type fetching. + * These packages are always allowed unless the allowlist is disabled. + */ +export const DEFAULT_ALLOWED_PACKAGES = ['react', 'react-dom', 'react/jsx-runtime', 'zod', '@frontmcp/*'] as const; + /** * Default options for TypeFetcher. */ export const DEFAULT_TYPE_FETCHER_OPTIONS: Required> = { - allowedPackages: ['react', 'react-dom', 'react/jsx-runtime', 'zod', '@frontmcp/*'], + allowedPackages: [...DEFAULT_ALLOWED_PACKAGES], maxDepth: 4, timeout: 10000, maxConcurrency: 5, @@ -480,9 +486,3 @@ export const TYPE_CACHE_PREFIX = 'types:'; * Default cache TTL in milliseconds (1 hour). */ export const DEFAULT_TYPE_CACHE_TTL = 60 * 60 * 1000; - -/** - * Default allowed packages for type fetching. - * These packages are always allowed unless the allowlist is disabled. - */ -export const DEFAULT_ALLOWED_PACKAGES = ['react', 'react-dom', 'react/jsx-runtime', 'zod', '@frontmcp/*'] as const; From a5570424667c599a3b5df4c9694a5702f6aebba4 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 20:05:04 +0200 Subject: [PATCH 14/19] feat: Enable widget support for Claude Artifacts platform --- libs/uipack/src/theme/platforms.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/uipack/src/theme/platforms.ts b/libs/uipack/src/theme/platforms.ts index b74e9f13..fa3ef90d 100644 --- a/libs/uipack/src/theme/platforms.ts +++ b/libs/uipack/src/theme/platforms.ts @@ -103,7 +103,7 @@ export const OPENAI_PLATFORM: PlatformCapabilities = { export const CLAUDE_PLATFORM: PlatformCapabilities = { id: 'claude', name: 'Claude (Artifacts)', - supportsWidgets: false, + supportsWidgets: true, // Claude Artifacts support interactive widgets supportsTailwind: true, supportsHtmx: false, // Network blocked, HTMX won't work for API calls networkMode: 'limited', From e3cd703d8b9b392b6face2fc53f27a308ce50fbe Mon Sep 17 00:00:00 2001 From: David Antoon Date: Tue, 23 Dec 2025 21:28:55 +0200 Subject: [PATCH 15/19] feat: Add CSS to Tailwind theme conversion utility and update button styles --- libs/uipack/src/styles/variants.ts | 12 +- libs/uipack/src/theme/css-to-theme.test.ts | 173 +++++++++++++++++++++ libs/uipack/src/theme/css-to-theme.ts | 138 ++++++++++++++++ libs/uipack/src/theme/index.ts | 3 + libs/uipack/src/theme/theme.test.ts | 25 +++ libs/uipack/src/theme/theme.ts | 62 +++++++- 6 files changed, 400 insertions(+), 13 deletions(-) create mode 100644 libs/uipack/src/theme/css-to-theme.test.ts create mode 100644 libs/uipack/src/theme/css-to-theme.ts diff --git a/libs/uipack/src/styles/variants.ts b/libs/uipack/src/styles/variants.ts index 07b6e302..cb9fc51f 100644 --- a/libs/uipack/src/styles/variants.ts +++ b/libs/uipack/src/styles/variants.ts @@ -51,7 +51,7 @@ export const BADGE_VARIANTS: Record = { success: 'bg-success/10 text-success', warning: 'bg-warning/10 text-warning', danger: 'bg-danger/10 text-danger', - info: 'bg-blue-100 text-blue-800', + info: 'bg-info/10 text-info', outline: 'border border-border text-text-primary bg-transparent', }; @@ -74,7 +74,7 @@ export const BADGE_DOT_VARIANTS: Record = { success: 'bg-success', warning: 'bg-warning', danger: 'bg-danger', - info: 'bg-blue-500', + info: 'bg-info', outline: 'border border-current', }; @@ -104,7 +104,7 @@ export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export const BUTTON_VARIANTS: Record = { primary: 'bg-primary hover:bg-primary/90 text-white shadow-sm', secondary: 'bg-secondary hover:bg-secondary/90 text-white shadow-sm', - outline: 'border-2 border-primary text-primary hover:bg-primary/10', + outline: 'border-2 border-primary bg-primary hover:bg-primary/90', ghost: 'text-text-primary hover:bg-gray-100', danger: 'bg-danger hover:bg-danger/90 text-white shadow-sm', success: 'bg-success hover:bg-success/90 text-white shadow-sm', @@ -128,7 +128,7 @@ export const BUTTON_ICON_SIZES: Record = { }; export const BUTTON_BASE_CLASSES = - 'inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2'; + 'cursor-pointer inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2'; export function getButtonVariantClasses(variant: ButtonVariant): string { return BUTTON_VARIANTS[variant]; @@ -146,8 +146,8 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral' export const ALERT_VARIANTS: Record = { info: { - container: 'bg-blue-50 border-blue-200 text-blue-800', - icon: 'text-blue-500', + container: 'bg-info/10 border-info/30 text-info', + icon: 'text-info', }, success: { container: 'bg-success/10 border-success/30 text-success', diff --git a/libs/uipack/src/theme/css-to-theme.test.ts b/libs/uipack/src/theme/css-to-theme.test.ts new file mode 100644 index 00000000..e616c34e --- /dev/null +++ b/libs/uipack/src/theme/css-to-theme.test.ts @@ -0,0 +1,173 @@ +import { cssToTailwindTheme, buildTailwindStyleBlock } from './css-to-theme'; + +describe('css-to-theme', () => { + describe('cssToTailwindTheme', () => { + it('should extract color variables from :root', () => { + const userCss = `:root { + --color-primary: #0556b2; + --color-secondary: #6b7280; +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.colorVars.get('color-primary')).toBe('#0556b2'); + expect(result.colorVars.get('color-secondary')).toBe('#6b7280'); + expect(result.colorVars.size).toBe(2); + }); + + it('should generate @theme block with color variables', () => { + const userCss = `:root { + --color-primary: #0556b2; + --color-success: #10b981; +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.themeBlock).toContain('@theme'); + expect(result.themeBlock).toContain('--color-primary: #0556b2;'); + expect(result.themeBlock).toContain('--color-success: #10b981;'); + }); + + it('should remove color variables from remaining CSS', () => { + const userCss = `:root { + --color-primary: #0556b2; + --font-family: Inter; +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.remainingCss).not.toContain('--color-primary'); + expect(result.remainingCss).toContain('--font-family: Inter'); + }); + + it('should handle CSS with multiple --color-* variations', () => { + const userCss = `:root { + --color-primary: #0556b2; + --color-primary-hover: #03a223; + --color-text: #111827; + --color-text-secondary: #6b7280; + --color-border: #e5e7eb; +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.colorVars.size).toBe(5); + expect(result.colorVars.get('color-primary')).toBe('#0556b2'); + expect(result.colorVars.get('color-primary-hover')).toBe('#03a223'); + expect(result.colorVars.get('color-text')).toBe('#111827'); + expect(result.colorVars.get('color-text-secondary')).toBe('#6b7280'); + expect(result.colorVars.get('color-border')).toBe('#e5e7eb'); + }); + + it('should handle CSS with no color variables', () => { + const userCss = `:root { + --font-family: Inter; + --border-radius: 8px; +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.colorVars.size).toBe(0); + expect(result.themeBlock).toBe(''); + expect(result.remainingCss).toContain('--font-family: Inter'); + expect(result.remainingCss).toContain('--border-radius: 8px'); + }); + + it('should handle empty CSS', () => { + const result = cssToTailwindTheme(''); + + expect(result.colorVars.size).toBe(0); + expect(result.themeBlock).toBe(''); + expect(result.remainingCss).toBe(''); + }); + + it('should handle color values with rgb/rgba syntax', () => { + const userCss = `:root { + --color-overlay: rgba(27, 31, 36, 0.5); + --color-primary: rgb(5, 86, 178); +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.colorVars.get('color-overlay')).toBe('rgba(27, 31, 36, 0.5)'); + expect(result.colorVars.get('color-primary')).toBe('rgb(5, 86, 178)'); + }); + + it('should handle color values with hsl syntax', () => { + const userCss = `:root { + --color-primary: hsl(210, 100%, 50%); + --color-secondary: hsla(0, 0%, 50%, 0.8); +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.colorVars.get('color-primary')).toBe('hsl(210, 100%, 50%)'); + expect(result.colorVars.get('color-secondary')).toBe('hsla(0, 0%, 50%, 0.8)'); + }); + + it('should preserve non-root CSS blocks', () => { + const userCss = `:root { + --color-primary: #0556b2; +} + +body { + font-family: var(--font-family); +} + +.card { + background: var(--color-surface); +}`; + + const result = cssToTailwindTheme(userCss); + + expect(result.remainingCss).toContain('body {'); + expect(result.remainingCss).toContain('.card {'); + expect(result.remainingCss).toContain('font-family: var(--font-family)'); + }); + }); + + describe('buildTailwindStyleBlock', () => { + it('should generate complete style tag with @theme', () => { + const userCss = `:root { + --color-primary: #0556b2; +}`; + + const result = buildTailwindStyleBlock(userCss); + + expect(result).toContain(''); + expect(result).toContain('@theme'); + expect(result).toContain('--color-primary: #0556b2;'); + }); + + it('should include remaining CSS in style block', () => { + const userCss = `:root { + --color-primary: #0556b2; + --font-family: Inter; +}`; + + const result = buildTailwindStyleBlock(userCss); + + expect(result).toContain('@theme'); + expect(result).toContain('--color-primary: #0556b2;'); + expect(result).toContain('--font-family: Inter'); + }); + + it('should return empty string for empty input', () => { + const result = buildTailwindStyleBlock(''); + expect(result).toBe(''); + }); + + it('should handle CSS with only non-color variables', () => { + const userCss = `:root { + --font-family: Inter; +}`; + + const result = buildTailwindStyleBlock(userCss); + + expect(result).toContain(' + * ``` + */ +export function buildTailwindStyleBlock(userCss: string): string { + const { themeBlock, remainingCss } = cssToTailwindTheme(userCss); + + const parts = [themeBlock, remainingCss.trim()].filter(Boolean); + + if (parts.length === 0) { + return ''; + } + + return ``; +} diff --git a/libs/uipack/src/theme/index.ts b/libs/uipack/src/theme/index.ts index 5a689162..f22d3ee7 100644 --- a/libs/uipack/src/theme/index.ts +++ b/libs/uipack/src/theme/index.ts @@ -92,3 +92,6 @@ export { // Theme presets (includes DEFAULT_THEME) export { GITHUB_OPENAI_THEME, DEFAULT_THEME } from './presets'; + +// CSS to Tailwind theme conversion +export { type CssToThemeResult, cssToTailwindTheme, buildTailwindStyleBlock } from './css-to-theme'; diff --git a/libs/uipack/src/theme/theme.test.ts b/libs/uipack/src/theme/theme.test.ts index e105b60a..fc050143 100644 --- a/libs/uipack/src/theme/theme.test.ts +++ b/libs/uipack/src/theme/theme.test.ts @@ -140,5 +140,30 @@ describe('Theme System', () => { const css = buildThemeCss(theme); expect(css).toContain('--my-custom: #abcdef'); }); + + it('should generate opacity variants for semantic colors', () => { + const css = buildThemeCss(DEFAULT_THEME); + // Check that opacity variants are generated using color-mix + expect(css).toContain('--color-primary-10'); + expect(css).toContain('--color-primary-30'); + expect(css).toContain('--color-success-10'); + expect(css).toContain('--color-danger-10'); + expect(css).toContain('color-mix(in oklch'); + }); + + it('should generate hover variants for brand colors', () => { + const css = buildThemeCss(DEFAULT_THEME); + // Check that hover variants are generated for primary and secondary + expect(css).toContain('--color-primary-hover'); + expect(css).toContain('--color-secondary-hover'); + }); + + it('should generate all opacity levels (10, 20, 30, 50, 70, 90)', () => { + const css = buildThemeCss(DEFAULT_THEME); + const opacityLevels = [10, 20, 30, 50, 70, 90]; + for (const level of opacityLevels) { + expect(css).toContain(`--color-primary-${level}`); + } + }); }); }); diff --git a/libs/uipack/src/theme/theme.ts b/libs/uipack/src/theme/theme.ts index 276699b6..7959da27 100644 --- a/libs/uipack/src/theme/theme.ts +++ b/libs/uipack/src/theme/theme.ts @@ -563,22 +563,69 @@ function emitColorScale(lines: string[], name: string, scale: ColorScale): void } } +/** + * Common opacity percentages for color variants. + * These are used to generate opacity variants like --color-primary-10, --color-primary-30, etc. + */ +const OPACITY_VARIANTS = [10, 20, 30, 50, 70, 90] as const; + +/** + * Emit a color with opacity variants using CSS color-mix(). + * This generates the base color plus variants at different opacity levels. + * + * @example + * // Input: emitColorWithOpacityVariants(lines, 'primary', '#24292f') + * // Output: + * // --color-primary: #24292f; + * // --color-primary-10: color-mix(in oklch, #24292f 10%, transparent); + * // --color-primary-20: color-mix(in oklch, #24292f 20%, transparent); + * // ... etc + */ +function emitColorWithOpacityVariants(lines: string[], name: string, value: string): void { + lines.push(`--color-${name}: ${value};`); + for (const opacity of OPACITY_VARIANTS) { + lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`); + } +} + +/** + * Emit a brand color with both opacity variants and a hover state. + * Used for primary/secondary colors that need hover interactions. + * + * @example + * // Input: emitBrandColorWithVariants(lines, 'primary', '#24292f') + * // Output: + * // --color-primary: #24292f; + * // --color-primary-hover: color-mix(in oklch, #24292f 85%, black); + * // --color-primary-10: color-mix(in oklch, #24292f 10%, transparent); + * // ... etc + */ +function emitBrandColorWithVariants(lines: string[], name: string, value: string): void { + lines.push(`--color-${name}: ${value};`); + // Add hover variant (slightly darker) + lines.push(`--color-${name}-hover: color-mix(in oklch, ${value} 85%, black);`); + // Add opacity variants + for (const opacity of OPACITY_VARIANTS) { + lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`); + } +} + /** * Build Tailwind @theme CSS from theme configuration */ export function buildThemeCss(theme: ThemeConfig): string { const lines: string[] = []; - // Colors - semantic + // Colors - semantic (with opacity and hover variants for commonly used colors) const semantic = theme.colors.semantic; if (typeof semantic.primary === 'string') { - lines.push(`--color-primary: ${semantic.primary};`); + emitBrandColorWithVariants(lines, '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};`); + emitBrandColorWithVariants(lines, 'secondary', semantic.secondary); } else { emitColorScale(lines, 'secondary', semantic.secondary); } @@ -597,10 +644,11 @@ export function buildThemeCss(theme: ThemeConfig): string { 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};`); + // Status colors with opacity variants (used in badges, alerts, etc.) + if (semantic.success) emitColorWithOpacityVariants(lines, 'success', semantic.success); + if (semantic.warning) emitColorWithOpacityVariants(lines, 'warning', semantic.warning); + if (semantic.danger) emitColorWithOpacityVariants(lines, 'danger', semantic.danger); + if (semantic.info) emitColorWithOpacityVariants(lines, 'info', semantic.info); // Colors - surface const surface = theme.colors.surface; From 82a70d36ca3d2877e7251384adb856c6094349d4 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Wed, 24 Dec 2025 01:01:28 +0200 Subject: [PATCH 16/19] feat: Introduce new UI builder architecture with platform-specific preview handlers and esbuild configuration --- libs/ui/CLAUDE.md | 117 ++-- libs/ui/package.json | 1 - libs/ui/project.json | 8 +- .../bridge/__tests__/iife-generator.test.ts | 7 +- libs/ui/src/bridge/index.ts | 4 +- libs/ui/src/bundler/__tests__/cache.test.ts | 491 --------------- libs/ui/src/bundler/browser-components.ts | 1 - libs/ui/src/bundler/bundler.ts | 17 +- libs/ui/src/bundler/cache.ts | 335 ---------- .../bundler/file-cache/component-builder.ts | 509 ---------------- .../src/bundler/file-cache/hash-calculator.ts | 398 ------------ libs/ui/src/bundler/file-cache/index.ts | 51 -- .../bundler/file-cache/storage/filesystem.ts | 494 --------------- .../src/bundler/file-cache/storage/index.ts | 23 - .../bundler/file-cache/storage/interface.ts | 189 ------ .../src/bundler/file-cache/storage/redis.ts | 398 ------------ libs/ui/src/bundler/index.ts | 26 +- .../ui/src/bundler/sandbox/enclave-adapter.ts | 477 --------------- libs/ui/src/bundler/sandbox/executor.ts | 22 - libs/ui/src/bundler/sandbox/policy.ts | 256 -------- libs/ui/src/index.ts | 24 +- libs/ui/src/pages/consent.ts | 393 ------------ libs/ui/src/pages/error.ts | 358 ----------- libs/ui/src/pages/index.ts | 34 -- libs/ui/src/react/index.ts | 3 - libs/ui/src/react/utils.ts | 101 ---- libs/ui/src/renderers/index.ts | 4 +- libs/ui/src/renderers/react.renderer.ts | 205 ++++--- libs/ui/src/widgets/index.ts | 37 -- libs/ui/src/widgets/progress.ts | 501 --------------- libs/ui/src/widgets/resource.ts | 572 ------------------ libs/uipack/CLAUDE.md | 193 +++--- .../uipack/src/build/builders/base-builder.ts | 393 ++++++++++++ .../src/build/builders/esbuild-config.ts | 222 +++++++ .../src/build/builders/hybrid-builder.ts | 401 ++++++++++++ libs/uipack/src/build/builders/index.ts | 50 ++ .../src/build/builders/inline-builder.ts | 384 ++++++++++++ .../src/build/builders/static-builder.ts | 294 +++++++++ libs/uipack/src/build/builders/types.ts | 442 ++++++++++++++ libs/uipack/src/build/index.ts | 40 ++ libs/uipack/src/build/widget-manifest.ts | 6 +- libs/uipack/src/index.ts | 51 ++ libs/uipack/src/preview/claude-preview.ts | 234 +++++++ libs/uipack/src/preview/generic-preview.ts | 294 +++++++++ libs/uipack/src/preview/index.ts | 86 +++ libs/uipack/src/preview/openai-preview.ts | 330 ++++++++++ libs/uipack/src/preview/types.ts | 236 ++++++++ libs/uipack/src/registry/render-template.ts | 6 +- libs/uipack/src/renderers/index.ts | 19 +- libs/uipack/src/renderers/registry.ts | 4 +- 50 files changed, 3789 insertions(+), 5952 deletions(-) delete mode 100644 libs/ui/src/bundler/__tests__/cache.test.ts delete mode 100644 libs/ui/src/bundler/cache.ts delete mode 100644 libs/ui/src/bundler/file-cache/component-builder.ts delete mode 100644 libs/ui/src/bundler/file-cache/hash-calculator.ts delete mode 100644 libs/ui/src/bundler/file-cache/index.ts delete mode 100644 libs/ui/src/bundler/file-cache/storage/filesystem.ts delete mode 100644 libs/ui/src/bundler/file-cache/storage/index.ts delete mode 100644 libs/ui/src/bundler/file-cache/storage/interface.ts delete mode 100644 libs/ui/src/bundler/file-cache/storage/redis.ts delete mode 100644 libs/ui/src/bundler/sandbox/enclave-adapter.ts delete mode 100644 libs/ui/src/bundler/sandbox/executor.ts delete mode 100644 libs/ui/src/bundler/sandbox/policy.ts delete mode 100644 libs/ui/src/pages/consent.ts delete mode 100644 libs/ui/src/pages/error.ts delete mode 100644 libs/ui/src/pages/index.ts delete mode 100644 libs/ui/src/react/utils.ts delete mode 100644 libs/ui/src/widgets/index.ts delete mode 100644 libs/ui/src/widgets/progress.ts delete mode 100644 libs/ui/src/widgets/resource.ts create mode 100644 libs/uipack/src/build/builders/base-builder.ts create mode 100644 libs/uipack/src/build/builders/esbuild-config.ts create mode 100644 libs/uipack/src/build/builders/hybrid-builder.ts create mode 100644 libs/uipack/src/build/builders/index.ts create mode 100644 libs/uipack/src/build/builders/inline-builder.ts create mode 100644 libs/uipack/src/build/builders/static-builder.ts create mode 100644 libs/uipack/src/build/builders/types.ts create mode 100644 libs/uipack/src/preview/claude-preview.ts create mode 100644 libs/uipack/src/preview/generic-preview.ts create mode 100644 libs/uipack/src/preview/index.ts create mode 100644 libs/uipack/src/preview/openai-preview.ts create mode 100644 libs/uipack/src/preview/types.ts diff --git a/libs/ui/CLAUDE.md b/libs/ui/CLAUDE.md index a20aa9c1..eba21bf9 100644 --- a/libs/ui/CLAUDE.md +++ b/libs/ui/CLAUDE.md @@ -4,7 +4,7 @@ `@frontmcp/ui` provides **React components, hooks, and rendering utilities** for building interactive MCP widgets. -This package requires React. For React-free utilities (bundling, build tools, HTML components, platform adapters), use `@frontmcp/uipack`. +This package requires React. For React-free utilities (bundling, build tools, platform adapters, theme), use `@frontmcp/uipack`. **Key Principles:** @@ -17,41 +17,55 @@ This package requires React. For React-free utilities (bundling, build tools, HT ```text libs/ui/src/ +├── bridge/ # MCP bridge runtime and adapters +├── bundler/ # SSR component bundling (re-exports from uipack) +├── components/ # HTML string components (button, card, etc.) +├── layouts/ # Page layout templates ├── react/ # React components and hooks -│ ├── components/ # Button, Card, Alert, Badge, etc. +│ ├── Card.tsx # Card component +│ ├── Button.tsx # Button component +│ ├── Alert.tsx # Alert component +│ ├── Badge.tsx # Badge component │ └── hooks/ # useMcpBridge, useCallTool, useToolInput ├── render/ # React 19 static rendering utilities ├── renderers/ # React renderer for template processing │ ├── react.renderer.ts # SSR renderer (react-dom/server) -│ └── react.adapter.ts # Client-side hydration adapter -├── bundler/ # SSR component bundling +│ ├── react.adapter.ts # Client-side hydration adapter +│ └── mdx.renderer.ts # MDX server-side renderer ├── universal/ # Universal React app shell +├── web-components/ # Custom HTML elements └── index.ts # Main barrel exports ``` ## Package Split -| Package | Purpose | React Required | -| ------------------ | --------------------------------------------------------- | -------------- | -| `@frontmcp/ui` | React components, hooks, SSR | Yes | -| `@frontmcp/uipack` | Bundling, build tools, HTML components, platform adapters | No | +| Package | Purpose | React Required | +| ------------------ | ----------------------------------------------- | -------------- | +| `@frontmcp/ui` | React components, hooks, SSR, HTML components | Yes | +| `@frontmcp/uipack` | Bundling, build tools, platform adapters, theme | No | ### Import Patterns ```typescript // React components and hooks (this package) -import { Button, Card, Alert } from '@frontmcp/ui/react'; -import { useMcpBridge, useCallTool } from '@frontmcp/ui/react/hooks'; +import { Button, Card, Alert, Badge } from '@frontmcp/ui/react'; +import { useMcpBridge, useCallTool, useToolInput } from '@frontmcp/ui/react'; // SSR rendering -import { ReactRenderer, reactRenderer } from '@frontmcp/ui/renderers'; +import { ReactRenderer, reactRenderer, MdxRenderer, mdxRenderer } from '@frontmcp/ui/renderers'; // Universal app shell import { UniversalApp, FrontMCPProvider } from '@frontmcp/ui/universal'; +// HTML string components +import { button, card, alert, badge } from '@frontmcp/ui/components'; + +// MCP bridge +import { FrontMcpBridge, createBridge } from '@frontmcp/ui/bridge'; + // React-free utilities (from @frontmcp/uipack) import { buildToolUI } from '@frontmcp/uipack/build'; -import { button, card } from '@frontmcp/uipack/components'; +import { DEFAULT_THEME } from '@frontmcp/uipack/theme'; import type { AIPlatformType } from '@frontmcp/uipack/adapters'; ``` @@ -60,41 +74,50 @@ import type { AIPlatformType } from '@frontmcp/uipack/adapters'; ### Available Components ```typescript -import { - Button, - Card, - Alert, - Badge, - // ... more components -} from '@frontmcp/ui/react'; +import { Card, Badge, Button, Alert } from '@frontmcp/ui/react'; // Usage - +

Card content

 + +Active + + + Please check your input + ``` ### MCP Bridge Hooks ```typescript -import { useMcpBridge, useCallTool, useToolInput, useToolOutput } from '@frontmcp/ui/react/hooks'; +import { + McpBridgeProvider, + useMcpBridge, + useCallTool, + useToolInput, + useToolOutput, + useTheme, +} from '@frontmcp/ui/react'; function MyWidget() { - const bridge = useMcpBridge(); - const { call, loading, error } = useCallTool(); - const input = useToolInput(); - const output = useToolOutput(); + const input = useToolInput<{ location: string }>(); + const theme = useTheme(); + const [getWeather, { data, loading }] = useCallTool('get_weather'); + return {loading ? 'Loading...' : data?.temperature}; +} + +// Wrap your app with the provider +function App() { return ( -
-

Input: {JSON.stringify(input)}

-

Output: {JSON.stringify(output)}

- -
+ + + ); } ``` @@ -110,6 +133,15 @@ import { ReactRenderer, reactRenderer } from '@frontmcp/ui/renderers'; const html = await reactRenderer.render(MyComponent, context); ``` +### MDX Server Rendering + +```typescript +import { MdxRenderer, mdxRenderer } from '@frontmcp/ui/renderers'; + +// Render MDX to HTML with React components +const html = await mdxRenderer.render('# Hello {output.name}', context); +``` + ### Client-Side Hydration ```typescript @@ -145,6 +177,8 @@ function App() { ## SSR Bundling +The bundler re-exports utilities from `@frontmcp/uipack/bundler`: + ```typescript import { InMemoryBundler, createBundler } from '@frontmcp/ui/bundler'; @@ -178,15 +212,18 @@ const result = await bundler.bundle(componentPath); ## Entry Points -| Path | Purpose | -| -------------------------- | ------------------------------------------ | -| `@frontmcp/ui` | Main exports (React components, renderers) | -| `@frontmcp/ui/react` | React components | -| `@frontmcp/ui/react/hooks` | MCP bridge hooks | -| `@frontmcp/ui/renderers` | ReactRenderer, ReactRendererAdapter | -| `@frontmcp/ui/render` | React 19 static rendering | -| `@frontmcp/ui/universal` | Universal app shell | -| `@frontmcp/ui/bundler` | SSR component bundler | +| Path | Purpose | +| ----------------------------- | ------------------------------------------ | +| `@frontmcp/ui` | Main exports (React components, renderers) | +| `@frontmcp/ui/react` | React components and hooks | +| `@frontmcp/ui/renderers` | ReactRenderer, MdxRenderer, adapters | +| `@frontmcp/ui/render` | React 19 static rendering | +| `@frontmcp/ui/universal` | Universal app shell | +| `@frontmcp/ui/bundler` | SSR component bundler | +| `@frontmcp/ui/bridge` | MCP bridge runtime | +| `@frontmcp/ui/components` | HTML string components | +| `@frontmcp/ui/layouts` | Page layout templates | +| `@frontmcp/ui/web-components` | Custom HTML elements | ## Anti-Patterns to Avoid @@ -198,6 +235,6 @@ const result = await bundler.bundle(componentPath); ## Related Packages -- **@frontmcp/uipack** - React-free bundling, build tools, HTML components +- **@frontmcp/uipack** - React-free bundling, build tools, theme, platform adapters - **@frontmcp/sdk** - Core FrontMCP SDK - **@frontmcp/testing** - E2E testing utilities diff --git a/libs/ui/package.json b/libs/ui/package.json index 0ac4f0bf..7ddd7d93 100644 --- a/libs/ui/package.json +++ b/libs/ui/package.json @@ -57,7 +57,6 @@ "dependencies": { "@mdx-js/mdx": "^3.1.1", "@swc/core": "^1.5.0", - "enclave-vm": "^1.0.3", "esbuild": "^0.27.1", "zod": "^4.0.0" }, diff --git a/libs/ui/project.json b/libs/ui/project.json index 1759f1ee..5469d673 100644 --- a/libs/ui/project.json +++ b/libs/ui/project.json @@ -25,13 +25,11 @@ "libs/ui/src/bundler/index.ts", "libs/ui/src/components/index.ts", "libs/ui/src/layouts/index.ts", - "libs/ui/src/pages/index.ts", "libs/ui/src/react/index.ts", "libs/ui/src/render/index.ts", "libs/ui/src/renderers/index.ts", "libs/ui/src/universal/index.ts", - "libs/ui/src/web-components/index.ts", - "libs/ui/src/widgets/index.ts" + "libs/ui/src/web-components/index.ts" ], "esbuildOptions": { "outExtension": { ".js": ".js" }, @@ -63,13 +61,11 @@ "libs/ui/src/bundler/index.ts", "libs/ui/src/components/index.ts", "libs/ui/src/layouts/index.ts", - "libs/ui/src/pages/index.ts", "libs/ui/src/react/index.ts", "libs/ui/src/render/index.ts", "libs/ui/src/renderers/index.ts", "libs/ui/src/universal/index.ts", - "libs/ui/src/web-components/index.ts", - "libs/ui/src/widgets/index.ts" + "libs/ui/src/web-components/index.ts" ], "esbuildOptions": { "outExtension": { ".js": ".mjs" }, diff --git a/libs/ui/src/bridge/__tests__/iife-generator.test.ts b/libs/ui/src/bridge/__tests__/iife-generator.test.ts index 6a219ded..8ad9250a 100644 --- a/libs/ui/src/bridge/__tests__/iife-generator.test.ts +++ b/libs/ui/src/bridge/__tests__/iife-generator.test.ts @@ -2,12 +2,7 @@ * IIFE Generator Tests */ -import { - generateBridgeIIFE, - generatePlatformBundle, - UNIVERSAL_BRIDGE_SCRIPT, - BRIDGE_SCRIPT_TAGS, -} from '../runtime/iife-generator'; +import { generateBridgeIIFE, generatePlatformBundle, UNIVERSAL_BRIDGE_SCRIPT, BRIDGE_SCRIPT_TAGS } from '../runtime'; describe('IIFE Generator', () => { describe('generateBridgeIIFE', () => { diff --git a/libs/ui/src/bridge/index.ts b/libs/ui/src/bridge/index.ts index 78ba8119..5c56a2ba 100644 --- a/libs/ui/src/bridge/index.ts +++ b/libs/ui/src/bridge/index.ts @@ -102,11 +102,11 @@ export { GenericAdapter, createGenericAdapter } from './adapters/generic.adapter export { registerBuiltInAdapters } from './adapters'; -// Runtime +// Runtime - Re-exported from @frontmcp/uipack (single source of truth) export { generateBridgeIIFE, generatePlatformBundle, UNIVERSAL_BRIDGE_SCRIPT, BRIDGE_SCRIPT_TAGS, type IIFEGeneratorOptions, -} from './runtime/iife-generator'; +} from './runtime'; diff --git a/libs/ui/src/bundler/__tests__/cache.test.ts b/libs/ui/src/bundler/__tests__/cache.test.ts deleted file mode 100644 index a59362cb..00000000 --- a/libs/ui/src/bundler/__tests__/cache.test.ts +++ /dev/null @@ -1,491 +0,0 @@ -/** - * Bundler Cache Tests - * - * Tests for the LRU cache, hash functions, and cache key generation. - */ - -import { BundlerCache, hashContent, createCacheKey, type CacheStats } from '../cache'; -import type { BundleResult } from '../types'; - -// ============================================ -// Test Fixtures -// ============================================ - -function createMockResult(overrides: Partial = {}): BundleResult { - return { - code: 'console.log("test");', - size: 20, - cached: false, - hash: 'abc123', - ...overrides, - }; -} - -// ============================================ -// BundlerCache Tests -// ============================================ - -describe('BundlerCache', () => { - let cache: BundlerCache; - - beforeEach(() => { - cache = new BundlerCache({ maxSize: 10, ttl: 5000 }); - }); - - describe('Constructor', () => { - it('should create cache with default options', () => { - const defaultCache = new BundlerCache(); - expect(defaultCache.size).toBe(0); - }); - - it('should create cache with custom options', () => { - const customCache = new BundlerCache({ maxSize: 50, ttl: 10000 }); - expect(customCache.size).toBe(0); - }); - }); - - describe('set and get', () => { - it('should store and retrieve entries', () => { - const result = createMockResult(); - cache.set('key1', result); - - const retrieved = cache.get('key1'); - expect(retrieved).toEqual(result); - }); - - it('should return undefined for missing keys', () => { - expect(cache.get('nonexistent')).toBeUndefined(); - }); - - it('should update access count on get', () => { - const result = createMockResult(); - cache.set('key1', result); - - cache.get('key1'); - cache.get('key1'); - cache.get('key1'); - - const stats = cache.getStats(); - expect(stats.hits).toBe(3); - }); - - it('should track cache misses', () => { - cache.get('missing1'); - cache.get('missing2'); - - const stats = cache.getStats(); - expect(stats.misses).toBe(2); - }); - }); - - describe('has', () => { - it('should return true for existing keys', () => { - cache.set('key1', createMockResult()); - expect(cache.has('key1')).toBe(true); - }); - - it('should return false for missing keys', () => { - expect(cache.has('missing')).toBe(false); - }); - }); - - describe('delete', () => { - it('should delete existing entries', () => { - cache.set('key1', createMockResult()); - expect(cache.has('key1')).toBe(true); - - const deleted = cache.delete('key1'); - expect(deleted).toBe(true); - expect(cache.has('key1')).toBe(false); - }); - - it('should return false for missing keys', () => { - expect(cache.delete('missing')).toBe(false); - }); - }); - - describe('clear', () => { - it('should remove all entries', () => { - cache.set('key1', createMockResult()); - cache.set('key2', createMockResult()); - cache.set('key3', createMockResult()); - - expect(cache.size).toBe(3); - - cache.clear(); - expect(cache.size).toBe(0); - }); - - it('should reset statistics', () => { - cache.set('key1', createMockResult()); - cache.get('key1'); - cache.get('missing'); - - cache.clear(); - - const stats = cache.getStats(); - expect(stats.hits).toBe(0); - expect(stats.misses).toBe(0); - }); - }); - - describe('LRU Eviction', () => { - it('should evict oldest entries when at capacity', () => { - const smallCache = new BundlerCache({ maxSize: 3, ttl: 60000 }); - - smallCache.set('key1', createMockResult({ code: 'code1' })); - smallCache.set('key2', createMockResult({ code: 'code2' })); - smallCache.set('key3', createMockResult({ code: 'code3' })); - smallCache.set('key4', createMockResult({ code: 'code4' })); - - expect(smallCache.size).toBe(3); - expect(smallCache.has('key1')).toBe(false); // Evicted - expect(smallCache.has('key2')).toBe(true); - expect(smallCache.has('key3')).toBe(true); - expect(smallCache.has('key4')).toBe(true); - }); - - it('should track eviction count', () => { - const smallCache = new BundlerCache({ maxSize: 2, ttl: 60000 }); - - smallCache.set('key1', createMockResult()); - smallCache.set('key2', createMockResult()); - smallCache.set('key3', createMockResult()); - smallCache.set('key4', createMockResult()); - - const stats = smallCache.getStats(); - expect(stats.evictions).toBe(2); - }); - - it('should refresh LRU order on access', () => { - const smallCache = new BundlerCache({ maxSize: 3, ttl: 60000 }); - - smallCache.set('key1', createMockResult({ code: 'code1' })); - smallCache.set('key2', createMockResult({ code: 'code2' })); - smallCache.set('key3', createMockResult({ code: 'code3' })); - - // Access key1, making it most recently used - smallCache.get('key1'); - - // Add key4, should evict key2 (now oldest) - smallCache.set('key4', createMockResult({ code: 'code4' })); - - expect(smallCache.has('key1')).toBe(true); - expect(smallCache.has('key2')).toBe(false); // Evicted - expect(smallCache.has('key3')).toBe(true); - expect(smallCache.has('key4')).toBe(true); - }); - }); - - describe('TTL Expiration', () => { - it('should expire entries after TTL', async () => { - const shortTtlCache = new BundlerCache({ maxSize: 10, ttl: 50 }); - - shortTtlCache.set('key1', createMockResult()); - expect(shortTtlCache.has('key1')).toBe(true); - - await new Promise((resolve) => setTimeout(resolve, 60)); - - expect(shortTtlCache.has('key1')).toBe(false); - expect(shortTtlCache.get('key1')).toBeUndefined(); - }); - - it('should count expired entries as misses', async () => { - const shortTtlCache = new BundlerCache({ maxSize: 10, ttl: 50 }); - - shortTtlCache.set('key1', createMockResult()); - shortTtlCache.get('key1'); // Hit - - await new Promise((resolve) => setTimeout(resolve, 60)); - - shortTtlCache.get('key1'); // Miss (expired) - - const stats = shortTtlCache.getStats(); - expect(stats.hits).toBe(1); - expect(stats.misses).toBe(1); - }); - - it('should track TTL evictions', async () => { - const shortTtlCache = new BundlerCache({ maxSize: 10, ttl: 50 }); - - shortTtlCache.set('key1', createMockResult()); - - await new Promise((resolve) => setTimeout(resolve, 60)); - - shortTtlCache.get('key1'); // Triggers expiration - - const stats = shortTtlCache.getStats(); - expect(stats.evictions).toBe(1); - }); - }); - - describe('cleanup', () => { - it('should remove expired entries', async () => { - const shortTtlCache = new BundlerCache({ maxSize: 10, ttl: 50 }); - - shortTtlCache.set('key1', createMockResult()); - shortTtlCache.set('key2', createMockResult()); - - await new Promise((resolve) => setTimeout(resolve, 60)); - - const removed = shortTtlCache.cleanup(); - expect(removed).toBe(2); - expect(shortTtlCache.size).toBe(0); - }); - - it('should not remove non-expired entries', async () => { - const cache = new BundlerCache({ maxSize: 10, ttl: 10000 }); - - cache.set('key1', createMockResult()); - cache.set('key2', createMockResult()); - - const removed = cache.cleanup(); - expect(removed).toBe(0); - expect(cache.size).toBe(2); - }); - }); - - describe('keys', () => { - it('should return all cache keys', () => { - cache.set('key1', createMockResult()); - cache.set('key2', createMockResult()); - cache.set('key3', createMockResult()); - - const keys = cache.keys(); - expect(keys).toHaveLength(3); - expect(keys).toContain('key1'); - expect(keys).toContain('key2'); - expect(keys).toContain('key3'); - }); - - it('should return empty array for empty cache', () => { - expect(cache.keys()).toEqual([]); - }); - }); - - describe('getStats', () => { - it('should return correct statistics', () => { - cache.set('key1', createMockResult({ size: 100 })); - cache.set('key2', createMockResult({ size: 200, map: 'sourcemap' })); - - cache.get('key1'); // Hit - cache.get('key2'); // Hit - cache.get('missing'); // Miss - - const stats = cache.getStats(); - - expect(stats.size).toBe(2); - expect(stats.hits).toBe(2); - expect(stats.misses).toBe(1); - expect(stats.hitRate).toBeCloseTo(2 / 3); - expect(stats.memoryUsage).toBe(100 + 200 + 'sourcemap'.length); - }); - - it('should return zero hit rate for empty cache', () => { - const stats = cache.getStats(); - expect(stats.hitRate).toBe(0); - }); - }); - - describe('size property', () => { - it('should return correct size', () => { - expect(cache.size).toBe(0); - - cache.set('key1', createMockResult()); - expect(cache.size).toBe(1); - - cache.set('key2', createMockResult()); - expect(cache.size).toBe(2); - - cache.delete('key1'); - expect(cache.size).toBe(1); - }); - }); -}); - -// ============================================ -// hashContent Tests -// ============================================ - -describe('hashContent', () => { - it('should return consistent hash for same content', () => { - const content = 'const x = 1;'; - const hash1 = hashContent(content); - const hash2 = hashContent(content); - - expect(hash1).toBe(hash2); - }); - - it('should return different hash for different content', () => { - const hash1 = hashContent('const x = 1;'); - const hash2 = hashContent('const x = 2;'); - - expect(hash1).not.toBe(hash2); - }); - - it('should return 8-character hex string', () => { - const hash = hashContent('test'); - - expect(hash).toMatch(/^[0-9a-f]{8}$/); - }); - - it('should handle empty string', () => { - const hash = hashContent(''); - expect(hash).toBeDefined(); - expect(hash).toMatch(/^[0-9a-f]{8}$/); - }); - - it('should handle unicode characters', () => { - const hash = hashContent('日本語テスト'); - expect(hash).toBeDefined(); - expect(hash).toMatch(/^[0-9a-f]{8}$/); - }); - - it('should handle very long content', () => { - const content = 'x'.repeat(100000); - const hash = hashContent(content); - expect(hash).toBeDefined(); - expect(hash).toMatch(/^[0-9a-f]{8}$/); - }); - - it('should be sensitive to small changes', () => { - const hash1 = hashContent('abcdefghijklmnop'); - const hash2 = hashContent('abcdefghijklmnoq'); - - expect(hash1).not.toBe(hash2); - }); -}); - -// ============================================ -// createCacheKey Tests -// ============================================ - -describe('createCacheKey', () => { - it('should create consistent key for same inputs', () => { - const options = { sourceType: 'jsx', format: 'esm', minify: true }; - const key1 = createCacheKey('const x = 1;', options); - const key2 = createCacheKey('const x = 1;', options); - - expect(key1).toBe(key2); - }); - - it('should create different key for different source', () => { - const options = { sourceType: 'jsx' }; - const key1 = createCacheKey('const x = 1;', options); - const key2 = createCacheKey('const x = 2;', options); - - expect(key1).not.toBe(key2); - }); - - it('should create different key for different options', () => { - const source = 'const x = 1;'; - const key1 = createCacheKey(source, { minify: true }); - const key2 = createCacheKey(source, { minify: false }); - - expect(key1).not.toBe(key2); - }); - - it('should include source type in key', () => { - const source = 'const x = 1;'; - const key1 = createCacheKey(source, { sourceType: 'jsx' }); - const key2 = createCacheKey(source, { sourceType: 'tsx' }); - - expect(key1).not.toBe(key2); - }); - - it('should include format in key', () => { - const source = 'const x = 1;'; - const key1 = createCacheKey(source, { format: 'esm' }); - const key2 = createCacheKey(source, { format: 'cjs' }); - - expect(key1).not.toBe(key2); - }); - - it('should include target in key', () => { - const source = 'const x = 1;'; - const key1 = createCacheKey(source, { target: 'es2020' }); - const key2 = createCacheKey(source, { target: 'es2022' }); - - expect(key1).not.toBe(key2); - }); - - it('should include externals in key', () => { - const source = 'const x = 1;'; - const key1 = createCacheKey(source, { externals: ['react'] }); - const key2 = createCacheKey(source, { externals: ['vue'] }); - - expect(key1).not.toBe(key2); - }); - - it('should sort externals for consistent key', () => { - const source = 'const x = 1;'; - const key1 = createCacheKey(source, { externals: ['react', 'lodash'] }); - const key2 = createCacheKey(source, { externals: ['lodash', 'react'] }); - - expect(key1).toBe(key2); - }); - - it('should return key in format sourceHash-optionsHash', () => { - const key = createCacheKey('test', { sourceType: 'jsx' }); - - expect(key).toMatch(/^[0-9a-f]{8}-[0-9a-f]{8}$/); - }); - - it('should handle empty options', () => { - const key = createCacheKey('test', {}); - expect(key).toBeDefined(); - expect(key).toMatch(/^[0-9a-f]{8}-[0-9a-f]{8}$/); - }); - - it('should handle undefined options', () => { - const key = createCacheKey('test', { - sourceType: undefined, - format: undefined, - minify: undefined, - }); - expect(key).toBeDefined(); - }); -}); - -// ============================================ -// Edge Cases -// ============================================ - -describe('Edge Cases', () => { - it('should handle concurrent access', async () => { - const cache = new BundlerCache({ maxSize: 100, ttl: 60000 }); - - // Simulate concurrent writes - const promises = Array.from({ length: 100 }, (_, i) => - Promise.resolve().then(() => { - cache.set(`key${i}`, createMockResult({ code: `code${i}` })); - }), - ); - - await Promise.all(promises); - - expect(cache.size).toBe(100); - }); - - it('should handle rapid get/set cycles', () => { - const cache = new BundlerCache({ maxSize: 5, ttl: 60000 }); - - for (let i = 0; i < 1000; i++) { - cache.set(`key${i % 10}`, createMockResult({ code: `code${i}` })); - cache.get(`key${i % 10}`); - } - - expect(cache.size).toBeLessThanOrEqual(5); - }); - - it('should handle special characters in cache keys', () => { - const cache = new BundlerCache({ maxSize: 10, ttl: 60000 }); - - const specialKeys = ['key:with:colons', 'key/with/slashes', 'key\\with\\backslashes', 'key with spaces']; - - specialKeys.forEach((key) => { - cache.set(key, createMockResult()); - expect(cache.has(key)).toBe(true); - }); - }); -}); diff --git a/libs/ui/src/bundler/browser-components.ts b/libs/ui/src/bundler/browser-components.ts index b02e810d..e4fa9a7a 100644 --- a/libs/ui/src/bundler/browser-components.ts +++ b/libs/ui/src/bundler/browser-components.ts @@ -11,7 +11,6 @@ */ import * as path from 'path'; -import * as fs from 'fs'; // ============================================ // Cache diff --git a/libs/ui/src/bundler/bundler.ts b/libs/ui/src/bundler/bundler.ts index 105f2ffc..c2cb946c 100644 --- a/libs/ui/src/bundler/bundler.ts +++ b/libs/ui/src/bundler/bundler.ts @@ -41,9 +41,17 @@ import { } from './types'; import { buildUIMeta, type AIPlatformType } from '@frontmcp/uipack/adapters'; import { DEFAULT_THEME, buildThemeCss, type ThemeConfig } from '@frontmcp/uipack/theme'; -import { BundlerCache, createCacheKey, hashContent } from './cache'; -import { validateSource, validateSize, mergePolicy, throwOnViolations } from './sandbox/policy'; -import { executeDefault, ExecutionError } from './sandbox/executor'; +import { + BundlerCache, + createCacheKey, + hashContent, + validateSource, + validateSize, + mergePolicy, + throwOnViolations, + executeDefault, + ExecutionError, +} from '@frontmcp/uipack/bundler'; import { escapeHtml } from '@frontmcp/uipack/utils'; import type { ContentType } from '../universal/types'; import { detectContentType as detectUniversalContentType } from '../universal/types'; @@ -2119,5 +2127,4 @@ export function createBundler(options?: BundlerOptions): InMemoryBundler { } // Re-export errors for convenience -export { SecurityError } from './sandbox/policy'; -export { ExecutionError } from './sandbox/executor'; +export { SecurityError, ExecutionError } from '@frontmcp/uipack/bundler'; diff --git a/libs/ui/src/bundler/cache.ts b/libs/ui/src/bundler/cache.ts deleted file mode 100644 index f6940f02..00000000 --- a/libs/ui/src/bundler/cache.ts +++ /dev/null @@ -1,335 +0,0 @@ -/** - * Bundler Cache - * - * LRU cache implementation for bundled results. - * Provides content-addressable caching with TTL expiration. - * - * @packageDocumentation - */ - -import type { BundleResult, CacheEntry } from './types'; - -/** - * Cache configuration options. - */ -export interface CacheOptions { - /** - * Maximum number of entries in the cache. - * @default 100 - */ - maxSize: number; - - /** - * Time-to-live for cache entries in milliseconds. - * @default 300000 (5 minutes) - */ - ttl: number; -} - -/** - * Cache statistics. - */ -export interface CacheStats { - /** - * Number of entries in the cache. - */ - size: number; - - /** - * Number of cache hits. - */ - hits: number; - - /** - * Number of cache misses. - */ - misses: number; - - /** - * Hit rate (0-1). - */ - hitRate: number; - - /** - * Number of expired entries removed. - */ - evictions: number; - - /** - * Total memory used by cache (approximate). - */ - memoryUsage: number; -} - -/** - * LRU cache for bundled results. - * - * Features: - * - Content-addressable by hash - * - TTL-based expiration - * - LRU eviction when at capacity - * - Statistics tracking - * - * @example - * ```typescript - * const cache = new BundlerCache({ maxSize: 100, ttl: 300000 }); - * - * // Store a result - * cache.set('abc123', bundleResult); - * - * // Retrieve a result - * const cached = cache.get('abc123'); - * if (cached) { - * console.log('Cache hit!', cached); - * } - * - * // Get statistics - * console.log(cache.getStats()); - * ``` - */ -export class BundlerCache { - private readonly cache = new Map(); - private readonly options: CacheOptions; - private stats = { - hits: 0, - misses: 0, - evictions: 0, - }; - - constructor(options: Partial = {}) { - this.options = { - maxSize: options.maxSize ?? 100, - ttl: options.ttl ?? 300000, - }; - } - - /** - * Get a cached bundle result. - * - * @param key - Cache key (typically content hash) - * @returns Cached result or undefined if not found/expired - */ - get(key: string): BundleResult | undefined { - const entry = this.cache.get(key); - - if (!entry) { - this.stats.misses++; - return undefined; - } - - // Check TTL - if (this.isExpired(entry)) { - this.cache.delete(key); - this.stats.misses++; - this.stats.evictions++; - return undefined; - } - - // Update access tracking - entry.lastAccessedAt = Date.now(); - entry.accessCount++; - this.stats.hits++; - - // Move to end (most recently used) by re-inserting - this.cache.delete(key); - this.cache.set(key, entry); - - return entry.result; - } - - /** - * Store a bundle result in the cache. - * - * @param key - Cache key (typically content hash) - * @param result - Bundle result to cache - */ - set(key: string, result: BundleResult): void { - // Enforce capacity limit - while (this.cache.size >= this.options.maxSize) { - this.evictOldest(); - } - - const now = Date.now(); - const entry: CacheEntry = { - result, - createdAt: now, - lastAccessedAt: now, - accessCount: 1, - }; - - this.cache.set(key, entry); - } - - /** - * Check if a key exists in the cache (and is not expired). - * - * @param key - Cache key to check - * @returns true if key exists and is not expired - */ - has(key: string): boolean { - const entry = this.cache.get(key); - if (!entry) return false; - if (this.isExpired(entry)) { - this.cache.delete(key); - this.stats.evictions++; - return false; - } - return true; - } - - /** - * Delete a specific entry from the cache. - * - * @param key - Cache key to delete - * @returns true if the key was found and deleted - */ - delete(key: string): boolean { - return this.cache.delete(key); - } - - /** - * Clear all entries from the cache. - */ - clear(): void { - this.cache.clear(); - this.stats = { - hits: 0, - misses: 0, - evictions: 0, - }; - } - - /** - * Get cache statistics. - * - * @returns Current cache statistics - */ - getStats(): CacheStats { - const total = this.stats.hits + this.stats.misses; - const hitRate = total > 0 ? this.stats.hits / total : 0; - - let memoryUsage = 0; - for (const entry of this.cache.values()) { - memoryUsage += entry.result.size; - if (entry.result.map) { - memoryUsage += entry.result.map.length; - } - } - - return { - size: this.cache.size, - hits: this.stats.hits, - misses: this.stats.misses, - hitRate, - evictions: this.stats.evictions, - memoryUsage, - }; - } - - /** - * Remove expired entries from the cache. - * - * @returns Number of entries removed - */ - cleanup(): number { - let removed = 0; - - for (const [key, entry] of this.cache.entries()) { - if (this.isExpired(entry)) { - this.cache.delete(key); - removed++; - } - } - - this.stats.evictions += removed; - return removed; - } - - /** - * Get all cache keys. - * - * @returns Array of cache keys - */ - keys(): string[] { - return Array.from(this.cache.keys()); - } - - /** - * Get the number of entries in the cache. - */ - get size(): number { - return this.cache.size; - } - - /** - * Check if an entry is expired. - */ - private isExpired(entry: CacheEntry): boolean { - return Date.now() - entry.createdAt > this.options.ttl; - } - - /** - * Evict the oldest (least recently used) entry. - */ - private evictOldest(): void { - // Map maintains insertion order, so first key is oldest - const oldestKey = this.cache.keys().next().value; - if (oldestKey !== undefined) { - this.cache.delete(oldestKey); - this.stats.evictions++; - } - } -} - -/** - * Create a hash from source content. - * - * Uses a simple but fast hashing algorithm suitable for cache keys. - * - * @param content - Content to hash - * @returns Hash string - */ -export function hashContent(content: string): string { - // FNV-1a hash - fast and good distribution - let hash = 2166136261; - for (let i = 0; i < content.length; i++) { - hash ^= content.charCodeAt(i); - hash = Math.imul(hash, 16777619); - } - - // Convert to hex string - return (hash >>> 0).toString(16).padStart(8, '0'); -} - -/** - * Create a hash from bundle options. - * - * Used to differentiate bundles of the same source with different options. - * - * @param source - Source content - * @param options - Bundle options that affect output - * @returns Combined hash string - */ -export function createCacheKey( - source: string, - options: { - sourceType?: string; - format?: string; - minify?: boolean; - externals?: string[]; - target?: string; - }, -): string { - const sourceHash = hashContent(source); - const optionsHash = hashContent( - JSON.stringify({ - sourceType: options.sourceType, - format: options.format, - minify: options.minify, - externals: options.externals?.sort(), - target: options.target, - }), - ); - - return `${sourceHash}-${optionsHash}`; -} diff --git a/libs/ui/src/bundler/file-cache/component-builder.ts b/libs/ui/src/bundler/file-cache/component-builder.ts deleted file mode 100644 index f7140fa0..00000000 --- a/libs/ui/src/bundler/file-cache/component-builder.ts +++ /dev/null @@ -1,509 +0,0 @@ -/** - * Component Builder - * - * Builds file-based UI components with caching and CDN dependency resolution. - * Handles the complete build pipeline from source to cached manifest. - * - * @packageDocumentation - */ - -import { readFile } from 'fs/promises'; -import { existsSync } from 'fs'; -import { resolve, extname } from 'path'; -import { randomUUID } from 'crypto'; - -import type { - ComponentBuildManifest, - FileBundleOptions, - CDNDependency, - CDNPlatformType, - ResolvedDependency, -} from '@frontmcp/uipack/dependency'; -import type { BuildCacheStorage } from './storage/interface'; -import { calculateComponentHash } from './hash-calculator'; -import { DependencyResolver, createImportMap, generateDependencyHTML } from '@frontmcp/uipack/dependency'; - -// ============================================ -// Builder Options -// ============================================ - -/** - * Options for building a component. - */ -export interface ComponentBuildOptions { - /** - * Entry file path. - */ - entryPath: string; - - /** - * Tool name for the component. - */ - toolName: string; - - /** - * Packages to load from CDN. - */ - externals?: string[]; - - /** - * Explicit CDN dependency overrides. - */ - dependencies?: Record; - - /** - * Bundle options. - */ - bundleOptions?: FileBundleOptions; - - /** - * Target platform for CDN selection. - * @default 'unknown' - */ - platform?: CDNPlatformType; - - /** - * Whether to skip cache lookup. - * @default false - */ - skipCache?: boolean; - - /** - * Whether to perform SSR. - * @default false - */ - ssr?: boolean; - - /** - * SSR context data. - */ - ssrContext?: Record; - - /** - * Custom code execution function for SSR. - * Allows different strategies for Node.js vs browser environments. - * If not provided, uses `new Function()` which works in both environments. - * - * @example - * ```typescript - * // Custom execution with vm module - * import { createContext, runInContext } from 'vm'; - * - * const options = { - * executeCode: (code, exports, module, React) => { - * const context = createContext({ exports, module, React }); - * runInContext(code, context); - * } - * }; - * ``` - */ - executeCode?: ( - code: string, - exports: Record, - module: { exports: Record }, - React: unknown, - ) => void; -} - -/** - * Result of a build operation. - */ -export interface ComponentBuildResult { - /** - * The build manifest. - */ - manifest: ComponentBuildManifest; - - /** - * Whether the result came from cache. - */ - cached: boolean; - - /** - * Build time in milliseconds. - */ - buildTimeMs: number; -} - -// ============================================ -// Builder Class -// ============================================ - -/** - * Component builder for file-based UI templates. - * - * Handles the complete build pipeline: - * 1. Check cache for existing build - * 2. Parse entry file for imports - * 3. Resolve external dependencies to CDN URLs - * 4. Bundle the component with esbuild - * 5. Generate import map for CDN dependencies - * 6. Store result in cache - * - * @example - * ```typescript - * const storage = new FilesystemStorage({ cacheDir: '.cache' }); - * await storage.initialize(); - * - * const builder = new ComponentBuilder(storage); - * - * const result = await builder.build({ - * entryPath: './widgets/chart.tsx', - * toolName: 'chart_display', - * externals: ['chart.js', 'react'], - * platform: 'claude', - * }); - * - * console.log(result.manifest.outputs.code); - * console.log(result.manifest.importMap); - * ``` - */ -export class ComponentBuilder { - private readonly storage: BuildCacheStorage; - private esbuild: typeof import('esbuild') | null = null; - - constructor(storage: BuildCacheStorage) { - this.storage = storage; - } - - /** - * Build a component from a file path. - */ - async build(options: ComponentBuildOptions): Promise { - const startTime = performance.now(); - const { - entryPath, - toolName, - externals = [], - dependencies = {}, - bundleOptions = {}, - platform = 'unknown', - skipCache = false, - ssr = false, - ssrContext = {}, - executeCode, - } = options; - - // Resolve absolute path - const absoluteEntryPath = resolve(entryPath); - - if (!existsSync(absoluteEntryPath)) { - throw new Error(`Entry file not found: ${absoluteEntryPath}`); - } - - // Calculate content hash - const hashResult = await calculateComponentHash({ - entryPath: absoluteEntryPath, - externals, - dependencies, - bundleOptions, - }); - - // Check cache - if (!skipCache) { - const cached = await this.storage.get(hashResult.hash); - if (cached) { - return { - manifest: cached, - cached: true, - buildTimeMs: performance.now() - startTime, - }; - } - } - - // Read entry file - const source = await readFile(absoluteEntryPath, 'utf8'); - - // Resolve external dependencies - const resolver = new DependencyResolver({ platform }); - const resolvedDeps: ResolvedDependency[] = []; - - for (const pkg of externals) { - try { - const override = dependencies[pkg]; - const resolved = resolver.resolve(pkg, override); - if (resolved) { - resolvedDeps.push(resolved); - } - // If resolved is null, package will be bundled instead of loaded from CDN - } catch (error) { - // Log warning but continue - package will be bundled instead - console.warn(`Failed to resolve external "${pkg}": ${error}`); - } - } - - // Add peer dependencies - const allExternals = new Set(externals); - for (const dep of resolvedDeps) { - const entry = resolver.getRegistry()[dep.packageName]; - if (entry?.providers) { - const providerConfig = Object.values(entry.providers)[0]; - if (providerConfig?.peerDependencies) { - for (const peer of providerConfig.peerDependencies) { - if (!allExternals.has(peer)) { - allExternals.add(peer); - try { - const peerOverride = dependencies[peer]; - const resolved = resolver.resolve(peer, peerOverride); - if (resolved) { - resolvedDeps.push(resolved); - } - } catch { - // Ignore - peer may not be needed - } - } - } - } - } - } - - // Generate import map - const importMap = createImportMap(resolvedDeps); - - // Bundle the component - const bundleResult = await this.bundleComponent({ - source, - entryPath: absoluteEntryPath, - externals: Array.from(allExternals), - bundleOptions, - }); - - // Optionally perform SSR - let ssrHtml: string | undefined; - if (ssr) { - ssrHtml = await this.renderSSR(bundleResult.code, ssrContext, resolvedDeps, executeCode); - } - - // Create manifest - const manifest: ComponentBuildManifest = { - version: '1.0', - buildId: randomUUID(), - toolName, - entryPath: absoluteEntryPath, - contentHash: hashResult.hash, - dependencies: resolvedDeps, - outputs: { - code: bundleResult.code, - sourceMap: bundleResult.map, - ssrHtml, - }, - importMap, - metadata: { - createdAt: new Date().toISOString(), - buildTimeMs: performance.now() - startTime, - totalSize: Buffer.byteLength(bundleResult.code, 'utf8'), - bundlerVersion: bundleResult.bundlerVersion, - }, - }; - - // Store in cache - await this.storage.set(hashResult.hash, manifest); - - return { - manifest, - cached: false, - buildTimeMs: performance.now() - startTime, - }; - } - - /** - * Build multiple components. - */ - async buildMany(options: ComponentBuildOptions[]): Promise { - return Promise.all(options.map((opt) => this.build(opt))); - } - - /** - * Check if a component needs rebuilding. - */ - async needsRebuild( - options: Pick, - ): Promise { - const absoluteEntryPath = resolve(options.entryPath); - - const hashResult = await calculateComponentHash({ - entryPath: absoluteEntryPath, - externals: options.externals, - dependencies: options.dependencies, - bundleOptions: options.bundleOptions, - }); - - const cached = await this.storage.has(hashResult.hash); - return !cached; - } - - /** - * Get a cached build if it exists. - */ - async getCached( - options: Pick, - ): Promise { - const absoluteEntryPath = resolve(options.entryPath); - - const hashResult = await calculateComponentHash({ - entryPath: absoluteEntryPath, - externals: options.externals, - dependencies: options.dependencies, - bundleOptions: options.bundleOptions, - }); - - return this.storage.get(hashResult.hash); - } - - /** - * Invalidate a cached build. - */ - async invalidate(contentHash: string): Promise { - return this.storage.delete(contentHash); - } - - /** - * Generate complete HTML for a built component. - */ - generateHTML(manifest: ComponentBuildManifest, minify = false): string { - const parts: string[] = []; - - // Add dependency loading HTML - const dependencyHtml = generateDependencyHTML(manifest.dependencies, { minify }); - parts.push(dependencyHtml); - - // Add component code - parts.push(``); - - return parts.join(minify ? '' : '\n'); - } - - /** - * Bundle a component using esbuild. - */ - private async bundleComponent(options: { - source: string; - entryPath: string; - externals: string[]; - bundleOptions: FileBundleOptions; - }): Promise<{ code: string; map?: string; bundlerVersion?: string }> { - const { source, entryPath, externals, bundleOptions } = options; - - // Lazy load esbuild - if (!this.esbuild) { - try { - this.esbuild = await import('esbuild'); - } catch { - throw new Error('esbuild is required for component building. Install with: npm install esbuild'); - } - } - - const ext = extname(entryPath).toLowerCase(); - const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : ext === '.jsx' ? 'jsx' : 'js'; - - try { - const result = await this.esbuild.transform(source, { - loader, - format: 'esm', - minify: bundleOptions.minify ?? process.env['NODE_ENV'] === 'production', - sourcemap: bundleOptions.sourceMaps ? 'inline' : false, - target: bundleOptions.target ?? 'es2020', - treeShaking: bundleOptions.treeShake ?? true, - jsx: 'automatic', - jsxImportSource: bundleOptions.jsxImportSource ?? 'react', - // Mark externals for later import map resolution - banner: externals.length > 0 ? `/* externals: ${externals.join(', ')} */` : undefined, - }); - - return { - code: result.code, - map: result.map || undefined, - bundlerVersion: this.esbuild.version, - }; - } catch (error) { - throw new Error(`Bundle failed for ${entryPath}: ${error}`); - } - } - - /** - * Perform server-side rendering. - */ - private async renderSSR( - code: string, - context: Record, - dependencies: ResolvedDependency[], - executeCode?: ( - code: string, - exports: Record, - module: { exports: Record }, - React: unknown, - ) => void, - ): Promise { - // SSR requires React - const hasReact = dependencies.some((d) => d.packageName === 'react'); - if (!hasReact) { - console.warn('SSR requires React as an external dependency'); - return undefined; - } - - try { - // Dynamic import React for SSR - const React = await import('react'); - const ReactDOMServer = await import('react-dom/server'); - - // Create a sandboxed execution context - const exports: Record = {}; - const module = { exports }; - - // Execute the bundled code using custom executor or default new Function() - // Note: new Function() works in both Node.js and browser environments. - // For stricter sandboxing in Node.js, provide a custom executeCode using the vm module. - if (executeCode) { - executeCode(code, exports, module, React); - } else { - const fn = new Function('exports', 'module', 'React', code); - fn(exports, module, React); - } - - // Get the default export - const Component = (module.exports as { default?: unknown }).default || module.exports; - - if (typeof Component !== 'function') { - console.warn('SSR: No default component export found'); - return undefined; - } - - // Render to string - const element = React.createElement(Component as React.ComponentType, context); - return ReactDOMServer.renderToString(element); - } catch (error) { - console.warn(`SSR failed: ${error}`); - return undefined; - } - } -} - -// ============================================ -// Factory Functions -// ============================================ - -/** - * Create a component builder with filesystem storage. - */ -export async function createFilesystemBuilder(cacheDir = '.frontmcp-cache/builds'): Promise { - const { FilesystemStorage } = await import('./storage/filesystem.js'); - const storage = new FilesystemStorage({ cacheDir }); - await storage.initialize(); - return new ComponentBuilder(storage); -} - -/** - * Create a component builder with Redis storage. - */ -export async function createRedisBuilder( - redisClient: import('./storage/redis.js').RedisClient, - keyPrefix = 'frontmcp:ui:build:', -): Promise { - const { RedisStorage } = await import('./storage/redis.js'); - const storage = new RedisStorage({ - client: redisClient, - keyPrefix, - }); - await storage.initialize(); - return new ComponentBuilder(storage); -} diff --git a/libs/ui/src/bundler/file-cache/hash-calculator.ts b/libs/ui/src/bundler/file-cache/hash-calculator.ts deleted file mode 100644 index 35b6581b..00000000 --- a/libs/ui/src/bundler/file-cache/hash-calculator.ts +++ /dev/null @@ -1,398 +0,0 @@ -/** - * Hash Calculator - * - * SHA-256 based hash calculation for cache keys. - * Combines file contents, dependencies, and build options - * to create deterministic cache keys for incremental builds. - * - * @packageDocumentation - */ - -import { createHash } from 'crypto'; -import { readFile } from 'fs/promises'; -import { existsSync } from 'fs'; -import { join, dirname, resolve } from 'path'; - -import type { FileBundleOptions, CDNDependency } from '@frontmcp/uipack/dependency'; - -// ============================================ -// Hash Functions -// ============================================ - -/** - * Calculate SHA-256 hash of a string. - * - * @param content - Content to hash - * @returns Hex-encoded SHA-256 hash - */ -export function sha256(content: string): string { - return createHash('sha256').update(content, 'utf8').digest('hex'); -} - -/** - * Calculate SHA-256 hash of a buffer. - * - * @param buffer - Buffer to hash - * @returns Hex-encoded SHA-256 hash - */ -export function sha256Buffer(buffer: Buffer): string { - return createHash('sha256').update(buffer).digest('hex'); -} - -/** - * Calculate hash of a file's contents. - * - * @param filePath - Path to the file - * @returns SHA-256 hash or undefined if file doesn't exist - */ -export async function hashFile(filePath: string): Promise { - try { - const content = await readFile(filePath); - return sha256Buffer(content); - } catch { - return undefined; - } -} - -/** - * Calculate combined hash of multiple files. - * - * @param filePaths - Paths to files - * @returns Combined SHA-256 hash - */ -export async function hashFiles(filePaths: string[]): Promise { - const hashes: string[] = []; - - for (const filePath of filePaths.sort()) { - const hash = await hashFile(filePath); - if (hash) { - hashes.push(`${filePath}:${hash}`); - } - } - - return sha256(hashes.join('\n')); -} - -// ============================================ -// Component Hash Calculation -// ============================================ - -/** - * Options for calculating a component hash. - */ -export interface ComponentHashOptions { - /** - * Entry file path. - */ - entryPath: string; - - /** - * Base directory for resolving relative imports. - * @default dirname(entryPath) - */ - baseDir?: string; - - /** - * External packages (excluded from hash). - */ - externals?: string[]; - - /** - * Explicit CDN dependencies. - */ - dependencies?: Record; - - /** - * Bundle options. - */ - bundleOptions?: FileBundleOptions; - - /** - * Maximum depth for following imports. - * @default 10 - */ - maxDepth?: number; -} - -/** - * Result of component hash calculation. - */ -export interface ComponentHashResult { - /** - * Combined SHA-256 hash. - */ - hash: string; - - /** - * Entry file hash. - */ - entryHash: string; - - /** - * All files included in the hash. - */ - files: string[]; - - /** - * Individual file hashes. - */ - fileHashes: Record; - - /** - * Hash of build options. - */ - optionsHash: string; - - /** - * Hash of external dependencies configuration. - */ - dependenciesHash: string; -} - -/** - * Calculate a deterministic hash for a file-based component. - * - * The hash includes: - * - Entry file content - * - All local dependencies (relative imports) - * - Bundle options - * - External dependency configurations - * - * External npm packages are NOT included in the hash since they're - * loaded from CDN and versioned separately. - * - * @param options - Hash calculation options - * @returns Hash result with details - * - * @example - * ```typescript - * const result = await calculateComponentHash({ - * entryPath: './src/widgets/chart.tsx', - * externals: ['chart.js', 'react'], - * bundleOptions: { minify: true }, - * }); - * - * console.log(result.hash); // '3a7bd...' - * console.log(result.files); // ['./src/widgets/chart.tsx', './src/widgets/utils.ts'] - * ``` - */ -export async function calculateComponentHash(options: ComponentHashOptions): Promise { - const { - entryPath, - baseDir = dirname(entryPath), - externals: _externals = [], - dependencies = {}, - bundleOptions = {}, - maxDepth = 10, - } = options; - - // Resolve absolute entry path - const absoluteEntryPath = resolve(entryPath); - - // Collect all local files (entry + dependencies) - const files = new Set(); - const fileHashes: Record = {}; - - await collectLocalDependencies(absoluteEntryPath, baseDir, files, maxDepth, 0); - - // Calculate hashes for all files - for (const file of files) { - const hash = await hashFile(file); - if (hash) { - fileHashes[file] = hash; - } - } - - // Sort files for deterministic ordering - const sortedFiles = Array.from(files).sort(); - - // Calculate combined file hash - const fileHashContent = sortedFiles.map((f) => `${f}:${fileHashes[f] || 'missing'}`).join('\n'); - const filesHash = sha256(fileHashContent); - - // Calculate options hash - const optionsHash = sha256(JSON.stringify(sortedObject(bundleOptions as Record))); - - // Calculate dependencies hash - const dependenciesHash = sha256(JSON.stringify(sortedObject(dependencies as Record))); - - // Combine all hashes - const combinedHash = sha256([filesHash, optionsHash, dependenciesHash].join(':')); - - return { - hash: combinedHash, - entryHash: fileHashes[absoluteEntryPath] || '', - files: sortedFiles, - fileHashes, - optionsHash, - dependenciesHash, - }; -} - -/** - * Calculate a quick hash for cache lookup (entry file only). - * - * This is faster than full component hash but may miss dependency changes. - * Use for quick cache existence checks, then verify with full hash. - * - * @param entryPath - Entry file path - * @param bundleOptions - Bundle options - * @returns Quick hash string - */ -export async function calculateQuickHash(entryPath: string, bundleOptions?: FileBundleOptions): Promise { - const entryHash = await hashFile(entryPath); - const optionsHash = bundleOptions - ? sha256(JSON.stringify(sortedObject(bundleOptions as Record))) - : ''; - - return sha256(`${entryHash || 'missing'}:${optionsHash}`); -} - -// ============================================ -// Helper Functions -// ============================================ - -/** - * Collect all local dependencies recursively. - */ -async function collectLocalDependencies( - filePath: string, - baseDir: string, - collected: Set, - maxDepth: number, - currentDepth: number, -): Promise { - if (currentDepth >= maxDepth) return; - if (collected.has(filePath)) return; - - if (!existsSync(filePath)) return; - - collected.add(filePath); - - try { - const content = await readFile(filePath, 'utf8'); - const imports = extractImportPaths(content); - - for (const importPath of imports) { - // Skip external packages - if (!importPath.startsWith('.') && !importPath.startsWith('/')) { - continue; - } - - // Resolve the import path - const resolvedPath = resolveImportPath(importPath, dirname(filePath)); - if (resolvedPath && existsSync(resolvedPath)) { - await collectLocalDependencies(resolvedPath, baseDir, collected, maxDepth, currentDepth + 1); - } - } - } catch { - // Ignore unreadable files - } -} - -/** - * Extract import paths from source code. - */ -function extractImportPaths(source: string): string[] { - const paths: string[] = []; - - // Match import ... from '...' - const importRegex = /import\s+(?:[^'"]+\s+from\s+)?['"]([^'"]+)['"]/g; - let match; - while ((match = importRegex.exec(source)) !== null) { - paths.push(match[1]); - } - - // Match export ... from '...' - const exportRegex = /export\s+(?:\*|{[^}]+})\s+from\s+['"]([^'"]+)['"]/g; - while ((match = exportRegex.exec(source)) !== null) { - paths.push(match[1]); - } - - // Match require('...') - const requireRegex = /require\s*\(\s*['"]([^'"]+)['"]\s*\)/g; - while ((match = requireRegex.exec(source)) !== null) { - paths.push(match[1]); - } - - // Match dynamic import('...') - const dynamicRegex = /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g; - while ((match = dynamicRegex.exec(source)) !== null) { - paths.push(match[1]); - } - - return [...new Set(paths)]; -} - -/** - * Resolve an import path to an absolute file path. - */ -function resolveImportPath(importPath: string, fromDir: string): string | undefined { - const extensions = ['', '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs']; - - for (const ext of extensions) { - const fullPath = join(fromDir, importPath + ext); - if (existsSync(fullPath)) { - return fullPath; - } - } - - // Try as directory with index file - for (const ext of extensions) { - const indexPath = join(fromDir, importPath, `index${ext}`); - if (existsSync(indexPath)) { - return indexPath; - } - } - - return undefined; -} - -/** - * Create a sorted copy of an object for deterministic JSON serialization. - */ -function sortedObject(obj: Record): Record { - const sorted: Record = {}; - const keys = Object.keys(obj).sort(); - - for (const key of keys) { - const value = obj[key]; - if (value && typeof value === 'object' && !Array.isArray(value)) { - sorted[key] = sortedObject(value as Record); - } else { - sorted[key] = value; - } - } - - return sorted; -} - -// ============================================ -// Build ID Generation -// ============================================ - -/** - * Generate a unique build ID. - * - * Combines timestamp and random component for uniqueness. - * - * @returns UUID-like build ID - */ -export function generateBuildId(): string { - const timestamp = Date.now().toString(36); - const random = Math.random().toString(36).substring(2, 10); - return `${timestamp}-${random}`; -} - -/** - * Generate a build ID from a content hash. - * - * Creates a shorter, more readable ID while maintaining uniqueness. - * - * @param hash - Content hash - * @returns Shortened build ID - */ -export function buildIdFromHash(hash: string): string { - // Use first 12 characters of hash - return hash.substring(0, 12); -} diff --git a/libs/ui/src/bundler/file-cache/index.ts b/libs/ui/src/bundler/file-cache/index.ts deleted file mode 100644 index 948f81db..00000000 --- a/libs/ui/src/bundler/file-cache/index.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * File-Based Component Caching - * - * SHA-based caching system for file-based UI component builds. - * Supports filesystem (development) and Redis (production) storage. - * - * @packageDocumentation - */ - -// Storage -export { - // Interface - type BuildCacheStorage, - type StorageOptions, - type CacheEntry, - type CacheEntryMetadata, - DEFAULT_STORAGE_OPTIONS, - calculateManifestSize, - // Filesystem - FilesystemStorage, - createFilesystemStorage, - type FilesystemStorageOptions, - // Redis - RedisStorage, - createRedisStorage, - type RedisStorageOptions, - type RedisClient, -} from './storage'; - -// Hash Calculator -export { - sha256, - sha256Buffer, - hashFile, - hashFiles, - calculateComponentHash, - calculateQuickHash, - generateBuildId, - buildIdFromHash, - type ComponentHashOptions, - type ComponentHashResult, -} from './hash-calculator'; - -// Component Builder -export { - ComponentBuilder, - createFilesystemBuilder, - createRedisBuilder, - type ComponentBuildOptions, - type ComponentBuildResult, -} from './component-builder'; diff --git a/libs/ui/src/bundler/file-cache/storage/filesystem.ts b/libs/ui/src/bundler/file-cache/storage/filesystem.ts deleted file mode 100644 index a2892cfa..00000000 --- a/libs/ui/src/bundler/file-cache/storage/filesystem.ts +++ /dev/null @@ -1,494 +0,0 @@ -/** - * Filesystem Build Cache Storage - * - * File-based cache storage for development environments. - * Uses LRU eviction and stores manifests as JSON files. - * - * @packageDocumentation - */ - -import { mkdir, readFile, writeFile, readdir, unlink, rm } from 'fs/promises'; -import { join, dirname } from 'path'; -import { existsSync } from 'fs'; -import { createHash } from 'crypto'; - -import type { ComponentBuildManifest, CacheStats } from '@frontmcp/uipack/dependency'; -import type { BuildCacheStorage, StorageOptions, CacheEntry } from './interface'; -import { DEFAULT_STORAGE_OPTIONS, calculateManifestSize } from './interface'; - -// ============================================ -// Error Classes -// ============================================ - -/** - * Error thrown when cache storage fails to initialize. - */ -export class CacheInitializationError extends Error { - override readonly cause?: unknown; - - constructor(message: string, cause?: unknown) { - super(message); - this.name = 'CacheInitializationError'; - this.cause = cause; - } -} - -/** - * Error thrown when a cache operation fails. - */ -export class CacheOperationError extends Error { - override readonly cause?: unknown; - - constructor(message: string, cause?: unknown) { - super(message); - this.name = 'CacheOperationError'; - this.cause = cause; - } -} - -/** - * Error thrown when storage is accessed before initialization. - */ -export class StorageNotInitializedError extends Error { - constructor() { - super('Storage not initialized. Call initialize() first.'); - this.name = 'StorageNotInitializedError'; - } -} - -/** - * Options specific to filesystem storage. - */ -export interface FilesystemStorageOptions extends StorageOptions { - /** - * Base directory for cache files. - * @default '.frontmcp-cache/builds' - */ - cacheDir?: string; - - /** - * File extension for cache files. - * @default '.json' - */ - extension?: string; -} - -/** - * Default filesystem storage options. - */ -const DEFAULT_FS_OPTIONS: Required = { - ...DEFAULT_STORAGE_OPTIONS, - cacheDir: '.frontmcp-cache/builds', - extension: '.json', -}; - -/** - * Filesystem-based build cache storage. - * - * Stores each build manifest as a JSON file in the cache directory. - * Uses LRU eviction based on last access time when size limits are exceeded. - * - * Directory structure: - * ``` - * .frontmcp-cache/builds/ - * ├── {hash1}.json - * ├── {hash2}.json - * └── ... - * ``` - * - * @example - * ```typescript - * const storage = new FilesystemStorage({ - * cacheDir: '.cache/ui-builds', - * maxSize: 50 * 1024 * 1024, // 50MB - * }); - * - * await storage.initialize(); - * await storage.set('abc123', manifest); - * const cached = await storage.get('abc123'); - * ``` - */ -export class FilesystemStorage implements BuildCacheStorage { - readonly type = 'filesystem'; - - private readonly options: Required; - private initialized = false; - private stats: CacheStats = { - entries: 0, - totalSize: 0, - hits: 0, - misses: 0, - hitRate: 0, - }; - - constructor(options: FilesystemStorageOptions = {}) { - this.options = { - ...DEFAULT_FS_OPTIONS, - ...options, - }; - } - - /** - * Initialize the storage directory. - */ - async initialize(): Promise { - if (this.initialized) return; - - try { - await mkdir(this.options.cacheDir, { recursive: true }); - await this.loadStats(); - this.initialized = true; - } catch (error) { - throw new CacheInitializationError(`Failed to initialize cache directory: ${error}`, error); - } - } - - /** - * Get a cached manifest. - */ - async get(key: string): Promise { - this.ensureInitialized(); - - const filePath = this.getFilePath(key); - - try { - if (!existsSync(filePath)) { - this.stats.misses++; - this.updateHitRate(); - return undefined; - } - - const content = await readFile(filePath, 'utf8'); - const entry: CacheEntry = JSON.parse(content); - - // Check expiration - if (Date.now() > entry.metadata.expiresAt) { - await this.delete(key); - this.stats.misses++; - this.updateHitRate(); - return undefined; - } - - // Update access metadata - entry.metadata.lastAccessedAt = Date.now(); - entry.metadata.accessCount++; - - // Write back updated metadata (async, don't await) - this.writeEntry(filePath, entry).catch((err) => { - // Fire-and-forget write - log at debug level for visibility - if (process.env['DEBUG']) { - console.debug(`[FilesystemStorage] Failed to update cache metadata for ${key}: ${err}`); - } - }); - - this.stats.hits++; - this.updateHitRate(); - return entry.data; - } catch { - this.stats.misses++; - this.updateHitRate(); - return undefined; - } - } - - /** - * Store a manifest in cache. - */ - async set(key: string, manifest: ComponentBuildManifest, ttl?: number): Promise { - this.ensureInitialized(); - - const filePath = this.getFilePath(key); - const size = calculateManifestSize(manifest); - const effectiveTtl = ttl ?? this.options.defaultTtl; - - // Check if we need to evict entries - await this.ensureCapacity(size); - - const entry: CacheEntry = { - data: manifest, - metadata: { - key, - size, - createdAt: Date.now(), - expiresAt: Date.now() + effectiveTtl * 1000, - lastAccessedAt: Date.now(), - accessCount: 0, - }, - }; - - await this.writeEntry(filePath, entry); - - this.stats.entries++; - this.stats.totalSize += size; - } - - /** - * Check if a key exists. - */ - async has(key: string): Promise { - this.ensureInitialized(); - - const filePath = this.getFilePath(key); - - try { - if (!existsSync(filePath)) return false; - - const content = await readFile(filePath, 'utf8'); - const entry: CacheEntry = JSON.parse(content); - - // Check expiration - if (Date.now() > entry.metadata.expiresAt) { - await this.delete(key); - return false; - } - - return true; - } catch { - return false; - } - } - - /** - * Delete a cached entry. - */ - async delete(key: string): Promise { - this.ensureInitialized(); - - const filePath = this.getFilePath(key); - - try { - if (!existsSync(filePath)) return false; - - // Read to get size for stats - const content = await readFile(filePath, 'utf8'); - const entry: CacheEntry = JSON.parse(content); - - await unlink(filePath); - - this.stats.entries = Math.max(0, this.stats.entries - 1); - this.stats.totalSize = Math.max(0, this.stats.totalSize - entry.metadata.size); - - return true; - } catch { - return false; - } - } - - /** - * Clear all cached entries. - */ - async clear(): Promise { - this.ensureInitialized(); - - try { - await rm(this.options.cacheDir, { recursive: true, force: true }); - await mkdir(this.options.cacheDir, { recursive: true }); - - this.stats = { - entries: 0, - totalSize: 0, - hits: 0, - misses: 0, - hitRate: 0, - }; - } catch (error) { - throw new CacheOperationError(`Failed to clear cache: ${error}`, error); - } - } - - /** - * Get cache statistics. - */ - async getStats(): Promise { - return { ...this.stats }; - } - - /** - * Clean up expired entries. - */ - async cleanup(): Promise { - this.ensureInitialized(); - - let removed = 0; - - try { - const files = await readdir(this.options.cacheDir); - - for (const file of files) { - if (!file.endsWith(this.options.extension)) continue; - - const filePath = join(this.options.cacheDir, file); - - try { - const content = await readFile(filePath, 'utf8'); - const entry: CacheEntry = JSON.parse(content); - - if (Date.now() > entry.metadata.expiresAt) { - await unlink(filePath); - this.stats.entries = Math.max(0, this.stats.entries - 1); - this.stats.totalSize = Math.max(0, this.stats.totalSize - entry.metadata.size); - removed++; - } - } catch { - // Corrupted file, remove it - await unlink(filePath).catch(() => { - /* ignore removal errors */ - }); - removed++; - } - } - } catch { - // Directory doesn't exist or can't be read - } - - return removed; - } - - /** - * Close the storage (no-op for filesystem). - */ - async close(): Promise { - // Nothing to close for filesystem storage - } - - /** - * Get the file path for a cache key. - * Uses SHA-256 hash to avoid collisions from key sanitization. - */ - private getFilePath(key: string): string { - // Use hash to avoid collisions - different keys always produce different filenames - const hash = createHash('sha256').update(key).digest('hex').slice(0, 16); - return join(this.options.cacheDir, `${hash}${this.options.extension}`); - } - - /** - * Write a cache entry to disk. - */ - private async writeEntry(filePath: string, entry: CacheEntry): Promise { - await mkdir(dirname(filePath), { recursive: true }); - await writeFile(filePath, JSON.stringify(entry, null, 2), 'utf8'); - } - - /** - * Ensure the storage is initialized. - */ - private ensureInitialized(): void { - if (!this.initialized) { - throw new StorageNotInitializedError(); - } - } - - /** - * Load stats from existing cache files. - * Reads entry metadata to get accurate manifest sizes. - */ - private async loadStats(): Promise { - try { - const files = await readdir(this.options.cacheDir); - let entries = 0; - let totalSize = 0; - - for (const file of files) { - if (!file.endsWith(this.options.extension)) continue; - - const filePath = join(this.options.cacheDir, file); - - try { - const content = await readFile(filePath, 'utf8'); - const entry: CacheEntry = JSON.parse(content); - entries++; - totalSize += entry.metadata.size; - } catch { - // Skip unreadable or corrupted files - } - } - - this.stats.entries = entries; - this.stats.totalSize = totalSize; - } catch { - // Directory doesn't exist yet - } - } - - /** - * Ensure there's capacity for a new entry. - */ - private async ensureCapacity(newEntrySize: number): Promise { - // Check entry count limit - if (this.stats.entries >= this.options.maxEntries) { - await this.evictLRU(); - } - - // Check size limit - while (this.stats.totalSize + newEntrySize > this.options.maxSize) { - const evicted = await this.evictLRU(); - if (!evicted) break; // No more entries to evict - } - } - - /** - * Evict the least recently used entry. - */ - private async evictLRU(): Promise { - try { - const files = await readdir(this.options.cacheDir); - let oldestKey: string | null = null; - let oldestTime = Infinity; - let corruptedFile: string | null = null; - - for (const file of files) { - if (!file.endsWith(this.options.extension)) continue; - - const filePath = join(this.options.cacheDir, file); - - try { - const content = await readFile(filePath, 'utf8'); - const entry: CacheEntry = JSON.parse(content); - - if (entry.metadata.lastAccessedAt < oldestTime) { - oldestTime = entry.metadata.lastAccessedAt; - oldestKey = entry.metadata.key; - } - } catch { - // Corrupted file, mark for direct removal - corruptedFile = filePath; - } - } - - // Remove corrupted file directly if found - if (corruptedFile) { - try { - await unlink(corruptedFile); - this.stats.entries = Math.max(0, this.stats.entries - 1); - return true; - } catch { - return false; - } - } - - // Delete oldest entry using the key from metadata - if (oldestKey) { - return await this.delete(oldestKey); - } - - return false; - } catch { - return false; - } - } - - /** - * Update hit rate statistic. - */ - private updateHitRate(): void { - const total = this.stats.hits + this.stats.misses; - this.stats.hitRate = total > 0 ? this.stats.hits / total : 0; - } -} - -/** - * Create a filesystem storage instance. - */ -export function createFilesystemStorage(options?: FilesystemStorageOptions): FilesystemStorage { - return new FilesystemStorage(options); -} diff --git a/libs/ui/src/bundler/file-cache/storage/index.ts b/libs/ui/src/bundler/file-cache/storage/index.ts deleted file mode 100644 index 40b5dc0d..00000000 --- a/libs/ui/src/bundler/file-cache/storage/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Build Cache Storage - * - * Storage implementations for component build caching. - * - * @packageDocumentation - */ - -// Interface -export { - type BuildCacheStorage, - type StorageOptions, - type CacheEntry, - type CacheEntryMetadata, - DEFAULT_STORAGE_OPTIONS, - calculateManifestSize, -} from './interface'; - -// Filesystem Storage -export { FilesystemStorage, createFilesystemStorage, type FilesystemStorageOptions } from './filesystem'; - -// Redis Storage -export { RedisStorage, createRedisStorage, type RedisStorageOptions, type RedisClient } from './redis'; diff --git a/libs/ui/src/bundler/file-cache/storage/interface.ts b/libs/ui/src/bundler/file-cache/storage/interface.ts deleted file mode 100644 index c3671682..00000000 --- a/libs/ui/src/bundler/file-cache/storage/interface.ts +++ /dev/null @@ -1,189 +0,0 @@ -/** - * Build Cache Storage Interface - * - * Abstract interface for storing and retrieving component build manifests. - * Implementations include filesystem (development) and Redis (production). - * - * @packageDocumentation - */ - -import type { ComponentBuildManifest, CacheStats } from '@frontmcp/uipack/dependency'; - -/** - * Options for storage initialization. - */ -export interface StorageOptions { - /** - * Maximum number of entries to store. - * @default 1000 - */ - maxEntries?: number; - - /** - * Maximum total size in bytes. - * @default 104857600 (100MB) - */ - maxSize?: number; - - /** - * Default TTL in seconds. - * @default 86400 (24 hours) - */ - defaultTtl?: number; - - /** - * Whether to compress stored data. - * @default false - */ - compress?: boolean; -} - -/** - * Abstract interface for build cache storage. - * - * Implementations should handle: - * - Key-value storage of ComponentBuildManifest - * - TTL-based expiration - * - Size-based eviction - * - Concurrent access safety - */ -export interface BuildCacheStorage { - /** - * Storage identifier for logging/debugging. - */ - readonly type: string; - - /** - * Initialize the storage backend. - * Must be called before other operations. - */ - initialize(): Promise; - - /** - * Retrieve a cached build manifest by key. - * - * @param key - Cache key (typically content hash) - * @returns Cached manifest or undefined if not found/expired - */ - get(key: string): Promise; - - /** - * Store a build manifest in cache. - * - * @param key - Cache key - * @param manifest - Build manifest to store - * @param ttl - Optional TTL in seconds (overrides default) - */ - set(key: string, manifest: ComponentBuildManifest, ttl?: number): Promise; - - /** - * Check if a key exists in cache (and is not expired). - * - * @param key - Cache key to check - * @returns true if key exists and is valid - */ - has(key: string): Promise; - - /** - * Delete a cached entry. - * - * @param key - Cache key to delete - * @returns true if entry was deleted, false if not found - */ - delete(key: string): Promise; - - /** - * Clear all cached entries. - */ - clear(): Promise; - - /** - * Get cache statistics. - */ - getStats(): Promise; - - /** - * Clean up expired entries. - * Returns number of entries removed. - */ - cleanup(): Promise; - - /** - * Close the storage connection. - * Should be called when the application shuts down. - */ - close(): Promise; -} - -/** - * Metadata for a cached entry. - */ -export interface CacheEntryMetadata { - /** - * Cache key. - */ - key: string; - - /** - * Size of the cached data in bytes. - */ - size: number; - - /** - * Timestamp when entry was created (ms since epoch). - */ - createdAt: number; - - /** - * Timestamp when entry expires (ms since epoch). - */ - expiresAt: number; - - /** - * Last access timestamp (ms since epoch). - */ - lastAccessedAt: number; - - /** - * Number of times the entry has been accessed. - */ - accessCount: number; -} - -/** - * Wrapper around cached data with metadata. - */ -export interface CacheEntry { - /** - * The cached data. - */ - data: T; - - /** - * Entry metadata. - */ - metadata: CacheEntryMetadata; -} - -/** - * Default storage options. - */ -export const DEFAULT_STORAGE_OPTIONS: Required = { - maxEntries: 1000, - maxSize: 100 * 1024 * 1024, // 100MB - defaultTtl: 24 * 60 * 60, // 24 hours - compress: false, -}; - -/** - * Calculate the size of a manifest in bytes. - */ -export function calculateManifestSize(manifest: ComponentBuildManifest): number { - // Approximate size by serializing to JSON - try { - return Buffer.byteLength(JSON.stringify(manifest), 'utf8'); - } catch { - // Fallback for circular references or BigInt values - return 0; - } -} diff --git a/libs/ui/src/bundler/file-cache/storage/redis.ts b/libs/ui/src/bundler/file-cache/storage/redis.ts deleted file mode 100644 index 902805ca..00000000 --- a/libs/ui/src/bundler/file-cache/storage/redis.ts +++ /dev/null @@ -1,398 +0,0 @@ -/** - * Redis Build Cache Storage - * - * Redis-based cache storage for production environments. - * Uses Redis TTL for expiration and optional compression. - * - * @packageDocumentation - */ - -import type { ComponentBuildManifest, CacheStats } from '@frontmcp/uipack/dependency'; -import type { BuildCacheStorage, StorageOptions, CacheEntry } from './interface'; -import { DEFAULT_STORAGE_OPTIONS, calculateManifestSize } from './interface'; - -/** - * Redis client interface (compatible with ioredis and redis packages). - */ -export interface RedisClient { - get(key: string): Promise; - set(key: string, value: string, mode?: string, duration?: number): Promise; - setex(key: string, seconds: number, value: string): Promise; - del(key: string | string[]): Promise; - exists(key: string | string[]): Promise; - keys(pattern: string): Promise; - ttl(key: string): Promise; - expire(key: string, seconds: number): Promise; - quit(): Promise; - ping(): Promise; -} - -/** - * Options specific to Redis storage. - */ -export interface RedisStorageOptions extends StorageOptions { - /** - * Redis client instance. - * Must be provided. - */ - client: RedisClient; - - /** - * Key prefix for cache entries. - * @default 'frontmcp:ui:build:' - */ - keyPrefix?: string; - - /** - * Whether to use JSON.stringify/parse (vs raw storage). - * @default true - */ - json?: boolean; -} - -/** - * Key for storing cache statistics. - */ -const STATS_KEY_SUFFIX = ':__stats__'; - -/** - * Redis-based build cache storage. - * - * Stores build manifests in Redis with automatic TTL expiration. - * Suitable for production environments with multiple server instances. - * - * @example - * ```typescript - * import Redis from 'ioredis'; - * - * const redis = new Redis(process.env.REDIS_URL); - * const storage = new RedisStorage({ - * client: redis, - * keyPrefix: 'myapp:builds:', - * defaultTtl: 3600, // 1 hour - * }); - * - * await storage.initialize(); - * await storage.set('abc123', manifest); - * ``` - */ -export class RedisStorage implements BuildCacheStorage { - readonly type = 'redis'; - - private readonly options: Required> & { client: RedisClient }; - private initialized = false; - private localStats: CacheStats = { - entries: 0, - totalSize: 0, - hits: 0, - misses: 0, - hitRate: 0, - }; - - constructor(options: RedisStorageOptions) { - if (!options.client) { - throw new Error('Redis client is required'); - } - - this.options = { - ...DEFAULT_STORAGE_OPTIONS, - keyPrefix: 'frontmcp:ui:build:', - json: true, - ...options, - }; - } - - /** - * Initialize the Redis connection. - */ - async initialize(): Promise { - if (this.initialized) return; - - try { - // Test connection - await this.options.client.ping(); - - // Load stats from Redis - await this.loadStats(); - - this.initialized = true; - } catch (error) { - throw new Error(`Failed to connect to Redis: ${error}`); - } - } - - /** - * Get a cached manifest. - */ - async get(key: string): Promise { - this.ensureInitialized(); - - const redisKey = this.getRedisKey(key); - - try { - const data = await this.options.client.get(redisKey); - - if (!data) { - this.localStats.misses++; - this.updateHitRate(); - await this.persistStats(); - return undefined; - } - - // CacheEntry must always be JSON parsed to access metadata structure - const entry: CacheEntry = JSON.parse(data); - - // Update access metadata - entry.metadata.lastAccessedAt = Date.now(); - entry.metadata.accessCount++; - - // Get remaining TTL and persist updated entry - const ttl = await this.options.client.ttl(redisKey); - if (ttl > 0) { - // Re-set with same TTL to update metadata - // CacheEntry must always be JSON serialized to maintain metadata structure - const serialized = JSON.stringify(entry); - await this.options.client.setex(redisKey, ttl, serialized); - } - - this.localStats.hits++; - this.updateHitRate(); - await this.persistStats(); - - return entry.data; - } catch (error) { - // Log for debugging but still return undefined for cache miss - console.warn?.(`Redis cache get failed for key "${key}": ${error}`); - this.localStats.misses++; - this.updateHitRate(); - // Persist stats on error path too for consistency - await this.persistStats().catch(() => { - /* Ignore stats persistence errors in error path */ - }); - return undefined; - } - } - - /** - * Store a manifest in cache. - */ - async set(key: string, manifest: ComponentBuildManifest, ttl?: number): Promise { - this.ensureInitialized(); - - const redisKey = this.getRedisKey(key); - const size = calculateManifestSize(manifest); - const effectiveTtl = ttl ?? this.options.defaultTtl; - - const entry: CacheEntry = { - data: manifest, - metadata: { - key, - size, - createdAt: Date.now(), - expiresAt: Date.now() + effectiveTtl * 1000, - lastAccessedAt: Date.now(), - accessCount: 0, - }, - }; - - // CacheEntry must always be JSON serialized to maintain metadata structure - const serialized = JSON.stringify(entry); - - await this.options.client.setex(redisKey, effectiveTtl, serialized); - - this.localStats.entries++; - this.localStats.totalSize += size; - await this.persistStats(); - } - - /** - * Check if a key exists. - */ - async has(key: string): Promise { - this.ensureInitialized(); - - const redisKey = this.getRedisKey(key); - const exists = await this.options.client.exists(redisKey); - return exists > 0; - } - - /** - * Delete a cached entry. - */ - async delete(key: string): Promise { - this.ensureInitialized(); - - const redisKey = this.getRedisKey(key); - - // Try to get size for stats before deleting - try { - const data = await this.options.client.get(redisKey); - if (data) { - // CacheEntry must always be JSON parsed to access metadata structure - const entry: CacheEntry = JSON.parse(data); - this.localStats.totalSize = Math.max(0, this.localStats.totalSize - entry.metadata.size); - } - } catch { - // Ignore errors - } - - const deleted = await this.options.client.del(redisKey); - - if (deleted > 0) { - this.localStats.entries = Math.max(0, this.localStats.entries - 1); - await this.persistStats(); - return true; - } - - return false; - } - - /** - * Clear all cached entries. - */ - async clear(): Promise { - this.ensureInitialized(); - - const pattern = `${this.options.keyPrefix}*`; - const keys = await this.options.client.keys(pattern); - - if (keys.length > 0) { - await this.options.client.del(keys); - } - - this.localStats = { - entries: 0, - totalSize: 0, - hits: 0, - misses: 0, - hitRate: 0, - }; - - await this.persistStats(); - } - - /** - * Get cache statistics. - */ - async getStats(): Promise { - await this.loadStats(); - return { ...this.localStats }; - } - - /** - * Clean up expired entries. - * Redis handles TTL expiration automatically, so this just refreshes stats. - */ - async cleanup(): Promise { - this.ensureInitialized(); - - // Count actual keys - const pattern = `${this.options.keyPrefix}*`; - const keys = await this.options.client.keys(pattern); - - // Filter out stats key - const dataKeys = keys.filter((k) => !k.endsWith(STATS_KEY_SUFFIX)); - const previousCount = this.localStats.entries; - - this.localStats.entries = dataKeys.length; - - // Recalculate total size (expensive, but accurate) - let totalSize = 0; - for (const key of dataKeys) { - try { - const data = await this.options.client.get(key); - if (data) { - // CacheEntry must always be JSON parsed to access metadata structure - const entry: CacheEntry = JSON.parse(data); - totalSize += entry.metadata.size; - } - } catch { - // Skip corrupted entries - } - } - - this.localStats.totalSize = totalSize; - await this.persistStats(); - - return Math.max(0, previousCount - this.localStats.entries); - } - - /** - * Close the Redis connection. - */ - async close(): Promise { - await this.options.client.quit(); - } - - /** - * Get the Redis key for a cache key. - */ - private getRedisKey(key: string): string { - return `${this.options.keyPrefix}${key}`; - } - - /** - * Get the Redis key for stats. - */ - private getStatsKey(): string { - return `${this.options.keyPrefix}${STATS_KEY_SUFFIX}`; - } - - /** - * Ensure the storage is initialized. - */ - private ensureInitialized(): void { - if (!this.initialized) { - throw new Error('Storage not initialized. Call initialize() first.'); - } - } - - /** - * Load stats from Redis. - */ - private async loadStats(): Promise { - try { - const statsKey = this.getStatsKey(); - const data = await this.options.client.get(statsKey); - - if (data) { - const savedStats = JSON.parse(data); - this.localStats = { - ...this.localStats, - ...savedStats, - }; - } - } catch { - // Use default stats - } - } - - /** - * Persist stats to Redis. - */ - private async persistStats(): Promise { - try { - const statsKey = this.getStatsKey(); - const serialized = JSON.stringify(this.localStats); - // Stats don't expire - await this.options.client.set(statsKey, serialized); - } catch { - // Ignore errors - } - } - - /** - * Update hit rate statistic. - */ - private updateHitRate(): void { - const total = this.localStats.hits + this.localStats.misses; - this.localStats.hitRate = total > 0 ? this.localStats.hits / total : 0; - } -} - -/** - * Create a Redis storage instance. - */ -export function createRedisStorage(options: RedisStorageOptions): RedisStorage { - return new RedisStorage(options); -} diff --git a/libs/ui/src/bundler/index.ts b/libs/ui/src/bundler/index.ts index 3429971f..6f0cd568 100644 --- a/libs/ui/src/bundler/index.ts +++ b/libs/ui/src/bundler/index.ts @@ -95,29 +95,35 @@ export { } from './types'; // ============================================ -// Cache Utilities +// Cache Utilities (re-exported from @frontmcp/uipack) // ============================================ -export { BundlerCache, hashContent, createCacheKey } from './cache'; +export { BundlerCache, hashContent, createCacheKey } from '@frontmcp/uipack/bundler'; -export type { CacheOptions, CacheStats } from './cache'; +export type { CacheOptions, CacheStats } from '@frontmcp/uipack/bundler'; // ============================================ -// Security Utilities +// Security Utilities (re-exported from @frontmcp/uipack) // ============================================ -export { validateSource, validateImports, validateSize, mergePolicy, throwOnViolations } from './sandbox/policy'; +export { + validateSource, + validateImports, + validateSize, + mergePolicy, + throwOnViolations, +} from '@frontmcp/uipack/bundler'; // ============================================ -// Execution Utilities +// Execution Utilities (re-exported from @frontmcp/uipack) // ============================================ -export { executeCode, executeDefault, isExecutionError } from './sandbox/executor'; +export { executeCode, executeDefault, isExecutionError } from '@frontmcp/uipack/bundler'; -export type { ExecutionContext, ExecutionResult } from './sandbox/executor'; +export type { ExecutionContext, ExecutionResult } from '@frontmcp/uipack/bundler'; // ============================================ -// File-Based Component Caching +// File-Based Component Caching (re-exported from @frontmcp/uipack) // ============================================ export { @@ -154,4 +160,4 @@ export { createRedisBuilder, type ComponentBuildOptions, type ComponentBuildResult, -} from './file-cache'; +} from '@frontmcp/uipack/bundler'; diff --git a/libs/ui/src/bundler/sandbox/enclave-adapter.ts b/libs/ui/src/bundler/sandbox/enclave-adapter.ts deleted file mode 100644 index 100b5b8b..00000000 --- a/libs/ui/src/bundler/sandbox/enclave-adapter.ts +++ /dev/null @@ -1,477 +0,0 @@ -/** - * Enclave-VM Secure Code Executor - * - * Executes bundled code in a secure sandbox using enclave-vm. - * Provides defense-in-depth security with: - * - AST-based validation (81+ blocked attack vectors) - * - Timeout enforcement (default 5000ms) - * - Resource limits (maxIterations, maxToolCalls) - * - Six security layers - * - * @packageDocumentation - */ - -import { Enclave, type CreateEnclaveOptions, type SecurityLevel } from 'enclave-vm'; -import type { SecurityPolicy } from '../types'; - -/** - * Context for code execution. - */ -export interface ExecutionContext { - /** - * React module to inject. - */ - React?: unknown; - - /** - * ReactDOM module to inject. - */ - ReactDOM?: unknown; - - /** - * Additional modules to inject. - */ - modules?: Record; - - /** - * Additional global variables. - */ - globals?: Record; - - /** - * Security policy to enforce. - */ - security?: SecurityPolicy; - - /** - * Execution timeout in milliseconds. - * @default 5000 - */ - timeout?: number; - - /** - * Maximum loop iterations allowed. - * @default 10000 - */ - maxIterations?: number; -} - -/** - * Result of code execution. - */ -export interface ExecutionResult { - /** - * Exported value from the code. - */ - exports: T; - - /** - * Execution time in ms. - */ - executionTime: number; - - /** - * Console output captured during execution. - */ - consoleOutput?: string[]; -} - -/** - * Default enclave options for secure widget execution. - */ -const DEFAULT_ENCLAVE_OPTIONS: Partial = { - securityLevel: 'SECURE', - timeout: 5000, - maxIterations: 10000, - validate: true, - transform: true, -}; - -/** - * Threshold of blocked imports that triggers STRICT security level. - * When a SecurityPolicy blocks more than this many imports, we escalate to STRICT. - */ -const STRICT_SECURITY_BLOCKED_IMPORTS_THRESHOLD = 10; - -/** - * Map SecurityPolicy to enclave-vm security level. - */ -function mapSecurityLevel(policy?: SecurityPolicy): SecurityLevel { - // If policy has specific blockedImports or restrictive settings, use STRICT - if (policy?.blockedImports && policy.blockedImports.length > STRICT_SECURITY_BLOCKED_IMPORTS_THRESHOLD) { - return 'STRICT'; - } - // Default to SECURE for widget code - return 'SECURE'; -} - -/** - * Create a minimal JSX runtime from React. - */ -function createJSXRuntime(React: unknown): Record { - const R = React as { - createElement: (...args: unknown[]) => unknown; - Fragment: unknown; - }; - - return { - jsx: (type: unknown, props: Record, key?: string) => { - const { children, ...rest } = props; - return R.createElement(type, key ? { ...rest, key } : rest, children); - }, - jsxs: (type: unknown, props: Record, key?: string) => { - const { children, ...rest } = props; - return R.createElement(type, key ? { ...rest, key } : rest, children); - }, - jsxDEV: ( - type: unknown, - props: Record, - key: string | undefined, - _isStaticChildren: boolean, - _source: unknown, - _self: unknown, - ) => { - const { children, ...rest } = props; - return R.createElement(type, key ? { ...rest, key } : rest, children); - }, - Fragment: R.Fragment, - }; -} - -/** - * Dangerous global keys that should never be injected from user context. - * These could potentially bypass enclave security if allowed. - */ -const DANGEROUS_GLOBAL_KEYS = new Set([ - 'process', - 'require', - '__dirname', - '__filename', - 'Buffer', - 'eval', - 'Function', - 'constructor', - 'global', - 'globalThis', - 'module', - 'exports', - '__proto__', -]); - -/** - * Sanitize a key for use as a global variable name. - * Replaces non-alphanumeric characters (except _ and $) with underscores. - */ -function sanitizeGlobalKey(key: string): string { - return key.replace(/[^a-zA-Z0-9_$]/g, '_'); -} - -/** - * Build globals object from execution context. - */ -function buildGlobals(context: ExecutionContext): Record { - const globals: Record = {}; - - // Add React and ReactDOM if provided - if (context.React) { - globals['React'] = context.React; - } - if (context.ReactDOM) { - globals['ReactDOM'] = context.ReactDOM; - } - - // Add JSX runtime if React is available - if (context.React) { - const jsxRuntime = createJSXRuntime(context.React); - globals['__jsx'] = jsxRuntime['jsx']; - globals['__jsxs'] = jsxRuntime['jsxs']; - globals['__jsxDEV'] = jsxRuntime['jsxDEV']; - globals['Fragment'] = jsxRuntime['Fragment']; - } - - // Add modules as globals (enclave-vm handles require internally) - if (context.modules) { - for (const [key, value] of Object.entries(context.modules)) { - // Sanitize key and make modules accessible as globals - const sanitizedKey = sanitizeGlobalKey(key); - if (DANGEROUS_GLOBAL_KEYS.has(sanitizedKey)) { - throw new ExecutionError( - `Dangerous module key '${key}' (sanitized: '${sanitizedKey}') is not allowed in execution context`, - { code: 'SECURITY_VIOLATION' }, - ); - } - globals[sanitizedKey] = value; - } - } - - // Add user globals with security filtering - if (context.globals) { - for (const [key, value] of Object.entries(context.globals)) { - // Check for dangerous keys (both original and sanitized) - if (DANGEROUS_GLOBAL_KEYS.has(key)) { - throw new ExecutionError(`Dangerous global key '${key}' is not allowed in execution context`, { - code: 'SECURITY_VIOLATION', - }); - } - // Sanitize the key for safe global variable naming - const sanitizedKey = sanitizeGlobalKey(key); - if (DANGEROUS_GLOBAL_KEYS.has(sanitizedKey)) { - throw new ExecutionError( - `Dangerous global key '${key}' (sanitized: '${sanitizedKey}') is not allowed in execution context`, - { code: 'SECURITY_VIOLATION' }, - ); - } - globals[sanitizedKey] = value; - } - } - - return globals; -} - -/** - * Build require function for module resolution. - */ -function buildRequireFunction(context: ExecutionContext): (id: string) => unknown { - // Normalize all context.modules keys to lowercase for consistent lookup - const normalizedContextModules: Record = {}; - if (context.modules) { - for (const [key, value] of Object.entries(context.modules)) { - normalizedContextModules[key.toLowerCase()] = value; - } - } - - const modules: Record = { - react: context.React, - 'react-dom': context.ReactDOM, - 'react/jsx-runtime': context.React ? createJSXRuntime(context.React) : undefined, - 'react/jsx-dev-runtime': context.React ? createJSXRuntime(context.React) : undefined, - ...normalizedContextModules, - }; - - return (id: string): unknown => { - const normalizedId = id.toLowerCase(); - - if (normalizedId in modules) { - const mod = modules[normalizedId]; - if (mod === undefined) { - throw new Error(`Module '${id}' is not available. Did you forget to provide it in the context?`); - } - return mod; - } - - throw new Error(`Module '${id}' is not available in the sandbox environment`); - }; -} - -/** - * Execute bundled code in a secure enclave-vm sandbox. - * - * Provides a sandboxed execution context with: - * - AST-based code validation (81+ attack vectors blocked) - * - Timeout enforcement (default 5000ms) - * - Resource limits (maxIterations) - * - Six security layers (defense-in-depth) - * - * @param code - Bundled JavaScript code - * @param context - Execution context - * @returns Execution result with exports - * - * @example - * ```typescript - * const code = ` - * const React = require('react'); - * function Widget({ data }) { - * return React.createElement('div', null, data.message); - * } - * module.exports = Widget; - * `; - * - * const result = await executeCode(code, { - * React: require('react'), - * timeout: 3000, - * }); - * - * console.log(result.exports); // Widget function - * ``` - */ -export async function executeCode( - code: string, - context: ExecutionContext = {}, -): Promise> { - const consoleOutput: string[] = []; - - // Build globals with console capture - const globals = buildGlobals(context); - - // Add sandboxed console - globals['console'] = { - log: (...args: unknown[]) => { - consoleOutput.push(args.map(String).join(' ')); - }, - info: (...args: unknown[]) => { - consoleOutput.push(`[INFO] ${args.map(String).join(' ')}`); - }, - warn: (...args: unknown[]) => { - consoleOutput.push(`[WARN] ${args.map(String).join(' ')}`); - }, - error: (...args: unknown[]) => { - consoleOutput.push(`[ERROR] ${args.map(String).join(' ')}`); - }, - debug: (...args: unknown[]) => { - consoleOutput.push(`[DEBUG] ${args.map(String).join(' ')}`); - }, - trace: () => { - /* noop */ - }, - dir: () => { - /* noop */ - }, - table: () => { - /* noop */ - }, - group: () => { - /* noop */ - }, - groupEnd: () => { - /* noop */ - }, - time: () => { - /* noop */ - }, - timeEnd: () => { - /* noop */ - }, - assert: () => { - /* noop */ - }, - clear: () => { - /* noop */ - }, - count: () => { - /* noop */ - }, - countReset: () => { - /* noop */ - }, - }; - - // Add require function - globals['require'] = buildRequireFunction(context); - - // Create enclave with options - const enclave = new Enclave({ - ...DEFAULT_ENCLAVE_OPTIONS, - timeout: context.timeout ?? DEFAULT_ENCLAVE_OPTIONS.timeout, - maxIterations: context.maxIterations ?? DEFAULT_ENCLAVE_OPTIONS.maxIterations, - securityLevel: mapSecurityLevel(context.security), - globals, - allowFunctionsInGlobals: true, // Required for React components - }); - - try { - // Wrap code in module pattern to match CommonJS behavior - const wrappedCode = ` - const module = { exports: {} }; - const exports = module.exports; - const __filename = 'widget.js'; - const __dirname = '/'; - ${code} - return module.exports; - `; - - const result = await enclave.run(wrappedCode); - - if (!result.success) { - const errorMessage = result.error?.message ?? 'Execution failed'; - const errorCode = result.error?.code; - - // Map enclave error codes to descriptive messages - if (errorCode === 'TIMEOUT') { - throw new ExecutionError(`Execution timed out after ${context.timeout ?? DEFAULT_ENCLAVE_OPTIONS.timeout}ms`, { - code: 'TIMEOUT', - }); - } - if (errorCode === 'MAX_ITERATIONS') { - throw new ExecutionError( - `Maximum iterations exceeded (${context.maxIterations ?? DEFAULT_ENCLAVE_OPTIONS.maxIterations})`, - { - code: 'MAX_ITERATIONS', - }, - ); - } - if (errorCode === 'VALIDATION_ERROR') { - throw new ExecutionError(`Security validation failed: ${errorMessage}`, { code: 'SECURITY_VIOLATION' }); - } - - throw new ExecutionError(errorMessage, result.error); - } - - return { - exports: result.value as T, - executionTime: result.stats.duration, - consoleOutput: consoleOutput.length > 0 ? consoleOutput : undefined, - }; - } finally { - enclave.dispose(); - } -} - -/** - * Execute bundled code and extract the default export. - * - * Convenience wrapper around executeCode that extracts - * the default export. - * - * @param code - Bundled JavaScript code - * @param context - Execution context - * @returns Default export from the code - */ -export async function executeDefault(code: string, context: ExecutionContext = {}): Promise { - const result = await executeCode<{ default?: T } & Record>(code, context); - - // Check for default export - if ('default' in result.exports) { - return result.exports.default as T; - } - - // Check for named exports - const exportKeys = Object.keys(result.exports); - - // Handle empty exports - throw error as code should export something - if (exportKeys.length === 0) { - throw new ExecutionError('Code did not export any values'); - } - - // If only one named export, return it as the default - if (exportKeys.length === 1) { - return result.exports[exportKeys[0]] as T; - } - - // Multiple exports - return the whole exports object - return result.exports as T; -} - -/** - * Error thrown during code execution. - */ -export class ExecutionError extends Error { - /** Error code for categorization */ - code?: string; - - constructor(message: string, cause?: unknown) { - super(message, { cause }); - this.name = 'ExecutionError'; - - // Extract code from cause if present - if (cause && typeof cause === 'object' && 'code' in cause) { - this.code = (cause as { code: string }).code; - } - } -} - -/** - * Check if an error is an ExecutionError. - */ -export function isExecutionError(error: unknown): error is ExecutionError { - return error instanceof ExecutionError; -} diff --git a/libs/ui/src/bundler/sandbox/executor.ts b/libs/ui/src/bundler/sandbox/executor.ts deleted file mode 100644 index 4f9d99ee..00000000 --- a/libs/ui/src/bundler/sandbox/executor.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Secure Code Executor - * - * Executes bundled code in a secure sandbox using enclave-vm. - * Provides defense-in-depth security with: - * - AST-based validation (81+ blocked attack vectors) - * - Timeout enforcement (default 5000ms) - * - Resource limits (maxIterations) - * - Six security layers - * - * @packageDocumentation - */ - -// Re-export everything from enclave-adapter -export { - executeCode, - executeDefault, - ExecutionError, - isExecutionError, - type ExecutionContext, - type ExecutionResult, -} from './enclave-adapter'; diff --git a/libs/ui/src/bundler/sandbox/policy.ts b/libs/ui/src/bundler/sandbox/policy.ts deleted file mode 100644 index d4a1695c..00000000 --- a/libs/ui/src/bundler/sandbox/policy.ts +++ /dev/null @@ -1,256 +0,0 @@ -/** - * Sandbox Security Policy - * - * Defines and validates security policies for bundler execution. - * - * @packageDocumentation - */ - -import type { SecurityPolicy, SecurityViolation } from '../types'; -import { DEFAULT_SECURITY_POLICY } from '../types'; - -/** - * Patterns that indicate unsafe code. - */ -const UNSAFE_PATTERNS = { - eval: /\beval\s*\(/g, - functionConstructor: /\bnew\s+Function\s*\(/g, - dynamicImport: /\bimport\s*\(/g, - require: /\brequire\s*\(/g, - processEnv: /\bprocess\.env\b/g, - globalThis: /\bglobalThis\b/g, - windowLocation: /\bwindow\.location\b/g, - documentCookie: /\bdocument\.cookie\b/g, - innerHTML: /\.innerHTML\s*=/g, - outerHTML: /\.outerHTML\s*=/g, - document_write: /\bdocument\.write\s*\(/g, -}; - -/** - * Validate source code against a security policy. - * - * @param source - Source code to validate - * @param policy - Security policy to enforce - * @returns Array of security violations (empty if valid) - * - * @example - * ```typescript - * const violations = validateSource(code, DEFAULT_SECURITY_POLICY); - * if (violations.length > 0) { - * throw new Error(`Security violations: ${violations.map(v => v.message).join(', ')}`); - * } - * ``` - */ -export function validateSource(source: string, policy: SecurityPolicy = DEFAULT_SECURITY_POLICY): SecurityViolation[] { - const violations: SecurityViolation[] = []; - - // Check for eval usage - if (policy.noEval !== false) { - const evalMatches = [...source.matchAll(UNSAFE_PATTERNS.eval)]; - for (const match of evalMatches) { - violations.push({ - type: 'eval-usage', - message: 'eval() is not allowed for security reasons', - location: getLocation(source, match.index ?? 0), - value: match[0], - }); - } - - const fnMatches = [...source.matchAll(UNSAFE_PATTERNS.functionConstructor)]; - for (const match of fnMatches) { - violations.push({ - type: 'eval-usage', - message: 'new Function() is not allowed for security reasons', - location: getLocation(source, match.index ?? 0), - value: match[0], - }); - } - } - - // Check for dynamic imports - if (policy.noDynamicImports !== false) { - const matches = [...source.matchAll(UNSAFE_PATTERNS.dynamicImport)]; - for (const match of matches) { - violations.push({ - type: 'dynamic-import', - message: 'Dynamic imports are not allowed for security reasons', - location: getLocation(source, match.index ?? 0), - value: match[0], - }); - } - } - - // Check for require usage - if (policy.noRequire !== false) { - const matches = [...source.matchAll(UNSAFE_PATTERNS.require)]; - for (const match of matches) { - violations.push({ - type: 'require-usage', - message: 'require() is not allowed for security reasons', - location: getLocation(source, match.index ?? 0), - value: match[0], - }); - } - } - - // Validate imports - const importViolations = validateImports(source, policy); - violations.push(...importViolations); - - return violations; -} - -/** - * Validate import statements against policy. - * - * @param source - Source code to check - * @param policy - Security policy - * @returns Array of import violations - */ -export function validateImports(source: string, policy: SecurityPolicy = DEFAULT_SECURITY_POLICY): SecurityViolation[] { - const violations: SecurityViolation[] = []; - - // Extract import statements - const importPattern = /import\s+(?:(?:\{[^}]*\}|[\w*]+)\s+from\s+)?['"]([^'"]+)['"]/g; - const imports: Array<{ module: string; index: number }> = []; - - let match; - while ((match = importPattern.exec(source)) !== null) { - imports.push({ module: match[1], index: match.index }); - } - - // Also check for require-style imports that might slip through - const requirePattern = /require\s*\(\s*['"]([^'"]+)['"]\s*\)/g; - while ((match = requirePattern.exec(source)) !== null) { - imports.push({ module: match[1], index: match.index }); - } - - for (const imp of imports) { - // Check blocked imports first - if (policy.blockedImports) { - for (const blocked of policy.blockedImports) { - if (blocked.test(imp.module)) { - violations.push({ - type: 'blocked-import', - message: `Import '${imp.module}' is blocked by security policy`, - location: getLocation(source, imp.index), - value: imp.module, - }); - break; - } - } - } - - // Check if import is in allowed list - if (policy.allowedImports && policy.allowedImports.length > 0) { - const isAllowed = policy.allowedImports.some((pattern) => pattern.test(imp.module)); - if (!isAllowed) { - // Check if already reported as blocked - const alreadyBlocked = violations.some((v) => v.type === 'blocked-import' && v.value === imp.module); - if (!alreadyBlocked) { - violations.push({ - type: 'disallowed-import', - message: `Import '${imp.module}' is not in the allowed imports list`, - location: getLocation(source, imp.index), - value: imp.module, - }); - } - } - } - } - - return violations; -} - -/** - * Validate bundle size against policy. - * - * @param size - Bundle size in bytes - * @param policy - Security policy - * @returns Violation if size exceeds limit, undefined otherwise - */ -export function validateSize( - size: number, - policy: SecurityPolicy = DEFAULT_SECURITY_POLICY, -): SecurityViolation | undefined { - const maxSize = policy.maxBundleSize ?? DEFAULT_SECURITY_POLICY.maxBundleSize ?? 512000; - - if (size > maxSize) { - return { - type: 'size-exceeded', - message: `Bundle size (${formatBytes(size)}) exceeds maximum allowed (${formatBytes(maxSize)})`, - value: String(size), - }; - } - - return undefined; -} - -/** - * Create a merged security policy with defaults. - * - * @param userPolicy - User-provided policy overrides - * @returns Merged policy with defaults - */ -export function mergePolicy(userPolicy?: Partial): SecurityPolicy { - if (!userPolicy) { - return { ...DEFAULT_SECURITY_POLICY }; - } - - return { - allowedImports: userPolicy.allowedImports ?? DEFAULT_SECURITY_POLICY.allowedImports, - blockedImports: userPolicy.blockedImports ?? DEFAULT_SECURITY_POLICY.blockedImports, - maxBundleSize: userPolicy.maxBundleSize ?? DEFAULT_SECURITY_POLICY.maxBundleSize, - maxTransformTime: userPolicy.maxTransformTime ?? DEFAULT_SECURITY_POLICY.maxTransformTime, - noEval: userPolicy.noEval ?? DEFAULT_SECURITY_POLICY.noEval, - noDynamicImports: userPolicy.noDynamicImports ?? DEFAULT_SECURITY_POLICY.noDynamicImports, - noRequire: userPolicy.noRequire ?? DEFAULT_SECURITY_POLICY.noRequire, - allowedGlobals: userPolicy.allowedGlobals ?? DEFAULT_SECURITY_POLICY.allowedGlobals, - }; -} - -/** - * Get line and column from source index. - */ -function getLocation(source: string, index: number): { line: number; column: number } { - const lines = source.slice(0, index).split('\n'); - return { - line: lines.length, - column: lines[lines.length - 1].length + 1, - }; -} - -/** - * Format bytes to human-readable string. - */ -function formatBytes(bytes: number): string { - if (bytes < 1024) return `${bytes} B`; - if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; - return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; -} - -/** - * Security error thrown when policy is violated. - */ -export class SecurityError extends Error { - readonly violations: SecurityViolation[]; - - constructor(message: string, violations: SecurityViolation[]) { - super(message); - this.name = 'SecurityError'; - this.violations = violations; - } -} - -/** - * Throw if any violations exist. - * - * @param violations - Array of violations to check - * @throws SecurityError if violations exist - */ -export function throwOnViolations(violations: SecurityViolation[]): void { - if (violations.length > 0) { - const message = violations.map((v) => v.message).join('; '); - throw new SecurityError(`Security policy violation: ${message}`, violations); - } -} diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index b65c0aae..45a54aa5 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -39,16 +39,6 @@ export * from './components'; // ============================================ export * from './layouts'; -// ============================================ -// Page Templates -// ============================================ -export * from './pages'; - -// ============================================ -// Widgets (OpenAI App SDK, progress, etc.) -// ============================================ -export * from './widgets'; - // ============================================ // MCP Bridge // ============================================ @@ -99,22 +89,10 @@ export { // ============================================ export * from './react'; -// ============================================ -// React 19 Static Rendering -// ============================================ -export * from './render'; - // ============================================ // React Renderer and Adapter // ============================================ -export { - ReactRenderer, - reactRenderer, - buildHydrationScript, - ReactRendererAdapter, - createReactAdapter, - loadReactAdapter, -} from './renderers'; +export { ReactRenderer, reactRenderer, ReactRendererAdapter, createReactAdapter, loadReactAdapter } from './renderers'; // ============================================ // Universal Renderer (separate import path) diff --git a/libs/ui/src/pages/consent.ts b/libs/ui/src/pages/consent.ts deleted file mode 100644 index 88b44c7e..00000000 --- a/libs/ui/src/pages/consent.ts +++ /dev/null @@ -1,393 +0,0 @@ -/** - * OAuth Consent Page Template - * - * OAuth/OpenID Connect consent page for authorization flows. - */ - -import { consentLayout, type ConsentLayoutOptions } from '../layouts'; -import { primaryButton, outlineButton } from '../components/button'; -import { permissionList, type PermissionItem } from '../components/list'; -import { csrfInput, hiddenInput } from '../components/form'; -import { alert } from '../components/alert'; -import { escapeHtml } from '../layouts/base'; - -// ============================================ -// Consent Page Types -// ============================================ - -/** - * Client/Application information - */ -export interface ClientInfo { - /** Client ID */ - clientId: string; - /** Client name */ - name: string; - /** Client icon/logo URL */ - icon?: string; - /** Client website URL */ - websiteUrl?: string; - /** Privacy policy URL */ - privacyUrl?: string; - /** Terms of service URL */ - termsUrl?: string; - /** Verified client badge */ - verified?: boolean; -} - -/** - * User information - */ -export interface UserInfo { - /** User ID */ - id?: string; - /** User name */ - name?: string; - /** User email */ - email?: string; - /** Avatar URL */ - avatar?: string; -} - -/** - * Consent page options - */ -export interface ConsentPageOptions { - /** Client/App requesting authorization */ - client: ClientInfo; - /** Current user info */ - user?: UserInfo; - /** Requested permissions/scopes */ - permissions: PermissionItem[]; - /** Form action URL for approval */ - approveUrl: string; - /** Form action URL for denial (optional, uses approveUrl if not provided) */ - denyUrl?: string; - /** CSRF token */ - csrfToken?: string; - /** OAuth state parameter */ - state?: string; - /** Redirect URI */ - redirectUri?: string; - /** Response type */ - responseType?: string; - /** Nonce */ - nonce?: string; - /** Code challenge */ - codeChallenge?: string; - /** Code challenge method */ - codeChallengeMethod?: string; - /** Error message */ - error?: string; - /** Layout options */ - layout?: Partial; - /** Custom warning message */ - warningMessage?: string; - /** Allow partial scope selection */ - allowScopeSelection?: boolean; - /** Custom approve button text */ - approveText?: string; - /** Custom deny button text */ - denyText?: string; -} - -// ============================================ -// Consent Page Builder -// ============================================ - -/** - * Build an OAuth consent page - */ -export function consentPage(options: ConsentPageOptions): string { - const { - client, - user, - permissions, - approveUrl, - denyUrl, - csrfToken, - state, - redirectUri, - responseType, - nonce, - codeChallenge, - codeChallengeMethod, - error, - layout = {}, - warningMessage, - allowScopeSelection = false, - approveText = 'Allow', - denyText = 'Deny', - } = options; - - // Error alert - const errorAlert = error ? alert(error, { variant: 'danger', dismissible: true }) : ''; - - // Warning for unverified apps - const unverifiedWarning = !client.verified - ? alert(warningMessage || 'This application has not been verified. Only authorize applications you trust.', { - variant: 'warning', - title: 'Unverified Application', - }) - : ''; - - // Client header - const clientHeader = ` -
- ${ - client.icon - ? `${escapeHtml( - client.name, - )}` - : `
- ${escapeHtml(client.name.charAt(0).toUpperCase())} -
` - } -

- ${ - client.verified - ? ` - ${escapeHtml(client.name)} - - - - ` - : escapeHtml(client.name) - } -

-

wants to access your account

-
- `; - - // User info section - const userSection = user - ? ` -
- ${ - user.avatar - ? `` - : `
- ${escapeHtml((user.name || user.email || 'U').charAt(0).toUpperCase())} -
` - } -
- ${user.name ? `
${escapeHtml(user.name)}
` : ''} - ${user.email ? `
${escapeHtml(user.email)}
` : ''} -
- - Switch account - -
- ` - : ''; - - // Permissions section - const permissionsSection = ` -
-

This will allow ${escapeHtml(client.name)} to:

- ${permissionList(permissions, { - checkable: allowScopeSelection, - inputName: 'scope', - })} -
- `; - - // Hidden form fields - const hiddenFields = [ - csrfToken ? csrfInput(csrfToken) : '', - state ? hiddenInput('state', state) : '', - redirectUri ? hiddenInput('redirect_uri', redirectUri) : '', - responseType ? hiddenInput('response_type', responseType) : '', - nonce ? hiddenInput('nonce', nonce) : '', - codeChallenge ? hiddenInput('code_challenge', codeChallenge) : '', - codeChallengeMethod ? hiddenInput('code_challenge_method', codeChallengeMethod) : '', - hiddenInput('client_id', client.clientId), - // Include all scopes if not selectable - !allowScopeSelection ? permissions.map((p) => hiddenInput('scope[]', p.scope)).join('\n') : '', - ] - .filter(Boolean) - .join('\n'); - - // Action buttons - const actionsHtml = ` -
-
- ${hiddenFields} - - ${outlineButton(denyText, { type: 'submit', fullWidth: true })} -
-
- ${hiddenFields} - - ${primaryButton(approveText, { type: 'submit', fullWidth: true })} -
-
- `; - - // Privacy/Terms links - const linksHtml = - client.privacyUrl || client.termsUrl || client.websiteUrl - ? ` -
- ${ - client.websiteUrl - ? `Website` - : '' - } - ${ - client.privacyUrl - ? `Privacy Policy` - : '' - } - ${ - client.termsUrl - ? `Terms of Service` - : '' - } -
- ` - : ''; - - // Combine all content - const content = ` - ${errorAlert} - ${unverifiedWarning} - ${clientHeader} - ${userSection} - ${permissionsSection} - ${actionsHtml} - ${linksHtml} - `; - - return consentLayout(content, { - title: `Authorize ${client.name}`, - clientName: client.name, - clientIcon: client.icon, - userInfo: user, - ...layout, - }); -} - -// ============================================ -// Consent Success Page -// ============================================ - -/** - * Consent success page options - */ -export interface ConsentSuccessOptions { - /** Client info */ - client: ClientInfo; - /** Redirect URL */ - redirectUrl?: string; - /** Auto redirect delay (ms) */ - autoRedirectDelay?: number; - /** Layout options */ - layout?: Partial; -} - -/** - * Build a consent success page - */ -export function consentSuccessPage(options: ConsentSuccessOptions): string { - const { client, redirectUrl, autoRedirectDelay = 3000, layout = {} } = options; - - const redirectScript = - redirectUrl && autoRedirectDelay > 0 - ? ` - - ` - : ''; - - const content = ` -
-
- - - -
-

Authorization Successful

-

- You have authorized ${escapeHtml(client.name)} to access your account. -

- ${ - redirectUrl - ? `

Redirecting you back to ${escapeHtml(client.name)}...

` - : '' - } -
- ${redirectScript} - `; - - return consentLayout(content, { - title: 'Authorization Successful', - clientName: client.name, - clientIcon: client.icon, - ...layout, - }); -} - -// ============================================ -// Consent Denied Page -// ============================================ - -/** - * Consent denied page options - */ -export interface ConsentDeniedOptions { - /** Client info */ - client: ClientInfo; - /** Redirect URL */ - redirectUrl?: string; - /** Layout options */ - layout?: Partial; -} - -/** - * Build a consent denied page - */ -export function consentDeniedPage(options: ConsentDeniedOptions): string { - const { client, redirectUrl, layout = {} } = options; - - const content = ` -
-
- - - -
-

Authorization Denied

-

- You denied ${escapeHtml(client.name)} access to your account. -

- ${ - redirectUrl - ? ` - - Return to ${escapeHtml(client.name)} - - ` - : '' - } -
- `; - - return consentLayout(content, { - title: 'Authorization Denied', - clientName: client.name, - clientIcon: client.icon, - ...layout, - }); -} diff --git a/libs/ui/src/pages/error.ts b/libs/ui/src/pages/error.ts deleted file mode 100644 index 01e25a22..00000000 --- a/libs/ui/src/pages/error.ts +++ /dev/null @@ -1,358 +0,0 @@ -/** - * Error Page Templates - * - * Various error page templates (404, 500, etc.) - */ - -import { errorLayout, type ErrorLayoutOptions } from '../layouts'; -import { escapeHtml } from '../layouts/base'; - -// ============================================ -// Error Page Types -// ============================================ - -/** - * Error page options - */ -export interface ErrorPageOptions { - /** Error code (404, 500, etc.) */ - code?: string | number; - /** Error title */ - title?: string; - /** Error message */ - message?: string; - /** Detailed error (for development) */ - details?: string; - /** Show stack trace (development only) */ - showStack?: boolean; - /** Stack trace */ - stack?: string; - /** Show retry button */ - showRetry?: boolean; - /** Retry URL */ - retryUrl?: string; - /** Show home button */ - showHome?: boolean; - /** Home URL */ - homeUrl?: string; - /** Custom actions HTML */ - actions?: string; - /** Layout options */ - layout?: Partial; - /** Request ID (for support) */ - requestId?: string; -} - -// ============================================ -// Error Page Builder -// ============================================ - -/** - * Build a generic error page - */ -export function errorPage(options: ErrorPageOptions): string { - const { - code, - title = 'Something went wrong', - message, - details, - showStack = false, - stack, - showRetry = true, - retryUrl, - showHome = true, - homeUrl = '/', - actions, - layout = {}, - requestId, - } = options; - - // Details section (for development) - const detailsHtml = - details || (showStack && stack) - ? ` -
- ${ - details - ? ` -
- Details: -

${escapeHtml(details)}

-
- ` - : '' - } - ${ - showStack && stack - ? ` -
- Stack Trace - 
${escapeHtml(stack)}
-
- ` - : '' - } -
- ` - : ''; - - // Request ID for support - const requestIdHtml = requestId - ? ` -

- Request ID: ${escapeHtml(requestId)} -

- ` - : ''; - - // Custom actions or default buttons are handled by errorLayout - const content = ` - ${detailsHtml} - ${actions || ''} - ${requestIdHtml} - `; - - return errorLayout(content, { - title: `${code ? `Error ${code} - ` : ''}${title}`, - errorCode: code?.toString(), - errorTitle: title, - errorMessage: message, - showRetry, - retryUrl, - showHome, - homeUrl, - ...layout, - }); -} - -// ============================================ -// Specific Error Pages -// ============================================ - -/** - * 404 Not Found page - */ -export function notFoundPage(options: Partial = {}): string { - return errorPage({ - code: 404, - title: 'Page Not Found', - message: "The page you're looking for doesn't exist or has been moved.", - showRetry: false, - ...options, - }); -} - -/** - * 403 Forbidden page - */ -export function forbiddenPage(options: Partial = {}): string { - return errorPage({ - code: 403, - title: 'Access Denied', - message: "You don't have permission to access this resource.", - showRetry: false, - ...options, - }); -} - -/** - * 401 Unauthorized page - */ -export function unauthorizedPage(options: Partial & { loginUrl?: string } = {}): string { - const { loginUrl = '/login', ...rest } = options; - - return errorPage({ - code: 401, - title: 'Authentication Required', - message: 'Please sign in to access this resource.', - showRetry: false, - showHome: false, - actions: ` -
- - Sign In - -
- `, - ...rest, - }); -} - -/** - * 500 Internal Server Error page - */ -export function serverErrorPage(options: Partial = {}): string { - return errorPage({ - code: 500, - title: 'Server Error', - message: "We're having trouble processing your request. Please try again later.", - showRetry: true, - ...options, - }); -} - -/** - * 503 Service Unavailable page - */ -export function maintenancePage(options: Partial & { estimatedTime?: string } = {}): string { - const { estimatedTime, ...rest } = options; - - const timeMessage = estimatedTime - ? `We expect to be back by ${escapeHtml(estimatedTime)}.` - : "We'll be back shortly."; - - return errorPage({ - code: 503, - title: 'Under Maintenance', - message: `We're currently performing scheduled maintenance. ${timeMessage}`, - showRetry: true, - showHome: false, - ...rest, - }); -} - -/** - * 429 Rate Limit page - */ -export function rateLimitPage(options: Partial & { retryAfter?: number } = {}): string { - const { retryAfter, ...rest } = options; - - const retryMessage = retryAfter - ? `Please wait ${retryAfter} seconds before trying again.` - : 'Please wait a moment before trying again.'; - - return errorPage({ - code: 429, - title: 'Too Many Requests', - message: `You've made too many requests. ${retryMessage}`, - showRetry: true, - showHome: true, - ...rest, - }); -} - -/** - * Offline page - */ -export function offlinePage(options: Partial = {}): string { - return errorPage({ - title: "You're Offline", - message: 'Please check your internet connection and try again.', - showRetry: true, - showHome: false, - ...options, - layout: { - ...options.layout, - }, - }); -} - -/** - * Session expired page - */ -export function sessionExpiredPage(options: Partial & { loginUrl?: string } = {}): string { - const { loginUrl = '/login', ...rest } = options; - - return errorPage({ - title: 'Session Expired', - message: 'Your session has expired. Please sign in again to continue.', - showRetry: false, - showHome: false, - actions: ` -
- - Sign In Again - -
- `, - ...rest, - }); -} - -// ============================================ -// OAuth Error Pages -// ============================================ - -/** - * OAuth error page options - */ -export interface OAuthErrorPageOptions extends Partial { - /** OAuth error code */ - errorCode?: string; - /** OAuth error description */ - errorDescription?: string; - /** Redirect URI */ - redirectUri?: string; - /** Client name */ - clientName?: string; -} - -/** - * OAuth error page - */ -export function oauthErrorPage(options: OAuthErrorPageOptions): string { - const { errorCode, errorDescription, redirectUri, clientName, ...rest } = options; - - // Map OAuth error codes to user-friendly messages - const errorMessages: Record = { - invalid_request: { - title: 'Invalid Request', - message: 'The authorization request is missing required parameters or is malformed.', - }, - unauthorized_client: { - title: 'Unauthorized Client', - message: 'The client is not authorized to request an authorization code.', - }, - access_denied: { - title: 'Access Denied', - message: 'The resource owner denied the authorization request.', - }, - unsupported_response_type: { - title: 'Unsupported Response Type', - message: 'The authorization server does not support the requested response type.', - }, - invalid_scope: { - title: 'Invalid Scope', - message: 'The requested scope is invalid, unknown, or malformed.', - }, - server_error: { - title: 'Server Error', - message: 'The authorization server encountered an unexpected error.', - }, - temporarily_unavailable: { - title: 'Temporarily Unavailable', - message: 'The authorization server is temporarily unavailable. Please try again later.', - }, - }; - - const errorInfo = - errorCode && errorMessages[errorCode] - ? errorMessages[errorCode] - : { title: 'Authorization Error', message: errorDescription || 'An error occurred during authorization.' }; - - const clientMessage = clientName ? ` while connecting to ${escapeHtml(clientName)}` : ''; - - const redirectAction = redirectUri - ? ` - - Return to ${clientName ? escapeHtml(clientName) : 'Application'} - - ` - : ''; - - return errorPage({ - title: errorInfo.title, - message: `${errorInfo.message}${clientMessage}`, - details: errorCode && errorDescription ? `Error: ${errorCode}\n${errorDescription}` : undefined, - showRetry: errorCode === 'server_error' || errorCode === 'temporarily_unavailable', - showHome: true, - actions: redirectAction ? `
${redirectAction}
` : undefined, - ...rest, - }); -} diff --git a/libs/ui/src/pages/index.ts b/libs/ui/src/pages/index.ts deleted file mode 100644 index 089c3e5d..00000000 --- a/libs/ui/src/pages/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Page Templates Module - * - * Minimal page templates that complement SDK auth flows. - * Login/Register flows are handled by @frontmcp/sdk auth system. - */ - -// Consent pages (OAuth/OpenID consent flows) -export { - type ClientInfo, - type UserInfo, - type ConsentPageOptions, - type ConsentSuccessOptions, - type ConsentDeniedOptions, - consentPage, - consentSuccessPage, - consentDeniedPage, -} from './consent'; - -// Error pages (generic error display) -export { - type ErrorPageOptions, - type OAuthErrorPageOptions, - errorPage, - notFoundPage, - forbiddenPage, - unauthorizedPage, - serverErrorPage, - maintenancePage, - rateLimitPage, - offlinePage, - sessionExpiredPage, - oauthErrorPage, -} from './error'; diff --git a/libs/ui/src/react/index.ts b/libs/ui/src/react/index.ts index da41fd38..f87504c7 100644 --- a/libs/ui/src/react/index.ts +++ b/libs/ui/src/react/index.ts @@ -111,6 +111,3 @@ export type { AlertProps, AlertRenderProps } from './Alert'; // Legacy web component types (for ref typing) export type { FmcpCard, FmcpBadge, FmcpButton, FmcpAlert, FmcpInput, FmcpSelect } from './types'; - -// Utilities (deprecated, use render/prerender instead) -export { renderChildrenToString, isBrowser, isServer } from './utils'; diff --git a/libs/ui/src/react/utils.ts b/libs/ui/src/react/utils.ts deleted file mode 100644 index b22d5185..00000000 --- a/libs/ui/src/react/utils.ts +++ /dev/null @@ -1,101 +0,0 @@ -/** - * @file utils.ts - * @description Utility functions for React wrapper components. - * - * Provides helpers for converting React children to HTML strings - * for SSR compatibility with FrontMCP web components. - * - * @module @frontmcp/ui/react/utils - */ - -import type { ReactNode } from 'react'; -import { escapeHtml } from '@frontmcp/uipack/utils'; - -// Lazy-load ReactDOMServer to avoid import errors in non-React environments -let cachedReactDOMServer: typeof import('react-dom/server') | null = null; - -/** - * Get ReactDOMServer lazily (only when needed) - */ -function getReactDOMServer(): typeof import('react-dom/server') | null { - if (!cachedReactDOMServer) { - try { - cachedReactDOMServer = require('react-dom/server'); - } catch { - return null; - } - } - return cachedReactDOMServer; -} - -/** - * Convert React children to an HTML string for SSR. - * - * - Strings are escaped via escapeHtml() - * - Numbers are converted to strings - * - ReactNode is rendered via ReactDOMServer.renderToStaticMarkup() - * - null/undefined return empty string - * - * @param children - React children to convert - * @returns HTML string representation - * - * @example - * ```tsx - * // String children - * renderChildrenToString('Hello') // 'Hello' (escaped) - * - * // React element children - * renderChildrenToString(
Test
) // '
Test
' - * - * // Mixed children - * renderChildrenToString(['Hello', World]) - * ``` - */ -export function renderChildrenToString(children: ReactNode): string { - // Handle null/undefined - if (children == null) { - return ''; - } - - // Handle string - escape HTML - if (typeof children === 'string') { - return escapeHtml(children); - } - - // Handle number - convert to string - if (typeof children === 'number') { - return String(children); - } - - // Handle boolean - React doesn't render true/false - if (typeof children === 'boolean') { - return ''; - } - - // Handle React elements and arrays - use ReactDOMServer - try { - const server = getReactDOMServer(); - if (server) { - return server.renderToStaticMarkup(children as React.ReactElement); - } - // Fallback for non-React environments - return String(children); - } catch { - // Fallback for non-React environments - return String(children); - } -} - -/** - * Check if we're running in a browser environment - */ -export function isBrowser(): boolean { - return typeof window !== 'undefined'; -} - -/** - * Check if we're running in a Node.js environment - */ -export function isServer(): boolean { - return typeof window === 'undefined'; -} diff --git a/libs/ui/src/renderers/index.ts b/libs/ui/src/renderers/index.ts index cc8f54d4..e811a400 100644 --- a/libs/ui/src/renderers/index.ts +++ b/libs/ui/src/renderers/index.ts @@ -38,14 +38,14 @@ export type { } from '@frontmcp/uipack/renderers'; // React Renderer (only available in @frontmcp/ui) -export { ReactRenderer, reactRenderer, buildHydrationScript } from './react.renderer'; +export { ReactRenderer, reactRenderer } from './react.renderer'; // React Renderer Adapter (client-side rendering) export { ReactRendererAdapter, createReactAdapter, loadReactAdapter } from './react.adapter'; // MDX Server Renderer (requires React, uses react-dom/server for SSR) // For client-side CDN-based MDX rendering, use MdxClientRenderer from @frontmcp/uipack -export { MdxRenderer, mdxRenderer, buildMdxHydrationScript } from './mdx.renderer'; +export { MdxRenderer, mdxRenderer } from './mdx.renderer'; // JSX Execution (requires React) // For transpilation only (without React), use transpileJsx from @frontmcp/uipack diff --git a/libs/ui/src/renderers/react.renderer.ts b/libs/ui/src/renderers/react.renderer.ts index fbdd4f17..d3567b1f 100644 --- a/libs/ui/src/renderers/react.renderer.ts +++ b/libs/ui/src/renderers/react.renderer.ts @@ -5,7 +5,15 @@ * - Imported React components (already transpiled) * - JSX string templates (transpiled at runtime with SWC) * - * Uses react-dom/server for SSR to HTML. + * Generates HTML for CLIENT-SIDE rendering (no SSR). + * React components are rendered in the browser, not on the server. + * + * @example + * ```typescript + * // The generated HTML includes React CDN scripts and a render script + * // The component is rendered client-side when the page loads + * const html = await reactRenderer.render(MyWidget, context); + * ``` */ import type { TemplateContext } from '@frontmcp/uipack/runtime'; @@ -18,14 +26,7 @@ import type { RuntimeScripts, ToolUIProps, } from '@frontmcp/uipack/renderers'; -import { - isReactComponent, - containsJsx, - hashString, - transpileJsx, - executeTranspiledCode, - transpileCache, -} from '@frontmcp/uipack/renderers'; +import { isReactComponent, containsJsx, hashString, transpileJsx } from '@frontmcp/uipack/renderers'; /** * Types this renderer can handle. @@ -60,7 +61,8 @@ console.warn('[FrontMCP] React hydration not available on this platform.'); * - Imported React components (FC or class) * - JSX string templates (transpiled with SWC at runtime) * - * Renders to HTML using react-dom/server's renderToString. + * Generates HTML for CLIENT-SIDE rendering. The component is rendered + * in the browser using React from CDN, not server-side rendered. * * @example Imported component * ```typescript @@ -88,14 +90,6 @@ export class ReactRenderer implements UIRenderer { readonly type = 'react' as const; readonly priority = 20; // Higher priority than HTML - /** - * Lazy-loaded React modules. - */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private React: any = null; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private ReactDOMServer: any = null; - /** * Check if this renderer can handle the given template. * @@ -146,76 +140,133 @@ export class ReactRenderer implements UIRenderer { } /** - * Render the template to HTML string using react-dom/server. + * Render the template to HTML for client-side rendering. + * + * Unlike SSR, this method generates HTML that will be rendered + * client-side by React in the browser. No server-side React required. + * + * The generated HTML includes: + * - A container div for the React root + * - The component code (transpiled if needed) + * - Props embedded as a data attribute + * - A render script that initializes the component */ async render( template: ReactTemplate, context: TemplateContext, - options?: RenderOptions, + _options?: RenderOptions, ): Promise { - // Ensure React is loaded - await this.loadReact(); + // Build props from context + const props: ToolUIProps = { + input: context.input, + output: context.output, + structuredContent: context.structuredContent, + helpers: context.helpers, + }; + + // Escape props for HTML embedding + const escapedProps = JSON.stringify(props) + .replace(/&/g, '&') + .replace(/'/g, ''') + .replace(//g, '>'); + + // Generate unique ID for this render + const rootId = `frontmcp-react-${hashString(Date.now().toString()).slice(0, 8)}`; - // Get the component function - // eslint-disable-next-line @typescript-eslint/no-explicit-any - let Component: (props: ToolUIProps) => any; + // Get the component code + let componentCode: string; + let componentName: string; if (typeof template === 'function') { - // Already a component function - Component = template; + // For imported components, we need the component to be registered + componentName = (template as { name?: string }).name || 'Component'; + + // Cache the component function for client-side access + componentCode = ` + // Component should be registered via window.__frontmcp_components['${componentName}'] + (function() { + if (!window.__frontmcp_components || !window.__frontmcp_components['${componentName}']) { + console.error('[FrontMCP] Component "${componentName}" not registered. Use buildHydrationScript() to register components.'); + } + })(); + `; } else if (typeof template === 'string') { - // Transpile and execute the JSX string + // Transpile JSX string to JavaScript const transpiled = await this.transpile(template); - // Check cache for the executed component - const cached = transpileCache.getByKey(`exec:${transpiled.hash}`); - if (cached) { - Component = cached.code as unknown as typeof Component; - } else { - // Execute the transpiled code to get the component - Component = await executeTranspiledCode(transpiled.code, { - // Provide any additional MDX components if specified - ...options?.mdxComponents, - }); - - // Cache the component function - transpileCache.setByKey(`exec:${transpiled.hash}`, { - code: Component as unknown as string, - hash: transpiled.hash, - cached: false, - }); - } + // Extract component name from transpiled code + const match = transpiled.code.match(/function\s+(\w+)/); + componentName = match?.[1] || 'Widget'; + + componentCode = transpiled.code; } else { throw new Error('Invalid template type for ReactRenderer'); } - // Build props from context - const props: ToolUIProps = { - input: context.input, - output: context.output, - structuredContent: context.structuredContent, - helpers: context.helpers, + // Generate HTML with client-side rendering script + const html = ` +
+
+ + + + + Loading... +
+
+ +`; - return html; + return html.trim(); } /** @@ -240,22 +291,6 @@ export class ReactRenderer implements UIRenderer { isInline: false, }; } - - /** - * Load React and ReactDOMServer modules. - */ - private async loadReact(): Promise { - if (this.React && this.ReactDOMServer) { - return; - } - - try { - this.React = await import('react'); - this.ReactDOMServer = await import('react-dom/server'); - } catch { - throw new Error('React is required for ReactRenderer. Install react and react-dom: npm install react react-dom'); - } - } } /** diff --git a/libs/ui/src/widgets/index.ts b/libs/ui/src/widgets/index.ts deleted file mode 100644 index 3ea3c631..00000000 --- a/libs/ui/src/widgets/index.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Widgets Module - * - * Specialized widgets for OpenAI App SDK and common UI patterns. - */ - -// Resource widgets -export { - type ResourceType, - type ResourceMeta, - type ResourceAction, - type ResourceOptions, - type ResourceListOptions, - type CodePreviewOptions, - type ImagePreviewOptions, - resourceWidget, - resourceList, - resourceItem, - codePreview, - imagePreview, -} from './resource'; - -// Progress widgets -export { - type ProgressBarOptions, - type Step, - type StepProgressOptions, - type CircularProgressOptions, - type StatusIndicatorOptions, - type SkeletonOptions, - progressBar, - stepProgress, - circularProgress, - statusIndicator, - skeleton, - contentSkeleton, -} from './progress'; diff --git a/libs/ui/src/widgets/progress.ts b/libs/ui/src/widgets/progress.ts deleted file mode 100644 index a15ec950..00000000 --- a/libs/ui/src/widgets/progress.ts +++ /dev/null @@ -1,501 +0,0 @@ -/** - * Progress and Status Widgets - * - * Components for displaying progress, loading states, and status information. - */ - -import { escapeHtml } from '../layouts/base'; - -// ============================================ -// Progress Bar -// ============================================ - -/** - * Progress bar options - */ -export interface ProgressBarOptions { - /** Progress value (0-100) */ - value: number; - /** Show percentage text */ - showLabel?: boolean; - /** Label position */ - labelPosition?: 'inside' | 'outside' | 'none'; - /** Size */ - size?: 'sm' | 'md' | 'lg'; - /** Color variant */ - variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info'; - /** Animated (striped) */ - animated?: boolean; - /** Additional CSS classes */ - className?: string; - /** Custom label */ - label?: string; -} - -/** - * Build a progress bar - */ -export function progressBar(options: ProgressBarOptions): string { - const { - value, - showLabel = true, - labelPosition = 'outside', - size = 'md', - variant = 'primary', - animated = false, - className = '', - label, - } = options; - - const clampedValue = Math.min(100, Math.max(0, value)); - - const sizeClasses: Record = { - sm: 'h-1.5', - md: 'h-2.5', - lg: 'h-4', - }; - - const variantClasses: Record = { - primary: 'bg-primary', - success: 'bg-success', - warning: 'bg-warning', - danger: 'bg-danger', - info: 'bg-blue-500', - }; - - const animatedClass = animated ? 'bg-stripes animate-stripes' : ''; - - const displayLabel = label || `${Math.round(clampedValue)}%`; - - const insideLabel = - labelPosition === 'inside' && size === 'lg' && clampedValue > 10 - ? `${escapeHtml( - displayLabel, - )}` - : ''; - - const outsideLabel = - showLabel && labelPosition === 'outside' - ? `
- ${label ? escapeHtml(label) : 'Progress'} - ${Math.round(clampedValue)}% -
` - : ''; - - return `
- ${outsideLabel} -
-
- ${insideLabel} -
-
- ${ - animated - ? `` - : '' - }`; -} - -// ============================================ -// Multi-Step Progress -// ============================================ - -/** - * Step definition - */ -export interface Step { - /** Step label */ - label: string; - /** Step description */ - description?: string; - /** Step status */ - status: 'completed' | 'current' | 'upcoming'; - /** Icon (optional) */ - icon?: string; - /** URL for clickable steps */ - href?: string; -} - -/** - * Multi-step progress options - */ -export interface StepProgressOptions { - /** Steps */ - steps: Step[]; - /** Orientation */ - orientation?: 'horizontal' | 'vertical'; - /** Connector style */ - connector?: 'line' | 'dashed' | 'none'; - /** Additional CSS classes */ - className?: string; -} - -/** - * Build a multi-step progress indicator - */ -export function stepProgress(options: StepProgressOptions): string { - const { steps, orientation = 'horizontal', connector = 'line', className = '' } = options; - - const getStepIcon = (step: Step, index: number): string => { - if (step.icon) return step.icon; - - if (step.status === 'completed') { - return ` - - `; - } - - return `${index + 1}`; - }; - - const getStepClasses = (status: Step['status']): { circle: string; text: string } => { - switch (status) { - case 'completed': - return { - circle: 'bg-success text-white', - text: 'text-text-primary', - }; - case 'current': - return { - circle: 'bg-primary text-white ring-4 ring-primary/20', - text: 'text-primary font-medium', - }; - case 'upcoming': - default: - return { - circle: 'bg-gray-200 text-gray-500', - text: 'text-text-secondary', - }; - } - }; - - if (orientation === 'vertical') { - const stepsHtml = steps - .map((step, index) => { - const classes = getStepClasses(step.status); - const isLast = index === steps.length - 1; - - const connectorHtml = - !isLast && connector !== 'none' - ? `
` - : ''; - - const stepContent = ` -
-
- ${getStepIcon(step, index)} -
-
-
${escapeHtml(step.label)}
- ${ - step.description - ? `

${escapeHtml(step.description)}

` - : '' - } -
-
- ${connectorHtml} - `; - - return step.href && step.status === 'completed' - ? `${stepContent}` - : `
${stepContent}
`; - }) - .join('\n'); - - return `
${stepsHtml}
`; - } - - // Horizontal orientation - const stepsHtml = steps - .map((step, index) => { - const classes = getStepClasses(step.status); - const isLast = index === steps.length - 1; - - const connectorHtml = - !isLast && connector !== 'none' - ? `
` - : ''; - - const stepHtml = ` -
-
- ${getStepIcon(step, index)} -
-
-
${escapeHtml(step.label)}
- ${ - step.description - ? `

${escapeHtml(step.description)}

` - : '' - } -
-
- `; - - const clickableStep = - step.href && step.status === 'completed' - ? `${stepHtml}` - : stepHtml; - - return `${clickableStep}${connectorHtml}`; - }) - .join('\n'); - - return `
${stepsHtml}
`; -} - -// ============================================ -// Circular Progress -// ============================================ - -/** - * Circular progress options - */ -export interface CircularProgressOptions { - /** Progress value (0-100) */ - value: number; - /** Size in pixels */ - size?: number; - /** Stroke width */ - strokeWidth?: number; - /** Color variant */ - variant?: 'primary' | 'success' | 'warning' | 'danger'; - /** Show percentage */ - showLabel?: boolean; - /** Custom label */ - label?: string; - /** Additional CSS classes */ - className?: string; -} - -/** - * Build a circular progress indicator - */ -export function circularProgress(options: CircularProgressOptions): string { - const { value, size = 80, strokeWidth = 8, variant = 'primary', showLabel = true, label, className = '' } = options; - - const clampedValue = Math.min(100, Math.max(0, value)); - const radius = (size - strokeWidth) / 2; - const circumference = radius * 2 * Math.PI; - const offset = circumference - (clampedValue / 100) * circumference; - - const variantColors: Record = { - primary: 'text-primary', - success: 'text-success', - warning: 'text-warning', - danger: 'text-danger', - }; - - const displayLabel = label || `${Math.round(clampedValue)}%`; - - return `
- - - - - - - ${ - showLabel - ? `${escapeHtml(displayLabel)}` - : '' - } -
`; -} - -// ============================================ -// Status Indicator -// ============================================ - -/** - * Status indicator options - */ -export interface StatusIndicatorOptions { - /** Status state */ - status: 'online' | 'offline' | 'busy' | 'away' | 'loading' | 'error' | 'success'; - /** Status label */ - label?: string; - /** Size */ - size?: 'sm' | 'md' | 'lg'; - /** Show pulse animation */ - pulse?: boolean; - /** Additional CSS classes */ - className?: string; -} - -/** - * Build a status indicator - */ -export function statusIndicator(options: StatusIndicatorOptions): string { - const { status, label, size = 'md', pulse = false, className = '' } = options; - - const sizeClasses: Record = { - sm: { dot: 'w-2 h-2', text: 'text-xs' }, - md: { dot: 'w-2.5 h-2.5', text: 'text-sm' }, - lg: { dot: 'w-3 h-3', text: 'text-base' }, - }; - - const statusClasses: Record = { - online: { color: 'bg-success', label: 'Online' }, - offline: { color: 'bg-gray-400', label: 'Offline' }, - busy: { color: 'bg-danger', label: 'Busy' }, - away: { color: 'bg-warning', label: 'Away' }, - loading: { color: 'bg-blue-500', label: 'Loading' }, - error: { color: 'bg-danger', label: 'Error' }, - success: { color: 'bg-success', label: 'Success' }, - }; - - const statusInfo = statusClasses[status]; - const sizeInfo = sizeClasses[size]; - const displayLabel = label || statusInfo.label; - - const pulseHtml = - pulse || status === 'loading' - ? `` - : ''; - - return `
- - ${pulseHtml} - - - ${displayLabel ? `${escapeHtml(displayLabel)}` : ''} -
`; -} - -// ============================================ -// Skeleton Loader -// ============================================ - -/** - * Skeleton loader options - */ -export interface SkeletonOptions { - /** Skeleton type */ - type?: 'text' | 'circle' | 'rect' | 'card'; - /** Width (CSS value) */ - width?: string; - /** Height (CSS value) */ - height?: string; - /** Number of text lines */ - lines?: number; - /** Animated */ - animated?: boolean; - /** Additional CSS classes */ - className?: string; -} - -/** - * Build a skeleton loader - */ -export function skeleton(options: SkeletonOptions = {}): string { - const { type = 'text', width, height, lines = 3, animated = true, className = '' } = options; - - const animateClass = animated ? 'animate-pulse' : ''; - const baseClass = `bg-gray-200 ${animateClass}`; - - switch (type) { - case 'circle': - return `
`; - - case 'rect': - return `
`; - - case 'card': - return `
-
-
-
-
-
-
`; - - case 'text': - default: { - const linesHtml = Array(lines) - .fill(0) - .map((_, i) => { - const lineWidth = i === lines - 1 ? '60%' : i === 0 ? '90%' : '80%'; - return `
`; - }) - .join('\n'); - - return `
- ${linesHtml} -
`; - } - } -} - -/** - * Build a content skeleton with avatar and text - */ -export function contentSkeleton(options: { animated?: boolean; className?: string } = {}): string { - const { animated = true, className = '' } = options; - const animateClass = animated ? 'animate-pulse' : ''; - - return `
-
-
-
-
-
-
`; -} diff --git a/libs/ui/src/widgets/resource.ts b/libs/ui/src/widgets/resource.ts deleted file mode 100644 index 30ff96ae..00000000 --- a/libs/ui/src/widgets/resource.ts +++ /dev/null @@ -1,572 +0,0 @@ -/** - * OpenAI App SDK Resource Widgets - * - * Components for displaying resources in OpenAI's App SDK format. - * These widgets are designed to work with OpenAI Canvas and similar interfaces. - */ - -import { escapeHtml } from '../layouts/base'; -import { card, type CardOptions } from '../components/card'; -import { badge, type BadgeVariant } from '../components/badge'; -import { button } from '../components/button'; - -// ============================================ -// Resource Types -// ============================================ - -/** - * Resource type identifiers - */ -export type ResourceType = - | 'document' - | 'image' - | 'code' - | 'data' - | 'file' - | 'link' - | 'user' - | 'event' - | 'message' - | 'task' - | 'custom'; - -/** - * Resource metadata - */ -export interface ResourceMeta { - /** Creation timestamp */ - createdAt?: string | Date; - /** Last modified timestamp */ - updatedAt?: string | Date; - /** Author/creator */ - author?: string; - /** File size (bytes) */ - size?: number; - /** MIME type */ - mimeType?: string; - /** Tags */ - tags?: string[]; - /** Custom metadata */ - [key: string]: unknown; -} - -/** - * Resource action - */ -export interface ResourceAction { - /** Action label */ - label: string; - /** Action icon */ - icon?: string; - /** Action URL */ - href?: string; - /** HTMX attributes */ - htmx?: { - get?: string; - post?: string; - delete?: string; - target?: string; - swap?: string; - confirm?: string; - }; - /** Variant */ - variant?: 'primary' | 'secondary' | 'danger' | 'ghost'; - /** Disabled */ - disabled?: boolean; -} - -/** - * Base resource options - */ -export interface ResourceOptions { - /** Resource type */ - type: ResourceType; - /** Resource title */ - title: string; - /** Resource description */ - description?: string; - /** Resource icon */ - icon?: string; - /** Resource thumbnail URL */ - thumbnail?: string; - /** Resource URL */ - url?: string; - /** Resource metadata */ - meta?: ResourceMeta; - /** Resource status */ - status?: { - label: string; - variant: BadgeVariant; - }; - /** Available actions */ - actions?: ResourceAction[]; - /** Additional CSS classes */ - className?: string; - /** Card options */ - cardOptions?: Partial; -} - -// ============================================ -// Resource Icons -// ============================================ - -const resourceIcons: Record = { - document: ` - - `, - image: ` - - `, - code: ` - - `, - data: ` - - `, - file: ` - - `, - link: ` - - `, - user: ` - - `, - event: ` - - `, - message: ` - - `, - task: ` - - `, - custom: ` - - `, -}; - -// ============================================ -// Utility Functions -// ============================================ - -/** - * Format file size - */ -function formatFileSize(bytes: number): string { - if (bytes === 0) return '0 B'; - const k = 1024; - const sizes = ['B', 'KB', 'MB', 'GB', 'TB']; - const i = Math.floor(Math.log(bytes) / Math.log(k)); - return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`; -} - -/** - * Format date - */ -function formatDate(date: string | Date): string { - const d = typeof date === 'string' ? new Date(date) : date; - return d.toLocaleDateString('en-US', { - year: 'numeric', - month: 'short', - day: 'numeric', - }); -} - -// ============================================ -// Resource Widget Builder -// ============================================ - -/** - * Build a resource widget - */ -export function resourceWidget(options: ResourceOptions): string { - const { - type, - title, - description, - icon, - thumbnail, - url, - meta, - status, - actions = [], - className = '', - cardOptions = {}, - } = options; - - // Icon/Thumbnail - const iconHtml = thumbnail - ? `
- ${escapeHtml(title)} -
` - : `
- ${icon || resourceIcons[type]} -
`; - - // Status badge - const statusHtml = status ? badge(status.label, { variant: status.variant, size: 'sm' }) : ''; - - // Metadata - const metaItems: string[] = []; - if (meta?.size) { - metaItems.push(formatFileSize(meta.size)); - } - if (meta?.mimeType) { - metaItems.push(meta.mimeType); - } - if (meta?.updatedAt) { - metaItems.push(`Updated ${formatDate(meta.updatedAt)}`); - } else if (meta?.createdAt) { - metaItems.push(`Created ${formatDate(meta.createdAt)}`); - } - if (meta?.author) { - metaItems.push(`by ${meta.author}`); - } - - const metaHtml = - metaItems.length > 0 ? `
${metaItems.join(' • ')}
` : ''; - - // Tags - const tagsHtml = - meta?.tags && meta.tags.length > 0 - ? `
- ${meta.tags.map((tag) => badge(tag, { variant: 'default', size: 'sm' })).join('')} -
` - : ''; - - // Actions - const actionsHtml = - actions.length > 0 - ? `
- ${actions - .map((action) => { - const variantMap: Record = { - primary: 'primary', - secondary: 'secondary', - danger: 'danger', - ghost: 'ghost', - }; - const variant = action.variant ? variantMap[action.variant] : 'ghost'; - - const htmxAttrs: string[] = []; - if (action.htmx) { - if (action.htmx.get) htmxAttrs.push(`hx-get="${escapeHtml(action.htmx.get)}"`); - if (action.htmx.post) htmxAttrs.push(`hx-post="${escapeHtml(action.htmx.post)}"`); - if (action.htmx.delete) htmxAttrs.push(`hx-delete="${escapeHtml(action.htmx.delete)}"`); - if (action.htmx.target) htmxAttrs.push(`hx-target="${escapeHtml(action.htmx.target)}"`); - if (action.htmx.swap) htmxAttrs.push(`hx-swap="${escapeHtml(action.htmx.swap)}"`); - if (action.htmx.confirm) htmxAttrs.push(`hx-confirm="${escapeHtml(action.htmx.confirm)}"`); - } - - return button(action.label, { - variant: variant as 'primary' | 'secondary' | 'danger' | 'ghost', - size: 'sm', - href: action.href, - disabled: action.disabled, - iconBefore: action.icon, - }); - }) - .join('')} -
` - : ''; - - // Content - const content = ` -
- ${iconHtml} -
-
-
- ${ - url - ? `${escapeHtml( - title, - )}` - : `

${escapeHtml(title)}

` - } - ${ - description - ? `

${escapeHtml(description)}

` - : '' - } - ${metaHtml} - ${tagsHtml} -
- ${statusHtml} -
- ${actionsHtml} -
-
- `; - - return card(content, { - variant: 'default', - size: 'md', - className: `resource-widget resource-${type} ${className}`, - ...cardOptions, - }); -} - -// ============================================ -// Resource List Widget -// ============================================ - -/** - * Resource list options - */ -export interface ResourceListOptions { - /** Resources to display */ - resources: ResourceOptions[]; - /** List title */ - title?: string; - /** Empty state message */ - emptyMessage?: string; - /** Grid or list layout */ - layout?: 'list' | 'grid'; - /** Grid columns */ - columns?: 1 | 2 | 3 | 4; - /** Additional CSS classes */ - className?: string; - /** Show load more button */ - showLoadMore?: boolean; - /** Load more URL */ - loadMoreUrl?: string; -} - -/** - * Build a resource list widget - */ -export function resourceList(options: ResourceListOptions): string { - const { - resources, - title, - emptyMessage = 'No resources found', - layout = 'list', - columns = 2, - className = '', - showLoadMore = false, - loadMoreUrl, - } = options; - - // Title - const titleHtml = title ? `

${escapeHtml(title)}

` : ''; - - // Empty state - if (resources.length === 0) { - return `
- ${titleHtml} -
- - - -

${escapeHtml(emptyMessage)}

-
-
`; - } - - // Layout classes - const layoutClasses = layout === 'grid' ? `grid grid-cols-1 md:grid-cols-${columns} gap-4` : 'space-y-4'; - - // Resources - const resourcesHtml = resources.map((r) => resourceWidget(r)).join('\n'); - - // Load more button - const loadMoreHtml = - showLoadMore && loadMoreUrl - ? `
- ${button('Load More', { - variant: 'outline', - href: loadMoreUrl, - })} -
` - : ''; - - return `
- ${titleHtml} -
- ${resourcesHtml} -
- ${loadMoreHtml} -
`; -} - -// ============================================ -// Compact Resource Item -// ============================================ - -/** - * Build a compact resource item (for inline display) - */ -export function resourceItem(options: Omit): string { - const { type, title, description, icon, url, meta, status } = options; - - const iconHtml = `
- ${icon || resourceIcons[type]} -
`; - - const statusHtml = status ? badge(status.label, { variant: status.variant, size: 'sm' }) : ''; - - const metaText = meta?.size ? formatFileSize(meta.size) : ''; - - const titleElement = url - ? `${escapeHtml(title)}` - : `${escapeHtml(title)}`; - - return `
- ${iconHtml} -
-
- ${titleElement} - ${statusHtml} -
- ${ - description || metaText - ? `

${escapeHtml(description || metaText)}

` - : '' - } -
-
`; -} - -// ============================================ -// Preview Widget -// ============================================ - -/** - * Code preview options - */ -export interface CodePreviewOptions { - /** Code content */ - code: string; - /** Language */ - language?: string; - /** Filename */ - filename?: string; - /** Show line numbers */ - lineNumbers?: boolean; - /** Max height */ - maxHeight?: string; - /** Copy button */ - showCopy?: boolean; - /** Additional CSS classes */ - className?: string; -} - -/** - * Build a code preview widget - */ -export function codePreview(options: CodePreviewOptions): string { - const { - code, - language = 'text', - filename, - lineNumbers = true, - maxHeight = '400px', - showCopy = true, - className = '', - } = options; - - const lines = code.split('\n'); - - const lineNumbersHtml = lineNumbers - ? `
- ${lines.map((_, i) => `
${i + 1}
`).join('')} -
` - : ''; - - const copyScript = showCopy - ? `` - : ''; - - const copyButton = showCopy - ? `` - : ''; - - return `
- ${ - filename || showCopy - ? ` -
- ${filename ? `${escapeHtml(filename)}` : ''} -
- ${language ? `${escapeHtml(language)}` : ''} - ${copyButton} -
-
- ` - : '' - } -
-
- ${lineNumbersHtml} - 
${escapeHtml(code)}
-
-
- ${copyScript} -
`; -} - -/** - * Image preview options - */ -export interface ImagePreviewOptions { - /** Image URL */ - src: string; - /** Alt text */ - alt: string; - /** Caption */ - caption?: string; - /** Max height */ - maxHeight?: string; - /** Clickable (opens in new tab) */ - clickable?: boolean; - /** Additional CSS classes */ - className?: string; -} - -/** - * Build an image preview widget - */ -export function imagePreview(options: ImagePreviewOptions): string { - const { src, alt, caption, maxHeight = '400px', clickable = true, className = '' } = options; - - const imageHtml = `${escapeHtml(alt)}`; - - const captionHtml = caption - ? `

${escapeHtml(caption)}

` - : ''; - - const content = clickable - ? `${imageHtml}` - : imageHtml; - - return `
- ${content} - ${captionHtml} -
`; -} diff --git a/libs/uipack/CLAUDE.md b/libs/uipack/CLAUDE.md index c799450e..f90c1e17 100644 --- a/libs/uipack/CLAUDE.md +++ b/libs/uipack/CLAUDE.md @@ -2,17 +2,17 @@ ## Overview -`@frontmcp/uipack` provides **bundling, build tools, HTML components, and platform adapters** for MCP UI development - all without requiring React. +`@frontmcp/uipack` provides **bundling, build tools, platform adapters, and theming** for MCP UI development - all without requiring React. This is the React-free core package. For React components and hooks, use `@frontmcp/ui`. **Key Principles:** - Zero React dependency -- Pure HTML string generation -- Zod schema validation for all component inputs - Platform-aware theming and CDN configuration -- HTMX support for dynamic interactions +- Build tools for Tool UI generation +- esbuild/SWC bundling utilities +- Zod schema validation ## Architecture @@ -20,17 +20,15 @@ This is the React-free core package. For React components and hooks, use `@front libs/uipack/src/ ├── adapters/ # Platform adapters (OpenAI, Claude, etc.) ├── base-template/ # Default HTML wrappers with polyfills -├── bridge/ # Multi-platform MCP bridge +├── bridge-runtime/ # MCP bridge runtime generation ├── build/ # Build-time API (buildToolUI, etc.) -├── bundler/ # esbuild/SWC bundling -├── components/ # HTML string components (button, card, etc.) +├── bundler/ # esbuild/SWC bundling, caching, sandbox ├── dependency/ # CDN resolution and import maps ├── handlebars/ # Handlebars template engine -├── layouts/ # Page layout templates -├── pages/ # Pre-built pages (consent, error) +├── preview/ # Preview server utilities ├── registry/ # Tool UI registry -├── renderers/ # HTML/MDX renderers -├── runtime/ # Runtime utilities (template helpers) +├── renderers/ # HTML/MDX client renderers +├── runtime/ # Runtime utilities (wrapper, sanitizer, CSP) ├── styles/ # Style variant definitions ├── theme/ # Theme system and CDN config ├── tool-template/ # Tool template utilities @@ -38,103 +36,52 @@ libs/uipack/src/ ├── typings/ # .d.ts type fetching ├── utils/ # Utilities (escapeHtml, safeStringify) ├── validation/ # Zod validation utilities -├── web-components/ # Custom HTML elements -├── widgets/ # OpenAI widget utilities └── index.ts # Main barrel exports ``` ## Package Split -| Package | Purpose | React Required | -| ------------------ | --------------------------------------------------------- | -------------- | -| `@frontmcp/uipack` | Bundling, build tools, HTML components, platform adapters | No | -| `@frontmcp/ui` | React components, hooks, SSR rendering | Yes | +| Package | Purpose | React Required | +| ------------------ | ------------------------------------------------------- | -------------- | +| `@frontmcp/uipack` | Bundling, build tools, platform adapters, theme | No | +| `@frontmcp/ui` | React components, hooks, SSR rendering, HTML components | Yes | ## Entry Points -| Path | Purpose | -| --------------------------------- | ------------------------------------- | -| `@frontmcp/uipack` | Main exports | -| `@frontmcp/uipack/adapters` | Platform adapters and meta builders | -| `@frontmcp/uipack/base-template` | Default HTML templates with polyfills | -| `@frontmcp/uipack/bridge` | MCP bridge for multiple platforms | -| `@frontmcp/uipack/build` | Build-time API | -| `@frontmcp/uipack/bundler` | esbuild/SWC bundling | -| `@frontmcp/uipack/components` | HTML string components | -| `@frontmcp/uipack/dependency` | CDN resolution | -| `@frontmcp/uipack/handlebars` | Handlebars integration | -| `@frontmcp/uipack/layouts` | Page layouts | -| `@frontmcp/uipack/pages` | Pre-built pages | -| `@frontmcp/uipack/registry` | Tool UI registry | -| `@frontmcp/uipack/renderers` | HTML/MDX renderers | -| `@frontmcp/uipack/runtime` | Runtime utilities | -| `@frontmcp/uipack/styles` | Style variants | -| `@frontmcp/uipack/theme` | Theme system | -| `@frontmcp/uipack/types` | Type definitions | -| `@frontmcp/uipack/utils` | Utilities | -| `@frontmcp/uipack/validation` | Zod validation | -| `@frontmcp/uipack/web-components` | Custom elements | -| `@frontmcp/uipack/widgets` | OpenAI widgets | - -## Component Development - -### 1. Create Schema First - -Every component must have a Zod schema with `.strict()` mode: +| Path | Purpose | +| -------------------------------- | ------------------------------------- | +| `@frontmcp/uipack` | Main exports | +| `@frontmcp/uipack/adapters` | Platform adapters and meta builders | +| `@frontmcp/uipack/base-template` | Default HTML templates with polyfills | +| `@frontmcp/uipack/build` | Build-time API (buildToolUI) | +| `@frontmcp/uipack/bundler` | esbuild/SWC bundling, cache, sandbox | +| `@frontmcp/uipack/dependency` | CDN resolution and import maps | +| `@frontmcp/uipack/handlebars` | Handlebars integration | +| `@frontmcp/uipack/preview` | Preview server utilities | +| `@frontmcp/uipack/registry` | Tool UI registry | +| `@frontmcp/uipack/renderers` | HTML/MDX client renderers | +| `@frontmcp/uipack/runtime` | Runtime utilities (wrapper, CSP) | +| `@frontmcp/uipack/styles` | Style variants | +| `@frontmcp/uipack/theme` | Theme system and platform config | +| `@frontmcp/uipack/types` | Type definitions | +| `@frontmcp/uipack/typings` | TypeScript definition fetching | +| `@frontmcp/uipack/utils` | Utilities | +| `@frontmcp/uipack/validation` | Zod validation | -```typescript -// component.schema.ts -import { z } from 'zod'; - -export const ComponentOptionsSchema = z - .object({ - variant: z.enum(['primary', 'secondary']).optional(), - size: z.enum(['sm', 'md', 'lg']).optional(), - disabled: z.boolean().optional(), - className: z.string().optional(), - htmx: z - .object({ - get: z.string().optional(), - post: z.string().optional(), - target: z.string().optional(), - swap: z.string().optional(), - }) - .strict() - .optional(), - }) - .strict(); // IMPORTANT: Reject unknown properties - -export type ComponentOptions = z.infer; -``` - -### 2. Validate Inputs in Component +## Build API ```typescript -// component.ts -import { validateOptions } from '../validation'; -import { ComponentOptionsSchema, type ComponentOptions } from './component.schema'; - -export function component(content: string, options: ComponentOptions = {}): string { - const validation = validateOptions(options, { - schema: ComponentOptionsSchema, - componentName: 'component', - }); - - if (!validation.success) { - return validation.error; // Returns styled error box HTML - } - - const { variant = 'primary', size = 'md' } = validation.data; - return `
${escapeHtml(content)}
`; -} -``` - -### 3. Always Escape User Content +import { buildToolUI, getOutputModeForClient } from '@frontmcp/uipack/build'; -```typescript -import { escapeHtml } from '../utils'; +// Build tool UI HTML +const html = await buildToolUI({ + template: '
{{output.data}}
', + context: { input: {}, output: { data: 'Hello' } }, + platform: 'openai', +}); -const html = `
${escapeHtml(content)}
`; +// Get output mode for client +const mode = getOutputModeForClient('openai'); ``` ## Theme System @@ -190,20 +137,56 @@ const scripts = buildCdnScriptsFromTheme(DEFAULT_THEME, { inline: false }); const inlineScripts = buildCdnScriptsFromTheme(DEFAULT_THEME, { inline: true }); ``` -## Build API +## Renderers + +### HTML Renderer ```typescript -import { buildToolUI, getOutputModeForClient } from '@frontmcp/uipack/build'; +import { htmlRenderer, HtmlRenderer } from '@frontmcp/uipack/renderers'; -// Build tool UI HTML -const html = await buildToolUI({ - template: '
{{output.data}}
', - context: { input: {}, output: { data: 'Hello' } }, - platform: 'openai', +// Render HTML template +const html = await htmlRenderer.render(template, context); +``` + +### MDX Client Renderer (CDN-based) + +```typescript +import { mdxClientRenderer, MdxClientRenderer } from '@frontmcp/uipack/renderers'; + +// Render MDX using CDN-based React (no bundled React) +const html = await mdxClientRenderer.render(mdxContent, context); +``` + +> **Note:** For server-side MDX rendering with bundled React, use `@frontmcp/ui/renderers`. + +## Bundler Utilities + +```typescript +import { BundlerCache, hashContent, createCacheKey, validateSource, executeCode } from '@frontmcp/uipack/bundler'; + +// Create cache for bundled results +const cache = new BundlerCache({ maxSize: 100, ttl: 60000 }); + +// Hash content for cache keys +const hash = hashContent(sourceCode); + +// Validate source code security +const violations = validateSource(code, policy); +``` + +## Validation + +```typescript +import { validateOptions, createErrorBox } from '@frontmcp/uipack/validation'; + +const result = validateOptions(options, { + schema: MySchema, + componentName: 'MyComponent', }); -// Get output mode for client -const mode = getOutputModeForClient('openai'); +if (!result.success) { + return result.error; // HTML error box +} ``` ## Testing Requirements @@ -241,6 +224,6 @@ Note: No React dependency! ## Related Packages -- **@frontmcp/ui** - React components, hooks, SSR rendering +- **@frontmcp/ui** - React components, hooks, SSR rendering, HTML components - **@frontmcp/sdk** - Core FrontMCP SDK - **@frontmcp/testing** - E2E testing utilities diff --git a/libs/uipack/src/build/builders/base-builder.ts b/libs/uipack/src/build/builders/base-builder.ts new file mode 100644 index 00000000..cad367b5 --- /dev/null +++ b/libs/uipack/src/build/builders/base-builder.ts @@ -0,0 +1,393 @@ +/** + * Base Builder + * + * Abstract base class for Static, Hybrid, and Inline builders. + * Provides common functionality for template detection, transpilation, + * and HTML generation. + * + * @packageDocumentation + */ + +import { transform } from 'esbuild'; +import type { + BuilderOptions, + CdnMode, + TemplateDetection, + TranspileOptions, + TranspileResult, +} from './types'; +import type { UITemplateConfig, TemplateContext, TemplateBuilderFn } from '../../types'; +import type { ThemeConfig } from '../../theme'; +import { DEFAULT_THEME, mergeThemes, buildThemeCss, buildFontPreconnect, buildFontStylesheets } from '../../theme'; +import { createTransformConfig, createExternalizedConfig, DEFAULT_EXTERNALS } from './esbuild-config'; +import { BRIDGE_SCRIPT_TAGS } from '../../bridge-runtime'; +import { HYBRID_DATA_PLACEHOLDER, HYBRID_INPUT_PLACEHOLDER } from '../hybrid-data'; +import { escapeHtml } from '../../utils'; + +// ============================================ +// Base Builder Class +// ============================================ + +/** + * Abstract base builder class. + * + * Provides common functionality: + * - Template type detection + * - Component transpilation via esbuild + * - Theme CSS generation + * - HTML document scaffolding + */ +export abstract class BaseBuilder { + /** + * CDN loading mode. + */ + protected readonly cdnMode: CdnMode; + + /** + * Whether to minify output. + */ + protected readonly minify: boolean; + + /** + * Theme configuration. + */ + protected readonly theme: ThemeConfig; + + /** + * Whether to include source maps. + */ + protected readonly sourceMaps: boolean; + + constructor(options: BuilderOptions = {}) { + this.cdnMode = options.cdnMode ?? 'cdn'; + this.minify = options.minify ?? false; + this.theme = options.theme ? mergeThemes(DEFAULT_THEME, options.theme) : DEFAULT_THEME; + this.sourceMaps = options.sourceMaps ?? false; + } + + // ============================================ + // Template Detection + // ============================================ + + /** + * Detect the type of a template. + * + * @param template - Template to detect + * @returns Detection result with type and renderer info + */ + protected detectTemplate( + template: UITemplateConfig['template'] + ): TemplateDetection { + // String template + if (typeof template === 'string') { + return { + type: 'html-string', + renderer: 'html', + needsTranspilation: false, + }; + } + + // Function template + if (typeof template === 'function') { + // Check if it's a React component (has $$typeof or returns JSX) + const funcStr = template.toString(); + if ( + funcStr.includes('jsx') || + funcStr.includes('createElement') || + funcStr.includes('React') || + (template as unknown as { $$typeof?: symbol }).$$typeof + ) { + return { + type: 'react-component', + renderer: 'react', + needsTranspilation: true, + }; + } + + // HTML builder function + return { + type: 'html-function', + renderer: 'html', + needsTranspilation: false, + }; + } + + // React element + if ( + template && + typeof template === 'object' && + (template as unknown as { $$typeof?: symbol }).$$typeof + ) { + return { + type: 'react-element', + renderer: 'react', + needsTranspilation: true, + }; + } + + // Default to HTML + return { + type: 'html-string', + renderer: 'html', + needsTranspilation: false, + }; + } + + // ============================================ + // Transpilation + // ============================================ + + /** + * Transpile a component using esbuild. + * + * @param source - Source code to transpile + * @param options - Transpile options + * @returns Transpile result + */ + protected async transpile( + source: string, + options: TranspileOptions = {} + ): Promise { + const externals = options.externals || DEFAULT_EXTERNALS; + const config = options.externals + ? createExternalizedConfig(options) + : createTransformConfig(options); + + const result = await transform(source, config); + + return { + code: result.code, + map: result.map, + size: Buffer.byteLength(result.code, 'utf8'), + externalizedImports: externals, + }; + } + + /** + * Render an HTML template. + * + * @param template - HTML template (string or function) + * @param context - Template context with input/output + * @returns Rendered HTML string + */ + protected renderHtmlTemplate( + template: string | TemplateBuilderFn, + context: TemplateContext + ): string { + if (typeof template === 'string') { + return template; + } + + return template(context); + } + + // ============================================ + // HTML Generation + // ============================================ + + /** + * Build the section of the HTML document. + * + * @param options - Head options + * @returns HTML head content + */ + protected buildHead(options: { + title: string; + includeBridge?: boolean; + includeCdn?: boolean; + includeTheme?: boolean; + customStyles?: string; + }): string { + const { + title, + includeBridge = true, + includeCdn = this.cdnMode === 'cdn', + includeTheme = true, + customStyles = '', + } = options; + + const parts: string[] = [ + '', + '', + '', + `${escapeHtml(title)}`, + ]; + + // Font preconnect and stylesheets + parts.push(buildFontPreconnect()); + parts.push(buildFontStylesheets({ inter: true })); + + // Theme CSS + if (includeTheme) { + const themeCss = buildThemeCss(this.theme); + const customCss = this.theme.customCss || ''; + parts.push(` + + `); + } + + // Custom styles + if (customStyles) { + parts.push(``); + } + + // CDN scripts (Tailwind, etc.) + if (includeCdn) { + parts.push(''); + } + + // Bridge runtime + if (includeBridge) { + parts.push(BRIDGE_SCRIPT_TAGS.universal); + } + + parts.push(''); + + return parts.join('\n'); + } + + /** + * Build data injection script. + * + * @param options - Injection options + * @returns Script tag with data injection + */ + protected buildDataInjectionScript(options: { + toolName: string; + input?: unknown; + output?: unknown; + usePlaceholders?: boolean; + }): string { + const { toolName, input, output, usePlaceholders = false } = options; + + if (usePlaceholders) { + return ` + + `; + } + + return ` + + `; + } + + /** + * Wrap content in a complete HTML document. + * + * @param options - Wrap options + * @returns Complete HTML document + */ + protected wrapInHtmlDocument(options: { + head: string; + body: string; + bodyClass?: string; + }): string { + const { head, body, bodyClass = '' } = options; + + return ` + +${head} + +${body} + +`; + } + + // ============================================ + // Utility Methods + // ============================================ + + /** + * Calculate content hash. + * + * @param content - Content to hash + * @returns Hash string + */ + protected async calculateHash(content: string): Promise { + if (typeof crypto !== 'undefined' && crypto.subtle) { + const encoder = new TextEncoder(); + const data = encoder.encode(content); + const hashBuffer = await crypto.subtle.digest('SHA-256', data); + const hashArray = Array.from(new Uint8Array(hashBuffer)); + return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('').slice(0, 16); + } + + // Simple fallback hash + let hash = 0; + for (let i = 0; i < content.length; i++) { + const char = content.charCodeAt(i); + hash = (hash << 5) - hash + char; + hash = hash & hash; + } + return Math.abs(hash).toString(16).padStart(8, '0'); + } + + /** + * Estimate gzipped size. + * + * @param content - Content to estimate + * @returns Estimated gzipped size in bytes + */ + protected estimateGzipSize(content: string): number { + // Rough estimate: gzip typically achieves 70-90% compression on HTML + return Math.round(Buffer.byteLength(content, 'utf8') * 0.25); + } + + /** + * Create template context. + * + * @param input - Tool input + * @param output - Tool output + * @returns Template context + */ + protected createContext( + input: In, + output: Out + ): TemplateContext { + return { + input, + output, + helpers: { + escapeHtml, + formatDate: (date: Date | string, format?: string): string => { + const d = typeof date === 'string' ? new Date(date) : date; + if (isNaN(d.getTime())) return String(date); + if (format === 'iso') return d.toISOString(); + if (format === 'time') return d.toLocaleTimeString(); + if (format === 'datetime') return d.toLocaleString(); + return d.toLocaleDateString(); + }, + formatCurrency: (amount: number, currency = 'USD'): string => { + return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount); + }, + uniqueId: (prefix = 'mcp'): string => { + return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`; + }, + jsonEmbed: (data: unknown): string => { + const json = JSON.stringify(data); + if (json === undefined) return 'undefined'; + return json + .replace(//g, '\\u003e') + .replace(/&/g, '\\u0026') + .replace(/'/g, '\\u0027'); + }, + }, + }; + } +} diff --git a/libs/uipack/src/build/builders/esbuild-config.ts b/libs/uipack/src/build/builders/esbuild-config.ts new file mode 100644 index 00000000..b898a430 --- /dev/null +++ b/libs/uipack/src/build/builders/esbuild-config.ts @@ -0,0 +1,222 @@ +/** + * esbuild Configuration for Builders + * + * Shared esbuild configuration for component transpilation. + * Supports externalization for hybrid mode and inline bundling. + * + * @packageDocumentation + */ + +import type { TransformOptions } from 'esbuild'; +import type { TranspileOptions } from './types'; + +// ============================================ +// Default Externals +// ============================================ + +/** + * Default packages to externalize in hybrid mode. + * These packages are loaded from the vendor shell's CDN scripts. + */ +export const DEFAULT_EXTERNALS = [ + 'react', + 'react-dom', + 'react/jsx-runtime', + 'react/jsx-dev-runtime', + '@frontmcp/ui', + '@frontmcp/ui/*', +]; + +/** + * Global variable mappings for externalized packages. + * Used to create namespace polyfills in the component chunk. + */ +export const EXTERNAL_GLOBALS: Record = { + 'react': 'React', + 'react-dom': 'ReactDOM', + 'react/jsx-runtime': 'jsxRuntime', + 'react/jsx-dev-runtime': 'jsxRuntime', + '@frontmcp/ui': 'FrontMcpUI', +}; + +// ============================================ +// Transform Configuration +// ============================================ + +/** + * Create esbuild transform options for component transpilation. + * + * @param options - Transpile options + * @returns esbuild transform options + */ +export function createTransformConfig(options: TranspileOptions = {}): TransformOptions { + const { + format = 'esm', + target = 'es2020', + minify = false, + jsxImportSource = 'react', + } = options; + + return { + loader: 'tsx', + format, + target, + minify, + treeShaking: true, + jsx: 'automatic', + jsxImportSource, + sourcemap: options.minify ? false : 'inline', + }; +} + +/** + * Create esbuild transform options for externalized component chunks. + * + * This configuration produces code that: + * 1. Imports React/deps from external globals + * 2. Uses ESM format for dynamic import + * 3. Has all FrontMCP UI components externalized + * + * @param options - Transpile options + * @returns esbuild transform options with externalization + */ +export function createExternalizedConfig(options: TranspileOptions = {}): TransformOptions { + const baseConfig = createTransformConfig({ + ...options, + format: 'esm', + }); + + return { + ...baseConfig, + // Add banner to define external namespace objects + banner: createExternalsBanner(options.externals || DEFAULT_EXTERNALS), + }; +} + +/** + * Create JavaScript banner that defines external namespace objects. + * + * This banner is prepended to the transpiled code and provides + * the global variables that the externalized imports reference. + * + * @param externals - List of external package names + * @returns JavaScript banner code + */ +export function createExternalsBanner(externals: string[]): string { + const lines: string[] = [ + '// Externalized dependencies - loaded from shell globals', + ]; + + for (const pkg of externals) { + const globalName = EXTERNAL_GLOBALS[pkg]; + if (globalName) { + // Create namespace object that references the global + const safeName = pkg.replace(/[^a-zA-Z0-9]/g, '_'); + lines.push(`const __external_${safeName} = window.${globalName};`); + } + } + + return lines.join('\n'); +} + +/** + * Create inline bundle configuration. + * + * This configuration bundles everything together for inline mode, + * including React and all dependencies. + * + * @param options - Transpile options + * @returns esbuild transform options for inline bundling + */ +export function createInlineConfig(options: TranspileOptions = {}): TransformOptions { + return createTransformConfig({ + ...options, + format: 'iife', + minify: options.minify ?? true, + }); +} + +// ============================================ +// CDN Script Generation +// ============================================ + +/** + * CDN URLs for external dependencies. + */ +export const CDN_URLS = { + react: 'https://esm.sh/react@19', + reactDom: 'https://esm.sh/react-dom@19', + reactJsxRuntime: 'https://esm.sh/react@19/jsx-runtime', + frontmcpUI: 'https://esm.sh/@frontmcp/ui', + tailwind: 'https://cdn.tailwindcss.com', +} as const; + +/** + * Cloudflare CDN URLs (for Claude compatibility). + */ +export const CLOUDFLARE_CDN_URLS = { + react: 'https://cdnjs.cloudflare.com/ajax/libs/react/19.0.0/umd/react.production.min.js', + reactDom: 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/19.0.0/umd/react-dom.production.min.js', + tailwind: 'https://cdn.tailwindcss.com', +} as const; + +/** + * Generate CDN script tags for the vendor shell. + * + * @param useCloudflare - Use Cloudflare CDN (for Claude) + * @returns HTML script tags + */ +export function generateCdnScriptTags(useCloudflare = false): string { + const urls = useCloudflare ? CLOUDFLARE_CDN_URLS : CDN_URLS; + + if (useCloudflare) { + // Cloudflare uses UMD builds + return ` + + + + `; + } + + // esm.sh uses ES modules with import map + return ` + + + `; +} + +/** + * Generate global namespace setup script. + * + * This script exposes React and other modules as globals + * for the externalized component chunks to use. + * + * @returns JavaScript code to set up globals + */ +export function generateGlobalsSetupScript(): string { + return ` + + `; +} diff --git a/libs/uipack/src/build/builders/hybrid-builder.ts b/libs/uipack/src/build/builders/hybrid-builder.ts new file mode 100644 index 00000000..7c93d224 --- /dev/null +++ b/libs/uipack/src/build/builders/hybrid-builder.ts @@ -0,0 +1,401 @@ +/** + * Hybrid Builder + * + * Builds vendor shell (cached, shared) + component chunks (per-tool). + * Optimal for OpenAI where shell is fetched once via resource URI and cached. + * + * Build Phase: + * - Vendor shell: React, Bridge, UI components from CDN + * - Component chunks: Transpiled with externalized dependencies + * + * Preview Phase: + * - OpenAI: Shell via resource://, component in tool response + * - Claude: Combine shell + component (inline delivery) + * - Generic: Same as OpenAI with frontmcp namespace + * + * @packageDocumentation + */ + +import { BaseBuilder } from './base-builder'; +import type { + BuilderOptions, + BuildToolOptions, + HybridBuildResult, + IHybridBuilder, +} from './types'; +import type { UITemplateConfig, TemplateBuilderFn } from '../../types'; +import { + generateCdnScriptTags, + generateGlobalsSetupScript, + DEFAULT_EXTERNALS, +} from './esbuild-config'; + +// ============================================ +// Hybrid Builder +// ============================================ + +/** + * Hybrid builder for creating vendor shells and component chunks. + * + * @example + * ```typescript + * const builder = new HybridBuilder({ cdnMode: 'cdn' }); + * + * // Build vendor shell (cached, shared across all tools) + * const vendorShell = await builder.buildVendorShell(); + * + * // Build component chunk per tool + * const componentChunk = await builder.buildComponentChunk(WeatherWidget); + * + * // For Claude, combine into inline HTML + * const html = builder.combineForInline(vendorShell, componentChunk, input, output); + * ``` + */ +export class HybridBuilder extends BaseBuilder implements IHybridBuilder { + readonly mode = 'hybrid' as const; + + /** + * Cached vendor shell. + */ + private vendorShellCache: string | null = null; + + constructor(options: BuilderOptions = {}) { + super(options); + } + + /** + * Build a hybrid result with vendor shell and component chunk. + * + * @param options - Build options + * @returns Hybrid build result + */ + async build( + options: BuildToolOptions + ): Promise { + const startTime = Date.now(); + const { template, toolName } = options; + + // Build or retrieve cached vendor shell + const vendorShell = await this.buildVendorShell(); + + // Build component chunk for this specific tool + const componentChunk = await this.buildComponentChunk(template.template); + + // Generate resource URI for the shell + const shellResourceUri = `resource://widget/${toolName}/shell`; + + // Calculate metrics + const combinedHash = await this.calculateHash(vendorShell + componentChunk); + const shellSize = Buffer.byteLength(vendorShell, 'utf8'); + const componentSize = Buffer.byteLength(componentChunk, 'utf8'); + + // Detect renderer type + const detection = this.detectTemplate(template.template); + + return { + mode: 'hybrid', + vendorShell, + componentChunk, + shellResourceUri, + hash: combinedHash, + shellSize, + componentSize, + rendererType: detection.renderer, + buildTime: new Date(startTime).toISOString(), + }; + } + + /** + * Build the vendor shell (shared across all tools). + * + * The vendor shell contains: + * - React/ReactDOM from CDN + * - FrontMCP Bridge runtime + * - Theme CSS and fonts + * - Component injection point + * + * @returns Vendor shell HTML + */ + async buildVendorShell(): Promise { + // Return cached shell if available + if (this.vendorShellCache) { + return this.vendorShellCache; + } + + // Build head with all dependencies + const head = this.buildHead({ + title: 'FrontMCP Widget', + includeBridge: true, + includeCdn: this.cdnMode === 'cdn', + includeTheme: true, + }); + + // CDN scripts for React + const cdnScripts = this.cdnMode === 'cdn' + ? generateCdnScriptTags(false) + generateGlobalsSetupScript() + : ''; + + // Component injection point + const body = ` + + ${cdnScripts} +
+
+ +
+
+ + + + +

Loading component...

+
+
+
+
+ + + + `; + + const html = this.wrapInHtmlDocument({ + head, + body, + bodyClass: 'antialiased', + }); + + // Cache the shell + this.vendorShellCache = html; + + return html; + } + + /** + * Build a component chunk for a specific template. + * + * The component chunk is transpiled with externalized dependencies + * (React, etc.) that are provided by the vendor shell. + * + * @param template - Component template + * @returns Transpiled component code + */ + async buildComponentChunk( + template: UITemplateConfig['template'] + ): Promise { + const detection = this.detectTemplate(template); + + if (detection.renderer === 'html') { + // For HTML templates, create a simple wrapper component + return this.wrapHtmlAsComponent(template as string | TemplateBuilderFn); + } + + // For React templates, we need to serialize and transpile + // This is a simplified approach - full implementation would use bundling + if (typeof template === 'function') { + return this.transpileReactComponent(template); + } + + // Fallback for React elements + return ` + // Externalized React component + const React = window.React; + + export default function Widget({ input, output }) { + return React.createElement('div', { + className: 'p-4', + }, React.createElement('pre', null, JSON.stringify(output, null, 2))); + } + `; + } + + /** + * Combine shell and component for Claude/inline delivery. + * + * @param shell - Vendor shell HTML + * @param component - Component chunk code + * @param input - Tool input data + * @param output - Tool output data + * @returns Complete HTML with embedded component and data + */ + combineForInline( + shell: string, + component: string, + input: unknown, + output: unknown + ): string { + // Inject data + let result = shell + .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`) + .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`) + .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`); + + // Inject component code directly + const componentInjection = ` + + `; + + // Insert before + result = result.replace('', componentInjection + '\n'); + + return result; + } + + // ============================================ + // Private Methods + // ============================================ + + /** + * Wrap HTML template as a React component. + */ + private wrapHtmlAsComponent( + template: string | TemplateBuilderFn + ): string { + if (typeof template === 'string') { + return ` + // HTML template wrapped as component + const React = window.React; + + export default function Widget({ input, output }) { + return React.createElement('div', { + dangerouslySetInnerHTML: { __html: ${JSON.stringify(template)} } + }); + } + `; + } + + // For function templates, we need to execute them + return ` + // HTML function template wrapped as component + const React = window.React; + + export default function Widget({ input, output }) { + const html = (${template.toString()})({ input, output, helpers: {} }); + return React.createElement('div', { + dangerouslySetInnerHTML: { __html: html } + }); + } + `; + } + + /** + * Transpile a React component function. + */ + private async transpileReactComponent(component: Function): Promise { + // Serialize the function + const funcString = component.toString(); + const componentName = component.name || 'Widget'; + + // Create a module that exports the component + const source = ` + // Externalized React component + const React = window.React; + + const ${componentName} = ${funcString}; + + export default ${componentName}; + export { ${componentName} as Widget, ${componentName} as Component }; + `; + + // Transpile with esbuild + try { + const result = await this.transpile(source, { + externals: DEFAULT_EXTERNALS, + format: 'esm', + minify: this.minify, + }); + return result.code; + } catch (error) { + // Fallback if transpilation fails + console.warn('[HybridBuilder] Transpilation failed, using source directly:', error); + return source; + } + } +} diff --git a/libs/uipack/src/build/builders/index.ts b/libs/uipack/src/build/builders/index.ts new file mode 100644 index 00000000..48095928 --- /dev/null +++ b/libs/uipack/src/build/builders/index.ts @@ -0,0 +1,50 @@ +/** + * UI Builders + * + * Three build modes for creating universal HTML documents: + * - Static: Full HTML with placeholders, inject data at preview time + * - Hybrid: Vendor shell + component chunks, optimal for OpenAI + * - Inline: Minimal loader + full HTML per request, best for development + * + * @packageDocumentation + */ + +// Types +export type { + BuildMode, + CdnMode, + BuilderOptions, + BuildToolOptions, + StaticBuildResult, + HybridBuildResult, + InlineBuildResult, + BuilderResult, + Builder, + IStaticBuilder, + IHybridBuilder, + IInlineBuilder, + TemplateType, + TemplateDetection, + TranspileOptions, + TranspileResult, +} from './types'; + +// Builders +export { BaseBuilder } from './base-builder'; +export { StaticBuilder } from './static-builder'; +export { HybridBuilder } from './hybrid-builder'; +export { InlineBuilder } from './inline-builder'; + +// esbuild configuration utilities +export { + DEFAULT_EXTERNALS, + EXTERNAL_GLOBALS, + CDN_URLS, + CLOUDFLARE_CDN_URLS, + createTransformConfig, + createExternalizedConfig, + createInlineConfig, + createExternalsBanner, + generateCdnScriptTags, + generateGlobalsSetupScript, +} from './esbuild-config'; diff --git a/libs/uipack/src/build/builders/inline-builder.ts b/libs/uipack/src/build/builders/inline-builder.ts new file mode 100644 index 00000000..98e280aa --- /dev/null +++ b/libs/uipack/src/build/builders/inline-builder.ts @@ -0,0 +1,384 @@ +/** + * Inline Builder + * + * Builds minimal loader shell (for discovery) + full HTML per request. + * Best for development/review where each request gets complete widget. + * + * Build Phase: + * - Minimal loader with bridge and loading indicator + * - Injector script that waits for full HTML in tool response + * + * Preview Phase: + * - OpenAI: Loader at discovery, full HTML replaces document on tool call + * - Claude: Full HTML returned directly (no loader needed) + * - Generic: Same as OpenAI with frontmcp namespace + * + * @packageDocumentation + */ + +import { BaseBuilder } from './base-builder'; +import type { + BuilderOptions, + BuildToolOptions, + InlineBuildResult, + IInlineBuilder, +} from './types'; +import type { UITemplateConfig, TemplateBuilderFn } from '../../types'; +import { generateCdnScriptTags, generateGlobalsSetupScript } from './esbuild-config'; + +// ============================================ +// Inline Builder +// ============================================ + +/** + * Inline builder for development and review scenarios. + * + * @example + * ```typescript + * const builder = new InlineBuilder({ cdnMode: 'cdn' }); + * + * // Get loader for tools/list + * const loader = builder.buildLoader('get_weather'); + * + * // Build full widget for each tool call + * const fullHtml = await builder.buildFullWidget( + * WeatherWidget, + * { location: 'NYC' }, + * { temperature: 72 } + * ); + * ``` + */ +export class InlineBuilder extends BaseBuilder implements IInlineBuilder { + readonly mode = 'inline' as const; + + constructor(options: BuilderOptions = {}) { + super(options); + } + + /** + * Build an inline result with loader and full widget generator. + * + * @param options - Build options + * @returns Inline build result + */ + async build( + options: BuildToolOptions + ): Promise { + const startTime = Date.now(); + const { template, toolName } = options; + + // Build the loader shell + const loaderShell = this.buildLoader(toolName); + + // Create the full widget builder function + // Cast input/output to the template types - they're unknown at call time + // but the template expects the correct types for rendering + const buildFullWidget = async (input: unknown, output: unknown): Promise => { + return this.buildFullWidget(template.template, input as In, output as Out); + }; + + // Calculate metrics + const hash = await this.calculateHash(loaderShell); + const loaderSize = Buffer.byteLength(loaderShell, 'utf8'); + + // Detect renderer type + const detection = this.detectTemplate(template.template); + + return { + mode: 'inline', + loaderShell, + buildFullWidget, + hash, + loaderSize, + rendererType: detection.renderer, + buildTime: new Date(startTime).toISOString(), + }; + } + + /** + * Build the minimal loader shell. + * + * The loader contains: + * - FrontMCP Bridge runtime + * - Loading indicator + * - Injector script that replaces document on tool response + * + * @param toolName - Name of the tool + * @returns Loader HTML + */ + buildLoader(toolName: string): string { + const head = this.buildHead({ + title: `${toolName} Widget`, + includeBridge: true, + includeCdn: this.cdnMode === 'cdn', + includeTheme: true, + }); + + const body = ` + + +
+
+ + + + +

Loading widget...

+
+
+ + + + + + `; + + return this.wrapInHtmlDocument({ + head, + body, + bodyClass: 'antialiased', + }); + } + + /** + * Build full widget HTML with embedded data. + * + * @param template - Component template + * @param input - Tool input data + * @param output - Tool output data + * @returns Complete HTML with all dependencies and data + */ + async buildFullWidget( + template: UITemplateConfig['template'], + input: In, + output: Out + ): Promise { + const detection = this.detectTemplate(template); + + // Build head with all dependencies + const head = this.buildHead({ + title: 'FrontMCP Widget', + includeBridge: true, + includeCdn: this.cdnMode === 'cdn', + includeTheme: true, + }); + + // Build data injection + const dataScript = this.buildDataInjectionScript({ + toolName: 'widget', + input, + output, + usePlaceholders: false, + }); + + // Build content based on template type + let content: string; + + if (detection.renderer === 'html') { + // HTML template - render directly + const context = this.createContext(input, output); + + if (typeof template === 'function') { + content = (template as TemplateBuilderFn)(context); + } else { + content = template as string; + } + + content = ` +
+ ${content} +
+ `; + } else { + // React template - build client-side rendering + content = this.buildReactContent(template, input, output); + } + + // Assemble body + const body = ` + ${dataScript} + ${detection.renderer === 'react' ? this.buildReactScripts() : ''} + ${content} + `; + + const html = this.wrapInHtmlDocument({ + head, + body, + bodyClass: 'antialiased', + }); + + return this.minify ? this.minifyHtml(html) : html; + } + + // ============================================ + // Private Methods + // ============================================ + + /** + * Build React scripts for client-side rendering. + */ + private buildReactScripts(): string { + if (this.cdnMode === 'cdn') { + return generateCdnScriptTags(false) + generateGlobalsSetupScript(); + } + + // For inline mode, we'd bundle React + return ` + + `; + } + + /** + * Build React content with client-side rendering. + */ + private buildReactContent( + _template: UITemplateConfig['template'], + _input: In, + _output: Out + ): string { + return ` +
+
+
+
+

Initializing...

+
+
+
+
+ + + `; + } + + /** + * Simple HTML minification. + */ + private minifyHtml(html: string): string { + return html + .replace(/>\s+<') + .replace(/\s{2,}/g, ' ') + .trim(); + } +} diff --git a/libs/uipack/src/build/builders/static-builder.ts b/libs/uipack/src/build/builders/static-builder.ts new file mode 100644 index 00000000..d6fc9ee8 --- /dev/null +++ b/libs/uipack/src/build/builders/static-builder.ts @@ -0,0 +1,294 @@ +/** + * Static Builder + * + * Builds complete HTML documents with placeholders for data injection. + * The shell is cached and reused; only data changes per request. + * + * Build Phase: + * - Full HTML with theme, CDN scripts, bridge runtime + * - Component code (transpiled if React/MDX) + * - Placeholders for input/output data + * + * Preview Phase: + * - Replace placeholders with actual data + * - Platform-specific handling (OpenAI, Claude, Generic) + * + * @packageDocumentation + */ + +import { BaseBuilder } from './base-builder'; +import type { + BuilderOptions, + BuildToolOptions, + StaticBuildResult, + IStaticBuilder, +} from './types'; +import type { UITemplateConfig, TemplateBuilderFn } from '../../types'; +import { injectHybridDataFull, HYBRID_DATA_PLACEHOLDER, HYBRID_INPUT_PLACEHOLDER } from '../hybrid-data'; +import { generateCdnScriptTags, generateGlobalsSetupScript } from './esbuild-config'; + +// ============================================ +// Static Builder +// ============================================ + +/** + * Static builder for creating cached HTML shells with placeholders. + * + * @example + * ```typescript + * const builder = new StaticBuilder({ cdnMode: 'cdn' }); + * + * // Build once (cached) + * const result = await builder.build({ + * template: WeatherWidget, + * toolName: 'get_weather', + * }); + * + * // Inject data per request (fast) + * const html = builder.injectData(result.html, input, output); + * ``` + */ +export class StaticBuilder extends BaseBuilder implements IStaticBuilder { + readonly mode = 'static' as const; + + constructor(options: BuilderOptions = {}) { + super(options); + } + + /** + * Build a static HTML shell with placeholders. + * + * @param options - Build options + * @returns Static build result + */ + async build( + options: BuildToolOptions + ): Promise { + const startTime = Date.now(); + const { template, toolName, title = `${toolName} Widget` } = options; + + // Detect template type + const detection = this.detectTemplate(template.template); + + // Render or transpile based on type + let bodyContent: string; + + if (detection.renderer === 'html') { + // HTML templates - render directly with placeholder context + const context = this.createContext( + options.sampleInput ?? ({} as In), + options.sampleOutput ?? ({} as Out) + ); + + if (typeof template.template === 'function') { + bodyContent = (template.template as TemplateBuilderFn)(context); + } else { + bodyContent = template.template as string; + } + + // Wrap in a container for client-side updates + bodyContent = ` +
+ ${bodyContent} +
+ `; + } else { + // React/MDX templates - build client-side rendering shell + bodyContent = this.buildReactShell(template, toolName); + } + + // Build head with all dependencies + const head = this.buildHead({ + title, + includeBridge: true, + includeCdn: this.cdnMode === 'cdn', + includeTheme: true, + }); + + // Build data injection with placeholders + const dataScript = this.buildDataInjectionScript({ + toolName, + usePlaceholders: true, + }); + + // Additional scripts for React + let additionalScripts = ''; + if (detection.renderer === 'react') { + additionalScripts = this.cdnMode === 'cdn' + ? generateCdnScriptTags(false) + generateGlobalsSetupScript() + : this.buildInlineReactRuntime(); + } + + // Assemble body + const body = ` + ${dataScript} + ${additionalScripts} + ${bodyContent} + `; + + // Create complete HTML document + const html = this.wrapInHtmlDocument({ + head, + body, + bodyClass: 'antialiased', + }); + + // Optionally minify + const finalHtml = this.minify ? this.minifyHtml(html) : html; + + // Calculate metrics + const hash = await this.calculateHash(finalHtml); + const size = Buffer.byteLength(finalHtml, 'utf8'); + const gzipSize = this.estimateGzipSize(finalHtml); + + return { + mode: 'static', + html: finalHtml, + hash, + size, + gzipSize, + placeholders: { + hasOutput: finalHtml.includes(HYBRID_DATA_PLACEHOLDER), + hasInput: finalHtml.includes(HYBRID_INPUT_PLACEHOLDER), + }, + rendererType: detection.renderer, + buildTime: new Date(startTime).toISOString(), + }; + } + + /** + * Inject data into a pre-built shell. + * + * @param shell - HTML shell with placeholders + * @param input - Tool input data + * @param output - Tool output data + * @returns HTML with data injected + */ + injectData(shell: string, input: unknown, output: unknown): string { + return injectHybridDataFull(shell, input, output); + } + + // ============================================ + // Private Methods + // ============================================ + + /** + * Build React rendering shell. + * + * Creates a client-side React rendering setup that: + * 1. Waits for runtime to be ready + * 2. Loads component code + * 3. Renders into #root with data from window.__mcpToolOutput + */ + private buildReactShell( + template: UITemplateConfig, + _toolName: string + ): string { + // For React components, we need to serialize them for client-side execution + // This is a simplified approach - full implementation would use bundling + const _componentName = this.getComponentName(template.template); + + return ` +
+
+
+
+ + + + +

Loading...

+
+
+
+
+ + + `; + } + + /** + * Build inline React runtime (for offline mode). + */ + private buildInlineReactRuntime(): string { + // For inline mode, we'd bundle React directly + // This is a placeholder - full implementation would include minified React + return ` + + `; + } + + /** + * Get component name from template. + */ + private getComponentName(template: unknown): string { + if (typeof template === 'function') { + return template.name || 'Widget'; + } + return 'Widget'; + } + + /** + * Simple HTML minification. + */ + private minifyHtml(html: string): string { + return html + .replace(/>\s+<') + .replace(/\s{2,}/g, ' ') + .trim(); + } +} diff --git a/libs/uipack/src/build/builders/types.ts b/libs/uipack/src/build/builders/types.ts new file mode 100644 index 00000000..da65a38f --- /dev/null +++ b/libs/uipack/src/build/builders/types.ts @@ -0,0 +1,442 @@ +/** + * Builder Types + * + * Type definitions for the Static, Hybrid, and Inline builders. + * These builders create universal HTML documents for MCP clients. + * + * @packageDocumentation + */ + +import type { UITemplateConfig } from '../../types'; +import type { ThemeConfig, DeepPartial } from '../../theme'; + +// ============================================ +// Build Mode +// ============================================ + +/** + * Build mode for widget generation. + * + * - `'static'`: Full HTML with placeholders. Data injected at preview time. + * Best for production - widget is cached, only data changes per request. + * + * - `'hybrid'`: Vendor shell (cached) + component chunks (per-tool). + * Shell delivered via resource URI, component via tool response. + * Optimal for OpenAI where shell is fetched once and cached. + * + * - `'inline'`: Minimal loader at discovery, full HTML per request. + * Best for development/review. Each request gets complete widget. + */ +export type BuildMode = 'static' | 'hybrid' | 'inline'; + +/** + * CDN loading mode for dependencies. + * + * - `'cdn'`: Load React/deps from CDN (smaller HTML, requires network) + * - `'inline'`: Bundle all deps inline (larger HTML, works offline) + */ +export type CdnMode = 'cdn' | 'inline'; + +// ============================================ +// Builder Options +// ============================================ + +/** + * Common options for all builders. + */ +export interface BuilderOptions { + /** + * CDN loading mode for dependencies. + * @default 'cdn' + */ + cdnMode?: CdnMode; + + /** + * Whether to minify the output HTML. + * @default false + */ + minify?: boolean; + + /** + * Theme configuration override. + */ + theme?: DeepPartial; + + /** + * Whether to include source maps. + * @default false + */ + sourceMaps?: boolean; +} + +/** + * Options for building a specific tool's UI. + */ +export interface BuildToolOptions { + /** + * UI template configuration. + */ + template: UITemplateConfig; + + /** + * Name of the tool this UI is for. + */ + toolName: string; + + /** + * Optional title for the HTML document. + */ + title?: string; + + /** + * Sample input for preview/development. + */ + sampleInput?: In; + + /** + * Sample output for preview/development. + */ + sampleOutput?: Out; +} + +// ============================================ +// Build Results +// ============================================ + +/** + * Result from a static build. + * + * Static builds produce a complete HTML document with placeholders + * that are replaced with actual data at preview time. + */ +export interface StaticBuildResult { + /** + * Build mode identifier. + */ + mode: 'static'; + + /** + * Complete HTML document with placeholders. + */ + html: string; + + /** + * Content hash for caching. + */ + hash: string; + + /** + * Size in bytes. + */ + size: number; + + /** + * Estimated gzipped size in bytes. + */ + gzipSize: number; + + /** + * Placeholders present in the HTML. + */ + placeholders: { + hasOutput: boolean; + hasInput: boolean; + }; + + /** + * Renderer type used (html, react, mdx). + */ + rendererType: string; + + /** + * Build timestamp (ISO 8601). + */ + buildTime: string; +} + +/** + * Result from a hybrid build. + * + * Hybrid builds produce a vendor shell (cached, shared across tools) + * and component chunks (per-tool, externalized dependencies). + */ +export interface HybridBuildResult { + /** + * Build mode identifier. + */ + mode: 'hybrid'; + + /** + * Vendor shell HTML (shared across all tools). + * Contains React, Bridge, UI components from CDN. + */ + vendorShell: string; + + /** + * Transpiled component code (externalized). + * Imports React/deps from shell's globals. + */ + componentChunk: string; + + /** + * Resource URI for the vendor shell. + * Used in _meta['openai/outputTemplate']. + */ + shellResourceUri: string; + + /** + * Content hash for caching. + */ + hash: string; + + /** + * Size of vendor shell in bytes. + */ + shellSize: number; + + /** + * Size of component chunk in bytes. + */ + componentSize: number; + + /** + * Renderer type used (html, react, mdx). + */ + rendererType: string; + + /** + * Build timestamp (ISO 8601). + */ + buildTime: string; +} + +/** + * Result from an inline build. + * + * Inline builds produce a minimal loader shell (for discovery) + * and full widget HTML (for each tool execution). + */ +export interface InlineBuildResult { + /** + * Build mode identifier. + */ + mode: 'inline'; + + /** + * Minimal loader HTML (returned at tools/list). + * Contains bridge + loading indicator + injector script. + */ + loaderShell: string; + + /** + * Full widget HTML generator. + * Called with input/output to produce complete HTML. + */ + buildFullWidget: (input: unknown, output: unknown) => Promise; + + /** + * Content hash for the loader. + */ + hash: string; + + /** + * Size of loader in bytes. + */ + loaderSize: number; + + /** + * Renderer type used (html, react, mdx). + */ + rendererType: string; + + /** + * Build timestamp (ISO 8601). + */ + buildTime: string; +} + +/** + * Union type for all build results. + * Named BuilderResult to avoid conflict with the existing BuildResult type in build/index.ts. + */ +export type BuilderResult = StaticBuildResult | HybridBuildResult | InlineBuildResult; + +// ============================================ +// Builder Interfaces +// ============================================ + +/** + * Interface for all builders. + */ +export interface Builder { + /** + * Build mode this builder produces. + */ + readonly mode: BuildMode; + + /** + * Build a tool UI. + */ + build( + options: BuildToolOptions + ): Promise; +} + +/** + * Interface for the static builder. + */ +export interface IStaticBuilder extends Builder { + readonly mode: 'static'; + + /** + * Inject data into a pre-built shell. + */ + injectData( + shell: string, + input: unknown, + output: unknown + ): string; +} + +/** + * Interface for the hybrid builder. + */ +export interface IHybridBuilder extends Builder { + readonly mode: 'hybrid'; + + /** + * Build just the vendor shell (cached, shared). + */ + buildVendorShell(): Promise; + + /** + * Build a component chunk for a specific template. + */ + buildComponentChunk( + template: UITemplateConfig['template'] + ): Promise; + + /** + * Combine shell and component for Claude/inline delivery. + */ + combineForInline( + shell: string, + component: string, + input: unknown, + output: unknown + ): string; +} + +/** + * Interface for the inline builder. + */ +export interface IInlineBuilder extends Builder { + readonly mode: 'inline'; + + /** + * Build the minimal loader shell. + */ + buildLoader(toolName: string): string; + + /** + * Build full widget HTML with embedded data. + */ + buildFullWidget( + template: UITemplateConfig['template'], + input: In, + output: Out + ): Promise; +} + +// ============================================ +// Template Detection +// ============================================ + +/** + * Detected template type. + */ +export type TemplateType = 'html-string' | 'html-function' | 'react-component' | 'react-element' | 'mdx'; + +/** + * Template detection result. + */ +export interface TemplateDetection { + /** + * Detected template type. + */ + type: TemplateType; + + /** + * Renderer to use for this template. + */ + renderer: 'html' | 'react' | 'mdx'; + + /** + * Whether the template needs transpilation. + */ + needsTranspilation: boolean; +} + +// ============================================ +// Transpilation Options +// ============================================ + +/** + * Options for transpiling component code. + */ +export interface TranspileOptions { + /** + * External dependencies to exclude from bundle. + * These will be loaded from the shell's globals. + */ + externals?: string[]; + + /** + * Output format. + * @default 'esm' + */ + format?: 'esm' | 'iife'; + + /** + * Target ES version. + * @default 'es2020' + */ + target?: string; + + /** + * Whether to minify output. + * @default false + */ + minify?: boolean; + + /** + * JSX import source. + * @default 'react' + */ + jsxImportSource?: string; +} + +/** + * Result of transpilation. + */ +export interface TranspileResult { + /** + * Transpiled JavaScript code. + */ + code: string; + + /** + * Source map (if requested). + */ + map?: string; + + /** + * Size in bytes. + */ + size: number; + + /** + * Detected imports that were externalized. + */ + externalizedImports: string[]; +} diff --git a/libs/uipack/src/build/index.ts b/libs/uipack/src/build/index.ts index 0943dc74..bfb73380 100644 --- a/libs/uipack/src/build/index.ts +++ b/libs/uipack/src/build/index.ts @@ -718,3 +718,43 @@ export { } from './ui-components-browser'; export type { BrowserUIComponentsOptions } from './ui-components-browser'; + +// ============================================ +// New Builder Architecture +// ============================================ + +export { + // Types + type BuildMode, + type CdnMode, + type BuilderOptions, + type BuildToolOptions, + type StaticBuildResult, + type HybridBuildResult, + type InlineBuildResult, + type BuilderResult, + type Builder, + type IStaticBuilder, + type IHybridBuilder, + type IInlineBuilder, + type TemplateType, + type TemplateDetection, + type TranspileOptions, + type TranspileResult, + // Builders + BaseBuilder, + StaticBuilder, + HybridBuilder, + InlineBuilder, + // esbuild utilities + DEFAULT_EXTERNALS, + EXTERNAL_GLOBALS, + CDN_URLS, + CLOUDFLARE_CDN_URLS, + createTransformConfig, + createExternalizedConfig, + createInlineConfig, + createExternalsBanner, + generateCdnScriptTags, + generateGlobalsSetupScript, +} from './builders'; diff --git a/libs/uipack/src/build/widget-manifest.ts b/libs/uipack/src/build/widget-manifest.ts index 4c0051ae..8e1086a3 100644 --- a/libs/uipack/src/build/widget-manifest.ts +++ b/libs/uipack/src/build/widget-manifest.ts @@ -31,7 +31,7 @@ import { getDefaultAssets } from './cdn-resources'; import type { ThemeConfig } from '../theme'; import { wrapToolUIUniversal } from '../runtime/wrapper'; import { rendererRegistry } from '../renderers/registry'; -import { detectTemplateType, mdxRenderer } from '../renderers'; +import { detectTemplateType, mdxClientRenderer } from '../renderers'; // File-based template support import { detectTemplateMode, detectFormatFromPath } from '../dependency/types'; @@ -533,9 +533,9 @@ function ensureRenderersRegistered(): void { // Note: React renderer is in @frontmcp/ui package // For React support, use @frontmcp/ui instead of @frontmcp/uipack - // Register MDX renderer if not already registered + // Register MDX client renderer if not already registered if (!rendererRegistry.has('mdx')) { - rendererRegistry.register(mdxRenderer); + rendererRegistry.register(mdxClientRenderer); } renderersInitialized = true; diff --git a/libs/uipack/src/index.ts b/libs/uipack/src/index.ts index fa25cc3b..ed6ef227 100644 --- a/libs/uipack/src/index.ts +++ b/libs/uipack/src/index.ts @@ -85,6 +85,29 @@ export { isHybridShell, needsInputInjection, getHybridPlaceholders, + // New Architecture Builders + type BuildMode, + type CdnMode, + type BuilderOptions, + type BuildToolOptions, + type StaticBuildResult, + type HybridBuildResult, + type InlineBuildResult, + type BuilderResult, + type Builder, + type IStaticBuilder, + type IHybridBuilder, + type IInlineBuilder, + BaseBuilder, + StaticBuilder, + HybridBuilder, + InlineBuilder, + // esbuild configuration + DEFAULT_EXTERNALS, + CDN_URLS, + createTransformConfig, + createExternalizedConfig, + generateCdnScriptTags, } from './build'; // ============================================ @@ -148,6 +171,34 @@ export { type IIFEGeneratorOptions, } from './bridge-runtime'; +// ============================================ +// Preview Handlers (New Architecture) +// Platform-specific preview generation for +// OpenAI, Claude, and Generic MCP clients +// ============================================ +export { + // Types + type Platform, + type AIPlatformType as PreviewPlatformType, + type DiscoveryPreviewOptions, + type ExecutionPreviewOptions, + type BuilderMockData, + type DiscoveryMeta, + type ExecutionMeta, + type PreviewHandler, + type OpenAIMetaFields, + type ClaudeMetaFields, + type FrontMCPMetaFields, + type UIMetaFields, + // Preview Handlers + OpenAIPreview, + ClaudePreview, + GenericPreview, + // Factory Functions + createPreviewHandler, + detectPlatform as detectPreviewPlatform, +} from './preview'; + // ============================================ // Tool Template Builder // ============================================ diff --git a/libs/uipack/src/preview/claude-preview.ts b/libs/uipack/src/preview/claude-preview.ts new file mode 100644 index 00000000..02d8e0a8 --- /dev/null +++ b/libs/uipack/src/preview/claude-preview.ts @@ -0,0 +1,234 @@ +/** + * Claude Preview Handler + * + * Generates metadata for Anthropic Claude platform. + * + * Claude is always inline-only (cannot fetch resources). + * Uses Cloudflare CDN which is trusted by Claude's sandbox. + * + * Discovery (tools/list): + * - No resource registration (Claude can't fetch) + * - Optional loader HTML in _meta for streaming scenarios + * + * Execution (tool/call): + * - Full HTML with injected input/output + * - Uses Cloudflare CDN for dependencies + * + * @packageDocumentation + */ + +import type { + PreviewHandler, + DiscoveryPreviewOptions, + ExecutionPreviewOptions, + DiscoveryMeta, + ExecutionMeta, + ClaudeMetaFields, +} from './types'; +import type { BuilderResult, StaticBuildResult, HybridBuildResult, InlineBuildResult } from '../build/builders/types'; +import { injectHybridDataFull } from '../build/hybrid-data'; +import { CLOUDFLARE_CDN_URLS } from '../build/builders/esbuild-config'; + +// ============================================ +// Claude Preview Handler +// ============================================ + +/** + * Preview handler for Anthropic Claude platform. + * + * @example + * ```typescript + * const preview = new ClaudePreview(); + * + * // For tool/call (Claude is always inline) + * const executionMeta = preview.forExecution({ + * buildResult: staticResult, + * input: { location: 'NYC' }, + * output: { temperature: 72 }, + * }); + * ``` + */ +export class ClaudePreview implements PreviewHandler { + readonly platform = 'claude' as const; + + /** + * Generate metadata for tool discovery (tools/list). + * + * Claude cannot fetch resources, so discovery is minimal. + * We may include a loader HTML for streaming scenarios. + */ + forDiscovery(options: DiscoveryPreviewOptions): DiscoveryMeta { + const { toolName, description } = options; + + // Claude can't fetch resources, so no outputTemplate + // Just indicate that this tool can produce widgets + const _meta: ClaudeMetaFields = { + 'claude/widgetDescription': description || `Widget for ${toolName}`, + 'claude/prefersBorder': true, + }; + + return { + _meta: _meta as Record, + }; + } + + /** + * Generate metadata for tool execution (tool/call). + * + * Always returns complete HTML with embedded data. + */ + forExecution(options: ExecutionPreviewOptions): ExecutionMeta { + const { buildResult, input, output } = options; + + switch (buildResult.mode) { + case 'static': + return this.forExecutionStatic(buildResult, input, output); + + case 'hybrid': + return this.forExecutionHybrid(buildResult, input, output); + + case 'inline': + return this.forExecutionInline(buildResult, input, output); + + default: + throw new Error(`Unknown build mode: ${(buildResult as BuilderResult).mode}`); + } + } + + // ============================================ + // Execution Handlers + // ============================================ + + private forExecutionStatic(result: StaticBuildResult, input: unknown, output: unknown): ExecutionMeta { + // Static mode: Inject data into placeholders + let html = injectHybridDataFull(result.html, input, output); + + // Replace esm.sh CDN with Cloudflare (Claude-compatible) + html = this.replaceWithCloudfareCdn(html); + + const _meta: ClaudeMetaFields = { + 'ui/html': html, + 'ui/mimeType': 'text/html+mcp', + }; + + return { + _meta: _meta as Record, + html, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + private forExecutionHybrid(result: HybridBuildResult, input: unknown, output: unknown): ExecutionMeta { + // Hybrid mode: Combine shell + component + data + let html = result.vendorShell; + + // Inject data + html = html + .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`) + .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`) + .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`); + + // Inject component + const componentScript = ` + + `; + html = html.replace('', componentScript + '\n'); + + // Replace CDN with Cloudflare + html = this.replaceWithCloudfareCdn(html); + + const _meta: ClaudeMetaFields = { + 'ui/html': html, + 'ui/mimeType': 'text/html+mcp', + }; + + return { + _meta: _meta as Record, + html, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + private forExecutionInline(result: InlineBuildResult, input: unknown, output: unknown): ExecutionMeta { + // Inline mode: Would use buildFullWidget but that's async + // For Claude, we need to return complete HTML + + // For now, create a simple HTML with the data + const html = this.buildClaudeInlineHtml(input, output); + + const _meta: ClaudeMetaFields = { + 'ui/html': html, + 'ui/mimeType': 'text/html+mcp', + }; + + return { + _meta: _meta as Record, + html, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + // ============================================ + // Helper Methods + // ============================================ + + /** + * Replace esm.sh CDN URLs with Cloudflare CDN. + * + * Claude's sandbox trusts Cloudflare but not esm.sh. + */ + private replaceWithCloudfareCdn(html: string): string { + // Replace React imports + html = html.replace(/https:\/\/esm\.sh\/react@\d+/g, CLOUDFLARE_CDN_URLS.react); + html = html.replace(/https:\/\/esm\.sh\/react-dom@\d+/g, CLOUDFLARE_CDN_URLS.reactDom); + + // Replace import map with UMD script tags (Cloudflare uses UMD) + const importMapRegex = / + + `; + html = html.replace(importMapRegex, umdScripts); + } + + return html; + } + + /** + * Build simple inline HTML for Claude. + */ + private buildClaudeInlineHtml(input: unknown, output: unknown): string { + return ` + + + + + FrontMCP Widget + + + + + + +
+
+

Tool Output

+ 
${JSON.stringify(output, null, 2)}
+
+
+ +`; + } +} diff --git a/libs/uipack/src/preview/generic-preview.ts b/libs/uipack/src/preview/generic-preview.ts new file mode 100644 index 00000000..1c83ed52 --- /dev/null +++ b/libs/uipack/src/preview/generic-preview.ts @@ -0,0 +1,294 @@ +/** + * Generic Preview Handler + * + * Generates metadata for generic MCP clients. + * Uses frontmcp/* namespace with ui/* fallback for compatibility. + * + * Behaves like OpenAI but with different metadata namespaces. + * + * @packageDocumentation + */ + +import type { + PreviewHandler, + DiscoveryPreviewOptions, + ExecutionPreviewOptions, + DiscoveryMeta, + ExecutionMeta, + FrontMCPMetaFields, + BuilderMockData, +} from './types'; +import type { BuilderResult, StaticBuildResult, HybridBuildResult, InlineBuildResult } from '../build/builders/types'; + +// ============================================ +// Generic Preview Handler +// ============================================ + +/** + * Preview handler for generic MCP clients. + * + * Uses the same patterns as OpenAI but with frontmcp/* namespace + * and ui/* fallback for maximum compatibility. + * + * @example + * ```typescript + * const preview = new GenericPreview(); + * + * // For tools/list + * const discoveryMeta = preview.forDiscovery({ + * buildResult: hybridResult, + * toolName: 'get_weather', + * }); + * + * // For tool/call + * const executionMeta = preview.forExecution({ + * buildResult: hybridResult, + * input: { location: 'NYC' }, + * output: { temperature: 72 }, + * }); + * ``` + */ +export class GenericPreview implements PreviewHandler { + readonly platform = 'generic' as const; + + /** + * Generate metadata for tool discovery (tools/list). + */ + forDiscovery(options: DiscoveryPreviewOptions): DiscoveryMeta { + const { buildResult, toolName, description } = options; + + switch (buildResult.mode) { + case 'static': + return this.forDiscoveryStatic(buildResult, toolName, description); + + case 'hybrid': + return this.forDiscoveryHybrid(buildResult, toolName, description); + + case 'inline': + return this.forDiscoveryInline(buildResult, toolName, description); + + default: + throw new Error(`Unknown build mode: ${(buildResult as BuilderResult).mode}`); + } + } + + /** + * Generate metadata for tool execution (tool/call). + */ + forExecution(options: ExecutionPreviewOptions): ExecutionMeta { + const { buildResult, input, output, builderMode = false, mockData } = options; + + switch (buildResult.mode) { + case 'static': + return this.forExecutionStatic(buildResult, input, output, builderMode, mockData); + + case 'hybrid': + return this.forExecutionHybrid(buildResult, input, output, builderMode, mockData); + + case 'inline': + return this.forExecutionInline(buildResult, input, output, builderMode, mockData); + + default: + throw new Error(`Unknown build mode: ${(buildResult as BuilderResult).mode}`); + } + } + + // ============================================ + // Discovery Handlers + // ============================================ + + private forDiscoveryStatic(result: StaticBuildResult, toolName: string, _description?: string): DiscoveryMeta { + const resourceUri = `resource://widget/${toolName}`; + + const _meta: FrontMCPMetaFields = { + // Primary namespace + 'frontmcp/outputTemplate': resourceUri, + 'frontmcp/widgetCSP': { + connect_domains: ['esm.sh', 'cdn.tailwindcss.com'], + resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'], + }, + // Fallback for compatibility + 'ui/mimeType': 'text/html+mcp', + }; + + return { + _meta: _meta as Record, + resourceUri, + resourceContent: result.html, + }; + } + + private forDiscoveryHybrid(result: HybridBuildResult, _toolName: string, _description?: string): DiscoveryMeta { + const _meta: FrontMCPMetaFields = { + 'frontmcp/outputTemplate': result.shellResourceUri, + 'frontmcp/widgetCSP': { + connect_domains: ['esm.sh', 'cdn.tailwindcss.com'], + resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'], + }, + 'ui/mimeType': 'text/html+mcp', + }; + + return { + _meta: _meta as Record, + resourceUri: result.shellResourceUri, + resourceContent: result.vendorShell, + }; + } + + private forDiscoveryInline(result: InlineBuildResult, _toolName: string, _description?: string): DiscoveryMeta { + const _meta: FrontMCPMetaFields = { + 'frontmcp/html': result.loaderShell, + 'ui/html': result.loaderShell, + 'ui/mimeType': 'text/html+mcp', + }; + + return { + _meta: _meta as Record, + }; + } + + // ============================================ + // Execution Handlers + // ============================================ + + private forExecutionStatic( + result: StaticBuildResult, + input: unknown, + output: unknown, + builderMode: boolean, + mockData?: BuilderMockData, + ): ExecutionMeta { + if (builderMode) { + const html = this.injectBuilderMode(result.html, input, output, mockData); + return { + _meta: { + 'frontmcp/html': html, + 'ui/html': html, + }, + html, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + // Normal mode: Platform handles data injection + return { + _meta: {}, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + private forExecutionHybrid( + result: HybridBuildResult, + input: unknown, + output: unknown, + builderMode: boolean, + mockData?: BuilderMockData, + ): ExecutionMeta { + const _meta: FrontMCPMetaFields = { + 'frontmcp/component': result.componentChunk, + }; + + if (builderMode) { + const html = this.combineHybridForBuilder(result, input, output, mockData); + return { + _meta: { + 'frontmcp/html': html, + 'ui/html': html, + }, + html, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + return { + _meta: _meta as Record, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + private forExecutionInline( + result: InlineBuildResult, + input: unknown, + output: unknown, + _builderMode: boolean, + _mockData?: BuilderMockData, + ): ExecutionMeta { + // Inline mode returns full HTML + const _meta: FrontMCPMetaFields = { + 'frontmcp/html': '', + 'ui/html': '', + }; + + return { + _meta: _meta as Record, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + // ============================================ + // Builder Mode Helpers + // ============================================ + + private injectBuilderMode(html: string, input: unknown, output: unknown, mockData?: BuilderMockData): string { + const theme = mockData?.theme || 'light'; + const displayMode = mockData?.displayMode || 'inline'; + const toolResponses = mockData?.toolResponses || {}; + + // Create mock FrontMCP bridge API + const mockScript = ` + + `; + + return html.replace('', '\n' + mockScript); + } + + private combineHybridForBuilder( + result: HybridBuildResult, + input: unknown, + output: unknown, + mockData?: BuilderMockData, + ): string { + let html = result.vendorShell; + + // Inject data + html = html + .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`) + .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`) + .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`); + + // Inject component + const componentScript = ` + + `; + html = html.replace('', componentScript + '\n'); + + // Add builder mode mock + return this.injectBuilderMode(html, input, output, mockData); + } +} diff --git a/libs/uipack/src/preview/index.ts b/libs/uipack/src/preview/index.ts new file mode 100644 index 00000000..4c840200 --- /dev/null +++ b/libs/uipack/src/preview/index.ts @@ -0,0 +1,86 @@ +/** + * Preview Handlers + * + * Platform-specific preview handlers for generating metadata. + * + * @packageDocumentation + */ + +// Types +export type { + Platform, + AIPlatformType, + DiscoveryPreviewOptions, + ExecutionPreviewOptions, + BuilderMockData, + DiscoveryMeta, + ExecutionMeta, + PreviewHandler, + OpenAIMetaFields, + ClaudeMetaFields, + FrontMCPMetaFields, + UIMetaFields, +} from './types'; + +// Preview Handlers +export { OpenAIPreview } from './openai-preview'; +export { ClaudePreview } from './claude-preview'; +export { GenericPreview } from './generic-preview'; + +// ============================================ +// Convenience Factory +// ============================================ + +import { OpenAIPreview } from './openai-preview'; +import { ClaudePreview } from './claude-preview'; +import { GenericPreview } from './generic-preview'; +import type { Platform, PreviewHandler } from './types'; + +/** + * Create a preview handler for the specified platform. + * + * @param platform - Target platform + * @returns Preview handler instance + * + * @example + * ```typescript + * const preview = createPreviewHandler('openai'); + * const meta = preview.forExecution({ buildResult, input, output }); + * ``` + */ +export function createPreviewHandler(platform: Platform): PreviewHandler { + switch (platform) { + case 'openai': + return new OpenAIPreview(); + case 'claude': + return new ClaudePreview(); + case 'generic': + return new GenericPreview(); + default: + throw new Error(`Unknown platform: ${platform}`); + } +} + +/** + * Detect platform from client info or environment. + * + * @param clientInfo - Optional client info object + * @returns Detected platform + */ +export function detectPlatform(clientInfo?: { name?: string; version?: string }): Platform { + if (!clientInfo) { + return 'generic'; + } + + const name = clientInfo.name?.toLowerCase() || ''; + + if (name.includes('openai') || name.includes('chatgpt')) { + return 'openai'; + } + + if (name.includes('claude') || name.includes('anthropic')) { + return 'claude'; + } + + return 'generic'; +} diff --git a/libs/uipack/src/preview/openai-preview.ts b/libs/uipack/src/preview/openai-preview.ts new file mode 100644 index 00000000..a2588d9b --- /dev/null +++ b/libs/uipack/src/preview/openai-preview.ts @@ -0,0 +1,330 @@ +/** + * OpenAI Preview Handler + * + * Generates metadata for OpenAI ChatGPT platform. + * + * Discovery (tools/list): + * - Static/Hybrid: Return shell via resource:// URI + * - Inline: Return minimal loader in _meta + * + * Execution (tool/call): + * - Static: Empty _meta, data via window.openai.toolOutput + * - Hybrid: Component chunk in _meta['ui/component'] + * - Inline: Full HTML in _meta['ui/html'] + * + * @packageDocumentation + */ + +import type { + PreviewHandler, + DiscoveryPreviewOptions, + ExecutionPreviewOptions, + DiscoveryMeta, + ExecutionMeta, + OpenAIMetaFields, + BuilderMockData, +} from './types'; +import type { BuilderResult, StaticBuildResult, HybridBuildResult, InlineBuildResult } from '../build/builders/types'; + +// ============================================ +// OpenAI Preview Handler +// ============================================ + +/** + * Preview handler for OpenAI ChatGPT platform. + * + * @example + * ```typescript + * const preview = new OpenAIPreview(); + * + * // For tools/list + * const discoveryMeta = preview.forDiscovery({ + * buildResult: hybridResult, + * toolName: 'get_weather', + * }); + * + * // For tool/call + * const executionMeta = preview.forExecution({ + * buildResult: hybridResult, + * input: { location: 'NYC' }, + * output: { temperature: 72 }, + * }); + * ``` + */ +export class OpenAIPreview implements PreviewHandler { + readonly platform = 'openai' as const; + + /** + * Generate metadata for tool discovery (tools/list). + */ + forDiscovery(options: DiscoveryPreviewOptions): DiscoveryMeta { + const { buildResult, toolName, description } = options; + + switch (buildResult.mode) { + case 'static': + return this.forDiscoveryStatic(buildResult, toolName, description); + + case 'hybrid': + return this.forDiscoveryHybrid(buildResult, toolName, description); + + case 'inline': + return this.forDiscoveryInline(buildResult, toolName, description); + + default: + throw new Error(`Unknown build mode: ${(buildResult as BuilderResult).mode}`); + } + } + + /** + * Generate metadata for tool execution (tool/call). + */ + forExecution(options: ExecutionPreviewOptions): ExecutionMeta { + const { buildResult, input, output, builderMode = false, mockData } = options; + + switch (buildResult.mode) { + case 'static': + return this.forExecutionStatic(buildResult, input, output, builderMode, mockData); + + case 'hybrid': + return this.forExecutionHybrid(buildResult, input, output, builderMode, mockData); + + case 'inline': + return this.forExecutionInline(buildResult, input, output, builderMode, mockData); + + default: + throw new Error(`Unknown build mode: ${(buildResult as BuilderResult).mode}`); + } + } + + // ============================================ + // Discovery Handlers + // ============================================ + + private forDiscoveryStatic(result: StaticBuildResult, toolName: string, _description?: string): DiscoveryMeta { + // Static mode: Return shell as resource + const resourceUri = `resource://widget/${toolName}`; + + const _meta: OpenAIMetaFields = { + 'openai/outputTemplate': resourceUri, + 'openai/widgetAccessible': true, + 'openai/resultCanProduceWidget': true, + 'openai/displayMode': 'inline', + 'openai/widgetCSP': { + connect_domains: ['esm.sh', 'cdn.tailwindcss.com'], + resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'], + }, + }; + + return { + _meta: _meta as Record, + resourceUri, + resourceContent: result.html, + }; + } + + private forDiscoveryHybrid(result: HybridBuildResult, _toolName: string, _description?: string): DiscoveryMeta { + // Hybrid mode: Return vendor shell as resource + const _meta: OpenAIMetaFields = { + 'openai/outputTemplate': result.shellResourceUri, + 'openai/widgetAccessible': true, + 'openai/resultCanProduceWidget': true, + 'openai/displayMode': 'inline', + 'openai/widgetCSP': { + connect_domains: ['esm.sh', 'cdn.tailwindcss.com'], + resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'], + }, + }; + + return { + _meta: _meta as Record, + resourceUri: result.shellResourceUri, + resourceContent: result.vendorShell, + }; + } + + private forDiscoveryInline(result: InlineBuildResult, _toolName: string, _description?: string): DiscoveryMeta { + // Inline mode: Return loader in _meta + const _meta: OpenAIMetaFields = { + 'openai/html': result.loaderShell, + 'openai/widgetAccessible': true, + 'openai/resultCanProduceWidget': true, + 'openai/displayMode': 'inline', + 'openai/widgetCSP': { + connect_domains: ['esm.sh', 'cdn.tailwindcss.com'], + resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'], + }, + }; + + return { + _meta: _meta as Record, + }; + } + + // ============================================ + // Execution Handlers + // ============================================ + + private forExecutionStatic( + result: StaticBuildResult, + input: unknown, + output: unknown, + builderMode: boolean, + mockData?: BuilderMockData, + ): ExecutionMeta { + // Static mode: Data via window.openai.toolOutput (platform handles injection) + // We just return structuredContent + + if (builderMode) { + // For builder mode, inject full HTML with mock window.openai + const html = this.injectBuilderMode(result.html, input, output, mockData); + return { + _meta: { + 'openai/html': html, + }, + html, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + // Normal mode: Platform injects data via toolOutput + return { + _meta: {}, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + private forExecutionHybrid( + result: HybridBuildResult, + input: unknown, + output: unknown, + builderMode: boolean, + mockData?: BuilderMockData, + ): ExecutionMeta { + // Hybrid mode: Return component chunk + const _meta: OpenAIMetaFields = { + 'openai/component': result.componentChunk, + }; + + if (builderMode) { + // For builder mode, combine shell + component + mock data + // This simulates what the platform would do + const html = this.combineHybridForBuilder(result, input, output, mockData); + return { + _meta: { + 'openai/html': html, + }, + html, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + return { + _meta: _meta as Record, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + private forExecutionInline( + result: InlineBuildResult, + input: unknown, + output: unknown, + _builderMode: boolean, + _mockData?: BuilderMockData, + ): ExecutionMeta { + // Inline mode: Build and return full widget HTML + // Note: buildFullWidget is async, but we need sync here + // For now, we'll use a placeholder - real implementation would be async + const _meta: OpenAIMetaFields = { + 'openai/html': '', + }; + + return { + _meta: _meta as Record, + structuredContent: output, + textContent: JSON.stringify(output, null, 2), + }; + } + + // ============================================ + // Builder Mode Helpers + // ============================================ + + /** + * Inject builder mode mock APIs into HTML. + */ + private injectBuilderMode(html: string, input: unknown, output: unknown, mockData?: BuilderMockData): string { + const theme = mockData?.theme || 'light'; + const displayMode = mockData?.displayMode || 'inline'; + const toolResponses = mockData?.toolResponses || {}; + + // Create mock window.openai object + const mockScript = ` + + `; + + // Inject after + return html.replace('', '\n' + mockScript); + } + + /** + * Combine hybrid shell + component for builder mode. + */ + private combineHybridForBuilder( + result: HybridBuildResult, + input: unknown, + output: unknown, + mockData?: BuilderMockData, + ): string { + let html = result.vendorShell; + + // Inject data + html = html + .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`) + .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`) + .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`); + + // Inject component and builder mode mock + const componentScript = ` + + `; + + html = html.replace('', componentScript + '\n'); + + // Add builder mode mock + return this.injectBuilderMode(html, input, output, mockData); + } +} diff --git a/libs/uipack/src/preview/types.ts b/libs/uipack/src/preview/types.ts new file mode 100644 index 00000000..0fc4631b --- /dev/null +++ b/libs/uipack/src/preview/types.ts @@ -0,0 +1,236 @@ +/** + * Preview Types + * + * Type definitions for platform-specific preview handlers. + * + * @packageDocumentation + */ + +import type { BuilderResult } from '../build/builders/types'; + +// ============================================ +// Platform Types +// ============================================ + +/** + * Supported MCP platforms. + */ +export type Platform = 'openai' | 'claude' | 'generic'; + +/** + * All known platform types for detection. + */ +export type AIPlatformType = + | 'openai' + | 'claude' + | 'gemini' + | 'cursor' + | 'continue' + | 'cody' + | 'ext-apps' + | 'generic-mcp' + | 'unknown'; + +// ============================================ +// Preview Options +// ============================================ + +/** + * Options for generating discovery metadata (tools/list). + */ +export interface DiscoveryPreviewOptions { + /** + * Build result from a builder. + */ + buildResult: BuilderResult; + + /** + * Name of the tool. + */ + toolName: string; + + /** + * Optional description for the widget. + */ + description?: string; +} + +/** + * Options for generating execution metadata (tool/call). + */ +export interface ExecutionPreviewOptions { + /** + * Build result from a builder. + */ + buildResult: BuilderResult; + + /** + * Tool input arguments. + */ + input: unknown; + + /** + * Tool output/result data. + */ + output: unknown; + + /** + * Whether to enable builder mode (inject mock platform APIs). + * @default false + */ + builderMode?: boolean; + + /** + * Mock data for builder mode. + */ + mockData?: BuilderMockData; +} + +/** + * Mock data for builder mode preview. + */ +export interface BuilderMockData { + /** + * Theme to use ('light' | 'dark'). + */ + theme?: 'light' | 'dark'; + + /** + * Display mode. + */ + displayMode?: 'inline' | 'immersive'; + + /** + * Mock tool call responses. + */ + toolResponses?: Record; +} + +// ============================================ +// Preview Results +// ============================================ + +/** + * Result from discovery preview (tools/list). + */ +export interface DiscoveryMeta { + /** + * Metadata fields for the tool response. + */ + _meta: Record; + + /** + * Resource URI (if static/hybrid mode with resource delivery). + */ + resourceUri?: string; + + /** + * Resource content (if resource needs to be registered). + */ + resourceContent?: string; +} + +/** + * Result from execution preview (tool/call). + */ +export interface ExecutionMeta { + /** + * Metadata fields for the tool response. + */ + _meta: Record; + + /** + * Complete HTML (for inline delivery). + */ + html?: string; + + /** + * Structured content for the response. + */ + structuredContent?: unknown; + + /** + * Text content for fallback display. + */ + textContent?: string; +} + +// ============================================ +// Preview Handler Interface +// ============================================ + +/** + * Interface for platform-specific preview handlers. + */ +export interface PreviewHandler { + /** + * Platform this handler is for. + */ + readonly platform: Platform; + + /** + * Generate metadata for tool discovery (tools/list). + * + * @param options - Discovery options + * @returns Discovery metadata + */ + forDiscovery(options: DiscoveryPreviewOptions): DiscoveryMeta; + + /** + * Generate metadata for tool execution (tool/call). + * + * @param options - Execution options + * @returns Execution metadata + */ + forExecution(options: ExecutionPreviewOptions): ExecutionMeta; +} + +// ============================================ +// Meta Field Types +// ============================================ + +/** + * OpenAI-specific metadata fields. + */ +export interface OpenAIMetaFields { + 'openai/outputTemplate'?: string; + 'openai/html'?: string; + 'openai/component'?: string; + 'openai/widgetCSP'?: { + connect_domains?: string[]; + resource_domains?: string[]; + }; + 'openai/widgetAccessible'?: boolean; + 'openai/displayMode'?: 'inline' | 'immersive'; + 'openai/resultCanProduceWidget'?: boolean; +} + +/** + * Claude-specific metadata fields. + */ +export interface ClaudeMetaFields { + 'ui/html'?: string; + 'ui/mimeType'?: string; + 'claude/widgetDescription'?: string; + 'claude/prefersBorder'?: boolean; +} + +/** + * FrontMCP/Generic metadata fields. + */ +export interface FrontMCPMetaFields { + 'frontmcp/html'?: string; + 'frontmcp/outputTemplate'?: string; + 'frontmcp/component'?: string; + 'frontmcp/widgetCSP'?: { + connect_domains?: string[]; + resource_domains?: string[]; + }; + 'ui/html'?: string; + 'ui/mimeType'?: string; +} + +/** + * Combined metadata fields for all platforms. + */ +export type UIMetaFields = OpenAIMetaFields & ClaudeMetaFields & FrontMCPMetaFields; diff --git a/libs/uipack/src/registry/render-template.ts b/libs/uipack/src/registry/render-template.ts index ac9d032a..952898d0 100644 --- a/libs/uipack/src/registry/render-template.ts +++ b/libs/uipack/src/registry/render-template.ts @@ -77,11 +77,11 @@ async function renderMdxContent( mdxComponents?: Record, ): Promise { try { - // Import the MDX renderer from renderers module - const { mdxRenderer } = await import('../renderers/index.js'); + // Import the MDX client renderer from renderers module + const { mdxClientRenderer } = await import('../renderers/index.js'); // Render MDX to HTML with custom components - const html = await mdxRenderer.render(mdxContent, context, { mdxComponents }); + const html = await mdxClientRenderer.render(mdxContent, context, { mdxComponents }); return html; } catch (error) { // If MDX rendering fails, warn and return escaped content diff --git a/libs/uipack/src/renderers/index.ts b/libs/uipack/src/renderers/index.ts index 5bf624d5..7be806ea 100644 --- a/libs/uipack/src/renderers/index.ts +++ b/libs/uipack/src/renderers/index.ts @@ -49,7 +49,7 @@ export type { } from './types'; // Cache -export { TranspileCache, transpileCache, renderCache, componentCache, type TranspileCacheOptions } from './cache'; +export { TranspileCache, transpileCache, componentCache, type TranspileCacheOptions } from './cache'; // Registry export { RendererRegistry, rendererRegistry } from './registry'; @@ -67,22 +67,9 @@ export { type MdxClientCdnConfig, } from './mdx-client.renderer'; -/** - * @deprecated The `MdxRenderer` export is deprecated and will be removed in v1.0.0. - * - * For server-side MDX rendering with React, use `@frontmcp/ui/renderers`: - * ```typescript - * import { MdxRenderer, mdxRenderer } from '@frontmcp/ui/renderers'; - * ``` - * - * For client-side CDN-based MDX rendering (no React bundled), use: - * ```typescript - * import { MdxClientRenderer, mdxClientRenderer } from '@frontmcp/uipack/renderers'; - * ``` - */ -export { MdxClientRenderer as MdxRenderer, mdxClientRenderer as mdxRenderer } from './mdx-client.renderer'; - // Note: React renderer and server-side MDX are in @frontmcp/ui package (requires React) +// For server-side MDX rendering with React, use: +// import { MdxRenderer, mdxRenderer } from '@frontmcp/ui/renderers'; // Utilities export { diff --git a/libs/uipack/src/renderers/registry.ts b/libs/uipack/src/renderers/registry.ts index 8132678d..59440de8 100644 --- a/libs/uipack/src/renderers/registry.ts +++ b/libs/uipack/src/renderers/registry.ts @@ -270,11 +270,11 @@ export class RendererRegistry { * React and MDX renderers can be added: * * ```typescript - * import { rendererRegistry, mdxRenderer } from '@frontmcp/uipack/renderers'; + * import { rendererRegistry, mdxClientRenderer } from '@frontmcp/uipack/renderers'; * import { reactRenderer } from '@frontmcp/ui'; * * rendererRegistry.register(reactRenderer); - * rendererRegistry.register(mdxRenderer); + * rendererRegistry.register(mdxClientRenderer); * ``` */ export const rendererRegistry = new RendererRegistry(); From f9c4a9fa65a15bcfa3207dd87d7fc1e35a891328 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Wed, 24 Dec 2025 01:07:44 +0200 Subject: [PATCH 17/19] feat: Update outline button variant styles for improved visibility and interaction --- libs/uipack/src/styles/variants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/uipack/src/styles/variants.ts b/libs/uipack/src/styles/variants.ts index cb9fc51f..609c0734 100644 --- a/libs/uipack/src/styles/variants.ts +++ b/libs/uipack/src/styles/variants.ts @@ -104,7 +104,7 @@ export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export const BUTTON_VARIANTS: Record = { primary: 'bg-primary hover:bg-primary/90 text-white shadow-sm', secondary: 'bg-secondary hover:bg-secondary/90 text-white shadow-sm', - outline: 'border-2 border-primary bg-primary hover:bg-primary/90', + outline: 'border-2 border-primary text-primary bg-transparent hover:bg-primary/10', ghost: 'text-text-primary hover:bg-gray-100', danger: 'bg-danger hover:bg-danger/90 text-white shadow-sm', success: 'bg-success hover:bg-success/90 text-white shadow-sm', From c019b9ce7508181d6943657754bd3e97f7bd4780 Mon Sep 17 00:00:00 2001 From: David Antoon Date: Wed, 24 Dec 2025 02:18:36 +0200 Subject: [PATCH 18/19] feat: Implement component name validation and sanitization to prevent code injection attacks --- libs/ui/src/renderers/react.renderer.ts | 49 ++++++++- libs/uipack/src/index.ts | 5 +- libs/uipack/src/preview/claude-preview.ts | 45 ++++++-- libs/uipack/src/preview/generic-preview.ts | 58 ++++++++-- libs/uipack/src/preview/openai-preview.ts | 101 +++++++++++++----- libs/uipack/src/preview/types.ts | 27 +++-- libs/uipack/src/registry/render-template.ts | 2 +- .../src/utils/__tests__/escape-html.test.ts | 79 +++++++++++++- libs/uipack/src/utils/escape-html.ts | 23 ++++ libs/uipack/src/utils/index.ts | 2 +- 10 files changed, 323 insertions(+), 68 deletions(-) diff --git a/libs/ui/src/renderers/react.renderer.ts b/libs/ui/src/renderers/react.renderer.ts index d3567b1f..e4b6529c 100644 --- a/libs/ui/src/renderers/react.renderer.ts +++ b/libs/ui/src/renderers/react.renderer.ts @@ -28,6 +28,47 @@ import type { } from '@frontmcp/uipack/renderers'; import { isReactComponent, containsJsx, hashString, transpileJsx } from '@frontmcp/uipack/renderers'; +// ============================================ +// Component Name Validation +// ============================================ + +/** + * Valid JavaScript identifier pattern. + * Matches only alphanumeric characters, underscores, and dollar signs, + * and must not start with a digit. + */ +const VALID_JS_IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/; + +/** + * Validate that a component name is a safe JavaScript identifier. + * + * Prevents code injection attacks where a malicious function name + * could break out of the identifier context. + * + * @param name - Component name to validate + * @returns True if the name is a valid JavaScript identifier + */ +function isValidComponentName(name: string): boolean { + return VALID_JS_IDENTIFIER.test(name); +} + +/** + * Sanitize a component name for safe use in generated JavaScript code. + * + * If the name is not a valid identifier, returns a safe fallback. + * + * @param name - Component name to sanitize + * @returns Safe component name + */ +function sanitizeComponentName(name: string): string { + if (isValidComponentName(name)) { + return name; + } + // Replace invalid characters with underscores, ensure it starts correctly + const sanitized = name.replace(/[^a-zA-Z0-9_$]/g, '_').replace(/^[0-9]/, '_$&'); + return sanitized || 'Component'; +} + /** * Types this renderer can handle. */ @@ -180,7 +221,9 @@ export class ReactRenderer implements UIRenderer { if (typeof template === 'function') { // For imported components, we need the component to be registered - componentName = (template as { name?: string }).name || 'Component'; + // Sanitize the component name to prevent code injection attacks + const rawName = (template as { name?: string }).name || 'Component'; + componentName = sanitizeComponentName(rawName); // Cache the component function for client-side access componentCode = ` @@ -196,8 +239,10 @@ export class ReactRenderer implements UIRenderer { const transpiled = await this.transpile(template); // Extract component name from transpiled code + // The regex only matches valid identifiers, so this is already safe const match = transpiled.code.match(/function\s+(\w+)/); - componentName = match?.[1] || 'Widget'; + const rawName = match?.[1] || 'Widget'; + componentName = sanitizeComponentName(rawName); componentCode = transpiled.code; } else { diff --git a/libs/uipack/src/index.ts b/libs/uipack/src/index.ts index ed6ef227..f1188126 100644 --- a/libs/uipack/src/index.ts +++ b/libs/uipack/src/index.ts @@ -179,7 +179,10 @@ export { export { // Types type Platform, - type AIPlatformType as PreviewPlatformType, + // Note: AIPlatformType is also exported from ./adapters (canonical source). + // The preview module re-exports it for convenience. Use either: + // - import { AIPlatformType } from '@frontmcp/uipack' (from adapters) + // - import { AIPlatformType } from '@frontmcp/uipack/preview' (re-exported) type DiscoveryPreviewOptions, type ExecutionPreviewOptions, type BuilderMockData, diff --git a/libs/uipack/src/preview/claude-preview.ts b/libs/uipack/src/preview/claude-preview.ts index 02d8e0a8..626647d1 100644 --- a/libs/uipack/src/preview/claude-preview.ts +++ b/libs/uipack/src/preview/claude-preview.ts @@ -28,6 +28,21 @@ import type { import type { BuilderResult, StaticBuildResult, HybridBuildResult, InlineBuildResult } from '../build/builders/types'; import { injectHybridDataFull } from '../build/hybrid-data'; import { CLOUDFLARE_CDN_URLS } from '../build/builders/esbuild-config'; +import { safeJsonForScript, escapeHtml } from '../utils'; + +// ============================================ +// Data Injection Placeholders +// ============================================ + +/** + * Placeholder patterns for hybrid data injection. + * Using regex for more robust matching that handles whitespace variations. + */ +const DATA_PLACEHOLDERS = { + input: /window\.__mcpToolInput\s*=\s*\{\s*\};?/g, + output: /window\.__mcpToolOutput\s*=\s*\{\s*\};?/g, + structuredContent: /window\.__mcpStructuredContent\s*=\s*\{\s*\};?/g, +}; // ============================================ // Claude Preview Handler @@ -123,11 +138,15 @@ export class ClaudePreview implements PreviewHandler { // Hybrid mode: Combine shell + component + data let html = result.vendorShell; - // Inject data + // Use safeJsonForScript to escape and other HTML-sensitive sequences + const safeInput = safeJsonForScript(input); + const safeOutput = safeJsonForScript(output); + + // Inject data using regex for robust matching (handles whitespace variations) html = html - .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`) - .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`) - .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`); + .replace(DATA_PLACEHOLDERS.input, `window.__mcpToolInput = ${safeInput};`) + .replace(DATA_PLACEHOLDERS.output, `window.__mcpToolOutput = ${safeOutput};`) + .replace(DATA_PLACEHOLDERS.structuredContent, `window.__mcpStructuredContent = ${safeOutput};`); // Inject component const componentScript = ` @@ -202,8 +221,18 @@ export class ClaudePreview implements PreviewHandler { /** * Build simple inline HTML for Claude. + * + * Uses safeJsonForScript for script context and escapeHtml for HTML context + * to prevent XSS attacks from malicious data. */ private buildClaudeInlineHtml(input: unknown, output: unknown): string { + // Use safeJsonForScript to escape and other HTML-sensitive sequences + const safeInput = safeJsonForScript(input); + const safeOutput = safeJsonForScript(output); + + // Use escapeHtml for the 
 tag content to prevent HTML injection
+    const escapedOutputDisplay = escapeHtml(JSON.stringify(output, null, 2));
+
     return `
 
 
@@ -217,15 +246,15 @@ export class ClaudePreview implements PreviewHandler {
 
 
   
 
   

     

       
Tool Output

-      
${JSON.stringify(output, null, 2)}

+      
${escapedOutputDisplay}

     

   

 
diff --git a/libs/uipack/src/preview/generic-preview.ts b/libs/uipack/src/preview/generic-preview.ts
index 1c83ed52..33c40d03 100644
--- a/libs/uipack/src/preview/generic-preview.ts
+++ b/libs/uipack/src/preview/generic-preview.ts
@@ -19,6 +19,21 @@ import type {
   BuilderMockData,
 } from './types';
 import type { BuilderResult, StaticBuildResult, HybridBuildResult, InlineBuildResult } from '../build/builders/types';
+import { safeJsonForScript } from '../utils';
+
+// ============================================
+// Data Injection Placeholders
+// ============================================
+
+/**
+ * Placeholder patterns for hybrid data injection.
+ * Using regex for more robust matching that handles whitespace variations.
+ */
+const DATA_PLACEHOLDERS = {
+  input: /window\.__mcpToolInput\s*=\s*\{\s*\};?/g,
+  output: /window\.__mcpToolOutput\s*=\s*\{\s*\};?/g,
+  structuredContent: /window\.__mcpStructuredContent\s*=\s*\{\s*\};?/g,
+};
 
 // ============================================
 // Generic Preview Handler
@@ -234,21 +249,34 @@ export class GenericPreview implements PreviewHandler {
   // Builder Mode Helpers
   // ============================================
 
+  /**
+   * Inject builder mode mock APIs into HTML.
+   *
+   * Uses safeJsonForScript to prevent XSS attacks from malicious data
+   * containing `` or other HTML-sensitive sequences.
+   */
   private injectBuilderMode(html: string, input: unknown, output: unknown, mockData?: BuilderMockData): string {
     const theme = mockData?.theme || 'light';
     const displayMode = mockData?.displayMode || 'inline';
     const toolResponses = mockData?.toolResponses || {};
 
+    // Use safeJsonForScript to escape  and other HTML-sensitive sequences
+    const safeTheme = safeJsonForScript(theme);
+    const safeDisplayMode = safeJsonForScript(displayMode);
+    const safeToolResponses = safeJsonForScript(toolResponses);
+    const safeInput = safeJsonForScript(input);
+    const safeOutput = safeJsonForScript(output);
+
     // Create mock FrontMCP bridge API
     const mockScript = `
       
     `;
@@ -266,6 +294,12 @@ export class GenericPreview implements PreviewHandler {
     return html.replace('', '\n' + mockScript);
   }
 
+  /**
+   * Combine hybrid shell + component for builder mode.
+   *
+   * Uses regex patterns for robust placeholder matching and
+   * safeJsonForScript to prevent XSS attacks.
+   */
   private combineHybridForBuilder(
     result: HybridBuildResult,
     input: unknown,
@@ -274,11 +308,15 @@ export class GenericPreview implements PreviewHandler {
   ): string {
     let html = result.vendorShell;
 
-    // Inject data
+    // Use safeJsonForScript to escape  and other HTML-sensitive sequences
+    const safeInput = safeJsonForScript(input);
+    const safeOutput = safeJsonForScript(output);
+
+    // Inject data using regex for robust matching (handles whitespace variations)
     html = html
-      .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`)
-      .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`)
-      .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`);
+      .replace(DATA_PLACEHOLDERS.input, `window.__mcpToolInput = ${safeInput};`)
+      .replace(DATA_PLACEHOLDERS.output, `window.__mcpToolOutput = ${safeOutput};`)
+      .replace(DATA_PLACEHOLDERS.structuredContent, `window.__mcpStructuredContent = ${safeOutput};`);
 
     // Inject component
     const componentScript = `
diff --git a/libs/uipack/src/preview/openai-preview.ts b/libs/uipack/src/preview/openai-preview.ts
index a2588d9b..0600cddf 100644
--- a/libs/uipack/src/preview/openai-preview.ts
+++ b/libs/uipack/src/preview/openai-preview.ts
@@ -25,6 +25,34 @@ import type {
   BuilderMockData,
 } from './types';
 import type { BuilderResult, StaticBuildResult, HybridBuildResult, InlineBuildResult } from '../build/builders/types';
+import { safeJsonForScript } from '../utils';
+
+// ============================================
+// Shared CSP Configuration
+// ============================================
+
+/**
+ * Default CSP domains for OpenAI widgets.
+ * Extracted to avoid DRY violation across discovery handlers.
+ */
+const DEFAULT_WIDGET_CSP: OpenAIMetaFields['openai/widgetCSP'] = {
+  connect_domains: ['esm.sh', 'cdn.tailwindcss.com'],
+  resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'],
+};
+
+// ============================================
+// Data Injection Placeholders
+// ============================================
+
+/**
+ * Placeholder patterns for hybrid data injection.
+ * Using regex for more robust matching that handles whitespace variations.
+ */
+const DATA_PLACEHOLDERS = {
+  input: /window\.__mcpToolInput\s*=\s*\{\s*\};?/g,
+  output: /window\.__mcpToolOutput\s*=\s*\{\s*\};?/g,
+  structuredContent: /window\.__mcpStructuredContent\s*=\s*\{\s*\};?/g,
+};
 
 // ============================================
 // OpenAI Preview Handler
@@ -109,10 +137,7 @@ export class OpenAIPreview implements PreviewHandler {
       'openai/widgetAccessible': true,
       'openai/resultCanProduceWidget': true,
       'openai/displayMode': 'inline',
-      'openai/widgetCSP': {
-        connect_domains: ['esm.sh', 'cdn.tailwindcss.com'],
-        resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'],
-      },
+      'openai/widgetCSP': DEFAULT_WIDGET_CSP,
     };
 
     return {
@@ -129,10 +154,7 @@ export class OpenAIPreview implements PreviewHandler {
       'openai/widgetAccessible': true,
       'openai/resultCanProduceWidget': true,
       'openai/displayMode': 'inline',
-      'openai/widgetCSP': {
-        connect_domains: ['esm.sh', 'cdn.tailwindcss.com'],
-        resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'],
-      },
+      'openai/widgetCSP': DEFAULT_WIDGET_CSP,
     };
 
     return {
@@ -149,10 +171,7 @@ export class OpenAIPreview implements PreviewHandler {
       'openai/widgetAccessible': true,
       'openai/resultCanProduceWidget': true,
       'openai/displayMode': 'inline',
-      'openai/widgetCSP': {
-        connect_domains: ['esm.sh', 'cdn.tailwindcss.com'],
-        resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'],
-      },
+      'openai/widgetCSP': DEFAULT_WIDGET_CSP,
     };
 
     return {
@@ -229,17 +248,24 @@ export class OpenAIPreview implements PreviewHandler {
   }
 
   private forExecutionInline(
-    result: InlineBuildResult,
-    input: unknown,
+    _result: InlineBuildResult,
+    _input: unknown,
     output: unknown,
     _builderMode: boolean,
     _mockData?: BuilderMockData,
   ): ExecutionMeta {
-    // Inline mode: Build and return full widget HTML
-    // Note: buildFullWidget is async, but we need sync here
-    // For now, we'll use a placeholder - real implementation would be async
+    // Inline mode requires async buildFullWidget which this sync interface doesn't support.
+    // This is a known limitation - inline mode should use the async preview API or
+    // pre-build widgets at registration time.
+    //
+    // TODO: Consider making forExecution async or providing a separate async variant.
+    console.warn(
+      '[OpenAIPreview] Inline mode execution is not fully implemented. ' +
+        'Use static or hybrid mode for production, or pre-build widgets.',
+    );
+
     const _meta: OpenAIMetaFields = {
-      'openai/html': '',
+      'openai/html': '',
     };
 
     return {
@@ -255,40 +281,50 @@ export class OpenAIPreview implements PreviewHandler {
 
   /**
    * Inject builder mode mock APIs into HTML.
+   *
+   * Uses safeJsonForScript to prevent XSS attacks from malicious data
+   * containing `` or other HTML-sensitive sequences.
    */
   private injectBuilderMode(html: string, input: unknown, output: unknown, mockData?: BuilderMockData): string {
     const theme = mockData?.theme || 'light';
     const displayMode = mockData?.displayMode || 'inline';
     const toolResponses = mockData?.toolResponses || {};
 
+    // Use safeJsonForScript to escape  and other HTML-sensitive sequences
+    const safeTheme = safeJsonForScript(theme);
+    const safeDisplayMode = safeJsonForScript(displayMode);
+    const safeToolResponses = safeJsonForScript(toolResponses);
+    const safeInput = safeJsonForScript(input);
+    const safeOutput = safeJsonForScript(output);
+
     // Create mock window.openai object
     const mockScript = `
       
     `;
@@ -299,6 +335,9 @@ export class OpenAIPreview implements PreviewHandler {
 
   /**
    * Combine hybrid shell + component for builder mode.
+   *
+   * Uses regex patterns for robust placeholder matching and
+   * safeJsonForScript to prevent XSS attacks.
    */
   private combineHybridForBuilder(
     result: HybridBuildResult,
@@ -308,11 +347,15 @@ export class OpenAIPreview implements PreviewHandler {
   ): string {
     let html = result.vendorShell;
 
-    // Inject data
+    // Use safeJsonForScript to escape  and other HTML-sensitive sequences
+    const safeInput = safeJsonForScript(input);
+    const safeOutput = safeJsonForScript(output);
+
+    // Inject data using regex for robust matching (handles whitespace variations)
     html = html
-      .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`)
-      .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`)
-      .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`);
+      .replace(DATA_PLACEHOLDERS.input, `window.__mcpToolInput = ${safeInput};`)
+      .replace(DATA_PLACEHOLDERS.output, `window.__mcpToolOutput = ${safeOutput};`)
+      .replace(DATA_PLACEHOLDERS.structuredContent, `window.__mcpStructuredContent = ${safeOutput};`);
 
     // Inject component and builder mode mock
     const componentScript = `
diff --git a/libs/uipack/src/preview/types.ts b/libs/uipack/src/preview/types.ts
index 0fc4631b..9560b294 100644
--- a/libs/uipack/src/preview/types.ts
+++ b/libs/uipack/src/preview/types.ts
@@ -8,29 +8,26 @@
 
 import type { BuilderResult } from '../build/builders/types';
 
+// Re-export AIPlatformType from the canonical source for convenience
+export type { AIPlatformType } from '../adapters/platform-meta';
+
 // ============================================
 // Platform Types
 // ============================================
 
 /**
- * Supported MCP platforms.
+ * Supported MCP platforms for preview handlers.
+ *
+ * This is a strict subset used for preview handler routing.
+ * - 'openai': OpenAI ChatGPT platform
+ * - 'claude': Anthropic Claude platform
+ * - 'generic': All other MCP clients
+ *
+ * For broader platform detection (including IDEs), see AIPlatformType
+ * from the adapters module, which is the canonical source for that type.
  */
 export type Platform = 'openai' | 'claude' | 'generic';
 
-/**
- * All known platform types for detection.
- */
-export type AIPlatformType =
-  | 'openai'
-  | 'claude'
-  | 'gemini'
-  | 'cursor'
-  | 'continue'
-  | 'cody'
-  | 'ext-apps'
-  | 'generic-mcp'
-  | 'unknown';
-
 // ============================================
 // Preview Options
 // ============================================
diff --git a/libs/uipack/src/registry/render-template.ts b/libs/uipack/src/registry/render-template.ts
index 952898d0..780e64a6 100644
--- a/libs/uipack/src/registry/render-template.ts
+++ b/libs/uipack/src/registry/render-template.ts
@@ -86,7 +86,7 @@ async function renderMdxContent(
   } catch (error) {
     // If MDX rendering fails, warn and return escaped content
     console.error(
-      '[@frontmcp/ui] MDX rendering failed:',
+      '[@frontmcp/uipack] MDX rendering failed:',
       error instanceof Error ? error.stack || error.message : String(error),
     );
 
diff --git a/libs/uipack/src/utils/__tests__/escape-html.test.ts b/libs/uipack/src/utils/__tests__/escape-html.test.ts
index a0f8372b..21b58760 100644
--- a/libs/uipack/src/utils/__tests__/escape-html.test.ts
+++ b/libs/uipack/src/utils/__tests__/escape-html.test.ts
@@ -4,7 +4,7 @@
  * Tests for HTML escaping functions to prevent XSS.
  */
 
-import { escapeHtml, escapeHtmlAttr, escapeJsString } from '../escape-html';
+import { escapeHtml, escapeHtmlAttr, escapeJsString, escapeScriptClose, safeJsonForScript } from '../escape-html';
 
 describe('escapeHtml', () => {
   describe('null and undefined handling', () => {
@@ -122,3 +122,80 @@ describe('escapeJsString', () => {
     expect(escapeJsString('line\u2028sep\u2029')).toBe('line\\u2028sep\\u2029');
   });
 });
+
+describe('escapeScriptClose', () => {
+  it('should escape  closing tags', () => {
+    const json = JSON.stringify({ html: '' });
+    expect(escapeScriptClose(json)).toBe('{"html":"<\\/script>"}');
+  });
+
+  it('should escape multiple closing tags', () => {
+    const json = JSON.stringify({ html: '' });
+    expect(escapeScriptClose(json)).toBe('{"html":"<\\/script> in values', () => {
+    const result = safeJsonForScript({ html: '' });
+    expect(result).toContain('<\\/script>');
+    expect(result).not.toContain('');
+  });
+
+  it('should handle nested objects with script tags', () => {
+    const result = safeJsonForScript({
+      outer: {
+        inner: '',
+      },
+    });
+    expect(result).toBe('{"outer":{"inner":"<\\/script>"}}');
+  });
+
+  it('should handle arrays with script tags', () => {
+    const result = safeJsonForScript(['', '' };
+    const result = safeJsonForScript(malicious);
+
+    // The result should not contain unescaped 
+    expect(result).not.toMatch(/<\/script>/i);
+
+    // It should be valid JSON when the escape is reversed
+    const unescaped = result.replace(/<\\\//g, ' JSON.parse(unescaped)).not.toThrow();
+    expect(JSON.parse(unescaped)).toEqual(malicious);
+  });
+});
diff --git a/libs/uipack/src/utils/escape-html.ts b/libs/uipack/src/utils/escape-html.ts
index 9d188143..d8a4519f 100644
--- a/libs/uipack/src/utils/escape-html.ts
+++ b/libs/uipack/src/utils/escape-html.ts
@@ -105,3 +105,26 @@ export function escapeJsString(str: string): string {
 export function escapeScriptClose(jsonString: string): string {
   return jsonString.replace(/<\//g, '<\\/');
 }
+
+/**
+ * Safely serialize a value to JSON for embedding in HTML ` or other HTML-sensitive sequences.
+ *
+ * @param value - Value to serialize
+ * @returns Escaped JSON string safe for embedding in script tags
+ *
+ * @example
+ * ```typescript
+ * const data = { html: '' };
+ * const safe = safeJsonForScript(data);
+ * // Returns: '{"html":"<\\/script>
+ * ```
+ */
+export function safeJsonForScript(value: unknown): string {
+  return escapeScriptClose(JSON.stringify(value));
+}
diff --git a/libs/uipack/src/utils/index.ts b/libs/uipack/src/utils/index.ts
index 8f29d8ee..81de1cca 100644
--- a/libs/uipack/src/utils/index.ts
+++ b/libs/uipack/src/utils/index.ts
@@ -7,4 +7,4 @@
  */
 
 export { safeStringify } from './safe-stringify';
-export { escapeHtml, escapeHtmlAttr, escapeJsString, escapeScriptClose } from './escape-html';
+export { escapeHtml, escapeHtmlAttr, escapeJsString, escapeScriptClose, safeJsonForScript } from './escape-html';

From 45789f2ad281c6f07362ed34bf4b1c76bf35d1c4 Mon Sep 17 00:00:00 2001
From: David Antoon 
Date: Wed, 24 Dec 2025 02:28:19 +0200
Subject: [PATCH 19/19] feat: Implement component name validation and
 sanitization to prevent code injection attacks

---
 libs/uipack/src/registry/render-template.ts   |  2 +-
 .../src/utils/__tests__/escape-html.test.ts   | 45 ++++++++++++++++++-
 libs/uipack/src/utils/escape-html.ts          | 31 ++++++++++++-
 3 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/libs/uipack/src/registry/render-template.ts b/libs/uipack/src/registry/render-template.ts
index 780e64a6..7570a636 100644
--- a/libs/uipack/src/registry/render-template.ts
+++ b/libs/uipack/src/registry/render-template.ts
@@ -67,7 +67,7 @@ export function containsMdxSyntax(source: string): boolean {
 /**
  * Render MDX content to HTML string.
  *
- * Uses the MDX renderer from @frontmcp/ui.
+ * Uses the MDX client renderer from the local renderers module.
  * Falls back to plain text if MDX rendering is not available.
  */
 async function renderMdxContent(
diff --git a/libs/uipack/src/utils/__tests__/escape-html.test.ts b/libs/uipack/src/utils/__tests__/escape-html.test.ts
index 21b58760..acb3c6db 100644
--- a/libs/uipack/src/utils/__tests__/escape-html.test.ts
+++ b/libs/uipack/src/utils/__tests__/escape-html.test.ts
@@ -175,9 +175,12 @@ describe('safeJsonForScript', () => {
     expect(result).toBe('["<\\/script>","' };
     const result = safeJsonForScript(malicious);
diff --git a/libs/uipack/src/utils/escape-html.ts b/libs/uipack/src/utils/escape-html.ts
index d8a4519f..7ed2ee34 100644
--- a/libs/uipack/src/utils/escape-html.ts
+++ b/libs/uipack/src/utils/escape-html.ts
@@ -112,6 +112,12 @@ export function escapeScriptClose(jsonString: string): string {
  * Combines JSON.stringify with escapeScriptClose to prevent XSS attacks
  * where malicious data contains `` or other HTML-sensitive sequences.
  *
+ * Handles edge cases:
+ * - undefined: Returns 'null' (since undefined is not valid JSON)
+ * - Circular references: Returns error placeholder
+ * - BigInt: Converted to string representation
+ * - Functions/Symbols: Omitted (standard JSON.stringify behavior)
+ *
  * @param value - Value to serialize
  * @returns Escaped JSON string safe for embedding in script tags
  *
@@ -126,5 +132,28 @@ export function escapeScriptClose(jsonString: string): string {
  * ```
  */
 export function safeJsonForScript(value: unknown): string {
-  return escapeScriptClose(JSON.stringify(value));
+  // Handle undefined explicitly since JSON.stringify(undefined) returns undefined
+  if (value === undefined) {
+    return 'null';
+  }
+
+  try {
+    // Use a replacer to handle BigInt values
+    const jsonString = JSON.stringify(value, (_key, val) => {
+      if (typeof val === 'bigint') {
+        return val.toString();
+      }
+      return val;
+    });
+
+    // JSON.stringify can return undefined for some edge cases (pure symbol, function)
+    if (jsonString === undefined) {
+      return 'null';
+    }
+
+    return escapeScriptClose(jsonString);
+  } catch {
+    // Handle circular references and other stringify errors
+    return '{"error":"Value could not be serialized"}';
+  }
 }