@chai-ui/react 0.7.1 → 0.9.0

package/src/MediaAnalyzer.tsx

@@ -14,7 +14,7 @@ import {
 } from "@chai-ui/core";
 import type { ModelOption, MediaKind, MediaAnalysisPromptLength } from "@chai-ui/core";
 import { SearchMenu } from "./primitives/SearchMenu.js";
-import { StopIcon } from "./icons.js";
+import { ArrowForwardIcon, StopIcon } from "./icons.js";
 import type { MediaAnalyzerAttachment, MediaAnalyzerSubmitPayload } from "@chai-ui/core";
 
 export {
@@ -335,14 +335,6 @@ function MediaAnalyzerThumbnail({
 // Same "trace and inline as a currentColor component" convention Composer.tsx
 // documents — icons aren't shared across files yet in this codebase.
 
-function ArrowForwardIcon() {
-  return (
-    <svg viewBox="0 -960 960 960" aria-hidden="true">
-      <path d="M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z" fill="currentColor" />
-    </svg>
-  );
-}
-
 /**
  * A stroked X, not the filled-path Material Symbols "close" glyph the rest
  * of this codebase traces (reference: Composer.tsx's own `CloseIcon`) —

package/src/ResultCard.tsx

@@ -12,7 +12,7 @@ import {
   type Result,
 } from "@chai-ui/core";
 import { Pagination } from "./primitives/Pagination.js";
-import { CheckSymbolIcon, DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
+import { CheckIcon, CheckSymbolIcon, DownloadIcon, ExpandIcon, ShareIcon } from "./icons.js";
 import { PageSlide, usePageSlide } from "./page-slide.js";
 
 /**
@@ -887,18 +887,6 @@ function CopyIcon() {
   );
 }
 
-/** MD3 "check" symbol — same traced glyph SearchMenu.tsx uses, marking a passed evaluation. */
-function CheckIcon() {
-  return (
-    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M7.1625 13.5L2.8875 9.225L3.95625 8.15625L7.1625 11.3625L14.0438 4.48125L15.1125 5.55L7.1625 13.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 /** Real Material Symbols "play_arrow" (viewBox `0 -960 960 960`) — not in the mock itself, see this section's own header comment. */
 function PlayIcon() {
   return (

package/src/icons.tsx

@@ -127,3 +127,24 @@ export function StopIcon() {
     </svg>
   );
 }
+
+/** Material Symbols "arrow_forward": Composer's submit and Media Analyzer's. */
+export function ArrowForwardIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path d="M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** MD3 "check" (traced from Figma): a selected option row, a passed evaluation. Not `CheckSymbolIcon`, the Material Symbols path. */
+export function CheckIcon() {
+  return (
+    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M7.1625 13.5L2.8875 9.225L3.95625 8.15625L7.1625 11.3625L14.0438 4.48125L15.1125 5.55L7.1625 13.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/index.ts

@@ -11,6 +11,7 @@ export * from "./useMediaAnalyzer.js";
 // to import from @chai-ui/react.
 export {
   createFalEngine,
+  createFalTranscriber,
   createOpenRouterEngine,
   createMockEngine,
   mockEngine,
@@ -40,6 +41,10 @@ export type {
   MediaAnalysisPromptLength,
   MediaKind,
   ModelOption,
+  OutputKind,
+  Transcribe,
+  VoiceClip,
+  VoiceInputConfig,
   ParameterOption,
   RegionBox,
   RegionFormat,

package/src/primitives/SearchMenu.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
 import { MdCheckbox } from "@material/web/checkbox/checkbox.js";
 import { Toggle } from "./Toggle.js";
+import { CheckIcon } from "../icons.js";
 
 const MdOutlinedTextFieldElement = createComponent({
   react: React,
@@ -26,18 +27,6 @@ const MdCheckboxElement = createComponent({
   elementClass: MdCheckbox,
 });
 
-/** MD3 "check" symbol (Figma) — marking the selected row in any option list below. */
-function CheckIcon() {
-  return (
-    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M7.1625 13.5L2.8875 9.225L3.95625 8.15625L7.1625 11.3625L14.0438 4.48125L15.1125 5.55L7.1625 13.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 export interface SearchMenuOption {
   id: string;
   /** Shown on the trigger once this option is selected, and used for search-filtering. Keep this the short/canonical name. */

package/src/style.css

@@ -593,6 +593,75 @@
   opacity: 0.6;
 }
 
+/* Create world's two prompts, side by side (stacked when narrow): each a
+   label and its own Enhance button above a filled box. */
+.chai-composer__world-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--chai-space-4);
+}
+
+.chai-composer__world-field {
+  flex: 1 1 240px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--chai-space-2);
+}
+
+.chai-composer__world-field-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 24px;
+}
+
+.chai-composer__world-field-label {
+  font-size: var(--chai-type-size-xs);
+  font-weight: var(--chai-type-weight-material-medium);
+  line-height: var(--chai-type-leading-label-small);
+  letter-spacing: var(--chai-type-tracking-label-small);
+  color: var(--chai-color-semantic-control-text-strong);
+}
+
+.chai-composer__world-field-label strong {
+  font-weight: var(--chai-type-weight-semibold);
+}
+
+/* In the heading row, not over the text: no absolute position. */
+.chai-composer__world-field-head .chai-composer__optimize {
+  position: static;
+  width: 24px;
+}
+
+.chai-composer__field--boxed {
+  min-height: 144px;
+  padding: var(--chai-space-3);
+  border-radius: var(--chai-radius-md);
+  background: var(--chai-color-semantic-control-field);
+}
+
+/* Smaller text than the bar's prompt, and no room kept for an Enhance button. */
+.chai-composer__field--boxed .chai-composer__type {
+  padding-right: 0;
+  font-size: var(--chai-type-size-body-medium);
+  line-height: var(--chai-type-leading-body-medium);
+  letter-spacing: var(--chai-type-tracking-body-medium);
+}
+
+/* Why submit can't go yet (a world with no environment). */
+.chai-composer__field-hint {
+  margin: 0;
+  font-size: var(--chai-type-size-xs);
+  line-height: var(--chai-type-leading-label-small);
+  letter-spacing: var(--chai-type-tracking-label-small);
+  color: var(--chai-composer-placeholder);
+}
+
+.chai-composer__field--boxed .chai-composer__reveal {
+  inset: var(--chai-space-3);
+}
+
 /* The optimize/undo reveal (Composer.tsx's own doc comment on the overlay
    for the full mechanics) — the real textarea's text goes fully
    transparent so only the overlay's progressive, gradient-lit copy shows
@@ -682,6 +751,99 @@
   flex-wrap: wrap;
 }
 
+.chai-composer__controls-end {
+  display: flex;
+  align-items: center;
+  gap: var(--chai-space-2);
+}
+
+/* Voice input: the mic left of submit. While recording it becomes a stop
+   button (a filled square in a ringed circle) and a waveform replaces the
+   prompt; while transcribing, a spinner. */
+.chai-composer__voice {
+  display: flex;
+  align-items: center;
+}
+
+.chai-composer__voice-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--chai-radius-full);
+  background: transparent;
+  color: var(--chai-composer-text);
+  cursor: pointer;
+  transition: background-color var(--chai-motion-duration-fast) var(--chai-motion-easing-standard);
+}
+
+.chai-composer__voice-button:hover:not(:disabled) {
+  background: var(--chai-composer-hover);
+}
+
+.chai-composer__voice-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.chai-composer__voice-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.chai-composer__voice[data-status="recording"] .chai-composer__voice-button {
+  border-color: var(--chai-composer-text);
+  background: var(--chai-composer-hover);
+}
+
+.chai-composer__voice[data-status="recording"] .chai-composer__voice-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* Same row height as the prompt it stands in for. */
+.chai-composer__waveform {
+  display: flex;
+  align-items: center;
+  gap: var(--chai-space-3);
+  min-height: var(--chai-type-leading-body-large);
+}
+
+.chai-composer__waveform-bars {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--chai-type-leading-body-large);
+  min-width: 0;
+}
+
+.chai-composer__waveform-bar {
+  width: 2px;
+  border-radius: var(--chai-radius-full);
+  background: var(--chai-composer-text);
+}
+
+.chai-composer__waveform-time {
+  color: var(--chai-composer-text);
+  font-family: var(--chai-type-family-material);
+  font-size: var(--chai-type-size-label-large);
+  font-weight: var(--chai-type-weight-material-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+.chai-composer__voice-spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid var(--chai-color-semantic-control-border-faint);
+  border-top-color: var(--chai-color-semantic-accent);
+  animation: chai-spin var(--chai-motion-duration-steep) linear infinite;
+}
+
 /* Neutral trigger text, not `--md-sys-color-primary` green (account
    holder correction: "don't make dropdown select menu buttons green when
    they don't need to be"). */
@@ -2339,7 +2501,9 @@
    draw `<md-focus-ring>`. The Composer's textarea is the one control that
    had none — its ring goes on the whole pill, matching MD3's ring width
    and color so every ring in a component reads as the same system. */
-.chai-composer:has(.chai-composer__input:focus-visible) {
+.chai-composer:has(.chai-composer__field:not(.chai-composer__field--boxed) .chai-composer__input:focus-visible),
+/* A world's two boxes: the ring marks the box being typed in, not the bar. */
+.chai-composer__field--boxed:has(.chai-composer__input:focus-visible) {
   outline: 3px solid var(--chai-color-semantic-accent);
   outline-offset: 2px;
 }
@@ -2365,6 +2529,7 @@
 }
 
 [data-chai-focus-ring="hidden"] .chai-composer:has(.chai-composer__input:focus-visible),
+[data-chai-focus-ring="hidden"] .chai-composer__field--boxed:has(.chai-composer__input:focus-visible),
 [data-chai-focus-ring="hidden"] :is(
     .chai-composer,
     .chai-media-analyzer,