@pixerate/editor 0.129.0 → 0.131.0

package/dist/{chunk-ROZFX4QI.js → chunk-IEYXYMRQ.js}

@@ -12,6 +12,7 @@ import {
   pathBoolean,
   pathToContours,
   pointInBezierPath,
+  pointInRings,
   polygonBoolean,
   segmentBounds,
   segmentDerivative,
@@ -73,6 +74,7 @@ var VECTOR_BLEND_MODES = [
 ];
 var VECTOR_HORIZONTAL_RESIZING = ["left", "right", "leftRight", "center", "scale"];
 var VECTOR_VERTICAL_RESIZING = ["top", "bottom", "topBottom", "center", "scale"];
+var VECTOR_LENS_TYPES = ["transparency", "magnify", "fisheye", "brighten", "invert", "tintedGrayscale", "colorAdd", "colorLimit", "heatMap", "wireframe"];
 var VECTOR_CONNECTOR_SIDES = ["auto", "top", "right", "bottom", "left", "center"];
 var VECTOR_CONNECTOR_ROUTES = ["straight", "elbow", "curved"];
 var VECTOR_BLEND_SPACINGS = ["steps", "distance", "smoothColor"];
@@ -124,7 +126,7 @@ var VECTOR_TOOLS = [
 ];
 var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rotate"];
 var VECTOR_PATHFINDER_OPERATIONS = ["divide", "trim", "merge", "crop", "outline", "minusBack"];
-var VECTOR_EFFECT_TYPES = ["trim", "roundCorners", "puckerBloat", "twist", "zigzag", "wiggle", "offset", "merge", "repeater", "envelope", "contour", "blockShadow"];
+var VECTOR_EFFECT_TYPES = ["trim", "roundCorners", "puckerBloat", "twist", "zigzag", "wiggle", "offset", "merge", "repeater", "envelope", "contour", "blockShadow", "extrude", "bevel"];
 var VECTOR_MERGE_MODES = ["merge", "add", "subtract", "intersect", "exclude"];
 var VECTOR_FILTER_TYPES = ["dropShadow", "innerShadow", "outerGlow", "innerGlow", "layerBlur", "feather"];
 
@@ -5550,6 +5552,458 @@ function vectorInstanceGroup(node, bake) {
 }
 var composeVectorMatrices = (a, b) => multiplyMatrices(a, b);
 
+// src/vector/extrude.ts
+function vectorPaintSolid(paint) {
+  if (paint == null || paint === "none") return null;
+  if (typeof paint === "string") return paint;
+  const stops = paint.stops;
+  if (stops?.length) return stops.reduce((a, b) => Math.abs(b.offset - 0.5) < Math.abs(a.offset - 0.5) ? b : a).color;
+  const colors = paint.colors;
+  if (colors?.length) return colors[0];
+  const points = paint.points;
+  return points?.find((p) => typeof p.color === "string")?.color ?? null;
+}
+function shadeVectorColor(color2, amount) {
+  const c = parseVectorColor(color2);
+  if (!c) return color2;
+  const a = Math.min(1, Math.max(-1, amount));
+  const target = a >= 0 ? 1 : 0;
+  const h = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
+  const m = [0, 1, 2].map((k) => c[k] + (target - c[k]) * Math.abs(a));
+  return `#${h(m[0])}${h(m[1])}${h(m[2])}`;
+}
+function vectorPathRings(path, tolerance = 0.5) {
+  const rings = [];
+  for (const contour of pathToContours(path)) {
+    const ring = flattenChain(closeContour(contour, true), Math.max(1e-3, tolerance));
+    if (ring.length >= 2) rings.push(ring);
+  }
+  return rings;
+}
+function vectorExtrudeFaces(path, params) {
+  const box = bezierPathBounds(path);
+  if (!box || !path.length) return [];
+  const perspective = params.mode === "perspective";
+  const rad2 = params.angle * Math.PI / 180;
+  const d = [Math.cos(rad2) * Math.max(0, params.depth), Math.sin(rad2) * Math.max(0, params.depth)];
+  const vp = [(box.minX + box.maxX) / 2 + params.vanishingPoint.x, (box.minY + box.maxY) / 2 + params.vanishingPoint.y];
+  const pull = Math.min(1, Math.max(0, params.toward / 100));
+  const back = (p) => perspective ? [p[0] + (vp[0] - p[0]) * pull, p[1] + (vp[1] - p[1]) * pull] : [p[0] + d[0], p[1] + d[1]];
+  if (perspective ? pull <= 0 : Math.hypot(d[0], d[1]) < 1e-9) return [];
+  const lr = params.lightAngle * Math.PI / 180;
+  const light = [Math.cos(lr), Math.sin(lr)];
+  const strength = Math.min(1, Math.max(0, params.shading / 100));
+  const u = perspective ? [0, 0] : [d[0] / Math.hypot(d[0], d[1]), d[1] / Math.hypot(d[0], d[1])];
+  const centre = [(box.minX + box.maxX) / 2, (box.minY + box.maxY) / 2];
+  const aim = Math.atan2(centre[1] - vp[1], centre[0] - vp[0]);
+  const across = (p) => {
+    if (!perspective) return -p[0] * u[1] + p[1] * u[0];
+    let a = Math.atan2(p[1] - vp[1], p[0] - vp[0]) - aim;
+    while (a > Math.PI) a -= 2 * Math.PI;
+    while (a <= -Math.PI) a += 2 * Math.PI;
+    return a;
+  };
+  const towardBack = (p, q, l) => {
+    const lp = across(p);
+    const lq = across(q);
+    const t = Math.abs(lq - lp) < 1e-12 ? 0.5 : Math.min(1, Math.max(0, (l - lp) / (lq - lp)));
+    const x = [p[0] + (q[0] - p[0]) * t, p[1] + (q[1] - p[1]) * t];
+    return perspective ? -Math.hypot(vp[0] - x[0], vp[1] - x[1]) : x[0] * u[0] + x[1] * u[1];
+  };
+  const faces = [];
+  for (const ring of vectorPathRings(path, 0.25)) {
+    for (let i = 0; i < ring.length; i++) {
+      const p = ring[i];
+      const q = ring[(i + 1) % ring.length];
+      const ex = q[0] - p[0];
+      const ey = q[1] - p[1];
+      const len2 = Math.hypot(ex, ey);
+      if (len2 < 1e-9) continue;
+      const pb = back(p);
+      const qb = back(q);
+      const mid = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
+      const away = perspective ? [vp[0] - mid[0], vp[1] - mid[1]] : d;
+      let n2 = [ey / len2, -ex / len2];
+      if (n2[0] * away[0] + n2[1] * away[1] < 0) n2 = [-n2[0], -n2[1]];
+      const shade = (n2[0] * light[0] + n2[1] * light[1]) * strength;
+      const lp = across(p);
+      const lq = across(q);
+      faces.push({
+        p,
+        q,
+        lo: Math.min(lp, lq),
+        hi: Math.max(lp, lq),
+        key: towardBack(p, q, (lp + lq) / 2),
+        face: {
+          shade,
+          path: [{ type: "M", x: p[0], y: p[1] }, { type: "L", x: q[0], y: q[1] }, { type: "L", x: qb[0], y: qb[1] }, { type: "L", x: pb[0], y: pb[1] }, { type: "Z" }]
+        }
+      });
+    }
+  }
+  faces.sort((a, b) => a.key - b.key);
+  const n = faces.length;
+  const after = faces.map(() => []);
+  const before = new Array(n).fill(0);
+  const eps = 1e-9;
+  for (let i = 0; i < n; i++) {
+    for (let j = i + 1; j < n; j++) {
+      const lo = Math.max(faces[i].lo, faces[j].lo);
+      const hi = Math.min(faces[i].hi, faces[j].hi);
+      if (hi - lo <= eps * Math.max(1, Math.abs(hi))) continue;
+      const l = (lo + hi) / 2;
+      const di = towardBack(faces[i].p, faces[i].q, l);
+      const dj = towardBack(faces[j].p, faces[j].q, l);
+      if (Math.abs(di - dj) < 1e-9) continue;
+      const [back0, front] = di < dj ? [i, j] : [j, i];
+      after[back0].push(front);
+      before[front]++;
+    }
+  }
+  const order = [];
+  const done = new Array(n).fill(false);
+  let next = 0;
+  while (order.length < n) {
+    let pick = -1;
+    for (let i = next; i < n; i++) {
+      if (!done[i] && before[i] === 0) {
+        pick = i;
+        break;
+      }
+    }
+    if (pick < 0) pick = done.indexOf(false);
+    done[pick] = true;
+    order.push(pick);
+    for (const k of after[pick]) before[k]--;
+    while (next < n && done[next]) next++;
+  }
+  return order.map((i) => faces[i].face);
+}
+
+// src/vector/bevel.ts
+var MITER_LIMIT = 4;
+function crossing2(a, b, c, d) {
+  const rx = b[0] - a[0];
+  const ry = b[1] - a[1];
+  const sx = d[0] - c[0];
+  const sy = d[1] - c[1];
+  const den = rx * sy - ry * sx;
+  if (Math.abs(den) < 1e-12) return null;
+  const t = ((c[0] - a[0]) * sy - (c[1] - a[1]) * sx) / den;
+  const u = ((c[0] - a[0]) * ry - (c[1] - a[1]) * rx) / den;
+  return t > 1e-9 && t <= 1 && u >= 0 && u <= 1 ? t : null;
+}
+function vectorBevelFaces(path, params, fillRule = "nonzero") {
+  const width = Math.max(0, params.width);
+  if (!path.length || width <= 0) return [];
+  const rings = vectorPathRings(path, 0.25).filter((r) => r.length >= 3);
+  const lr = params.lightAngle * Math.PI / 180;
+  const light = [Math.cos(lr), Math.sin(lr)];
+  const strength = Math.min(1, Math.max(0, params.shading / 100));
+  const faces = [];
+  for (const ring of rings) {
+    const n = ring.length;
+    let best = 0;
+    let bestLen = -1;
+    for (let i = 0; i < n; i++) {
+      const q = ring[(i + 1) % n];
+      const l = Math.hypot(q[0] - ring[i][0], q[1] - ring[i][1]);
+      if (l > bestLen) [best, bestLen] = [i, l];
+    }
+    if (bestLen < 1e-9) continue;
+    const bp = ring[best];
+    const bq = ring[(best + 1) % n];
+    const left2 = [-(bq[1] - bp[1]) / bestLen, (bq[0] - bp[0]) / bestLen];
+    const probe = Math.min(bestLen / 4, 1e-3 * Math.max(1, bestLen));
+    const sign = pointInRings([(bp[0] + bq[0]) / 2 + left2[0] * probe, (bp[1] + bq[1]) / 2 + left2[1] * probe], rings, fillRule) ? 1 : -1;
+    const normals = ring.map((p, i) => {
+      const q = ring[(i + 1) % n];
+      const l = Math.hypot(q[0] - p[0], q[1] - p[1]);
+      return l < 1e-9 ? null : [-(q[1] - p[1]) / l * sign, (q[0] - p[0]) / l * sign];
+    });
+    const normalAt = (i, step) => {
+      for (let k = 0; k < n; k++) {
+        const v2 = normals[((i + step * k) % n + n) % n];
+        if (v2) return v2;
+      }
+      return [0, 0];
+    };
+    const inset = ring.map((p, i) => {
+      const a = normalAt(i - 1, -1);
+      const b = normalAt(i, 1);
+      let bx = a[0] + b[0];
+      let by = a[1] + b[1];
+      const bl = Math.hypot(bx, by);
+      if (bl < 1e-9) [bx, by] = [b[0], b[1]];
+      else [bx, by] = [bx / bl, by / bl];
+      const cos = bx * b[0] + by * b[1];
+      let len2 = width / Math.max(cos, 1 / MITER_LIMIT);
+      const end = [p[0] + bx * len2, p[1] + by * len2];
+      let t = 1;
+      for (const other of rings) {
+        const m = other.length;
+        for (let j = 0; j < m; j++) {
+          const c = other[j];
+          const d = other[(j + 1) % m];
+          if (c === p || d === p) continue;
+          const hit = crossing2(p, end, c, d);
+          if (hit !== null && hit < t) t = hit;
+        }
+      }
+      if (t < 1) len2 *= t / 2;
+      return [p[0] + bx * len2, p[1] + by * len2];
+    });
+    for (let i = 0; i < n; i++) {
+      const nrm = normals[i];
+      if (!nrm) continue;
+      const j = (i + 1) % n;
+      const shade = (-nrm[0] * light[0] - nrm[1] * light[1]) * strength;
+      faces.push({
+        shade,
+        path: [
+          { type: "M", x: ring[i][0], y: ring[i][1] },
+          { type: "L", x: ring[j][0], y: ring[j][1] },
+          { type: "L", x: inset[j][0], y: inset[j][1] },
+          { type: "L", x: inset[i][0], y: inset[i][1] },
+          { type: "Z" }
+        ]
+      });
+    }
+  }
+  return faces;
+}
+
+// src/vector/lens.ts
+function isVectorLens(node) {
+  return !!node && node.type === "path" && !!node.lens && VECTOR_LENS_TYPES.includes(node.lens.type);
+}
+var VECTOR_LENS_LABELS = {
+  transparency: "Transparency",
+  magnify: "Magnify",
+  fisheye: "Fish Eye",
+  brighten: "Brighten",
+  invert: "Invert",
+  tintedGrayscale: "Tinted Grayscale",
+  colorAdd: "Color Add",
+  colorLimit: "Color Limit",
+  heatMap: "Heat Map",
+  wireframe: "Wireframe"
+};
+var VECTOR_LENS_SPECS = {
+  transparency: { min: 0, max: 100, amount: 50, color: null, unit: "percent see-through" },
+  magnify: { min: 1, max: 20, amount: 2, color: null, unit: "times" },
+  fisheye: { min: -100, max: 100, amount: 50, color: null, unit: "percent, negative pinches" },
+  brighten: { min: -100, max: 100, amount: 40, color: null, unit: "percent, negative darkens" },
+  invert: { min: 0, max: 100, amount: 100, color: null, unit: "percent strength" },
+  tintedGrayscale: { min: 0, max: 100, amount: 100, color: "#b45309", unit: "percent strength" },
+  colorAdd: { min: 0, max: 100, amount: 50, color: "#ff0000", unit: "percent of the colour added" },
+  colorLimit: { min: 0, max: 100, amount: 100, color: "#22c55e", unit: "percent strength" },
+  heatMap: { min: 0, max: 100, amount: 0, color: null, unit: "percent the palette is turned" },
+  wireframe: { min: 0, max: 100, amount: 100, color: "#0f172a", unit: "percent outline opacity" }
+};
+function sanitizeVectorLens(value) {
+  if (!value || typeof value !== "object") return null;
+  const r = value;
+  if (typeof r.type !== "string" || !VECTOR_LENS_TYPES.includes(r.type)) return null;
+  const type = r.type;
+  const spec = VECTOR_LENS_SPECS[type];
+  const amount = typeof r.amount === "number" && Number.isFinite(r.amount) ? Math.min(spec.max, Math.max(spec.min, r.amount)) : spec.amount;
+  const out = { type, amount };
+  if (spec.color !== null) out.color = typeof r.color === "string" && parseVectorColor(r.color) ? r.color : spec.color;
+  return out;
+}
+var hex22 = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
+var formatRgba = (c) => c[3] >= 1 ? `#${hex22(c[0])}${hex22(c[1])}${hex22(c[2])}` : `rgba(${Math.round(c[0] * 255)}, ${Math.round(c[1] * 255)}, ${Math.round(c[2] * 255)}, ${Math.round(c[3] * 1e3) / 1e3})`;
+var luma = (c) => 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+var mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, a[3]];
+var HEAT = [
+  [0, "#1e1b4b"],
+  [0.25, "#2563eb"],
+  [0.5, "#22c55e"],
+  [0.7, "#facc15"],
+  [0.85, "#f97316"],
+  [1, "#dc2626"]
+];
+var heatAt = (t) => {
+  const u = (t % 1 + 1) % 1;
+  for (let i = 1; i < HEAT.length; i++) {
+    if (u <= HEAT[i][0]) {
+      const a = parseVectorColor(HEAT[i - 1][1]);
+      const b = parseVectorColor(HEAT[i][1]);
+      const k = (u - HEAT[i - 1][0]) / (HEAT[i][0] - HEAT[i - 1][0]);
+      return [0, 1, 2].map((c) => a[c] + (b[c] - a[c]) * k);
+    }
+  }
+  return parseVectorColor(HEAT[HEAT.length - 1][1]).slice(0, 3);
+};
+function vectorLensColorMap(lens) {
+  const tint = parseVectorColor(lens.color ?? "#000000") ?? [0, 0, 0, 1];
+  const s = Math.min(1, Math.max(0, lens.amount / 100));
+  switch (lens.type) {
+    case "brighten": {
+      const a = Math.min(1, Math.max(-1, lens.amount / 100));
+      return (c) => a >= 0 ? mix(c, [1, 1, 1], a) : mix(c, [0, 0, 0], -a);
+    }
+    case "invert":
+      return (c) => mix(c, [1 - c[0], 1 - c[1], 1 - c[2]], s);
+    case "tintedGrayscale":
+      return (c) => {
+        const l = luma(c);
+        const duo = l < 0.5 ? [tint[0] * 2 * l, tint[1] * 2 * l, tint[2] * 2 * l] : [0, 1, 2].map((k) => tint[k] + (1 - tint[k]) * (2 * l - 1));
+        return mix(c, duo, s);
+      };
+    case "colorAdd":
+      return (c) => [Math.min(1, c[0] + tint[0] * s), Math.min(1, c[1] + tint[1] * s), Math.min(1, c[2] + tint[2] * s), c[3]];
+    case "colorLimit":
+      return (c) => [c[0] * (1 - s + s * tint[0]), c[1] * (1 - s + s * tint[1]), c[2] * (1 - s + s * tint[2]), c[3]];
+    case "heatMap":
+      return (c) => [...heatAt(luma(c) + lens.amount / 100), c[3]];
+    default:
+      return null;
+  }
+}
+function mapVectorPaintColors(paint, f) {
+  const one = (color2) => {
+    const c = parseVectorColor(color2);
+    return c ? formatRgba(f(c)) : color2;
+  };
+  if (paint == null || paint === "none") return paint;
+  if (typeof paint === "string") return one(paint);
+  const p = paint;
+  const out = { ...p };
+  if (Array.isArray(p.stops)) out.stops = p.stops.map((s) => ({ ...s, color: one(s.color) }));
+  if (Array.isArray(p.colors)) out.colors = p.colors.map(one);
+  if (Array.isArray(p.points)) out.points = p.points.map((q) => typeof q.color === "string" ? { ...q, color: one(q.color) } : q);
+  return out;
+}
+var drawnCache2 = /* @__PURE__ */ new WeakMap();
+var STYLE_OFF = { effects: void 0, transform: void 0, opacity: void 0, blendMode: void 0, filters: void 0, lens: void 0, lensView: void 0, connector: void 0 };
+function shapePath(shape, id, path, extra = {}) {
+  const { id: _i, subpaths: _s, booleanOperation: _b, blendStep: _bs, locked: _l, visible: _v, ...style } = shape.source;
+  return { ...style, ...STYLE_OFF, id, type: "path", subpaths: bezierToSubpaths(path), ...shape.opacity < 1 ? { opacity: shape.opacity } : {}, ...extra };
+}
+function vectorLensDrawn(node) {
+  const hit = drawnCache2.get(node);
+  if (hit) return hit;
+  const { lens } = node;
+  const own = subpathsToBezier(node.subpaths);
+  const box = bezierPathBounds(own);
+  const children = [];
+  if (box && lens.type !== "transparency") {
+    const c = { x: (box.minX + box.maxX) / 2, y: (box.minY + box.maxY) / 2 };
+    const inv = node.transform && !isIdentityMatrix(node.transform) ? invertMatrix(node.transform) : null;
+    const k = lens.type === "magnify" ? Math.max(1, lens.amount) : 1;
+    const reach = { minX: c.x - (c.x - box.minX) / k, maxX: c.x + (box.maxX - c.x) / k, minY: c.y - (c.y - box.minY) / k, maxY: c.y + (box.maxY - c.y) / k };
+    let map = null;
+    if (lens.type === "magnify") {
+      const m = [k, 0, 0, k, c.x * (1 - k), c.y * (1 - k)];
+      map = (p) => transformBezierPath(p, m);
+    } else if (lens.type === "fisheye") {
+      const a = Math.min(100, Math.max(-100, lens.amount));
+      const gamma = a >= 0 ? 1 / (1 + a / 25) : 1 - a / 25;
+      const rx = Math.max(1e-9, (box.maxX - box.minX) / 2);
+      const ry = Math.max(1e-9, (box.maxY - box.minY) / 2);
+      const warp = (p) => {
+        const dx = (p.x - c.x) / rx;
+        const dy = (p.y - c.y) / ry;
+        const u = Math.hypot(dx, dy);
+        if (u >= 1 || u < 1e-12) return p;
+        const f = u ** gamma / u;
+        return { x: c.x + dx * f * rx, y: c.y + dy * f * ry };
+      };
+      map = (p) => mapBezierPath(p, warp, 0.25);
+    }
+    const recolour = vectorLensColorMap(lens);
+    const wire = lens.type === "wireframe" ? lens.color ?? "#000000" : null;
+    const contents = [];
+    (node.lensView ?? []).forEach((below, i) => {
+      for (const shape of vectorChildAppearanceShapes(below, i)) {
+        const path = inv ? transformBezierPath(shape.path, inv) : shape.path;
+        const b = bezierPathBounds(path);
+        if (!b || b.maxX < reach.minX || b.minX > reach.maxX || b.maxY < reach.minY || b.minY > reach.maxY) continue;
+        const id = `${node.id}~lens${contents.length}`;
+        const changed = map ? map(path) : path;
+        if (wire) {
+          contents.push(shapePath(shape, id, changed, { fill: null, fills: void 0, stroke: wire, strokes: void 0, strokeWidth: 1, strokeAlign: void 0, strokeDasharray: void 0, strokeWidthProfile: void 0, opacity: Math.min(1, Math.max(0, lens.amount / 100)) }));
+        } else if (recolour) {
+          const fills = shape.source.fills?.map((l) => ({ ...l, paint: mapVectorPaintColors(l.paint, recolour) ?? null }));
+          const strokes = shape.source.strokes?.map((l) => ({ ...l, paint: mapVectorPaintColors(l.paint, recolour) ?? null }));
+          contents.push(shapePath(shape, id, changed, { fill: mapVectorPaintColors(shape.source.fill, recolour) ?? null, stroke: mapVectorPaintColors(shape.source.stroke, recolour) ?? null, ...fills ? { fills } : {}, ...strokes ? { strokes } : {} }));
+        } else contents.push(shapePath(shape, id, changed));
+      }
+    });
+    if (contents.length) {
+      const outline = { id: `${node.id}~lens-clip`, type: "path", subpaths: node.subpaths, fill: "#000000", stroke: null, ...node.fillRule ? { fillRule: node.fillRule } : {} };
+      children.push({ id: `${node.id}~lens-view`, type: "group", mask: { type: "clip" }, children: [outline, ...contents] });
+    }
+  }
+  const { lens: _l, lensView: _v, transform: _t, opacity: _o, effects: _e, blendMode: _bm, filters: _f, ...style } = node;
+  const fillOpacity = lens.type === "transparency" ? 1 - Math.min(100, Math.max(0, lens.amount)) / 100 : 0;
+  children.push({ ...style, id: `${node.id}~lens-fill`, stroke: null, strokes: void 0, opacity: fillOpacity });
+  const stroked = (node.strokes?.length ?? 0) > 0 || node.stroke != null && node.stroke !== "none";
+  if (stroked) children.push({ ...style, id: `${node.id}~lens-stroke`, fill: null, fills: void 0 });
+  const out = {
+    id: node.id,
+    type: "group",
+    ...node.name !== void 0 ? { name: node.name } : {},
+    ...node.transform ? { transform: node.transform } : {},
+    ...node.opacity !== void 0 ? { opacity: node.opacity } : {},
+    ...node.blendMode ? { blendMode: node.blendMode } : {},
+    ...node.filters?.length ? { filters: node.filters } : {},
+    children
+  };
+  drawnCache2.set(node, out);
+  return out;
+}
+var sameMatrix = (a, b) => !a && !b || !!a && !!b && a.every((v2, i) => Math.abs(v2 - b[i]) < 1e-12);
+function sameView(a, b) {
+  if (!a || a.length !== b.length) return false;
+  return a.every((n, i) => {
+    const m = b[i];
+    if (n === m) return true;
+    return n.type === "group" && m.type === "group" && n.id === m.id && n.id.endsWith("~below") && sameMatrix(n.transform, m.transform) && sameView(n.children, m.children);
+  });
+}
+function hasLens(nodes) {
+  return nodes.some((n) => isVectorLens(n) || n.type === "group" && hasLens(n.children));
+}
+function resolveVectorLenses(doc) {
+  if (!hasLens(doc.nodes)) return doc;
+  let changed = false;
+  const walk = (list, outer, depth) => {
+    const below = outer.slice();
+    const out = list.map((n) => {
+      let next = n;
+      if (isVectorLens(n)) {
+        if (!sameView(n.lensView, below)) next = { ...n, lensView: below.slice() };
+      } else if (n.type === "group" && hasLens(n.children)) {
+        const m = n.transform && !isIdentityMatrix(n.transform) ? invertMatrix(n.transform) : null;
+        const inner = below.length ? m ? [{ id: `${n.id}:${depth}~below`, type: "group", transform: m, children: below.slice() }] : below.slice() : [];
+        const children = walk(n.children, inner, depth + 1);
+        if (children !== n.children) next = { ...n, children };
+      }
+      if (next !== n) changed = true;
+      below.push(next);
+      return next;
+    });
+    return out.some((n, i) => n !== list[i]) ? out : list;
+  };
+  const nodes = walk(doc.nodes, [], 0);
+  return changed ? { ...doc, nodes } : doc;
+}
+function stripVectorLensViews(doc) {
+  if (!hasLens(doc.nodes)) return doc;
+  const strip2 = (list) => list.map((n) => {
+    if (n.type === "path" && n.lensView) {
+      const { lensView: _v, ...rest } = n;
+      return rest;
+    }
+    if (n.type === "group") return { ...n, children: strip2(n.children) };
+    return n;
+  });
+  return { ...doc, nodes: strip2(doc.nodes) };
+}
+
 // src/geom/warp.ts
 var WARP_STYLES = [
   "arc",
@@ -6269,7 +6723,9 @@ var VECTOR_EFFECT_DEFAULTS = {
   },
   envelope: { style: "arc", bend: 50, horizontal: 0, vertical: 0, orientation: "horizontal", rows: 2, columns: 2, mesh: null },
   contour: { direction: "inside", steps: 4, offset: 6, join: "round", miterLimit: 4, fillColor: "#ffffff", strokeColor: null, acceleration: 0 },
-  blockShadow: { angle: 45, distance: 20, color: "#1e293b", opacity: 100, endOpacity: 100 }
+  blockShadow: { angle: 45, distance: 20, color: "#1e293b", opacity: 100, endOpacity: 100 },
+  extrude: { mode: "parallel", angle: 45, depth: 30, vanishingPoint: { x: 0, y: -300 }, toward: 30, color: null, lightAngle: -135, shading: 60 },
+  bevel: { width: 8, lightAngle: -135, shading: 60, color: null }
 };
 var VECTOR_EFFECT_LABELS = {
   trim: "Trim Paths",
@@ -6283,7 +6739,9 @@ var VECTOR_EFFECT_LABELS = {
   repeater: "Repeater",
   envelope: "Envelope",
   contour: "Contour",
-  blockShadow: "Block Shadow"
+  blockShadow: "Block Shadow",
+  extrude: "Extrude",
+  bevel: "Bevel"
 };
 var VECTOR_EFFECT_PARAM_SPECS = {
   trim: [
@@ -6385,6 +6843,30 @@ var VECTOR_EFFECT_PARAM_SPECS = {
     { key: "opacity", label: "Opacity %", kind: "number", min: 0, max: 100, step: 1, slider: true },
     { key: "endOpacity", label: "End opacity %", kind: "number", min: 0, max: 100, step: 1, slider: true }
   ],
+  extrude: [
+    {
+      key: "mode",
+      label: "Mode",
+      kind: "select",
+      options: [
+        { value: "parallel", label: "Parallel" },
+        { value: "perspective", label: "Perspective" }
+      ]
+    },
+    { key: "angle", label: "Angle \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    { key: "depth", label: "Depth", kind: "number", min: 0, max: 2e3, step: 1, slider: true },
+    { key: "vanishingPoint", label: "Vanishing point", kind: "vec2", step: 1 },
+    { key: "toward", label: "Toward VP %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "color", label: "Colour", kind: "color" },
+    { key: "lightAngle", label: "Light \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    { key: "shading", label: "Shading %", kind: "number", min: 0, max: 100, step: 1, slider: true }
+  ],
+  bevel: [
+    { key: "width", label: "Width", kind: "number", min: 0, max: 500, step: 0.5, slider: true },
+    { key: "lightAngle", label: "Light \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    { key: "shading", label: "Shading %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "color", label: "Colour", kind: "color" }
+  ],
   repeater: [
     { key: "copies", label: "Copies", kind: "number", min: 0, max: 50, step: 0.1, slider: true },
     { key: "offset", label: "Offset", kind: "number", min: -10, max: 10, step: 0.1, slider: true },
@@ -6500,7 +6982,7 @@ function activeVectorEffects(node) {
   return node.effects?.filter(isEnabled) ?? [];
 }
 function hasOwnVectorAppearance(node) {
-  return node.type === "text" || node.type === "instance" || node.type === "group" && !!node.liveBoolean || isVectorFrame(node) || isVectorSymmetryGroup(node) || !!node.effects?.some(isEnabled);
+  return node.type === "text" || node.type === "instance" || node.type === "group" && !!node.liveBoolean || isVectorFrame(node) || isVectorSymmetryGroup(node) || isVectorLens(node) || !!node.effects?.some(isEnabled);
 }
 var liveCache = /* @__PURE__ */ new WeakMap();
 function hasVectorAppearance(node) {
@@ -6701,6 +7183,43 @@ function blockShadowShapes(shapes, b) {
   }
   return [...shadows, ...shapes.map((s) => ({ ...s, order: [1, ...s.order] }))];
 }
+function extrudeShapes(shapes, x) {
+  const out = [];
+  for (const s of shapes) {
+    const base = x.color ?? vectorPaintSolid(s.source.fill) ?? "#808080";
+    vectorExtrudeFaces(s.path, x).forEach((f, k) => {
+      const color2 = shadeVectorColor(base, f.shade);
+      const source = { ...s.source, fill: color2, stroke: color2, strokeWidth: 0.5, strokeLinejoin: "round", strokeAlign: void 0, fills: void 0, strokes: void 0, fillRule: "nonzero", startArrow: void 0, endArrow: void 0, strokeDasharray: void 0, strokeWidthProfile: void 0, filters: void 0 };
+      out.push({ source, path: f.path, opacity: s.opacity, order: [...s.order, 0, k] });
+    });
+    out.push({ ...s, order: [...s.order, 1] });
+  }
+  return out;
+}
+function bevelShapes(shapes, b) {
+  const out = [];
+  for (const s of shapes) {
+    const fillRule = s.source.fillRule === "evenodd" ? "evenodd" : "nonzero";
+    const faces = vectorBevelFaces(s.path, b, fillRule);
+    if (!faces.length) {
+      out.push(s);
+      continue;
+    }
+    const base = b.color ?? vectorPaintSolid(s.source.fill) ?? "#808080";
+    const fillOnly = { ...s.source, stroke: null, strokes: void 0 };
+    out.push({ ...s, source: fillOnly, order: [...s.order, 0] });
+    faces.forEach((f, k) => {
+      const color2 = shadeVectorColor(base, f.shade);
+      const source = { ...s.source, fill: color2, stroke: color2, strokeWidth: 0.5, strokeLinejoin: "round", strokeAlign: void 0, fills: void 0, strokes: void 0, fillRule: "nonzero", startArrow: void 0, endArrow: void 0, strokeDasharray: void 0, strokeWidthProfile: void 0, filters: void 0 };
+      out.push({ source, path: f.path, opacity: s.opacity, order: [...s.order, 1, k] });
+    });
+    const [middle] = offsetPaths([s.path], -b.width, "miter", 4, 1, 0);
+    if (middle?.length) out.push({ ...s, source: fillOnly, path: middle, order: [...s.order, 2] });
+    const hasStroke = s.source.strokes?.length || s.source.stroke != null && s.source.stroke !== "none";
+    if (hasStroke) out.push({ ...s, source: { ...s.source, fill: null, fills: void 0 }, order: [...s.order, 3] });
+  }
+  return out;
+}
 function applyVectorEffects(shapes, effects) {
   let list = shapes.slice();
   for (const e of effects ?? []) {
@@ -6747,6 +7266,12 @@ function applyVectorEffects(shapes, effects) {
       case "blockShadow":
         list = blockShadowShapes(list, e.params);
         break;
+      case "extrude":
+        list = extrudeShapes(list, e.params);
+        break;
+      case "bevel":
+        list = bevelShapes(list, e.params);
+        break;
       case "repeater": {
         const r = e.params;
         const copies = repeatPaths(
@@ -6903,8 +7428,8 @@ function expandVectorAppearance(node) {
     expandCache.set(node, [vectorTextShaperGeneration(), drawn]);
     return drawn;
   }
-  if (isVectorFrame(node) || isVectorSymmetryGroup(node)) {
-    const drawn = isVectorFrame(node) ? vectorFrameDrawn(node) : vectorSymmetryDrawn(node);
+  if (isVectorFrame(node) || isVectorSymmetryGroup(node) || isVectorLens(node)) {
+    const drawn = isVectorFrame(node) ? vectorFrameDrawn(node) : isVectorLens(node) ? vectorLensDrawn(node) : vectorSymmetryDrawn(node);
     const out2 = hasVectorAppearance(drawn) ? expandVectorAppearance(drawn) : drawn;
     expandCache.set(node, [vectorTextShaperGeneration(), out2]);
     return out2;
@@ -7619,7 +8144,7 @@ function blendFromAttribute(value, m) {
   return out;
 }
 function vectorDocumentToSvg(doc, options = {}) {
-  doc = resolveVectorSymbols(doc);
+  doc = resolveVectorLenses(resolveVectorSymbols(doc));
   const precision = options.precision ?? 3;
   const prefix = options.idPrefix ?? "vg-";
   const pretty = options.pretty !== false;
@@ -7638,6 +8163,7 @@ function vectorDocumentToSvg(doc, options = {}) {
     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))}"`;
+    if (node.type === "path" && node.lens) out2 += ` data-vector-lens="${escapeAttr2(JSON.stringify(node.lens))}"`;
     const blend = vectorBlendModeCss(node.blendMode);
     if (blend) out2 += ` style="mix-blend-mode:${blend}"`;
     if (node.filters?.length) {
@@ -7909,11 +8435,11 @@ function vectorDocumentToSvg(doc, options = {}) {
       };
       lines.push(`${indent(depth)}<g${common(node)} data-vector-live="${escapeAttr2(JSON.stringify(live2))}">`);
       lines.push(`${indent(depth + 1)}<g data-vector-part="appearance">`);
-      for (const shape of vectorAppearanceNodes(node)) emit2(shape, depth + 2);
+      for (const shape of isVectorLens(node) ? vectorLensDrawn(node).children : vectorAppearanceNodes(node)) emit2(shape, depth + 2);
       lines.push(`${indent(depth + 1)}</g>`);
       lines.push(`${indent(depth + 1)}<g data-vector-part="source" display="none">`);
       if (node.type === "path") {
-        const { effects: _e, transform: _t, opacity: _o, visible: _v, booleanOperation: _b, blendStep: _s, blendMode: _bm, filters: _f, ...source } = node;
+        const { effects: _e, transform: _t, opacity: _o, visible: _v, booleanOperation: _b, blendStep: _s, blendMode: _bm, filters: _f, lens: _l, lensView: _lv, ...source } = node;
         emit2({ ...source, id: `${node.id}~src` }, depth + 2);
       } else for (const child of node.children) emit2(child, depth + 2);
       lines.push(`${indent(depth + 1)}</g>`);
@@ -8740,6 +9266,8 @@ function parseVectorSvg(svg, options = {}) {
     if (resizing) meta.resizing = resizing;
     const connector = child.attrs["data-vector-connector"] !== void 0 ? sanitizeVectorConnector(parseJson(child.attrs["data-vector-connector"])) : null;
     if (connector) meta.connector = connector;
+    const lens = child.attrs["data-vector-lens"] !== void 0 ? sanitizeVectorLens(parseJson(child.attrs["data-vector-lens"])) : null;
+    if (lens) meta.lens = lens;
     if (child.name === "g" && child.attrs["data-vector-frame"] !== void 0) {
       const node2 = frameGroup(child, s, m, meta);
       if (node2) out.push(node2);
@@ -9518,14 +10046,14 @@ function renamed(node, k) {
   if (node.type === "group") return { ...node, id, children: node.children.map((c) => renamed(c, k)) };
   return { ...node, id };
 }
-var drawnCache2 = /* @__PURE__ */ new WeakMap();
+var drawnCache3 = /* @__PURE__ */ new WeakMap();
 function vectorSymmetryDrawn(node) {
-  let hit = drawnCache2.get(node);
+  let hit = drawnCache3.get(node);
   if (hit) return hit;
   const { symmetry, ...group } = node;
   const copies = vectorSymmetryMatrices(symmetry).flatMap((m, k) => node.children.map((c) => ({ ...renamed(transformVectorNode(c, m), k + 1), locked: true })));
   hit = { ...group, children: [...node.children, ...copies] };
-  drawnCache2.set(node, hit);
+  drawnCache3.set(node, hit);
   return hit;
 }
 function vectorSymmetryAxes(s, box) {
@@ -9614,6 +10142,7 @@ export {
   VECTOR_BLEND_MODES,
   VECTOR_HORIZONTAL_RESIZING,
   VECTOR_VERTICAL_RESIZING,
+  VECTOR_LENS_TYPES,
   VECTOR_CONNECTOR_SIDES,
   VECTOR_CONNECTOR_ROUTES,
   VECTOR_BLEND_SPACINGS,
@@ -9909,6 +10438,20 @@ export {
   prefixVectorIds,
   vectorInstanceGroup,
   composeVectorMatrices,
+  vectorPaintSolid,
+  shadeVectorColor,
+  vectorPathRings,
+  vectorExtrudeFaces,
+  vectorBevelFaces,
+  isVectorLens,
+  VECTOR_LENS_LABELS,
+  VECTOR_LENS_SPECS,
+  sanitizeVectorLens,
+  vectorLensColorMap,
+  mapVectorPaintColors,
+  vectorLensDrawn,
+  resolveVectorLenses,
+  stripVectorLensViews,
   WARP_STYLES,
   WARP_STYLE_LABELS,
   warpPresetGrid,
@@ -10037,4 +10580,4 @@ export {
   lineSubpath,
   roundSubpaths
 };
-//# sourceMappingURL=chunk-ROZFX4QI.js.map
+//# sourceMappingURL=chunk-IEYXYMRQ.js.map