@bug-on/m3-expressive 1.3.4 → 1.3.6

package/dist/index.js

@@ -281,7 +281,8 @@ function schemeToCssVariables(scheme) {
   return result;
 }
 function MaterialSymbolsPreconnect({
-  variants = ["outlined"]
+  variants = ["rounded"],
+  display = "block"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
@@ -296,7 +297,7 @@ function MaterialSymbolsPreconnect({
     variants.includes("outlined") && /* @__PURE__ */ jsxRuntime.jsx(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=${display}`,
         rel: "stylesheet",
         precedence: "default"
       }
@@ -304,7 +305,7 @@ function MaterialSymbolsPreconnect({
     variants.includes("rounded") && /* @__PURE__ */ jsxRuntime.jsx(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=${display}`,
         rel: "stylesheet",
         precedence: "default"
       }
@@ -312,7 +313,7 @@ function MaterialSymbolsPreconnect({
     variants.includes("sharp") && /* @__PURE__ */ jsxRuntime.jsx(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        href: `https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=${display}`,
         rel: "stylesheet",
         precedence: "default"
       }
@@ -334,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) {
@@ -378,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) {
@@ -477,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
     );
   }
   /**
@@ -702,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.
@@ -1120,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 = [];
@@ -1188,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],
@@ -2289,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 */
@@ -2454,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) {
@@ -2498,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) {
@@ -2557,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({
@@ -2568,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,
@@ -2652,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;
@@ -2662,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.
@@ -2689,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.
@@ -2779,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;
@@ -2791,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;
@@ -2804,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 {
@@ -2818,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));
@@ -2860,7 +3124,7 @@ function getMaskGradient(direction) {
     case "bottom":
       return "linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
     case "both":
-      return "linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0) 100%)";
+      return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 85%, rgba(0, 0, 0, 1) 100%)";
     default:
       return "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%)";
   }
@@ -2877,11 +3141,16 @@ function FadingBlurMask({
   const shouldReduceMotion = react.useReducedMotion();
   const activeBlur = shouldReduceMotion ? 0 : blurIntensity;
   const maskGradient = getMaskGradient(direction);
+  const isFullHeight = direction === "both" || blurHeight === "100%";
+  const computedHeight = isFullHeight ? "100%" : typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight;
   const maskStyle = __spreadValues({
     position: "absolute",
-    inset: 0,
+    top: direction === "bottom" && !isFullHeight ? "auto" : 0,
+    bottom: direction === "top" && !isFullHeight ? "auto" : 0,
+    left: 0,
+    right: 0,
     pointerEvents: "none",
-    height: typeof blurHeight === "number" ? `${blurHeight}px` : blurHeight,
+    height: computedHeight,
     backdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
     WebkitBackdropFilter: activeBlur > 0 ? `blur(${activeBlur}px)` : void 0,
     maskImage: maskGradient,
@@ -2893,7 +3162,7 @@ function FadingBlurMask({
     {
       "aria-hidden": "true",
       className: cn(
-        "absolute inset-0 pointer-events-none z-0 rounded-[inherit]",
+        "absolute pointer-events-none z-10 rounded-[inherit]",
         className
       ),
       style: maskStyle,
@@ -4021,7 +4290,7 @@ var IconComponent = React67__namespace.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -8356,6 +8625,7 @@ var ExtendedFABComponent = React67__namespace.forwardRef(
       onClick,
       onKeyDown,
       layoutId,
+      layout,
       "aria-label": ariaLabel
     } = _b, restProps = __objRest(_b, [
       "className",
@@ -8377,6 +8647,7 @@ var ExtendedFABComponent = React67__namespace.forwardRef(
       "onClick",
       "onKeyDown",
       "layoutId",
+      "layout",
       "aria-label"
     ]);
     var _a2, _b2, _c, _d;
@@ -8401,6 +8672,13 @@ var ExtendedFABComponent = React67__namespace.forwardRef(
     const colors = (_a2 = COLOR_CLASSES[colorStyle]) != null ? _a2 : COLOR_CLASSES.primary;
     const radiusConfig = (_b2 = MORPH_RADIUS[size]) != null ? _b2 : MORPH_RADIUS.sm;
     const sizeIcon = (_c = SIZE_ICON[size]) != null ? _c : SIZE_ICON.sm;
+    const motionRadius = react.useMotionValue(radiusConfig.default);
+    React67__namespace.useEffect(() => {
+      const controls = react.animate(motionRadius, radiusConfig.default, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
+        type: "spring"
+      }));
+      return () => controls.stop();
+    }, [radiusConfig.default, motionRadius]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled: loading
     });
@@ -8495,13 +8773,25 @@ var ExtendedFABComponent = React67__namespace.forwardRef(
         {
           layout: "position",
           initial: { opacity: 0, width: 0 },
-          animate: { opacity: 1, width: "auto" },
-          exit: { opacity: 0, width: 0 },
-          transition: {
-            opacity: { duration: 0.15, ease: "linear" },
-            width: SPRING_TRANSITION
+          animate: {
+            opacity: 1,
+            width: "auto",
+            transition: {
+              width: SPRING_TRANSITION,
+              opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
+              layout: SPRING_TRANSITION
+            }
+          },
+          exit: {
+            opacity: 0,
+            width: 0,
+            transition: {
+              opacity: { duration: 0.1, ease: "linear" },
+              width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              layout: SPRING_TRANSITION
+            }
           },
-          className: "overflow-hidden whitespace-nowrap",
+          className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
           children: label
         },
         "label"
@@ -8532,7 +8822,7 @@ var ExtendedFABComponent = React67__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref: localRef,
         type: "button",
-        layout: true,
+        layout: layout !== void 0 ? layout : "position",
         layoutId,
         "aria-label": ariaLabel || label,
         "aria-busy": loading || void 0,
@@ -8540,21 +8830,23 @@ var ExtendedFABComponent = React67__namespace.forwardRef(
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
-        style,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: motionRadius
+        }),
         initial: {
           scale: 0.6,
-          opacity: 0,
-          borderRadius: radiusConfig.default
+          opacity: 0
         },
         animate: {
           scale: 1,
-          opacity: 1,
-          borderRadius: radiusConfig.default
+          opacity: 1
         },
         exit: { scale: 0.6, opacity: 0 },
-        whileTap: { borderRadius: radiusConfig.pressed },
+        whileTap: {
+          borderRadius: radiusConfig.pressed,
+          transition: { borderRadius: SPRING_TRANSITION_FAST }
+        },
         transition: {
-          borderRadius: { type: "spring", stiffness: 500, damping: 30 },
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.2, ease: "linear" },
           layout: SPRING_TRANSITION
@@ -8586,6 +8878,18 @@ var SIZE_TEXT_CLASS = {
   lg: "text-xl  font-semibold",
   xl: "text-2xl font-semibold"
 };
+var SIZE_PADDING_COLLAPSED = {
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-8",
+  xl: "px-12"
+};
+var SIZE_PADDING_EXTENDED = {
+  sm: "pl-2 pr-4",
+  md: "pl-4 pr-6",
+  lg: "pl-8 pr-8",
+  xl: "pl-12 pr-10"
+};
 var MORPH_RADIUS2 = {
   sm: { default: 12, pressed: 8, extended: 12, extended_pressed: 8 },
   md: { default: 16, pressed: 10, extended: 16, extended_pressed: 10 },
@@ -8677,7 +8981,7 @@ var FABComponent = React67__namespace.forwardRef(
       "layout",
       "layoutId"
     ]);
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c, _d, _e, _f;
     const colors = (_a2 = COLOR_CLASSES2[colorStyle]) != null ? _a2 : COLOR_CLASSES2.primary;
     const radiusConfig = (_b2 = MORPH_RADIUS2[size]) != null ? _b2 : MORPH_RADIUS2.md;
     const animateRadius = extended ? radiusConfig.extended : radiusConfig.default;
@@ -8762,22 +9066,37 @@ var FABComponent = React67__namespace.forwardRef(
         react.m.span,
         {
           layout: "position",
-          initial: { width: 0, opacity: 0 },
-          animate: { width: "auto", opacity: 1 },
-          exit: { width: 0, opacity: 0 },
-          transition: {
-            opacity: { duration: 0.15, ease: "linear" },
-            width: SPRING_TRANSITION,
-            layout: SPRING_TRANSITION
+          initial: { width: 0, opacity: 0, marginLeft: 0 },
+          animate: {
+            width: "auto",
+            opacity: 1,
+            marginLeft: 12,
+            transition: {
+              width: SPRING_TRANSITION,
+              marginLeft: SPRING_TRANSITION,
+              opacity: { delay: 0.08, duration: 0.15, ease: "easeIn" },
+              layout: SPRING_TRANSITION
+            }
           },
-          className: "overflow-hidden whitespace-nowrap ml-3",
+          exit: {
+            width: 0,
+            opacity: 0,
+            marginLeft: 0,
+            transition: {
+              opacity: { duration: 0.1, ease: "linear" },
+              width: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              marginLeft: __spreadProps(__spreadValues({}, SPRING_TRANSITION), { delay: 0.03 }),
+              layout: SPRING_TRANSITION
+            }
+          },
+          className: "overflow-hidden whitespace-nowrap shrink-0 inline-block",
           children: labelContent
         },
         "label"
       ) })
     ] });
     const containerClassName = cn(
-      "relative shrink-0 inline-flex items-center justify-center",
+      "relative shrink-0 inline-flex items-center justify-start",
       "select-none cursor-pointer overflow-hidden",
       "transition-[box-shadow,opacity,filter] duration-200",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary focus-visible:ring-offset-2",
@@ -8786,21 +9105,62 @@ var FABComponent = React67__namespace.forwardRef(
       colors.text,
       lowered ? "shadow-sm" : colors.shadow,
       (_d = SIZE_STYLES[size]) != null ? _d : "h-14 w-14",
-      extended && "w-auto pl-4 pr-6",
+      extended ? cn("w-auto", (_e = SIZE_PADDING_EXTENDED[size]) != null ? _e : "pl-4 pr-6") : (_f = SIZE_PADDING_COLLAPSED[size]) != null ? _f : "px-4",
       SIZE_TEXT_CLASS[size],
       loading && "pointer-events-none opacity-75 cursor-not-allowed",
       className
     );
+    const motionRadius = react.useMotionValue(animateRadius);
+    const asChildRef = React67__namespace.useRef(null);
+    const mergedRef = React67__namespace.useCallback(
+      (node) => {
+        asChildRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    React67__namespace.useEffect(() => {
+      if (!asChild) return;
+      return motionRadius.on("change", (v) => {
+        if (asChildRef.current)
+          asChildRef.current.style.borderRadius = `${v}px`;
+      });
+    }, [motionRadius, asChild]);
+    React67__namespace.useEffect(() => {
+      const controls = react.animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION), {
+        type: "spring"
+      }));
+      return () => controls.stop();
+    }, [animateRadius, motionRadius]);
+    const handleAsChildPointerDown = React67__namespace.useCallback(
+      (e) => {
+        onPointerDown(e);
+        react.animate(motionRadius, pressedRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
+          type: "spring"
+        }));
+      },
+      [onPointerDown, motionRadius, pressedRadius]
+    );
+    const handleAsChildPointerUp = React67__namespace.useCallback(() => {
+      react.animate(motionRadius, animateRadius, __spreadProps(__spreadValues({}, SPRING_TRANSITION_FAST), {
+        type: "spring"
+      }));
+    }, [motionRadius, animateRadius]);
     const computedAriaLabel = ariaLabel || (typeof children === "string" ? children : void 0);
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: visible && (asChild ? /* @__PURE__ */ jsxRuntime.jsx(
       reactSlot.Slot,
       __spreadProps(__spreadValues({
-        ref,
+        ref: mergedRef,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": loading || restProps.disabled,
         onClick: handleClick,
-        onPointerDown,
+        onPointerDown: handleAsChildPointerDown,
+        onPointerUp: handleAsChildPointerUp,
+        onPointerLeave: handleAsChildPointerUp,
+        onPointerCancel: handleAsChildPointerUp,
         onKeyDown: handleKeyDown,
         style: __spreadProps(__spreadValues({}, style), {
           borderRadius: `${animateRadius}px`
@@ -8817,7 +9177,7 @@ var FABComponent = React67__namespace.forwardRef(
       __spreadProps(__spreadValues({
         ref,
         type: "button",
-        layout: layout !== void 0 ? layout : true,
+        layout: layout !== void 0 ? layout : "position",
         layoutId,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
@@ -8825,17 +9185,20 @@ var FABComponent = React67__namespace.forwardRef(
         onClick: handleClick,
         onPointerDown,
         onKeyDown: handleKeyDown,
-        style,
+        style: __spreadProps(__spreadValues({}, style), {
+          borderRadius: motionRadius
+        }),
         initial: {
           scale: 0.5,
-          opacity: 0,
-          borderRadius: animateRadius
+          opacity: 0
         },
-        animate: { scale: 1, opacity: 1, borderRadius: animateRadius },
+        animate: { scale: 1, opacity: 1 },
         exit: { scale: 0.5, opacity: 0 },
-        whileTap: { borderRadius: pressedRadius },
+        whileTap: {
+          borderRadius: pressedRadius,
+          transition: { borderRadius: SPRING_TRANSITION_FAST }
+        },
         transition: {
-          borderRadius: SPRING_TRANSITION_FAST,
           scale: SPRING_TRANSITION,
           opacity: { duration: 0.25, ease: "easeOut" },
           layout: SPRING_TRANSITION
@@ -13312,7 +13675,7 @@ var CalendarGrid = ({
   ] });
 };
 CalendarGrid.displayName = "CalendarGrid";
-var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary";
+var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary whitespace-nowrap select-none min-w-0";
 var CalendarHeader = ({
   displayedMonthMs,
   activeSelector,
@@ -13338,57 +13701,70 @@ var CalendarHeader = ({
     timeZone: "UTC"
   }).format(date);
   const yearLabel = String(date.getUTCFullYear());
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-6 pb-4 pt-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-(length:--md-typescale-label-large-size,14px) font-(--md-typescale-label-large-weight,500) text-m3-on-surface-variant", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 leading-tight text-(length:--md-typescale-headline-large-size,32px) font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant", children: headline }),
-    displayMode === "picker" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-10 items-center gap-0.5", children: [
-      activeSelector === null && /* @__PURE__ */ jsxRuntime.jsx(
-        IconButton,
-        {
-          onClick: onPrev,
-          "aria-label": "Previous month",
-          disabled: !canNavigatePrev,
-          size: "xs",
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_left" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onToggleSelector("month"),
-          "aria-expanded": activeSelector === "month",
-          "aria-controls": "date-picker-selection",
-          className: cn(
-            selectorClassName,
-            activeSelector === "month" && "bg-m3-on-surface/8"
-          ),
-          children: [
-            monthLabel,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Icon,
-              {
-                name: "arrow_drop_down",
-                className: cn(
-                  "text-[20px] transition-transform duration-200",
-                  activeSelector === "month" && "rotate-180"
-                )
-              }
-            )
-          ]
-        }
-      ),
-      activeSelector === null && /* @__PURE__ */ jsxRuntime.jsx(
-        IconButton,
-        {
-          onClick: onNext,
-          "aria-label": "Next month",
-          disabled: !canNavigateNext,
-          size: "xs",
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-0.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-4 sm:px-6 pb-3 pt-5 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-(length:--md-typescale-label-large-size,14px) font-(--md-typescale-label-large-weight,500) text-m3-on-surface-variant truncate", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "mb-2 leading-tight text-[26px] sm:text-[32px] font-(--md-typescale-headline-large-weight,400) text-m3-on-surface-variant truncate",
+        title: typeof headline === "string" ? headline : void 0,
+        children: headline
+      }
+    ),
+    displayMode === "picker" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-10 items-center justify-between gap-0.5 w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 min-w-0 shrink", children: [
+        activeSelector === null && /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            onClick: onPrev,
+            "aria-label": "Previous month",
+            disabled: !canNavigatePrev,
+            size: "xs",
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_left" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggleSelector("month"),
+            "aria-expanded": activeSelector === "month",
+            "aria-controls": "date-picker-selection",
+            className: cn(
+              selectorClassName,
+              "min-w-0 max-w-[125px] shrink",
+              activeSelector === "month" && "bg-m3-on-surface/8"
+            ),
+            title: monthLabel,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: monthLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Icon,
+                {
+                  name: "arrow_drop_down",
+                  className: cn(
+                    "text-[20px] shrink-0 transition-transform duration-200",
+                    activeSelector === "month" && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        activeSelector === null && /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            onClick: onNext,
+            "aria-label": "Next month",
+            disabled: !canNavigateNext,
+            size: "xs",
+            className: "shrink-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-0.5 shrink-0", children: [
         activeSelector === null && /* @__PURE__ */ jsxRuntime.jsx(
           IconButton,
           {
@@ -13396,6 +13772,7 @@ var CalendarHeader = ({
             "aria-label": "Previous year",
             disabled: !canNavigatePreviousYear,
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_left" })
           }
         ),
@@ -13408,16 +13785,18 @@ var CalendarHeader = ({
             "aria-controls": "date-picker-selection",
             className: cn(
               selectorClassName,
+              "shrink-0",
               activeSelector === "year" && "bg-m3-on-surface/8"
             ),
+            title: yearLabel,
             children: [
-              yearLabel,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: yearLabel }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Icon,
                 {
                   name: "arrow_drop_down",
                   className: cn(
-                    "text-[20px] transition-transform duration-200",
+                    "text-[20px] shrink-0 transition-transform duration-200",
                     activeSelector === "year" && "rotate-180"
                   )
                 }
@@ -13432,6 +13811,7 @@ var CalendarHeader = ({
             "aria-label": "Next year",
             disabled: !canNavigateNextYear,
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron_right" })
           }
         ),
@@ -13441,6 +13821,7 @@ var CalendarHeader = ({
             onClick: onToggleMode,
             "aria-label": "Switch to text input",
             size: "xs",
+            className: "shrink-0",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "keyboard" })
           }
         )
@@ -13452,7 +13833,7 @@ var CalendarHeader = ({
         onClick: onToggleMode,
         "aria-label": "Switch to calendar",
         size: "xs",
-        className: "self-end",
+        className: "self-end shrink-0",
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "calendar_month" })
       }
     ),
@@ -13499,14 +13880,14 @@ var MonthPickerList = ({
             onClick: () => onMonthSelect(month),
             className: cn(
               "flex min-h-12 w-full items-center gap-4 px-6 text-left",
-              "text-[length:var(--md-typescale-body-large-size,16px)]",
+              "text-(length:--md-typescale-body-large-size,16px)",
               "text-m3-on-surface transition-m3-fast-effects",
               "hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary",
               isSelected && "bg-m3-secondary-container text-m3-on-secondary-container"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", className: "text-[20px]" }) }),
-              getMonthLabel(month, locale.locale)
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6 shrink-0", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", className: "text-[20px]" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: getMonthLabel(month, locale.locale) })
             ]
           },
           month
@@ -13584,7 +13965,9 @@ var DatePicker = ({
   showModeToggle = true,
   title,
   headline,
-  className
+  className,
+  width,
+  maxWidth
 }) => {
   const {
     selectedDateMs,
@@ -13665,7 +14048,10 @@ var DatePicker = ({
     "fieldset",
     {
       className: cn("flex flex-col select-none", className),
-      style: { width: "min(100%, 360px)" },
+      style: {
+        width: typeof width === "number" ? `${width}px` : width != null ? width : "min(100%, 360px)",
+        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
       "aria-label": computedAriaLabel,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "sr-only", children: computedAriaLabel }),
@@ -13912,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"]);
@@ -14041,6 +14446,8 @@ var DialogFullScreenContent = React67__namespace.forwardRef(
       title,
       actionLabel,
       onAction,
+      actionButtonProps,
+      closeButtonProps,
       showDivider
     } = _b, props = __objRest(_b, [
       "className",
@@ -14048,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({
@@ -14069,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" }),
@@ -14106,7 +14533,9 @@ var DatePickerDialog = ({
   dismissButton,
   children,
   className,
-  title = "Select date"
+  title = "Select date",
+  width,
+  maxWidth
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (v) => !v && onDismiss(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { open, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -14142,7 +14571,10 @@ var DatePickerDialog = ({
               "elevation-3",
               className
             ),
-            style: { width: "min(calc(100vw - 32px), 360px)" },
+            style: {
+              width: typeof width === "number" ? `${width}px` : width != null ? width : "min(calc(100vw - 32px), 360px)",
+              maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+            },
             initial: PICKER_CONTENT_ANIM.initial,
             animate: PICKER_CONTENT_ANIM.animate,
             exit: PICKER_CONTENT_ANIM.exit,
@@ -14166,7 +14598,9 @@ var DateRangePicker = ({
   state,
   showModeToggle = false,
   title,
-  className
+  className,
+  width,
+  maxWidth
 }) => {
   const {
     selectedStartMs,
@@ -14238,7 +14672,10 @@ var DateRangePicker = ({
     "fieldset",
     {
       className: cn("flex flex-col select-none", className),
-      style: { width: "min(100%, 360px)" },
+      style: {
+        width: typeof width === "number" ? `${width}px` : width != null ? width : "min(100%, 360px)",
+        maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+      },
       "aria-label": computedAriaLabel,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("legend", { className: "sr-only", children: computedAriaLabel }),
@@ -15064,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";
@@ -15585,13 +16014,16 @@ var useTimePickerState = (options) => {
 };
 function buildWavePath(startX, endX, amplitude = 2, wavelength = 32, yCenter = 4) {
   if (startX >= endX) return "";
+  const totalWidth = endX - startX;
   const halfCycle = wavelength / 2;
-  const numHalfCycles = Math.ceil((endX - startX) / halfCycle);
-  const cpDistanceY = amplitude * (4 / 3);
+  const numHalfCycles = Math.max(1, Math.round(totalWidth / halfCycle));
+  const actualHalfCycle = totalWidth / numHalfCycles;
+  const scale = Math.min(1, actualHalfCycle / halfCycle);
+  const cpDistanceY = amplitude * (4 / 3) * scale;
   let d = `M ${startX},${yCenter}`;
   for (let i = 0; i < numHalfCycles; i++) {
-    const x0 = startX + i * halfCycle;
-    const x1 = Math.min(startX + (i + 1) * halfCycle, endX);
+    const x0 = startX + i * actualHalfCycle;
+    const x1 = i === numHalfCycles - 1 ? endX : startX + (i + 1) * actualHalfCycle;
     const peak = i % 2 === 0 ? yCenter - cpDistanceY : yCenter + cpDistanceY;
     const segLen = x1 - x0;
     const cp1x = x0 + segLen / 3;
@@ -15609,7 +16041,7 @@ var DividerImpl = React67__namespace.forwardRef(
       insetStart = "standard",
       waveConfig,
       decorative = false,
-      animate: animate5 = true,
+      animate: animate7 = true,
       className,
       style
     } = _b, props = __objRest(_b, [
@@ -15625,7 +16057,7 @@ var DividerImpl = React67__namespace.forwardRef(
     ]);
     var _a2, _b2, _c;
     const reducedMotion = react.useReducedMotion();
-    const shouldAnimate = animate5 && !reducedMotion;
+    const shouldAnimate = animate7 && !reducedMotion;
     const effectiveShape = shape === "wavy" && orientation === "vertical" ? "flat" : shape;
     if (shape === "wavy" && orientation === "vertical") {
       console.warn(
@@ -17366,7 +17798,7 @@ var ListItemImpl = React67__namespace.forwardRef(
               "cursor-grab active:cursor-grabbing text-m3-on-surface-variant p-2 -mr-2"
             )
           }, attributes), listeners), {
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-outlined text-[24px]", children: "drag_handle" })
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[24px]", children: "drag_handle" })
           })
         );
       }
@@ -18719,6 +19151,7 @@ var NavigationRailComponent = React67__namespace.forwardRef(
             react.m.div,
             {
               layout: true,
+              transition: SPRING_TRANSITION,
               className: cn(
                 "flex w-full flex-col justify-start shrink-0 empty:hidden",
                 isExpanded ? "items-start px-3" : "items-center",
@@ -19025,6 +19458,7 @@ function SearchBar({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19087,7 +19521,7 @@ function SearchBar({
         layoutId: shouldReduceMotion ? void 0 : searchId,
         transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
         className: cn(
-          "relative group select-none",
+          "relative group select-none rounded-full",
           SEARCH_ELEVATION.level3,
           className
         ),
@@ -19127,7 +19561,7 @@ function SearchBar({
               "aria-label": ariaLabel,
               className: "relative flex h-full items-center gap-2 rounded-full px-4",
               children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+                showLeadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     className: "flex shrink-0 items-center justify-center",
@@ -19334,6 +19768,7 @@ function SearchViewDocked({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19390,7 +19825,7 @@ function SearchViewDocked({
               className: "flex items-center gap-2 px-4",
               style: { height: SearchTokens.heights.dockedHeader },
               children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+                showLeadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     className: "flex shrink-0 items-center justify-center",
@@ -19485,6 +19920,7 @@ function SearchViewFullScreen({
   onSearch,
   active,
   onActiveChange,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19551,7 +19987,7 @@ function SearchViewFullScreen({
               className: "flex shrink-0 items-center gap-2 px-4",
               style: { height: SearchTokens.heights.fullScreenHeader },
               children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+                showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
                   IconButton,
                   {
                     size: "sm",
@@ -19652,6 +20088,8 @@ function SearchComponent({
   variant = "docked",
   styleType = "contained",
   hasGap = false,
+  showLeadingIcon = true,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -19680,6 +20118,7 @@ function SearchComponent({
     onSearch,
     active,
     onActiveChange,
+    showLeadingIcon,
     leadingIcon,
     trailingIcon,
     avatar,
@@ -19696,6 +20135,7 @@ function SearchComponent({
     variant === "fullscreen" ? /* @__PURE__ */ jsxRuntime.jsx(
       SearchViewFullScreen,
       __spreadProps(__spreadValues({}, sharedProps), {
+        showCloseButton,
         styleType,
         viewClassName,
         children
@@ -20348,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;
@@ -20576,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)
@@ -20715,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]
@@ -20940,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,
@@ -20958,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,
@@ -20976,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)
@@ -20991,7 +21526,7 @@ function useShapeMorph({
     currentProgressRef.current = p;
     setClipPath(interpolatePath(morph, p, width, height));
   }, [scrollProgress, morphOn, morph, width, height]);
-  const animate5 = React67.useCallback(
+  const animate7 = React67.useCallback(
     (timestamp) => {
       if (!morph) return;
       const elapsed = timestamp - startTimeRef.current;
@@ -21002,7 +21537,7 @@ function useShapeMorph({
       currentProgressRef.current = progress;
       setClipPath(interpolatePath(morph, progress, width, height));
       if (rawT < 1) {
-        animRef.current = requestAnimationFrame(animate5);
+        animRef.current = requestAnimationFrame(animate7);
       } else {
         animRef.current = null;
       }
@@ -21021,9 +21556,9 @@ function useShapeMorph({
       startProgressRef.current = currentProgressRef.current;
       targetProgressRef.current = toProgress;
       startTimeRef.current = performance.now();
-      animRef.current = requestAnimationFrame(animate5);
+      animRef.current = requestAnimationFrame(animate7);
     },
-    [morph, animate5, width, height]
+    [morph, animate7, width, height]
   );
   React67.useEffect(() => {
     return () => {
@@ -21070,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,
@@ -21232,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,
@@ -21269,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) => {
@@ -27405,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;
@@ -27544,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;
@@ -27590,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;