@pixerate/editor 0.140.4 → 0.142.1

package/skills/pixerate-vector/SKILL.md

@@ -459,6 +459,11 @@ the animation editor.
 
 The most common ones are below. Read [references/pitfalls.md](references/pitfalls.md) before working with connectors, frames, masks, filters, text, symbols, constraints, blends, gradient meshes or live corners.
 
+- With agent playback on, `vector.addShape` is dragged out from (x, y) to (x + width, y + height),
+  `vector.addPath` is traced through its anchors, and text is clicked in and typed out. So give
+  shapes their real place and size in the first call rather than adding them at 0, 0 and moving
+  them after: the user watches the cursor go where the shape lands. Commands with `ids` visit those
+  nodes; nothing else about the calls changes.
 - `d` and anchor positions are in the node's own space; `bounds` are in document space. For
   rotated nodes (`rotation` not 0), `vector.moveAnchor` and `vector.bendSegment` take document
   coordinates, so compute them from the drawn position, not from `d`.

package/skills/pixerate-video-editor/SKILL.md

@@ -256,6 +256,7 @@ and every write tool is refused with the reason.
 
 ## Pitfalls
 
+- With agent playback on, the cursor drags a moved or trimmed clip to its new time, clicks a track where a clip goes in, and clicks the ruler where a split, seek or marker lands. Give real `start` / `at` times in ms; results are unchanged.
 - **Effects need rendered frames to export.** ffmpeg cannot draw provider effects, so
   `export_video_ffmpeg` refuses a project with enabled effects unless the host renders the
   picture frame by frame (`renderVideoFrameExact`) and passes `frames`. Tell the user, or turn

package/dist/chunk-BTZS3KZY.js

@@ -1,221 +0,0 @@
-// src/canvas/layout.ts
-import dagre from "@dagrejs/dagre";
-var DEFAULT_NODE_WIDTH = 200;
-var DEFAULT_NODE_HEIGHT = 60;
-var DEFAULT_PLACEMENT_GAP = 48;
-function getCenteredNodePosition(width = 0, height = 0, screenToFlowPosition, screenDimensions) {
-  const rect = screenDimensions ?? (typeof document !== "undefined" ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } : { width: 1920, height: 1080 });
-  const flowPos = screenToFlowPosition({ x: rect.width / 2, y: rect.height / 2 });
-  return {
-    x: flowPos.x - width / 2,
-    y: flowPos.y - height / 2
-  };
-}
-function centerNodes(nodes, screenToFlowPosition, getNodesBounds, screenDimensions) {
-  if (nodes.length === 0) {
-    return [];
-  }
-  const bounds = getNodesBounds(nodes);
-  const boundingBoxOrigin = { x: bounds.x, y: bounds.y };
-  const centeredPosition = getCenteredNodePosition(
-    bounds.width,
-    bounds.height,
-    screenToFlowPosition,
-    screenDimensions
-  );
-  const deltaX = centeredPosition.x - boundingBoxOrigin.x;
-  const deltaY = centeredPosition.y - boundingBoxOrigin.y;
-  return nodes.map((node) => ({
-    ...node,
-    position: {
-      x: node.position.x + deltaX,
-      y: node.position.y + deltaY
-    }
-  }));
-}
-function getLayoutedNodes(nodes, edges, getNodesBounds, options = {}) {
-  if (nodes.length === 0) return [];
-  const {
-    direction = "LR",
-    ranksep = 100,
-    nodesep = 25,
-    defaultNodeWidth = DEFAULT_NODE_WIDTH,
-    defaultNodeHeight = DEFAULT_NODE_HEIGHT
-  } = options;
-  const dagreGraph = new dagre.graphlib.Graph();
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
-  dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
-  const nodeIds = new Set(nodes.map((node) => node.id));
-  nodes.forEach((node) => {
-    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
-    const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
-    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-  });
-  edges.forEach((edge) => {
-    if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
-      dagreGraph.setEdge(edge.source, edge.target);
-    }
-  });
-  dagre.layout(dagreGraph);
-  return nodes.map((node) => {
-    const nodeWithPosition = dagreGraph.node(node.id);
-    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
-    const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
-    return {
-      ...node,
-      position: {
-        x: nodeWithPosition.x - nodeWidth / 2,
-        y: nodeWithPosition.y - nodeHeight / 2
-      }
-    };
-  });
-}
-function estimateNodeSize(node, defaultWidth = DEFAULT_NODE_WIDTH, defaultHeight = DEFAULT_NODE_HEIGHT) {
-  const label = String(node.data?.label ?? node.data?.title ?? node.id ?? "");
-  const lines = label.split(/\n|<br\s*\/?>/);
-  const longest = Math.max(...lines.map((l) => l.replace(/<[^>]+>/g, "").length), 1);
-  const width = Math.min(480, Math.max(defaultWidth, longest * 8 + 48));
-  const height = Math.max(defaultHeight, lines.length * 20 + 24);
-  return { width, height };
-}
-function boundsOf(rects) {
-  if (!rects.length) return null;
-  const minX = Math.min(...rects.map((r) => r.x));
-  const minY = Math.min(...rects.map((r) => r.y));
-  const maxX = Math.max(...rects.map((r) => r.x + r.width));
-  const maxY = Math.max(...rects.map((r) => r.y + r.height));
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-function centre(r) {
-  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
-}
-function overlaps(a, b, pad = 16) {
-  return a.x < b.x + b.width + pad && a.x + a.width + pad > b.x && a.y < b.y + b.height + pad && a.y + a.height + pad > b.y;
-}
-function flowSide(direction = "LR") {
-  switch (direction) {
-    case "LR":
-      return "right";
-    case "RL":
-      return "left";
-    case "BT":
-      return "above";
-    case "TB":
-    default:
-      return "below";
-  }
-}
-function ensureLayout(nodes, edges, options = {}) {
-  if (nodes.length === 0) return [];
-  const stored = options.storedPositions ?? {};
-  const missing = nodes.filter((n) => !stored[n.id]);
-  if (missing.length === 0) {
-    return nodes.map((n) => ({
-      ...n,
-      position: { ...stored[n.id] }
-    }));
-  }
-  const autoLayouted = getLayoutedNodes(nodes, edges, void 0, options);
-  const autoMap = new Map(
-    autoLayouted.map((n) => [n.id, n.position])
-  );
-  const both = nodes.filter((n) => stored[n.id] && autoMap.has(n.id));
-  if (both.length === 0) {
-    return autoLayouted;
-  }
-  let dx = 0;
-  let dy = 0;
-  for (const n of both) {
-    const s = stored[n.id];
-    const a = autoMap.get(n.id);
-    dx += s.x - a.x;
-    dy += s.y - a.y;
-  }
-  dx /= both.length;
-  dy /= both.length;
-  return nodes.map((node) => {
-    if (stored[node.id]) {
-      return {
-        ...node,
-        position: { ...stored[node.id] }
-      };
-    }
-    const autoPos = autoMap.get(node.id) ?? { x: 0, y: 0 };
-    return {
-      ...node,
-      position: {
-        x: Math.round(autoPos.x + dx),
-        y: Math.round(autoPos.y + dy)
-      }
-    };
-  });
-}
-function placeBeside(rects, size, side, nearNodeId, options = {}) {
-  const {
-    gap = DEFAULT_PLACEMENT_GAP,
-    ignore = [],
-    maxAttempts = 32
-  } = options;
-  const skip = new Set([nearNodeId, ...ignore].filter(Boolean));
-  const obstacles = Object.entries(rects).filter(([id]) => !skip.has(id)).map(([, r]) => r);
-  const anchor = nearNodeId && rects[nearNodeId] || boundsOf(Object.values(rects)) || { x: 0, y: 0, width: 0, height: 0 };
-  const anchorCenter = centre(anchor);
-  let baseX;
-  let baseY;
-  switch (side) {
-    case "right":
-      baseX = anchor.x + anchor.width + gap;
-      baseY = anchorCenter.y - size.height / 2;
-      break;
-    case "left":
-      baseX = anchor.x - gap - size.width;
-      baseY = anchorCenter.y - size.height / 2;
-      break;
-    case "above":
-      baseX = anchorCenter.x - size.width / 2;
-      baseY = anchor.y - gap - size.height;
-      break;
-    case "below":
-    default:
-      baseX = anchorCenter.x - size.width / 2;
-      baseY = anchor.y + anchor.height + gap;
-      break;
-  }
-  const isHorizontal = side === "right" || side === "left";
-  const step = (isHorizontal ? size.height : size.width) + 20;
-  for (let i = 0; i < maxAttempts; i++) {
-    const offset = i === 0 ? 0 : Math.ceil(i / 2) * step * (i % 2 === 1 ? 1 : -1);
-    const candidateBox = {
-      x: isHorizontal ? baseX : baseX + offset,
-      y: isHorizontal ? baseY + offset : baseY,
-      width: size.width,
-      height: size.height
-    };
-    if (!obstacles.some((obstacle) => overlaps(candidateBox, obstacle, 8))) {
-      return {
-        x: Math.round(candidateBox.x),
-        y: Math.round(candidateBox.y)
-      };
-    }
-  }
-  return {
-    x: Math.round(baseX),
-    y: Math.round(baseY)
-  };
-}
-
-export {
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_NODE_HEIGHT,
-  DEFAULT_PLACEMENT_GAP,
-  getCenteredNodePosition,
-  centerNodes,
-  getLayoutedNodes,
-  estimateNodeSize,
-  boundsOf,
-  centre,
-  overlaps,
-  flowSide,
-  ensureLayout,
-  placeBeside
-};

package/dist/chunk-LACYURUW.cjs

@@ -1 +0,0 @@
-"use strict";

package/dist/chunk-MRD3NXKR.cjs

@@ -1,221 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/canvas/layout.ts
-var _dagre = require('@dagrejs/dagre'); var _dagre2 = _interopRequireDefault(_dagre);
-var DEFAULT_NODE_WIDTH = 200;
-var DEFAULT_NODE_HEIGHT = 60;
-var DEFAULT_PLACEMENT_GAP = 48;
-function getCenteredNodePosition(width = 0, height = 0, screenToFlowPosition, screenDimensions) {
-  const rect = _nullishCoalesce(screenDimensions, () => ( (typeof document !== "undefined" ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } : { width: 1920, height: 1080 })));
-  const flowPos = screenToFlowPosition({ x: rect.width / 2, y: rect.height / 2 });
-  return {
-    x: flowPos.x - width / 2,
-    y: flowPos.y - height / 2
-  };
-}
-function centerNodes(nodes, screenToFlowPosition, getNodesBounds, screenDimensions) {
-  if (nodes.length === 0) {
-    return [];
-  }
-  const bounds = getNodesBounds(nodes);
-  const boundingBoxOrigin = { x: bounds.x, y: bounds.y };
-  const centeredPosition = getCenteredNodePosition(
-    bounds.width,
-    bounds.height,
-    screenToFlowPosition,
-    screenDimensions
-  );
-  const deltaX = centeredPosition.x - boundingBoxOrigin.x;
-  const deltaY = centeredPosition.y - boundingBoxOrigin.y;
-  return nodes.map((node) => ({
-    ...node,
-    position: {
-      x: node.position.x + deltaX,
-      y: node.position.y + deltaY
-    }
-  }));
-}
-function getLayoutedNodes(nodes, edges, getNodesBounds, options = {}) {
-  if (nodes.length === 0) return [];
-  const {
-    direction = "LR",
-    ranksep = 100,
-    nodesep = 25,
-    defaultNodeWidth = DEFAULT_NODE_WIDTH,
-    defaultNodeHeight = DEFAULT_NODE_HEIGHT
-  } = options;
-  const dagreGraph = new _dagre2.default.graphlib.Graph();
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
-  dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
-  const nodeIds = new Set(nodes.map((node) => node.id));
-  nodes.forEach((node) => {
-    const nodeWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _ => _.measured, 'optionalAccess', _2 => _2.width]), () => ( node.width)), () => ( defaultNodeWidth));
-    const nodeHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _3 => _3.measured, 'optionalAccess', _4 => _4.height]), () => ( node.height)), () => ( defaultNodeHeight));
-    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-  });
-  edges.forEach((edge) => {
-    if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
-      dagreGraph.setEdge(edge.source, edge.target);
-    }
-  });
-  _dagre2.default.layout(dagreGraph);
-  return nodes.map((node) => {
-    const nodeWithPosition = dagreGraph.node(node.id);
-    const nodeWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _5 => _5.measured, 'optionalAccess', _6 => _6.width]), () => ( node.width)), () => ( defaultNodeWidth));
-    const nodeHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _7 => _7.measured, 'optionalAccess', _8 => _8.height]), () => ( node.height)), () => ( defaultNodeHeight));
-    return {
-      ...node,
-      position: {
-        x: nodeWithPosition.x - nodeWidth / 2,
-        y: nodeWithPosition.y - nodeHeight / 2
-      }
-    };
-  });
-}
-function estimateNodeSize(node, defaultWidth = DEFAULT_NODE_WIDTH, defaultHeight = DEFAULT_NODE_HEIGHT) {
-  const label = String(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _9 => _9.data, 'optionalAccess', _10 => _10.label]), () => ( _optionalChain([node, 'access', _11 => _11.data, 'optionalAccess', _12 => _12.title]))), () => ( node.id)), () => ( "")));
-  const lines = label.split(/\n|<br\s*\/?>/);
-  const longest = Math.max(...lines.map((l) => l.replace(/<[^>]+>/g, "").length), 1);
-  const width = Math.min(480, Math.max(defaultWidth, longest * 8 + 48));
-  const height = Math.max(defaultHeight, lines.length * 20 + 24);
-  return { width, height };
-}
-function boundsOf(rects) {
-  if (!rects.length) return null;
-  const minX = Math.min(...rects.map((r) => r.x));
-  const minY = Math.min(...rects.map((r) => r.y));
-  const maxX = Math.max(...rects.map((r) => r.x + r.width));
-  const maxY = Math.max(...rects.map((r) => r.y + r.height));
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-function centre(r) {
-  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
-}
-function overlaps(a, b, pad = 16) {
-  return a.x < b.x + b.width + pad && a.x + a.width + pad > b.x && a.y < b.y + b.height + pad && a.y + a.height + pad > b.y;
-}
-function flowSide(direction = "LR") {
-  switch (direction) {
-    case "LR":
-      return "right";
-    case "RL":
-      return "left";
-    case "BT":
-      return "above";
-    case "TB":
-    default:
-      return "below";
-  }
-}
-function ensureLayout(nodes, edges, options = {}) {
-  if (nodes.length === 0) return [];
-  const stored = _nullishCoalesce(options.storedPositions, () => ( {}));
-  const missing = nodes.filter((n) => !stored[n.id]);
-  if (missing.length === 0) {
-    return nodes.map((n) => ({
-      ...n,
-      position: { ...stored[n.id] }
-    }));
-  }
-  const autoLayouted = getLayoutedNodes(nodes, edges, void 0, options);
-  const autoMap = new Map(
-    autoLayouted.map((n) => [n.id, n.position])
-  );
-  const both = nodes.filter((n) => stored[n.id] && autoMap.has(n.id));
-  if (both.length === 0) {
-    return autoLayouted;
-  }
-  let dx = 0;
-  let dy = 0;
-  for (const n of both) {
-    const s = stored[n.id];
-    const a = autoMap.get(n.id);
-    dx += s.x - a.x;
-    dy += s.y - a.y;
-  }
-  dx /= both.length;
-  dy /= both.length;
-  return nodes.map((node) => {
-    if (stored[node.id]) {
-      return {
-        ...node,
-        position: { ...stored[node.id] }
-      };
-    }
-    const autoPos = _nullishCoalesce(autoMap.get(node.id), () => ( { x: 0, y: 0 }));
-    return {
-      ...node,
-      position: {
-        x: Math.round(autoPos.x + dx),
-        y: Math.round(autoPos.y + dy)
-      }
-    };
-  });
-}
-function placeBeside(rects, size, side, nearNodeId, options = {}) {
-  const {
-    gap = DEFAULT_PLACEMENT_GAP,
-    ignore = [],
-    maxAttempts = 32
-  } = options;
-  const skip = new Set([nearNodeId, ...ignore].filter(Boolean));
-  const obstacles = Object.entries(rects).filter(([id]) => !skip.has(id)).map(([, r]) => r);
-  const anchor = nearNodeId && rects[nearNodeId] || boundsOf(Object.values(rects)) || { x: 0, y: 0, width: 0, height: 0 };
-  const anchorCenter = centre(anchor);
-  let baseX;
-  let baseY;
-  switch (side) {
-    case "right":
-      baseX = anchor.x + anchor.width + gap;
-      baseY = anchorCenter.y - size.height / 2;
-      break;
-    case "left":
-      baseX = anchor.x - gap - size.width;
-      baseY = anchorCenter.y - size.height / 2;
-      break;
-    case "above":
-      baseX = anchorCenter.x - size.width / 2;
-      baseY = anchor.y - gap - size.height;
-      break;
-    case "below":
-    default:
-      baseX = anchorCenter.x - size.width / 2;
-      baseY = anchor.y + anchor.height + gap;
-      break;
-  }
-  const isHorizontal = side === "right" || side === "left";
-  const step = (isHorizontal ? size.height : size.width) + 20;
-  for (let i = 0; i < maxAttempts; i++) {
-    const offset = i === 0 ? 0 : Math.ceil(i / 2) * step * (i % 2 === 1 ? 1 : -1);
-    const candidateBox = {
-      x: isHorizontal ? baseX : baseX + offset,
-      y: isHorizontal ? baseY + offset : baseY,
-      width: size.width,
-      height: size.height
-    };
-    if (!obstacles.some((obstacle) => overlaps(candidateBox, obstacle, 8))) {
-      return {
-        x: Math.round(candidateBox.x),
-        y: Math.round(candidateBox.y)
-      };
-    }
-  }
-  return {
-    x: Math.round(baseX),
-    y: Math.round(baseY)
-  };
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-exports.DEFAULT_NODE_WIDTH = DEFAULT_NODE_WIDTH; exports.DEFAULT_NODE_HEIGHT = DEFAULT_NODE_HEIGHT; exports.DEFAULT_PLACEMENT_GAP = DEFAULT_PLACEMENT_GAP; exports.getCenteredNodePosition = getCenteredNodePosition; exports.centerNodes = centerNodes; exports.getLayoutedNodes = getLayoutedNodes; exports.estimateNodeSize = estimateNodeSize; exports.boundsOf = boundsOf; exports.centre = centre; exports.overlaps = overlaps; exports.flowSide = flowSide; exports.ensureLayout = ensureLayout; exports.placeBeside = placeBeside;