@bug-on/m3-expressive 1.3.5 → 1.3.6

package/dist/index.js

@@ -335,6 +335,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) {
@@ -379,6 +386,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) {
@@ -478,9 +489,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
     );
   }
   /**
@@ -703,13 +721,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.
@@ -1121,6 +1143,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 = [];
@@ -1189,10 +1241,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],
@@ -2290,6 +2353,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 */
@@ -2455,6 +2606,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) {
@@ -2499,32 +2700,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) {
@@ -2558,9 +2733,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({
@@ -2569,9 +2743,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,
@@ -2653,7 +2837,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;
@@ -2663,18 +2856,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.
@@ -2690,23 +2895,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.
@@ -2780,8 +3041,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;
@@ -2792,11 +3060,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;
@@ -2805,11 +3074,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 {
@@ -2819,39 +3084,37 @@ 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);
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -14035,45 +14298,64 @@ var DialogOverlay = React67__namespace.forwardRef((_a, ref) => {
   ) }));
 });
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React67__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDialog__namespace.Content,
-    __spreadProps(__spreadValues({
-      ref,
-      asChild: true,
-      "aria-describedby": void 0
-    }, props), {
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        react.m.div,
-        __spreadProps(__spreadValues({
-          className: cn(
-            "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
-            "w-[calc(100%-2rem)] max-w-140",
-            "rounded-[28px] bg-m3-surface-container-high p-6",
-            "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
-            className
-          ),
-          role: "dialog"
-        }, MD3_CONTENT_ANIM), {
-          children: [
-            children,
-            !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsxRuntime.jsx(
-              IconButton,
-              {
-                size: "sm",
-                colorStyle: "filled",
-                className: "absolute right-4 top-4",
-                "aria-label": "Close",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", "aria-hidden": "true" })
-              }
-            ) })
-          ]
-        })
-      )
-    })
-  );
-});
+var DEFAULT_CLOSE_BTN_PROPS = {
+  size: "sm",
+  colorStyle: "standard",
+  className: "absolute right-4 top-4",
+  "aria-label": "Close"
+};
+var DialogContent = React67__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      children,
+      hideCloseButton = false,
+      closeButtonProps,
+      closeButton
+    } = _b, props = __objRest(_b, [
+      "className",
+      "children",
+      "hideCloseButton",
+      "closeButtonProps",
+      "closeButton"
+    ]);
+    const closeAriaLabel = (() => {
+      var _a2, _b2, _c;
+      if (closeButton == null) {
+        return (_a2 = closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) != null ? _a2 : DEFAULT_CLOSE_BTN_PROPS["aria-label"];
+      }
+      const el = closeButton;
+      return (_c = (_b2 = el == null ? void 0 : el.props) == null ? void 0 : _b2["aria-label"]) != null ? _c : "Close";
+    })();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadixDialog__namespace.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        asChild: true,
+        "aria-describedby": void 0
+      }, props), {
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          react.m.div,
+          __spreadProps(__spreadValues({
+            className: cn(
+              "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+              "w-[calc(100%-2rem)] max-w-140",
+              "rounded-[28px] bg-m3-surface-container-high p-6",
+              "shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+              className
+            ),
+            role: "dialog"
+          }, MD3_CONTENT_ANIM), {
+            children: [
+              children,
+              closeButton != null ? /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, "aria-label": closeAriaLabel, children: closeButton }) : !hideCloseButton ? /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, "aria-label": closeAriaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_CLOSE_BTN_PROPS), closeButtonProps), { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", "aria-hidden": "true" }) })) }) : null
+            ]
+          })
+        )
+      })
+    );
+  }
+);
 DialogContent.displayName = "DialogContent";
 var DialogIcon = React67__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
@@ -14164,6 +14446,8 @@ var DialogFullScreenContent = React67__namespace.forwardRef(
       title,
       actionLabel,
       onAction,
+      actionButtonProps,
+      closeButtonProps,
       showDivider
     } = _b, props = __objRest(_b, [
       "className",
@@ -14171,8 +14455,11 @@ var DialogFullScreenContent = React67__namespace.forwardRef(
       "title",
       "actionLabel",
       "onAction",
+      "actionButtonProps",
+      "closeButtonProps",
       "showDivider"
     ]);
+    var _a2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadixDialog__namespace.Content,
       __spreadProps(__spreadValues({
@@ -14192,16 +14479,33 @@ var DialogFullScreenContent = React67__namespace.forwardRef(
           }, MD3_FULLSCREEN_ANIM), {
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center px-4 h-14 gap-2 bg-m3-surface", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, "aria-label": "Close dialog", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { size: "sm", colorStyle: "filled", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", "aria-hidden": "true" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RadixDialog__namespace.Close,
+                  {
+                    asChild: true,
+                    "aria-label": (_a2 = closeButtonProps == null ? void 0 : closeButtonProps["aria-label"]) != null ? _a2 : "Close",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      IconButton,
+                      __spreadProps(__spreadValues({
+                        size: "sm",
+                        colorStyle: "standard",
+                        "aria-label": "Close"
+                      }, closeButtonProps), {
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", "aria-hidden": "true" })
+                      })
+                    )
+                  }
+                ),
                 title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "flex-1 text-[22px] leading-7 font-medium truncate pr-2", children: title }),
                 actionLabel && onAction && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
-                  {
+                  __spreadProps(__spreadValues({
                     type: "button",
                     onClick: onAction,
-                    className: "text-sm font-medium text-m3-primary px-3 py-2 rounded-full hover:bg-m3-primary/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary transition-colors whitespace-nowrap",
+                    className: "text-sm font-medium text-m3-primary px-3 py-2 rounded-full hover:bg-m3-primary/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary transition-colors whitespace-nowrap disabled:opacity-[0.38] disabled:pointer-events-none"
+                  }, actionButtonProps), {
                     children: actionLabel
-                  }
+                  })
                 )
               ] }),
               showDivider && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-m3-outline-variant w-full shrink-0 m-0" }),
@@ -15197,21 +15501,13 @@ var normalizeAngle = (angle) => {
   return a;
 };
 var angleToHour12 = (angle) => {
-  const hourOffset = RADIANS_PER_HOUR / 2;
-  const totalOffset = hourOffset + QUARTER_CIRCLE;
-  const hour = Math.round((angle + totalOffset) / RADIANS_PER_HOUR) % 12;
+  const normalized = normalizeAngle(angle + QUARTER_CIRCLE);
+  const hour = Math.round(normalized / RADIANS_PER_HOUR) % 12;
   return hour === 0 ? 12 : hour;
 };
-var angleToMinute = (angle, snap = true) => {
-  if (snap) {
-    const minuteOffset = RADIANS_PER_MINUTE / 2;
-    const totalOffset = minuteOffset + QUARTER_CIRCLE;
-    const raw2 = Math.round((angle + totalOffset) / RADIANS_PER_MINUTE) % 60;
-    return raw2 < 0 ? raw2 + 60 : raw2;
-  }
+var angleToMinute = (angle, _snap = true) => {
   const normalized = normalizeAngle(angle + QUARTER_CIRCLE);
-  const raw = Math.round(normalized / FULL_CIRCLE * 60) % 60;
-  return raw < 0 ? raw + 60 : raw;
+  return Math.round(normalized / RADIANS_PER_MINUTE) % 60;
 };
 var getSelectorPosition = (angle, selection, is24hour, isPm) => {
   const useInner = is24hour && isPm && selection === "hour";
@@ -20492,12 +20788,13 @@ var TextFieldComponent = React67__namespace.forwardRef(
       if (autoResize) {
         textarea.style.height = "auto";
         textarea.style.height = `${textarea.scrollHeight}px`;
-        if (maxRows) {
-          textarea.style.maxHeight = `${maxRows * LINE_HEIGHT_PX}px`;
-        }
+        textarea.style.overflowY = "hidden";
+      } else {
+        textarea.style.height = "";
+        textarea.style.maxHeight = "";
+        textarea.style.overflowY = "";
       }
-      textarea.style.overflowY = "hidden";
-    }, [type, autoResize, maxRows, currentValue]);
+    }, [type, autoResize, currentValue]);
     const handleValueChange = React67__namespace.useCallback(
       (newValue) => {
         var _a2, _b;
@@ -20720,7 +21017,7 @@ var TextFieldComponent = React67__namespace.forwardRef(
                         className: cn(
                           inputClass,
                           "resize-none mt-2",
-                          autoResize ? "h-auto" : "h-full"
+                          autoResize ? "h-auto" : "min-h-full overflow-y-auto"
                         ),
                         style: { direction: textDirection || void 0 }
                       }, inputProps)
@@ -20859,6 +21156,15 @@ var Select = React67__namespace.forwardRef(
     openRef.current = open;
     const [searchQuery, setSearchQuery] = React67__namespace.useState("");
     const [scrollViewport, setScrollViewport] = React67__namespace.useState(null);
+    React67__namespace.useEffect(() => {
+      var _a3, _b3;
+      const isDev = ((_b3 = (_a3 = globalThis.process) == null ? void 0 : _a3.env) == null ? void 0 : _b3.NODE_ENV) !== "production";
+      if (isDev && onSearchChange && !searchable) {
+        console.warn(
+          "[Select] `onSearchChange` was provided but `searchable` is false. The callback will never be called unless you also set `searchable={true}`."
+        );
+      }
+    }, [onSearchChange, searchable]);
     const selectedOption = React67__namespace.useMemo(
       () => options.find((opt) => opt.value === currentValue),
       [options, currentValue]
@@ -21084,10 +21390,51 @@ function SelectEmpty(_a) {
     })
   );
 }
+
+// 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,
@@ -21102,10 +21449,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 = React67.useMemo(() => getEasingFunction(easing), [easing]);
+  const resolvedTarget = React67.useMemo(() => {
+    if (morphTo === "auto") {
+      return getRecommendedMorphShape(shape);
+    }
+    return morphTo;
+  }, [morphTo, shape]);
   const startShape = React67.useMemo(() => resolveShape(shape), [shape]);
   const endShape = React67.useMemo(
-    () => morphTo ? resolveShape(morphTo) : null,
-    [morphTo]
+    () => resolvedTarget ? resolveShape(resolvedTarget) : null,
+    [resolvedTarget]
   );
   const morph = React67.useMemo(
     () => endShape ? new Morph(startShape, endShape) : null,
@@ -21120,7 +21473,45 @@ function useShapeMorph({
   const startProgressRef = React67.useRef(0);
   const targetProgressRef = React67.useRef(0);
   const currentProgressRef = React67.useRef(0);
+  const prevShapeRef = React67.useRef(shape);
+  React67.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 = React67.useRef({ width, height, startShape, morph });
   React67.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)
@@ -21214,41 +21605,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,
@@ -21376,10 +21732,14 @@ function ShapeSvg({
   style,
   "aria-label": ariaLabel
 }) {
+  const resolvedTarget = React67.useMemo(() => {
+    if (morphTo === "auto") return getRecommendedMorphShape(shape);
+    return morphTo;
+  }, [morphTo, shape]);
   const startPolygon = React67.useMemo(() => resolveShape(shape), [shape]);
   const endPolygon = React67.useMemo(
-    () => morphTo ? resolveShape(morphTo) : null,
-    [morphTo]
+    () => resolvedTarget ? resolveShape(resolvedTarget) : null,
+    [resolvedTarget]
   );
   const morph = React67.useMemo(
     () => endPolygon ? new Morph(startPolygon, endPolygon) : null,
@@ -21413,6 +21773,176 @@ 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] = React67.useState(0);
+  const [nextIndex, setNextIndex] = React67.useState(() => shapes.length > 1 ? 1 : 0);
+  const [progress, setProgress] = React67.useState(0);
+  const [isPlaying, setIsPlaying] = React67.useState(autoplay);
+  const animRef = React67.useRef(null);
+  const timerRef = React67.useRef(null);
+  const startTimeRef = React67.useRef(0);
+  const isTransitioningRef = React67.useRef(false);
+  const numShapes = shapes.length;
+  const currentShape = React67.useMemo(() => {
+    if (numShapes === 0) return resolveShape("circle");
+    const safeIdx = (currentIndex % numShapes + numShapes) % numShapes;
+    return resolveShape(shapes[safeIdx]);
+  }, [shapes, currentIndex, numShapes]);
+  const targetShape = React67.useMemo(() => {
+    if (numShapes === 0) return resolveShape("circle");
+    const safeIdx = (nextIndex % numShapes + numShapes) % numShapes;
+    return resolveShape(shapes[safeIdx]);
+  }, [shapes, nextIndex, numShapes]);
+  const morph = React67.useMemo(() => {
+    if (currentShape === targetShape) return null;
+    return new Morph(currentShape, targetShape);
+  }, [currentShape, targetShape]);
+  const [clipPath, setClipPath] = React67.useState(
+    () => toClipPath(currentShape, width, height)
+  );
+  const prevDimsRef = React67.useRef({ width, height, currentShape, morph, progress });
+  React67.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 = React67.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 animate7 = (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(animate7);
+        } 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(animate7);
+    },
+    [
+      disabled,
+      numShapes,
+      currentIndex,
+      shapes,
+      resolvedDuration,
+      width,
+      height
+    ]
+  );
+  const next = React67.useCallback(() => {
+    if (numShapes <= 1) return;
+    if (!loop && currentIndex >= numShapes - 1) return;
+    transitionTo((currentIndex + 1) % numShapes);
+  }, [numShapes, loop, currentIndex, transitionTo]);
+  const prev = React67.useCallback(() => {
+    if (numShapes <= 1) return;
+    if (!loop && currentIndex <= 0) return;
+    transitionTo((currentIndex - 1 + numShapes) % numShapes);
+  }, [numShapes, loop, currentIndex, transitionTo]);
+  const goTo = React67.useCallback(
+    (index) => {
+      transitionTo(index);
+    },
+    [transitionTo]
+  );
+  const play = React67.useCallback(() => {
+    setIsPlaying(true);
+  }, []);
+  const pause = React67.useCallback(() => {
+    setIsPlaying(false);
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  React67.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]);
+  React67.useEffect(() => {
+    return () => {
+      if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
+  React67.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
+  };
+}
 var INDICATOR = "h-1 w-8 rounded-full bg-m3-on-surface-variant/40";
 var DragHandle = React67__namespace.forwardRef(
   ({ className, onCycle, "aria-label": ariaLabel }, ref) => {
@@ -27549,6 +28079,8 @@ exports.MD3CornerRadius = MD3CornerRadius;
 exports.MD3Shapes = MD3Shapes;
 exports.MD3ThemeProvider = MD3ThemeProvider;
 exports.MD3_EXPRESSIVE_FONT_VARIATION = MD3_EXPRESSIVE_FONT_VARIATION;
+exports.MD3_SHAPE_FAMILIES = MD3_SHAPE_FAMILIES;
+exports.MD3_SHAPE_PAIRINGS = MD3_SHAPE_PAIRINGS;
 exports.MENU_CHECK_ICON_SIZE = MENU_CHECK_ICON_SIZE;
 exports.MENU_CONTAINER_VARIANTS = MENU_CONTAINER_VARIANTS;
 exports.MENU_GROUP_GAP = MENU_GROUP_GAP;
@@ -27688,12 +28220,14 @@ exports.dividePoint = dividePoint;
 exports.dotProduct = dotProduct;
 exports.edgeFeature = edgeFeature;
 exports.featureMapper = featureMapper;
+exports.formatCoordinate = formatCoordinate;
 exports.generateM3Theme = generateM3Theme;
 exports.getDirection = getDirection;
 exports.getDistance = getDistance;
 exports.getDistanceSquared = getDistanceSquared;
 exports.getExpressiveShape = getExpressiveShape;
 exports.getListItemHeight = getListItemHeight;
+exports.getRecommendedMorphShape = getRecommendedMorphShape;
 exports.getToolbarColors = getToolbarColors;
 exports.interpolate = interpolate;
 exports.interpolatePath = interpolatePath;
@@ -27734,6 +28268,7 @@ exports.useRipple = useRipple2;
 exports.useRippleState = useRippleState;
 exports.useSearchKeyboard = useSearchKeyboard;
 exports.useShapeMorph = useShapeMorph;
+exports.useShapeSequenceMorph = useShapeSequenceMorph;
 exports.useSnackbar = useSnackbar;
 exports.useSnackbarState = useSnackbarState;
 exports.useTheme = useTheme;