@elabs-ai/components-process 4.1.0

package/src/process-map/process-transition-edge.test.tsx

@@ -0,0 +1,160 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// @xyflow/react requires real layout/measurement (React Flow renders no edges
+// under jsdom at all — confirmed empirically: the full `<ProcessMap>` canvas
+// leaves `.react-flow__edges`/`.react-flow__edgelabel-renderer` both empty even
+// with the DOMMatrixReadOnly polyfill in place, because edge geometry depends on
+// a real `ResizeObserver` measurement pass jsdom never runs). So this file tests
+// `ProcessTransitionEdge` STANDALONE, the pattern its own context module
+// documents as intentional (`process-map-context.ts`: "so `ProcessActivityNode`
+// and `ProcessTransitionEdge` render correctly outside a `ProcessMap`"), mocking
+// only the `@xyflow/react` primitives its `FlowWeightedEdge`/`FlowEdgePath`
+// delegates need — the same shape `flow-weighted-edge.test.tsx` already uses.
+//
+// `vi.mock`'s factory is hoisted above every import — `vi.hoisted` is the escape
+// hatch so the mock fns themselves survive the hoist without a TDZ ReferenceError.
+const { edgesBox } = vi.hoisted(() => ({ edgesBox: { current: [] as unknown[] } }));
+
+vi.mock("@xyflow/react", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- a vi.mock factory is hoisted above imports; a lazy require avoids the TDZ a top-level import would hit
+  const React = require("react");
+  return {
+    BaseEdge: ({
+      id,
+      path,
+      style,
+      className,
+      markerStart: _markerStart,
+      interactionWidth: _interactionWidth,
+      ...rest
+    }: {
+      id: string;
+      path: string;
+      style?: React.CSSProperties;
+      className?: string;
+      markerStart?: string;
+      interactionWidth?: number;
+      [key: string]: unknown;
+    }) =>
+      React.createElement("svg", { "data-testid": "base-edge" }, [
+        React.createElement("path", { key: "p", d: path, id, style, className, ...rest }),
+      ]),
+    // Real EdgeLabelRenderer portals into a fixed container; a passthrough is
+    // enough here since we only assert the rendered pill's own attributes.
+    EdgeLabelRenderer: ({ children }: { children: React.ReactNode }) => children,
+    getBezierPath: ({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+    }: {
+      sourceX: number;
+      sourceY: number;
+      targetX: number;
+      targetY: number;
+    }) => [
+      `M${sourceX},${sourceY} C${targetX},${targetY}`,
+      (sourceX + targetX) / 2,
+      (sourceY + targetY) / 2,
+    ],
+    getSmoothStepPath: ({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+    }: {
+      sourceX: number;
+      sourceY: number;
+      targetX: number;
+      targetY: number;
+    }) => [
+      `M${sourceX},${sourceY} L${targetX},${targetY}`,
+      (sourceX + targetX) / 2,
+      (sourceY + targetY) / 2,
+    ],
+    useEdges: () => edgesBox.current,
+    // `FlowWeightedEdge` reads the laid-out cards to route a back edge's return leg
+    // clear of them; nothing here is a back edge, so an empty canvas is enough.
+    useNodes: () => [],
+    // `FlowWeightedEdge` reads nodes through `useStore(selector)` so a forward edge
+    // does not re-render on every node change; this map has no measured rects.
+    useStore: (selector: (state: { nodes: unknown[] }) => unknown) => selector({ nodes: [] }),
+    Position: { Top: "top", Bottom: "bottom", Left: "left", Right: "right" },
+  };
+});
+
+import { ProcessTransitionEdge } from "./process-transition-edge";
+import type { ProcessMapEdge, ProcessTransitionEdgeData } from "./map-model";
+import type { EdgeProps } from "@xyflow/react";
+
+afterEach(() => {
+  cleanup();
+  edgesBox.current = [];
+});
+
+/** A complete `ProcessTransitionEdgeData` — a plain forward transition, associated. */
+const BASE_EDGE_DATA: ProcessTransitionEdgeData = {
+  source: "a",
+  target: "b",
+  weight: 1,
+  value: 1,
+  valueDomain: [0, 1],
+  label: "12×",
+  isSelfLoop: false,
+  isBackEdge: false,
+  selectionState: "associated",
+};
+
+/** Minimal EdgeProps factory for ProcessTransitionEdge — a plain forward transition. */
+function makeEdgeProps(
+  overrides: Partial<EdgeProps<ProcessMapEdge>> = {},
+): EdgeProps<ProcessMapEdge> {
+  return {
+    id: "a->b",
+    type: "process-transition",
+    source: "a",
+    target: "b",
+    sourceX: 0,
+    sourceY: 0,
+    targetX: 100,
+    targetY: 100,
+    sourcePosition: "bottom" as EdgeProps["sourcePosition"],
+    targetPosition: "top" as EdgeProps["targetPosition"],
+    selected: false,
+    animated: false,
+    data: BASE_EDGE_DATA,
+    ...overrides,
+  };
+}
+
+// #351 — the label pill is portalled out from under this edge's `<g>` by
+// `EdgeLabelRenderer`, so a whole-subtree opacity (the treatment every OTHER
+// ghosted mark gets) never reaches it. `ProcessTransitionEdge` instead reaches
+// the pill explicitly, by DATA (`labelProps`), with a non-opacity treatment —
+// this locks that the data actually lands on the rendered pill, not just that
+// the edge's own `<g>` opacity changes (which `process-map.test.tsx`'s sibling
+// lock already covers for the node).
+describe("ProcessTransitionEdge — reaches an excluded edge's label pill by data (#351)", () => {
+  it("stamps the ghost frame (dashed border + data-selection) on the pill when excluded", () => {
+    render(
+      <ProcessTransitionEdge
+        {...makeEdgeProps({ data: { ...BASE_EDGE_DATA, selectionState: "excluded" } })}
+      />,
+    );
+    const pill = screen.getByRole("button", { name: "12×" });
+    expect(pill.className).toMatch(/\bborder-dashed\b/);
+    expect(pill).toHaveAttribute("data-selection", "excluded");
+    // The pill's own text is untouched — no opacity, inline or via class — so it
+    // never drops below the 4.5:1 rung the ghosted node's title also keeps.
+    expect(pill.style.opacity).toBe("");
+    expect(pill.className).not.toMatch(/\bopacity-/);
+  });
+
+  it("does not stamp the ghost frame when the transition is not excluded", () => {
+    render(<ProcessTransitionEdge {...makeEdgeProps()} />);
+    const pill = screen.getByRole("button", { name: "12×" });
+    expect(pill.className).not.toMatch(/\bborder-dashed\b/);
+    expect(pill).not.toHaveAttribute("data-selection");
+  });
+});

package/src/process-map/process-transition-edge.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+/**
+ * ProcessTransitionEdge — one directly-follows relation on the process map (RM-051).
+ *
+ * ONE registered edge type that dispatches to the three shapes `@elabs-ai/components-flow`
+ * already owns, and authors none of them:
+ *
+ * | `data`                | renders as                                     | non-colour cue |
+ * | --------------------- | ---------------------------------------------- | -------------- |
+ * | `isSelfLoop: true`    | `FlowSelfLoopEdge`                             | a closed arc above the node |
+ * | `isBackEdge: true`    | `FlowWeightedEdge` `variant="back"`            | dashed, routed clear of the forward edge |
+ * | otherwise             | `FlowWeightedEdge` `variant="forward"`         | the plain bezier |
+ *
+ * There is no `BaseEdge` here and no authored `<path>`: an edge is a `flow` primitive, and
+ * a layer-3 composite that draws its own would be a second component library
+ * (`pnpm process:reuse:check`).
+ *
+ * ## Why the metric is never carried by colour alone
+ *
+ * The delegate gets `weight` (stroke width, min-maxed to `[1.5, 8]` px against every other
+ * edge in the flow) AND `label` (a printed pill with the value in it). `value`/`valueDomain`
+ * tint the stroke as a third, redundant channel. Two edges with different values therefore
+ * differ in thickness and in printed text before they differ in hue — which matters
+ * because two open flow-layer defects (#321, #297) can currently collapse or invert that
+ * hue, and this surface is designed not to depend on it.
+ *
+ * ## Hover and selection
+ *
+ * Hovering an activity raises the opacity contrast between its incident edges and the
+ * rest; the selection tri-state dims an excluded edge. Both are opacity changes on a
+ * wrapper `<g>` — never a hue swap — and both leave the delegate's own `selected` ring
+ * alone.
+ *
+ * ## The label pill does not inherit this `<g>`'s opacity (#351)
+ *
+ * `EdgeLabelRenderer` portals the pill out from under this `<g>` into a sibling HTML layer,
+ * so CSS `opacity` on the `<g>` never reaches it — an excluded edge used to fade to
+ * {@link GHOST_OPACITY} while its own label pill stayed at full strength, the one part of
+ * the ghosting rung a filter could never actually dim. Rather than matching the pill's
+ * OWN opacity to the edge's (which would dim the pill's TEXT the same way #352 found
+ * failing 4.5:1 on the activity node — the pill's label sits on `bg-flow-node` at the same
+ * high-contrast rung as a node's title), the pill is reached explicitly, by DATA, with a
+ * non-opacity treatment: `labelProps` (a generic pass-through on
+ * `FlowWeightedEdgeData`/`FlowSelfLoopEdgeData`, mirroring `EdgeLabelPill`'s own new
+ * `className`/`...props`) carries a dashed border and a `data-selection="excluded"`
+ * attribute straight onto the pill's root button — visible, non-text, reachable by a
+ * `[data-selection="excluded"]` selector same as the node and the edge, and never lower
+ * than 4.5:1 because the label text itself is untouched.
+ */
+import { useMemo } from "react";
+import type { EdgeProps } from "@xyflow/react";
+import {
+  FlowSelfLoopEdge,
+  FlowWeightedEdge,
+  type FlowSelfLoopEdgeData,
+  type FlowWeightedEdgeData,
+} from "@elabs-ai/components-flow";
+import { useProcessMapEdgeKeys, useProcessMapHover } from "./process-map-context";
+import { GHOST_OPACITY, type ProcessMapEdge } from "./map-model";
+
+/**
+ * The `scaleGroup` every process-map edge shares, so `computeEdgeWeightScale` min-maxes
+ * the whole map against ONE domain — the `Legend variant="scale"` beside it reads that
+ * same domain, which is what stops the key and the picture from disagreeing.
+ */
+export const PROCESS_MAP_EDGE_SCALE_GROUP = "process-map";
+
+/** Opacity of an edge that is neither hovered-incident nor selection-excluded. */
+const RESTING_OPACITY = 1;
+/** Opacity of an edge that is not incident to the hovered activity. */
+const UNRELATED_OPACITY = 0.25;
+
+/** The pill's own ghost treatment — a dashed frame + a reachable `data-selection`, never an
+ * opacity (see this file's own docblock, and {@link GHOST_OPACITY}'s, for why). */
+const EXCLUDED_LABEL_PROPS = { className: "border-dashed", "data-selection": "excluded" } as const;
+
+/**
+ * Branded process-map transition edge. Register it in
+ * `edgeTypes={{ "process-transition": ProcessTransitionEdge }}`; build edges with
+ * `buildProcessMapModel`.
+ */
+export function ProcessTransitionEdge(props: EdgeProps<ProcessMapEdge>) {
+  const { data } = props;
+  const hover = useProcessMapHover();
+  const onEdgeKey = useProcessMapEdgeKeys();
+  const isExcluded = data?.selectionState === "excluded";
+  const labelProps = isExcluded ? EXCLUDED_LABEL_PROPS : undefined;
+
+  const weightedData = useMemo<FlowWeightedEdgeData>(
+    () => ({
+      weight: data?.weight,
+      scaleGroup: PROCESS_MAP_EDGE_SCALE_GROUP,
+      value: data?.value,
+      valueDomain: data?.valueDomain,
+      label: data?.label,
+      secondaryLabel: data?.secondaryLabel,
+      variant: data?.isBackEdge ? "back" : "forward",
+      labelProps,
+    }),
+    [
+      data?.weight,
+      data?.value,
+      data?.valueDomain,
+      data?.label,
+      data?.secondaryLabel,
+      data?.isBackEdge,
+      labelProps,
+    ],
+  );
+
+  const selfLoopData = useMemo<FlowSelfLoopEdgeData>(
+    () => ({
+      weight: data?.weight,
+      scaleGroup: PROCESS_MAP_EDGE_SCALE_GROUP,
+      label: data?.label,
+      secondaryLabel: data?.secondaryLabel,
+      labelProps,
+    }),
+    [data?.weight, data?.label, data?.secondaryLabel, labelProps],
+  );
+
+  const opacity = isExcluded
+    ? GHOST_OPACITY
+    : hover.activityId !== null && !hover.incidentEdgeIds.has(props.id)
+      ? UNRELATED_OPACITY
+      : RESTING_OPACITY;
+
+  return (
+    <g
+      data-slot="process-transition-edge"
+      data-shape={data?.isSelfLoop ? "self-loop" : data?.isBackEdge ? "back" : "forward"}
+      data-selection={data?.selectionState}
+      data-incident={hover.incidentEdgeIds.has(props.id) ? "true" : undefined}
+      className="transition-opacity duration-fast ease-standard motion-reduce:transition-none"
+      style={{ opacity }}
+      // The label pill is portalled out of this `<g>` by `EdgeLabelRenderer`, so it has no
+      // `[data-id]` ancestor the map's root handler could read — but a portal's events
+      // still bubble up the REACT tree, through here, where the edge id is known. This is
+      // what keeps `Enter` (select) and `f` (filter menu) working on a transition now that
+      // the edge itself is not a tab stop and the pill is the only stop on the arrow.
+      onKeyDown={(event) => onEdgeKey(props.id, event)}
+    >
+      {data?.isSelfLoop ? (
+        <FlowSelfLoopEdge {...props} type="self-loop" data={selfLoopData} />
+      ) : (
+        <FlowWeightedEdge {...props} type="weighted" data={weightedData} />
+      )}
+    </g>
+  );
+}

package/src/process-map/use-process-layout.test.tsx

@@ -0,0 +1,265 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { act, cleanup, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { ActivityStats, DurationStats, ProcessGraph, TransitionStats } from "../core/types";
+import { buildProcessMapModel, processGraphStructureKey } from "./map-model";
+import {
+  applyLayoutSnapshot,
+  PROCESS_MAP_NODE_MOTION_CLASS,
+  useProcessLayout,
+} from "./use-process-layout";
+
+afterEach(cleanup);
+
+const EMPTY_DURATION: DurationStats = {
+  min: 0,
+  max: 0,
+  mean: 0,
+  median: 0,
+  p90: 0,
+  sum: 0,
+  trimmedMean: 0,
+};
+
+function activity(id: string, index: number, total: number): ActivityStats {
+  return {
+    id,
+    label: id,
+    instances: total - index,
+    cases: total - index,
+    isStart: index === 0,
+    isEnd: index === total - 1,
+    duration: { ...EMPTY_DURATION },
+  };
+}
+
+function transition(source: string, target: string, count: number): TransitionStats {
+  return {
+    source,
+    target,
+    count,
+    caseCount: count,
+    duration: { ...EMPTY_DURATION },
+    isSelfLoop: source === target,
+    isBackEdge: false,
+  };
+}
+
+/** A synthetic chain of `size` activities — the shape the 60-node budget is stated over. */
+function chainGraph(size: number): ProcessGraph {
+  const ids = Array.from({ length: size }, (_, i) => `Activity ${i + 1}`);
+  const transitions: TransitionStats[] = [];
+  for (let i = 0; i < ids.length - 1; i += 1) {
+    transitions.push(transition(ids[i]!, ids[i + 1]!, size - i));
+    // A second, skipping path so the layout has real width to solve, not a straight line.
+    if (i + 2 < ids.length)
+      transitions.push(transition(ids[i]!, ids[i + 2]!, Math.max(1, size - i - 3)));
+  }
+  return {
+    activities: ids.map((id, index) => activity(id, index, size)),
+    transitions,
+    startActivities: { [ids[0]!]: size },
+    endActivities: { [ids[ids.length - 1]!]: size },
+    totals: { cases: size, events: size * 2, variants: 2 },
+  };
+}
+
+const graph = chainGraph(60);
+const structureKey = processGraphStructureKey(graph);
+
+function modelFor(metric: "absolute" | "absolute_case") {
+  return buildProcessMapModel({ graph, metric: { node: metric, edge: metric } });
+}
+
+describe("useProcessLayout", () => {
+  it("lays out once on mount, without waiting for the debounce", async () => {
+    const model = modelFor("absolute");
+    const { result } = renderHook(() =>
+      useProcessLayout({ nodes: model.nodes, edges: model.edges, structureKey, direction: "TB" }),
+    );
+    await waitFor(() => expect(result.current.layoutRuns).toBe(1));
+    expect(result.current.nodes).toHaveLength(graph.activities.length);
+  });
+
+  it("positions every node — the layout is applied, not merely computed", async () => {
+    const model = modelFor("absolute");
+    const { result } = renderHook(() =>
+      useProcessLayout({ nodes: model.nodes, edges: model.edges, structureKey, direction: "TB" }),
+    );
+    await waitFor(() => expect(result.current.layoutRuns).toBe(1));
+    const distinct = new Set(result.current.nodes.map((n) => `${n.position.x}:${n.position.y}`));
+    expect(distinct.size).toBe(graph.activities.length);
+  });
+
+  it("does NOT re-run layoutFlow for a metric-only change (the cache-hit criterion)", async () => {
+    const first = modelFor("absolute");
+    // A short debounce, so the wait below is real rather than nominal. With the shipped
+    // 80 ms default, `layoutRuns` is read BEFORE an invalidated re-layout could have fired
+    // and would still read 1 with the cache key broken — the assertion looks stronger than
+    // it is. Shortening the debounce and then waiting past it is what makes BOTH halves of
+    // this test load-bearing rather than just the byte-identical positions.
+    const debounceMs = 10;
+    const { result, rerender } = renderHook(
+      ({ nodes, edges }) =>
+        useProcessLayout({ nodes, edges, structureKey, direction: "TB", debounceMs }),
+      { initialProps: { nodes: first.nodes, edges: first.edges } },
+    );
+    await waitFor(() => expect(result.current.layoutRuns).toBe(1));
+    const positionsBefore = result.current.nodes.map(
+      (n) => `${n.id}:${n.position.x},${n.position.y}`,
+    );
+
+    // A metric switch produces entirely NEW node objects with the SAME structure.
+    const second = modelFor("absolute_case");
+    expect(second.nodes[0]).not.toBe(first.nodes[0]);
+    rerender({ nodes: second.nodes, edges: second.edges });
+
+    await waitFor(() =>
+      expect(result.current.nodes[0]!.data.metricLabel).toBe(second.nodes[0]!.data.metricLabel),
+    );
+    await new Promise((resolve) => setTimeout(resolve, debounceMs * 6));
+    expect(result.current.layoutRuns).toBe(1);
+    expect(result.current.nodes.map((n) => `${n.id}:${n.position.x},${n.position.y}`)).toEqual(
+      positionsBefore,
+    );
+  });
+
+  it("re-runs layout when the STRUCTURE changes, after the debounce", async () => {
+    const first = modelFor("absolute");
+    const smallerGraph = chainGraph(12);
+    const smaller = buildProcessMapModel({
+      graph: smallerGraph,
+      metric: { node: "absolute", edge: "absolute" },
+    });
+    const { result, rerender } = renderHook(
+      ({ nodes, edges, key }) =>
+        useProcessLayout({ nodes, edges, structureKey: key, direction: "TB", debounceMs: 10 }),
+      { initialProps: { nodes: first.nodes, edges: first.edges, key: structureKey } },
+    );
+    await waitFor(() => expect(result.current.layoutRuns).toBe(1));
+
+    rerender({
+      nodes: smaller.nodes,
+      edges: smaller.edges,
+      key: processGraphStructureKey(smallerGraph),
+    });
+    await waitFor(() => expect(result.current.layoutRuns).toBe(2));
+    expect(result.current.nodes).toHaveLength(12);
+  });
+
+  it("re-runs layout for a direction change, and caches each direction separately", async () => {
+    const model = modelFor("absolute");
+    const { result, rerender } = renderHook(
+      ({ direction }: { direction: "TB" | "LR" }) =>
+        useProcessLayout({
+          nodes: model.nodes,
+          edges: model.edges,
+          structureKey,
+          direction,
+          debounceMs: 0,
+        }),
+      { initialProps: { direction: "TB" as "TB" | "LR" } },
+    );
+    await waitFor(() => expect(result.current.layoutRuns).toBe(1));
+    rerender({ direction: "LR" });
+    await waitFor(() => expect(result.current.layoutRuns).toBe(2));
+    rerender({ direction: "TB" });
+    // Back to a key already in the cache — no third dagre run.
+    await waitFor(() => expect(result.current.nodes.length).toBe(graph.activities.length));
+    expect(result.current.layoutRuns).toBe(2);
+  });
+
+  it("lays a 60-node graph out in under 200 ms", async () => {
+    const model = modelFor("absolute");
+    const { result } = renderHook(() =>
+      useProcessLayout({ nodes: model.nodes, edges: model.edges, structureKey, direction: "TB" }),
+    );
+    await waitFor(() => expect(result.current.layoutRuns).toBe(1));
+    expect(graph.activities).toHaveLength(60);
+    expect(result.current.lastLayoutMs).toBeLessThan(200);
+  });
+
+  it("reports back-edges and self-loops so the edge component can change SHAPE", async () => {
+    const withLoop: ProcessGraph = {
+      ...graph,
+      transitions: [
+        ...graph.transitions,
+        transition("Activity 3", "Activity 3", 4),
+        transition("Activity 5", "Activity 2", 3),
+      ],
+    };
+    const model = buildProcessMapModel({
+      graph: withLoop,
+      metric: { node: "absolute", edge: "absolute" },
+    });
+    const { result } = renderHook(() =>
+      useProcessLayout({
+        nodes: model.nodes,
+        edges: model.edges,
+        structureKey: processGraphStructureKey(withLoop),
+        direction: "TB",
+      }),
+    );
+    await waitFor(() => expect(result.current.layoutRuns).toBe(1));
+    expect(result.current.selfLoopIds.size).toBeGreaterThan(0);
+    expect(result.current.backEdgeIds.size).toBeGreaterThan(0);
+  });
+
+  it("renders an empty graph without laying anything out", async () => {
+    const { result } = renderHook(() =>
+      useProcessLayout({ nodes: [], edges: [], structureKey: "", direction: "TB" }),
+    );
+    await act(async () => {});
+    expect(result.current.layoutRuns).toBe(0);
+    expect(result.current.pending).toBe(false);
+  });
+});
+
+describe("applyLayoutSnapshot", () => {
+  it("matches positions on id, so fresh node objects keep their place", () => {
+    const model = modelFor("absolute");
+    const snapshot = {
+      positions: { [model.nodes[0]!.id]: { x: 42, y: 99 } },
+      sourcePosition: {},
+      targetPosition: {},
+      backEdges: [],
+      selfLoops: [],
+      durationMs: 0,
+    };
+    const applied = applyLayoutSnapshot(model.nodes, snapshot);
+    expect(applied[0]!.position).toEqual({ x: 42, y: 99 });
+    // A node the snapshot does not know is returned untouched, not dropped.
+    expect(applied).toHaveLength(model.nodes.length);
+    expect(applied[1]).toBe(model.nodes[1]);
+  });
+});
+
+describe("PROCESS_MAP_NODE_MOTION_CLASS is scanner-visible", () => {
+  // Regression lock (#401 review): the class was once assembled by interpolating a
+  // `MOTION_TARGET` constant. Tailwind extracts candidates from source TEXT and never
+  // evaluates JavaScript, so no CSS was emitted and the node-slide animation silently
+  // stopped — with every test, story and typecheck still green. Asserting the runtime
+  // string is not enough; the SOURCE has to carry each full utility.
+  // The file's own TEXT, which is what Tailwind's scanner reads. `__dirname` is how the
+  // other source-reading tests in this repo reach a sibling file (see the tokens package).
+  const SOURCE = readFileSync(join(__dirname, "use-process-layout.ts"), "utf8");
+  const SELECTOR = "[&_div[data-id]:not([data-handlepos])]";
+
+  it.each([
+    `${SELECTOR}:transition-transform`,
+    `${SELECTOR}:duration-base`,
+    `${SELECTOR}:ease-standard`,
+    `motion-reduce:${SELECTOR}:transition-none`,
+  ])("%s appears verbatim in the source Tailwind scans", (utility) => {
+    expect(PROCESS_MAP_NODE_MOTION_CLASS).toContain(utility);
+    expect(SOURCE).toContain(utility);
+  });
+
+  it("builds the class from literals only — no interpolation in its definition", () => {
+    const definition = SOURCE.slice(
+      SOURCE.indexOf("export const PROCESS_MAP_NODE_MOTION_CLASS"),
+    ).split(";")[0];
+    expect(definition).not.toMatch(/\$\{/);
+  });
+});