@flemo/core 1.30.0 → 2.0.0

package/dist/core/engine/__tests__/createSwipeController.dragHooks.test.d.ts

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

package/dist/core/engine/__tests__/createSwipeController.layerRelease.test.d.ts

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

package/dist/core/engine/__tests__/layerRiders.test.d.ts

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

package/dist/core/engine/createSwipeController.d.ts

@@ -24,6 +24,11 @@ export interface SwipeControllerConfig {
     getPartnerBarMetadata?: () => SharedBarsMetadata | undefined;
     setDragStatus: (status: "IDLE" | "PENDING") => void;
     back: () => void;
+    onDragStart?: () => void;
+    /** 0 at rest, 1 at the point the gesture would commit. */
+    onDragProgress?: (progress: number) => void;
+    /** The release: whether it committed, and the seconds the screens settle in. */
+    onDragSettle?: (committed: boolean, seconds: number) => void;
 }
 export interface SwipeController {
     pointerDown: (event: PointerEvent) => void;

package/dist/core/engine/diagnosticFlags.d.ts

@@ -1,4 +1,5 @@
 export declare const readImageHoldFlag: () => "on" | "off" | null;
+export declare const morphTraceArmed: () => boolean;
 export declare const readSettleGateFlag: () => boolean;
 export declare const readArrivalHoldFlag: () => boolean;
 export declare const readDesktopReleaseFlipFlag: () => boolean;

package/dist/core/engine/flightRouting.d.ts

@@ -67,4 +67,25 @@ export interface FlightRoutingInput {
     /** The active variant has an authored animation at all. */
     readonly hasAnimation: boolean;
 }
+/**
+ * WHICH HEAD KIT this session plays, and how long its flat head is.
+ *
+ * Extracted so it has exactly one definition. It is a pure function of the
+ * platform, the diagnostic flags and the status — nothing about the flight —
+ * and the MORPH runtime needs the same answer at a moment when it cannot get
+ * it from the DOM: the head is announced by an attribute on the root, and the
+ * engine writes that attribute from the SAME commit the morph is staged in.
+ * React runs a descendant's layout effect first, so a morph reading the
+ * attribute reads the PREVIOUS flight's answer — right by luck from the second
+ * navigation on, and wrong on the first, which is what made a first push run
+ * its element 33ms ahead of the screen carrying it while every push after it
+ * was aligned.
+ */
+export declare const resolveHeadKit: (status: string) => {
+    touchGoverned: boolean;
+    forceCompiled: boolean;
+    governedHead: boolean;
+    desktopHead: boolean;
+    headMs: number;
+};
 export declare const resolveFlightRouting: (input: FlightRoutingInput) => FlightRouting;

package/dist/core/engine/layerRiders.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The `<Layer>` overlays that move with the screen in this container.
+ *
+ * Two shapes, because a host is inherited. A screen that renders its OWN host
+ * moves everything portaled into it by moving that one box. A screen NESTED
+ * inside such a host has its overlays in a container that is not its own, and
+ * no walk of its subtree can find them — so they are matched by the owner id
+ * they carry.
+ *
+ * Never both: driving a host and the slots inside it would compose the two
+ * writes and send the overlay twice as far as its screen.
+ */
+export declare const collectLayerRiders: (container: HTMLElement | null) => HTMLElement[];
+/**
+ * Whether an element beside a scope is riding this flight.
+ *
+ * A bar rides only when its partner screen does not own it, so it says so with
+ * an attribute the binding flips per flight. An overlay has exactly one screen
+ * and always leaves with it, so being a host or a slot is the whole answer.
+ */
+export declare const isRider: (element: HTMLElement | null | undefined) => element is HTMLElement;

package/dist/core/engine/types.d.ts

@@ -11,6 +11,7 @@ export interface ScreenLifecycleInput {
         scope: HTMLElement | null;
         decorator?: HTMLElement | null;
         bars?: (HTMLElement | null | undefined)[];
+        screenContainer?: HTMLElement | null;
     };
     transitionName: TransitionName;
     prevTransitionName: TransitionName;

package/dist/dom/__tests__/stacking.test.d.ts

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

package/dist/dom/attributes.d.ts

@@ -1,6 +1,12 @@
 /** Shared prefix. Every attribute below starts with it. */
 export declare const FLEMO_ATTR_PREFIX = "data-flemo-";
-/** Marks a screen scope. Presence only — the value carries nothing. */
+/**
+ * Marks a screen scope, and carries that screen's id.
+ *
+ * The value was empty until a `<Layer>` slot needed to name the screen it
+ * belongs to from the DOM alone. Presence selectors are unaffected, which is
+ * what every existing reader uses; nothing may start requiring the value.
+ */
 export declare const SCREEN_ATTR = "data-flemo-screen";
 /** The navigation status this screen is rendering: a `NavigateStatus` value. */
 export declare const STATUS_ATTR = "data-flemo-status";
@@ -43,12 +49,130 @@ export declare const BAR_SPACER_ATTR = "data-flemo-bar-spacer";
 export declare const DECORATOR_ATTR = "data-flemo-decorator";
 /** The decorator definition's name, for its own compiled rules. */
 export declare const DECORATOR_NAME_ATTR = "data-flemo-decorator-name";
+/**
+ * The HOST: one childless box per screen chain, rendered by the OUTERMOST
+ * screen's container and inherited by every screen nested inside it. Outermost
+ * because an overlay has to clear the chrome of every screen above its own,
+ * and chrome declared by an ancestor sits outside that ancestor's scope.
+ *
+ * It is `position: absolute` and full-size so a consumer's absolutely
+ * positioned overlay has the region to anchor to, and it never takes a pointer
+ * itself — a host with nothing in it must not swallow taps meant for the
+ * screen underneath.
+ */
+export declare const LAYER_HOST_ATTR = "data-flemo-layer-host";
+/**
+ * A SLOT: one per `<Layer>`, portaled into the host, carrying its owning
+ * screen's identity. This is what keeps the escape from becoming an orphan —
+ * the slot leaves the screen's box for PAINT ORDER only, and takes the rest of
+ * being that screen with it:
+ *
+ * - it stacks by its owner's position, so two screens' overlays order the way
+ *   their screens do rather than by portal mount order
+ * - it carries its owner's status/active/transition, so the compiled screen
+ *   rule animates it in lockstep and it leaves WITH its screen (the same
+ *   pairing a riding shared bar uses)
+ * - it mirrors its owner's paint-hidden state, which `visibility: hidden` on
+ *   the screen container cannot reach across a portal
+ *
+ * Unmounting is React's: the slot is rendered from inside its screen's
+ * subtree, so it dies with the screen without anything having to notice.
+ */
+export declare const LAYER_SLOT_ATTR = "data-flemo-layer-slot";
+/**
+ * The id (see SCREEN_ATTR) of the screen a slot belongs to.
+ *
+ * A slot sits in an ancestor's host, so nothing about where it IS says whose
+ * it is. The gesture driver needs to: a drag moves a screen by writing inline
+ * styles frame by frame rather than through the compiled rules, so it has to
+ * enumerate everything that rides along, and it finds those by walking the
+ * moving screen's container. A slot is not in that container. This is how it
+ * is found anyway — the same problem a shared bar does not have, because a bar
+ * never leaves the container it belongs to.
+ */
+export declare const LAYER_OWNER_ATTR = "data-flemo-layer-owner";
 /**
  * A `<Part>`'s registered part-transition name. Parts self-carry their screen's
  * status/active (STATUS_ATTR/ACTIVE_ATTR) so the compiled part selectors and
  * the engine's participant scan can both find them.
  */
 export declare const PART_NAME_ATTR = "data-flemo-part-name";
+/**
+ * Marks a registered morph element. Presence only — the value is the ROLE
+ * (see MORPH_ROLE). Written by the binding, read by the morph runtime (to find
+ * the pair), by the compiled hold rule (so a morph pauses with its screen),
+ * and by devtools.
+ */
+export declare const MORPH_ATTR = "data-flemo-morph";
+/** The morph's side of the flight, stamped by the runtime for its duration. */
+export declare const MORPH_ROLE: {
+    /** The arriving element: it travels from its partner's rect to its own. */
+    readonly ENTER: "enter";
+    /** The element left behind: it stays put and trades places with the arrival. */
+    readonly EXIT: "exit";
+};
+/**
+ * The registered morph-transition name for this element, so a consumer can run
+ * different morph choreography per element. Absent means the default preset.
+ */
+export declare const MORPH_NAME_ATTR = "data-flemo-morph-name";
+/**
+ * The per-Router FLIGHT LAYER: the box a shared element is staged in while it
+ * travels. Rendered by the binding (a Router knows which box bounds its
+ * screens); the morph runtime moves the element in at the start of a flight and
+ * back on landing. A morph inside a screen would be clipped by it, covered by
+ * it and dragged along with it — all three are properties of being a
+ * descendant, so for the flight it stops being one.
+ */
+export declare const MORPH_LAYER_ATTR = "data-flemo-morph-layer";
+/**
+ * The morph's placeholder: the box that stays behind in the layout, at the
+ * element's own size, while the element itself is up in the flight layer. It is
+ * what keeps the arriving screen laid out exactly as it will be at rest, so the
+ * landing has somewhere true to land.
+ */
+export declare const MORPH_SLOT_ATTR = "data-flemo-morph-slot";
+/**
+ * The STAND-IN: a copy of the element that is flying, left in its slot to hold
+ * its place in the layout.
+ *
+ * A placeholder measured in pixels is a placeholder that can be wrong, and
+ * "wrong" here is a layout shift lasting exactly as long as the flight. A copy
+ * of the element cannot be: the layout has no way to tell it apart from what
+ * was there — same box, same margins, same baseline. It paints nothing and
+ * takes no input, and it is replaced by the real element on landing. Owned
+ * entirely by the morph runtime.
+ */
+export declare const MORPH_STAND_IN_ATTR = "data-flemo-morph-stand-in";
+/**
+ * The GHOST: a copy of the element being replaced, carried inside the flight so
+ * the travelling box shows what was actually there at the start instead of the
+ * arrival's content squeezed into the departure's size. It cross-fades into the
+ * real element and is removed on landing. Owned entirely by the morph runtime.
+ */
+export declare const MORPH_GHOST_ATTR = "data-flemo-morph-ghost";
+/**
+ * The SCREEN a flight is driving as a camera, stamped with the flight's id.
+ *
+ * A morph with `carry: "screen"` does not just move its element: it moves the
+ * whole screen the element is small on, by exactly the zoom that takes the
+ * element from one end of the flight to the other. Everything else on that
+ * screen is then dragged along and pushed out of frame, which is what makes a
+ * container transform read as one camera move rather than as one card
+ * escaping a grid that stayed behind.
+ *
+ * The id is in the value because two flights can overlap: the rule that
+ * matches is the one whose keyframes are still in the sheet.
+ */
+export declare const MORPH_CAMERA_ATTR = "data-flemo-morph-camera";
+/**
+ * The `<style>` tag the morph runtime writes its per-flight keyframes into. A
+ * morph's geometry only exists once two rects do, so unlike every other
+ * animation in the library its keyframes cannot be compiled at registration —
+ * they are inserted when a flight starts and dropped when it lands. Kept out of
+ * the compiled sheet so that sheet stays a pure function of the definitions.
+ */
+export declare const MORPH_SHEET_ATTR = "data-flemo-morph-sheet";
 /**
  * The animation hold. `"true"` pauses this element's compiled animation (and
  * its descendant parts) at the from-pose; `"park"` parks it at its
@@ -112,4 +236,4 @@ export declare const attrValueSelector: (attribute: string, value: string) => st
  * a devtools build can assert against the shipped set instead of a hand-kept
  * copy — the drift this module exists to end.
  */
-export declare const FLEMO_ATTRIBUTES: readonly ["data-flemo-screen", "data-flemo-status", "data-flemo-active", "data-flemo-transition", "data-flemo-router", "data-flemo-skip-animation", "data-flemo-bar", "data-flemo-bar-active", "data-flemo-bar-status", "data-flemo-bar-riding", "data-flemo-bar-id", "data-flemo-bar-id-type", "data-flemo-bar-transition", "data-flemo-bar-spacer", "data-flemo-decorator", "data-flemo-decorator-name", "data-flemo-part-name", "data-flemo-anim-hold", "data-flemo-held-arrival", "data-flemo-img-hold", "data-flemo-governed", "data-flemo-creep", "data-flemo-desk-head", "data-flemo-warm", "data-flemo-warm-video", "data-flemo-gpu-prewarm", "data-flemo-image-src", "data-flemo-devtools-panel"];
+export declare const FLEMO_ATTRIBUTES: readonly ["data-flemo-screen", "data-flemo-status", "data-flemo-active", "data-flemo-transition", "data-flemo-router", "data-flemo-skip-animation", "data-flemo-bar", "data-flemo-bar-active", "data-flemo-bar-status", "data-flemo-bar-riding", "data-flemo-bar-id", "data-flemo-bar-id-type", "data-flemo-bar-transition", "data-flemo-bar-spacer", "data-flemo-decorator", "data-flemo-decorator-name", "data-flemo-layer-host", "data-flemo-layer-owner", "data-flemo-layer-slot", "data-flemo-part-name", "data-flemo-morph", "data-flemo-morph-camera", "data-flemo-morph-ghost", "data-flemo-morph-layer", "data-flemo-morph-name", "data-flemo-morph-slot", "data-flemo-morph-stand-in", "data-flemo-morph-sheet", "data-flemo-anim-hold", "data-flemo-held-arrival", "data-flemo-img-hold", "data-flemo-governed", "data-flemo-creep", "data-flemo-desk-head", "data-flemo-warm", "data-flemo-warm-video", "data-flemo-gpu-prewarm", "data-flemo-image-src", "data-flemo-devtools-panel"];

package/dist/dom/stacking.d.ts

@@ -0,0 +1,28 @@
+/** The scope, the bars and the dim: ordered by paint order, not by number. */
+export declare const UNNUMBERED_LEVEL = "auto";
+/**
+ * The `<Layer>` host.
+ *
+ * Above any screen container this context can contain. A screen container is
+ * its stack position plus one, so the ceiling is a stack depth — this clears a
+ * depth no navigation stack reaches, and cannot leak past the container that
+ * isolates it.
+ */
+export declare const OVERLAY_LEVEL = 100000;
+/**
+ * The order as one readable list, so a test asserts the relation rather than
+ * restating the numbers and drifting from them.
+ */
+export declare const SCREEN_STACKING_ORDER: readonly [{
+    readonly role: "content";
+    readonly level: "auto";
+}, {
+    readonly role: "chrome";
+    readonly level: "auto";
+}, {
+    readonly role: "decorator";
+    readonly level: "auto";
+}, {
+    readonly role: "overlay";
+    readonly level: 100000;
+}];

package/dist/history/store.d.ts

@@ -5,7 +5,6 @@ export interface History {
     pathname: string;
     params: object;
     transitionName: TransitionName;
-    layoutId: string | number | null;
     frameIndex?: number;
 }
 export interface HistoryStore {

package/dist/index.d.ts

@@ -25,11 +25,21 @@ export { decoratorMap } from './transition/decorator/decorator';
 export { default as createPartTransition } from './transition/partTransition/createPartTransition';
 export { default as createRawPartTransition } from './transition/partTransition/createRawPartTransition';
 export { partTransitionMap } from './transition/partTransition/partTransition';
+export { default as createMorphTransition } from './transition/morphTransition/createMorphTransition';
+export { default as createRawMorphTransition } from './transition/morphTransition/createRawMorphTransition';
+export { morphTransitionMap } from './transition/morphTransition/morphTransition';
+export { DEFAULT_MORPH_TRANSITION_NAME } from './transition/morphTransition/typing';
+export { default as attachMorph, type AttachMorphOptions } from './morph/attachMorph';
+export { registerMorphLayer } from './morph/morphLayer';
+export { beginMorphSwipe, type MorphSwipe } from './morph/morphSwipe';
 export { default as cupertino } from './transition/cupertino';
 export { default as material } from './transition/material';
 export { default as layout } from './transition/layout';
 export { default as none } from './transition/none';
 export { default as overlay } from './transition/decorator/overlay';
+export { default as shared } from './transition/morphTransition/shared';
+export { default as textMorph } from './transition/morphTransition/text';
+export { default as zoomMorph } from './transition/morphTransition/zoom';
 export { compileTransitionStyles, animationName, variantHasAnimation, targetToDecls, collectAnimatedProperties, easingToCss, type CssDecl } from './transition/compileTransitionStyles';
 export { default as applyTransitionStyles } from './transition/applyTransitionStyles';
 export { default as registerTransitionDefinitions } from './transition/registerTransitionDefinitions';
@@ -39,7 +49,8 @@ export { default as createTransitionEngine } from './core/engine/createTransitio
 export { governedCompiledActive } from './platform/governedCompiled';
 export { startFlemoRuntime } from './runtime/flemoRuntime';
 export { resolvePlatformProfile, restLayerPromotionEnabled, type PlatformProfile, type PlatformProfileInput } from './platform/profile';
-export { FLEMO_ATTR_PREFIX, FLEMO_ATTRIBUTES, attrSelector, attrValueSelector, ANIM_HOLD, ANIM_HOLD_ATTR, ANIM_HOLD_PAUSED_VALUES, ACTIVE_ATTR, BAR_ACTIVE_ATTR, BAR_ATTR, BAR_ID_ATTR, BAR_ID_TYPE_ATTR, BAR_RIDING_ATTR, BAR_SPACER_ATTR, BAR_STATUS_ATTR, BAR_TRANSITION_ATTR, CREEP_ATTR, DECORATOR_ATTR, DECORATOR_NAME_ATTR, DESK_HEAD_ATTR, DEVTOOLS_PANEL_ATTR, GOVERNED_ATTR, GPU_PREWARM_ATTR, HELD_ARRIVAL_ATTR, IMAGE_HOLD_ATTR, PART_NAME_ATTR, ROUTER_ATTR, SCREEN_ATTR, STATUS_ATTR, TRANSITION_ATTR, WARM_ATTR, WARM_VIDEO_ATTR } from './dom/attributes';
+export { FLEMO_ATTR_PREFIX, FLEMO_ATTRIBUTES, attrSelector, attrValueSelector, ANIM_HOLD, ANIM_HOLD_ATTR, ANIM_HOLD_PAUSED_VALUES, ACTIVE_ATTR, BAR_ACTIVE_ATTR, BAR_ATTR, BAR_ID_ATTR, BAR_ID_TYPE_ATTR, BAR_RIDING_ATTR, BAR_SPACER_ATTR, BAR_STATUS_ATTR, BAR_TRANSITION_ATTR, CREEP_ATTR, DECORATOR_ATTR, DECORATOR_NAME_ATTR, DESK_HEAD_ATTR, DEVTOOLS_PANEL_ATTR, GOVERNED_ATTR, GPU_PREWARM_ATTR, HELD_ARRIVAL_ATTR, IMAGE_HOLD_ATTR, LAYER_HOST_ATTR, LAYER_OWNER_ATTR, LAYER_SLOT_ATTR, MORPH_ATTR, MORPH_LAYER_ATTR, MORPH_NAME_ATTR, MORPH_ROLE, MORPH_SLOT_ATTR, MORPH_SHEET_ATTR, PART_NAME_ATTR, ROUTER_ATTR, SCREEN_ATTR, STATUS_ATTR, TRANSITION_ATTR, WARM_ATTR, WARM_VIDEO_ATTR } from './dom/attributes';
+export { OVERLAY_LEVEL, SCREEN_STACKING_ORDER, UNNUMBERED_LEVEL } from './dom/stacking';
 export { DIAGNOSTIC_FLAGS, RETIRED_DIAGNOSTIC_FLAGS, type DiagnosticFlag, type DiagnosticFlagKind, type RetiredDiagnosticFlag } from './core/engine/diagnosticRegistry';
 export { TRANSITIONAL_STATUS_VALUES } from './navigate/store';
 export { SKIP_ANIMATION_ATTR, type TransitionEngine, type TransitionEngineDeps, type ScreenLifecycleInput } from './core/engine/types';
@@ -58,6 +69,7 @@ export { default as ensureImageDecodeOffloader, createImageDecodeOffloader, shou
 export type { RegisterTransition, TransitionName, TransitionVariant, TransitionVariantValue, TransitionOptions, BaseTransition, Transition, SwipeInfo, SwipeAnimate } from './transition/typing';
 export type { RegisterDecorator, DecoratorName, DecoratorOptions, Decorator } from './transition/decorator/typing';
 export type { RegisterPartTransition, PartTransitionName, PartTransitionOptions, PartTransition } from './transition/partTransition/typing';
+export type { RegisterMorphTransition, MorphTransitionName, MorphTransitionOptions, MorphTransition } from './transition/morphTransition/typing';
 export { default as isServer } from './utils/isServer';
 export { default as getParams } from './utils/getParams';
 export { default as getMatchedPathPattern } from './utils/getMatchedPathPattern';