@driftengine/tools 4.0.0

package/src/inspector.ts

@@ -0,0 +1,350 @@
+/**
+ * The components of whatever is selected, generated from the schema.
+ *
+ * **Schema-driven and not a drawer per type**, which is the decision that decides whether an editor
+ * stays maintainable. A drawer per component type means every new component needs editor work, so
+ * components stop being added — and it is the one thing reflection makes unnecessary, because a
+ * component already describes itself. `fieldKindOf` in `@driftengine/editor` already turns a
+ * declared type into what to draw, and this uses it rather than repeating it.
+ *
+ * **A value several entities disagree about is marked, never guessed at.** Showing the first
+ * entity's is how somebody types into a field, sees nothing change, and silently overwrites the
+ * other nine.
+ *
+ * **A type this cannot edit is shown read-only rather than dropped.** A field that is silently not
+ * there is a field somebody spends an afternoon looking for.
+ */
+import { addUiChild, createUiNode } from '@driftengine/ui2d';
+import type { UiNode } from '@driftengine/ui2d';
+import { fieldKindOf, type FieldKind } from '@driftengine/editor';
+import type { Command } from './command.ts';
+import { selectedEntities, type Selection } from './selection.ts';
+import { createPanelRoot, emptyPanel, type Panel } from './panel.ts';
+
+/**
+ * What the inspector needs of a world.
+ *
+ * **Four reads and three writes**, so a panel can be tested against plain maps — this plan's second
+ * constraint — and so the same panel serves `@driftengine/entities`, a `.drs` file's declarations
+ * and anything else that can answer these. A caller holding a `World` wraps it in seven lines.
+ */
+export interface InspectableWorld {
+  componentsOf(entity: number): readonly string[];
+  schemaOf(component: string): readonly { readonly name: string; readonly type: string }[];
+  read(entity: number, component: string, field: string): unknown;
+  write(entity: number, component: string, field: string, value: unknown): void;
+  hasComponent(entity: number, component: string): boolean;
+  addComponent(entity: number, component: string): void;
+  removeComponent(entity: number, component: string): void;
+}
+
+/** What a row's value is when the selected entities disagree about it. */
+export const MIXED = Symbol('mixed');
+
+/** A vector row is three number fields; anything else is one field. */
+export type RowKind = FieldKind | 'vector';
+
+export interface InspectorRow {
+  readonly component: string;
+  /** What the row is called: a field's name, or the prefix the vector's three share. */
+  readonly label: string;
+  /** The declared type, verbatim. Empty for a vector, which is three of them. */
+  readonly type: string;
+  readonly kind: RowKind;
+  readonly enumName: string;
+  /** The schema fields this row writes, in order. One, or three for a vector. */
+  readonly fields: readonly string[];
+  /** The value, `MIXED` where the selection disagrees. An array of three for a vector. */
+  readonly value: unknown;
+  readonly editable: boolean;
+}
+
+/**
+ * The declared types this can edit.
+ *
+ * **A list rather than `fieldKindOf`'s answer**, because that function's fallback is `number` — it
+ * is asked what *kind* a known type is, not whether a type is known, and `MeshHandle` comes back as
+ * a number that would then be typed into. The two questions are different and the second one is
+ * this file's.
+ */
+const KNOWN = new Set([
+  'f32',
+  'f64',
+  'i8',
+  'i16',
+  'i32',
+  'i64',
+  'u8',
+  'u16',
+  'u32',
+  'u64',
+  'bool',
+  'String',
+  'Entity',
+]);
+
+export function fieldEditable(type: string): boolean {
+  const inner = type.startsWith('option:') ? type.slice('option:'.length) : type;
+  return KNOWN.has(inner) || inner.startsWith('enum:');
+}
+
+/** `position.x` is the `x` of a vector called `position`. Anything else is its own row. */
+function vectorPartOf(name: string): { prefix: string; axis: number } | null {
+  const dot = name.lastIndexOf('.');
+  if (dot <= 0) return null;
+  const axis = 'xyz'.indexOf(name.slice(dot + 1));
+  return axis < 0 ? null : { prefix: name.slice(0, dot), axis };
+}
+
+/** One value across the selection, or `MIXED`. */
+function agreed(
+  world: InspectableWorld,
+  entities: readonly number[],
+  component: string,
+  field: string,
+): unknown {
+  const first = world.read(entities[0] as number, component, field);
+  for (let at = 1; at < entities.length; at += 1) {
+    if (world.read(entities[at] as number, component, field) !== first) return MIXED;
+  }
+  return first;
+}
+
+/**
+ * The rows for a selection: the components every selected entity has, field by field.
+ *
+ * Components are taken from the first entity and then filtered by the rest, so the order is stable
+ * — a row that moved between frames because a set iterated differently is a field somebody clicks
+ * and misses.
+ */
+export function inspectorRows(
+  world: InspectableWorld,
+  entities: readonly number[],
+): InspectorRow[] {
+  const first = entities[0];
+  if (first === undefined) return [];
+
+  const shared = world
+    .componentsOf(first)
+    .filter((component) => entities.every((entity) => world.hasComponent(entity, component)));
+
+  const rows: InspectorRow[] = [];
+  for (const component of shared) {
+    const fields = world.schemaOf(component);
+    const vectors = new Map<string, string[]>();
+
+    for (const field of fields) {
+      const part = vectorPartOf(field.name);
+      if (part === null) continue;
+      const slots = vectors.get(part.prefix) ?? ['', '', ''];
+      slots[part.axis] = field.name;
+      vectors.set(part.prefix, slots);
+    }
+    /* Two of three is not a vector; it is two fields that happen to be named that way. */
+    for (const [prefix, slots] of vectors) {
+      if (slots.some((slot) => slot === '')) vectors.delete(prefix);
+    }
+    const claimed = new Set([...vectors.values()].flat());
+
+    const emitted = new Set<string>();
+    for (const field of fields) {
+      const part = vectorPartOf(field.name);
+      if (part !== null && claimed.has(field.name)) {
+        if (emitted.has(part.prefix)) continue;
+        emitted.add(part.prefix);
+        const slots = vectors.get(part.prefix) as string[];
+        rows.push({
+          component,
+          label: part.prefix,
+          type: '',
+          kind: 'vector',
+          enumName: '',
+          fields: slots,
+          value: slots.map((slot) => agreed(world, entities, component, slot)),
+          editable: fieldEditable(field.type),
+        });
+        continue;
+      }
+      const { kind, enumName } = fieldKindOf(field.type);
+      rows.push({
+        component,
+        label: field.name,
+        type: field.type,
+        kind,
+        enumName,
+        fields: [field.name],
+        value: agreed(world, entities, component, field.name),
+        editable: fieldEditable(field.type),
+      });
+    }
+  }
+  return rows;
+}
+
+/**
+ * Write one row's fields across the whole selection, as one entry.
+ *
+ * **One entry for the whole selection and for all three of a vector's components.** Editing with
+ * ten entities selected is one act, and undo that took it back one entity at a time would make the
+ * person count. Each entity's own previous value is recorded, so undo does not flatten them onto
+ * whatever the first one held.
+ */
+export function setFieldCommand(
+  world: InspectableWorld,
+  entities: readonly number[],
+  component: string,
+  fields: readonly string[],
+  values: readonly unknown[],
+): Command | null {
+  if (entities.length === 0 || fields.length === 0) return null;
+  if (!entities.every((entity) => world.hasComponent(entity, component))) return null;
+
+  const before = entities.map((entity) =>
+    fields.map((field) => world.read(entity, component, field)),
+  );
+
+  return {
+    label: `${component}.${stripAxis(fields)}`,
+    apply: (): void => {
+      for (const entity of entities) {
+        fields.forEach((field, at) => world.write(entity, component, field, values[at]));
+      }
+    },
+    revert: (): void => {
+      entities.forEach((entity, row) => {
+        fields.forEach((field, at) => {
+          world.write(entity, component, field, (before[row] as unknown[])[at]);
+        });
+      });
+    },
+  };
+}
+
+/** A vector's label is what its three fields share, so the undo menu says `position` not `position.x`. */
+function stripAxis(fields: readonly string[]): string {
+  const first = fields[0] as string;
+  if (fields.length === 1) return first;
+  const part = vectorPartOf(first);
+  return part === null ? first : part.prefix;
+}
+
+export function addComponentCommand(
+  world: InspectableWorld,
+  entities: readonly number[],
+  component: string,
+): Command | null {
+  const missing = entities.filter((entity) => !world.hasComponent(entity, component));
+  if (missing.length === 0) return null;
+  return {
+    label: `Add ${component}`,
+    apply: (): void => {
+      for (const entity of missing) world.addComponent(entity, component);
+    },
+    revert: (): void => {
+      for (const entity of missing) world.removeComponent(entity, component);
+    },
+  };
+}
+
+/**
+ * Remove a component, keeping its values so undo can put them back.
+ *
+ * **The values are read before the removal and written after the restore.** A remove that only
+ * remembers "it was there" gives back a component full of zeroes, which reads as undo having
+ * worked and is the worse failure: nothing looks broken.
+ */
+export function removeComponentCommand(
+  world: InspectableWorld,
+  entities: readonly number[],
+  component: string,
+): Command | null {
+  const present = entities.filter((entity) => world.hasComponent(entity, component));
+  if (present.length === 0) return null;
+  const fields = world.schemaOf(component).map((field) => field.name);
+  const kept = present.map((entity) => fields.map((field) => world.read(entity, component, field)));
+
+  return {
+    label: `Remove ${component}`,
+    apply: (): void => {
+      for (const entity of present) world.removeComponent(entity, component);
+    },
+    revert: (): void => {
+      present.forEach((entity, row) => {
+        world.addComponent(entity, component);
+        fields.forEach((field, at) => {
+          world.write(entity, component, field, (kept[row] as unknown[])[at]);
+        });
+      });
+    },
+  };
+}
+
+export interface InspectorWorld {
+  readonly world: InspectableWorld;
+}
+
+export interface InspectorView {
+  readonly root: UiNode;
+  readonly selection: Selection;
+  /** The rows the last build produced, so routing can find a field by index. */
+  rows: InspectorRow[];
+  rowHeight: number;
+}
+
+export function createInspectorView(options: {
+  selection: Selection;
+  rowHeight?: number;
+}): InspectorView {
+  return {
+    root: createPanelRoot(inspectorPanel),
+    selection: options.selection,
+    rows: [],
+    rowHeight: options.rowHeight ?? 18,
+  };
+}
+
+/** What a row shows to the right of its label. `—` is the mark for a disagreement. */
+export function rowText(row: InspectorRow): string {
+  if (row.value === MIXED) return `${row.label}  —`;
+  if (row.kind === 'vector') {
+    const parts = (row.value as unknown[]).map((part) => (part === MIXED ? '—' : String(part)));
+    return `${row.label}  ${parts.join(', ')}`;
+  }
+  if (row.kind === 'boolean') return `${row.label}  ${row.value ? 'true' : 'false'}`;
+  return `${row.label}  ${String(row.value)}`;
+}
+
+export const inspectorPanel: Panel<InspectorWorld, InspectorView> = {
+  id: 'inspector',
+  title: 'Inspector',
+
+  build(world, view, root): void {
+    const entities = selectedEntities(view.selection);
+    view.rows = inspectorRows(world.world, entities);
+    if (view.rows.length === 0) {
+      emptyPanel(root, entities.length === 0 ? 'Nothing selected' : 'No fields in common');
+      return;
+    }
+    root.children.length = 0;
+    for (let at = 0; at < view.rows.length; at += 1) {
+      const row = view.rows[at] as InspectorRow;
+      addUiChild(
+        root,
+        createUiNode({
+          width: 'grow',
+          height: view.rowHeight,
+          text: rowText(row),
+          interactive: row.editable,
+          focusable: row.editable,
+          name: `field:${at}`,
+        }),
+      );
+    }
+  },
+
+  route(): Command | null {
+    /* Task 5 wires the field widgets in. Until then the inspector shows and does not edit, which
+       is a state worth having rather than a half-built router that swallows keys. */
+    return null;
+  },
+};

package/src/network.ts

@@ -0,0 +1,185 @@
+/**
+ * Snapshots, rollback depth, and the frame two peers stopped agreeing on.
+ *
+ * **Nobody else has this panel, because nobody else has the state to put in it.** The one that
+ * matters is divergence: `@driftengine/network` already fingerprints every snapshot and reports a
+ * `Desync` carrying the tick, the peer and both digests, and nothing has ever shown it to anybody.
+ *
+ * **An empty divergence list and a missing one must not look the same.** One says the peers agree;
+ * the other says nobody checked. Those are the two answers somebody most needs to tell apart, and
+ * a panel that renders both as blank space is worse than no panel — it reads as agreement. So no
+ * session says "No session", and no divergence says "peers agree" in as many words.
+ *
+ * **Which component differs is answerable only where somebody hashed per component.** `Fingerprint`
+ * digests a whole snapshot, so `Desync` is two sixteen-character strings and nothing finer. Where a
+ * caller supplies a per-component breakdown this names the component; where it does not, it says
+ * the breakdown is absent rather than showing an empty line that reads as "no component differs".
+ */
+import { addUiChild, createUiNode } from '@driftengine/ui2d';
+import type { UiNode } from '@driftengine/ui2d';
+import type { Desync } from '@driftengine/network';
+import { divergentComponents } from './divergence.ts';
+import type { Command } from './command.ts';
+import { createPanelRoot, emptyPanel, type Panel } from './panel.ts';
+
+/**
+ * What the panel needs of a session.
+ *
+ * Supplied rather than read off a `LockstepSession`, for the reason the asset index is supplied:
+ * an editor attached to a session, a recording or a replay wants the same panel, and only two of
+ * those have a session to read.
+ */
+export interface NetworkReadout {
+  readonly inputDelay: number;
+  readonly participants: number;
+  /** Bytes in one snapshot slot. */
+  readonly snapshotBytes: number;
+  /** How many slots the rewind window holds. */
+  readonly snapshotCount: number;
+  /** Everything the session has seen disagree, oldest first. */
+  readonly desyncs: readonly Desync[];
+  /** A per-component breakdown, where the caller has one. See the header. */
+  readonly componentHashes: {
+    readonly ours: ReadonlyMap<string, string>;
+    readonly theirs: ReadonlyMap<string, string>;
+  } | null;
+}
+
+/**
+ * Which components two peers hash differently, in the order they are first seen.
+ *
+ * **The comparison itself lives in `pie/divergence.ts`**, which is where the divergence search
+ * needs it too. Two copies of "which of these hashes disagree" is two places for the rule about a
+ * component only one side has to be got wrong, and a panel is the wrong owner of a rule — it uses
+ * one. This keeps its own shape, returning a fresh array, because a panel builds a line of text
+ * from it once per rebuild and an out-parameter would be ceremony for nothing.
+ */
+export function componentDivergence(
+  ours: ReadonlyMap<string, string>,
+  theirs: ReadonlyMap<string, string>,
+): string[] {
+  const out: string[] = [];
+  divergentComponents(ours, theirs, out);
+  return out;
+}
+
+/** A fixed window of how deep each recent frame rewound. */
+export interface RollbackHistory {
+  readonly depth: Int32Array;
+  head: number;
+  filled: number;
+}
+
+export function createRollbackHistory(capacity: number): RollbackHistory {
+  return { depth: new Int32Array(Math.max(1, capacity)), head: 0, filled: 0 };
+}
+
+export function pushRollback(history: RollbackHistory, depth: number): void {
+  const capacity = history.depth.length;
+  history.depth[history.head] = depth;
+  history.head = (history.head + 1) % capacity;
+  if (history.filled < capacity) history.filled += 1;
+}
+
+export function rollbackValues(history: RollbackHistory): number[] {
+  const capacity = history.depth.length;
+  const first = history.filled < capacity ? 0 : history.head;
+  const out: number[] = [];
+  for (let at = 0; at < history.filled; at += 1) {
+    out.push(history.depth[(first + at) % capacity] as number);
+  }
+  return out;
+}
+
+export interface NetworkWorld {
+  /** Null where the editor is not attached to anything. */
+  readonly session: NetworkReadout | null;
+}
+
+export interface NetworkView {
+  readonly root: UiNode;
+  readonly rollback: RollbackHistory;
+  rowHeight: number;
+}
+
+export function createNetworkView(options: {
+  rowHeight?: number;
+  historyLength?: number;
+}): NetworkView {
+  return {
+    root: createPanelRoot(networkPanel),
+    rollback: createRollbackHistory(options.historyLength ?? 60),
+    rowHeight: options.rowHeight ?? 18,
+  };
+}
+
+/** Kilobytes to one decimal, which is the resolution a snapshot budget is argued at. */
+function kilobytes(bytes: number): string {
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+function lineAt(root: UiNode, index: number, text: string, height: number): void {
+  const existing = root.children[index];
+  if (existing !== undefined) {
+    existing.hidden = false;
+    existing.text = text;
+    return;
+  }
+  addUiChild(
+    root,
+    createUiNode({ width: 'grow', height, text, interactive: false, name: `line:${index}` }),
+  );
+}
+
+export const networkPanel: Panel<NetworkWorld, NetworkView> = {
+  id: 'network',
+  title: 'Network',
+
+  build(world, view, root): void {
+    const session = world.session;
+    if (session === null) {
+      emptyPanel(root, 'No session');
+      return;
+    }
+
+    const lines = [
+      `delay  ${session.inputDelay} ticks`,
+      `peers  ${session.participants}`,
+      `snapshots  ${session.snapshotCount} of ${kilobytes(session.snapshotBytes)} — ${kilobytes(session.snapshotBytes * session.snapshotCount)}`,
+      `rollback  ${rollbackValues(view.rollback).join(' ')}`,
+    ];
+
+    const first = session.desyncs[0];
+    if (first === undefined) {
+      lines.push('peers agree on every fingerprint so far');
+    } else {
+      lines.push(`diverged at tick ${first.tick} against ${first.peer}`);
+      lines.push(`  ours ${first.ours}`);
+      lines.push(`  theirs ${first.theirs}`);
+      const hashes = session.componentHashes;
+      if (hashes === null) {
+        lines.push('  no per-component hashes were supplied');
+      } else {
+        const differing = componentDivergence(hashes.ours, hashes.theirs);
+        lines.push(
+          differing.length === 0
+            ? '  every component agrees, so the difference is outside them'
+            : `  differing: ${differing.join(', ')}`,
+        );
+      }
+    }
+
+    for (let at = 0; at < lines.length; at += 1) {
+      lineAt(root, at, lines[at] as string, view.rowHeight);
+    }
+    for (let at = lines.length; at < root.children.length; at += 1) {
+      (root.children[at] as UiNode).hidden = true;
+    }
+  },
+
+  route(): Command | null {
+    /* Read-only, and deliberately: there is nothing in a session's diagnostics a person should be
+       able to edit, and a panel that let them would be editing the evidence. */
+    return null;
+  },
+};

package/src/panel.ts

@@ -0,0 +1,147 @@
+/**
+ * The shape every panel shares.
+ *
+ * **`route` is handed the world read-only and returns a command or nothing.** That one signature is
+ * what makes "a panel mutates only through commands" enforceable rather than aspirational: a panel
+ * physically cannot change the world, because it is given no way to. The undo stack is only as good
+ * as its worst offender, and this is how there is no worst offender.
+ *
+ * **The world and the view are two parameters, and the plan had them as one.** Writing the scene
+ * tree found out why they cannot be: a drag in progress, which row is hovered, how far the list is
+ * scrolled and which branches are open are all things `route` must write, and none of them belongs
+ * to the world. With one state object, "never mutates state" is either false or the panel cannot
+ * record a drag. Split, the claim is exact — `Readonly<W>` for what the world owns, `V` for what
+ * the panel owns — and the frozen-state test below is meaningful rather than true by construction.
+ * `Readonly` is shallow and so is not a proof; it is a statement of intent in the place a reader
+ * will look, which is the same standing every other rule in this repository has.
+ *
+ * **`build` is a function of both.** Building twice over the same world and view reaches the same
+ * tree, so a panel can be rebuilt whenever anything changes without anybody reasoning about what it
+ * was showing before. `treeShape` is how a test says that, and every panel's test uses it.
+ *
+ * **Nothing to show is a state and not a failure.** A panel with no selection, an asset browser
+ * before the project has loaded and a profiler before the first frame all reach `emptyPanel`. An
+ * empty dock with an exception behind it is the least useful thing an editor can show.
+ */
+import { addUiChild, createUiNode } from '@driftengine/ui2d';
+import type { UiNode } from '@driftengine/ui2d';
+import type { Command } from './command.ts';
+
+/**
+ * What a panel is asked to deal with.
+ *
+ * Positions are in the panel's own space — the caller has already subtracted the dock site's
+ * origin — so a panel never knows where on screen it is, and a panel moved to another dock behaves
+ * identically. `button` is 0 for the primary; a context menu is 2, as every platform spells it.
+ */
+export type UiEvent =
+  | {
+      readonly kind: 'pointer';
+      readonly phase: 'down' | 'move' | 'up';
+      readonly x: number;
+      readonly y: number;
+      readonly button: number;
+    }
+  | { readonly kind: 'key'; readonly key: string; readonly shift: boolean; readonly ctrl: boolean }
+  | {
+      readonly kind: 'wheel';
+      readonly x: number;
+      readonly y: number;
+      readonly dx: number;
+      readonly dy: number;
+    };
+
+export function pointerEvent(
+  phase: 'down' | 'move' | 'up',
+  x: number,
+  y: number,
+  button = 0,
+): UiEvent {
+  return { kind: 'pointer', phase, x, y, button };
+}
+
+export function keyEvent(key: string, shift = false, ctrl = false): UiEvent {
+  return { kind: 'key', key, shift, ctrl };
+}
+
+export function wheelEvent(x: number, y: number, dx: number, dy: number): UiEvent {
+  return { kind: 'wheel', x, y, dx, dy };
+}
+
+export interface Panel<W, V> {
+  /** Stable for the life of the panel. What the dock layout stores. */
+  readonly id: string;
+  /** What the dock tab says. */
+  readonly title: string;
+  /** Fill `root` from the world and the view. Called whenever either may have changed. */
+  build(world: Readonly<W>, view: V, root: UiNode): void;
+  /**
+   * What this event asks of the *world*, or nothing.
+   *
+   * May write `view` — a drag has to be recorded somewhere, and so do a scroll and a hover. May
+   * not write `world`, which is what the command it returns is for.
+   */
+  route(world: Readonly<W>, view: V, event: UiEvent): Command | null;
+}
+
+/** The prefix a panel root's name carries, so the dock can recognise one. */
+export const PANEL_PREFIX = 'panel:';
+
+/**
+ * The node a panel builds into.
+ *
+ * The identifier lives on the root rather than in a map beside the tree, so the dock reads it off
+ * whatever node it is holding and there is nothing to keep in step. It takes the identifier alone
+ * rather than a `Panel<S>`, so a caller need not name the state type to make a root. `clip`,
+ * because a panel's content is
+ * routinely taller than its site, and a panel drawing outside its dock is the first thing anybody
+ * notices.
+ */
+export function createPanelRoot(panel: { readonly id: string }): UiNode {
+  return createUiNode({
+    direction: 'column',
+    width: 'grow',
+    height: 'grow',
+    clip: true,
+    name: `${PANEL_PREFIX}${panel.id}`,
+  });
+}
+
+/** Which panel a node is the root of, or null. */
+export function panelIdOf(node: UiNode | null): string | null {
+  if (node === null || !node.name.startsWith(PANEL_PREFIX)) return null;
+  const id = node.name.slice(PANEL_PREFIX.length);
+  return id.length > 0 ? id : null;
+}
+
+/**
+ * Replace a panel's contents with one line saying why there is nothing.
+ *
+ * Not interactive, because a message is not a control and a person who clicks it and gets a
+ * selection has learnt something untrue about the panel.
+ */
+export function emptyPanel(root: UiNode, message: string): void {
+  root.children.length = 0;
+  addUiChild(
+    root,
+    createUiNode({ width: 'grow', height: 18, text: message, name: 'empty', interactive: false }),
+  );
+}
+
+/**
+ * A tree as a comparable string: structure, text, geometry and name, but never identity.
+ *
+ * **What it deliberately leaves out is object identity**, because a panel that reuses its pooled
+ * rows and one that rebuilt them are the same panel as far as the contract is concerned — the
+ * whole point of pooling is that nobody downstream can tell. What it deliberately includes is
+ * `hidden`, because a pooled row that is not showing is exactly how a panel shrinks, and two trees
+ * differing only there are showing different things.
+ */
+export function treeShape(node: UiNode, depth = 0): string {
+  const pad = '  '.repeat(depth);
+  const size = `${String(node.width)}x${String(node.height)}`;
+  const flags = `${node.hidden ? 'h' : '-'}${node.interactive ? 'i' : '-'}${node.clip ? 'c' : '-'}`;
+  const own = `${pad}${node.name || '(unnamed)'} ${size} ${flags} ${node.layer} ${JSON.stringify(node.text)}`;
+  const children = node.children.map((child) => treeShape(child, depth + 1));
+  return [own, ...children].join('\n');
+}