@bug-on/m3-expressive 1.3.5 → 1.3.7

package/dist/shapes.mjs

@@ -36,6 +36,13 @@ function transformFeature(feature, fn) {
   }
   return edgeFeature(cubics);
 }
+function reverseFeature(feature) {
+  const cubics = feature.cubics.slice().reverse().map((c) => c.reverse());
+  if (feature.type === "corner") {
+    return cornerFeature(cubics, feature.convex);
+  }
+  return edgeFeature(cubics);
+}
 
 // src/shapes/math/corner-rounding.ts
 function cornerRounding(radius = 0, smoothing = 0) {
@@ -80,6 +87,10 @@ function convex(prevX, prevY, currX, currY, nextX, nextY) {
   const v2y = nextY - currY;
   return v1x * v2y - v1y * v2x > 0;
 }
+function formatCoordinate(v) {
+  const rounded = Math.round(v * 1e4) / 1e4;
+  return (rounded === 0 ? 0 : rounded).toString();
+}
 
 // src/shapes/math/point.ts
 function point(x, y) {
@@ -179,9 +190,16 @@ var Cubic = class _Cubic {
    */
   pointOnCurve(t) {
     const u = 1 - t;
+    const uu = u * u;
+    const tt = t * t;
+    const uuu = uu * u;
+    const ttt = tt * t;
+    const c0 = 3 * t * uu;
+    const c1 = 3 * tt * u;
+    const p = this.points;
     return point(
-      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)
+      p[0] * uuu + p[2] * c0 + p[4] * c1 + p[6] * ttt,
+      p[1] * uuu + p[3] * c0 + p[5] * c1 + p[7] * ttt
     );
   }
   /**
@@ -404,13 +422,17 @@ var MutableCubic = class extends Cubic {
    * @param progress - Interpolation factor [0, 1]
    */
   interpolate(c1, c2, progress) {
-    for (let i = 0; i < 8; i++) {
-      this.points[i] = interpolate(
-        c1.points[i],
-        c2.points[i],
-        progress
-      );
-    }
+    const p1 = c1.points;
+    const p2 = c2.points;
+    const p = this.points;
+    p[0] = p1[0] + (p2[0] - p1[0]) * progress;
+    p[1] = p1[1] + (p2[1] - p1[1]) * progress;
+    p[2] = p1[2] + (p2[2] - p1[2]) * progress;
+    p[3] = p1[3] + (p2[3] - p1[3]) * progress;
+    p[4] = p1[4] + (p2[4] - p1[4]) * progress;
+    p[5] = p1[5] + (p2[5] - p1[5]) * progress;
+    p[6] = p1[6] + (p2[6] - p1[6]) * progress;
+    p[7] = p1[7] + (p2[7] - p1[7]) * progress;
   }
   /**
    * Mutably applies a PointTransformer to all points.
@@ -822,6 +844,36 @@ var RoundedPolygon = class _RoundedPolygon {
       this.centerY + d
     ];
   }
+  /**
+   * Calculates the approximate signed area of the polygon using anchor points.
+   * Returns > 0 for Clockwise (in screen coords, y down), < 0 for Counter-Clockwise.
+   */
+  calculateSignedArea() {
+    let area = 0;
+    const n = this.cubics.length;
+    for (let i = 0; i < n; i++) {
+      const c = this.cubics[i];
+      area += c.anchor0X * c.anchor1Y - c.anchor1X * c.anchor0Y;
+    }
+    return area / 2;
+  }
+  /**
+   * Returns true if the polygon outline runs in Clockwise order (screen coords).
+   */
+  isClockwise() {
+    return this.calculateSignedArea() > 0;
+  }
+  /**
+   * Returns a reversed copy of the polygon with reversed traversal order.
+   * Flips the winding direction (CW ↔ CCW).
+   */
+  reversed() {
+    const reversedFeatures = this.features.slice().reverse().map((f) => reverseFeature(f));
+    return new _RoundedPolygon(
+      reversedFeatures,
+      point(this.centerX, this.centerY)
+    );
+  }
 };
 function buildCubicsList(features) {
   const result = [];
@@ -890,10 +942,21 @@ function validateContiguity(cubics) {
 
 // src/shapes/catalog/md3-expressive-shapes.ts
 function createShape(pts) {
-  const cubics = pts.map((p) => new Cubic(p));
-  return RoundedPolygon.fromFeatures(
-    cubics.map((c) => cornerFeature([c], false))
-  );
+  let rawArea = 0;
+  for (const p of pts) {
+    rawArea += p[0] * p[7] - p[6] * p[1];
+  }
+  const normalizedPts = rawArea < 0 ? pts.slice().reverse().map((p) => [p[6], p[7], p[4], p[5], p[2], p[3], p[0], p[1]]) : pts;
+  const cubics = normalizedPts.map((p) => new Cubic(p));
+  const n = cubics.length;
+  const features = cubics.map((c, i) => {
+    const prev = cubics[(i - 1 + n) % n].pointOnCurve(0.5);
+    const curr = c.pointOnCurve(0.5);
+    const next = cubics[(i + 1) % n].pointOnCurve(0.5);
+    const isConvex = convex(prev.x, prev.y, curr.x, curr.y, next.x, next.y);
+    return cornerFeature([c], isConvex);
+  });
+  return RoundedPolygon.fromFeatures(features);
 }
 var archShape = createShape([
   [1, 0.83461, 1, 0.8547, 1, 0.86477, 0.99898, 0.87322],
@@ -1991,6 +2054,94 @@ function resolveShape(ref) {
   return shape;
 }
 
+// src/shapes/catalog/shape-pairings.ts
+var MD3_SHAPE_PAIRINGS = {
+  // ─── Organic & Floral ──────────────────────────────────────────
+  circle: "flower",
+  flower: "sunny",
+  sunny: "verySunny",
+  verySunny: "flower",
+  bun: "clamshell",
+  clamshell: "bun",
+  puffy: "circle",
+  // ─── Starburst & Explosive ─────────────────────────────────────
+  burst: "softBurst",
+  softBurst: "boom",
+  boom: "softBoom",
+  softBoom: "burst",
+  cookie12Sided: "softBurst",
+  // ─── Clover, Gem & Diamond ─────────────────────────────────────
+  diamond: "puffyDiamond",
+  puffyDiamond: "diamond",
+  clover4Leaf: "clover8Leaf",
+  clover8Leaf: "clover4Leaf",
+  gem: "diamond",
+  heart: "clover4Leaf",
+  // ─── Cookies & Geometric Multi-sided ───────────────────────────
+  cookie4Sided: "cookie6Sided",
+  cookie6Sided: "cookie9Sided",
+  cookie7Sided: "cookie12Sided",
+  cookie9Sided: "cookie7Sided",
+  square: "cookie4Sided",
+  // ─── Rounded & Architectural ───────────────────────────────────
+  pill: "oval",
+  oval: "arch",
+  arch: "semiCircle",
+  semiCircle: "pill",
+  slanted: "arch",
+  // ─── Polygonal, Directional & Pixel ────────────────────────────
+  triangle: "arrow",
+  arrow: "pentagon",
+  pentagon: "triangle",
+  fan: "ghostish",
+  ghostish: "fan",
+  pixelTriangle: "pixelCircle",
+  pixelCircle: "circle"
+};
+var MD3_SHAPE_FAMILIES = {
+  organic: [
+    "circle",
+    "flower",
+    "sunny",
+    "verySunny",
+    "bun",
+    "clamshell",
+    "puffy"
+  ],
+  starburst: ["burst", "softBurst", "boom", "softBoom", "cookie12Sided"],
+  cloverAndGems: [
+    "diamond",
+    "puffyDiamond",
+    "clover4Leaf",
+    "clover8Leaf",
+    "gem",
+    "heart"
+  ],
+  cookiesAndPolygons: [
+    "cookie4Sided",
+    "cookie6Sided",
+    "cookie7Sided",
+    "cookie9Sided",
+    "square"
+  ],
+  roundedContainers: ["pill", "oval", "arch", "semiCircle", "slanted"],
+  directionalAndPixel: [
+    "triangle",
+    "arrow",
+    "pentagon",
+    "fan",
+    "ghostish",
+    "pixelTriangle",
+    "pixelCircle"
+  ]
+};
+function getRecommendedMorphShape(shape) {
+  if (typeof shape === "string" && shape in MD3_SHAPE_PAIRINGS) {
+    return MD3_SHAPE_PAIRINGS[shape];
+  }
+  return "circle";
+}
+
 // src/shapes/catalog/shape-tokens.ts
 var MD3CornerRadius = {
   /** 0dp — Sharp corners */
@@ -2156,6 +2307,56 @@ function pillStarVertices(width, height, numVerticesPerRadius, innerRadiusRatio,
   return result;
 }
 
+// src/shapes/morph/feature-mapping.ts
+function angleDiff(a1, a2) {
+  let diff = Math.abs(a1 - a2);
+  if (diff > Math.PI) diff = 2 * Math.PI - diff;
+  return diff;
+}
+var TWO_PI_SQ = 4 * Math.PI * Math.PI;
+function featureMapper(features1, features2) {
+  const convex1 = features1.filter((f) => f.convex);
+  const convex2 = features2.filter((f) => f.convex);
+  const set1 = convex1.length > 0 ? convex1 : features1;
+  const set2 = convex2.length > 0 ? convex2 : features2;
+  if (set1.length === 0 || set2.length === 0) {
+    return { map: (v) => v, mapBack: (v) => v };
+  }
+  let bestShift = 0;
+  let minCost = Number.MAX_VALUE;
+  for (const f1 of set1) {
+    for (const f2 of set2) {
+      const shift = positiveModulo(f2.progress - f1.progress, 1);
+      let cost = 0;
+      for (const c1 of set1) {
+        const expected = positiveModulo(c1.progress + shift, 1);
+        let dMin = Number.MAX_VALUE;
+        let matchedC2 = set2[0];
+        for (const c2 of set2) {
+          const diff = Math.abs(expected - c2.progress);
+          const d = diff > 0.5 ? 1 - diff : diff;
+          if (d < dMin) {
+            dMin = d;
+            matchedC2 = c2;
+          }
+        }
+        const progErrorSq = dMin * dMin * TWO_PI_SQ;
+        const angDiff = c1.angle !== void 0 && matchedC2.angle !== void 0 ? angleDiff(c1.angle, matchedC2.angle) : 0;
+        cost += progErrorSq + angDiff * angDiff;
+        if (cost >= minCost) break;
+      }
+      if (cost < minCost) {
+        minCost = cost;
+        bestShift = shift;
+      }
+    }
+  }
+  return {
+    map: (v) => positiveModulo(v + bestShift, 1),
+    mapBack: (v) => positiveModulo(v - bestShift, 1)
+  };
+}
+
 // src/shapes/morph/float-mapping.ts
 function mapSegments(value, segments) {
   for (const seg of segments) {
@@ -2200,32 +2401,6 @@ function createDoubleMapper(fromValues, toValues) {
   };
 }
 
-// src/shapes/morph/feature-mapping.ts
-function featureMapper(features1, features2) {
-  const convex1 = features1.filter((f) => f.convex);
-  const convex2 = features2.filter((f) => f.convex);
-  if (convex1.length === 0 || convex2.length === 0) {
-    return createDoubleMapper([], []);
-  }
-  const fromValues = [];
-  const toValues = [];
-  for (const f1 of convex1) {
-    let bestDist = Number.MAX_VALUE;
-    let bestProgress = 0;
-    for (const f2 of convex2) {
-      const diff = Math.abs(f1.progress - f2.progress);
-      const dist = Math.min(diff, 1 - diff);
-      if (dist < bestDist) {
-        bestDist = dist;
-        bestProgress = f2.progress;
-      }
-    }
-    fromValues.push(f1.progress);
-    toValues.push(bestProgress);
-  }
-  return createDoubleMapper(fromValues, toValues);
-}
-
 // src/shapes/morph/polygon-measure.ts
 var MeasuredPolygon = class _MeasuredPolygon {
   constructor(measuredCubics, features) {
@@ -2259,9 +2434,8 @@ var MeasuredPolygon = class _MeasuredPolygon {
     const t = segLen > 0 ? (cutPoint - cutCubic.startOutlineProgress) / segLen : 0;
     const [left, right] = cutCubic.cubic.split(t);
     const shift = (p) => {
-      let s = p - cutPoint;
-      if (s < 0) s += 1;
-      return s;
+      const s = p - cutPoint;
+      return s < 0 ? s + 1 : s;
     };
     if (!right.zeroLength()) {
       result.push({
@@ -2270,9 +2444,19 @@ var MeasuredPolygon = class _MeasuredPolygon {
         endOutlineProgress: shift(cutCubic.endOutlineProgress)
       });
     }
-    for (let i = 1; i < this.measuredCubics.length; i++) {
-      const idx = (cutCubicIdx + i) % this.measuredCubics.length;
-      const mc = this.measuredCubics[idx];
+    const totalCubics = this.measuredCubics.length;
+    for (let i = cutCubicIdx + 1; i < totalCubics; i++) {
+      const mc = this.measuredCubics[i];
+      if (!mc.cubic.zeroLength()) {
+        result.push({
+          cubic: mc.cubic,
+          startOutlineProgress: shift(mc.startOutlineProgress),
+          endOutlineProgress: shift(mc.endOutlineProgress)
+        });
+      }
+    }
+    for (let i = 0; i < cutCubicIdx; i++) {
+      const mc = this.measuredCubics[i];
       if (!mc.cubic.zeroLength()) {
         result.push({
           cubic: mc.cubic,
@@ -2354,7 +2538,16 @@ var MeasuredPolygon = class _MeasuredPolygon {
         const mc = measured[Math.min(cubicIdx + middleCubicIdx, measured.length - 1)];
         if (mc) {
           const midProgress = (mc.startOutlineProgress + mc.endOutlineProgress) / 2;
-          featureList.push({ progress: midProgress, convex: feature.convex });
+          const pt = mc.cubic.pointOnCurve(0.5);
+          const angle = Math.atan2(
+            pt.y - polygon.centerY,
+            pt.x - polygon.centerX
+          );
+          featureList.push({
+            progress: midProgress,
+            convex: feature.convex,
+            angle
+          });
         }
       }
       cubicIdx += feature.cubics.length;
@@ -2364,18 +2557,30 @@ var MeasuredPolygon = class _MeasuredPolygon {
 };
 function approximateLength(cubic) {
   let len = 0;
-  let prevX = cubic.anchor0X, prevY = cubic.anchor0Y;
+  const p = cubic.points;
+  let prevX = p[0];
+  let prevY = p[1];
   const steps = 4;
   for (let i = 1; i <= steps; i++) {
-    const p = cubic.pointOnCurve(i / steps);
-    len += distance(p.x - prevX, p.y - prevY);
-    prevX = p.x;
-    prevY = p.y;
+    const t = i / steps;
+    const u = 1 - t;
+    const uu = u * u;
+    const tt = t * t;
+    const uuu = uu * u;
+    const ttt = tt * t;
+    const c0 = 3 * t * uu;
+    const c1 = 3 * tt * u;
+    const px = p[0] * uuu + p[2] * c0 + p[4] * c1 + p[6] * ttt;
+    const py = p[1] * uuu + p[3] * c0 + p[5] * c1 + p[7] * ttt;
+    len += distance(px - prevX, py - prevY);
+    prevX = px;
+    prevY = py;
   }
   return len;
 }
 
 // src/shapes/morph/morph.ts
+var morphMatchCache = /* @__PURE__ */ new WeakMap();
 var Morph = class _Morph {
   /**
    * Creates a Morph between two shapes.
@@ -2391,23 +2596,79 @@ var Morph = class _Morph {
    * Returns the interpolated shape at the given progress as a list of Cubics.
    *
    * Note: This allocates a new list. For performance-critical animation loops,
-   * use {@link forEachCubic} instead.
+   * use {@link toSvgPath} or {@link forEachCubic} instead.
    *
    * @param progress - Value in [0, 1]. 0 = start shape, 1 = end shape.
    *   Values outside [0, 1] produce exaggerated shapes (useful for bounce/overshoot).
    * @returns List of interpolated Cubic curves forming the morphed shape
    */
   asCubics(progress) {
-    const result = [];
-    for (const [c1, c2] of this.morphMatch) {
-      result.push(
-        new Cubic(
-          c1.points.map((v, i) => interpolate(v, c2.points[i], progress))
-        )
-      );
+    const match = this.morphMatch;
+    const len = match.length;
+    const result = new Array(len);
+    for (let i = 0; i < len; i++) {
+      const [c1, c2] = match[i];
+      const p1 = c1.points;
+      const p2 = c2.points;
+      result[i] = new Cubic([
+        p1[0] + (p2[0] - p1[0]) * progress,
+        p1[1] + (p2[1] - p1[1]) * progress,
+        p1[2] + (p2[2] - p1[2]) * progress,
+        p1[3] + (p2[3] - p1[3]) * progress,
+        p1[4] + (p2[4] - p1[4]) * progress,
+        p1[5] + (p2[5] - p1[5]) * progress,
+        p1[6] + (p2[6] - p1[6]) * progress,
+        p1[7] + (p2[7] - p1[7]) * progress
+      ]);
     }
     return result;
   }
+  /**
+   * Returns an SVG path data string for the morphed shape at the given progress.
+   * Directly evaluates coordinates without allocating intermediate Cubic objects.
+   *
+   * @param progress - Value in [0, 1]
+   * @param width - Target pixel width (default: 1)
+   * @param height - Target pixel height (default: 1)
+   */
+  toSvgPath(progress, width = 1, height = 1) {
+    const match = this.morphMatch;
+    const len = match.length;
+    if (len === 0) return "";
+    const paddingX = width * 0.015;
+    const paddingY = height * 0.015;
+    const sx = width - 2 * paddingX;
+    const sy = height - 2 * paddingY;
+    const [firstC1, firstC2] = match[0];
+    const f1 = firstC1.points;
+    const f2 = firstC2.points;
+    const a0x = f1[0] + (f2[0] - f1[0]) * progress;
+    const a0y = f1[1] + (f2[1] - f1[1]) * progress;
+    let d = `M ${formatCoordinate(paddingX + a0x * sx)} ${formatCoordinate(paddingY + sy * (1 - a0y))}`;
+    for (let i = 0; i < len; i++) {
+      const [c1, c2] = match[i];
+      const p1 = c1.points;
+      const p2 = c2.points;
+      const c0x = p1[2] + (p2[2] - p1[2]) * progress;
+      const c0y = p1[3] + (p2[3] - p1[3]) * progress;
+      const c1x = p1[4] + (p2[4] - p1[4]) * progress;
+      const c1y = p1[5] + (p2[5] - p1[5]) * progress;
+      const a1x = p1[6] + (p2[6] - p1[6]) * progress;
+      const a1y = p1[7] + (p2[7] - p1[7]) * progress;
+      d += ` C ${formatCoordinate(paddingX + c0x * sx)} ${formatCoordinate(paddingY + sy * (1 - c0y))},${formatCoordinate(paddingX + c1x * sx)} ${formatCoordinate(paddingY + sy * (1 - c1y))},${formatCoordinate(paddingX + a1x * sx)} ${formatCoordinate(paddingY + sy * (1 - a1y))}`;
+    }
+    return `${d} Z`;
+  }
+  /**
+   * Returns a CSS clip-path value for the morphed shape at the given progress.
+   *
+   * @param progress - Value in [0, 1]
+   * @param width - Element width in pixels
+   * @param height - Element height in pixels
+   */
+  toClipPath(progress, width, height) {
+    return `path('${this.toSvgPath(progress, width, height)}')`;
+  }
   /**
    * Iterates over the morphed cubics without allocating new Cubic instances.
    * Reuses a single MutableCubic for each callback invocation.
@@ -2481,8 +2742,15 @@ var Morph = class _Morph {
    * @internal
    */
   static match(p1, p2) {
-    const measured1 = MeasuredPolygon.measurePolygon(p1);
-    const measured2 = MeasuredPolygon.measurePolygon(p2);
+    let cachedMap = morphMatchCache.get(p1);
+    if (cachedMap) {
+      const cached = cachedMap.get(p2);
+      if (cached) return cached;
+    }
+    const poly1 = p1.isClockwise() ? p1 : p1.reversed();
+    const poly2 = p2.isClockwise() ? p2 : p2.reversed();
+    const measured1 = MeasuredPolygon.measurePolygon(poly1);
+    const measured2 = MeasuredPolygon.measurePolygon(poly2);
     const doubleMapper = featureMapper(measured1.features, measured2.features);
     const polygon2CutPoint = doubleMapper.map(0);
     const bs1 = measured1;
@@ -2493,11 +2761,12 @@ var Morph = class _Morph {
     let b2 = bs2.getOrNull(i2++);
     while (b1 !== null && b2 !== null) {
       const b1a = i1 >= bs1.size ? 1 : b1.endOutlineProgress;
-      const b2aRaw = i2 >= bs2.size ? 1 : positiveModulo(b2.endOutlineProgress + polygon2CutPoint, 1);
-      const b2a = doubleMapper.mapBack(b2aRaw);
+      const b2a = i2 >= bs2.size ? 1 : b2.endOutlineProgress;
       const minb = Math.min(b1a, b2a);
-      let seg1 = b1, newb1 = bs1.getOrNull(i1);
-      let seg2 = b2, newb2 = bs2.getOrNull(i2);
+      let seg1 = b1;
+      let newb1 = bs1.getOrNull(i1);
+      let seg2 = b2;
+      let newb2 = bs2.getOrNull(i2);
       if (b1a > minb + ANGLE_EPSILON) {
         const [cut, rest] = bs1.cutAtProgress(b1, minb);
         seg1 = cut;
@@ -2506,11 +2775,7 @@ var Morph = class _Morph {
         i1++;
       }
       if (b2a > minb + ANGLE_EPSILON) {
-        const targetProgress = positiveModulo(
-          doubleMapper.map(minb) - polygon2CutPoint,
-          1
-        );
-        const [cut, rest] = bs2.cutAtProgress(b2, targetProgress);
+        const [cut, rest] = bs2.cutAtProgress(b2, minb);
         seg2 = cut;
         newb2 = rest;
       } else {
@@ -2520,44 +2785,83 @@ var Morph = class _Morph {
       b1 = newb1;
       b2 = newb2;
     }
+    if (!cachedMap) {
+      cachedMap = /* @__PURE__ */ new WeakMap();
+      morphMatchCache.set(p1, cachedMap);
+    }
+    cachedMap.set(p2, result);
     return result;
   }
 };
 
 // src/shapes/render/shape-rendering.ts
 function toSvgPath(cubics, width = 1, height = 1) {
-  if (cubics.length === 0) return "";
+  const len = cubics.length;
+  if (len === 0) return "";
   const paddingX = width * 0.015;
   const paddingY = height * 0.015;
   const sx = width - 2 * paddingX;
   const sy = height - 2 * paddingY;
-  const flipY = (y) => paddingY + sy * (1 - y);
-  const parts = [
-    `M ${fmt(paddingX + cubics[0].anchor0X * sx)} ${fmt(flipY(cubics[0].anchor0Y))}`
-  ];
-  for (const c of cubics) {
-    parts.push(
-      `C ${fmt(paddingX + c.control0X * sx)} ${fmt(flipY(c.control0Y))},${fmt(paddingX + c.control1X * sx)} ${fmt(flipY(c.control1Y))},${fmt(paddingX + c.anchor1X * sx)} ${fmt(flipY(c.anchor1Y))}`
-    );
+  const c0 = cubics[0];
+  let d = `M ${formatCoordinate(paddingX + c0.anchor0X * sx)} ${formatCoordinate(paddingY + sy * (1 - c0.anchor0Y))}`;
+  for (let i = 0; i < len; i++) {
+    const c = cubics[i];
+    d += ` C ${formatCoordinate(paddingX + c.control0X * sx)} ${formatCoordinate(paddingY + sy * (1 - c.control0Y))},${formatCoordinate(paddingX + c.control1X * sx)} ${formatCoordinate(paddingY + sy * (1 - c.control1Y))},${formatCoordinate(paddingX + c.anchor1X * sx)} ${formatCoordinate(paddingY + sy * (1 - c.anchor1Y))}`;
   }
-  parts.push("Z");
-  return parts.join(" ");
+  return `${d} Z`;
 }
 function toClipPath(polygon, width, height) {
   const pathData = toSvgPath(polygon.cubics, width, height);
   return `path('${pathData}')`;
 }
 function interpolatePath(morph, progress, width, height) {
-  const cubics = morph.asCubics(progress);
-  return toClipPath({ cubics }, width, height);
-}
-function fmt(v) {
-  return Number(v.toFixed(4)).toString();
+  return morph.toClipPath(progress, width, height);
 }
+
+// src/ui/shape-media/animation-utils.ts
 function prefersReducedMotion() {
-  if (typeof window === "undefined") return false;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
+function easeCubicInOut(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+function cubicBezier(x1, y1, x2, y2) {
+  return (t) => {
+    if (t === 0 || t === 1) return t;
+    let tParam = t;
+    for (let i = 0; i < 8; i++) {
+      const x = 3 * (1 - tParam) ** 2 * tParam * x1 + 3 * (1 - tParam) * tParam ** 2 * x2 + tParam ** 3;
+      const dx = 3 * (1 - tParam) ** 2 * x1 + 6 * (1 - tParam) * tParam * (x2 - x1) + 3 * tParam ** 2 * (1 - x2);
+      if (Math.abs(dx) < 1e-6) break;
+      tParam -= (x - t) / dx;
+    }
+    return 3 * (1 - tParam) ** 2 * tParam * y1 + 3 * (1 - tParam) * tParam ** 2 * y2 + tParam ** 3;
+  };
+}
+function getEasingFunction(easing) {
+  if (Array.isArray(easing)) {
+    if (easing.length === 4) {
+      const [x1, y1, x2, y2] = easing;
+      return cubicBezier(x1, y1, x2, y2);
+    }
+    return easeCubicInOut;
+  }
+  switch (easing) {
+    case "linear":
+      return (t) => t;
+    case "ease-in":
+      return (t) => t * t * t;
+    case "ease-out":
+      return (t) => 1 - (1 - t) ** 3;
+    default:
+      return easeCubicInOut;
+  }
+}
+
+// src/ui/shape-media/useShapeMorph.ts
 function useShapeMorph({
   shape,
   morphTo,
@@ -2572,10 +2876,16 @@ function useShapeMorph({
   const duration = (_a = morphOptions == null ? void 0 : morphOptions.duration) != null ? _a : 0.3;
   const easing = (_b = morphOptions == null ? void 0 : morphOptions.easing) != null ? _b : "ease-in-out";
   const easingFunction = useMemo(() => getEasingFunction(easing), [easing]);
+  const resolvedTarget = useMemo(() => {
+    if (morphTo === "auto") {
+      return getRecommendedMorphShape(shape);
+    }
+    return morphTo;
+  }, [morphTo, shape]);
   const startShape = useMemo(() => resolveShape(shape), [shape]);
   const endShape = useMemo(
-    () => morphTo ? resolveShape(morphTo) : null,
-    [morphTo]
+    () => resolvedTarget ? resolveShape(resolvedTarget) : null,
+    [resolvedTarget]
   );
   const morph = useMemo(
     () => endShape ? new Morph(startShape, endShape) : null,
@@ -2590,7 +2900,45 @@ function useShapeMorph({
   const startProgressRef = useRef(0);
   const targetProgressRef = useRef(0);
   const currentProgressRef = useRef(0);
+  const prevShapeRef = useRef(shape);
+  useEffect(() => {
+    if (prevShapeRef.current === shape) return;
+    const oldShape = prevShapeRef.current;
+    prevShapeRef.current = shape;
+    if (disabled || prefersReducedMotion()) {
+      setClipPath(toClipPath(resolveShape(shape), width, height));
+      return;
+    }
+    try {
+      const transitionMorph = new Morph(
+        resolveShape(oldShape),
+        resolveShape(shape)
+      );
+      const start = performance.now();
+      const durationMs = duration * 1e3;
+      const animateTransition = (timestamp) => {
+        const elapsed = timestamp - start;
+        const rawT = Math.min(elapsed / durationMs, 1);
+        const ease = easingFunction(rawT);
+        setClipPath(interpolatePath(transitionMorph, ease, width, height));
+        if (rawT < 1) {
+          animRef.current = requestAnimationFrame(animateTransition);
+        } else {
+          animRef.current = null;
+        }
+      };
+      if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+      animRef.current = requestAnimationFrame(animateTransition);
+    } catch (e) {
+      setClipPath(toClipPath(resolveShape(shape), width, height));
+    }
+  }, [shape, disabled, duration, easingFunction, width, height]);
+  const prevDimsRef = useRef({ width, height, startShape, morph });
   useEffect(() => {
+    if (prevDimsRef.current.width === width && prevDimsRef.current.height === height && prevDimsRef.current.startShape === startShape && prevDimsRef.current.morph === morph) {
+      return;
+    }
+    prevDimsRef.current = { width, height, startShape, morph };
     if (morph) {
       setClipPath(
         interpolatePath(morph, currentProgressRef.current, width, height)
@@ -2684,41 +3032,6 @@ function useShapeMorph({
   }, [morphTo, disabled, morphOn, activate, deactivate, isActive]);
   return { clipPath, isActive, activate, deactivate, setProgress, handlers };
 }
-function easeCubicInOut(t) {
-  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
-}
-function cubicBezier(x1, y1, x2, y2) {
-  return (t) => {
-    if (t === 0 || t === 1) return t;
-    let tParam = t;
-    for (let i = 0; i < 8; i++) {
-      const x = 3 * (1 - tParam) ** 2 * tParam * x1 + 3 * (1 - tParam) * tParam ** 2 * x2 + tParam ** 3;
-      const dx = 3 * (1 - tParam) ** 2 * x1 + 6 * (1 - tParam) * tParam * (x2 - x1) + 3 * tParam ** 2 * (1 - x2);
-      if (Math.abs(dx) < 1e-6) break;
-      tParam -= (x - t) / dx;
-    }
-    return 3 * (1 - tParam) ** 2 * tParam * y1 + 3 * (1 - tParam) * tParam ** 2 * y2 + tParam ** 3;
-  };
-}
-function getEasingFunction(easing) {
-  if (Array.isArray(easing)) {
-    if (easing.length === 4) {
-      const [x1, y1, x2, y2] = easing;
-      return cubicBezier(x1, y1, x2, y2);
-    }
-    return easeCubicInOut;
-  }
-  switch (easing) {
-    case "linear":
-      return (t) => t;
-    case "ease-in":
-      return (t) => t * t * t;
-    case "ease-out":
-      return (t) => 1 - (1 - t) ** 3;
-    default:
-      return easeCubicInOut;
-  }
-}
 function ShapeMedia({
   shape,
   morphTo,
@@ -2846,10 +3159,14 @@ function ShapeSvg({
   style,
   "aria-label": ariaLabel
 }) {
+  const resolvedTarget = useMemo(() => {
+    if (morphTo === "auto") return getRecommendedMorphShape(shape);
+    return morphTo;
+  }, [morphTo, shape]);
   const startPolygon = useMemo(() => resolveShape(shape), [shape]);
   const endPolygon = useMemo(
-    () => morphTo ? resolveShape(morphTo) : null,
-    [morphTo]
+    () => resolvedTarget ? resolveShape(resolvedTarget) : null,
+    [resolvedTarget]
   );
   const morph = useMemo(
     () => endPolygon ? new Morph(startPolygon, endPolygon) : null,
@@ -2883,7 +3200,177 @@ function ShapeSvg({
     }
   );
 }
+function useShapeSequenceMorph({
+  shapes,
+  duration = 0.6,
+  interval = 2,
+  autoplay = false,
+  loop = true,
+  morphOptions,
+  width,
+  height,
+  disabled = false
+}) {
+  var _a;
+  const resolvedDuration = (_a = morphOptions == null ? void 0 : morphOptions.duration) != null ? _a : duration;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [nextIndex, setNextIndex] = useState(() => shapes.length > 1 ? 1 : 0);
+  const [progress, setProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(autoplay);
+  const animRef = useRef(null);
+  const timerRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const isTransitioningRef = useRef(false);
+  const numShapes = shapes.length;
+  const currentShape = useMemo(() => {
+    if (numShapes === 0) return resolveShape("circle");
+    const safeIdx = (currentIndex % numShapes + numShapes) % numShapes;
+    return resolveShape(shapes[safeIdx]);
+  }, [shapes, currentIndex, numShapes]);
+  const targetShape = useMemo(() => {
+    if (numShapes === 0) return resolveShape("circle");
+    const safeIdx = (nextIndex % numShapes + numShapes) % numShapes;
+    return resolveShape(shapes[safeIdx]);
+  }, [shapes, nextIndex, numShapes]);
+  const morph = useMemo(() => {
+    if (currentShape === targetShape) return null;
+    return new Morph(currentShape, targetShape);
+  }, [currentShape, targetShape]);
+  const [clipPath, setClipPath] = useState(
+    () => toClipPath(currentShape, width, height)
+  );
+  const prevDimsRef = useRef({ width, height, currentShape, morph, progress });
+  useEffect(() => {
+    if (prevDimsRef.current.width === width && prevDimsRef.current.height === height && prevDimsRef.current.currentShape === currentShape && prevDimsRef.current.morph === morph && prevDimsRef.current.progress === progress) {
+      return;
+    }
+    prevDimsRef.current = { width, height, currentShape, morph, progress };
+    if (morph && progress > 0) {
+      setClipPath(interpolatePath(morph, progress, width, height));
+    } else {
+      setClipPath(toClipPath(currentShape, width, height));
+    }
+  }, [width, height, currentShape, morph, progress]);
+  const transitionTo = useCallback(
+    (toIndex) => {
+      if (disabled || numShapes <= 1 || isTransitioningRef.current) return;
+      const targetSafe = (toIndex % numShapes + numShapes) % numShapes;
+      if (targetSafe === currentIndex) return;
+      setNextIndex(targetSafe);
+      if (prefersReducedMotion()) {
+        setCurrentIndex(targetSafe);
+        setNextIndex((targetSafe + 1) % numShapes);
+        setProgress(0);
+        setClipPath(
+          toClipPath(resolveShape(shapes[targetSafe]), width, height)
+        );
+        return;
+      }
+      isTransitioningRef.current = true;
+      startTimeRef.current = performance.now();
+      const fromPoly = resolveShape(shapes[currentIndex]);
+      const toPoly = resolveShape(shapes[targetSafe]);
+      const activeMorph = new Morph(fromPoly, toPoly);
+      const animate = (timestamp) => {
+        const elapsed = timestamp - startTimeRef.current;
+        const durationMs = resolvedDuration * 1e3;
+        const rawT = Math.min(elapsed / durationMs, 1);
+        const ease = easeCubicInOut(rawT);
+        setProgress(rawT);
+        setClipPath(interpolatePath(activeMorph, ease, width, height));
+        if (rawT < 1) {
+          animRef.current = requestAnimationFrame(animate);
+        } else {
+          animRef.current = null;
+          isTransitioningRef.current = false;
+          setCurrentIndex(targetSafe);
+          setNextIndex((targetSafe + 1) % numShapes);
+          setProgress(0);
+        }
+      };
+      if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+      animRef.current = requestAnimationFrame(animate);
+    },
+    [
+      disabled,
+      numShapes,
+      currentIndex,
+      shapes,
+      resolvedDuration,
+      width,
+      height
+    ]
+  );
+  const next = useCallback(() => {
+    if (numShapes <= 1) return;
+    if (!loop && currentIndex >= numShapes - 1) return;
+    transitionTo((currentIndex + 1) % numShapes);
+  }, [numShapes, loop, currentIndex, transitionTo]);
+  const prev = useCallback(() => {
+    if (numShapes <= 1) return;
+    if (!loop && currentIndex <= 0) return;
+    transitionTo((currentIndex - 1 + numShapes) % numShapes);
+  }, [numShapes, loop, currentIndex, transitionTo]);
+  const goTo = useCallback(
+    (index) => {
+      transitionTo(index);
+    },
+    [transitionTo]
+  );
+  const play = useCallback(() => {
+    setIsPlaying(true);
+  }, []);
+  const pause = useCallback(() => {
+    setIsPlaying(false);
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (!isPlaying || disabled || numShapes <= 1) return;
+    timerRef.current = setTimeout(() => {
+      if (!loop && currentIndex >= numShapes - 1) {
+        setIsPlaying(false);
+        return;
+      }
+      next();
+    }, interval * 1e3);
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [isPlaying, disabled, numShapes, loop, currentIndex, interval, next]);
+  useEffect(() => {
+    return () => {
+      if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (currentIndex >= shapes.length) {
+      setCurrentIndex(0);
+      setNextIndex(shapes.length > 1 ? 1 : 0);
+    }
+  }, [shapes.length, currentIndex]);
+  const safeCurrentIndex = numShapes > 0 ? (currentIndex % numShapes + numShapes) % numShapes : 0;
+  const safeNextIndex = numShapes > 0 ? (nextIndex % numShapes + numShapes) % numShapes : 0;
+  return {
+    clipPath,
+    currentIndex: safeCurrentIndex,
+    nextIndex: safeNextIndex,
+    progress,
+    isPlaying,
+    next,
+    prev,
+    goTo,
+    play,
+    pause
+  };
+}
 
-export { ANGLE_EPSILON, Cubic, DISTANCE_EPSILON, FLOAT_PI, MD3CornerRadius, MD3Shapes, MeasuredPolygon, Morph, MutableCubic, RoundedPolygon, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, UNROUNDED, addPoints, circle, clockwise, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, getDirection, getDistance, getDistanceSquared, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, rotate90, scalePoint, square, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useShapeMorph };
+export { ANGLE_EPSILON, Cubic, DISTANCE_EPSILON, FLOAT_PI, MD3CornerRadius, MD3Shapes, MD3_SHAPE_FAMILIES, MD3_SHAPE_PAIRINGS, MeasuredPolygon, Morph, MutableCubic, RoundedPolygon, ShapeIcon, ShapeMedia, ShapeMediaServer, ShapeSvg, UNROUNDED, addPoints, circle, clockwise, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, formatCoordinate, getDirection, getDistance, getDistanceSquared, getRecommendedMorphShape, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, rotate90, scalePoint, square, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useShapeMorph, useShapeSequenceMorph };
 //# sourceMappingURL=shapes.mjs.map
 //# sourceMappingURL=shapes.mjs.map