@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/scene/tools/SelectTool.ts

@@ -1,300 +0,0 @@
-/**
- * SelectTool — the default tool.
- *
- * Pointer interactions:
- *   - Press on a layer  → select (shift to add) and start a move-drag
- *   - Press on a handle → start a resize-drag (corner identifies the
- *                          fixed-anchor side; the opposite side moves
- *                          with the pointer)
- *   - Press on the pane → clear selection (unless shift) and start a
- *                          marquee box; release commits the box
- *                          intersection as the new selection
- *   - Delete / Backspace → remove every selected layer
- *
- * Drag state lives at module scope (one Scene mounted at a time in
- * practice). The Scene polls `getActiveMoveOffset()` /
- * `getActiveResize()` each render to draw a live preview of the
- * in-flight gesture against the selected layers' real positions.
- */
-
-import { createElement, type JSX } from 'react';
-import type { SceneInteractionState, SceneTool, SceneToolContext } from './SceneTool';
-import type { SceneCommand } from '../commands/SceneCommand';
-import type { ResizeCorner } from '../SceneSelection';
-
-interface MoveDragState {
-  kind: 'move';
-  startV: { x: number; y: number };
-  startS: { x: number; y: number };
-  layerStarts: Map<string, { x: number; y: number }>;
-  currentV: { x: number; y: number };
-  movedPastThreshold: boolean;
-}
-
-interface MarqueeDragState {
-  kind: 'marquee';
-  startV: { x: number; y: number };
-  startS: { x: number; y: number };
-  currentV: { x: number; y: number };
-  movedPastThreshold: boolean;
-}
-
-interface ResizeDragState {
-  kind: 'resize';
-  layerId: string;
-  corner: ResizeCorner;
-  startV: { x: number; y: number };
-  startBounds: { x: number; y: number; width: number; height: number };
-  currentBounds: { x: number; y: number; width: number; height: number };
-}
-
-type DragState = MoveDragState | MarqueeDragState | ResizeDragState;
-
-const DRAG_THRESHOLD_PX = 3;
-const MIN_LAYER_SIZE = 8;
-
-function getDragState(interaction: SceneInteractionState): DragState | null {
-  return (interaction.selectDrag as DragState | undefined) ?? null;
-}
-
-function setDragState(interaction: SceneInteractionState, state: DragState | null): void {
-  interaction.selectDrag = state ?? undefined;
-}
-
-function pointerCoords(e: React.PointerEvent): { sx: number; sy: number } {
-  const rect = (e.currentTarget as Element).getBoundingClientRect();
-  return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
-}
-
-function getLayerOrigin(ctx: SceneToolContext, id: string): { x: number; y: number } | null {
-  const hit = ctx.hitItems.find((it) => it.id === id);
-  return hit ? { x: hit.bounds.x, y: hit.bounds.y } : null;
-}
-
-/**
- * Resize a bounds by anchoring the opposite corner/edge to its original
- * spot and moving the corner under the pointer to `(currentV)`. Min
- * width/height is `MIN_LAYER_SIZE` so layers can't shrink to invisible.
- */
-function applyResize(
-  start: { x: number; y: number; width: number; height: number },
-  corner: ResizeCorner,
-  currentV: { x: number; y: number },
-): { x: number; y: number; width: number; height: number } {
-  let x = start.x;
-  let y = start.y;
-  let right = start.x + start.width;
-  let bottom = start.y + start.height;
-
-  // Each corner identifier moves the listed edges. Anchor stays put.
-  if (corner.includes('w')) x = Math.min(currentV.x, right - MIN_LAYER_SIZE);
-  if (corner.includes('e')) right = Math.max(currentV.x, x + MIN_LAYER_SIZE);
-  if (corner.includes('n')) y = Math.min(currentV.y, bottom - MIN_LAYER_SIZE);
-  if (corner.includes('s')) bottom = Math.max(currentV.y, y + MIN_LAYER_SIZE);
-
-  return { x, y, width: right - x, height: bottom - y };
-}
-
-/** Begin a handle-initiated resize drag. Called by the Scene when a corner is pressed. */
-export function beginHandleDrag(
-  args: {
-    layerId: string;
-    corner: ResizeCorner;
-    startV: { x: number; y: number };
-    startBounds: { x: number; y: number; width: number; height: number };
-  },
-  interaction: SceneInteractionState,
-): void {
-  setDragState(interaction, {
-    kind: 'resize',
-    layerId: args.layerId,
-    corner: args.corner,
-    startV: args.startV,
-    startBounds: args.startBounds,
-    currentBounds: args.startBounds,
-  });
-}
-
-export const SelectTool: SceneTool = {
-  id: 'select',
-  label: 'Select',
-  cursor: 'default',
-  shortcut: 'v',
-
-  onPointerDown(e, ctx) {
-    if (e.button !== 0) return;
-    // Resize drags are initiated by the SceneSelection handle, which
-    // calls `beginHandleDrag` before this fires; the handle stops
-    // propagation, so we won't see this branch when starting a resize.
-    const { sx, sy } = pointerCoords(e);
-    const v = ctx.screenToViewport(sx, sy);
-    const hitId = ctx.hit(v);
-
-    if (hitId) {
-      const additive = e.shiftKey;
-      const nextSelection = additive
-        ? new Set([...ctx.selection, hitId])
-        : ctx.selection.has(hitId)
-          ? ctx.selection
-          : new Set([hitId]);
-      if (nextSelection !== ctx.selection) ctx.setSelection(nextSelection);
-
-      const layerStarts = new Map<string, { x: number; y: number }>();
-      for (const id of nextSelection) {
-        const origin = getLayerOrigin(ctx, id);
-        if (origin) layerStarts.set(id, origin);
-      }
-      setDragState(ctx.interaction, {
-        kind: 'move',
-        startV: v,
-        startS: { x: sx, y: sy },
-        layerStarts,
-        currentV: v,
-        movedPastThreshold: false,
-      });
-    } else {
-      if (!e.shiftKey) ctx.setSelection([]);
-      setDragState(ctx.interaction, {
-        kind: 'marquee',
-        startV: v,
-        startS: { x: sx, y: sy },
-        currentV: v,
-        movedPastThreshold: false,
-      });
-    }
-
-    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-  },
-
-  onPointerMove(e, ctx) {
-    const dragState = getDragState(ctx.interaction);
-    if (!dragState) return;
-    const { sx, sy } = pointerCoords(e);
-    const v = ctx.screenToViewport(sx, sy);
-
-    if (dragState.kind === 'resize') {
-      dragState.currentBounds = applyResize(dragState.startBounds, dragState.corner, v);
-      return;
-    }
-
-    dragState.currentV = v;
-    if (!dragState.movedPastThreshold) {
-      const dx = sx - dragState.startS.x;
-      const dy = sy - dragState.startS.y;
-      if (Math.hypot(dx, dy) >= DRAG_THRESHOLD_PX) dragState.movedPastThreshold = true;
-    }
-
-    if (dragState.kind === 'marquee') {
-      const box = boxFromCorners(dragState.startV, v);
-      const inside = ctx.hitItems.filter((it) => rectIntersects(it.bounds, box)).map((it) => it.id);
-      ctx.setSelection(inside);
-    }
-  },
-
-  onPointerUp(e, ctx) {
-    const dragState = getDragState(ctx.interaction);
-    if (!dragState) return;
-    if (
-      dragState.kind === 'move' &&
-      dragState.movedPastThreshold &&
-      dragState.layerStarts.size > 0
-    ) {
-      const dx = dragState.currentV.x - dragState.startV.x;
-      const dy = dragState.currentV.y - dragState.startV.y;
-      for (const [id, origin] of dragState.layerStarts) {
-        const cmd: SceneCommand = {
-          kind: 'moveLayer',
-          id,
-          x: origin.x + dx,
-          y: origin.y + dy,
-        };
-        ctx.dispatch(cmd);
-      }
-    } else if (dragState.kind === 'resize') {
-      const { x, y, width, height } = dragState.currentBounds;
-      // Keep the final origin + size in one command. In particular, the ASCII
-      // diagram adapter must render/reparse only once: committing a move and
-      // then a resize used to normalize the art between the two halves of one
-      // pointer gesture and could snap the node to a different grid position.
-      ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, x, y, width, height });
-    }
-    (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-    setDragState(ctx.interaction, null);
-  },
-
-  onDoubleClick(e, ctx) {
-    // Double-click a layer to edit its text inline (when the host wired a
-    // text-editing config). Resolve the hit, then hand off to the Scene.
-    const rect = (e.currentTarget as Element).getBoundingClientRect();
-    const v = ctx.screenToViewport(e.clientX - rect.left, e.clientY - rect.top);
-    const hitId = ctx.hit(v);
-    if (hitId) ctx.beginTextEdit?.(hitId);
-  },
-
-  onKeyDown(e, ctx) {
-    if (e.key === 'Delete' || e.key === 'Backspace') {
-      for (const id of ctx.selection) {
-        ctx.dispatch({ kind: 'removeLayer', id });
-      }
-      ctx.setSelection([]);
-      e.preventDefault();
-    } else if (e.key === 'Escape') {
-      ctx.setSelection([]);
-    }
-  },
-
-  renderOverlay(ctx): JSX.Element | null {
-    const dragState = getDragState(ctx.interaction);
-    if (!dragState || dragState.kind !== 'marquee' || !dragState.movedPastThreshold) return null;
-    const box = boxFromCorners(dragState.startV, dragState.currentV);
-    return createElement('rect', {
-      key: 'select-marquee',
-      x: box.x,
-      y: box.y,
-      width: box.width,
-      height: box.height,
-      className: 'squisq-scene-marquee',
-    });
-  },
-};
-
-/** Return the active move-drag offset (viewport units). Null if no drag, or if the drag is a marquee/resize. */
-export function getActiveMoveOffset(
-  interaction: SceneInteractionState,
-): { dx: number; dy: number } | null {
-  const dragState = getDragState(interaction);
-  if (!dragState || dragState.kind !== 'move' || !dragState.movedPastThreshold) return null;
-  return {
-    dx: dragState.currentV.x - dragState.startV.x,
-    dy: dragState.currentV.y - dragState.startV.y,
-  };
-}
-
-/** Return the live bounds for the layer currently being resized. */
-export function getActiveResize(interaction: SceneInteractionState): {
-  layerId: string;
-  bounds: { x: number; y: number; width: number; height: number };
-} | null {
-  const dragState = getDragState(interaction);
-  if (!dragState || dragState.kind !== 'resize') return null;
-  return { layerId: dragState.layerId, bounds: dragState.currentBounds };
-}
-
-function boxFromCorners(
-  a: { x: number; y: number },
-  b: { x: number; y: number },
-): { x: number; y: number; width: number; height: number } {
-  return {
-    x: Math.min(a.x, b.x),
-    y: Math.min(a.y, b.y),
-    width: Math.abs(b.x - a.x),
-    height: Math.abs(b.y - a.y),
-  };
-}
-
-function rectIntersects(
-  a: { x: number; y: number; width: number; height: number },
-  b: { x: number; y: number; width: number; height: number },
-): boolean {
-  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-}

package/src/scene/tools/ShapeTool.ts

@@ -1,143 +0,0 @@
-/**
- * ShapeTool — drag to draw a rectangle or circle as a new ShapeLayer.
- *
- * Exposed as a factory so a host can pre-bind the shape kind and
- * stroke/fill defaults. Returns a fresh SceneTool instance so hosts can bind
- * independent tool identities and defaults; gesture state belongs to Scene.
- */
-
-import { createElement, type JSX } from 'react';
-import type { ShapeLayer } from '@bendyline/squisq/schemas';
-import type { SceneTool } from './SceneTool';
-
-interface ShapeToolOptions {
-  /** Shape kind. Default 'rect'. */
-  shape?: 'rect' | 'circle' | 'line';
-  /** Stroke color. Default '#1e293b'. */
-  stroke?: string;
-  /** Fill color (or 'none' for an outline-only shape). Default 'none'. */
-  fill?: string;
-  /** Stroke width in viewport units. Default 2. */
-  strokeWidth?: number;
-  /** Corner radius for rects. Default 6. */
-  borderRadius?: number;
-  /** Override the tool id (default 'shape'). */
-  id?: string;
-  /** Override the tool label. */
-  label?: string;
-  /** Keyboard shortcut (single char, lowercase). */
-  shortcut?: string;
-}
-
-export function createShapeTool(options: ShapeToolOptions = {}): SceneTool {
-  const shape = options.shape ?? 'rect';
-  const stroke = options.stroke ?? '#1e293b';
-  const fill = options.fill ?? 'none';
-  const strokeWidth = options.strokeWidth ?? 2;
-  const borderRadius = options.borderRadius ?? 6;
-
-  interface DragState {
-    startV: { x: number; y: number };
-    currentV: { x: number; y: number };
-  }
-  let drag: DragState | null = null;
-
-  function pointer(e: React.PointerEvent): { sx: number; sy: number } {
-    const rect = (e.currentTarget as Element).getBoundingClientRect();
-    return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
-  }
-
-  return {
-    id: options.id ?? `shape-${shape}`,
-    label: options.label ?? `${shape[0].toUpperCase()}${shape.slice(1)}`,
-    cursor: 'crosshair',
-    shortcut: options.shortcut,
-
-    onPointerDown(e, ctx) {
-      if (e.button !== 0) return;
-      const { sx, sy } = pointer(e);
-      const v = ctx.screenToViewport(sx, sy);
-      drag = { startV: v, currentV: v };
-      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-    },
-
-    onPointerMove(e, ctx) {
-      if (!drag) return;
-      const { sx, sy } = pointer(e);
-      drag.currentV = ctx.screenToViewport(sx, sy);
-    },
-
-    onPointerUp(e, ctx) {
-      if (!drag) return;
-      const box = boxFromCorners(drag.startV, drag.currentV);
-      drag = null;
-      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-      // Ignore micro-drags that are probably an accidental click.
-      if (box.width < 4 || box.height < 4) return;
-      const layer: ShapeLayer = {
-        id: `shape-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e6).toString(36)}`,
-        type: 'shape',
-        position: { x: box.x, y: box.y, width: box.width, height: box.height },
-        content: {
-          shape,
-          fill,
-          stroke,
-          strokeWidth,
-          ...(shape === 'rect' ? { borderRadius } : {}),
-        },
-      };
-      ctx.dispatch({ kind: 'addLayer', layer });
-      // Switch back to Select so the user can immediately move the new shape.
-      ctx.setActiveTool?.('select');
-    },
-
-    renderOverlay(): JSX.Element | null {
-      if (!drag) return null;
-      const box = boxFromCorners(drag.startV, drag.currentV);
-      if (shape === 'circle') {
-        const r = Math.min(box.width, box.height) / 2;
-        return createElement('circle', {
-          key: 'shape-preview',
-          cx: box.x + box.width / 2,
-          cy: box.y + box.height / 2,
-          r,
-          className: 'squisq-scene-connect-preview',
-          fill: 'none',
-        });
-      }
-      if (shape === 'line') {
-        return createElement('line', {
-          key: 'shape-preview',
-          x1: drag.startV.x,
-          y1: drag.startV.y,
-          x2: drag.currentV.x,
-          y2: drag.currentV.y,
-          className: 'squisq-scene-connect-preview',
-        });
-      }
-      return createElement('rect', {
-        key: 'shape-preview',
-        x: box.x,
-        y: box.y,
-        width: box.width,
-        height: box.height,
-        rx: borderRadius,
-        ry: borderRadius,
-        className: 'squisq-scene-connect-preview',
-        fill: 'none',
-      });
-    },
-  };
-}
-
-function boxFromCorners(
-  a: { x: number; y: number },
-  b: { x: number; y: number },
-): { x: number; y: number; width: number; height: number } {
-  return {
-    x: Math.min(a.x, b.x),
-    y: Math.min(a.y, b.y),
-    width: Math.abs(b.x - a.x),
-    height: Math.abs(b.y - a.y),
-  };
-}

package/src/scene/tools/TextTool.ts

@@ -1,72 +0,0 @@
-/**
- * TextTool — click to place a new TextLayer; the host can hook the
- * `prompt` option to swap the default `window.prompt` for an inline
- * editing UI (Tiptap, contenteditable, etc.) when one is available.
- */
-
-import type { TextLayer } from '@bendyline/squisq/schemas';
-import type { SceneTool } from './SceneTool';
-
-interface TextToolOptions {
-  /** Default font size in viewport units. Default 24. */
-  fontSize?: number;
-  /** Default text color. Default '#1e293b'. */
-  color?: string;
-  /** Default text alignment. Default 'left'. */
-  textAlign?: 'left' | 'center' | 'right';
-  /**
-   * Prompt the user for the text content. Returns null to cancel.
-   * Default uses `window.prompt`.
-   */
-  prompt?: () => string | null;
-  /** Override id / label / shortcut. */
-  id?: string;
-  label?: string;
-  shortcut?: string;
-}
-
-export function createTextTool(options: TextToolOptions = {}): SceneTool {
-  const fontSize = options.fontSize ?? 24;
-  const color = options.color ?? '#1e293b';
-  const textAlign = options.textAlign ?? 'left';
-  const prompt = options.prompt ?? (() => window.prompt('Text:'));
-
-  return {
-    id: options.id ?? 'text',
-    label: options.label ?? 'Text',
-    cursor: 'text',
-    shortcut: options.shortcut ?? 't',
-
-    onPointerDown(e, ctx) {
-      if (e.button !== 0) return;
-      const rect = (e.currentTarget as Element).getBoundingClientRect();
-      const sx = e.clientX - rect.left;
-      const sy = e.clientY - rect.top;
-      const v = ctx.screenToViewport(sx, sy);
-      const text = prompt();
-      if (text == null || text.length === 0) {
-        ctx.setActiveTool?.('select');
-        return;
-      }
-      const layer: TextLayer = {
-        id: `text-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e6).toString(36)}`,
-        type: 'text',
-        position: {
-          x: v.x,
-          y: v.y,
-          // No explicit width — hit-test will treat the bounding box as
-          // measured at render time. Provide a generous default so the
-          // hit-test stub finds something.
-          width: Math.max(fontSize * text.length * 0.6, 80),
-          height: fontSize * 1.4,
-        },
-        content: {
-          text,
-          style: { fontSize, color, textAlign },
-        },
-      };
-      ctx.dispatch({ kind: 'addLayer', layer });
-      ctx.setActiveTool?.('select');
-    },
-  };
-}

package/src/scene/tools/TokenTool.ts

@@ -1,95 +0,0 @@
-/**
- * TokenTool — pointer-down on the canvas drops a pre-filled
- * placeholder layer at the click position. Used by the template
- * designer's Add bin so the user can place `{title}`,
- * `{content}`, `{children}`, or `{image:N}` in a single click instead
- * of typing the placeholder string into a generic TextTool.
- *
- * Factory pattern (`createTokenTool`) lets the palette build a
- * separate tool instance per token, each with its own id / label /
- * default layer shape.
- */
-
-import type { ImageLayer, TextLayer } from '@bendyline/squisq/schemas';
-import type { SceneTool } from './SceneTool';
-import { createPlaceTool } from './PlaceTool';
-
-export type TokenKind = 'text' | 'image';
-
-export interface TokenToolOptions {
-  /** Stable tool id (e.g. `'token-title'`). */
-  id: string;
-  /** Label shown in the toolbar / palette button. */
-  label: string;
-  /** Optional keyboard shortcut. */
-  shortcut?: string;
-  /**
-   * The placeholder string to substitute at render time, e.g.
-   * `'{title}'` or `'{image:0}'`. The designer drops this literal
-   * value into the new layer; the resolver replaces it later.
-   */
-  token: string;
-  /**
-   * Which layer kind to insert. `'text'` creates a TextLayer with
-   * `content.text = token`; `'image'` creates an ImageLayer with
-   * `content.src = token`.
-   */
-  kind: TokenKind;
-  /** Default font size for text tokens. Default 36. */
-  fontSize?: number;
-  /** Default text color for text tokens. Default '#0f172a'. */
-  color?: string;
-  /** Default width (pixels) for the placed layer. Default 480. */
-  width?: number;
-  /** Default height (pixels) for the placed layer. Default for text: 72; for image: 320. */
-  height?: number;
-}
-
-/**
- * Build a placeholder layer for `options` with its top-left corner at
- * the given viewport point. Shared by the click-to-place TokenTool and
- * the template designer's drag-and-drop drop handler so both produce
- * identical layers.
- */
-export function buildTokenLayer(
-  options: TokenToolOptions,
-  point: { x: number; y: number },
-): TextLayer | ImageLayer {
-  const width = options.width ?? 480;
-  const height = options.height ?? (options.kind === 'image' ? 320 : 72);
-  const fontSize = options.fontSize ?? 36;
-  const color = options.color ?? '#0f172a';
-  const id = nextLayerId(options.kind);
-  if (options.kind === 'text') {
-    return {
-      id,
-      type: 'text',
-      position: { x: point.x, y: point.y, width, height },
-      content: {
-        text: options.token,
-        style: { fontSize, color, textAlign: 'left' },
-      },
-    };
-  }
-  return {
-    id,
-    type: 'image',
-    position: { x: point.x, y: point.y, width, height },
-    content: { src: options.token, alt: 'Placeholder image', fit: 'cover' },
-  };
-}
-
-export function createTokenTool(options: TokenToolOptions): SceneTool {
-  return createPlaceTool({
-    id: options.id,
-    label: options.label,
-    shortcut: options.shortcut,
-    build: (point) => buildTokenLayer(options, point),
-  });
-}
-
-let counter = 0;
-function nextLayerId(kind: TokenKind): string {
-  counter += 1;
-  return `${kind}-token-${Date.now().toString(36)}-${counter}`;
-}

package/src/scene/tools/createDrawShapeTool.ts

@@ -1,82 +0,0 @@
-/**
- * createDrawShapeTool — drag to draw the currently-pending shape kind.
- *
- * Generalizes `ShapeTool` to any kind in the drawing vocabulary. The pending
- * kind is read on demand (set by the ShapePalette), and committing calls back
- * to the host with the kind + bounding box so the adapter can insert a
- * `{[kind …]}` heading. The live preview renders the actual shape geometry.
- */
-
-import { createElement, type JSX } from 'react';
-import { shapePath } from '@bendyline/squisq/doc';
-import type { SceneTool } from './SceneTool';
-
-export interface DrawShapeOptions {
-  /** The kind to draw, or null when none is pending (tool is inert). */
-  getKind: () => string | null;
-  /** Commit a drawn shape. */
-  onDraw: (kind: string, box: { x: number; y: number; width: number; height: number }) => void;
-}
-
-export function createDrawShapeTool(options: DrawShapeOptions): SceneTool {
-  let drag: { start: { x: number; y: number }; current: { x: number; y: number } } | null = null;
-
-  function pointer(e: React.PointerEvent): { sx: number; sy: number } {
-    const rect = (e.currentTarget as Element).getBoundingClientRect();
-    return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
-  }
-
-  function box(): { x: number; y: number; width: number; height: number } {
-    const a = drag!.start;
-    const b = drag!.current;
-    return {
-      x: Math.min(a.x, b.x),
-      y: Math.min(a.y, b.y),
-      width: Math.abs(b.x - a.x),
-      height: Math.abs(b.y - a.y),
-    };
-  }
-
-  return {
-    id: 'draw',
-    label: 'Shape',
-    cursor: 'crosshair',
-
-    onPointerDown(e, ctx) {
-      if (e.button !== 0 || !options.getKind()) return;
-      const { sx, sy } = pointer(e);
-      const v = ctx.screenToViewport(sx, sy);
-      drag = { start: v, current: v };
-      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-    },
-
-    onPointerMove(e, ctx) {
-      if (!drag) return;
-      const { sx, sy } = pointer(e);
-      drag.current = ctx.screenToViewport(sx, sy);
-    },
-
-    onPointerUp(e, ctx) {
-      if (!drag) return;
-      const b = box();
-      const kind = options.getKind();
-      drag = null;
-      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-      if (kind && b.width >= 4 && b.height >= 4) options.onDraw(kind, b);
-      ctx.setActiveTool?.('select');
-    },
-
-    renderOverlay(): JSX.Element | null {
-      if (!drag) return null;
-      const b = box();
-      const kind = options.getKind();
-      const d = kind ? shapePath(kind, b.x, b.y, b.width, b.height) : null;
-      return createElement('path', {
-        key: 'draw-preview',
-        d: d ?? `M ${b.x} ${b.y} h ${b.width} v ${b.height} h ${-b.width} Z`,
-        className: 'squisq-scene-connect-preview',
-        fill: 'none',
-      });
-    },
-  };
-}