@flemo/react 1.12.8 → 2.1.0

package/dist/navigate/useNavigate.d.ts

@@ -9,7 +9,6 @@ export interface UseNavigateOptions {
     router?: RouterTarget;
 }
 type RouteOptions = DistanceOptions & UseNavigateOptions & {
-    layoutId?: string | number;
     transitionName?: TransitionName;
 };
 type PopRouteOptions = DistanceOptions & UseNavigateOptions & {

package/dist/screen/Layer.d.ts

@@ -0,0 +1,40 @@
+import { PropsWithChildren } from 'react';
+export type LayerProps = PropsWithChildren;
+/**
+ * Render an overlay beside the screen instead of inside it, so it can cover
+ * the shared bars.
+ *
+ * A screen that is moving carries a transform, and a transform is both a
+ * containing block for `position: fixed` descendants and a stacking context
+ * around all of them. The shared bars live outside the screen, as siblings. So
+ * a sheet written inside the screen is ONE atom with the screen's content as
+ * far as the bars are concerned, and a stacking context cannot be interleaved
+ * with an element outside it: "content under the bar, sheet over the bar" is
+ * not expressible from in there, at any z-index.
+ *
+ * ```tsx
+ * <Screen sharedBottomBar={<TabBar />}>
+ *   <Content />
+ *   <Layer>
+ *     <BottomSheet open={open} />
+ *   </Layer>
+ * </Screen>
+ * ```
+ *
+ * What leaves the screen is the PAINT ORDER, and only that. The slot keeps its
+ * owner's stack position, its status and transition (so it moves with the
+ * screen and leaves with it), its animation hold, and its paint-hidden state.
+ * It is rendered from inside the screen's own React subtree, so React freezes
+ * it with the screen and unmounts it with the screen without being asked.
+ *
+ * At rest none of this is needed: a screen at rest carries no transform, so a
+ * consumer's `position: fixed` overlay already resolves against the viewport
+ * and already outranks the bars with a z-index of its own. `<Layer>` is for
+ * the overlay that has to survive the screen MOVING under it, and for the one
+ * that has to clear chrome an ancestor screen declared.
+ *
+ * Children keep whatever positioning they had. On the server, and for the
+ * first render before the host mounts, this renders nothing.
+ */
+declare function Layer({ children }: LayerProps): import('react').ReactPortal | null;
+export default Layer;

package/dist/screen/LayerContext.d.ts

@@ -0,0 +1,77 @@
+/**
+ * The element a `<Layer>` portals into. Null before the outermost screen
+ * mounts and on the server, where no host element exists yet — a `<Layer>`
+ * renders nothing until it has a target.
+ */
+declare const LayerHostContext: import('react').Context<HTMLElement | null>;
+export declare function useLayerHost(): HTMLElement | null;
+/** Everything a slot needs to keep being its screen while sitting outside it. */
+export interface LayerOwner {
+    /**
+     * The owning screen's stack position. Two screens' overlays then order the
+     * way their screens do, rather than by whichever portal mounted first.
+     */
+    zIndex: number;
+    /**
+     * The owner's paint state. `visibility: hidden` on the screen container is
+     * plain CSS and stops at that container's own descendants, so a slot in
+     * another box has to be told. Without it a covered screen's overlay is the
+     * one thing still painting — for the whole debounce window before the freeze
+     * catches up (see ScreenFreeze.portal.test.tsx).
+     */
+    paintHidden: boolean;
+    /** The transition, status and active flags the compiled slot rule selects on. */
+    transitionName: string;
+    status: string;
+    isActive: boolean;
+    /**
+     * The owner's animation hold. The slot pauses at the same from-pose as the
+     * screen, so a flight that is held opens with its overlay rather than after
+     * it.
+     */
+    animHold: string;
+    /**
+     * Whether this owner is ALSO the screen that renders the host.
+     *
+     * An overlay has to travel with whatever is actually moving under it, and
+     * that is not always its owner. When an ancestor screen flies — a push on an
+     * outer Router, with the owner sitting inside it at rest — the thing that
+     * moves is the ancestor, and the host is inside the ancestor's container. So
+     * the HOST rides the screen that renders it, and a slot rides its owner only
+     * when the two are different screens. Otherwise the pair would both animate
+     * and the overlay would travel twice as far as its screen.
+     *
+     * Measured in a consumer app before this existed: a sheet in a nested screen
+     * sat perfectly still while the whole region slid out from under it, because
+     * its owner's status was IDLE for the entire flight and the compiled rule had
+     * nothing to match.
+     */
+    rendersHost: boolean;
+    /**
+     * The owning screen's id, written onto the slot so the gesture driver can
+     * find it. A drag does not go through the compiled rules — it writes inline
+     * styles frame by frame — and it enumerates what rides along by walking the
+     * moving screen's container. A slot is not in that container, so it has to
+     * name its owner instead.
+     */
+    screenId: string;
+    /**
+     * Register a slot element with its owner, for the lifetime of the slot.
+     *
+     * The owner needs to know it HAS an escaped overlay, because the dim has to
+     * follow the overlay out. A screen's decorator lives in that screen's
+     * container and covers everything inside it, so an overlay that left the
+     * container leaves the dim behind — measured: an inline sheet is covered by
+     * the dim, the same sheet through `<Layer>` is not. And a consumer writes
+     * that decorator with `createDecorator`, so it can be anything, including
+     * fully opaque. A screen that vanishes under its own decorator while its
+     * sheet floats untouched is not a cosmetic difference.
+     *
+     * The dim copy exists only while a slot does. Rendered unconditionally it
+     * would paint over the shared bars for every flight, overlay or not.
+     */
+    registerSlot: (element: HTMLElement | null) => void;
+}
+declare const LayerOwnerContext: import('react').Context<LayerOwner | null>;
+export declare function useLayerOwner(): LayerOwner | null;
+export { LayerHostContext, LayerOwnerContext };

package/dist/screen/Morph.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef, JSX, PropsWithChildren } from 'react';
+import { MorphTransitionName } from '@flemo/core';
+export interface MorphProps extends PropsWithChildren<ComponentPropsWithRef<"div">> {
+    layoutId: string | number;
+    name?: MorphTransitionName;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare function Morph({ ref, layoutId, name, as, style, children, ...props }: MorphProps): import('react').ReactElement<{
+    "data-flemo-morph-slot": string;
+    style: {
+        display: string;
+    };
+}, string | import('react').JSXElementConstructor<any>>;
+export default Morph;

package/dist/screen/MorphLayer/MorphLayer.d.ts

@@ -0,0 +1,6 @@
+import { FlemoStores } from '@flemo/core';
+export interface MorphLayerProps {
+    stores: FlemoStores;
+}
+declare function MorphLayer({ stores }: MorphLayerProps): import("react").JSX.Element;
+export default MorphLayer;

package/dist/screen/MorphLayer/index.d.ts

@@ -0,0 +1 @@
+export { default, type MorphLayerProps } from './MorphLayer';

package/dist/screen/Screen.d.ts

@@ -1,6 +1,12 @@
 import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from 'react';
 import { SharedBarId } from '@flemo/core';
 export interface ScreenProps extends PropsWithChildren<Omit<ComponentPropsWithoutRef<"div">, "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel">> {
+    /**
+     * Covered: stop painting this screen, from this commit. Written by the
+     * binding, never by a consumer — the prop exists so <Screen> can hand the
+     * decision to the container ScreenMotion renders.
+     */
+    paintHidden?: boolean;
     statusBarHeight?: string;
     statusBarColor?: string;
     systemNavigationBarHeight?: string;

package/dist/screen/ScreenFreeze.d.ts

@@ -1,7 +1,19 @@
 import { ReactNode } from 'react';
+import { ScreenFreezeMode } from '@flemo/core';
 interface ScreenFreezeProps {
     freeze: boolean;
+    /**
+     * WHY this screen is freezing, which decides whether the hide may wait.
+     *
+     * Only the JUST-COVERED screen can be re-revealed by a pop, so only its hide
+     * can be the one a pop has to undo — and the debounce below exists for
+     * exactly that round trip. A DEEP screen is never what a pop wakes, so
+     * waiting buys it nothing and costs the thing the delay is invisible for
+     * right up until it is not: for the length of the wait it is still PAINTING,
+     * under whatever is on top of it.
+     */
+    mode?: ScreenFreezeMode;
     children: ReactNode;
 }
-declare function ScreenFreeze({ freeze, children }: ScreenFreezeProps): import("react").JSX.Element;
+declare function ScreenFreeze({ freeze, mode, children }: ScreenFreezeProps): import("react").JSX.Element;
 export default ScreenFreeze;

package/dist/screen/ScreenMotion.d.ts

@@ -1,3 +1,3 @@
 import { ScreenProps } from './Screen';
-declare function ScreenMotion({ children, statusBarHeight, statusBarColor, systemNavigationBarHeight, systemNavigationBarColor, sharedTopBar, sharedTopBarId, sharedBottomBar, sharedBottomBarId, topBar, bottomBar, hideStatusBar, hideSystemNavigationBar, backgroundColor, contentScrollable, ...props }: ScreenProps): import("react").JSX.Element;
+declare function ScreenMotion({ children, statusBarHeight, statusBarColor, systemNavigationBarHeight, systemNavigationBarColor, sharedTopBar, sharedTopBarId, sharedBottomBar, sharedBottomBarId, topBar, bottomBar, hideStatusBar, hideSystemNavigationBar, backgroundColor, contentScrollable, paintHidden, ...props }: ScreenProps): import("react").JSX.Element;
 export default ScreenMotion;

package/dist/screen/__tests__/Layer.test.d.ts

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

package/dist/screen/__tests__/Morph.test.d.ts

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

package/dist/screen/__tests__/ScreenFreeze.portal.test.d.ts

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

package/dist/screen/__tests__/ScreenMotion.swipeBack.test.d.ts

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

package/dist/transition/styles.d.ts

@@ -1,2 +1,2 @@
-import { Decorator, PartTransition, Transition } from '@flemo/core';
-export default function useTransitionStyles(transitions: Transition[], decorators: Decorator[], partTransitions?: PartTransition[]): void;
+import { Decorator, MorphTransition, PartTransition, Transition } from '@flemo/core';
+export default function useTransitionStyles(transitions: Transition[], decorators: Decorator[], partTransitions?: PartTransition[], morphTransitions?: MorphTransition[]): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.12.8",
+  "version": "2.1.0",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -34,28 +34,28 @@
   "homepage": "https://flemo.dev",
   "license": "MIT",
   "dependencies": {
+    "@flemo/core": "2.1.0",
     "path-to-regexp": "^8.4.2",
-    "zustand": "^5.0.14",
-    "@flemo/core": "1.30.0"
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
+    "@flemo/eslint-config": "0.0.0",
+    "@flemo/tsconfig": "0.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^24.13.1",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-react-swc": "^4.3.3",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.11",
     "eslint": "^9.39.5",
     "jsdom": "^29.1.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "typescript": "^6.0.3",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10",
-    "@flemo/eslint-config": "0.0.0",
-    "@flemo/tsconfig": "0.0.0"
+    "vitest": "^4.1.11"
   },
   "peerDependencies": {
     "react": "^19.2.8",