@civitai/blocks-react 0.67.1 → 0.69.0

package/dist/internal/pickerOverlay.d.ts

@@ -69,6 +69,15 @@ export type PickerSelection = {
 } | {
     channel: 'RESOURCE_PICKER_RESULT';
     selected: BlockResourceInfo;
+}
+/**
+ * MULTI-select (`OPEN_RESOURCE_PICKER` with `multiple`): the staged resources
+ * in the order they were staged. Only ever produced when
+ * {@link OpenPickerOptions.multiple} is set.
+ */
+ | {
+    channel: 'RESOURCE_PICKER_RESULT';
+    selectedResources: BlockResourceInfo[];
 };
 export interface OpenPickerOptions {
     /**
@@ -104,6 +113,16 @@ export interface OpenPickerOptions {
     baseModelGroup?: string;
     /** Currently-selected versionId so the overlay can pre-highlight it. */
     currentVersionId?: number;
+    /**
+     * MULTI-select mode (`OPEN_RESOURCE_PICKER` with `multiple: { max }`). A card
+     * click STAGES (or un-stages) that resource instead of resolving; the "Add"
+     * button resolves with everything staged, in staging order, as
+     * `selectedResources`. At most `max` can be staged. Only meaningful on the
+     * `RESOURCE_PICKER_RESULT` channel — the checkpoint channel has no list reply.
+     */
+    multiple?: {
+        max: number;
+    };
     /** Advisory-SFW for the PUBLIC fallback read. Defaults true (fail-closed SFW). */
     anonSfwOnly?: boolean;
     /** The document to mount into. Defaults to `globalThis.document`. */
@@ -129,6 +148,19 @@ export interface PickerOverlayHandle {
     selectByVersionId(versionId: number): void;
     /** Dismiss without a selection. Resolves `null` + tears down. */
     dismiss(): void;
+    /**
+     * MULTI-select only: stage the card with this versionId, or un-stage it if it
+     * already is. No-op when absent, when not in multi-select mode, or when
+     * staging would exceed `max`. Does NOT resolve.
+     */
+    toggleStagedByVersionId(versionId: number): void;
+    /** MULTI-select only: the staged versionIds, in staging order. */
+    readonly stagedVersionIds: readonly number[];
+    /**
+     * MULTI-select only: resolve with everything staged (in staging order) and
+     * tear down. No-op while nothing is staged, or outside multi-select mode.
+     */
+    commitStaged(): void;
     /** Force teardown (host teardown path). Resolves `null` if not already resolved. */
     close(): void;
     /** True once the overlay has resolved (selection or dismissal). */

package/dist/internal/pickerOverlay.js

@@ -115,7 +115,12 @@ export function openPickerOverlay(opts) {
     let grid = null;
     let statusEl = null;
     let searchEl = null;
+    let commitBtn = null;
     let sentinel = null;
+    // --- Multi-select state. `staged` is in STAGING order — that order is the
+    // reply's order, so it is an array and never a Set keyed for lookup. ---
+    const multiMax = opts.multiple && opts.resultChannel === 'RESOURCE_PICKER_RESULT' ? opts.multiple.max : null;
+    let staged = [];
     let observer = null;
     // Separate observer that gates each thumbnail's `<img src>` (see observeThumb).
     let thumbObserver = null;
@@ -197,6 +202,7 @@ export function openPickerOverlay(opts) {
         grid = null;
         statusEl = null;
         searchEl = null;
+        commitBtn = null;
     };
     const resolve = (selection) => {
         if (resolved)
@@ -205,7 +211,52 @@ export function openPickerOverlay(opts) {
         teardown();
         opts.onResolve(selection);
     };
+    /** Repaint the staged outlines + the commit button from `staged`. */
+    const paintStaged = () => {
+        if (grid) {
+            for (const cell of Array.from(grid.querySelectorAll('[data-picker-card]'))) {
+                const id = Number(cell.getAttribute('data-picker-card'));
+                const isStaged = staged.some((c) => c.versionId === id);
+                cell.setAttribute('aria-pressed', String(isStaged));
+                cell.style.outline = isStaged ? '2px solid #5ec8a0' : '';
+            }
+        }
+        if (commitBtn) {
+            commitBtn.disabled = staged.length === 0;
+            commitBtn.textContent =
+                staged.length === 0 ? `Pick up to ${multiMax}` : `Add ${staged.length} of ${multiMax}`;
+        }
+    };
+    /** Multi-select: stage `card`, or un-stage it. Never exceeds `multiMax`. */
+    const toggleStaged = (card) => {
+        if (multiMax === null || resolved)
+            return;
+        if (staged.some((c) => c.versionId === card.versionId)) {
+            staged = staged.filter((c) => c.versionId !== card.versionId);
+        }
+        else if (staged.length < multiMax) {
+            staged = [...staged, card];
+        }
+        paintStaged();
+    };
+    const commitStaged = () => {
+        if (multiMax === null || staged.length === 0)
+            return;
+        resolve({
+            channel: 'RESOURCE_PICKER_RESULT',
+            selectedResources: staged.map((card) => cardToResource(card, opts.type)),
+        });
+    };
     const selectCard = (card) => {
+        // Multi-select: a programmatic "select" is the one-resource batch — still a
+        // LIST reply, because the reply shape follows the REQUEST, not the count.
+        if (multiMax !== null) {
+            resolve({
+                channel: 'RESOURCE_PICKER_RESULT',
+                selectedResources: [cardToResource(card, opts.type)],
+            });
+            return;
+        }
         // 🔴 BRANCH ON THE REPLY CHANNEL, NOT ON `opts.type` (#391). The channel is
         // what the block's consumers read the payload as; the requested type is
         // only what the catalog was filtered by. Branching on the type sent a
@@ -244,6 +295,17 @@ export function openPickerOverlay(opts) {
         dismiss() {
             resolve(null);
         },
+        toggleStagedByVersionId(versionId) {
+            const found = cards.find((c) => c.versionId === versionId);
+            if (found)
+                toggleStaged(found);
+        },
+        get stagedVersionIds() {
+            return staged.map((c) => c.versionId);
+        },
+        commitStaged() {
+            commitStaged();
+        },
         close() {
             resolve(null);
         },
@@ -312,7 +374,17 @@ export function openPickerOverlay(opts) {
         Object.assign(meta.style, META_STYLE);
         meta.textContent = [card.baseModel, card.versionName].filter(Boolean).join(' · ');
         cell.appendChild(meta);
-        cell.addEventListener('click', () => selectCard(card));
+        if (multiMax !== null) {
+            // A rebuilt grid (new search) keeps what is already staged marked.
+            const isStaged = staged.some((c) => c.versionId === card.versionId);
+            cell.setAttribute('aria-pressed', String(isStaged));
+            if (isStaged)
+                cell.style.outline = '2px solid #5ec8a0';
+            cell.addEventListener('click', () => toggleStaged(card));
+        }
+        else {
+            cell.addEventListener('click', () => selectCard(card));
+        }
         return cell;
     };
     /**
@@ -524,7 +596,11 @@ export function openPickerOverlay(opts) {
         const title = doc.createElement('div');
         Object.assign(title.style, TITLE_STYLE);
         title.textContent =
-            opts.type === 'LORA' ? 'Pick a LoRA (dev:live)' : 'Pick a checkpoint (dev:live)';
+            multiMax !== null
+                ? `Pick up to ${multiMax} LoRAs (dev:live)`
+                : opts.type === 'LORA'
+                    ? 'Pick a LoRA (dev:live)'
+                    : 'Pick a checkpoint (dev:live)';
         const closeBtn = doc.createElement('button');
         closeBtn.type = 'button';
         closeBtn.setAttribute('aria-label', 'Close picker');
@@ -563,6 +639,16 @@ export function openPickerOverlay(opts) {
         modal.appendChild(searchEl);
         modal.appendChild(statusEl);
         modal.appendChild(grid);
+        if (multiMax !== null) {
+            // Multi-select commit bar. A card click only stages; this resolves.
+            commitBtn = doc.createElement('button');
+            commitBtn.type = 'button';
+            commitBtn.setAttribute('data-picker-commit', '');
+            Object.assign(commitBtn.style, COMMIT_STYLE);
+            commitBtn.addEventListener('click', () => commitStaged());
+            modal.appendChild(commitBtn);
+            paintStaged();
+        }
         root.appendChild(modal);
         // Escape = dismiss.
         root.addEventListener('keydown', (e) => {
@@ -611,6 +697,17 @@ const TITLE_STYLE = {
     fontSize: '15px',
     fontWeight: '600',
 };
+const COMMIT_STYLE = {
+    margin: '10px 14px 14px',
+    padding: '8px 14px',
+    alignSelf: 'flex-end',
+    border: '1px solid #2f6f5a',
+    borderRadius: '6px',
+    background: '#1f4a3c',
+    color: '#e6edf3',
+    font: 'inherit',
+    cursor: 'pointer',
+};
 const CLOSE_STYLE = {
     background: 'transparent',
     border: 'none',

package/dist/internal/trackEventCheck.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The `dev:live` check of a `TRACK_EVENT` against the manifest's
+ * `analytics.events` declaration.
+ *
+ * Production stores an event only when the APPROVED manifest declares it, and
+ * keeps only the declared properties whose value has the declared type. An
+ * undeclared event is counted as a drop and its name is not stored; an
+ * undeclared property, or a value of the wrong type, is dropped from the row.
+ * None of that reaches the block: `TRACK_EVENT` is fire-and-forget, so a typo
+ * in an event name is invisible until an owner wonders why the analytics panel
+ * is empty. This check makes the same three decisions locally and returns one
+ * actionable message per DISTINCT problem, so the console says it once.
+ *
+ * It is a dev aid, not the contract. The server is authoritative, and the
+ * dev server's manifest validation (the schema) is what reports a malformed
+ * declaration in detail; this reader only needs enough structure to look a
+ * name up.
+ *
+ * Total: never throws, whatever the manifest or the payload holds.
+ */
+export interface TrackEventChecker {
+    /**
+     * The messages for this event that have not been returned before. Empty for a
+     * declared, valid event, and for any problem already reported.
+     */
+    check(payload: unknown): string[];
+}
+/**
+ * @param manifest The app's manifest as the harness imported it
+ *   (`import manifest from '../block.manifest.json'`). `undefined` = the harness
+ *   passed none, so nothing can be checked; that is said once.
+ */
+export declare function createTrackEventChecker(manifest: unknown): TrackEventChecker;
+//# sourceMappingURL=trackEventCheck.d.ts.map

package/dist/internal/trackEventCheck.js

@@ -0,0 +1,194 @@
+/**
+ * The `dev:live` check of a `TRACK_EVENT` against the manifest's
+ * `analytics.events` declaration.
+ *
+ * Production stores an event only when the APPROVED manifest declares it, and
+ * keeps only the declared properties whose value has the declared type. An
+ * undeclared event is counted as a drop and its name is not stored; an
+ * undeclared property, or a value of the wrong type, is dropped from the row.
+ * None of that reaches the block: `TRACK_EVENT` is fire-and-forget, so a typo
+ * in an event name is invisible until an owner wonders why the analytics panel
+ * is empty. This check makes the same three decisions locally and returns one
+ * actionable message per DISTINCT problem, so the console says it once.
+ *
+ * It is a dev aid, not the contract. The server is authoritative, and the
+ * dev server's manifest validation (the schema) is what reports a malformed
+ * declaration in detail; this reader only needs enough structure to look a
+ * name up.
+ *
+ * Total: never throws, whatever the manifest or the payload holds.
+ */
+/** Where every message points the author. */
+const WHERE = '`analytics.events` in block.manifest.json';
+/** The event/property name rule (the manifest schema's `patternProperties` key). */
+const NAME_RE = /^[a-z][a-z0-9_]{0,63}$/;
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/** A name or value as it appears in a message: JSON-quoted and bounded. */
+function quote(value) {
+    let text;
+    try {
+        text = typeof value === 'string' ? value : String(JSON.stringify(value));
+    }
+    catch {
+        text = Object.prototype.toString.call(value);
+    }
+    if (text.length > 80)
+        text = `${text.slice(0, 80)}…`;
+    return typeof value === 'string' ? JSON.stringify(text) : text;
+}
+/** Reads the declaration, or says why it cannot. An unreadable one declares nothing. */
+function readDeclarations(manifest) {
+    const none = new Map();
+    if (!isPlainObject(manifest))
+        return { declarations: none, problem: 'the manifest is not an object' };
+    const analytics = manifest.analytics;
+    if (analytics === undefined)
+        return { declarations: none };
+    if (!isPlainObject(analytics))
+        return { declarations: none, problem: '`analytics` is not an object' };
+    const events = analytics.events;
+    if (events === undefined)
+        return { declarations: none };
+    if (!isPlainObject(events))
+        return { declarations: none, problem: '`analytics.events` is not an object' };
+    const out = new Map();
+    for (const [eventName, rawEvent] of Object.entries(events)) {
+        if (!isPlainObject(rawEvent)) {
+            return { declarations: none, problem: `event ${quote(eventName)} is not an object` };
+        }
+        const props = new Map();
+        const rawProps = rawEvent.properties;
+        if (rawProps !== undefined && !isPlainObject(rawProps)) {
+            return { declarations: none, problem: `${quote(eventName)}.properties is not an object` };
+        }
+        for (const [propName, rawProp] of Object.entries(rawProps ?? {})) {
+            const at = `${quote(eventName)}.properties.${propName}`;
+            if (!isPlainObject(rawProp))
+                return { declarations: none, problem: `${at} is not an object` };
+            if (rawProp.type === 'number' || rawProp.type === 'boolean') {
+                props.set(propName, { type: rawProp.type });
+            }
+            else if (rawProp.type === 'enum') {
+                const values = rawProp.values;
+                if (!Array.isArray(values) || !values.every((v) => typeof v === 'string')) {
+                    return { declarations: none, problem: `${at}.values is not an array of strings` };
+                }
+                props.set(propName, { type: 'enum', values: new Set(values) });
+            }
+            else {
+                return {
+                    declarations: none,
+                    problem: `${at}.type is ${quote(rawProp.type)}, not one of enum, number, boolean`,
+                };
+            }
+        }
+        out.set(eventName, props);
+    }
+    return { declarations: out };
+}
+/** What a declared property accepts, for a message. */
+function describeDeclared(prop) {
+    if (prop.type === 'enum')
+        return `one of ${[...prop.values].map((v) => quote(v)).join(', ')}`;
+    return prop.type === 'number' ? 'a finite number' : 'a boolean';
+}
+/** Whether production keeps `value` for `prop` (mirrors the ingest's classification). */
+function accepts(prop, value) {
+    if (prop.type === 'enum')
+        return typeof value === 'string' && prop.values.has(value);
+    if (prop.type === 'number')
+        return typeof value === 'number' && Number.isFinite(value);
+    return typeof value === 'boolean';
+}
+/**
+ * @param manifest The app's manifest as the harness imported it
+ *   (`import manifest from '../block.manifest.json'`). `undefined` = the harness
+ *   passed none, so nothing can be checked; that is said once.
+ */
+export function createTrackEventChecker(manifest) {
+    const reported = new Set();
+    const once = (key, message, out) => {
+        if (reported.has(key))
+            return;
+        reported.add(key);
+        out.push(message);
+    };
+    const hasManifest = manifest !== undefined;
+    let read = { declarations: new Map() };
+    if (hasManifest) {
+        try {
+            read = readDeclarations(manifest);
+        }
+        catch {
+            // Reachable only via a throwing getter or Proxy; an imported JSON file cannot get here.
+            read = { declarations: new Map(), problem: 'reading it threw' };
+        }
+    }
+    const { declarations, problem } = read;
+    const declaresAny = declarations.size > 0;
+    return {
+        check(payload) {
+            const out = [];
+            try {
+                if (!hasManifest) {
+                    once('no-manifest', 'TRACK_EVENT is not checked against your manifest: pass `manifest` to createLiveHost ' +
+                        "(import it from block.manifest.json) to be warned here about events production will drop.", out);
+                    return out;
+                }
+                if (problem) {
+                    once('unreadable', `${WHERE} could not be read (${problem}). Production accepts events only against a valid ` +
+                        'declaration, so it would record none of them; the dev server\'s manifest validation names the problem.', out);
+                }
+                const body = isPlainObject(payload) ? payload : {};
+                const eventName = body.eventName;
+                if (typeof eventName !== 'string') {
+                    once('bad-name', `track() was called with a non-string event name (${quote(eventName)}). Production counts it as a dropped event.`, out);
+                    return out;
+                }
+                const declaredProps = declarations.get(eventName);
+                if (!declaredProps) {
+                    const hint = NAME_RE.test(eventName)
+                        ? ''
+                        : ' (event names are lowercase snake_case: a letter, then up to 63 of a-z, 0-9 or _)';
+                    const declared = declaresAny || problem ? '' : ' Your manifest declares no events yet.';
+                    once(`event:${eventName}`, `track(${quote(eventName)}) is not declared in ${WHERE}${hint}. Production counts it as a dropped ` +
+                        `event and does not store its name or properties.${declared} Declare it to record it.`, out);
+                    return out;
+                }
+                const props = body.properties;
+                if (props === undefined || props === null)
+                    return out;
+                if (!isPlainObject(props)) {
+                    once(`props-shape:${eventName}`, `track(${quote(eventName)}) was sent properties that are not an object (${quote(props)}). ` +
+                        'Production keeps none of them.', out);
+                    return out;
+                }
+                for (const [propName, value] of Object.entries(props)) {
+                    // JSON drops an `undefined` value, so the host never forwards one.
+                    if (value === undefined)
+                        continue;
+                    const declared = declaredProps.get(propName);
+                    if (!declared) {
+                        once(`prop:${eventName}.${propName}`, `track(${quote(eventName)}) property ${quote(propName)} is not declared under ` +
+                            `${quote(eventName)}.properties in ${WHERE}. Production drops it from the event.`, out);
+                        continue;
+                    }
+                    if (!accepts(declared, value)) {
+                        once(`value:${eventName}.${propName}`, `track(${quote(eventName)}) property ${quote(propName)} is ${quote(value)}, but ${WHERE} ` +
+                            `declares it as ${declared.type} (${describeDeclared(declared)}). Production drops the value.` +
+                            (typeof value === 'string' && declared.type === 'enum'
+                                ? ' Free-text strings are never stored: only the declared enum values are.'
+                                : ''), out);
+                    }
+                }
+            }
+            catch {
+                // A throwing getter or Proxy in a payload. The check is advisory: say nothing.
+            }
+            return out;
+        },
+    };
+}
+//# sourceMappingURL=trackEventCheck.js.map

package/dist/transport/requestTimeouts.js

@@ -131,6 +131,9 @@ const REQUEST_TIMEOUT_CLASS = {
     // longer bound (`WORKFLOW_REQUEST_TIMEOUT_MS` in `hooks/useBuzzWorkflow.ts`)
     // for orchestrator latency — a different reason for a different number.
     ESTIMATE_WORKFLOW: 'protocol',
+    // The batch twin of ESTIMATE_WORKFLOW: no person in the loop, up to 16 cost
+    // quotes behind one reply. Sent under the same `WORKFLOW_REQUEST_TIMEOUT_MS`.
+    ESTIMATE_WORKFLOW_BATCH: 'protocol',
     POLL_WORKFLOW: 'protocol',
     SUBMIT_WORKFLOW: 'protocol',
     GET_BUZZ_ACCOUNTS: 'protocol',

package/dist/transport/validate.d.ts

@@ -53,7 +53,7 @@
  * helpers. Do not open-code the test again: the two spellings coexisted in one
  * file for a release precisely because it was inline at every call site.
  */
-import type { BlockInitPayload, BlockWorkflowSnapshot, Theme, WrappedToken } from '@civitai/app-sdk/blocks';
+import type { BlockInitPayload, BlockWorkflowSnapshot, SharedStorageRateLimit, Theme, WrappedToken } from '@civitai/app-sdk/blocks';
 /**
  * Shape check for the wrapped-token shape carried by `BLOCK_INIT.token`,
  * `TOKEN_REFRESH.payload.token`, and `TOKEN_REFRESH_RESPONSE.payload.token`.
@@ -175,6 +175,24 @@ export declare function isValidWorkflowReply(p: unknown): p is {
     snapshot: BlockWorkflowSnapshot;
     requestId?: string;
 };
+/**
+ * Reply to a block-initiated `ESTIMATE_WORKFLOW_BATCH`. A well-formed reply
+ * carries EITHER an `error` string OR `snapshots` + `aggregate`.
+ *
+ * 🔴 A PRESENT `error` IS ACCEPTED ON ITS OWN, unlike the single-estimate reply
+ * ({@link isValidWorkflowReply}, which requires a snapshot). That is what lets
+ * the host's generic `{ requestId, error: 'unsupported on this host' }` reach
+ * `useBatchEstimate`, which turns it into the typed error an app falls back to
+ * per-cell estimates on. Dropping it would leave the block waiting out the
+ * timeout instead. `error` is shape-checked only: the channel carries free-text
+ * server messages.
+ *
+ * Without an `error`, EVERY cell must be a valid workflow snapshot and the
+ * aggregate must hold three finite numbers. One malformed cell rejects the whole
+ * reply, the same way one malformed snapshot rejects a single-estimate reply:
+ * the block dereferences these fields.
+ */
+export declare function isValidEstimateBatchResult(p: unknown): boolean;
 export declare function isValidBuzzPurchaseResult(p: unknown): p is {
     purchased: boolean;
     newBalance?: number;
@@ -494,6 +512,24 @@ export declare function isValidSharedAppendResult(p: unknown): boolean;
  * error path is `{ error }`. Uniform `{ ok, error }` contract (module header).
  */
 export declare function isValidSharedWithdrawResult(p: unknown): boolean;
+/**
+ * Validate the `rateLimit` a host put on a shared-storage refusal. Returns a
+ * copy holding ONLY the two known fields, or `undefined` when `value` is
+ * missing or malformed.
+ *
+ * Kept in lockstep with the platform's own parser for the same metadata
+ * (`parseRateLimitMeta` in civitai's `src/shared/utils/rate-limit-meta.ts`):
+ * `retryAfterSeconds` must be an integer of at least 1, and `retryAt` a string
+ * `Date.parse` can read. Anything else — a wrong type, a negative or fractional
+ * number, a missing field, a non-object — is malformed.
+ *
+ * 🔴 NOT A VALIDATOR, deliberately. None of the `isValidShared*Result`
+ * predicates look at `rateLimit`, so a malformed one can never DROP a reply:
+ * dropping it would hang the block's request to its timeout over an optional
+ * hint. The reply is delivered unchanged, and `useSharedStorage` calls this
+ * parser: a malformed value is ignored and the plain refusal error is thrown.
+ */
+export declare function parseSharedStorageRateLimit(value: unknown): SharedStorageRateLimit | undefined;
 /**
  * Reply to `OPEN_CHECKPOINT_PICKER`. `selected` is ABSENT when the user
  * dismissed the picker (the hook resolves `{ selected: undefined }`); when
@@ -501,11 +537,18 @@ export declare function isValidSharedWithdrawResult(p: unknown): boolean;
  */
 export declare function isValidCheckpointPickerResult(p: unknown): boolean;
 /**
- * Reply to `OPEN_RESOURCE_PICKER`. `selected` is ABSENT on dismiss (the hook
- * resolves `null`); when present it is a `BlockResourceInfo` projection — the 5
- * base fields plus `modelType` and the OPTIONAL public recommended-settings
- * (`strength`/`minStrength`/`maxStrength` finite, `trainedWords` a string[],
- * `clipSkip` a finite number OR `null`).
+ * Reply to `OPEN_RESOURCE_PICKER`.
+ *
+ * Single pick: `selected` is ABSENT on dismiss (the hook resolves `null`); when
+ * present it is a `BlockResourceInfo` projection.
+ *
+ * Multi-select: `selectedResources` is an array of the same projection (`[]` on
+ * dismiss). ONE malformed entry drops the whole reply — each `versionId` is
+ * money-adjacent, and handing the caller the well-formed remainder would
+ * silently change which resources a generation runs with.
+ *
+ * `error` (a refusal) is not validated here: the hook reads it by PRESENCE, and
+ * a reply carrying only `{ requestId, error }` must reach it.
  */
 export declare function isValidResourcePickerResult(p: unknown): boolean;
 /**