@usefragments/core 1.3.0 → 1.4.0

package/dist/react-types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode, JSX } from 'react';
-export { F as FragmentDefinition, a as FragmentDefinitionV2 } from './governance-DYSirwJu.js';
+export { F as FragmentDefinition, a as FragmentDefinitionV2 } from './governance-DxdJV6lx.js';
 import 'zod';
 import './topology/index.js';
 import './types-xJ2xyp_G.js';

package/dist/registry.d.ts

@@ -216,7 +216,7 @@ declare const registryComponentSchema: z.ZodObject<{
     componentId: string;
     name: string;
     publicRef: string;
-    tier: "core" | "custom" | "utility" | "composition";
+    tier: "custom" | "utility" | "composition" | "core";
     examples: unknown[];
     files: {
         path: string;
@@ -264,7 +264,7 @@ declare const registryComponentSchema: z.ZodObject<{
     provenance?: Record<string, unknown> | undefined;
     category?: string | undefined;
     contract?: unknown;
-    tier?: "core" | "custom" | "utility" | "composition" | undefined;
+    tier?: "custom" | "utility" | "composition" | "core" | undefined;
     examples?: unknown[] | undefined;
     styleFiles?: string[] | undefined;
     tokenDependencies?: string[] | undefined;
@@ -498,7 +498,7 @@ declare const registryManifestDraftSchema: z.ZodObject<{
         componentId: string;
         name: string;
         publicRef: string;
-        tier: "core" | "custom" | "utility" | "composition";
+        tier: "custom" | "utility" | "composition" | "core";
         examples: unknown[];
         files: {
             path: string;
@@ -546,7 +546,7 @@ declare const registryManifestDraftSchema: z.ZodObject<{
         provenance?: Record<string, unknown> | undefined;
         category?: string | undefined;
         contract?: unknown;
-        tier?: "core" | "custom" | "utility" | "composition" | undefined;
+        tier?: "custom" | "utility" | "composition" | "core" | undefined;
         examples?: unknown[] | undefined;
         styleFiles?: string[] | undefined;
         tokenDependencies?: string[] | undefined;
@@ -611,7 +611,7 @@ declare const registryManifestDraftSchema: z.ZodObject<{
         componentId: string;
         name: string;
         publicRef: string;
-        tier: "core" | "custom" | "utility" | "composition";
+        tier: "custom" | "utility" | "composition" | "core";
         examples: unknown[];
         files: {
             path: string;
@@ -713,7 +713,7 @@ declare const registryManifestDraftSchema: z.ZodObject<{
         provenance?: Record<string, unknown> | undefined;
         category?: string | undefined;
         contract?: unknown;
-        tier?: "core" | "custom" | "utility" | "composition" | undefined;
+        tier?: "custom" | "utility" | "composition" | "core" | undefined;
         examples?: unknown[] | undefined;
         styleFiles?: string[] | undefined;
         tokenDependencies?: string[] | undefined;
@@ -971,7 +971,7 @@ declare const registryManifestSchema: z.ZodObject<{
         componentId: string;
         name: string;
         publicRef: string;
-        tier: "core" | "custom" | "utility" | "composition";
+        tier: "custom" | "utility" | "composition" | "core";
         examples: unknown[];
         files: {
             path: string;
@@ -1019,7 +1019,7 @@ declare const registryManifestSchema: z.ZodObject<{
         provenance?: Record<string, unknown> | undefined;
         category?: string | undefined;
         contract?: unknown;
-        tier?: "core" | "custom" | "utility" | "composition" | undefined;
+        tier?: "custom" | "utility" | "composition" | "core" | undefined;
         examples?: unknown[] | undefined;
         styleFiles?: string[] | undefined;
         tokenDependencies?: string[] | undefined;
@@ -1086,7 +1086,7 @@ declare const registryManifestSchema: z.ZodObject<{
         componentId: string;
         name: string;
         publicRef: string;
-        tier: "core" | "custom" | "utility" | "composition";
+        tier: "custom" | "utility" | "composition" | "core";
         examples: unknown[];
         files: {
             path: string;
@@ -1189,7 +1189,7 @@ declare const registryManifestSchema: z.ZodObject<{
         provenance?: Record<string, unknown> | undefined;
         category?: string | undefined;
         contract?: unknown;
-        tier?: "core" | "custom" | "utility" | "composition" | undefined;
+        tier?: "custom" | "utility" | "composition" | "core" | undefined;
         examples?: unknown[] | undefined;
         styleFiles?: string[] | undefined;
         tokenDependencies?: string[] | undefined;
@@ -1450,7 +1450,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             componentId: string;
             name: string;
             publicRef: string;
-            tier: "core" | "custom" | "utility" | "composition";
+            tier: "custom" | "utility" | "composition" | "core";
             examples: unknown[];
             files: {
                 path: string;
@@ -1498,7 +1498,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             provenance?: Record<string, unknown> | undefined;
             category?: string | undefined;
             contract?: unknown;
-            tier?: "core" | "custom" | "utility" | "composition" | undefined;
+            tier?: "custom" | "utility" | "composition" | "core" | undefined;
             examples?: unknown[] | undefined;
             styleFiles?: string[] | undefined;
             tokenDependencies?: string[] | undefined;
@@ -1565,7 +1565,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             componentId: string;
             name: string;
             publicRef: string;
-            tier: "core" | "custom" | "utility" | "composition";
+            tier: "custom" | "utility" | "composition" | "core";
             examples: unknown[];
             files: {
                 path: string;
@@ -1668,7 +1668,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             provenance?: Record<string, unknown> | undefined;
             category?: string | undefined;
             contract?: unknown;
-            tier?: "core" | "custom" | "utility" | "composition" | undefined;
+            tier?: "custom" | "utility" | "composition" | "core" | undefined;
             examples?: unknown[] | undefined;
             styleFiles?: string[] | undefined;
             tokenDependencies?: string[] | undefined;
@@ -1773,7 +1773,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             componentId: string;
             name: string;
             publicRef: string;
-            tier: "core" | "custom" | "utility" | "composition";
+            tier: "custom" | "utility" | "composition" | "core";
             examples: unknown[];
             files: {
                 path: string;
@@ -1886,7 +1886,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             provenance?: Record<string, unknown> | undefined;
             category?: string | undefined;
             contract?: unknown;
-            tier?: "core" | "custom" | "utility" | "composition" | undefined;
+            tier?: "custom" | "utility" | "composition" | "core" | undefined;
             examples?: unknown[] | undefined;
             styleFiles?: string[] | undefined;
             tokenDependencies?: string[] | undefined;
@@ -1979,7 +1979,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             componentId: string;
             name: string;
             publicRef: string;
-            tier: "core" | "custom" | "utility" | "composition";
+            tier: "custom" | "utility" | "composition" | "core";
             examples: unknown[];
             files: {
                 path: string;
@@ -2092,7 +2092,7 @@ declare const registryArtifactSchema: z.ZodEffects<z.ZodObject<{
             provenance?: Record<string, unknown> | undefined;
             category?: string | undefined;
             contract?: unknown;
-            tier?: "core" | "custom" | "utility" | "composition" | undefined;
+            tier?: "custom" | "utility" | "composition" | "core" | undefined;
             examples?: unknown[] | undefined;
             styleFiles?: string[] | undefined;
             tokenDependencies?: string[] | undefined;

package/dist/schemas/index.d.ts

@@ -1,3 +1,3 @@
 import 'zod';
 export { LegacySeverityLevel, Severity, SeverityLevel, legacySeverityLevelSchema, severityLevelSchema, severitySchema } from '../severity.js';
-export { b as AGENT_FORMAT_SCHEMA_VERSION, c as AgentErrorEnvelope, A as AgentFormat, d as AgentOutput, Q as FactEvidence, R as FactLocation, F as Finding, a as FindingFix, f as FindingReplaceClassTokenFix, g as FindingReplaceComponentFix, h as FindingReplaceImportFix, i as FindingReplacePropValueFix, j as FindingReplaceStyleValueFix, k as Fix, G as GovernanceVerdict, l as GovernanceVerdictMetadata, S as SuppressionDirective, V as ValidatorResult, n as Violation, o as agentErrorEnvelopeSchema, T as agentFindingSchema, p as agentFormatSchema, q as agentIntegritySchema, r as agentOutputSchema, U as agentPlanSchema, t as factEvidenceSchema, u as factLocationSchema, v as findingFixSchema, w as findingReplaceClassTokenFixSchema, x as findingReplaceComponentFixSchema, y as findingReplaceImportFixSchema, z as findingReplacePropValueFixSchema, B as findingReplaceStyleValueFixSchema, C as findingSchema, D as fixSchema, H as governanceVerdictMetadataSchema, J as governanceVerdictSchema, K as normalizeFinding, L as normalizeSeverity, M as normalizeViolation, N as suppressionDirectiveSchema, O as validatorResultSchema, P as violationSchema } from '../index-h_yWj15D.js';
+export { b as AGENT_FORMAT_SCHEMA_VERSION, c as AgentErrorEnvelope, A as AgentFormat, d as AgentOutput, Q as FactEvidence, R as FactLocation, F as Finding, a as FindingFix, f as FindingReplaceClassTokenFix, g as FindingReplaceComponentFix, h as FindingReplaceImportFix, i as FindingReplacePropValueFix, j as FindingReplaceStyleValueFix, k as Fix, G as GovernanceVerdict, l as GovernanceVerdictMetadata, S as SuppressionDirective, V as ValidatorResult, n as Violation, o as agentErrorEnvelopeSchema, T as agentFindingSchema, p as agentFormatSchema, q as agentIntegritySchema, r as agentOutputSchema, U as agentPlanSchema, t as factEvidenceSchema, u as factLocationSchema, v as findingFixSchema, w as findingReplaceClassTokenFixSchema, x as findingReplaceComponentFixSchema, y as findingReplaceImportFixSchema, z as findingReplacePropValueFixSchema, B as findingReplaceStyleValueFixSchema, C as findingSchema, D as fixSchema, H as governanceVerdictMetadataSchema, J as governanceVerdictSchema, K as normalizeFinding, L as normalizeSeverity, M as normalizeViolation, N as suppressionDirectiveSchema, O as validatorResultSchema, P as violationSchema } from '../index-0lmh0Lbo.js';

package/dist/test-utils.d.ts

@@ -1,4 +1,4 @@
-import { C as CompiledBlock, b as CompiledFragment } from './governance-DYSirwJu.js';
+import { C as CompiledBlock, b as CompiledFragment } from './governance-DxdJV6lx.js';
 import 'zod';
 import 'react';
 import './topology/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/core",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "MIT",
   "description": "Core types, schemas, and runtime API for Fragments component definitions",
   "author": "Conan McNicholl",

package/src/constants.ts

@@ -30,6 +30,9 @@ export const BRAND = {
   /** CLI command name (e.g., "fragments") */
   cliCommand: "fragments",
 
+  /** Full user-facing CLI invocation for copy printed to end users (e.g., "npx @usefragments/cli") */
+  cliInvocation: "npx @usefragments/cli",
+
   /** Directory for storing fragments, registry, and cache */
   dataDir: ".fragments",
 

package/src/facts/builders.ts

@@ -620,7 +620,7 @@ export function makeUsagePropResolvedFact(input: {
 export function makeUsageInlineStyleFact(input: {
   nodeId: FactId;
   property: string;
-  valueKind: "static" | "number" | "css-variable";
+  valueKind: "static" | "number" | "css-variable" | "dynamic-raw";
   value: string;
 }): UsageInlineStyleFact {
   return {

package/src/facts/types.ts

@@ -310,7 +310,20 @@ export interface UsageInlineStyleFact extends BaseFact {
   kind: "usage_inline_style";
   nodeId: FactId;
   property: string;
-  valueKind: "static" | "number" | "css-variable";
+  /**
+   * How the extractor resolved the value:
+   * - `static`       — a string literal (`"#f00"`, `"12px"`).
+   * - `number`       — a numeric literal (React treats it as `px`).
+   * - `css-variable` — a `var(--token)` reference; rules treat it as a token.
+   * - `dynamic-raw`  — a value constructed at runtime whose *static* fragments
+   *   unambiguously begin a raw color literal (`` `#${red}` ``,
+   *   `` `rgb(${r},${g},${b})` ``, `"#" + hex`). `value` carries a reconstructed
+   *   skeleton with each interpolation rendered as `‹expr›`. Detect-only: a rule
+   *   may flag it as a raw color but must NEVER attach a deterministic fix
+   *   (the value is partly runtime). Only color-shaped dynamic values ever
+   *   surface as facts — a non-color dynamic value stays opaque.
+   */
+  valueKind: "static" | "number" | "css-variable" | "dynamic-raw";
   value: string;
 }
 

package/src/rules/components-prefer-library.test.ts

@@ -0,0 +1,148 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  asComponentId,
+  compileGlobalGovernanceFacts,
+  FactIndex,
+  makeUsageComponentFact,
+  makeUsageImportFact,
+  makeUsageNodeFact,
+  ruleComponentsPreferLibrary,
+} from "../index.js";
+
+// #9e — import-path identity for a DIRECTORY canonical source. A directory
+// source (e.g. `src/components/ui`) declares its canonical component NAMES via an
+// include list. The rule must:
+//   (a) leave a genuine `<Button>` alone once the scan resolver proved its import
+//       resolves INSIDE the directory (a `usage_component` with a `<dir>#Name` id);
+//   (b) flag a local impostor `<Button>` imported from OUTSIDE the directory,
+//       redirecting the import at the canonical directory path (advisory / warn);
+//   (c) never flag a third-party or aliased same-name import (collision guard).
+describe("components/prefer-library — #9e directory import-path identity", () => {
+  const CANONICAL_DIR = "src/components/ui";
+
+  function directoryIndex() {
+    const ix = new FactIndex();
+    ix.addMany(
+      compileGlobalGovernanceFacts({
+        rules: {
+          "components/prefer-library": {
+            enabled: true,
+            severity: "warning",
+            options: {
+              canonicalSources: [
+                { kind: "directory", path: CANONICAL_DIR, include: ["Button", "Input"] },
+              ],
+            },
+          },
+        },
+      })
+    );
+    return ix;
+  }
+
+  function addButtonUsage(
+    ix: FactIndex,
+    input: { local?: string; imported?: string; source: string }
+  ) {
+    const node = makeUsageNodeFact({
+      file: "src/pages/Home.tsx",
+      nodePath: "0:0",
+      element: "Button",
+      location: { file: "src/pages/Home.tsx", line: 5, column: 4 },
+    });
+    ix.add(node);
+    ix.add(
+      makeUsageImportFact({
+        file: "src/pages/Home.tsx",
+        local: input.local ?? "Button",
+        imported: input.imported ?? "Button",
+        source: input.source,
+        location: { file: "src/pages/Home.tsx", line: 1, column: 0 },
+      })
+    );
+    return node;
+  }
+
+  it("does not flag a Button whose import the scan resolver proved resolves inside the canonical directory", () => {
+    const ix = directoryIndex();
+    // The genuine primitive, imported through a `@/` alias into the canonical dir.
+    const node = addButtonUsage(ix, { source: "@/components/ui/Button" });
+    // The extractor's resolveComponentId seam emitted this canonical id because
+    // the module resolved INSIDE `src/components/ui`.
+    ix.add(
+      makeUsageComponentFact({
+        nodeId: node.id,
+        componentId: asComponentId(`${CANONICAL_DIR}#Button`),
+      })
+    );
+
+    expect(ruleComponentsPreferLibrary(ix)).toHaveLength(0);
+  });
+
+  it("flags a local impostor Button imported from outside the canonical directory and redirects to the canonical path", () => {
+    const ix = directoryIndex();
+    // No usage_component fact: the impostor's import resolved OUTSIDE the dir.
+    addButtonUsage(ix, { source: "../features/FakeButton" });
+
+    const findings = ruleComponentsPreferLibrary(ix);
+    expect(findings).toHaveLength(1);
+    expect(findings[0]).toMatchObject({
+      ruleId: "components/prefer-library",
+      code: "FUI1004",
+      fix: {
+        kind: "replaceImport",
+        from: "../features/FakeButton",
+        to: CANONICAL_DIR,
+        deterministic: false,
+      },
+      attributes: {
+        suggestedComponent: "Button",
+        suggestedImport: CANONICAL_DIR,
+        advisory: true,
+        contractProof: "missing",
+      },
+    });
+    // Advisory only — never a hard error/block.
+    expect(findings[0].level).toBe("warn");
+  });
+
+  it("does not flag a same-name Button imported from a third-party package (collision guard)", () => {
+    const ix = directoryIndex();
+    addButtonUsage(ix, { source: "@tanstack/react-router" });
+
+    expect(ruleComponentsPreferLibrary(ix)).toHaveLength(0);
+  });
+
+  it("does not flag an aliased same-name import whose bound export differs (collision guard)", () => {
+    const ix = directoryIndex();
+    // `import { Foo as Button } from "../x"` — the local JSX name collides, but
+    // the imported binding is not the canonical `Button`, so it is not a redirect
+    // candidate.
+    addButtonUsage(ix, { local: "Button", imported: "Foo", source: "../x" });
+
+    expect(ruleComponentsPreferLibrary(ix)).toHaveLength(0);
+  });
+
+  it("does not blanket-flag local imports for a directory source without an include list (#224 guard)", () => {
+    const ix = new FactIndex();
+    ix.addMany(
+      compileGlobalGovernanceFacts({
+        rules: {
+          "components/prefer-library": {
+            enabled: true,
+            severity: "warning",
+            options: {
+              // No include list → no curated canonical NAME vocabulary, so there
+              // is no basis to redirect an arbitrary local component import.
+              canonicalSources: [{ kind: "directory", path: CANONICAL_DIR }],
+            },
+          },
+        },
+      })
+    );
+    addButtonUsage(ix, { source: "../features/FakeButton" });
+
+    expect(ruleComponentsPreferLibrary(ix)).toHaveLength(0);
+  });
+});

package/src/rules/components-prefer-library.ts

@@ -1,5 +1,6 @@
 import type { CanonicalSource, GovernanceSeverity } from "../governance.js";
 import type {
+  FactId,
   FactIndex,
   UsageImportFact,
   UsageNodeFact,
@@ -262,12 +263,20 @@ export function ruleComponentsPreferLibrary(ix: FactIndex): Finding[] {
   const textByNode = indexTextChildrenByNodeId(ix);
   const classTokensByNode = indexClassTokensByNode(ix);
   const reimplTargets = canonicalReimplTargets(sources, mappings);
+  // #9e — nodes whose local import a Node-side module resolver already proved
+  // resolves INSIDE a directory canonical source (the extractor emitted a
+  // `usage_component` whose id points at that directory). These are the genuine
+  // canonical primitives imported by a relative/`@/` path; a browser-safe string
+  // comparison of the raw specifier could never recognize them, so the resolved
+  // fact is the identity of record. Never flag them as import impostors.
+  const canonicalDirectoryResolvedNodes = indexCanonicalDirectoryResolvedNodes(ix, sources);
   const findings: Finding[] = [];
   const seenImportFixes = new Set<string>();
 
   for (const node of ix.byKind("usage_node")) {
     if (isCanonicalSourceImplementationFile(node.file, sources)) continue;
     if (node.element.includes(".")) continue;
+    if (canonicalDirectoryResolvedNodes.has(node.id)) continue;
     const props = propsByNode.get(node.id) ?? [];
     const textChildren = textByNode.get(node.id) ?? [];
     const importsForFile = importsByFileAndLocal.get(node.file);
@@ -1065,7 +1074,49 @@ function sourceLabel(source: CanonicalSource): string {
 function canonicalImportPath(source: CanonicalSource): string | undefined {
   if (source.kind === "npm") return source.specifier;
   if (source.kind === "registry") return source.importPath;
-  return undefined;
+  // #9e — a directory canonical source *does* have a redirect target: its own
+  // directory path. Returning it lets the import-identity branch point a local
+  // impostor (`<Button>` from `../features/FakeButton`) back at the canonical
+  // directory instead of `continue`-ing to zero findings. Gate on an explicit
+  // include list: without curated NAMES, `sourceIncludesComponent` matches every
+  // PascalCase import, so a redirect target here would blanket-flag them all
+  // (#224). Include-less directory sources keep the old no-target behavior.
+  return source.include?.length ? source.path : undefined;
+}
+
+/**
+ * #9e — index the `usage_node` ids whose import a Node-side module resolver
+ * proved resolves INSIDE a directory canonical source. The scan orchestrator's
+ * `resolveComponentId` seam emits a `usage_component` fact for such imports with
+ * a `<canonicalDirPath>#<Name>` component id; this recovers those node ids so the
+ * rule can treat the genuine local canonical primitive as already-compliant.
+ */
+function indexCanonicalDirectoryResolvedNodes(
+  ix: FactIndex,
+  sources: readonly CanonicalSource[]
+): Set<FactId> {
+  const out = new Set<FactId>();
+  const directoryPaths = sources
+    .filter((source): source is Extract<CanonicalSource, { kind: "directory" }> =>
+      source.kind === "directory"
+    )
+    .map((source) => normalizePath(source.path));
+  if (directoryPaths.length === 0) return out;
+  for (const fact of ix.byKind("usage_component")) {
+    const module = componentIdModule(fact.componentId);
+    if (module === undefined) continue;
+    const normalizedModule = normalizePath(module);
+    if (directoryPaths.some((path) => isPathInSource(normalizedModule, path))) {
+      out.add(fact.nodeId);
+    }
+  }
+  return out;
+}
+
+/** Extract the module portion (`before#`) of a `module#Export` component id. */
+function componentIdModule(componentId: string): string | undefined {
+  const hash = componentId.indexOf("#");
+  return hash > 0 ? componentId.slice(0, hash) : undefined;
 }
 
 function isCanonicalSourceImplementationFile(

package/src/rules/styles-no-raw-color.test.ts

@@ -0,0 +1,213 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  compileGlobalGovernanceFacts,
+  FactIndex,
+  g,
+  makeTokenDefinitionFact,
+  makeUsageInlineStyleFact,
+  makeUsageNodeFact,
+  makeUsagePropResolvedFact,
+  ruleStylesNoRawColor,
+} from "../index.js";
+import type { FactId } from "../index.js";
+
+const FILE = "src/icon.tsx";
+
+function indexWithColorPolicy(severity: "error" | "warn" | "info" = "error"): FactIndex {
+  const ix = new FactIndex();
+  ix.addMany(
+    compileGlobalGovernanceFacts({
+      styles: [g.styles.rawColors().forbid({ except: ["transparent"], prefer: "token", severity })],
+    })
+  );
+  return ix;
+}
+
+function addNode(ix: FactIndex, element: string, nodePath = "0:0"): FactId {
+  const node = makeUsageNodeFact({
+    file: FILE,
+    nodePath,
+    element,
+    location: { file: FILE, line: 4, column: 6 },
+  });
+  ix.add(node);
+  return node.id;
+}
+
+// ---------------------------------------------------------------------------
+// #9d — SVG paint attributes (fill/stroke/…)
+// ---------------------------------------------------------------------------
+
+describe("styles/no-raw-color — #9d SVG paint attributes", () => {
+  it("flags a raw hex on a fill attribute", () => {
+    const ix = indexWithColorPolicy();
+    const nodeId = addNode(ix, "circle");
+    ix.add(
+      makeUsagePropResolvedFact({
+        nodeId,
+        prop: "fill",
+        resolution: "static",
+        value: "#00ff00",
+        location: { file: FILE, line: 4, column: 14 },
+      })
+    );
+
+    const findings = ruleStylesNoRawColor(ix);
+    expect(findings).toHaveLength(1);
+    expect(findings[0].attributes).toMatchObject({
+      property: "fill",
+      color: "#00ff00",
+      source: "jsx",
+    });
+  });
+
+  it("broadened SVG detection ships advisory (warn) even under an error policy", () => {
+    const ix = indexWithColorPolicy("error");
+    const nodeId = addNode(ix, "path");
+    ix.add(
+      makeUsagePropResolvedFact({ nodeId, prop: "stroke", resolution: "static", value: "#123456" })
+    );
+
+    const findings = ruleStylesNoRawColor(ix);
+    expect(findings).toHaveLength(1);
+    expect(findings[0].severity).toBe("moderate"); // capped warn (not "serious")
+  });
+
+  it("emits a deterministic token fix when stroke matches an accent token exactly", () => {
+    const ix = indexWithColorPolicy();
+    ix.add(
+      makeTokenDefinitionFact({ name: "--fui-color-accent", value: "#7c3aed", category: "color" })
+    );
+    const nodeId = addNode(ix, "path");
+    ix.add(
+      makeUsagePropResolvedFact({ nodeId, prop: "stroke", resolution: "static", value: "#7c3aed" })
+    );
+
+    const findings = ruleStylesNoRawColor(ix);
+    expect(findings).toHaveLength(1);
+    expect(findings[0].fix).toBeDefined();
+    expect(findings[0].fix).toMatchObject({ kind: "replaceStyleValue", deterministic: true });
+  });
+
+  it("maps React camelCase stopColor to the paint allowlist", () => {
+    const ix = indexWithColorPolicy();
+    const nodeId = addNode(ix, "stop");
+    ix.add(
+      makeUsagePropResolvedFact({
+        nodeId,
+        prop: "stopColor",
+        resolution: "static",
+        value: "#abcdef",
+      })
+    );
+
+    const findings = ruleStylesNoRawColor(ix);
+    expect(findings).toHaveLength(1);
+    expect(findings[0].attributes).toMatchObject({ property: "stopColor" });
+  });
+
+  it("does not fire for fill='none' or fill='currentColor'", () => {
+    const ix = indexWithColorPolicy();
+    const nodeId = addNode(ix, "circle");
+    ix.add(
+      makeUsagePropResolvedFact({ nodeId, prop: "fill", resolution: "static", value: "none" })
+    );
+    ix.add(
+      makeUsagePropResolvedFact({
+        nodeId,
+        prop: "stroke",
+        resolution: "static",
+        value: "currentColor",
+      })
+    );
+
+    expect(ruleStylesNoRawColor(ix)).toHaveLength(0);
+  });
+
+  it("does not fire for a dynamic fill prop", () => {
+    const ix = indexWithColorPolicy();
+    const nodeId = addNode(ix, "circle");
+    ix.add(makeUsagePropResolvedFact({ nodeId, prop: "fill", resolution: "dynamic" }));
+
+    expect(ruleStylesNoRawColor(ix)).toHaveLength(0);
+  });
+
+  it("does not fire for a non-paint attribute carrying a hex-shaped string (documented data-URI limit)", () => {
+    const ix = indexWithColorPolicy();
+    const nodeId = addNode(ix, "img");
+    // A data-URI color is intentionally out of scope — parsing colors out of
+    // encoded url() strings is high-noise and low-value for this release.
+    ix.add(
+      makeUsagePropResolvedFact({
+        nodeId,
+        prop: "src",
+        resolution: "static",
+        value: 'data:image/svg+xml,<svg fill="%2300ff00" />',
+      })
+    );
+
+    expect(ruleStylesNoRawColor(ix)).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// #11b — runtime-constructed (dynamic-raw) colors
+// ---------------------------------------------------------------------------
+
+describe("styles/no-raw-color — #11b dynamic-raw colors", () => {
+  it("flags a dynamic-raw inline color with no fix object", () => {
+    const ix = indexWithColorPolicy();
+    const nodeId = addNode(ix, "div");
+    ix.add(
+      makeUsageInlineStyleFact({
+        nodeId,
+        property: "background",
+        valueKind: "dynamic-raw",
+        value: "#‹expr›",
+      })
+    );
+
+    const findings = ruleStylesNoRawColor(ix);
+    expect(findings).toHaveLength(1);
+    expect(findings[0].fix).toBeUndefined();
+    expect(findings[0].attributes).toMatchObject({
+      property: "background",
+      dynamic: true,
+      source: "jsx",
+    });
+  });
+
+  it("caps the dynamic-raw finding to advisory (warn) under an error policy", () => {
+    const ix = indexWithColorPolicy("error");
+    const nodeId = addNode(ix, "div");
+    ix.add(
+      makeUsageInlineStyleFact({
+        nodeId,
+        property: "color",
+        valueKind: "dynamic-raw",
+        value: "rgb(‹expr›,‹expr›,‹expr›)",
+      })
+    );
+
+    const findings = ruleStylesNoRawColor(ix);
+    expect(findings).toHaveLength(1);
+    expect(findings[0].severity).toBe("moderate"); // capped warn (not "serious")
+  });
+
+  it("keeps a distinct fingerprint source from static inline colors", () => {
+    const ix = indexWithColorPolicy();
+    const nodeId = addNode(ix, "div");
+    ix.add(
+      makeUsageInlineStyleFact({
+        nodeId,
+        property: "background",
+        valueKind: "dynamic-raw",
+        value: "#‹expr›",
+      })
+    );
+
+    const findings = ruleStylesNoRawColor(ix);
+    expect(findings[0].fingerprint).toEqual(expect.any(String));
+  });
+});