@arbidocs/blocks 0.3.120 → 0.3.121

package/dist/index.cjs

@@ -2156,10 +2156,10 @@ function useImageGen() {
   const task = useFirmAiTask();
   const { run } = task;
   const generate = react$1.useCallback(
-    async (prompt) => {
+    async (prompt, referenceDocIds = []) => {
       const trimmed = prompt.trim();
       if (!trimmed) return null;
-      const result = await run(`/image ${trimmed}`, []);
+      const result = await run(`/image ${trimmed}`, referenceDocIds);
       return latestImageDocId(result?.artifacts ?? []);
     },
     [run]
@@ -2190,6 +2190,7 @@ function ImageFieldControl({
   const [url, setUrl] = react$1.useState("");
   const [prompt, setPrompt] = react$1.useState("");
   const [busy, setBusy] = react$1.useState(false);
+  const [refIds, setRefIds] = react$1.useState([]);
   const [cropSrc, setCropSrc] = react$1.useState(null);
   const [cropName, setCropName] = react$1.useState("image.jpg");
   const arbi = react.useArbi();
@@ -2243,11 +2244,13 @@ function ImageFieldControl({
     await uploadBlobAsAsset(result.blob, cropName);
     if (src?.startsWith("blob:")) URL.revokeObjectURL(src);
   };
+  const toggleRef = (id) => setRefIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
   const onGenerate = async () => {
     if (!prompt.trim() || gen.isGenerating) return;
-    const id = await gen.generate(prompt);
+    const id = await gen.generate(prompt, refIds);
     if (id) {
       onChange(chunkAHWIZJ4M_cjs.asAssetRef(id));
+      setRefIds([]);
       void refreshAssets();
     }
   };
@@ -2356,12 +2359,57 @@ function ImageFieldControl({
       )
     ] }),
     mode === "generate" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      imageDocs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", "data-testid": tp("refs"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "Reference images",
+            refIds.length > 0 ? ` (${refIds.length})` : " (optional)"
+          ] }),
+          chunkAHWIZJ4M_cjs.isAssetRef(value) && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-xs font-medium text-primary hover:underline",
+              onClick: () => toggleRef(chunkAHWIZJ4M_cjs.assetRefId(value)),
+              "data-testid": tp("vary-current"),
+              children: refIds.includes(chunkAHWIZJ4M_cjs.assetRefId(value)) ? "Varying current" : "Vary current image"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid max-h-28 grid-cols-4 gap-1.5 overflow-auto", children: imageDocs.map((d) => {
+          const thumb = thumbs?.[d.external_id];
+          const on = refIds.includes(d.external_id);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleRef(d.external_id),
+              "aria-pressed": on,
+              className: `relative overflow-hidden rounded border ${on ? "border-primary ring-1 ring-primary" : "border-border"}`,
+              title: d.file_name ?? "",
+              "data-testid": tp("ref", d.external_id),
+              children: [
+                thumb ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: thumb,
+                    alt: d.file_name ?? "",
+                    className: "aspect-square w-full bg-muted object-contain"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex aspect-square w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImagePlus, { className: "size-3.5" }) }),
+                on && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-0.5 top-0.5 rounded-full bg-primary p-0.5 text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-2.5" }) })
+              ]
+            },
+            d.external_id
+          );
+        }) })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
           className: inputClass,
           rows: 2,
-          placeholder: "Describe the image\u2026",
+          placeholder: refIds.length > 0 ? "Describe the edit to apply\u2026" : "Describe the image\u2026",
           value: prompt,
           onChange: (e) => setPrompt(e.target.value),
           "data-testid": tp("prompt")
@@ -2377,7 +2425,7 @@ function ImageFieldControl({
           "data-testid": tp("generate"),
           children: [
             gen.isGenerating ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-3.5" }),
-            gen.isGenerating ? "Generating\u2026" : "Generate"
+            gen.isGenerating ? "Generating\u2026" : refIds.length > 0 ? `Generate from ${refIds.length} reference${refIds.length > 1 ? "s" : ""}` : "Generate"
           ]
         }
       ),