material 1.0.4 → 3.0.0-next.0

package/dist/core/navigation/ripple.js

@@ -0,0 +1,41 @@
+export function mountRailRipple(root, className) {
+    const waveClass = className('__ripple');
+    const press = (event) => {
+        const target = event.target.closest(`.${className('__item')}, .${className('__toggle')}`);
+        if (!target || !root.contains(target) || target.hasAttribute('aria-disabled'))
+            return;
+        if (event instanceof KeyboardEvent && (event.repeat || !['Enter', ' '].includes(event.key)))
+            return;
+        if (event.type === 'pointerdown' && event.button !== 0)
+            return;
+        if (root.ownerDocument.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+            return;
+        const host = target.querySelector(`.${className('__indicator')}`) || target;
+        const bounds = host.getBoundingClientRect();
+        const wave = document.createElement('span');
+        wave.className = waveClass;
+        wave.setAttribute('aria-hidden', 'true');
+        const size = Math.max(bounds.width, bounds.height) * 2;
+        const pointer = event instanceof MouseEvent;
+        wave.style.width = wave.style.height = `${size}px`;
+        wave.style.left = `${(pointer ? event.clientX - bounds.left : bounds.width / 2) - size / 2}px`;
+        wave.style.top = `${(pointer ? event.clientY - bounds.top : bounds.height / 2) - size / 2}px`;
+        host.append(wave);
+    };
+    const finish = (event) => {
+        const target = event.target;
+        if (target.classList.contains(waveClass))
+            target.remove();
+    };
+    root.addEventListener('pointerdown', press);
+    root.addEventListener('keydown', press);
+    root.addEventListener('animationend', finish);
+    root.addEventListener('animationcancel', finish);
+    return () => {
+        root.removeEventListener('pointerdown', press);
+        root.removeEventListener('keydown', press);
+        root.removeEventListener('animationend', finish);
+        root.removeEventListener('animationcancel', finish);
+        root.querySelectorAll(`.${waveClass}`).forEach(wave => wave.remove());
+    };
+}

package/dist/core/shapes/cubic.d.ts

@@ -0,0 +1,32 @@
+/** A cubic Bézier: anchor 0, control 0, control 1, anchor 1 */
+export type Cubic = readonly [number, number, number, number, number, number, number, number];
+/** A 2D point */
+export type Point = readonly [number, number];
+/** Below this distance two points are the same point */
+export declare const DISTANCE_EPSILON = 0.0001;
+export declare const lerp: (start: number, stop: number, fraction: number) => number;
+export declare const distance: (x: number, y: number) => number;
+/** Unit vector in the direction of (x, y) */
+export declare const direction: (x: number, y: number) => Point;
+export declare const rotate90: ([x, y]: Point) => Point;
+export declare const dot: (a: Point, b: Point) => number;
+/** A straight segment expressed as a cubic */
+export declare const straightLine: (x0: number, y0: number, x1: number, y1: number) => Cubic;
+/**
+ * A circular arc from (x0, y0) to (x1, y1) around (centerX, centerY),
+ * approximated by one cubic; the arc must be under 180 degrees.
+ */
+export declare const circularArc: (centerX: number, centerY: number, x0: number, y0: number, x1: number, y1: number) => Cubic;
+export declare const pointOnCurve: (c: Cubic, t: number) => Point;
+/** Splits a cubic at `t` into two that together trace it (de Casteljau) */
+export declare const splitCubic: (c: Cubic, t: number) => [Cubic, Cubic];
+export declare const reverseCubic: (c: Cubic) => Cubic;
+export declare const zeroLength: (c: Cubic) => boolean;
+export type PointTransformer = (x: number, y: number) => Point;
+export declare const transformCubic: (c: Cubic, f: PointTransformer) => Cubic;
+/**
+ * The bounding box of a cubic as [left, top, right, bottom]. The approximate
+ * box is the hull of anchors and controls, which is what the library uses to
+ * normalise shapes.
+ */
+export declare const cubicBounds: (c: Cubic) => [number, number, number, number];

package/dist/core/shapes/cubic.js

@@ -0,0 +1,76 @@
+export const DISTANCE_EPSILON = 1e-4;
+export const lerp = (start, stop, fraction) => (1 - fraction) * start + fraction * stop;
+export const distance = (x, y) => Math.sqrt(x * x + y * y);
+export const direction = (x, y) => {
+    const d = distance(x, y);
+    if (d <= 0)
+        throw new Error('Required distance greater than zero');
+    return [x / d, y / d];
+};
+export const rotate90 = ([x, y]) => [-y, x];
+export const dot = (a, b) => a[0] * b[0] + a[1] * b[1];
+export const straightLine = (x0, y0, x1, y1) => [
+    x0, y0,
+    lerp(x0, x1, 1 / 3), lerp(y0, y1, 1 / 3),
+    lerp(x0, x1, 2 / 3), lerp(y0, y1, 2 / 3),
+    x1, y1,
+];
+export const circularArc = (centerX, centerY, x0, y0, x1, y1) => {
+    const p0d = direction(x0 - centerX, y0 - centerY);
+    const p1d = direction(x1 - centerX, y1 - centerY);
+    const rotatedP0 = rotate90(p0d);
+    const rotatedP1 = rotate90(p1d);
+    const clockwise = dot(rotatedP0, [x1 - centerX, y1 - centerY]) >= 0;
+    const cosa = dot(p0d, p1d);
+    if (cosa > 0.999)
+        return straightLine(x0, y0, x1, y1);
+    const k = (distance(x0 - centerX, y0 - centerY) * 4 / 3) *
+        ((Math.sqrt(2 * (1 - cosa)) - Math.sqrt(1 - cosa * cosa)) / (1 - cosa)) *
+        (clockwise ? 1 : -1);
+    return [
+        x0, y0,
+        x0 + rotatedP0[0] * k, y0 + rotatedP0[1] * k,
+        x1 - rotatedP1[0] * k, y1 - rotatedP1[1] * k,
+        x1, y1,
+    ];
+};
+export const pointOnCurve = (c, t) => {
+    const u = 1 - t;
+    return [
+        c[0] * (u * u * u) + c[2] * (3 * t * u * u) + c[4] * (3 * t * t * u) + c[6] * (t * t * t),
+        c[1] * (u * u * u) + c[3] * (3 * t * u * u) + c[5] * (3 * t * t * u) + c[7] * (t * t * t),
+    ];
+};
+export const splitCubic = (c, t) => {
+    const u = 1 - t;
+    const [x0, y0, x1, y1, x2, y2, x3, y3] = c;
+    const ax = u * x0 + t * x1, ay = u * y0 + t * y1;
+    const bx = u * x1 + t * x2, by = u * y1 + t * y2;
+    const cx = u * x2 + t * x3, cy = u * y2 + t * y3;
+    const dx = u * ax + t * bx, dy = u * ay + t * by;
+    const ex = u * bx + t * cx, ey = u * by + t * cy;
+    const mx = u * dx + t * ex, my = u * dy + t * ey;
+    return [
+        [x0, y0, ax, ay, dx, dy, mx, my],
+        [mx, my, ex, ey, cx, cy, x3, y3],
+    ];
+};
+export const reverseCubic = (c) => [c[6], c[7], c[4], c[5], c[2], c[3], c[0], c[1]];
+export const zeroLength = (c) => Math.abs(c[0] - c[6]) < DISTANCE_EPSILON && Math.abs(c[1] - c[7]) < DISTANCE_EPSILON;
+export const transformCubic = (c, f) => {
+    const a0 = f(c[0], c[1]);
+    const c0 = f(c[2], c[3]);
+    const c1 = f(c[4], c[5]);
+    const a1 = f(c[6], c[7]);
+    return [a0[0], a0[1], c0[0], c0[1], c1[0], c1[1], a1[0], a1[1]];
+};
+export const cubicBounds = (c) => {
+    if (zeroLength(c))
+        return [c[0], c[1], c[0], c[1]];
+    return [
+        Math.min(c[0], c[2], c[4], c[6]),
+        Math.min(c[1], c[3], c[5], c[7]),
+        Math.max(c[0], c[2], c[4], c[6]),
+        Math.max(c[1], c[3], c[5], c[7]),
+    ];
+};

package/dist/core/shapes/index.d.ts

@@ -0,0 +1,6 @@
+export type { Cubic, Point, PointTransformer } from "./cubic.js";
+export { straightLine, circularArc, pointOnCurve, cubicBounds, splitCubic } from "./cubic.js";
+export type { CornerRounding, RoundedPolygon } from "./polygon.js";
+export { UNROUNDED, roundedPolygon, rectangle, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } from "./polygon.js";
+export type { MaterialShapeName, RadialProfile } from "./material.js";
+export { materialShape, materialShapePath, polygonPath, radialProfile, shapeCircle, shapeSquare, shapeSlanted, shapeArch, shapeFan, shapeArrow, shapeSemiCircle, shapeOval, shapePill, shapeTriangle, shapeDiamond, shapeClamShell, shapePentagon, shapeGem, shapeSunny, shapeVerySunny, shapeCookie4Sided, shapeCookie6Sided, shapeCookie7Sided, shapeCookie9Sided, shapeCookie12Sided, shapeGhostish, shapeClover4Leaf, shapeClover8Leaf, shapeBurst, shapeSoftBurst, shapeBoom, shapeSoftBoom, shapeFlower, shapePuffy, shapePuffyDiamond, shapePixelCircle, shapePixelTriangle, shapeBun, shapeHeart, } from "./material.js";

package/dist/core/shapes/index.js

@@ -0,0 +1,3 @@
+export { straightLine, circularArc, pointOnCurve, cubicBounds, splitCubic } from "./cubic.js";
+export { UNROUNDED, roundedPolygon, rectangle, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } from "./polygon.js";
+export { materialShape, materialShapePath, polygonPath, radialProfile, shapeCircle, shapeSquare, shapeSlanted, shapeArch, shapeFan, shapeArrow, shapeSemiCircle, shapeOval, shapePill, shapeTriangle, shapeDiamond, shapeClamShell, shapePentagon, shapeGem, shapeSunny, shapeVerySunny, shapeCookie4Sided, shapeCookie6Sided, shapeCookie7Sided, shapeCookie9Sided, shapeCookie12Sided, shapeGhostish, shapeClover4Leaf, shapeClover8Leaf, shapeBurst, shapeSoftBurst, shapeBoom, shapeSoftBoom, shapeFlower, shapePuffy, shapePuffyDiamond, shapePixelCircle, shapePixelTriangle, shapeBun, shapeHeart, } from "./material.js";

package/dist/core/shapes/material.d.ts

@@ -0,0 +1,150 @@
+import { RoundedPolygon, polygonMaxRadius } from "./polygon.js";
+/** Circle */
+export declare const shapeCircle: () => RoundedPolygon;
+/** A rounded square */
+export declare const shapeSquare: () => RoundedPolygon;
+/** A slanted square */
+export declare const shapeSlanted: () => RoundedPolygon;
+/** An arch */
+export declare const shapeArch: () => RoundedPolygon;
+/** A fan */
+export declare const shapeFan: () => RoundedPolygon;
+/** An arrow */
+export declare const shapeArrow: () => RoundedPolygon;
+/** A semicircle */
+export declare const shapeSemiCircle: () => RoundedPolygon;
+/** An oval */
+export declare const shapeOval: () => RoundedPolygon;
+/** A pill */
+export declare const shapePill: () => RoundedPolygon;
+/** A triangle */
+export declare const shapeTriangle: () => RoundedPolygon;
+/** A diamond */
+export declare const shapeDiamond: () => RoundedPolygon;
+/** A clam shell */
+export declare const shapeClamShell: () => RoundedPolygon;
+/** A pentagon */
+export declare const shapePentagon: () => RoundedPolygon;
+/** A gem */
+export declare const shapeGem: () => RoundedPolygon;
+/** A sunny shape: an 8-point star */
+export declare const shapeSunny: () => RoundedPolygon;
+/** A very sunny shape */
+export declare const shapeVerySunny: () => RoundedPolygon;
+/** A 4-sided cookie */
+export declare const shapeCookie4Sided: () => RoundedPolygon;
+/** A 6-sided cookie */
+export declare const shapeCookie6Sided: () => RoundedPolygon;
+/** A 7-sided cookie */
+export declare const shapeCookie7Sided: () => RoundedPolygon;
+/** A 9-sided cookie */
+export declare const shapeCookie9Sided: () => RoundedPolygon;
+/** A 12-sided cookie */
+export declare const shapeCookie12Sided: () => RoundedPolygon;
+/** A ghost-ish shape */
+export declare const shapeGhostish: () => RoundedPolygon;
+/** A 4-leaf clover */
+export declare const shapeClover4Leaf: () => RoundedPolygon;
+/** An 8-leaf clover */
+export declare const shapeClover8Leaf: () => RoundedPolygon;
+/** A burst */
+export declare const shapeBurst: () => RoundedPolygon;
+/** A soft burst */
+export declare const shapeSoftBurst: () => RoundedPolygon;
+/** A boom */
+export declare const shapeBoom: () => RoundedPolygon;
+/** A soft boom */
+export declare const shapeSoftBoom: () => RoundedPolygon;
+/** A flower */
+export declare const shapeFlower: () => RoundedPolygon;
+/** A puffy shape */
+export declare const shapePuffy: () => RoundedPolygon;
+/** A puffy diamond */
+export declare const shapePuffyDiamond: () => RoundedPolygon;
+/** A pixelated circle */
+export declare const shapePixelCircle: () => RoundedPolygon;
+/** A pixelated triangle */
+export declare const shapePixelTriangle: () => RoundedPolygon;
+/** A bun */
+export declare const shapeBun: () => RoundedPolygon;
+/** A heart */
+export declare const shapeHeart: () => RoundedPolygon;
+declare const byName: {
+    circle: () => RoundedPolygon;
+    square: () => RoundedPolygon;
+    slanted: () => RoundedPolygon;
+    arch: () => RoundedPolygon;
+    fan: () => RoundedPolygon;
+    arrow: () => RoundedPolygon;
+    semiCircle: () => RoundedPolygon;
+    oval: () => RoundedPolygon;
+    pill: () => RoundedPolygon;
+    triangle: () => RoundedPolygon;
+    diamond: () => RoundedPolygon;
+    clamShell: () => RoundedPolygon;
+    pentagon: () => RoundedPolygon;
+    gem: () => RoundedPolygon;
+    sunny: () => RoundedPolygon;
+    verySunny: () => RoundedPolygon;
+    cookie4Sided: () => RoundedPolygon;
+    cookie6Sided: () => RoundedPolygon;
+    cookie7Sided: () => RoundedPolygon;
+    cookie9Sided: () => RoundedPolygon;
+    cookie12Sided: () => RoundedPolygon;
+    ghostish: () => RoundedPolygon;
+    clover4Leaf: () => RoundedPolygon;
+    clover8Leaf: () => RoundedPolygon;
+    burst: () => RoundedPolygon;
+    softBurst: () => RoundedPolygon;
+    boom: () => RoundedPolygon;
+    softBoom: () => RoundedPolygon;
+    flower: () => RoundedPolygon;
+    puffy: () => RoundedPolygon;
+    puffyDiamond: () => RoundedPolygon;
+    pixelCircle: () => RoundedPolygon;
+    pixelTriangle: () => RoundedPolygon;
+    bun: () => RoundedPolygon;
+    heart: () => RoundedPolygon;
+};
+/**
+ * Names of the Material shapes: Compose's, camelCased. material 3.0.0 removed 0.10's
+ * 'cookie4' and 'cookie9' aliases: use 'cookie4Sided' and 'cookie9Sided'.
+ */
+export type MaterialShapeName = keyof typeof byName;
+/** A Material shape by name, normalised into the unit square. Carries every shape; import `shapeX` to carry one. */
+export declare const materialShape: (name: MaterialShapeName) => RoundedPolygon;
+/**
+ * A polygon's outline as an SVG path ("M … C … Z"), scaled by `size`: a
+ * normalised shape fills a `size` × `size` box. Coordinates keep three decimals.
+ */
+export declare const polygonPath: (polygon: RoundedPolygon, size?: number) => string;
+/** A Material shape as an SVG path in a `size` × `size` box. Carries every shape, as materialShape does. */
+export declare const materialShapePath: (name: MaterialShapeName, size?: number) => string;
+/** A shape's outline as radii at evenly spaced angles around its centre */
+export interface RadialProfile {
+    /** Radius at angle i * 2π / radii.length, clockwise from the positive x axis on a y-down canvas */
+    radii: Float32Array;
+    /** The area centroid the radii are measured from */
+    centerX: number;
+    centerY: number;
+    /** The largest radius, for fitting the shape into a circle */
+    maxRadius: number;
+}
+/**
+ * radialProfile without its star-shape check, for callers whose shapes are
+ * known to be star-shaped: the loading indicator's, which the tests check.
+ * The centroid, not the bounds centre, is the pivot: a pentagon's mass sits
+ * below the middle of its box, and turning it about the box would make it
+ * orbit.
+ * @internal
+ */
+export declare const sampleProfile: (polygon: RoundedPolygon, samples?: number, stepsPerCubic?: number) => RadialProfile;
+/**
+ * Samples the outline at `samples` angles around the shape's area centroid.
+ * Throws for a shape that is not star-shaped around it. Of the Material
+ * shapes, 33 are; Puffy and PixelTriangle are not (their outlines double back
+ * as seen from the centroid, Puffy by about 0.1°): a ray from the centroid
+ * would cross the outline more than once, and the profile would be wrong.
+ */
+export declare const radialProfile: (polygon: RoundedPolygon, samples?: number, stepsPerCubic?: number) => RadialProfile;
+export { polygonMaxRadius };

package/dist/core/shapes/material.js

@@ -0,0 +1,316 @@
+// src/core/shapes/material.ts
+//
+// The Material 3 Expressive shapes: all 35 of Compose Material 3's
+// `MaterialShapes`, built as it builds them (vertex lists repeated around a
+// centre, stars, rectangles, circles), normalised into the unit square.
+//
+// Ported from androidx (Apache License 2.0, Copyright The Android Open Source
+// Project): compose/material3/material3/src/commonMain/kotlin/androidx/compose/
+// material3/MaterialShapes.kt at 080d2b3e5326ba80392d93442c4a51a02dc22650, on
+// the geometry of androidx.graphics:graphics-shapes 1.0.1, the version Compose
+// Material 3 depends on. test/fixtures/material-shapes.json holds every shape
+// as Compose builds it (scripts/generate-material-shapes.kt), and the tests
+// hold this port to it.
+//
+// Each shape is its own export, built once on first use, so a bundle carries
+// only the shapes it names. `materialShape(name)` looks any of them up by name,
+// and carries them all.
+import { pointOnCurve } from "./cubic.js";
+import { circle, normalizePolygon, polygonBounds, polygonMaxRadius, rectangle, regularPolygon, rotatePolygon, roundedPolygon, scalePolygon, star, } from "./polygon.js";
+const cornerRound15 = { radius: 0.15 };
+const cornerRound20 = { radius: 0.2 };
+const cornerRound30 = { radius: 0.3 };
+const cornerRound50 = { radius: 0.5 };
+const cornerRound100 = { radius: 1 };
+const point = (x, y, radius = 0, smoothing = 0) => ({ x, y, r: { radius, smoothing } });
+const toRadians = (degrees) => (degrees / 360) * 2 * Math.PI;
+/**
+ * Repeats a few points around the centre, `reps` times, optionally mirroring
+ * every other repetition (MaterialShapes.doRepeat)
+ */
+const repeat = (points, reps, cx, cy, mirroring) => {
+    const result = [];
+    if (mirroring) {
+        const angles = points.map((p) => (Math.atan2(p.y - cy, p.x - cx) * 180) / Math.PI);
+        const distances = points.map((p) => Math.hypot(p.x - cx, p.y - cy));
+        const actualReps = reps * 2;
+        const sectionAngle = 360 / actualReps;
+        for (let it = 0; it < actualReps; it++) {
+            for (let index = 0; index < points.length; index++) {
+                const i = it % 2 === 0 ? index : points.length - 1 - index;
+                if (i > 0 || it % 2 === 0) {
+                    const a = toRadians(sectionAngle * it + (it % 2 === 0 ? angles[i] : sectionAngle - angles[i] + 2 * angles[0]));
+                    result.push({ x: Math.cos(a) * distances[i] + cx, y: Math.sin(a) * distances[i] + cy, r: points[i].r });
+                }
+            }
+        }
+        return result;
+    }
+    const np = points.length;
+    for (let it = 0; it < np * reps; it++) {
+        const p = points[it % np];
+        const a = toRadians(Math.floor(it / np) * (360 / reps));
+        const dx = p.x - cx;
+        const dy = p.y - cy;
+        result.push({ x: dx * Math.cos(a) - dy * Math.sin(a) + cx, y: dx * Math.sin(a) + dy * Math.cos(a) + cy, r: p.r });
+    }
+    return result;
+};
+/** MaterialShapes.customPolygon: points repeated around (0.5, 0.5) */
+const custom = (pnr, reps, mirroring = false) => {
+    const points = repeat(pnr, reps, 0.5, 0.5, mirroring);
+    const vertices = [];
+    for (const p of points)
+        vertices.push(p.x, p.y);
+    return roundedPolygon(vertices, undefined, points.map((p) => p.r), 0.5, 0.5);
+};
+/** A shape built once, on first use, and normalised into the unit square */
+const shape = (build) => {
+    let built;
+    return () => (built ?? (built = normalizePolygon(build())));
+};
+/** Circle */
+export const shapeCircle = /*#__PURE__*/ shape(() => circle(10));
+/** A rounded square */
+export const shapeSquare = /*#__PURE__*/ shape(() => rectangle(1, 1, cornerRound30));
+/** A slanted square */
+export const shapeSlanted = /*#__PURE__*/ shape(() => custom([point(0.926, 0.97, 0.189, 0.811), point(-0.021, 0.967, 0.187, 0.057)], 2));
+/** An arch */
+export const shapeArch = /*#__PURE__*/ shape(() => rotatePolygon(regularPolygon(4, 1, 0, 0, undefined, [cornerRound100, cornerRound100, cornerRound20, cornerRound20]), -135));
+/** A fan */
+export const shapeFan = /*#__PURE__*/ shape(() => custom([point(1.004, 1.0, 0.148, 0.417), point(0.0, 1.0, 0.151), point(0.0, -0.003, 0.148), point(0.978, 0.02, 0.803)], 1));
+/** An arrow */
+export const shapeArrow = /*#__PURE__*/ shape(() => custom([point(0.5, 0.892, 0.313), point(-0.216, 1.05, 0.207), point(0.499, -0.16, 0.215, 1.0), point(1.225, 1.06, 0.211)], 1));
+/** A semicircle */
+export const shapeSemiCircle = /*#__PURE__*/ shape(() => rectangle(1.6, 1, undefined, [cornerRound20, cornerRound20, cornerRound100, cornerRound100]));
+/** An oval */
+export const shapeOval = /*#__PURE__*/ shape(() => rotatePolygon(scalePolygon(circle(), 1, 0.64), -45));
+/** A pill */
+export const shapePill = /*#__PURE__*/ shape(() => custom([point(0.961, 0.039, 0.426), point(1.001, 0.428), point(1.0, 0.609, 1.0)], 2, true));
+/** A triangle */
+export const shapeTriangle = /*#__PURE__*/ shape(() => rotatePolygon(regularPolygon(3, 1, 0, 0, cornerRound20), -90));
+/** A diamond */
+export const shapeDiamond = /*#__PURE__*/ shape(() => custom([point(0.5, 1.096, 0.151, 0.524), point(0.04, 0.5, 0.159)], 2));
+/** A clam shell */
+export const shapeClamShell = /*#__PURE__*/ shape(() => custom([point(0.171, 0.841, 0.159), point(-0.02, 0.5, 0.14), point(0.17, 0.159, 0.159)], 2));
+/** A pentagon */
+export const shapePentagon = /*#__PURE__*/ shape(() => custom([point(0.5, -0.009, 0.172), point(1.03, 0.365, 0.164), point(0.828, 0.97, 0.169)], 1, true));
+/** A gem */
+export const shapeGem = /*#__PURE__*/ shape(() => custom([point(0.499, 1.023, 0.241, 0.778), point(-0.005, 0.792, 0.208), point(0.073, 0.258, 0.228), point(0.433, -0.0, 0.491)], 1, true));
+/** A sunny shape: an 8-point star */
+export const shapeSunny = /*#__PURE__*/ shape(() => star(8, 1, 0.8, cornerRound15));
+/** A very sunny shape */
+export const shapeVerySunny = /*#__PURE__*/ shape(() => custom([point(0.5, 1.08, 0.085), point(0.358, 0.843, 0.085)], 8));
+/** A 4-sided cookie */
+export const shapeCookie4Sided = /*#__PURE__*/ shape(() => custom([point(1.237, 1.236, 0.258), point(0.5, 0.918, 0.233)], 4));
+/** A 6-sided cookie */
+export const shapeCookie6Sided = /*#__PURE__*/ shape(() => custom([point(0.723, 0.884, 0.394), point(0.5, 1.099, 0.398)], 6));
+/** A 7-sided cookie */
+export const shapeCookie7Sided = /*#__PURE__*/ shape(() => rotatePolygon(star(7, 1, 0.75, cornerRound50), -90));
+/** A 9-sided cookie */
+export const shapeCookie9Sided = /*#__PURE__*/ shape(() => rotatePolygon(star(9, 1, 0.8, cornerRound50), -90));
+/** A 12-sided cookie */
+export const shapeCookie12Sided = /*#__PURE__*/ shape(() => rotatePolygon(star(12, 1, 0.8, cornerRound50), -90));
+/** A ghost-ish shape */
+export const shapeGhostish = /*#__PURE__*/ shape(() => custom([point(0.5, 0, 1.0), point(1, 0, 1.0), point(1, 1.14, 0.254, 0.106), point(0.575, 0.906, 0.253)], 1, true));
+/** A 4-leaf clover */
+export const shapeClover4Leaf = /*#__PURE__*/ shape(() => custom([point(0.5, 0.074), point(0.725, -0.099, 0.476)], 4, true));
+/** An 8-leaf clover */
+export const shapeClover8Leaf = /*#__PURE__*/ shape(() => custom([point(0.5, 0.036), point(0.758, -0.101, 0.209)], 8));
+/** A burst */
+export const shapeBurst = /*#__PURE__*/ shape(() => custom([point(0.5, -0.006, 0.006), point(0.592, 0.158, 0.006)], 12));
+/** A soft burst */
+export const shapeSoftBurst = /*#__PURE__*/ shape(() => custom([point(0.193, 0.277, 0.053), point(0.176, 0.055, 0.053)], 10));
+/** A boom */
+export const shapeBoom = /*#__PURE__*/ shape(() => custom([point(0.457, 0.296, 0.007), point(0.5, -0.051, 0.007)], 15));
+/** A soft boom */
+export const shapeSoftBoom = /*#__PURE__*/ shape(() => custom([point(0.733, 0.454), point(0.839, 0.437, 0.532), point(0.949, 0.449, 0.439, 1.0), point(0.998, 0.478, 0.174)], 16, true));
+/** A flower */
+export const shapeFlower = /*#__PURE__*/ shape(() => custom([point(0.37, 0.187), point(0.416, 0.049, 0.381), point(0.479, 0.001, 0.095)], 8, true));
+/** A puffy shape */
+export const shapePuffy = /*#__PURE__*/ shape(() => scalePolygon(custom([
+    point(0.5, 0.053), point(0.545, -0.04, 0.405), point(0.67, -0.035, 0.426), point(0.717, 0.066, 0.574),
+    point(0.722, 0.128), point(0.777, 0.002, 0.36), point(0.914, 0.149, 0.66), point(0.926, 0.289, 0.66),
+    point(0.881, 0.346), point(0.94, 0.344, 0.126), point(1.003, 0.437, 0.255),
+], 2, true), 1, 0.742));
+/** A puffy diamond */
+export const shapePuffyDiamond = /*#__PURE__*/ shape(() => custom([point(0.87, 0.13, 0.146), point(0.818, 0.357), point(1.0, 0.332, 0.853)], 4, true));
+/** A pixelated circle */
+export const shapePixelCircle = /*#__PURE__*/ shape(() => custom([
+    point(0.5, 0.0), point(0.704, 0.0), point(0.704, 0.065), point(0.843, 0.065),
+    point(0.843, 0.148), point(0.926, 0.148), point(0.926, 0.296), point(1.0, 0.296),
+], 2, true));
+/** A pixelated triangle */
+export const shapePixelTriangle = /*#__PURE__*/ shape(() => custom([
+    point(0.11, 0.5), point(0.113, 0.0), point(0.287, 0.0), point(0.287, 0.087), point(0.421, 0.087),
+    point(0.421, 0.17), point(0.56, 0.17), point(0.56, 0.265), point(0.674, 0.265), point(0.675, 0.344),
+    point(0.789, 0.344), point(0.789, 0.439), point(0.888, 0.439),
+], 1, true));
+/** A bun */
+export const shapeBun = /*#__PURE__*/ shape(() => custom([point(0.796, 0.5), point(0.853, 0.518, 1), point(0.992, 0.631, 1), point(0.968, 1.0, 1)], 2, true));
+/** A heart */
+export const shapeHeart = /*#__PURE__*/ shape(() => custom([point(0.5, 0.268, 0.016), point(0.792, -0.066, 0.958), point(1.064, 0.276, 1.0), point(0.501, 0.946, 0.129)], 1, true));
+const byName = {
+    circle: shapeCircle,
+    square: shapeSquare,
+    slanted: shapeSlanted,
+    arch: shapeArch,
+    fan: shapeFan,
+    arrow: shapeArrow,
+    semiCircle: shapeSemiCircle,
+    oval: shapeOval,
+    pill: shapePill,
+    triangle: shapeTriangle,
+    diamond: shapeDiamond,
+    clamShell: shapeClamShell,
+    pentagon: shapePentagon,
+    gem: shapeGem,
+    sunny: shapeSunny,
+    verySunny: shapeVerySunny,
+    cookie4Sided: shapeCookie4Sided,
+    cookie6Sided: shapeCookie6Sided,
+    cookie7Sided: shapeCookie7Sided,
+    cookie9Sided: shapeCookie9Sided,
+    cookie12Sided: shapeCookie12Sided,
+    ghostish: shapeGhostish,
+    clover4Leaf: shapeClover4Leaf,
+    clover8Leaf: shapeClover8Leaf,
+    burst: shapeBurst,
+    softBurst: shapeSoftBurst,
+    boom: shapeBoom,
+    softBoom: shapeSoftBoom,
+    flower: shapeFlower,
+    puffy: shapePuffy,
+    puffyDiamond: shapePuffyDiamond,
+    pixelCircle: shapePixelCircle,
+    pixelTriangle: shapePixelTriangle,
+    bun: shapeBun,
+    heart: shapeHeart,
+};
+/** A Material shape by name, normalised into the unit square. Carries every shape; import `shapeX` to carry one. */
+export const materialShape = (name) => byName[name]();
+const num = (value) => {
+    const rounded = Math.round(value * 1000) / 1000;
+    return String(Object.is(rounded, -0) ? 0 : rounded);
+};
+/**
+ * A polygon's outline as an SVG path ("M … C … Z"), scaled by `size`: a
+ * normalised shape fills a `size` × `size` box. Coordinates keep three decimals.
+ */
+export const polygonPath = (polygon, size = 1) => {
+    const cubics = polygon.cubics;
+    if (!cubics.length)
+        return '';
+    const s = (v) => num(v * size);
+    let d = `M${s(cubics[0][0])} ${s(cubics[0][1])}`;
+    for (const c of cubics)
+        d += `C${s(c[2])} ${s(c[3])} ${s(c[4])} ${s(c[5])} ${s(c[6])} ${s(c[7])}`;
+    return `${d}Z`;
+};
+/** A Material shape as an SVG path in a `size` × `size` box. Carries every shape, as materialShape does. */
+export const materialShapePath = (name, size = 1) => polygonPath(materialShape(name), size);
+const TWO_PI = Math.PI * 2;
+/**
+ * radialProfile without its star-shape check, for callers whose shapes are
+ * known to be star-shaped: the loading indicator's, which the tests check.
+ * The centroid, not the bounds centre, is the pivot: a pentagon's mass sits
+ * below the middle of its box, and turning it about the box would make it
+ * orbit.
+ * @internal
+ */
+export const sampleProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
+    // The outline as a dense polygon
+    const points = [];
+    for (const cubic of polygon.cubics) {
+        for (let s = 0; s < stepsPerCubic; s++)
+            points.push(pointOnCurve(cubic, s / stepsPerCubic));
+    }
+    // Its area centroid (shoelace formula)
+    let area = 0;
+    let centerX = 0;
+    let centerY = 0;
+    for (let i = 0; i < points.length; i++) {
+        const [x0, y0] = points[i];
+        const [x1, y1] = points[(i + 1) % points.length];
+        const cross = x0 * y1 - x1 * y0;
+        area += cross;
+        centerX += (x0 + x1) * cross;
+        centerY += (y0 + y1) * cross;
+    }
+    if (Math.abs(area) > 1e-12) {
+        centerX /= 3 * area;
+        centerY /= 3 * area;
+    }
+    else {
+        const bounds = polygonBounds(polygon);
+        centerX = (bounds[0] + bounds[2]) / 2;
+        centerY = (bounds[1] + bounds[3]) / 2;
+    }
+    // The outline as (angle, radius) pairs, sorted by angle
+    const outline = [];
+    for (const [x, y] of points) {
+        const dx = x - centerX;
+        const dy = y - centerY;
+        let angle = Math.atan2(dy, dx);
+        if (angle < 0)
+            angle += TWO_PI;
+        outline.push([angle, Math.hypot(dx, dy)]);
+    }
+    outline.sort((a, b) => a[0] - b[0]);
+    const last = outline[outline.length - 1];
+    const first = outline[0];
+    outline.unshift([last[0] - TWO_PI, last[1]]);
+    outline.push([first[0] + TWO_PI, first[1]]);
+    const radii = new Float32Array(samples);
+    let j = 0;
+    let maxRadius = 0;
+    for (let i = 0; i < samples; i++) {
+        const angle = (i / samples) * TWO_PI;
+        while (outline[j + 1][0] < angle)
+            j++;
+        const [a0, r0] = outline[j];
+        const [a1, r1] = outline[j + 1];
+        const t = a1 === a0 ? 0 : (angle - a0) / (a1 - a0);
+        const r = r0 + (r1 - r0) * t;
+        radii[i] = r;
+        if (r > maxRadius)
+            maxRadius = r;
+    }
+    return { radii, centerX, centerY, maxRadius };
+};
+/**
+ * Samples the outline at `samples` angles around the shape's area centroid.
+ * Throws for a shape that is not star-shaped around it. Of the Material
+ * shapes, 33 are; Puffy and PixelTriangle are not (their outlines double back
+ * as seen from the centroid, Puffy by about 0.1°): a ray from the centroid
+ * would cross the outline more than once, and the profile would be wrong.
+ */
+export const radialProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
+    const profile = sampleProfile(polygon, samples, stepsPerCubic);
+    const { centerX, centerY } = profile;
+    const points = [];
+    for (const cubic of polygon.cubics) {
+        for (let s = 0; s < stepsPerCubic; s++)
+            points.push(pointOnCurve(cubic, s / stepsPerCubic));
+    }
+    // Star-shaped around the centroid: walking the outline, the angle seen from
+    // the centroid only ever turns one way. A shape that doubles back (a heart's
+    // notch, an arch's inner curve) would be sampled wrong: refuse it.
+    let turn = 0;
+    for (let i = 0; i < points.length; i++) {
+        const [x0, y0] = points[i];
+        const [x1, y1] = points[(i + 1) % points.length];
+        let step = Math.atan2(y1 - centerY, x1 - centerX) - Math.atan2(y0 - centerY, x0 - centerX);
+        if (step > Math.PI)
+            step -= TWO_PI;
+        else if (step < -Math.PI)
+            step += TWO_PI;
+        if (turn === 0)
+            turn = Math.sign(step);
+        else if (step * turn < -1e-9) {
+            throw new Error("radialProfile: the shape is not star-shaped around its centroid, so it has no radial profile");
+        }
+    }
+    return profile;
+};
+export { polygonMaxRadius };

package/dist/core/shapes/polygon.d.ts

@@ -0,0 +1,37 @@
+import { Cubic, PointTransformer } from "./cubic.js";
+/** How a vertex is rounded: the radius, and how much the curve is smoothed into the sides (0–1) */
+export interface CornerRounding {
+    radius: number;
+    smoothing?: number;
+}
+export declare const UNROUNDED: CornerRounding;
+/** A closed shape made of contiguous cubics */
+export interface RoundedPolygon {
+    cubics: Cubic[];
+    centerX: number;
+    centerY: number;
+}
+/**
+ * Builds a rounded polygon from a flat list of vertex coordinates
+ * [x0, y0, x1, y1, ...], a rounding for every vertex or one per vertex, and
+ * an optional centre (the vertices' centroid by default).
+ */
+export declare const roundedPolygon: (vertices: number[], rounding?: CornerRounding, perVertexRounding?: CornerRounding[], centerX?: number, centerY?: number) => RoundedPolygon;
+/** A regular polygon, first vertex at angle 0 */
+export declare const regularPolygon: (numVertices: number, radius?: number, centerX?: number, centerY?: number, rounding?: CornerRounding, perVertexRounding?: CornerRounding[]) => RoundedPolygon;
+/** A circle approximated by a fully rounded polygon */
+export declare const circle: (numVertices?: number, radius?: number, centerX?: number, centerY?: number) => RoundedPolygon;
+/** A star with `numVerticesPerRadius` outer and inner vertices, outer first at angle 0 */
+export declare const star: (numVerticesPerRadius: number, radius?: number, innerRadius?: number, rounding?: CornerRounding, innerRounding?: CornerRounding, perVertexRounding?: CornerRounding[], centerX?: number, centerY?: number) => RoundedPolygon;
+/** A rectangle centred on (centerX, centerY), its first vertex at the bottom right (graphics-shapes rectangle) */
+export declare const rectangle: (width?: number, height?: number, rounding?: CornerRounding, perVertexRounding?: CornerRounding[], centerX?: number, centerY?: number) => RoundedPolygon;
+export declare const transformPolygon: (polygon: RoundedPolygon, f: PointTransformer) => RoundedPolygon;
+/** Rotation about the origin, in degrees, positive clockwise on a y-down canvas */
+export declare const rotatePolygon: (polygon: RoundedPolygon, degrees: number) => RoundedPolygon;
+export declare const scalePolygon: (polygon: RoundedPolygon, sx: number, sy?: number) => RoundedPolygon;
+/** Bounding box [left, top, right, bottom] from the hull of anchors and controls */
+export declare const polygonBounds: (polygon: RoundedPolygon) => [number, number, number, number];
+/** The farthest any anchor or curve midpoint gets from the centre */
+export declare const polygonMaxRadius: (polygon: RoundedPolygon) => number;
+/** Fits the shape into the unit square, centred, keeping its aspect ratio */
+export declare const normalizePolygon: (polygon: RoundedPolygon) => RoundedPolygon;