shape-morph 0.1.0

package/dist/react/index.cjs

@@ -0,0 +1,1808 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/shape.tsx
+
+// src/core/utils.ts
+var distanceEpsilon = 1e-4;
+var angleEpsilon = 1e-6;
+var floatPi = Math.PI;
+function pt(x, y) {
+  return { x, y };
+}
+function ptDistance(p) {
+  return Math.sqrt(p.x * p.x + p.y * p.y);
+}
+function ptDirection(p) {
+  const d = ptDistance(p);
+  return { x: p.x / d, y: p.y / d };
+}
+function ptDot(a, b) {
+  return a.x * b.x + a.y * b.y;
+}
+function ptClockwise(a, b) {
+  return a.x * b.y - a.y * b.x > 0;
+}
+function ptRotate90(p) {
+  return { x: -p.y, y: p.x };
+}
+function ptSub(a, b) {
+  return { x: a.x - b.x, y: a.y - b.y };
+}
+function ptAdd(a, b) {
+  return { x: a.x + b.x, y: a.y + b.y };
+}
+function ptMul(p, s) {
+  return { x: p.x * s, y: p.y * s };
+}
+function ptDiv(p, s) {
+  return { x: p.x / s, y: p.y / s };
+}
+function distance(x, y) {
+  return Math.sqrt(x * x + y * y);
+}
+function distanceSquared(x, y) {
+  return x * x + y * y;
+}
+function directionVector(x, y) {
+  const d = distance(x, y);
+  return { x: x / d, y: y / d };
+}
+function directionVectorAngle(angleRadians) {
+  return { x: Math.cos(angleRadians), y: Math.sin(angleRadians) };
+}
+function radialToCartesian(radius, angleRadians, center = { x: 0, y: 0 }) {
+  const d = directionVectorAngle(angleRadians);
+  return { x: d.x * radius + center.x, y: d.y * radius + center.y };
+}
+function interpolate(start, stop, fraction) {
+  return (1 - fraction) * start + fraction * stop;
+}
+function interpolatePoint(start, stop, fraction) {
+  return {
+    x: interpolate(start.x, stop.x, fraction),
+    y: interpolate(start.y, stop.y, fraction)
+  };
+}
+function positiveModulo(num, mod) {
+  return (num % mod + mod) % mod;
+}
+function convex(previous, current, next) {
+  return ptClockwise(ptSub(current, previous), ptSub(next, current));
+}
+function square(x) {
+  return x * x;
+}
+
+// src/core/cubic.ts
+function axisExtremaTs(a, b, c) {
+  const zeroIsh = Math.abs(a) < distanceEpsilon;
+  if (zeroIsh) {
+    if (b !== 0) {
+      const t = 2 * c / (-2 * b);
+      if (t >= 0 && t <= 1) {
+        return [t];
+      }
+    }
+    return [];
+  }
+  const discriminant = b * b - 4 * a * c;
+  if (discriminant < 0) {
+    return [];
+  }
+  const sqrtD = Math.sqrt(discriminant);
+  const results = [];
+  for (const t of [(-b + sqrtD) / (2 * a), (-b - sqrtD) / (2 * a)]) {
+    if (t >= 0 && t <= 1) {
+      results.push(t);
+    }
+  }
+  return results;
+}
+var Cubic = class _Cubic {
+  points;
+  constructor(a, b, c, d, e, f, g, h) {
+    if (a instanceof Float64Array) {
+      this.points = a;
+    } else {
+      this.points = new Float64Array([
+        a,
+        b,
+        c,
+        d,
+        e,
+        f,
+        g,
+        h
+      ]);
+    }
+  }
+  get anchor0X() {
+    return this.points[0];
+  }
+  get anchor0Y() {
+    return this.points[1];
+  }
+  get control0X() {
+    return this.points[2];
+  }
+  get control0Y() {
+    return this.points[3];
+  }
+  get control1X() {
+    return this.points[4];
+  }
+  get control1Y() {
+    return this.points[5];
+  }
+  get anchor1X() {
+    return this.points[6];
+  }
+  get anchor1Y() {
+    return this.points[7];
+  }
+  pointOnCurve(t) {
+    const u = 1 - t;
+    return pt(
+      this.anchor0X * (u * u * u) + this.control0X * (3 * t * u * u) + this.control1X * (3 * t * t * u) + this.anchor1X * (t * t * t),
+      this.anchor0Y * (u * u * u) + this.control0Y * (3 * t * u * u) + this.control1Y * (3 * t * t * u) + this.anchor1Y * (t * t * t)
+    );
+  }
+  zeroLength() {
+    return Math.abs(this.anchor0X - this.anchor1X) < distanceEpsilon && Math.abs(this.anchor0Y - this.anchor1Y) < distanceEpsilon;
+  }
+  convexTo(next) {
+    const prevVertex = pt(this.anchor0X, this.anchor0Y);
+    const currVertex = pt(this.anchor1X, this.anchor1Y);
+    const nextVertex = pt(next.anchor1X, next.anchor1Y);
+    return convex(prevVertex, currVertex, nextVertex);
+  }
+  split(t) {
+    const u = 1 - t;
+    const poc = this.pointOnCurve(t);
+    return [
+      new _Cubic(
+        this.anchor0X,
+        this.anchor0Y,
+        this.anchor0X * u + this.control0X * t,
+        this.anchor0Y * u + this.control0Y * t,
+        this.anchor0X * (u * u) + this.control0X * (2 * u * t) + this.control1X * (t * t),
+        this.anchor0Y * (u * u) + this.control0Y * (2 * u * t) + this.control1Y * (t * t),
+        poc.x,
+        poc.y
+      ),
+      new _Cubic(
+        poc.x,
+        poc.y,
+        this.control0X * (u * u) + this.control1X * (2 * u * t) + this.anchor1X * (t * t),
+        this.control0Y * (u * u) + this.control1Y * (2 * u * t) + this.anchor1Y * (t * t),
+        this.control1X * u + this.anchor1X * t,
+        this.control1Y * u + this.anchor1Y * t,
+        this.anchor1X,
+        this.anchor1Y
+      )
+    ];
+  }
+  reverse() {
+    return new _Cubic(
+      this.anchor1X,
+      this.anchor1Y,
+      this.control1X,
+      this.control1Y,
+      this.control0X,
+      this.control0Y,
+      this.anchor0X,
+      this.anchor0Y
+    );
+  }
+  transformed(f) {
+    const newPoints = new Float64Array(8);
+    for (let i = 0; i < 8; i += 2) {
+      const r = f(this.points[i], this.points[i + 1]);
+      newPoints[i] = r.x;
+      newPoints[i + 1] = r.y;
+    }
+    return new _Cubic(newPoints);
+  }
+  calculateBounds(approximate = true) {
+    if (this.zeroLength()) {
+      return [this.anchor0X, this.anchor0Y, this.anchor0X, this.anchor0Y];
+    }
+    let minX = Math.min(this.anchor0X, this.anchor1X);
+    let minY = Math.min(this.anchor0Y, this.anchor1Y);
+    let maxX = Math.max(this.anchor0X, this.anchor1X);
+    let maxY = Math.max(this.anchor0Y, this.anchor1Y);
+    if (approximate) {
+      return [
+        Math.min(minX, Math.min(this.control0X, this.control1X)),
+        Math.min(minY, Math.min(this.control0Y, this.control1Y)),
+        Math.max(maxX, Math.max(this.control0X, this.control1X)),
+        Math.max(maxY, Math.max(this.control0Y, this.control1Y))
+      ];
+    }
+    const xCoeffs = [
+      -this.anchor0X + 3 * this.control0X - 3 * this.control1X + this.anchor1X,
+      2 * this.anchor0X - 4 * this.control0X + 2 * this.control1X,
+      -this.anchor0X + this.control0X
+    ];
+    for (const t of axisExtremaTs(...xCoeffs)) {
+      const v = this.pointOnCurve(t).x;
+      minX = Math.min(minX, v);
+      maxX = Math.max(maxX, v);
+    }
+    const yCoeffs = [
+      -this.anchor0Y + 3 * this.control0Y - 3 * this.control1Y + this.anchor1Y,
+      2 * this.anchor0Y - 4 * this.control0Y + 2 * this.control1Y,
+      -this.anchor0Y + this.control0Y
+    ];
+    for (const t of axisExtremaTs(...yCoeffs)) {
+      const v = this.pointOnCurve(t).y;
+      minY = Math.min(minY, v);
+      maxY = Math.max(maxY, v);
+    }
+    return [minX, minY, maxX, maxY];
+  }
+  static straightLine(x0, y0, x1, y1) {
+    return new _Cubic(
+      x0,
+      y0,
+      interpolate(x0, x1, 1 / 3),
+      interpolate(y0, y1, 1 / 3),
+      interpolate(x0, x1, 2 / 3),
+      interpolate(y0, y1, 2 / 3),
+      x1,
+      y1
+    );
+  }
+  static circularArc(centerX, centerY, x0, y0, x1, y1) {
+    const p0d = directionVector(x0 - centerX, y0 - centerY);
+    const p1d = directionVector(x1 - centerX, y1 - centerY);
+    const rotatedP0 = ptRotate90(p0d);
+    const rotatedP1 = ptRotate90(p1d);
+    const clockwise = rotatedP0.x * (x1 - centerX) + rotatedP0.y * (y1 - centerY) >= 0;
+    const cosa = p0d.x * p1d.x + p0d.y * p1d.y;
+    if (cosa > 0.999) {
+      return _Cubic.straightLine(x0, y0, x1, y1);
+    }
+    const k = distance(x0 - centerX, y0 - centerY) * 4 * (Math.sqrt(2 * (1 - cosa)) - Math.sqrt(1 - cosa * cosa)) / (3 * (1 - cosa)) * (clockwise ? 1 : -1);
+    return new _Cubic(
+      x0,
+      y0,
+      x0 + rotatedP0.x * k,
+      y0 + rotatedP0.y * k,
+      x1 - rotatedP1.x * k,
+      y1 - rotatedP1.y * k,
+      x1,
+      y1
+    );
+  }
+  static empty(x0, y0) {
+    return new _Cubic(x0, y0, x0, y0, x0, y0, x0, y0);
+  }
+};
+function featureTransformed(f, transform) {
+  const newCubics = f.cubics.map((c) => c.transformed(transform));
+  if (f.type === "edge") {
+    return { type: "edge", cubics: newCubics };
+  }
+  return { type: "corner", cubics: newCubics, convex: f.convex };
+}
+
+// src/core/polygon.ts
+var unrounded = { radius: 0, smoothing: 0 };
+function cornerRounding(radius, smoothing = 0) {
+  return { radius, smoothing };
+}
+var RoundedPolygon = class _RoundedPolygon {
+  features;
+  center;
+  cubics;
+  constructor(features, center) {
+    this.features = features;
+    this.center = center;
+    this.cubics = buildCubicList(features, center);
+  }
+  get centerX() {
+    return this.center.x;
+  }
+  get centerY() {
+    return this.center.y;
+  }
+  transformed(f) {
+    const newCenter = f(this.center.x, this.center.y);
+    const newFeatures = this.features.map(
+      (feat) => featureTransformed(feat, f)
+    );
+    return new _RoundedPolygon(newFeatures, newCenter);
+  }
+  normalized() {
+    const bounds = this.calculateBounds();
+    const width = bounds[2] - bounds[0];
+    const height = bounds[3] - bounds[1];
+    const side = Math.max(width, height);
+    const offsetX = (side - width) / 2 - bounds[0];
+    const offsetY = (side - height) / 2 - bounds[1];
+    return this.transformed(
+      (x, y) => pt((x + offsetX) / side, (y + offsetY) / side)
+    );
+  }
+  calculateBounds(approximate = true) {
+    let minX = Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE;
+    let maxX = -Number.MAX_VALUE;
+    let maxY = -Number.MAX_VALUE;
+    for (const cubic of this.cubics) {
+      const b = cubic.calculateBounds(approximate);
+      minX = Math.min(minX, b[0]);
+      minY = Math.min(minY, b[1]);
+      maxX = Math.max(maxX, b[2]);
+      maxY = Math.max(maxY, b[3]);
+    }
+    return [minX, minY, maxX, maxY];
+  }
+  calculateMaxBounds() {
+    let maxDistSq = 0;
+    for (const cubic of this.cubics) {
+      const anchorDist = distanceSquared(
+        cubic.anchor0X - this.centerX,
+        cubic.anchor0Y - this.centerY
+      );
+      const mid = cubic.pointOnCurve(0.5);
+      const midDist = distanceSquared(
+        mid.x - this.centerX,
+        mid.y - this.centerY
+      );
+      maxDistSq = Math.max(maxDistSq, Math.max(anchorDist, midDist));
+    }
+    const d = Math.sqrt(maxDistSq);
+    return [
+      this.centerX - d,
+      this.centerY - d,
+      this.centerX + d,
+      this.centerY + d
+    ];
+  }
+};
+function resolveFeatureCubics(features, index, splitStart, splitEnd) {
+  if (index === 0 && splitEnd) {
+    return splitEnd;
+  }
+  if (index === features.length) {
+    return splitStart;
+  }
+  return features[index].cubics;
+}
+function processCubic(cubic, state) {
+  if (cubic.zeroLength()) {
+    if (state.last) {
+      const newPoints = new Float64Array(state.last.points);
+      newPoints[6] = cubic.anchor1X;
+      newPoints[7] = cubic.anchor1Y;
+      state.last = new Cubic(newPoints);
+    }
+    return;
+  }
+  if (state.last) {
+    state.result.push(state.last);
+  }
+  state.last = cubic;
+  if (!state.first) {
+    state.first = cubic;
+  }
+}
+function buildCubicList(features, center) {
+  let splitStart = null;
+  let splitEnd = null;
+  if (features.length > 0 && features[0].cubics.length === 3) {
+    const centerCubic = features[0].cubics[1];
+    const [start, end] = centerCubic.split(0.5);
+    splitStart = [features[0].cubics[0], start];
+    splitEnd = [end, features[0].cubics[2]];
+  }
+  const state = {
+    first: null,
+    last: null,
+    result: []
+  };
+  for (let i = 0; i <= features.length; i++) {
+    const featureCubics = resolveFeatureCubics(
+      features,
+      i,
+      splitStart,
+      splitEnd
+    );
+    if (!featureCubics) {
+      break;
+    }
+    for (const cubic of featureCubics) {
+      processCubic(cubic, state);
+    }
+  }
+  if (state.last && state.first) {
+    state.result.push(
+      new Cubic(
+        state.last.anchor0X,
+        state.last.anchor0Y,
+        state.last.control0X,
+        state.last.control0Y,
+        state.last.control1X,
+        state.last.control1Y,
+        state.first.anchor0X,
+        state.first.anchor0Y
+      )
+    );
+  } else {
+    state.result.push(Cubic.empty(center.x, center.y));
+  }
+  return state.result;
+}
+var RoundedCorner = class {
+  d1;
+  d2;
+  cornerRadius;
+  smoothing;
+  cosAngle;
+  sinAngle;
+  expectedRoundCut;
+  center = pt(0, 0);
+  p0;
+  p1;
+  p2;
+  constructor(p0, p1, p2, rounding) {
+    this.p0 = p0;
+    this.p1 = p1;
+    this.p2 = p2;
+    const v01 = ptSub(p0, p1);
+    const v21 = ptSub(p2, p1);
+    const d01 = ptDistance(v01);
+    const d21 = ptDistance(v21);
+    if (d01 > 0 && d21 > 0) {
+      this.d1 = ptDiv(v01, d01);
+      this.d2 = ptDiv(v21, d21);
+      this.cornerRadius = rounding.radius;
+      this.smoothing = rounding.smoothing;
+      this.cosAngle = ptDot(this.d1, this.d2);
+      this.sinAngle = Math.sqrt(1 - square(this.cosAngle));
+      this.expectedRoundCut = this.sinAngle > 1e-3 ? this.cornerRadius * (this.cosAngle + 1) / this.sinAngle : 0;
+    } else {
+      this.d1 = pt(0, 0);
+      this.d2 = pt(0, 0);
+      this.cornerRadius = 0;
+      this.smoothing = 0;
+      this.cosAngle = 0;
+      this.sinAngle = 0;
+      this.expectedRoundCut = 0;
+    }
+  }
+  get expectedCut() {
+    return (1 + this.smoothing) * this.expectedRoundCut;
+  }
+  calculateActualSmoothingValue(allowedCut) {
+    if (allowedCut > this.expectedCut) {
+      return this.smoothing;
+    }
+    if (allowedCut > this.expectedRoundCut) {
+      return this.smoothing * (allowedCut - this.expectedRoundCut) / (this.expectedCut - this.expectedRoundCut);
+    }
+    return 0;
+  }
+  lineIntersection(p0, d0, p1, d1) {
+    const rotatedD1 = ptRotate90(d1);
+    const den = ptDot(d0, rotatedD1);
+    if (Math.abs(den) < distanceEpsilon) {
+      return null;
+    }
+    const diff = ptSub(p1, p0);
+    const num = ptDot(diff, rotatedD1);
+    if (Math.abs(den) < distanceEpsilon * Math.abs(num)) {
+      return null;
+    }
+    const k = num / den;
+    return ptAdd(p0, ptMul(d0, k));
+  }
+  computeFlankingCurve(actualRoundCut, actualSmoothingValues, corner, sideStart, circleSegmentIntersection, otherCircleSegmentIntersection, circleCenter, actualR) {
+    const sideDirection = ptDirection(ptSub(sideStart, corner));
+    const curveStart = ptAdd(
+      corner,
+      ptMul(sideDirection, actualRoundCut * (1 + actualSmoothingValues))
+    );
+    const p = interpolatePoint(
+      circleSegmentIntersection,
+      ptDiv(
+        ptAdd(circleSegmentIntersection, otherCircleSegmentIntersection),
+        2
+      ),
+      actualSmoothingValues
+    );
+    const curveEnd = ptAdd(
+      circleCenter,
+      ptMul(
+        directionVector(p.x - circleCenter.x, p.y - circleCenter.y),
+        actualR
+      )
+    );
+    const circleTangent = ptRotate90(ptSub(curveEnd, circleCenter));
+    const anchorEnd = this.lineIntersection(
+      sideStart,
+      sideDirection,
+      curveEnd,
+      circleTangent
+    ) ?? circleSegmentIntersection;
+    const anchorStart = ptDiv(ptAdd(curveStart, ptMul(anchorEnd, 2)), 3);
+    return new Cubic(
+      curveStart.x,
+      curveStart.y,
+      anchorStart.x,
+      anchorStart.y,
+      anchorEnd.x,
+      anchorEnd.y,
+      curveEnd.x,
+      curveEnd.y
+    );
+  }
+  getCubics(allowedCut0, allowedCut1 = allowedCut0) {
+    const allowedCut = Math.min(allowedCut0, allowedCut1);
+    if (this.expectedRoundCut < distanceEpsilon || allowedCut < distanceEpsilon || this.cornerRadius < distanceEpsilon) {
+      this.center = this.p1;
+      return [Cubic.straightLine(this.p1.x, this.p1.y, this.p1.x, this.p1.y)];
+    }
+    const actualRoundCut = Math.min(allowedCut, this.expectedRoundCut);
+    const actualSmoothing0 = this.calculateActualSmoothingValue(allowedCut0);
+    const actualSmoothing1 = this.calculateActualSmoothingValue(allowedCut1);
+    const actualR = this.cornerRadius * (actualRoundCut / this.expectedRoundCut);
+    const centerDistance = Math.sqrt(square(actualR) + square(actualRoundCut));
+    const halfDir = ptDiv(ptAdd(this.d1, this.d2), 2);
+    const halfDirNorm = ptDirection(halfDir);
+    this.center = ptAdd(this.p1, ptMul(halfDirNorm, centerDistance));
+    const circleIntersection0 = ptAdd(this.p1, ptMul(this.d1, actualRoundCut));
+    const circleIntersection2 = ptAdd(this.p1, ptMul(this.d2, actualRoundCut));
+    const flanking0 = this.computeFlankingCurve(
+      actualRoundCut,
+      actualSmoothing0,
+      this.p1,
+      this.p0,
+      circleIntersection0,
+      circleIntersection2,
+      this.center,
+      actualR
+    );
+    const flanking2 = this.computeFlankingCurve(
+      actualRoundCut,
+      actualSmoothing1,
+      this.p1,
+      this.p2,
+      circleIntersection2,
+      circleIntersection0,
+      this.center,
+      actualR
+    ).reverse();
+    return [
+      flanking0,
+      Cubic.circularArc(
+        this.center.x,
+        this.center.y,
+        flanking0.anchor1X,
+        flanking0.anchor1Y,
+        flanking2.anchor0X,
+        flanking2.anchor0Y
+      ),
+      flanking2
+    ];
+  }
+};
+function calculateCenter(vertices) {
+  let cx = 0;
+  let cy = 0;
+  for (let i = 0; i < vertices.length; i += 2) {
+    cx += vertices[i];
+    cy += vertices[i + 1];
+  }
+  const n = vertices.length / 2;
+  return pt(cx / n, cy / n);
+}
+function verticesFromNumVerts(numVertices, radius, centerX, centerY) {
+  const result = [];
+  for (let i = 0; i < numVertices; i++) {
+    const v = radialToCartesian(
+      radius,
+      floatPi / numVertices * 2 * i,
+      pt(centerX, centerY)
+    );
+    result.push(v.x, v.y);
+  }
+  return result;
+}
+function createPolygonFromVertices(vertices, rounding = unrounded, perVertexRounding = null, centerX = Number.MIN_VALUE, centerY = Number.MIN_VALUE) {
+  const n = vertices.length / 2;
+  const roundedCorners = [];
+  for (let i = 0; i < n; i++) {
+    const vtxRounding = perVertexRounding?.[i] ?? rounding;
+    const prevIndex = (i + n - 1) % n * 2;
+    const nextIndex = (i + 1) % n * 2;
+    roundedCorners.push(
+      new RoundedCorner(
+        pt(vertices[prevIndex], vertices[prevIndex + 1]),
+        pt(vertices[i * 2], vertices[i * 2 + 1]),
+        pt(vertices[nextIndex], vertices[nextIndex + 1]),
+        vtxRounding
+      )
+    );
+  }
+  const cutAdjusts = [];
+  for (let ix = 0; ix < n; ix++) {
+    const expectedRoundCut = roundedCorners[ix].expectedRoundCut + roundedCorners[(ix + 1) % n].expectedRoundCut;
+    const expectedCut = roundedCorners[ix].expectedCut + roundedCorners[(ix + 1) % n].expectedCut;
+    const vtxX = vertices[ix * 2];
+    const vtxY = vertices[ix * 2 + 1];
+    const nextVtxX = vertices[(ix + 1) % n * 2];
+    const nextVtxY = vertices[(ix + 1) % n * 2 + 1];
+    const sideSize = distance(vtxX - nextVtxX, vtxY - nextVtxY);
+    if (expectedRoundCut > sideSize) {
+      cutAdjusts.push([sideSize / expectedRoundCut, 0]);
+    } else if (expectedCut > sideSize) {
+      cutAdjusts.push([
+        1,
+        (sideSize - expectedRoundCut) / (expectedCut - expectedRoundCut)
+      ]);
+    } else {
+      cutAdjusts.push([1, 1]);
+    }
+  }
+  const corners = [];
+  for (let i = 0; i < n; i++) {
+    const allowedCuts = [];
+    for (let delta = 0; delta <= 1; delta++) {
+      const [roundCutRatio, cutRatio] = cutAdjusts[(i + n - 1 + delta) % n];
+      allowedCuts.push(
+        roundedCorners[i].expectedRoundCut * roundCutRatio + (roundedCorners[i].expectedCut - roundedCorners[i].expectedRoundCut) * cutRatio
+      );
+    }
+    corners.push(roundedCorners[i].getCubics(allowedCuts[0], allowedCuts[1]));
+  }
+  const tempFeatures = [];
+  for (let i = 0; i < n; i++) {
+    const prevVtxIndex = (i + n - 1) % n;
+    const nextVtxIndex = (i + 1) % n;
+    const currVertex = pt(vertices[i * 2], vertices[i * 2 + 1]);
+    const prevVertex = pt(
+      vertices[prevVtxIndex * 2],
+      vertices[prevVtxIndex * 2 + 1]
+    );
+    const nextVertex = pt(
+      vertices[nextVtxIndex * 2],
+      vertices[nextVtxIndex * 2 + 1]
+    );
+    const isConvex = convexFn(prevVertex, currVertex, nextVertex);
+    tempFeatures.push({ type: "corner", cubics: corners[i], convex: isConvex });
+    tempFeatures.push({
+      type: "edge",
+      cubics: [
+        Cubic.straightLine(
+          corners[i][corners[i].length - 1].anchor1X,
+          corners[i][corners[i].length - 1].anchor1Y,
+          corners[(i + 1) % n][0].anchor0X,
+          corners[(i + 1) % n][0].anchor0Y
+        )
+      ]
+    });
+  }
+  const center = centerX === Number.MIN_VALUE || centerY === Number.MIN_VALUE ? calculateCenter(vertices) : pt(centerX, centerY);
+  return new RoundedPolygon(tempFeatures, center);
+}
+function convexFn(prev, curr, next) {
+  const v1 = ptSub(curr, prev);
+  const v2 = ptSub(next, curr);
+  return v1.x * v2.y - v1.y * v2.x > 0;
+}
+function createPolygon(numVertices, radius = 1, centerX = 0, centerY = 0, rounding = unrounded, perVertexRounding = null) {
+  const vertices = verticesFromNumVerts(numVertices, radius, centerX, centerY);
+  return createPolygonFromVertices(
+    vertices,
+    rounding,
+    perVertexRounding,
+    centerX,
+    centerY
+  );
+}
+function createCircle(numVertices = 8, radius = 1, centerX = 0, centerY = 0) {
+  const theta = floatPi / numVertices;
+  const polygonRadius = radius / Math.cos(theta);
+  return createPolygon(
+    numVertices,
+    polygonRadius,
+    centerX,
+    centerY,
+    cornerRounding(radius)
+  );
+}
+function createRectangle(width = 2, height = 2, rounding = unrounded, perVertexRounding = null, centerX = 0, centerY = 0) {
+  const left = centerX - width / 2;
+  const top = centerY - height / 2;
+  const right = centerX + width / 2;
+  const bottom = centerY + height / 2;
+  return createPolygonFromVertices(
+    [right, bottom, left, bottom, left, top, right, top],
+    rounding,
+    perVertexRounding,
+    centerX,
+    centerY
+  );
+}
+function starVerticesFromNumVerts(numVerticesPerRadius, radius, innerRadius, centerX, centerY) {
+  const result = [];
+  for (let i = 0; i < numVerticesPerRadius; i++) {
+    let v = radialToCartesian(radius, floatPi / numVerticesPerRadius * 2 * i);
+    result.push(v.x + centerX, v.y + centerY);
+    v = radialToCartesian(
+      innerRadius,
+      floatPi / numVerticesPerRadius * (2 * i + 1)
+    );
+    result.push(v.x + centerX, v.y + centerY);
+  }
+  return result;
+}
+function createStar(numVerticesPerRadius, radius = 1, innerRadius = 0.5, rounding = unrounded, innerRounding = null, perVertexRounding = null, centerX = 0, centerY = 0) {
+  let pvRounding = perVertexRounding;
+  if (!pvRounding && innerRounding) {
+    pvRounding = [];
+    for (let i = 0; i < numVerticesPerRadius; i++) {
+      pvRounding.push(rounding, innerRounding);
+    }
+  }
+  const vertices = starVerticesFromNumVerts(
+    numVerticesPerRadius,
+    radius,
+    innerRadius,
+    centerX,
+    centerY
+  );
+  return createPolygonFromVertices(
+    vertices,
+    rounding,
+    pvRounding,
+    centerX,
+    centerY
+  );
+}
+
+// src/core/material-shapes.ts
+function pnr(x, y, r = unrounded) {
+  return { x, y, r };
+}
+function angleDegrees(x, y) {
+  return Math.atan2(y, x) * 180 / floatPi;
+}
+function toRadians(degrees) {
+  return degrees / 360 * 2 * floatPi;
+}
+function distancePt(x, y) {
+  return Math.sqrt(x * x + y * y);
+}
+function rotateDegrees(px, py, angle, cx = 0, cy = 0) {
+  const a = toRadians(angle);
+  const ox = px - cx;
+  const oy = py - cy;
+  return [
+    ox * Math.cos(a) - oy * Math.sin(a) + cx,
+    ox * Math.sin(a) + oy * Math.cos(a) + cy
+  ];
+}
+function doRepeatMirrored(points, reps, centerX, centerY) {
+  const angles = points.map((p) => angleDegrees(p.x - centerX, p.y - centerY));
+  const distances = points.map((p) => distancePt(p.x - centerX, p.y - centerY));
+  const actualReps = reps * 2;
+  const sectionAngle = 360 / actualReps;
+  const result = [];
+  for (let it = 0; it < actualReps; it++) {
+    const mirrored = it % 2 !== 0;
+    for (let index = 0; index < points.length; index++) {
+      const i = mirrored ? points.length - 1 - index : index;
+      if (i > 0 || !mirrored) {
+        const angleOffset = mirrored ? sectionAngle - angles[i] + 2 * angles[0] : angles[i];
+        const a = toRadians(sectionAngle * it + angleOffset);
+        const finalX = Math.cos(a) * distances[i] + centerX;
+        const finalY = Math.sin(a) * distances[i] + centerY;
+        result.push(pnr(finalX, finalY, points[i].r));
+      }
+    }
+  }
+  return result;
+}
+function doRepeatRotated(points, reps, centerX, centerY) {
+  const np = points.length;
+  const result = [];
+  for (let it = 0; it < np * reps; it++) {
+    const srcPoint = points[it % np];
+    const [rx, ry] = rotateDegrees(
+      srcPoint.x,
+      srcPoint.y,
+      Math.floor(it / np) * (360 / reps),
+      centerX,
+      centerY
+    );
+    result.push(pnr(rx, ry, srcPoint.r));
+  }
+  return result;
+}
+function doRepeat(points, reps, centerX, centerY, mirroring) {
+  if (mirroring) {
+    return doRepeatMirrored(points, reps, centerX, centerY);
+  }
+  return doRepeatRotated(points, reps, centerX, centerY);
+}
+function customPolygon(points, reps, centerX = 0.5, centerY = 0.5, mirroring = false) {
+  const actualPoints = doRepeat(points, reps, centerX, centerY, mirroring);
+  const vertices = [];
+  const pvRounding = [];
+  for (const p of actualPoints) {
+    vertices.push(p.x, p.y);
+    pvRounding.push(p.r);
+  }
+  return createPolygonFromVertices(
+    vertices,
+    unrounded,
+    pvRounding,
+    centerX,
+    centerY
+  );
+}
+function rotatePolygon(polygon, degrees) {
+  const rad = toRadians(degrees);
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return polygon.transformed((x, y) => ({
+    x: x * cos - y * sin,
+    y: x * sin + y * cos
+  }));
+}
+var r15 = cornerRounding(0.15);
+var r20 = cornerRounding(0.2);
+var r30 = cornerRounding(0.3);
+var r50 = cornerRounding(0.5);
+var r100 = cornerRounding(1);
+function circle() {
+  return createCircle(10);
+}
+function square2() {
+  return createRectangle(1, 1, r30);
+}
+function slanted() {
+  return customPolygon(
+    [
+      pnr(0.926, 0.97, cornerRounding(0.189, 0.811)),
+      pnr(-0.021, 0.967, cornerRounding(0.187, 0.057))
+    ],
+    2
+  );
+}
+function arch() {
+  return rotatePolygon(
+    createPolygonFromVertices(
+      // 4 vertices for a square, manually positioning
+      (() => {
+        const r = 1;
+        const verts = [];
+        for (let i = 0; i < 4; i++) {
+          const angle = floatPi / 4 * 2 * i;
+          verts.push(Math.cos(angle) * r, Math.sin(angle) * r);
+        }
+        return verts;
+      })(),
+      unrounded,
+      [r100, r100, r20, r20],
+      0,
+      0
+    ),
+    -135
+  );
+}
+function fan() {
+  return customPolygon(
+    [
+      pnr(1.004, 1, cornerRounding(0.148, 0.417)),
+      pnr(0, 1, cornerRounding(0.151)),
+      pnr(0, -3e-3, cornerRounding(0.148)),
+      pnr(0.978, 0.02, cornerRounding(0.803))
+    ],
+    1
+  );
+}
+function arrow() {
+  return customPolygon(
+    [
+      pnr(0.5, 0.892, cornerRounding(0.313)),
+      pnr(-0.216, 1.05, cornerRounding(0.207)),
+      pnr(0.499, -0.16, cornerRounding(0.215, 1)),
+      pnr(1.225, 1.06, cornerRounding(0.211))
+    ],
+    1
+  );
+}
+function semiCircle() {
+  return createRectangle(1.6, 1, unrounded, [r20, r20, r100, r100]);
+}
+function oval() {
+  const scaled = createCircle().transformed((x, y) => ({ x, y: y * 0.64 }));
+  return rotatePolygon(scaled, -45);
+}
+function pill() {
+  return customPolygon(
+    [
+      pnr(0.961, 0.039, cornerRounding(0.426)),
+      pnr(1.001, 0.428),
+      pnr(1, 0.609, cornerRounding(1))
+    ],
+    2,
+    0.5,
+    0.5,
+    true
+  );
+}
+function triangle() {
+  return rotatePolygon(
+    createPolygonFromVertices(
+      (() => {
+        const verts = [];
+        for (let i = 0; i < 3; i++) {
+          verts.push(
+            Math.cos(floatPi / 3 * 2 * i),
+            Math.sin(floatPi / 3 * 2 * i)
+          );
+        }
+        return verts;
+      })(),
+      r20,
+      null,
+      0,
+      0
+    ),
+    -90
+  );
+}
+function diamond() {
+  return customPolygon(
+    [
+      pnr(0.5, 1.096, cornerRounding(0.151, 0.524)),
+      pnr(0.04, 0.5, cornerRounding(0.159))
+    ],
+    2
+  );
+}
+function clamShell() {
+  return customPolygon(
+    [
+      pnr(0.171, 0.841, cornerRounding(0.159)),
+      pnr(-0.02, 0.5, cornerRounding(0.14)),
+      pnr(0.17, 0.159, cornerRounding(0.159))
+    ],
+    2
+  );
+}
+function pentagon() {
+  return customPolygon(
+    [
+      pnr(0.5, -9e-3, cornerRounding(0.172)),
+      pnr(1.03, 0.365, cornerRounding(0.164)),
+      pnr(0.828, 0.97, cornerRounding(0.169))
+    ],
+    1,
+    0.5,
+    0.5,
+    true
+  );
+}
+function gem() {
+  return customPolygon(
+    [
+      pnr(0.499, 1.023, cornerRounding(0.241, 0.778)),
+      pnr(-5e-3, 0.792, cornerRounding(0.208)),
+      pnr(0.073, 0.258, cornerRounding(0.228)),
+      pnr(0.433, 0, cornerRounding(0.491))
+    ],
+    1,
+    0.5,
+    0.5,
+    true
+  );
+}
+function sunny() {
+  return createStar(8, 1, 0.8, r15);
+}
+function verySunny() {
+  return customPolygon(
+    [
+      pnr(0.5, 1.08, cornerRounding(0.085)),
+      pnr(0.358, 0.843, cornerRounding(0.085))
+    ],
+    8
+  );
+}
+function cookie4() {
+  return customPolygon(
+    [
+      pnr(1.237, 1.236, cornerRounding(0.258)),
+      pnr(0.5, 0.918, cornerRounding(0.233))
+    ],
+    4
+  );
+}
+function cookie6() {
+  return customPolygon(
+    [
+      pnr(0.723, 0.884, cornerRounding(0.394)),
+      pnr(0.5, 1.099, cornerRounding(0.398))
+    ],
+    6
+  );
+}
+function cookie7() {
+  return rotatePolygon(createStar(7, 1, 0.75, r50), -90);
+}
+function cookie9() {
+  return rotatePolygon(createStar(9, 1, 0.8, r50), -90);
+}
+function cookie12() {
+  return rotatePolygon(createStar(12, 1, 0.8, r50), -90);
+}
+function ghostish() {
+  return customPolygon(
+    [
+      pnr(0.5, 0, cornerRounding(1)),
+      pnr(1, 0, cornerRounding(1)),
+      pnr(1, 1.14, cornerRounding(0.254, 0.106)),
+      pnr(0.575, 0.906, cornerRounding(0.253))
+    ],
+    1,
+    0.5,
+    0.5,
+    true
+  );
+}
+function clover4() {
+  return customPolygon(
+    [pnr(0.5, 0.074), pnr(0.725, -0.099, cornerRounding(0.476))],
+    4,
+    0.5,
+    0.5,
+    true
+  );
+}
+function clover8() {
+  return customPolygon(
+    [pnr(0.5, 0.036), pnr(0.758, -0.101, cornerRounding(0.209))],
+    8
+  );
+}
+function burst() {
+  return customPolygon(
+    [
+      pnr(0.5, -6e-3, cornerRounding(6e-3)),
+      pnr(0.592, 0.158, cornerRounding(6e-3))
+    ],
+    12
+  );
+}
+function softBurst() {
+  return customPolygon(
+    [
+      pnr(0.193, 0.277, cornerRounding(0.053)),
+      pnr(0.176, 0.055, cornerRounding(0.053))
+    ],
+    10
+  );
+}
+function boom() {
+  return customPolygon(
+    [
+      pnr(0.457, 0.296, cornerRounding(7e-3)),
+      pnr(0.5, -0.051, cornerRounding(7e-3))
+    ],
+    15
+  );
+}
+function softBoom() {
+  return customPolygon(
+    [
+      pnr(0.733, 0.454),
+      pnr(0.839, 0.437, cornerRounding(0.532)),
+      pnr(0.949, 0.449, cornerRounding(0.439, 1)),
+      pnr(0.998, 0.478, cornerRounding(0.174))
+    ],
+    16,
+    0.5,
+    0.5,
+    true
+  );
+}
+function flower() {
+  return customPolygon(
+    [
+      pnr(0.37, 0.187),
+      pnr(0.416, 0.049, cornerRounding(0.381)),
+      pnr(0.479, 1e-3, cornerRounding(0.095))
+    ],
+    8,
+    0.5,
+    0.5,
+    true
+  );
+}
+function puffy() {
+  const base = customPolygon(
+    [
+      pnr(0.5, 0.053),
+      pnr(0.545, -0.04, cornerRounding(0.405)),
+      pnr(0.67, -0.035, cornerRounding(0.426)),
+      pnr(0.717, 0.066, cornerRounding(0.574)),
+      pnr(0.722, 0.128),
+      pnr(0.777, 2e-3, cornerRounding(0.36)),
+      pnr(0.914, 0.149, cornerRounding(0.66)),
+      pnr(0.926, 0.289, cornerRounding(0.66)),
+      pnr(0.881, 0.346),
+      pnr(0.94, 0.344, cornerRounding(0.126)),
+      pnr(1.003, 0.437, cornerRounding(0.255))
+    ],
+    2,
+    0.5,
+    0.5,
+    true
+  );
+  return base.transformed((x, y) => ({ x, y: y * 0.742 }));
+}
+function puffyDiamond() {
+  return customPolygon(
+    [
+      pnr(0.87, 0.13, cornerRounding(0.146)),
+      pnr(0.818, 0.357),
+      pnr(1, 0.332, cornerRounding(0.853))
+    ],
+    4,
+    0.5,
+    0.5,
+    true
+  );
+}
+function pixelCircle() {
+  return customPolygon(
+    [
+      pnr(0.5, 0),
+      pnr(0.704, 0),
+      pnr(0.704, 0.065),
+      pnr(0.843, 0.065),
+      pnr(0.843, 0.148),
+      pnr(0.926, 0.148),
+      pnr(0.926, 0.296),
+      pnr(1, 0.296)
+    ],
+    2,
+    0.5,
+    0.5,
+    true
+  );
+}
+function pixelTriangle() {
+  return customPolygon(
+    [
+      pnr(0.11, 0.5),
+      pnr(0.113, 0),
+      pnr(0.287, 0),
+      pnr(0.287, 0.087),
+      pnr(0.421, 0.087),
+      pnr(0.421, 0.17),
+      pnr(0.56, 0.17),
+      pnr(0.56, 0.265),
+      pnr(0.674, 0.265),
+      pnr(0.675, 0.344),
+      pnr(0.789, 0.344),
+      pnr(0.789, 0.439),
+      pnr(0.888, 0.439)
+    ],
+    1,
+    0.5,
+    0.5,
+    true
+  );
+}
+function bun() {
+  return customPolygon(
+    [
+      pnr(0.796, 0.5),
+      pnr(0.853, 0.518, cornerRounding(1)),
+      pnr(0.992, 0.631, cornerRounding(1)),
+      pnr(0.968, 1, cornerRounding(1))
+    ],
+    2,
+    0.5,
+    0.5,
+    true
+  );
+}
+function heart() {
+  return customPolygon(
+    [
+      pnr(0.5, 0.268, cornerRounding(0.016)),
+      pnr(0.792, -0.066, cornerRounding(0.958)),
+      pnr(1.064, 0.276, cornerRounding(1)),
+      pnr(0.501, 0.946, cornerRounding(0.129))
+    ],
+    1,
+    0.5,
+    0.5,
+    true
+  );
+}
+var shapeFactories = {
+  Circle: circle,
+  Square: square2,
+  Slanted: slanted,
+  Arch: arch,
+  Fan: fan,
+  Arrow: arrow,
+  SemiCircle: semiCircle,
+  Oval: oval,
+  Pill: pill,
+  Triangle: triangle,
+  Diamond: diamond,
+  ClamShell: clamShell,
+  Pentagon: pentagon,
+  Gem: gem,
+  Sunny: sunny,
+  VerySunny: verySunny,
+  Cookie4Sided: cookie4,
+  Cookie6Sided: cookie6,
+  Cookie7Sided: cookie7,
+  Cookie9Sided: cookie9,
+  Cookie12Sided: cookie12,
+  Ghostish: ghostish,
+  Clover4Leaf: clover4,
+  Clover8Leaf: clover8,
+  Burst: burst,
+  SoftBurst: softBurst,
+  Boom: boom,
+  SoftBoom: softBoom,
+  Flower: flower,
+  Puffy: puffy,
+  PuffyDiamond: puffyDiamond,
+  PixelCircle: pixelCircle,
+  PixelTriangle: pixelTriangle,
+  Bun: bun,
+  Heart: heart
+};
+var cache = /* @__PURE__ */ new Map();
+function getShape(name) {
+  let shape = cache.get(name);
+  if (!shape) {
+    const factory = shapeFactories[name];
+    shape = factory().normalized();
+    cache.set(name, shape);
+  }
+  return shape;
+}
+
+// src/output/svg-path.ts
+function toPathD(cubics, size = 100) {
+  if (cubics.length === 0) {
+    return "";
+  }
+  const s = size;
+  const parts = [
+    `M${(cubics[0].anchor0X * s).toFixed(2)},${(cubics[0].anchor0Y * s).toFixed(2)}`
+  ];
+  for (const c of cubics) {
+    parts.push(
+      `C${(c.control0X * s).toFixed(2)},${(c.control0Y * s).toFixed(2)} ${(c.control1X * s).toFixed(2)},${(c.control1Y * s).toFixed(2)} ${(c.anchor1X * s).toFixed(2)},${(c.anchor1Y * s).toFixed(2)}`
+    );
+  }
+  parts.push("Z");
+  return parts.join("");
+}
+function Shape({
+  name,
+  size = 48,
+  fill = "currentColor",
+  stroke,
+  strokeWidth,
+  className,
+  style
+}) {
+  const viewBoxSize = 100;
+  const d = react.useMemo(() => {
+    const shape = getShape(name);
+    return toPathD(shape.cubics, viewBoxSize);
+  }, [name]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      height: size,
+      style,
+      viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+      width: size,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d, fill, stroke, strokeWidth })
+    }
+  );
+}
+
+// src/core/morph.ts
+var LengthMeasurer = class {
+  segments = 3;
+  measureCubic(c) {
+    return this.closestProgressTo(c, Number.POSITIVE_INFINITY)[1];
+  }
+  findCubicCutPoint(c, m) {
+    return this.closestProgressTo(c, m)[0];
+  }
+  closestProgressTo(cubic, threshold) {
+    let total = 0;
+    let remainder = threshold;
+    let prev = pt(cubic.anchor0X, cubic.anchor0Y);
+    for (let i = 1; i <= this.segments; i++) {
+      const progress = i / this.segments;
+      const point = cubic.pointOnCurve(progress);
+      const segment = ptDistance(ptSub(point, prev));
+      if (segment >= remainder) {
+        return [
+          progress - (1 - remainder / segment) / this.segments,
+          threshold
+        ];
+      }
+      remainder -= segment;
+      total += segment;
+      prev = point;
+    }
+    return [1, total];
+  }
+};
+function cutMeasuredCubicAtProgress(mc, cutOutlineProgress, measurer) {
+  const bounded = Math.max(
+    mc.startOutlineProgress,
+    Math.min(mc.endOutlineProgress, cutOutlineProgress)
+  );
+  const outlineProgressSize = mc.endOutlineProgress - mc.startOutlineProgress;
+  const progressFromStart = bounded - mc.startOutlineProgress;
+  const relativeProgress = progressFromStart / outlineProgressSize;
+  const t = measurer.findCubicCutPoint(
+    mc.cubic,
+    relativeProgress * mc.measuredSize
+  );
+  const [c1, c2] = mc.cubic.split(t);
+  return [
+    {
+      cubic: c1,
+      startOutlineProgress: mc.startOutlineProgress,
+      endOutlineProgress: bounded,
+      measuredSize: measurer.measureCubic(c1)
+    },
+    {
+      cubic: c2,
+      startOutlineProgress: bounded,
+      endOutlineProgress: mc.endOutlineProgress,
+      measuredSize: measurer.measureCubic(c2)
+    }
+  ];
+}
+function measurePolygon(measurer, polygon) {
+  const cubics = [];
+  const featureToCubic = [];
+  for (const feature of polygon.features) {
+    for (let cubicIndex = 0; cubicIndex < feature.cubics.length; cubicIndex++) {
+      if (feature.type === "corner" && cubicIndex === Math.floor(feature.cubics.length / 2)) {
+        featureToCubic.push([feature, cubics.length]);
+      }
+      cubics.push(feature.cubics[cubicIndex]);
+    }
+  }
+  const measures = [0];
+  let cumulative = 0;
+  for (const cubic of cubics) {
+    const m = measurer.measureCubic(cubic);
+    cumulative += m;
+    measures.push(cumulative);
+  }
+  const totalMeasure = cumulative;
+  const outlineProgress = measures.map((m) => m / totalMeasure);
+  const features = featureToCubic.map(
+    ([feature, ix]) => ({
+      progress: positiveModulo(
+        (outlineProgress[ix] + outlineProgress[ix + 1]) / 2,
+        1
+      ),
+      feature
+    })
+  );
+  const measuredCubics = [];
+  let startProgress = 0;
+  for (let i = 0; i < cubics.length; i++) {
+    if (outlineProgress[i + 1] - outlineProgress[i] > distanceEpsilon) {
+      measuredCubics.push({
+        cubic: cubics[i],
+        startOutlineProgress: startProgress,
+        endOutlineProgress: outlineProgress[i + 1],
+        measuredSize: measurer.measureCubic(cubics[i])
+      });
+      startProgress = outlineProgress[i + 1];
+    }
+  }
+  const lastMeasured = measuredCubics.at(-1);
+  if (lastMeasured) {
+    lastMeasured.endOutlineProgress = 1;
+  }
+  return { cubics: measuredCubics, features, measurer };
+}
+function cutAndShift(mp, cuttingPoint) {
+  if (cuttingPoint < distanceEpsilon) {
+    return mp;
+  }
+  const cubics = mp.cubics;
+  let targetIndex = cubics.findIndex(
+    (c) => cuttingPoint >= c.startOutlineProgress && cuttingPoint <= c.endOutlineProgress
+  );
+  if (targetIndex === -1) {
+    targetIndex = cubics.length - 1;
+  }
+  const [b1, b2] = cutMeasuredCubicAtProgress(
+    cubics[targetIndex],
+    cuttingPoint,
+    mp.measurer
+  );
+  const retCubics = [b2.cubic];
+  for (let i = 1; i < cubics.length; i++) {
+    retCubics.push(cubics[(i + targetIndex) % cubics.length].cubic);
+  }
+  retCubics.push(b1.cubic);
+  const retOutlineProgress = [];
+  for (let index = 0; index < cubics.length + 2; index++) {
+    if (index === 0) {
+      retOutlineProgress.push(0);
+    } else if (index === cubics.length + 1) {
+      retOutlineProgress.push(1);
+    } else {
+      const cubicIndex = (targetIndex + index - 1) % cubics.length;
+      retOutlineProgress.push(
+        positiveModulo(cubics[cubicIndex].endOutlineProgress - cuttingPoint, 1)
+      );
+    }
+  }
+  const newFeatures = mp.features.map((f) => ({
+    progress: positiveModulo(f.progress - cuttingPoint, 1),
+    feature: f.feature
+  }));
+  const measuredCubics = [];
+  let startProgress = 0;
+  for (let i = 0; i < retCubics.length; i++) {
+    if (retOutlineProgress[i + 1] - retOutlineProgress[i] > distanceEpsilon) {
+      measuredCubics.push({
+        cubic: retCubics[i],
+        startOutlineProgress: startProgress,
+        endOutlineProgress: retOutlineProgress[i + 1],
+        measuredSize: mp.measurer.measureCubic(retCubics[i])
+      });
+      startProgress = retOutlineProgress[i + 1];
+    }
+  }
+  const lastCut = measuredCubics.at(-1);
+  if (lastCut) {
+    lastCut.endOutlineProgress = 1;
+  }
+  return {
+    cubics: measuredCubics,
+    features: newFeatures,
+    measurer: mp.measurer
+  };
+}
+function progressInRange(progress, from, to) {
+  if (to >= from) {
+    return progress >= from && progress <= to;
+  }
+  return progress >= from || progress <= to;
+}
+function progressDistance(p1, p2) {
+  const d = Math.abs(p1 - p2);
+  return Math.min(d, 1 - d);
+}
+function linearMap(xValues, yValues, x) {
+  let segStartIndex = 0;
+  for (let i = 0; i < xValues.length; i++) {
+    if (progressInRange(x, xValues[i], xValues[(i + 1) % xValues.length])) {
+      segStartIndex = i;
+      break;
+    }
+  }
+  const segEndIndex = (segStartIndex + 1) % xValues.length;
+  const segSizeX = positiveModulo(
+    xValues[segEndIndex] - xValues[segStartIndex],
+    1
+  );
+  const segSizeY = positiveModulo(
+    yValues[segEndIndex] - yValues[segStartIndex],
+    1
+  );
+  const posInSeg = segSizeX < 1e-3 ? 0.5 : positiveModulo(x - xValues[segStartIndex], 1) / segSizeX;
+  return positiveModulo(yValues[segStartIndex] + segSizeY * posInSeg, 1);
+}
+var DoubleMapper = class _DoubleMapper {
+  sourceValues;
+  targetValues;
+  constructor(mappings) {
+    this.sourceValues = mappings.map((m) => m[0]);
+    this.targetValues = mappings.map((m) => m[1]);
+  }
+  map(x) {
+    return linearMap(this.sourceValues, this.targetValues, x);
+  }
+  mapBack(x) {
+    return linearMap(this.targetValues, this.sourceValues, x);
+  }
+  static Identity = new _DoubleMapper([
+    [0, 0],
+    [0.5, 0.5]
+  ]);
+};
+function featureRepresentativePoint(f) {
+  const first = f.cubics[0];
+  const last = f.cubics.at(-1) ?? first;
+  return pt(
+    (first.anchor0X + last.anchor1X) / 2,
+    (first.anchor0Y + last.anchor1Y) / 2
+  );
+}
+function featureDistSquared(f1, f2) {
+  if (f1.type === "corner" && f2.type === "corner" && f1.convex !== f2.convex) {
+    return Number.MAX_VALUE;
+  }
+  const p1 = featureRepresentativePoint(f1);
+  const p2 = featureRepresentativePoint(f2);
+  const d = ptSub(p1, p2);
+  return d.x * d.x + d.y * d.y;
+}
+function buildCandidateList(features1, features2) {
+  const result = [];
+  for (const f1 of features1) {
+    for (const f2 of features2) {
+      const d = featureDistSquared(f1.feature, f2.feature);
+      if (d !== Number.MAX_VALUE) {
+        result.push({ distance: d, f1, f2 });
+      }
+    }
+  }
+  result.sort((a, b) => a.distance - b.distance);
+  return result;
+}
+function canInsertMapping(mapping, insertionIndex, p1, p2) {
+  const n = mapping.length;
+  if (n === 0) {
+    return true;
+  }
+  const [before1, before2] = mapping[(insertionIndex + n - 1) % n];
+  const [after1, after2] = mapping[insertionIndex % n];
+  if (progressDistance(p1, before1) < distanceEpsilon || progressDistance(p1, after1) < distanceEpsilon || progressDistance(p2, before2) < distanceEpsilon || progressDistance(p2, after2) < distanceEpsilon) {
+    return false;
+  }
+  return n <= 1 || progressInRange(p2, before2, after2);
+}
+function doMapping(features1, features2) {
+  const candidates = buildCandidateList(features1, features2);
+  if (candidates.length === 0) {
+    return [
+      [0, 0],
+      [0.5, 0.5]
+    ];
+  }
+  if (candidates.length === 1) {
+    const dv = candidates[0];
+    return [
+      [dv.f1.progress, dv.f2.progress],
+      [(dv.f1.progress + 0.5) % 1, (dv.f2.progress + 0.5) % 1]
+    ];
+  }
+  const mapping = [];
+  const usedF1 = /* @__PURE__ */ new Set();
+  const usedF2 = /* @__PURE__ */ new Set();
+  for (const dv of candidates) {
+    if (usedF1.has(dv.f1) || usedF2.has(dv.f2)) {
+      continue;
+    }
+    let insertionIndex = 0;
+    for (let i = 0; i < mapping.length; i++) {
+      if (mapping[i][0] < dv.f1.progress) {
+        insertionIndex = i + 1;
+      }
+    }
+    if (!canInsertMapping(mapping, insertionIndex, dv.f1.progress, dv.f2.progress)) {
+      continue;
+    }
+    mapping.splice(insertionIndex, 0, [dv.f1.progress, dv.f2.progress]);
+    usedF1.add(dv.f1);
+    usedF2.add(dv.f2);
+  }
+  return mapping;
+}
+function featureMapper(features1, features2) {
+  const filtered1 = features1.filter((f) => f.feature.type === "corner");
+  const filtered2 = features2.filter((f) => f.feature.type === "corner");
+  const mapping = doMapping(filtered1, filtered2);
+  return new DoubleMapper(mapping);
+}
+var Morph = class {
+  morphMatch;
+  constructor(start, end) {
+    this.morphMatch = matchPolygons(start, end);
+  }
+  asCubics(progress) {
+    const result = [];
+    let firstCubic = null;
+    let lastCubic = null;
+    for (const [a, b] of this.morphMatch) {
+      const points = new Float64Array(8);
+      for (let j = 0; j < 8; j++) {
+        points[j] = interpolate(a.points[j], b.points[j], progress);
+      }
+      const cubic = new Cubic(points);
+      if (!firstCubic) {
+        firstCubic = cubic;
+      }
+      if (lastCubic) {
+        result.push(lastCubic);
+      }
+      lastCubic = cubic;
+    }
+    if (lastCubic && firstCubic) {
+      result.push(
+        new Cubic(
+          lastCubic.anchor0X,
+          lastCubic.anchor0Y,
+          lastCubic.control0X,
+          lastCubic.control0Y,
+          lastCubic.control1X,
+          lastCubic.control1Y,
+          firstCubic.anchor0X,
+          firstCubic.anchor0Y
+        )
+      );
+    }
+    return result;
+  }
+};
+function matchPolygons(p1, p2) {
+  const measurer = new LengthMeasurer();
+  const measuredPolygon1 = measurePolygon(measurer, p1);
+  const measuredPolygon2 = measurePolygon(measurer, p2);
+  const doubleMapper = featureMapper(
+    measuredPolygon1.features,
+    measuredPolygon2.features
+  );
+  const polygon2CutPoint = doubleMapper.map(0);
+  const bs1 = measuredPolygon1;
+  const bs2 = cutAndShift(measuredPolygon2, polygon2CutPoint);
+  const ret = [];
+  let i1 = 0;
+  let i2 = 0;
+  let b1 = bs1.cubics[i1++] ?? null;
+  let b2 = bs2.cubics[i2++] ?? null;
+  while (b1 !== null && b2 !== null) {
+    const b1a = i1 === bs1.cubics.length ? 1 : b1.endOutlineProgress;
+    const b2a = i2 === bs2.cubics.length ? 1 : doubleMapper.mapBack(
+      positiveModulo(b2.endOutlineProgress + polygon2CutPoint, 1)
+    );
+    const minb = Math.min(b1a, b2a);
+    let seg1;
+    let newb1;
+    if (b1a > minb + angleEpsilon) {
+      const [s, n] = cutMeasuredCubicAtProgress(b1, minb, measurer);
+      seg1 = s;
+      newb1 = n;
+    } else {
+      seg1 = b1;
+      newb1 = bs1.cubics[i1++] ?? null;
+    }
+    let seg2;
+    let newb2;
+    if (b2a > minb + angleEpsilon) {
+      const [s, n] = cutMeasuredCubicAtProgress(
+        b2,
+        positiveModulo(doubleMapper.map(minb) - polygon2CutPoint, 1),
+        measurer
+      );
+      seg2 = s;
+      newb2 = n;
+    } else {
+      seg2 = b2;
+      newb2 = bs2.cubics[i2++] ?? null;
+    }
+    ret.push([seg1.cubic, seg2.cubic]);
+    b1 = newb1;
+    b2 = newb2;
+  }
+  return ret;
+}
+
+// src/output/clip-path.ts
+function toClipPathPolygon(cubics, samplesPerCubic = 4) {
+  if (cubics.length === 0) {
+    return "polygon(0% 0%)";
+  }
+  const points = [];
+  for (const cubic of cubics) {
+    for (let i = 0; i < samplesPerCubic; i++) {
+      const t = i / samplesPerCubic;
+      const point = cubic.pointOnCurve(t);
+      points.push(
+        `${(point.x * 100).toFixed(2)}% ${(point.y * 100).toFixed(2)}%`
+      );
+    }
+  }
+  return `polygon(${points.join(",")})`;
+}
+
+// src/react/use-morph.ts
+function useMorph(startShape, endShape, options) {
+  const morph = react.useMemo(
+    () => new Morph(getShape(startShape), getShape(endShape)),
+    [startShape, endShape]
+  );
+  const [currentProgress, setCurrentProgress] = react.useState(options.progress);
+  const animRef = react.useRef(0);
+  const progressRef = react.useRef(currentProgress);
+  progressRef.current = currentProgress;
+  const targetRef = react.useRef(options.progress);
+  const animate = react.useCallback((from, to, duration) => {
+    cancelAnimationFrame(animRef.current);
+    if (Math.abs(from - to) < 1e-3) {
+      setCurrentProgress(to);
+      return;
+    }
+    let startTime = null;
+    const step = (timestamp) => {
+      if (!startTime) {
+        startTime = timestamp;
+      }
+      const elapsed = timestamp - startTime;
+      const t = Math.min(elapsed / duration, 1);
+      const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+      setCurrentProgress(from + (to - from) * eased);
+      if (t < 1) {
+        animRef.current = requestAnimationFrame(step);
+      }
+    };
+    animRef.current = requestAnimationFrame(step);
+  }, []);
+  react.useEffect(() => {
+    const prev = targetRef.current;
+    targetRef.current = options.progress;
+    if (Math.abs(prev - options.progress) > 1e-3) {
+      animate(progressRef.current, options.progress, options.duration ?? 300);
+    }
+  }, [options.progress, options.duration, animate]);
+  react.useEffect(() => {
+    return () => cancelAnimationFrame(animRef.current);
+  }, []);
+  const samples = options.samples ?? 4;
+  const size = options.size ?? 100;
+  return react.useMemo(() => {
+    const cubics = morph.asCubics(currentProgress);
+    return {
+      pathD: toPathD(cubics, size),
+      clipPath: toClipPathPolygon(cubics, samples),
+      progress: currentProgress
+    };
+  }, [morph, currentProgress, samples, size]);
+}
+function useShape(name, size = 100) {
+  return react.useMemo(() => {
+    const polygon = getShape(name);
+    return {
+      pathD: toPathD(polygon.cubics, size),
+      clipPath: toClipPathPolygon(polygon.cubics),
+      polygon
+    };
+  }, [name, size]);
+}
+
+exports.Shape = Shape;
+exports.useMorph = useMorph;
+exports.useShape = useShape;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map