@civitai/blocks-react 0.6.0 → 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Civitai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/hooks/useResourcePicker.d.ts

@@ -0,0 +1,38 @@
+import type { BlockResourceInfo, BlockResourcePickerType } from '@civitai/app-sdk/blocks';
+/**
+ * Drives the platform-side resource picker for PAGE App Blocks (Design 1 —
+ * host-chrome). Generalizes {@link useCheckpointPicker} from Checkpoint-only to
+ * a typed allowlist (v1: `'Checkpoint' | 'LORA'`), so a page block can let the
+ * USER pick a checkpoint + LoRAs instead of the author hard-coding version IDs.
+ *
+ * `open` asks the host to open its OWN native resource modal filtered to the
+ * requested type (+ optional base-model family). The viewer searches in HOST
+ * chrome — the block never sees the catalog, a list, or any resource it didn't
+ * pick. Resolves with the chosen {@link BlockResourceInfo}, or `null` when the
+ * user dismissed without picking.
+ *
+ * DISCOVERY ONLY: the returned `versionId` is a hint, never an entitlement.
+ * Feed it into `body.modelVersionId` (Checkpoint) or
+ * `body.additionalResources` (LoRA) and submit — the host re-validates every id
+ * server-side at estimate/submit (the page gate + orchestrator belt). A block
+ * can POST any id regardless of what the picker showed; the spend path is the
+ * enforcement boundary, not the picker.
+ *
+ * Host-mediated, same trust model as `useCheckpointPicker` / `useBuzzWorkflow`:
+ * the block never touches the picker UI directly.
+ */
+export declare function useResourcePicker(): {
+    open: (opts: {
+        /** Which resource type to pick. v1: `'Checkpoint' | 'LORA'` only — the
+         * host rejects any other type (the modal never opens). */
+        resourceType: BlockResourcePickerType;
+        /**
+         * Optional base-model family hint — an ecosystem key (e.g. 'Flux1', 'SDXL')
+         * OR a baseModel name (e.g. 'Flux.1 D'); the host collapses it to the
+         * ecosystem family. Use the chosen checkpoint's `baseModel` to constrain a
+         * LoRA pick to the same family. Omit for an unconstrained pick of the type.
+         */
+        baseModelGroup?: string;
+    }) => Promise<BlockResourceInfo | null>;
+};
+//# sourceMappingURL=useResourcePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResourcePicker.d.ts","sourceRoot":"","sources":["../../src/hooks/useResourcePicker.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAK1F;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,iBAAiB,IAAI;IACnC,IAAI,EAAE,CAAC,IAAI,EAAE;QACX;kEAC0D;QAC1D,YAAY,EAAE,uBAAuB,CAAC;QACtC;;;;;WAKG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,KAAK,OAAO,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACzC,CAsBA"}

package/dist/hooks/useResourcePicker.js

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import { getTransport } from '../internal/singleton.js';
+import { sendTypedRequest } from '../internal/transport.js';
+/**
+ * Drives the platform-side resource picker for PAGE App Blocks (Design 1 —
+ * host-chrome). Generalizes {@link useCheckpointPicker} from Checkpoint-only to
+ * a typed allowlist (v1: `'Checkpoint' | 'LORA'`), so a page block can let the
+ * USER pick a checkpoint + LoRAs instead of the author hard-coding version IDs.
+ *
+ * `open` asks the host to open its OWN native resource modal filtered to the
+ * requested type (+ optional base-model family). The viewer searches in HOST
+ * chrome — the block never sees the catalog, a list, or any resource it didn't
+ * pick. Resolves with the chosen {@link BlockResourceInfo}, or `null` when the
+ * user dismissed without picking.
+ *
+ * DISCOVERY ONLY: the returned `versionId` is a hint, never an entitlement.
+ * Feed it into `body.modelVersionId` (Checkpoint) or
+ * `body.additionalResources` (LoRA) and submit — the host re-validates every id
+ * server-side at estimate/submit (the page gate + orchestrator belt). A block
+ * can POST any id regardless of what the picker showed; the spend path is the
+ * enforcement boundary, not the picker.
+ *
+ * Host-mediated, same trust model as `useCheckpointPicker` / `useBuzzWorkflow`:
+ * the block never touches the picker UI directly.
+ */
+export function useResourcePicker() {
+    const open = useCallback(async (opts) => {
+        const { selected } = await sendTypedRequest(getTransport(), {
+            type: 'OPEN_RESOURCE_PICKER',
+            payload: {
+                resourceType: opts.resourceType,
+                ...(opts.baseModelGroup != null ? { baseModelGroup: opts.baseModelGroup } : {}),
+            },
+        }, 'RESOURCE_PICKER_RESULT');
+        // Normalize the "dismissed" case to an explicit null so callers can
+        // `if (!picked) return;` without an `undefined` ambiguity.
+        return selected ?? null;
+    }, []);
+    return { open };
+}
+//# sourceMappingURL=useResourcePicker.js.map

package/dist/hooks/useResourcePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResourcePicker.js","sourceRoot":"","sources":["../../src/hooks/useResourcePicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,iBAAiB;IAc/B,MAAM,IAAI,GAAG,WAAW,CACtB,KAAK,EAAE,IAAwE,EAAE,EAAE;QACjF,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,gBAAgB,CACzC,YAAY,EAAE,EACd;YACE,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE;gBACP,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,GAAG,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAChF;SACF,EACD,wBAAwB,CACzB,CAAC;QACF,oEAAoE;QACpE,2DAA2D;QAC3D,OAAO,QAAQ,IAAI,IAAI,CAAC;IAC1B,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,IAAI,EAAE,CAAC;AAClB,CAAC"}

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { useBuzzWorkflow } from './hooks/useBuzzWorkflow.js';
 export { useBlockResize } from './hooks/useBlockResize.js';
 export { useBuzzPurchase } from './hooks/useBuzzPurchase.js';
 export { useCheckpointPicker } from './hooks/useCheckpointPicker.js';
+export { useResourcePicker } from './hooks/useResourcePicker.js';
 export { useCivitaiNavigate } from './hooks/useCivitaiNavigate.js';
 export { useRequestSignIn } from './hooks/useRequestSignIn.js';
 export { useRequestConsent } from './hooks/useRequestConsent.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,YAAY,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EACV,aAAa,EACb,cAAc,EACd,eAAe,GAChB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EACV,kBAAkB,EAClB,oBAAoB,EACpB,eAAe,EACf,aAAa,GACd,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,YAAY,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EACV,aAAa,EACb,cAAc,EACd,eAAe,GAChB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,YAAY,EACV,kBAAkB,EAClB,oBAAoB,EACpB,eAAe,EACf,aAAa,GACd,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -18,6 +18,7 @@ export { useBuzzWorkflow } from './hooks/useBuzzWorkflow.js';
 export { useBlockResize } from './hooks/useBlockResize.js';
 export { useBuzzPurchase } from './hooks/useBuzzPurchase.js';
 export { useCheckpointPicker } from './hooks/useCheckpointPicker.js';
+export { useResourcePicker } from './hooks/useResourcePicker.js';
 export { useCivitaiNavigate } from './hooks/useCivitaiNavigate.js';
 export { useRequestSignIn } from './hooks/useRequestSignIn.js';
 export { useRequestConsent } from './hooks/useRequestConsent.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAG3F,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAO3D,QAAQ;AACR,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAG3F,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAO3D,QAAQ;AACR,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civitai/blocks-react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React hooks and iframe transport for Civitai App Blocks. Pairs with @civitai/app-sdk/blocks.",
   "license": "MIT",
   "type": "module",
@@ -24,21 +24,14 @@
     "dist",
     "README.md"
   ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "engines": {
     "node": ">=20"
   },
   "peerDependencies": {
-    "@civitai/app-sdk": ">=0.7.0 <1",
+    "@civitai/app-sdk": ">=0.10.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@civitai/app-sdk": "workspace:^",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^25.9.1",
     "@types/react": "^19.2.15",
@@ -46,7 +39,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.9.2",
-    "vitest": "^4.1.7"
+    "vitest": "^4.1.7",
+    "@civitai/app-sdk": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"
@@ -65,5 +59,11 @@
     "type": "git",
     "url": "git+https://github.com/civitai/civitai-app-starters.git",
     "directory": "packages/civitai-blocks-react"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}