@uniflowed/hooks 0.0.0-alpha.10

package/index.js

@@ -0,0 +1,206 @@
+// @flow
+//
+// `@uniflowed/hooks`: the hooks a React application writes anyway.
+//
+// Every hook here is one that people write by hand in every project and get
+// subtly wrong in the same way each time — a timer that calls a stale closure,
+// a subscription re-established on every keystroke, a slow request overwriting
+// a fast one, persisted state that differs between the server render and the
+// first paint, a shortcut that fires while somebody is typing, a dialog that
+// unlocks the page while a second dialog is still open.
+//
+// VueUse is the benchmark, and most of what it offers is not here on purpose.
+// Its `Reactivity`, `Watch` and `Array` categories exist because Vue's `ref`
+// is a mutable box that has to be wrapped, unwrapped, synced and derived;
+// React has no box, and `useMemo` over a plain array is the whole of
+// `useArrayFilter`. Its `Component` category is Vue's template machinery —
+// `templateRef`, `unrefElement`, `useVModel` — which is `ref` and props here.
+// Porting either would have produced hooks whose only purpose was to look
+// familiar. The "Readiness" section below says what is here, what is
+// deliberately elsewhere in uf, and what is simply not built.
+//
+// # Prerendering is the constraint that shapes the surface
+//
+// uf prerenders every static route, so each of these runs once where there is
+// no `window`. The browser hooks are built on `useSyncExternalStore`, which
+// takes the server's value as a separate argument — so what a prerender sees is
+// *stated* rather than being whatever a `typeof window` check fell through to,
+// and React reads the value when it commits rather than when it renders, which
+// is what stops a media query that changes mid-render from tearing.
+//
+// Where there is no honest default, the caller supplies one: a page that hides
+// its sidebar under 48rem wants `false` on the server and one that renders a
+// mobile menu wants `true`, and a library cannot know which.
+//
+// The hooks built on effects rather than stores — everything in `dom.js`, and
+// the three in `browser.js` whose first value only arrives in a callback — do
+// nothing at all before hydration, and report the same starting value on both
+// sides for that reason. Each module's header says which it is and why.
+//
+// # React's rules are the design, not a constraint on it
+//
+// Nothing here writes during a render, reads a ref during a render, or depends
+// on a render having happened exactly once. Callbacks that cross into effects
+// go through `useStableCallback`, whose ref is written in an insertion effect
+// rather than in the body, so Strict Mode's double render and a render the
+// React Compiler skips are both correct. Every effect's cleanup removes
+// exactly what its body added, which is what makes Strict Mode's
+// mount-unmount-mount balanced — including the module-level counters behind
+// `useScrollLock` and `useStorage`.
+//
+// # How the package is laid out
+//
+// Eight modules beside this one, split by what a hook's subject is — because
+// that is the question a reader looking for one actually asks:
+//
+// - `lifecycle.js` — the component itself: mounted, previous, run once.
+// - `state.js` — a value the component owns, with the operations that suit it:
+//   toggle, counter, list, set, cycle, undo/redo, storage.
+// - `timing.js` — when something runs: intervals, timeouts, debounce,
+//   throttle, frames, idleness, and the clock behind "3 minutes ago".
+// - `async.js` — one promise: its states, its abort signal, its retries.
+// - `browser.js` — the ambient environment: viewport, scroll, connection,
+//   position, permissions, preferences.
+// - `dom.js` — one element the caller holds a ref to: listen, measure,
+//   observe, press.
+// - `keyboard.js` — what is being pressed: a chord, and a held key.
+// - `channels.js` — a value that came from outside the page: another tab, the
+//   system clipboard.
+//
+// The two that are easiest to confuse are `browser.js` and `dom.js`, so each
+// says so in its own header: `browser.js` needs no ref because there is one
+// browser, and `dom.js` needs one because there are as many answers as there
+// are elements. `keyboard.js` is neither, which is why it is a third file
+// rather than a corner of one of them, and its header says what the four hard
+// parts of a shortcut are.
+//
+// They sit here rather than under an `internal/`, and each has its own
+// subpath. Every name in them is exported from this file, so calling them
+// internal would have described nothing true, and it cost a reader a directory
+// hop to reach the first line of code. `internal/` is for a module consumers
+// must not reach; this package has none.
+//
+// `lifecycle.js` and `browser.js` are the two the others import —
+// `useStableCallback` and `browserWindow` — and both are still subjects rather
+// than bags of shared helpers. A hook goes in `lifecycle.js` because it is
+// about the component's life, never because more than one file wanted it.
+//
+// # Readiness
+//
+// **Implemented and tested.** The component's life; the state shapes; every
+// timer, including the adaptive schedule behind `useTimeAgo`; `useAsync` with
+// abort and retry; media queries, colour scheme, reduced motion, online,
+// document visibility, window size and scroll, scroll lock; element size,
+// intersection, mutations, hover, focus-within, click-outside, long press,
+// element scroll, the element as state; key chords and held keys; storage with
+// cross-tab sync;
+// broadcast channels; the clipboard. `tests/library/hooks.test.js` covers
+// behaviour and cleanup, and `tests/library/hooks-ssr.test.js` renders the
+// whole surface in a process that has no DOM at all.
+//
+// **Experimental.** `useGeolocation`, `useNetwork` and `usePermission`. The
+// shapes are settled and the cleanup is right, but the browsers disagree about
+// them more than the rest of this package does: Network Information is
+// Chromium's alone, the Permissions API rejects rather than answers for names
+// it does not know, and geolocation cannot be exercised end to end in a
+// headless document — the tests cover the unsupported path, the subscription
+// and its teardown, not a real fix. Treat the fields as advisory.
+//
+// **Not implemented, and not planned here.** Everything whose subject is
+// somewhere else in uf: a request with a cache is `@uniflowed/query`, a form
+// field is `@uniflowed/form`, an atom two routes read is `@uniflowed/state`, a
+// rendered instant is `@uniflowed/web`'s `Time`, styling and dark mode are
+// `@uniflowed/stylex`, and a virtual list or an infinite scroller is
+// `@uniflowed/ui`. Beyond those: the device APIs VueUse wraps that a general
+// application does not reach for — Bluetooth, gamepads, USB, speech, wake
+// lock, screen capture, web workers, battery, vibration — are absent rather
+// than shallow. A wrapper over one of those is three lines and a `supported`
+// flag; what makes it worth shipping is knowing the failure modes, and this
+// package does not yet.
+
+export type { Async, AsyncOptions } from "./async.js";
+export type {
+  BrowserNavigator,
+  BrowserWindow,
+  EffectiveConnectionType,
+  GeolocationReading,
+  Geoposition,
+  Network,
+  NetworkConnection,
+  PermissionAnswer,
+  PermissionName,
+  ScrollOffset,
+  Size,
+} from "./browser.js";
+export type { UseBroadcastReturn, UseClipboardReturn } from "./channels.js";
+export type { ListenerOptions, ListenerTarget, MutationOptions, Ref } from "./dom.js";
+export type { KeyComboOptions } from "./keyboard.js";
+export type {
+  UseCounterReturn,
+  UseCycleReturn,
+  UseListReturn,
+  UseSetReturn,
+  UseToggleReturn,
+  UseUndoableReturn,
+} from "./state.js";
+
+export { useAsync } from "./async.js";
+export {
+  useIsomorphicLayoutEffect,
+  useMount,
+  useMounted,
+  usePrevious,
+  useRerender,
+  useStableCallback,
+  useUnmount,
+} from "./lifecycle.js";
+export {
+  useAnimationFrame,
+  useDebouncedCallback,
+  useDebouncedValue,
+  useIdle,
+  useInterval,
+  useNow,
+  useThrottledCallback,
+  useTimeAgo,
+  useTimeout,
+} from "./timing.js";
+export {
+  browserWindow,
+  useDocumentVisible,
+  useGeolocation,
+  useMediaQuery,
+  useNetwork,
+  useOnline,
+  usePermission,
+  usePreferredColorScheme,
+  usePrefersReducedMotion,
+  useScrollLock,
+  useSupported,
+  useWindowScroll,
+  useWindowSize,
+} from "./browser.js";
+export {
+  useClickOutside,
+  useElementRef,
+  useElementSize,
+  useElementState,
+  useEventListener,
+  useFocusWithin,
+  useHover,
+  useIntersecting,
+  useLongPress,
+  useMutationObserver,
+  useScroll,
+} from "./dom.js";
+export { useKeyCombo, useKeyHeld } from "./keyboard.js";
+export { useBroadcast, useClipboard } from "./channels.js";
+export {
+  useCounter,
+  useCycle,
+  useList,
+  useSet,
+  useStorage,
+  useToggle,
+  useUndoable,
+} from "./state.js";

package/keyboard.js

@@ -0,0 +1,328 @@
+// @flow
+//
+// `@uniflowed/hooks/keyboard`: a chord is not an event.
+//
+// This is the third subject in the package that is neither one element nor the
+// ambient environment, and it earns a file because none of the difficulty is
+// in the listening. `document.addEventListener("keydown", …)` is one line; the
+// four things after it are what people get wrong, and they get them wrong the
+// same way in every project:
+//
+// **A combination is not a key.** `⌘K` is a `keydown` whose `key` is `"k"` and
+// whose `metaKey` is true, and a handler that checks only the first fires on a
+// plain `k` — so a search box opens while somebody is typing a name. Checking
+// the modifiers that *are* named is half of it; refusing the ones that are not
+// is the other half, and it is the half that gets left out.
+//
+// **`mod` is not `ctrl`.** The shortcut is ⌘K on a Mac and Ctrl+K everywhere
+// else. A library that makes the caller write two bindings makes every caller
+// write the same platform test.
+//
+// **A shortcut inside a text field is a keystroke.** `?` should open help,
+// except while somebody is typing a question mark into a comment. The default
+// here is that a chord does not fire while the reader is typing, and a caller
+// who means it to says so.
+//
+// **A held key repeats.** Holding a key sends `keydown` twenty times a second.
+// A shortcut that opens a dialog should open it once.
+//
+// # What belongs in this module
+//
+// A hook whose subject is what is being pressed: a chord, and whether a key is
+// down. Not the key events of one element — `useEventListener(ref, "keydown",
+// …)` in `dom.js` is that, and it is the right tool when the subject really is
+// the element. These listen on the document by default, because a shortcut
+// belongs to the page rather than to whatever happens to have focus.
+//
+// # Before hydration
+//
+// Nothing. Both hooks do their work in effects, `useKeyHeld` reports `false`
+// on a server and in the first client render, and the platform test that
+// decides what `mod` means is made inside the effect rather than during a
+// render — so nothing here can differ between the two passes React compares.
+
+import { useEffect, useState } from "@uniflowed/react";
+
+import { browserWindow } from "./browser.js";
+import type { Ref } from "./dom.js";
+import { useStableCallback } from "./lifecycle.js";
+
+/** A combination, once its spelling has been resolved. */
+type Chord = {|
+  readonly key: string,
+  readonly ctrl: boolean,
+  readonly meta: boolean,
+  readonly alt: boolean,
+  readonly shift: boolean,
+  /** Ctrl, or Command on Apple platforms. */
+  readonly mod: boolean,
+|};
+
+/**
+ * The spellings people actually write, mapped to the one `KeyboardEvent.key`
+ * uses.
+ *
+ * `key` reports the character produced, so the arrows are `"ArrowUp"` and the
+ * space bar is a literal space — neither of which anybody writes in a
+ * shortcut.
+ */
+const KEY_ALIASES: { readonly [string]: string } = {
+  esc: "escape",
+  space: " ",
+  spacebar: " ",
+  ret: "enter",
+  return: "enter",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright",
+  del: "delete",
+  plus: "+",
+};
+
+/**
+ * Read `"mod+shift+k"` into a chord.
+ *
+ * Unknown modifier names are treated as the key rather than rejected: a typo
+ * produces a shortcut that never fires, which the author notices, and a throw
+ * during a render would take the page down instead.
+ */
+function parseChord(combo: string): Chord {
+  let ctrl = false;
+  let meta = false;
+  let alt = false;
+  let shift = false;
+  let mod = false;
+  let key = "";
+
+  for (const raw of combo.split("+")) {
+    const part = raw.trim().toLowerCase();
+    if (part === "") {
+      // `"shift++"` is shift and the plus key, and splitting leaves a hole.
+      key = "+";
+    } else if (part === "ctrl" || part === "control") {
+      ctrl = true;
+    } else if (part === "cmd" || part === "command" || part === "meta" || part === "super") {
+      meta = true;
+    } else if (part === "alt" || part === "opt" || part === "option") {
+      alt = true;
+    } else if (part === "shift") {
+      shift = true;
+    } else if (part === "mod") {
+      mod = true;
+    } else {
+      key = KEY_ALIASES[part] ?? part;
+    }
+  }
+
+  return { key, ctrl, meta, alt, shift, mod };
+}
+
+/**
+ * Whether `mod` means Command here.
+ *
+ * Read from the user agent because that is the only thing every browser
+ * agrees on: `navigator.platform` is deprecated and frozen, and
+ * `userAgentData` exists in Chromium alone. Called from inside an effect, so a
+ * server render never asks.
+ */
+function onApple(): boolean {
+  const agent = browserWindow()?.navigator.userAgent ?? "";
+  return /mac|iphone|ipad|ipod/i.test(agent);
+}
+
+/** Whether the event landed in something the reader is typing into. */
+function typing(target: EventTarget): boolean {
+  if (typeof HTMLElement === "undefined" || !(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.isContentEditable) {
+    return true;
+  }
+  const tag = target.tagName.toLowerCase();
+  return tag === "input" || tag === "textarea" || tag === "select";
+}
+
+/**
+ * Whether a key is one that shift is needed to type.
+ *
+ * A single character that is neither a letter nor a digit: `"?"`, `"+"`,
+ * `"!"`. `KeyboardEvent.key` reports the character *produced*, so those arrive
+ * with `shiftKey` true on a US layout and false on layouts where they have
+ * their own key.
+ */
+function shiftedSymbol(key: string): boolean {
+  return key.length === 1 && !/[a-z0-9]/.test(key);
+}
+
+/**
+ * Whether `event` is this chord.
+ *
+ * The modifiers named must be down and the ones not named must be up. That
+ * second half is what makes `"mod+k"` refuse Ctrl+Shift+K, which is a
+ * different shortcut somebody else has probably bound.
+ *
+ * Shift is the one exception, and only for a key that shift is needed to
+ * type: `"?"` is the most common single-key shortcut on the web and arrives
+ * with `shiftKey` true on a US layout and false on a German one, so requiring
+ * either would make it unbindable on half the keyboards in the world. For a
+ * letter, a digit or a named key it is checked like the rest.
+ */
+function isChord(chord: Chord, event: KeyboardEvent, apple: boolean): boolean {
+  if (event.key.toLowerCase() !== chord.key) {
+    return false;
+  }
+  const meta = chord.meta || (chord.mod && apple);
+  const ctrl = chord.ctrl || (chord.mod && !apple);
+  if (event.metaKey !== meta || event.ctrlKey !== ctrl || event.altKey !== chord.alt) {
+    return false;
+  }
+  if (chord.shift) {
+    return event.shiftKey;
+  }
+  return shiftedSymbol(chord.key) || !event.shiftKey;
+}
+
+/** `event` as a keyboard event, or `null` for anything else. */
+function asKeyboardEvent(event: Event): KeyboardEvent | null {
+  if (typeof KeyboardEvent === "undefined" || !(event instanceof KeyboardEvent)) {
+    return null;
+  }
+  return event;
+}
+
+/** How a chord is listened for. */
+export type KeyComboOptions = {|
+  /** Listen on this element instead of the document. */
+  readonly target?: Ref<HTMLElement> | null,
+  /** Fire even while the reader is typing into a field. Off by default. */
+  readonly whileTyping?: boolean,
+  /** Fire again while the key is held down. Off by default. */
+  readonly repeat?: boolean,
+  /** Call `preventDefault` when it fires. On by default, since ⌘K is the browser's too. */
+  readonly preventDefault?: boolean,
+  /** Turn the binding off without changing where the hook is called. */
+  readonly enabled?: boolean,
+|};
+
+/**
+ * Call `handler` when a key combination is pressed.
+ *
+ * ```js
+ * useKeyCombo("mod+k", () => setSearchOpen(true));
+ * useKeyCombo("escape", close, { whileTyping: true });
+ * ```
+ *
+ * `preventDefault` defaults to on because the combinations worth binding are
+ * the ones the browser also wants — ⌘K is the address bar in Chrome, ⌘S is
+ * Save Page — and a shortcut that fires *and* opens a browser dialog is worse
+ * than either alone. A chord that is only the application's, like `escape`,
+ * loses nothing by it.
+ */
+export hook useKeyCombo(
+  combo: string,
+  handler: (event: KeyboardEvent) => mixed,
+  options?: KeyComboOptions,
+): void {
+  const stable = useStableCallback(handler);
+  const target = options?.target ?? null;
+  const whileTyping = options?.whileTyping ?? false;
+  const repeat = options?.repeat ?? false;
+  const preventDefault = options?.preventDefault ?? true;
+  const enabled = options?.enabled ?? true;
+
+  useEffect(() => {
+    const win = browserWindow();
+    if (!enabled || win == null) {
+      return;
+    }
+    // A ref that is given and empty means the element is not there yet, which
+    // is not the same as "no element was asked for": falling back to the
+    // document would bind the shortcut to the whole page by accident.
+    const node = target == null ? win.document : target.current;
+    if (node == null) {
+      return;
+    }
+
+    const chord = parseChord(combo);
+    const apple = onApple();
+
+    const listener = (event: Event) => {
+      const key = asKeyboardEvent(event);
+      if (key == null || (!repeat && key.repeat)) {
+        return;
+      }
+      if (!whileTyping && typing(key.target)) {
+        return;
+      }
+      if (!isChord(chord, key, apple)) {
+        return;
+      }
+      if (preventDefault) {
+        key.preventDefault();
+      }
+      stable(key);
+    };
+
+    node.addEventListener("keydown", listener);
+    return () => node.removeEventListener("keydown", listener);
+  }, [combo, enabled, target, whileTyping, repeat, preventDefault, stable]);
+}
+
+/**
+ * Whether a key is being held down.
+ *
+ * For the case a chord cannot express: a modifier that changes what a drag
+ * does while it is held, a space bar that pans a canvas. `key` is matched
+ * against `KeyboardEvent.key`, case-insensitively, so `"shift"`, `"escape"`
+ * and `" "` all work.
+ *
+ * The `blur` reset is the reason this is a hook rather than two listeners.
+ * Holding a key and switching windows sends the `keyup` to the other window,
+ * so a hand-written version leaves the key held forever — the canvas stays
+ * panning after the reader comes back. Losing focus releases everything.
+ */
+export hook useKeyHeld(
+  key: string,
+  options?: {| readonly target?: Ref<HTMLElement> | null |},
+): boolean {
+  const [held, setHeld] = useState(false);
+  const target = options?.target ?? null;
+  const wanted = key.toLowerCase();
+
+  useEffect(() => {
+    const win = browserWindow();
+    if (win == null) {
+      return;
+    }
+    const node = target == null ? win.document : target.current;
+    if (node == null) {
+      return;
+    }
+
+    const down = (event: Event) => {
+      const pressed = asKeyboardEvent(event);
+      if (pressed != null && pressed.key.toLowerCase() === wanted) {
+        setHeld(true);
+      }
+    };
+    const up = (event: Event) => {
+      const released = asKeyboardEvent(event);
+      if (released != null && released.key.toLowerCase() === wanted) {
+        setHeld(false);
+      }
+    };
+    const release = () => setHeld(false);
+
+    node.addEventListener("keydown", down);
+    node.addEventListener("keyup", up);
+    win.addEventListener("blur", release);
+    return () => {
+      node.removeEventListener("keydown", down);
+      node.removeEventListener("keyup", up);
+      win.removeEventListener("blur", release);
+    };
+  }, [wanted, target]);
+
+  return held;
+}

package/lifecycle.js

@@ -0,0 +1,114 @@
+// @flow
+//
+// `@uniflowed/hooks/lifecycle`: where a component is in its life.
+//
+// The one that matters most is `useStableCallback`. A callback recreated every
+// render is the single most common cause of a React performance problem and of
+// a subscription that tears itself down and sets itself up on every keystroke —
+// and the usual fix, listing the callback in a dependency array, spreads the
+// problem to every hook that takes it. A stable identity that always calls the
+// latest closure fixes it once.
+//
+// # What belongs in this module
+//
+// A hook whose subject is the component itself: has it mounted, is it still
+// mounted, what did it render last time, run this once, run this on the way
+// out, and the two effect-shaped primitives the rest of the package needs
+// (`useIsomorphicLayoutEffect`, `useStableCallback`). None of them reads
+// anything outside React.
+//
+// It is also the one module here the others import, which is a consequence and
+// not the reason: `timing.js`, `state.js` and `dom.js` all need a stable
+// callback. That does not make this a "utils" or a "common" — it has a subject
+// of its own, and a hook lands here because it is about the component's life,
+// never because two other files happened to want it.
+
+import {
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "@uniflowed/react";
+
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server.
+ *
+ * uf prerenders every static route, and React warns that `useLayoutEffect`
+ * does nothing during a server render — correctly, because there is no layout
+ * to read. Every hook here that measures or subscribes uses this, so a hook is
+ * not a reason a page cannot be prerendered.
+ */
+export const useIsomorphicLayoutEffect: typeof useLayoutEffect =
+  typeof globalThis.document === "undefined" ? useEffect : useLayoutEffect;
+
+/**
+ * A callback whose identity never changes and whose body is always the latest.
+ *
+ * This is the `useEvent` shape from React's own RFC. The ref is written in an
+ * insertion effect rather than in the render, because writing it during render
+ * makes the callback's behaviour depend on whether that render was thrown away
+ * — and it is written before any layout effect runs, so a subscription set up
+ * in one already sees the current body.
+ */
+export hook useStableCallback<TArgs extends $ReadOnlyArray<mixed>, TReturn>(
+  callback: (...args: TArgs) => TReturn,
+): (...args: TArgs) => TReturn {
+  const latest = useRef(callback);
+
+  useInsertionEffect(() => {
+    latest.current = callback;
+  }, [callback]);
+
+  return useCallback((...args: TArgs) => latest.current(...args), []);
+}
+
+/** The value from the previous render, or `undefined` on the first. */
+export hook usePrevious<T>(value: T): T | void {
+  const previous = useRef<T | void>(undefined);
+  useEffect(() => {
+    previous.current = value;
+  }, [value]);
+  return previous.current;
+}
+
+/**
+ * Whether the component has mounted.
+ *
+ * For the case where a value differs between server and client and rendering
+ * the client's on the first pass would be a hydration mismatch: render the
+ * server's, then switch.
+ */
+export hook useMounted(): boolean {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted;
+}
+
+/** Run `body` once, after mount. */
+export hook useMount(body: () => mixed): void {
+  const stable = useStableCallback(body);
+  useEffect(() => {
+    stable();
+  }, [stable]);
+}
+
+/** Run `body` once, at unmount. */
+export hook useUnmount(body: () => mixed): void {
+  const stable = useStableCallback(body);
+  useEffect(() => () => void stable(), [stable]);
+}
+
+/**
+ * Force a re-render.
+ *
+ * A counter rather than a boolean, because two renders in a row must both
+ * change the state or React drops the second.
+ */
+export hook useRerender(): () => void {
+  const [, setTick] = useState(0);
+  return useCallback(() => setTick((tick) => tick + 1), []);
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@uniflowed/hooks",
+  "version": "0.0.0-alpha.10",
+  "description": "The React hooks an application writes anyway, prerender-safe, part of the Unified Toolchain for Flow.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ubugeeei-prod/uf.git",
+    "directory": "packages/hooks"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./async": "./async.js",
+    "./browser": "./browser.js",
+    "./channels": "./channels.js",
+    "./dom": "./dom.js",
+    "./keyboard": "./keyboard.js",
+    "./lifecycle": "./lifecycle.js",
+    "./state": "./state.js",
+    "./timing": "./timing.js"
+  },
+  "files": [
+    "*.js"
+  ],
+  "dependencies": {
+    "@uniflowed/react": "0.0.0-alpha.10"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  }
+}