@multiplatform.one/node-graph 7.34.4 → 7.36.0

package/src/nodes/nodeMeasure.spec.ts

@@ -11,14 +11,20 @@
 import {
   capContainerRadius,
   defaultKnobs,
+  getActiveScaleTokens,
+  setActiveScaleTokens,
+  generateScale,
   type Knobs,
   MIN_PRESS_TARGET,
+  panelPaddingPx,
   resolveKnobs,
   resolveRadiusForPart,
 } from "@multiplatform.one/theme";
 import { describe, expect, it } from "vitest";
 import {
   defaultNodeMeasure,
+  containerRadiusPx,
+  nodeRadiusTokenPx,
   FINE_PORT_PITCH,
   type GraphNodePort,
   graphNodeMeasure,
@@ -26,13 +32,13 @@ import {
   graphNodeRadius,
   graphNodeRadiusPx,
   graphNodeWidth,
-  nodePanelPaddingPx,
+  type GraphNodeSizeKnob,
   portSpacing,
   verticalPortCrowd,
 } from "./nodeMeasure";
 
-const sizes = ["small", "medium", "large"] as const satisfies readonly Knobs["size"][];
-const spaces = ["small", "medium", "large"] as const satisfies readonly Knobs["space"][];
+const sizes = ["small", "medium", "large"] as const satisfies readonly GraphNodeSizeKnob[];
+const sizeTokens = { small: "$3", medium: "$true", large: "$5" } as const;
 const radiusStops = [
   "none",
   "small",
@@ -60,7 +66,11 @@ describe("width: remapped to the per-kind table, never the control ladder", () =
 
   it("never lands on a control height — the ladder a container must not ride", () => {
     const controlHeights = new Set(
-      sizes.map((size) => resolveKnobs({ ...defaultKnobs, size }).knobProps.control.height),
+      sizes.map(
+        (size) =>
+          resolveKnobs(defaultKnobs, undefined, "light", { sizeToken: sizeTokens[size] }).knobProps
+            .control.height,
+      ),
     );
     expect(controlHeights.size).toBeGreaterThan(0);
     for (const size of sizes) {
@@ -75,63 +85,44 @@ describe("width: remapped to the per-kind table, never the control ladder", () =
 });
 
 describe("radius: CONTAINER-CAP at all five stops", () => {
-  it("mirrors the resolver's panel padding — the drift guard on this module's copy", () => {
-    // `capContainerRadius` at `full` returns the container's own padding px,
-    // so this equality pins our mirror to `panelPaddingPxMap` in resolveKnobs.
-    for (const space of spaces) {
-      expect(capContainerRadius("full", space)).toBe(nodePanelPaddingPx[space]);
-    }
+  it("caps at the panelPadding role, the same px capContainerRadius uses", () => {
+    expect(capContainerRadius("full")).toBe(panelPaddingPx());
   });
 
-  it("paints exactly what capContainerRadius resolves, at every stop and space", () => {
+  it("paints exactly what capContainerRadius resolves, at every stop", () => {
     for (const borderRadius of radiusStops) {
-      for (const space of spaces) {
-        expect(graphNodeRadius({ borderRadius, space })).toBe(
-          capContainerRadius(borderRadius, space),
-        );
-      }
+      expect(graphNodeRadius({ borderRadius })).toBe(capContainerRadius(borderRadius));
     }
   });
 
-  it("agrees with the DG-RAD doctrine table at every stop and space", () => {
+  it("agrees with the DG-RAD doctrine table at every stop", () => {
     for (const borderRadius of radiusStops) {
-      for (const space of spaces) {
-        expect(graphNodeRadiusPx({ borderRadius, space })).toBe(
-          resolveRadiusForPart({
-            radiusClass: "CONTAINER-CAP",
-            stop: borderRadius,
-            paddingPx: nodePanelPaddingPx[space],
-          }).px,
-        );
-      }
+      expect(graphNodeRadiusPx({ borderRadius })).toBe(
+        resolveRadiusForPart({
+          radiusClass: "CONTAINER-CAP",
+          stop: borderRadius,
+          paddingPx: panelPaddingPx(),
+        }).px,
+      );
     }
   });
 
   it("never exceeds the node's own padding — the cap is what stops a child clip", () => {
     for (const borderRadius of radiusStops) {
-      for (const space of spaces) {
-        expect(graphNodeRadiusPx({ borderRadius, space })).toBeLessThanOrEqual(
-          nodePanelPaddingPx[space],
-        );
-      }
+      expect(graphNodeRadiusPx({ borderRadius })).toBeLessThanOrEqual(panelPaddingPx());
     }
   });
 
   it("caps rather than passes through where the token would overflow the padding", () => {
-    // `full` (50px) exceeds every padding stop, so every space caps.
-    for (const space of spaces) {
-      expect(graphNodeRadius({ borderRadius: "full", space })).toBe(nodePanelPaddingPx[space]);
-    }
-    // `large` (16px) fits inside `large` padding (32px) and keeps its token.
-    expect(typeof graphNodeRadius({ borderRadius: "large", space: "large" })).toBe("string");
-    // ...and does not fit inside `small` padding (13px), so it caps.
-    expect(graphNodeRadius({ borderRadius: "large", space: "small" })).toBe(13);
+    // `full` (44px) exceeds the 16px panelPadding role, so it caps.
+    expect(graphNodeRadius({ borderRadius: "full" })).toBe(panelPaddingPx());
+    // `medium` (14px) fits inside it and keeps its token.
+    expect(typeof graphNodeRadius({ borderRadius: "medium" })).toBe("string");
+    expect(graphNodeRadius({ borderRadius: "large" })).toBe(panelPaddingPx());
   });
 
-  it("is 0 at `none` in every space", () => {
-    for (const space of spaces) {
-      expect(graphNodeRadiusPx({ borderRadius: "none", space })).toBe(0);
-    }
+  it("is 0 at `none`", () => {
+    expect(graphNodeRadiusPx({ borderRadius: "none" })).toBe(0);
   });
 });
 
@@ -243,3 +234,21 @@ describe("graphNodeMeasure seeds both axes before first paint", () => {
     ).toStrictEqual({ width: 300, minHeight: 200 });
   });
 });
+
+it("container radius tokens read the active scale, including the $8 container key", () => {
+  const previous = getActiveScaleTokens();
+  try {
+    for (const control of [40, 36, 44]) {
+      const tokens = generateScale({ control, type: 15 }).tokens;
+      setActiveScaleTokens(tokens);
+      for (const key of ["0", "4", "6", "8", "12"] as const) {
+        expect(containerRadiusPx(`$${key}`)).toBe(tokens.radius[key]);
+      }
+      expect(containerRadiusPx(13)).toBe(13);
+    }
+    expect(() => containerRadiusPx("missing")).toThrow();
+    expect(nodeRadiusTokenPx.$8).toBe(20);
+  } finally {
+    setActiveScaleTokens(previous);
+  }
+});

package/src/nodes/nodeMeasure.ts

@@ -12,15 +12,28 @@
 
 import {
   capContainerRadius,
+  defaultScaleInputs,
+  generateScale,
+  getActiveScaleTokens,
   type Knobs,
   MIN_PRESS_TARGET,
+  panelPaddingPx,
   resolveRadiusForPart,
+  sizeTokenStop,
 } from "@multiplatform.one/theme";
 
-export type GraphNodeSizeKnob = Knobs["size"];
-export type GraphNodeSpaceKnob = Knobs["space"];
+/**
+ * The row of the per-kind tables a node reads: its size token's side of the
+ * default control size (`sizeTokenStop`), never the control-height recipe.
+ */
+export type GraphNodeSizeKnob = "small" | "medium" | "large";
 export type GraphNodeRadiusKnob = Knobs["borderRadius"];
 
+/** The table row for a resolved size token. */
+export function graphNodeSize(sizeToken: string): GraphNodeSizeKnob {
+  return sizeTokenStop(sizeToken);
+}
+
 export type GraphPortSide = "left" | "right" | "top" | "bottom";
 
 /**
@@ -58,21 +71,6 @@ export const defaultNodeMeasure: Record<GraphNodeSizeKnob, GraphNodeMeasure> = {
   large: { width: 216, minHeight: 84 },
 };
 
-/**
- * Container padding in px per `space` stop.
- *
- * Mirrors `panelPaddingPxMap` in `resolveKnobs.ts`, which is private to that
- * module — the resolver mirrors the same numbers for the same reason (it stays
- * pure, so it cannot read live tokens). `graphNode.spec.ts` pins this mirror
- * against `capContainerRadius(..., "full")`, which returns the padding px
- * itself, so a change in the resolver fails the spec here instead of drifting.
- */
-export const nodePanelPaddingPx: Record<GraphNodeSpaceKnob, number> = {
-  small: 13,
-  medium: 18,
-  large: 32,
-};
-
 /**
  * Vertical pitch between two ports on the same node edge.
  *
@@ -92,7 +90,7 @@ export function portSpacing(opts: { readonly coarsePointer: boolean }): number {
 /**
  * §11 Size, GraphNode frame: `remap` to `NodeKindSpec.measure.width`.
  *
- * The size knob reaches the width only through the per-kind table. It never
+ * The size token reaches the width only through the per-kind table. It never
  * reaches the control-height recipe (`knobProps.control.height`), because a
  * node is a container and a container that steps with a control ladder is a
  * control wearing a frame.
@@ -144,41 +142,27 @@ export function graphNodeMinHeight(opts: {
  */
 export function graphNodeRadius(knobs: {
   readonly borderRadius: GraphNodeRadiusKnob;
-  readonly space: GraphNodeSpaceKnob;
 }): string | number {
-  return capContainerRadius(knobs.borderRadius, knobs.space);
+  return capContainerRadius(knobs.borderRadius);
 }
 
-/**
- * Radius TOKEN → px.
- *
- * Mirrors `borderRadiusMap` / `radiusPxMap` in `resolveKnobs.ts`, both private
- * to that module. Needed because `capContainerRadius` returns either a token
- * (`"$4"`) or a px number, and a rendered node has to report ONE number.
- * `graphNode.spec.ts` pins the whole map against the doctrine table at every
- * stop and space, so a token that stops meaning what it says fails there.
- */
-export const nodeRadiusTokenPx: Readonly<Record<string, number>> = {
-  $0: 0,
-  $2: 5,
-  $4: 9,
-  $6: 16,
-  $12: 50,
-};
+/** The default scale's radius tokens; rendered nodes read the active scale. */
+export const nodeRadiusTokenPx: Readonly<Record<string, number>> = Object.fromEntries(
+  Object.entries(generateScale(defaultScaleInputs).tokens.radius).map(([key, px]) => [
+    `$${key}`,
+    px,
+  ]),
+);
 
-/**
- * px for whatever `capContainerRadius` resolved to. A number is already the
- * capped px; a token goes through the mirror above.
- */
+/** px for a capped number or a radius token on the active scale. */
 export function containerRadiusPx(value: string | number): number {
   if (typeof value === "number") return value;
-  const px = nodeRadiusTokenPx[value];
-  if (px === undefined) {
-    throw new Error(
-      `containerRadiusPx: "${value}" is not a radius token this module mirrors — add it to nodeRadiusTokenPx beside the resolver's borderRadiusMap`,
-    );
+  const radius = getActiveScaleTokens().radius;
+  const key = value.slice(1);
+  if (!value.startsWith("$") || !Object.hasOwn(radius, key)) {
+    throw new Error(`containerRadiusPx: "${value}" is not a radius token on the active scale`);
   }
-  return px;
+  return radius[key as keyof typeof radius];
 }
 
 /**
@@ -191,14 +175,11 @@ export function containerRadiusPx(value: string | number): number {
  * doctrine/resolver drift is a failing test rather than a corner that quietly
  * clips a child.
  */
-export function graphNodeRadiusPx(knobs: {
-  readonly borderRadius: GraphNodeRadiusKnob;
-  readonly space: GraphNodeSpaceKnob;
-}): number {
+export function graphNodeRadiusPx(knobs: { readonly borderRadius: GraphNodeRadiusKnob }): number {
   return resolveRadiusForPart({
     radiusClass: "CONTAINER-CAP",
     stop: knobs.borderRadius,
-    paddingPx: nodePanelPaddingPx[knobs.space],
+    paddingPx: panelPaddingPx(),
   }).px;
 }
 

package/src/nodes/overviewNode.tsx

@@ -20,8 +20,8 @@
 
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { YStack } from "tamagui";
-import type { GraphNodeMeasure, GraphNodePort, GraphNodeSizeKnob } from "./nodeMeasure";
-import { graphNodeMinHeight, graphNodeWidth, portSpacing } from "./nodeMeasure";
+import type { GraphNodeMeasure, GraphNodePort } from "./nodeMeasure";
+import { graphNodeMinHeight, graphNodeWidth, portSpacing, graphNodeSize } from "./nodeMeasure";
 
 export interface OverviewNodeProps {
   readonly id: string;
@@ -47,7 +47,7 @@ export function OverviewNode({
   // The same resolver call the detail body makes, so the fill is the fill the
   // user was just looking at rather than a second grey invented here.
   const { knobProps } = useResolvedKnobs({ component: "GraphNode", intent });
-  const size = knobProps.size as GraphNodeSizeKnob;
+  const size = graphNodeSize(knobProps.sizeToken);
   const portSpacingPx = portSpacing({ coarsePointer });
 
   return (

package/src/react-flow/ConnectionPuck.spec.tsx

@@ -132,7 +132,7 @@ function DriveConnection({ to }: { to: { nodeId: string; id: string } | null })
 function mountWithConnection(to: { nodeId: string; id: string } | null) {
   return renderWithProviders(
     <Preset cascade={false}>
-      <Surface size="medium" density="comfortable">
+      <Surface size="$true">
         <NodeGraphWeb schema={schema()} defaultDocument={doc()}>
           <DriveConnection to={to} />
         </NodeGraphWeb>
@@ -149,7 +149,7 @@ describe("the puck reads React Flow's own connection state", () => {
   it("renders nothing while no connection is in progress", () => {
     const { container } = renderWithProviders(
       <Preset cascade={false}>
-        <Surface size="medium" density="comfortable">
+        <Surface size="$true">
           <NodeGraphWeb schema={schema()} defaultDocument={doc()} />
         </Surface>
       </Preset>,
@@ -184,7 +184,7 @@ describe("the puck reads React Flow's own connection state", () => {
   it("can be turned off, for a consumer that draws its own", () => {
     const { container } = renderWithProviders(
       <Preset cascade={false}>
-        <Surface size="medium" density="comfortable">
+        <Surface size="$true">
           <NodeGraphWeb schema={schema()} defaultDocument={doc()} connectionPuck={false}>
             <DriveConnection to={{ nodeId: "c", id: "in" }} />
           </NodeGraphWeb>
@@ -197,7 +197,7 @@ describe("the puck reads React Flow's own connection state", () => {
   it("mounted a second time renders a second div — which is why the canvas owns it", () => {
     const { container } = renderWithProviders(
       <Preset cascade={false}>
-        <Surface size="medium" density="comfortable">
+        <Surface size="$true">
           <NodeGraphWeb schema={schema()} defaultDocument={doc()} connectionPuck={false}>
             <DriveConnection to={{ nodeId: "c", id: "in" }} />
             <ConnectionPuck document={doc()} schema={schema()} />

package/src/react-flow/ConnectionPuck.tsx

@@ -20,7 +20,7 @@
  * target the drop will then reject is worse than naming nothing.
  */
 
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { SizableText, XStack } from "tamagui";
 import { isLegalTarget } from "../interaction/legalTargets";
 import type {
@@ -165,7 +165,7 @@ export function ConnectionPuck<N extends NodeKindDefs, E extends EdgeKindDefs>({
       // saying something true, what you are dragging, just not the thing the
       // user is looking for.
       opacity={label.legal ? 1 : 0.7}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.overlay)}
     >
       <SizableText {...knobProps.label} numberOfLines={1}>
         {label.text}

package/src/react-flow/NodeGraphWeb.spec.tsx

@@ -42,9 +42,7 @@ afterEach(() => {
 function mount(element: ReactElement) {
   return renderWithProviders(
     <Preset cascade={false}>
-      <Surface size="medium" density="comfortable">
-        {element}
-      </Surface>
+      <Surface size="$true">{element}</Surface>
     </Preset>,
   );
 }
@@ -337,9 +335,7 @@ describe("onlyRenderVisibleElements", () => {
 
     view.rerender(
       <Preset cascade={false}>
-        <Surface size="medium" density="comfortable">
-          {canvas(false)}
-        </Surface>
+        <Surface size="$true">{canvas(false)}</Surface>
       </Preset>,
     );
 

package/src/react-flow/NodeGraphWeb.stories.tsx

@@ -186,24 +186,20 @@ const fuzzCombos: readonly { readonly label: string; readonly knobs: Partial<Kno
       borderRadius: "medium",
       borderWidth: "none",
       elevation: "none",
-      space: "large",
-      size: "medium",
       textAccent: "medium",
       headingFont: "geometric",
       bodyFont: "sans-serif",
       fontWeight: "bold",
-      animation: "tooltip",
+      animation: "slow",
     },
   },
   {
-    label: "combo 2 · radius none · size small · animation none",
+    label: "combo 2 · radius none · animation none",
     knobs: {
       fillStyle: "filled",
       borderRadius: "none",
       borderWidth: "none",
       elevation: "small",
-      space: "small",
-      size: "small",
       textAccent: "medium",
       headingFont: "rounded",
       bodyFont: "cursive",
@@ -212,14 +208,12 @@ const fuzzCombos: readonly { readonly label: string; readonly knobs: Partial<Kno
     },
   },
   {
-    label: "combo 3 · radius full · size large · elevation large",
+    label: "combo 3 · radius full · elevation large",
     knobs: {
       fillStyle: "filled",
       borderRadius: "full",
       borderWidth: "small",
       elevation: "large",
-      space: "medium",
-      size: "large",
       textAccent: "high",
       headingFont: "mono",
       bodyFont: "serif",

package/src/react-flow/NodeGraphWeb.tsx

@@ -67,7 +67,7 @@ import type {
 } from "../model/index";
 import { portConnectionRadius } from "../nodes/handleGeometry";
 import { defaultOverviewZoom } from "../nodes/lod";
-import type { GraphNodeSizeKnob } from "../nodes/nodeMeasure";
+import { graphNodeSize } from "../nodes/nodeMeasure";
 import { GraphVars, graphRootClassName } from "../theme/GraphVarsStyle";
 import { GraphActionsProvider } from "./GraphActions";
 import type { GraphActions } from "./GraphActions";
@@ -336,7 +336,7 @@ function NodeGraphCanvas<N extends NodeKindDefs, E extends EdgeKindDefs>(
   // `useResolvedKnobs`, not from here; this is the `size` the measure seed
   // reads and the pointer class the var layer needs.
   const { knobProps } = useResolvedKnobs();
-  const size = knobProps.size as GraphNodeSizeKnob;
+  const size = graphNodeSize(knobProps.sizeToken);
 
   const envelope = useKnobEnvelope({
     knobs,

package/src/theme/graphVars.spec.ts

@@ -18,12 +18,14 @@ import {
   type Knobs,
   type ResolvedKnobs,
   defaultKnobs,
+  cssAnimationConfig,
   isResolvableThemeValue,
   resolveKnobs,
 } from "@multiplatform.one/theme";
 import {
   type GraphThemeAccess,
   edgeStrokeWidthPx,
+  elevationBoxShadow,
   graphCssVars,
   graphTransitionCss,
   graphVarValues,
@@ -85,6 +87,7 @@ function enclosingSelector(css: string, index: number): string {
 // ── A theme fixture with HEX raws, so the hex ban is not vacuous ──────────────
 
 const fixtureRaw: Record<string, string> = {
+  shadowColor: "rgba(0,0,0,0.12)",
   color: "hsl(0, 0%, 9.0%)",
   color1: "#ffffff",
   color4: "hsl(0, 0%, 94.1%)",
@@ -102,8 +105,12 @@ const fixtureTheme: GraphThemeAccess = {
   raw: (key) => fixtureRaw[key],
 };
 
-function resolveFor(knobs: Partial<Knobs>, scheme: "light" | "dark" = "light"): ResolvedKnobs {
-  return resolveKnobs({ ...defaultKnobs, ...knobs } as Knobs, undefined, scheme);
+function resolveFor(
+  knobs: Partial<Knobs>,
+  scheme: "light" | "dark" = "light",
+  sizeToken?: string,
+): ResolvedKnobs {
+  return resolveKnobs({ ...defaultKnobs, ...knobs } as Knobs, undefined, scheme, { sizeToken });
 }
 
 const defaultResolved = resolveFor({});
@@ -164,10 +171,10 @@ describe("every mapped value resolves", () => {
   const schemes = ["light", "dark"] as const;
   const knobSweep: Partial<Knobs>[] = [
     {},
-    { fillStyle: "outlined", borderWidth: "none", elevation: "none", size: "small" },
-    { borderWidth: "small", elevation: "medium", space: "small", size: "large" },
-    { borderWidth: "large", elevation: "large", space: "large", animation: "none" },
-    { animation: "bouncy", density: "compact", textAccent: "low" },
+    { fillStyle: "outlined", borderWidth: "none", elevation: "none" },
+    { borderWidth: "small", elevation: "medium" },
+    { borderWidth: "large", elevation: "large", animation: "none" },
+    { animation: "bouncy", textAccent: "low" },
   ];
 
   for (const scheme of schemes) {
@@ -243,19 +250,20 @@ describe("the knob laws this layer owns", () => {
     }
   });
 
-  it("moves the painted handle with `size` and never paints it at 44", () => {
-    const painted = (["small", "medium", "large"] as const).map(
-      (size) => graphCssVars(resolveFor({ size }), fixtureTheme)["--mpo-graph-handle-size"],
+  it("moves the painted handle with the size token and never paints it at 44", () => {
+    const painted = (["$3", "$true", "$5"] as const).map(
+      (sizeToken) =>
+        graphCssVars(resolveFor({}, "light", sizeToken), fixtureTheme)["--mpo-graph-handle-size"],
     );
     expect(painted).toEqual(["8px", "10px", "12px"]);
     expect(painted).not.toContain("44px");
   });
 
   it("floors the handle HIT at 44 on coarse and at max(painted, 24) on fine", () => {
-    const coarse = graphCssVars(resolveFor({ size: "small" }), fixtureTheme, {
+    const coarse = graphCssVars(resolveFor({}, "light", "$3"), fixtureTheme, {
       pointer: "coarse",
     });
-    const fine = graphCssVars(resolveFor({ size: "small" }), fixtureTheme, { pointer: "fine" });
+    const fine = graphCssVars(resolveFor({}, "light", "$3"), fixtureTheme, { pointer: "fine" });
     expect(coarse["--mpo-graph-handle-hit"]).toBe("44px");
     expect(fine["--mpo-graph-handle-hit"]).toBe("24px");
   });
@@ -267,15 +275,16 @@ describe("the knob laws this layer owns", () => {
   it("emits a complete CSS transition shorthand, or `none`", () => {
     expect(
       graphCssVars(resolveFor({ animation: "quick" }), fixtureTheme)["--mpo-graph-transition"],
-    ).toBe("all ease-in 100ms");
+    ).toBe(`opacity ${cssAnimationConfig.quick}`);
     expect(
       graphCssVars(resolveFor({ animation: "none" }), fixtureTheme)["--mpo-graph-transition"],
     ).toBe("none");
   });
 
   it("emits no `$token` — a CSS variable whose value is a token is dead", () => {
-    for (const knobs of [{}, { space: "small" as const }, { space: "large" as const }]) {
-      for (const [name, value] of Object.entries(graphCssVars(resolveFor(knobs), fixtureTheme))) {
+    for (const sizeToken of [undefined, "$3", "$5"]) {
+      const emitted = graphCssVars(resolveFor({}, "light", sizeToken), fixtureTheme);
+      for (const [name, value] of Object.entries(emitted)) {
         expect(value.includes("$"), `${name}: ${value}`).toBe(false);
       }
     }
@@ -294,25 +303,10 @@ describe("the mirrored token tables", () => {
     }
   });
 
-  it("mirrors the theme package's own CSS animation timings", () => {
-    // Read as TEXT, not imported. `animations/index` is a platform twin and
-    // resolves to the react-native spring table off the web, and the package's
-    // exports map does not carry this subpath through the workspace alias —
-    // both of which would make an import prove something other than the claim.
-    const source = readFileSync(
-      path.resolve(packageRoot, "../theme/src/theme/animations/css.ts"),
-      "utf8",
-    );
-    const block = /export const animationConfig = \{([\s\S]*?)\n\} as const;/.exec(source);
-    expect(block, "animationConfig is no longer an object literal in css.ts").not.toBeNull();
-    const installed: Record<string, string> = {};
-    for (const entry of (block as RegExpExecArray)[1].matchAll(/(\w+):\s*"([^"]+)"/g)) {
-      installed[entry[1]] = entry[2];
-    }
-    expect(Object.keys(installed).length).toBeGreaterThan(0);
-    expect(Object.keys(graphTransitionCss).sort()).toEqual(Object.keys(installed).sort());
-    for (const [name, timing] of Object.entries(installed)) {
-      expect(graphTransitionCss[name], name).toBe(`all ${timing}`);
+  it("uses the theme CSS table for explicit guide opacity transitions", () => {
+    expect(Object.keys(graphTransitionCss)).toEqual(Object.keys(cssAnimationConfig));
+    for (const [name, timing] of Object.entries(cssAnimationConfig)) {
+      expect(graphTransitionCss[name], name).toBe(`opacity ${timing}`);
     }
   });
 
@@ -320,3 +314,41 @@ describe("the mirrored token tables", () => {
     expect(Object.keys(edgeStrokeWidthPx).sort()).toEqual(["0", "0.5", "1", "2"].sort());
   });
 });
+
+describe("size-formula shadow bridge", () => {
+  it("resolves the shadow variable into CSS and its colour list", () => {
+    const resolved = resolveKnobs({ ...defaultKnobs, elevation: "medium" });
+    expect(elevationBoxShadow(resolved, fixtureTheme)).toEqual({
+      css: "0px 8px 15px rgba(0,0,0,0.12)",
+      colors: [fixtureRaw.shadowColor],
+    });
+    const native = {
+      ...resolved,
+      knobProps: {
+        ...resolved.knobProps,
+        elevationChrome: { ...resolved.knobProps.elevationChrome, style: undefined },
+      },
+    };
+    expect(elevationBoxShadow(native, fixtureTheme)).toEqual(
+      elevationBoxShadow(resolved, fixtureTheme),
+    );
+  });
+
+  it("paints the controls with the elevated pair, so dark separators stay off the fill", () => {
+    for (const scheme of ["light", "dark"] as const) {
+      const resolved = resolveFor({}, scheme);
+      const vars = graphVarValues(resolved, fixtureTheme);
+      const surface = resolved.knobProps.elevatedSurface;
+      expect(vars["--xy-controls-button-background-color"]).toMatchObject({
+        color: fixtureTheme.css(String(surface.backgroundColor).slice(1)),
+      });
+      expect(vars["--xy-controls-button-border-color"]).toMatchObject({
+        color: fixtureTheme.css(String(surface.borderColor).slice(1)),
+      });
+    }
+    const dark = graphVarValues(resolveFor({}, "dark"), fixtureTheme);
+    expect(dark["--xy-controls-button-border-color"]).not.toEqual(
+      dark["--xy-controls-button-background-color"],
+    );
+  });
+});