@bug-on/m3-expressive 1.3.5 → 1.3.6

package/dist/{md3-expressive-shapes-CPcfl_Hf.d.mts → md3-expressive-shapes-wk_98LJh.d.mts}

@@ -109,6 +109,11 @@ declare function directionVector(dx: number, dy: number): [number, number];
  * @returns true if convex
  */
 declare function convex(prevX: number, prevY: number, currX: number, currY: number, nextX: number, nextY: number): boolean;
+/**
+ * Formats a coordinate to at most 4 decimal places with maximum performance.
+ * Avoids string parsing and intermediate allocations.
+ */
+declare function formatCoordinate(v: number): string;
 /**
  * Type for a function that transforms a point (x, y) → (x', y').
  */
@@ -447,6 +452,20 @@ declare class RoundedPolygon {
      * @returns [minX, minY, maxX, maxY] of the max-bounds square
      */
     calculateMaxBounds(): [number, number, number, number];
+    /**
+     * 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(): number;
+    /**
+     * Returns true if the polygon outline runs in Clockwise order (screen coords).
+     */
+    isClockwise(): boolean;
+    /**
+     * Returns a reversed copy of the polygon with reversed traversal order.
+     * Flips the winding direction (CW ↔ CCW).
+     */
+    reversed(): RoundedPolygon;
 }
 
 /**
@@ -495,4 +514,4 @@ declare const MD3Shapes: {
 };
 type MD3ShapeName = keyof typeof MD3Shapes;
 
-export { ANGLE_EPSILON as A, scalePoint as B, type CornerFeature as C, DISTANCE_EPSILON as D, type EdgeFeature as E, FLOAT_PI as F, square as G, subtractPoints as H, transformFeature as I, transformPoint as J, type MD3ShapeName as M, type Point as P, RoundedPolygon as R, UNROUNDED as U, type CornerRounding as a, Cubic as b, type Feature as c, MD3Shapes as d, MutableCubic as e, type PointTransformer as f, addPoints as g, clockwise as h, convex as i, cornerFeature as j, cornerRounding as k, directionVector as l, distance as m, distanceSquared as n, dividePoint as o, dotProduct as p, edgeFeature as q, getDirection as r, getDistance as s, getDistanceSquared as t, interpolate as u, lerpPoint as v, point as w, positiveModulo as x, radialToCartesian as y, rotate90 as z };
+export { ANGLE_EPSILON as A, rotate90 as B, type CornerFeature as C, DISTANCE_EPSILON as D, type EdgeFeature as E, FLOAT_PI as F, scalePoint as G, square as H, subtractPoints as I, transformFeature as J, transformPoint as K, type MD3ShapeName as M, type Point as P, RoundedPolygon as R, UNROUNDED as U, type CornerRounding as a, Cubic as b, type Feature as c, MD3Shapes as d, MutableCubic as e, type PointTransformer as f, addPoints as g, clockwise as h, convex as i, cornerFeature as j, cornerRounding as k, directionVector as l, distance as m, distanceSquared as n, dividePoint as o, dotProduct as p, edgeFeature as q, formatCoordinate as r, getDirection as s, getDistance as t, getDistanceSquared as u, interpolate as v, lerpPoint as w, point as x, positiveModulo as y, radialToCartesian as z };

package/dist/{md3-expressive-shapes-CPcfl_Hf.d.ts → md3-expressive-shapes-wk_98LJh.d.ts}

@@ -109,6 +109,11 @@ declare function directionVector(dx: number, dy: number): [number, number];
  * @returns true if convex
  */
 declare function convex(prevX: number, prevY: number, currX: number, currY: number, nextX: number, nextY: number): boolean;
+/**
+ * Formats a coordinate to at most 4 decimal places with maximum performance.
+ * Avoids string parsing and intermediate allocations.
+ */
+declare function formatCoordinate(v: number): string;
 /**
  * Type for a function that transforms a point (x, y) → (x', y').
  */
@@ -447,6 +452,20 @@ declare class RoundedPolygon {
      * @returns [minX, minY, maxX, maxY] of the max-bounds square
      */
     calculateMaxBounds(): [number, number, number, number];
+    /**
+     * 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(): number;
+    /**
+     * Returns true if the polygon outline runs in Clockwise order (screen coords).
+     */
+    isClockwise(): boolean;
+    /**
+     * Returns a reversed copy of the polygon with reversed traversal order.
+     * Flips the winding direction (CW ↔ CCW).
+     */
+    reversed(): RoundedPolygon;
 }
 
 /**
@@ -495,4 +514,4 @@ declare const MD3Shapes: {
 };
 type MD3ShapeName = keyof typeof MD3Shapes;
 
-export { ANGLE_EPSILON as A, scalePoint as B, type CornerFeature as C, DISTANCE_EPSILON as D, type EdgeFeature as E, FLOAT_PI as F, square as G, subtractPoints as H, transformFeature as I, transformPoint as J, type MD3ShapeName as M, type Point as P, RoundedPolygon as R, UNROUNDED as U, type CornerRounding as a, Cubic as b, type Feature as c, MD3Shapes as d, MutableCubic as e, type PointTransformer as f, addPoints as g, clockwise as h, convex as i, cornerFeature as j, cornerRounding as k, directionVector as l, distance as m, distanceSquared as n, dividePoint as o, dotProduct as p, edgeFeature as q, getDirection as r, getDistance as s, getDistanceSquared as t, interpolate as u, lerpPoint as v, point as w, positiveModulo as x, radialToCartesian as y, rotate90 as z };
+export { ANGLE_EPSILON as A, rotate90 as B, type CornerFeature as C, DISTANCE_EPSILON as D, type EdgeFeature as E, FLOAT_PI as F, scalePoint as G, square as H, subtractPoints as I, transformFeature as J, transformPoint as K, type MD3ShapeName as M, type Point as P, RoundedPolygon as R, UNROUNDED as U, type CornerRounding as a, Cubic as b, type Feature as c, MD3Shapes as d, MutableCubic as e, type PointTransformer as f, addPoints as g, clockwise as h, convex as i, cornerFeature as j, cornerRounding as k, directionVector as l, distance as m, distanceSquared as n, dividePoint as o, dotProduct as p, edgeFeature as q, formatCoordinate as r, getDirection as s, getDistance as t, getDistanceSquared as u, interpolate as v, lerpPoint as w, point as x, positiveModulo as y, radialToCartesian as z };

package/dist/navigation.d.mts

@@ -9,7 +9,7 @@ import { a as ContextMenuProps, C as ContextMenuContentProps, b as ContextMenuTr
 export { e as MenuGroupPosition, g as MenuItemPosition, n as VerticalMenuGroupProps, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.mjs';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Transition, Variants, HTMLMotionProps } from 'motion/react';
-import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.mjs';
+import { M as MD3ShapeName } from './md3-expressive-shapes-wk_98LJh.mjs';
 import { d as MD3SlotWidth } from './md3-BQhRygSi.mjs';
 import { B as BaseIconButtonProps } from './icon-button-CxyJv7UV.mjs';
 

package/dist/navigation.d.ts

@@ -9,7 +9,7 @@ import { a as ContextMenuProps, C as ContextMenuContentProps, b as ContextMenuTr
 export { e as MenuGroupPosition, g as MenuItemPosition, n as VerticalMenuGroupProps, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.js';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Transition, Variants, HTMLMotionProps } from 'motion/react';
-import { M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.js';
+import { M as MD3ShapeName } from './md3-expressive-shapes-wk_98LJh.js';
 import { d as MD3SlotWidth } from './md3-BQhRygSi.js';
 import { B as BaseIconButtonProps } from './icon-button-Di8VX6ou.js';
 

package/dist/navigation.js

@@ -2971,6 +2971,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({
@@ -3003,6 +3010,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) {
@@ -3055,9 +3066,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
     );
   }
   /**
@@ -3666,6 +3684,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 = [];
@@ -3734,10 +3782,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],
@@ -4831,30 +4890,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) {