@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/scene/tools/ShapeTool.ts

@@ -0,0 +1,144 @@
+/**
+ * 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 — the
+ * factory pattern lets multiple Scene instances coexist without
+ * sharing module-level drag state.
+ */
+
+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

@@ -0,0 +1,72 @@
+/**
+ * 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

@@ -0,0 +1,95 @@
+/**
+ * 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

@@ -0,0 +1,82 @@
+/**
+ * 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',
+      });
+    },
+  };
+}

package/src/styles/code-context.css

@@ -0,0 +1,155 @@
+/**
+ * Code-context sections — host-supplied markdown blurbs rendered inside
+ * Monaco view zones above anchor lines (see src/codeContext/).
+ *
+ * The zone dom node lives in Monaco's `.view-zones` layer, which sits below
+ * `.view-lines` in hit-test order. Raising the zone's z-index inside that
+ * shared stacking context is what makes section content clickable; Monaco's
+ * own `suppressMouseDown` keeps the cursor from jumping.
+ */
+
+.squisq-ccx-zone {
+  z-index: 10;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.squisq-ccx-section {
+  --ccx-fg: #57606a;
+  --ccx-fg-strong: #24292f;
+  --ccx-bg: rgba(175, 184, 193, 0.12);
+  --ccx-bg-hover: rgba(175, 184, 193, 0.22);
+  --ccx-border: rgba(140, 149, 159, 0.35);
+  --ccx-accent: #0969da;
+  font-family: var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ccx-fg);
+  border-left: 2px solid var(--ccx-border);
+  background: var(--ccx-bg);
+  margin: 2px 8px 2px 4px;
+  border-radius: 4px;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-ccx-section {
+  --ccx-fg: #9198a1;
+  --ccx-fg-strong: #e6edf3;
+  --ccx-bg: rgba(110, 118, 129, 0.14);
+  --ccx-bg-hover: rgba(110, 118, 129, 0.26);
+  --ccx-border: rgba(110, 118, 129, 0.45);
+  --ccx-accent: #4493f8;
+}
+
+/* ── Collapsed strip ─────────────────────────────────────────────── */
+
+.squisq-ccx-strip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 3px 10px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.squisq-ccx-strip:hover {
+  background: var(--ccx-bg-hover);
+}
+
+.squisq-ccx-chevron {
+  flex: 0 0 auto;
+  font-size: 9px;
+  opacity: 0.7;
+}
+
+.squisq-ccx-strip-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Flatten the strip's markdown to a single inline line. */
+.squisq-ccx-strip-text .squisq-md,
+.squisq-ccx-strip-text .squisq-md-p {
+  display: inline;
+  margin: 0;
+}
+
+.squisq-ccx-strip-text .squisq-md-strong {
+  color: var(--ccx-fg-strong);
+}
+
+/* ── Expanded body ───────────────────────────────────────────────── */
+
+.squisq-ccx-body {
+  padding: 2px 12px 8px 24px;
+  font-size: 12px;
+  user-select: text;
+}
+
+.squisq-ccx-body--loading {
+  opacity: 0.6;
+  font-style: italic;
+}
+
+.squisq-ccx-body .squisq-md-p {
+  margin: 4px 0;
+}
+
+.squisq-ccx-body .squisq-md-strong {
+  color: var(--ccx-fg-strong);
+  font-size: 11px;
+  text-transform: none;
+}
+
+.squisq-ccx-body .squisq-md-list {
+  margin: 2px 0 6px;
+  padding-left: 18px;
+}
+
+.squisq-ccx-body .squisq-md-li {
+  margin: 1px 0;
+}
+
+.squisq-ccx-body .squisq-md-link {
+  color: var(--ccx-accent);
+  text-decoration: none;
+}
+
+.squisq-ccx-body .squisq-md-link:hover {
+  text-decoration: underline;
+}
+
+.squisq-ccx-body .squisq-md-inline-code,
+.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  padding: 0 3px;
+  border-radius: 3px;
+  background: rgba(140, 149, 159, 0.18);
+}
+
+.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
+  color: var(--ccx-accent);
+}
+
+.squisq-ccx-body .squisq-md-code-block {
+  margin: 4px 0;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgba(140, 149, 159, 0.14);
+  overflow-x: auto;
+}
+
+.squisq-ccx-body .squisq-md-code-block code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  white-space: pre;
+}