mtrl 0.10.1 → 0.10.3

package/dist/components/chips/api.js

@@ -133,6 +133,10 @@ export const withAPI = (options) => (component) => {
             }
             return this;
         },
+        keyboard: {
+            enable: () => options.keyboard?.enableKeyboardNavigation?.(),
+            disable: () => options.keyboard?.disableKeyboardNavigation?.(),
+        },
         on(event, handler) {
             if (options.events && typeof options.events.on === "function") {
                 options.events.on(event, handler);

package/dist/components/chips/features/controller.js

@@ -9,6 +9,7 @@ export const withController = (config) => (component) => {
         remove: [],
     };
     let focusedChipIndex = -1;
+    let keyboardEnabled = true;
     const dispatchEvent = (eventName, ...args) => {
         if (eventListeners[eventName]) {
             eventListeners[eventName].forEach((handler) => handler(...args));
@@ -58,11 +59,13 @@ export const withController = (config) => (component) => {
             current.tabIndex = 0;
     };
     const handleKeyboardNavigation = (event) => {
+        if (!keyboardEnabled)
+            return;
         const list = targets();
         if (list.length === 0)
             return;
         const isVertical = !!(component.layout && component.layout.isVertical());
-        const rtl = component.element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+        const rtl = component.element.matches(":dir(rtl)");
         const back = isVertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
         const forward = isVertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
         const from = list.indexOf(event.target);
@@ -236,11 +239,13 @@ export const withController = (config) => (component) => {
         }
     };
     const enableKeyboardNavigation = () => {
+        keyboardEnabled = true;
         component.chipInstances.forEach((chip) => {
             chip.element.addEventListener("keydown", handleKeyboardNavigation);
         });
     };
     const disableKeyboardNavigation = () => {
+        keyboardEnabled = false;
         component.chipInstances.forEach((chip) => {
             chip.element.removeEventListener("keydown", handleKeyboardNavigation);
         });

package/dist/components/chips/types.d.ts

@@ -345,6 +345,16 @@ export interface ChipsComponent {
      * @returns The chips instance for chaining
      */
     enableKeyboardNavigation: () => ChipsComponent;
+    /**
+     * Turns keyboard navigation between the chips on and off: while disabled,
+     * the arrows, Home and End no longer move focus in the set (FLO-352)
+     */
+    keyboard: {
+        /** Moves focus with the arrows, Home and End again */
+        enable: () => void;
+        /** Stops moving focus with the arrows, Home and End */
+        disable: () => void;
+    };
     /**
      * Destroys the chips container and all contained chips
      */

package/dist/components/loading-indicator/constants.js

@@ -16,11 +16,11 @@ export const LOADING_INDICATOR_SPRING = {
 };
 export const LOADING_INDICATOR_SHAPES = [
     'softBurst',
-    'cookie9',
+    'cookie9Sided',
     'pentagon',
     'pill',
     'sunny',
-    'cookie4',
+    'cookie4Sided',
     'oval'
 ];
 export const LOADING_INDICATOR_DETERMINATE_SHAPES = ['circle', 'softBurst'];

package/dist/components/loading-indicator/features/renderer.js

@@ -1,12 +1,23 @@
 import { createCanvasContext, updateCanvasDimensions } from "../../../core/canvas/utils.js";
 import { onThemeChange } from "../../../core/utils/theme.js";
-import { materialShape, radialProfile } from "../../../core/shapes/index.js";
+import { shapeCircle, shapeCookie4Sided, shapeCookie9Sided, shapeOval, shapePentagon, shapePill, shapeSoftBurst, shapeSunny, } from "../../../core/shapes/index.js";
+import { sampleProfile } from "../../../core/shapes/material.js";
+const indicatorShapes = {
+    circle: shapeCircle,
+    oval: shapeOval,
+    pentagon: shapePentagon,
+    pill: shapePill,
+    softBurst: shapeSoftBurst,
+    sunny: shapeSunny,
+    cookie4Sided: shapeCookie4Sided,
+    cookie9Sided: shapeCookie9Sided,
+};
 import { LOADING_INDICATOR_CLASSES, LOADING_INDICATOR_DEFAULTS } from "../constants.js";
 const profileCache = new Map();
 const profileFor = (name) => {
     let profile = profileCache.get(name);
     if (!profile) {
-        profile = radialProfile(materialShape(name), LOADING_INDICATOR_DEFAULTS.SAMPLES);
+        profile = sampleProfile((indicatorShapes[name] ?? shapeCircle)(), LOADING_INDICATOR_DEFAULTS.SAMPLES);
         profileCache.set(name, profile);
     }
     return profile;

package/dist/components/tabs/utils.js

@@ -62,11 +62,12 @@ export function updateTabPanels(component) {
         }
     }
 }
+const isEnabledTab = (tab) => !tab.element.disabled && tab.element.getAttribute("aria-disabled") !== "true";
 export function syncTabStops(component) {
     if (typeof component.getTabs !== "function")
         return;
     const tabs = component.getTabs();
-    const enabled = tabs.filter((tab) => !tab.element.disabled);
+    const enabled = tabs.filter(isEnabledTab);
     const active = getActiveTab(component);
     const stop = active && enabled.includes(active) ? active : enabled[0];
     tabs.forEach((tab) => tab.element.setAttribute("tabindex", tab === stop ? "0" : "-1"));
@@ -89,7 +90,7 @@ export function setupKeyboardNavigation(component, options = {}) {
             return;
         const tabs = component
             .getTabs()
-            .filter((tab) => !tab.element.disabled);
+            .filter(isEnabledTab);
         const currentIndex = tabs.findIndex((tab) => tab.element === tabElement);
         if (currentIndex === -1)
             return;

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

@@ -18,6 +18,8 @@ export declare const straightLine: (x0: number, y0: number, x1: number, y1: numb
  */
 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;

package/dist/core/shapes/cubic.js

@@ -41,6 +41,20 @@ export const pointOnCurve = (c, 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) => {

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

@@ -1,6 +1,6 @@
 export type { Cubic, Point, PointTransformer } from "./cubic.js";
-export { straightLine, circularArc, pointOnCurve, cubicBounds } from "./cubic.js";
+export { straightLine, circularArc, pointOnCurve, cubicBounds, splitCubic } from "./cubic.js";
 export type { CornerRounding, RoundedPolygon } from "./polygon.js";
-export { UNROUNDED, roundedPolygon, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } 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, 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

@@ -1,3 +1,3 @@
-export { straightLine, circularArc, pointOnCurve, cubicBounds } from "./cubic.js";
-export { UNROUNDED, roundedPolygon, regularPolygon, circle, star, transformPolygon, rotatePolygon, scalePolygon, polygonBounds, polygonMaxRadius, normalizePolygon, } from "./polygon.js";
-export { materialShape, radialProfile } from "./material.js";
+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

@@ -1,8 +1,129 @@
 import { RoundedPolygon, polygonMaxRadius } from "./polygon.js";
-/** Names of the Material shapes available here */
-export type MaterialShapeName = 'circle' | 'oval' | 'pill' | 'pentagon' | 'sunny' | 'cookie4' | 'cookie9' | 'softBurst';
-/** A Material shape, normalised into the unit square */
+/** 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;
+    /** @deprecated Use 'cookie4Sided' */
+    cookie4: () => RoundedPolygon;
+    /** @deprecated Use 'cookie9Sided' */
+    cookie9: () => RoundedPolygon;
+};
+/**
+ * Names of the Material shapes: Compose's, camelCased. 'cookie4' and
+ * 'cookie9' are deprecated aliases of '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 */
@@ -14,11 +135,20 @@ export interface RadialProfile {
     maxRadius: number;
 }
 /**
- * Samples the outline at `samples` angles around the shape's area centroid.
+ * 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. The shape must be star-shaped around its centroid, which every
- * Material shape is: each ray from the centre crosses the outline once.
+ * 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

@@ -1,9 +1,33 @@
+// 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, rotatePolygon, roundedPolygon, scalePolygon, star, } from "./polygon.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 point = (x, y, r = { radius: 0 }) => ({ x, y, r });
+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) {
@@ -16,7 +40,7 @@ const repeat = (points, reps, cx, cy, mirroring) => {
                 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(point(Math.cos(a) * distances[i] + cx, Math.sin(a) * distances[i] + cy, points[i].r));
+                    result.push({ x: Math.cos(a) * distances[i] + cx, y: Math.sin(a) * distances[i] + cy, r: points[i].r });
                 }
             }
         }
@@ -28,43 +52,184 @@ const repeat = (points, reps, cx, cy, mirroring) => {
         const a = toRadians(Math.floor(it / np) * (360 / reps));
         const dx = p.x - cx;
         const dy = p.y - cy;
-        result.push(point(dx * Math.cos(a) - dy * Math.sin(a) + cx, dx * Math.sin(a) + dy * Math.cos(a) + cy, p.r));
+        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;
 };
-const customPolygon = (pnr, reps, mirroring = false, cx = 0.5, cy = 0.5) => {
-    const points = repeat(pnr, reps, cx, cy, mirroring);
+/** 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), cx, cy);
+    return roundedPolygon(vertices, undefined, points.map((p) => p.r), 0.5, 0.5);
 };
-const builders = {
-    circle: () => circle(10),
-    oval: () => rotatePolygon(scalePolygon(circle(), 1, 0.64), -45),
-    pill: () => customPolygon([point(0.961, 0.039, { radius: 0.426 }), point(1.001, 0.428), point(1.0, 0.609, { radius: 1 })], 2, true),
-    pentagon: () => customPolygon([point(0.5, -0.009, { radius: 0.172 }), point(1.03, 0.365, { radius: 0.164 }), point(0.828, 0.97, { radius: 0.169 })], 1, true),
-    sunny: () => star(8, 1, 0.8, cornerRound15),
-    cookie4: () => customPolygon([point(1.237, 1.236, { radius: 0.258 }), point(0.5, 0.918, { radius: 0.233 })], 4),
-    cookie9: () => rotatePolygon(star(9, 1, 0.8, cornerRound50), -90),
-    softBurst: () => customPolygon([point(0.193, 0.277, { radius: 0.053 }), point(0.176, 0.055, { radius: 0.053 })], 10),
+/** A shape built once, on first use, and normalised into the unit square */
+const shape = (build) => {
+    let built;
+    return () => (built ?? (built = normalizePolygon(build())));
 };
-const cache = new Map();
-export const materialShape = (name) => {
-    let shape = cache.get(name);
-    if (!shape) {
-        shape = normalizePolygon(builders[name]());
-        cache.set(name, shape);
-    }
-    return shape;
+/** 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,
+    /** @deprecated Use 'cookie4Sided' */
+    cookie4: shapeCookie4Sided,
+    /** @deprecated Use 'cookie9Sided' */
+    cookie9: shapeCookie9Sided,
+};
+/** 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;
-export const radialProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
+/**
+ * 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;
@@ -85,6 +250,7 @@ export const radialProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
         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;
@@ -116,4 +282,39 @@ export const radialProfile = (polygon, samples = 360, stepsPerCubic = 24) => {
     }
     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

@@ -23,6 +23,8 @@ export declare const regularPolygon: (numVertices: number, radius?: number, cent
 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;