@pixerate/editor 0.115.0 → 0.117.0

package/dist/{chunk-VXR7XWMF.js → chunk-7LNZAWSJ.js}

@@ -159,8 +159,8 @@ var fmtMatrix = (m) => `matrix(${m.map((n) => fmt(n, 6)).join(" ")})`;
 function isVectorGradient(paint) {
   return !!paint && typeof paint === "object" && VECTOR_GRADIENT_TYPES.includes(paint.type) && Array.isArray(paint.stops);
 }
-function parseVectorColor(color) {
-  const hex = normalizeTokenColor(color);
+function parseVectorColor(color2) {
+  const hex = normalizeTokenColor(color2);
   if (hex === null) return null;
   const c = hexToRgba(hex);
   return [c.r, c.g, c.b, c.a];
@@ -262,15 +262,15 @@ function sampleVectorGradient(g, t) {
   return s ? { color: s.color, opacity: s.opacity ?? 1 } : { color: "#000000", opacity: 0 };
 }
 var stopOf = (offset, c) => {
-  const color = rgbaToHex(c[0], c[1], c[2]);
+  const color2 = rgbaToHex(c[0], c[1], c[2]);
   const opacity = Math.round(c[3] * 1e4) / 1e4;
-  return opacity < 1 ? { offset, color, opacity } : { offset, color };
+  return opacity < 1 ? { offset, color: color2, opacity } : { offset, color: color2 };
 };
 var maxDiff = (a, b) => Math.max(Math.abs(a[0] - b[0]), Math.abs(a[1] - b[1]), Math.abs(a[2] - b[2]), Math.abs(a[3] - b[3]));
 var lerpRgba = (a, b, u) => [0, 1, 2, 3].map((c) => a[c] + (b[c] - a[c]) * u);
 function expandVectorGradientStops(g, options = {}) {
   const stops = sortedVectorGradientStops(g);
-  const plain2 = () => stops.map(({ offset, color, opacity }) => opacity !== void 0 && opacity !== 1 ? { offset, color, opacity } : { offset, color });
+  const plain2 = () => stops.map(({ offset, color: color2, opacity }) => opacity !== void 0 && opacity !== 1 ? { offset, color: color2, opacity } : { offset, color: color2 });
   if (!vectorGradientNeedsExpansion(g)) return plain2();
   const ramp = vectorGradientRamp(g);
   if (!ramp || stops.length < 2) return plain2();
@@ -342,9 +342,9 @@ function placeStop(stops, stop) {
 }
 function insertVectorGradientStop(g, offset) {
   const at2 = clamp(offset, 0, 1);
-  const { color, opacity } = sampleVectorGradient(g, at2);
+  const { color: color2, opacity } = sampleVectorGradient(g, at2);
   const stops = sortedVectorGradientStops(g);
-  const index = placeStop(stops, opacity < 1 ? { offset: at2, color, opacity } : { offset: at2, color });
+  const index = placeStop(stops, opacity < 1 ? { offset: at2, color: color2, opacity } : { offset: at2, color: color2 });
   return { stops, index };
 }
 function moveVectorGradientStop(stops, index, offset) {
@@ -527,9 +527,11 @@ function mapVectorGradient(g, f) {
   return { ...g, start: f(p.start), end: f(p.end), width: f(p.width), ...p.focal ? { focal: f(p.focal) } : {} };
 }
 function mapVectorPaint(paint, f) {
+  if (isVectorShadedPaint(paint)) return mapVectorShadedPaint(paint, f);
   return isVectorGradient(paint) ? mapVectorGradient(paint, f) : paint;
 }
 function transformVectorPaint(paint, m) {
+  if (isVectorShadedPaint(paint)) return transformVectorShadedPaint(paint, m);
   return isVectorGradient(paint) ? transformVectorGradient(paint, m) : paint;
 }
 var isCentredVectorGradient = (type) => type === "radial" || type === "conic" || type === "diamond";
@@ -936,6 +938,365 @@ function applyVectorGradientPatch(g, patch) {
   return clean2;
 }
 
+// src/vector/shading.ts
+function isVectorMeshGradient(paint) {
+  return !!paint && typeof paint === "object" && paint.type === "mesh" && Array.isArray(paint.points);
+}
+function isVectorFreeformGradient(paint) {
+  return !!paint && typeof paint === "object" && paint.type === "freeform" && Array.isArray(paint.points);
+}
+function isVectorShadedPaint(paint) {
+  return isVectorMeshGradient(paint) || isVectorFreeformGradient(paint);
+}
+var lerp = (a, b, t) => a + (b - a) * t;
+var rgbaOf = (color2, opacity = 1) => {
+  const c = parseVectorColor(color2) ?? [0, 0, 0, 1];
+  return [c[0], c[1], c[2], c[3] * opacity];
+};
+var hex2 = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
+function vectorRgbaToCss([r, g, b, a]) {
+  if (a >= 0.9995) return `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+  const c = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255);
+  return `rgba(${c(r)},${c(g)},${c(b)},${Math.round(Math.max(0, a) * 1e3) / 1e3})`;
+}
+var VECTOR_MESH_MAX = 32;
+function createVectorMeshGradient(bounds, rows, columns, colors = {}) {
+  const r = Math.min(VECTOR_MESH_MAX, Math.max(1, Math.round(rows)));
+  const c = Math.min(VECTOR_MESH_MAX, Math.max(1, Math.round(columns)));
+  const points = [];
+  const out = [];
+  const corners = colors.corners?.map((k) => rgbaOf(k));
+  for (let i = 0; i <= r; i++) {
+    for (let j = 0; j <= c; j++) {
+      points.push({ x: bounds.x + bounds.width * j / c, y: bounds.y + bounds.height * i / r });
+      const k = i * (c + 1) + j;
+      if (colors.colors?.[k]) out.push(colors.colors[k]);
+      else if (corners) {
+        const u = j / c;
+        const v2 = i / r;
+        const top = corners[0].map((x, n) => lerp(x, corners[1][n], u));
+        const bottom = corners[3].map((x, n) => lerp(x, corners[2][n], u));
+        out.push(vectorRgbaToCss(top.map((x, n) => lerp(x, bottom[n], v2))));
+      } else out.push("#ffffff");
+    }
+  }
+  return { type: "mesh", rows: r, columns: c, points, colors: out };
+}
+function catmull(p0, p1, p2, p3) {
+  return [p1, { x: p1.x + (p2.x - p0.x) / 6, y: p1.y + (p2.y - p0.y) / 6 }, { x: p2.x - (p3.x - p1.x) / 6, y: p2.y - (p3.y - p1.y) / 6 }, p2];
+}
+function cubicAt(c, t) {
+  const s = 1 - t;
+  const a = s * s * s;
+  const b = 3 * s * s * t;
+  const d = 3 * s * t * t;
+  const e = t * t * t;
+  return { x: a * c[0].x + b * c[1].x + d * c[2].x + e * c[3].x, y: a * c[0].y + b * c[1].y + d * c[2].y + e * c[3].y };
+}
+function meshOk(m) {
+  const n = (m.rows + 1) * (m.columns + 1);
+  return m.rows >= 1 && m.columns >= 1 && m.points.length === n && m.colors.length === n;
+}
+function meshLattice(m) {
+  const cols = m.columns + 1;
+  const at2 = (r, c) => m.points[r * cols + c];
+  const ext = (a, b) => ({ x: 2 * a.x - b.x, y: 2 * a.y - b.y });
+  const P = (r, c) => {
+    if (r < 0) return ext(P(0, c), P(1, c));
+    if (r > m.rows) return ext(P(m.rows, c), P(m.rows - 1, c));
+    if (c < 0) return ext(at2(r, 0), at2(r, 1));
+    if (c > m.columns) return ext(at2(r, m.columns), at2(r, m.columns - 1));
+    return at2(r, c);
+  };
+  return P;
+}
+function vectorMeshPointAt(m, i, j, u, v2) {
+  const P = meshLattice(m);
+  const top = catmull(P(i, j - 1), P(i, j), P(i, j + 1), P(i, j + 2));
+  const bottom = catmull(P(i + 1, j - 1), P(i + 1, j), P(i + 1, j + 1), P(i + 1, j + 2));
+  const left2 = catmull(P(i - 1, j), P(i, j), P(i + 1, j), P(i + 2, j));
+  const right = catmull(P(i - 1, j + 1), P(i, j + 1), P(i + 1, j + 1), P(i + 2, j + 1));
+  const t = cubicAt(top, u);
+  const b = cubicAt(bottom, u);
+  const l = cubicAt(left2, v2);
+  const r = cubicAt(right, v2);
+  const [p00, p01, p11, p10] = [P(i, j), P(i, j + 1), P(i + 1, j + 1), P(i + 1, j)];
+  const bl = (k) => (1 - u) * (1 - v2) * p00[k] + u * (1 - v2) * p01[k] + u * v2 * p11[k] + (1 - u) * v2 * p10[k];
+  return { x: (1 - v2) * t.x + v2 * b.x + (1 - u) * l.x + u * r.x - bl("x"), y: (1 - v2) * t.y + v2 * b.y + (1 - u) * l.y + u * r.y - bl("y") };
+}
+function vectorMeshColorAt(m, i, j, u, v2) {
+  const cols = m.columns + 1;
+  const C = (r, c2) => rgbaOf(m.colors[r * cols + c2], m.opacities?.[r * cols + c2] ?? 1);
+  const a = C(i, j);
+  const b = C(i, j + 1);
+  const c = C(i + 1, j + 1);
+  const d = C(i + 1, j);
+  return [0, 1, 2, 3].map((k) => (1 - u) * (1 - v2) * a[k] + u * (1 - v2) * b[k] + u * v2 * c[k] + (1 - u) * v2 * d[k]);
+}
+function vectorMeshLines(m) {
+  const P = meshLattice(m);
+  const rows = [];
+  for (let i = 0; i <= m.rows; i++) rows.push(Array.from({ length: m.columns }, (_, j) => catmull(P(i, j - 1), P(i, j), P(i, j + 1), P(i, j + 2))));
+  const columns = [];
+  for (let j = 0; j <= m.columns; j++) columns.push(Array.from({ length: m.rows }, (_, i) => catmull(P(i - 1, j), P(i, j), P(i + 1, j), P(i + 2, j))));
+  return { rows, columns };
+}
+var LINE_STEPS = 16;
+var lerpSource = (a, b, t) => ({ x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t), c: a.c.map((v2, k) => lerp(v2, b.c[k], t)), radius: lerp(a.radius, b.radius, t) });
+function vectorFreeformSpreadScale(bounds) {
+  return Math.max(Math.abs(bounds.width), Math.abs(bounds.height)) / 2;
+}
+function vectorFreeformLineSegments(f, line) {
+  const ix = f.lines?.[line];
+  if (!ix) return [];
+  const pts = ix.map((i) => f.points[i]);
+  if (pts.some((p) => !p)) return [];
+  const n = pts.length;
+  const out = [];
+  for (let i = 0; i + 1 < n; i++) out.push(catmull(pts[Math.max(0, i - 1)], pts[i], pts[i + 1], pts[Math.min(n - 1, i + 2)]));
+  return out;
+}
+function vectorFreeformField(f, scale3) {
+  const src = (p) => ({ x: p.x, y: p.y, c: rgbaOf(p.color, p.opacity ?? 1), radius: Math.min(1, Math.max(0, p.spread ?? 0)) * scale3 });
+  const points = f.points.map(src);
+  const pieces = [];
+  (f.lines ?? []).forEach((ix, l) => {
+    const v2 = [];
+    vectorFreeformLineSegments(f, l).forEach((c, s) => {
+      const a = points[ix[s]];
+      const b = points[ix[s + 1]];
+      for (let k = s === 0 ? 0 : 1; k <= LINE_STEPS; k++) {
+        const t = k / LINE_STEPS;
+        const at2 = cubicAt(c, t);
+        v2.push({ ...lerpSource(a, b, t), x: at2.x, y: at2.y });
+      }
+    });
+    let len2 = 0;
+    for (let k = 1; k < v2.length; k++) len2 += Math.hypot(v2[k].x - v2[k - 1].x, v2[k].y - v2[k - 1].y);
+    const n = Math.max(1, v2.length - 1);
+    for (let k = 1; k < v2.length; k++) {
+      const d = Math.hypot(v2[k].x - v2[k - 1].x, v2[k].y - v2[k - 1].y);
+      pieces.push({ a: v2[k - 1], b: v2[k], share: len2 > 0 ? d / len2 : 1 / n });
+    }
+  });
+  return { points, pieces, eps: 1e-9 * (Math.abs(scale3) + 1) };
+}
+function sampleVectorFreeform(field, p) {
+  const disc = { w: 0, c: [0, 0, 0, 0] };
+  const far = { w: 0, c: [0, 0, 0, 0] };
+  const add5 = (d, s, share) => {
+    let acc2;
+    let w;
+    if (d < s.radius || d <= field.eps) {
+      acc2 = disc;
+      w = (s.radius - d + field.eps) * share;
+    } else {
+      const e = d - s.radius;
+      acc2 = far;
+      w = share / (e * e);
+    }
+    acc2.w += w;
+    for (let k = 0; k < 4; k++) acc2.c[k] += w * s.c[k];
+  };
+  for (const s of field.points) add5(Math.hypot(s.x - p.x, s.y - p.y), s, 1);
+  for (const piece of field.pieces) {
+    const vx = piece.b.x - piece.a.x;
+    const vy = piece.b.y - piece.a.y;
+    const l2 = vx * vx + vy * vy;
+    const t = l2 > 0 ? Math.min(1, Math.max(0, ((p.x - piece.a.x) * vx + (p.y - piece.a.y) * vy) / l2)) : 0;
+    const s = lerpSource(piece.a, piece.b, t);
+    add5(Math.hypot(s.x - p.x, s.y - p.y), s, piece.share);
+  }
+  const acc = disc.w > 0 ? disc : far;
+  if (!(acc.w > 0 && Number.isFinite(acc.w))) return [0, 0, 0, 0];
+  return acc.c.map((v2) => v2 / acc.w);
+}
+function autoVectorFreeformGradient(b, colors, inside = () => true) {
+  const w = Math.max(b.width, 1e-9);
+  const h = Math.max(b.height, 1e-9);
+  const long = Math.min(4, Math.max(2, Math.round(2 * Math.max(w, h) / Math.min(w, h))));
+  const [cols, rows] = w >= h ? [long, 2] : [2, long];
+  const cell = (i, n2) => (i + 0.5) / n2;
+  const targets = [];
+  for (let j = 0; j < rows; j++) for (let k = 0; k < cols; k++) targets.push({ x: b.x + cell(j % 2 === 0 ? k : cols - 1 - k, cols) * w, y: b.y + cell(j, rows) * h });
+  const GRID = 24;
+  const candidates = [];
+  for (let k = 0; k < GRID * GRID; k++) {
+    const p = { x: b.x + cell(k % GRID, GRID) * w, y: b.y + cell(Math.floor(k / GRID), GRID) * h };
+    if (inside(p)) candidates.push(p);
+  }
+  const apart = Math.min(w, h) * 0.15;
+  const placed = [];
+  for (const t of targets) {
+    let at2 = t;
+    if (!inside(t)) {
+      let best = null;
+      let bestD = Infinity;
+      for (const c of candidates) {
+        if (!placed.every((q) => Math.hypot(q.x - c.x, q.y - c.y) >= apart)) continue;
+        const d = Math.hypot(c.x - t.x, c.y - t.y);
+        if (d < bestD) {
+          best = c;
+          bestD = d;
+        }
+      }
+      at2 = best ?? t;
+    }
+    placed.push(at2);
+  }
+  const palette = colors.length ? colors : ["#ffffff", "#000000"];
+  const n = placed.length;
+  const colorAt = (k) => {
+    if (palette.length === 1) return palette[0];
+    const t = k / Math.max(1, n - 1) * (palette.length - 1);
+    const i = Math.min(palette.length - 2, Math.floor(t));
+    const a = rgbaOf(palette[i]);
+    const c = rgbaOf(palette[i + 1]);
+    return vectorRgbaToCss(a.map((v2, q) => lerp(v2, c[q], t - i)));
+  };
+  return { type: "freeform", points: placed.map((p, k) => ({ x: p.x, y: p.y, color: colorAt(k) })) };
+}
+var fmt2 = (n, digits) => {
+  const k = 10 ** digits;
+  const v2 = Math.round(n * k) / k;
+  return Object.is(v2, -0) ? "0" : String(v2);
+};
+var quadD = (pts, precision) => `M${pts.map((p) => `${fmt2(p.x, precision)} ${fmt2(p.y, precision)}`).join("L")}Z`;
+function vectorShadedSvgDefs(paint, id, options = {}) {
+  const precision = options.precision ?? 3;
+  const bounds = options.bounds ?? null;
+  const area = options.area ?? (bounds ? { x: bounds.x - 1, y: bounds.y - 1, width: bounds.width + 2, height: bounds.height + 2 } : { x: 0, y: 0, width: 1, height: 1 });
+  const tiles = [];
+  const gradients = [];
+  if (isVectorMeshGradient(paint)) {
+    if (meshOk(paint)) {
+      const k = Math.max(1, Math.min(32, Math.round(options.meshCells ?? 8)));
+      for (let i = 0; i < paint.rows; i++) {
+        for (let j = 0; j < paint.columns; j++) {
+          const grid = [];
+          for (let a = 0; a <= k; a++) {
+            const row = [];
+            for (let b = 0; b <= k; b++) row.push(vectorMeshPointAt(paint, i, j, b / k, a / k));
+            grid.push(row);
+          }
+          for (let a = 0; a < k; a++) {
+            for (let b = 0; b < k; b++) {
+              const c = vectorMeshColorAt(paint, i, j, (b + 0.5) / k, (a + 0.5) / k);
+              if (c[3] <= 5e-4) continue;
+              const q = [grid[a][b], grid[a][b + 1], grid[a + 1][b + 1], grid[a + 1][b]];
+              const cx = (q[0].x + q[1].x + q[2].x + q[3].x) / 4;
+              const cy = (q[0].y + q[1].y + q[2].y + q[3].y) / 4;
+              const grow = (p) => ({ x: cx + (p.x - cx) * 1.12, y: cy + (p.y - cy) * 1.12 });
+              tiles.push({ d: quadD(q.map(grow), precision), fill: vectorRgbaToCss(c) });
+            }
+          }
+        }
+      }
+    }
+  } else if (bounds && paint.points.length) {
+    const field = vectorFreeformField(paint, vectorFreeformSpreadScale(bounds));
+    const n = Math.max(2, Math.min(256, Math.round(options.freeformCells ?? 96)));
+    const side = Math.max(area.width, area.height, 1e-9);
+    const rows = Math.max(2, Math.ceil(n * area.height / side));
+    const samples = Math.max(2, Math.min(96, Math.ceil(n * area.width / side) + 1));
+    const ch = area.height / rows;
+    for (let r = 0; r < rows; r++) {
+      const y = area.y + r * ch;
+      const stops = [];
+      for (let k = 0; k < samples; k++) {
+        const t = k / (samples - 1);
+        const c = sampleVectorFreeform(field, { x: area.x + t * area.width, y: y + ch / 2 });
+        const opaque = vectorRgbaToCss([c[0], c[1], c[2], 1]);
+        stops.push({ offset: `${fmt2(t * 100, 3)}%`, stopColor: opaque, ...c[3] < 0.9995 ? { stopOpacity: Math.round(Math.max(0, c[3]) * 1e3) / 1e3 } : {} });
+      }
+      const gid = `${id}-r${r}`;
+      gradients.push({ id: gid, type: "linear", attrs: { gradientUnits: "userSpaceOnUse", x1: fmt2(area.x, precision), y1: "0", x2: fmt2(area.x + area.width, precision), y2: "0" }, stops });
+      const h = r < rows - 1 ? ch * 1.25 : ch;
+      tiles.push({ d: quadD([{ x: area.x, y }, { x: area.x + area.width, y }, { x: area.x + area.width, y: y + h }, { x: area.x, y: y + h }], precision), fill: `url(#${gid})` });
+    }
+  }
+  return [{ id, type: "pattern", attrs: patternAttrs(area), gradients, tiles }];
+}
+var apply2 = (m, p) => ({ x: m[0] * p.x + m[2] * p.y + m[4], y: m[1] * p.x + m[3] * p.y + m[5] });
+function mapVectorShadedPaint(paint, f) {
+  if (isVectorMeshGradient(paint)) return { ...paint, points: paint.points.map((p) => f(p)) };
+  return { ...paint, points: paint.points.map((p) => ({ ...p, ...f(p) })) };
+}
+function transformVectorShadedPaint(paint, m) {
+  return mapVectorShadedPaint(paint, (p) => apply2(m, p));
+}
+var finite = (v2) => typeof v2 === "number" && Number.isFinite(v2);
+var color = (v2) => typeof v2 === "string" && parseVectorColor(v2) ? v2 : null;
+function sanitizeVectorShadedPaint(input) {
+  if (!input || typeof input !== "object") return null;
+  const r = input;
+  if (r.type === "mesh") {
+    const rows = r.rows;
+    const columns = r.columns;
+    if (!finite(rows) || !finite(columns) || rows < 1 || columns < 1 || rows > VECTOR_MESH_MAX || columns > VECTOR_MESH_MAX || !Number.isInteger(rows) || !Number.isInteger(columns)) return null;
+    const n = (rows + 1) * (columns + 1);
+    if (!Array.isArray(r.points) || !Array.isArray(r.colors) || r.points.length !== n || r.colors.length !== n) return null;
+    const points = [];
+    for (const p of r.points) {
+      const q = p;
+      if (!q || !finite(q.x) || !finite(q.y)) return null;
+      points.push({ x: q.x, y: q.y });
+    }
+    const colors = [];
+    for (const c of r.colors) {
+      const k = color(c);
+      if (!k) return null;
+      colors.push(k);
+    }
+    const out = { type: "mesh", rows, columns, points, colors };
+    if (Array.isArray(r.opacities) && r.opacities.length === n && r.opacities.every(finite)) out.opacities = r.opacities.map((o) => Math.min(1, Math.max(0, o)));
+    return out;
+  }
+  if (r.type === "freeform") {
+    if (!Array.isArray(r.points) || !r.points.length) return null;
+    const points = [];
+    for (const p of r.points) {
+      const q = p;
+      const c = q ? color(q.color) : null;
+      if (!q || !finite(q.x) || !finite(q.y) || !c) return null;
+      points.push({
+        x: q.x,
+        y: q.y,
+        color: c,
+        ...finite(q.opacity) && q.opacity < 1 ? { opacity: Math.max(0, q.opacity) } : {},
+        ...finite(q.spread) && q.spread > 0 ? { spread: Math.min(1, q.spread) } : {}
+      });
+    }
+    const out = { type: "freeform", points };
+    if (Array.isArray(r.lines)) {
+      const lines = r.lines.filter((l) => Array.isArray(l) && l.length >= 2 && l.every((i) => Number.isInteger(i) && i >= 0 && i < points.length) && l.every((i, k) => k === 0 || i !== l[k - 1]));
+      if (lines.length) out.lines = lines.map((l) => [...l]);
+    }
+    return out;
+  }
+  return null;
+}
+function removeVectorFreeformPoint(f, index) {
+  if (index < 0 || index >= f.points.length || f.points.length <= 1) return null;
+  const points = f.points.filter((_, k) => k !== index);
+  const lines = (f.lines ?? []).map(
+    (l) => l.filter((i) => i !== index).map((i) => i > index ? i - 1 : i).filter((i, k, arr) => k === 0 || i !== arr[k - 1])
+  ).filter((l) => l.length >= 2);
+  return { type: "freeform", points, ...lines.length ? { lines } : {} };
+}
+function nearestVectorShadingPoint(paint, p, radius) {
+  let best = -1;
+  let bestD = radius;
+  paint.points.forEach((q, k) => {
+    const d = Math.hypot(q.x - p.x, q.y - p.y);
+    if (d <= bestD) {
+      best = k;
+      bestD = d;
+    }
+  });
+  return best;
+}
+
 // src/geom/affine.ts
 var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
 function multiplyMatrices(a, b) {
@@ -1472,7 +1833,7 @@ var SAMPLES_PER_SUBPATH = 128;
 var MAX_DASHES = 5e3;
 var sub3 = (a, b) => [a[0] - b[0], a[1] - b[1]];
 var along = (p, v2, k) => [p[0] + v2[0] * k, p[1] + v2[1] * k];
-var lerp = (a, b, u) => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u];
+var lerp2 = (a, b, u) => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u];
 var dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
 var unitOf = (v2) => {
   const l = Math.hypot(v2[0], v2[1]);
@@ -1507,7 +1868,7 @@ function flatten(segments, closed, tol) {
   for (let i = 1; i < pts.length; i++) {
     const n = Math.max(1, Math.ceil(dist(pts[i - 1], pts[i]) / step));
     for (let k = 1; k <= n; k++) {
-      fine.push(k === n ? pts[i] : lerp(pts[i - 1], pts[i], k / n));
+      fine.push(k === n ? pts[i] : lerp2(pts[i - 1], pts[i], k / n));
       fineCorner.push(k === n ? corner[i] : false);
     }
   }
@@ -1544,7 +1905,7 @@ function at(poly, t) {
   const a = poly.s[i - 1];
   const b = poly.s[i];
   const u = b > a ? Math.min(Math.max((t - a) / (b - a), 0), 1) : 0;
-  return [lerp(poly.pts[i - 1], poly.pts[i], u), i];
+  return [lerp2(poly.pts[i - 1], poly.pts[i], u), i];
 }
 function arcPoints(c, a0, sweep, r0, r1, tol) {
   const r = Math.max(r0, r1);
@@ -1742,7 +2103,7 @@ function nearestStrokePosition(path, p, only) {
       if (!best || near3.distance < best.distance) {
         const s = acc + segmentLength(seg, 0, near3.t);
         const tan = segmentTangent(seg, near3.t);
-        const pt2 = seg.length === 2 ? lerp(seg[0], seg[1], near3.t) : evalSeg(seg, near3.t);
+        const pt2 = seg.length === 2 ? lerp2(seg[0], seg[1], near3.t) : evalSeg(seg, near3.t);
         const n = leftNormal([tan[0], tan[1]]);
         const side = (p[0] - pt2[0]) * n[0] + (p[1] - pt2[1]) * n[1] >= 0 ? "left" : "right";
         best = { contour: ci, t: Math.min(Math.max(s / total, 0), 1), distance: near3.distance, side, point: pt2, tangent: [tan[0], tan[1]], length: total };
@@ -1754,7 +2115,7 @@ function nearestStrokePosition(path, p, only) {
 }
 function evalSeg(seg, t) {
   let pts = seg.map((q) => [q[0], q[1]]);
-  while (pts.length > 1) pts = pts.slice(1).map((q, i) => lerp(pts[i], q, t));
+  while (pts.length > 1) pts = pts.slice(1).map((q, i) => lerp2(pts[i], q, t));
   return pts[0];
 }
 function strokePositionPoint(path, index, t) {
@@ -2174,7 +2535,7 @@ function normalizeVectorPaintStacks(node, prefer = "shorthand") {
 function sanitizePaint(value) {
   if (value === null || value === void 0) return null;
   if (typeof value === "string") return value;
-  return sanitizeVectorGradient(value);
+  return sanitizeVectorShadedPaint(value) ?? sanitizeVectorGradient(value);
 }
 function sanitizeLayerBase(raw) {
   const out = { paint: sanitizePaint(raw.paint) };
@@ -2292,22 +2653,22 @@ function withVectorTargetPaint(node, target, layer, paint) {
 var MAX_PIECES = 1 << 20;
 var MAX_DEPTH = 6;
 var PROBES = [0.25, 0.5, 0.75];
-var lerp2 = (a, b, t) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
+var lerp3 = (a, b, t) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
 var dist2 = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
 var same = (a, b) => Math.abs(a.x - b.x) < 1e-9 && Math.abs(a.y - b.y) < 1e-9;
 function evalCubic(s, t) {
-  const ab = lerp2(s[0], s[1], t);
-  const bc = lerp2(s[1], s[2], t);
-  const cd = lerp2(s[2], s[3], t);
-  return lerp2(lerp2(ab, bc, t), lerp2(bc, cd, t), t);
+  const ab = lerp3(s[0], s[1], t);
+  const bc = lerp3(s[1], s[2], t);
+  const cd = lerp3(s[2], s[3], t);
+  return lerp3(lerp3(ab, bc, t), lerp3(bc, cd, t), t);
 }
 function halves(s) {
-  const ab = lerp2(s[0], s[1], 0.5);
-  const bc = lerp2(s[1], s[2], 0.5);
-  const cd = lerp2(s[2], s[3], 0.5);
-  const abc = lerp2(ab, bc, 0.5);
-  const bcd = lerp2(bc, cd, 0.5);
-  const m = lerp2(abc, bcd, 0.5);
+  const ab = lerp3(s[0], s[1], 0.5);
+  const bc = lerp3(s[1], s[2], 0.5);
+  const cd = lerp3(s[2], s[3], 0.5);
+  const abc = lerp3(ab, bc, 0.5);
+  const bcd = lerp3(bc, cd, 0.5);
+  const m = lerp3(abc, bcd, 0.5);
   return [
     [s[0], ab, abc, m],
     [m, bcd, cd, s[3]]
@@ -2369,8 +2730,8 @@ function mapSegment(seg, f, tol, depth, fit) {
   if (same(seg[1], seg[0]) && same(seg[2], seg[3])) {
     const a = f(seg[0]);
     const b = f(seg[3]);
-    if (PROBES.every((t) => offLine(f(lerp2(seg[0], seg[3], t)), a, b) <= tol)) return [[a, a, b, b]];
-    const line = [seg[0], lerp2(seg[0], seg[3], 1 / 3), lerp2(seg[0], seg[3], 2 / 3), seg[3]];
+    if (PROBES.every((t) => offLine(f(lerp3(seg[0], seg[3], t)), a, b) <= tol)) return [[a, a, b, b]];
+    const line = [seg[0], lerp3(seg[0], seg[3], 1 / 3), lerp3(seg[0], seg[3], 2 / 3), seg[3]];
     const out2 = [];
     splitMapped(line, f, tol, depth, out2);
     return fit ? refit(line, out2, f, tol) : out2;
@@ -2487,11 +2848,11 @@ function vectorFrameChildMatrix(resizing, box, from, to) {
   const sy = box.height > 1e-9 ? (y1 - y0) / box.height : 1;
   return [sx, 0, 0, sy, x0 - sx * box.x, y0 - sy * box.y];
 }
-var finite = (v2) => typeof v2 === "number" && Number.isFinite(v2);
+var finite2 = (v2) => typeof v2 === "number" && Number.isFinite(v2);
 function sanitizeVectorFrame(value) {
   if (!value || typeof value !== "object") return null;
   const r = value;
-  if (!finite(r.x) || !finite(r.y) || !finite(r.width) || !finite(r.height) || r.width < 0 || r.height < 0) return null;
+  if (!finite2(r.x) || !finite2(r.y) || !finite2(r.width) || !finite2(r.height) || r.width < 0 || r.height < 0) return null;
   const out = { x: r.x, y: r.y, width: r.width, height: r.height };
   if (typeof r.fill === "string" || r.fill && typeof r.fill === "object") out.fill = r.fill;
   if (r.clip === false) out.clip = false;
@@ -4621,14 +4982,14 @@ function bezierToSubpathsLite(path) {
   }
   return out.filter((sp) => sp.anchors.length);
 }
-var fmt2 = (n) => Math.round(n * 1e3) / 1e3;
+var fmt3 = (n) => Math.round(n * 1e3) / 1e3;
 function vectorTextSpanSvg(sp, fill) {
-  const list = (v2) => v2.map(fmt2).join(" ");
+  const list = (v2) => v2.map(fmt3).join(" ");
   const deco = [sp.style.underline ? "underline" : "", sp.style.strikethrough ? "line-through" : ""].filter(Boolean).join(" ");
   return {
     text: sp.text,
     x: list(sp.x),
-    y: sp.y.every((v2) => v2 === sp.y[0]) ? String(fmt2(sp.y[0])) : list(sp.y),
+    y: sp.y.every((v2) => v2 === sp.y[0]) ? String(fmt3(sp.y[0])) : list(sp.y),
     ...sp.rotate ? { rotate: list(sp.rotate) } : {},
     fontFamily: cssFontFamily(sp.family),
     fontSize: sp.style.fontSize,
@@ -6417,13 +6778,13 @@ function vectorConnectorTargetAt(nodes, p, radius, exclude) {
 var SHARP = 1.25;
 var TOLERANCE = 0.2;
 var OVERLAP = 0.5;
-var fmt3 = (n, digits = 3) => {
+var fmt4 = (n, digits = 3) => {
   const k = 10 ** digits;
   const v2 = Math.round(n * k) / k;
   return Object.is(v2, -0) ? "0" : String(v2);
 };
-var toSvgStops2 = (stops) => stops.map((s) => ({ offset: `${fmt3(s.offset * 100)}%`, stopColor: s.color, ...s.opacity !== void 0 && s.opacity !== 1 ? { stopOpacity: Math.round(s.opacity * 1e4) / 1e4 } : {} }));
-var polygonD2 = (pts, precision) => `M${pts.map((p) => `${fmt3(p.x, precision)} ${fmt3(p.y, precision)}`).join("L")}Z`;
+var toSvgStops2 = (stops) => stops.map((s) => ({ offset: `${fmt4(s.offset * 100)}%`, stopColor: s.color, ...s.opacity !== void 0 && s.opacity !== 1 ? { stopOpacity: Math.round(s.opacity * 1e4) / 1e4 } : {} }));
+var polygonD2 = (pts, precision) => `M${pts.map((p) => `${fmt4(p.x, precision)} ${fmt4(p.y, precision)}`).join("L")}Z`;
 var add4 = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
 var sub4 = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });
 var scale2 = (a, k) => ({ x: a.x * k, y: a.y * k });
@@ -6542,7 +6903,7 @@ function vectorStrokeGradientDefs(g, id, node, options = {}) {
         gradients.push({
           id: gid,
           type: "linear",
-          attrs: { gradientUnits: "userSpaceOnUse", x1: fmt3(a.x, 4), y1: fmt3(a.y, 4), x2: fmt3(b.x, 4), y2: fmt3(b.y, 4) },
+          attrs: { gradientUnits: "userSpaceOnUse", x1: fmt4(a.x, 4), y1: fmt4(a.y, 4), x2: fmt4(b.x, 4), y2: fmt4(b.y, 4) },
           stops: toSvgStops2(spanVectorGradientStops(g, t0, t1, expanded))
         });
       } else {
@@ -6556,7 +6917,7 @@ function vectorStrokeGradientDefs(g, id, node, options = {}) {
         gradients.push({
           id: gid,
           type: "linear",
-          attrs: { gradientUnits: "userSpaceOnUse", x1: fmt3(p0.x, 4), y1: fmt3(p0.y, 4), x2: fmt3(p1.x, 4), y2: fmt3(p1.y, 4) },
+          attrs: { gradientUnits: "userSpaceOnUse", x1: fmt4(p0.x, 4), y1: fmt4(p0.y, 4), x2: fmt4(p1.x, 4), y2: fmt4(p1.y, 4) },
           stops: toSvgStops2(expanded)
         });
       }
@@ -6615,6 +6976,20 @@ var paintCache = /* @__PURE__ */ new WeakMap();
 function vectorPaintToSvg(paint, gradientId, options = {}) {
   if (!hasPaint(paint)) return { value: "none", defs: [] };
   if (typeof paint === "string") return { value: paint, defs: [] };
+  if (isVectorShadedPaint(paint)) {
+    const node2 = options.node;
+    const bounds2 = node2 ? vectorPathLocalBounds(node2) : null;
+    const reach2 = node2 && options.role === "stroke" ? vectorStrokeReach(node2) + 1 : 1;
+    const area2 = bounds2 ? { x: bounds2.x - reach2, y: bounds2.y - reach2, width: bounds2.width + 2 * reach2, height: bounds2.height + 2 * reach2 } : null;
+    const key2 = `${gradientId}|${options.role ?? "fill"}|${options.precision ?? 3}|${area2 ? [area2.x, area2.y, area2.width, area2.height].join(",") : ""}`;
+    let byKey2 = paintCache.get(paint);
+    const hit = byKey2?.get(key2);
+    if (hit) return { value: `url(#${gradientId})`, defs: hit };
+    const defs2 = vectorShadedSvgDefs(paint, gradientId, { bounds: bounds2, area: area2, precision: options.precision ?? 3 });
+    if (!byKey2) paintCache.set(paint, byKey2 = /* @__PURE__ */ new Map());
+    byKey2.set(key2, defs2);
+    return { value: `url(#${gradientId})`, defs: defs2 };
+  }
   if (!isVectorGradient(paint)) return { value: "none", defs: [] };
   const role = options.role ?? "fill";
   const precision = options.precision ?? 3;
@@ -6754,6 +7129,7 @@ function vectorDocumentToSvg(doc, options = {}) {
     if (node.type === "group" && node.blend) out2 += ` data-vector-blend="${escapeAttr2(JSON.stringify(node.blend))}"`;
     if (node.booleanOperation) out2 += ` data-vector-boolean-operation="${node.booleanOperation}"`;
     if (node.resizing) out2 += ` data-vector-resizing="${escapeAttr2(JSON.stringify(node.resizing))}"`;
+    if (node.type === "path" && isVectorShadedPaint(node.fill)) out2 += ` data-vector-shading="${escapeAttr2(JSON.stringify(node.fill))}"`;
     if (node.type === "path" && node.connector) out2 += ` data-vector-connector="${escapeAttr2(JSON.stringify(node.connector))}"`;
     const blend = vectorBlendModeCss(node.blendMode);
     if (blend) out2 += ` style="mix-blend-mode:${blend}"`;
@@ -7917,7 +8293,7 @@ function parseVectorSvg(svg, options = {}) {
           type: "path",
           ...meta,
           subpaths,
-          fill: child.name === "line" ? null : paint(s.fill),
+          fill: child.name === "line" ? null : sanitizeVectorShadedPaint(parseJson(child.attrs["data-vector-shading"])) ?? paint(s.fill),
           stroke: paint(s.stroke),
           ...strokeStyle(s)
         },
@@ -8366,15 +8742,15 @@ function bakeIntoGeometry(node, m) {
   const mirrored = flips && path.strokeWidthProfile?.length;
   const layer = (l) => ({
     ...l,
-    ...isVectorGradient(l.paint) ? { paint: transformVectorPaint(l.paint, m) } : {},
+    ...isVectorGradient(l.paint) || isVectorShadedPaint(l.paint) ? { paint: transformVectorPaint(l.paint, m) } : {},
     ...flips && l.strokeWidthProfile?.length ? { strokeWidthProfile: mirrorWidthProfile(l.strokeWidthProfile) } : {}
   });
   return {
     ...path,
     ...mirrored ? { strokeWidthProfile: mirrorWidthProfile(path.strokeWidthProfile) } : {},
     // Gradients in the node's own space move with its geometry.
-    ...isVectorGradient(path.fill) ? { fill: transformVectorPaint(path.fill, m) } : {},
-    ...isVectorGradient(path.stroke) ? { stroke: transformVectorPaint(path.stroke, m) } : {},
+    ...isVectorGradient(path.fill) || isVectorShadedPaint(path.fill) ? { fill: transformVectorPaint(path.fill, m) } : {},
+    ...isVectorGradient(path.stroke) || isVectorShadedPaint(path.stroke) ? { stroke: transformVectorPaint(path.stroke, m) } : {},
     ...Array.isArray(path.fills) ? { fills: path.fills.map(layer) } : {},
     ...Array.isArray(path.strokes) ? { strokes: path.strokes.map(layer) } : {},
     ...path.type === "path" ? {
@@ -8975,6 +9351,26 @@ function pathsCenter(paths) {
 }
 
 export {
+  isVectorMeshGradient,
+  isVectorFreeformGradient,
+  isVectorShadedPaint,
+  vectorRgbaToCss,
+  VECTOR_MESH_MAX,
+  createVectorMeshGradient,
+  vectorMeshPointAt,
+  vectorMeshColorAt,
+  vectorMeshLines,
+  vectorFreeformSpreadScale,
+  vectorFreeformLineSegments,
+  vectorFreeformField,
+  sampleVectorFreeform,
+  autoVectorFreeformGradient,
+  vectorShadedSvgDefs,
+  mapVectorShadedPaint,
+  transformVectorShadedPaint,
+  sanitizeVectorShadedPaint,
+  removeVectorFreeformPoint,
+  nearestVectorShadingPoint,
   VECTOR_CORNER_KINDS,
   VECTOR_GRADIENT_TYPES,
   VECTOR_GRADIENT_SPREADS,
@@ -9398,4 +9794,4 @@ export {
   lineSubpath,
   roundSubpaths
 };
-//# sourceMappingURL=chunk-VXR7XWMF.js.map
+//# sourceMappingURL=chunk-7LNZAWSJ.js.map