@civitai/blocks-react 0.74.1 → 0.76.0

package/dist/hooks/useReactions.js

@@ -0,0 +1,384 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getTransport } from '../transport/singleton.js';
+import { RequestTimeoutError, sendTypedRequest } from '../transport/transport.js';
+import { useTransportConnection } from './useTransportConnection.js';
+/**
+ * The reactions an app may set, as a runtime value: `Like`, `Heart`, `Laugh`,
+ * `Cry`. Never `Dislike` (the host refuses it).
+ *
+ * Declared here rather than value-imported from `@civitai/app-sdk/blocks` (where
+ * `APP_REACTIONS` holds the same list) so this hook does not raise the package's
+ * `@civitai/app-sdk` peer floor; see `PEER_FLOOR.md`. `test/useReactions.test.tsx`
+ * asserts the two lists are equal.
+ */
+export const REACTIONS = ['Like', 'Heart', 'Laugh', 'Cry'];
+/**
+ * The CLOSED set of codes `ENTITY_REACTION(S)_RESULT` carries, as a runtime
+ * value. Mirrors civitai's `ENTITY_REACTION_ERRORS` (and `@civitai/app-sdk`'s
+ * `ENTITY_REACTION_ERROR_CODES`); declared locally for the peer-floor reason on
+ * {@link REACTIONS}.
+ */
+export const REACTION_ERROR_CODES = [
+    'invalid-request',
+    'sign-in-required',
+    'review-mode',
+    'not-ready',
+    'needs-consent',
+    'entity-unavailable',
+    'rate-limited',
+];
+const CODE_SET = new Set(REACTION_ERROR_CODES);
+/** Most ids one read may carry; the hook splits larger sets into several reads. */
+const READ_CHUNK = 100;
+/** `true` when `error` is one of the closed {@link REACTION_ERROR_CODES}. */
+export function isReactionErrorCode(error) {
+    return CODE_SET.has(error);
+}
+/**
+ * A reaction read or write that did not succeed.
+ *
+ * `.code` is the host's closed code, or `undefined` for a transport timeout, a
+ * code a newer host added, or a local {@link ReactionError.busy} refusal.
+ * Check the flags before `.message`: only a `.code` is meant to be branched on,
+ * and none of these messages is written for a viewer.
+ */
+export class ReactionError extends Error {
+    code;
+    /**
+     * No reply arrived in time. 🔴 The write MAY have landed: the host could have
+     * completed it and failed to deliver the reply. The hook reverts its
+     * optimistic state and re-reads that image, so `byId` converges on the truth.
+     */
+    timedOut;
+    /**
+     * Refused locally because the same image and reaction already has a request
+     * in flight. Nothing was sent. Disable the control while
+     * `pending(id, reaction)` is true and this does not happen.
+     */
+    busy;
+    /** No session. Route into `useRequestSignIn()`. */
+    signInRequired;
+    /** The viewer has not granted `social:react:self`. Ask with `useRequestConsent()`. */
+    needsConsent;
+    constructor(error, opts) {
+        super(error);
+        this.name = 'ReactionError';
+        this.timedOut = opts?.timedOut === true;
+        this.busy = opts?.busy === true;
+        if (isReactionErrorCode(error))
+            this.code = error;
+        this.signInRequired = error === 'sign-in-required';
+        this.needsConsent = error === 'needs-consent';
+    }
+}
+const pendingKey = (id, reaction) => `${id}:${reaction}`;
+/** `state` with `reaction` held or not, and its count moved by one to match. */
+function withReaction(state, reaction, reacted) {
+    const holds = state.viewerReactions.includes(reaction);
+    if (holds === reacted)
+        return state;
+    const viewerReactions = reacted
+        ? [...state.viewerReactions, reaction]
+        : state.viewerReactions.filter((r) => r !== reaction);
+    const count = state.counts[reaction] ?? 0;
+    return {
+        ...state,
+        viewerReactions,
+        counts: { ...state.counts, [reaction]: Math.max(0, count + (reacted ? 1 : -1)) },
+    };
+}
+/**
+ * Read and set the VIEWER'S reactions on images this app was served, through
+ * the host's `GET_ENTITY_REACTIONS` and `SET_ENTITY_REACTION` bridge (scope
+ * `social:react:self`).
+ *
+ * A reaction made here is a reaction on civitai.com: it pays the reactor and
+ * the image owner exactly as the site's own button does, moves the image's
+ * rankings, notifies, and lists the viewer among the image's reactors. It draws
+ * on the SAME per-viewer quota as the site.
+ *
+ * 🔴 THE SCOPE IS CONSENT-GATED AND SENSITIVE. Declare `social:react:self` in
+ * the manifest with a `scopeJustifications` entry; until the viewer grants it,
+ * every call rejects with `needs-consent` (`.needsConsent`), which is the cue
+ * for `useRequestConsent()`. There is no per-tap confirm.
+ *
+ * Reads `ids` on mount in chunks of 100, then reads only what needs it: an id
+ * added to `ids`, or one whose ticket changed. Changing `entityType` re-reads
+ * nothing (image is the only type the host accepts today). After a write fails,
+ * an image is read again if the write timed out or the image has no state.
+ *
+ * @example
+ * const { byId, toggle, pending } = useReactions('image', images.map((i) => i.id), {
+ *   tickets: Object.fromEntries(images.map((i) => [i.id, i.reactTicket])),
+ * });
+ */
+export function useReactions(entityType, ids, options) {
+    useTransportConnection();
+    const [store, setStore] = useState({ byId: {}, unavailable: [] });
+    // The latest committed store, read synchronously by `toggle` to decide whether
+    // its optimistic move applies.
+    const storeRef = useRef(store);
+    storeRef.current = store;
+    const [pendingKeys, setPendingKeys] = useState(() => new Set());
+    const [loadingCount, setLoadingCount] = useState(0);
+    const [error, setError] = useState(null);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    // In-flight writes, read synchronously so a second tap is refused before a
+    // re-render could tell it the first one is pending.
+    const inFlight = useRef(new Set());
+    // Keyed by CONTENT, so a fresh array with the same ids does not re-read.
+    const idsKey = ids.join(',');
+    const uniqueIds = useMemo(() => (idsKey === '' ? [] : [...new Set(idsKey.split(',').map(Number))]), [idsKey]);
+    // The tickets the current ids need, as a stable key, so a fresh `tickets`
+    // object with the same contents does not re-read.
+    const ticketKey = uniqueIds.map((id) => `${id}=${options.tickets[id] ?? ''}`).join('&');
+    const ticketsRef = useRef(options.tickets);
+    ticketsRef.current = options.tickets;
+    // ── Read bookkeeping ────────────────────────────────────────────────────
+    //
+    // Every read and every write start takes a tick of ONE monotonic clock, so
+    // "which happened later" is a comparison of two numbers. Three rules decide
+    // whether a read's answer for an image is applied, each pinned by a test in
+    // `test/useReactions.test.tsx` ("read economy and ordering"):
+    //
+    //   1. NOT while a write on that image is in flight: the write owns the state
+    //      until it settles (its revert or its result is the next truth).
+    //   2. NOT if a write on that image STARTED after the read was issued: the
+    //      read describes the state before the write, and applying it would
+    //      overwrite a settled result (and its count reconciliation).
+    //   3. NOT if a NEWER read for that image was issued: answers can arrive out
+    //      of order, and only the latest one sent for an image is the truth.
+    const clock = useRef(0);
+    const writeStartedAt = useRef(new Map());
+    const latestReadAt = useRef(new Map());
+    // The ticket each image was last READ with ('' for none). An image is read
+    // again only when it has never been read or its ticket changed, because the
+    // host bills every read to the block instance's shared catalog budget.
+    const readWithTicket = useRef(new Map());
+    // A newer pass supersedes an older one: the older pass sends no further
+    // chunks. Its chunks already sent are still applied, under the rules above.
+    const readGeneration = useRef(0);
+    const readIds = useCallback(async (targetIds, generation) => {
+        for (let start = 0; start < targetIds.length; start += READ_CHUNK) {
+            // Superseded: the newer pass reads whatever this one has not sent.
+            if (generation !== readGeneration.current)
+                break;
+            const chunk = targetIds.slice(start, start + READ_CHUNK);
+            const tickets = {};
+            clock.current += 1;
+            const issuedAt = clock.current;
+            for (const id of chunk) {
+                const ticket = ticketsRef.current[id];
+                if (ticket)
+                    tickets[String(id)] = ticket;
+                readWithTicket.current.set(id, ticket ?? '');
+                latestReadAt.current.set(id, issuedAt);
+            }
+            if (mountedRef.current)
+                setLoadingCount((n) => n + 1);
+            try {
+                const reply = await sendTypedRequest(getTransport(), { type: 'GET_ENTITY_REACTIONS', payload: { entityType, ids: chunk, tickets } }, 'ENTITY_REACTIONS_RESULT');
+                if (reply.error || !reply.result) {
+                    throw new ReactionError(reply.error || 'entity-unavailable');
+                }
+                const result = reply.result;
+                if (!mountedRef.current)
+                    return;
+                const applicable = chunk.filter((id) => 
+                // Rule 1.
+                !REACTIONS.some((r) => inFlight.current.has(pendingKey(id, r))) &&
+                    // Rule 2.
+                    (writeStartedAt.current.get(id) ?? 0) < issuedAt &&
+                    // Rule 3.
+                    latestReadAt.current.get(id) === issuedAt);
+                if (applicable.length === 0)
+                    continue;
+                const unanswered = new Set(result.unavailable);
+                setStore((prev) => {
+                    const byId = { ...prev.byId };
+                    const applied = new Set(applicable);
+                    for (const id of applicable) {
+                        const state = result.byId[String(id)];
+                        if (state)
+                            byId[id] = state;
+                        else
+                            delete byId[id];
+                    }
+                    const unavailable = [
+                        ...prev.unavailable.filter((id) => !applied.has(id)),
+                        ...applicable.filter((id) => unanswered.has(id)),
+                    ];
+                    return { byId, unavailable };
+                });
+            }
+            catch (err) {
+                // Only the LATEST read for an image speaks for it (rule 3 again): a
+                // failed one leaves the image unread, so the next pass retries it,
+                // and reports the failure. An older read failing after a newer one
+                // answered does neither.
+                const current = chunk.filter((id) => latestReadAt.current.get(id) === issuedAt);
+                for (const id of current)
+                    readWithTicket.current.delete(id);
+                if (current.length === 0)
+                    continue;
+                const wrapped = err instanceof ReactionError
+                    ? err
+                    : new ReactionError(err instanceof Error ? err.message : String(err), {
+                        timedOut: err instanceof RequestTimeoutError,
+                    });
+                if (mountedRef.current)
+                    setError(wrapped);
+            }
+            finally {
+                if (mountedRef.current)
+                    setLoadingCount((n) => n - 1);
+            }
+        }
+    }, [entityType]);
+    // Read on mount and whenever the ids or their tickets change, but only the
+    // images that need it: never read, or read with a different ticket. An image
+    // that leaves the list needs nothing. `ticketKey` is a dependency so a ticket
+    // arriving for an image already listed re-reads it.
+    useEffect(() => {
+        readGeneration.current += 1;
+        const generation = readGeneration.current;
+        const needed = uniqueIds.filter((id) => readWithTicket.current.get(id) !== (ticketsRef.current[id] ?? ''));
+        if (needed.length === 0)
+            return;
+        setError(null);
+        void readIds(needed, generation);
+    }, [readIds, uniqueIds, ticketKey]);
+    const toggle = useCallback(async (id, reaction, reacted) => {
+        const key = pendingKey(id, reaction);
+        if (inFlight.current.has(key)) {
+            const busy = new ReactionError(`a ${reaction} on ${entityType} ${id} is already in flight`, {
+                busy: true,
+            });
+            // Rejects the CALL only; the hook-level `error` is left alone. A busy
+            // refusal is not an outcome of the image: the write it collided with
+            // is still running, and its settle re-renders the owner (it clears
+            // `pending`), which is what rewrites a bound element.
+            throw busy;
+        }
+        const ticket = ticketsRef.current[id];
+        if (!ticket) {
+            // Refused HERE, not by the host: the server checks the ticket after its
+            // rate limit, so sending this would spend a reaction for nothing.
+            const refusal = new ReactionError('entity-unavailable');
+            if (mountedRef.current)
+                setError(refusal);
+            throw refusal;
+        }
+        inFlight.current.add(key);
+        let reread = false;
+        clock.current += 1;
+        writeStartedAt.current.set(id, clock.current);
+        // Optimistic only when the state is known and the request would change
+        // it. An unread image, or one already in the asked-for state, waits for
+        // the host's answer instead.
+        const before = storeRef.current.byId[id];
+        const applied = before !== undefined && withReaction(before, reaction, reacted) !== before;
+        if (mountedRef.current) {
+            setError(null);
+            setPendingKeys((prev) => new Set(prev).add(key));
+            if (applied) {
+                setStore((prev) => {
+                    const state = prev.byId[id];
+                    if (!state)
+                        return prev;
+                    return { ...prev, byId: { ...prev.byId, [id]: withReaction(state, reaction, reacted) } };
+                });
+            }
+        }
+        try {
+            const reply = await sendTypedRequest(getTransport(), {
+                type: 'SET_ENTITY_REACTION',
+                payload: { entityType, entityId: id, reaction, reacted, ticket },
+            }, 'ENTITY_REACTION_RESULT');
+            if (reply.error || !reply.result) {
+                throw new ReactionError(reply.error || 'entity-unavailable');
+            }
+            const result = reply.result;
+            if (mountedRef.current) {
+                setStore((prev) => {
+                    const current = prev.byId[id];
+                    const counts = { ...result.counts };
+                    // Counts come from an asynchronous metric store and can lag the
+                    // write. When the write held, keep the optimistic count unless the
+                    // server's has already moved past it in the same direction.
+                    if (applied && current && result.reacted === reacted) {
+                        const mine = current.counts[reaction] ?? 0;
+                        const theirs = counts[reaction] ?? 0;
+                        counts[reaction] = reacted ? Math.max(mine, theirs) : Math.min(mine, theirs);
+                    }
+                    const state = {
+                        counts,
+                        viewerReactions: result.viewerReactions,
+                        statsUnknown: result.statsUnknown,
+                    };
+                    return {
+                        byId: { ...prev.byId, [id]: state },
+                        unavailable: prev.unavailable.filter((u) => u !== id),
+                    };
+                });
+            }
+            return result;
+        }
+        catch (err) {
+            const wrapped = err instanceof ReactionError
+                ? err
+                : new ReactionError(err instanceof Error ? err.message : String(err), {
+                    timedOut: err instanceof RequestTimeoutError,
+                });
+            if (mountedRef.current) {
+                if (applied) {
+                    setStore((prev) => {
+                        const state = prev.byId[id];
+                        if (!state)
+                            return prev;
+                        return { ...prev, byId: { ...prev.byId, [id]: withReaction(state, reaction, !reacted) } };
+                    });
+                }
+                setError(wrapped);
+                // A failed write leaves no truth behind it. Read the image again when
+                // the write may have landed (a timeout) or when there is no state to
+                // fall back on, which also covers a read discarded behind this write.
+                reread = wrapped.timedOut || storeRef.current.byId[id] === undefined;
+            }
+            // 🔴 Thrown even when unmounted: the caller's `await` is not the
+            // component, and an unmount must not read as a success.
+            throw wrapped;
+        }
+        finally {
+            inFlight.current.delete(key);
+            if (mountedRef.current) {
+                setPendingKeys((prev) => {
+                    const next = new Set(prev);
+                    next.delete(key);
+                    return next;
+                });
+                // Its placement after the in-flight mark is cleared does not matter for
+                // discarding: rule 1 is checked when the answer arrives, which is always
+                // after this `finally` has run.
+                if (reread)
+                    void readIds([id], readGeneration.current);
+            }
+        }
+    }, [entityType, readIds]);
+    const pending = useCallback((id, reaction) => pendingKeys.has(pendingKey(id, reaction)), [pendingKeys]);
+    return {
+        byId: store.byId,
+        unavailable: store.unavailable,
+        loading: loadingCount > 0,
+        error,
+        toggle,
+        pending,
+    };
+}
+//# sourceMappingURL=useReactions.js.map

package/dist/index.d.ts

@@ -69,6 +69,8 @@ export { RequestTimeoutError } from './transport/transport.js';
 export { InvalidIdempotencyKeyError } from './transport/transport.js';
 export { useCollectionFollow, CollectionFollowError, COLLECTION_FOLLOW_ERROR_CODES, isCollectionFollowErrorCode, } from './hooks/useCollectionFollow.js';
 export type { UseCollectionFollow } from './hooks/useCollectionFollow.js';
+export { useReactions, ReactionError, REACTIONS, REACTION_ERROR_CODES, isReactionErrorCode, } from './hooks/useReactions.js';
+export type { UseReactions, UseReactionsOptions } from './hooks/useReactions.js';
 export { useCreatePostFromApp, CreatePostError, CREATE_POST_ERROR_CODES, isCreatePostErrorCode, } from './hooks/useCreatePostFromApp.js';
 export type { UseCreatePostFromApp, BlockPostSource, BlockCreatePostRequest, BlockCreatePostResult, BlockCreatePostHostError, } from './hooks/useCreatePostFromApp.js';
 export { usePrepareTrainingDataset, PrepareTrainingDatasetError, PREPARE_TRAINING_DATASET_ERROR_CODES, isPrepareTrainingDatasetErrorCode, } from './hooks/usePrepareTrainingDataset.js';
@@ -77,7 +79,7 @@ export { useRunTraining, RunTrainingError, RUN_TRAINING_ERROR_CODES, isRunTraini
 export type { UseRunTraining, QuotedTrainingBody, RunTrainingErrorCode, BlockRunTrainingHostError, BlockTrainingQuote, WorkflowBodyTraining, } from './hooks/useRunTraining.js';
 export { useRunConfirmedStep, RunConfirmedStepError, RUN_CONFIRMED_STEP_ERROR_CODES, isRunConfirmedStepErrorCode, isStepQuoteId, } from './hooks/useRunConfirmedStep.js';
 export type { UseRunConfirmedStep, QuotedStepBody, RunConfirmedStepErrorCode, BlockRunConfirmedStepHostError, BlockStepQuote, WorkflowBodyPassThroughStep, } from './hooks/useRunConfirmedStep.js';
-export type { BlockBuzzTransaction, BlockBuzzAccount, BlockDailyCompensationResource, BlockWildcardPack, BlockWildcardPackErrorCode, AppWorkflow, AppWorkflowImage, AppWorkflowsParams, BlockGatedImage, BlockCollectionFollowErrorCode, BlockCollectionFollowResult, } from '@civitai/app-sdk/blocks';
+export type { BlockBuzzTransaction, BlockBuzzAccount, BlockDailyCompensationResource, BlockWildcardPack, BlockWildcardPackErrorCode, AppWorkflow, AppWorkflowImage, AppWorkflowsParams, BlockGatedImage, BlockCollectionFollowErrorCode, BlockCollectionFollowResult, BlockAppReaction, BlockStoredReaction, BlockReactionEntityType, BlockEntityReactionErrorCode, BlockReactionCounts, BlockEntityReactionState, BlockEntityReactionResult, BlockEntityReactionsResult, } from '@civitai/app-sdk/blocks';
 export { useCheckpointPicker } from './hooks/useCheckpointPicker.js';
 export type { UseCheckpointPicker } from './hooks/useCheckpointPicker.js';
 export { useResourcePicker, RESOURCE_PICKER_MULTIPLE_MAX } from './hooks/useResourcePicker.js';
@@ -86,6 +88,8 @@ export { useImageUpload } from './hooks/useImageUpload.js';
 export type { UseImageUpload, UseImageUploadAsyncScan, UseImageUploadGenerationSource, UseImageUploadOptions, } from './hooks/useImageUpload.js';
 export { useUploadImageBytes } from './hooks/useUploadImageBytes.js';
 export type { UploadImageBytesOptions, UseUploadImageBytes, } from './hooks/useUploadImageBytes.js';
+export { useMediaUpload } from './hooks/useMediaUpload.js';
+export type { UseMediaUpload, MediaUploadOpenOptions, MediaUploadBytesOptions, } from './hooks/useMediaUpload.js';
 export { useImagePicker, IMAGE_PICKER_MULTIPLE_MAX } from './hooks/useImagePicker.js';
 export type { UseImagePicker, ImagePickerOpenOptions, ImagePickerMultiple, } from './hooks/useImagePicker.js';
 export { useGenerationResources } from './hooks/useGenerationResources.js';

package/dist/index.js

@@ -60,6 +60,7 @@ export { RequestTimeoutError } from './transport/transport.js';
 // spent", which is the one distinction the class exists to carry.
 export { InvalidIdempotencyKeyError } from './transport/transport.js';
 export { useCollectionFollow, CollectionFollowError, COLLECTION_FOLLOW_ERROR_CODES, isCollectionFollowErrorCode, } from './hooks/useCollectionFollow.js';
+export { useReactions, ReactionError, REACTIONS, REACTION_ERROR_CODES, isReactionErrorCode, } from './hooks/useReactions.js';
 export { useCreatePostFromApp, CreatePostError, CREATE_POST_ERROR_CODES, isCreatePostErrorCode, } from './hooks/useCreatePostFromApp.js';
 export { usePrepareTrainingDataset, PrepareTrainingDatasetError, PREPARE_TRAINING_DATASET_ERROR_CODES, isPrepareTrainingDatasetErrorCode, } from './hooks/usePrepareTrainingDataset.js';
 export { useRunTraining, RunTrainingError, RUN_TRAINING_ERROR_CODES, isRunTrainingErrorCode, } from './hooks/useRunTraining.js';
@@ -68,6 +69,7 @@ export { useCheckpointPicker } from './hooks/useCheckpointPicker.js';
 export { useResourcePicker, RESOURCE_PICKER_MULTIPLE_MAX } from './hooks/useResourcePicker.js';
 export { useImageUpload } from './hooks/useImageUpload.js';
 export { useUploadImageBytes } from './hooks/useUploadImageBytes.js';
+export { useMediaUpload } from './hooks/useMediaUpload.js';
 export { useImagePicker, IMAGE_PICKER_MULTIPLE_MAX } from './hooks/useImagePicker.js';
 export { useGenerationResources } from './hooks/useGenerationResources.js';
 export { GENERATION_RESOURCES_API_BASE, MAX_GENERATION_RESOURCE_IDS, buildGenerationResourcesUrl, responseToResources, } from './api/generationResources.js';

package/dist/internal/liveHost.d.ts

@@ -47,7 +47,7 @@
  * fetch chokepoints ..... 2
  * REST endpoints ........ GET /api/v1/blocks/me
  * tRPC procedures ....... 29 = blocks.* (14) + apps.shared.* (10) + apps.storage.* (5)
- * switch case labels .... 50, of which 12 REFUSE (enumerated under SCOPE below)
+ * switch case labels .... 53, of which 15 REFUSE (enumerated under SCOPE below)
  * --- END DERIVED ---
  *
  * PICKERS (Phase 1 of "make dev:live a faithful local host"): the live host
@@ -106,6 +106,11 @@
  *     links the real purchase page and replies `purchased: false`.
  *   • SET_COLLECTION_FOLLOW — needs the session-authed follow procedures plus
  *     host-chrome consent. Replies `collection-unavailable`.
+ *   • SET_ENTITY_REACTION — the server's reaction procedures take the viewer's
+ *     signed-in SESSION alongside the block token, and refuse any token as
+ *     authentication. Replies `entity-unavailable`.
+ *   • GET_ENTITY_REACTIONS — the same session-authed procedure pair. Replies
+ *     `entity-unavailable`.
  *   • CREATE_POST_FROM_APP — needs the server-resolved preview plus host-chrome
  *     confirm before a PUBLIC post is written. Replies with a refusal.
  *   • PREPARE_TRAINING_DATASET — the server refuses every `kind: 'training'`
@@ -130,6 +135,9 @@
  *   • OPEN_IMAGE_PICKER — needs the host's picker over the viewer's own posted
  *     images and generator outputs, read off their signed-in session; no
  *     block-token endpoint lists either. Replies with a refusal.
+ *   • OPEN_MEDIA_UPLOAD — the generation-input upload runs in the host with the
+ *     viewer's signed-in session, which the local harness does not have.
+ *     Replies with a refusal.
  *   • SAVE_IMAGE — the download bridge is the production host's unsandboxed top
  *     frame plus its CDN origin allowlist / gated per-viewer read. Replies with
  *     a refusal (#386).
@@ -148,6 +156,11 @@ import { type PickerOverlayHandle } from './pickerOverlay.js';
  * rejects with it, so it says what to do instead.
  */
 export declare const IMAGE_PICKER_UNSUPPORTED_ERROR = "the image picker is not supported in dev:live \u2014 use dev:mock";
+/**
+ * The `error` the live host answers `OPEN_MEDIA_UPLOAD` with. `useMediaUpload()`
+ * rejects with it, so it says what to do instead.
+ */
+export declare const MEDIA_UPLOAD_UNSUPPORTED_ERROR = "media upload is not supported in dev:live \u2014 use dev:mock";
 /**
  * Options for {@link createLiveHost}. Mirrors the {@link MockHost}-relevant
  * subset of `MockHostOptions`, plus the live-only `blockToken` / `backendBaseUrl`

package/dist/internal/liveHost.js

@@ -47,7 +47,7 @@
  * fetch chokepoints ..... 2
  * REST endpoints ........ GET /api/v1/blocks/me
  * tRPC procedures ....... 29 = blocks.* (14) + apps.shared.* (10) + apps.storage.* (5)
- * switch case labels .... 50, of which 12 REFUSE (enumerated under SCOPE below)
+ * switch case labels .... 53, of which 15 REFUSE (enumerated under SCOPE below)
  * --- END DERIVED ---
  *
  * PICKERS (Phase 1 of "make dev:live a faithful local host"): the live host
@@ -106,6 +106,11 @@
  *     links the real purchase page and replies `purchased: false`.
  *   • SET_COLLECTION_FOLLOW — needs the session-authed follow procedures plus
  *     host-chrome consent. Replies `collection-unavailable`.
+ *   • SET_ENTITY_REACTION — the server's reaction procedures take the viewer's
+ *     signed-in SESSION alongside the block token, and refuse any token as
+ *     authentication. Replies `entity-unavailable`.
+ *   • GET_ENTITY_REACTIONS — the same session-authed procedure pair. Replies
+ *     `entity-unavailable`.
  *   • CREATE_POST_FROM_APP — needs the server-resolved preview plus host-chrome
  *     confirm before a PUBLIC post is written. Replies with a refusal.
  *   • PREPARE_TRAINING_DATASET — the server refuses every `kind: 'training'`
@@ -130,6 +135,9 @@
  *   • OPEN_IMAGE_PICKER — needs the host's picker over the viewer's own posted
  *     images and generator outputs, read off their signed-in session; no
  *     block-token endpoint lists either. Replies with a refusal.
+ *   • OPEN_MEDIA_UPLOAD — the generation-input upload runs in the host with the
+ *     viewer's signed-in session, which the local harness does not have.
+ *     Replies with a refusal.
  *   • SAVE_IMAGE — the download bridge is the production host's unsandboxed top
  *     frame plus its CDN origin allowlist / gated per-viewer read. Replies with
  *     a refusal (#386).
@@ -147,11 +155,20 @@ import { isRoutableRequestId } from '../transport/requestId.js';
 import { parseSharedStorageRateLimit } from '../transport/validate.js';
 import { createTrackEventChecker } from './trackEventCheck.js';
 import { openPickerOverlay, } from './pickerOverlay.js';
+/** Logged once when a block sends either reaction message to the live host. */
+const REACTIONS_UNSUPPORTED_LOG = 'SET_ENTITY_REACTION / GET_ENTITY_REACTIONS are not supported in dev:live (the reaction ' +
+    'procedures need the signed-in civitai.com session). Replying `entity-unavailable`. Use ' +
+    'dev:mock to exercise the reaction bridge.';
 /**
  * The `error` the live host answers `OPEN_IMAGE_PICKER` with. `useImagePicker()`
  * rejects with it, so it says what to do instead.
  */
 export const IMAGE_PICKER_UNSUPPORTED_ERROR = 'the image picker is not supported in dev:live — use dev:mock';
+/**
+ * The `error` the live host answers `OPEN_MEDIA_UPLOAD` with. `useMediaUpload()`
+ * rejects with it, so it says what to do instead.
+ */
+export const MEDIA_UPLOAD_UNSUPPORTED_ERROR = 'media upload is not supported in dev:live — use dev:mock';
 /** Default civitai backend the live host forwards to. */
 const DEFAULT_BACKEND_BASE_URL = 'https://civitai.com';
 /** The budgeted-spend scope the workflow procedures require. */
@@ -1052,6 +1069,40 @@ export function createLiveHost(options) {
                         });
                         return;
                     }
+                    case 'SET_ENTITY_REACTION': {
+                        // UNSUPPORTED in live: `blocks.setReactionFromApp` /
+                        // `blocks.getReactionsForApp` are session procedures marked
+                        // `blockApiKeys`, so the server refuses ANY token as the caller's
+                        // authentication and then checks that the block token's subject IS
+                        // the session user. A liveHost holds a token and no session.
+                        //
+                        // `entity-unavailable`: the closed code that already means "this
+                        // request cannot be served, nothing was written". `sign-in-required`
+                        // would send the block into a REQUEST_SIGN_IN loop against a harness
+                        // with no sign-in; `needs-consent` into a consent ask that cannot
+                        // help. Use dev:mock (`reactionStates` / `reactionError`, with
+                        // `social:react:self` in `declaredScopes`) to exercise the bridge.
+                        if (!isRoutableRequestId(requestId))
+                            return;
+                        logOnce('entity-reaction', REACTIONS_UNSUPPORTED_LOG);
+                        dispatchToBlock({
+                            type: 'ENTITY_REACTION_RESULT',
+                            payload: { requestId, error: 'entity-unavailable' },
+                        });
+                        return;
+                    }
+                    case 'GET_ENTITY_REACTIONS': {
+                        // UNSUPPORTED in live, for the reason on SET_ENTITY_REACTION directly
+                        // above: the read is the same session-authed procedure pair.
+                        if (!isRoutableRequestId(requestId))
+                            return;
+                        logOnce('entity-reaction', REACTIONS_UNSUPPORTED_LOG);
+                        dispatchToBlock({
+                            type: 'ENTITY_REACTIONS_RESULT',
+                            payload: { requestId, error: 'entity-unavailable' },
+                        });
+                        return;
+                    }
                     case 'CREATE_POST_FROM_APP': {
                         // UNSUPPORTED in live v1, for a STRONGER version of the
                         // SET_COLLECTION_FOLLOW reason directly above. The real host makes
@@ -1371,6 +1422,24 @@ export function createLiveHost(options) {
                         });
                         return;
                     }
+                    case 'OPEN_MEDIA_UPLOAD': {
+                        // REFUSED. The host uploads the file with the viewer's signed-in
+                        // session; this harness has none, and nothing a dev block token can
+                        // call takes the upload. Rather than let `useMediaUpload()` hang to
+                        // its 10-minute timeout, or hand back an invented URL a step would
+                        // then fail on, answer with an error (the hook rejects).
+                        logOnce('open-media-upload', 'OPEN_MEDIA_UPLOAD received but live dev mode cannot upload generation inputs ' +
+                            '— useMediaUpload() REJECTS. Test it against the real site, ' +
+                            'or use createMockHost({ cannedMediaUploads }) in dev:mock.');
+                        // A refusal nobody can route is not worth sending.
+                        if (!isRoutableRequestId(requestId))
+                            return;
+                        dispatchToBlock({
+                            type: 'MEDIA_UPLOAD_RESULT',
+                            payload: { requestId, error: MEDIA_UPLOAD_UNSUPPORTED_ERROR },
+                        });
+                        return;
+                    }
                     case 'SET_USER_CHECKPOINT': {
                         // 🔴 A PAGE REFUSES, ALWAYS, WITHOUT A BACKEND CALL — and the default
                         // context is a page. That is the production page host exactly: the