@astryxdesign/core 0.7.6-canary.554e9bc → 0.7.6-canary.5909b93

package/dist/SideNav/railMotion.d.ts

@@ -1,4 +1,4 @@
-import { type AnimatedLayout, type LayoutSwap } from '../motion/animatedLayout.js';
+import { type AnimatedLayout, type LayoutEdgeHold, type LayoutSwap } from '../motion/animatedLayout.js';
 /** What AppShell lends its SideNav; outside AppShell, nothing. */
 export interface SideNavShell {
     /** AppShell's own handle, whose area holds the rail and the content. */
@@ -26,12 +26,12 @@ export interface RailShown {
     readonly collapsed: number;
 }
 export interface RailSnapshot {
-    readonly rail: HTMLElement;
-    readonly railRect: DOMRect;
+    /** The old rail, held for the module's edge reveal. */
+    readonly hold: LayoutEdgeHold;
+    /** The old rail as one transient copy, or null when it cannot be held. */
+    readonly swap: LayoutSwap | null;
     /** What the rail shows when the change lands. */
     readonly shown: RailShown;
-    /** The old rail, held by the swap. */
-    readonly swap: LayoutSwap | null;
 }
 /** A playing rail motion. */
 export interface RailMotion {

package/dist/SideNav/railMotion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"railMotion.d.ts","sourceRoot":"","sources":["../../src/SideNav/railMotion.ts"],"names":[],"mappings":"AA4CA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,0BAA0B,CAAC;AAElC,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;IACxC,6DAA6D;IAC7D,IAAI,IAAI,WAAW,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,MAAM,IAAI,WAAW,GAAG,IAAI,CAAC;IAC7B,0EAA0E;IAC1E,gBAAgB,IAAI,IAAI,CAAC;IACzB,uEAAuE;IACvE,eAAe,IAAI,MAAM,IAAI,CAAC;IAC9B,wEAAwE;IACxE,WAAW,IAAI,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,8CAA2C,CAAC;AAG5E,uEAAuE;AACvE,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,WAAW,GAAG,IAAI,GAC7B,cAAc,CAEhB;AAED,+DAA+D;AAC/D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,iDAAiD;IACjD,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;CAClC;AAED,6BAA6B;AAC7B,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,GAAG,IAAI,IAAI,CAAC;IACZ,4DAA4D;IAC5D,KAAK,IAAI,SAAS,GAAG,IAAI,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,SAAS,GAAG,IAAI,EACzB,WAAW,EAAE,OAAO,GACnB,YAAY,GAAG,IAAI,CAerB;AAwBD;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,MAAM,EAAE,cAAc,EACtB,MAAM,GAAE,WAAW,GAAG,IAAW,GAChC,UAAU,CAsJZ"}
+{"version":3,"file":"railMotion.d.ts","sourceRoot":"","sources":["../../src/SideNav/railMotion.ts"],"names":[],"mappings":"AA8CA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,0BAA0B,CAAC;AAElC,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;IACxC,6DAA6D;IAC7D,IAAI,IAAI,WAAW,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,MAAM,IAAI,WAAW,GAAG,IAAI,CAAC;IAC7B,0EAA0E;IAC1E,gBAAgB,IAAI,IAAI,CAAC;IACzB,uEAAuE;IACvE,eAAe,IAAI,MAAM,IAAI,CAAC;IAC9B,wEAAwE;IACxE,WAAW,IAAI,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,8CAA2C,CAAC;AAG5E,uEAAuE;AACvE,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,WAAW,GAAG,IAAI,GAC7B,cAAc,CAEhB;AAED,+DAA+D;AAC/D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,iDAAiD;IACjD,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;CAC3B;AAED,6BAA6B;AAC7B,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,GAAG,IAAI,IAAI,CAAC;IACZ,4DAA4D;IAC5D,KAAK,IAAI,SAAS,GAAG,IAAI,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,SAAS,GAAG,IAAI,EACzB,WAAW,EAAE,OAAO,GACnB,YAAY,GAAG,IAAI,CAkBrB;AAaD;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,MAAM,EAAE,cAAc,EACtB,MAAM,GAAE,WAAW,GAAG,IAAW,GAChC,UAAU,CAmDZ"}

package/dist/SideNav/railMotion.js

@@ -5,7 +5,7 @@
 /**
  * @file railMotion.ts
  * @input The rail's outer element, the animated-layout module's handle,
- *   motion and in-place swap (motion/animatedLayout.ts)
+ *   motion and two-state edge reveal (motion/animatedLayout.ts)
  * @output Exports `SideNavShellContext` (what AppShell lends its SideNav),
  *   `createRailLayout`, `snapshotRail` and `playRail`: the rail's collapse
  *   motion
@@ -14,34 +14,36 @@
  *
  * Collapsing or expanding the rail plays one motion on one clock, the
  * `springs.settle` role the animated-layout module reads (`spec:AST-105`
- * FR4):
- * - Layout snaps to the final rail width at once; nothing animates a width.
- * - A collapse covers the old rail by a clip: the module's in-place swap
- *   (`spec:AST-105` FR8) holds the old, expanded rail as one transient copy
- *   and the clip closes it to the new width. The copy's text fades over the
- *   first 40%; the real collapsed rail, raised above the copy, fades in over
- *   the last 30%, so the real rail, icons only, is all that remains.
- * - An expand reveals the real rail by a clip from the old width, its text
- *   fading in over the last 60% so no label shows at the collapsed width,
- *   under the old, collapsed rail held by the same swap, which fades over the
- *   first 60%: the first frame is the frame before the click.
- * - In AppShell the rail's edge rides the content column's glide, frame by
- *   frame, so the two never part, also when a change interrupts a running
- *   one; the copy is laid in the row that holds both.
+ * FR4). The rail is FR9's edge reveal in its inline two-state form, which
+ * the module produces (`architecture:react-component-runtime` INV12): layout
+ * snaps to the final rail width at once, nothing animates a width, and the
+ * module clips the rail's inline-end edge from the width it shows to the new
+ * one. A collapse covers the old, expanded rail, held as one transient copy,
+ * with the real collapsed rail raised above it; an expand reveals the real
+ * rail under the old, collapsed one. In AppShell that edge rides the content
+ * column's glide, frame by frame, so the two never part, also when a change
+ * interrupts a running one. Every starting clip applies in the commit's
+ * layout effect, before the first frame paints. Under Reduce Motion it
+ * follows `design:reduced-motion`: opacity only under a coarse primary
+ * pointer (DR2), an immediate change otherwise (DR3). Without Web
+ * Animations, the change lands at once.
+ *
+ * What this file adds is the rail's own fades, on the same progress:
+ * - A collapse fades the copy's text over the first 40% and the copy over
+ *   the last 30%, while the real collapsed rail, its icons, fades in over the
+ *   last 30%, so the real rail, icons only, is all that remains.
+ * - An expand fades the real rail's text in over the last 60%, so no label
+ *   shows at the collapsed width, while the old, collapsed rail fades over
+ *   the first 60%: the first frame is the frame before the click.
  * - A change made during a running motion starts from what the rail shows:
  *   its width, its labels' opacity and its collapsed icons' opacity, so the
  *   rail stays continuous.
- * - Every starting clip applies in the commit's layout effect, before the
- *   first frame paints.
- * - Under Reduce Motion it follows `design:reduced-motion`: opacity only
- *   under a coarse primary pointer (DR2), an immediate change otherwise
- *   (DR3). Without Web Animations, the change lands at once.
  *
  * SYNC: When modified, update SideNav.tsx, AppShell.tsx and
  * SideNavRailMotion.test.tsx.
  */
 import { createContext } from 'react';
-import { createAnimatedLayout, holdLayoutSwap, layoutMotionFor, playLayoutFrames, playLayoutSwap } from "../motion/animatedLayout.js";
+import { createAnimatedLayout, holdLayoutEdge, playLayoutEdge } from "../motion/animatedLayout.js";
 
 /** What AppShell lends its SideNav; outside AppShell, nothing. */
 
@@ -62,19 +64,22 @@ export function createRailLayout(rail) {
  * from a running motion or at rest.
  */
 export function snapshotRail(rail, handle, running, isCollapsed) {
-  if (rail == null || typeof rail.animate !== 'function') {
+  // The rail's edge is the one beside the content, its inline end.
+  const hold = holdLayoutEdge(handle, rail, {
+    edge: 'inline-end',
+    shown: running?.width ?? null
+  });
+  if (hold == null) {
     return null;
   }
-  const railRect = rail.getBoundingClientRect();
   return {
-    rail,
-    railRect,
+    hold,
+    swap: hold.swap,
     shown: running ?? {
-      width: railRect.width,
+      width: hold.extent,
       labels: isCollapsed ? 0 : 1,
       collapsed: isCollapsed ? 1 : 0
-    },
-    swap: holdLayoutSwap(handle, rail)
+    }
   };
 }
 const clamp = value => Math.min(1, Math.max(0, value));
@@ -84,19 +89,6 @@ function textElements(rail) {
   return Array.from(rail.querySelectorAll('*')).filter(element => Array.from(element.childNodes).some(node => node.nodeType === 3 && node.textContent?.trim()));
 }
 
-/** `element`'s ancestor (or itself) that sits directly in `host`. */
-function childOf(host, element) {
-  let node = element;
-  while (node != null && node.parentElement !== host) {
-    node = node.parentElement;
-  }
-  return node;
-}
-const AT_REST = {
-  end: () => {},
-  shown: () => null
-};
-
 /**
  * After the change commits, before paint: play the rail's motion from the
  * snapshot, on the module's motion. With a `column` (in AppShell), the rail's
@@ -104,150 +96,50 @@ const AT_REST = {
  */
 export function playRail(snapshot, current, handle, column = null) {
   const {
-    railRect,
-    swap,
     shown: from
   } = snapshot;
-  // The rail as it is now: a resizable rail's nav remounts when its resize
-  // wrapper comes and goes with the collapse.
-  const rail = current?.isConnected === true ? current : snapshot.rail;
-  if (!rail.isConnected) {
-    return AT_REST;
-  }
-  const motion = layoutMotionFor(rail);
-  const next = rail.getBoundingClientRect();
-  if (motion.kind === 'instant' || Math.abs(next.width - from.width) < 0.5) {
-    return AT_REST;
-  }
-  const isCollapse = next.width < from.width;
+  let isCollapse = false;
   // The labels and the collapsed icons over the motion's progress, from what
   // the rail showed.
   const labelsAt = p => isCollapse ? from.labels * (1 - clamp(p / 0.4)) : from.labels + (1 - from.labels) * clamp((p - 0.4) / 0.6);
   const collapsedAt = p => isCollapse ? from.collapsed + (1 - from.collapsed) * clamp((p - 0.7) / 0.3) : from.collapsed * (1 - clamp(p / 0.6));
-  const rtl = getComputedStyle(rail).direction === 'rtl';
-  const sign = rtl ? -1 : 1;
-  const inset = px => rtl ? `inset(0px 0px 0px ${px}px)` : `inset(0px ${px}px 0px 0px)`;
-  // The row that holds the rail and the column, or the rail's parent.
-  const host = column?.parentElement != null && column.parentElement.contains(rail) ? column.parentElement : rail.parentElement;
-  // Riding needs the swap: its frames carry the column's travel. Without one
-  // (old content that cannot be copied) the clip follows the motion's curve.
-  const rides = host != null && column?.parentElement === host && swap != null;
-  // The width the rail shows over the motion: on the column's glide (its
-  // travel so far added to where it started), or on the motion's curve.
-  const widthAt = (p, ride) => rides ? from.width + sign * ride.x : from.width + (next.width - from.width) * p;
-  const now = () => Number(rail.ownerDocument.timeline?.currentTime ?? 0);
-  const startedAt = now();
-  const durationMs = motion.kind === 'spring' ? motion.progress.durationMs : motion.durationMs;
-  const shown = () => {
-    const elapsed = now() - startedAt;
-    if (elapsed >= durationMs) {
-      return null;
+  const motion = playLayoutEdge(snapshot.hold, current, handle, {
+    edge: 'inline-end',
+    rideWith: column,
+    parts: (isConceal, rail) => {
+      isCollapse = isConceal;
+      return isConceal ? {
+        // The old rail's text fades early, the copy late, as the real
+        // collapsed rail, raised above it, fades in.
+        copyOpacity: p => 1 - clamp((p - 0.7) / 0.3),
+        copyText: labelsAt,
+        incoming: [{
+          element: rail,
+          frames: p => ({
+            opacity: collapsedAt(p)
+          })
+        }]
+      } : {
+        // The old, collapsed rail fades early; the real rail's text, late.
+        copyOpacity: collapsedAt,
+        incoming: textElements(rail).map(element => ({
+          element,
+          frames: p => ({
+            opacity: labelsAt(p)
+          })
+        }))
+      };
     }
-    const p = motion.kind === 'spring' ? 1 - motion.progress.remaining(elapsed) : 0;
-    let width = from.width + (next.width - from.width) * p;
-    if (rides && column != null) {
-      // The rail's edge is the column's: read it where it shows.
-      const edge = column.getBoundingClientRect();
-      const own = rail.getBoundingClientRect();
-      width = rtl ? own.right - edge.right : edge.left - own.left;
-    }
-    return {
-      width,
-      labels: labelsAt(p),
-      collapsed: collapsedAt(p)
-    };
-  };
-  const rideWith = rides && column != null ? {
-    element: column,
-    travel: {
-      x: sign * (from.width - next.width),
-      y: 0
-    },
-    isCopyMoved: false
-  } : undefined;
-  // The copy keeps the rail's inline-start edge where the rail is now, so it
-  // meets the real rail wherever SideNav sits (a centered rail moves).
-  const at = DOMRect.fromRect({
-    x: rtl ? next.right - railRect.width : next.left,
-    y: next.top,
-    width: railRect.width,
-    height: railRect.height
   });
-  if (isCollapse) {
-    // A collapse covers the old rail, held by the swap, from the width it
-    // shows down to the new one; the real, collapsed rail fades in above it.
-    if (swap == null || host == null) {
-      return AT_REST;
-    }
-    const raised = childOf(host, rail);
-    const restore = raised == null ? null : {
-      position: raised.style.position,
-      zIndex: raised.style.zIndex
-    };
-    if (raised != null) {
-      if (getComputedStyle(raised).position === 'static') {
-        raised.style.position = 'relative';
-      }
-      raised.style.zIndex = '2';
-    }
-    const end = playLayoutSwap({
-      ...swap,
-      rect: at
-    }, {
-      host,
-      isOpaque: true,
-      copy: (p, ride) => ({
-        clipPath: inset(railRect.width - widthAt(p, ride)),
-        opacity: 1 - clamp((p - 0.7) / 0.3)
-      }),
-      copyText: labelsAt,
-      rideWith,
-      onEnd: () => {
-        if (raised != null && restore != null) {
-          raised.style.position = restore.position;
-          raised.style.zIndex = restore.zIndex;
-        }
-      },
-      incoming: [{
-        element: rail,
-        frames: p => ({
-          opacity: collapsedAt(p)
-        })
-      }]
-    });
-    return {
-      end,
-      shown
-    };
-  }
-
-  // An expand reveals the real rail from the width it showed, its text fading
-  // in late, under the old, collapsed rail fading early.
-  const incoming = [{
-    element: rail,
-    frames: (p, ride) => ({
-      clipPath: inset(next.width - widthAt(p, ride))
-    })
-  }, ...textElements(rail).map(element => ({
-    element,
-    frames: p => ({
-      opacity: labelsAt(p)
-    })
-  }))];
-  const end = swap != null && host != null ? playLayoutSwap({
-    ...swap,
-    rect: at
-  }, {
-    host,
-    isOpaque: true,
-    copy: p => ({
-      opacity: collapsedAt(p)
-    }),
-    rideWith,
-    incoming
-  }) : playLayoutFrames(handle, incoming);
   return {
-    end,
-    shown
+    end: motion.end,
+    shown: () => {
+      const now = motion.shown();
+      return now == null ? null : {
+        width: now.extent,
+        labels: labelsAt(now.progress),
+        collapsed: collapsedAt(now.progress)
+      };
+    }
   };
 }

package/dist/motion/animatedLayout.d.ts

@@ -58,13 +58,26 @@ export interface LayoutChange {
  * outside its container, nothing moves.
  */
 export declare function reportLayoutChange(handle: AnimatedLayout | null | undefined, target: Target): LayoutChange;
+/**
+ * The edge an element reveals from or conceals to (`spec:AST-105` FR9): its
+ * block-end edge by default, or its block-start, inline-start or inline-end
+ * edge, such as a panel collapsing beside content. An inline edge follows
+ * the element's direction.
+ */
+export type LayoutEdge = 'block-end' | 'block-start' | 'inline-start' | 'inline-end';
 /**
  * The changed element's own animation, on the same motion as the content
- * after it: content that appears reveals downward from its top edge. Plays
- * only with a handle, inside its area and in the area's visible part.
- * Returns the entrance it started, or null when it played none.
+ * after it (`spec:AST-105` FR4): content that appears reveals from its
+ * block-end edge downward, or from the `edge` it is given (FR9), and its edge
+ * rides the glide of the content on that side once it starts. A reveal that
+ * reverses a running conceal (an adopter opens it again mid-exit, after
+ * `releaseLayoutExit`) starts from what the element shows. Plays only with a
+ * handle, inside its area and in the area's visible part. Returns the
+ * entrance it started, or null when it played none.
  */
-export declare function playLayoutChange(handle: AnimatedLayout | null | undefined, element: Element): Animation | null;
+export declare function playLayoutChange(handle: AnimatedLayout | null | undefined, element: Element, { edge }?: {
+    edge?: LayoutEdge;
+}): Animation | null;
 /**
  * The changed element's exit (`spec:AST-105` FR4): content that disappears
  * keeps its place on screen but gives up its space (a negative end margin
@@ -77,6 +90,11 @@ export declare function playLayoutChange(handle: AnimatedLayout | null | undefin
  * element, after the change's `animate()` reported it measured, in the same
  * task: the glide reads the layout once the element has given up its space.
  *
+ * It conceals to its block-end edge by default, or to the `edge` it is given
+ * (`spec:AST-105` FR9), and its edge rides the glide of the content on that
+ * side once it starts; a conceal that reverses a running reveal (a close
+ * while it opens) starts from what the element shows.
+ *
  * Returns false, holding nothing, when the exit lands at once: no handle, a
  * close no change in the area measured, outside the area or its visible part,
  * Reduce Motion with a fine pointer, or a layout no end margin can free (a
@@ -84,7 +102,9 @@ export declare function playLayoutChange(handle: AnimatedLayout | null | undefin
  * that last case the content after it takes its final place at once too.
  * The component then hides the element itself.
  */
-export declare function holdLayoutExit(handle: AnimatedLayout | null | undefined, element: HTMLElement, done: () => void): boolean;
+export declare function holdLayoutExit(handle: AnimatedLayout | null | undefined, element: HTMLElement, done: () => void, { edge }?: {
+    edge?: LayoutEdge;
+}): boolean;
 /**
  * Puts an element `holdLayoutExit` held back: stops its exit and puts back
  * what the exit replaced (its `inert` and inline values as they were). Called
@@ -167,6 +187,111 @@ export declare function playLayoutSwap(swap: LayoutSwap, how: LayoutSwapMotion):
  * nothing plays. Returns what ends them at once.
  */
 export declare function playLayoutFrames(handle: AnimatedLayout | null | undefined, parts: LayoutSwapMotion['incoming']): () => void;
+/**
+ * An element's old state, held before a change commits for FR9's two-state
+ * edge reveal.
+ */
+export interface LayoutEdgeHold {
+    readonly element: HTMLElement;
+    /** Where it showed, in viewport coordinates. */
+    readonly rect: DOMRect;
+    /**
+     * Its size along the edge's axis as it shows: what a running reveal shows
+     * mid-motion, or its box.
+     */
+    readonly extent: number;
+    /** Its old state as one transient copy, or null when it cannot be held. */
+    readonly swap: LayoutSwap | null;
+}
+/** A playing two-state edge reveal. */
+export interface LayoutEdgeMotion {
+    /** Ends it at once (a new change, an unmount). */
+    end(): void;
+    /**
+     * What it shows now: its extent along the edge's axis and the motion's
+     * progress (0 → 1), or null once it has settled.
+     */
+    shown(): {
+        readonly extent: number;
+        readonly progress: number;
+    } | null;
+}
+/** What the caller adds to a two-state edge reveal: only its own fades. */
+export interface LayoutEdgeParts {
+    /** The old state's copy's opacity over the progress (1 when absent). */
+    readonly copyOpacity?: (p: number) => number;
+    /** Its text's opacity, on its own curve, when that differs from the copy's. */
+    readonly copyText?: (p: number) => number;
+    /** Parts the page renders, playing with the reveal (the new state's text). */
+    readonly incoming?: ReadonlyArray<{
+        readonly element: Element;
+        readonly frames: (p: number) => Keyframe;
+    }>;
+}
+/**
+ * Before a change commits: hold `element`'s old state for FR9's two-state edge
+ * reveal, its box and the extent it shows along `edge`'s axis (`shown`, from a
+ * running reveal, or its box), and its old state as one transient copy (null
+ * when it cannot be copied, or under an immediate change). Returns null
+ * without the element or without Web Animations.
+ */
+export declare function holdLayoutEdge(handle: AnimatedLayout | null | undefined, element: HTMLElement | null, { edge, shown, }?: {
+    edge?: LayoutEdge;
+    shown?: number | null;
+}): LayoutEdgeHold | null;
+/**
+ * After the change commits, before paint: FR9's two-state edge reveal, on
+ * FR4's one motion. The state that is larger along `edge`'s axis is clipped
+ * on that edge, from the extent the element showed to the new one: a conceal
+ * covers the old state, held as the swap's copy, with the element raised
+ * above it; a reveal opens the element, under the old state. With
+ * `rideWith`, an element the glide moves after that edge (a rail's content
+ * column), the edge rides its glide, frame by frame, so the two never part,
+ * also when this reverses a running reveal; without it the edge follows the
+ * motion's curve. `parts` gives the caller's own fades, told whether the edge
+ * conceals and the element as it is now. Under Reduce Motion it follows
+ * `design:reduced-motion`: opacity only under a coarse primary pointer (DR2),
+ * an immediate change otherwise (DR3). `current` is the element after the
+ * commit, when it remounted.
+ */
+export declare function playLayoutEdge(hold: LayoutEdgeHold, current: HTMLElement | null, handle: AnimatedLayout, { edge, rideWith, parts, }?: {
+    edge?: LayoutEdge;
+    rideWith?: Element | null;
+    parts?: (isConceal: boolean, element: HTMLElement) => LayoutEdgeParts;
+}): LayoutEdgeMotion;
+/** A resized element's edge reveal, reported around its change. */
+export interface LayoutEdgeReport {
+    /** Before the change commits: measures the element and what moves. */
+    measureBefore(): void;
+    /**
+     * After the new size is applied, before paint: the element reveals or
+     * conceals by its edge, from the extent it showed to its new one, and the
+     * content beside it glides on the same motion.
+     */
+    animate(): void;
+    /** Ends a running reveal or conceal at once, removing what it holds. */
+    cancel(): void;
+}
+/**
+ * Reports a resized element's edge reveal (`spec:AST-105` FR9) with no copy:
+ * a resize controller's pane collapsing or opening beside the content it
+ * shares a row with (`component:Resizable` FR8, `component:LayoutPanel`
+ * FR7). Measure before the change commits and animate after the
+ * new size is applied, as `reportLayoutChange` does; the content beside the
+ * element glides through that report. A larger extent reveals by `edge` from
+ * the extent the element showed. A smaller one conceals: the element is held
+ * at the extent it was laid out at, the difference freed by the margin on
+ * that edge's side so the content beyond it stays where the new size puts it,
+ * and clipped down to its new extent; the hold goes when the motion ends. The
+ * moving edge rides the glide of the content on that side, frame by frame,
+ * and a change made while it runs starts from the extent it shows. It slides:
+ * nothing fades. Under Reduce Motion with a coarse primary pointer a reveal
+ * fades in and a conceal lands at once (`design:reduced-motion` DR2); with a
+ * fine one every change lands at once (DR3).
+ */
+export declare function reportLayoutEdge(handle: AnimatedLayout | null | undefined, getElement: () => HTMLElement | null, { edge }?: {
+    edge?: LayoutEdge;
+}): LayoutEdgeReport;
 /**
  * A disclosure's indicator (its chevron) turns on the same motion as the
  * glide: its CSS transition takes the spring as a `linear()` easing, and an

package/dist/motion/animatedLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animatedLayout.d.ts","sourceRoot":"","sources":["../../src/motion/animatedLayout.ts"],"names":[],"mappings":"AA6FA,sDAAsD;AACtD,KAAK,YAAY,GACb;IAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAA;CAAC,GAC5D;IACE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAE/B,yEAAyE;AACzE,UAAU,cAAc;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAgQD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAE1D;AAMD,QAAA,MAAM,IAAI,eAAuC,CAAC;AAElD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;CACvC;AAED,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,OAAO,GAAG,IAAI,GACzB,cAAc,CAKhB;AAsoBD,KAAK,MAAM,GAAG;IAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CAAC,GAAG,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC;AAM1E,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,aAAa,IAAI,IAAI,CAAC;IACtB;;;;;;;;;OASG;IACH,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC;CAC7E;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,MAAM,EAAE,MAAM,GACb,YAAY,CAyEd;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,OAAO,EAAE,OAAO,GACf,SAAS,GAAG,IAAI,CA6BlB;AA8JD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,IAAI,GACf,OAAO,CAoFT;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAkB5D;AAMD;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AAED,+DAA+D;AAC/D,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,qEAAqE;IACrE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,QAAQ,CAAC;IACzD,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;QAC1B,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;QAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;KAChC,CAAC;IACF,uDAAuD;IACvD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;QAC/B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;QAC1B,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,QAAQ,CAAC;KAC5D,CAAC,CAAC;CACJ;AAID;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,OAAO,EAAE,WAAW,EACpB,EAAC,aAAqB,EAAC,GAAE;IAAC,aAAa,CAAC,EAAE,OAAO,CAAA;CAAM,GACtD,UAAU,GAAG,IAAI,CAmBnB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,gBAAgB,GACpB,MAAM,IAAI,CAqHZ;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,KAAK,EAAE,gBAAgB,CAAC,UAAU,CAAC,GAClC,MAAM,IAAI,CAkCZ;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,OAAO,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,GACvC,IAAI,CAwBN;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAMtD;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,YAAY,CAE3D"}
+{"version":3,"file":"animatedLayout.d.ts","sourceRoot":"","sources":["../../src/motion/animatedLayout.ts"],"names":[],"mappings":"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"}