@fairgarden/design 0.1.0-alpha.1 → 0.1.0-alpha.2

package/foundations/outline-morph/OutlineMorph.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { type OutlineMorphDuration, type OutlineMorphRing } from './morphEngine';
+/** Options for `useOutlineMorph`. */
+export type UseOutlineMorphOptions = {
+    /** The popup's open state, as its root has it after each commit. */
+    open: boolean;
+    /**
+     * Run the morph. Default `true`; `false` leaves the popup's own open and
+     * close, and a change of `open` committed with it false happens that way.
+     */
+    enabled?: boolean;
+    /**
+     * How the trigger draws its focus ring. Default `focus-visible`: on the
+     * trigger while it matches `:focus-visible` (focus moves into the popup).
+     * `focus-within`: on a field's box whenever anything in it holds focus,
+     * pointer focus included (focus stays in its input).
+     */
+    ring?: OutlineMorphRing;
+    /**
+     * Durations in ms, overriding the tokens. Default: the trigger's
+     * `--fgd-duration-expand` (333) and `--fgd-duration-collapse` (200), read
+     * at each open and close; 0 turns the morph off.
+     */
+    duration?: OutlineMorphDuration;
+    /**
+     * A modal surface (a dialog, a sheet), whose frame sits in an
+     * `OutlineMorphLayer`: the durations default to the trigger's
+     * `--fgd-duration-expand-surface` (400) and
+     * `--fgd-duration-collapse-surface` (240). Default `false`.
+     */
+    surface?: boolean;
+};
+/** The refs `useOutlineMorph` returns: stable callbacks for the three elements. */
+export type OutlineMorphRefs = {
+    /** A trigger: its focus ring (or edge) is where the morph starts and lands. */
+    sourceRef: (element: HTMLElement | null) => void;
+    /** The popup: its border box and radius are the frame the morph grows into. */
+    targetRef: (element: HTMLElement | null) => void;
+    /** The overlay: pass to `OutlineMorphFrame`. */
+    frameRef: (element: HTMLElement | null) => void;
+    /** The popup's own tail, if it has one (an arrow): the cap copies it while the morph runs. */
+    tailSourceRef: (element: HTMLElement | null) => void;
+    /** The tail cap: pass to `OutlineMorphTail`, rendered after the frame. */
+    tailRef: (element: HTMLElement | null) => void;
+};
+/**
+ * Grows a trigger's focus ring into its popup's frame on open, and back on
+ * close. With a ring drawn (keyboard focus, or any focus in a field), the
+ * morph starts on it; without one (a pointer press), on the trigger's edge:
+ * its boxed edge, else its box in its fill, else (a text button, an
+ * underline, a bare glyph) its ring's box in its ink. The close lands on the
+ * ring when focus stays or returns with one (the trigger's own ring then
+ * shows in the same frame the overlay goes), else on the edge.
+ *
+ * Wire three refs: `sourceRef` on the trigger (several triggers may share
+ * one popup; the one marked open is used), `targetRef` on the popup,
+ * and `frameRef` on an `OutlineMorphFrame` rendered as the popup's sibling
+ * inside the element that positions it (e.g. Base UI's Positioner), so the
+ * frame is out of flow and moves with the popup. The popup's CSS must
+ * answer `[data-outline-morph]`: its border takes its face color and its
+ * own enter and exit transition is dropped.
+ */
+export declare function useOutlineMorph(options: UseOutlineMorphOptions): OutlineMorphRefs;
+/** Props for OutlineMorphFrame. */
+export type OutlineMorphFrameProps = {
+    /** `frameRef` from `useOutlineMorph`. */
+    ref: (element: HTMLElement | null) => void;
+    /** Extra class names, added after the module's own. */
+    className?: string;
+};
+/**
+ * The overlay the morph animates: an empty 2 px frame (the popup's own
+ * weight and color, read at run time), absolutely positioned, hidden
+ * unless a morph runs, `aria-hidden` and never hit-tested.
+ */
+export declare function OutlineMorphFrame(props: OutlineMorphFrameProps): React.JSX.Element;
+/** Props for OutlineMorphTail. */
+export type OutlineMorphTailProps = {
+    /** `tailRef` from `useOutlineMorph`. */
+    ref: (element: HTMLElement | null) => void;
+    /** The adopter's class: the tail's size, and its rotation per `data-side` as the popup's own tail. */
+    className?: string;
+    /** The same drawing as the popup's tail (e.g. `OverlayTail`), its fill and stroke answering the cap. */
+    children?: React.ReactNode;
+};
+/**
+ * The tail cap [§9.17]: the overlay's copy of a popup's tail, rendered
+ * after `OutlineMorphFrame` in the same container so it paints above the
+ * frame. While the morph runs it sits on the popup's own tail (hidden
+ * meanwhile) and shows only on the trigger side of the frame's trigger-
+ * facing edge, so the tail grows out of that edge as the frame arrives and
+ * is whole as it lands. Its stroke is `currentColor` (the frame's color on
+ * the same timing); its face is `--fgd-outline-morph-tail-fill` (the
+ * popup's). Hidden unless a morph runs, `aria-hidden`, never hit-tested. A
+ * popup without a tail never shows it.
+ */
+export declare function OutlineMorphTail(props: OutlineMorphTailProps): React.JSX.Element;
+/** Props for `OutlineMorphLayer`. */
+export type OutlineMorphLayerProps = {
+    /** Extra class names, added after the module's own (e.g. a `z-index` other than the modal layer's). */
+    className?: string;
+    /** The `OutlineMorphFrame`. */
+    children?: React.ReactNode;
+};
+/**
+ * The container a modal surface's frame sits in, since the surface has no
+ * positioner: fixed, the full viewport, above the surface (`--layer-4`, the
+ * dialogs' layer, rendered after the popup in its portal) and never hit
+ * tested, so the engine measures in viewport coordinates as they are.
+ */
+export declare function OutlineMorphLayer(props: OutlineMorphLayerProps): React.JSX.Element;
+//# sourceMappingURL=OutlineMorph.d.ts.map

package/foundations/outline-morph/OutlineMorph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineMorph.d.ts","sourceRoot":"","sources":["../../src/foundations/outline-morph/OutlineMorph.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;AA8CtB,qCAAqC;AACrC,MAAM,MAAM,sBAAsB,GAAG;IACnC,oEAAoE;IACpE,IAAI,EAAE,OAAO,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,mFAAmF;AACnF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+EAA+E;IAC/E,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,+EAA+E;IAC/E,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,gDAAgD;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,8FAA8F;IAC9F,aAAa,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,0EAA0E;IAC1E,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,gBAAgB,CA8BjF;AAED,mCAAmC;AACnC,MAAM,MAAM,sBAAsB,GAAG;IACnC,yCAAyC;IACzC,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAGlF;AAED,kCAAkC;AAClC,MAAM,MAAM,qBAAqB,GAAG;IAClC,wCAAwC;IACxC,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C,sGAAsG;IACtG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAOhF;AAED,qCAAqC;AACrC,MAAM,MAAM,sBAAsB,GAAG;IACnC,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAOlF"}

package/foundations/outline-morph/OutlineMorph.js

@@ -0,0 +1,83 @@
+'use client';
+import * as React from 'react';
+import { cx } from '../../utils/className';
+import { EXPAND_DURATION_MS } from '../../utils/tokens';
+import { OutlineMorphController, } from './morphEngine';
+import styles from './outline-morph.module.css';
+/**
+ * Grows a trigger's focus ring into its popup's frame on open, and back on
+ * close. With a ring drawn (keyboard focus, or any focus in a field), the
+ * morph starts on it; without one (a pointer press), on the trigger's edge:
+ * its boxed edge, else its box in its fill, else (a text button, an
+ * underline, a bare glyph) its ring's box in its ink. The close lands on the
+ * ring when focus stays or returns with one (the trigger's own ring then
+ * shows in the same frame the overlay goes), else on the edge.
+ *
+ * Wire three refs: `sourceRef` on the trigger (several triggers may share
+ * one popup; the one marked open is used), `targetRef` on the popup,
+ * and `frameRef` on an `OutlineMorphFrame` rendered as the popup's sibling
+ * inside the element that positions it (e.g. Base UI's Positioner), so the
+ * frame is out of flow and moves with the popup. The popup's CSS must
+ * answer `[data-outline-morph]`: its border takes its face color and its
+ * own enter and exit transition is dropped.
+ */
+export function useOutlineMorph(options) {
+    const { open, enabled = true, ring = 'focus-visible', duration, surface = false } = options;
+    const [controller] = React.useState(() => new OutlineMorphController());
+    // Explicit durations only; otherwise the engine reads the tokens at each open and close.
+    const openMs = duration?.open;
+    const closeMs = duration?.close;
+    // A layout effect: both directions start in the commit that changes the popup, before it paints.
+    React.useLayoutEffect(() => {
+        controller.duration =
+            openMs === undefined && closeMs === undefined
+                ? undefined
+                : { open: openMs ?? EXPAND_DURATION_MS.open, close: closeMs ?? EXPAND_DURATION_MS.close };
+        controller.ring = ring;
+        controller.surface = surface;
+        controller.update(open, enabled);
+    }, [controller, open, enabled, ring, surface, openMs, closeMs]);
+    React.useEffect(() => () => controller.stop(), [controller]);
+    return React.useMemo(() => ({
+        sourceRef: controller.sourceRef,
+        targetRef: controller.targetRef,
+        frameRef: controller.frameRef,
+        tailSourceRef: controller.tailSourceRef,
+        tailRef: controller.tailRef,
+    }), [controller]);
+}
+/**
+ * The overlay the morph animates: an empty 2 px frame (the popup's own
+ * weight and color, read at run time), absolutely positioned, hidden
+ * unless a morph runs, `aria-hidden` and never hit-tested.
+ */
+export function OutlineMorphFrame(props) {
+    const { ref, className } = props;
+    return React.createElement("div", { ref: ref, "aria-hidden": "true", className: cx(styles.frame, className) });
+}
+/**
+ * The tail cap [§9.17]: the overlay's copy of a popup's tail, rendered
+ * after `OutlineMorphFrame` in the same container so it paints above the
+ * frame. While the morph runs it sits on the popup's own tail (hidden
+ * meanwhile) and shows only on the trigger side of the frame's trigger-
+ * facing edge, so the tail grows out of that edge as the frame arrives and
+ * is whole as it lands. Its stroke is `currentColor` (the frame's color on
+ * the same timing); its face is `--fgd-outline-morph-tail-fill` (the
+ * popup's). Hidden unless a morph runs, `aria-hidden`, never hit-tested. A
+ * popup without a tail never shows it.
+ */
+export function OutlineMorphTail(props) {
+    const { ref, className, children } = props;
+    return (React.createElement("div", { ref: ref, "aria-hidden": "true", className: cx(styles.tail, className) }, children));
+}
+/**
+ * The container a modal surface's frame sits in, since the surface has no
+ * positioner: fixed, the full viewport, above the surface (`--layer-4`, the
+ * dialogs' layer, rendered after the popup in its portal) and never hit
+ * tested, so the engine measures in viewport coordinates as they are.
+ */
+export function OutlineMorphLayer(props) {
+    const { className, children } = props;
+    return (React.createElement("div", { "aria-hidden": "true", className: cx(styles.layer, className) }, children));
+}
+//# sourceMappingURL=OutlineMorph.js.map

package/foundations/outline-morph/OutlineMorph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineMorph.js","sourceRoot":"","sources":["../../src/foundations/outline-morph/OutlineMorph.tsx"],"names":[],"mappings":"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"}

package/foundations/outline-morph/index.d.ts

@@ -0,0 +1,3 @@
+export * from './OutlineMorph';
+export { OUTLINE_MORPH_ATTRIBUTE, OUTLINE_MORPH_PENDING_ATTRIBUTE, OUTLINE_MORPH_PROPERTY, canOutlineMorph, type OutlineMorphDuration, type OutlineMorphRing, } from './morphEngine';
+//# sourceMappingURL=index.d.ts.map

package/foundations/outline-morph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/foundations/outline-morph/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,sBAAsB,EACtB,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,MAAM,eAAe,CAAA"}

package/foundations/outline-morph/index.js

@@ -0,0 +1,3 @@
+export * from './OutlineMorph';
+export { OUTLINE_MORPH_ATTRIBUTE, OUTLINE_MORPH_PENDING_ATTRIBUTE, OUTLINE_MORPH_PROPERTY, canOutlineMorph, } from './morphEngine';
+//# sourceMappingURL=index.js.map

package/foundations/outline-morph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/foundations/outline-morph/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,sBAAsB,EACtB,eAAe,GAGhB,MAAM,eAAe,CAAA"}

package/foundations/outline-morph/morphEngine.d.ts

@@ -0,0 +1,219 @@
+/** The attribute the popup carries while the overlay draws its frame. */
+export declare const OUTLINE_MORPH_ATTRIBUTE = "data-outline-morph";
+/**
+ * The app-wide (and per-subtree) switch: `none` on the trigger or the popup
+ * (inherited, so `:root` turns every morph off) leaves every popup its own
+ * open and close. Read at each open and close.
+ */
+export declare const OUTLINE_MORPH_PROPERTY = "--fgd-outline-morph";
+/**
+ * The popup's attribute while an open waits for its placement (a frame or
+ * two, at most PLACEMENT_FRAMES): the foundation's CSS holds the popup
+ * clipped away meanwhile (still focusable, as Base UI moves focus in during
+ * the wait), a discrete hold, so it never paints unclipped before the morph
+ * starts [D196]. A timeout removes it and the popup shows at once.
+ */
+export declare const OUTLINE_MORPH_PENDING_ATTRIBUTE = "data-outline-morph-pending";
+/** Durations in ms: `open` grows the outline into the frame, `close` is the faster way back. */
+export type OutlineMorphDuration = {
+    open: number;
+    close: number;
+};
+/**
+ * How the trigger draws its focus ring, so the engine knows when it shows:
+ * - `focus-visible`: on the trigger itself while it matches `:focus-visible`
+ *   (buttons, menu triggers, the Select trigger). Focus moves into the popup
+ *   while it is open and comes back on close.
+ * - `focus-within`: on the trigger (a field's box) whenever anything inside
+ *   it holds focus, pointer focus included (Combobox, Autocomplete, Search:
+ *   `:has(:focus)` or `data-focused`). Focus stays in the input while the
+ *   popup is open, so the ring stays drawn and a close lands on it.
+ */
+export type OutlineMorphRing = 'focus-visible' | 'focus-within';
+/**
+ * Whether the morph may run now: Web Animations, motion allowed, no forced
+ * colors, not printing. Read at each open, so a preference change applies
+ * to the next one.
+ */
+export declare function canOutlineMorph(): boolean;
+/**
+ * The controller behind `useOutlineMorph`. Elements arrive through the ref
+ * callbacks; `update` receives the open state in a layout effect, so both
+ * directions start in the commit that changes the popup, before it paints.
+ */
+export declare class OutlineMorphController {
+    /** Explicit durations (the hook's `duration` option); otherwise the tokens are read at each open and close. */
+    duration: OutlineMorphDuration | undefined;
+    ring: OutlineMorphRing;
+    /** A modal surface (a dialog, a sheet): the `-surface` durations. */
+    surface: boolean;
+    /** The timing of the running morph, read from the trigger when it started. */
+    private timing;
+    /** Every trigger attached (a popup may have several); `source` is the one this open came from. */
+    private sources;
+    private source;
+    private target;
+    private frame;
+    /** The popup's own tail (an adopter's arrow) and the cap that stands in for it while the morph runs. */
+    private tailSource;
+    private tail;
+    private tailAnimation;
+    private tailFlight;
+    private phase;
+    private open;
+    /** Whether the morph was on at the last update (a popup mounting before its open reaches us is held if so). */
+    private enabled;
+    private anticipateFrame;
+    /**
+     * Where a pending open starts (viewport coordinates), the share of the
+     * open duration it runs, and, for a fresh open, the ring it started from.
+     */
+    private pending;
+    private flight;
+    private frameAnimation;
+    private targetAnimation;
+    /** The popup's own frame, read while it shows (its border is the face while the morph runs). */
+    private targetFrame;
+    private placementObserver;
+    private placementFrame;
+    private placementTries;
+    private trackFrame;
+    private settleObserver;
+    private settleTimer;
+    /** A trigger: its focus ring (or edge) is where the morph starts and lands. */
+    readonly sourceRef: (element: HTMLElement | null) => void;
+    /** The popup: its border box and radius are the frame the morph grows into. */
+    readonly targetRef: (element: HTMLElement | null) => void;
+    /** The popup's own tail, if it has one: the cap draws its copy while the morph runs [§9.17]. */
+    readonly tailSourceRef: (element: HTMLElement | null) => void;
+    /** The tail cap, the overlay's tail, rendered after the frame in the same container. */
+    readonly tailRef: (element: HTMLElement | null) => void;
+    /** The overlay frame, a sibling of the popup inside its positioned container. */
+    readonly frameRef: (element: HTMLElement | null) => void;
+    /**
+     * A popup mounted before its open reaches the controller (its owner's
+     * open state can land a commit after Base UI's): held as a pending open
+     * would be, if the morph would run, so it never paints unclipped first.
+     * The open claims the hold; if none comes within two frames, it goes.
+     */
+    private anticipate;
+    /**
+     * The trigger this open belongs to: the only one attached, else the one
+     * marked open (Base UI's `aria-expanded` / `data-popup-open`), else the
+     * one holding focus, else the last attached. Detached ones are dropped.
+     */
+    private pickSource;
+    /**
+     * The popup or the frame detached: once the commit is over, a running
+     * morph stops if it is still gone. A ref that is only reattached (a
+     * merged ref's new identity, React's development double mount) comes
+     * back within the same commit, and a pending open keeps waiting for it.
+     */
+    private detachSoon;
+    /** The popup's positioned container, which also holds the frame. */
+    private get container();
+    /**
+     * A length token's px value: a plain length as is, else resolved on the
+     * trigger itself (`resolveOn`), else through the frame's own
+     * `outline-offset` (the frame is ours, hidden while idle, and its CSS
+     * never sets that property), since a custom property's computed value
+     * keeps `calc()` and font-relative units unresolved.
+     */
+    private readonly resolveLength;
+    /**
+     * Receives the open state, and whether the morph is on, after each commit.
+     * Off (`enabled` false) stops a running morph, so the change the commit
+     * carries happens the popup's own way.
+     */
+    update(open: boolean, enabled: boolean): void;
+    /** Clears everything: animations, observers, the frame and the popup's attribute. */
+    stop(): void;
+    private startOpen;
+    private startClose;
+    /**
+     * Which ring a close lands on. A field that draws its ring on any focus
+     * (`focus-within`) keeps it while focus stays in it. Otherwise focus comes
+     * back to the trigger when the popup hides, with a ring if the focus inside
+     * the popup shows one (the browser carries it over) or if the popup was
+     * closed from the keyboard.
+     */
+    private closingRing;
+    /**
+     * The ring a running close lands on now: drawn once the trigger draws it;
+     * the planned one while focus stays in the trigger or the popup (on its
+     * way back); none once focus has gone elsewhere (an outside press).
+     */
+    private liveRing;
+    /** Starts a pending open once the popup is placed and laid out. Returns whether it started. */
+    private tryStart;
+    /**
+     * The box fixed elements are laid out in: a modal layer's own box (fixed,
+     * inset 0: the viewport less a reserved scrollbar gutter), else the
+     * root's client box.
+     */
+    private viewport;
+    /** The system ring's weight, `--fgd-focus-width` (2 px): a frame's weight where neither end has one. */
+    private defaultWeight;
+    private readTargetFrame;
+    /** The frame's box now, mid-animation, in viewport coordinates. */
+    private currentBox;
+    /** How far the running animation has come (eased, 0–1); 1 when none runs. */
+    private progress;
+    /**
+     * Animates the frame and the popup's clip from one box to the other
+     * (viewport coordinates, converted to the container's) on one timing.
+     * The popup's border takes its face (its attribute) while the frame draws
+     * the edge.
+     */
+    private run;
+    /**
+     * Re-measures the end the morph travels to every frame while it runs; if
+     * it moved (a scroll, a resize, the popup settling its size) or a close's
+     * ring changed (focus came back, or left), both animations take new
+     * keyframes at their current time.
+     */
+    private track;
+    /**
+     * The open lands: in one task the popup's clip and attribute go (its own
+     * border shows) and the frame hides, so nothing changes on screen.
+     */
+    private handOff;
+    /**
+     * The popup's own tail as the cap copies it, in the container's
+     * coordinates, or null (no tail, or not laid out). Its box is exact for
+     * the quarter turns a tail takes. The edge it sits on is read from where
+     * it lies against the popup (so logical sides need no direction rule).
+     */
+    private readTail;
+    /**
+     * Places the cap on the tail (custom properties only), in whole pixels
+     * from the container's corner: the tail's box is laid out, so it paints
+     * snapped to the pixel grid, and a fractional translation would paint the
+     * cap's stroke softer than the tail it hands off to.
+     */
+    private placeTail;
+    /**
+     * The tail cap: a copy of the popup's tail above the frame, shown only on
+     * the trigger side of the frame's trigger-facing inner edge, so it grows
+     * out of that edge as the frame arrives, tip first and always attached,
+     * and is whole exactly as the frame lands; a close retracts it into the
+     * edge. Its stroke takes the frame's color on the same timing, its face
+     * the popup's. Nothing fades.
+     */
+    private startTail;
+    /**
+     * The close lands on the trigger. The frame and the popup's clip hold
+     * their end state until the popup's container hides, which takes the
+     * frame with it in the frame focus returns (so the ring shows at once);
+     * then everything clears. A container that never hides clears after
+     * SETTLE_MS.
+     */
+    private landClose;
+    /** While an open waits for the popup's placement: try now, then watch its container and the popup, and poll a few frames. */
+    private watchPlacement;
+    private cancelPlacement;
+    private cancelTrack;
+    private cancelSettle;
+    private cancelAnimations;
+}
+//# sourceMappingURL=morphEngine.d.ts.map

package/foundations/outline-morph/morphEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morphEngine.d.ts","sourceRoot":"","sources":["../../src/foundations/outline-morph/morphEngine.ts"],"names":[],"mappings":"AAgCA,yEAAyE;AACzE,eAAO,MAAM,uBAAuB,uBAAuB,CAAA;AAE3D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,wBAAwB,CAAA;AAE3D;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,+BAA+B,CAAA;AA6D3E,gGAAgG;AAChG,MAAM,MAAM,oBAAoB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAElE;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG,cAAc,CAAA;AAoI/D;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,OAAO,CAUzC;AAwPD;;;;GAIG;AACH,qBAAa,sBAAsB;IACjC,+GAA+G;IAC/G,QAAQ,EAAE,oBAAoB,GAAG,SAAS,CAAY;IACtD,IAAI,EAAE,gBAAgB,CAAkB;IACxC,qEAAqE;IACrE,OAAO,UAAQ;IACf,8EAA8E;IAC9E,OAAO,CAAC,MAAM,CAA4D;IAE1E,kGAAkG;IAClG,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,KAAK,CAA2B;IACxC,wGAAwG;IACxG,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,aAAa,CAAyB;IAC9C,OAAO,CAAC,UAAU,CAA0B;IAE5C,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,IAAI,CAAQ;IACpB,+GAA+G;IAC/G,OAAO,CAAC,OAAO,CAAO;IACtB,OAAO,CAAC,eAAe,CAAI;IAC3B;;;OAGG;IACH,OAAO,CAAC,OAAO,CAAyD;IACxE,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,cAAc,CAAyB;IAC/C,OAAO,CAAC,eAAe,CAAyB;IAChD,gGAAgG;IAChG,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,cAAc,CAAI;IAC1B,OAAO,CAAC,cAAc,CAAI;IAC1B,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,cAAc,CAAgC;IACtD,OAAO,CAAC,WAAW,CAA2C;IAE9D,+EAA+E;IAC/E,QAAQ,CAAC,SAAS,GAAI,SAAS,WAAW,GAAG,IAAI,UAEhD;IAED,+EAA+E;IAC/E,QAAQ,CAAC,SAAS,GAAI,SAAS,WAAW,GAAG,IAAI,UAahD;IAED,gGAAgG;IAChG,QAAQ,CAAC,aAAa,GAAI,SAAS,WAAW,GAAG,IAAI,UAEpD;IAED,wFAAwF;IACxF,QAAQ,CAAC,OAAO,GAAI,SAAS,WAAW,GAAG,IAAI,UAI9C;IAED,iFAAiF;IACjF,QAAQ,CAAC,QAAQ,GAAI,SAAS,WAAW,GAAG,IAAI,UAM/C;IAED;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAclB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAiBlB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAOlB,oEAAoE;IACpE,OAAO,KAAK,SAAS,GAEpB;IAED;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW7B;IAED;;;;OAIG;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IAc7C,qFAAqF;IACrF,IAAI,IAAI,IAAI;IAYZ,OAAO,CAAC,SAAS;IAyCjB,OAAO,CAAC,UAAU;IAqDlB;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAYnB;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAYhB,+FAA+F;IAC/F,OAAO,CAAC,QAAQ;IA6ChB;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAShB,wGAAwG;IACxG,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,eAAe;IAuBvB,mEAAmE;IACnE,OAAO,CAAC,UAAU;IA4BlB,6EAA6E;IAC7E,OAAO,CAAC,QAAQ;IAKhB;;;;;OAKG;IACH,OAAO,CAAC,GAAG;IAuEX;;;;;OAKG;IACH,OAAO,CAAC,KAAK;IA2Fb;;;OAGG;IACH,OAAO,CAAC,OAAO;IASf;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAyBhB;;;;;OAKG;IACH,OAAO,CAAC,SAAS;IASjB;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS;IAyBjB;;;;;;OAMG;IACH,OAAO,CAAC,SAAS;IAkBjB,6HAA6H;IAC7H,OAAO,CAAC,cAAc;IA4BtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;CAWzB"}