@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/model/registry.ts

@@ -16,19 +16,15 @@
 import type * as Schema from 'effect/Schema';
 import { type ComponentType } from 'react';
 
-import {
-  BoxNodeView,
-  ClassNodeView,
-  EllipseNodeView,
-  NoteNodeView,
-  PortalNodeView,
-} from '../components/SceneLayer/SceneLayer.tsx';
-import { type PartEditing } from '../utils/parts.ts';
-import { DEFAULT_SIZES, createNode } from '../utils/shapes.ts';
+import { type FormFieldMap } from '@dxos/react-ui-form';
+
+import { BoxNodeView, EllipseNodeView, FrameNodeView, NoteNodeView } from '../components/SceneLayer/SceneLayer.tsx';
+import { type PartEditing, type PartField } from '../utils/parts.ts';
+import { NOMINAL_SIZES, createNode } from '../utils/shapes.ts';
 import { type SceneStore } from './store.ts';
 import {
-  ClassNode,
   EllipseNode,
+  FrameNode,
   type LinkType,
   type Node,
   type NodeBase,
@@ -36,7 +32,6 @@ import {
   NoteNode,
   type Point,
   type Port,
-  PortalNode,
   RectNode,
   type Scene,
   type Size,
@@ -58,6 +53,8 @@ export type NodeViewProps = {
   opening?: boolean;
   /** The text part of this node being edited in place, with the editor's callbacks. */
   editing?: PartEditing;
+  /** The node's embedded content takes input (`SceneViewAtoms.active`); otherwise it should be inert. */
+  active?: boolean;
   /** Opens the node (drills into a portal); absent where the layer is read-only. */
   onOpen?: () => void;
 };
@@ -77,6 +74,7 @@ export type NodeDef = {
   component: ComponentType<NodeViewProps>;
   /** A new node of the type with its default content, for the palette tool and drop-on-canvas. */
   create: (props: CreateProps) => Node;
+  /** Size when created, in nominal units: one unit is the drawing's major grid cell. */
   defaultSize: Size;
   /** Explicit port layout; absent, the type gets `portsPerSide` ports spread along each side. */
   ports?: (node: Node) => readonly Port[];
@@ -85,8 +83,22 @@ export type NodeDef = {
   resizable?: boolean;
   minSize?: Size;
   maxSize?: Size;
-  /** Double-click opens the node (a portal drills in; a text node edits, later). */
+  /** Double-click opens the node (a frame drills in; a text node edits, later). */
   openable?: boolean;
+  /**
+   * The host's own way to open this node, when it has one (a frame showing an object rather than a scene):
+   * opening calls it instead of drilling in, and auto-drill passes the node by.
+   */
+  hostOpen?: (node: Node) => (() => void) | undefined;
+  /**
+   * Controls floating above the node, flush with its right edge and at screen size, so they neither cover the node's
+   * content nor scale with the camera; renders nothing when it returns `null`.
+   */
+  toolbar?: ComponentType<NodeViewProps>;
+  /** The text properties edited in place, in order; the first is the node's main text. */
+  parts?: readonly PartField[];
+  /** Properties-panel renderers for this type's fields, by path (e.g. a list as lines). */
+  fields?: FormFieldMap;
 };
 
 /**
@@ -148,11 +160,12 @@ const MIN_SIZE: Size = { width: 64, height: 32 };
 
 /**
  * A framed shape with a centred, editable label: resizable, with ports spread along every side. The
- * built-in rectangle and scene are both boxes; a host type can extend it too.
+ * built-in rectangle and frame are both boxes; a host type can extend it too.
  */
 export const boxPrototype: NodeDefSpec = {
   component: BoxNodeView,
-  defaultSize: DEFAULT_SIZES.rect,
+  parts: [{ field: 'label' }],
+  defaultSize: NOMINAL_SIZES.rect,
   resizable: true,
   minSize: MIN_SIZE,
 };
@@ -175,43 +188,35 @@ export const defaultNodeTypes: Readonly<Record<NodeType, NodeDefSpec>> = {
     schema: EllipseNode,
     component: EllipseNodeView,
     create: (props) => createNode({ type: 'ellipse', ...props }),
-    defaultSize: DEFAULT_SIZES.ellipse,
+    defaultSize: NOMINAL_SIZES.ellipse,
     // Only the side centres of the frame lie on the curve.
     portsPerSide: 1,
+    parts: [{ field: 'label' }],
     resizable: true,
     minSize: MIN_SIZE,
   },
-  class: {
-    name: 'Class',
-    icon: 'ph--rows--regular',
-    key: 'C',
-    schema: ClassNode,
-    component: ClassNodeView,
-    create: (props) => createNode({ type: 'class', ...props }),
-    defaultSize: DEFAULT_SIZES.class,
-    resizable: true,
-    minSize: { width: 128, height: 96 },
-  },
+
   note: {
     name: 'Note',
     icon: 'ph--text-t--regular',
     key: 'T',
     schema: NoteNode,
     component: NoteNodeView,
+    parts: [{ field: 'text', multiline: true }],
     create: (props) => createNode({ type: 'note', ...props }),
-    defaultSize: DEFAULT_SIZES.note,
+    defaultSize: NOMINAL_SIZES.note,
     resizable: true,
     minSize: MIN_SIZE,
   },
-  scene: {
+  frame: {
     extends: 'box',
-    name: 'Scene',
+    name: 'Frame',
     icon: 'ph--frame-corners--regular',
-    key: 'S',
-    schema: PortalNode,
-    component: PortalNodeView,
-    create: (props) => createNode({ type: 'scene', ...props }),
-    defaultSize: DEFAULT_SIZES.scene,
+    key: 'F',
+    schema: FrameNode,
+    component: FrameNodeView,
+    create: (props) => createNode({ type: 'frame', ...props }),
+    defaultSize: NOMINAL_SIZES.frame,
     minSize: { width: 96, height: 60 },
     openable: true,
   },

package/src/model/store.ts

@@ -10,7 +10,7 @@
 import * as Atom from 'effect/reactivity/Atom';
 import type * as Registry from 'effect/reactivity/AtomRegistry';
 
-import { type Scene, type SceneId } from './types.ts';
+import { type Scene, type SceneId, type StyleMap } from './types.ts';
 
 export type SceneMap = Readonly<Record<SceneId, Scene>>;
 
@@ -19,13 +19,20 @@ export type SceneStore = {
   readonly scenes: Atom.Writable<SceneMap>;
   /** Derived atom for one scene; stable per id so subscriptions do not churn. */
   scene: (id: SceneId) => Atom.Atom<Scene | undefined>;
+  /** The drawing's style classes; a store without them offers none. */
+  readonly styles?: Atom.Writable<StyleMap>;
 };
 
-export const createMemoryStore = (initial: readonly Scene[] = []): SceneStore => {
+/** A store held in memory, which always keeps style classes. */
+export type MemorySceneStore = SceneStore & { readonly styles: Atom.Writable<StyleMap> };
+
+export const createMemoryStore = (initial: readonly Scene[] = [], initialStyles: StyleMap = {}): MemorySceneStore => {
+  const styles = Atom.keepAlive(Atom.make<StyleMap>(initialStyles));
   const scenes = Atom.keepAlive(Atom.make<SceneMap>(Object.fromEntries(initial.map((scene) => [scene.id, scene]))));
   const derived = new Map<SceneId, Atom.Atom<Scene | undefined>>();
   return {
     scenes,
+    styles,
     scene: (id) => {
       let atom = derived.get(id);
       if (!atom) {
@@ -58,3 +65,6 @@ export const updateScene = (
 export const putScene = (registry: Registry.AtomRegistry, store: SceneStore, scene: Scene): void => {
   registry.set(store.scenes, { ...registry.get(store.scenes), [scene.id]: scene });
 };
+
+/** No classes: what a store without `styles` reads as. */
+export const NO_STYLES: Atom.Atom<StyleMap> = Atom.keepAlive(Atom.make<StyleMap>({}));

package/src/model/types.ts

@@ -83,14 +83,50 @@ export type Port = Schema.Schema.Type<typeof Port>;
 // Nodes
 //
 
-/** How strongly a hue fills a frame: 0 is an outline (transparent), 1 to 3 are lighter to stronger fills. */
+/** The hues the style pickers offer, neutral first, then in hue order; any theme hue still renders on a node. */
+export const STYLE_HUES = ['neutral', 'red', 'orange', 'amber', 'green', 'teal', 'sky', 'blue', 'violet'] as const;
+export const StyleHue = Schema.Literals(STYLE_HUES);
+export type StyleHue = Schema.Schema.Type<typeof StyleHue>;
+
+/** How strongly a hue fills a frame: 0 is an outline (transparent), 1 to 3 are stronger to lighter fills. */
 export const NodeTone = Schema.Literals([0, 1, 2, 3]);
 export type NodeTone = Schema.Schema.Type<typeof NodeTone>;
 
-/** Presentation choices a node carries; every field is optional and the frame supplies the default look. */
-export const NodeStyle = Schema.Struct({
-  /** One of the theme's hues, colouring fill, text and border together. */
+/** The typefaces a shape's text may use: the theme's body face, or its fixed-width one. */
+export const FONT_FAMILIES = ['default', 'monospace'] as const;
+export type FontFamily = (typeof FONT_FAMILIES)[number];
+
+/** Where text sits across a shape, and down it. */
+export const HORIZONTAL_ALIGNS = ['left', 'center', 'right'] as const;
+export const VERTICAL_ALIGNS = ['top', 'middle', 'bottom'] as const;
+export type HorizontalAlign = (typeof HORIZONTAL_ALIGNS)[number];
+export type VerticalAlign = (typeof VERTICAL_ALIGNS)[number];
+
+/** How a line is drawn: a link's stroke, or a node's border. */
+export const LINE_STYLES = ['solid', 'dashed', 'dotted'] as const;
+
+/**
+ * The common base style every element shares, nodes and links alike: its colour and its line. Each kind extends it
+ * (`NodeStyle`), and a selection of several kinds edits only what they share. One field object per property, so
+ * the kinds declare the same field and the properties panel sees it as shared.
+ */
+export const lineStyleFields = {
+  /** One of the theme's hues: a link's stroke; a node's fill, text and border together. */
   hue: Schema.optional(Schema.String.annotate({ title: 'Hue', [HueAnnotationId]: true })),
+  /** Solid, dashed or dotted: a link's stroke, or a node's border. */
+  lineStyle: Schema.optional(Schema.Literals(LINE_STYLES).annotate({ title: 'Line style' })),
+};
+
+/** A link's style: the common base, unset drawn neutral and solid. */
+export const LineStyle = Schema.Struct(lineStyleFields);
+export type LineStyle = Schema.Schema.Type<typeof LineStyle>;
+
+/**
+ * The common base plus a frame and text: what a shape draws. A shape with more to style extends it
+ * (`Schema.Struct({ ...styleFields, … })`).
+ */
+export const styleFields = {
+  ...lineStyleFields,
   /** The hue's fill; unset is 2, the look a hue had before tones. */
   tone: Schema.optional(NodeTone),
   rounded: Schema.optional(Schema.Boolean),
@@ -98,11 +134,18 @@ export const NodeStyle = Schema.Struct({
   border: Schema.optional(Schema.Boolean),
   /** A guide: drawn dashed and unfilled, an annotation rather than content. */
   guide: Schema.optional(Schema.Boolean),
+  /** The face of the shape's text; unset is the theme's body face. */
+  fontFamily: Schema.optional(Schema.Literals(FONT_FAMILIES).annotate({ title: 'Font' })),
   /** Text size in the node's own scene units (the editor offers a readable range; stored values are not checked). */
   fontSize: Schema.optional(Schema.Number.annotate({ title: 'Font size' })),
-  /** Extra classes on the frame, for a host's own look. */
-  className: Schema.optional(Schema.String),
-});
+  /** Where the text sits across the shape; unset is the type's own (a label centres, a note starts at the left). */
+  alignHorizontal: Schema.optional(Schema.Literals(HORIZONTAL_ALIGNS).annotate({ title: 'Horizontal' })),
+  /** Where the text sits down the shape; unset is the type's own (a label is middled, a note starts at the top). */
+  alignVertical: Schema.optional(Schema.Literals(VERTICAL_ALIGNS).annotate({ title: 'Vertical' })),
+};
+
+/** Presentation choices a node carries: the shape style. */
+export const NodeStyle = Schema.Struct(styleFields);
 export type NodeStyle = Schema.Schema.Type<typeof NodeStyle>;
 
 /** The fields every node type shares; a type's schema is `Schema.Struct({ ...nodeBase, type: Literal, ... })`. */
@@ -118,6 +161,10 @@ export const nodeBase = {
   ports: Schema.optional(Schema.Array(Port)),
   /** Ports spread along each side, overriding the type's layout; ignored when the node carries `ports`. */
   portsPerSide: Schema.optional(Schema.Number.annotate({ title: 'Ports per side' })),
+  /** A style class of the drawing (`StyleClass`) the node takes its look from; its own `style` wins over it. */
+  /** The scene layer the element is on; unset, or naming no layer of the scene, it is on the bottom one. */
+  layer: Schema.optional(Schema.String.annotate({ title: 'Layer' })),
+  class: Schema.optional(Schema.String.annotate({ title: 'Class' })),
   style: Schema.optional(NodeStyle),
 };
 
@@ -130,6 +177,14 @@ export const boxFields = {
   label: Schema.optional(Schema.String),
 };
 
+/**
+ * The core base every node falls back to: its frame, ports, style and `label`. A node whose type the registry does
+ * not know (its plugin is off) is drawn and edited as this, a box showing its label, so a type that keeps its title
+ * in `label` still reads as itself.
+ */
+export const BaseNode = Schema.Struct({ type: Schema.String, ...nodeBase, ...boxFields });
+export type BaseNode = Schema.Schema.Type<typeof BaseNode>;
+
 export const RectNode = Schema.Struct({
   type: Schema.Literal('rect'),
   ...nodeBase,
@@ -145,16 +200,6 @@ export const EllipseNode = Schema.Struct({
 });
 export type EllipseNode = Schema.Schema.Type<typeof EllipseNode>;
 
-/** UML class box: a name compartment over attribute and method compartments. */
-export const ClassNode = Schema.Struct({
-  type: Schema.Literal('class'),
-  ...nodeBase,
-  name: Schema.String,
-  attributes: Schema.Array(Schema.String),
-  methods: Schema.Array(Schema.String),
-});
-export type ClassNode = Schema.Schema.Type<typeof ClassNode>;
-
 /** Free text on the canvas. Named for what it is, so a host may keep `text` for a type of its own. */
 export const NoteNode = Schema.Struct({
   type: Schema.Literal('note'),
@@ -163,22 +208,22 @@ export const NoteNode = Schema.Struct({
 });
 export type NoteNode = Schema.Schema.Type<typeof NoteNode>;
 
-/** Portal to the next depth: renders the referenced scene scaled into this node's bounds. */
-export const PortalNode = Schema.Struct({
-  type: Schema.Literal('scene'),
+/** A frame onto the next depth: renders its child scene scaled into this node's bounds. */
+export const FrameNode = Schema.Struct({
+  type: Schema.Literal('frame'),
   ...nodeBase,
   ...boxFields,
   scene: Schema.String,
   /** Draw the child scene inside the frame rather than the label; unset, it does so while there is no label. */
   contents: Schema.optional(Schema.Boolean.annotate({ title: 'Show contents' })),
 });
-export type PortalNode = Schema.Schema.Type<typeof PortalNode>;
+export type FrameNode = Schema.Schema.Type<typeof FrameNode>;
 
 /** The engine's own node types. A host may add its own (decision 1); those are `NodeBase` to the engine. */
-export const BuiltinNode = Schema.Union([RectNode, EllipseNode, ClassNode, NoteNode, PortalNode]);
+export const BuiltinNode = Schema.Union([RectNode, EllipseNode, NoteNode, FrameNode]);
 export type BuiltinNode = Schema.Schema.Type<typeof BuiltinNode>;
 export type BuiltinNodeType = BuiltinNode['type'];
-export const NODE_TYPES: readonly BuiltinNodeType[] = ['rect', 'ellipse', 'class', 'note', 'scene'];
+export const NODE_TYPES: readonly BuiltinNodeType[] = ['rect', 'ellipse', 'note', 'frame'];
 
 /** A node of the scene: the engine handles any `NodeBase`; built-in code narrows with the guards below. */
 export type Node = NodeBase;
@@ -188,13 +233,12 @@ export type NodeType = string;
 /** Narrows a node to one built-in type; sound because the registry maps each type name to one schema. */
 export const isRectNode = (node: NodeBase): node is RectNode => node.type === 'rect';
 export const isEllipseNode = (node: NodeBase): node is EllipseNode => node.type === 'ellipse';
-export const isClassNode = (node: NodeBase): node is ClassNode => node.type === 'class';
 export const isNoteNode = (node: NodeBase): node is NoteNode => node.type === 'note';
-export const isPortalNode = (node: NodeBase): node is PortalNode => node.type === 'scene';
+export const isFrameNode = (node: NodeBase): node is FrameNode => node.type === 'frame';
 /** A node built on the `box` prototype, carrying a centred, editable label. */
-export const isBoxNode = (node: NodeBase): node is RectNode | PortalNode => isRectNode(node) || isPortalNode(node);
-/** Whether a portal draws its child scene: as set, else while it has no label to show instead. */
-export const showsContents = (node: PortalNode): boolean => node.contents ?? node.label === undefined;
+export const isBoxNode = (node: NodeBase): node is RectNode | FrameNode => isRectNode(node) || isFrameNode(node);
+/** Whether a frame draws its child scene: as set, else while it has no label to show instead. */
+export const showsContents = (node: FrameNode): boolean => node.contents ?? node.label === undefined;
 export const isBuiltinNode = (node: NodeBase): node is BuiltinNode => NODE_TYPES.some((type) => type === node.type);
 
 //
@@ -220,7 +264,8 @@ export const isPointEndpoint = (end: Endpoint): end is PointEndpoint => 'point'
 export const endpointNode = (end: Endpoint): NodeId | undefined => ('node' in end ? end.node : undefined);
 
 /** What is drawn at a link end. */
-export const Marker = Schema.Literals(['arrow', 'circle']);
+/** An end marker: a filled `arrow`, a `circle`, or a hollow `triangle` (inheritance). */
+export const Marker = Schema.Literals(['arrow', 'circle', 'triangle']);
 export type Marker = Schema.Schema.Type<typeof Marker>;
 
 /** Markers at the source (`start`) and target (`end`) of a link. */
@@ -231,16 +276,35 @@ export const LinkEnds = Schema.Struct({
 }).pipe(Annotation.FormLayoutAnnotation.set({ [Annotation.DEFAULT_LAYOUT_NAME]: pairLayout('start', 'end') }));
 export type LinkEnds = Schema.Schema.Type<typeof LinkEnds>;
 
+/**
+ * A named look of a drawing, kept beside its scenes: the nodes and links naming it derive their `style` from it (a
+ * link takes the common base, its colour and line style), so one class restyles both together.
+ */
+export const StyleClass = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+  style: Schema.optional(NodeStyle),
+});
+export type StyleClass = Schema.Schema.Type<typeof StyleClass>;
+
+/** A drawing's style classes by id. */
+export type StyleMap = Readonly<Record<string, StyleClass>>;
+
 const linkBase = {
   id: Schema.String,
   z: Schema.String,
   locked: Schema.optional(Schema.Boolean),
   source: Endpoint,
   target: Endpoint,
-  /** Shorthand for `ends: { end: 'arrow' }`; ports with `accepts` constrain which end lands where. */
-  directed: Schema.optional(Schema.Boolean),
-  /** Explicit end markers; when present they replace what `directed` implies. */
+  /** End markers; an arrow at `end` reads as the link's direction. */
   ends: Schema.optional(LinkEnds),
+  /** A caption drawn at the middle of the link's route. */
+  text: Schema.optional(Schema.String.annotate({ title: 'Label' })),
+  /** A style class of the drawing the link takes its style from; its own `style` wins over it. */
+  /** The scene layer the element is on; unset, or naming no layer of the scene, it is on the bottom one. */
+  layer: Schema.optional(Schema.String.annotate({ title: 'Layer' })),
+  class: Schema.optional(Schema.String.annotate({ title: 'Class' })),
+  style: Schema.optional(LineStyle),
 };
 
 export const LineLink = Schema.Struct({ type: Schema.Literal('line'), ...linkBase });
@@ -272,8 +336,8 @@ export const LINK_TYPES: readonly LinkType[] = ['line', 'curve', 'spline', 'smar
 
 export type Element = Node | Link;
 
-/** The markers a link draws: its explicit `ends`, else an arrowhead at the target when it is `directed`. */
-export const linkMarkers = (link: Link): LinkEnds => link.ends ?? (link.directed ? { end: 'arrow' } : {});
+/** The markers a link draws. */
+export const linkMarkers = (link: Link): LinkEnds => link.ends ?? {};
 
 export const isNode = (element: Element): element is Node => 'center' in element;
 export const isLink = (element: Element): element is Link => 'source' in element;
@@ -282,6 +346,22 @@ export const isLink = (element: Element): element is Link => 'source' in element
 // Scene
 //
 
+/** A layer id, unique within its scene. */
+export type LayerId = string;
+
+/**
+ * A scene's layer: elements paint by their layer's order (`z`, bottom first), then by their own `z`. A hidden layer
+ * is neither drawn nor hit. A scene with no layers has one, implicitly (`DEFAULT_LAYER`).
+ */
+export const Layer = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+  /** Fractional order key (see `order.ts`): the bottom layer has the least. */
+  z: Schema.String,
+  hidden: Schema.optional(Schema.Boolean),
+});
+export type Layer = Schema.Schema.Type<typeof Layer>;
+
 /**
  * The scene schema over a set of node schemas: a host composes it from its registry's types, so the
  * schema stays exact for every type while the engine only ever sees `NodeBase`.
@@ -292,10 +372,11 @@ export const createSceneSchema = <const Nodes extends readonly Schema.Codec<Node
     name: Schema.optional(Schema.String),
     nodes: Schema.Record(Schema.String, Schema.Union(nodes)),
     links: Schema.Record(Schema.String, Link),
+    layers: Schema.optional(Schema.Record(Schema.String, Layer)),
   });
 
 /** The scene schema over the built-in node types. */
-export const Scene = createSceneSchema([RectNode, EllipseNode, ClassNode, NoteNode, PortalNode]);
+export const Scene = createSceneSchema([RectNode, EllipseNode, NoteNode, FrameNode]);
 
 /** The scene schema over any node with the shared fields: what the engine itself can validate for a host. */
 export const OpenScene = createSceneSchema([NodeBase]);
@@ -304,6 +385,7 @@ export type Scene = {
   readonly name?: string;
   readonly nodes: Readonly<Record<NodeId, Node>>;
   readonly links: Readonly<Record<LinkId, Link>>;
+  readonly layers?: Readonly<Record<LayerId, Layer>>;
 };
 
 /** A node or link of the scene by id. */
@@ -311,7 +393,9 @@ export const getElement = (scene: Scene, id: ElementId): Element | undefined =>
 
 /** Property edits: the shared fields typed, a type's own fields by name. */
 export type NodeValues = Partial<Omit<NodeBase, 'id' | 'type'>> & { readonly [key: string]: unknown };
-export type LinkValues = Partial<Omit<Link, 'id' | 'type'>>;
+/** Per link type, so a spline's `points` are among the values an `update` may set. */
+type ValuesOf<T> = T extends unknown ? Partial<Omit<T, 'id' | 'type'>> : never;
+export type LinkValues = ValuesOf<Link>;
 
 /**
  * What the surface asks of a projection (§3). The surface never writes coordinates itself: a
@@ -331,6 +415,10 @@ export type Intent =
    * rather than a view action, so a projection that owns its own positions may rewrite or refuse it.
    */
   | { kind: 'layout'; ids?: ElementId[] }
+  /** Adds a layer, or replaces the one of its id (a rename, a visibility toggle, a move in the order). */
+  | { kind: 'layer'; layer: Layer }
+  /** Removes a layer and every element on it; the last layer of a scene stays. */
+  | { kind: 'removeLayer'; id: LayerId }
   /** Several intents applied as one model change (one undo step), e.g. a paste. */
   | { kind: 'batch'; intents: Intent[] };
 

package/src/playwright/SceneManager.ts

@@ -42,7 +42,7 @@ export class SceneManager {
     return Math.max(...boxes.map(({ x, width }) => x + width));
   }
 
-  /** The debug bar's zoom readout, as whole percent; the navigation bar carries the path and depth. */
+  /** The debug bar's zoom readout, as whole percent; the navigation bar carries the path. */
   async zoom(): Promise<number> {
     const readout = await this.page.getByTestId('canvas-debug').textContent();
     const percent = readout?.match(/(\d+)%/);
@@ -56,7 +56,7 @@ export class SceneManager {
   selectedNodes(): Promise<string[]> {
     return this.page.evaluate(() =>
       Array.from(document.querySelectorAll<HTMLElement>('[data-node-id]'))
-        .filter((element) => element.className.includes('border-primary-500 '))
+        .filter((element) => element.className.includes('border-focus '))
         .map((element) => element.dataset.nodeId ?? ''),
     );
   }

package/src/playwright/create.spec.ts

@@ -6,11 +6,12 @@ import { type Page, expect, test } from '@playwright/test';
 
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
+import { NOMINAL_SIZES, nominalSize } from '../utils/shapes.ts';
 import { SceneManager } from './SceneManager.ts';
 
 const PORT = 9006;
 // The empty canvas: every gesture here lands on blank scene, so a create is never a hit on a fixture node.
-const DEFAULT_URL = storybookUrl('ui-react-ui-canvas-scene-sceneview--default', PORT);
+const DEFAULT_URL = storybookUrl('ui-react-ui-canvas-sceneview--default', PORT);
 
 test.describe('create sizing', () => {
   let page: Page;
@@ -103,10 +104,11 @@ test.describe('create sizing', () => {
       return (await scene.box(scene.node(id!))).width;
     };
 
-    // A new shape is the shared default (256 scene units) at any zoom, so on screen it scales with the zoom.
+    // A new rectangle is its nominal width (two major cells, 128 scene units) at any zoom, so on screen it
+    // scales with the zoom.
     const expectDefault = async () => {
       const width = await widthAt();
-      expect(Math.abs(width - (256 * (await scene.zoom())) / 100)).toBeLessThan(4);
+      expect(Math.abs(width - (nominalSize(NOMINAL_SIZES.rect).width * (await scene.zoom())) / 100)).toBeLessThan(4);
     };
     await expectDefault();
     await scene.zoomIn(2);

package/src/playwright/demo.spec.ts

@@ -14,8 +14,8 @@ import { test } from '@playwright/test';
 import { storybookUrl } from '@dxos/test-utils/playwright';
 
 const PORT = 9006;
-const DEFAULT_URL = storybookUrl('ui-react-ui-canvas-scene-sceneview--default', PORT);
-const FREEHAND_URL = storybookUrl('ui-react-ui-canvas-scene-sceneview--freehand', PORT);
+const DEFAULT_URL = storybookUrl('ui-react-ui-canvas-sceneview--default', PORT);
+const FREEHAND_URL = storybookUrl('ui-react-ui-canvas-sceneview--freehand', PORT);
 
 /** Long enough to read on playback; the recording is for a person, not a machine. */
 const BEAT = 900;

package/src/playwright/lattice.spec.ts

@@ -9,7 +9,7 @@ import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 import { SceneManager } from './SceneManager.ts';
 
 const PORT = 9006;
-const LATTICE_URL = storybookUrl('ui-react-ui-canvas-scene-sceneview--lattice', PORT);
+const LATTICE_URL = storybookUrl('ui-react-ui-canvas-sceneview--lattice', PORT);
 
 // The fixture, on the default 256x128 lattice with 128x64 gutters, columns and rows -1..1: A, B, C down
 // column -1; a free cell above D and E in column 0; F spanning all three rows of column 1.
@@ -37,15 +37,12 @@ test.describe('SceneView lattice', () => {
     await expect(page.getByTestId('lattice-grid')).toHaveCount(1);
   });
 
-  test('the guides toggle hides and restores the page frame and the lattice cells', async () => {
-    await expect(page.getByTestId('scene-frame')).toHaveCount(1);
+  test('the guides toggle hides and restores the lattice cells', async () => {
     await page.getByTestId('toolbar-guides').click();
     await expect(page.getByTestId('lattice-grid')).toHaveCount(0);
-    await expect(page.getByTestId('scene-frame')).toHaveCount(0);
     await scene.focus();
     await page.keyboard.press(';');
     await expect(page.getByTestId('lattice-grid')).toHaveCount(1);
-    await expect(page.getByTestId('scene-frame')).toHaveCount(1);
   });
 
   test('a drag onto occupied cells previews in red and is refused', async () => {
@@ -107,6 +104,8 @@ test.describe('SceneView lattice', () => {
   });
 
   test('dragging a face steps it one cell and leaves the opposite face where it was', async () => {
+    // Fit frames the shapes tightly, so step out to leave room below E for the drag.
+    await scene.zoomOut();
     await scene.clickNode('e');
     const before = await scene.box(scene.node('e'));
     // E's east neighbour is F, so grow downwards: the south face most of a row down.