@bug-on/m3-expressive 1.2.3 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,498 @@
1
+ /**
2
+ * Corner rounding parameters for polygon vertices.
3
+ * Ported from androidx.graphics.shapes.CornerRounding.kt
4
+ *
5
+ * @see https://m3.material.io/styles/shape/corner-radius-scale
6
+ */
7
+ /**
8
+ * Defines how a polygon corner is rounded.
9
+ *
10
+ * @example
11
+ * // Fully rounded corner with radius 16
12
+ * const rounding: CornerRounding = { radius: 16, smoothing: 0 };
13
+ *
14
+ * @example
15
+ * // Rounded corner with iOS-style squircle smoothing
16
+ * const smoothRounding: CornerRounding = { radius: 16, smoothing: 0.6 };
17
+ */
18
+ interface CornerRounding {
19
+ /**
20
+ * The radius of the rounding. A value of 0 means no rounding (sharp corner).
21
+ * @default 0
22
+ */
23
+ readonly radius: number;
24
+ /**
25
+ * Smoothing factor in [0, 1]. Controls how the rounding curve transitions from
26
+ * the straight edge to the circular arc (squircle-like effect).
27
+ * 0 = pure circular arc, 1 = maximum smoothing.
28
+ * @default 0
29
+ */
30
+ readonly smoothing: number;
31
+ }
32
+ /**
33
+ * Creates a CornerRounding.
34
+ * @param radius - Rounding radius (default: 0)
35
+ * @param smoothing - Smoothing factor 0–1 (default: 0)
36
+ */
37
+ declare function cornerRounding(radius?: number, smoothing?: number): CornerRounding;
38
+ /** No rounding: straight/sharp corners. */
39
+ declare const UNROUNDED: CornerRounding;
40
+
41
+ /**
42
+ * Shared utility constants and functions for the MD3 Expressive Shape Engine.
43
+ * Ported from androidx.graphics.shapes.Utils.kt
44
+ *
45
+ * @see https://m3.material.io/styles/shape/overview-principles
46
+ */
47
+ /** Epsilon for floating-point distance comparisons */
48
+ declare const DISTANCE_EPSILON = 0.0001;
49
+ /** Epsilon for angle comparisons */
50
+ declare const ANGLE_EPSILON = 0.0001;
51
+ /** Pi as a float constant */
52
+ declare const FLOAT_PI: number;
53
+ /**
54
+ * Calculates the Euclidean distance between two coordinate offsets.
55
+ * @param dx - Difference in x coordinates
56
+ * @param dy - Difference in y coordinates
57
+ * @returns The distance
58
+ */
59
+ declare function distance(dx: number, dy: number): number;
60
+ /**
61
+ * Calculates the squared Euclidean distance (cheaper than distance).
62
+ * @param dx - Difference in x coordinates
63
+ * @param dy - Difference in y coordinates
64
+ * @returns The squared distance
65
+ */
66
+ declare function distanceSquared(dx: number, dy: number): number;
67
+ /**
68
+ * Converts polar coordinates to Cartesian (x, y).
69
+ * @param radius - The radial distance
70
+ * @param angle - The angle in radians
71
+ * @returns A tuple [x, y]
72
+ */
73
+ declare function radialToCartesian(radius: number, angle: number): [number, number];
74
+ /**
75
+ * Returns value modulo divisor, always positive.
76
+ * @param value - The value
77
+ * @param divisor - The divisor
78
+ * @returns Positive modulo result
79
+ */
80
+ declare function positiveModulo(value: number, divisor: number): number;
81
+ /**
82
+ * Linearly interpolates between start and stop.
83
+ * @param start - Start value (at fraction=0)
84
+ * @param stop - End value (at fraction=1)
85
+ * @param fraction - Interpolation factor [0,1]
86
+ * @returns Interpolated value
87
+ */
88
+ declare function interpolate(start: number, stop: number, fraction: number): number;
89
+ /**
90
+ * Returns the square of a value.
91
+ * @param value - The value to square
92
+ */
93
+ declare function square(value: number): number;
94
+ /**
95
+ * Returns a unit direction vector from (0,0) toward (dx, dy).
96
+ * @param dx - X component
97
+ * @param dy - Y component
98
+ * @returns [nx, ny] normalized direction
99
+ */
100
+ declare function directionVector(dx: number, dy: number): [number, number];
101
+ /**
102
+ * Checks if the turn from prev→curr→next is convex (clockwise in screen coords).
103
+ * @param prevX - Previous vertex x
104
+ * @param prevY - Previous vertex y
105
+ * @param currX - Current vertex x
106
+ * @param currY - Current vertex y
107
+ * @param nextX - Next vertex x
108
+ * @param nextY - Next vertex y
109
+ * @returns true if convex
110
+ */
111
+ declare function convex(prevX: number, prevY: number, currX: number, currY: number, nextX: number, nextY: number): boolean;
112
+ /**
113
+ * Type for a function that transforms a point (x, y) → (x', y').
114
+ */
115
+ type PointTransformer = (x: number, y: number) => [number, number];
116
+
117
+ /**
118
+ * Point type and operations for the MD3 Expressive Shape Engine.
119
+ * Ported from androidx.graphics.shapes.Point.kt
120
+ *
121
+ * In Kotlin, Point is a type alias for FloatFloatPair. Here we use a plain object
122
+ * for zero-overhead structural typing in TypeScript.
123
+ */
124
+
125
+ /** A 2D point or vector. */
126
+ interface Point {
127
+ readonly x: number;
128
+ readonly y: number;
129
+ }
130
+ /**
131
+ * Creates a new Point.
132
+ * @param x - X coordinate
133
+ * @param y - Y coordinate
134
+ */
135
+ declare function point(x: number, y: number): Point;
136
+ /**
137
+ * Returns the magnitude (distance from origin) of the point.
138
+ * @param p - The point
139
+ */
140
+ declare function getDistance(p: Point): number;
141
+ /**
142
+ * Returns the squared magnitude of the point (cheaper than getDistance).
143
+ * @param p - The point
144
+ */
145
+ declare function getDistanceSquared(p: Point): number;
146
+ /**
147
+ * Dot product of two points (treated as vectors).
148
+ * @param a - First point
149
+ * @param b - Second point
150
+ */
151
+ declare function dotProduct(a: Point, b: Point): number;
152
+ /**
153
+ * Rotates the point 90 degrees counter-clockwise.
154
+ * @param p - The point
155
+ * @returns New rotated point
156
+ */
157
+ declare function rotate90(p: Point): Point;
158
+ /**
159
+ * Returns the unit vector in the direction of the point from (0,0).
160
+ * @param p - The point
161
+ * @throws Error if the point is at the origin
162
+ */
163
+ declare function getDirection(p: Point): Point;
164
+ /**
165
+ * Checks if p0→p1→p2 turn is clockwise (positive cross product in screen coords).
166
+ * @param p0 - Previous point
167
+ * @param p1 - Current point
168
+ * @param p2 - Next point
169
+ */
170
+ declare function clockwise(p0: Point, p1: Point, p2: Point): boolean;
171
+ /** Point addition. */
172
+ declare function addPoints(a: Point, b: Point): Point;
173
+ /** Point subtraction. */
174
+ declare function subtractPoints(a: Point, b: Point): Point;
175
+ /** Scalar multiplication. */
176
+ declare function scalePoint(p: Point, scalar: number): Point;
177
+ /** Scalar division. */
178
+ declare function dividePoint(p: Point, scalar: number): Point;
179
+ /**
180
+ * Linearly interpolates between two points.
181
+ * @param start - Start point (at fraction=0)
182
+ * @param stop - End point (at fraction=1)
183
+ * @param fraction - Interpolation factor [0,1]
184
+ */
185
+ declare function lerpPoint(start: Point, stop: Point, fraction: number): Point;
186
+ /**
187
+ * Applies a PointTransformer to a point.
188
+ * @param p - The original point
189
+ * @param fn - The transform function
190
+ */
191
+ declare function transformPoint(p: Point, fn: PointTransformer): Point;
192
+
193
+ /**
194
+ * Cubic Bézier curve type for the MD3 Expressive Shape Engine.
195
+ * Ported from androidx.graphics.shapes.Cubic.kt
196
+ *
197
+ * A cubic holds 8 floats: [anchor0X, anchor0Y, control0X, control0Y, control1X, control1Y, anchor1X, anchor1Y]
198
+ */
199
+
200
+ /**
201
+ * A single cubic Bézier curve segment.
202
+ *
203
+ * The curve goes from anchor0 → (via control0, control1) → anchor1.
204
+ *
205
+ * @example
206
+ * const line = Cubic.straightLine(0, 0, 1, 0);
207
+ * const arc = Cubic.circularArc(0, 0, 1, 0, 0, 1);
208
+ */
209
+ declare class Cubic {
210
+ /** Internal storage: [a0x, a0y, c0x, c0y, c1x, c1y, a1x, a1y] */
211
+ readonly points: number[];
212
+ constructor(points: number[]);
213
+ /** First anchor point X */
214
+ get anchor0X(): number;
215
+ /** First anchor point Y */
216
+ get anchor0Y(): number;
217
+ /** First control point X */
218
+ get control0X(): number;
219
+ /** First control point Y */
220
+ get control0Y(): number;
221
+ /** Second control point X */
222
+ get control1X(): number;
223
+ /** Second control point Y */
224
+ get control1Y(): number;
225
+ /** Second anchor point X */
226
+ get anchor1X(): number;
227
+ /** Second anchor point Y */
228
+ get anchor1Y(): number;
229
+ /**
230
+ * Returns a point on the curve at parameter t (0=start, 1=end).
231
+ * Uses the standard cubic Bézier formula.
232
+ * @param t - Parameter in [0, 1]
233
+ */
234
+ pointOnCurve(t: number): Point;
235
+ /**
236
+ * Returns true if this curve has (near) zero length.
237
+ */
238
+ zeroLength(): boolean;
239
+ /**
240
+ * Splits this cubic at parameter t, returning two cubics.
241
+ * Uses De Casteljau's algorithm.
242
+ * @param t - Split parameter in [0, 1]
243
+ * @returns [left, right] pair
244
+ */
245
+ split(t: number): [Cubic, Cubic];
246
+ /**
247
+ * Returns a reversed copy of this cubic (anchor0 ↔ anchor1, controls swapped).
248
+ */
249
+ reverse(): Cubic;
250
+ /**
251
+ * Calculates the axis-aligned bounding box.
252
+ * @param approximate - If true, uses control point hull (faster). Default: false.
253
+ * @returns [minX, minY, maxX, maxY]
254
+ */
255
+ calculateBounds(approximate?: boolean): [number, number, number, number];
256
+ /**
257
+ * Interpolates between this cubic and another at fraction t.
258
+ * @param other - Target cubic
259
+ * @param t - Fraction [0, 1]
260
+ */
261
+ interpolateTo(other: Cubic, t: number): Cubic;
262
+ /**
263
+ * Applies a PointTransformer to all anchor and control points.
264
+ * @param fn - The transform function
265
+ */
266
+ transformed(fn: PointTransformer): Cubic;
267
+ toString(): string;
268
+ /**
269
+ * Creates a cubic representing a straight line.
270
+ * Control points lie at 1/3 and 2/3 of the line.
271
+ * @param x0 - Start anchor X
272
+ * @param y0 - Start anchor Y
273
+ * @param x1 - End anchor X
274
+ * @param y1 - End anchor Y
275
+ */
276
+ static straightLine(x0: number, y0: number, x1: number, y1: number): Cubic;
277
+ /**
278
+ * Creates a cubic approximating a circular arc.
279
+ * p0 and p1 must be equidistant from the center.
280
+ * For arcs > 180°, use multiple cubics.
281
+ *
282
+ * @param centerX - Arc center X
283
+ * @param centerY - Arc center Y
284
+ * @param x0 - Start point X (on circle)
285
+ * @param y0 - Start point Y (on circle)
286
+ * @param x1 - End point X (on circle)
287
+ * @param y1 - End point Y (on circle)
288
+ */
289
+ static circularArc(centerX: number, centerY: number, x0: number, y0: number, x1: number, y1: number): Cubic;
290
+ /**
291
+ * Creates a zero-length cubic at the given point.
292
+ * @param x - X coordinate
293
+ * @param y - Y coordinate
294
+ */
295
+ static empty(x: number, y: number): Cubic;
296
+ }
297
+ /**
298
+ * A mutable version of Cubic used in performance-critical paths (Morph.forEachCubic).
299
+ * Reuses the same instance to avoid allocations.
300
+ */
301
+ declare class MutableCubic extends Cubic {
302
+ constructor();
303
+ /**
304
+ * Mutably interpolates between c1 and c2 at the given progress.
305
+ * @param c1 - Start cubic
306
+ * @param c2 - End cubic
307
+ * @param progress - Interpolation factor [0, 1]
308
+ */
309
+ interpolate(c1: Cubic, c2: Cubic, progress: number): void;
310
+ /**
311
+ * Mutably applies a PointTransformer to all points.
312
+ * @param fn - The transform function
313
+ */
314
+ transform(fn: PointTransformer): void;
315
+ }
316
+
317
+ /**
318
+ * Feature types for the MD3 Expressive Shape Engine.
319
+ * Ported from androidx.graphics.shapes.Features.kt
320
+ *
321
+ * Features describe the outline segments of a RoundedPolygon:
322
+ * - Corner: a (potentially rounded) vertex
323
+ * - Edge: a straight or curved segment between two corners
324
+ */
325
+
326
+ /**
327
+ * A discriminated union representing one outline segment of a polygon.
328
+ *
329
+ * @example
330
+ * const corner: Feature = { type: "corner", cubics: [...], convex: true };
331
+ * const edge: Feature = { type: "edge", cubics: [...] };
332
+ */
333
+ type Feature = CornerFeature | EdgeFeature;
334
+ /** A (potentially rounded) corner vertex. */
335
+ interface CornerFeature {
336
+ readonly type: "corner";
337
+ /**
338
+ * Cubic curves making up this corner.
339
+ * Unrounded corner = 1 zero-length cubic. Rounded = 1–3 cubics (flanking + arc + flanking).
340
+ */
341
+ readonly cubics: Cubic[];
342
+ /** True if this corner is convex (pointing outward). */
343
+ readonly convex: boolean;
344
+ }
345
+ /** A straight or curved edge segment between two corners. */
346
+ interface EdgeFeature {
347
+ readonly type: "edge";
348
+ /** Cubic curves making up this edge (usually a single straight-line cubic). */
349
+ readonly cubics: Cubic[];
350
+ }
351
+ /**
352
+ * Creates a corner feature.
353
+ * @param cubics - Cubic curves defining the corner shape
354
+ * @param convex - Whether the corner is convex
355
+ */
356
+ declare function cornerFeature(cubics: Cubic[], convex: boolean): CornerFeature;
357
+ /**
358
+ * Creates an edge feature.
359
+ * @param cubics - Cubic curves defining the edge
360
+ */
361
+ declare function edgeFeature(cubics: Cubic[]): EdgeFeature;
362
+ /**
363
+ * Returns a transformed copy of a feature.
364
+ * @param feature - The feature to transform
365
+ * @param fn - Point transformer function
366
+ */
367
+ declare function transformFeature(feature: Feature, fn: PointTransformer): Feature;
368
+
369
+ /**
370
+ * RoundedPolygon — core shape class for the MD3 Expressive Shape Engine.
371
+ * Ported from androidx.graphics.shapes.RoundedPolygon.kt
372
+ *
373
+ * A RoundedPolygon is defined by a list of Feature (Corner + Edge) objects.
374
+ * Its geometry is stored as a flat list of Cubic Bézier curves that form
375
+ * a closed, contiguous outline.
376
+ */
377
+
378
+ /**
379
+ * The core shape class. Represents a closed polygon outline as a list of Cubic
380
+ * Bézier curves, optionally rounded at the vertices.
381
+ *
382
+ * All shapes in MD3 Expressive are represented as RoundedPolygon instances.
383
+ *
384
+ * @example
385
+ * // Create a circle (8-vertex polygon, fully rounded)
386
+ * const circle = RoundedPolygon.circle();
387
+ *
388
+ * @example
389
+ * // Create a rounded rectangle
390
+ * const rect = RoundedPolygon.rectangle(2, 1, { radius: 0.25, smoothing: 0 });
391
+ */
392
+ declare class RoundedPolygon {
393
+ /** Flat list of cubic Bézier curves forming the closed outline. */
394
+ readonly cubics: Cubic[];
395
+ /** Feature list (corners + edges). */
396
+ readonly features: Feature[];
397
+ /** Center point of the polygon. */
398
+ readonly center: Point;
399
+ /** @internal Use static factory methods instead */
400
+ private constructor();
401
+ get centerX(): number;
402
+ get centerY(): number;
403
+ /**
404
+ * Creates a polygon from a vertex count (regular polygon).
405
+ * @param numVertices - Number of vertices (≥ 3)
406
+ * @param radius - Circumradius (default: 1)
407
+ * @param centerX - Center X (default: 0)
408
+ * @param centerY - Center Y (default: 0)
409
+ * @param rounding - Corner rounding for all vertices
410
+ * @param perVertexRounding - Per-vertex rounding overrides
411
+ */
412
+ static fromNumVertices(numVertices: number, radius?: number, centerX?: number, centerY?: number, rounding?: CornerRounding, perVertexRounding?: CornerRounding[]): RoundedPolygon;
413
+ /**
414
+ * Creates a polygon from a flat vertex array [x0, y0, x1, y1, ...].
415
+ * @param vertices - Flat array of x,y pairs (length must be even and ≥ 6)
416
+ * @param rounding - Corner rounding for all vertices
417
+ * @param perVertexRounding - Per-vertex rounding overrides
418
+ * @param centerX - Center X (auto-calculated if not provided)
419
+ * @param centerY - Center Y (auto-calculated if not provided)
420
+ */
421
+ static fromVertices(vertices: number[], rounding?: CornerRounding, perVertexRounding?: CornerRounding[], centerX?: number, centerY?: number): RoundedPolygon;
422
+ /**
423
+ * Creates a polygon from a pre-built Feature list.
424
+ * @param features - Feature list (≥ 2 features)
425
+ * @param centerX - Center X (auto-calculated if NaN)
426
+ * @param centerY - Center Y (auto-calculated if NaN)
427
+ */
428
+ static fromFeatures(features: Feature[], centerX?: number, centerY?: number): RoundedPolygon;
429
+ /**
430
+ * Returns a new RoundedPolygon with all points transformed.
431
+ * @param fn - Transform function: (x, y) => [x', y']
432
+ */
433
+ transformed(fn: PointTransformer): RoundedPolygon;
434
+ /**
435
+ * Returns a normalized copy: scaled and centered to fit in [0,1] × [0,1].
436
+ * Maintains aspect ratio by using the larger dimension.
437
+ */
438
+ normalized(): RoundedPolygon;
439
+ /**
440
+ * Calculates the axis-aligned bounding box.
441
+ * @param approximate - If true, uses control point hull (faster). Default: true.
442
+ * @returns [minX, minY, maxX, maxY]
443
+ */
444
+ calculateBounds(approximate?: boolean): [number, number, number, number];
445
+ /**
446
+ * Calculates the maximum bounding square (useful for shapes that rotate).
447
+ * @returns [minX, minY, maxX, maxY] of the max-bounds square
448
+ */
449
+ calculateMaxBounds(): [number, number, number, number];
450
+ }
451
+
452
+ /**
453
+ * MD3 Expressive Shape Catalog — auto-generated from SVGs.
454
+ *
455
+ * Each shape is a pre-normalized RoundedPolygon (fits in [0,1]×[0,1], centered at (0.5, 0.5)).
456
+ * Regenerated via scratch/generate-shapes.ts.
457
+ */
458
+
459
+ declare const MD3Shapes: {
460
+ readonly arch: RoundedPolygon;
461
+ readonly arrow: RoundedPolygon;
462
+ readonly boom: RoundedPolygon;
463
+ readonly bun: RoundedPolygon;
464
+ readonly burst: RoundedPolygon;
465
+ readonly circle: RoundedPolygon;
466
+ readonly clamshell: RoundedPolygon;
467
+ readonly diamond: RoundedPolygon;
468
+ readonly fan: RoundedPolygon;
469
+ readonly flower: RoundedPolygon;
470
+ readonly gem: RoundedPolygon;
471
+ readonly ghostish: RoundedPolygon;
472
+ readonly heart: RoundedPolygon;
473
+ readonly clover4Leaf: RoundedPolygon;
474
+ readonly clover8Leaf: RoundedPolygon;
475
+ readonly oval: RoundedPolygon;
476
+ readonly pentagon: RoundedPolygon;
477
+ readonly pill: RoundedPolygon;
478
+ readonly pixelCircle: RoundedPolygon;
479
+ readonly pixelTriangle: RoundedPolygon;
480
+ readonly puffyDiamond: RoundedPolygon;
481
+ readonly puffy: RoundedPolygon;
482
+ readonly semiCircle: RoundedPolygon;
483
+ readonly cookie12Sided: RoundedPolygon;
484
+ readonly cookie4Sided: RoundedPolygon;
485
+ readonly cookie6Sided: RoundedPolygon;
486
+ readonly cookie7Sided: RoundedPolygon;
487
+ readonly cookie9Sided: RoundedPolygon;
488
+ readonly slanted: RoundedPolygon;
489
+ readonly softBoom: RoundedPolygon;
490
+ readonly softBurst: RoundedPolygon;
491
+ readonly square: RoundedPolygon;
492
+ readonly sunny: RoundedPolygon;
493
+ readonly triangle: RoundedPolygon;
494
+ readonly verySunny: RoundedPolygon;
495
+ };
496
+ type MD3ShapeName = keyof typeof MD3Shapes;
497
+
498
+ 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 };