@elabs-ai/components-process 4.2.0 → 5.1.0

package/src/process-map/object-centric-map.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * Object-centric mode — RM-066. The pure model plus the table twin; the canvas itself is
+ * covered in a real browser by `process-map-object-centric.stories.tsx`.
+ */
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fromOcel } from "../core/adapters/ocel";
+import {
+  discoverObjectCentricGraph,
+  objectCentricProcessGraph,
+  objectTypeColorScale,
+} from "../core/discover-object-centric-graph";
+import { discoverGraph } from "../core/discover-graph";
+import { OCEL_SAMPLE } from "../core/fixtures/ocel-sample";
+import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
+import {
+  buildObjectCentricMapModel,
+  buildProcessMapModel,
+  objectCentricEdgeId,
+  processEdgeId,
+  type ProcessTransitionEdgeData,
+} from "./map-model";
+import { ProcessMap } from "./process-map";
+
+afterEach(cleanup);
+
+const parsed = fromOcel(OCEL_SAMPLE);
+if (!parsed.ok) throw new Error("fixture must parse");
+const objectCentric = discoverObjectCentricGraph(parsed.logs, { objectTypes: parsed.objectTypes });
+const flat = objectCentricProcessGraph(objectCentric);
+const scale = objectTypeColorScale(objectCentric);
+const metric = { node: "absolute_case", edge: "absolute" } as const;
+
+function build(selection?: { kind: "activity" | "transition"; id: string }) {
+  return buildObjectCentricMapModel({
+    graph: flat,
+    metric,
+    selection,
+    objectCentric,
+    objectTypeScale: scale,
+  });
+}
+
+describe("buildObjectCentricMapModel", () => {
+  it("is exactly buildProcessMapModel without an object-centric graph", () => {
+    const graph = discoverGraph(generateSyntheticLog({ cases: 20, seed: 3 }));
+    // Serialized: `formatEdgeValue` is a fresh closure per build, equal only in behaviour.
+    expect(JSON.stringify(buildObjectCentricMapModel({ graph, metric }))).toBe(
+      JSON.stringify(buildProcessMapModel({ graph, metric })),
+    );
+  });
+
+  it("gives a shared activity one chip per object type, each named in text", () => {
+    const pack = build().nodes.find((node) => node.id === "Pack")!;
+    expect(pack.data.objectTypes!.map((entry) => entry.type)).toEqual(["order", "item", "package"]);
+    const names = pack.data.objectTypes!.map((entry) => entry.ariaLabel);
+    expect(new Set(names).size).toBe(3);
+    expect(names[1]).toBe("item: 2 objects, 2 occurrences");
+    expect(pack.ariaLabel).toContain("item: 2 objects, 2 occurrences");
+    for (const entry of pack.data.objectTypes!) {
+      expect(entry.code).toMatch(/^.{2}$/);
+      expect(entry.color.token).toMatch(/^--chart-\d+$/);
+    }
+  });
+
+  it("draws one edge per object type, side by side, in the type's chart colour", () => {
+    const model = build();
+    const pair = model.edges.filter(
+      (edge) => edge.source === "Place Order" && edge.target === "Pack",
+    );
+    expect(pair.map((edge) => edge.id)).toEqual([
+      objectCentricEdgeId("Place Order", "Pack", "order"),
+      objectCentricEdgeId("Place Order", "Pack", "item"),
+    ]);
+    const data = pair.map((edge) => edge.data as ProcessTransitionEdgeData);
+    expect(data.map((d) => [d.parallelIndex, d.parallelCount])).toEqual([
+      [0, 2],
+      [1, 2],
+    ]);
+    expect(pair[0]!.style).toEqual({ stroke: `var(${scale.colorFor("order").token})` });
+    expect(data[1]!.label).toBe(`${scale.codeFor("item")} 1`);
+    expect(data[1]!.ariaLabel).toMatch(/^item flow: Transition from Place Order to Pack/);
+    // Never merged across types: 2 (order) + 3 (item) + 1 (package).
+    expect(model.edges).toHaveLength(6);
+    expect(model.transitionRows.map((row) => row.objectType)).toHaveLength(6);
+  });
+
+  it("selects only the named per-type edge, keeping its pair's neighbourhood", () => {
+    const id = objectCentricEdgeId("Place Order", "Pack", "item");
+    const model = build({ kind: "transition", id });
+    const states = Object.fromEntries(
+      model.edges.map((edge) => [edge.id, (edge.data as ProcessTransitionEdgeData).selectionState]),
+    );
+    expect(states[id]).toBe("selected");
+    expect(states[objectCentricEdgeId("Place Order", "Pack", "order")]).toBe("associated");
+    expect(states[objectCentricEdgeId("Pack", "Ship", "package")]).toBe("excluded");
+
+    const merged = build({ kind: "transition", id: processEdgeId("Place Order", "Pack") });
+    const selected = merged.edges.filter(
+      (edge) => (edge.data as ProcessTransitionEdgeData).selectionState === "selected",
+    );
+    expect(selected).toHaveLength(2);
+  });
+});
+
+describe("ProcessMap — object-centric table twin", () => {
+  it("adds an object-types column and one transition row per type", () => {
+    render(<ProcessMap objectCentric={objectCentric} metric={metric} tableView />);
+    const activities = screen.getByRole("table", { name: /Activities/ });
+    expect(within(activities).getByRole("columnheader", { name: "Object types" })).toBeVisible();
+    const transitions = screen.getByRole("table", { name: /Transitions/ });
+    expect(within(transitions).getByRole("columnheader", { name: "Object type" })).toBeVisible();
+    // Header row + six per-type transitions.
+    expect(within(transitions).getAllByRole("row")).toHaveLength(7);
+  });
+
+  it("renders the empty panel for an object-centric graph with no activities", () => {
+    const empty = discoverObjectCentricGraph({ order: { events: [] } });
+    render(<ProcessMap objectCentric={empty} metric={metric} />);
+    expect(document.querySelector('[data-slot="process-map"]')).toHaveAttribute(
+      "data-state",
+      "empty",
+    );
+  });
+
+  it("warns once in development when given objectCentric together with graph", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    render(<ProcessMap objectCentric={objectCentric} graph={flat} metric={metric} tableView />);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("mutually exclusive"));
+    warn.mockRestore();
+  });
+});

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

@@ -62,14 +62,21 @@
  * themes). The meter's fill (a redundant, `aria-hidden`, non-text channel) still dims at the
  * shared rung.
  */
-import { useMemo, type CSSProperties } from "react";
+import { useMemo, type CSSProperties, type ReactNode } from "react";
 import { CircleDot, Flag, Play, RefreshCw } from "lucide-react";
 import { Badge } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { FlowNode, type FlowNodeData } from "@elabs-ai/components-flow";
 import type { NodeProps } from "@xyflow/react";
 import { useProcessMapHover } from "./process-map-context";
+import type { ActivityColor } from "../core/activity-color-scale";
+import { activityAccentStyle } from "./activity-accent";
 import { activityRole, GHOST_OPACITY, type ProcessMapNode } from "./map-model";
+import type { ProcessObjectTypeCount } from "./map-model";
+import {
+  CONFORMANCE_STATE_ENCODING,
+  type ConformanceState,
+} from "../conformance-overlay/conformance-state";
 
 /**
  * Local override for the ghost frame: retargets `--border` (what `FlowNode`'s own
@@ -100,6 +107,123 @@ function meterFill(saturation: number): string {
   return `color-mix(in oklab, var(--primary) ${percent}%, var(--surface-muted))`;
 }
 
+/**
+ * The footer row: the meter alone (today's rendering, byte-identical) or, when the map has
+ * a shared `colorScale` (RM-054), the activity's identity swatch in front of the meter.
+ *
+ * The swatch is a small mark, never the card fill, so identity colour and the metric's
+ * saturation ramp never compete for the same pixels. It is `aria-hidden`: the activity's
+ * identity already reaches the reader as its printed title and accessible name, so the
+ * colour is a redundant cross-view cue (WCAG 1.4.1), not a channel of its own.
+ */
+function accentFooter(accent: ActivityColor | undefined, isDimmed: boolean, meter: ReactNode) {
+  if (!accent) return meter;
+  return (
+    <div className="flex items-center gap-1.5">
+      <span
+        aria-hidden="true"
+        data-slot="process-activity-node-accent"
+        data-color-token={accent.token}
+        data-pattern={accent.pattern}
+        className="size-2.5 shrink-0 rounded-sm"
+        style={{ ...activityAccentStyle(accent), ...(isDimmed ? { opacity: GHOST_OPACITY } : {}) }}
+      />
+      <div className="min-w-0 flex-1">{meter}</div>
+    </div>
+  );
+}
+
+/**
+ * Object-centric — RM-066. One chip per object type above the footer row: a chart-token
+ * square, the type's two-character code and its object count. Never colour alone — the
+ * code and count are printed, and each chip is a named image (`role="img"` plus the
+ * type's own "order: 2 objects, 3 occurrences" name, also shown as a `title` tooltip).
+ */
+function objectTypeFooter(
+  objectTypes: ProcessObjectTypeCount[] | undefined,
+  isDimmed: boolean,
+  footer: ReactNode,
+) {
+  if (!objectTypes || objectTypes.length === 0) return footer;
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div data-slot="process-activity-node-object-types" className="flex flex-wrap gap-1">
+        {objectTypes.map((entry) => (
+          <span
+            key={entry.type}
+            role="img"
+            data-object-type={entry.type}
+            data-color-token={entry.color.token}
+            aria-label={entry.ariaLabel}
+            title={entry.ariaLabel}
+            className="inline-flex items-center gap-1 rounded-sm text-meta tabular-nums text-muted-foreground"
+          >
+            <span
+              aria-hidden="true"
+              className="size-2.5 shrink-0 rounded-sm"
+              style={{
+                ...activityAccentStyle(entry.color),
+                ...(isDimmed ? { opacity: GHOST_OPACITY } : {}),
+              }}
+            />
+            <span aria-hidden="true" className="font-medium text-foreground">
+              {entry.code}
+            </span>
+            <span aria-hidden="true">{entry.cases}</span>
+          </span>
+        ))}
+      </div>
+      {footer}
+    </div>
+  );
+}
+
+/**
+ * The card frame under a conformance state (RM-062): the border token is retargeted to the
+ * state's tone and the line style is set on `FlowNode`'s own card through a descendant
+ * variant — composition from outside, same as {@link GHOST_FRAME_STYLE}, never a fork.
+ * Merged AFTER the ghost style, so an excluded node keeps its quieter fill (selection) and
+ * still shows the conformance border and dash (conformance): the two layers compose.
+ */
+const CONFORMANCE_FRAME_CLASS: Record<ConformanceState, string> = {
+  both: "[&_[data-slot=flow-node]]:border-solid",
+  logOnly: "[&_[data-slot=flow-node]]:border-dotted",
+  modelOnly: "[&_[data-slot=flow-node]]:border-dashed",
+};
+
+function frameStyle(
+  isDimmed: boolean,
+  conformance: ConformanceState | undefined,
+): CSSProperties | undefined {
+  if (!conformance) return isDimmed ? GHOST_FRAME_STYLE : undefined;
+  return {
+    ...(isDimmed ? GHOST_FRAME_STYLE : {}),
+    "--border": CONFORMANCE_STATE_ENCODING[conformance].colorVar,
+  } as CSSProperties;
+}
+
+/**
+ * The conformance glyph pinned to the card's top-start corner. `aria-hidden`: the state's
+ * word is already folded into the node's accessible name by `ProcessMap`, so the glyph is
+ * the visible, non-colour channel, not a second announcement.
+ */
+function ConformanceMarker({ state }: { state: ConformanceState }) {
+  const encoding = CONFORMANCE_STATE_ENCODING[state];
+  const Glyph = encoding.icon;
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="process-activity-node-conformance"
+      data-conformance={state}
+      data-glyph={encoding.glyph}
+      data-dash={encoding.dash}
+      className="absolute -start-2 -top-2 z-10 flex size-5 items-center justify-center rounded-full bg-flow-node shadow-xs"
+    >
+      <Glyph className={cn("size-3", encoding.markClass)} />
+    </span>
+  );
+}
+
 /** Start/end glyph pairing, in `FlowNode`'s own tone-glyph idiom. */
 function roleIcon(isStart: boolean, isEnd: boolean) {
   if (isStart && isEnd) return CircleDot;
@@ -139,19 +263,25 @@ export function ProcessActivityNode(props: NodeProps<ProcessMapNode>) {
       // same number is already printed in the subtitle above and repeated in the node's
       // accessible name — a third announcement would be noise, not access. The fill (not
       // the text) is the one thing here that still dims at the shared ghost rung.
-      footer: (
-        <div
-          aria-hidden="true"
-          data-slot="process-activity-node-meter"
-          data-percent={percent}
-          className="h-1.5 w-full overflow-hidden rounded-full bg-surface-muted transition-opacity duration-fast ease-standard motion-reduce:transition-none"
-          style={isDimmed ? { opacity: GHOST_OPACITY } : undefined}
-        >
+      footer: objectTypeFooter(
+        data.objectTypes,
+        isDimmed,
+        accentFooter(
+          data.accent,
+          isDimmed,
           <div
-            className="h-full rounded-full transition-[width] duration-base ease-standard motion-reduce:transition-none"
-            style={{ width: `${percent}%`, background: meterFill(data.saturation) }}
-          />
-        </div>
+            aria-hidden="true"
+            data-slot="process-activity-node-meter"
+            data-percent={percent}
+            className="h-1.5 w-full overflow-hidden rounded-full bg-surface-muted transition-opacity duration-fast ease-standard motion-reduce:transition-none"
+            style={isDimmed ? { opacity: GHOST_OPACITY } : undefined}
+          >
+            <div
+              className="h-full rounded-full transition-[width] duration-base ease-standard motion-reduce:transition-none"
+              style={{ width: `${percent}%`, background: meterFill(data.saturation) }}
+            />
+          </div>,
+        ),
       ),
     }),
     [
@@ -160,6 +290,8 @@ export function ProcessActivityNode(props: NodeProps<ProcessMapNode>) {
       data.primaryLabel,
       data.secondaryLabel,
       data.saturation,
+      data.accent,
+      data.objectTypes,
       RoleIcon,
       percent,
       isDimmed,
@@ -172,6 +304,7 @@ export function ProcessActivityNode(props: NodeProps<ProcessMapNode>) {
       data-selection={data.selectionState}
       data-role={activityRole(data).toLowerCase()}
       data-hover={isHovered ? "true" : undefined}
+      data-conformance={data.conformance}
       // `relative` positions the rework badge — and, because the meter now lives INSIDE
       // the card (`FlowNode`'s `footer` slot), this wrapper is exactly as tall as the
       // card. That equality is load-bearing, not cosmetic: React Flow lays every
@@ -191,8 +324,13 @@ export function ProcessActivityNode(props: NodeProps<ProcessMapNode>) {
           <span className="sr-only">{data.reworkCount} repeated executions</span>
         </Badge>
       ) : null}
+      {data.conformance ? <ConformanceMarker state={data.conformance} /> : null}
 
-      <div data-slot="process-activity-node-frame" style={isDimmed ? GHOST_FRAME_STYLE : undefined}>
+      <div
+        data-slot="process-activity-node-frame"
+        className={data.conformance ? CONFORMANCE_FRAME_CLASS[data.conformance] : undefined}
+        style={frameStyle(isDimmed, data.conformance)}
+      >
         <FlowNode {...props} type="brand" data={flowData} />
       </div>
     </div>

package/src/process-map/process-map-object-centric.stories.tsx

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import "@xyflow/react/dist/style.css";
+import { useMemo, useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AbstractionControls, type ObjectTypeAbstraction } from "../abstraction-controls";
+import type { AbstractionOptions } from "../core/abstract-graph";
+import { fromOcel, type OcelEvent, type OcelJson, type OcelObject } from "../core/adapters/ocel";
+import {
+  abstractObjectCentricGraph,
+  discoverObjectCentricGraph,
+  objectCentricProcessGraph,
+  type ObjectCentricGraph,
+} from "../core/discover-object-centric-graph";
+import { OCEL_SAMPLE } from "../core/fixtures/ocel-sample";
+import { ProcessMap } from "./process-map";
+
+/**
+ * A deterministic order-to-delivery OCEL 2.0 log: orders own items, items are picked (and
+ * sometimes checked or re-picked) and packed, packages ship and are delivered. `Place
+ * Order` is shared by orders and items, `Pack` by all three types, `Ship` by orders and
+ * packages — the shapes an object-centric map exists to show.
+ */
+function orderToDeliveryOcel(orders = 12): OcelJson {
+  const objects: OcelObject[] = [];
+  const events: OcelEvent[] = [];
+  let clock = Date.UTC(2026, 0, 5, 8);
+  let eventId = 0;
+  const at = (minutes: number) => {
+    clock += minutes * 60_000;
+    return new Date(clock).toISOString();
+  };
+  const emit = (type: string, minutes: number, objectIds: string[]) => {
+    eventId += 1;
+    events.push({
+      id: `e${eventId}`,
+      type,
+      time: at(minutes),
+      relationships: objectIds.map((objectId) => ({ objectId })),
+    });
+  };
+
+  for (let o = 1; o <= orders; o += 1) {
+    const order = `o${o}`;
+    const items = Array.from({ length: 1 + (o % 3) }, (_, i) => `o${o}-i${i + 1}`);
+    const pkg = `o${o}-p1`;
+    objects.push({ id: order, type: "order" });
+    for (const item of items) objects.push({ id: item, type: "item" });
+    objects.push({ id: pkg, type: "package" });
+
+    emit("Place Order", 30, [order, ...items]);
+    emit("Confirm Payment", 20, [order]);
+    items.forEach((item, index) => {
+      emit("Pick Item", 15, [item]);
+      if ((o + index) % 3 === 0) emit("Quality Check", 10, [item]);
+      if ((o + index) % 5 === 0) {
+        emit("Repick", 10, [item]);
+        emit("Pick Item", 10, [item]);
+      }
+    });
+    emit("Pack", 25, [order, ...items, pkg]);
+    emit("Ship", 60, [order, pkg]);
+    emit("Deliver", 240, [pkg]);
+    if (o % 2 === 0) emit("Send Invoice", 30, [order]);
+  }
+
+  return {
+    objectTypes: [{ name: "order" }, { name: "item" }, { name: "package" }],
+    objects,
+    events,
+  };
+}
+
+function discover(document: OcelJson, objectTypes?: string[]): ObjectCentricGraph {
+  const result = fromOcel(document, objectTypes ? { objectTypes } : undefined);
+  if (!result.ok) throw new Error(result.errors.map((error) => error.message).join("; "));
+  return discoverObjectCentricGraph(result.logs, { objectTypes: result.objectTypes });
+}
+
+const deliveryLog = orderToDeliveryOcel();
+const twoTypes = discover(deliveryLog, ["order", "item"]);
+const threeTypes = discover(deliveryLog);
+const sample = discover(OCEL_SAMPLE);
+
+const metric = { node: "absolute_case", edge: "absolute" } as const;
+
+const meta = {
+  title: "Process/ProcessMap/Object-centric",
+  component: ProcessMap,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "`ProcessMap`’s object-centric mode (RM-066), fed by `fromOcel` and " +
+          "`discoverObjectCentricGraph`. An activity shared by several object types is ONE " +
+          "node carrying a chip per type — a chart-token square, the type’s printed " +
+          "two-letter code and its object count, named for assistive technology. Edges are " +
+          "never merged across types: each type draws its own, side by side, in its own " +
+          "colour, and every pill is prefixed with the type’s code, so no type is told " +
+          "apart by colour alone.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[36rem] w-full bg-background">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ProcessMap>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Orders and their items: `Place Order` and `Pack` are shared, picking is item-only. */
+export const TwoObjectTypes: Story = {
+  args: { objectCentric: twoTypes, metric },
+};
+
+/** Orders, items and packages — `Pack` joins all three, `Ship` joins orders and packages. */
+export const ThreeObjectTypes: Story = {
+  args: { objectCentric: threeTypes, metric },
+};
+
+/**
+ * The hand-verifiable fixture (`core/fixtures/ocel-sample.ts`): `Pack` is referenced by an
+ * order, two items and a package, so its node shows three chips.
+ */
+export const SharedActivityMerge: Story = {
+  args: { objectCentric: sample, metric },
+  play: async ({ canvasElement }) => {
+    const chips = await waitFor(() => {
+      const node = canvasElement.querySelector<HTMLElement>(
+        '.react-flow__node[data-id="Pack"] [data-slot="process-activity-node-object-types"]',
+      );
+      expect(node).not.toBeNull();
+      return [...node!.querySelectorAll<HTMLElement>("[data-object-type]")];
+    });
+    await expect(chips).toHaveLength(3);
+    const names = chips.map((chip) => chip.getAttribute("aria-label"));
+    await expect(new Set(names).size).toBe(3);
+    // Never colour-only: every chip prints its type's code.
+    for (const chip of chips) await expect(chip.textContent?.trim()).toMatch(/^\S{2}\s*\d+$/);
+  },
+};
+
+function PerTypeAbstractionDemo({ graph }: { graph: ObjectCentricGraph }) {
+  const [abstraction, setAbstraction] = useState<AbstractionOptions>({ activities: 1, paths: 1 });
+  const [perType, setPerType] = useState<Record<string, ObjectTypeAbstraction>>(() =>
+    Object.fromEntries(graph.objectTypes.map((type) => [type, { activities: 1, paths: 1 }])),
+  );
+  const abstracted = useMemo(() => abstractObjectCentricGraph(graph, perType), [graph, perType]);
+  const flat = useMemo(() => objectCentricProcessGraph(abstracted), [abstracted]);
+  const hidden = Object.values(abstracted.hiddenByType).reduce(
+    (sum, entry) => ({
+      activities: sum.activities + entry.activities,
+      paths: sum.paths + entry.paths,
+    }),
+    { activities: 0, paths: 0 },
+  );
+  return (
+    <div className="flex size-full gap-4 p-4">
+      <AbstractionControls
+        className="w-72 shrink-0"
+        abstraction={abstraction}
+        onAbstractionChange={(next) => setAbstraction((current) => ({ ...current, ...next }))}
+        graph={flat}
+        hiddenCounts={hidden}
+        perType={perType}
+        onPerTypeChange={setPerType}
+      />
+      <div className="min-w-0 flex-1">
+        <ProcessMap objectCentric={abstracted} metric={metric} />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A global slider pair plus one collapsible, linkable pair per object type. Unlinking
+ * `item` and abstracting it on its own thins the item-coloured edges while the order
+ * edges stay exactly as they were.
+ */
+export const PerTypeAbstraction: Story = {
+  args: { objectCentric: twoTypes, metric },
+  render: () => <PerTypeAbstractionDemo graph={twoTypes} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const count = (type: string) =>
+      canvasElement.querySelectorAll(
+        `[data-slot="process-transition-edge"][data-object-type="${type}"]`,
+      ).length;
+    await waitFor(() => expect(count("item")).toBeGreaterThan(0));
+    const orderBefore = count("order");
+    const itemBefore = count("item");
+
+    await userEvent.click(canvas.getByRole("button", { name: "Link item to the global sliders" }));
+    await userEvent.click(canvas.getByRole("button", { name: /^item/, expanded: false }));
+    const activities = canvas.getByRole("slider", { name: "item activities" });
+    activities.focus();
+    await userEvent.keyboard("{Home}");
+    const paths = canvas.getByRole("slider", { name: "item paths" });
+    paths.focus();
+    await userEvent.keyboard("{Home}");
+
+    await waitFor(() => expect(count("item")).toBeLessThan(itemBefore));
+    await expect(count("order")).toBe(orderBefore);
+  },
+};
+
+/** No graph yet — the same whole-region loading panel as the single-case map. */
+export const Loading: Story = {
+  args: { objectCentric: threeTypes, metric, loading: true },
+};
+
+/** A log whose projections carry no events. */
+export const Empty: Story = {
+  args: { objectCentric: discoverObjectCentricGraph({ order: { events: [] } }), metric },
+};

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

@@ -11,6 +11,7 @@ import {
   waitForSettledCanvas,
 } from "@elabs-ai/components-flow/test";
 import { abstractGraph } from "../core/abstract-graph";
+import { activityColorScale } from "../core/activity-color-scale";
 import { detectRework } from "../core/detect-rework";
 import { discoverGraph } from "../core/discover-graph";
 import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
@@ -239,6 +240,23 @@ export const Frequency: Story = {
     await expectWellFramedCanvas(canvasElement);
     expectClickableZoomControls(canvasElement);
 
+    // #354 — a focused label pill must announce the real transition (both endpoints +
+    // the measure), never the bare printed count: "Approve Order → Reserve Stock" and
+    // "Check Credit → Approve Order" both print "213" (same edge metric, different
+    // endpoints), so the bare number is not even locally unique, let alone informative.
+    // `toHaveAccessibleName`/`getByRole` with an exact string, never a regex — a regex
+    // still matches a truncated or polluted name and the bug survives.
+    await expect(
+      canvas.getByRole("button", {
+        name: "Transition from Check Credit to Approve Order, Transitions 213",
+      }),
+    ).toBeInTheDocument();
+    const pillNames = [
+      ...canvasElement.querySelectorAll<HTMLElement>('[data-slot="edge-label-pill"]'),
+    ].map((pill) => pill.getAttribute("aria-label"));
+    expect(pillNames.every((name) => Boolean(name))).toBe(true);
+    expect(new Set(pillNames).size).toBe(pillNames.length);
+
     // Click-to-select: a node picks itself, and the rest of the graph reads as excluded.
     const nodes = canvasElement.querySelectorAll<HTMLElement>(
       '[data-slot="process-activity-node"]',
@@ -280,6 +298,27 @@ export const Rework: Story = {
   },
 };
 
+/**
+ * With a shared `colorScale` (RM-054): each activity shows a small identity swatch beside
+ * its meter — the same colour `VariantExplorer` paints that activity's chips with when it
+ * gets the same scale. The swatch is a mark, never the card fill, so it does not compete
+ * with the metric reading.
+ */
+export const WithActivityColors: Story = {
+  args: {
+    graph,
+    metric: { node: "absolute_case", edge: "absolute" },
+    colorScale: activityColorScale(graph),
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() =>
+      expect(
+        canvasElement.querySelectorAll('[data-slot="process-activity-node-accent"]').length,
+      ).toBe(graph.activities.length),
+    );
+  },
+};
+
 /** Half the activities and a third of the paths kept — `/core`'s `abstractGraph`. */
 export const Abstracted: Story = {
   args: {
@@ -555,6 +594,31 @@ export const LeftToRight: Story = {
   },
 };
 
+// elkjs adapter — RM-067
+/**
+ * The same graph laid out by ELK (`layoutEngine="elk"`) instead of dagre. elkjs is loaded
+ * lazily on first layout; the map, its framing and its keyboard order behave exactly as
+ * the dagre default does.
+ */
+export const ElkLayout: Story = {
+  args: {
+    graph,
+    metric: { node: "absolute_case", edge: "absolute" },
+    direction: "LR",
+    layoutEngine: "elk",
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(
+      () =>
+        expect(
+          canvasElement.querySelectorAll('[data-slot="process-activity-node"]').length,
+        ).toBeGreaterThan(0),
+      { timeout: 10_000 },
+    );
+    await expectWellFramedCanvas(canvasElement);
+  },
+};
+
 /**
  * The accessible twin required for a graph that cannot be read as a picture. It renders
  * from the same model as the canvas, so the numbers are identical by construction.