@chai-ui/react 0.4.0 → 0.6.0

package/src/EditCard.tsx

@@ -44,8 +44,20 @@ export interface EditCardProps {
   onRegionsChange: (next: EditRegion[]) => void;
   /** The most regions the chosen model takes (`ModelOption.maxRegions`). "New region" is disabled at this many. Defaults to 6. */
   maxRegions?: number;
-  /** Width in px. Defaults to 421. The height follows the image. */
+  /** A fixed starting width in px, fitted within `maxWidth` and `maxHeight`. Without it (and without `scale`), the card is as large as fits in that box. */
   width?: number;
+  /**
+   * Sizes the card from the image's own pixel width: `0.3` makes it 30% as
+   * wide as the image (a 5000px photo gives a 1500px card). The height
+   * follows the image's shape, and the card is never wider than its
+   * container. Each version is measured on its own, since an edit can come
+   * back a different size.
+   */
+  scale?: number;
+  /** The widest the card gets, in px. Defaults to 630. With no `width` or `scale`, the card fills `maxWidth` × `maxHeight`, keeping the image's shape. */
+  maxWidth?: number;
+  /** The tallest the card gets, in px. Defaults to 630. A tall image narrows the card to fit, keeping its shape. */
+  maxHeight?: number;
   /** Alt text for the image. Defaults to "Image being edited". */
   alt?: string;
   /** Fires after the card downloads or shares the version showing. */
@@ -131,6 +143,9 @@ export function EditCard({
   onRegionsChange,
   maxRegions = DEFAULT_MAX_REGIONS,
   width,
+  scale,
+  maxWidth = 630,
+  maxHeight = 630,
   alt = "Image being edited",
   onAction,
   disabled = false,
@@ -149,7 +164,11 @@ export function EditCard({
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState<Pan>({ x: 0, y: 0 });
   const [size, setSize] = useState<Size>({ width: 0, height: 0 });
+  // The shown image's own pixel size, for `scale` and the max height. Kept
+  // 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);
@@ -353,7 +372,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);
   };
 
@@ -379,11 +402,18 @@ export function EditCard({
 
   if (!version) return null;
 
+  // The starting width (from `scale`, else `width`), then fitted inside
+  // maxWidth × maxHeight with the image's shape kept.
+  // With neither, the card fills the box.
+  const baseWidth = scale != null && natural ? natural.width * scale : (width ?? maxWidth);
+  const heightCap = natural && natural.height > 0 ? (maxHeight * natural.width) / natural.height : Infinity;
+  const cardWidth = Math.round(Math.min(baseWidth, maxWidth, heightCap));
+
   return (
     <>
       <div
         className="chai-edit-card"
-        style={width != null ? ({ "--chai-edit-card-width": `${width}px` } as CSSProperties) : undefined}
+        style={{ "--chai-edit-card-width": `${cardWidth}px` } as CSSProperties}
       >
         <div
           ref={viewportRef}
@@ -403,7 +433,13 @@ export function EditCard({
             style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, "--chai-edit-zoom": zoom } as CSSProperties}
           >
             {version.src || version.from ? (
-              <img className="chai-edit-card__image" src={version.src ?? version.from} alt={alt} draggable={false} />
+              <img
+                className="chai-edit-card__image"
+                src={version.src ?? version.from}
+                alt={alt}
+                draggable={false}
+                onLoad={(e) => setNatural({ width: e.currentTarget.naturalWidth, height: e.currentTarget.naturalHeight })}
+              />
             ) : (
               <div className="chai-edit-card__placeholder" />
             )}
@@ -478,8 +514,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,11 @@ 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";
 
 /** See primitives/Toggle.tsx for why `createComponent` is used instead of raw JSX on custom-element tags. */
 const MdFabElement = createComponent({
@@ -113,10 +115,15 @@ export interface MediaAnalyzerProps {
   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 +161,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 +184,8 @@ export function MediaAnalyzer({
   onAttachmentsChange,
   onUnsupportedFile,
   maxAttachmentsByKind = DEFAULT_MAX_ATTACHMENTS_BY_KIND,
-  models,
-  modelsByKind,
+  models = [],
+  modelsByKind = SUGGESTED_ANALYSIS_MODELS,
   modelId,
   onModelChange,
   autoSelectModel,
@@ -188,6 +197,7 @@ export function MediaAnalyzer({
   submitting,
   submitError,
   onSubmit,
+  onAbort,
 }: MediaAnalyzerProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const kind = attachments[0]?.kind;
@@ -199,6 +209,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 +234,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 +296,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 +357,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 +415,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 +433,7 @@ export function MediaAnalyzer({
             });
           }}
         >
-          <span slot="icon">
-            <ArrowForwardIcon />
-          </span>
+          <span slot="icon">{showStop ? <StopIcon /> : <ArrowForwardIcon />}</span>
         </MdFabElement>
       </div>
     </div>
@@ -447,6 +472,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";

package/src/media-actions.ts

@@ -24,16 +24,25 @@ export async function downloadMedia(src: string, filename: string): Promise<void
   }
 }
 
-/** The native share sheet where there is one, otherwise the media's URL copied to the clipboard. */
-export async function shareMedia(src: string): Promise<void> {
+/**
+ * The native share sheet where there is one, otherwise the media's URL
+ * copied to the clipboard. Says which, so the button can confirm a copy.
+ */
+export async function shareMedia(src: string): Promise<"shared" | "copied" | "none"> {
   if (navigator.share) {
     try {
       await navigator.share({ url: src });
+      return "shared";
     } catch {
       // Dismissed, or not shareable: same as closing a native share sheet.
+      return "none";
     }
-  } else {
-    navigator.clipboard?.writeText(src).catch(() => {});
+  }
+  try {
+    await navigator.clipboard.writeText(src);
+    return "copied";
+  } catch {
+    return "none";
   }
 }
 

package/src/style.css

@@ -1178,11 +1178,26 @@
   --md-fab-secondary-icon-color: var(--chai-media-analyzer-text);
 }
 
+/* While analyzing, with `onAbort`: submit becomes stop, same as the Composer's.
+   Before `[data-error]`, so an error still wins. */
+.chai-media-analyzer__submit[data-stop] {
+  --md-fab-secondary-container-color: var(--chai-color-semantic-warning-subtle);
+  --md-fab-secondary-icon-color: var(--chai-color-semantic-warning);
+}
+
 .chai-media-analyzer__submit[data-error] {
   --md-fab-secondary-container-color: var(--chai-color-semantic-danger-subtle);
   --md-fab-secondary-icon-color: var(--chai-color-semantic-danger);
 }
 
+/* What the last attach replaced (one kind per analysis). */
+.chai-media-analyzer__note {
+  margin: 0;
+  padding: 2px 2px 0;
+  color: var(--chai-media-analyzer-text);
+  font-size: var(--chai-type-size-label-large);
+}
+
 .chai-media-analyzer__error {
   margin: 0;
   padding: 2px 2px 0;
@@ -1825,7 +1840,7 @@
    regions, so both move and scale together. */
 
 .chai-edit-card {
-  width: var(--chai-edit-card-width, 421px);
+  width: var(--chai-edit-card-width, 630px);
   max-width: 100%;
   display: flex;
   flex-direction: column;

package/src/useComposer.ts

@@ -128,8 +128,12 @@ export function useComposer(options: UseComposerOptions = {}) {
   const [activeVersion, setActiveVersion] = useState(0);
   // Another image starts over. Reset while rendering, not in an effect (the rules of React).
   const [editSource, setEditSource] = useState<string | null>(editImage?.src ?? null);
+  // Numbers each image, so its original version has its own id and EditCard
+  // starts it clean (no half-drawn region from the last image).
+  const [editImageCount, setEditImageCount] = useState(0);
   if ((editImage?.src ?? null) !== editSource) {
     setEditSource(editImage?.src ?? null);
+    setEditImageCount((n) => n + 1);
     setEditRuns([]);
     setRegions([]);
     setActiveVersion(0);
@@ -138,7 +142,7 @@ export function useComposer(options: UseComposerOptions = {}) {
     () =>
       editImage
         ? [
-            { id: "original", src: editImage.src, status: "done", regions: [] },
+            { id: `original-${editImageCount}`, src: editImage.src, status: "done", regions: [] },
             ...editRuns.flatMap((run) =>
               run.results.map((r) => ({
                 id: r.id,
@@ -151,7 +155,7 @@ export function useComposer(options: UseComposerOptions = {}) {
             ),
           ]
         : [],
-    [editImage, editRuns]
+    [editImage, editRuns, editImageCount]
   );
   const editRef = useLatest({ versions, activeVersion, editRuns });
   // Each submit gets an id, so routing that settles after a newer submit is dropped.