@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.2

package/target/tsc/shape/cubic.d.ts

@@ -0,0 +1,215 @@
+import type { PointTransformer } from "./point";
+import { Point } from "./point";
+/**
+ * Coordinates of a cubic Bezier curve.
+ *
+ * This holds the start anchor, the first control point, the second control point and the end
+ * anchor of the curve, in order, as `[x, y]` pairs.
+ */
+export type CubicCoordinates = readonly [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+/**
+ * Distance below which coordinates coincide.
+ *
+ * Two curves are contiguous if, and only if, their anchors are within this distance along both
+ * axes. Likewise, a curve has zero length if, and only if, all of its points are within this
+ * distance of its start anchor along both axes.
+ */
+export declare const CUBIC_CONTINUITY_EPSILON: number;
+/**
+ * Cubic Bezier curve.
+ *
+ * Curves are immutable, except for the curves of {@link Cubic.interpolate} and of morphs. These
+ * are new for each call, and belong to the caller.
+ */
+export declare class Cubic {
+    /**
+     * Coordinates of the curve.
+     */
+    readonly points: CubicCoordinates;
+    /**
+     * Construct a new curve.
+     *
+     * @param points - coordinates of start anchor, first control point, second control point and
+     * end anchor, as `[x, y]` pairs
+     * @throws {@link Error} `points` does not have eight entries, or one of them is not finite
+     */
+    constructor(points: readonly number[]);
+    /**
+     * Horizontal coordinate of start anchor.
+     */
+    get anchor0X(): number;
+    /**
+     * Vertical coordinate of start anchor.
+     */
+    get anchor0Y(): number;
+    /**
+     * Horizontal coordinate of first control point.
+     */
+    get control0X(): number;
+    /**
+     * Vertical coordinate of first control point.
+     */
+    get control0Y(): number;
+    /**
+     * Horizontal coordinate of second control point.
+     */
+    get control1X(): number;
+    /**
+     * Vertical coordinate of second control point.
+     */
+    get control1Y(): number;
+    /**
+     * Horizontal coordinate of end anchor.
+     */
+    get anchor1X(): number;
+    /**
+     * Vertical coordinate of end anchor.
+     */
+    get anchor1Y(): number;
+    /**
+     * Create a curve from its points.
+     *
+     * @param anchor0 - start anchor
+     * @param control0 - first control point
+     * @param control1 - second control point
+     * @param anchor1 - end anchor
+     * @returns new curve
+     * @throws {@link Error} a coordinate is not finite
+     */
+    static fromPoints(anchor0: Point, control0: Point, control1: Point, anchor1: Point): Cubic;
+    /**
+     * Create a curve of a straight line.
+     *
+     * The control points of the line lie at one third and two thirds of its length,
+     * respectively.
+     *
+     * @param x0 - horizontal coordinate of start
+     * @param y0 - vertical coordinate of start
+     * @param x1 - horizontal coordinate of end
+     * @param y1 - vertical coordinate of end
+     * @returns new curve
+     * @throws {@link Error} a coordinate is not finite
+     */
+    static straightLine(x0: number, y0: number, x1: number, y1: number): Cubic;
+    /**
+     * Approximate a circular arc between two points.
+     *
+     * This approximates the shorter arc from the start to the end, around the center. The radius
+     * of the arc is the distance of the start from the center. If the directions of the start and
+     * the end from the center nearly coincide, with an angle whose cosine is above `0.999`, then
+     * this returns a {@link Cubic.straightLine | straight line}. Opposite directions turn
+     * clockwise.
+     *
+     * @param centerX - horizontal coordinate of center
+     * @param centerY - vertical coordinate of center
+     * @param x0 - horizontal coordinate of start
+     * @param y0 - vertical coordinate of start
+     * @param x1 - horizontal coordinate of end
+     * @param y1 - vertical coordinate of end
+     * @returns new curve
+     * @throws {@link Error} start or end is the center
+     */
+    static circularArc(centerX: number, centerY: number, x0: number, y0: number, x1: number, y1: number): Cubic;
+    /**
+     * Create a curve of zero length.
+     *
+     * @param x - horizontal coordinate of all points
+     * @param y - vertical coordinate of all points
+     * @returns new curve
+     * @throws {@link Error} `x` or `y` is not finite
+     */
+    static empty(x: number, y: number): Cubic;
+    /**
+     * Interpolate linearly between two curves.
+     *
+     * This returns a new curve whose coordinates are neither validated nor frozen, and may be
+     * modified.
+     *
+     * @param start - curve at progress `0`
+     * @param end - curve at progress `1`
+     * @param progress - finite progress to interpolate at, extrapolating outside `[0, 1]`
+     * @returns interpolated curve
+     * @throws {@link Error} `progress` is not finite
+     */
+    static interpolate(start: Cubic, end: Cubic, progress: number): Cubic;
+    /**
+     * Compute the point at a parameter.
+     *
+     * @param progress - parameter, `0` at start anchor and `1` at end anchor
+     * @returns point of curve at `progress`
+     * @throws {@link Error} point is not finite
+     */
+    pointAt(progress: number): Point;
+    /**
+     * Test whether curve has zero length.
+     *
+     * @returns `true` if, and only if, all points are within {@link CUBIC_CONTINUITY_EPSILON} of
+     * the start anchor along both axes
+     */
+    zeroLength(): boolean;
+    /**
+     * Test whether curve turns clockwise into another.
+     *
+     * @param next - curve following this curve
+     * @returns `true` if, and only if, the start anchor of this curve, its end anchor, and the end
+     * anchor of `next` turn clockwise
+     * @throws {@link Error} an anchor is not finite
+     */
+    convexTo(next: Cubic): boolean;
+    /**
+     * Calculate the bounds of the curve.
+     *
+     * Approximate bounds contain the control points of the curve, and may thus exceed the curve.
+     *
+     * @param bounds - array to write `[left, top, right, bottom]` into, if any
+     * @param approximate - `true` if, and only if, bounds should be approximate
+     * @returns `bounds`, or a new array if `bounds` is `undefined`
+     * @throws {@link Error} `bounds` has fewer than four entries
+     */
+    calculateBounds(bounds?: number[], approximate?: boolean): number[];
+    /**
+     * Split the curve at a parameter.
+     *
+     * @param progress - parameter to split at
+     * @returns tuple of curves before and after the split point, respectively
+     * @throws {@link Error} split point is not finite
+     */
+    split(progress: number): [Cubic, Cubic];
+    /**
+     * Reverse the direction of the curve.
+     *
+     * @returns curve from end anchor to start anchor of this curve
+     * @throws {@link Error} a coordinate is not finite
+     */
+    reverse(): Cubic;
+    /**
+     * Transform the points of the curve.
+     *
+     * @param transformer - function to transform each point with, in order
+     * @returns transformed curve
+     * @throws {@link Error} a transformed coordinate is not finite
+     */
+    transformed(transformer: PointTransformer): Cubic;
+    /**
+     * Test whether a value is an equal curve.
+     *
+     * @param other - value to compare with
+     * @returns `true` if, and only if, `other` is a curve with strictly equal coordinates
+     */
+    equals(other: unknown): boolean;
+    /**
+     * Format the curve as a string.
+     *
+     * @returns description of the four points, such as `Cubic(0,0 1,2 3,2 4,0)`
+     */
+    toString(): string;
+}

package/target/tsc/shape/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Shape and shape morphing definitions.
+ *
+ * This package provides {@link RoundedPolygon | rounded polygons}, which are closed outlines of
+ * cubic Bezier curves, built from vertices with {@link CornerRounding | rounded corners} or by the
+ * {@link Shapes} factories. {@link MaterialShapes} provides the Material 3 Expressive shapes, and
+ * a {@link Morph} morphs a polygon into another. Outlines are serialized as SVG path data or CSS
+ * `path()` functions. All definitions are available on both client-side and server-side.
+ *
+ * {@link MaterialShapes | Material shapes} are normalized into the unit square. Their
+ * {@link toSvgPath | SVG paths} may be drawn in an `<svg viewBox="0 0 1 1">`, or used by an SVG
+ * `<clipPath>` whose `clipPathUnits` are `objectBoundingBox`. Likewise, {@link toCssPath} fits
+ * them to the box of an element:
+ *
+ * ```tsx
+ * <svg viewBox="0 0 1 1"><path d={toSvgPath(MaterialShapes.Cookie9Sided)} /></svg>
+ * <div style={{ "clip-path": toCssPath(MaterialShapes.Heart, 48) }} />
+ * ```
+ *
+ * @packageDocumentation
+ */
+export type { CubicCoordinates } from "./cubic";
+export type { MaterialShapeName } from "./material-shapes";
+export type { MorphCubicPair } from "./morph";
+export type { PathOptions } from "./path";
+export type { PointTransformer } from "./point";
+export type { PolygonFeatureKind, RoundedPolygonOptions } from "./rounded-polygon";
+export { CornerRounding } from "./corner-rounding";
+export { CUBIC_CONTINUITY_EPSILON, Cubic } from "./cubic";
+export { MATERIAL_SHAPE_NAMES, MaterialShapes } from "./material-shapes";
+export { Morph } from "./morph";
+export { Path, cubicsToPath, formatPathCoordinate, morphToCssPath, morphToPath, roundedPolygonToPath, toCssPath, toSvgPath } from "./path";
+export { Point, directionVector, distanceBetween, isConvex } from "./point";
+export { PolygonFeature, RoundedPolygon, isRoundedPolygon } from "./rounded-polygon";
+export { Shapes } from "./shapes";

package/target/tsc/shape/material-shapes.d.ts

@@ -0,0 +1,176 @@
+import { RoundedPolygon } from "./rounded-polygon";
+/**
+ * Union of {@link MaterialShapes | Material shape} names.
+ */
+export type MaterialShapeName = "Circle" | "Square" | "Slanted" | "Arch" | "SemiCircle" | "Oval" | "Pill" | "Triangle" | "Arrow" | "Fan" | "Diamond" | "ClamShell" | "Pentagon" | "Gem" | "VerySunny" | "Sunny" | "Cookie4Sided" | "Cookie6Sided" | "Cookie7Sided" | "Cookie9Sided" | "Cookie12Sided" | "Clover4Leaf" | "Clover8Leaf" | "Burst" | "SoftBurst" | "Boom" | "SoftBoom" | "Flower" | "Puffy" | "PuffyDiamond" | "Ghostish" | "PixelCircle" | "PixelTriangle" | "Bun" | "Heart";
+/**
+ * Material 3 Expressive shapes.
+ *
+ * This builds each shape on first access, normalized into the unit square. Every subsequent
+ * access returns the same immutable polygon.
+ */
+export declare class MaterialShapes {
+    /**
+     * Circle.
+     */
+    static get Circle(): RoundedPolygon;
+    /**
+     * Square with rounded corners.
+     */
+    static get Square(): RoundedPolygon;
+    /**
+     * Rounded parallelogram, slanted to the right.
+     */
+    static get Slanted(): RoundedPolygon;
+    /**
+     * Arch, a square rounded fully at its top.
+     */
+    static get Arch(): RoundedPolygon;
+    /**
+     * Wide rectangle rounded fully at its top.
+     */
+    static get SemiCircle(): RoundedPolygon;
+    /**
+     * Oval, tilted by 45 degrees counter-clockwise.
+     */
+    static get Oval(): RoundedPolygon;
+    /**
+     * Diagonal pill, rising to the right.
+     */
+    static get Pill(): RoundedPolygon;
+    /**
+     * Rounded triangle, pointing up.
+     */
+    static get Triangle(): RoundedPolygon;
+    /**
+     * Rounded arrowhead, pointing up.
+     */
+    static get Arrow(): RoundedPolygon;
+    /**
+     * Square with a large rounded top-right corner.
+     */
+    static get Fan(): RoundedPolygon;
+    /**
+     * Rounded diamond.
+     */
+    static get Diamond(): RoundedPolygon;
+    /**
+     * Rounded hexagon, wide at its sides.
+     */
+    static get ClamShell(): RoundedPolygon;
+    /**
+     * Rounded pentagon, pointing up.
+     */
+    static get Pentagon(): RoundedPolygon;
+    /**
+     * Gem, a rounded heptagon pointing down.
+     */
+    static get Gem(): RoundedPolygon;
+    /**
+     * Rounded star of eight long rays.
+     */
+    static get VerySunny(): RoundedPolygon;
+    /**
+     * Rounded star of eight short rays.
+     */
+    static get Sunny(): RoundedPolygon;
+    /**
+     * Cookie of four lobes.
+     */
+    static get Cookie4Sided(): RoundedPolygon;
+    /**
+     * Cookie of six lobes.
+     */
+    static get Cookie6Sided(): RoundedPolygon;
+    /**
+     * Cookie of seven lobes.
+     */
+    static get Cookie7Sided(): RoundedPolygon;
+    /**
+     * Cookie of nine lobes.
+     */
+    static get Cookie9Sided(): RoundedPolygon;
+    /**
+     * Cookie of twelve lobes.
+     */
+    static get Cookie12Sided(): RoundedPolygon;
+    /**
+     * Clover of four leaves.
+     */
+    static get Clover4Leaf(): RoundedPolygon;
+    /**
+     * Clover of eight leaves.
+     */
+    static get Clover8Leaf(): RoundedPolygon;
+    /**
+     * Burst of twelve sharp points.
+     */
+    static get Burst(): RoundedPolygon;
+    /**
+     * Burst of ten soft points.
+     */
+    static get SoftBurst(): RoundedPolygon;
+    /**
+     * Burst of fifteen long, sharp points.
+     */
+    static get Boom(): RoundedPolygon;
+    /**
+     * Burst of sixteen long, soft points.
+     */
+    static get SoftBoom(): RoundedPolygon;
+    /**
+     * Flower of eight petals.
+     */
+    static get Flower(): RoundedPolygon;
+    /**
+     * Puffy cloud, wider than tall.
+     */
+    static get Puffy(): RoundedPolygon;
+    /**
+     * Puffy diamond.
+     */
+    static get PuffyDiamond(): RoundedPolygon;
+    /**
+     * Ghost with two lobes at its bottom.
+     */
+    static get Ghostish(): RoundedPolygon;
+    /**
+     * Pixelated circle.
+     */
+    static get PixelCircle(): RoundedPolygon;
+    /**
+     * Pixelated triangle, pointing right.
+     */
+    static get PixelTriangle(): RoundedPolygon;
+    /**
+     * Bun of two lobes stacked vertically.
+     */
+    static get Bun(): RoundedPolygon;
+    /**
+     * Heart.
+     */
+    static get Heart(): RoundedPolygon;
+    /**
+     * Retrieve a Material shape by name.
+     *
+     * @param name - name of shape to retrieve
+     * @returns shape named `name`
+     * @throws {@link Error} `name` is not the name of a Material shape
+     */
+    static byName(name: string): RoundedPolygon;
+    /**
+     * List all Material shapes.
+     *
+     * @returns new array of new records of shape names and shapes, in catalog order
+     */
+    static all(): {
+        readonly name: MaterialShapeName;
+        readonly polygon: RoundedPolygon;
+    }[];
+}
+/**
+ * Names of the {@link MaterialShapes | Material shapes}, in catalog order.
+ *
+ * This lists the names of the static accessors of {@link MaterialShapes}, in definition order.
+ */
+export declare const MATERIAL_SHAPE_NAMES: readonly MaterialShapeName[];

package/target/tsc/shape/morph.d.ts

@@ -0,0 +1,91 @@
+import type { Cubic } from "./cubic";
+import type { RoundedPolygon } from "./rounded-polygon";
+/**
+ * Pair of curves morphing into each other.
+ *
+ * This holds a curve of the start polygon of a {@link Morph}, and the curve of the end polygon it
+ * morphs into, respectively.
+ */
+export type MorphCubicPair = readonly [Cubic, Cubic];
+/**
+ * Morph between two polygons.
+ *
+ * This pairs the curves of both outlines, where each pair of curves morphs into each other.
+ * Corners of the same convexity are matched by place, in the same circular order, and both
+ * outlines are split where needed, until they have as many curves. Morphs work best between
+ * normalized polygons, such as the {@link ./material-shapes#MaterialShapes | Material shapes}.
+ *
+ * ```ts
+ * const morph = new Morph(MaterialShapes.Circle, MaterialShapes.Heart);
+ *
+ * path.setAttribute("d", morphToPath(morph, progress).toSvgPathData());
+ * ```
+ */
+export declare class Morph {
+    #private;
+    /**
+     * Polygon at progress `0`.
+     */
+    readonly start: RoundedPolygon;
+    /**
+     * Polygon at progress `1`.
+     */
+    readonly end: RoundedPolygon;
+    /**
+     * Number of curves of each frame.
+     */
+    readonly cubicCount: number;
+    /**
+     * Construct a new morph.
+     *
+     * @param start - polygon at progress `0`
+     * @param end - polygon at progress `1`
+     * @throws {@link Error} a polygon outline has no length
+     */
+    constructor(start: RoundedPolygon, end: RoundedPolygon);
+    /**
+     * Compute the curves of a frame.
+     *
+     * Frames are closed outlines, whose curves continue each other exactly. This returns new
+     * curves, which belong to the caller.
+     *
+     * @param progress - finite progress of frame, extrapolating outside `[0, 1]`
+     * @returns {@link Morph.cubicCount} curves, in outline order
+     * @throws {@link Error} `progress` is not finite
+     */
+    asCubics(progress: number): Cubic[];
+    /**
+     * Invoke a function for each curve of a frame.
+     *
+     * This does **not** collect the curves into an array.
+     *
+     * @param progress - finite progress of frame, extrapolating outside `[0, 1]`
+     * @param callback - function to invoke with each curve {@link Morph.asCubics} would return, in
+     * outline order
+     * @throws {@link Error} `progress` is not finite
+     */
+    forEachCubic(progress: number, callback: (cubic: Cubic) => void): void;
+    /**
+     * Calculate bounds containing both polygons.
+     *
+     * Frames of progress outside `[0, 1]` may exceed these bounds. Approximate bounds contain the
+     * control points of the curves, and may thus exceed the outlines.
+     *
+     * @param bounds - array to write `[left, top, right, bottom]` into, if any
+     * @param approximate - `true` if, and only if, bounds should be approximate
+     * @returns `bounds`, or a new array if `bounds` is `undefined`
+     * @throws {@link Error} `bounds` has fewer than four entries
+     */
+    calculateBounds(bounds?: number[], approximate?: boolean): number[];
+    /**
+     * Calculate bounds of both polygons in any rotation.
+     *
+     * The bounds contain both polygons in any rotation around their centers.
+     *
+     * @param bounds - array to write `[left, top, right, bottom]` into, if any
+     * @returns `bounds`, or a new array if `bounds` is `undefined`
+     * @throws {@link Error} `bounds` has fewer than four entries
+     * @see {@link ./rounded-polygon#RoundedPolygon.calculateMaxBounds}
+     */
+    calculateMaxBounds(bounds?: number[]): number[];
+}

package/target/tsc/shape/path.d.ts

@@ -0,0 +1,177 @@
+import type { Cubic } from "./cubic";
+import type { Morph } from "./morph";
+import type { RoundedPolygon } from "./rounded-polygon";
+/**
+ * {@link roundedPolygonToPath} and {@link morphToPath} options.
+ */
+export interface PathOptions {
+    /**
+     * Start angle of the outline, in degrees.
+     *
+     * This is measured clockwise from 3 o'clock. If set, the outline is rotated around its center
+     * until its first point lies at this angle; otherwise, the outline is not rotated. For
+     * example, `270` starts the outline at 12 o'clock.
+     */
+    startAngle?: number | undefined;
+    /**
+     * Outline is traced twice.
+     *
+     * If `true`, the outline is traced twice, joined by a line of zero length. This allows a dash
+     * pattern to run across the start of the outline.
+     *
+     * @defaultValue `false`
+     */
+    repeatPath?: boolean | undefined;
+}
+/**
+ * Format a path coordinate.
+ *
+ * This rounds the coordinate to five decimal places, with halves towards positive infinity. The
+ * result has no trailing zeros, exponent, or sign of a negative zero.
+ *
+ * @param value - finite coordinate to format
+ * @returns formatted coordinate
+ * @throws {@link Error} `value` is not finite
+ */
+export declare function formatPathCoordinate(value: number): string;
+/**
+ * Builder of SVG path data.
+ *
+ * This formats coordinates with {@link formatPathCoordinate}. Paths may be reused, as each
+ * outline written into a path replaces its commands.
+ */
+export declare class Path {
+    #private;
+    /**
+     * Construct a new path without commands.
+     */
+    constructor();
+    /**
+     * Start a new subpath.
+     *
+     * @param x - horizontal coordinate of start
+     * @param y - vertical coordinate of start
+     * @returns this path
+     * @throws {@link Error} a coordinate is not finite
+     */
+    moveTo(x: number, y: number): this;
+    /**
+     * Append a straight line.
+     *
+     * @param x - horizontal coordinate of end
+     * @param y - vertical coordinate of end
+     * @returns this path
+     * @throws {@link Error} a coordinate is not finite
+     */
+    lineTo(x: number, y: number): this;
+    /**
+     * Append a cubic Bezier curve.
+     *
+     * @param control0X - horizontal coordinate of first control point
+     * @param control0Y - vertical coordinate of first control point
+     * @param control1X - horizontal coordinate of second control point
+     * @param control1Y - vertical coordinate of second control point
+     * @param anchorX - horizontal coordinate of end
+     * @param anchorY - vertical coordinate of end
+     * @returns this path
+     * @throws {@link Error} a coordinate is not finite
+     */
+    cubicTo(control0X: number, control0Y: number, control1X: number, control1Y: number, anchorX: number, anchorY: number): this;
+    /**
+     * Close the current subpath.
+     *
+     * @returns this path
+     */
+    close(): this;
+    /**
+     * Remove all commands.
+     *
+     * @returns this path
+     */
+    rewind(): this;
+    /**
+     * Serialize commands as SVG path data.
+     *
+     * @returns path data, such as `M0 0L1 0Z`
+     */
+    toSvgPathData(): string;
+    /**
+     * Serialize commands as SVG path data.
+     *
+     * @returns path data
+     * @see {@link Path.toSvgPathData}
+     */
+    toString(): string;
+}
+/**
+ * Write curves into a path.
+ *
+ * @param cubics - closed outline of at least one curve
+ * @param path - path to replace commands of, if any
+ * @returns `path`, or a new path if `path` is `undefined`
+ * @throws {@link Error} `cubics` is empty, or a coordinate is not finite
+ */
+export declare function cubicsToPath(cubics: readonly Cubic[], path?: Path): Path;
+/**
+ * Write the outline of a polygon into a path.
+ *
+ * @param polygon - polygon to write outline of
+ * @param options - start angle and repetition of outline, if any
+ * @param path - path to replace commands of, if any
+ * @returns `path`, or a new path if `path` is `undefined`
+ * @throws {@link Error} a coordinate is not finite
+ */
+export declare function roundedPolygonToPath(polygon: RoundedPolygon, options?: PathOptions, path?: Path): Path;
+/**
+ * Write a frame of a morph into a path.
+ *
+ * The start angle, if any, applies around the center interpolated between the centers of both
+ * polygons.
+ *
+ * @param morph - morph to write frame of
+ * @param progress - finite progress of frame, extrapolating outside `[0, 1]`
+ * @param options - start angle and repetition of outline, if any
+ * @param path - path to replace commands of, if any
+ * @returns `path`, or a new path if `path` is `undefined`
+ * @throws {@link Error} `progress` or a coordinate is not finite
+ */
+export declare function morphToPath(morph: Morph, progress: number, options?: PathOptions, path?: Path): Path;
+/**
+ * Serialize polygon outline as SVG path data.
+ *
+ * For example, a {@link ./material-shapes#MaterialShapes | Material shape} may be drawn in an
+ * `<svg viewBox="0 0 1 1">`, or as an SVG `<clipPath>` with `clipPathUnits="objectBoundingBox"`.
+ *
+ * @param polygon - polygon to serialize outline of
+ * @returns path data
+ * @throws {@link Error} a coordinate is not finite
+ */
+export declare function toSvgPath(polygon: RoundedPolygon): string;
+/**
+ * Serialize polygon outline as a CSS `path()`.
+ *
+ * This maps the unit square onto a box, and centers the approximate bounds of the outline
+ * within the box. In other words, this fits a normalized polygon to the box, for example for
+ * `clip-path`.
+ *
+ * @param polygon - polygon to serialize outline of, normally within the unit square
+ * @param width - positive width of box, in CSS pixels
+ * @param height - positive height of box, in CSS pixels, or `undefined` for a square box
+ * @returns CSS `path()` function
+ * @throws {@link Error} `width` or `height` is not positive and finite, or a coordinate is not
+ * finite
+ */
+export declare function toCssPath(polygon: RoundedPolygon, width: number, height?: number): string;
+/**
+ * Serialize morph frame as a CSS `path()`.
+ *
+ * @param morph - morph to serialize frame of, normally between polygons within the unit square
+ * @param progress - finite progress of frame, extrapolating outside `[0, 1]`
+ * @param width - positive width of box, in CSS pixels
+ * @param height - positive height of box, in CSS pixels, or `undefined` for a square box
+ * @returns CSS `path()` function
+ * @throws {@link Error} `progress` is not finite, `width` or `height` is not positive and finite,
+ * or a coordinate is not finite
+ * @see {@link toCssPath}
+ */
+export declare function morphToCssPath(morph: Morph, progress: number, width: number, height?: number): string;