phase 0.0.1-alpha.1 → 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,633 @@
1
+ import { D as FrameState, T as SightReason, b as LifecycleReducedMotion, c as DegradedReason, d as LoopPhase, f as LoopReason, m as ReducedMotionBehavior, p as Quality, r as RenderPhase, s as DegradedBehavior, t as IdleOptions, v as LifecyclePhase, w as SightPhase, y as LifecycleReason } from "./index-D3epuj2x.js";
2
+ import { ComponentProps, JSX, ReactNode, Ref, RefObject } from "react";
3
+
4
+ //#region src/react/use-synced-ref/index.d.ts
5
+ /**
6
+ * Ref whose `.current` is always the latest value, updated synchronously on
7
+ * every render. Readable from any callback or effect without triggering re-render.
8
+ *
9
+ * @example
10
+ * const propsRef = useSyncedRef(props);
11
+ * useEffect(() => {
12
+ * // propsRef.current is always fresh
13
+ * }, []);
14
+ */
15
+ declare function useSyncedRef<T>(value: T): RefObject<T>;
16
+ //#endregion
17
+ //#region src/react/use-stable-callback/index.d.ts
18
+ /**
19
+ * Returns a function with **stable identity** that always calls the latest
20
+ * version of `callback`. Safe in deps arrays and as a prop to `memo()`'d children.
21
+ *
22
+ * @example
23
+ * const handleClick = useStableCallback((e: MouseEvent) => {
24
+ * console.log(latestValue); // always fresh
25
+ * });
26
+ */
27
+ declare function useStableCallback<Args extends unknown[], R>(callback: (...args: Args) => R): (...args: Args) => R;
28
+ //#endregion
29
+ //#region src/react/use-loop/index.d.ts
30
+ /**
31
+ * Per-frame loop callback. Receives the current frame state. Write to refs or
32
+ * DOM directly. Never call React `setState` here (60 calls/sec = 60
33
+ * re-renders/sec).
34
+ */
35
+ type LoopTickFn = (frame: FrameState) => void;
36
+ interface UseLoopOptions<T extends Element = HTMLDivElement> {
37
+ /**
38
+ * Element to observe. Optional. When omitted, attach the returned `ref`.
39
+ * Pass your own ref to share it or attach it elsewhere.
40
+ */
41
+ ref?: RefObject<T | null>;
42
+ /**
43
+ * Called every frame. Write to refs or DOM directly. Never call React
44
+ * `setState` here (60 calls/sec = 60 re-renders/sec).
45
+ */
46
+ onTick: LoopTickFn;
47
+ fps?: number;
48
+ enabled?: boolean;
49
+ reducedMotion?: ReducedMotionBehavior;
50
+ /** Behavior when quality degrades (window blur, frame-budget). Default `'throttle'`. */
51
+ degraded?: DegradedBehavior;
52
+ /** FPS cap when `degraded` is `'throttle'`. Default `30`. */
53
+ degradedFps?: number;
54
+ intersectionOptions?: IntersectionObserverInit;
55
+ }
56
+ interface UseLoopResult<T extends Element = HTMLDivElement> {
57
+ /** Attach to the element you want to animate. */
58
+ ref: RefObject<T | null>;
59
+ phase: LoopPhase;
60
+ phaseReason: LoopReason;
61
+ quality: Quality;
62
+ qualityReason: DegradedReason | undefined;
63
+ }
64
+ /**
65
+ * Ref-based animation loop that never triggers re-renders from the frame loop.
66
+ *
67
+ * @example
68
+ * const { ref, phase } = useLoop({
69
+ * onTick: (frame) => {
70
+ * ref.current.style.transform = `translateX(${frame.elapsed * 0.1}px)`;
71
+ * },
72
+ * });
73
+ * return <div ref={ref} />;
74
+ */
75
+ declare function useLoop<T extends Element = HTMLDivElement>(options: UseLoopOptions<T>): UseLoopResult<T>;
76
+ //#endregion
77
+ //#region src/react/use-lifecycle/index.d.ts
78
+ interface UseLifecycleOptions<T extends Element = HTMLDivElement> {
79
+ /**
80
+ * Element whose visibility gates the lifecycle. Optional. When omitted, attach
81
+ * the returned `ref`.
82
+ */
83
+ ref?: RefObject<T | null>;
84
+ /** Whether reduced motion pauses the lifecycle. Default `'pause'`. */
85
+ reducedMotion?: LifecycleReducedMotion;
86
+ /** Manually pause regardless of visibility (e.g. a panel opened over the animation). */
87
+ paused?: boolean;
88
+ /** When `false`, the lifecycle is torn down and reports `idle`. Default `true`. */
89
+ enabled?: boolean;
90
+ intersectionOptions?: IntersectionObserverInit;
91
+ /**
92
+ * Synchronous callback fired in the observer/MQL callback, before React
93
+ * schedules a render. Use to post messages to a worker or update a ref
94
+ * without waiting for the React commit.
95
+ */
96
+ onPhaseChange?: (phase: LifecyclePhase, reason: LifecycleReason) => void;
97
+ }
98
+ interface UseLifecycleResult<T extends Element = HTMLDivElement> {
99
+ /** Attach to the element whose visibility should gate your loop. */
100
+ ref: RefObject<T | null>;
101
+ phase: LifecyclePhase;
102
+ phaseReason: LifecycleReason;
103
+ /** Convenience: `phase === 'active'`. Drive your own render loop off this. */
104
+ isActive: boolean;
105
+ }
106
+ /**
107
+ * React binding for `createLifecycle`. The activation signal for loops you own.
108
+ *
109
+ * Returns `active` / `paused` so a consumer-owned render loop (WebGL, three.js, a
110
+ * Web Worker) can pause when off-screen or under reduced motion. When `phase`
111
+ * should drive the loop for you, use `useLoop` or `useCanvas` instead.
112
+ *
113
+ * @example
114
+ * const { ref, isActive } = useLifecycle();
115
+ * useEffect(() => {
116
+ * if (!isActive) return;
117
+ * const id = requestAnimationFrame(function render() {
118
+ * renderer.render();
119
+ * requestAnimationFrame(render);
120
+ * });
121
+ * return () => cancelAnimationFrame(id);
122
+ * }, [isActive]);
123
+ * return <canvas ref={ref} />;
124
+ */
125
+ declare function useLifecycle<T extends Element = HTMLDivElement>(options?: UseLifecycleOptions<T>): UseLifecycleResult<T>;
126
+ //#endregion
127
+ //#region src/react/use-device-pixel-ratio/index.d.ts
128
+ /**
129
+ * Reactive devicePixelRatio that updates when the user moves the window
130
+ * between monitors with different DPR values.
131
+ *
132
+ * Returns `1` during SSR and initial hydration, then the live value.
133
+ */
134
+ declare function useDevicePixelRatio(): number;
135
+ //#endregion
136
+ //#region src/react/use-media/index.d.ts
137
+ /**
138
+ * Subscribe to a media query via the shared MQL pool.
139
+ *
140
+ * Returns `false` during SSR and initial hydration render,
141
+ * then the live value from the first `useEffect`.
142
+ *
143
+ * @example
144
+ * const isNarrow = useMediaQuery('(max-width: 600px)');
145
+ */
146
+ declare function useMediaQuery(query: string): boolean;
147
+ //#endregion
148
+ //#region src/react/use-reduced-motion/index.d.ts
149
+ /**
150
+ * Reactive boolean that tracks the user's `prefers-reduced-motion` OS setting.
151
+ *
152
+ * Returns `false` during SSR and initial hydration, then the live value.
153
+ * Re-renders only when the preference changes.
154
+ */
155
+ declare function usePrefersReducedMotion(): boolean;
156
+ //#endregion
157
+ //#region src/react/use-sight/index.d.ts
158
+ interface UseSightOptions<T extends Element = HTMLDivElement> extends IntersectionObserverInit {
159
+ /**
160
+ * Element to observe. Optional. When omitted, attach the returned `ref`.
161
+ */
162
+ ref?: RefObject<T | null>;
163
+ /** `'continuous'` keeps observing. `'once'` freezes at `'visible'` after first intersection. */
164
+ observe?: 'continuous' | 'once';
165
+ }
166
+ interface UseSightResult<T extends Element = HTMLDivElement> {
167
+ /** Attach to the element whose visibility you want to track. */
168
+ ref: RefObject<T | null>;
169
+ phase: SightPhase;
170
+ phaseReason: SightReason;
171
+ }
172
+ /**
173
+ * Intersection + document visibility as a phase.
174
+ *
175
+ * Returns `'unknown'` during SSR and before first observation.
176
+ * `observe: 'once'` freezes at `'visible'` after first intersection and unobserves.
177
+ *
178
+ * @example
179
+ * const { ref, phase } = useSight();
180
+ * if (phase === 'visible') startAnimation();
181
+ * return <div ref={ref} />;
182
+ */
183
+ declare function useSight<T extends Element = HTMLDivElement>(options?: UseSightOptions<T>): UseSightResult<T>;
184
+ //#endregion
185
+ //#region src/react/use-size/index.d.ts
186
+ interface Size {
187
+ width: number;
188
+ height: number;
189
+ }
190
+ interface UseSizeOptions<T extends Element = HTMLDivElement> {
191
+ /**
192
+ * Element to measure. Optional. When omitted, attach the returned `ref`.
193
+ */
194
+ ref?: RefObject<T | null>;
195
+ }
196
+ interface UseSizeResult<T extends Element = HTMLDivElement> {
197
+ /** Attach to the element you want to measure. */
198
+ ref: RefObject<T | null>;
199
+ /** Element dimensions, or `null` until the first observation. */
200
+ size: Size | null;
201
+ }
202
+ /**
203
+ * Element dimensions via the shared ResizeObserver singleton.
204
+ *
205
+ * `size` is `null` until the first observation. Never calls `getBoundingClientRect()`.
206
+ * RO callbacks are compositor-aligned (once per frame), so no rAF coalescing needed.
207
+ *
208
+ * @example
209
+ * const { ref, size } = useSize();
210
+ * return <div ref={ref}>{size?.width}</div>;
211
+ */
212
+ declare function useSize<T extends Element = HTMLDivElement>(options?: UseSizeOptions<T>): UseSizeResult<T>;
213
+ //#endregion
214
+ //#region src/react/use-container-query/index.d.ts
215
+ interface ContainerBreakpoint {
216
+ minWidth?: number;
217
+ maxWidth?: number;
218
+ minHeight?: number;
219
+ maxHeight?: number;
220
+ }
221
+ interface UseContainerQueryOptions<T extends Element = HTMLDivElement> {
222
+ /**
223
+ * Element to measure. Optional. When omitted, attach the returned `ref`.
224
+ */
225
+ ref?: RefObject<T | null>;
226
+ }
227
+ interface UseContainerQueryResult<T extends Element = HTMLDivElement> {
228
+ /** Attach to the element you want to match against the breakpoint. */
229
+ ref: RefObject<T | null>;
230
+ /** Whether the element currently matches the breakpoint. */
231
+ matches: boolean;
232
+ }
233
+ /**
234
+ * Returns whether an element matches a size-based container breakpoint.
235
+ *
236
+ * Unlike `useSize` (which re-renders on every pixel of resize), this hook only
237
+ * re-renders when the match result changes, i.e. when the element crosses a
238
+ * breakpoint boundary. Uses the shared ResizeObserver singleton.
239
+ *
240
+ * @example
241
+ * const { ref, matches } = useContainerQuery({ minWidth: 600 });
242
+ * return <div ref={ref}>{matches ? 'wide' : 'narrow'}</div>;
243
+ */
244
+ declare function useContainerQuery<T extends Element = HTMLDivElement>(breakpoint: ContainerBreakpoint, options?: UseContainerQueryOptions<T>): UseContainerQueryResult<T>;
245
+ //#endregion
246
+ //#region src/react/use-scroll-progress/index.d.ts
247
+ interface UseScrollProgressOptions<T extends Element = HTMLDivElement> {
248
+ /**
249
+ * Element to observe. Optional. When omitted, attach the returned `ref`.
250
+ */
251
+ ref?: RefObject<T | null>;
252
+ /** Number of evenly-spaced thresholds. Default 20 (~5% granularity). */
253
+ steps?: number;
254
+ root?: Element | null;
255
+ rootMargin?: string;
256
+ }
257
+ interface UseScrollProgressResult<T extends Element = HTMLDivElement> {
258
+ /** Attach to the element whose visibility ratio you want to track. */
259
+ ref: RefObject<T | null>;
260
+ /** Fraction of the element currently visible (0–1). See `createScrollProgress` for semantics. */
261
+ progress: number;
262
+ }
263
+ /**
264
+ * Element visibility ratio (0–1) via the shared IntersectionObserver pool.
265
+ *
266
+ * Reports the fraction of the element currently visible. Ideal for reveal/opacity
267
+ * effects. Not a scroll-scrubbing engine: event-driven and quantized to `steps`.
268
+ *
269
+ * Re-renders only at threshold crossings (~20 per full viewport traversal).
270
+ * `progress` is `0` before first observation and during SSR.
271
+ *
272
+ * @example
273
+ * const { ref, progress } = useScrollProgress();
274
+ * return <div ref={ref} style={{ opacity: progress }} />;
275
+ */
276
+ declare function useScrollProgress<T extends Element = HTMLDivElement>(options?: UseScrollProgressOptions<T>): UseScrollProgressResult<T>;
277
+ //#endregion
278
+ //#region src/react/use-render-state/index.d.ts
279
+ /**
280
+ * Track whether the browser is rendering an element or skipping it under
281
+ * `content-visibility` (e.g. a `Defer` subtree). Returns `'rendered'` until the
282
+ * browser reports otherwise.
283
+ *
284
+ * Use it to pause raw, non-phase work (a hand-written rAF loop, `setInterval`)
285
+ * when the subtree stops painting. phase loops self-pause off-screen already.
286
+ * Has no layout effect. Safe for CLS.
287
+ *
288
+ * @example
289
+ * const ref = useRef<HTMLDivElement>(null);
290
+ * const phase = useRenderState(ref);
291
+ * useEffect(() => {
292
+ * if (phase === 'skipped') clock.pause();
293
+ * else clock.resume();
294
+ * }, [phase]);
295
+ * return <Defer ref={ref}><Heavy /></Defer>;
296
+ */
297
+ declare function useRenderState<T extends Element = HTMLDivElement>(ref: RefObject<T | null>): RenderPhase;
298
+ //#endregion
299
+ //#region src/react/use-idle/index.d.ts
300
+ /**
301
+ * Returns `false`, then `true` once the browser is idle after mount. Use it to
302
+ * defer non-critical work or mounting until the main thread is free.
303
+ *
304
+ * SSR-safe: returns `false` on the server and during the first client render.
305
+ *
306
+ * @example
307
+ * const idle = useIdle();
308
+ * return idle ? <Analytics /> : null;
309
+ */
310
+ declare function useIdle(options?: IdleOptions): boolean;
311
+ //#endregion
312
+ //#region src/react/use-when-idle/index.d.ts
313
+ /**
314
+ * Run a callback once, when the browser is idle after mount. The effect-shaped
315
+ * counterpart to `useIdle`. Use it for side effects (prefetching a chunk,
316
+ * warming a cache, `import()`) rather than rendering.
317
+ *
318
+ * Cancels automatically on unmount, and always calls the latest `callback`
319
+ * without re-subscribing. SSR-safe: nothing runs on the server.
320
+ *
321
+ * @example
322
+ * // Prefetch a heavy panel during idle time so it opens instantly later.
323
+ * useWhenIdle(() => void import('./chat-panel'));
324
+ */
325
+ declare function useWhenIdle(callback: () => void, options?: IdleOptions): void;
326
+ //#endregion
327
+ //#region src/react/use-canvas/index.d.ts
328
+ interface Size$1 {
329
+ width: number;
330
+ height: number;
331
+ }
332
+ /**
333
+ * Per-frame canvas draw callback. Receives the 2D context, frame state, and
334
+ * current element size. Draw directly to the canvas. Never call React
335
+ * `setState` here.
336
+ */
337
+ type CanvasDrawFn = (ctx: CanvasRenderingContext2D, frame: FrameState, size: Size$1) => void;
338
+ interface UseCanvasOptions {
339
+ containerRef: RefObject<Element | null>;
340
+ canvasRef: RefObject<HTMLCanvasElement | null>;
341
+ /**
342
+ * Called every frame with the 2D context, frame state, and current element size.
343
+ * Draw directly to the canvas. Never call React `setState` here.
344
+ */
345
+ draw: CanvasDrawFn;
346
+ fps?: number;
347
+ enabled?: boolean;
348
+ reducedMotion?: ReducedMotionBehavior;
349
+ /** Behavior when quality degrades. Default `'throttle'`. For heavy GPU work, `'pause'` is often the right call. */
350
+ degraded?: DegradedBehavior;
351
+ /** FPS cap when `degraded` is `'throttle'`. Default `30`. */
352
+ degradedFps?: number;
353
+ }
354
+ interface UseCanvasResult {
355
+ restart: () => void;
356
+ phase: LoopPhase;
357
+ phaseReason: LoopReason;
358
+ quality: Quality;
359
+ qualityReason: DegradedReason | undefined;
360
+ }
361
+ /**
362
+ * Canvas-specific animation with DPR-aware sizing, ResizeObserver coalescing,
363
+ * context management, and GPU context loss recovery.
364
+ *
365
+ * @example
366
+ * useCanvas({
367
+ * containerRef,
368
+ * canvasRef,
369
+ * draw: (ctx, frame, size) => {
370
+ * ctx.clearRect(0, 0, size.width, size.height);
371
+ * // render...
372
+ * },
373
+ * });
374
+ */
375
+ declare function useCanvas(options: UseCanvasOptions): UseCanvasResult;
376
+ //#endregion
377
+ //#region src/react/use-tween/index.d.ts
378
+ interface UseTweenOptions {
379
+ target: number;
380
+ duration?: number;
381
+ delay?: number;
382
+ easing?: (progress: number) => number;
383
+ enabled?: boolean;
384
+ /** Default: `'complete'`. Tweens jump to target under reduced motion. */
385
+ reducedMotion?: ReducedMotionBehavior;
386
+ }
387
+ /**
388
+ * Animate a value from its current position to `target` over `duration`.
389
+ *
390
+ * Uses `useState` per frame. Appropriate for cheap renders (counters, opacity,
391
+ * progress bars). For batch animations, use `useLoop` with ref-based DOM writes.
392
+ *
393
+ * @remarks
394
+ * Unlike `createTicker`/`createLoop`, `useTween` drives its own rAF rather than
395
+ * the shared frame-locked clock. It's a finite, self-completing tween whose value
396
+ * must land in React state, so it doesn't need cross-loop visual sync, strong
397
+ * pause, or delta clamping. Routing it through the shared clock would add bundle
398
+ * weight for no benefit.
399
+ *
400
+ * @example
401
+ * const value = useTween({ target: 100, duration: 500 });
402
+ */
403
+ declare function useTween(options: UseTweenOptions): number;
404
+ //#endregion
405
+ //#region src/react/use-presence/index.d.ts
406
+ type PresencePhase = 'idle' | 'entered' | 'exiting' | 'exited';
407
+ type PresenceReason = 'initial' | 'show' | 'hide' | 'animation-end' | 'interrupted';
408
+ type PresenceMode = 'mount' | 'reveal';
409
+ interface UsePresenceOptions {
410
+ show: boolean;
411
+ mode?: PresenceMode;
412
+ /** Controls first-mount behavior. `'animate'` (default): enter animation plays. `'instant'`: appears immediately. */
413
+ enter?: 'animate' | 'instant';
414
+ /** Safety-net timeout in ms if transitionend/animationend doesn't fire during exit. Default 5000. */
415
+ exitDuration?: number;
416
+ /** Whether to respect the user's reduced motion preference. Default `'respect'`. */
417
+ reducedMotion?: 'respect' | 'ignore';
418
+ }
419
+ interface UsePresenceResult {
420
+ phase: PresencePhase;
421
+ phaseReason: PresenceReason;
422
+ /** Convenience: `phase !== 'idle' && phase !== 'exited'` for conditional rendering in mount mode. */
423
+ mounted: boolean;
424
+ ref: RefObject<Element | null>;
425
+ /** Whether the component should stamp `data-enter="animate"`. Accounts for enter option + reduced motion. */
426
+ enter: 'animate' | 'instant';
427
+ }
428
+ /**
429
+ * Composable presence primitive for mount/unmount lifecycle with CSS transitions.
430
+ *
431
+ * Enter animations use CSS `@starting-style`, gated by `data-enter="animate"`.
432
+ * Exit animations are JS-coordinated: waits for `transitionend`/`animationend`
433
+ * before unmounting.
434
+ *
435
+ * @example
436
+ * const { phase, ref, mounted, enter } = usePresence({ show: isOpen });
437
+ * if (!mounted) return null;
438
+ * return (
439
+ * <div ref={ref} data-phase={phase} data-enter={enter === 'animate' ? 'animate' : undefined}
440
+ * className="transition-opacity data-[enter=animate]:starting:opacity-0 data-[phase=exiting]:opacity-0" />
441
+ * );
442
+ */
443
+ declare function usePresence(options: UsePresenceOptions): UsePresenceResult;
444
+ //#endregion
445
+ //#region src/react/presence/index.d.ts
446
+ interface PresenceProps extends ComponentProps<'div'> {
447
+ show: boolean;
448
+ mode?: PresenceMode;
449
+ /** Controls first-mount behavior. `'animate'` (default): enter animation plays. `'instant'`: appears immediately. */
450
+ enter?: 'animate' | 'instant';
451
+ /** Safety-net timeout in ms if transitionend/animationend doesn't fire during exit. Default 5000. */
452
+ exitDuration?: number;
453
+ /** Whether to respect the user's reduced motion preference. Default `'respect'`. */
454
+ reducedMotion?: 'respect' | 'ignore';
455
+ ref?: Ref<HTMLDivElement>;
456
+ }
457
+ /**
458
+ * Renders a `div` that manages its own mounting lifecycle.
459
+ *
460
+ * Stamps `data-phase` for exit animations and `data-enter="animate"` to gate
461
+ * CSS `@starting-style` enter animations. Reduced motion is handled automatically.
462
+ *
463
+ * @example
464
+ * <Presence
465
+ * show={isOpen}
466
+ * className="transition-opacity data-[enter=animate]:starting:opacity-0 data-[phase=exiting]:opacity-0"
467
+ * >
468
+ * Modal content
469
+ * </Presence>
470
+ */
471
+ declare function Presence({
472
+ show,
473
+ mode,
474
+ enter: enterOption,
475
+ exitDuration,
476
+ reducedMotion,
477
+ ref: forwardedRef,
478
+ children,
479
+ ...divProps
480
+ }: PresenceProps): JSX.Element | null;
481
+ //#endregion
482
+ //#region src/react/when-visible/index.d.ts
483
+ interface WhenVisibleProps extends ComponentProps<'div'> {
484
+ /** IntersectionObserver rootMargin. Default `'200px'` (generous headroom for preloading). */
485
+ rootMargin?: string;
486
+ /** IntersectionObserver threshold. */
487
+ threshold?: number | number[];
488
+ /** IntersectionObserver root element. */
489
+ root?: Element | null;
490
+ /** Content shown while awaiting intersection. Sentinel div is always rendered for IO. */
491
+ fallback?: ReactNode;
492
+ /** Forwarded to the rendered div in both states (the sentinel before visible, the entered div after). Populated at mount. */
493
+ ref?: Ref<HTMLDivElement>;
494
+ }
495
+ /**
496
+ * Mounts children when the element enters the viewport. One-shot (once
497
+ * triggered, stays mounted).
498
+ *
499
+ * Enter animation uses CSS `@starting-style`, gated by `data-enter="animate"`.
500
+ * Reduced motion is automatic: the attribute is not stamped when the user
501
+ * prefers reduced motion.
502
+ *
503
+ * @example
504
+ * <WhenVisible rootMargin="200px" className="transition-opacity data-[enter=animate]:starting:opacity-0">
505
+ * <HeavyChart />
506
+ * </WhenVisible>
507
+ */
508
+ declare function WhenVisible({
509
+ rootMargin,
510
+ threshold,
511
+ root,
512
+ fallback,
513
+ children,
514
+ ref: forwardedRef,
515
+ ...divProps
516
+ }: WhenVisibleProps): JSX.Element;
517
+ //#endregion
518
+ //#region src/react/when-idle/index.d.ts
519
+ interface WhenIdleProps extends ComponentProps<'div'> {
520
+ /** Max ms to wait before mounting even if no idle period occurs. */
521
+ timeout?: number;
522
+ /** Content shown until the browser is idle. */
523
+ fallback?: ReactNode;
524
+ ref?: Ref<HTMLDivElement>;
525
+ }
526
+ /**
527
+ * Mounts children once the browser is idle after first paint. One-shot (once
528
+ * mounted, stays mounted). Use it to defer non-critical UI off the critical path.
529
+ *
530
+ * Children are not server-rendered (idle never fires during SSR), so reserve
531
+ * this for non-critical content. For viewport-gated mounting use `WhenVisible`;
532
+ * to keep content in the DOM but skip painting use `Defer`.
533
+ *
534
+ * Enter animation uses CSS `@starting-style`, gated by `data-enter="animate"`.
535
+ * Reduced motion is automatic: the attribute is not stamped when the user
536
+ * prefers reduced motion.
537
+ *
538
+ * @example
539
+ * <WhenIdle fallback={<Skeleton />}>
540
+ * <SecondaryPanel />
541
+ * </WhenIdle>
542
+ */
543
+ declare function WhenIdle({
544
+ timeout,
545
+ fallback,
546
+ children,
547
+ ref: forwardedRef,
548
+ ...divProps
549
+ }: WhenIdleProps): JSX.Element;
550
+ //#endregion
551
+ //#region src/react/defer/index.d.ts
552
+ interface DeferProps extends Omit<ComponentProps<'div'>, 'style'> {
553
+ /**
554
+ * Approximate size reserved before first paint (any CSS length, e.g. `'800px'`).
555
+ * After the first render the browser remembers the real size. Default `'1000px'`.
556
+ */
557
+ estimatedHeight?: string;
558
+ ref?: Ref<HTMLDivElement>;
559
+ }
560
+ /**
561
+ * Skip the browser's rendering work (style, layout, paint) for off-screen
562
+ * content via `content-visibility: auto`. Pure CSS, no JS, no observer.
563
+ *
564
+ * Children stay in the DOM and are server-rendered (SEO- and CLS-safe).
565
+ * `contain-intrinsic-size: auto <estimatedHeight>` reserves space so the
566
+ * scrollbar does not jump. Defers rendering only, not hydration or mounting.
567
+ *
568
+ * The render-skip styles are encapsulated and cannot be overridden. There is
569
+ * no `style` prop. Style the wrapper with `className`; this keeps the
570
+ * no-layout-shift guarantee intact.
571
+ *
572
+ * @example
573
+ * <Defer estimatedHeight="600px" className="my-section">
574
+ * <ArticleSection />
575
+ * </Defer>
576
+ *
577
+ * @remarks
578
+ * Animations inside a `Defer` keep running while paint is skipped. phase loops
579
+ * self-pause off-screen on their own; for raw rAF/interval work, gate it with
580
+ * `useRenderState`.
581
+ */
582
+ declare function Defer({
583
+ estimatedHeight,
584
+ children,
585
+ ref,
586
+ ...divProps
587
+ }: DeferProps): JSX.Element;
588
+ //#endregion
589
+ //#region src/react/swap/index.d.ts
590
+ interface SwapProps extends ComponentProps<'div'> {
591
+ active: string;
592
+ exitDuration?: number;
593
+ children: ReactNode;
594
+ }
595
+ /**
596
+ * Coordinated exit-then-enter transitions for N states.
597
+ * Only one state is entering or exiting at a time (no overlap).
598
+ *
599
+ * The current state fully exits before the new state enters. Rapid changes
600
+ * (A->B->C during A's exit) skip intermediate states and jump to the latest.
601
+ *
602
+ * @example
603
+ * <Swap active={success ? 'success' : 'form'}>
604
+ * <Swap.State id="form" className="transition-all data-[phase=exiting]:opacity-0">
605
+ * <Form />
606
+ * </Swap.State>
607
+ * <Swap.State id="success" className="transition-all data-[enter=animate]:starting:opacity-0">
608
+ * <SuccessMessage />
609
+ * </Swap.State>
610
+ * </Swap>
611
+ */
612
+ declare function SwapRoot({
613
+ active,
614
+ exitDuration,
615
+ children,
616
+ ...divProps
617
+ }: SwapProps): JSX.Element;
618
+ interface SwapStateProps extends ComponentProps<'div'> {
619
+ id: string;
620
+ ref?: Ref<HTMLDivElement>;
621
+ }
622
+ declare function SwapState({
623
+ id,
624
+ ref: forwardedRef,
625
+ children,
626
+ ...divProps
627
+ }: SwapStateProps): JSX.Element | null;
628
+ declare const Swap: typeof SwapRoot & {
629
+ State: typeof SwapState;
630
+ };
631
+ //#endregion
632
+ export { type CanvasDrawFn, type ContainerBreakpoint, Defer, type DeferProps, type IdleOptions, type LifecyclePhase, type LifecycleReason, type LifecycleReducedMotion, type LoopTickFn, Presence, type PresenceMode, type PresencePhase, type PresenceProps, type PresenceReason, type RenderPhase, type Size, Swap, type SwapProps, type SwapStateProps, type UseCanvasOptions, type UseCanvasResult, type UseContainerQueryOptions, type UseContainerQueryResult, type UseLifecycleOptions, type UseLifecycleResult, type UseLoopOptions, type UseLoopResult, type UsePresenceOptions, type UsePresenceResult, type UseScrollProgressOptions, type UseScrollProgressResult, type UseSightOptions, type UseSightResult, type UseSizeOptions, type UseSizeResult, type UseTweenOptions, WhenIdle, type WhenIdleProps, WhenVisible, type WhenVisibleProps, useCanvas, useContainerQuery, useDevicePixelRatio, useIdle, useLifecycle, useLoop, useMediaQuery, usePrefersReducedMotion, usePresence, useRenderState, useScrollProgress, useSight, useSize, useStableCallback, useSyncedRef, useTween, useWhenIdle };
633
+ //# sourceMappingURL=react.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react.d.ts","names":[],"sources":["../src/react/use-synced-ref/index.ts","../src/react/use-stable-callback/index.ts","../src/react/use-loop/index.ts","../src/react/use-lifecycle/index.ts","../src/react/use-device-pixel-ratio/index.ts","../src/react/use-media/index.ts","../src/react/use-reduced-motion/index.ts","../src/react/use-sight/index.ts","../src/react/use-size/index.ts","../src/react/use-container-query/index.ts","../src/react/use-scroll-progress/index.ts","../src/react/use-render-state/index.ts","../src/react/use-idle/index.ts","../src/react/use-when-idle/index.ts","../src/react/use-canvas/index.ts","../src/react/use-tween/index.ts","../src/react/use-presence/index.ts","../src/react/presence/index.tsx","../src/react/when-visible/index.tsx","../src/react/when-idle/index.tsx","../src/react/defer/index.tsx","../src/react/swap/index.tsx"],"mappings":"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"}