@chai-ui/react 0.5.0 → 0.6.1

package/src/ChaiProvider.tsx

@@ -1,88 +1,30 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import { createOpenRouterEngine, type DroppedMedia, type GenerationEngine, type MediaKind } from "@chai-ui/core";
+import { createReasoning, reasoningEngineFor, type Reasoning, type ReasoningConfig } 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: Partial<Record<MediaKind, string>> = {
-  video: "google/gemini-3.8-flash",
-  audio: "google/gemini-3.8-flash",
-};
-
-/** 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 {
+  DEFAULT_REASONING_MODEL,
+  DEFAULT_REASONING_MODEL_BY_KIND,
+  reasoningModelFor,
+  type Reasoning,
+} from "@chai-ui/core";
 
 const ReasoningContext = createContext<Reasoning | undefined>(undefined);
 
-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;
+export interface ChaiProviderProps extends ReasoningConfig {
   children?: ReactNode;
 }
 
 export function ChaiProvider({ reasoningModel, reasoningModelByKind, reasoningEngine, children }: ChaiProviderProps) {
-  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 engine = useMemo(() => reasoningEngineFor({ reasoningEngine }), [reasoningEngine]);
+  const { video, audio, image, text } = reasoningModelByKind ?? {};
   const value = useMemo(
-    () => ({
-      engine,
-      model,
-      modelByKind: { ...DEFAULT_REASONING_MODEL_BY_KIND, ...dropUndefined({ video, audio, image, text }) },
-    }),
-    [engine, model, video, audio, image, text]
+    () => createReasoning({ reasoningModel, reasoningModelByKind: { video, audio, image, text } }, engine),
+    [engine, reasoningModel, video, audio, image, text]
   );
   return <ReasoningContext.Provider value={value}>{children}</ReasoningContext.Provider>;
 }
 
-function dropUndefined<T extends object>(obj: T): Partial<T> {
-  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== undefined)) as Partial<T>;
-}
-
 /** The nearest `ChaiProvider`'s reasoning engine and models, or `undefined` outside one. */
 export function useReasoning(): Reasoning | undefined {
   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: Reasoning, attachments: DroppedMedia[] = []): string {
-  for (const { kind } of attachments) {
-    const model = reasoning.modelByKind[kind];
-    if (model) return model;
-  }
-  return reasoning.model;
-}

package/src/Composer.tsx

@@ -1,10 +1,22 @@
+import { StopIcon } from "./icons.js";
 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 { deriveGenerationUseCase, suggestedModels, TEXT_USE_CASE } 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";
+import type { ComposerAttachment, ComposerSelection, 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";
 
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
@@ -44,71 +56,8 @@ function nextAttachmentId(): string {
     : `attachment-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
 
-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 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;
-  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;
@@ -134,7 +83,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,
@@ -145,7 +94,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. */
@@ -311,19 +265,31 @@ export function Composer({
   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: ComposerUseCase): { options: ModelOption[]; suggested: boolean } => {
+    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 =
+  // 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`
@@ -354,9 +320,9 @@ export function Composer({
   function buildSelections(): ComposerSelection[] {
     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,
     }));
   }
@@ -610,7 +576,7 @@ export function Composer({
               trigger stays enabled whenever the switch is shown — it's the
               only way back to the switch. Rows are disabled by `SearchMenu`
               itself while auto-select is on. */}
-          {modelSections.length > 0 && (
+          {modelSections.length > 0 && canPickModel && (
             <SearchMenu
               {...(multiSelectUseCases
                 ? { sections: modelSections.map((s) => ({ label: s.label, options: s.options })) }
@@ -636,7 +602,7 @@ export function Composer({
             />
           )}
 
-          {showAspectRatio && aspectOptions.length > 0 && (
+          {showAspectRatio && aspectOptions.length > 0 && onAspectRatioChange && (
             <SearchMenu
               options={aspectOptions.map((o) => ({ id: o.value, label: o.label }))}
               value={offeredAspect}
@@ -1046,20 +1012,6 @@ function UndoIcon() {
   );
 }
 
-// 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 (
-    <svg viewBox="0 -960 960 960" aria-hidden="true">
-      <path d="M240-240v-480h480v480H240Z" fill="currentColor" />
-    </svg>
-  );
-}
-
 function AttachFileIcon() {
   return (
     <svg viewBox="0 -960 960 960" aria-hidden="true">

package/src/EditCard.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react";
-import { DEFAULT_MAX_REGIONS, type EditRegion, type RegionBox, type ResultStatus } from "@chai-ui/core";
+import { DEFAULT_MAX_REGIONS, type EditRegion, type EditVersion, type RegionBox } from "@chai-ui/core";
+
+export type { EditVersion } from "@chai-ui/core";
 import { Pagination } from "./primitives/Pagination.js";
 import {
   AddIcon,
@@ -18,22 +20,6 @@ import { downloadFilename, downloadMedia, shareMedia } from "./media-actions.js"
 import { PageSlide, usePageSlide } from "./page-slide.js";
 import { regionColor } from "./regions.js";
 
-/**
- * One version of the image being edited: the original, or the result of an
- * edit. `useComposer`'s `edit.versions` builds these from its runs.
- */
-export interface EditVersion {
-  id: string;
-  /** The image, once there is one. */
-  src?: string;
-  /** The image this version was edited from, shown under the progress spinner until `src` arrives. */
-  from?: string;
-  status: ResultStatus;
-  /** The regions this version was made with (none for the original). Shown faintly, for reference. */
-  regions: EditRegion[];
-  error?: string;
-}
-
 export interface EditCardProps {
   /** The original image first, then each edit. Paged with the dots in the card's bottom row. */
   versions: EditVersion[];
@@ -168,6 +154,7 @@ export function EditCard({
   // until the next version's image loads, so the card doesn't jump between.
   const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
   const [expanded, setExpanded] = useState(false);
+  const [linkCopied, setLinkCopied] = useState(false);
   const drag = useRef<Drag | null>(null);
   const viewportRef = useRef<HTMLDivElement>(null);
   const fieldRef = useRef<HTMLTextAreaElement>(null);
@@ -371,7 +358,11 @@ export function EditCard({
 
   const handleShare = async () => {
     if (!version?.src) return;
-    await shareMedia(version.src);
+    // With no share sheet the link is copied; say so, or the click looks like nothing happened.
+    if ((await shareMedia(version.src)) === "copied") {
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 1500);
+    }
     onAction?.("share", version);
   };
 
@@ -509,8 +500,15 @@ export function EditCard({
             <button type="button" className="chai-card-top-btn" aria-label="Download" title="Download" disabled={disabled || !ready} onClick={handleDownload}>
               <DownloadIcon />
             </button>
-            <button type="button" className="chai-card-top-btn" aria-label="Share" title="Share" disabled={disabled || !ready} onClick={handleShare}>
-              <ShareIcon />
+            <button
+              type="button"
+              className="chai-card-top-btn"
+              aria-label={linkCopied ? "Link copied" : "Share"}
+              title={linkCopied ? "Link copied" : "Share"}
+              disabled={disabled || !ready}
+              onClick={handleShare}
+            >
+              {linkCopied ? <CheckSymbolIcon /> : <ShareIcon />}
             </button>
             <button type="button" className="chai-card-top-btn" aria-label="Expand" title="Expand" disabled={!ready} onClick={() => setExpanded(true)}>
               <ExpandIcon />

package/src/MediaAnalyzer.tsx

@@ -2,9 +2,14 @@ import { createComponent } from "@lit/react";
 import * as React from "react";
 import { useEffect, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import { MdFab } from "@material/web/fab/fab.js";
+import { SUGGESTED_ANALYSIS_MODELS } from "@chai-ui/core";
 import type { DroppedMedia, ModelOption, MediaKind } from "@chai-ui/core";
 import type { MediaAnalysisPromptLength } from "@chai-ui/core";
 import { SearchMenu, type SearchMenuSection } from "./primitives/SearchMenu.js";
+import { StopIcon } from "./icons.js";
+import type { MediaAnalyzerAttachment, MediaAnalyzerSubmitPayload } from "@chai-ui/core";
+
+export type { MediaAnalyzerAttachment, MediaAnalyzerSubmitPayload } from "@chai-ui/core";
 
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
@@ -27,10 +32,6 @@ function nextAttachmentId(): string {
     : `attachment-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
 
-export interface MediaAnalyzerAttachment extends DroppedMedia {
-  id: string;
-}
-
 /**
  * How many attachments of each kind an analysis can hold at once. Image
  * defaults to 5 (a sequence/series reads as one analysis); video and audio
@@ -97,26 +98,20 @@ export function isMediaAnalyzerAtCap(
   return current.length >= (maxByKind.image ?? DEFAULT_MAX_ATTACHMENTS_BY_KIND.image);
 }
 
-export interface MediaAnalyzerSubmitPayload {
-  attachments: MediaAnalyzerAttachment[];
-  modelId: string | null;
-  /** When true, `useMediaAnalyzer` routes among `models` at submit instead of using `modelId`. */
-  autoSelectModel: boolean;
-  /** The models offered for the attached media's kind. */
-  models: ModelOption[];
-  /** `null` until a person actually picks one — see the `promptLength` prop's own doc comment for why this doesn't default to "concise". */
-  promptLength: MediaAnalysisPromptLength | null;
-}
-
 export interface MediaAnalyzerProps {
   attachments: MediaAnalyzerAttachment[];
   onAttachmentsChange: (next: MediaAnalyzerAttachment[]) => void;
   onUnsupportedFile?: (fileName: string) => void;
   maxAttachmentsByKind?: Record<MediaKind, number>;
-  /** Flat fallback roster, shown (ungrouped) before any media's kind is known. */
-  models: ModelOption[];
-  /** Per-kind rosters — once a kind is known, only that kind's models show. Before that, all three show as separate sections (reference: Figma "06 Composer from Media Analysis"). */
-  modelsByKind: Partial<Record<MediaKind, ModelOption[]>>;
+  /** Fallback roster for a kind `modelsByKind` doesn't list. Optional. */
+  models?: ModelOption[];
+  /**
+   * Per-kind rosters — once a kind is known, only that kind's models show.
+   * Before that, all three show as separate sections (reference: Figma "06
+   * Composer from Media Analysis"). Defaults to Chai's suggested OpenRouter
+   * models (`SUGGESTED_ANALYSIS_MODELS`); pass your own to replace them.
+   */
+  modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
   /**
    * The picked model. While `autoSelectModel` is on it's `null` until a
    * submit routes, then the routed model, shown by name on the trigger.
@@ -154,6 +149,8 @@ export interface MediaAnalyzerProps {
   submitting?: boolean;
   submitError?: string | null;
   onSubmit: (payload: MediaAnalyzerSubmitPayload) => void;
+  /** Fires when the stop button is pressed while `submitting`. With it, submit turns into stop during an analysis (wire it to `useMediaAnalyzer`'s `cancel`); without it, submit is just disabled. */
+  onAbort?: () => void;
 }
 
 const KIND_LABEL: Record<MediaKind, string> = {
@@ -175,8 +172,8 @@ export function MediaAnalyzer({
   onAttachmentsChange,
   onUnsupportedFile,
   maxAttachmentsByKind = DEFAULT_MAX_ATTACHMENTS_BY_KIND,
-  models,
-  modelsByKind,
+  models = [],
+  modelsByKind = SUGGESTED_ANALYSIS_MODELS,
   modelId,
   onModelChange,
   autoSelectModel,
@@ -188,6 +185,7 @@ export function MediaAnalyzer({
   submitting,
   submitError,
   onSubmit,
+  onAbort,
 }: MediaAnalyzerProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const kind = attachments[0]?.kind;
@@ -199,6 +197,9 @@ export function MediaAnalyzer({
   // children. Active for as long as this is > 0; both drag handlers below
   // clamp at 0 so a stray extra `dragleave` can't go negative.
   const [dragDepth, setDragDepth] = useState(0);
+  // What the last attach replaced (one kind per analysis), shown until the
+  // attachments change some other way.
+  const [replaced, setReplaced] = useState<{ note: string; for: MediaAnalyzerAttachment[] } | null>(null);
   const isDragActive = dragDepth > 0;
 
   /**
@@ -221,9 +222,14 @@ export function MediaAnalyzer({
     const settle = () => {
       pending -= 1;
       if (pending === 0 && resolved.length > 0) {
-        onAttachmentsChange(
-          resolved.reduce((acc, media) => nextMediaAnalyzerAttachments(acc, media, maxAttachmentsByKind), attachments)
+        const next = resolved.reduce(
+          (acc, media) => nextMediaAnalyzerAttachments(acc, media, maxAttachmentsByKind),
+          attachments
         );
+        const removed = attachments.filter((a) => !next.some((n) => n.id === a.id));
+        const added = next.filter((n) => !attachments.some((a) => a.id === n.id));
+        setReplaced(removed.length > 0 && added.length > 0 ? { note: replacedNote(removed, added), for: next } : null);
+        onAttachmentsChange(next);
       }
     };
     files.forEach((file) => {
@@ -278,6 +284,7 @@ export function MediaAnalyzer({
   const selectedLength = promptLengthOptions.find((o) => o.value === promptLength);
   const hasContent = attachments.length > 0;
   const isSubmitDisabled = disabled || !hasContent;
+  const showStop = Boolean(submitting && onAbort);
 
   return (
     <div className="chai-media-analyzer">
@@ -338,6 +345,12 @@ export function MediaAnalyzer({
         </div>
       )}
 
+      {replaced && replaced.for === attachments && (
+        <p className="chai-media-analyzer__note" role="status">
+          {replaced.note}
+        </p>
+      )}
+
       {submitError && (
         <p className="chai-media-analyzer__error" role="alert">
           {submitError}
@@ -390,14 +403,16 @@ export function MediaAnalyzer({
           size="small"
           variant="secondary"
           label=""
-          data-ready={!isSubmitDisabled || undefined}
+          data-ready={showStop || !isSubmitDisabled || undefined}
           data-error={Boolean(submitError) || undefined}
+          data-stop={showStop || undefined}
           {...({
-            ariaLabel: submitError ? "Retry" : "Analyze media",
-            ariaDisabled: submitting ? "true" : isSubmitDisabled ? "true" : "false",
+            ariaLabel: showStop ? "Stop" : submitError ? "Retry" : "Analyze media",
+            ariaDisabled: showStop ? "false" : submitting ? "true" : isSubmitDisabled ? "true" : "false",
           } as Record<string, unknown>)}
           onClick={() => {
-            if (!isSubmitDisabled && !submitting) onSubmit({
+            if (showStop) onAbort?.();
+            else if (!isSubmitDisabled && !submitting) onSubmit({
               attachments,
               modelId,
               autoSelectModel,
@@ -406,9 +421,7 @@ export function MediaAnalyzer({
             });
           }}
         >
-          <span slot="icon">
-            <ArrowForwardIcon />
-          </span>
+          <span slot="icon">{showStop ? <StopIcon /> : <ArrowForwardIcon />}</span>
         </MdFabElement>
       </div>
     </div>
@@ -447,6 +460,14 @@ function MediaAnalyzerThumbnail({
 // Same "trace and inline as a currentColor component" convention Composer.tsx
 // documents — icons aren't shared across files yet in this codebase.
 
+/** "Replaced 2 images with clip.wav." */
+function replacedNote(removed: MediaAnalyzerAttachment[], added: MediaAnalyzerAttachment[]): string {
+  const name = (a: MediaAnalyzerAttachment) => a.name ?? KIND_LABEL[a.kind].toLowerCase();
+  const describe = (list: MediaAnalyzerAttachment[]) =>
+    list.length === 1 ? name(list[0]!) : `${list.length} ${KIND_LABEL[list[0]!.kind].toLowerCase()}s`;
+  return `Replaced ${describe(removed)} with ${describe(added)}.`;
+}
+
 function ArrowForwardIcon() {
   return (
     <svg viewBox="0 -960 960 960" aria-hidden="true">

package/src/ResultCard.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { ROUTING_MODEL_ID, type ModelOption, type Result } from "@chai-ui/core";
 import { Pagination } from "./primitives/Pagination.js";
-import { DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
+import { CheckSymbolIcon, DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
 import { downloadFilename, downloadMedia, shareMedia } from "./media-actions.js";
 import { PageSlide, usePageSlide } from "./page-slide.js";
 
@@ -125,6 +125,7 @@ export function ResultCard({
   const [flipped, setFlipped] = useState(false);
   const [moreOpen, setMoreOpen] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [linkCopied, setLinkCopied] = useState(false);
   const [mediaExpanded, setMediaExpanded] = useState(false);
   // Not part of `Result` (no engine reports generated-media dimensions
   // today) — measured client-side off the loaded `<img>`/`<video>` itself
@@ -238,7 +239,11 @@ export function ResultCard({
   };
 
   const handleShare = async () => {
-    if (result.output) await shareMedia(result.output.src);
+    // With no share sheet the link is copied; say so, or the click looks like nothing happened.
+    if (result.output && (await shareMedia(result.output.src)) === "copied") {
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 1500);
+    }
     onAction("share", result);
   };
 
@@ -274,6 +279,7 @@ export function ResultCard({
                   mediaExpanded={mediaExpanded}
                   onDownload={handleDownload}
                   onShare={handleShare}
+                  linkCopied={linkCopied}
                   onExpand={() => setMediaExpanded(true)}
                   onDimensions={(w, h) => setMeasured({ id: result.id, width: w, height: h })}
                   videoTimeRef={videoTimeRef}
@@ -458,6 +464,7 @@ function ResultMedia({
   mediaExpanded,
   onDownload,
   onShare,
+  linkCopied,
   onExpand,
   onDimensions,
   videoTimeRef,
@@ -470,6 +477,7 @@ function ResultMedia({
   mediaExpanded: boolean;
   onDownload: () => void;
   onShare: () => void;
+  linkCopied: boolean;
   onExpand: () => void;
   onDimensions: (width: number, height: number) => void;
   videoTimeRef: React.MutableRefObject<number>;
@@ -555,8 +563,8 @@ function ResultMedia({
         <ResultIconButton variant="top" label="Download" disabled={disabled} onClick={onDownload}>
           <DownloadIcon />
         </ResultIconButton>
-        <ResultIconButton variant="top" label="Share" disabled={disabled} onClick={onShare}>
-          <ShareIcon />
+        <ResultIconButton variant="top" label={linkCopied ? "Link copied" : "Share"} disabled={disabled} onClick={onShare}>
+          {linkCopied ? <CheckSymbolIcon /> : <ShareIcon />}
         </ResultIconButton>
         {(isVideo || isImage) && (
           <ResultIconButton variant="top" label="Expand" disabled={disabled} onClick={onExpand}>

package/src/icons.tsx

@@ -113,3 +113,17 @@ export function CloseSymbolIcon() {
     </svg>
   );
 }
+
+// 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.
+export function StopIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M240-240v-480h480v480H240Z" fill="currentColor" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -22,6 +22,13 @@ export {
   DEFAULT_MEDIA_ANALYSIS_PROMPT_LENGTH,
   MEDIA_ANALYSIS_PROMPTS,
   MEDIA_ANALYSIS_PROMPT_LENGTHS,
+  SUGGESTED_IMAGE_MODELS,
+  SUGGESTED_TEXT_TO_VIDEO_MODELS,
+  SUGGESTED_IMAGE_TO_VIDEO_MODELS,
+  SUGGESTED_EDIT_MODELS,
+  SUGGESTED_ANALYSIS_MODELS,
+  suggestedModels,
+  checkSuggestedModels,
 } from "@chai-ui/core";
 export type {
   DroppedMedia,
@@ -40,5 +47,8 @@ export type {
   Result,
   ResultStatus,
   Run,
+  SuggestedModelProblem,
+  SuggestedModelsCheck,
+  FalInputFormat,
   Usage,
 } from "@chai-ui/core";