@chai-ui/react 0.5.0 → 0.6.1

package/DESIGN.md

@@ -50,7 +50,12 @@ use these names: `Results`, `Compare`, `ModelPicker`,
    Claude Opus 5 for text and images, Gemini 3.8 Flash for video and
    audio, on OpenRouter. They're suggestions; respect a builder's own
    `reasoningModel`, `reasoningModelByKind` and `reasoningEngine`.
-7. **Only show what's real.** Show cost only when the engine reports it.
+7. **Suggest models, never require them.** With no `models`, Composer and
+   MediaAnalyzer use the suggested lists (`suggestedModels`,
+   `SUGGESTED_ANALYSIS_MODELS`), each model carrying its verified aspect
+   ratios and Fal input format. A builder's own list always wins. Don't
+   make a builder write a model list to get a working Model menu.
+8. **Only show what's real.** Show cost only when the engine reports it.
    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.
 

package/README.md

@@ -80,7 +80,9 @@ capability beyond the default file picker. Every other control is additive:
   onAttachMenuSelect={(action) => {
     if (action === "create-image") setUseCase({ kind: "image", label: "Image" });
   }}
-  models={models}
+  // The Model menu lists Chai's suggested models for the use case, with the
+  // first picked, unless you pass your own `models` (see "Suggested models").
+  // It shows only with `onModelChange`; without it the first model still runs.
   modelId={modelId}
   onModelChange={setModelId}
   // An "Auto-select model" switch appears at the top of the model menu so
@@ -89,9 +91,10 @@ capability beyond the default file picker. Every other control is additive:
   autoSelectModel={autoSelectModel}
   showAutoSelectToggle
   onAutoSelectModelChange={setAutoSelectModel}
-  // The Aspect ratio menu offers what the selected models take: give each
-  // model its `aspectRatios`, e.g. ["1:1", "16:9", "9:16"]. A model without
-  // them (image-to-video follows the input image) shows no menu.
+  // The Aspect ratio menu offers what the selected models take. Suggested
+  // models carry their `aspectRatios`; give your own models theirs, e.g.
+  // ["1:1", "16:9", "9:16"]. A model without them (image-to-video follows
+  // the input image) shows no menu.
   aspectRatio={aspectRatio}
   onAspectRatioChange={setAspectRatio}
   // Omit onEnhance entirely to hide the "optimize prompt" button — e.g.
@@ -113,9 +116,30 @@ for a live example with every opt-in feature.
 ### No use case picked: a text request
 
 A prompt typed with no use case picked is a text request
-(`TEXT_USE_CASE`): it gets a text reply rather than doing nothing. For an
-app that's mostly about images, set the default instead; it's never shown
-as a chip:
+(`TEXT_USE_CASE`): it gets a text reply rather than doing nothing. That's
+how to use the Composer as a plain chat bar for an LLM:
+
+- **The model:** `useComposer` sends it to `textEngine` with `textModel`
+  when you set them, otherwise to `ChaiProvider`'s reasoning model
+  (default Claude Opus 5 on OpenRouter). Without a `ChaiProvider` or a
+  `textEngine`, a mock text engine answers, so wrap your app in
+  `<ChaiProvider>` for real replies.
+- **No Model menu:** the suggested lists cover image and video only, so a
+  text request shows no Model menu. To offer a choice of text models, pass
+  your own `models`.
+- **The reply streams** into the `ResultCard` as it's written, and
+  `cancel()` stops it, keeping what has arrived.
+
+```tsx
+<ChaiProvider>
+  <Composer value={value} onChange={setValue} onSubmit={submit} submitting={busy} onAbort={cancel} />
+  {run && <ResultCard results={run.results} prompt={run.request.prompt} onAction={() => {}} />}
+</ChaiProvider>
+```
+
+For an app that's mostly about images, set the default instead; it's
+never shown as a chip, and it brings the suggested image models and the
+Aspect ratio menu:
 
 ```tsx
 <Composer defaultUseCase={{ kind: "image", label: "Image" }} … />
@@ -160,8 +184,8 @@ unlisted reply), the request runs on the first listed model and
 ## What else this package ships
 
 - **`MediaAnalyzer`** — drop in an image, video, or audio clip and get a
-  generation-ready prompt back, with kind-aware model menus and a prompt
-  length picker. Wire it with `useMediaAnalyzer()`, which sends the media
+  generation-ready prompt back, with kind-aware model menus (suggested
+  OpenRouter models unless you pass your own) and a prompt length picker. Wire it with `useMediaAnalyzer()`, which sends the media
   to `ChaiProvider`'s reasoning model and returns the prompt:
   `onSubmit={submit} submitting={analyzing} submitError={error}`.
 - **`ResultCard`** — renders one prompt's generated results (image, video,
@@ -178,6 +202,44 @@ unlisted reply), the request runs on the first listed model and
   The components are built from these; they're also exported directly if
   you're assembling your own layout.
 
+## Suggested models
+
+You don't have to write model lists. Chai ships suggested lists, checked
+against each provider's own catalog, and the components use them when you
+pass none:
+
+| Use case | Export | Provider |
+|---|---|---|
+| Create image | `SUGGESTED_IMAGE_MODELS` | Fal |
+| Create video from a prompt | `SUGGESTED_TEXT_TO_VIDEO_MODELS` | Fal |
+| Create video from an image | `SUGGESTED_IMAGE_TO_VIDEO_MODELS` | Fal |
+| Edit image | `SUGGESTED_EDIT_MODELS` | Fal |
+| Media analysis, per media kind | `SUGGESTED_ANALYSIS_MODELS` | OpenRouter |
+
+- **Composer** offers the list for the current use case
+  (`suggestedModels(useCase)`), with its first model picked until the person
+  picks another. **MediaAnalyzer** offers the analysis lists.
+- **Your own list wins.** Pass `models` (or `modelsByKind`) to replace a
+  list, or `[]` for no Model menu. Nothing is required.
+- **Each suggested model knows its inputs**: its aspect ratios, and for Fal
+  the field its image goes in (`falInput`), so the Fal engine sends exactly
+  what that model expects.
+- **They change only through package releases.** Providers change faster,
+  so check them while setting up your engine. It needs no key, runs no
+  model and costs nothing:
+
+```ts
+import { checkSuggestedModels } from "@chai-ui/react";
+
+const { ok, problems } = await checkSuggestedModels();
+// problems: [{ provider: "fal", modelId, problem: "No longer takes these aspect_ratio values: 21:9." }]
+```
+
+  It confirms each model still exists and is active, still takes the
+  aspect ratios and image field Chai sends (Fal), and still accepts its media
+  kind (OpenRouter). If something changed, pick another model or update the
+  package once a release catches up.
+
 ## `useComposer` — wiring `Composer` to a real engine
 
 ```tsx
@@ -291,11 +353,12 @@ to `EDIT_IMAGE_USE_CASE`, pass the attached image to `useComposer` as
 `editImage`, and drop in the card:
 
 ```tsx
-import { Composer, EditCard, EDIT_IMAGE_USE_CASE, PRECISE_EDIT_MODELS, useComposer } from "@chai-ui/react";
+import { Composer, EditCard, EDIT_IMAGE_USE_CASE, SUGGESTED_EDIT_MODELS, useComposer } from "@chai-ui/react";
 
 const editImage = useCase?.edit ? (attachments.find((a) => a.kind === "image") ?? null) : null;
 const { run, submit, edit } = useComposer({ engine: createFalEngine({ outputKind: "image" }), editImage });
-const model = PRECISE_EDIT_MODELS.find((m) => m.id === modelId);
+// Unpicked, the first suggested edit model (Flux 3 Image) runs.
+const model = SUGGESTED_EDIT_MODELS.find((m) => m.id === modelId) ?? SUGGESTED_EDIT_MODELS[0];
 
 {edit && <EditCard {...edit} maxRegions={model?.maxRegions} />}
 {!edit && run && <ResultCard results={run.results} prompt={run.request.prompt} onAction={…} />}
@@ -305,7 +368,6 @@ const model = PRECISE_EDIT_MODELS.find((m) => m.id === modelId);
   onAttachMenuSelect={(action) => {
     if (action === "edit-media") setUseCase(EDIT_IMAGE_USE_CASE);
   }}
-  models={useCase?.edit ? PRECISE_EDIT_MODELS : models}
   regions={edit?.regions}
   onRegionsChange={edit?.onRegionsChange}
   onSubmit={submit}
@@ -319,11 +381,11 @@ const model = PRECISE_EDIT_MODELS.find((m) => m.id === modelId);
 - **Submitting.** An edit needs the image plus a whole-image prompt, a
   region, or both. Regions carry their own instructions, so the prompt can
   stay empty.
-- **Models.** `PRECISE_EDIT_MODELS` is a suggested list: Flux 3 Image on
-  Fal, which reads each region as a box. Offer any edit model you like; one
-  without a `regionFormat` gets its regions described in words, which is
-  less precise. Change how the prompt is built with `useComposer`'s
-  `editPrompt`.
+- **Models.** In edit mode Composer offers `SUGGESTED_EDIT_MODELS`: Flux 3
+  Image first, which reads each region as a box, then Nano Banana Pro and
+  GPT Image 2. Offer any edit model you like; one without a `regionFormat`
+  gets its regions described in words, which is less precise. Change how
+  the prompt is built with `useComposer`'s `editPrompt`.
 - **Versions.** Each edit's result is a new version, shown in the card with
   dots to page back. The next edit applies to the version showing.
 - **Images only** for now.

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;
-}
+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 ComposerAttachment, type ComposerSelection, type ComposerSubmitPayload, type ComposerUseCase, } from "@chai-ui/core";
 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[];
-}
 export interface ComposerProps {
     /** The prompt text. Controlled — Composer owns no text state of its own. */
     value: string;
@@ -83,7 +28,7 @@ export interface ComposerProps {
     multiSelectUseCases?: boolean;
     useCases?: ComposerUseCase[];
     onUseCasesChange?: (next: ComposerUseCase[]) => void;
-    /** Models per use-case kind, for `multiSelectUseCases`. */
+    /** Models per use-case kind, for `multiSelectUseCases`. A kind left out gets Chai's suggested models (see `models`). */
     modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
     /**
      * Builder opt-in, off by default: the end user can pick several models,
@@ -94,7 +39,12 @@ export interface ComposerProps {
     multiSelectModels?: boolean;
     modelIds?: string[];
     onModelIdsChange?: (ids: string[]) => void;
-    /** Models valid for the current use case. The Model menu only renders when this is non-empty. */
+    /**
+     * Models for the current use case. Leave it out and Composer offers Chai's
+     * suggested Fal models for the use case (`suggestedModels`), with the
+     * first one picked until the person picks another. Pass a list to use
+     * your own; pass `[]` for no Model menu.
+     */
     models?: ModelOption[];
     modelId?: string | null;
     /** `null` clears the pick: Composer does this when auto-select turns on, until routing picks a model. */

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":"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"}

package/dist/Composer.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StopIcon } from "./icons.js";
 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, 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,
@@ -37,10 +40,6 @@ function nextAttachmentId() {
         ? 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
@@ -77,18 +76,30 @@ export function Composer({ value, onChange, placeholder, promptLabel, attachment
     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
-            .map((u) => ({ label: u.label, kind: u.kind, options: modelsByKind?.[u.kind] ?? [] }))
-            .filter((s) => s.options.length > 0)
-        : [{ label: "", kind: activeUseCases[0].kind, options: models ?? [] }].filter((s) => s.options.length > 0);
+    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.
-    const pickedModelIds = allModels.length > 0 ? rawPickedIds.filter((id) => allModels.some((m) => m.id === id)) : rawPickedIds;
+    // 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");
@@ -113,9 +124,9 @@ export function Composer({ value, onChange, placeholder, promptLabel, attachment
     function buildSelections() {
         return activeUseCases.map((u) => ({
             useCase: u,
-            models: multiSelectUseCases ? (modelsByKind?.[u.kind] ?? []) : (models ?? []),
+            models: rosterFor(u).options,
             modelIds: multiSelectUseCases
-                ? pickedModelIds.filter((id) => modelsByKind?.[u.kind]?.some((m) => m.id === id))
+                ? pickedModelIds.filter((id) => rosterFor(u).options.some((m) => m.id === id))
                 : pickedModelIds,
         }));
     }
@@ -254,7 +265,7 @@ export function Composer({ value, onChange, placeholder, promptLabel, attachment
     }
     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
                                     ? onUseCasesChange && (() => onUseCasesChange(useCases.filter((x) => x.kind !== u.kind)))
-                                    : onClearUseCase, disabled: disabled }, u.kind))), modelSections.length > 0 && (_jsx(SearchMenu, { ...(multiSelectUseCases
+                                    : onClearUseCase, disabled: disabled }, u.kind))), modelSections.length > 0 && 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
                                     ? {
@@ -262,7 +273,7 @@ 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 && (_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: 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, ...{
                             ariaLabel: showStop ? "Stop" : submitError ? "Retry" : "Submit",
                             ariaDisabled: showStop ? "false" : submitting ? "true" : isSubmitDisabled ? "true" : "false",
                         }, onClick: () => {
@@ -418,15 +429,6 @@ function OptimizeIcon() {
 function UndoIcon() {
     return (_jsx("svg", { viewBox: "0 -960 960 960", "aria-hidden": "true", children: _jsx("path", { d: "M259-200v-60h310q70 0 120.5-46.5T740-422q0-69-50.5-115.5T569-584H274l114 114-42 42-186-186 186-186 42 42-114 114h294q95 0 163.5 64T800-422q0 94-68.5 158T568-200H259Z", fill: "currentColor" }) }));
 }
-// Real Material Symbols "stop" glyph, the filled variant specifically
-// (`stop-fill`, not the base `stop` — that one traces a hollow square-
-// outline shape even filled with `currentColor`, which read as a thin
-// frame rather than a real stop icon at 24px; design review caught
-// this live). Viewbox `0 -960 960 960` — the submit FAB's in-flight state,
-// its own doc comment above where it's rendered.
-function StopIcon() {
-    return (_jsx("svg", { viewBox: "0 -960 960 960", "aria-hidden": "true", children: _jsx("path", { d: "M240-240v-480h480v480H240Z", fill: "currentColor" }) }));
-}
 function AttachFileIcon() {
     return (_jsx("svg", { viewBox: "0 -960 960 960", "aria-hidden": "true", children: _jsx("path", { d: "M728-326q0 103-72.18 174.5-72.17 71.5-175 71.5Q378-80 305.5-151.5T233-326v-380q0-72.5 51.5-123.25T408-880q72 0 123.5 50.75T583-706v360q0 42-30 72t-72.5 30q-42.5 0-72.5-29.67-30-29.68-30-72.33v-370h60v370q0 17 12.5 29.5t30.64 12.5q18.14 0 30-12.5T523-346v-360q0-48-33.5-81t-81.71-33q-48.21 0-81.5 33.06T293-706v380q0 78 54.97 132T481-140q77.92 0 132.46-54Q668-248 668-326v-390h60v390Z", fill: "currentColor" }) }));
 }