@elabs-ai/components-process 4.2.0 → 5.1.0

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

@@ -89,7 +89,29 @@ import {
 import { abstractGraph, type AbstractionOptions } from "../core/abstract-graph";
 import { detectRework, type ReworkStats } from "../core/detect-rework";
 import { discoverGraph } from "../core/discover-graph";
+import type { ActivityColorScale } from "../core/activity-color-scale";
 import type { EventLog, ProcessGraph } from "../core/types";
+import type { ConformanceResult } from "../core/conformance";
+import {
+  activityConformance,
+  CONFORMANCE_STATE_DEFAULT_LABELS,
+  resolveConformanceStates,
+  transitionConformance,
+  withActivityConformance,
+  withTransitionConformance,
+} from "../conformance-overlay/conformance-state";
+import { ConformanceStateMark } from "../conformance-overlay/conformance-legend";
+import {
+  abstractObjectCentricGraph,
+  objectCentricProcessGraph,
+  objectTypeColorScale,
+  type ObjectCentricGraph,
+} from "../core/discover-object-centric-graph";
+import {
+  buildObjectCentricMapModel,
+  OBJECT_CENTRIC_MAP_DEFAULT_LABELS,
+  type ObjectCentricMapLabels,
+} from "./map-model";
 import {
   buildProcessMapModel,
   processGraphStructureKey,
@@ -209,11 +231,67 @@ export interface ProcessMapProps extends Omit<HTMLAttributes<HTMLDivElement>, "o
   tableView?: boolean;
   /** No graph yet. Renders the loading panel rather than an empty canvas. */
   loading?: boolean;
+  /**
+   * A shared activity colour scale (RM-054, `/core`'s `activityColorScale`). When given,
+   * each activity node shows its identity swatch — the same colour `VariantExplorer`
+   * paints that activity with. Build it once from the FULL graph and hand the same
+   * instance to both views. Omit for today's uncoloured nodes.
+   */
+  colorScale?: ActivityColorScale;
+  /**
+   * A replay result (RM-061's `tokenReplay`) to overlay (RM-062). When given, every node
+   * and edge carries `data-conformance="both" | "logOnly" | "modelOnly"` — additive to
+   * `data-selection` — painted as a status tone PLUS a glyph and a line style, with the
+   * state's word in the accessible name and a Conformance column in the table twin. Omit
+   * for today's map, unchanged. Usually reached through `ConformanceOverlay`.
+   */
+  conformance?: ConformanceResult;
+  /**
+   * Object-centric — RM-066. An object-centric graph (`discoverObjectCentricGraph`, e.g.
+   * over `fromOcel(…).logs`) to draw instead of `graph`/`log` — mutually exclusive with
+   * both, and it wins when given together (with a dev-mode console warning). Shared
+   * activities merge into one node carrying a chip per object type; edges are drawn once
+   * per object type in that type's chart colour, side by side. `abstraction` applies to
+   * every type alike; for per-type abstraction pass `abstractObjectCentricGraph(…)`'s
+   * result here instead.
+   */
+  objectCentric?: ObjectCentricGraph;
+  /** Object-centric — RM-066. Strings the object-centric mode composes. */
+  objectCentricLabels?: ObjectCentricMapLabels;
   /**
    * Accessible name for the canvas region. Defaults to the localized
    * `process.map.label` message.
    */
   label?: string;
+  /**
+   * The smallest zoom the OPENING fit may use. The default keeps activity names legible
+   * and, when the process does not fit at that size, opens on its start. A workspace that
+   * would rather open on the whole picture — a wide canvas, a reader who zooms in on what
+   * matters — lowers it. The reader can always zoom out further by hand.
+   * @default PROCESS_MAP_LEGIBLE_ZOOM
+   */
+  fitMinZoom?: number;
+  /**
+   * The fraction of the pane the opening fit keeps clear on every side. The default is
+   * generous because transition pills are drawn outside the fitted bounds; a pane that is
+   * short on the axis the process runs along can trade some of it for a larger picture.
+   * @default 0.15
+   */
+  fitPadding?: number;
+  /**
+   * Re-frames the map whenever this value changes. The map already re-fits when its own
+   * structure or direction changes; it cannot know that the pane around it just changed
+   * shape — a dock opened, a side panel closed. Pass anything that changes when that
+   * happens. Unset: no extra re-fits, the reader's viewport is left alone.
+   */
+  refitKey?: string | number;
+  // elkjs adapter — RM-067
+  /**
+   * The layout engine. `"elk"` lays the map out with `@elabs-ai/components-flow`'s
+   * `layoutFlowElk` — elkjs, an optional peer, loaded lazily on first use; when it is not
+   * installed the map falls back to dagre with a development-only warning. @default "dagre"
+   */
+  layoutEngine?: "dagre" | "elk";
 }
 
 /** Resolve the graph the map paints, running `/core` only when its own inputs change. */
@@ -236,6 +314,31 @@ function useResolvedGraph(
   }, [base, activities, paths]);
 }
 
+/** Object-centric — RM-066. The abstracted graph, its flattened twin and the type scale. */
+function useObjectCentricView(
+  objectCentric: ObjectCentricGraph | undefined,
+  abstraction: Pick<AbstractionOptions, "activities" | "paths"> | undefined,
+) {
+  const scale = useMemo(
+    () => (objectCentric ? objectTypeColorScale(objectCentric) : undefined),
+    [objectCentric],
+  );
+  const activities = abstraction?.activities;
+  const paths = abstraction?.paths;
+  return useMemo(() => {
+    if (!objectCentric || !scale) return undefined;
+    const graph =
+      activities === undefined && paths === undefined
+        ? objectCentric
+        : abstractObjectCentricGraph(
+            objectCentric,
+            {},
+            { activities: activities ?? 1, paths: paths ?? 1 },
+          );
+    return { graph, flat: objectCentricProcessGraph(graph), scale };
+  }, [objectCentric, scale, activities, paths]);
+}
+
 /**
  * The process map.
  *
@@ -259,7 +362,15 @@ export function ProcessMap({
   showLegend = true,
   tableView = false,
   loading = false,
+  colorScale,
+  conformance,
+  objectCentric,
+  objectCentricLabels = OBJECT_CENTRIC_MAP_DEFAULT_LABELS,
   label,
+  layoutEngine = "dagre",
+  fitMinZoom = PROCESS_MAP_LEGIBLE_ZOOM,
+  fitPadding = FIT_VIEW_OPTIONS.padding,
+  refitKey,
   className,
   ...props
 }: ProcessMapProps) {
@@ -280,7 +391,22 @@ export function ProcessMap({
     },
     [t],
   );
-  const resolved = useResolvedGraph(graph, log, abstraction);
+  // Object-centric — RM-066: abstract per type, flatten for layout, colour from the FULL
+  // graph so a type keeps its swatch while the reader abstracts.
+  const objectCentricView = useObjectCentricView(objectCentric, abstraction);
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    if (objectCentric && (graph || log)) {
+      console.warn(
+        "ProcessMap: `objectCentric` is mutually exclusive with `graph`/`log`; drawing `objectCentric`.",
+      );
+    }
+  }, [objectCentric, graph, log]);
+  const resolved = useResolvedGraph(
+    objectCentricView ? objectCentricView.flat : graph,
+    objectCentricView ? undefined : log,
+    objectCentricView ? undefined : abstraction,
+  );
   const derivedRework = useMemo(
     () => (rework ? undefined : log ? detectRework(log) : undefined),
     [rework, log],
@@ -315,9 +441,10 @@ export function ProcessMap({
             rework: activeRework,
             selection: activeSelection,
             selectionStates,
+            colorScale,
           })
         : null,
-    [resolved, metric, activeRework, activeSelection, selectionStates],
+    [resolved, metric, activeRework, activeSelection, selectionStates, colorScale],
   );
 
   // ── Measured node sizes ───────────────────────────────────────────────────
@@ -387,6 +514,7 @@ export function ProcessMap({
     edges: firstPass?.edges ?? EMPTY_EDGES,
     structureKey: layoutKey,
     direction,
+    layoutEngine,
   });
 
   // PASS 2 — the same model, now told which edges run against the layout direction, so
@@ -395,16 +523,30 @@ export function ProcessMap({
   const model: ProcessMapModel | null = useMemo(
     () =>
       resolved
-        ? buildProcessMapModel({
+        ? buildObjectCentricMapModel({
             graph: resolved,
             metric,
             rework: activeRework,
             selection: activeSelection,
             selectionStates,
             backEdgeIds: layout.backEdgeIds,
+            colorScale,
+            objectCentric: objectCentricView?.graph,
+            objectTypeScale: objectCentricView?.scale,
+            objectCentricLabels,
           })
         : null,
-    [resolved, metric, activeRework, activeSelection, selectionStates, layout.backEdgeIds],
+    [
+      objectCentricView,
+      objectCentricLabels,
+      resolved,
+      metric,
+      activeRework,
+      activeSelection,
+      selectionStates,
+      layout.backEdgeIds,
+      colorScale,
+    ],
   );
 
   const positionedNodes = useMemo(
@@ -412,6 +554,38 @@ export function ProcessMap({
     [model, layout, direction],
   );
 
+  // ── Conformance (RM-062) ──────────────────────────────────────────────────
+  // A decoration AFTER the model and the layout, never an input to either: switching the
+  // reference model re-inks nodes and edges without re-deriving a metric or moving a node.
+  const conformanceStates = useMemo(
+    () => (conformance ? resolveConformanceStates(conformance) : null),
+    [conformance],
+  );
+  const canvasNodes = useMemo(
+    () =>
+      conformanceStates
+        ? positionedNodes.map((node) => withActivityConformance(node, conformanceStates))
+        : positionedNodes,
+    [positionedNodes, conformanceStates],
+  );
+  // Where the process begins: a clamped opening fit keeps these in view on BOTH axes — in a
+  // left-to-right layout the first rank sits at mid-height, not in the top-left corner.
+  const startNodeIds = useMemo(
+    () => positionedNodes.filter((node) => node.data.isStart).map((node) => node.id),
+    [positionedNodes],
+  );
+  const fitViewOptions = useMemo(
+    () => ({ ...FIT_VIEW_OPTIONS, minZoom: fitMinZoom, padding: fitPadding }),
+    [fitMinZoom, fitPadding],
+  );
+  const canvasEdges = useMemo(
+    () =>
+      model && conformanceStates
+        ? model.edges.map((edge) => withTransitionConformance(edge, conformanceStates))
+        : (model?.edges ?? EMPTY_EDGES),
+    [model, conformanceStates],
+  );
+
   // ── Hover ─────────────────────────────────────────────────────────────────
   const [hover, setHover] = useState<ProcessMapHoverState>(EMPTY_PROCESS_MAP_HOVER);
   const edgesRef = useRef<ProcessMapEdge[]>([]);
@@ -723,6 +897,12 @@ export function ProcessMap({
               <TableHead scope="col">{model.nodeMetricLabel}</TableHead>
               <TableHead scope="col">{t("process.map.columnRework")}</TableHead>
               <TableHead scope="col">{t("process.map.columnState")}</TableHead>
+              {conformanceStates ? (
+                <TableHead scope="col">{CONFORMANCE_STATE_DEFAULT_LABELS.column}</TableHead>
+              ) : null}
+              {objectCentricView ? (
+                <TableHead scope="col">{objectCentricLabels.columnObjectTypes}</TableHead>
+              ) : null}
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -730,6 +910,9 @@ export function ProcessMap({
               <TableRow
                 key={row.id}
                 data-selection={row.selectionState}
+                data-conformance={
+                  conformanceStates ? activityConformance(conformanceStates, row.id) : undefined
+                }
                 // Complementary, colour-only styling hook (step 4): the real channel is the
                 // State cell's text below, which fires for `selected` AND `excluded`; this
                 // only lights up `TableRow`'s existing `data-[state=selected]:bg-accent`.
@@ -744,6 +927,12 @@ export function ProcessMap({
                 </TableCell>
                 <TableCell className="tabular-nums">{row.reworkCount ?? 0}</TableCell>
                 <TableCell>{selectionStateText(row.selectionState)}</TableCell>
+                {conformanceStates ? (
+                  <TableCell>
+                    <ConformanceStateMark state={activityConformance(conformanceStates, row.id)} />
+                  </TableCell>
+                ) : null}
+                {objectCentricView ? <TableCell>{row.objectTypes}</TableCell> : null}
               </TableRow>
             ))}
           </TableBody>
@@ -756,11 +945,17 @@ export function ProcessMap({
           </TableCaption>
           <TableHeader>
             <TableRow>
+              {objectCentricView ? (
+                <TableHead scope="col">{objectCentricLabels.columnObjectType}</TableHead>
+              ) : null}
               <TableHead scope="col">{t("process.map.columnFrom")}</TableHead>
               <TableHead scope="col">{t("process.map.columnTo")}</TableHead>
               <TableHead scope="col">{t("process.map.columnShape")}</TableHead>
               <TableHead scope="col">{model.edgeMetricLabel}</TableHead>
               <TableHead scope="col">{t("process.map.columnState")}</TableHead>
+              {conformanceStates ? (
+                <TableHead scope="col">{CONFORMANCE_STATE_DEFAULT_LABELS.column}</TableHead>
+              ) : null}
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -768,8 +963,14 @@ export function ProcessMap({
               <TableRow
                 key={row.id}
                 data-selection={row.selectionState}
+                data-conformance={
+                  conformanceStates
+                    ? transitionConformance(conformanceStates, row.source, row.target)
+                    : undefined
+                }
                 data-state={row.selectionState === "selected" ? "selected" : undefined}
               >
+                {objectCentricView ? <TableCell>{row.objectType}</TableCell> : null}
                 <TableCell>{row.source}</TableCell>
                 <TableCell>{row.target}</TableCell>
                 <TableCell>{row.shape}</TableCell>
@@ -779,6 +980,13 @@ export function ProcessMap({
                     : row.primaryLabel}
                 </TableCell>
                 <TableCell>{selectionStateText(row.selectionState)}</TableCell>
+                {conformanceStates ? (
+                  <TableCell>
+                    <ConformanceStateMark
+                      state={transitionConformance(conformanceStates, row.source, row.target)}
+                    />
+                  </TableCell>
+                ) : null}
               </TableRow>
             ))}
           </TableBody>
@@ -807,8 +1015,8 @@ export function ProcessMap({
       <ProcessMapHoverContext value={hover}>
         <ProcessMapEdgeKeyContext value={handleEdgeKey}>
           <CanvasShell
-            nodes={positionedNodes}
-            edges={model.edges}
+            nodes={canvasNodes}
+            edges={canvasEdges}
             nodeTypes={NODE_TYPES}
             edgeTypes={EDGE_TYPES}
             // dagre runs in an EFFECT, so the first paint has every node stacked at the
@@ -819,8 +1027,9 @@ export function ProcessMap({
             // change (or a direction flip) genuinely moves the picture and has to be
             // re-framed; a metric switch is a cache hit, leaves this key alone, and must
             // NOT yank the viewport out from under the reader.
-            fitViewKey={`${layoutKey}::${direction}::${layout.layoutRuns}`}
-            fitViewKeyOptions={FIT_VIEW_OPTIONS}
+            fitViewKey={`${layoutKey}::${direction}::${layout.layoutRuns}::${refitKey ?? ""}`}
+            fitViewKeyOptions={fitViewOptions}
+            fitViewAnchorNodeIds={startNodeIds}
             minZoom={MIN_ZOOM}
             nodesDraggable={false}
             nodesConnectable={false}
@@ -873,14 +1082,29 @@ export function ProcessMap({
         className="pointer-events-none absolute inset-x-3 top-3 flex items-start justify-between gap-3"
       >
         {showLegend ? (
-          <Legend
-            variant="scale"
-            kind="width"
-            domain={model.edgeDomain}
-            format={model.formatEdgeValue}
-            title={model.edgeMetricLabel}
-            className="pointer-events-auto"
-          />
+          <div className="flex items-start gap-3">
+            <Legend
+              variant="scale"
+              kind="width"
+              domain={model.edgeDomain}
+              format={model.formatEdgeValue}
+              title={model.edgeMetricLabel}
+              className="pointer-events-auto"
+            />
+            {/* Object-centric — RM-066: each type's colour beside its printed code and name. */}
+            {objectCentricView ? (
+              <Legend
+                title={objectCentricLabels.legendTitle}
+                items={objectCentricView.scale.legend
+                  .filter((entry) => objectCentricView.graph.objectTypes.includes(entry.activityId))
+                  .map((entry) => ({
+                    label: `${entry.code} · ${entry.label}`,
+                    color: `var(${entry.token})`,
+                  }))}
+                className="pointer-events-auto"
+              />
+            ) : null}
+          </div>
         ) : (
           <span />
         )}

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

@@ -158,3 +158,50 @@ describe("ProcessTransitionEdge — reaches an excluded edge's label pill by dat
     expect(pill).not.toHaveAttribute("data-selection");
   });
 });
+
+// #354 — the focused element (this pill) and the named element (React Flow's own edge
+// `<g>`, which `data.ariaLabel` also reaches via the top-level `edge.ariaLabel` React Flow
+// itself reads — see `map-model.ts`) must be the SAME element. `data.ariaLabel` is the
+// channel; this locks that it actually lands on the rendered pill's accessible name,
+// merged with (never replacing) the excluded-state fields #351 already locks above.
+describe("ProcessTransitionEdge — folds data.ariaLabel onto the pill's accessible name (#354)", () => {
+  it("uses data.ariaLabel as the pill's accessible name instead of the bare printed label", () => {
+    render(
+      <ProcessTransitionEdge
+        {...makeEdgeProps({
+          data: {
+            ...BASE_EDGE_DATA,
+            ariaLabel: "Transition from a to b, Transitions 12",
+          },
+        })}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Transition from a to b, Transitions 12" }),
+    ).toBeInTheDocument();
+  });
+
+  it("merges data.ariaLabel with the excluded-state ghost frame rather than replacing it", () => {
+    render(
+      <ProcessTransitionEdge
+        {...makeEdgeProps({
+          data: {
+            ...BASE_EDGE_DATA,
+            selectionState: "excluded",
+            ariaLabel: "Transition from a to b, Transitions 12, excluded",
+          },
+        })}
+      />,
+    );
+    const pill = screen.getByRole("button", {
+      name: "Transition from a to b, Transitions 12, excluded",
+    });
+    expect(pill.className).toMatch(/\bborder-dashed\b/);
+    expect(pill).toHaveAttribute("data-selection", "excluded");
+  });
+
+  it("falls back to the pill's own computed name when data carries no ariaLabel", () => {
+    render(<ProcessTransitionEdge {...makeEdgeProps()} />);
+    expect(screen.getByRole("button", { name: "12×" })).toBeInTheDocument();
+  });
+});

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

@@ -47,17 +47,67 @@
  * 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.
+ *
+ * ## The label pill is also the only reachable place for the transition's name (#354)
+ *
+ * The same portal-out-of-the-`<g>` fact applies to `aria-label`: React Flow's `EdgeWrapper`
+ * puts `edge.ariaLabel` on the outer `<g>`, but that `<g>` is never a tab stop
+ * (`process-map.tsx` sets `edgesFocusable={false}` so the pill is the arrow's one stop —
+ * see that file's own docblock). `labelProps` carries `data.ariaLabel` (computed once, in
+ * `map-model.ts`'s `transitionAriaLabel`, and read here rather than recomputed, so the
+ * canvas and the `TableView` twin cannot drift) onto the pill's `aria-label`, merged with
+ * the excluded-state fields above rather than replacing them.
  */
-import { useMemo } from "react";
+import { useMemo, type CSSProperties } from "react";
 import type { EdgeProps } from "@xyflow/react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
 import {
   FlowSelfLoopEdge,
   FlowWeightedEdge,
+  Position,
   type FlowSelfLoopEdgeData,
   type FlowWeightedEdgeData,
 } from "@elabs-ai/components-flow";
 import { useProcessMapEdgeKeys, useProcessMapHover } from "./process-map-context";
 import { GHOST_OPACITY, type ProcessMapEdge } from "./map-model";
+import {
+  CONFORMANCE_STATE_ENCODING,
+  type ConformanceState,
+} from "../conformance-overlay/conformance-state";
+import { useProcessReplayEdgeTokens } from "../process-replay/replay-tokens-context";
+
+/**
+ * The label pill under a conformance state (RM-062): the state's glyph as a leading
+ * `::before` mark (circle / triangle / square — the same shapes as the node marker and the
+ * legend) and the tone's fill rung on the pill border. The pill's own `aria-label` already
+ * carries the state's word (`ProcessMap` folds it into `data.ariaLabel`), so the glyph is
+ * a visible, non-colour channel only. The line style lives on the STROKE, not the pill, so
+ * it never fights the excluded state's dashed pill border.
+ */
+const CONFORMANCE_LABEL_CLASS: Record<ConformanceState, string> = {
+  both: "border-success before:text-success before:content-['●']",
+  logOnly: "border-warning before:text-warning before:content-['△']",
+  modelOnly: "border-destructive before:text-destructive before:content-['⬚']",
+};
+
+/**
+ * The stroke under a conformance state: the tone as paint plus the state's dash pattern.
+ * Omitted while the edge is selected, so React Flow's selection stroke still wins; a
+ * `"both"` edge keeps its own dash (a back edge stays dashed).
+ */
+function conformanceStrokeStyle(
+  state: ConformanceState | undefined,
+  selected: boolean | undefined,
+): CSSProperties | undefined {
+  if (!state || selected) return undefined;
+  const encoding = CONFORMANCE_STATE_ENCODING[state];
+  return {
+    stroke: encoding.colorVar,
+    ...(encoding.strokeDasharray
+      ? { strokeDasharray: encoding.strokeDasharray, strokeLinecap: "round" }
+      : {}),
+  };
+}
 
 /**
  * The `scaleGroup` every process-map edge shares, so `computeEdgeWeightScale` min-maxes
@@ -75,6 +125,21 @@ const UNRELATED_OPACITY = 0.25;
  * 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;
 
+/**
+ * Object-centric — RM-066. Per-type edges joining the same two activities are drawn side
+ * by side: each one's endpoints shift across the flow axis by its slot, so the strokes and
+ * their label pills separate instead of stacking. The spread is capped so every endpoint
+ * stays on the card's own face.
+ */
+const PARALLEL_EDGE_GAP = 40;
+const PARALLEL_EDGE_MAX_SPREAD = 120;
+
+function parallelShift(index: number | undefined, count: number | undefined): number {
+  if (index === undefined || count === undefined || count < 2) return 0;
+  const gap = Math.min(PARALLEL_EDGE_GAP, PARALLEL_EDGE_MAX_SPREAD / (count - 1));
+  return (index - (count - 1) / 2) * gap;
+}
+
 /**
  * Branded process-map transition edge. Register it in
  * `edgeTypes={{ "process-transition": ProcessTransitionEdge }}`; build edges with
@@ -85,20 +150,65 @@ export function ProcessTransitionEdge(props: EdgeProps<ProcessMapEdge>) {
   const hover = useProcessMapHover();
   const onEdgeKey = useProcessMapEdgeKeys();
   const isExcluded = data?.selectionState === "excluded";
-  const labelProps = isExcluded ? EXCLUDED_LABEL_PROPS : undefined;
+  // The focused element (the label pill's `<button>`) and the named element (React Flow's
+  // own edge `<g>`, unreachable — see this file's own docblock) are two different DOM
+  // nodes; `data.ariaLabel` (`transitionAriaLabel`, computed once in `map-model.ts`) is the
+  // channel that gets the same accessible name onto the one a screen-reader user actually
+  // lands on (#354). Merged with, never replacing, the excluded-state fields.
+  const conformance = data?.conformance;
+  const selected = props.selected;
+  const labelProps = useMemo(() => {
+    if (!isExcluded && !data?.ariaLabel && !conformance) return undefined;
+    return {
+      ...(isExcluded ? EXCLUDED_LABEL_PROPS : undefined),
+      ...(data?.ariaLabel ? { "aria-label": data.ariaLabel } : undefined),
+      // Additive to the excluded fields (RM-062): the dashed excluded border stays, the
+      // conformance glyph and tone join it. The tone border yields to the selection ring.
+      ...(conformance
+        ? {
+            "data-conformance": conformance,
+            className: cn(
+              isExcluded && EXCLUDED_LABEL_PROPS.className,
+              CONFORMANCE_LABEL_CLASS[conformance],
+              selected && "border-ring",
+            ),
+          }
+        : undefined),
+    };
+  }, [isExcluded, data?.ariaLabel, conformance, selected]);
+  const strokeStyle = conformanceStrokeStyle(conformance, selected);
+  const edgeStyle = strokeStyle ? { ...props.style, ...strokeStyle } : props.style;
+  // RM-065: tokens from an enclosing `ProcessReplay`. `undefined` outside one, and then the
+  // key is not added at all, so a map with no replay builds exactly the data it did before.
+  const replayTokens = useProcessReplayEdgeTokens(props.id);
+  // Object-centric — RM-066: a per-type edge takes its type's chart stroke (on the edge
+  // object's `style`), never the value ramp, and sits in its own parallel slot.
+  const isObjectTyped = data?.objectType !== undefined;
+  const shift = parallelShift(data?.parallelIndex, data?.parallelCount);
+  const acrossX = props.targetPosition === Position.Top || props.targetPosition === Position.Bottom;
+  const placed = shift
+    ? {
+        sourceX: props.sourceX + (acrossX ? shift : 0),
+        targetX: props.targetX + (acrossX ? shift : 0),
+        sourceY: props.sourceY + (acrossX ? 0 : shift),
+        targetY: props.targetY + (acrossX ? 0 : shift),
+      }
+    : undefined;
 
   const weightedData = useMemo<FlowWeightedEdgeData>(
     () => ({
       weight: data?.weight,
       scaleGroup: PROCESS_MAP_EDGE_SCALE_GROUP,
-      value: data?.value,
-      valueDomain: data?.valueDomain,
+      value: isObjectTyped ? undefined : data?.value,
+      valueDomain: isObjectTyped ? undefined : data?.valueDomain,
       label: data?.label,
       secondaryLabel: data?.secondaryLabel,
       variant: data?.isBackEdge ? "back" : "forward",
       labelProps,
+      ...(replayTokens ? { tokens: replayTokens } : undefined),
     }),
     [
+      isObjectTyped,
       data?.weight,
       data?.value,
       data?.valueDomain,
@@ -106,6 +216,7 @@ export function ProcessTransitionEdge(props: EdgeProps<ProcessMapEdge>) {
       data?.secondaryLabel,
       data?.isBackEdge,
       labelProps,
+      replayTokens,
     ],
   );
 
@@ -116,8 +227,9 @@ export function ProcessTransitionEdge(props: EdgeProps<ProcessMapEdge>) {
       label: data?.label,
       secondaryLabel: data?.secondaryLabel,
       labelProps,
+      ...(replayTokens ? { tokens: replayTokens } : undefined),
     }),
-    [data?.weight, data?.label, data?.secondaryLabel, labelProps],
+    [data?.weight, data?.label, data?.secondaryLabel, labelProps, replayTokens],
   );
 
   const opacity = isExcluded
@@ -132,6 +244,9 @@ export function ProcessTransitionEdge(props: EdgeProps<ProcessMapEdge>) {
       data-shape={data?.isSelfLoop ? "self-loop" : data?.isBackEdge ? "back" : "forward"}
       data-selection={data?.selectionState}
       data-incident={hover.incidentEdgeIds.has(props.id) ? "true" : undefined}
+      data-conformance={conformance}
+      data-dash={conformance ? CONFORMANCE_STATE_ENCODING[conformance].dash : undefined}
+      data-object-type={data?.objectType?.type}
       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
@@ -142,9 +257,21 @@ export function ProcessTransitionEdge(props: EdgeProps<ProcessMapEdge>) {
       onKeyDown={(event) => onEdgeKey(props.id, event)}
     >
       {data?.isSelfLoop ? (
-        <FlowSelfLoopEdge {...props} type="self-loop" data={selfLoopData} />
+        <FlowSelfLoopEdge
+          {...props}
+          {...placed}
+          style={edgeStyle}
+          type="self-loop"
+          data={selfLoopData}
+        />
       ) : (
-        <FlowWeightedEdge {...props} type="weighted" data={weightedData} />
+        <FlowWeightedEdge
+          {...props}
+          {...placed}
+          style={edgeStyle}
+          type="weighted"
+          data={weightedData}
+        />
       )}
     </g>
   );