@flemo/core 2.2.0 → 2.2.2

package/dist/morph/__tests__/morphContents.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/morph/__tests__/morphFace.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/morph/__tests__/morphLine.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/morph/__tests__/pinParts.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/morph/attachMorph.d.ts

@@ -8,6 +8,18 @@ export interface AttachMorphOptions {
     name?: MorphTransitionName;
     /** The navigate store of the Router scope this element belongs to. */
     navigateStore: NavigateStoreApi;
+    /**
+     * Which side of which flight this end is on, from the binding.
+     *
+     * Only ever needed where the DOM cannot answer: a shared bar is rendered
+     * outside the screen scope it belongs to, so walking up from a morph in one
+     * leaves the screen entirely or lands on an enclosing Router's. Everything
+     * written inside a screen is answered by the walk and needs none of this.
+     */
+    ownership?: {
+        status: NavigateStatus;
+        active: boolean;
+    } | null;
 }
 interface MorphFlight {
     finish: () => void;
@@ -15,6 +27,8 @@ interface MorphFlight {
     element: HTMLElement;
     duration: number;
     start: number;
+    /** The flat lead-in inside `start`, so a nested set bakes the same one. */
+    head: number;
     ease: AnimationOptions["ease"];
     /**
      * Put the landing's safety net away, and set it again.

package/dist/morph/morphContents.d.ts

@@ -0,0 +1,36 @@
+/**
+ * WHETHER A BOX'S CONTENTS MOVE WHEN THE BOX CHANGES SIZE.
+ *
+ * Animating a morph's box is what makes it a growth rather than a stretch: the
+ * subtree lays itself out at every size on the way, which is the only way text
+ * can re-wrap into its new shape. That is a layout and a fresh raster of the
+ * subtree on every frame, and WebKit re-snaps the backing to the device grid
+ * each time, so a subtree that does not need to move gets carried a device
+ * pixel back and forth for the whole flight anyway.
+ *
+ * Measured on a consumer's pill: every descendant held ONE position for all
+ * twenty-three frames of the flight, and only the box's own near edge moved.
+ * Right-aligned contents in a box that grows leftward do not go anywhere. The
+ * per-frame layout produced no layout change at all, and the tremble was the
+ * whole of what it bought.
+ *
+ * Where that is TRUE, holding the box at the size that contains both ends and
+ * cutting the near edge back with a clip is the same picture, drawn once. Where
+ * it is FALSE the flight must animate the box for real, because something
+ * inside genuinely has a different place at the two ends.
+ *
+ * This is the difference between measuring that and guessing it from the box's
+ * shape. A shape says nothing about a consumer's subtree; two laid-out ends do.
+ */
+/** The corner a flight's box is anchored on, and grows away from. */
+export interface MorphAnchor {
+    x: "left" | "right";
+    y: "top" | "bottom";
+}
+export declare const contentsHoldAcrossBox: (element: HTMLElement, from: {
+    width: number;
+    height: number;
+}, to: {
+    width: number;
+    height: number;
+}, anchor: MorphAnchor) => boolean;

package/dist/morph/morphFace.d.ts

@@ -0,0 +1,66 @@
+/** The two ratios a face's height is built from, per em. */
+export interface FaceRatios {
+    ascent: number;
+    descent: number;
+}
+/**
+ * The face's ascent and descent per em, or null where they cannot be had.
+ *
+ * Keyed on the font shorthand, so every element wearing the same type shares
+ * one answer for the session.
+ */
+export declare const faceRatios: (font: {
+    family: string;
+    weight: string | number;
+    style: string;
+}) => FaceRatios | null;
+/** The grids an engine is known to snap the two halves of a face height to. */
+export declare const faceGrids: () => number[];
+/**
+ * The face height the line box will be built from, at one size.
+ *
+ * `scale` is the reciprocal of the grid: 1 for whole pixels, the device pixel
+ * ratio for device pixels.
+ */
+export declare const faceHeightAt: (size: number, ratios: FaceRatios, scale: number) => number;
+/** The two halves of a face's box at one size, as the font reports them. */
+export interface FaceParts {
+    ascent: number;
+    descent: number;
+}
+/**
+ * The face's ascent and descent at one size, as the font reports them.
+ *
+ * The same numbers the line box is built from, got without laying anything out.
+ * The BASELINE sits at the ascent below the inline box's top, so a flight that
+ * holds its half-leading still is only half done: the ascent is on the same
+ * grid and steps just as often (see morphLine).
+ */
+export declare const faceParts: (size: number, font: {
+    family: string;
+    weight: string | number;
+    style: string;
+}, scale: number) => FaceParts | null;
+export declare const runAdvance: (text: string, size: number, font: {
+    family: string;
+    weight: string | number;
+    style: string;
+}) => number | null;
+/** The face's own height at one size: its two halves added up. */
+export declare const faceHeight: (size: number, font: {
+    family: string;
+    weight: string | number;
+    style: string;
+}, scale: number) => number | null;
+/**
+ * Every size in `[from, to]` at which the face height MIGHT change.
+ *
+ * Arithmetic only, and deliberately: each half of the height steps where
+ * `size * ratio` crosses a half of the grid, which gives the candidates. Where
+ * each one really falls is not settled here, because the thing that has to be
+ * exact is the TIME the flight meets it, and only the caller knows the curve
+ * that maps one to the other (see morphLine).
+ */
+export declare const faceAims: (from: number, to: number, ratios: FaceRatios, scale: number) => number[];
+/** Whether two faces are the same height, ascent and descent alike. */
+export declare const sameFace: (a: FaceParts, b: FaceParts) => boolean;

package/dist/morph/morphGeometry.d.ts

@@ -54,8 +54,56 @@ export interface MorphSnapshot {
      * complete as the last thing someone noticed on glass.
      */
     paint: Record<string, string>;
+    /**
+     * Whether this end is ONE LINE of text.
+     *
+     * A flight animates the element's box, and the element in flight is the
+     * ARRIVAL's tree — so it re-wraps at every width on the way, under the
+     * arrival's own line-breaking rules rather than the departure's. Where both
+     * ends are single lines that is always wrong: the label was one line, the
+     * heading is one line, and the flight puts a second one in between. Measured
+     * on the playground's poster grid, on an iPhone: a cell's meta line broke
+     * after the middle dot for the first four frames of a push, because the
+     * detail's span has no `truncate` and the cell's width does not fit it.
+     *
+     * Read for both ends so the flight can hold a single line when it knows the
+     * journey has no honest reason to have two (see `holdsOneLine`).
+     */
+    singleLine: boolean;
+    /**
+     * The height of this end's first line of text, in px — the face's own ascent
+     * plus descent at the size it renders.
+     *
+     * It is the other half of where a line SITS in its box: the half-leading is
+     * `(line-height - this) / 2`, and both engines render that floored to whole
+     * pixels. A flight that interpolates the leading has to know where those
+     * boundaries are to avoid ending on one (see morphLine's `leadingBias`).
+     *
+     * Null for anything that is not one run of text, and for a measurement taken
+     * through an ancestor's scale, which is not the face's own height.
+     */
+    textHeight: number | null;
+    /**
+     * Where this end's line actually SITS: the rendered distance from the box's
+     * top to the top of its text run, in px.
+     *
+     * The engines floor the half-leading to whole pixels, and this is the floored
+     * answer they gave — not a derivation. It is what the landing will paint, and
+     * a correction that cannot reproduce it from `line-height` and `textHeight`
+     * has misread the rule and declines to act (see morphLine's `leadingBias`).
+     */
+    leadOffset: number | null;
 }
 export declare const rectCentre: (rect: MorphRect) => PosePoint;
+/**
+ * Is a box of this height a single line of type?
+ *
+ * Exported because the height to ask about is not always the measured one: a
+ * NESTED arrival is measured inside a container that is already staged at its
+ * from-box, so its staged height is the wrapped one — the very thing the answer
+ * is used to prevent. Its rest height is the honest one.
+ */
+export declare const isSingleLine: (height: number, lineHeight: number | null, fontSize: number | null) => boolean;
 export declare const captureMorphSnapshot: (element: HTMLElement) => MorphSnapshot;
 /**
  * A painted rect mapped back into the space its ancestor's transform is applied

package/dist/morph/morphKeyframes.d.ts

@@ -19,6 +19,24 @@ export interface MorphTravel {
     duration: number;
     /** Seconds from the release, platform head included. */
     start: number;
+    /**
+     * The platform's flat lead-in, ALREADY COUNTED IN `start`.
+     *
+     * A HEAD IS NOT A DELAY. Waiting it out as a delay leaves the animation
+     * uncommitted until the instant it must move, so a first frame that arrives
+     * late arrives PARTWAY THROUGH — the curve is entered wherever the clock
+     * says and everything before that is never drawn. Given here, the same
+     * seconds are baked into the keyframes as a flat stop instead: the animation
+     * is running and still, a late first frame lands inside the lead-in, and the
+     * curve plays from 0. The screens have ridden it this way since the head was
+     * invented; this is the flight riding it the same way.
+     *
+     * Painted frames off a consumer's phone, 60fps: the first frame the box was
+     * drawn on was already 67% of the way through its travel. The computed value
+     * ramped correctly throughout, which is why every main-thread probe called it
+     * healthy.
+     */
+    head?: number;
     ease: AnimationOptions["ease"];
 }
 export interface MorphKeyframeSet {
@@ -31,6 +49,61 @@ export interface MorphKeyframeSet {
      * one, the corner where the corner is all that changes.
      */
     geometryName: string;
+    /**
+     * Whether the geometry keyframe is one the COMPOSITOR can run.
+     *
+     * True only where the travel is a transform and nothing else. A keyframe that
+     * also carries a box, a type size or a clip is resolved by the MAIN THREAD,
+     * once per frame it manages to produce — and anything that has to stay
+     * registered with it has to be presented from there too (see the camera).
+     */
+    geometryAccelerated: boolean;
+    /**
+     * The `translate` the caller must set on the element, or null.
+     *
+     * Non-null where the travel is driven through registered properties, which
+     * is what keeps its position on the same thread as its size.
+     */
+    translate: string | null;
+    /**
+     * The `width` and `height` the caller must set on the element, or null.
+     *
+     * Non-null where the box's size is driven through registered properties,
+     * which is what keeps an engine from dropping it (see morphPose).
+     */
+    size: {
+        width: string;
+        height: string;
+    } | null;
+    /**
+     * The width the box is HELD at for the whole flight, or null.
+     *
+     * The viewport x of a far edge both ends agree on, when there is one.
+     *
+     * The element is placed FROM it — `left: calc(<edge>px - var(--flemo-box-w))`
+     * — so the edge is derived from the very channel the width animates on and
+     * the two round together. Reached as position + size instead, the engine
+     * rounds each to its own layout unit and their sum oscillates: measured on a
+     * consumer's pill, 366.000 with the anchor against 365.985 ± 0.015 without,
+     * reversing six times in twenty-three frames, and every right-aligned thing
+     * inside it followed.
+     */
+    heldEdge: number | null;
+    /**
+     * The `transform` the caller must set on the element, or null.
+     *
+     * Non-null only for a PINNED set, whose keyframes animate the pose's
+     * coordinates rather than the transform itself, and which therefore needs the
+     * transform that reads them (see PINNED_POSE_TRANSFORM).
+     */
+    transform: string | null;
+    /**
+     * The `letter-spacing` the caller must set on the element, or null.
+     *
+     * Non-null where the tracking carries a correction, which is written as a sum
+     * of the author's own and the correction's, each on its own clock.
+     */
+    letterSpacing: string | null;
 }
 /**
  * The keyframes and the `animation` shorthand for one side of a morph.
@@ -64,11 +137,76 @@ export declare const buildMorphKeyframes: (input: {
         from: MorphRect;
         to: MorphRect;
     } | null;
+    /**
+     * Whether the two ends lay their CONTENTS out in the same places, measured.
+     *
+     * A box animates for real wherever this is false, because something inside
+     * has a different place at the two ends and only a layout per frame can take
+     * it there. Where it is true the subtree is the same picture at every size on
+     * the way, so the box is laid out ONCE and the near edge is cut back with a
+     * clip instead (see the reveal below). It is measured rather than inferred
+     * from the box's shape: a shape says nothing about a consumer's subtree.
+     */
+    contentsHold?: boolean;
     /** Type morphs by growing, not by being scaled: px at each end. */
     fontSize?: {
         from: number;
         to: number;
     } | null;
+    /**
+     * The line-height as a STAIRCASE, holding the leading still for the flight.
+     *
+     * Supersedes `lineHeight` where it is given: the two cannot both author the
+     * property, and the staircase is the one that keeps the glyphs from stepping
+     * inside the box (see morphLine). It rides its own animation because it needs
+     * its own timing — each stop HOLDS until the next, which is what a staircase
+     * is, and the geometry keyframe cannot hold one channel while easing the rest.
+     */
+    leading?: {
+        at: number;
+        lineHeight: number;
+    }[] | null;
+    /**
+     * The ascent's staircase, carried backwards on the box so the two cancel.
+     *
+     * A held leading still leaves the BASELINE stepping, because it sits an
+     * ascent below the inline box's top and the ascent is on the same grid. The
+     * two terms are both grid-locked, so nothing done to the line-height can make
+     * their sum smooth. The box under them is not grid-locked, so the flight
+     * sends the box the OTHER way by the same amount and the glyphs come out
+     * still: the box travels to `top + ascent` and a transform takes the ascent
+     * straight back off, exactly at both ends and within half a pixel between.
+     *
+     * A box wobbling half a pixel is nothing to look at; a line of type doing it
+     * is the tremor this exists to remove.
+     */
+    lift?: {
+        at: number;
+        ascent: number;
+    }[] | null;
+    /**
+     * What the baseline owes at the START, in px, because the staircase holds the
+     * ARRIVAL's leading from the first frame (see attachMorph).
+     *
+     * Paid on the same channel as the ascent's cancellation and with the same
+     * shape: the whole amount at the departure, nothing at the landing, so what
+     * the flight travels is unchanged and only its first frame moves.
+     */
+    leadStart?: number | null;
+    /**
+     * The correction that keeps a growing run of glyphs from drifting apart.
+     *
+     * A run's width against its size is one curve, and where it leaves the
+     * straight line between its ends every glyph carries the error that piled up
+     * before it. Spread the negative of that over the gaps and it cancels (see
+     * morphLine). It rides `letter-spacing` beside the author's own tracking, on
+     * its own clock, and is RAMPED rather than held because what it cancels is a
+     * curve rather than a staircase.
+     */
+    track?: {
+        at: number;
+        fix: number;
+    }[] | null;
     /** Type's other two dimensions, so it re-typesets rather than merely re-sizing. */
     fontWeight?: {
         from: number;
@@ -131,12 +269,32 @@ export declare const buildMorphKeyframes: (input: {
         from: MorphClipInset;
         to: MorphClipInset;
     } | null;
+    /**
+     * The corner the box wears, so a clip that reveals it cuts a rounded shape
+     * rather than a square one (see the reveal below).
+     */
+    radius?: string | null;
     fade: {
         from: TransitionTarget | null;
         to: TransitionTarget | null;
         duration: number;
         /** Seconds to hold the from-pose before the fade runs, on top of `travel.start`. */
         delay?: number;
+        /**
+         * The curve, where the flight's own is not the right one.
+         *
+         * A HAND-OVER IS A STEP, NOT A RAMP. Two opacity ramps crossing never
+         * compose back to what they replaced: at the midpoint of a 1-to-0 against a
+         * 0-to-1, alpha compositing leaves 1 - (1 - 0.5) * 0.5 = 0.75 of the pair,
+         * and the engines do not even sample the two on the same phase. Device-read
+         * on a consumer's tab switch: the copy at 0.48 against the arrival at 0.33,
+         * two frames of a washed-out box mid-travel — read as a blink.
+         *
+         * A step at the same instant on both sides has no such midpoint. Both are
+         * pure functions of one timeline, so every frame that renders at all
+         * renders exactly one of them, and a missed frame cannot land between.
+         */
+        easing?: string;
     } | null;
     /**
      * Everything the two ends paint differently — corner, surface, border,
@@ -147,15 +305,69 @@ export declare const buildMorphKeyframes: (input: {
         from: string;
         to: string;
     }[];
+    /**
+     * Keep this set on the main thread even where its geometry is a transform the
+     * compositor could have run.
+     *
+     * A flight is one composition, and its parts are placed relative to each
+     * other. The moment one of them travels by its box — which is every flight
+     * where the element GROWS rather than being scaled — the frames it can be
+     * drawn on are the main thread's, and a part that keeps advancing without it
+     * separates from it by however far behind that thread is. A ghost is the
+     * clearest case: it is a copy of the departure whose only job is to sit on
+     * the element it dissolves into, and one that leads prints the card twice.
+     *
+     * So the flight decides once, and every part it emits abides by it. Ignored
+     * where the geometry is already layout-bound, which needs no help.
+     */
+    pinned?: boolean;
+    /**
+     * Drive the travel's own position through registered properties.
+     *
+     * False only where they could not be registered, and there the position goes
+     * back to `left` and `top`: a literal `translate` would be run by WebKit's
+     * compositor while the size it belongs to waits for the main thread.
+     */
+    travelPinned?: boolean;
 }) => MorphKeyframeSet;
 /**
  * The CAMERA: the transform that takes a screen from resting to "zoomed onto
  * this element", for a flight that carries its screen.
  *
- * One uniform scale and one translate, both literal — the same discipline the
- * travel keeps, and for the same reason: a compiled animation whose values come
- * from custom properties was device-bisected off the compositor on WebKit
- * (see the literal-timing note in compileTransitionStyles).
+ * One uniform scale and one translate.
+ *
+ * THE CAMERA IS NOT AN ANIMATION OF ITS OWN. It is defined as exactly the zoom
+ * that carries the element from one end of the flight to the other, and the two
+ * are emitted on one clock: same duration, same delay, same easing, released
+ * together. Measured, they agree to a thousandth of a frame at every sample.
+ *
+ * They still do not agree ON GLASS, because they are not PRESENTED by the same
+ * thread. A transform is one of the few things a compositor can run by itself,
+ * so the camera advances every vsync whatever the page is doing; the element
+ * travels by its box, which no compositor can interpolate, so it advances only
+ * on frames the main thread manages to produce. Isolated on both engines: with
+ * the main thread blocked mid-flight, a transform twin of a box travel ran 146px
+ * (Blink) and 167px (WebKit) ahead of it before the box moved at all. That gap
+ * is the whole defect — a card trailing the grid it is supposed to be opening
+ * out of, reported from iOS Safari as the camera being a beat ahead of the card.
+ *
+ * So where the element it carries is main-thread bound, the camera is too: the
+ * transform is composed from REGISTERED custom properties and the keyframes
+ * animate those, which no compositor can run because the substitution is style
+ * resolution's work. It then advances on exactly the frames the element does,
+ * and the pair is rigid again at whatever rate the device can hold.
+ *
+ * That is the only lever that works. `calc(var())` in the timing — the one this
+ * codebase already knew took a fade off WebKit's compositor — leaves a literal
+ * transform accelerated on both engines, as do constant `left`, `background-color`
+ * and `clip-path` channels alongside it; all four were measured to run away from
+ * the main thread exactly as the plain transform did. It costs nothing: the
+ * screen keeps its layer, so the per-frame work is a style resolution and a
+ * transform update, and frame times were indistinguishable from the literal form
+ * at 1x, 6x and 12x CPU throttle.
+ *
+ * Where the element's own travel IS a transform, the camera stays literal and
+ * accelerated: there is then nothing main-thread bound for it to wait for.
  *
  * The scale comes from WIDTH alone. The element's own box changes aspect across
  * the flight, so no single uniform scale can match both axes, and width is the
@@ -182,8 +394,18 @@ export declare const buildCameraKeyframes: (input: {
     settling: boolean;
     duration: number;
     start: number;
+    /** The flight's flat lead-in, baked here too: the camera is one of its parts. */
+    head?: number;
     ease: AnimationOptions["ease"];
     selector: string;
+    /**
+     * Emit the literal transform the compositor can run.
+     *
+     * True only where the element this camera carries is itself on the
+     * compositor; false pins the camera to the main thread's cadence, which is
+     * where a box travel lives (see above).
+     */
+    accelerated: boolean;
 }) => {
     rules: string[];
     name: string;

package/dist/morph/morphLine.d.ts

@@ -0,0 +1,96 @@
+import { AnimationOptions } from '../transition/cssTypes';
+/** The properties the hold writes, so a caller can reason about what it costs. */
+export declare const LINE_HOLD: {
+    readonly whiteSpace: "nowrap";
+    readonly overflow: "hidden";
+    readonly textOverflow: "ellipsis";
+};
+/**
+ * Hold the flying element to one line for the duration of a flight.
+ *
+ * Written as inline style, which is what the landing restores wholesale — the
+ * hold needs no undo of its own.
+ */
+export declare const holdOneLine: (element: HTMLElement) => void;
+/** Whether a flight between these two ends should hold a single line. */
+export declare const holdsOneLine: (from: boolean, to: boolean) => boolean;
+/**
+ * Extra leading, in px, for BOTH ends of a flight so the half-leading it
+ * renders never crosses a pixel boundary.
+ *
+ * Zero when either end cannot be measured, and zero when the travel is wider
+ * than one pixel of half-leading — no offset fits it in one, and a step
+ * somewhere is then the honest outcome. Mid-flight is where it belongs.
+ */
+export interface LeadingEnd {
+    lineHeight: number | null;
+    textHeight: number | null;
+    /** What the engine actually rendered for this end (see MorphSnapshot). */
+    leadOffset: number | null;
+}
+/**
+ * The half-leading a flight owes at its START, in px.
+ *
+ * The staircase holds ONE leading for the whole flight so the rendered
+ * half-leading cannot step, and the one it holds is the ARRIVAL's, because that
+ * is the value the landing has to restore. At the other end that makes the
+ * first frame render a line-height the departure never had, and half of that
+ * difference is where the departure's baseline sat.
+ *
+ * Half of the difference is not the answer, though: the engine puts the
+ * half-leading on a grid, so a line-height a pixel apart can render a whole
+ * pixel apart rather than half of one. Both ends reported where their line was
+ * actually put, so the grid is the one that reproduces both — the same
+ * authority `leadingBias` answers to — and where no candidate does, the
+ * arithmetic difference is the honest fallback.
+ */
+export declare const leadingOwed: (from: LeadingEnd, to: LeadingEnd, stops: LeadingStop[] | null) => number;
+export declare const leadingBias: (from: LeadingEnd, to: LeadingEnd) => number;
+export default holdOneLine;
+export interface LeadingEndType {
+    fontSize: number | null;
+    lineHeight: number | null;
+    /** The face height the engine actually reported for this end. */
+    textHeight: number | null;
+}
+export interface LeadingStop {
+    /** Percent of the flight, 0 to 100. */
+    at: number;
+    lineHeight: number;
+    /**
+     * The face's ascent from this stop on.
+     *
+     * A held leading is only half the answer. The BASELINE sits an ascent below
+     * the inline box's top, and the ascent is on the same grid the leading is, so
+     * it steps just as often — device-measured at seventeen steps of half a pixel
+     * across one flight of forty-nine frames, which is a jump every third frame.
+     *
+     * Neither term can be made smooth: both are on the grid, so their sum is too,
+     * and a baseline that has nine and a half pixels of grid to climb must climb
+     * it in steps. What CAN be smooth is the box under them, because a box's
+     * position is not on any grid — so the flight carries the ascent's staircase
+     * BACKWARDS on the box and lets the two cancel (see `lift`).
+     */
+    ascent: number;
+}
+export declare const leadingStops: (from: LeadingEndType, to: LeadingEndType, font: {
+    family: string;
+    weight: string | number;
+    style: string;
+} | null, ease: AnimationOptions["ease"]) => LeadingStop[] | null;
+export interface TrackStop {
+    /** Percent of the flight, 0 to 100. */
+    at: number;
+    /** The correction, in px, to add to every gap between the glyphs. */
+    fix: number;
+}
+/** The tracking correction for a growing run, or null where there is none to make. */
+export declare const trackStops: (text: string, from: {
+    fontSize: number | null;
+}, to: {
+    fontSize: number | null;
+}, font: {
+    family: string;
+    weight: string | number;
+    style: string;
+} | null, ease: AnimationOptions["ease"]) => TrackStop[] | null;

package/dist/morph/morphPose.d.ts

@@ -40,5 +40,52 @@ export declare const poseToCss: (pose: MorphPose) => string;
  * measured travel and an author's flourish stack on one element instead of
  * needing a wrapper each.
  */
+export declare const composePoses: (poses: MorphPose[]) => MorphPose[];
 export declare const composePosesToCss: (poses: MorphPose[]) => string;
+/** The size an element wears while its box is driven through the channel. */
+/** The channel a travelling box carries its width on, for anything placed from it. */
+export declare const BOX_WIDTH_PROPERTY: "--flemo-box-w";
+export declare const PINNED_BOX: string;
+export declare const PINNED_BOX_HEIGHT: string;
+/** One end of a pinned box, as the keyframe declarations that drive it. */
+export declare const pinnedBoxDecls: (width: number, height: number, indent?: string) => string;
+export declare const RULER: number;
+export declare const onRuler: (value: number) => number;
+export declare const pinnedBoxDeclsOnRuler: (width: number, height: number, indent?: string) => string;
+/** The `letter-spacing` an element wears while its tracking is corrected. */
+export declare const PINNED_TRACK: string;
+/** One end of the authored tracking. */
+export declare const pinnedTrackDecl: (value: number, indent?: string) => string;
+/** One stop of the correction that keeps a run from drifting apart. */
+export declare const pinnedTrackFixDecl: (value: number, indent?: string) => string;
+export declare const PINNED_TRAVEL: string;
+/** One end of a pinned travel, as the keyframe declarations that drive it. */
+export declare const pinnedTravelDecls: (x: number, y: number, indent?: string) => string;
+/** One stop of the ascent's staircase, on the half of the pair that holds. */
+export declare const pinnedLiftDecl: (ascent: number, indent?: string) => string;
+/** The `transform` an element wears while its pose is pinned. */
+export declare const PINNED_POSE_TRANSFORM: string;
+/**
+ * The registrations the pinned form needs, inserted once per document.
+ *
+ * They have to be REGISTERED: an unregistered custom property is a string to
+ * the engine and animates discretely, which would teleport a pose at its
+ * midpoint instead of interpolating it.
+ *
+ * One set of names for every flight rather than one per participant, because a
+ * registration is document-wide and re-registering invalidates style for the
+ * whole page. `inherits: false` is what makes that safe: each element holds its
+ * own values, so two flights never read each other's and no descendant inherits
+ * a pose meant for its parent.
+ */
+export declare const PINNED_POSE_PROPERTY_RULES: string[];
+/**
+ * One pose as the keyframe declarations that drive `PINNED_POSE_TRANSFORM`.
+ *
+ * Every channel is written at both ends even where it does not change, because
+ * these are the coordinates of one transform rather than five animations: an
+ * end that omitted a channel would interpolate it from its registered initial
+ * value instead of holding it.
+ */
+export declare const pinnedPoseDecls: (pose: MorphPose, indent?: string) => string;
 export declare const interpolatePose: (from: MorphPose, to: MorphPose, progress: number) => MorphPose;

package/dist/morph/morphSheet.d.ts

@@ -7,3 +7,12 @@
  * would by then point at someone else's keyframes.
  */
 export declare const insertMorphRules: (rules: string[]) => (() => void);
+/**
+ * Register the pinned pose's custom properties, and report whether they took.
+ *
+ * A browser that does not understand `@property` refuses the rule, and there
+ * every pose has to stay literal: unregistered, those properties would animate
+ * discretely and teleport a pose at its midpoint rather than interpolating it.
+ * A part that leads the rest of its flight is a flaw; one that jumps is a break.
+ */
+export declare const ensurePinnedPoses: () => boolean;