@pixerate/editor 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(src_exports, {
   DependencyGraph: () => DependencyGraph,
   DirtyTracker: () => DirtyTracker,
   EDITOR_MCP_TOOLS: () => EDITOR_MCP_TOOLS,
+  EXPORT_EXCLUDED_SELECTORS: () => EXPORT_EXCLUDED_SELECTORS,
   EditorController: () => EditorController,
   FontSize: () => FontSize,
   FormulaEvaluator: () => FormulaEvaluator,
@@ -51,7 +52,9 @@ __export(src_exports, {
   MCP_TOOL_EDIT_CANVAS: () => MCP_TOOL_EDIT_CANVAS,
   MCP_TOOL_EDIT_PROMPT: () => MCP_TOOL_EDIT_PROMPT,
   MCP_TOOL_GET_EDITOR_STATE: () => MCP_TOOL_GET_EDITOR_STATE,
+  MCP_TOOL_VIEW_EDITOR: () => MCP_TOOL_VIEW_EDITOR,
   MENTION_REGEX: () => MENTION_REGEX,
+  ManualClock: () => ManualClock,
   Markdown: () => Markdown2,
   Mention: () => Mention,
   SlashCommands: () => SlashCommands,
@@ -61,13 +64,16 @@ __export(src_exports, {
   TEMPLATE_REGEX: () => TEMPLATE_REGEX,
   TemplateSuggestions: () => TemplateSuggestions,
   VARIABLE_REGEX: () => VARIABLE_REGEX,
+  blendLayout: () => blendLayout,
   boundsOf: () => boundsOf,
   calculateDagreReflowDisplacement: () => calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement: () => calculateDirectionalDisplacement,
+  canvasHeight: () => canvasHeight,
   centerNodes: () => centerNodes,
   centre: () => centre,
   colNameToIndex: () => colNameToIndex,
   computeNodesBoundingBox: () => computeNodesBoundingBox,
+  connectedOnly: () => connectedOnly,
   createBezierTrajectory: () => createBezierTrajectory,
   createDirtyTracker: () => createDirtyTracker,
   createEditor: () => createEditor,
@@ -79,6 +85,7 @@ __export(src_exports, {
   defaultIsEqual: () => defaultIsEqual,
   ensureLayout: () => ensureLayout,
   escapeHtml: () => escapeHtml,
+  estimateCanvasHeight: () => estimateCanvasHeight,
   estimateNodeSize: () => estimateNodeSize,
   extractCellDependencies: () => extractCellDependencies,
   extractInstructionNames: () => extractInstructionNames,
@@ -102,12 +109,14 @@ __export(src_exports, {
   isEventFromTextInput: () => isEventFromTextInput,
   isValidCanvasNode: () => isValidCanvasNode,
   isValidUrl: () => isValidUrl,
+  layoutBounds: () => layoutBounds,
   linearPositionTrajectory: () => linearPositionTrajectory,
   linearTrajectory: () => linearTrajectory,
   mapRawOffsetToResolved: () => mapRawOffsetToResolved,
   mapResolvedOffsetToRaw: () => mapResolvedOffsetToRaw,
   markdownToTipTapHtml: () => markdownToTipTapHtml,
   overlaps: () => overlaps,
+  pageHidden: () => pageHidden,
   parseCanvasClipboardData: () => parseCanvasClipboardData,
   parseCellReference: () => parseCellReference,
   parseFormula: () => parseFormula,
@@ -118,6 +127,7 @@ __export(src_exports, {
   planAgentCommand: () => planAgentCommand,
   preprocessMarkdownFileLinks: () => preprocessMarkdownFileLinks,
   preprocessMarkdownMentions: () => preprocessMarkdownMentions,
+  realClock: () => realClock,
   remapPastedNodes: () => remapPastedNodes,
   removeImageNode: () => removeImageNode,
   repositionNodesTo: () => repositionNodesTo,
@@ -4585,6 +4595,79 @@ function placeBeside(rects, size, side, nearNodeId, options = {}) {
   };
 }
 
+// src/canvas/clock.ts
+var pageHidden = () => typeof document !== "undefined" && document.hidden;
+var realClock = {
+  live: true,
+  now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+  frame: () => new Promise((resolve) => {
+    if (typeof requestAnimationFrame === "function" && !pageHidden()) {
+      requestAnimationFrame(() => resolve());
+    } else {
+      setTimeout(resolve, 16);
+    }
+  }),
+  sleep: (ms) => new Promise((resolve) => setTimeout(resolve, Math.max(0, ms)))
+};
+var settle = () => new Promise((resolve) => setTimeout(resolve, 0));
+var ManualClock = class {
+  live = false;
+  time;
+  frames = [];
+  sleepers = [];
+  seq = 0;
+  constructor(start = 0) {
+    this.time = start;
+  }
+  now() {
+    return this.time;
+  }
+  frame() {
+    return new Promise((resolve) => this.frames.push(resolve));
+  }
+  sleep(ms) {
+    return new Promise(
+      (resolve) => this.sleepers.push({
+        at: this.time + Math.max(0, ms),
+        seq: this.seq++,
+        resolve
+      })
+    );
+  }
+  /** Whether any frames or sleep timers are currently pending. */
+  get pending() {
+    return this.frames.length > 0 || this.sleepers.length > 0;
+  }
+  /** Advances time by `ms`, resolving due sleep timers in order, followed by queued frames. */
+  async advance(ms) {
+    const end = this.time + Math.max(0, ms);
+    await settle();
+    while (true) {
+      let next;
+      for (const s of this.sleepers) {
+        if (s.at <= end && (!next || s.at < next.at || s.at === next.at && s.seq < next.seq)) {
+          next = s;
+        }
+      }
+      if (!next) break;
+      this.sleepers.splice(this.sleepers.indexOf(next), 1);
+      this.time = Math.max(this.time, next.at);
+      next.resolve();
+      await settle();
+    }
+    this.time = end;
+    const dueFrames = this.frames.splice(0, this.frames.length);
+    for (const resolveFrame of dueFrames) {
+      resolveFrame();
+    }
+    await settle();
+  }
+  /** Convenience method to advance by 1 frame at a given fps (default: 60fps = 16.67ms). */
+  async tick(fps = 60) {
+    await this.advance(Math.round(1e3 / fps));
+  }
+};
+
 // src/canvas/trajectory.ts
 var defaultEasing = (t) => --t * t * t + 1;
 var linearTrajectory = (origin, target, progress) => {
@@ -4652,9 +4735,15 @@ function runMultiNodeTransition(transitions, options = {}) {
     return () => {
     };
   }
-  const { defaultDuration = 400, defaultEasing: easingFunc = defaultEasing, onUpdate, onComplete } = options;
+  const {
+    defaultDuration = 400,
+    defaultEasing: easingFunc = defaultEasing,
+    clock = realClock,
+    onUpdate,
+    onComplete
+  } = options;
   let isCancelled = false;
-  const startTime = Date.now();
+  const startTime = clock.now();
   const items = transitions.map((tr, i) => ({
     ...tr,
     index: tr.index ?? i,
@@ -4666,7 +4755,7 @@ function runMultiNodeTransition(transitions, options = {}) {
   }));
   function frame() {
     if (isCancelled) return;
-    const now = Date.now();
+    const now = clock.now();
     let allCompleted = true;
     for (let i = 0; i < items.length; i++) {
       const item = items[i];
@@ -4698,9 +4787,7 @@ function runMultiNodeTransition(transitions, options = {}) {
     }
     onUpdate?.();
     if (!allCompleted) {
-      if (typeof requestAnimationFrame !== "undefined") {
-        requestAnimationFrame(frame);
-      }
+      clock.frame().then(frame);
     } else {
       onComplete?.();
     }
@@ -4978,10 +5065,76 @@ function repositionNodesTo(nodes, targetOrigin) {
   }));
 }
 
+// src/canvas/view.ts
+function clampHeight(contentHeight, options = {}) {
+  const { min = 320, max = 560, padding = 48 } = options;
+  return Math.round(Math.min(max, Math.max(min, contentHeight + padding)));
+}
+function layoutBounds(nodes) {
+  if (nodes.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    const x = node.position.x;
+    const y = node.position.y;
+    const width = node.width ?? 180;
+    const height = node.height ?? 80;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x + width);
+    maxY = Math.max(maxY, y + height);
+  }
+  if (minX === Infinity) return null;
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function canvasHeight(nodes, options) {
+  return clampHeight(layoutBounds(nodes)?.height ?? 0, options);
+}
+var DEFAULT_RANK_HEIGHT = 80 + 72;
+var NODES_PER_RANK = 2;
+function estimateCanvasHeight(nodes, edges, options) {
+  const ranks = Math.max(1, Math.ceil(nodes.length / NODES_PER_RANK));
+  return clampHeight(ranks * DEFAULT_RANK_HEIGHT, options);
+}
+function mix(a, b, t) {
+  return a + (b - a) * t;
+}
+function blendLayout(from, to, t) {
+  if (t >= 1) return to;
+  const fromMap = new Map(from.map((n) => [n.id, n]));
+  return to.map((target) => {
+    const origin = fromMap.get(target.id);
+    if (!origin) return target;
+    return {
+      ...target,
+      position: {
+        x: mix(origin.position.x, target.position.x, t),
+        y: mix(origin.position.y, target.position.y, t)
+      },
+      width: origin.width !== void 0 && target.width !== void 0 ? mix(origin.width, target.width, t) : target.width,
+      height: origin.height !== void 0 && target.height !== void 0 ? mix(origin.height, target.height, t) : target.height
+    };
+  });
+}
+function connectedOnly(nodes, edges) {
+  if (edges.length === 0) return nodes;
+  const linkedNodeIds = /* @__PURE__ */ new Set();
+  for (const edge of edges) {
+    linkedNodeIds.add(edge.source);
+    linkedNodeIds.add(edge.target);
+  }
+  const filtered = nodes.filter((node) => linkedNodeIds.has(node.id));
+  return filtered.length > 0 ? filtered : nodes;
+}
+
 // src/canvas/streaming.ts
 var StreamingLayoutManager = class {
   throttleMs;
   glideDurationMs;
+  connectedOnly;
+  clock;
   layoutOptions;
   onLayoutUpdated;
   pendingTimer = null;
@@ -4990,6 +5143,8 @@ var StreamingLayoutManager = class {
   constructor(options = {}) {
     this.throttleMs = options.throttleMs ?? 200;
     this.glideDurationMs = options.glideDurationMs ?? 300;
+    this.connectedOnly = options.connectedOnly ?? false;
+    this.clock = options.clock ?? realClock;
     this.layoutOptions = options.layoutOptions ?? { direction: "LR" };
     this.onLayoutUpdated = options.onLayoutUpdated;
   }
@@ -5017,7 +5172,8 @@ var StreamingLayoutManager = class {
     this.recalculateAndGlide(nodes, edges, currentPositions);
   }
   recalculateAndGlide(nodes, edges, currentPositions) {
-    if (nodes.length === 0) return;
+    const targetNodes = this.connectedOnly ? connectedOnly(nodes, edges) : nodes;
+    if (targetNodes.length === 0) return;
     if (this.activeTransitionCancel) {
       this.activeTransitionCancel();
       this.activeTransitionCancel = null;
@@ -5026,7 +5182,7 @@ var StreamingLayoutManager = class {
     for (const [id, pos] of currentPositions.entries()) {
       stored[id] = pos;
     }
-    const layouted = ensureLayout(nodes, edges, {
+    const layouted = ensureLayout(targetNodes, edges, {
       ...this.layoutOptions,
       storedPositions: stored
     });
@@ -5050,6 +5206,7 @@ var StreamingLayoutManager = class {
     this.targetPositions = nextPositions;
     if (transitions.length > 0) {
       this.activeTransitionCancel = runMultiNodeTransition(transitions, {
+        clock: this.clock,
         onUpdate: () => {
           const liveMap = new Map(currentPositions);
           for (const trans of transitions) {
@@ -5257,6 +5414,24 @@ function planAgentCommand(command, snapshot, options = {}) {
         }
       ];
     }
+    case "choreography:say": {
+      return [
+        {
+          type: "step:say",
+          text: command.text,
+          atNodeId: command.atNodeId,
+          position: command.position
+        }
+      ];
+    }
+    case "choreography:wait": {
+      return [
+        {
+          type: "step:wait",
+          ms: command.ms
+        }
+      ];
+    }
     default: {
       return [];
     }
@@ -5381,10 +5556,39 @@ var MCP_TOOL_EDIT_PROMPT = {
     required: ["operation"]
   }
 };
+var MCP_TOOL_VIEW_EDITOR = {
+  name: "view_editor",
+  description: "Captures a visual image snapshot (JPEG or PNG) of the editor canvas or viewport for multimodal evaluation. Active agent cursor indicators are automatically excluded from the snapshot.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      scope: {
+        type: "string",
+        enum: ["viewport", "canvas"],
+        description: "Whether to capture only the visible viewport or the full canvas bounding box (default: viewport)."
+      },
+      format: {
+        type: "string",
+        enum: ["jpeg", "png"],
+        description: "Image format of the base64 snapshot (default: jpeg)."
+      },
+      maxEdge: {
+        type: "integer",
+        description: "Maximum width or height dimension in pixels (default: 1024)."
+      }
+    }
+  }
+};
+var EXPORT_EXCLUDED_SELECTORS = [
+  ".pixerate-presence",
+  ".agent-presence",
+  ".ursula-presence"
+];
 var EDITOR_MCP_TOOLS = [
   MCP_TOOL_GET_EDITOR_STATE,
   MCP_TOOL_EDIT_CANVAS,
-  MCP_TOOL_EDIT_PROMPT
+  MCP_TOOL_EDIT_PROMPT,
+  MCP_TOOL_VIEW_EDITOR
 ];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -5396,6 +5600,7 @@ var EDITOR_MCP_TOOLS = [
   DependencyGraph,
   DirtyTracker,
   EDITOR_MCP_TOOLS,
+  EXPORT_EXCLUDED_SELECTORS,
   EditorController,
   FontSize,
   FormulaEvaluator,
@@ -5409,7 +5614,9 @@ var EDITOR_MCP_TOOLS = [
   MCP_TOOL_EDIT_CANVAS,
   MCP_TOOL_EDIT_PROMPT,
   MCP_TOOL_GET_EDITOR_STATE,
+  MCP_TOOL_VIEW_EDITOR,
   MENTION_REGEX,
+  ManualClock,
   Markdown,
   Mention,
   SlashCommands,
@@ -5419,13 +5626,16 @@ var EDITOR_MCP_TOOLS = [
   TEMPLATE_REGEX,
   TemplateSuggestions,
   VARIABLE_REGEX,
+  blendLayout,
   boundsOf,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement,
+  canvasHeight,
   centerNodes,
   centre,
   colNameToIndex,
   computeNodesBoundingBox,
+  connectedOnly,
   createBezierTrajectory,
   createDirtyTracker,
   createEditor,
@@ -5437,6 +5647,7 @@ var EDITOR_MCP_TOOLS = [
   defaultIsEqual,
   ensureLayout,
   escapeHtml,
+  estimateCanvasHeight,
   estimateNodeSize,
   extractCellDependencies,
   extractInstructionNames,
@@ -5460,12 +5671,14 @@ var EDITOR_MCP_TOOLS = [
   isEventFromTextInput,
   isValidCanvasNode,
   isValidUrl,
+  layoutBounds,
   linearPositionTrajectory,
   linearTrajectory,
   mapRawOffsetToResolved,
   mapResolvedOffsetToRaw,
   markdownToTipTapHtml,
   overlaps,
+  pageHidden,
   parseCanvasClipboardData,
   parseCellReference,
   parseFormula,
@@ -5476,6 +5689,7 @@ var EDITOR_MCP_TOOLS = [
   planAgentCommand,
   preprocessMarkdownFileLinks,
   preprocessMarkdownMentions,
+  realClock,
   remapPastedNodes,
   removeImageNode,
   repositionNodesTo,