@bug-on/m3-expressive 1.3.4 → 1.3.6

package/dist/navigation.mjs

@@ -52,7 +52,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%)";
   }
@@ -69,11 +69,16 @@ function FadingBlurMask({
   const shouldReduceMotion = 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,
@@ -85,7 +90,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,
@@ -1133,7 +1138,7 @@ var IconComponent = React39.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       name,
-      variant = "outlined",
+      variant = "rounded",
       fill = 0,
       weight = 400,
       grade = 0,
@@ -2942,6 +2947,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
 var UNROUNDED = Object.freeze({
@@ -2974,6 +2986,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) {
@@ -3026,9 +3042,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
     );
   }
   /**
@@ -3637,6 +3660,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 = [];
@@ -3705,10 +3758,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],
@@ -4802,30 +4866,24 @@ var MD3Shapes = {
 
 // 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 fmt(v) {
-  return Number(v.toFixed(4)).toString();
-}
 
 // src/ui/navigation/navigation-shape-utils.ts
 function getNavigationShapeStyle(shape, width = 56, height = 56) {
@@ -5947,6 +6005,7 @@ var NavigationRailComponent = React39.forwardRef(
             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",
@@ -6281,6 +6340,7 @@ function SearchBar({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -6343,7 +6403,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
         ),
@@ -6383,7 +6443,7 @@ function SearchBar({
               "aria-label": ariaLabel,
               className: "relative flex h-full items-center gap-2 rounded-full px-4",
               children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsx(
+                showLeadingIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: "flex shrink-0 items-center justify-center",
@@ -8145,6 +8205,7 @@ function SearchViewDocked({
   onSearch,
   active,
   onActiveChange,
+  showLeadingIcon = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -8201,7 +8262,7 @@ function SearchViewDocked({
               className: "flex items-center gap-2 px-4",
               style: { height: SearchTokens.heights.dockedHeader },
               children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsx(
+                showLeadingIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: "flex shrink-0 items-center justify-center",
@@ -8296,6 +8357,7 @@ function SearchViewFullScreen({
   onSearch,
   active,
   onActiveChange,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -8362,7 +8424,7 @@ function SearchViewFullScreen({
               className: "flex shrink-0 items-center gap-2 px-4",
               style: { height: SearchTokens.heights.fullScreenHeader },
               children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
-                /* @__PURE__ */ jsx(
+                showCloseButton && /* @__PURE__ */ jsx(
                   IconButton,
                   {
                     size: "sm",
@@ -8463,6 +8525,8 @@ function SearchComponent({
   variant = "docked",
   styleType = "contained",
   hasGap = false,
+  showLeadingIcon = true,
+  showCloseButton = true,
   leadingIcon,
   trailingIcon,
   avatar,
@@ -8491,6 +8555,7 @@ function SearchComponent({
     onSearch,
     active,
     onActiveChange,
+    showLeadingIcon,
     leadingIcon,
     trailingIcon,
     avatar,
@@ -8507,6 +8572,7 @@ function SearchComponent({
     variant === "fullscreen" ? /* @__PURE__ */ jsx(
       SearchViewFullScreen,
       __spreadProps(__spreadValues({}, sharedProps), {
+        showCloseButton,
         styleType,
         viewClassName,
         children