@chai-ui/react 0.6.0 → 0.7.0

package/DESIGN.md

@@ -1,7 +1,8 @@
 # CHAI UI — DESIGN.md
 
-The rules for building with `@chai-ui/react`, written for the people and
-the coding agents who integrate it. The API reference is the JSDoc on each
+The rules for building with `@chai-ui/react` or `@chai-ui/vue`, written for
+the people and the coding agents who integrate them. Both packages ship
+this file. It uses React's names; "In Vue" below maps them. The API reference is the JSDoc on each
 component's props and the docs site's `llms.txt`. This file covers how to
 use the pieces correctly: which component to pick, which tokens to use,
 which states you get for free, and what not to build.
@@ -28,7 +29,8 @@ use these names: `Results`, `Compare`, `ModelPicker`,
 ## 2. Integration rules
 
 1. **Load the CSS in order:** `@chai-ui/tokens/css` first, then
-   `@chai-ui/react/style.css`. Component styles read the token variables.
+   `@chai-ui/react/style.css` (or `@chai-ui/vue/style.css`). Component
+   styles read the token variables.
 2. **Everything is controlled.** Every value comes in as a prop and every
    change comes out as a callback (`value` / `onChange`). Keep the state in
    your app.
@@ -59,6 +61,20 @@ use these names: `Results`, `Compare`, `ModelPicker`,
    Don't show model rankings or leaderboard positions you can't keep up to
    date. Don't show a control the selected model can't honor.
 
+### In Vue
+
+The same components, rules and behavior, with Vue's names:
+
+- `value` / `onChange` is `v-model`; every other `x` / `onXChange` pair is
+  `v-model:x` (`v-model:attachments`, `v-model:model-id`, `v-model:regions`, …).
+- Other callbacks are events: `@submit`, `@action`, `@enhance`, `@abort`.
+  Rule 4 holds: a control that needs a callback shows only with its
+  listener (`@enhance` for the optimize button, `@abort` for stop,
+  `@update:model-id` for the Model menu).
+- `useComposer` and `useMediaAnalyzer` are composables returning refs.
+  Pass a getter for options that change: `useComposer(() => ({ engine, editImage: image.value }))`.
+- `ChaiProvider` is a component with the same props.
+
 ## 3. Material components, and where Chai uses its own
 
 Chai builds on Material Design 3's web components where they fit, and

package/dist/ChaiProvider.d.ts

@@ -1,49 +1,10 @@
 import { type ReactNode } from "react";
-import { type DroppedMedia, type GenerationEngine, type MediaKind } from "@chai-ui/core";
-/**
- * The suggested reasoning model for text and images: prompt enhancement,
- * auto-select routing and image analysis. A default, not a requirement —
- * pass any model id `reasoningEngine` can run.
- */
-export declare const DEFAULT_REASONING_MODEL = "anthropic/claude-opus-5";
-/**
- * Suggested per-kind overrides for media Claude can't read. Gemini takes
- * video and audio directly. For a cheaper option, swap in
- * `"qwen/qwen3.8-omni-flash"`, which takes both too.
- */
-export declare const DEFAULT_REASONING_MODEL_BY_KIND: Partial<Record<MediaKind, string>>;
-/** The reasoning engine and models every CHAI component shares. */
-export interface Reasoning {
-    engine: GenerationEngine;
-    /** The model for text and any attachment kind without its own entry in `modelByKind`. */
-    model: string;
-    modelByKind: Partial<Record<MediaKind, string>>;
-}
-export interface ChaiProviderProps {
-    /** Text, image and routing model. Defaults to `DEFAULT_REASONING_MODEL`. */
-    reasoningModel?: string;
-    /**
-     * Per-attachment-kind models, merged over `DEFAULT_REASONING_MODEL_BY_KIND`
-     * one kind at a time, e.g. `{ video: "qwen/qwen3.8-omni-flash" }` keeps
-     * the default for audio. Map a kind to `reasoningModel`'s value to use
-     * one model for everything.
-     */
-    reasoningModelByKind?: Partial<Record<MediaKind, string>>;
-    /**
-     * The engine the reasoning models run on. Defaults to OpenRouter,
-     * independent of the generation engine: Fal's own LLM access is an
-     * OpenRouter proxy, so defaulting to it would double-proxy.
-     */
-    reasoningEngine?: GenerationEngine;
+import { type Reasoning, type ReasoningConfig } from "@chai-ui/core";
+export { DEFAULT_REASONING_MODEL, DEFAULT_REASONING_MODEL_BY_KIND, reasoningModelFor, type Reasoning, } from "@chai-ui/core";
+export interface ChaiProviderProps extends ReasoningConfig {
     children?: ReactNode;
 }
 export declare function ChaiProvider({ reasoningModel, reasoningModelByKind, reasoningEngine, children }: ChaiProviderProps): import("react").JSX.Element;
 /** The nearest `ChaiProvider`'s reasoning engine and models, or `undefined` outside one. */
 export declare function useReasoning(): Reasoning | undefined;
-/**
- * The reasoning model for a call with these attachments: the first
- * attachment whose kind has its own model wins (a clip plus a still goes
- * to the model that can read the clip), else `reasoning.model`.
- */
-export declare function reasoningModelFor(reasoning: Reasoning, attachments?: DroppedMedia[]): string;
 //# sourceMappingURL=ChaiProvider.d.ts.map

package/dist/ChaiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChaiProvider.d.ts","sourceRoot":"","sources":["../src/ChaiProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAA0B,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAEjH;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,+BAA+B,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAG9E,CAAC;AAEF,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,gBAAgB,CAAC;IACzB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;CACjD;AAID,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1D;;;;OAIG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,oBAAoB,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAgBlH;AAMD,4FAA4F;AAC5F,wBAAgB,YAAY,IAAI,SAAS,GAAG,SAAS,CAEpD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,GAAE,YAAY,EAAO,GAAG,MAAM,CAMhG"}
+{"version":3,"file":"ChaiProvider.d.ts","sourceRoot":"","sources":["../src/ChaiProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAuC,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1G,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,iBAAiB,EACjB,KAAK,SAAS,GACf,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,oBAAoB,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAQlH;AAED,4FAA4F;AAC5F,wBAAgB,YAAY,IAAI,SAAS,GAAG,SAAS,CAEpD"}

package/dist/ChaiProvider.js

@@ -1,54 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
-import { createOpenRouterEngine } from "@chai-ui/core";
-/**
- * The suggested reasoning model for text and images: prompt enhancement,
- * auto-select routing and image analysis. A default, not a requirement —
- * pass any model id `reasoningEngine` can run.
- */
-export const DEFAULT_REASONING_MODEL = "anthropic/claude-opus-5";
-/**
- * Suggested per-kind overrides for media Claude can't read. Gemini takes
- * video and audio directly. For a cheaper option, swap in
- * `"qwen/qwen3.8-omni-flash"`, which takes both too.
- */
-export const DEFAULT_REASONING_MODEL_BY_KIND = {
-    video: "google/gemini-3.8-flash",
-    audio: "google/gemini-3.8-flash",
-};
+import { createReasoning, reasoningEngineFor } from "@chai-ui/core";
+export { DEFAULT_REASONING_MODEL, DEFAULT_REASONING_MODEL_BY_KIND, reasoningModelFor, } from "@chai-ui/core";
 const ReasoningContext = createContext(undefined);
 export function ChaiProvider({ reasoningModel, reasoningModelByKind, reasoningEngine, children }) {
-    const engine = useMemo(() => reasoningEngine ?? createOpenRouterEngine(), [reasoningEngine]);
-    const model = reasoningModel ?? DEFAULT_REASONING_MODEL;
-    const video = reasoningModelByKind?.video;
-    const audio = reasoningModelByKind?.audio;
-    const image = reasoningModelByKind?.image;
-    const text = reasoningModelByKind?.text;
-    const value = useMemo(() => ({
-        engine,
-        model,
-        modelByKind: { ...DEFAULT_REASONING_MODEL_BY_KIND, ...dropUndefined({ video, audio, image, text }) },
-    }), [engine, model, video, audio, image, text]);
+    const engine = useMemo(() => reasoningEngineFor({ reasoningEngine }), [reasoningEngine]);
+    const { video, audio, image, text } = reasoningModelByKind ?? {};
+    const value = useMemo(() => createReasoning({ reasoningModel, reasoningModelByKind: { video, audio, image, text } }, engine), [engine, reasoningModel, video, audio, image, text]);
     return _jsx(ReasoningContext.Provider, { value: value, children: children });
 }
-function dropUndefined(obj) {
-    return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== undefined));
-}
 /** The nearest `ChaiProvider`'s reasoning engine and models, or `undefined` outside one. */
 export function useReasoning() {
     return useContext(ReasoningContext);
 }
-/**
- * The reasoning model for a call with these attachments: the first
- * attachment whose kind has its own model wins (a clip plus a still goes
- * to the model that can read the clip), else `reasoning.model`.
- */
-export function reasoningModelFor(reasoning, attachments = []) {
-    for (const { kind } of attachments) {
-        const model = reasoning.modelByKind[kind];
-        if (model)
-            return model;
-    }
-    return reasoning.model;
-}
 //# sourceMappingURL=ChaiProvider.js.map

package/dist/ChaiProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChaiProvider.js","sourceRoot":"","sources":["../src/ChaiProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAA4D,MAAM,eAAe,CAAC;AAEjH;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,yBAAyB,CAAC;AAEjE;;;;GAIG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAuC;IACjF,KAAK,EAAE,yBAAyB;IAChC,KAAK,EAAE,yBAAyB;CACjC,CAAC;AAUF,MAAM,gBAAgB,GAAG,aAAa,CAAwB,SAAS,CAAC,CAAC;AAqBzE,MAAM,UAAU,YAAY,CAAC,EAAE,cAAc,EAAE,oBAAoB,EAAE,eAAe,EAAE,QAAQ,EAAqB;IACjH,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,IAAI,sBAAsB,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAC7F,MAAM,KAAK,GAAG,cAAc,IAAI,uBAAuB,CAAC;IACxD,MAAM,KAAK,GAAG,oBAAoB,EAAE,KAAK,CAAC;IAC1C,MAAM,KAAK,GAAG,oBAAoB,EAAE,KAAK,CAAC;IAC1C,MAAM,KAAK,GAAG,oBAAoB,EAAE,KAAK,CAAC;IAC1C,MAAM,IAAI,GAAG,oBAAoB,EAAE,IAAI,CAAC;IACxC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;QACN,KAAK;QACL,WAAW,EAAE,EAAE,GAAG,+BAA+B,EAAE,GAAG,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;KACrG,CAAC,EACF,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAC3C,CAAC;IACF,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA6B,CAAC;AACzF,CAAC;AAED,SAAS,aAAa,CAAmB,GAAM;IAC7C,OAAO,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAe,CAAC;AAClG,CAAC;AAED,4FAA4F;AAC5F,MAAM,UAAU,YAAY;IAC1B,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,SAAoB,EAAE,cAA8B,EAAE;IACtF,KAAK,MAAM,EAAE,IAAI,EAAE,IAAI,WAAW,EAAE,CAAC;QACnC,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,KAAK;YAAE,OAAO,KAAK,CAAC;IAC1B,CAAC;IACD,OAAO,SAAS,CAAC,KAAK,CAAC;AACzB,CAAC"}
+{"version":3,"file":"ChaiProvider.js","sourceRoot":"","sources":["../src/ChaiProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAwC,MAAM,eAAe,CAAC;AAE1G,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,iBAAiB,GAElB,MAAM,eAAe,CAAC;AAEvB,MAAM,gBAAgB,GAAG,aAAa,CAAwB,SAAS,CAAC,CAAC;AAMzE,MAAM,UAAU,YAAY,CAAC,EAAE,cAAc,EAAE,oBAAoB,EAAE,eAAe,EAAE,QAAQ,EAAqB;IACjH,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACzF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,oBAAoB,IAAI,EAAE,CAAC;IACjE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,cAAc,EAAE,oBAAoB,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,EACtG,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CACpD,CAAC;IACF,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA6B,CAAC;AACzF,CAAC;AAED,4FAA4F;AAC5F,MAAM,UAAU,YAAY;IAC1B,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC"}

package/dist/Composer.d.ts

@@ -1,63 +1,8 @@
 import * as React from "react";
-import type { DroppedMedia, EditRegion, ModelOption, ParameterOption, MediaKind } from "@chai-ui/core";
-export interface ComposerAttachment extends DroppedMedia {
-    id: string;
-}
-export type ComposerAttachMenuAction = "add-media" | "create-image" | "create-video" | "edit-media";
-/**
- * The selected generation use case, shown as a removable chip (reference:
- * the mock's "Video"/"Image" chip) — deliberately independent of
- * `attachments`: a use case can be picked from the attach menu with nothing
- * attached yet (e.g. "Create video"). Composer never derives this from
- * `attachments` itself (that's app-level policy, not a Composer opinion —
- * the design). With none picked, `defaultUseCase` applies.
- */
-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 declare const TEXT_USE_CASE: ComposerUseCase;
-/** Editing the attached image, the attach menu's "Edit image". Pair it with `useComposer`'s `editImage` and an `EditCard`. */
-export declare const EDIT_IMAGE_USE_CASE: ComposerUseCase;
-/** One use case to run and the models picked for it. Empty `modelIds` means the engine's default model. */
-export interface ComposerSelection {
-    useCase: ComposerUseCase;
-    modelIds: string[];
-    /** The models offered for this use case: what auto-select routes among. */
-    models: ModelOption[];
-}
-/**
- * Everything Composer itself tracks, assembled into one object at submit
- * time — not the the design `Request` shape (no `mode`/`params`/
- * `presetId`; those belong to the run store this package doesn't have yet,
- * see the package README), just an honest snapshot of this component's own
- * state. Handed to `onSubmit` so a builder doesn't have to re-derive it
- * from five separately-controlled props they already hold — mainly a
- * correctness/ergonomics win for a coding agent wiring this up from the
- * type signature alone.
- */
-export interface ComposerSubmitPayload {
-    value: string;
-    attachments: ComposerAttachment[];
-    /** The use case to run — the picked one, or `defaultUseCase` when none is picked. The first one with `multiSelectUseCases`. */
-    useCase: ComposerUseCase;
-    /** The first picked model, or null for the engine's default. */
-    modelId: string | null;
-    aspectRatio: string | null;
-    /** Everything to run: one entry per use case with its picked models. A single entry unless `multiSelectUseCases` is on. */
-    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[];
-}
+import { type ComposerAttachMenuAction } from "@chai-ui/core";
+import type { EditRegion, ModelOption, ParameterOption, MediaKind } from "@chai-ui/core";
+import type { ComposerAttachment, ComposerSubmitPayload, ComposerUseCase } from "@chai-ui/core";
+export { EDIT_IMAGE_USE_CASE, TEXT_USE_CASE, type ComposerAttachMenuAction, type ComposerAttachment, type ComposerSelection, type ComposerSubmitPayload, type ComposerUseCase, } from "@chai-ui/core";
 export interface ComposerProps {
     /** The prompt text. Controlled — Composer owns no text state of its own. */
     value: string;

package/dist/Composer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../src/Composer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../src/Composer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAQL,KAAK,wBAAwB,EAC9B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhG,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AAUvB,MAAM,WAAW,aAAa;IAC5B,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qIAAqI;IACrI,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC3D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,mFAAmF;IACnF,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,uHAAuH;IACvH,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACrD,wHAAwH;IACxH,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IACzD;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,yGAAyG;IACzG,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,uGAAuG;IACvG,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,kHAAkH;IAClH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oJAAoJ;IACpJ,QAAQ,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,sJAAsJ;IACtJ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uLAAuL;IACvL,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC/C;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAW,EACX,WAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,OAAc,EACd,cAAc,EACd,cAA8B,EAC9B,mBAA2B,EAC3B,QAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,iBAAyB,EACzB,QAAa,EACb,gBAAgB,EAChB,MAAM,EACN,OAAc,EACd,aAAa,EACb,eAAuB,EACvB,oBAA4B,EAC5B,uBAAuB,EACvB,YAAY,EACZ,WAAkB,EAClB,mBAAmB,EACnB,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,WAAkB,EAClB,cAAc,EACd,UAAkB,EAClB,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,OAAY,EACZ,eAAe,EACf,QAAgB,GACjB,EAAE,aAAa,qBAgWf"}

package/dist/Composer.js

@@ -4,9 +4,9 @@ import { useEffect, useRef, useState } from "react";
 import { createComponent } from "@lit/react";
 import * as React from "react";
 import { MdFab } from "@material/web/fab/fab.js";
-import { deriveGenerationUseCase, suggestedModels } from "@chai-ui/core";
+import { composerAttachmentsFromFiles, composerAttachMenuItems, composerView, enhanceRevealDurationMs, MAX_ANIMATE_ENHANCE_LENGTH, regionColor, TEXT_USE_CASE, } from "@chai-ui/core";
 import { SearchMenu } from "./primitives/SearchMenu.js";
-import { regionColor } from "./regions.js";
+export { EDIT_IMAGE_USE_CASE, TEXT_USE_CASE, } from "@chai-ui/core";
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
     react: React,
@@ -14,35 +14,6 @@ const MdFabElement = createComponent({
     elementClass: MdFab,
     events: { onClick: "click" },
 });
-const ACCEPTED_KINDS = ["image", "video", "audio"];
-function detectKind(file) {
-    const prefix = file.type.split("/")[0];
-    return ACCEPTED_KINDS.find((k) => k === prefix);
-}
-// Past this length the rewritten prompt just appears instantly — a
-// multi-hundred-character reveal reads as sluggish, not delightful, and a
-// long prompt is exactly the case where a person wants the result now, not
-// a show. Picked to comfortably cover a typical Enhance rewrite (usually a
-// sentence or two of added detail) while bailing out before it doesn't.
-const MAX_ANIMATE_ENHANCE_LENGTH = 260;
-// Time-driven (see the `requestAnimationFrame` loop that uses this), not
-// count-driven — a fixed ms-per-character reveal on a slow frame would
-// drift or stall instead of just finishing a beat later. Capped on both
-// ends: a two-word rewrite shouldn't take as long as a five-word one to
-// feel intentional, and even a near-max-length one should still resolve
-// under a second.
-function enhanceRevealDurationMs(charCount) {
-    return Math.min(900, Math.max(300, charCount * 6));
-}
-function nextAttachmentId() {
-    return typeof crypto !== "undefined" && "randomUUID" in crypto
-        ? crypto.randomUUID()
-        : `attachment-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-}
-/** A plain text request — what a submit means when no use case is picked, unless the builder sets `defaultUseCase`. */
-export const TEXT_USE_CASE = { 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 = { kind: "image", label: "Edit image", edit: true };
 /**
  * The `bar`-layout Composer —
  * reference: the "Compose Component" design, whose four states (minimal / model+aspect select / auto-select with
@@ -54,84 +25,36 @@ export const EDIT_IMAGE_USE_CASE = { kind: "image", label: "Edit image", edit: t
  * `--chai-composer-*` custom properties in style.css.
  */
 export function Composer({ value, onChange, placeholder, promptLabel, attachments = [], onAttachmentsChange, onUnsupportedFile, useCase = null, onClearUseCase, defaultUseCase = TEXT_USE_CASE, multiSelectUseCases = false, useCases = [], onUseCasesChange, modelsByKind, multiSelectModels = false, modelIds = [], onModelIdsChange, models, modelId = null, onModelChange, autoSelectModel = false, showAutoSelectToggle = false, onAutoSelectModelChange, aspectRatios, aspectRatio = null, onAspectRatioChange, onEnhance, enhancing = false, onSubmit, submitError = null, submitDisabled, submitting = false, onAbort, onAttachMenuSelect, attachMenuActions, regions = [], onRegionsChange, disabled = false, }) {
-    // 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 multiModel = multiSelectModels || multiSelectUseCases;
-    const rawPickedIds = multiModel ? modelIds : modelId ? [modelId] : [];
-    // The app's list for a use case, or Chai's suggested models when it gave none.
-    const rosterFor = (u) => {
-        const given = multiSelectUseCases ? modelsByKind?.[u.kind] : models;
-        if (given)
-            return { options: given, suggested: false };
-        return { options: suggestedModels(u.edit ? "image-edit" : deriveGenerationUseCase(u, attachments)), suggested: true };
-    };
-    // One menu section per use case with multi-use-case select; otherwise one flat roster.
-    const modelSections = (multiSelectUseCases ? activeUseCases : activeUseCases.slice(0, 1))
-        .map((u) => ({ label: multiSelectUseCases ? u.label : "", kind: u.kind, ...rosterFor(u) }))
-        .filter((s) => s.options.length > 0);
-    const allModels = modelSections.flatMap((s) => s.options);
-    // A pick that isn't in the current list (e.g. the edit model after leaving
-    // edit mode) is shown as unpicked and never submitted. With no list at
-    // all, the app's pick is passed through as given. With nothing picked
-    // from a suggested list (and auto-select off), its first model is the pick.
-    const validPicks = allModels.length > 0 ? rawPickedIds.filter((id) => allModels.some((m) => m.id === id)) : rawPickedIds;
-    const pickedModelIds = validPicks.length > 0 || autoSelectModel
-        ? validPicks
-        : modelSections.filter((s) => s.suggested).map((s) => s.options[0].id);
-    const pickedModels = allModels.filter((m) => pickedModelIds.includes(m.id));
-    // No menu that can't change anything: without its handler, the Model menu
-    // hides (the default pick still runs).
-    const canPickModel = multiModel ? Boolean(onModelIdsChange) : Boolean(onModelChange);
-    const modelTriggerLabel = pickedModels.length > 1
-        ? `${pickedModels.length} models`
-        : pickedModels[0]?.label ?? (autoSelectModel ? "Auto-select" : "Select models");
-    // An edit keeps the source image's shape.
-    const showAspectRatio = activeUseCases.some((u) => !u.edit && (u.kind === "image" || u.kind === "video"));
-    // Only ratios every model that might run takes: the picked ones, or with
-    // none picked (or auto-select on) the whole list, so whichever runs can
-    // honor it. A model with no `aspectRatios` sets its own shape: no menu.
-    const ratioModels = pickedModels.length > 0 && !autoSelectModel ? pickedModels : allModels;
-    const sharedRatios = ratioModels.reduce((shared, m) => (shared ?? m.aspectRatios ?? []).filter((r) => m.aspectRatios?.includes(r)), null) ?? [];
-    const aspectOptions = aspectRatios
-        ? aspectRatios.filter((o) => sharedRatios.includes(o.value))
-        : sharedRatios.map((r) => ({ value: r, label: r }));
-    // A pick the current models don't take is shown as unpicked and never sent.
-    const offeredAspect = showAspectRatio && aspectOptions.some((o) => o.value === aspectRatio) ? aspectRatio : null;
-    const selectedAspect = aspectOptions.find((o) => o.value === offeredAspect) ?? null;
+    const view = composerView({
+        value,
+        placeholder,
+        attachments,
+        useCase,
+        defaultUseCase,
+        multiSelectUseCases,
+        useCases,
+        modelsByKind,
+        multiSelectModels,
+        modelIds,
+        models,
+        modelId,
+        onModelChange,
+        onModelIdsChange,
+        autoSelectModel,
+        aspectRatios,
+        aspectRatio,
+        submitError,
+        submitDisabled,
+        submitting,
+        onAbort,
+        regions,
+        disabled,
+    });
+    const { editing, isSubmitDisabled, showStop, multiModel, modelSections, pickedModelIds, aspectOptions, offeredAspect } = view;
     function toggleModel(id) {
         if (!multiModel)
             return onModelChange?.(id);
-        onModelIdsChange?.(modelIds.includes(id) ? modelIds.filter((m) => m !== id) : [...modelIds, id]);
-    }
-    function buildSelections() {
-        return activeUseCases.map((u) => ({
-            useCase: u,
-            models: rosterFor(u).options,
-            modelIds: multiSelectUseCases
-                ? pickedModelIds.filter((id) => rosterFor(u).options.some((m) => m.id === id))
-                : pickedModelIds,
-        }));
+        onModelIdsChange?.(view.toggledModelIds(id));
     }
     // Auto-select chooses at submit, from the prompt (`useComposer` routes
     // with the reasoning model). Turning it on clears the current pick, so
@@ -218,57 +141,26 @@ export function Composer({ value, onChange, placeholder, promptLabel, attachment
         setOriginalValue(value); // snapshot now — before the rewrite lands, for undo
         onEnhance?.(value);
     }
-    function handleFilesSelected(fileList) {
+    async function handleFilesSelected(fileList) {
         if (!fileList || fileList.length === 0 || !onAttachmentsChange)
             return;
         // Edit mode works on one image: a new one replaces it, and the edit starts over.
-        if (editing) {
-            const image = Array.from(fileList).find((f) => detectKind(f) === "image");
-            if (!image) {
-                Array.from(fileList).forEach((f) => onUnsupportedFile?.(f.name));
-                return;
-            }
-            const reader = new FileReader();
-            reader.onload = () => onAttachmentsChange([{ id: nextAttachmentId(), src: String(reader.result), kind: "image", name: image.name, size: image.size }]);
-            reader.onerror = () => onUnsupportedFile?.(image.name);
-            reader.readAsDataURL(image);
-            return;
-        }
-        const next = [...attachments];
-        let pending = fileList.length;
-        const settle = () => {
-            pending -= 1;
-            if (pending === 0)
-                onAttachmentsChange(next);
-        };
-        Array.from(fileList).forEach((file) => {
-            const kind = detectKind(file);
-            if (!kind) {
-                onUnsupportedFile?.(file.name);
-                settle();
-                return;
-            }
-            const reader = new FileReader();
-            reader.onload = () => {
-                next.push({ id: nextAttachmentId(), src: String(reader.result), kind, name: file.name, size: file.size });
-                settle();
-            };
-            reader.onerror = () => {
-                onUnsupportedFile?.(file.name);
-                settle();
-            };
-            reader.readAsDataURL(file);
-        });
+        const { attachments: next, unsupported } = await composerAttachmentsFromFiles(fileList, attachments, editing);
+        unsupported.forEach((name) => onUnsupportedFile?.(name));
+        if (next)
+            onAttachmentsChange(next);
     }
     // Only items that can work: no menu item that silently does nothing.
-    const menuItems = ATTACH_MENU_ITEMS.filter((item) => (attachMenuActions ?? ATTACH_MENU_ITEMS.map((i) => i.action)).includes(item.action) &&
-        (item.action === "add-media" ? Boolean(onAttachmentsChange) : Boolean(onAttachMenuSelect)));
+    const menuItems = composerAttachMenuItems(attachMenuActions, {
+        canAddMedia: Boolean(onAttachmentsChange),
+        canSelect: Boolean(onAttachMenuSelect),
+    });
     function handleRemoveAttachment(id) {
         onAttachmentsChange?.(attachments.filter((a) => a.id !== id));
     }
-    return (_jsxs("div", { className: "chai-composer", children: [attachments.length > 0 && (_jsx("div", { className: "chai-composer__thumbnails", children: attachments.map((a) => (_jsx(ComposerThumbnail, { attachment: a, onRemove: onAttachmentsChange ? () => handleRemoveAttachment(a.id) : undefined }, a.id))) })), editing && regions.length > 0 && (_jsx("ul", { className: "chai-composer__regions", "aria-label": "Edit regions", children: regions.map((r) => (_jsx("li", { children: _jsx(RegionChip, { region: r, onRemove: onRegionsChange ? () => onRegionsChange(regions.filter((x) => x.id !== r.id)) : undefined, disabled: disabled }) }, r.id))) })), _jsxs("div", { className: "chai-composer__field", children: [_jsx("textarea", { ref: textareaRef, className: `chai-composer__input chai-composer__type${animating ? " chai-composer__input--revealing" : ""}`, value: value, onChange: (e) => onChange(e.target.value), placeholder: effectivePlaceholder, "aria-label": promptLabel ?? effectivePlaceholder, rows: 1, disabled: disabled || animating }), animating && (_jsx("div", { className: "chai-composer__reveal chai-composer__type", "aria-hidden": "true", children: _jsx("span", { className: "chai-composer__reveal-text", children: animatingText.slice(0, revealedLength) }) })), onEnhance && (_jsx("button", { type: "button", className: `chai-composer__optimize${enhanceBusy ? " chai-composer__optimize--active" : ""}`, onClick: handleOptimizeClick, disabled: disabled || (isEnhanced ? false : !value.trim() || enhanceBusy), "aria-label": isEnhanced ? "Revert to original prompt" : "Optimize prompt", title: isEnhanced ? "Revert to original prompt" : "Optimize prompt", children: isEnhanced ? _jsx(UndoIcon, {}) : _jsx(OptimizeIcon, {}) }))] }), submitError && (_jsxs("p", { className: "chai-composer__error", role: "alert", children: [_jsx(ErrorIcon, {}), submitError] })), _jsxs("div", { className: "chai-composer__controls", children: [_jsxs("div", { className: "chai-composer__controls-start", children: [menuItems.length > 0 && (_jsx(ComposerAttachMenu, { items: menuItems, onSelect: onAttachMenuSelect, onAddMediaFiles: handleFilesSelected, imagesOnly: editing, disabled: disabled })), pickedUseCases.map((u) => (_jsx(UseCaseChip, { useCase: u, onRemove: multiSelectUseCases
+    return (_jsxs("div", { className: "chai-composer", children: [attachments.length > 0 && (_jsx("div", { className: "chai-composer__thumbnails", children: attachments.map((a) => (_jsx(ComposerThumbnail, { attachment: a, onRemove: onAttachmentsChange ? () => handleRemoveAttachment(a.id) : undefined }, a.id))) })), editing && regions.length > 0 && (_jsx("ul", { className: "chai-composer__regions", "aria-label": "Edit regions", children: regions.map((r) => (_jsx("li", { children: _jsx(RegionChip, { region: r, onRemove: onRegionsChange ? () => onRegionsChange(regions.filter((x) => x.id !== r.id)) : undefined, disabled: disabled }) }, r.id))) })), _jsxs("div", { className: "chai-composer__field", children: [_jsx("textarea", { ref: textareaRef, className: `chai-composer__input chai-composer__type${animating ? " chai-composer__input--revealing" : ""}`, value: value, onChange: (e) => onChange(e.target.value), placeholder: view.placeholder, "aria-label": promptLabel ?? view.placeholder, rows: 1, disabled: disabled || animating }), animating && (_jsx("div", { className: "chai-composer__reveal chai-composer__type", "aria-hidden": "true", children: _jsx("span", { className: "chai-composer__reveal-text", children: animatingText.slice(0, revealedLength) }) })), onEnhance && (_jsx("button", { type: "button", className: `chai-composer__optimize${enhanceBusy ? " chai-composer__optimize--active" : ""}`, onClick: handleOptimizeClick, disabled: disabled || (isEnhanced ? false : !value.trim() || enhanceBusy), "aria-label": isEnhanced ? "Revert to original prompt" : "Optimize prompt", title: isEnhanced ? "Revert to original prompt" : "Optimize prompt", children: isEnhanced ? _jsx(UndoIcon, {}) : _jsx(OptimizeIcon, {}) }))] }), submitError && (_jsxs("p", { className: "chai-composer__error", role: "alert", children: [_jsx(ErrorIcon, {}), submitError] })), _jsxs("div", { className: "chai-composer__controls", children: [_jsxs("div", { className: "chai-composer__controls-start", children: [menuItems.length > 0 && (_jsx(ComposerAttachMenu, { items: menuItems, onSelect: onAttachMenuSelect, onAddMediaFiles: handleFilesSelected, imagesOnly: editing, disabled: disabled })), view.pickedUseCases.map((u) => (_jsx(UseCaseChip, { useCase: u, onRemove: multiSelectUseCases
                                     ? onUseCasesChange && (() => onUseCasesChange(useCases.filter((x) => x.kind !== u.kind)))
-                                    : onClearUseCase, disabled: disabled }, u.kind))), modelSections.length > 0 && canPickModel && (_jsx(SearchMenu, { ...(multiSelectUseCases
+                                    : onClearUseCase, disabled: disabled }, u.kind))), modelSections.length > 0 && view.canPickModel && (_jsx(SearchMenu, { ...(multiSelectUseCases
                                     ? { sections: modelSections.map((s) => ({ label: s.label, options: s.options })) }
                                     : { options: modelSections[0].options }), value: multiModel ? pickedModelIds : modelId, multiple: multiModel, toggleHeader: showAutoSelectToggle
                                     ? {
@@ -276,33 +168,22 @@ export function Composer({ value, onChange, placeholder, promptLabel, attachment
                                         value: autoSelectModel,
                                         onChange: (v) => onAutoSelectModelChange?.(v),
                                     }
-                                    : undefined, triggerLabel: modelTriggerLabel, menuLabel: multiModel ? "Select models" : "Select model", onSelect: (opt) => toggleModel(opt.id), searchable: false, triggerVariant: "text", disabled: disabled || (autoSelectModel && !showAutoSelectToggle), panelWidth: showAutoSelectToggle ? 320 : undefined })), showAspectRatio && aspectOptions.length > 0 && onAspectRatioChange && (_jsx(SearchMenu, { options: aspectOptions.map((o) => ({ id: o.value, label: o.label })), value: offeredAspect, triggerLabel: selectedAspect?.label ?? "Aspect ratio", menuLabel: "Aspect ratio", onSelect: (opt) => onAspectRatioChange?.(opt.id), searchable: false, triggerVariant: "text", disabled: disabled }))] }), _jsx(MdFabElement, { className: "chai-composer__submit", size: "small", variant: "secondary", label: "", "data-ready": showStop || !isSubmitDisabled || undefined, "data-error": Boolean(submitError) || undefined, "data-stop": showStop || undefined, ...{
+                                    : undefined, triggerLabel: view.modelTriggerLabel, menuLabel: multiModel ? "Select models" : "Select model", onSelect: (opt) => toggleModel(opt.id), searchable: false, triggerVariant: "text", disabled: disabled || (autoSelectModel && !showAutoSelectToggle), panelWidth: showAutoSelectToggle ? 320 : undefined })), view.showAspectRatio && aspectOptions.length > 0 && onAspectRatioChange && (_jsx(SearchMenu, { options: aspectOptions.map((o) => ({ id: o.value, label: o.label })), value: offeredAspect, triggerLabel: view.selectedAspect?.label ?? "Aspect ratio", menuLabel: "Aspect ratio", onSelect: (opt) => onAspectRatioChange?.(opt.id), searchable: false, triggerVariant: "text", disabled: disabled }))] }), _jsx(MdFabElement, { className: "chai-composer__submit", size: "small", variant: "secondary", label: "", "data-ready": showStop || !isSubmitDisabled || undefined, "data-error": Boolean(submitError) || undefined, "data-stop": showStop || undefined, ...{
                             ariaLabel: showStop ? "Stop" : submitError ? "Retry" : "Submit",
                             ariaDisabled: showStop ? "false" : submitting ? "true" : isSubmitDisabled ? "true" : "false",
                         }, onClick: () => {
                             if (showStop)
                                 onAbort?.();
-                            else if (!isSubmitDisabled && !submitting) {
-                                const selections = buildSelections();
-                                onSubmit({
-                                    value,
-                                    attachments,
-                                    useCase: activeUseCases[0],
-                                    modelId: pickedModelIds[0] ?? null,
-                                    aspectRatio: offeredAspect,
-                                    selections,
-                                    autoSelectModel,
-                                    regions: editing ? regions : [],
-                                });
-                            }
+                            else if (!isSubmitDisabled && !submitting)
+                                onSubmit(view.payload());
                         }, children: _jsx("span", { slot: "icon", children: showStop ? _jsx(StopIcon, {}) : submitError ? _jsx(RefreshIcon, {}) : _jsx(ArrowForwardIcon, {}) }) })] })] }));
 }
-const ATTACH_MENU_ITEMS = [
-    { action: "add-media", label: "Add media", icon: _jsx(AttachFileIcon, {}), divider: true },
-    { action: "create-image", label: "Create image", icon: _jsx(ImageIcon, {}) },
-    { action: "create-video", label: "Create video", icon: _jsx(VideocamIcon, {}) },
-    { action: "edit-media", label: "Edit image", icon: _jsx(ContentCutIcon, {}) },
-];
+const ATTACH_MENU_ICONS = {
+    "add-media": _jsx(AttachFileIcon, {}),
+    "create-image": _jsx(ImageIcon, {}),
+    "create-video": _jsx(VideocamIcon, {}),
+    "edit-media": _jsx(ContentCutIcon, {}),
+};
 /**
  * The "+" / "×" attach control (reference: Composer_01 "Menu open" state,
  * Figma "Menu - Icon button Example") — hand-rolled positioned
@@ -338,7 +219,7 @@ function ComposerAttachMenu({ items, onSelect, onAddMediaFiles, imagesOnly, disa
             inputRef.current?.click();
         onSelect?.(action);
     }
-    return (_jsxs("div", { className: "chai-composer__attach", ref: rootRef, children: [_jsx("button", { type: "button", className: `chai-composer__attach-toggle${open ? " chai-composer__attach-toggle--open" : ""}`, onClick: () => setOpen((v) => !v), disabled: disabled, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": open ? "Close attach menu" : "Add media", children: open ? _jsx(CloseIcon, {}) : _jsx(PlusIcon, {}) }), open && (_jsx("ul", { className: "chai-composer__attach-menu", role: "menu", children: items.map((item, i) => (_jsxs("li", { role: "none", children: [_jsxs("button", { type: "button", role: "menuitem", className: "chai-composer__attach-menu-item", onClick: () => handleItemClick(item.action), children: [_jsx("span", { className: "chai-composer__attach-menu-icon", children: item.icon }), item.label] }), item.divider && i < items.length - 1 && _jsx("hr", { className: "chai-composer__attach-menu-divider", role: "separator" })] }, item.action))) })), _jsx("input", { ref: inputRef, type: "file", accept: imagesOnly ? "image/*" : "image/*,video/*,audio/*", multiple: !imagesOnly, hidden: true, disabled: disabled, onChange: (e) => {
+    return (_jsxs("div", { className: "chai-composer__attach", ref: rootRef, children: [_jsx("button", { type: "button", className: `chai-composer__attach-toggle${open ? " chai-composer__attach-toggle--open" : ""}`, onClick: () => setOpen((v) => !v), disabled: disabled, "aria-expanded": open, "aria-haspopup": "menu", "aria-label": open ? "Close attach menu" : "Add media", children: open ? _jsx(CloseIcon, {}) : _jsx(PlusIcon, {}) }), open && (_jsx("ul", { className: "chai-composer__attach-menu", role: "menu", children: items.map((item, i) => (_jsxs("li", { role: "none", children: [_jsxs("button", { type: "button", role: "menuitem", className: "chai-composer__attach-menu-item", onClick: () => handleItemClick(item.action), children: [_jsx("span", { className: "chai-composer__attach-menu-icon", children: ATTACH_MENU_ICONS[item.action] }), item.label] }), item.divider && i < items.length - 1 && _jsx("hr", { className: "chai-composer__attach-menu-divider", role: "separator" })] }, item.action))) })), _jsx("input", { ref: inputRef, type: "file", accept: imagesOnly ? "image/*" : "image/*,video/*,audio/*", multiple: !imagesOnly, hidden: true, disabled: disabled, onChange: (e) => {
                     onAddMediaFiles(e.target.files);
                     e.target.value = "";
                 } })] }));