diff --git a/.changeset/css-api-resolver.md b/.changeset/css-api-resolver.md new file mode 100644 index 0000000..f254b37 --- /dev/null +++ b/.changeset/css-api-resolver.md @@ -0,0 +1,5 @@ +--- +'@anthropic/helixir-core': minor +--- + +Add `resolve_css_api` MCP tool — resolves every `::part()`, CSS custom property, and slot reference against actual component CEM data. Catches hallucinated part names, invalid token names, and unknown slot names with fuzzy match suggestions. diff --git a/packages/core/src/handlers/css-api-resolver.ts b/packages/core/src/handlers/css-api-resolver.ts new file mode 100644 index 0000000..4988813 --- /dev/null +++ b/packages/core/src/handlers/css-api-resolver.ts @@ -0,0 +1,198 @@ +/** + * CSS API Resolver — resolves every ::part(), CSS custom property, and slot + * reference in agent-generated code against the actual component CEM data. + * + * Returns a structured report showing: + * - Which references are valid vs invalid + * - Closest valid alternatives for typos/hallucinations + * - The component's full style API surface + * + * This is the anti-hallucination tool: agents call it to verify that every + * CSS reference actually exists on the target component before shipping code. + */ + +import type { ComponentMetadata } from './cem.js'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +export interface ResolvedReference { + name: string; + valid: boolean; + description?: string; + suggestion?: string; +} + +export interface ResolvedSection { + resolved: ResolvedReference[]; + available: string[]; +} + +export interface ComponentApiSummary { + tagName: string; + partCount: number; + tokenCount: number; + slotCount: number; + hasStyleApi: boolean; +} + +export interface CssApiResolution { + valid: boolean; + invalidCount: number; + parts: ResolvedSection; + tokens: ResolvedSection; + slots: ResolvedSection; + componentApi: ComponentApiSummary; +} + +// ─── Levenshtein distance ──────────────────────────────────────────────────── + +function levenshtein(a: string, b: string): number { + const m = a.length; + const n = b.length; + const dp: number[][] = Array.from({ length: m + 1 }, () => + Array.from({ length: n + 1 }, () => 0), + ); + + for (let i = 0; i <= m; i++) { + const row = dp[i]; + if (row) row[0] = i; + } + for (let j = 0; j <= n; j++) { + const row = dp[0]; + if (row) row[j] = j; + } + + for (let i = 1; i <= m; i++) { + for (let j = 1; j <= n; j++) { + const cost = a[i - 1] === b[j - 1] ? 0 : 1; + const prevRow = dp[i - 1]; + const currRow = dp[i]; + if (prevRow && currRow) { + currRow[j] = Math.min( + (prevRow[j] ?? 0) + 1, + (currRow[j - 1] ?? 0) + 1, + (prevRow[j - 1] ?? 0) + cost, + ); + } + } + } + + const lastRow = dp[m]; + return lastRow ? (lastRow[n] ?? 0) : 0; +} + +function findClosest(name: string, candidates: string[], maxDistance = 3): string | undefined { + let best: string | undefined; + let bestDist = maxDistance + 1; + for (const c of candidates) { + const d = levenshtein(name, c); + if (d < bestDist) { + bestDist = d; + best = c; + } + } + return best; +} + +// ─── Extractors ────────────────────────────────────────────────────────────── + +function extractPartNames(css: string): string[] { + const seen = new Set(); + const re = /::part\(([^)]+)\)/g; + let match; + while ((match = re.exec(css)) !== null) { + const name = match[1]; + if (name) seen.add(name.trim()); + } + return [...seen]; +} + +function extractComponentTokenDeclarations(css: string): string[] { + // Match CSS custom property declarations (--name: value) that are + // set ON the component host selector, not var() references to global tokens + const seen = new Set(); + const re = /\s(--[\w-]+)\s*:/g; + let match; + while ((match = re.exec(css)) !== null) { + const name = match[1]; + if (name) seen.add(name); + } + return [...seen]; +} + +function extractSlotNames(html: string): string[] { + const seen = new Set(); + const re = /\bslot\s*=\s*["']([^"']+)["']/g; + let match; + while ((match = re.exec(html)) !== null) { + const name = match[1]; + if (name) seen.add(name); + } + return [...seen]; +} + +// ─── Main Entry Point ─────────────────────────────────────────────────────── + +export function resolveCssApi( + css: string, + meta: ComponentMetadata, + html?: string, +): CssApiResolution { + const availableParts = meta.cssParts.map((p) => p.name); + const availableTokens = meta.cssProperties.map((p) => p.name); + const availableSlots = meta.slots.map((s) => s.name); + + // Resolve parts + const usedParts = extractPartNames(css); + const resolvedParts: ResolvedReference[] = usedParts.map((name) => { + const part = meta.cssParts.find((p) => p.name === name); + if (part) { + return { name, valid: true, description: part.description }; + } + const suggestion = findClosest(name, availableParts); + return { name, valid: false, ...(suggestion ? { suggestion } : {}) }; + }); + + // Resolve tokens — only validate component-scoped custom properties + const usedTokens = extractComponentTokenDeclarations(css); + const resolvedTokens: ResolvedReference[] = usedTokens.map((name) => { + const token = meta.cssProperties.find((p) => p.name === name); + if (token) { + return { name, valid: true, description: token.description }; + } + const suggestion = findClosest(name, availableTokens); + return { name, valid: false, ...(suggestion ? { suggestion } : {}) }; + }); + + // Resolve slots (from HTML if provided) + const usedSlots = html ? extractSlotNames(html) : []; + const resolvedSlots: ResolvedReference[] = usedSlots.map((name) => { + const slot = meta.slots.find((s) => s.name === name); + if (slot) { + return { name, valid: true, description: slot.description }; + } + const suggestion = findClosest(name, availableSlots); + return { name, valid: false, ...(suggestion ? { suggestion } : {}) }; + }); + + const invalidCount = + resolvedParts.filter((r) => !r.valid).length + + resolvedTokens.filter((r) => !r.valid).length + + resolvedSlots.filter((r) => !r.valid).length; + + return { + valid: invalidCount === 0, + invalidCount, + parts: { resolved: resolvedParts, available: availableParts }, + tokens: { resolved: resolvedTokens, available: availableTokens }, + slots: { resolved: resolvedSlots, available: availableSlots }, + componentApi: { + tagName: meta.tagName, + partCount: meta.cssParts.length, + tokenCount: meta.cssProperties.length, + slotCount: meta.slots.length, + hasStyleApi: + meta.cssParts.length > 0 || meta.cssProperties.length > 0 || meta.slots.length > 0, + }, + }; +} diff --git a/packages/core/src/tools/styling.ts b/packages/core/src/tools/styling.ts index caa0c5c..2dd2262 100644 --- a/packages/core/src/tools/styling.ts +++ b/packages/core/src/tools/styling.ts @@ -27,6 +27,7 @@ import { checkCssShorthand } from '../handlers/shorthand-checker.js'; import { checkColorContrast } from '../handlers/color-contrast-checker.js'; import { checkTransitionAnimation } from '../handlers/transition-checker.js'; import { checkShadowDomJs } from '../handlers/shadow-dom-js-checker.js'; +import { resolveCssApi } from '../handlers/css-api-resolver.js'; import { createErrorResponse, createSuccessResponse } from '../shared/mcp-helpers.js'; import type { MCPToolResult } from '../shared/mcp-helpers.js'; import { handleToolError } from '../shared/error-handling.js'; @@ -159,6 +160,12 @@ const ValidateComponentCodeArgsSchema = z.object({ framework: z.enum(['react', 'vue', 'angular', 'html']).optional(), }); +const ResolveCssApiArgsSchema = z.object({ + cssText: z.string(), + tagName: z.string(), + htmlText: z.string().optional(), +}); + export const STYLING_TOOL_DEFINITIONS = [ { name: 'diagnose_styling', @@ -752,6 +759,35 @@ export const STYLING_TOOL_DEFINITIONS = [ required: ['codeText'], }, }, + { + name: 'resolve_css_api', + description: + 'Resolves every ::part(), CSS custom property, and slot reference in agent-generated code against the actual component CEM data. Returns a structured report showing which references are valid, which are hallucinated, and suggests the closest valid alternatives. Call this BEFORE shipping any CSS to verify that every part name, token name, and slot name actually exists on the target component.', + inputSchema: { + type: 'object' as const, + properties: { + libraryId: { + type: 'string', + description: + 'Optional library ID to target a specific loaded library instead of the default.', + }, + cssText: { + type: 'string', + description: 'The CSS code to resolve against the component API.', + }, + tagName: { + type: 'string', + description: 'The custom element tag name (e.g. "sl-dialog").', + }, + htmlText: { + type: 'string', + description: + 'Optional HTML code to validate slot attribute references against the component API.', + }, + }, + required: ['cssText', 'tagName'], + }, + }, ]; /** @@ -931,6 +967,13 @@ export function handleStylingCall( return createSuccessResponse(JSON.stringify(result, null, 2)); } + if (name === 'resolve_css_api') { + const { cssText, tagName, htmlText } = ResolveCssApiArgsSchema.parse(args); + const meta = parseCem(tagName, cem); + const result = resolveCssApi(cssText, meta, htmlText); + return createSuccessResponse(JSON.stringify(result, null, 2)); + } + return createErrorResponse(`Unknown styling tool: ${name}`); } catch (err) { const mcpErr = handleToolError(err); diff --git a/tests/handlers/css-api-resolver.test.ts b/tests/handlers/css-api-resolver.test.ts new file mode 100644 index 0000000..ee8006e --- /dev/null +++ b/tests/handlers/css-api-resolver.test.ts @@ -0,0 +1,233 @@ +import { describe, it, expect } from 'vitest'; +import { resolveCssApi } from '../../packages/core/src/handlers/css-api-resolver.js'; +import type { ComponentMetadata } from '../../packages/core/src/handlers/cem.js'; + +// ─── Fixtures ───────────────────────────────────────────────────────────────── + +const dialogMeta: ComponentMetadata = { + tagName: 'sl-dialog', + name: 'SlDialog', + description: 'A dialog component', + members: [ + { name: 'open', kind: 'field', type: 'boolean', description: 'Open state' }, + { name: 'label', kind: 'field', type: 'string', description: 'Dialog label' }, + ], + events: [ + { name: 'sl-show', type: 'CustomEvent', description: 'Emitted when shown' }, + { name: 'sl-hide', type: 'CustomEvent', description: 'Emitted when hidden' }, + ], + slots: [ + { name: '', description: 'Default slot for dialog content' }, + { name: 'label', description: 'The dialog label' }, + { name: 'header-actions', description: 'Actions in the header' }, + { name: 'footer', description: 'The dialog footer' }, + ], + cssProperties: [ + { name: '--width', description: 'Dialog width', default: '31rem' }, + { name: '--header-spacing', description: 'Header padding' }, + { name: '--body-spacing', description: 'Body padding' }, + { name: '--footer-spacing', description: 'Footer padding' }, + ], + cssParts: [ + { name: 'base', description: 'The component base wrapper' }, + { name: 'overlay', description: 'The overlay backdrop' }, + { name: 'panel', description: 'The dialog panel' }, + { name: 'header', description: 'The header area' }, + { name: 'header-actions', description: 'Header action buttons' }, + { name: 'title', description: 'The title text' }, + { name: 'body', description: 'The body content area' }, + { name: 'footer', description: 'The footer area' }, + { name: 'close-button', description: 'The close button' }, + { name: 'close-button__base', description: 'The close button base' }, + ], +}; + +const bareMeta: ComponentMetadata = { + tagName: 'x-bare', + name: 'XBare', + description: '', + members: [], + events: [], + slots: [], + cssProperties: [], + cssParts: [], +}; + +// ─── Part Resolution ───────────────────────────────────────────────────────── + +describe('resolveCssApi — part resolution', () => { + it('resolves valid ::part() references', () => { + const css = ` + sl-dialog::part(panel) { background: white; } + sl-dialog::part(overlay) { opacity: 0.5; } + `; + const result = resolveCssApi(css, dialogMeta); + expect(result.parts.resolved).toHaveLength(2); + expect(result.parts.resolved[0]?.name).toBe('panel'); + expect(result.parts.resolved[0]?.valid).toBe(true); + expect(result.parts.resolved[1]?.name).toBe('overlay'); + }); + + it('flags unknown ::part() names', () => { + const css = `sl-dialog::part(content) { padding: 1rem; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.parts.resolved).toHaveLength(1); + expect(result.parts.resolved[0]?.valid).toBe(false); + expect(result.parts.resolved[0]?.name).toBe('content'); + // "content" is too far from any valid part to suggest an alternative + expect(result.parts.resolved[0]?.suggestion).toBeUndefined(); + }); + + it('suggests closest part name for typos', () => { + const css = `sl-dialog::part(headr) { color: red; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.parts.resolved[0]?.valid).toBe(false); + expect(result.parts.resolved[0]?.suggestion).toBe('header'); + }); + + it('lists all available parts', () => { + const css = `sl-dialog::part(panel) { color: red; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.parts.available).toEqual(dialogMeta.cssParts.map((p) => p.name)); + }); + + it('reports no parts available for bare components', () => { + const css = `x-bare::part(base) { color: red; }`; + const result = resolveCssApi(css, bareMeta); + expect(result.parts.available).toHaveLength(0); + expect(result.parts.resolved[0]?.valid).toBe(false); + expect(result.parts.resolved[0]?.suggestion).toBeUndefined(); + }); +}); + +// ─── Token Resolution ──────────────────────────────────────────────────────── + +describe('resolveCssApi — token resolution', () => { + it('resolves valid CSS custom property references', () => { + const css = `sl-dialog { --width: 40rem; --body-spacing: 2rem; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.tokens.resolved).toHaveLength(2); + expect(result.tokens.resolved[0]?.name).toBe('--width'); + expect(result.tokens.resolved[0]?.valid).toBe(true); + expect(result.tokens.resolved[1]?.name).toBe('--body-spacing'); + expect(result.tokens.resolved[1]?.valid).toBe(true); + }); + + it('flags unknown CSS custom properties', () => { + const css = `sl-dialog { --padding: 1rem; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.tokens.resolved).toHaveLength(1); + expect(result.tokens.resolved[0]?.valid).toBe(false); + expect(result.tokens.resolved[0]?.name).toBe('--padding'); + }); + + it('suggests closest token name for typos', () => { + const css = `sl-dialog { --widht: 40rem; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.tokens.resolved[0]?.valid).toBe(false); + expect(result.tokens.resolved[0]?.suggestion).toBe('--width'); + }); + + it('lists all available tokens', () => { + const css = `sl-dialog { --width: 40rem; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.tokens.available).toEqual(dialogMeta.cssProperties.map((p) => p.name)); + }); + + it('ignores non-component tokens (global design tokens)', () => { + const css = `sl-dialog { color: var(--sl-color-primary-600); }`; + const result = resolveCssApi(css, dialogMeta); + // var() references to global tokens are not component-scoped — don't validate them + expect(result.tokens.resolved).toHaveLength(0); + }); +}); + +// ─── Slot Resolution ───────────────────────────────────────────────────────── + +describe('resolveCssApi — slot resolution', () => { + it('resolves slot attribute usage in HTML', () => { + const css = ``; + const html = `
Footer
Title
`; + const result = resolveCssApi(css, dialogMeta, html); + expect(result.slots.resolved).toHaveLength(2); + expect(result.slots.resolved[0]?.name).toBe('footer'); + expect(result.slots.resolved[0]?.valid).toBe(true); + }); + + it('flags unknown slot names', () => { + const css = ``; + const html = `
Side
`; + const result = resolveCssApi(css, dialogMeta, html); + expect(result.slots.resolved[0]?.valid).toBe(false); + expect(result.slots.resolved[0]?.name).toBe('sidebar'); + }); + + it('suggests closest slot name for typos', () => { + const css = ``; + const html = `
Footer
`; + const result = resolveCssApi(css, dialogMeta, html); + expect(result.slots.resolved[0]?.valid).toBe(false); + expect(result.slots.resolved[0]?.suggestion).toBe('footer'); + }); + + it('lists all available slots', () => { + const css = ``; + const result = resolveCssApi(css, dialogMeta); + expect(result.slots.available).toEqual(dialogMeta.slots.map((s) => s.name)); + }); +}); + +// ─── Overall Summary ───────────────────────────────────────────────────────── + +describe('resolveCssApi — summary', () => { + it('reports clean when all references are valid', () => { + const css = `sl-dialog::part(panel) { --width: 40rem; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.valid).toBe(true); + expect(result.invalidCount).toBe(0); + }); + + it('reports invalid when any reference is wrong', () => { + const css = `sl-dialog::part(nonexistent) { --fake: 1rem; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.valid).toBe(false); + expect(result.invalidCount).toBe(2); + }); + + it('includes component API surface summary', () => { + const css = `sl-dialog::part(panel) { color: red; }`; + const result = resolveCssApi(css, dialogMeta); + expect(result.componentApi.tagName).toBe('sl-dialog'); + expect(result.componentApi.partCount).toBe(10); + expect(result.componentApi.tokenCount).toBe(4); + expect(result.componentApi.slotCount).toBe(4); + expect(result.componentApi.hasStyleApi).toBe(true); + }); + + it('flags components with no style API', () => { + const css = `x-bare::part(base) { color: red; }`; + const result = resolveCssApi(css, bareMeta); + expect(result.componentApi.hasStyleApi).toBe(false); + expect(result.componentApi.partCount).toBe(0); + expect(result.componentApi.tokenCount).toBe(0); + }); + + it('deduplicates repeated part references', () => { + const css = ` + sl-dialog::part(panel) { background: white; } + sl-dialog::part(panel) { color: black; } + `; + const result = resolveCssApi(css, dialogMeta); + expect(result.parts.resolved).toHaveLength(1); + expect(result.parts.resolved[0]?.name).toBe('panel'); + }); + + it('deduplicates repeated token references', () => { + const css = ` + sl-dialog { --width: 40rem; } + .modal sl-dialog { --width: 50rem; } + `; + const result = resolveCssApi(css, dialogMeta); + expect(result.tokens.resolved).toHaveLength(1); + }); +});