@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -5,6 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
+import { log } from '@dxos/log';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { freehandCapabilities } from '../../model/projection.ts';
@@ -14,17 +15,16 @@ import { ActionToolbar, CameraToolbar, NavigationToolbar, type ToolbarActions }
 
 /** The bar over a fake view: every action appends to a log so each button is seen to fire. */
 const DefaultStory = () => {
-  const [log, setLog] = useState<string[]>([]);
   const [snap, setSnap] = useState(true);
   const [guides, setGuides] = useState(true);
   const [debug, setDebug] = useState(false);
   const [zoom, setZoom] = useState(1);
-  const note = (entry: string) => setLog((entries) => [entry, ...entries].slice(0, 12));
   const actions: ToolbarActions = {
     path: ['scene:root', 'scene:root/L'],
     nameOf: (id) => id.split(':')[1] ?? id,
-    onPath: (index) => note(`path → ${index}`),
-    fit: () => note('fit'),
+    onPath: (index) => log(`path → ${index}`),
+    fit: () => log('fit'),
+    zoomReset: () => setZoom(1),
     zoomIn: () => setZoom((value) => value * 1.25),
     zoomOut: () => setZoom((value) => value / 1.25),
     snap,
@@ -35,34 +35,33 @@ const DefaultStory = () => {
     toggleDebug: () => setDebug((value) => !value),
     canUndo: true,
     canRedo: false,
-    undo: () => note('undo'),
-    redo: () => note('redo'),
+    undo: () => log('undo'),
+    redo: () => log('redo'),
     hasSelection: true,
     hasClipboard: true,
-    cut: () => note('cut'),
-    copy: () => note('copy'),
-    paste: () => note('paste'),
-    delete: () => note('delete'),
-    create: (type: NodeType) => note(`create ${type}`),
+    cut: () => log('cut'),
+    copy: () => log('copy'),
+    paste: () => log('paste'),
+    delete: () => log('delete'),
+    create: (type: NodeType) => log(`create ${type}`),
   };
   return (
     // `items-start`: each bar fills its box, as SceneView floats it, so the column must not stretch them.
     <div className='flex flex-col items-start gap-2 p-2'>
-      <NavigationToolbar actions={actions}>depth {actions.path.length - 1}</NavigationToolbar>
+      <NavigationToolbar actions={actions} />
       <ActionToolbar actions={actions} nodes={defaultNodeRegistry} capabilities={freehandCapabilities} />
       <CameraToolbar actions={actions}>
         {Math.round(zoom * 100)}% · snap {snap ? 'on' : 'off'} · guides {guides ? 'on' : 'off'} · debug{' '}
         {debug ? 'on' : 'off'}
       </CameraToolbar>
-      <pre className='text-xs text-fg-muted'>{log.join('\n')}</pre>
     </div>
   );
 };
 
 const meta: Meta = {
-  title: 'ui/react-ui-canvas/scene/Toolbar',
+  title: 'ui/react-ui-canvas/Toolbar',
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'w-[30rem]' })],
 };
 
 export default meta;

package/src/components/Toolbar/Toolbar.tsx

@@ -29,6 +29,8 @@ export type ToolbarActions = {
   nameOf: (id: SceneId) => string;
   onPath: (index: number) => void;
   fit: () => void;
+  /** Back to true size (100%), about the view's centre. */
+  zoomReset: () => void;
   zoomIn: () => void;
   zoomOut: () => void;
   snap: boolean;
@@ -75,12 +77,13 @@ export const NavigationToolbar = ({ classNames, actions, children }: NavigationT
     <Toolbar.Root size='sm' classNames={mx(barClasses, classNames)} data-testid='canvas-toolbar'>
       <Button.Root
         variant='ghost'
+        iconOnly
+        icon='ph--arrow-up--regular'
+        label='Up'
         disabled={path.length < 2}
         data-testid='toolbar-up'
         onClick={() => actions.onPath(path.length - 2)}
-      >
-        Up
-      </Button.Root>
+      />
       <Breadcrumbs path={path} nameOf={actions.nameOf} onSelect={actions.onPath} />
       {children && (
         <>
@@ -106,6 +109,14 @@ export const CameraToolbar = ({ classNames, actions, children }: CameraToolbarPr
         data-testid='toolbar-fit'
         onClick={actions.fit}
       />
+      <Button.Root
+        variant='ghost'
+        iconOnly
+        icon='ph--number-square-one--regular'
+        label={`Actual size (${shortcutFor('zoomReset')})`}
+        data-testid='toolbar-zoom-reset'
+        onClick={actions.zoomReset}
+      />
       <Button.Root
         variant='ghost'
         iconOnly
@@ -151,7 +162,7 @@ export const ActionToolbar = ({ classNames, actions, nodes, capabilities }: Acti
         variant='ghost'
         iconOnly
         icon='ph--frame-corners--regular'
-        label={`Guides (${shortcutFor('guides')}): show the page frame and the lattice cells`}
+        label={`Guides (${shortcutFor('guides')}): show the lattice cells`}
         classNames={mx(actions.guides && 'bg-primary-500/20')}
         data-testid='toolbar-guides'
         onClick={actions.toggleGuides}

package/src/components/index.ts

@@ -2,10 +2,12 @@
 // Copyright 2026 DXOS.org
 //
 
+export * from './About/index.ts';
 export * from './Breadcrumbs/index.ts';
 export * from './ControlFrame/index.ts';
 export * from './Grid/index.ts';
 export * from './LatticeGrid/index.ts';
+export * from './Layers/index.ts';
 export * from './Palette/index.ts';
 export * from './PartEditor/index.ts';
 export * from './Properties/index.ts';

package/src/hooks/useWheel.ts

@@ -6,6 +6,31 @@ import { type RefObject, useEffect } from 'react';
 
 export type WheelHandler = (event: WheelEvent, pointer: { x: number; y: number }) => void;
 
+/**
+ * Marks content whose own scrolling takes the wheel rather than the canvas panning: a floating panel over the canvas
+ * (the properties form), or a host's content embedded in a node (an object's surface in a frame).
+ */
+export const SCENE_OVERLAY_ATTRIBUTE = 'data-scene-overlay';
+
+const SCROLLS = /(auto|scroll)/;
+
+/** Whether an element from `target` up to `overlay` scrolls, so the wheel is its own rather than the canvas's. */
+const scrollsWithin = (target: Element, overlay: Element): boolean => {
+  for (let element: Element | null = target; element; element = element.parentElement) {
+    const { overflowX, overflowY } = getComputedStyle(element);
+    if (
+      (SCROLLS.test(overflowY) && element.scrollHeight > element.clientHeight) ||
+      (SCROLLS.test(overflowX) && element.scrollWidth > element.clientWidth)
+    ) {
+      return true;
+    }
+    if (element === overlay) {
+      return false;
+    }
+  }
+  return false;
+};
+
 /** Non-passive wheel listener with the pointer in element coordinates, so the page never scrolls. */
 export const useWheel = (ref: RefObject<HTMLElement | null>, handler: WheelHandler) => {
   useEffect(() => {
@@ -14,6 +39,16 @@ export const useWheel = (ref: RefObject<HTMLElement | null>, handler: WheelHandl
       return;
     }
     const onWheel = (event: WheelEvent) => {
+      const target = event.target instanceof Element ? event.target : null;
+      const overlay = target?.closest(`[${SCENE_OVERLAY_ATTRIBUTE}]`);
+      // Content embedded in a node with nothing to scroll (a card that fits its frame) still lets the canvas pan.
+      if (target && overlay && (!overlay.closest('[data-node-id]') || scrollsWithin(target, overlay))) {
+        // A pinch over a panel still must not zoom the page; a scroll is the panel's own.
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDefault();
+        }
+        return;
+      }
       event.preventDefault();
       const rect = element.getBoundingClientRect();
       handler(event, { x: event.clientX - rect.left, y: event.clientY - rect.top });

package/src/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-// The pre-engine canvas, kept for canvas-editor, canvas-compute and the sequencer until the scene
-// engine replaces them (DESIGN.md phase 4).
-export * from './archive/index.ts';
+export * from './components/index.ts';
+export * from './hooks/index.ts';
+export * from './model/index.ts';
+export * from './utils/index.ts';

package/src/model/atoms.ts

@@ -17,6 +17,7 @@ import {
   type Camera,
   type ElementId,
   type Endpoint,
+  type LayerId,
   type LinkId,
   type LinkType,
   type NodeId,
@@ -41,9 +42,10 @@ export type Drag =
   /**
    * Moving the selection; `anchor` is the pressed node's top-left, which is what snaps to the grid,
    * and `delta` the resulting scene-space offset applied transiently to every selected node. With
-   * `copy` (⌘ held) the originals stay and copies land at `delta` instead.
+   * `copy` (⌘ held) the originals stay and copies land at `delta` instead. `raw` is the pointer's own offset, which
+   * the nodes follow while the drag is in flight; `delta` is where they land.
    */
-  | { kind: 'move'; ids: NodeId[]; origin: Point; anchor: Point; delta: Point; copy?: boolean }
+  | { kind: 'move'; ids: NodeId[]; origin: Point; anchor: Point; delta: Point; raw?: Point; copy?: boolean }
   /** Resizing one node by a handle; `bounds` is the transient result. */
   | { kind: 'resize'; id: NodeId; handle: Handle; start: Bounds; bounds: Bounds }
   /**
@@ -61,6 +63,13 @@ export type Drag =
   /** Re-attaching one end of a link; `fixed` is the other end's resolved port for the rubber band. */
   | { kind: 'end'; id: LinkId; end: 'source' | 'target'; fixed: Point; fixedSide: Side; to: Point; target?: Endpoint };
 
+/**
+ * Whether a move has left where it was pressed: until it does, a press on a selected node is a click, and the
+ * selection keeps its outline and handles rather than flickering off and on.
+ */
+export const isMoving = (drag: Drag | undefined): boolean =>
+  drag?.kind === 'move' && drag.raw !== undefined && (drag.raw.x !== 0 || drag.raw.y !== 0);
+
 export type HistoryEntry = { path: SceneId[]; camera: Camera };
 
 export type ControlPointRef = { link: LinkId; index: number };
@@ -68,11 +77,18 @@ export type ControlPointRef = { link: LinkId; index: number };
 /** The text part being edited in place (`parts.ts`). */
 export type EditingPart = { id: NodeId; part: PartKey };
 
+/** Where the properties and layers panels sit: floating over the canvas, or docked in a column beside it. */
+export type PanelMode = 'floating' | 'docked';
+
 export type SceneViewAtoms = {
   camera: Atom.Writable<Camera>;
   path: Atom.Writable<SceneId[]>;
   selection: Atom.Writable<ReadonlySet<ElementId>>;
   hover: Atom.Writable<NodeId | undefined>;
+  /** The link under the pointer, which shows its end handles as a selected one does. */
+  linkHover: Atom.Writable<LinkId | undefined>;
+  /** The layer new shapes and links go on; unset (or a layer the scene does not have), the top one. */
+  layer: Atom.Writable<LayerId | undefined>;
   /** The selected control point of a selected spline, if any. */
   point: Atom.Writable<ControlPointRef | undefined>;
   tool: Atom.Writable<Tool>;
@@ -80,7 +96,7 @@ export type SceneViewAtoms = {
   linkType: Atom.Writable<LinkType>;
   /** Grid shown and moves/resizes snapped to it. */
   snap: Atom.Writable<boolean>;
-  /** Guides shown: the scene's page frame and, on a lattice, its cells. */
+  /** Guides shown: on a lattice, its cells. */
   guides: Atom.Writable<boolean>;
   /** On a lattice scene, snap lands on the lattice's cells rather than the basic grid. */
   lattice: Atom.Writable<boolean>;
@@ -91,6 +107,11 @@ export type SceneViewAtoms = {
   /** The last cut or copied fragment (`clipboard.ts`). */
   clipboard: Atom.Writable<Clipboard | undefined>;
   editing: Atom.Writable<EditingPart | undefined>;
+  /**
+   * The node whose embedded content takes input (an editor in a frame), entered by clicking the node; any other
+   * node's embedded content is inert, so a press anywhere on it selects and moves it.
+   */
+  active: Atom.Writable<NodeId | undefined>;
   /** Frames show their id, type and geometry. */
   debug: Atom.Writable<boolean>;
 };
@@ -104,6 +125,8 @@ export const createSceneViewAtoms = (root: SceneId): SceneViewAtoms => ({
   path: Atom.keepAlive(Atom.make<SceneId[]>([root])),
   selection: Atom.keepAlive(Atom.make<ReadonlySet<ElementId>>(new Set<ElementId>())),
   hover: Atom.keepAlive(Atom.make<NodeId | undefined>(undefined)),
+  linkHover: Atom.keepAlive(Atom.make<LinkId | undefined>(undefined)),
+  layer: Atom.keepAlive(Atom.make<LayerId | undefined>(undefined)),
   point: Atom.keepAlive(Atom.make<ControlPointRef | undefined>(undefined)),
   tool: Atom.keepAlive(Atom.make<Tool>({ kind: 'select' })),
   linkType: Atom.keepAlive(Atom.make<LinkType>('curve')),
@@ -115,5 +138,6 @@ export const createSceneViewAtoms = (root: SceneId): SceneViewAtoms => ({
   undo: Atom.keepAlive(Atom.make<UndoState>(emptyUndo())),
   clipboard: Atom.keepAlive(Atom.make<Clipboard | undefined>(undefined)),
   editing: Atom.keepAlive(Atom.make<EditingPart | undefined>(undefined)),
+  active: Atom.keepAlive(Atom.make<NodeId | undefined>(undefined)),
   debug: Atom.keepAlive(Atom.make<boolean>(false)),
 });

package/src/model/projection.ts

@@ -13,6 +13,7 @@ import type * as Registry from 'effect/reactivity/AtomRegistry';
 import * as Schema from 'effect/Schema';
 
 import { type LatticeSpec } from '../utils/lattice.ts';
+import { reduceLayerIntent } from '../utils/layers.ts';
 import { layoutScene } from '../utils/layout.ts';
 import { resizeNode } from '../utils/shapes.ts';
 import { type SceneStore, putScene, updateScene } from './store.ts';
@@ -136,6 +137,10 @@ export const reduceIntent = (scene: Scene, intent: Intent): Scene => {
     case 'batch':
       return intent.intents.reduce(reduceIntent, scene);
 
+    case 'layer':
+    case 'removeLayer':
+      return reduceLayerIntent(scene, intent);
+
     case 'update': {
       const node = scene.nodes[intent.id];
       if (node) {

package/src/model/projections/constrained.test.ts

@@ -6,7 +6,7 @@ import * as Atom from 'effect/reactivity/Atom';
 import * as Registry from 'effect/reactivity/AtomRegistry';
 import { describe, test } from 'vitest';
 
-import { type ClassNode, type EllipseNode, type Scene, isClassNode, isEllipseNode } from '../types.ts';
+import { type EllipseNode, type NoteNode, type Scene, isEllipseNode, isNoteNode } from '../types.ts';
 import { type ConstrainedModel, createConstrainedProjection, rewriteForDrop, solve } from './constrained.ts';
 
 const model: ConstrainedModel = {
@@ -115,24 +115,32 @@ describe('constrained projection', () => {
       size: { width: 128, height: 64 },
       label: 'Round',
     };
-    const klass: ClassNode = {
-      type: 'class',
+    const note: NoteNode = {
+      type: 'note',
       id: 'K',
       z: 'z',
       center: { x: 0, y: 400 },
       size: { width: 1, height: 1 },
-      name: 'Klass',
-      attributes: [],
-      methods: [],
+      text: 'Klass',
     };
     projection.apply({ kind: 'create', node: ellipse });
-    projection.apply({ kind: 'create', node: klass });
+    projection.apply({ kind: 'create', node: note });
     const scene = registry.get(projection.scene);
     expect(scene.nodes.E.type).toBe('ellipse');
     expect(isEllipseNode(scene.nodes.E) && scene.nodes.E.label).toBe('Round');
-    expect(isClassNode(scene.nodes.K) && scene.nodes.K.name).toBe('Klass');
-    projection.apply({ kind: 'update', id: 'K', values: { name: 'Renamed' } });
+    expect(isNoteNode(scene.nodes.K) && scene.nodes.K.text).toBe('Klass');
+    projection.apply({ kind: 'update', id: 'K', values: { text: 'Renamed' } });
     const after = registry.get(projection.scene).nodes.K;
-    expect(isClassNode(after) && after.name).toBe('Renamed');
+    expect(isNoteNode(after) && after.text).toBe('Renamed');
+  });
+
+  test('update records style alongside the label', ({ expect }) => {
+    const registry = Registry.make();
+    const atom = Atom.keepAlive(Atom.make<ConstrainedModel>(model));
+    const projection = createConstrainedProjection({ registry, model: atom });
+    projection.apply({ kind: 'update', id: 'A', values: { style: { hue: 'teal', rounded: true } } });
+    expect(registry.get(projection.scene).nodes.A.style).toEqual({ hue: 'teal', rounded: true });
+    projection.apply({ kind: 'update', id: 'A', values: { label: 'Alpha' } });
+    expect(registry.get(projection.scene).nodes.A.style).toEqual({ hue: 'teal', rounded: true });
   });
 });

package/src/model/projections/constrained.ts

@@ -15,18 +15,21 @@ import { Layout } from '@dxos/diagram';
 
 import { centeredOrigin } from '../../utils/layout.ts';
 import { initialKeys } from '../../utils/order.ts';
-import { createNode, withLabel } from '../../utils/shapes.ts';
+import { withTitle } from '../../utils/parts.ts';
+import { createNode } from '../../utils/shapes.ts';
 import { type Projection } from '../projection.ts';
+import { defaultNodeRegistry } from '../registry.ts';
 import {
   type BuiltinNodeType,
   type Capabilities,
   type Intent,
   type Node,
+  type NodeStyle,
   type Point,
   type Scene,
   type Size,
   isBuiltinNode,
-  isPortalNode,
+  isFrameNode,
 } from '../types.ts';
 
 /** `subject <relation> object`: "A east of B", "A aligned with B" (same row). */
@@ -35,7 +38,7 @@ export type Relation = 'east' | 'west' | 'north' | 'south' | 'aligned';
 export type Constraint = { subject: string; relation: Relation; object: string };
 
 /** `type` is the node's shape; the solver places every type on the same grid. */
-export type ConstrainedNode = { id: string; label?: string; type?: BuiltinNodeType };
+export type ConstrainedNode = { id: string; label?: string; type?: BuiltinNodeType; style?: NodeStyle };
 
 export type ConstrainedModel = {
   nodes: ConstrainedNode[];
@@ -192,10 +195,12 @@ export const solve = (model: ConstrainedModel, options: ConstrainedOptions = {})
       x: origin.x + (columns.get(node.id) ?? 0) * pitch.width,
       y: origin.y + (rows.get(node.id) ?? 0) * pitch.height,
     };
-    nodes[node.id] = withLabel(
+    const solved = withTitle(
+      defaultNodeRegistry,
       createNode({ type: node.type ?? 'rect', id: node.id, z: keys[index], center, size }),
       node.label ?? node.id,
     );
+    nodes[node.id] = node.style ? { ...solved, style: node.style } : solved;
   });
   return { id: CONSTRAINED_SCENE_ID, name: 'Constrained', nodes, links: {} };
 };
@@ -281,13 +286,14 @@ export const createConstrainedProjection = ({ registry, model, options }: Constr
       }
       case 'create': {
         // The model records built-in types only; a portal or a host type has no place in it and is refused.
-        if (!isBuiltinNode(intent.node) || isPortalNode(intent.node)) {
+        if (!isBuiltinNode(intent.node) || isFrameNode(intent.node)) {
           return;
         }
         const node: ConstrainedNode = {
           id: intent.node.id,
           type: intent.node.type,
           label: labelOf(intent.node),
+          style: intent.node.style,
         };
         const added = { ...current, nodes: [...current.nodes, node] };
         // Constrain the new node as if it had been dropped where it was drawn.
@@ -308,12 +314,17 @@ export const createConstrainedProjection = ({ registry, model, options }: Constr
         intent.intents.forEach(apply);
         break;
       case 'update': {
-        // Only the label lives in the model; geometry is solved, so those edits are dropped.
+        // Only the label and style live in the model; geometry is solved, so those edits are dropped.
         const label = labelOf(intent.values);
-        if (label !== undefined) {
+        const style = 'style' in intent.values ? intent.values.style : undefined;
+        if (label !== undefined || style !== undefined) {
           registry.set(model, {
             ...current,
-            nodes: current.nodes.map((node) => (node.id === intent.id ? { ...node, label } : node)),
+            nodes: current.nodes.map((node) =>
+              node.id === intent.id
+                ? { ...node, ...(label !== undefined && { label }), ...(style !== undefined && { style }) }
+                : node,
+            ),
           });
         }
         break;

package/src/model/projections/dynamic.ts

@@ -16,8 +16,10 @@ import { Layout } from '@dxos/diagram';
 
 import { centeredOrigin } from '../../utils/layout.ts';
 import { initialKeys } from '../../utils/order.ts';
-import { createNode, withLabel } from '../../utils/shapes.ts';
+import { withTitle } from '../../utils/parts.ts';
+import { createNode } from '../../utils/shapes.ts';
 import { type Projection } from '../projection.ts';
+import { defaultNodeRegistry } from '../registry.ts';
 import {
   type BuiltinNodeType,
   type Capabilities,
@@ -94,7 +96,8 @@ export const layoutGraph = (graph: GraphModel, overlay: Overlay, options: Dynami
       x: origin.x + (columns.get(node.id) ?? 0) * pitch.width,
       y: origin.y + (ranks.get(node.id) ?? 0) * pitch.height,
     };
-    nodes[node.id] = withLabel(
+    nodes[node.id] = withTitle(
+      defaultNodeRegistry,
       createNode({ type: node.type ?? 'rect', id: node.id, z: keys[graph.edges.length + index], center, size }),
       node.label ?? node.id,
     );

package/src/model/projections/lattice.ts

@@ -15,6 +15,7 @@ import {
   collides,
   coveredCells,
   occupancy,
+  onLattice,
   quantize,
   resizeCell,
   toCell,
@@ -60,6 +61,9 @@ const blocked = (scene: Scene, spec: LatticeSpec, bounds: Bounds, except: Readon
 export const constrainIntent = (scene: Scene, intent: Intent, spec: LatticeSpec): Intent | undefined => {
   switch (intent.kind) {
     case 'create': {
+      if (!onLattice(intent.node)) {
+        return intent;
+      }
       const bounds = quantize(nodeBounds(intent.node), spec);
       return blocked(scene, spec, bounds, new Set())
         ? undefined
@@ -69,6 +73,9 @@ export const constrainIntent = (scene: Scene, intent: Intent, spec: LatticeSpec)
     case 'resize': {
       // The dragged edge snaps to a cell edge and the opposite edge stays, so a face steps one cell at a time.
       const node = scene.nodes[intent.id];
+      if (node && !onLattice(node)) {
+        return intent;
+      }
       const from = node && nodeBounds(node);
       const bounds = from
         ? cellBounds(resizeCell(toCell(from, spec), from, intent.bounds, spec), spec)
@@ -81,10 +88,15 @@ export const constrainIntent = (scene: Scene, intent: Intent, spec: LatticeSpec)
       const moving = new Set(intent.ids);
       const others = occupancy(Object.values(scene.nodes), spec, moving);
       const taken = new Map<string, ElementId>();
-      const intents: Intent[] = [];
+      // A node off the lattice (a group's backdrop) moves by the drag as is, beside the snapped ones.
+      const free = intent.ids.filter((id) => {
+        const node = scene.nodes[id];
+        return node !== undefined && !node.locked && !onLattice(node);
+      });
+      const intents: Intent[] = free.length > 0 ? [{ kind: 'move', ids: free, delta: intent.delta }] : [];
       for (const id of intent.ids) {
         const node = scene.nodes[id];
-        if (!node || node.locked) {
+        if (!node || node.locked || !onLattice(node)) {
           continue;
         }
         const from = nodeBounds(node);
@@ -103,7 +115,7 @@ export const constrainIntent = (scene: Scene, intent: Intent, spec: LatticeSpec)
 
     case 'update': {
       const node = scene.nodes[intent.id];
-      const bounds = node && updatedBounds(node, intent.values);
+      const bounds = node && onLattice(node) ? updatedBounds(node, intent.values) : undefined;
       if (!node || !bounds) {
         return intent;
       }

package/src/model/registry.test.ts

@@ -7,7 +7,7 @@ import { describe, test } from 'vitest';
 
 import { UnknownNodeView } from '../components/SceneLayer/SceneLayer.tsx';
 import { nodePorts } from '../utils/ports.ts';
-import { createNode, nodeBounds } from '../utils/shapes.ts';
+import { createNode, nodeBounds, nominalSize } from '../utils/shapes.ts';
 import { nodeDef } from './node-def.ts';
 import {
   type CreateProps,
@@ -26,12 +26,12 @@ const functionDef: NodeDef = {
   type: 'function',
   name: 'Function',
   icon: 'ph--function--regular',
-  key: 'F',
+  key: 'U',
   group: 'compute',
   schema: FunctionNode,
   component: UnknownNodeView,
   create: ({ id, z, center, size }) => ({ type: 'function', id, z, center, size, fn: 'identity' }),
-  defaultSize: { width: 128, height: 64 },
+  defaultSize: { width: 2, height: 1 },
   ports: () => [
     { id: 'in', side: 'w', offset: 0.5, accepts: 'in' },
     { id: 'out', side: 'e', offset: 0.5, accepts: 'out' },
@@ -43,7 +43,12 @@ const registry: NodeRegistry = { ...defaultNodeRegistry, function: functionDef }
 describe('registry', () => {
   test('a host composes the scene schema from its registry', ({ expect }) => {
     const HostScene = createSceneSchema(Object.values(registry).map((def) => def.schema));
-    const fn = functionDef.create({ id: 'f', z: 'a', center: { x: 64, y: 64 }, size: functionDef.defaultSize });
+    const fn = functionDef.create({
+      id: 'f',
+      z: 'a',
+      center: { x: 64, y: 64 },
+      size: nominalSize(functionDef.defaultSize),
+    });
     const scene = { id: 's', nodes: { f: fn }, links: {} };
     expect(Schema.is(HostScene)(scene)).toBe(true);
     // The built-in schema rejects the host type; the engine still handles the node as a `NodeBase`.
@@ -73,13 +78,13 @@ describe('registry', () => {
 });
 
 describe('node registry', () => {
-  test('rectangle and scene share the box prototype and differ only where they say so', ({ expect }) => {
-    const { rect, scene } = defaultNodeRegistry;
+  test('rectangle and frame share the box prototype and differ only where they say so', ({ expect }) => {
+    const { rect, frame } = defaultNodeRegistry;
     expect(rect.component).toBe(boxPrototype.component);
     expect(rect.resizable).toBe(true);
-    expect(scene.resizable).toBe(rect.resizable);
-    expect(scene.portsPerSide).toBe(rect.portsPerSide);
-    expect(scene.openable).toBe(true);
+    expect(frame.resizable).toBe(rect.resizable);
+    expect(frame.portsPerSide).toBe(rect.portsPerSide);
+    expect(frame.openable).toBe(true);
     expect(rect.openable).toBeUndefined();
     // A prototype is not a type: the palette and the scene schema never see it.
     expect(Object.keys(defaultNodeRegistry)).not.toContain('box');