@chai-ui/react 0.1.0 → 0.2.1

package/dist/useComposer.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
-import { createMockEngine, createRun, deriveGenerationUseCase, cancelResult, failResult, isAbortError, mockEngine, normalizeGenerationError, resolveResult, routeModel, startResult, streamResult, } from "@chai-ui/core";
+import { buildRegionEditPrompt, createMockEngine, createRun, deriveGenerationUseCase, cancelResult, failResult, isAbortError, mockEngine, normalizeGenerationError, PRECISE_EDIT_MODELS, resolveResult, routeModel, ROUTING_MODEL_ID, startResult, streamResult, } from "@chai-ui/core";
 import { reasoningModelFor, useReasoning } from "./ChaiProvider.js";
 import { useLatest } from "./use-latest.js";
 /** A result's `modelId` when nothing was picked: the engine runs its own default model. */
@@ -26,6 +26,34 @@ export function useComposer(options = {}) {
     const [runs, setRuns] = useState([]);
     const [enhancing, setEnhancing] = useState(false);
     const [routing, setRouting] = useState(false);
+    // Edit mode. Each edit's runs are kept (not replaced by the next submit),
+    // since every result is a version of the image the person can page back to.
+    const editImage = options.editImage?.kind === "image" ? options.editImage : null;
+    const [editRuns, setEditRuns] = useState([]);
+    const [regions, setRegions] = useState([]);
+    const [activeVersion, setActiveVersion] = useState(0);
+    // Another image starts over. Reset while rendering, not in an effect (the rules of React).
+    const [editSource, setEditSource] = useState(editImage?.src ?? null);
+    if ((editImage?.src ?? null) !== editSource) {
+        setEditSource(editImage?.src ?? null);
+        setEditRuns([]);
+        setRegions([]);
+        setActiveVersion(0);
+    }
+    const versions = useMemo(() => editImage
+        ? [
+            { id: "original", src: editImage.src, status: "done", regions: [] },
+            ...editRuns.flatMap((run) => run.results.map((r) => ({
+                id: r.id,
+                src: r.output?.src,
+                from: run.request.attachments[0]?.src,
+                status: r.status,
+                regions: run.request.params.regions ?? [],
+                error: r.error?.message,
+            }))),
+        ]
+        : [], [editImage, editRuns]);
+    const editRef = useLatest({ versions, activeVersion, editRuns });
     // Each submit gets an id, so routing that settles after a newer submit is dropped.
     const submitId = useRef(0);
     // Aborts the current submit's engine calls: on `cancel()`, and when a newer
@@ -45,40 +73,83 @@ export function useComposer(options = {}) {
             : undefined
         : provided, [reasoningEngine, reasoningModel, provided]);
     const reasoningRef = useLatest(reasoning);
-    const start = useCallback((payload, signal) => {
+    // One request per selection. An edit runs on the image version showing
+    // in the EditCard (the original until an edit lands) and carries its regions.
+    const buildRequest = useCallback((payload, selection) => {
         const opts = optionsRef.current;
         const reasoning = reasoningRef.current;
+        const isText = selection.useCase.kind === "text";
+        const isEdit = Boolean(selection.useCase.edit && opts.editImage?.kind === "image");
+        const { versions, activeVersion } = editRef.current;
+        const shown = versions[activeVersion];
+        const editFrom = shown?.status === "done" && shown.src ? shown.src : opts.editImage?.src;
+        const attachments = isEdit && editFrom ? [{ src: editFrom, kind: "image" }] : payload.attachments;
+        // Nothing picked: text uses the builder's text model when there is
+        // one; otherwise the engine runs its own default. Never a silent no-op.
+        const fallback = isText ? (opts.textModel ?? (reasoning && reasoningModelFor(reasoning, attachments))) : undefined;
+        const params = payload.aspectRatio && !isEdit ? { aspectRatio: payload.aspectRatio } : {};
+        if (isEdit)
+            params.regions = payload.regions ?? [];
+        const request = {
+            mode: deriveGenerationUseCase(selection.useCase, attachments),
+            prompt: payload.value,
+            attachments,
+            modelIds: selection.modelIds.length > 0 ? selection.modelIds : [fallback ?? DEFAULT_MODEL_ID],
+            params,
+        };
+        const engine = isText
+            ? (opts.textEngine ?? reasoning?.engine ?? mockTextEngine)
+            : (opts.engineByKind?.[selection.useCase.kind] ?? opts.engine ?? mockEngine);
+        return { request, engine, isEdit };
+    }, [optionsRef, reasoningRef, editRef]);
+    // Edit placeholders from routing waits, dropped from the history when the
+    // next real runs start (including ones a newer submit abandoned).
+    const placeholderIds = useRef(new Set());
+    const start = useCallback((payload, signal) => {
+        const opts = optionsRef.current;
         const newRuns = payload.selections.map((selection) => {
-            const isText = selection.useCase.kind === "text";
-            // Nothing picked: text uses the builder's text model when there is
-            // one; otherwise the engine runs its own default. Never a silent no-op.
-            const fallback = isText ? (opts.textModel ?? (reasoning && reasoningModelFor(reasoning, payload.attachments))) : undefined;
-            const request = {
-                mode: deriveGenerationUseCase(selection.useCase, payload.attachments),
-                prompt: payload.value,
-                attachments: payload.attachments,
-                modelIds: selection.modelIds.length > 0 ? selection.modelIds : [fallback ?? DEFAULT_MODEL_ID],
-                params: payload.aspectRatio ? { aspectRatio: payload.aspectRatio } : {},
-            };
-            const engine = isText
-                ? (opts.textEngine ?? reasoning?.engine ?? mockTextEngine)
-                : (opts.engineByKind?.[selection.useCase.kind] ?? opts.engine ?? mockEngine);
-            return { run: createRun(request), engine };
+            const { request, engine, isEdit } = buildRequest(payload, selection);
+            return { run: createRun(request), engine, isEdit, models: selection.models ?? [] };
         });
         setRuns(newRuns.map((r) => r.run));
+        const newEditRuns = newRuns.filter((r) => r.isEdit).map((r) => r.run);
+        const placeholders = placeholderIds.current;
+        const kept = editRef.current.editRuns.filter((r) => !placeholders.has(r.id));
+        if (newEditRuns.length > 0) {
+            // Show the first new version, and start the next edit with no regions:
+            // these ones now belong to the versions they made.
+            setEditRuns([...kept, ...newEditRuns]);
+            setActiveVersion(1 + kept.reduce((n, r) => n + r.results.length, 0));
+            setRegions([]);
+        }
+        else if (placeholders.size > 0) {
+            setEditRuns(kept);
+        }
+        placeholderIds.current = new Set();
         // Results settle independently and out of order — each update only
         // ever touches its own run, and only if that run is still current. A
         // run from an earlier submit is no longer in state (and its calls were
         // aborted), so a late result can't clobber the newer ones.
-        const update = (runId, fn) => setRuns((prev) => (prev.some((r) => r.id === runId) ? prev.map((r) => (r.id === runId ? fn(r) : r)) : prev));
-        for (const { run: newRun, engine } of newRuns) {
+        const update = (runId, fn) => {
+            const apply = (prev) => (prev.some((r) => r.id === runId) ? prev.map((r) => (r.id === runId ? fn(r) : r)) : prev);
+            setRuns(apply);
+            setEditRuns(apply);
+        };
+        for (const { run: newRun, engine, isEdit, models } of newRuns) {
             opts.onRun?.(newRun);
             for (const result of newRun.results) {
                 update(newRun.id, (r) => startResult(r, result.id));
+                // An edit's prompt depends on the model: one with box support gets
+                // boxes, any other gets the regions described in words.
+                const regions = newRun.request.params.regions ?? [];
+                const model = models.find((m) => m.id === result.modelId) ?? PRECISE_EDIT_MODELS.find((m) => m.id === result.modelId);
+                const prompt = isEdit
+                    ? (opts.editPrompt ?? defaultEditPrompt)({ prompt: newRun.request.prompt, regions, model })
+                    : newRun.request.prompt;
                 void engine
                     .generate({
                     modelId: result.modelId === DEFAULT_MODEL_ID ? undefined : result.modelId,
-                    prompt: newRun.request.prompt,
+                    prompt,
                     attachments: newRun.request.attachments,
                     // Text engines that stream fill `output` in while still "running".
                     onText: (text) => update(newRun.id, (r) => streamResult(r, result.id, text)),
@@ -95,7 +166,7 @@ export function useComposer(options = {}) {
                 });
             }
         }
-    }, [optionsRef, reasoningRef]);
+    }, [optionsRef, buildRequest, editRef]);
     const submit = useCallback((payload) => {
         const id = ++submitId.current;
         controller.current?.abort();
@@ -111,6 +182,22 @@ export function useComposer(options = {}) {
         if (!reasoning)
             warnNoReasoningOnce();
         setRouting(true);
+        // Runs exist from the moment of submit, so a result card shows progress
+        // while the reasoning model chooses. Their results read "Choosing model".
+        const placeholders = payload.selections.map((sel) => {
+            const { request, isEdit } = buildRequest(payload, sel);
+            const modelIds = sel.models.length > 0 ? [ROUTING_MODEL_ID] : request.modelIds;
+            return { run: createRun({ ...request, modelIds }), isEdit };
+        });
+        setRuns(placeholders.map((p) => p.run));
+        const editPlaceholders = placeholders.filter((p) => p.isEdit).map((p) => p.run);
+        if (editPlaceholders.length > 0) {
+            const editRuns = editRef.current.editRuns.filter((r) => !placeholderIds.current.has(r.id));
+            for (const r of editPlaceholders)
+                placeholderIds.current.add(r.id);
+            setEditRuns([...editRuns, ...editPlaceholders]);
+            setActiveVersion(1 + editRuns.reduce((n, r) => n + r.results.length, 0));
+        }
         void Promise.all(payload.selections.map((sel) => sel.models.length === 0
             ? Promise.resolve(null)
             : routeModel({
@@ -145,7 +232,7 @@ export function useComposer(options = {}) {
                 })),
             }, signal);
         });
-    }, [start, optionsRef, reasoningRef]);
+    }, [start, buildRequest, optionsRef, reasoningRef, editRef]);
     /**
      * Stops the current submit: wire it to Composer's `onAbort`. Its
      * unfinished results turn `"cancelled"` right away, and each engine
@@ -157,7 +244,9 @@ export function useComposer(options = {}) {
         controller.current?.abort();
         controller.current = null;
         setRouting(false);
-        setRuns((prev) => prev.map((run) => run.results.reduce((acc, r) => cancelResult(acc, r.id), run)));
+        const cancelAll = (prev) => prev.map((run) => run.results.reduce((acc, r) => cancelResult(acc, r.id), run));
+        setRuns(cancelAll);
+        setEditRuns(cancelAll);
     }, []);
     const run = runs[0] ?? null;
     // `undefined` (not a no-op function) when unconfigured, so a consumer
@@ -179,7 +268,20 @@ export function useComposer(options = {}) {
             }
         };
     }, [reasoning, options.enhancePrompt, run?.request.mode]);
-    return { run, runs, submit, cancel, enhance, enhancing, routing };
+    /** Props for an `EditCard` (spread them in), and `regions` for `Composer`. `null` when there's no `editImage`. */
+    const edit = editImage
+        ? {
+            versions,
+            activeVersion: Math.min(activeVersion, versions.length - 1),
+            onActiveVersionChange: setActiveVersion,
+            regions,
+            onRegionsChange: setRegions,
+        }
+        : null;
+    return { run, runs, submit, cancel, enhance, enhancing, routing, edit };
+}
+function defaultEditPrompt({ prompt, regions, model }) {
+    return buildRegionEditPrompt({ prompt, regions, format: model?.regionFormat });
 }
 let warnedNoReasoning = false;
 function warnNoReasoningOnce() {

package/dist/useComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComposer.js","sourceRoot":"","sources":["../src/useComposer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useComposer.js","sourceRoot":"","sources":["../src/useComposer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,uBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,UAAU,EACV,wBAAwB,EACxB,mBAAmB,EACnB,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,GAWb,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAkB,MAAM,mBAAmB,CAAC;AACpF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,2FAA2F;AAC3F,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAE1C,MAAM,cAAc,GAAG,gBAAgB,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC;AAEhE,SAAS,oBAAoB,CAAC,KAAa,EAAE,IAAwB;IACnE,MAAM,OAAO,GAAG,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;QACrC,CAAC,CAAC,oBAAoB;QACtB,CAAC,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,KAAK,QAAQ;YAC5C,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,qBAAqB,CAAC;IAC5B,OAAO,yBAAyB,OAAO,6HAA6H,KAAK,EAAE,CAAC;AAC9K,CAAC;AA+DD;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,UAA8B,EAAE;IAC1D,uEAAuE;IACvE,2EAA2E;IAC3E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAQ,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,0EAA0E;IAC1E,4EAA4E;IAC5E,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAQ,EAAE,CAAC,CAAC;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtD,2FAA2F;IAC3F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;IACpF,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,KAAK,UAAU,EAAE,CAAC;QAC5C,aAAa,CAAC,SAAS,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;QACtC,WAAW,CAAC,EAAE,CAAC,CAAC;QAChB,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IACD,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CACH,SAAS;QACP,CAAC,CAAC;YACE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;YACnE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAC1B,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;gBACtB,EAAE,EAAE,CAAC,CAAC,EAAE;gBACR,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,GAAG;gBAClB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG;gBACrC,MAAM,EAAE,CAAC,CAAC,MAAM;gBAChB,OAAO,EAAG,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,OAAoC,IAAI,EAAE;gBACvE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO;aACxB,CAAC,CAAC,CACJ;SACF;QACH,CAAC,CAAC,EAAE,EACR,CAAC,SAAS,EAAE,QAAQ,CAAC,CACtB,CAAC;IACF,MAAM,OAAO,GAAG,SAAS,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjE,mFAAmF;IACnF,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAC3B,4EAA4E;IAC5E,4DAA4D;IAC5D,MAAM,UAAU,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IAExD,oGAAoG;IACpG,qEAAqE;IACrE,kEAAkE;IAClE,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAEtC,wEAAwE;IACxE,8EAA8E;IAC9E,MAAM,QAAQ,GAAG,YAAY,EAAE,CAAC;IAChC,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC;IACpD,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CACH,eAAe,IAAI,cAAc;QAC/B,CAAC,CAAC,eAAe,IAAI,cAAc;YACjC,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,EAAE;YACrE,CAAC,CAAC,SAAS;QACb,CAAC,CAAC,QAAQ,EACd,CAAC,eAAe,EAAE,cAAc,EAAE,QAAQ,CAAC,CAC5C,CAAC;IACF,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,uEAAuE;IACvE,8EAA8E;IAC9E,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,OAA8B,EAAE,SAA4B,EAAmE,EAAE;QAChI,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;QAChC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC;QACjD,MAAM,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;QACnF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC;QACzF,MAAM,WAAW,GAAmB,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;QAClH,mEAAmE;QACnE,wEAAwE;QACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,iBAAiB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACnH,MAAM,MAAM,GAA4B,OAAO,CAAC,WAAW,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnH,IAAI,MAAM;YAAE,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;QACnD,MAAM,OAAO,GAAY;YACvB,IAAI,EAAE,uBAAuB,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC;YAC7D,MAAM,EAAE,OAAO,CAAC,KAAK;YACrB,WAAW;YACX,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,gBAAgB,CAAC;YAC7F,MAAM;SACP,CAAC;QACF,MAAM,MAAM,GAAG,MAAM;YACnB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,SAAS,EAAE,MAAM,IAAI,cAAc,CAAC;YAC1D,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,UAAU,CAAC,CAAC;QAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;IACrC,CAAC,EACD,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,CACpC,CAAC;IAEF,0EAA0E;IAC1E,kEAAkE;IAClE,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,GAAG,EAAU,CAAC,CAAC;IAEjD,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,OAA8B,EAAE,MAAmB,EAAE,EAAE;QAChF,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;QAChC,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE;YACnD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;YACrE,OAAO,EAAE,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,IAAI,EAAE,EAAE,CAAC;QACrF,CAAC,CAAC,CAAC;QAEH,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACnC,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QACtE,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC;QAC5C,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7E,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,uEAAuE;YACvE,mDAAmD;YACnD,WAAW,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC;YACvC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;YACrE,UAAU,CAAC,EAAE,CAAC,CAAC;QACjB,CAAC;aAAM,IAAI,YAAY,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YACjC,WAAW,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;QACD,cAAc,CAAC,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;QAEnC,mEAAmE;QACnE,qEAAqE;QACrE,uEAAuE;QACvE,2DAA2D;QAC3D,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,EAAqB,EAAE,EAAE;YACtD,MAAM,KAAK,GAAG,CAAC,IAAW,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACzH,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC,CAAC;QAEF,KAAK,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,OAAO,EAAE,CAAC;YAC9D,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;YACrB,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;gBACpC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;gBACpD,mEAAmE;gBACnE,wDAAwD;gBACxD,MAAM,OAAO,GAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,OAAoC,IAAI,EAAE,CAAC;gBAClF,MAAM,KAAK,GACT,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC;gBAC1G,MAAM,MAAM,GAAG,MAAM;oBACnB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC3F,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;gBAC1B,KAAK,MAAM;qBACR,QAAQ,CAAC;oBACR,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;oBACzE,MAAM;oBACN,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,WAAW;oBACvC,mEAAmE;oBACnE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;oBAC5E,MAAM;iBACP,CAAC;qBACD,IAAI,CACH,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;oBACpC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;oBACzF,UAAU,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;gBACnD,CAAC,EACD,CAAC,GAAG,EAAE,EAAE;oBACN,IAAI,YAAY,CAAC,GAAG,CAAC;wBAAE,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;oBACnF,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;oBAClF,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;gBAClD,CAAC,CACF,CAAC;YACN,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAExC,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,OAA8B,EAAE,EAAE;QACjC,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC;QAC9B,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC5B,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,eAAe,EAAE,CAAC,CAAC;QAChE,MAAM,OAAO,GAAG,OAAO,CAAC,eAAe,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnG,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;QAChC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS;YAAE,mBAAmB,EAAE,CAAC;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,wEAAwE;QACxE,0EAA0E;QAC1E,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAClD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACvD,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC;YAC/E,OAAO,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,GAAG,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;QAC9D,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACxC,MAAM,gBAAgB,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAChF,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAChC,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC3F,KAAK,MAAM,CAAC,IAAI,gBAAgB;gBAAE,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACnE,WAAW,CAAC,CAAC,GAAG,QAAQ,EAAE,GAAG,gBAAgB,CAAC,CAAC,CAAC;YAChD,gBAAgB,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3E,CAAC;QACD,KAAK,OAAO,CAAC,GAAG,CACd,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAC7B,GAAG,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YACrB,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;YACvB,CAAC,CAAC,UAAU,CAAC;gBACT,MAAM,EAAE,OAAO,CAAC,KAAK;gBACrB,UAAU,EAAE,GAAG,CAAC,OAAO,CAAC,IAAI;gBAC5B,eAAe,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;gBACvD,WAAW,EAAE,OAAO,CAAC,WAAW;gBAChC,MAAM,EAAE,GAAG,CAAC,MAAM;gBAClB,MAAM,EAAE,SAAS,EAAE,MAAM;gBACzB,KAAK,EAAE,SAAS,IAAI,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC;gBACrE,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,MAAM;aACP,CAAC,CACP,CACF,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YACjB,IAAI,EAAE,KAAK,QAAQ,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO;gBAAE,OAAO;YACtD,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;YAClC,KAAK,MAAM,CAAC,IAAI,OAAO;gBAAE,IAAI,CAAC,EAAE,MAAM,KAAK,UAAU;oBAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,CAAC;YACrF,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACjE,IAAI,MAAM,CAAC,gBAAgB;gBAAE,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;iBAC3D,IAAI,SAAS,CAAC,CAAC,CAAC;gBAAE,MAAM,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5D,KAAK,CAAC;gBACJ,GAAG,OAAO;gBACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO;gBACxC,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;oBAC9C,GAAG,GAAG;oBACN,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ;iBAC5D,CAAC,CAAC;aACJ,EAAE,MAAM,CAAC,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,CACzD,CAAC;IAEF;;;;;OAKG;IACH,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;QACtB,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC5B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,SAAS,GAAG,CAAC,IAAW,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QACnH,OAAO,CAAC,SAAS,CAAC,CAAC;QACnB,WAAW,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IAE5B,sEAAsE;IACtE,qEAAqE;IACrE,sEAAsE;IACtE,6EAA6E;IAC7E,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,CAAC,SAAS;YAAE,OAAO,SAAS,CAAC;QACjC,OAAO,KAAK,EAAE,KAAa,EAAE,EAAE;YAC7B,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,CAAC,OAAO,CAAC,aAAa,IAAI,oBAAoB,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;gBACzF,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;gBACvG,OAAO,GAAG,CAAC;YACb,CAAC;oBAAS,CAAC;gBACT,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAE1D,kHAAkH;IAClH,MAAM,IAAI,GAAG,SAAS;QACpB,CAAC,CAAC;YACE,QAAQ;YACR,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAC3D,qBAAqB,EAAE,gBAAgB;YACvC,OAAO;YACP,eAAe,EAAE,UAAU;SAC5B;QACH,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1E,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAkE;IACnH,OAAO,qBAAqB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;AACjF,CAAC;AAID,IAAI,iBAAiB,GAAG,KAAK,CAAC;AAC9B,SAAS,mBAAmB;IAC1B,IAAI,iBAAiB;QAAE,OAAO;IAC9B,iBAAiB,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,IAAI,CACV,uKAAuK,CACxK,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chai-ui/react",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "CHAI UI React components — smart, drop-in UI for AI apps: Composer, Media Analyzer, Result Card, and the useComposer hook.",
   "license": "MIT",
   "author": "kazarazat",
@@ -48,8 +48,8 @@
     "@fontsource/roboto": "^5.3.0",
     "@lit/react": "^1.0.8",
     "@material/web": "^2.5.0",
-    "@chai-ui/tokens": "0.1.0",
-    "@chai-ui/core": "0.1.0"
+    "@chai-ui/core": "0.2.1",
+    "@chai-ui/tokens": "0.2.1"
   },
   "devDependencies": {
     "@material-symbols/svg-400": "^0.47.5",

package/src/Composer.tsx

@@ -2,8 +2,9 @@ import { useEffect, useRef, useState, type ChangeEvent } from "react";
 import { createComponent } from "@lit/react";
 import * as React from "react";
 import { MdFab } from "@material/web/fab/fab.js";
-import type { DroppedMedia, ModelOption, ParameterOption, MediaKind } from "@chai-ui/core";
+import type { DroppedMedia, EditRegion, ModelOption, ParameterOption, MediaKind } from "@chai-ui/core";
 import { SearchMenu } from "./primitives/SearchMenu.js";
+import { regionColor } from "./regions.js";
 
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
@@ -60,11 +61,20 @@ export type ComposerAttachMenuAction = "add-media" | "create-image" | "create-vi
 export interface ComposerUseCase {
   kind: MediaKind;
   label: string;
+  /**
+   * An edit of the attached image rather than a new one: no aspect ratio,
+   * region chips when `regions` is set, and a submit needs only an image and
+   * either a prompt or a region. Images only for now.
+   */
+  edit?: boolean;
 }
 
 /** A plain text request — what a submit means when no use case is picked, unless the builder sets `defaultUseCase`. */
 export const TEXT_USE_CASE: ComposerUseCase = { kind: "text", label: "Text" };
 
+/** Editing the attached image, the attach menu's "Edit image". Pair it with `useComposer`'s `editImage` and an `EditCard`. */
+export const EDIT_IMAGE_USE_CASE: ComposerUseCase = { kind: "image", label: "Edit image", edit: true };
+
 /** One use case to run and the models picked for it. Empty `modelIds` means the engine's default model. */
 export interface ComposerSelection {
   useCase: ComposerUseCase;
@@ -95,12 +105,15 @@ export interface ComposerSubmitPayload {
   selections: ComposerSelection[];
   /** When true, the model is chosen at submit (`useComposer` routes among each selection's `models`), not by the picks. */
   autoSelectModel: boolean;
+  /** An edit's marked regions, each with its own instruction. Empty unless the use case is an edit. */
+  regions?: EditRegion[];
 }
 
 export interface ComposerProps {
   /** The prompt text. Controlled — Composer owns no text state of its own. */
   value: string;
   onChange: (value: string) => void;
+  /** Defaults to "Describe media to create", or edit wording when the use case is an edit. */
   placeholder?: string;
   /** The prompt field's accessible name, read by screen readers. Defaults to `placeholder`, which disappears once the person types. */
   promptLabel?: string;
@@ -202,6 +215,12 @@ export interface ComposerProps {
   /** Fires when the stop icon is clicked while `submitting` is true. See `submitting`'s own doc comment for why this — not `submitting` alone — is what actually shows the stop icon. */
   onAbort?: () => void;
   onAttachMenuSelect?: (action: ComposerAttachMenuAction) => void;
+  /**
+   * An edit's regions (from `useComposer`'s `edit`), shown as colored chips
+   * while the use case is an edit. Removing a chip removes its region.
+   */
+  regions?: EditRegion[];
+  onRegionsChange?: (next: EditRegion[]) => void;
   disabled?: boolean;
 }
 
@@ -218,7 +237,7 @@ export interface ComposerProps {
 export function Composer({
   value,
   onChange,
-  placeholder = "Describe media to create",
+  placeholder,
   promptLabel,
   attachments = [],
   onAttachmentsChange,
@@ -250,21 +269,35 @@ export function Composer({
   submitting = false,
   onAbort,
   onAttachMenuSelect,
+  regions = [],
+  onRegionsChange,
   disabled = false,
 }: ComposerProps) {
-  const hasContent = value.trim().length > 0 || attachments.length > 0;
+  // What the person picked, and what actually runs: with nothing picked,
+  // the builder's default use case (a text request unless they chose
+  // otherwise), so a typed prompt always goes somewhere.
+  const pickedUseCases = multiSelectUseCases ? useCases : useCase ? [useCase] : [];
+  const activeUseCases = pickedUseCases.length > 0 ? pickedUseCases : [defaultUseCase];
+  // An edit needs an image, then a change: a prompt for the whole image, a
+  // region with its own instruction, or both.
+  const editing = activeUseCases.some((u) => u.edit);
+  const hasImage = attachments.some((a) => a.kind === "image");
+  const hasContent = editing
+    ? hasImage && (value.trim().length > 0 || regions.length > 0)
+    : value.trim().length > 0 || attachments.length > 0;
   const isSubmitDisabled = submitError ? disabled : (submitDisabled ?? (disabled || !hasContent));
+  const effectivePlaceholder =
+    placeholder ??
+    (editing
+      ? hasImage
+        ? "Describe a change across the whole image, or leave this empty"
+        : "Attach an image to edit"
+      : "Describe media to create");
   // The stop icon only appears with somewhere for its click to go — without
   // `onAbort`, `submitting` just disables the FAB instead (below), same as
   // it would with no opt-in wired at all.
   const showStop = submitting && Boolean(onAbort);
   const selectedAspect = aspectRatios?.find((o) => o.value === aspectRatio) ?? null;
-
-  // What the person picked, and what actually runs: with nothing picked,
-  // the builder's default use case (a text request unless they chose
-  // otherwise), so a typed prompt always goes somewhere.
-  const pickedUseCases = multiSelectUseCases ? useCases : useCase ? [useCase] : [];
-  const activeUseCases = pickedUseCases.length > 0 ? pickedUseCases : [defaultUseCase];
   const multiModel = multiSelectModels || multiSelectUseCases;
   const pickedModelIds = multiModel ? modelIds : modelId ? [modelId] : [];
   // One menu section per use case with multi-use-case select; otherwise one flat roster.
@@ -279,7 +312,8 @@ export function Composer({
     pickedModels.length > 1
       ? `${pickedModels.length} models`
       : pickedModels[0]?.label ?? (autoSelectModel ? "Auto-select" : "Select models");
-  const showAspectRatio = activeUseCases.some((u) => u.kind === "image" || u.kind === "video");
+  // An edit keeps the source image's shape.
+  const showAspectRatio = activeUseCases.some((u) => !u.edit && (u.kind === "image" || u.kind === "video"));
 
   function toggleModel(id: string) {
     if (!multiModel) return onModelChange?.(id);
@@ -424,14 +458,28 @@ export function Composer({
         </div>
       )}
 
+      {editing && regions.length > 0 && (
+        <ul className="chai-composer__regions" aria-label="Edit regions">
+          {regions.map((r) => (
+            <li key={r.id}>
+              <RegionChip
+                region={r}
+                onRemove={onRegionsChange ? () => onRegionsChange(regions.filter((x) => x.id !== r.id)) : undefined}
+                disabled={disabled}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+
       <div className="chai-composer__field">
         <textarea
           ref={textareaRef}
           className={`chai-composer__input chai-composer__type${animating ? " chai-composer__input--revealing" : ""}`}
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          aria-label={promptLabel ?? placeholder}
+          placeholder={effectivePlaceholder}
+          aria-label={promptLabel ?? effectivePlaceholder}
           rows={1}
           disabled={disabled || animating}
         />
@@ -607,6 +655,7 @@ export function Composer({
                 aspectRatio,
                 selections,
                 autoSelectModel,
+                regions: editing ? regions : [],
               });
             }
           }}
@@ -630,7 +679,7 @@ const ATTACH_MENU_ITEMS: {
   { action: "add-media", label: "Add media", icon: <AttachFileIcon />, divider: true },
   { action: "create-image", label: "Create image", icon: <ImageIcon /> },
   { action: "create-video", label: "Create video", icon: <VideocamIcon /> },
-  { action: "edit-media", label: "Edit media", icon: <ContentCutIcon /> },
+  { action: "edit-media", label: "Edit image", icon: <ContentCutIcon /> },
 ];
 
 /**
@@ -778,6 +827,45 @@ function UseCaseChip({
   );
 }
 
+/**
+ * One edit region, in its region color: a numbered badge matching the box on
+ * the image, its name, and the same hover-revealed remove as the use-case
+ * chip. The instruction itself lives on the image, not here.
+ */
+function RegionChip({
+  region,
+  onRemove,
+  disabled,
+}: {
+  region: EditRegion;
+  onRemove?: () => void;
+  disabled?: boolean;
+}) {
+  const name = `Region ${region.number}`;
+  return (
+    <span
+      className="chai-composer__chip chai-composer__chip--region"
+      style={{ "--chai-region-color": regionColor(region.number) } as React.CSSProperties}
+    >
+      <span className="chai-composer__region-badge" aria-hidden="true">
+        {region.number}
+      </span>
+      {name}
+      {onRemove && (
+        <button
+          type="button"
+          className="chai-composer__chip-remove"
+          onClick={onRemove}
+          disabled={disabled}
+          aria-label={`Remove ${name}`}
+        >
+          <CloseIcon />
+        </button>
+      )}
+    </span>
+  );
+}
+
 function kindIcon(kind: MediaKind) {
   switch (kind) {
     case "video":