@bug-on/m3-expressive 1.3.5 → 1.3.7

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/md3-xBl4wgND.d.mts

@@ -0,0 +1,44 @@
+import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
+
+/** MD3 button color variants */
+type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
+/** High-chroma tertiary tone — for hero accents, CTAs, expressive moments. */
+ | "tertiary"
+/** Brand-stable primary fixed — same hue across light/dark, for badges/pills. */
+ | "primary-fixed"
+/** Brand-stable tertiary fixed — same hue across light/dark, for special states. */
+ | "tertiary-fixed";
+/** MD3 Expressive button sizes */
+type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
+/** All MD3 system color token names (`--md-sys-color-*`) */
+type MD3ColorTokenName = "primary" | "on-primary" | "primary-container" | "on-primary-container" | "inverse-primary" | "primary-fixed" | "primary-fixed-dim" | "on-primary-fixed" | "on-primary-fixed-variant" | "secondary" | "on-secondary" | "secondary-container" | "on-secondary-container" | "secondary-fixed" | "secondary-fixed-dim" | "on-secondary-fixed" | "on-secondary-fixed-variant" | "tertiary" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "tertiary-fixed" | "tertiary-fixed-dim" | "on-tertiary-fixed" | "on-tertiary-fixed-variant" | "error" | "on-error" | "error-container" | "on-error-container" | "surface" | "on-surface" | "surface-variant" | "on-surface-variant" | "surface-dim" | "surface-bright" | "surface-tint" | "surface-container-lowest" | "surface-container-low" | "surface-container" | "surface-container-high" | "surface-container-highest" | "inverse-surface" | "inverse-on-surface" | "background" | "on-background" | "outline" | "outline-variant" | "scrim" | "shadow" | "indicator-active" | "indicator-container" | "indicator-contained-active" | "indicator-contained-container" | "indicator-track" | "indicator-stop";
+/**
+ * MD3 system color token or any arbitrary CSS color string.
+ * Provides IDE autocompletion for `var(--md-sys-color-*)` design tokens while
+ * allowing custom CSS colors, hex, rgb, or class values without breaking changes.
+ *
+ * @example
+ * color="var(--md-sys-color-surface)"
+ * color="var(--md-sys-color-primary)"
+ * color="#6750a4"
+ */
+type MD3ColorToken = `var(--md-sys-color-${MD3ColorTokenName})` | (string & {});
+/**
+ * MD3 Expressive slot width ratio.
+ * Used for icon buttons where width is independent from the size scale.
+ * - `"narrow"` – compressed width for dense toolbars.
+ * - `"default"` – 1:1 square/round aspect ratio.
+ * - `"wide"` – extended width.
+ */
+type MD3SlotWidth = "narrow" | "default" | "wide";
+/** MD3 shape families */
+type MD3Shape = "round" | "square";
+/** Helper: PolyMorphic component ref */
+type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
+/** Helper: Props cho polymorphic components */
+type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
+    as?: C;
+    children?: ReactNode;
+};
+
+export type { MD3ColorStyle as M, PolymorphicProps as P, MD3ColorToken as a, MD3ColorTokenName as b, MD3Shape as c, MD3Size as d, PolymorphicRef as e, MD3SlotWidth as f };

package/dist/md3-xBl4wgND.d.ts

@@ -0,0 +1,44 @@
+import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
+
+/** MD3 button color variants */
+type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
+/** High-chroma tertiary tone — for hero accents, CTAs, expressive moments. */
+ | "tertiary"
+/** Brand-stable primary fixed — same hue across light/dark, for badges/pills. */
+ | "primary-fixed"
+/** Brand-stable tertiary fixed — same hue across light/dark, for special states. */
+ | "tertiary-fixed";
+/** MD3 Expressive button sizes */
+type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
+/** All MD3 system color token names (`--md-sys-color-*`) */
+type MD3ColorTokenName = "primary" | "on-primary" | "primary-container" | "on-primary-container" | "inverse-primary" | "primary-fixed" | "primary-fixed-dim" | "on-primary-fixed" | "on-primary-fixed-variant" | "secondary" | "on-secondary" | "secondary-container" | "on-secondary-container" | "secondary-fixed" | "secondary-fixed-dim" | "on-secondary-fixed" | "on-secondary-fixed-variant" | "tertiary" | "on-tertiary" | "tertiary-container" | "on-tertiary-container" | "tertiary-fixed" | "tertiary-fixed-dim" | "on-tertiary-fixed" | "on-tertiary-fixed-variant" | "error" | "on-error" | "error-container" | "on-error-container" | "surface" | "on-surface" | "surface-variant" | "on-surface-variant" | "surface-dim" | "surface-bright" | "surface-tint" | "surface-container-lowest" | "surface-container-low" | "surface-container" | "surface-container-high" | "surface-container-highest" | "inverse-surface" | "inverse-on-surface" | "background" | "on-background" | "outline" | "outline-variant" | "scrim" | "shadow" | "indicator-active" | "indicator-container" | "indicator-contained-active" | "indicator-contained-container" | "indicator-track" | "indicator-stop";
+/**
+ * MD3 system color token or any arbitrary CSS color string.
+ * Provides IDE autocompletion for `var(--md-sys-color-*)` design tokens while
+ * allowing custom CSS colors, hex, rgb, or class values without breaking changes.
+ *
+ * @example
+ * color="var(--md-sys-color-surface)"
+ * color="var(--md-sys-color-primary)"
+ * color="#6750a4"
+ */
+type MD3ColorToken = `var(--md-sys-color-${MD3ColorTokenName})` | (string & {});
+/**
+ * MD3 Expressive slot width ratio.
+ * Used for icon buttons where width is independent from the size scale.
+ * - `"narrow"` – compressed width for dense toolbars.
+ * - `"default"` – 1:1 square/round aspect ratio.
+ * - `"wide"` – extended width.
+ */
+type MD3SlotWidth = "narrow" | "default" | "wide";
+/** MD3 shape families */
+type MD3Shape = "round" | "square";
+/** Helper: PolyMorphic component ref */
+type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
+/** Helper: Props cho polymorphic components */
+type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
+    as?: C;
+    children?: ReactNode;
+};
+
+export type { MD3ColorStyle as M, PolymorphicProps as P, MD3ColorToken as a, MD3ColorTokenName as b, MD3Shape as c, MD3Size as d, PolymorphicRef as e, MD3SlotWidth as f };

package/dist/navigation.d.mts

@@ -1,5 +1,5 @@
-import { c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.mjs';
-export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps } from './fading-blur-mask--uZbBKLj.mjs';
+import { c as FadingBlurProps } from './fading-blur-mask-CX-bwjNU.mjs';
+export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps } from './fading-blur-mask-CX-bwjNU.mjs';
 import * as motion from 'motion';
 import * as React$1 from 'react';
 import { RefObject } from 'react';
@@ -9,9 +9,9 @@ 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 { d as MD3SlotWidth } from './md3-BQhRygSi.mjs';
-import { B as BaseIconButtonProps } from './icon-button-CxyJv7UV.mjs';
+import { M as MD3ShapeName } from './md3-expressive-shapes-wk_98LJh.mjs';
+import { f as MD3SlotWidth } from './md3-xBl4wgND.mjs';
+import { B as BaseIconButtonProps } from './icon-button-BpX9_fwZ.mjs';
 
 /**
  * @file app-bar.tokens.ts

package/dist/navigation.d.ts

@@ -1,5 +1,5 @@
-import { c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.js';
-export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps } from './fading-blur-mask--uZbBKLj.js';
+import { c as FadingBlurProps } from './fading-blur-mask-D57UMguz.js';
+export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps } from './fading-blur-mask-D57UMguz.js';
 import * as motion from 'motion';
 import * as React$1 from 'react';
 import { RefObject } from 'react';
@@ -9,9 +9,9 @@ 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 { d as MD3SlotWidth } from './md3-BQhRygSi.js';
-import { B as BaseIconButtonProps } from './icon-button-Di8VX6ou.js';
+import { M as MD3ShapeName } from './md3-expressive-shapes-wk_98LJh.js';
+import { f as MD3SlotWidth } from './md3-xBl4wgND.js';
+import { B as BaseIconButtonProps } from './icon-button-DFXp9hze.js';
 
 /**
  * @file app-bar.tokens.ts

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) {
@@ -7780,7 +7833,7 @@ var WIDTH_SIZE_STYLES = {
   },
   sm: {
     default: "w-10",
-    narrow: "w-12",
+    narrow: "w-10",
     wide: "w-[3.25rem]"
   },
   md: {