@pixerate/editor 0.29.0 → 0.31.0

package/dist/canvas/index.js

@@ -25,35 +25,38 @@ import {
   resolveToken
 } from "../chunk-D6AVOTSD.js";
 import {
-  ANIMATION_EASING_LABELS,
-  ANIMATION_EASING_PRESETS,
   ANIMATION_TIME_EPSILON,
   AnimationPlayer,
-  CUBIC_BEZIER_PRESETS,
   ManualClock,
   createAnimationPlayer,
-  cubicBezierAt,
-  easingFromInfluence,
-  easingLabel,
-  easingToCss,
-  evaluateEasing,
   evaluateTrack,
   formatOklab,
   interpolateAnimationValue,
-  isAnimationEasing,
   isAnimationKeyframe,
   mixColorsOklab,
   normalizeKeyframes,
   oklabToRgb,
   pageHidden,
-  parseCssEasing,
   parseOklab,
   realClock,
-  resolveEasing,
   rgbToOklab,
-  springAt,
   wrapAnimationTime
-} from "../chunk-PWJARCI4.js";
+} from "../chunk-W7BOBWZD.js";
+import {
+  ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS,
+  CUBIC_BEZIER_PRESETS,
+  cubicBezierAt,
+  easingFromInfluence,
+  easingLabel,
+  easingToCss,
+  elasticAt,
+  evaluateEasing,
+  isAnimationEasing,
+  parseCssEasing,
+  resolveEasing,
+  springAt
+} from "../chunk-UB2OY7FD.js";
 import {
   normalizeTokenColor
 } from "../chunk-TGD52FEZ.js";
@@ -2449,6 +2452,233 @@ function fitFreehandPath(points, options = {}) {
   return fitPathData(points, { tolerance: 1, ...options, closed: false });
 }
 
+// src/canvas/gradient.ts
+var CANVAS_GRADIENT_PRESETS = {
+  sunset: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#f97316" },
+      { offset: 1, color: "#ec4899" }
+    ]
+  },
+  ocean: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#06b6d4" },
+      { offset: 1, color: "#3b82f6" }
+    ]
+  },
+  aurora: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#10b981" },
+      { offset: 1, color: "#6366f1" }
+    ]
+  },
+  neon: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#a855f7" },
+      { offset: 1, color: "#ec4899" }
+    ]
+  },
+  amber: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#f59e0b" },
+      { offset: 1, color: "#ef4444" }
+    ]
+  },
+  cosmic: {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#3b82f6" },
+      { offset: 0.5, color: "#8b5cf6" },
+      { offset: 1, color: "#ec4899" }
+    ]
+  }
+};
+function isCanvasGradient(value) {
+  if (!value || typeof value !== "object") return false;
+  const val = value;
+  if (val.type !== "linear" && val.type !== "radial") return false;
+  if (!Array.isArray(val.stops)) return false;
+  return true;
+}
+function splitCssArgs(str) {
+  const parts = [];
+  let depth = 0;
+  let current = "";
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+    if (char === "(") depth++;
+    else if (char === ")") depth = Math.max(0, depth - 1);
+    if (char === "," && depth === 0) {
+      if (current.trim()) parts.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+}
+function parseCssAngle(val) {
+  const trimmed = val.trim().toLowerCase();
+  if (trimmed.endsWith("deg")) {
+    return parseFloat(trimmed);
+  }
+  if (trimmed.endsWith("turn")) {
+    return parseFloat(trimmed) * 360;
+  }
+  if (trimmed.endsWith("rad")) {
+    return parseFloat(trimmed) * 180 / Math.PI;
+  }
+  if (trimmed.startsWith("to ")) {
+    const dir = trimmed.slice(3).trim();
+    if (dir === "bottom") return 180;
+    if (dir === "top") return 0;
+    if (dir === "right") return 90;
+    if (dir === "left") return 270;
+    if (dir === "bottom right" || dir === "right bottom") return 135;
+    if (dir === "bottom left" || dir === "left bottom") return 225;
+    if (dir === "top right" || dir === "right top") return 45;
+    if (dir === "top left" || dir === "left top") return 315;
+  }
+  const n = parseFloat(trimmed);
+  return Number.isFinite(n) ? n : 180;
+}
+function parseCssGradient(css) {
+  const trimmed = css.trim();
+  const linearMatch = trimmed.match(/^linear-gradient\s*\((.*)\)$/is);
+  if (linearMatch) {
+    const rawArgs = splitCssArgs(linearMatch[1]);
+    if (rawArgs.length === 0) return null;
+    let angle = 180;
+    let stopStartIndex = 0;
+    const first = rawArgs[0].trim().toLowerCase();
+    if (first.endsWith("deg") || first.endsWith("turn") || first.endsWith("rad") || first.startsWith("to ")) {
+      angle = parseCssAngle(first);
+      stopStartIndex = 1;
+    }
+    const stopStrings = rawArgs.slice(stopStartIndex);
+    if (stopStrings.length === 0) return null;
+    const stops = parseStopStrings(stopStrings);
+    if (stops.length === 0) return null;
+    return {
+      type: "linear",
+      angle,
+      stops
+    };
+  }
+  const radialMatch = trimmed.match(/^radial-gradient\s*\((.*)\)$/is);
+  if (radialMatch) {
+    const rawArgs = splitCssArgs(radialMatch[1]);
+    if (rawArgs.length === 0) return null;
+    let stopStartIndex = 0;
+    const first = rawArgs[0].trim().toLowerCase();
+    if (first.startsWith("circle") || first.startsWith("ellipse") || first.includes("at ")) {
+      stopStartIndex = 1;
+    }
+    const stopStrings = rawArgs.slice(stopStartIndex);
+    if (stopStrings.length === 0) return null;
+    const stops = parseStopStrings(stopStrings);
+    if (stops.length === 0) return null;
+    return {
+      type: "radial",
+      cx: 0.5,
+      cy: 0.5,
+      r: 0.5,
+      stops
+    };
+  }
+  return null;
+}
+function parseStopStrings(stopStrings) {
+  const count = stopStrings.length;
+  return stopStrings.map((str, idx) => {
+    const parts = str.trim().split(/\s+(?=[0-9%])/);
+    const color = parts[0];
+    let offset = count === 1 ? 0 : idx / (count - 1);
+    if (parts.length > 1) {
+      const posStr = parts[1].trim();
+      if (posStr.endsWith("%")) {
+        offset = parseFloat(posStr) / 100;
+      } else {
+        const val = parseFloat(posStr);
+        if (Number.isFinite(val)) offset = val;
+      }
+    }
+    return {
+      offset: Math.min(1, Math.max(0, offset)),
+      color
+    };
+  });
+}
+function resolveCanvasGradient(value) {
+  if (!value) return null;
+  if (isCanvasGradient(value)) return value;
+  if (typeof value === "string") {
+    const lower = value.trim().toLowerCase();
+    if (CANVAS_GRADIENT_PRESETS[lower]) {
+      return CANVAS_GRADIENT_PRESETS[lower];
+    }
+    if (lower.startsWith("linear-gradient") || lower.startsWith("radial-gradient")) {
+      return parseCssGradient(value);
+    }
+  }
+  return null;
+}
+function angleToSvgLinearCoords(angleDeg = 180) {
+  const rad = (90 - angleDeg) * Math.PI / 180;
+  const dx = Math.cos(rad);
+  const dy = -Math.sin(rad);
+  const half = 0.5;
+  return {
+    x1: Math.round((half - dx * half) * 1e3) / 1e3,
+    y1: Math.round((half - dy * half) * 1e3) / 1e3,
+    x2: Math.round((half + dx * half) * 1e3) / 1e3,
+    y2: Math.round((half + dy * half) * 1e3) / 1e3
+  };
+}
+function gradientToSvgDef(gradient, id) {
+  const stops = (gradient.stops ?? []).map((s) => ({
+    offset: `${Math.round(s.offset * 1e3) / 10}%`,
+    stopColor: s.color,
+    stopOpacity: s.opacity
+  }));
+  if (gradient.type === "radial") {
+    return {
+      id,
+      type: "radial",
+      attrs: {
+        cx: gradient.cx !== void 0 ? `${gradient.cx * 100}%` : "50%",
+        cy: gradient.cy !== void 0 ? `${gradient.cy * 100}%` : "50%",
+        r: gradient.r !== void 0 ? `${gradient.r * 100}%` : "50%"
+      },
+      stops
+    };
+  }
+  const coords = angleToSvgLinearCoords(gradient.angle ?? 180);
+  return {
+    id,
+    type: "linear",
+    attrs: {
+      x1: `${coords.x1 * 100}%`,
+      y1: `${coords.y1 * 100}%`,
+      x2: `${coords.x2 * 100}%`,
+      y2: `${coords.y2 * 100}%`
+    },
+    stops
+  };
+}
+
 // src/canvas/shapeGeometry.ts
 var SHAPE_KINDS = ["rect", "ellipse", "polygon", "star", "path"];
 function isShapeDescription(value) {
@@ -2858,23 +3088,54 @@ function getShapeSvg(shape, size) {
   }
   return transforms.length > 0 ? { d, transform: transforms.join(" "), fillRule } : { d, fillRule };
 }
-function getShapeRenderData(shape, size = {}) {
+function getShapeRenderData(shape, size = {}, options = {}) {
   const vb = shape.kind === "path" ? validViewBox(shape.viewBox) : null;
   const width = size.width && size.width > 0 ? size.width : vb ? vb[2] : 100;
   const height = size.height && size.height > 0 ? size.height : vb ? vb[3] : 100;
   const svg = getShapeSvg(shape, { width, height });
+  const baseId = options.id || Math.random().toString(36).slice(2, 9);
+  let fillStr = "currentColor";
+  let fillGradientDef;
+  const rawFill = shape.fillGradient ?? shape.fill;
+  const resolvedFillGradient = resolveCanvasGradient(rawFill);
+  if (resolvedFillGradient) {
+    const gradId = `shape-fill-${baseId}`;
+    fillGradientDef = gradientToSvgDef(resolvedFillGradient, gradId);
+    fillStr = `url(#${gradId})`;
+  } else if (typeof shape.fill === "string") {
+    fillStr = shape.fill;
+  } else if (shape.fill === void 0) {
+    fillStr = "currentColor";
+  }
+  let strokeStr = "none";
+  let strokeGradientDef;
+  const rawStroke = shape.strokeGradient ?? shape.stroke;
+  const resolvedStrokeGradient = resolveCanvasGradient(rawStroke);
+  if (resolvedStrokeGradient) {
+    const gradId = `shape-stroke-${baseId}`;
+    strokeGradientDef = gradientToSvgDef(resolvedStrokeGradient, gradId);
+    strokeStr = `url(#${gradId})`;
+  } else if (typeof shape.stroke === "string") {
+    strokeStr = shape.stroke;
+  } else if (shape.stroke === void 0) {
+    strokeStr = "none";
+  }
   const data = {
     viewBox: `0 0 ${formatNumber2(width, 3)} ${formatNumber2(height, 3)}`,
     width,
     height,
     d: svg.d,
     fillRule: svg.fillRule,
-    fill: shape.fill ?? "currentColor",
-    stroke: shape.stroke ?? "none",
+    fill: fillStr,
+    stroke: strokeStr,
     strokeWidth: shape.strokeWidth ?? 1
   };
   if (svg.transform) data.transform = svg.transform;
   if (shape.opacity !== void 0) data.opacity = shape.opacity;
+  if (shape.strokeLinecap) data.strokeLinecap = shape.strokeLinecap;
+  if (shape.strokeLinejoin) data.strokeLinejoin = shape.strokeLinejoin;
+  if (fillGradientDef) data.fillGradient = fillGradientDef;
+  if (strokeGradientDef) data.strokeGradient = strokeGradientDef;
   return data;
 }
 function clampRatio(value) {
@@ -5310,12 +5571,18 @@ function revertShapeCombination(nodes, change, previous) {
 }
 var INVISIBLE_PAINT = /* @__PURE__ */ new Set(["none", "transparent"]);
 function hasVisibleStroke(shape) {
-  if (!shape || typeof shape.stroke !== "string" || INVISIBLE_PAINT.has(shape.stroke.trim().toLowerCase())) return false;
+  if (!shape) return false;
+  const stroke = shape.strokeGradient ?? shape.stroke;
+  if (stroke === void 0 || stroke === null) return false;
+  if (typeof stroke === "string" && INVISIBLE_PAINT.has(stroke.trim().toLowerCase())) return false;
   const width = shape.strokeWidth ?? 1;
   return Number.isFinite(width) && width > 0;
 }
 function hasVisibleFill(shape) {
-  return shape.fill === void 0 || !INVISIBLE_PAINT.has(String(shape.fill).trim().toLowerCase());
+  if (shape.fillGradient) return true;
+  if (shape.fill === void 0) return true;
+  if (typeof shape.fill === "object" && shape.fill !== null) return true;
+  return !INVISIBLE_PAINT.has(String(shape.fill).trim().toLowerCase());
 }
 function shapeTargets(nodes, ids) {
   const idSet = new Set(ids);
@@ -11397,6 +11664,310 @@ function getCanvasComponentDragId(dataTransfer) {
   const id = dataTransfer?.getData(CANVAS_COMPONENT_DRAG_TYPE);
   return id ? id : void 0;
 }
+
+// src/canvas/freehand.ts
+function createDefaultStrokeStyle(tool) {
+  if (tool === "highlighter") {
+    return {
+      color: "#facc15",
+      width: 24,
+      opacity: 0.35,
+      cap: "round",
+      join: "round"
+    };
+  }
+  return {
+    color: "#3b82f6",
+    width: 3,
+    opacity: 1,
+    cap: "round",
+    join: "round"
+  };
+}
+function streamlinePoints(points, factor = 0.35) {
+  if (points.length < 3 || factor <= 0) return [...points];
+  const clampedFactor = Math.min(Math.max(factor, 0), 0.95);
+  const smoothed = [points[0]];
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = smoothed[i - 1];
+    const curr = points[i];
+    const x = prev[0] * clampedFactor + curr[0] * (1 - clampedFactor);
+    const y = prev[1] * clampedFactor + curr[1] * (1 - clampedFactor);
+    smoothed.push([x, y]);
+  }
+  smoothed.push(points[points.length - 1]);
+  return smoothed;
+}
+function strokeBoundingBox(points, margin = 0) {
+  if (points.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [x, y] of points) {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  }
+  const w = Math.max(maxX - minX, 0);
+  const h = Math.max(maxY - minY, 0);
+  return {
+    x: minX - margin,
+    y: minY - margin,
+    width: Math.max(w + margin * 2, 1),
+    height: Math.max(h + margin * 2, 1)
+  };
+}
+function strokePointsToPathData(points, options = {}) {
+  if (points.length === 0) return "";
+  if (points.length === 1) {
+    const [x, y] = points[0];
+    return `M ${x} ${y} L ${x + 0.01} ${y}`;
+  }
+  if (points.length === 2) {
+    const [p0, p1] = points;
+    return `M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]}`;
+  }
+  const fitted = fitFreehandPath(points, options);
+  return fitted.length > 0 ? fitted : `M ${points[0][0]} ${points[0][1]}`;
+}
+function strokeToShapeNode(stroke, options = {}) {
+  const points = stroke.points;
+  const strokeWidth = stroke.style.width || 3;
+  const bounds = strokeBoundingBox(points, 0);
+  const localPoints = points.map(
+    ([x, y]) => [x - bounds.x, y - bounds.y]
+  );
+  const d = strokePointsToPathData(localPoints, {
+    tolerance: options.tolerance ?? 1,
+    cornerAngleDeg: options.cornerAngleDeg ?? 40
+  });
+  const width = Math.max(bounds.width, 1);
+  const height = Math.max(bounds.height, 1);
+  const strokePaint = stroke.style.gradient ?? stroke.style.color;
+  const strokeGradient = stroke.style.gradient ?? (typeof stroke.style.color === "object" && stroke.style.color ? stroke.style.color : void 0);
+  return {
+    id: options.id ?? stroke.id,
+    type: "shape",
+    position: { x: bounds.x, y: bounds.y },
+    width,
+    height,
+    style: {
+      width,
+      height
+    },
+    data: {
+      shape: {
+        kind: "path",
+        d,
+        viewBox: [0, 0, width, height],
+        stroke: strokePaint,
+        strokeWidth,
+        opacity: stroke.style.opacity,
+        strokeLinecap: stroke.style.cap ?? "round",
+        strokeLinejoin: stroke.style.join ?? "round",
+        ...strokeGradient ? { strokeGradient } : {},
+        fill: "none"
+      },
+      tool: stroke.tool
+    }
+  };
+}
+function findStrokesAtPoint(point, nodes, radius = 12) {
+  const matches2 = [];
+  for (const node of nodes) {
+    const shape = getNodeShape(node);
+    if (!shape || shape.kind !== "path") continue;
+    const rect = getNodeRect(node);
+    const strokeWidth = shape.strokeWidth ?? 2;
+    const effectiveRadius = radius + strokeWidth / 2;
+    if (point[0] < rect.x - effectiveRadius || point[0] > rect.x + rect.width + effectiveRadius || point[1] < rect.y - effectiveRadius || point[1] > rect.y + rect.height + effectiveRadius) {
+      continue;
+    }
+    const localPoint = [point[0] - rect.x, point[1] - rect.y];
+    try {
+      const dist3 = distanceToBezierPath(shape.d, localPoint);
+      if (dist3 <= effectiveRadius) {
+        matches2.push(node);
+      }
+    } catch {
+      if (point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height) {
+        matches2.push(node);
+      }
+    }
+  }
+  return matches2;
+}
+
+// src/canvas/drawController.ts
+function createCanvasDrawController(options) {
+  let currentTool = options.tool ?? "select";
+  let currentStyle = {
+    ...createDefaultStrokeStyle(currentTool),
+    ...options.style
+  };
+  let activeStroke = null;
+  const erasedInDrag = /* @__PURE__ */ new Map();
+  let dragStartNodes = null;
+  function setTool(tool) {
+    if (currentTool === tool) return;
+    cancelStroke();
+    currentTool = tool;
+    if (tool === "pen" || tool === "highlighter") {
+      currentStyle = {
+        ...createDefaultStrokeStyle(tool),
+        ...options.style
+      };
+      options.onStyleChange?.(currentStyle);
+    }
+    options.onToolChange?.(tool);
+  }
+  function setStyle(style) {
+    currentStyle = { ...currentStyle, ...style };
+    options.onStyleChange?.(currentStyle);
+  }
+  function startStroke(point) {
+    if (currentTool === "select") return;
+    if (currentTool === "eraser") {
+      erasedInDrag.clear();
+      dragStartNodes = [...options.getNodes()];
+      eraseAt(point);
+      return;
+    }
+    const id = options.generateNodeId?.() ?? `stroke-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    activeStroke = {
+      id,
+      tool: currentTool,
+      points: [point],
+      style: { ...currentStyle },
+      startTime: Date.now()
+    };
+    options.onActiveStrokeChange?.(activeStroke);
+  }
+  function continueStroke(point) {
+    if (currentTool === "eraser") {
+      eraseAt(point);
+      return;
+    }
+    if (!activeStroke) return;
+    const points = activeStroke.points;
+    const last = points[points.length - 1];
+    if (Math.hypot(point[0] - last[0], point[1] - last[1]) < 0.25) return;
+    points.push(point);
+    options.onActiveStrokeChange?.({ ...activeStroke, points: [...points] });
+  }
+  function endStroke() {
+    if (currentTool === "eraser") {
+      const startSnapshot = dragStartNodes;
+      dragStartNodes = null;
+      if (erasedInDrag.size > 0 && options.history && startSnapshot) {
+        const erasedIds = new Set(Array.from(erasedInDrag.keys()));
+        options.history.execute({
+          name: "Erase strokes",
+          execute: () => {
+            const remaining = options.getNodes().filter((n) => !erasedIds.has(n.id));
+            options.setNodes(remaining);
+          },
+          undo: () => {
+            options.setNodes(startSnapshot);
+          }
+        });
+      }
+      erasedInDrag.clear();
+      return null;
+    }
+    if (!activeStroke) return null;
+    const stroke = activeStroke;
+    activeStroke = null;
+    options.onActiveStrokeChange?.(null);
+    if (stroke.points.length === 0) return null;
+    const drawOpts = options.drawOptions ?? {};
+    const smoothed = streamlinePoints(stroke.points, drawOpts.streamline ?? 0.35);
+    const node = strokeToShapeNode(
+      { ...stroke, points: smoothed },
+      {
+        tolerance: drawOpts.tolerance ?? 1,
+        cornerAngleDeg: drawOpts.cornerAngleDeg ?? 40
+      }
+    );
+    if (options.history) {
+      options.history.execute({
+        name: `Draw ${stroke.tool}`,
+        execute: () => {
+          options.setNodes([...options.getNodes(), node]);
+        },
+        undo: () => {
+          options.setNodes(options.getNodes().filter((n) => n.id !== node.id));
+        }
+      });
+    } else {
+      options.setNodes([...options.getNodes(), node]);
+    }
+    options.onStrokeComplete?.(node);
+    return node;
+  }
+  function cancelStroke() {
+    if (activeStroke) {
+      activeStroke = null;
+      options.onActiveStrokeChange?.(null);
+    }
+    if (erasedInDrag.size > 0) {
+      const entries = Array.from(erasedInDrag.values());
+      const current = [...options.getNodes()];
+      const sorted = [...entries].sort((a, b) => a.index - b.index);
+      for (const { node, index } of sorted) {
+        const insertAt = Math.min(index, current.length);
+        current.splice(insertAt, 0, node);
+      }
+      options.setNodes(current);
+      erasedInDrag.clear();
+    }
+  }
+  function eraseAt(point, radius = 12) {
+    const nodes = options.getNodes();
+    const candidates = findStrokesAtPoint(point, nodes, radius);
+    const newlyErased = [];
+    for (const candidate of candidates) {
+      if (erasedInDrag.has(candidate.id) || isLocked(candidate)) continue;
+      const index = nodes.findIndex((n) => n.id === candidate.id);
+      if (index !== -1) {
+        erasedInDrag.set(candidate.id, { node: candidate, index });
+        newlyErased.push(candidate);
+      }
+    }
+    if (newlyErased.length > 0) {
+      const erasedSet = new Set(newlyErased.map((n) => n.id));
+      const nextNodes = nodes.filter((n) => !erasedSet.has(n.id));
+      options.setNodes(nextNodes);
+      options.onNodesErase?.(newlyErased);
+    }
+    return newlyErased;
+  }
+  return {
+    get tool() {
+      return currentTool;
+    },
+    setTool,
+    get style() {
+      return currentStyle;
+    },
+    setStyle,
+    get activeStroke() {
+      return activeStroke;
+    },
+    get isDrawing() {
+      return activeStroke !== null;
+    },
+    startStroke,
+    continueStroke,
+    endStroke,
+    cancelStroke,
+    eraseAt
+  };
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -11407,6 +11978,7 @@ export {
   AnimationEditError,
   AnimationPlayer,
   CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY,
   COMPONENT_DATA_KEY,
@@ -11439,6 +12011,7 @@ export {
   addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
+  angleToSvgLinearCoords,
   animateNode,
   applyAnimation,
   applyAnimationOverrides,
@@ -11485,8 +12058,10 @@ export {
   createCanvasAutoLayoutController,
   createCanvasComponent,
   createCanvasComponentsController,
+  createCanvasDrawController,
   createCanvasInstance,
   createCanvasScenesStore,
+  createDefaultStrokeStyle,
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
@@ -11507,6 +12082,7 @@ export {
   easingFromInfluence,
   easingLabel,
   easingToCss,
+  elasticAt,
   ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
@@ -11516,6 +12092,7 @@ export {
   excludePaths,
   exportCssAnimation,
   findConnectorSnap,
+  findStrokesAtPoint,
   findVariant,
   fitCubicRun,
   fitCubics,
@@ -11582,6 +12159,7 @@ export {
   getVariantOptions,
   getVariantSet,
   getVariantValues,
+  gradientToSvgDef,
   handlePoint,
   hasVisibleStroke,
   inferResizeHandle,
@@ -11596,6 +12174,7 @@ export {
   isAutoLayoutFrame,
   isCanvasComponent,
   isCanvasComponentSet,
+  isCanvasGradient,
   isCanvasInstance,
   isCssExportExact,
   isEventFromTextInput,
@@ -11647,6 +12226,7 @@ export {
   parseCanvasClipboardData,
   parseCanvasScenes,
   parseCssEasing,
+  parseCssGradient,
   parseKeyframeClipboard,
   parseNodeStyleDeclarations,
   parseOklab,
@@ -11682,6 +12262,7 @@ export {
   repositionNodesTo,
   resetCanvasInstanceOverrides,
   resizeHandleAxes,
+  resolveCanvasGradient,
   resolveCanvasTokens,
   resolveEasing,
   resolvePadding,
@@ -11724,7 +12305,11 @@ export {
   snapToGrid,
   splitSegment,
   springAt,
+  streamlinePoints,
+  strokeBoundingBox,
   strokeOutlineRings,
+  strokePointsToPathData,
+  strokeToShapeNode,
   subSegment,
   subtractPaths,
   subtractPolygons,