@grafloria/element 0.3.19 → 0.3.21

package/src/lib/diagram-kit/update.ts

@@ -1,324 +0,0 @@
-/**
- * Live editing — `updateEntity` / `updateClass` mutate a rendered kit card in
- * place (P3, the foundation the in-canvas editing chrome is built on).
- *
- * A delta changes the DATA (a table's name, its columns; a class's name,
- * attributes, methods, width/height) and this module:
- *   1. reads the stored spec (`kitEntity` / `kitClass`) — the source of truth;
- *   2. applies the delta to a NEW spec (the caller's objects are never mutated,
- *      so undo can restore the old one cleanly);
- *   3. regenerates the card html from the SAME builder er.ts/uml.ts use
- *      (`card.ts`), so an edited card is identical to a freshly-built one;
- *   4. recomputes the node size;
- *   5. RECONCILES the field ports — every port pinned to a surviving column
- *      moves to that column's new row (`erRowCenterY`), ports on a removed
- *      column are dropped along with their edges. Port ids never change, so an
- *      edge stays glued to its row across inserts/removes/reorders (the exact
- *      failure this solves: a port frozen at the old row while the rows shifted
- *      under it);
- *   6. repaints — as ONE undoable step.
- *
- * ONE UNDO STEP. The change is applied through `api.getEngine().commandManager`
- * — the same public seam `renderer/ext/public-api.ts` uses — wrapped in a
- * single kit-local {@link Command}. There is no `SetNodeMetadataCommand` in the
- * engine (the html/kit-spec mutation has no built-in command), so rather than
- * reach into engine internals or compose a half-undoable macro, the whole edit
- * lives in one Command subclass here (subclassing `Command` is the engine's
- * intended extension point — every basic command does it). When no engine is
- * present the edit still applies, just non-undoably.
- */
-
-import { Command, PortModel, LinkModel } from '@grafloria/engine';
-import type { ErColumn, ErEntitySpec } from './er';
-import type { UmlClassSpec } from './uml';
-import {
-  entityCardContent,
-  entityAutoHeight,
-  classCardContent,
-  classAutoHeight,
-  erRowCenterY,
-  rowIndexFromY,
-  matchColumns,
-  type HtmlNode,
-} from './card';
-
-/** What an ER table edit can change. Omitted fields are left as they were. */
-export interface ErEntityDelta {
-  name?: string;
-  width?: number;
-  height?: number;
-  /**
-   * The NEW full column list. Survivors are matched to the old columns to move
-   * their ports (object identity → name → positional remainder), so a rename,
-   * a retype, a reorder, an insert and a delete are all understood without the
-   * caller preserving object references. See {@link matchColumns}.
-   */
-  columns?: ErColumn[];
-}
-
-/** What a UML class edit can change. */
-export interface UmlClassDelta {
-  name?: string;
-  stereotype?: string;
-  abstract?: boolean;
-  width?: number;
-  height?: number;
-  attributes?: string[];
-  methods?: string[];
-}
-
-type Kind = 'er' | 'uml';
-
-/** What building the new card produces; the command turns it into model mutations. */
-interface BuildResult {
-  newKit: Record<string, unknown>;
-  content: HtmlNode;
-  height: number;
-  /** Undefined → keep the node's current width. */
-  width?: number;
-}
-
-// -- the minimal live-model surface the command drives ----------------------
-interface LivePort {
-  id: string;
-  offset?: { x: number; y: number };
-  alignment?: { side?: string };
-  layout?: { strategy?: string; args?: { units?: string; x?: number; y?: number; dy?: number } };
-  serialize(): Record<string, unknown>;
-  setOffset(o: { x: number; y: number }): void;
-}
-interface LiveLink {
-  id: string;
-  sourcePortId?: string;
-  targetPortId?: string;
-  serialize(): Record<string, unknown>;
-}
-interface LiveNode {
-  size: { width: number; height: number };
-  getMetadata(key: string): unknown;
-  setMetadata(key: string, value: unknown): void;
-  setSize(w: number, h: number): void;
-  getPorts(): LivePort[];
-  getPort(id: string): LivePort | undefined;
-  addPort(p: unknown): void;
-  removePort(id: string): unknown;
-}
-interface LiveModel {
-  getNode(id: string): LiveNode | undefined;
-  getLinks(): LiveLink[];
-  getLink(id: string): LiveLink | undefined;
-  removeLink(id: string): unknown;
-  addLink(l: unknown): void;
-}
-interface KitApi {
-  getModel?: () => LiveModel;
-  getEngine?: () => { commandManager?: { execute: (c: unknown) => Promise<void> } } | undefined;
-  renderNow?: () => void;
-}
-
-/**
- * The single undoable edit. Captures the card's whole before-state on first
- * execute and restores it on undo, so an edit — however many rows and edges it
- * touched — is one Ctrl+Z.
- */
-class UpdateCardCommand extends Command {
-  private captured = false;
-  private before?: {
-    html: unknown;
-    kit: unknown;
-    size: { width: number; height: number };
-    ports: Array<Record<string, unknown>>;
-    links: Array<Record<string, unknown>>;
-  };
-
-  constructor(
-    private nodeId: string,
-    private kind: Kind,
-    private build: (oldKit: Record<string, unknown>) => BuildResult
-  ) {
-    super(kind === 'er' ? 'Edit table' : 'Edit class');
-  }
-
-  override execute(context: { diagram: LiveModel }): void {
-    const model = context.diagram;
-    const node = model.getNode(this.nodeId);
-    if (!node) return;
-    const kitKey = this.kind === 'er' ? 'kitEntity' : 'kitClass';
-    const oldKit = (node.getMetadata(kitKey) ?? {}) as Record<string, unknown>;
-
-    if (!this.captured) {
-      this.captured = true;
-      this.before = {
-        html: node.getMetadata('html'),
-        kit: oldKit,
-        size: { ...node.size },
-        ports: node.getPorts().map((p) => p.serialize()),
-        links: [],
-      };
-    }
-
-    const result = this.build(oldKit);
-    const newWidth = result.width ?? node.size.width;
-
-    const removedLinks: Array<Record<string, unknown>> = [];
-    if (this.kind === 'er') {
-      const oldCols = (oldKit['columns'] ?? []) as ErColumn[];
-      const newCols = (result.newKit['columns'] ?? []) as ErColumn[];
-      const map = matchColumns(oldCols, newCols);
-
-      for (const port of [...node.getPorts()]) {
-        const args = port.layout?.args;
-        if (port.layout?.strategy !== 'absolute' || !args || args.units !== 'px' || args.y == null) continue;
-        const oldIdx = rowIndexFromY(args.y);
-        if (oldIdx < 0 || oldIdx >= oldCols.length) continue; // not a row-pinned field port
-        const newIdx = map.get(oldIdx);
-        if (newIdx === undefined) {
-          // The column is gone — drop the port and every edge riding it.
-          for (const link of model.getLinks()) {
-            if (link.sourcePortId === port.id || link.targetPortId === port.id) removedLinks.push(link.serialize());
-          }
-          for (const link of model.getLinks().filter((l) => l.sourcePortId === port.id || l.targetPortId === port.id)) {
-            model.removeLink(link.id);
-          }
-          node.removePort(port.id);
-        } else {
-          // Move the port to its column's NEW row; keep the ±dy spread. x tracks
-          // the (possibly changed) width by side, so a widened table stays pinned.
-          args.y = erRowCenterY(newIdx);
-          const side = port.alignment?.side;
-          args.x = side === 'left' ? 0 : side === 'right' ? newWidth : newWidth / 2;
-          // A nested-arg mutation is not tracked — nudge the port so the model
-          // marks it dirty and the renderer repositions it this frame.
-          port.setOffset({ ...(port.offset ?? { x: 0, y: 0 }) });
-        }
-      }
-    }
-
-    node.setMetadata('html', { content: result.content, interactive: true });
-    node.setMetadata(kitKey, result.newKit);
-    node.setSize(newWidth, result.height);
-    if (this.before) this.before.links = removedLinks;
-  }
-
-  override undo(context: { diagram: LiveModel }): void {
-    const model = context.diagram;
-    const node = model.getNode(this.nodeId);
-    if (!node || !this.before) return;
-    node.setMetadata('html', this.before.html);
-    node.setMetadata(this.kind === 'er' ? 'kitEntity' : 'kitClass', this.before.kit);
-    node.setSize(this.before.size.width, this.before.size.height);
-
-    const beforeIds = new Set(this.before.ports.map((p) => p['id'] as string));
-    for (const p of [...node.getPorts()]) if (!beforeIds.has(p.id)) node.removePort(p.id);
-    for (const sp of this.before.ports) {
-      const live = node.getPort(sp['id'] as string);
-      if (live) {
-        (live as { layout?: unknown }).layout = sp['layout'];
-        live.setOffset({ ...((sp['offset'] as { x: number; y: number }) ?? { x: 0, y: 0 }) });
-      } else {
-        node.addPort(PortModel.fromJSON(sp as never));
-      }
-    }
-    for (const sl of this.before.links) {
-      if (!model.getLink(sl['id'] as string)) model.addLink(LinkModel.fromJSON(sl as never));
-    }
-  }
-
-  override canExecute(context: { diagram: LiveModel }): boolean {
-    return !!context.diagram?.getNode(this.nodeId);
-  }
-
-  override serialize() {
-    return { id: this.id, name: this.name, timestamp: this.timestamp, data: { nodeId: this.nodeId, kind: this.kind } };
-  }
-}
-
-/** Route a build through the engine's command stack (one undo step) or apply it directly. */
-async function runUpdate(api: KitApi, nodeId: string, kind: Kind, build: (oldKit: Record<string, unknown>) => BuildResult): Promise<boolean> {
-  const model = api.getModel?.();
-  const node = model?.getNode?.(nodeId);
-  if (!model || !node) return false;
-  const command = new UpdateCardCommand(nodeId, kind, build);
-  const cm = api.getEngine?.()?.commandManager;
-  if (cm?.execute) {
-    await cm.execute(command); // ONE undoable step (Command enters history once)
-  } else {
-    command.execute({ diagram: model }); // no engine — apply, non-undoably
-  }
-  api.renderNow?.();
-  return true;
-}
-
-const isEditable = (node: LiveNode | undefined): boolean => node?.getMetadata('kitEditable') === true;
-
-/**
- * Edit a rendered ER table in place. `delta` may change the name, the column
- * list (add / remove / reorder / rename / retype), and the width/height. Field
- * ports and their edges are reconciled so the diagram stays correct, as ONE
- * undoable step.
- *
- * @returns whether the node existed and the edit was applied.
- */
-export function updateEntity(api: KitApi, entityId: string, delta: ErEntityDelta): Promise<boolean> {
-  const editable = isEditable(api.getModel?.()?.getNode?.(entityId));
-  const build = (oldKit: Record<string, unknown>): BuildResult => {
-    const newEntity = { ...(oldKit as unknown as ErEntitySpec) };
-    if (delta.name !== undefined) newEntity.name = delta.name;
-    if (delta.width !== undefined) newEntity.width = delta.width;
-    if (delta.height !== undefined) newEntity.height = delta.height;
-    if (delta.columns !== undefined) newEntity.columns = delta.columns;
-    return {
-      newKit: newEntity as unknown as Record<string, unknown>,
-      content: entityCardContent(newEntity, editable),
-      height: entityAutoHeight(newEntity, editable),
-      width: newEntity.width,
-    };
-  };
-  return runUpdate(api, entityId, 'er', build);
-}
-
-/**
- * Edit a rendered UML class in place. `delta` may change the name, stereotype,
- * abstract flag, attributes, methods, and width/height. One undoable step.
- */
-export function updateClass(api: KitApi, classId: string, delta: UmlClassDelta): Promise<boolean> {
-  const editable = isEditable(api.getModel?.()?.getNode?.(classId));
-  const build = (oldKit: Record<string, unknown>): BuildResult => {
-    const newClass = { ...(oldKit as unknown as UmlClassSpec) };
-    if (delta.name !== undefined) newClass.name = delta.name;
-    if (delta.stereotype !== undefined) newClass.stereotype = delta.stereotype;
-    if (delta.abstract !== undefined) newClass.abstract = delta.abstract;
-    if (delta.width !== undefined) newClass.width = delta.width;
-    if (delta.height !== undefined) newClass.height = delta.height;
-    if (delta.attributes !== undefined) newClass.attributes = delta.attributes;
-    if (delta.methods !== undefined) newClass.methods = delta.methods;
-    return {
-      newKit: newClass as unknown as Record<string, unknown>,
-      content: classCardContent(newClass, editable),
-      height: classAutoHeight(newClass, editable),
-      width: newClass.width,
-    };
-  };
-  return runUpdate(api, classId, 'uml', build);
-}
-
-// -- small column helpers, for the editing chrome and embedders --------------
-
-/** Append a column (immutably) — returns the new column array. */
-export function addColumnAt(columns: ErColumn[], column: ErColumn, at = columns.length): ErColumn[] {
-  const next = columns.slice();
-  next.splice(Math.max(0, Math.min(at, next.length)), 0, column);
-  return next;
-}
-
-/** Remove the column at `index` — returns the new column array. */
-export function removeColumnAt(columns: ErColumn[], index: number): ErColumn[] {
-  const next = columns.slice();
-  next.splice(index, 1);
-  return next;
-}
-
-/** Rename the column at `index` — returns a new array with a NEW object there. */
-export function renameColumnAt(columns: ErColumn[], index: number, name: string): ErColumn[] {
-  return columns.map((c, i) => (i === index ? { ...c, name } : c));
-}

package/src/lib/grafloria-flow-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grafloria-flow-element.js","sourceRoot":"","sources":["grafloria-flow-element.ts"],"names":[],"mappings":"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"}

package/src/lib/grafloria-flow-element.spec.ts

@@ -1,290 +0,0 @@
-import type { NodeSpec } from '@grafloria/renderer';
-import { GRAFLORIA_EVENTS, GrafloriaFlowElement, defineGrafloriaFlow } from './grafloria-flow-element';
-import { Grafloria, render } from './grafloria';
-import { registerNodeType, unregisterNodeType } from './node-type-registry';
-
-const WIDTH = 800;
-const HEIGHT = 600;
-
-beforeAll(() => {
-  // jsdom lays nothing out — give every element a real box so the camera works.
-  Element.prototype.getBoundingClientRect = function () {
-    return {
-      left: 0,
-      top: 0,
-      width: WIDTH,
-      height: HEIGHT,
-      right: WIDTH,
-      bottom: HEIGHT,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    } as DOMRect;
-  };
-  defineGrafloriaFlow();
-});
-
-const NODES: NodeSpec[] = [
-  { id: 'a', position: { x: 100, y: 100 }, size: { width: 120, height: 60 }, label: 'A' },
-  { id: 'b', position: { x: 400, y: 100 }, size: { width: 120, height: 60 }, label: 'B' },
-];
-
-function mount(html: string): GrafloriaFlowElement {
-  const host = document.createElement('div');
-  host.innerHTML = html;
-  document.body.appendChild(host);
-  return host.querySelector('grafloria-flow') as GrafloriaFlowElement;
-}
-
-afterEach(() => {
-  document.body.innerHTML = '';
-});
-
-describe('<grafloria-flow>', () => {
-  it('is registered as a custom element', () => {
-    expect(customElements.get('grafloria-flow')).toBe(GrafloriaFlowElement);
-  });
-
-  it('mounts a real diagram from JSON ATTRIBUTES (the no-JavaScript path)', () => {
-    const el = mount(
-      `<grafloria-flow nodes='${JSON.stringify(NODES)}' edges='[{"source":"a","target":"b"}]'></grafloria-flow>`
-    );
-
-    expect(el.diagram).toBeTruthy();
-    expect(el.querySelector('[data-vnode-key="node-a"]')).toBeTruthy();
-    expect(el.querySelector('[data-vnode-key="node-b"]')).toBeTruthy();
-    expect(el.querySelector('[data-vnode-key="link-edge-0"]')).toBeTruthy();
-  });
-
-  it('accepts rich data through PROPERTIES (what Vue/Svelte/Solid bind to)', () => {
-    const el = mount('<grafloria-flow></grafloria-flow>');
-
-    el.nodes = NODES;
-    el.diagram!.renderNow();
-
-    expect(el.diagram!.getModel().getNodes().map((n) => n.id)).toEqual(['a', 'b']);
-    expect(el.querySelector('[data-vnode-key="node-a"]')).toBeTruthy();
-  });
-
-  it('reacts to an attribute change after mount', () => {
-    const el = mount(`<grafloria-flow nodes='${JSON.stringify(NODES)}'></grafloria-flow>`);
-
-    el.setAttribute('nodes', JSON.stringify([NODES[0]]));
-    el.diagram!.renderNow();
-
-    expect(el.diagram!.getModel().getNodes().map((n) => n.id)).toEqual(['a']);
-  });
-
-  it('ignores a malformed JSON attribute instead of taking the page down', () => {
-    const warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
-
-    const el = mount(`<grafloria-flow nodes='{{{ not json'></grafloria-flow>`);
-
-    expect(el.diagram).toBeTruthy();
-    expect(el.diagram!.getModel().getNodes()).toHaveLength(0);
-    expect(warn).toHaveBeenCalled();
-    warn.mockRestore();
-  });
-
-  describe('DOM events out', () => {
-    it('emits grafloria-selection-change as a bubbling, composed CustomEvent', () => {
-      const el = mount(`<grafloria-flow nodes='${JSON.stringify(NODES)}'></grafloria-flow>`);
-      const seen: CustomEvent[] = [];
-      // Listen on `document` to prove it really bubbles out of the element.
-      document.addEventListener(GRAFLORIA_EVENTS.selectionChange, (e) =>
-        seen.push(e as CustomEvent)
-      );
-
-      const model = el.diagram!.getModel();
-      model.selectNode(model.getNode('a')!);
-
-      expect(seen).toHaveLength(1);
-      expect(seen[0].bubbles).toBe(true);
-      expect(seen[0].composed).toBe(true);
-      expect(seen[0].detail.nodes.map((n: { id: string }) => n.id)).toEqual(['a']);
-    });
-
-    it('emits grafloria-node-click from a real mousedown', () => {
-      const el = mount(`<grafloria-flow nodes='${JSON.stringify(NODES)}'></grafloria-flow>`);
-      const handler = jest.fn();
-      el.addEventListener(GRAFLORIA_EVENTS.nodeClick, handler);
-
-      const canvas = el.querySelector('.grafloria-flow-canvas') as HTMLElement;
-      canvas.dispatchEvent(
-        new MouseEvent('mousedown', { bubbles: true, button: 0, clientX: 150, clientY: 130 })
-      );
-
-      expect(handler).toHaveBeenCalled();
-      const detail = (handler.mock.calls[0][0] as CustomEvent).detail;
-      expect(detail.node.id).toBe('a');
-    });
-
-    it('emits grafloria-ready once mounted', async () => {
-      const el = mount(`<grafloria-flow nodes='${JSON.stringify(NODES)}'></grafloria-flow>`);
-      const handler = jest.fn();
-      el.addEventListener(GRAFLORIA_EVENTS.ready, handler);
-
-      await Promise.resolve();
-
-      expect(handler).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('custom nodes with no framework', () => {
-    afterEach(() => unregisterNodeType('card'));
-
-    it('renders a SLOTTED <template> into the node host, filling data-field', () => {
-      const el = mount(`
-        <grafloria-flow nodes='${JSON.stringify([
-          { id: 'n1', type: 'card', position: { x: 5, y: 6 }, custom: true, data: { title: 'Hi' } },
-        ])}'>
-          <template data-node-type="card">
-            <div class="card"><h4 data-field="title"></h4><small data-field="id"></small></div>
-          </template>
-        </grafloria-flow>
-      `);
-
-      const host = el.querySelector('[data-node-id="n1"]') as HTMLElement;
-      expect(host).toBeTruthy();
-      expect(host.querySelector('h4')!.textContent).toBe('Hi');
-      expect(host.querySelector('small')!.textContent).toBe('n1');
-      expect(host.getAttribute('style')).toContain('left:5px');
-    });
-
-    it('never injects data as HTML (a diagram\'s data is user input)', () => {
-      const el = mount(`
-        <grafloria-flow nodes='${JSON.stringify([
-          {
-            id: 'n1',
-            type: 'card',
-            position: { x: 0, y: 0 },
-            custom: true,
-            data: { title: '<img src=x onerror=alert(1)>' },
-          },
-        ])}'>
-          <template data-node-type="card"><h4 data-field="title"></h4></template>
-        </grafloria-flow>
-      `);
-
-      const heading = el.querySelector('[data-node-id="n1"] h4') as HTMLElement;
-      expect(heading.querySelector('img')).toBeNull();
-      expect(heading.textContent).toContain('<img');
-    });
-
-    it('a registered renderer wins over a template', () => {
-      registerNodeType('card', (node, element) => {
-        element.innerHTML = `<b data-testid="reg">${node.id}</b>`;
-      });
-
-      const el = mount(`
-        <grafloria-flow nodes='${JSON.stringify([
-          { id: 'n1', type: 'card', position: { x: 0, y: 0 }, custom: true },
-        ])}'>
-          <template data-node-type="card"><i>from template</i></template>
-        </grafloria-flow>
-      `);
-
-      const host = el.querySelector('[data-node-id="n1"]') as HTMLElement;
-      expect(host.querySelector('b')!.textContent).toBe('n1');
-      expect(host.querySelector('i')).toBeNull();
-    });
-  });
-
-  it('theme attribute swaps the theme in place', () => {
-    const el = mount(`<grafloria-flow nodes='${JSON.stringify(NODES)}'></grafloria-flow>`);
-    const svg = el.querySelector('svg');
-
-    el.setAttribute('theme', 'dark');
-    el.diagram!.renderNow();
-
-    expect(el.querySelector('svg')).toBe(svg); // patched, not remounted
-  });
-
-  it('readonly blocks model mutation but still pans', () => {
-    const el = mount(`<grafloria-flow readonly nodes='${JSON.stringify(NODES)}'></grafloria-flow>`);
-    const canvas = el.querySelector('.grafloria-flow-canvas') as HTMLElement;
-    const node = el.diagram!.getModel().getNode('a')!;
-
-    canvas.dispatchEvent(
-      new MouseEvent('mousedown', { bubbles: true, button: 0, clientX: 150, clientY: 130 })
-    );
-    canvas.dispatchEvent(
-      new MouseEvent('mousemove', { bubbles: true, clientX: 250, clientY: 230 })
-    );
-
-    expect(node.position.x).toBe(100); // not dragged
-
-    canvas.dispatchEvent(new WheelEvent('wheel', { bubbles: true, deltaY: 40 }));
-    expect(el.diagram!.viewport.getViewport().y).toBe(40); // still pans
-  });
-
-  it('disconnecting the element disposes the diagram', () => {
-    const el = mount(`<grafloria-flow nodes='${JSON.stringify(NODES)}'></grafloria-flow>`);
-    expect(el.diagram).toBeTruthy();
-
-    el.remove();
-
-    expect(el.diagram).toBeNull();
-    expect(el.querySelector('svg')).toBeNull();
-  });
-});
-
-describe('Grafloria.render — the Mermaid-shaped API', () => {
-  it('mounts from an object spec into an element', () => {
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-
-    const diagram = render({ nodes: NODES, edges: [{ source: 'a', target: 'b' }] }, target);
-
-    expect(target.querySelector('[data-vnode-key="node-a"]')).toBeTruthy();
-    expect(diagram.getModel().getLinks()).toHaveLength(1);
-    diagram.dispose();
-  });
-
-  it('accepts a CSS selector and a JSON string', () => {
-    const target = document.createElement('div');
-    target.id = 'chart';
-    document.body.appendChild(target);
-
-    const diagram = Grafloria.render(JSON.stringify({ nodes: NODES }), '#chart');
-
-    expect(target.querySelector('[data-vnode-key="node-b"]')).toBeTruthy();
-    diagram.dispose();
-  });
-
-  it('routes custom nodes through the global registry', () => {
-    registerNodeType('badge', (node, element) => {
-      element.textContent = `badge:${node.id}`;
-    });
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-
-    const diagram = Grafloria.render(
-      { nodes: [{ id: 'z', type: 'badge', position: { x: 0, y: 0 }, custom: true }] },
-      target
-    );
-
-    expect((target.querySelector('[data-node-id="z"]') as HTMLElement).textContent).toBe(
-      'badge:z'
-    );
-
-    diagram.dispose();
-    unregisterNodeType('badge');
-  });
-
-  it('throws a useful error when the target does not exist', () => {
-    expect(() => Grafloria.render({ nodes: [] }, '#nope')).toThrow(/no element matched/);
-  });
-
-  it('throws a useful error on a malformed JSON spec', () => {
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-    expect(() => Grafloria.render('{ nope', target)).toThrow(/must be an object or a JSON string/);
-  });
-
-  it('renderStatic is the SSR path, reachable from the tiny API', () => {
-    const { svg, snapshot } = Grafloria.renderStatic({ nodes: NODES, instanceId: 'grafloria-tiny' });
-    expect(svg).toContain('data-vnode-key="node-a"');
-    expect(snapshot.instanceId).toBe('grafloria-tiny');
-  });
-});