@multiplatform.one/node-graph 7.34.4 → 7.36.0

package/src/knobs/envelope.spec.tsx

@@ -25,8 +25,7 @@ import {
   type Knobs,
   type ResolvedKnobs,
   Surface,
-  type SurfaceDensity,
-  type SurfaceSizeIntent,
+  type SurfaceSize,
   defaultKnobs,
   registerPreset,
   useResolvedKnobs,
@@ -95,34 +94,25 @@ const knobVocabulary = {
   cornerSmoothing: ["round", "smooth"],
   borderWidth: ["none", "small", "medium", "large"],
   elevation: ["none", "small", "medium", "large"],
-  space: ["small", "medium", "large"],
-  size: ["small", "medium", "large"],
-  density: ["comfortable", "compact"],
   textAccent: ["low", "medium", "high"],
   headingFont: ["sans-serif", "serif", "mono", "slab", "rounded"],
   bodyFont: ["sans-serif", "serif", "mono", "condensed"],
   fontWeight: ["regular", "bold"],
   pageTitleScale: ["moderate", "display"],
-  animation: ["none", "quick", "bouncy", "lazy", "snappy"],
+  animation: ["none", "quick", "bouncy", "lazy", "quickest"],
 } as const;
 
-const surfaceSizes: readonly (SurfaceSizeIntent | undefined)[] = [
+const surfaceSizes: readonly (Exclude<SurfaceSize, "unset"> | undefined)[] = [
   undefined,
-  "small",
-  "medium",
-  "large",
-];
-const surfaceDensities: readonly (SurfaceDensity | undefined)[] = [
-  undefined,
-  "compact",
-  "comfortable",
+  "$3",
+  "$true",
+  "$5",
 ];
 const intents: readonly (string | null)[] = [null, "accent", "error", "warning", "success"];
 
 interface Combo {
   readonly knobs: Partial<Knobs>;
-  readonly surfaceSize: SurfaceSizeIntent | undefined;
-  readonly surfaceDensity: SurfaceDensity | undefined;
+  readonly surfaceSize: Exclude<SurfaceSize, "unset"> | undefined;
   readonly intent: string | null;
 }
 
@@ -141,7 +131,6 @@ function seededCombos(label: string, count: number): Combo[] {
     combos.push({
       knobs: knobs as Partial<Knobs>,
       surfaceSize: pick(rand, surfaceSizes),
-      surfaceDensity: pick(rand, surfaceDensities),
       intent: pick(rand, intents),
     });
   }
@@ -179,8 +168,7 @@ interface CrossOptions {
   readonly presetName?: string;
   /** Passed to `useKnobEnvelope`; omit to prove the fallback to `defaultIntents`. */
   readonly carryPresetName?: boolean;
-  readonly surfaceSize?: SurfaceSizeIntent;
-  readonly surfaceDensity?: SurfaceDensity;
+  readonly surfaceSize?: Exclude<SurfaceSize, "unset">;
   readonly contextIntent?: string | null;
   /** Explicit `useResolvedKnobs({ intent })` on both sides; omit to lean on context. */
   readonly resolveIntent?: string;
@@ -196,7 +184,7 @@ function cross(options: CrossOptions): Crossing {
   const hostCapture: Capture = {};
   const tree: ReactNode = (
     <Preset preset={options.presetName} overrides={options.knobs}>
-      <Surface size={options.surfaceSize} density={options.surfaceDensity}>
+      <Surface size={options.surfaceSize}>
         <IntentContext.Provider value={options.contextIntent ?? null}>
           <HostProbe
             capture={hostCapture}
@@ -234,9 +222,8 @@ function cross(options: CrossOptions): Crossing {
 describe("the knob envelope crosses the stack (MPO-191 AC-3)", () => {
   it("resolves identically for the design's own host tree", () => {
     const { host, rehydrated } = cross({
-      knobs: { borderRadius: "large", elevation: "medium", space: "large", animation: "bouncy" },
-      surfaceSize: "small",
-      surfaceDensity: "compact",
+      knobs: { borderRadius: "large", elevation: "medium", animation: "bouncy" },
+      surfaceSize: "$3",
       contextIntent: "error",
       resolveIntent: "error",
     });
@@ -251,7 +238,6 @@ describe("the knob envelope crosses the stack (MPO-191 AC-3)", () => {
       const { host, rehydrated } = cross({
         knobs: combo.knobs,
         surfaceSize: combo.surfaceSize,
-        surfaceDensity: combo.surfaceDensity,
         contextIntent: combo.intent,
         resolveIntent: combo.intent ?? undefined,
       });
@@ -262,7 +248,7 @@ describe("the knob envelope crosses the stack (MPO-191 AC-3)", () => {
   it("resolves identically when the intent comes only from context", () => {
     const { host, rehydrated } = cross({
       knobs: { borderRadius: "full", textAccent: "low" },
-      surfaceSize: "medium",
+      surfaceSize: "$true",
       contextIntent: "warning",
     });
     expect(rehydrated).toEqual(host);
@@ -271,7 +257,7 @@ describe("the knob envelope crosses the stack (MPO-191 AC-3)", () => {
   it("carries a NAMED preset's own intents across, which is what presetName is for", () => {
     const { host, rehydrated, envelope } = cross({
       presetName: "graphFuzz",
-      surfaceSize: "large",
+      surfaceSize: "$5",
       contextIntent: "error",
       resolveIntent: "error",
     });
@@ -283,7 +269,7 @@ describe("the knob envelope crosses the stack (MPO-191 AC-3)", () => {
     // these two would be identical and the test above would prove nothing.
     const control = cross({
       presetName: "graphFuzz",
-      surfaceSize: "large",
+      surfaceSize: "$5",
       contextIntent: "warning",
       resolveIntent: "warning",
     });
@@ -295,7 +281,7 @@ describe("the knob envelope crosses the stack (MPO-191 AC-3)", () => {
     const { host, rehydrated } = cross({
       presetName: "graphFuzz",
       carryPresetName: false,
-      surfaceSize: "large",
+      surfaceSize: "$5",
       contextIntent: "error",
       resolveIntent: "error",
     });
@@ -306,14 +292,14 @@ describe("the knob envelope crosses the stack (MPO-191 AC-3)", () => {
 });
 
 describe("the envelope itself", () => {
-  it("keeps `unset` surface axes instead of coercing them", () => {
+  it("keeps an `unset` surface size instead of coercing it", () => {
     const capture: Capture = {};
     const render = renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
+      <Preset overrides={{ borderRadius: "large" }}>
         <HostProbe capture={capture} />
       </Preset>,
     );
-    expect(capture.envelope?.surface).toEqual({ size: "unset", density: "unset" });
+    expect(capture.envelope?.surface).toEqual({ size: "unset" });
     render.unmount();
   });
 

package/src/knobs/envelope.ts

@@ -11,22 +11,16 @@
  * Design: docs/design/node-graph-editor.md section 6.1.
  */
 
-import type { Animation, Knobs, SurfaceDensity, SurfaceSize } from "@multiplatform.one/theme";
+import type { Animation, Knobs, SurfaceSize } from "@multiplatform.one/theme";
 
 /**
  * `unset` is part of the surface vocabulary, and dropping it changes what
- * resolves.
- *
- * Design 6.1 types the envelope's surface as `{ size: SurfaceSize; density:
- * SurfaceDensity }`, but `SurfaceContext`'s default is `{ size: "unset",
- * density: "unset" }` (Surface.tsx:23-26) and `applySurfaceToKnobs`
- * (useResolvedKnobs.ts:44-70) SKIPS an `unset` axis entirely. Coercing a host
- * that sits under no `<Surface>` to "medium" would then step `knobs.size` down
- * from `large`, and the rehydrated tree would resolve differently from the host
- * it copied. So the envelope carries the third value.
+ * resolves: `SurfaceContext`'s default is `{ size: "unset" }` and
+ * `useResolvedKnobs` treats an `unset` ceiling as none. Coercing a host that
+ * sits under no `<Surface>` to a token would clamp the rehydrated tree where
+ * the host it copied was not clamped. So the envelope carries the value as is.
  */
-export type GraphSurfaceSize = SurfaceSize | "unset";
-export type GraphSurfaceDensity = SurfaceDensity | "unset";
+export type GraphSurfaceSize = SurfaceSize;
 
 /** A face the DOM side has to register itself, because WKWebView cannot see an expo-font registration. */
 export interface GraphFontRef {
@@ -38,7 +32,7 @@ export interface GraphFontRef {
 }
 
 /** Bumped when the envelope's shape changes in a way the DOM side must refuse. */
-export const knobEnvelopeSchemaVersion = 1;
+export const knobEnvelopeSchemaVersion = 2;
 
 export interface KnobEnvelope {
   readonly schemaVersion: typeof knobEnvelopeSchemaVersion;
@@ -58,7 +52,7 @@ export interface KnobEnvelope {
    */
   readonly presetName?: string;
   readonly intent: string | null;
-  readonly surface: { readonly size: GraphSurfaceSize; readonly density: GraphSurfaceDensity };
+  readonly surface: { readonly size: GraphSurfaceSize };
   readonly scheme: "light" | "dark";
   readonly themeName: string;
   /**

package/src/knobs/useKnobEnvelope.ts

@@ -125,7 +125,7 @@ export function useKnobEnvelope(options?: UseKnobEnvelopeOptions): KnobEnvelope
     knobs: merged,
     presetName: options?.presetName,
     intent: options?.intent !== undefined ? options.intent : contextIntent,
-    surface: { size: surfaceCtx?.size ?? "unset", density: surfaceCtx?.density ?? "unset" },
+    surface: { size: surfaceCtx?.size ?? "unset" },
     scheme: themeName.startsWith("dark") ? "dark" : "light",
     themeName,
     prefersReducedMotion,

package/src/nodes/GraphNode.spec.tsx

@@ -15,7 +15,13 @@
  * is what gets mocked, which is the point of having one import site.
  */
 
-import { Preset, resolveRadiusForPart, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  panelPaddingPx,
+  Preset,
+  resolveRadiusForPart,
+  Surface,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup } from "@testing-library/react";
 import { readFileSync } from "node:fs";
@@ -25,7 +31,7 @@ import type { ReactElement } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { declarationFor, hexLiteralsIn, paintDeclarationCount } from "../../tests/styles";
 import type { Knobs } from "@multiplatform.one/theme";
-import { containerRadiusPx, type GraphNodePort, nodePanelPaddingPx } from "./nodeMeasure";
+import { containerRadiusPx, type GraphNodePort } from "./nodeMeasure";
 
 const updateNodeInternals = vi.fn();
 
@@ -43,14 +49,11 @@ const radiusStops = [
   "large",
   "full",
 ] as const satisfies readonly Knobs["borderRadius"][];
-const spaces = ["small", "medium", "large"] as const satisfies readonly Knobs["space"][];
 
 function renderNode(ui: ReactElement, overrides?: Partial<Knobs>) {
   return renderWithProviders(
     <Preset cascade={false} overrides={overrides}>
-      <Surface size="medium" density="comfortable">
-        {ui}
-      </Surface>
+      <Surface size="$true">{ui}</Surface>
     </Preset>,
   );
 }
@@ -71,41 +74,30 @@ afterEach(cleanup);
 
 describe("radius: CONTAINER-CAP at all five stops, measured on the rendered frame", () => {
   it.each(radiusStops)("resolves %s through the doctrine table", (borderRadius) => {
-    for (const space of spaces) {
-      const { container } = renderNode(<GraphNode id="n1" title="Transform" />, {
-        borderRadius,
-        space,
-      });
-      const frame = frameOf(container);
-      const expected = resolveRadiusForPart({
-        radiusClass: "CONTAINER-CAP",
-        stop: borderRadius,
-        paddingPx: nodePanelPaddingPx[space],
-      }).px;
-      expect(frame.getAttribute("data-graph-node-radius")).toBe(String(expected));
-      cleanup();
-    }
+    const { container } = renderNode(<GraphNode id="n1" title="Transform" />, { borderRadius });
+    const frame = frameOf(container);
+    const expected = resolveRadiusForPart({
+      radiusClass: "CONTAINER-CAP",
+      stop: borderRadius,
+      paddingPx: panelPaddingPx(),
+    }).px;
+    expect(frame.getAttribute("data-graph-node-radius")).toBe(String(expected));
   });
 
   it("paints that same radius — the emitted declaration, not just the attribute", () => {
     for (const borderRadius of radiusStops) {
-      for (const space of spaces) {
-        const { container } = renderNode(<GraphNode id="n1" title="Transform" />, {
-          borderRadius,
-          space,
-        });
-        const frame = frameOf(container);
-        const painted = declarationFor(frame, "border-top-left-radius");
-        expect(painted, `${borderRadius}/${space} paints no radius at all`).toBeDefined();
-        const reported = Number(frame.getAttribute("data-graph-node-radius"));
-        // happy-dom does not resolve custom properties, so a token-valued
-        // declaration reads back as `var(--t-radius-N)`. Decode it the same
-        // way the component does and require the two to agree.
-        const token = /^var\(--(?:t-)?radius-(\d+)\)$/.exec(painted!);
-        const paintedPx = token ? containerRadiusPx(`$${token[1]}`) : Number.parseFloat(painted!);
-        expect(paintedPx, `${borderRadius}/${space} painted ${painted}`).toBe(reported);
-        cleanup();
-      }
+      const { container } = renderNode(<GraphNode id="n1" title="Transform" />, { borderRadius });
+      const frame = frameOf(container);
+      const painted = declarationFor(frame, "border-top-left-radius");
+      expect(painted, `${borderRadius} paints no radius at all`).toBeDefined();
+      const reported = Number(frame.getAttribute("data-graph-node-radius"));
+      // happy-dom does not resolve custom properties, so a token-valued
+      // declaration reads back as `var(--t-radius-N)`. Decode it the same
+      // way the component does and require the two to agree.
+      const token = /^var\(--(?:t-)?radius-(\d+)\)$/.exec(painted!);
+      const paintedPx = token ? containerRadiusPx(`$${token[1]}`) : Number.parseFloat(painted!);
+      expect(paintedPx, `${borderRadius} painted ${painted}`).toBe(reported);
+      cleanup();
     }
   });
 });
@@ -181,7 +173,7 @@ describe("useUpdateNodeInternals fires on a port change and never on a knob flip
     ];
     rerender(
       <Preset cascade={false}>
-        <Surface size="medium" density="comfortable">
+        <Surface size="$true">
           <GraphNode id="n1" title="Transform" ports={grown} />
         </Surface>
       </Preset>,
@@ -193,20 +185,19 @@ describe("useUpdateNodeInternals fires on a port change and never on a knob flip
   it("does NOT fire on a pure knob flip that keeps the same ports array", () => {
     const { rerender } = renderNode(<GraphNode id="n1" title="Transform" ports={twoPorts} />, {
       borderRadius: "none",
-      space: "small",
     });
     expect(updateNodeInternals).toHaveBeenCalledTimes(0);
 
     rerender(
-      <Preset cascade={false} overrides={{ borderRadius: "full", space: "large", size: "large" }}>
-        <Surface size="medium" density="comfortable">
+      <Preset cascade={false} overrides={{ borderRadius: "full" }}>
+        <Surface size="$true">
           <GraphNode id="n1" title="Transform" ports={twoPorts} />
         </Surface>
       </Preset>,
     );
     // The flip must actually have restyled the node, or this proves nothing.
     expect(frameOf(document.body as HTMLElement).getAttribute("data-graph-node-radius")).toBe(
-      String(nodePanelPaddingPx.large),
+      String(panelPaddingPx()),
     );
     expect(updateNodeInternals).toHaveBeenCalledTimes(0);
   });
@@ -223,7 +214,7 @@ function renderResolved(overrides: Partial<Knobs>): {
   }
   renderWithProviders(
     <Preset cascade={false} overrides={overrides}>
-      <Surface size="medium" density="comfortable">
+      <Surface size="$true">
         <Probe />
       </Surface>
     </Preset>,

package/src/nodes/GraphNode.stories.tsx

@@ -171,13 +171,11 @@ const fuzzCombos = [
       borderRadius: "medium",
       borderWidth: "none",
       elevation: "none",
-      space: "large",
-      size: "medium",
       textAccent: "medium",
       headingFont: "geometric",
       bodyFont: "sans-serif",
       fontWeight: "bold",
-      animation: "tooltip",
+      animation: "slow",
     },
   },
   {
@@ -187,8 +185,6 @@ const fuzzCombos = [
       borderRadius: "none",
       borderWidth: "none",
       elevation: "small",
-      space: "small",
-      size: "small",
       textAccent: "medium",
       headingFont: "rounded",
       bodyFont: "cursive",
@@ -203,8 +199,6 @@ const fuzzCombos = [
       borderRadius: "full",
       borderWidth: "small",
       elevation: "large",
-      space: "medium",
-      size: "large",
       textAccent: "high",
       headingFont: "mono",
       bodyFont: "serif",
@@ -242,7 +236,7 @@ export const KnobFuzz: Story = {
         <FuzzColumn key={scheme} scheme={scheme}>
           {fuzzCombos.map((combo) => (
             <Preset key={combo.label} cascade={false} overrides={combo.knobs}>
-              <Surface size="medium" density="comfortable">
+              <Surface size="$4">
                 <YStack gap="$2">
                   <SizableText size="$1" opacity={0.6}>
                     {combo.label}

package/src/nodes/GraphNode.tsx

@@ -18,6 +18,8 @@
  *    would stack a second forced-layout storm on the observer's.
  */
 
+import { transitionProps } from "@multiplatform.one/theme";
+
 import { type ReactNode, useEffect, useRef } from "react";
 import { useGraphNodeKnobs } from "../knobs/graphKnobs";
 import { SizableText, XStack, YStack } from "tamagui";
@@ -29,10 +31,10 @@ import {
   containerRadiusPx,
   type GraphNodeMeasure,
   type GraphNodePort,
-  type GraphNodeSizeKnob,
   graphNodeMinHeight,
   graphNodeWidth,
   portSpacing,
+  graphNodeSize,
 } from "./nodeMeasure";
 
 export interface GraphNodeProps {
@@ -100,7 +102,7 @@ export function GraphNode({
 
   usePortInternals(id, ports);
 
-  const size = knobProps.size as GraphNodeSizeKnob;
+  const size = graphNodeSize(knobProps.sizeToken);
   const portSpacingPx = portSpacing({ coarsePointer });
   // The dot straddles the row's edge, so half of it lands inside the row. The
   // label clears the whole diameter rather than the half it strictly needs, so
@@ -143,7 +145,7 @@ export function GraphNode({
       // §7.1 H6. Handles overhang the frame; a clipping node eats them.
       overflow="visible"
       opacity={dragging ? 0.85 : 1}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, ["borderRadius", "borderWidth"])}
     >
       <XStack {...knobProps.gap} alignItems="center" justifyContent="space-between">
         {/*

package/src/nodes/GraphPort.spec.tsx

@@ -46,6 +46,7 @@ const radiusStops = [
   "full",
 ] as const satisfies readonly Knobs["borderRadius"][];
 const sizes = ["small", "medium", "large"] as const satisfies readonly GraphNodeSizeKnob[];
+const sizeTokenFor = { small: "$3", medium: "$true", large: "$5" } as const;
 
 const graphCss = readFileSync(
   join(dirname(fileURLToPath(import.meta.url)), "../../css/graph.css"),
@@ -56,11 +57,8 @@ const afterRule = graphCss.match(/\.mp-graph-port::after\s*\{([^}]*)\}/);
 const discRule = graphCss.match(/\.mp-graph-port\s*\{([^}]*)\}/);
 
 /**
- * `Surface` is the size AUTHORITY, not the size knob: `applySurfaceToKnobs`
- * replaces `knobs.size` outright when no explicit `size` option is passed to
- * `useResolvedKnobs` (LC-68). So the size stops are driven through the Surface
- * here — setting `overrides={{ size }}` under a fixed Surface is a no-op, and a
- * spec that did it would be testing nothing while looking like it tested a lot.
+ * `Surface` is the size authority: the size token reaches the port only
+ * through the Surface ceiling, so each size row is driven through it here.
  */
 function renderPort(
   props: { side: GraphPortSide; coarsePointer?: boolean; portSpacingPx?: number },
@@ -69,7 +67,7 @@ function renderPort(
 ) {
   return renderWithProviders(
     <Preset cascade={false} overrides={overrides}>
-      <Surface size={surfaceSize} density="comfortable">
+      <Surface size={sizeTokenFor[surfaceSize]}>
         <ReactFlowProvider>
           <GraphPort id="p1" direction="out" {...props} />
         </ReactFlowProvider>

package/src/nodes/GraphPort.stories.tsx

@@ -40,6 +40,9 @@ import { GraphPort } from "./GraphPort";
 import { paintedPortSize, portGeometry, portHitSize } from "./handleGeometry";
 import type { GraphNodePort, GraphNodeSizeKnob, GraphPortSide } from "./nodeMeasure";
 
+/** The size token whose side of `$true` reads each table row. */
+const rowToken = { small: "$3", medium: "$4", large: "$5" } as const;
+
 const sides: GraphPortSide[] = ["left", "right", "top", "bottom"];
 
 const crowded: GraphNodePort[] = [
@@ -59,7 +62,7 @@ const meta: Meta<typeof GraphPort> = {
     docs: {
       description: {
         component:
-          "A port is painted only — it draws a dot and declares a hit region, and decides nothing about whether a connection is legal. The painted dot is 8/10/12 by the size knob and NEVER 44 (H1); the 44pt target is a ::after pseudo-element that grows outward (H2), so the rendered edge endpoint stays where the 8px dot put it. The circle survives borderRadius:none, because a square port reads as a resize grip.",
+          "A port is painted only — it draws a dot and declares a hit region, and decides nothing about whether a connection is legal. The painted dot is 8/10/12 by the size token and NEVER 44 (H1); the 44pt target is a ::after pseudo-element that grows outward (H2), so the rendered edge endpoint stays where the 8px dot put it. The circle survives borderRadius:none, because a square port reads as a resize grip.",
       },
     },
   },
@@ -111,7 +114,7 @@ export const Main: Story = {
           </SizableText>
           {(["small", "medium", "large"] as const satisfies readonly GraphNodeSizeKnob[]).map(
             (size) => (
-              <Surface key={size} size={size} density="comfortable">
+              <Surface key={size} size={rowToken[size]}>
                 <XStack gap="$8" alignItems="center">
                   <SizableText size="$2" opacity={0.6} width={70}>
                     size {size}
@@ -329,7 +332,7 @@ export const HitTarget: Story = {
               <XStack gap="$9" alignItems="center">
                 {(["small", "medium", "large"] as const satisfies readonly GraphNodeSizeKnob[]).map(
                   (size) => (
-                    <Surface key={size} size={size} density="comfortable">
+                    <Surface key={size} size={rowToken[size]}>
                       <YStack gap="$3" alignItems="center" width={120}>
                         {/*
                           64 square so a 44 px region has room to paint without

package/src/nodes/GraphPort.tsx

@@ -21,7 +21,8 @@ import { isTouchSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { CSSProperties } from "react";
 import { Handle, Position } from "../react-flow/xy";
 import { paintedPortSize, portHitSize, portRegionInset } from "./handleGeometry";
-import type { GraphNodeSizeKnob, GraphPortSide } from "./nodeMeasure";
+import type { GraphPortSide } from "./nodeMeasure";
+import { graphNodeSize } from "./nodeMeasure";
 
 const positionForSide: Record<GraphPortSide, Position> = {
   left: Position.Left,
@@ -61,7 +62,7 @@ export function GraphPort({
   isConnectable = true,
 }: GraphPortProps) {
   const { knobProps } = useResolvedKnobs({ component: "GraphPort", intent });
-  const size = knobProps.size as GraphNodeSizeKnob;
+  const size = graphNodeSize(knobProps.sizeToken);
 
   const painted = paintedPortSize(size);
   const hit = portHitSize({ size, coarsePointer, portSpacingPx });

package/src/nodes/Overview.stories.tsx

@@ -167,7 +167,7 @@ export const main = {
   // between reloads, and it is why `size` is not fuzzable here.
   render: () => (
     <Preset>
-      <Surface size="medium" density="comfortable">
+      <Surface size="$4">
         <YStack gap="$3" padding="$3">
           <View width="100%" height={620}>
             <NodeGraphWeb schema={schema} defaultDocument={bigDoc}>
@@ -200,7 +200,7 @@ export const crossover = {
     const [high, setHigh] = useState(false);
     return (
       <Preset>
-        <Surface size="medium" density="comfortable">
+        <Surface size="$4">
           <YStack gap="$3" padding="$3">
             <Switch
               id="overview-zoom"

package/src/nodes/handleGeometry.ts

@@ -5,7 +5,7 @@
  *
  * The laws, verbatim from §7.1:
  *
- *  H1. The painted dot is 8 / 10 / 12 by the size knob and NEVER grows to 44.
+ *  H1. The painted dot is 8 / 10 / 12 by the size token and NEVER grows to 44.
  *      A 44 px painted dot is a different component.
  *  H2. The hit region is a pseudo-element, never element growth, because
  *      `getEdgePosition` reads the handle box's outer edge (`center` defaults

package/src/nodes/lod.spec.tsx

@@ -48,6 +48,7 @@ const ports: GraphNodePort[] = [
 ];
 
 const sizes = ["small", "medium", "large"] as const satisfies readonly GraphNodeSizeKnob[];
+const sizeTokenFor = { small: "$3", medium: "$true", large: "$5" } as const;
 
 // ── lodForZoom ───────────────────────────────────────────────────────────────
 
@@ -141,7 +142,7 @@ function renderNode(
 ) {
   return renderWithProviders(
     <Preset cascade={false} overrides={overrides}>
-      <Surface size={size} density="comfortable">
+      <Surface size={sizeTokenFor[size]}>
         <ReactFlowProvider>
           <GraphNode
             id="n1"
@@ -255,7 +256,7 @@ describe("OverviewNode measures from the same recipe the detail body does", () =
   function renderOverviewNode(size: GraphNodeSizeKnob) {
     return renderWithProviders(
       <Preset cascade={false}>
-        <Surface size={size} density="comfortable">
+        <Surface size={sizeTokenFor[size]}>
           <ReactFlowProvider>
             <OverviewNode id="n1" ports={ports} />
           </ReactFlowProvider>