@buoy-design/core 0.3.36 → 0.3.37

package/dist/analysis/semantic-diff.test.sync-conflict-20260313-111438-6PCZ3ZU.js

@@ -0,0 +1,766 @@
+// packages/core/src/analysis/semantic-diff.test.ts
+import { describe, it, expect } from "vitest";
+import { SemanticDiffEngine } from "./semantic-diff.js";
+describe("SemanticDiffEngine", () => {
+    const engine = new SemanticDiffEngine();
+    describe("checkFrameworkSprawl", () => {
+        it("returns null for single framework", () => {
+            const result = engine.checkFrameworkSprawl([
+                { name: "react", version: "18.2.0" },
+            ]);
+            expect(result).toBeNull();
+        });
+        it("returns null for empty frameworks", () => {
+            const result = engine.checkFrameworkSprawl([]);
+            expect(result).toBeNull();
+        });
+        it("detects sprawl with two UI frameworks", () => {
+            const result = engine.checkFrameworkSprawl([
+                { name: "react", version: "18.2.0" },
+                { name: "vue", version: "3.0.0" },
+            ]);
+            expect(result).not.toBeNull();
+            expect(result?.type).toBe("framework-sprawl");
+            expect(result?.severity).toBe("warning");
+            expect(result?.message).toContain("2 UI frameworks");
+        });
+        it("ignores non-UI frameworks", () => {
+            const result = engine.checkFrameworkSprawl([
+                { name: "react", version: "18.2.0" },
+                { name: "express", version: "4.0.0" },
+            ]);
+            expect(result).toBeNull();
+        });
+        it("detects sprawl with meta-frameworks", () => {
+            const result = engine.checkFrameworkSprawl([
+                { name: "nextjs", version: "14.0.0" },
+                { name: "nuxt", version: "3.0.0" },
+            ]);
+            expect(result).not.toBeNull();
+            expect(result?.message).toContain("nextjs");
+            expect(result?.message).toContain("nuxt");
+        });
+    });
+    describe("compareComponents", () => {
+        it("matches components with exact names", () => {
+            const source = [createMockComponent("Button", "react")];
+            const target = [createMockComponent("Button", "figma")];
+            const result = engine.compareComponents(source, target);
+            expect(result.matches).toHaveLength(1);
+            expect(result.matches[0].matchType).toBe("exact");
+            expect(result.matches[0].confidence).toBe(1);
+            expect(result.orphanedSource).toHaveLength(0);
+            expect(result.orphanedTarget).toHaveLength(0);
+        });
+        it("identifies orphaned source components", () => {
+            const source = [
+                createMockComponent("Button", "react"),
+                createMockComponent("Card", "react"),
+            ];
+            const target = [createMockComponent("Button", "figma")];
+            const result = engine.compareComponents(source, target);
+            expect(result.orphanedSource).toHaveLength(1);
+            expect(result.orphanedSource[0].name).toBe("Card");
+        });
+        it("identifies orphaned target components", () => {
+            const source = [createMockComponent("Button", "react")];
+            const target = [
+                createMockComponent("Button", "figma"),
+                createMockComponent("Modal", "figma"),
+            ];
+            const result = engine.compareComponents(source, target);
+            expect(result.orphanedTarget).toHaveLength(1);
+            expect(result.orphanedTarget[0].name).toBe("Modal");
+        });
+        it("generates drift signals for orphaned components", () => {
+            const source = [createMockComponent("UniqueComponent", "react")];
+            const target = [];
+            const result = engine.compareComponents(source, target);
+            expect(result.drifts).toHaveLength(1);
+            expect(result.drifts[0].type).toBe("orphaned-component");
+        });
+    });
+    describe("analyzeComponents", () => {
+        describe("deprecated patterns", () => {
+            it("detects deprecated components", () => {
+                const components = [
+                    createMockComponentWithMetadata("OldButton", { deprecated: true }),
+                ];
+                const result = engine.analyzeComponents(components, {
+                    checkDeprecated: true,
+                });
+                expect(result.drifts).toHaveLength(1);
+                expect(result.drifts[0].type).toBe("deprecated-pattern");
+                expect(result.drifts[0].severity).toBe("warning");
+            });
+            it("includes deprecation reason in suggestions", () => {
+                const components = [
+                    createMockComponentWithMetadata("OldButton", {
+                        deprecated: true,
+                        deprecationReason: "Use NewButton instead",
+                    }),
+                ];
+                const result = engine.analyzeComponents(components, {
+                    checkDeprecated: true,
+                });
+                expect(result.drifts[0].details.suggestions).toContain("Use NewButton instead");
+            });
+        });
+        describe("hardcoded values", () => {
+            it("detects hardcoded colors", () => {
+                const components = [
+                    createMockComponentWithMetadata("Button", {
+                        hardcodedValues: [
+                            {
+                                type: "color",
+                                value: "#ff0000",
+                                property: "backgroundColor",
+                                location: "line 10",
+                            },
+                        ],
+                    }),
+                ];
+                const result = engine.analyzeComponents(components, {});
+                const colorDrift = result.drifts.find((d) => d.type === "hardcoded-value" && d.message.includes("color"));
+                expect(colorDrift).toBeDefined();
+                expect(colorDrift?.severity).toBe("warning");
+            });
+            it("provides actionable token suggestions when tokens available", () => {
+                const components = [
+                    createMockComponentWithMetadata("Button", {
+                        hardcodedValues: [
+                            {
+                                type: "color",
+                                value: "#ff0000",
+                                property: "backgroundColor",
+                                location: "line 10",
+                            },
+                            {
+                                type: "color",
+                                value: "#0066cc",
+                                property: "color",
+                                location: "line 15",
+                            },
+                        ],
+                    }),
+                ];
+                const availableTokens = [
+                    createMockToken("--color-danger", "#ff0000", "css"),
+                    createMockToken("--color-primary", "#0066cc", "css"),
+                    createMockToken("--color-secondary", "#666666", "css"),
+                ];
+                const result = engine.analyzeComponents(components, {
+                    availableTokens,
+                });
+                const colorDrift = result.drifts.find((d) => d.type === "hardcoded-value" && d.message.includes("color"));
+                expect(colorDrift).toBeDefined();
+                expect(colorDrift?.details.tokenSuggestions).toBeDefined();
+                expect(colorDrift?.details.tokenSuggestions).toHaveLength(2);
+                expect(colorDrift?.details.tokenSuggestions?.[0]).toContain("--color-danger");
+                expect(colorDrift?.details.tokenSuggestions?.[1]).toContain("--color-primary");
+            });
+        });
+    });
+    describe("token suggestions", () => {
+        it("finds exact color matches", () => {
+            const tokens = [
+                createMockToken("--color-red", "#ff0000", "css"),
+                createMockToken("--color-blue", "#0000ff", "css"),
+            ];
+            const suggestions = engine.findColorTokenSuggestions("#ff0000", tokens);
+            expect(suggestions).toHaveLength(1);
+            expect(suggestions[0]?.suggestedToken).toBe("--color-red");
+            expect(suggestions[0]?.confidence).toBe(1);
+        });
+        it("finds similar color matches", () => {
+            const tokens = [
+                createMockToken("--color-red", "#ff0000", "css"),
+                createMockToken("--color-red-dark", "#cc0000", "css"),
+            ];
+            const suggestions = engine.findColorTokenSuggestions("#ee0000", tokens);
+            expect(suggestions.length).toBeGreaterThan(0);
+            // Should suggest #ff0000 as closer match
+            expect(suggestions[0]?.confidence).toBeGreaterThan(0.9);
+        });
+        it("normalizes hex color formats", () => {
+            const tokens = [createMockToken("--color-red", "#ff0000", "css")];
+            // Test shorthand hex
+            const shorthand = engine.findColorTokenSuggestions("#f00", tokens);
+            expect(shorthand).toHaveLength(1);
+            expect(shorthand[0]?.confidence).toBe(1);
+            // Test rgb()
+            const rgb = engine.findColorTokenSuggestions("rgb(255, 0, 0)", tokens);
+            expect(rgb).toHaveLength(1);
+            expect(rgb[0]?.confidence).toBe(1);
+        });
+        it("finds spacing token matches", () => {
+            const tokens = [
+                {
+                    id: "spacing:small",
+                    name: "--spacing-small",
+                    value: { type: "spacing", value: 8, unit: "px" },
+                    category: "spacing",
+                    source: { type: "css", path: "tokens.css" },
+                    aliases: [],
+                    usedBy: [],
+                    metadata: {},
+                    scannedAt: new Date(),
+                },
+                {
+                    id: "spacing:medium",
+                    name: "--spacing-medium",
+                    value: { type: "spacing", value: 16, unit: "px" },
+                    category: "spacing",
+                    source: { type: "css", path: "tokens.css" },
+                    aliases: [],
+                    usedBy: [],
+                    metadata: {},
+                    scannedAt: new Date(),
+                },
+            ];
+            const suggestions = engine.findSpacingTokenSuggestions("16px", tokens);
+            expect(suggestions).toHaveLength(1);
+            expect(suggestions[0]?.suggestedToken).toBe("--spacing-medium");
+            expect(suggestions[0]?.confidence).toBe(1);
+        });
+    });
+    describe("compareTokens", () => {
+        it("matches tokens with same names", () => {
+            const source = [createMockToken("--primary-color", "#0066cc", "css")];
+            const target = [createMockToken("--primary-color", "#0066cc", "figma")];
+            const result = engine.compareTokens(source, target);
+            expect(result.matches).toHaveLength(1);
+            expect(result.drifts).toHaveLength(0);
+        });
+        it("detects value divergence", () => {
+            const source = [createMockToken("--primary-color", "#0066cc", "css")];
+            const target = [createMockToken("--primary-color", "#ff0000", "figma")];
+            const result = engine.compareTokens(source, target);
+            expect(result.matches).toHaveLength(1);
+            expect(result.drifts).toHaveLength(1);
+            expect(result.drifts[0].type).toBe("value-divergence");
+        });
+        it("identifies orphaned tokens", () => {
+            const source = [
+                createMockToken("--primary-color", "#0066cc", "css"),
+                createMockToken("--secondary-color", "#666666", "css"),
+            ];
+            const target = [createMockToken("--primary-color", "#0066cc", "figma")];
+            const result = engine.compareTokens(source, target);
+            expect(result.orphanedSource).toHaveLength(1);
+            expect(result.orphanedSource[0].name).toBe("--secondary-color");
+        });
+    });
+    describe("performance", () => {
+        it("handles large component sets efficiently", () => {
+            // Create 500 source and 500 target components
+            const sourceComponents = [];
+            const targetComponents = [];
+            for (let i = 0; i < 500; i++) {
+                sourceComponents.push(createMockComponent(`Component${i}`, "react"));
+                targetComponents.push(createMockComponent(`Component${i}`, "figma"));
+            }
+            // Add some unique components to test orphan detection
+            for (let i = 500; i < 550; i++) {
+                sourceComponents.push(createMockComponent(`UniqueSource${i}`, "react"));
+                targetComponents.push(createMockComponent(`UniqueTarget${i}`, "figma"));
+            }
+            const startTime = performance.now();
+            const result = engine.compareComponents(sourceComponents, targetComponents);
+            const endTime = performance.now();
+            const duration = endTime - startTime;
+            // Verify correctness
+            expect(result.matches).toHaveLength(500);
+            expect(result.orphanedSource).toHaveLength(50);
+            expect(result.orphanedTarget).toHaveLength(50);
+            // Performance assertion: should complete in under 500ms
+            // With O(n²) this would take several seconds for 1000 components
+            expect(duration).toBeLessThan(500);
+            // Log performance for visibility
+            console.log(`Performance: 550+550 components matched in ${duration.toFixed(2)}ms`);
+        });
+        it("caches normalized names correctly", () => {
+            // Create components with similar names to test caching
+            const source = [
+                createMockComponent("MyButton", "react"),
+                createMockComponent("my-button", "react"),
+                createMockComponent("my_button", "react"),
+            ];
+            const target = [createMockComponent("mybutton", "figma")];
+            const result = engine.compareComponents(source, target);
+            // All three should match the same target (first one wins)
+            expect(result.matches).toHaveLength(1);
+            expect(result.matches[0].source.name).toBe("MyButton");
+        });
+    });
+    describe("duplicate detection", () => {
+        it("does NOT flag compound components as duplicates (Button vs ButtonGroup)", () => {
+            const components = [
+                createMockComponent("Button", "react"),
+                createMockComponent("ButtonGroup", "react"),
+            ];
+            // Analyze should not produce duplicate warnings for compound components
+            const result = engine.analyzeComponents(components, {
+                checkNaming: true,
+            });
+            // Filter for naming-inconsistency drift signals about potential duplicates
+            const duplicateDrifts = result.drifts.filter((d) => d.type === "naming-inconsistency" &&
+                d.message.toLowerCase().includes("duplicate"));
+            expect(duplicateDrifts).toHaveLength(0);
+        });
+        it("does NOT flag Card vs CardHeader/CardBody/CardFooter as duplicates", () => {
+            const components = [
+                createMockComponent("Card", "react"),
+                createMockComponent("CardHeader", "react"),
+                createMockComponent("CardBody", "react"),
+                createMockComponent("CardFooter", "react"),
+            ];
+            const result = engine.analyzeComponents(components, {
+                checkNaming: true,
+            });
+            const duplicateDrifts = result.drifts.filter((d) => d.type === "naming-inconsistency" &&
+                d.message.toLowerCase().includes("duplicate"));
+            expect(duplicateDrifts).toHaveLength(0);
+        });
+        it("does NOT flag Modal vs ModalTrigger/ModalContent/ModalOverlay as duplicates", () => {
+            const components = [
+                createMockComponent("Modal", "react"),
+                createMockComponent("ModalTrigger", "react"),
+                createMockComponent("ModalContent", "react"),
+                createMockComponent("ModalOverlay", "react"),
+            ];
+            const result = engine.analyzeComponents(components, {
+                checkNaming: true,
+            });
+            const duplicateDrifts = result.drifts.filter((d) => d.type === "naming-inconsistency" &&
+                d.message.toLowerCase().includes("duplicate"));
+            expect(duplicateDrifts).toHaveLength(0);
+        });
+        it("DOES flag version duplicates like Button vs ButtonNew", () => {
+            const components = [
+                createMockComponent("Button", "react"),
+                createMockComponent("ButtonNew", "react"),
+            ];
+            const result = engine.analyzeComponents(components, {
+                checkNaming: true,
+            });
+            const duplicateDrifts = result.drifts.filter((d) => d.type === "naming-inconsistency" &&
+                d.message.toLowerCase().includes("duplicate"));
+            expect(duplicateDrifts.length).toBeGreaterThan(0);
+        });
+        it("DOES flag legacy duplicates like Card vs CardLegacy", () => {
+            const components = [
+                createMockComponent("Card", "react"),
+                createMockComponent("CardLegacy", "react"),
+            ];
+            const result = engine.analyzeComponents(components, {
+                checkNaming: true,
+            });
+            const duplicateDrifts = result.drifts.filter((d) => d.type === "naming-inconsistency" &&
+                d.message.toLowerCase().includes("duplicate"));
+            expect(duplicateDrifts.length).toBeGreaterThan(0);
+        });
+        it("DOES flag versioned duplicates like Input vs InputV2", () => {
+            const components = [
+                createMockComponent("Input", "react"),
+                createMockComponent("InputV2", "react"),
+            ];
+            const result = engine.analyzeComponents(components, {
+                checkNaming: true,
+            });
+            const duplicateDrifts = result.drifts.filter((d) => d.type === "naming-inconsistency" &&
+                d.message.toLowerCase().includes("duplicate"));
+            expect(duplicateDrifts.length).toBeGreaterThan(0);
+        });
+        it("does NOT flag unrelated components with similar prefixes", () => {
+            const components = [
+                createMockComponent("Tab", "react"),
+                createMockComponent("Table", "react"),
+                createMockComponent("Tabs", "react"),
+            ];
+            const result = engine.analyzeComponents(components, {
+                checkNaming: true,
+            });
+            const duplicateDrifts = result.drifts.filter((d) => d.type === "naming-inconsistency" &&
+                d.message.toLowerCase().includes("duplicate"));
+            expect(duplicateDrifts).toHaveLength(0);
+        });
+    });
+    describe("accessibility-conflict", () => {
+        it("detects accessibility issues on interactive components without aria-label or children", () => {
+            const component = {
+                ...createMockComponent("Button", "react"),
+                props: [], // No children or aria-label props
+                metadata: {
+                    accessibility: {
+                        issues: ["Missing accessible label for interactive element"],
+                    },
+                },
+            };
+            const result = engine.analyzeComponents([component], {
+                checkAccessibility: true,
+            });
+            const a11yDrifts = result.drifts.filter((d) => d.type === "accessibility-conflict");
+            expect(a11yDrifts).toHaveLength(1);
+            expect(a11yDrifts[0].severity).toBe("critical");
+            expect(a11yDrifts[0].message).toContain("accessibility issues");
+        });
+        it("does not flag interactive components that have aria-label prop", () => {
+            const component = {
+                ...createMockComponent("Button", "react"),
+                props: [
+                    {
+                        name: "aria-label",
+                        type: "string",
+                        required: false,
+                    },
+                ],
+                metadata: {
+                    accessibility: {
+                        issues: ["Missing accessible label for interactive element"],
+                    },
+                },
+            };
+            const result = engine.analyzeComponents([component], {
+                checkAccessibility: true,
+            });
+            const a11yDrifts = result.drifts.filter((d) => d.type === "accessibility-conflict");
+            expect(a11yDrifts).toHaveLength(0);
+        });
+        it("does not flag interactive components that have children prop", () => {
+            const component = {
+                ...createMockComponent("Button", "react"),
+                props: [
+                    {
+                        name: "children",
+                        type: "ReactNode",
+                        required: false,
+                    },
+                ],
+                metadata: {
+                    accessibility: {
+                        issues: ["Missing accessible label for interactive element"],
+                    },
+                },
+            };
+            const result = engine.analyzeComponents([component], {
+                checkAccessibility: true,
+            });
+            const a11yDrifts = result.drifts.filter((d) => d.type === "accessibility-conflict");
+            expect(a11yDrifts).toHaveLength(0);
+        });
+        it("skips accessibility checks when checkAccessibility is false", () => {
+            const component = {
+                ...createMockComponent("Button", "react"),
+                props: [],
+                metadata: {
+                    accessibility: {
+                        issues: ["Missing accessible label for interactive element"],
+                    },
+                },
+            };
+            const result = engine.analyzeComponents([component], {
+                checkAccessibility: false,
+            });
+            const a11yDrifts = result.drifts.filter((d) => d.type === "accessibility-conflict");
+            expect(a11yDrifts).toHaveLength(0);
+        });
+        it("skips accessibility checks when checkAccessibility is undefined", () => {
+            const component = {
+                ...createMockComponent("Button", "react"),
+                props: [],
+                metadata: {
+                    accessibility: {
+                        issues: ["Missing accessible label for interactive element"],
+                    },
+                },
+            };
+            const result = engine.analyzeComponents([component], {});
+            const a11yDrifts = result.drifts.filter((d) => d.type === "accessibility-conflict");
+            expect(a11yDrifts).toHaveLength(0);
+        });
+    });
+    describe("checkColorContrast", () => {
+        it("detects insufficient color contrast", () => {
+            const component = createMockComponentWithMetadata("Button", {
+                hardcodedValues: [
+                    {
+                        type: "color",
+                        value: "#777",
+                        property: "color",
+                        location: "Button.tsx:10",
+                    },
+                    {
+                        type: "color",
+                        value: "#999",
+                        property: "background-color",
+                        location: "Button.tsx:11",
+                    },
+                ],
+            });
+            const result = engine.analyzeComponents([component], {
+                checkAccessibility: true,
+            });
+            const contrastDrifts = result.drifts.filter((d) => d.type === "color-contrast");
+            expect(contrastDrifts.length).toBeGreaterThan(0);
+            expect(contrastDrifts[0].severity).toBe("critical");
+            expect(contrastDrifts[0].message).toContain("insufficient color contrast");
+        });
+        it("does not flag sufficient color contrast", () => {
+            const component = createMockComponentWithMetadata("Button", {
+                hardcodedValues: [
+                    {
+                        type: "color",
+                        value: "#000",
+                        property: "color",
+                        location: "Button.tsx:10",
+                    },
+                    {
+                        type: "color",
+                        value: "#fff",
+                        property: "background-color",
+                        location: "Button.tsx:11",
+                    },
+                ],
+            });
+            const result = engine.analyzeComponents([component], {
+                checkAccessibility: true,
+            });
+            const contrastDrifts = result.drifts.filter((d) => d.type === "color-contrast");
+            expect(contrastDrifts).toHaveLength(0);
+        });
+        it("skips contrast check when accessibility checking is disabled", () => {
+            const component = createMockComponentWithMetadata("Button", {
+                hardcodedValues: [
+                    {
+                        type: "color",
+                        value: "#777",
+                        property: "color",
+                        location: "Button.tsx:10",
+                    },
+                    {
+                        type: "color",
+                        value: "#999",
+                        property: "background-color",
+                        location: "Button.tsx:11",
+                    },
+                ],
+            });
+            const result = engine.analyzeComponents([component], {
+                checkAccessibility: false,
+            });
+            const contrastDrifts = result.drifts.filter((d) => d.type === "color-contrast");
+            expect(contrastDrifts).toHaveLength(0);
+        });
+    });
+    describe("missing-documentation", () => {
+        it("flags components without documentation when there is partial adoption", () => {
+            const undocumented = createMockComponent("Button", "react");
+            undocumented.metadata.documentation = undefined;
+            const documented = createMockComponent("Card", "react");
+            documented.metadata.documentation = "A card container component";
+            const result = engine.analyzeComponents([undocumented, documented], {
+                checkDocumentation: true,
+            });
+            const docDrifts = result.drifts.filter((d) => d.type === "missing-documentation");
+            expect(docDrifts.length).toBeGreaterThan(0);
+            expect(docDrifts[0].severity).toBe("info");
+            expect(docDrifts[0].message).toContain("Button");
+        });
+        it("does not flag when no components have documentation (no adoption)", () => {
+            const comp1 = createMockComponent("Button", "react");
+            comp1.metadata.documentation = undefined;
+            const comp2 = createMockComponent("Card", "react");
+            comp2.metadata.documentation = undefined;
+            const result = engine.analyzeComponents([comp1, comp2], {
+                checkDocumentation: true,
+            });
+            const docDrifts = result.drifts.filter((d) => d.type === "missing-documentation");
+            expect(docDrifts).toHaveLength(0);
+        });
+        it("does not flag components with documentation", () => {
+            const comp = createMockComponent("Button", "react");
+            comp.metadata.documentation = "A primary action button component";
+            const result = engine.analyzeComponents([comp], {
+                checkDocumentation: true,
+            });
+            const docDrifts = result.drifts.filter((d) => d.type === "missing-documentation");
+            expect(docDrifts).toHaveLength(0);
+        });
+        it("skips documentation check when flag is false", () => {
+            const comp = createMockComponent("Button", "react");
+            comp.metadata.documentation = undefined;
+            const result = engine.analyzeComponents([comp], {
+                checkDocumentation: false,
+            });
+            const docDrifts = result.drifts.filter((d) => d.type === "missing-documentation");
+            expect(docDrifts).toHaveLength(0);
+        });
+    });
+    describe("checkUnusedComponents", () => {
+        it("detects unused components", () => {
+            const components = [
+                createMockComponent("Button", "react"),
+                createMockComponent("Card", "react"),
+            ];
+            const usageMap = new Map([
+                ["react:Button", 5], // Button is used 5 times
+                ["react:Card", 0], // Card is never used
+            ]);
+            const drifts = engine.checkUnusedComponents(components, usageMap);
+            expect(drifts).toHaveLength(1);
+            expect(drifts[0].type).toBe("unused-component");
+            expect(drifts[0].severity).toBe("warning");
+            expect(drifts[0].message).toContain("Card");
+            expect(drifts[0].message).toContain("never used");
+        });
+        it("does not flag used components", () => {
+            const components = [
+                createMockComponent("Button", "react"),
+                createMockComponent("Card", "react"),
+            ];
+            const usageMap = new Map([
+                ["react:Button", 5],
+                ["react:Card", 3],
+            ]);
+            const drifts = engine.checkUnusedComponents(components, usageMap);
+            expect(drifts).toHaveLength(0);
+        });
+        it("checks usage by component name if id not found", () => {
+            const components = [createMockComponent("Button", "react")];
+            const usageMap = new Map([
+                ["Button", 5], // Usage tracked by name instead of ID
+            ]);
+            const drifts = engine.checkUnusedComponents(components, usageMap);
+            expect(drifts).toHaveLength(0);
+        });
+        it("flags components not in the usage map (no references found)", () => {
+            const comp = createMockComponent("NewComp", "react");
+            const usageMap = new Map();
+            const drifts = engine.checkUnusedComponents([comp], usageMap);
+            expect(drifts).toHaveLength(1);
+            expect(drifts[0].type).toBe("unused-component");
+        });
+    });
+    describe("checkUnusedTokens", () => {
+        it("detects unused tokens", () => {
+            const tokens = [
+                createMockToken("primary", "#3b82f6", "css"),
+                createMockToken("secondary", "#6b7280", "css"),
+            ];
+            const usageMap = new Map([
+                ["css:primary", 10], // primary is used
+                ["css:secondary", 0], // secondary is never used
+            ]);
+            const drifts = engine.checkUnusedTokens(tokens, usageMap);
+            expect(drifts).toHaveLength(1);
+            expect(drifts[0].type).toBe("unused-token");
+            expect(drifts[0].severity).toBe("info");
+            expect(drifts[0].message).toContain("secondary");
+            expect(drifts[0].message).toContain("never used");
+        });
+        it("does not flag used tokens", () => {
+            const tokens = [
+                createMockToken("primary", "#3b82f6", "css"),
+                createMockToken("secondary", "#6b7280", "css"),
+            ];
+            const usageMap = new Map([
+                ["css:primary", 10],
+                ["css:secondary", 5],
+            ]);
+            const drifts = engine.checkUnusedTokens(tokens, usageMap);
+            expect(drifts).toHaveLength(0);
+        });
+        it("checks usage by token name if id not found", () => {
+            const tokens = [createMockToken("primary", "#3b82f6", "css")];
+            const usageMap = new Map([
+                ["primary", 10], // Usage tracked by name instead of ID
+            ]);
+            const drifts = engine.checkUnusedTokens(tokens, usageMap);
+            expect(drifts).toHaveLength(0);
+        });
+        it("flags tokens not in the usage map (no references found)", () => {
+            const token = createMockToken("color-primary", "#ff0000", "css");
+            const usageMap = new Map();
+            const drifts = engine.checkUnusedTokens([token], usageMap);
+            expect(drifts).toHaveLength(1);
+            expect(drifts[0].type).toBe("unused-token");
+        });
+    });
+    describe("checkUnusedTokens prefix matching", () => {
+        it("matches token usage when map key lacks -- prefix", () => {
+            const tokens = [
+                createMockToken("--primary-color", "#0066cc", "css"),
+            ];
+            // Usage map has key WITHOUT -- prefix (as collectUsages captures)
+            const usageMap = new Map([["primary-color", 3]]);
+            const drifts = engine.checkUnusedTokens(tokens, usageMap);
+            expect(drifts).toHaveLength(0); // Should NOT flag as unused
+        });
+        it("matches token usage when map key has -- prefix", () => {
+            const tokens = [
+                createMockToken("--primary-color", "#0066cc", "css"),
+            ];
+            const usageMap = new Map([["--primary-color", 3]]);
+            const drifts = engine.checkUnusedTokens(tokens, usageMap);
+            expect(drifts).toHaveLength(0);
+        });
+        it("matches SCSS token when map key lacks $ prefix", () => {
+            const tokens = [
+                createMockToken("$primary-color", "#0066cc", "css"),
+            ];
+            const usageMap = new Map([["primary-color", 3]]);
+            const drifts = engine.checkUnusedTokens(tokens, usageMap);
+            expect(drifts).toHaveLength(0);
+        });
+        it("flags truly unused token", () => {
+            const tokens = [
+                createMockToken("--unused-color", "#999999", "css"),
+            ];
+            const usageMap = new Map([["primary-color", 3]]);
+            const drifts = engine.checkUnusedTokens(tokens, usageMap);
+            expect(drifts).toHaveLength(1);
+            expect(drifts[0].type).toBe("unused-token");
+        });
+    });
+});
+// Helper functions
+function createMockComponent(name, type) {
+    const source = type === "react"
+        ? { type: "react", path: `src/${name}.tsx`, exportName: name }
+        : { type: "figma", fileKey: "abc", nodeId: "1:1" };
+    return {
+        id: `${type}:${name}`,
+        name,
+        source,
+        props: [],
+        variants: [],
+        tokens: [],
+        dependencies: [],
+        metadata: {},
+        scannedAt: new Date(),
+    };
+}
+function createMockComponentWithMetadata(name, metadata) {
+    return {
+        ...createMockComponent(name, "react"),
+        metadata,
+    };
+}
+function createMockToken(name, hexValue, type) {
+    const source = type === "css"
+        ? { type: "css", path: "tokens.css" }
+        : { type: "figma", fileKey: "abc" };
+    return {
+        id: `${type}:${name}`,
+        name,
+        value: { type: "color", hex: hexValue },
+        category: "color",
+        source,
+        aliases: [],
+        usedBy: [],
+        metadata: {},
+        scannedAt: new Date(),
+    };
+}
+//# sourceMappingURL=semantic-diff.test.sync-conflict-20260313-111438-6PCZ3ZU.js.map