@molecule/app-react 3.2.0 → 3.3.1

package/README.md

@@ -3,7 +3,7 @@ AUTO-GENERATED — DO NOT EDIT THIS FILE.
 Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
 Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
 To change this document, edit the module-level JSDoc in src/index.ts.
-Generated: 2026-11-03T18:02:49.265Z
+Generated: 2026-11-04T14:20:06.747Z
 -->
 
 # @molecule/app-react
@@ -170,165 +170,65 @@ Provides login/logout/register flows, token management, profile
 updates, and auth state subscription.
 
 ```typescript
-interface AuthClient<T = UserProfile, TRegister extends RegisterExtraShape<TRegister> = Record<never, never>> {
-    /**
-     * Returns the current authentication state snapshot.
-     *
-     * READING the state starts the client's one session restore when nobody has called
-     * {@link initialize} yet — lazily and exactly once, sharing the promise an explicit
-     * `initialize()` returns. A hook (`useAuth()`), a subscriber, `isAuthenticated()` and
-     * `getUser()` are reads too, so a client whose entry file dropped the template's
-     * `authClient.initialize()` line still restores instead of reporting `'loading'`
-     * forever.
-     */
-    getState(): AuthState<T>;
-    /**
-     * Returns whether the user is currently authenticated.
-     */
-    isAuthenticated(): boolean;
-    /**
-     * Gets the current user.
-     */
-    getUser(): T | null;
-    /**
-     * Optional ownership marker for the current session. Compare values only within
-     * this client: replacing or ending a session changes it, including re-adopting
-     * the same token and user. Profile updates and same-session refreshes keep it.
-     * Consumers can use it to discard stale async work without treating editable
-     * user fields as an immutable account identifier. Providers without this
-     * capability require the consumer's own stable identity check.
-     */
-    getSessionRevision?(): number;
-    /**
-     * Updates the cached user object (state + persistent storage) without
-     * hitting the network. Intended for local refreshes after a per-app
-     * mutation (e.g., the user just PATCHed their own profile and the
-     * server returned the canonical row). A non-null profile does NOT change
-     * tokens or sign the client in: `authenticated` and `status` are unchanged,
-     * so an anonymous client stays anonymous. Use {@link login} /
-     * {@link register} for a credential exchange, or {@link setSession} when
-     * the token was issued outside the client.
-     *
-     * Passing `null` on a signed-in client, or while any session operation is
-     * pending, ends the local session: it clears the access token, refresh token
-     * and cached user, stops automatic refresh, and settles `authenticated: false`
-     * with `status: 'unauthenticated'` in one notification. Every older operation
-     * loses session ownership, and a persistent sign-out marker prevents a reload
-     * from restoring its credentials or a late cookie. A late credential exchange
-     * is revoked best-effort when a logout endpoint is configured, without blocking
-     * the caller. This method does not otherwise call the server for a settled
-     * session; use {@link logout} for explicit server revocation. On a settled
-     * anonymous client, `null` only clears the cached profile and leaves tokens
-     * and auth state unchanged.
-     */
-    setUser(user: T | null): void;
-    /**
-     * Gets the current access token.
-     */
-    getAccessToken(): string | null;
-    /**
-     * Stores the access token in the configured token storage adapter (in a
-     * browser, Web Storage; `'memory'` where no browser store exists). Use this
-     * to seed the token after an out-of-band exchange (e.g. the OAuth
-     * code→token redirect) instead of writing to `localStorage` directly,
-     * which would violate the storage contract and make a stored bearer token
-     * JS-readable (XSS-exfiltratable). Pass `null` to clear it.
-     *
-     * This changes token storage only: passing `null` does not by itself sign a
-     * signed-in client out, and a non-null token does not sign an anonymous
-     * client in (`authenticated` and `status` are unchanged). Use {@link logout}
-     * to end a session, or {@link setUser} with `null` for local-only sign-out.
-     * Use {@link login} / {@link register} for a credential exchange, or call
-     * {@link setSession} with the token and user to establish an already-issued
-     * session.
-     */
-    setAccessToken(token: string | null): void;
-    /**
-     * Adopts a session an out-of-band exchange already established: stores the
-     * access token (and the refresh token when given), caches the user, and
-     * sets the COMPLETE state — `initialized`, `authenticated`, `status:
-     * 'authenticated'`, no error — in one update, with one subscriber
-     * notification. Every hook reading the shared client sees the user as
-     * signed in immediately.
-     *
-     * This is the way to seed an OAuth/custom sign-in. Calling
-     * {@link setAccessToken} and {@link setUser} instead does NOT sign the
-     * client in.
-     */
-    setSession(session: AuthSessionSeed<T>): void;
-    /**
-     * Gets the refresh token.
-     */
-    getRefreshToken(): string | null;
-    /**
-     * Logs in with credentials.
-     */
-    login(credentials: LoginCredentials): Promise<AuthResult<T>>;
-    /**
-     * Logs out the current user. The server request is best-effort: a missing
-     * logout route (404), any other HTTP failure, or a network error never makes
-     * this method reject. It always clears the access token, refresh token and
-     * cached user, stops automatic refresh, and publishes one settled
-     * `authenticated: false`, `status: 'unauthenticated'` transition. Every pending
-     * session operation loses ownership; a persistent marker prevents reload from
-     * restoring an older session, and late credentials are revoked best-effort.
-     *
-     * When the API has no logout route, set {@link AuthClientConfigOptions.logoutEndpoint}
-     * to `null` (or `''`) to skip the request. Local sign-out still happens.
-     */
-    logout(): Promise<void>;
-    /**
-     * Registers a new user. Accepts the base fields plus the app's own fields
-     * (`TRegister`) at the top level — see {@link RegisterData}.
-     */
-    register(data: RegisterData<TRegister>): Promise<AuthResult<T>>;
-    /**
-     * Refreshes the access token.
-     */
-    refresh(): Promise<AuthResult<T>>;
-    /**
-     * Requests a password reset.
-     */
-    requestPasswordReset(data: PasswordResetRequest): Promise<void>;
-    /**
-     * Confirms a password reset.
-     */
-    confirmPasswordReset(data: PasswordResetConfirm): Promise<void>;
-    /**
-     * Updates the current user's profile.
-     * Returns the saved profile: the answer applied onto the signed-in user field
-     * by field, with or without an `id` — a field it carries replaces the value
-     * (`null` clears it), one it omits or leaves `undefined` is kept, so a field
-     * cleared by omission must arrive as `null`. A non-object answer is returned
-     * as it came. An answer for a replaced or ended session leaves the current one
-     * untouched.
-     */
-    updateProfile(data: Partial<T>): Promise<T>;
-    /**
-     * Changes the current user's password.
-     */
-    changePassword(oldPassword: string, newPassword: string): Promise<void>;
-    /**
-     * Initializes auth state (e.g., from stored tokens).
-     *
-     * LAZY and IDEMPOTENT: the first read of the state ({@link getState},
-     * {@link subscribe}, `useAuth()`) starts this same restore when nobody has called
-     * `initialize()`, and every later call shares the one promise instead of sending a
-     * second request. An app that keeps the template's explicit call behaves exactly as
-     * before; an app that loses that line still restores its session.
-     *
-     * With a stored token AND a stored user it marks the session `'authenticated'`
-     * SYNCHRONOUSLY — before its first `await` — so the first render is the
-     * signed-in UI and no page waits on a verification round trip. Any check
-     * (a refresh, the cookie-restore probe) settles behind that render, and only an
-     * explicit 401/403 ends the session; a network/5xx/404 failure keeps it and
-     * reports `'unavailable'`. With no stored user the client stays `'loading'`
-     * until the cookie restore decides.
-     *
-     * Do not put this call (or a `/me` request of your own) in front of the first
-// … truncated — the full declaration is in node_modules/@molecule/app-react/dist
+interface AuthClient<
+  T = UserProfile,
+  TRegister extends RegisterExtraShape<TRegister> = Record<never, never>,
+> {
+  /** Returns the current authentication state snapshot. */
+  getState(): AuthState<T>
+  /** Returns whether the user is currently authenticated. */
+  isAuthenticated(): boolean
+  /** Gets the current user. */
+  getUser(): T | null
+  /** Optional ownership marker for the current session. */
+  getSessionRevision?(): number
+  /** Updates the cached user object (state + persistent storage) without hitting the network. */
+  setUser(user: T | null): void
+  /** Gets the current access token. */
+  getAccessToken(): string | null
+  /** Stores the access token in the configured token storage adapter (in a browser, Web Storage; `'memory'` where no browser store exists). */
+  setAccessToken(token: string | null): void
+  /** Adopts a session an out-of-band exchange already established: stores the access token (and the refresh token when given), caches the user, and sets the COMPLET… */
+  setSession(session: AuthSessionSeed<T>): void
+  /** Gets the refresh token. */
+  getRefreshToken(): string | null
+  /** Logs in with credentials. */
+  login(credentials: LoginCredentials): Promise<AuthResult<T>>
+  /** Logs out the current user. */
+  logout(): Promise<void>
+  /** Registers a new user. */
+  register(data: RegisterData<TRegister>): Promise<AuthResult<T>>
+  /** Refreshes the access token. */
+  refresh(): Promise<AuthResult<T>>
+  /** Requests a password reset. */
+  requestPasswordReset(data: PasswordResetRequest): Promise<void>
+  /** Confirms a password reset. */
+  confirmPasswordReset(data: PasswordResetConfirm): Promise<void>
+  /** Updates the current user's profile. */
+  updateProfile(data: Partial<T>): Promise<T>
+  /** Changes the current user's password. */
+  changePassword(oldPassword: string, newPassword: string): Promise<void>
+  /** Initializes auth state (e.g., from stored tokens). */
+  initialize(): Promise<void>
+  /** Re-checks a restored session against the server, in the background — the boot-time validation an app with a stored token needs when a revoked or expired token… */
+  validateSession?(): Promise<void>
+  /** Resolves when the session restore started by `initialize()` has settled — the point after which the client knows whether this visitor is signed in. */
+  whenRestored?(): Promise<void>
+  /** Subscribes to auth state changes. */
+  subscribe(callback: (state: AuthState<T>) => void): () => void
+  /** Subscribes to auth state changes (alias for subscribe). */
+  onAuthChange(callback: (state: AuthState<T>) => void): () => void
+  /** Gets the current access token (alias for getAccessToken). */
+  getToken?(): string | null
+  /** Adds an auth event listener. */
+  addEventListener(listener: AuthEventListener<T>): () => void
+  /** Destroys the auth client. */
+  destroy(): void
+}
 ```
 
+_(Member comments are shortened to their first sentence to fit; the full declaration is in `node_modules/@molecule/app-react/dist`.)_
+
 #### `FormController`
 
 Form controller interface.
@@ -1029,6 +929,28 @@ interface UseOAuthReturn {
 }
 ```
 
+#### `UseOptimisticValueResult`
+
+What {@link useOptimisticValue} returns: the state to render and the two ways to change it.
+
+```typescript
+interface UseOptimisticValueResult<T> extends OptimisticValueState<T> {
+  /**
+   * Shows `next` at once and saves it, after any save already running.
+   *
+   * @param next - The value the person chose.
+   */
+  set: (next: T) => void
+
+  /**
+   * Like `set`, computed from the value shown now (`update((on) => !on)`).
+   *
+   * @param change - Computes the next value from the value shown now.
+   */
+  update: (change: (current: T) => T) => void
+}
+```
+
 #### `UsePasswordResetReturn`
 
 Return type for usePasswordReset hook.
@@ -2505,6 +2427,27 @@ function useOAuth(config?: {
 
 **Returns:** OAuth helpers: providers, getOAuthUrl, redirect, and loginViaPopup.
 
+#### `useOptimisticValue(options)`
+
+A server-backed value — a favorite, follow, like or bookmark button, a rating, a quantity, a
+setting switch — that changes on the first render after a tap and is saved one change at a
+time, in order. A tap during a save is saved right after it; only a failure of the newest
+change puts the server value back. See `createOptimisticValue` in `@molecule/app-state`.
+
+`value` is the server's value from props or a query. A new `value` is taken only when it
+differs (by `equals`) from the one the hook last received, and only while nothing is being
+saved, so a parent re-render or a refetch of older data never flips the button mid-save. The
+latest `commit` and `onError` are always used. Give the component a `key` per record, so one
+record's pending change never shows on another.
+
+```typescript
+function useOptimisticValue<T>(options: OptimisticValueOptions<T>): UseOptimisticValueResult<T>
+```
+
+- `options` — The server's current value and how to save a change.
+
+**Returns:** The value to render, whether a save is pending, the newest failure, and `set`/`update`.
+
 #### `usePasswordReset()`
 
 Hook for password reset flow with async state tracking.
@@ -3235,7 +3178,7 @@ as `'unavailable'`. Custom clients must also settle their initial session status
 Synchronous SSR renders the fallback while a client is loading. Initialize a request-scoped
 client before rendering to include its decided content, or leave the hold disabled for SSR.
 
-_(description truncated — read the full text in `node_modules/@molecule/app-react/dist/session-ready.d.ts`.)_
+Route-level redirects for signed-in-only pages stay with `AuthGuard` (`@molecule/app-ui-react`).
 
 ```typescript
 function SessionReady({ children, fallback = null }: SessionReadyProps): ReactNode
@@ -3383,7 +3326,7 @@ Peer dependencies:
 - `@molecule/app-i18n` ^1.0.1
 - `@molecule/app-logger` ^1.0.1
 - `@molecule/app-routing` ^1.0.1
-- `@molecule/app-state` ^1.0.1
+- `@molecule/app-state` ^1.1.0
 - `@molecule/app-storage` ^1.0.1
 - `@molecule/app-theme` ^1.0.1
 - `@molecule/app-ui` ^1.0.1

package/dist/hooks/index.d.ts

@@ -16,6 +16,7 @@ export * from './useHttp.js';
 export * from './useLogger.js';
 export * from './useLogin.js';
 export * from './useOAuth.js';
+export * from './useOptimisticValue.js';
 export * from './usePasswordReset.js';
 export * from './usePlatform.js';
 export * from './usePreview.js';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}

package/dist/hooks/index.js

@@ -16,6 +16,7 @@ export * from './useHttp.js';
 export * from './useLogger.js';
 export * from './useLogin.js';
 export * from './useOAuth.js';
+export * from './useOptimisticValue.js';
 export * from './usePasswordReset.js';
 export * from './usePlatform.js';
 export * from './usePreview.js';

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA"}

package/dist/hooks/useOptimisticValue.d.ts

@@ -0,0 +1,67 @@
+import type { OptimisticValueOptions, OptimisticValueState } from '@molecule/app-state';
+/**
+ * What {@link useOptimisticValue} returns: the state to render and the two ways to change it.
+ */
+export interface UseOptimisticValueResult<T> extends OptimisticValueState<T> {
+    /**
+     * Shows `next` at once and saves it, after any save already running.
+     *
+     * @param next - The value the person chose.
+     */
+    set: (next: T) => void;
+    /**
+     * Like `set`, computed from the value shown now (`update((on) => !on)`).
+     *
+     * @param change - Computes the next value from the value shown now.
+     */
+    update: (change: (current: T) => T) => void;
+}
+/**
+ * A server-backed value — a favorite, follow, like or bookmark button, a rating, a quantity, a
+ * setting switch — that changes on the first render after a tap and is saved one change at a
+ * time, in order. A tap during a save is saved right after it; only a failure of the newest
+ * change puts the server value back. See `createOptimisticValue` in `@molecule/app-state`.
+ *
+ * `value` is the server's value from props or a query. A new `value` is taken only when it
+ * differs (by `equals`) from the one the hook last received, and only while nothing is being
+ * saved, so a parent re-render or a refetch of older data never flips the button mid-save. The
+ * latest `commit` and `onError` are always used. Give the component a `key` per record, so one
+ * record's pending change never shows on another.
+ *
+ * @param options - The server's current value and how to save a change.
+ * @returns The value to render, whether a save is pending, the newest failure, and `set`/`update`.
+ *
+ * @example
+ * ```tsx
+ * import { useOptimisticValue } from '@molecule/app-react'
+ *
+ * function StarButton({ repository }: { repository: Repository }) {
+ *   const star = useOptimisticValue({
+ *     value: { starred: repository.starred, stars: repository.stars },
+ *     equals: (a, b) => a.starred === b.starred && a.stars === b.stars,
+ *     commit: async (next) => {
+ *       const response = next.starred
+ *         ? await http.put(`/repositories/${repository.id}/star`)
+ *         : await http.delete(`/repositories/${repository.id}/star`)
+ *       return { starred: response.data.starred, stars: response.data.stars }
+ *     },
+ *   })
+ *   // Never disable the button or return early while `star.pending` is true.
+ *   return (
+ *     <button
+ *       aria-pressed={star.value.starred}
+ *       onClick={() =>
+ *         star.update((current) => ({
+ *           starred: !current.starred,
+ *           stars: current.stars + (current.starred ? -1 : 1),
+ *         }))
+ *       }
+ *     >
+ *       {star.value.stars}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export declare const useOptimisticValue: <T>(options: OptimisticValueOptions<T>) => UseOptimisticValueResult<T>;
+//# sourceMappingURL=useOptimisticValue.d.ts.map

package/dist/hooks/useOptimisticValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptimisticValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useOptimisticValue.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAGvF;;GAEG;AACH,MAAM,WAAW,wBAAwB,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAC1E;;;;OAIG;IACH,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAEtB;;;;OAIG;IACH,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAA;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,EAClC,SAAS,sBAAsB,CAAC,CAAC,CAAC,KACjC,wBAAwB,CAAC,CAAC,CA2B5B,CAAA"}

package/dist/hooks/useOptimisticValue.js

@@ -0,0 +1,79 @@
+/**
+ * React hook for a server-backed value that the UI changes at once and saves in order.
+ *
+ * @module
+ */
+import { useEffect, useInsertionEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { createOptimisticValue, shallowEqual } from '@molecule/app-state';
+/**
+ * A server-backed value — a favorite, follow, like or bookmark button, a rating, a quantity, a
+ * setting switch — that changes on the first render after a tap and is saved one change at a
+ * time, in order. A tap during a save is saved right after it; only a failure of the newest
+ * change puts the server value back. See `createOptimisticValue` in `@molecule/app-state`.
+ *
+ * `value` is the server's value from props or a query. A new `value` is taken only when it
+ * differs (by `equals`) from the one the hook last received, and only while nothing is being
+ * saved, so a parent re-render or a refetch of older data never flips the button mid-save. The
+ * latest `commit` and `onError` are always used. Give the component a `key` per record, so one
+ * record's pending change never shows on another.
+ *
+ * @param options - The server's current value and how to save a change.
+ * @returns The value to render, whether a save is pending, the newest failure, and `set`/`update`.
+ *
+ * @example
+ * ```tsx
+ * import { useOptimisticValue } from '@molecule/app-react'
+ *
+ * function StarButton({ repository }: { repository: Repository }) {
+ *   const star = useOptimisticValue({
+ *     value: { starred: repository.starred, stars: repository.stars },
+ *     equals: (a, b) => a.starred === b.starred && a.stars === b.stars,
+ *     commit: async (next) => {
+ *       const response = next.starred
+ *         ? await http.put(`/repositories/${repository.id}/star`)
+ *         : await http.delete(`/repositories/${repository.id}/star`)
+ *       return { starred: response.data.starred, stars: response.data.stars }
+ *     },
+ *   })
+ *   // Never disable the button or return early while `star.pending` is true.
+ *   return (
+ *     <button
+ *       aria-pressed={star.value.starred}
+ *       onClick={() =>
+ *         star.update((current) => ({
+ *           starred: !current.starred,
+ *           stars: current.stars + (current.starred ? -1 : 1),
+ *         }))
+ *       }
+ *     >
+ *       {star.value.stars}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export const useOptimisticValue = (options) => {
+    const latest = useRef(options);
+    // Exposed actions may run in a descendant's layout effect, before this component's
+    // layout/passive effects. Publish options from committed renders before those actions.
+    useInsertionEffect(() => {
+        latest.current = options;
+    });
+    const [controller] = useState(() => createOptimisticValue({
+        value: options.value,
+        commit: (next, previous) => latest.current.commit(next, previous),
+        equals: (a, b) => (latest.current.equals ?? shallowEqual)(a, b),
+        onError: (error, value) => latest.current.onError?.(error, value),
+    }));
+    const received = useRef(options.value);
+    const { value, equals } = options;
+    useEffect(() => {
+        if ((equals ?? shallowEqual)(received.current, value))
+            return;
+        received.current = value;
+        controller.sync(value);
+    }, [controller, value, equals]);
+    const state = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+    return { ...state, set: controller.set, update: controller.update };
+};
+//# sourceMappingURL=useOptimisticValue.js.map

package/dist/hooks/useOptimisticValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptimisticValue.js","sourceRoot":"","sources":["../../src/hooks/useOptimisticValue.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAG7F,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAqBzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,OAAkC,EACL,EAAE;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;IAC9B,mFAAmF;IACnF,uFAAuF;IACvF,kBAAkB,CAAC,GAAG,EAAE;QACtB,MAAM,CAAC,OAAO,GAAG,OAAO,CAAA;IAC1B,CAAC,CAAC,CAAA;IAEF,MAAM,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACjC,qBAAqB,CAAI;QACvB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC;QACjE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;KAClE,CAAC,CACH,CAAA;IAED,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IACtC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAA;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,IAAI,YAAY,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC;YAAE,OAAM;QAC7D,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAA;QACxB,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAE/B,MAAM,KAAK,GAAG,oBAAoB,CAAC,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAClG,OAAO,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAA;AACrE,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molecule/app-react",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "React framework bindings for molecule.dev",
   "type": "module",
   "main": "dist/index.js",
@@ -31,7 +31,7 @@
     "@molecule/app-i18n": "^1.0.1",
     "@molecule/app-logger": "^1.0.1",
     "@molecule/app-routing": "^1.0.1",
-    "@molecule/app-state": "^1.0.1",
+    "@molecule/app-state": "^1.1.0",
     "@molecule/app-storage": "^1.0.1",
     "@molecule/app-theme": "^1.0.1",
     "@molecule/app-ui": "^1.0.1",
@@ -60,8 +60,8 @@
     }
   },
   "devDependencies": {
-    "@molecule/app-ai-models": "1.4.3",
-    "@molecule/app-bonds-default-react": "3.0.1",
+    "@molecule/app-ai-models": "1.4.4",
+    "@molecule/app-bonds-default-react": "3.0.2",
     "@molecule/app-i18n": "1.1.2",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",