@opengeni/react 0.41.0 → 0.44.1

package/src/components/composer.tsx

@@ -241,25 +241,84 @@ export type UseChatComposerControllerOptions = {
 };
 
 /**
- * Autosize a composer textarea up to `maxPx` without the classic height→0
- * measure collapse (that flash expands the timeline flex sibling and yanks
- * tip-follow while a stream is pinned).
+ * Off-document mirror for shrink/steady measure. Measuring with
+ * `height: auto` on the live `rows={1}` textarea collapses it for a layout
+ * frame, expands the flex timeline sibling, and yanks tip-follow — the
+ * multi-line typing flicker that stops only once the box is capped.
+ */
+let composerHeightMirror: HTMLTextAreaElement | null = null;
+
+function measureComposerContentHeight(textarea: HTMLTextAreaElement): number {
+  if (typeof document === "undefined") {
+    return textarea.scrollHeight;
+  }
+  const width = textarea.clientWidth;
+  if (width <= 0) {
+    return textarea.offsetHeight;
+  }
+
+  let mirror = composerHeightMirror;
+  if (!mirror) {
+    mirror = document.createElement("textarea");
+    mirror.setAttribute("aria-hidden", "true");
+    mirror.tabIndex = -1;
+    mirror.rows = 1;
+    mirror.style.cssText =
+      "position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;height:auto;min-height:0;max-height:none;overflow:hidden;z-index:-1;";
+    composerHeightMirror = mirror;
+  }
+
+  const style = getComputedStyle(textarea);
+  mirror.style.width = `${width}px`;
+  mirror.style.boxSizing = style.boxSizing;
+  mirror.style.font = style.font;
+  mirror.style.fontSize = style.fontSize;
+  mirror.style.fontFamily = style.fontFamily;
+  mirror.style.fontWeight = style.fontWeight;
+  mirror.style.fontStyle = style.fontStyle;
+  mirror.style.letterSpacing = style.letterSpacing;
+  mirror.style.lineHeight = style.lineHeight;
+  mirror.style.textTransform = style.textTransform;
+  mirror.style.paddingTop = style.paddingTop;
+  mirror.style.paddingRight = style.paddingRight;
+  mirror.style.paddingBottom = style.paddingBottom;
+  mirror.style.paddingLeft = style.paddingLeft;
+  mirror.style.borderTopWidth = style.borderTopWidth;
+  mirror.style.borderRightWidth = style.borderRightWidth;
+  mirror.style.borderBottomWidth = style.borderBottomWidth;
+  mirror.style.borderLeftWidth = style.borderLeftWidth;
+  mirror.style.borderStyle = style.borderStyle;
+  mirror.style.whiteSpace = style.whiteSpace;
+  mirror.style.wordBreak = style.wordBreak;
+  mirror.style.overflowWrap = style.overflowWrap;
+  mirror.value = textarea.value;
+
+  if (!mirror.isConnected) {
+    document.documentElement.appendChild(mirror);
+  }
+  return mirror.scrollHeight;
+}
+
+/**
+ * Autosize a composer textarea up to `maxPx`. Never writes intermediate
+ * `height: auto` / `0` on the live element — only the final pixel height.
+ *
+ * `measure` is injectable for unit tests; production always uses the off-DOM
+ * mirror so shrink/steady never collapses the laid-out box.
  */
 export function applyComposerTextareaHeight(
   textarea: HTMLTextAreaElement,
   maxPx: number = 220,
+  measure: (el: HTMLTextAreaElement) => number = measureComposerContentHeight,
 ): void {
-  // Grow path: content already overflows — raise height, no measure collapse.
-  if (textarea.scrollHeight > textarea.clientHeight + 1) {
-    textarea.style.height = `${Math.min(textarea.scrollHeight, maxPx)}px`;
-    return;
-  }
-  // Shrink / steady: `auto` measures natural height without flashing empty.
   const before = textarea.offsetHeight;
-  textarea.style.height = "auto";
-  const nextPx = Math.min(textarea.scrollHeight, maxPx);
+  // Overflow: content taller than the box — scrollHeight is the needed size.
+  // Fit/shrink: content fits (or box is oversized) — measure off-DOM.
+  const nextPx = Math.min(
+    textarea.scrollHeight > textarea.clientHeight + 1 ? textarea.scrollHeight : measure(textarea),
+    maxPx,
+  );
   if (Math.abs(nextPx - before) < 1) {
-    textarea.style.height = `${before}px`;
     return;
   }
   textarea.style.height = `${nextPx}px`;
@@ -934,7 +993,8 @@ export const Footer = forwardRef<HTMLDivElement, ComposerFooterProps>(function C
       ref={ref}
       className={cn(
         "flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
-        "max-sm:items-center max-sm:gap-1",
+        // Mobile: one control row — never wrap into a second toolbar line.
+        "max-sm:flex-nowrap max-sm:items-center max-sm:gap-1",
         className,
       )}
     />
@@ -987,7 +1047,11 @@ export const Actions = forwardRef<HTMLSpanElement, ComposerActionsProps>(functio
     <span
       {...props}
       ref={ref}
-      className={cn("ml-auto flex shrink-0 items-center gap-1.5", className)}
+      className={cn(
+        "ml-auto flex shrink-0 items-center gap-1.5",
+        "max-sm:flex-nowrap max-sm:gap-1",
+        className,
+      )}
     />
   );
 });

package/src/components/model-policy-picker.tsx

@@ -545,7 +545,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
           disabled={props.disabled}
           aria-label={messages.label}
           className={cn(
-            "inline-flex h-8 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-7 max-sm:max-w-[9rem] max-sm:px-2",
+            "inline-flex h-8 min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-7 max-sm:max-w-[7.5rem] max-sm:px-2",
             props.className,
           )}
         >
@@ -556,7 +556,12 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
             }
             className="text-og-fg"
           />
-          <span className="truncate font-medium text-og-fg">{selected?.label ?? props.model}</span>
+          <span className="min-w-0 truncate font-medium text-og-fg max-sm:hidden">
+            {selected?.label ?? props.model}
+          </span>
+          <span className="min-w-0 truncate font-medium text-og-fg sm:hidden">
+            {selected?.shortLabel ?? selected?.label ?? props.model}
+          </span>
           <span className="max-sm:hidden">{labelReasoningEffort(props.effort)}</span>
           {props.latencyMode === "fast" ? (
             <ZapIcon

package/src/components/session-chrome.tsx

@@ -11,7 +11,7 @@
  * | --- | --- |
  * | `--og-session-chrome-surface` / `-open` | Dock fill (collapsed / expanded) |
  * | `--og-session-chrome-border` / `-open` | Dock edge |
- * | `--og-session-chrome-highlight` | Sliding chip selection pill |
+ * | `--og-session-chrome-highlight` / `-ring` | Sliding chip selection fill + edge |
  * | `--og-session-chrome-shadow` / `-open` | Elevation |
  * | `--og-session-chrome-radius` | Dock corner radius |
  * | `--og-session-chrome-chip-min-height` | Signal chip height |
@@ -394,7 +394,7 @@ export function SessionChrome({
   const chipRefs = useRef<Partial<Record<SessionChromeSignalId, HTMLButtonElement | null>>>({});
   const railRef = useRef<HTMLDivElement | null>(null);
   const panelBodyRef = useRef<HTMLDivElement | null>(null);
-  const [pill, setPill] = useState({ left: 0, width: 0, opacity: 0 });
+  const [pill, setPill] = useState({ left: 0, top: 0, width: 0, height: 0, opacity: 0 });
   const [panelHeight, setPanelHeight] = useState(0);
 
   const signalIds = signals.map((signal) => signal.id).join(",");
@@ -421,11 +421,15 @@ export function SessionChrome({
       }
       const chip = chipRefs.current[active];
       if (!chip) return;
+      // Measure against the chip's own box so a wrapped multi-row rail never
+      // stretches the highlight into a tall stripe across every signal.
       const railBox = rail.getBoundingClientRect();
       const chipBox = chip.getBoundingClientRect();
       setPill({
         left: chipBox.left - railBox.left,
+        top: chipBox.top - railBox.top,
         width: chipBox.width,
+        height: chipBox.height,
         opacity: 1,
       });
     };
@@ -433,6 +437,9 @@ export function SessionChrome({
     if (!rail) return;
     const observer = new ResizeObserver(measure);
     observer.observe(rail);
+    for (const chip of Object.values(chipRefs.current)) {
+      if (chip) observer.observe(chip);
+    }
     window.addEventListener("resize", measure);
     return () => {
       observer.disconnect();
@@ -568,88 +575,92 @@ export function SessionChrome({
           }}
         >
           <div
-            ref={railRef}
-            className="relative flex flex-wrap items-stretch"
+            className="relative"
             style={{
-              gap: "var(--og-session-chrome-chip-gap)",
-              padding: "var(--og-session-chrome-rail-pad)",
+              paddingTop: "var(--og-session-chrome-rail-pad)",
+              paddingBottom: "var(--og-session-chrome-rail-pad)",
+              paddingLeft: "var(--og-session-chrome-rail-pad)",
+              paddingRight: "var(--og-session-chrome-rail-pad)",
             }}
           >
-            <motion.div
-              aria-hidden
-              className="pointer-events-none absolute rounded-og-md ring-1 ring-og-border/50"
+            <div
+              ref={railRef}
+              className="relative flex flex-wrap items-center"
               style={{
-                top: "var(--og-session-chrome-rail-pad)",
-                bottom: "var(--og-session-chrome-rail-pad)",
-                background: "var(--og-session-chrome-highlight)",
+                gap: "var(--og-session-chrome-chip-gap)",
               }}
-              initial={false}
-              animate={{
-                x: pill.left,
-                width: pill.width,
-                opacity: pill.opacity,
-              }}
-              transition={{ duration: shellDuration, ease }}
-            />
-            {signals.map((signal) => {
-              const selected = active === signal.id;
-              return (
-                <button
-                  key={signal.id}
-                  type="button"
-                  ref={(node) => {
-                    chipRefs.current[signal.id] = node;
-                  }}
-                  aria-expanded={selected}
-                  aria-controls={panelId}
-                  data-testid={`session-chrome-${signal.id}`}
-                  data-og-session-chrome-signal={signal.id}
-                  onClick={() => setActive(selected ? null : signal.id)}
-                  className={cn(
-                    "group relative z-[1] inline-flex min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md text-left text-og-xs outline-none",
-                    "transition-colors duration-150 motion-reduce:transition-none",
-                    "hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40",
-                    "pointer-coarse:min-h-11",
-                    selected ? "text-og-fg" : "text-og-fg-muted",
-                  )}
-                  style={{
-                    paddingInline: "var(--og-session-chrome-chip-pad-x)",
-                  }}
-                >
-                  <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
-                    {signal.icon}
-                  </span>
-                  <span className="shrink-0 font-medium text-og-fg">{signal.label}</span>
-                  {signal.detail ? (
-                    <>
-                      <span aria-hidden className="shrink-0 text-og-fg-subtle/60">
-                        ·
-                      </span>
-                      <span className="min-w-0 max-w-[8.5rem] truncate text-og-fg sm:max-w-[12rem]">
-                        {signal.detail}
+            >
+              <motion.div
+                aria-hidden
+                className="pointer-events-none absolute left-0 top-0 rounded-og-md"
+                style={{
+                  background: "var(--og-session-chrome-highlight)",
+                  boxShadow: "inset 0 0 0 1px var(--og-session-chrome-highlight-ring)",
+                }}
+                initial={false}
+                animate={{
+                  x: pill.left,
+                  y: pill.top,
+                  width: pill.width,
+                  height: pill.height,
+                  opacity: pill.opacity,
+                }}
+                transition={{ duration: shellDuration, ease }}
+              />
+              {signals.map((signal) => {
+                const selected = active === signal.id;
+                return (
+                  <button
+                    key={signal.id}
+                    type="button"
+                    ref={(node) => {
+                      chipRefs.current[signal.id] = node;
+                    }}
+                    aria-expanded={selected}
+                    aria-controls={panelId}
+                    aria-label={selected ? `Close ${signal.label}` : undefined}
+                    data-testid={`session-chrome-${signal.id}`}
+                    data-og-session-chrome-signal={signal.id}
+                    onClick={() => setActive(selected ? null : signal.id)}
+                    className={cn(
+                      "group relative z-[1] inline-flex min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md py-1 text-left text-og-xs outline-none",
+                      // Coarse pointers keep a 44px target (session-pins acceptance).
+                      "pointer-coarse:min-h-11",
+                      "transition-colors duration-150 motion-reduce:transition-none",
+                      "hover:text-og-fg focus-visible:bg-og-surface-3/50",
+                      selected ? "text-og-fg" : "text-og-fg-muted",
+                    )}
+                    style={{
+                      paddingInline: "var(--og-session-chrome-chip-pad-x)",
+                    }}
+                  >
+                    <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
+                      {signal.icon}
+                    </span>
+                    <span className="shrink-0 font-medium text-og-fg">{signal.label}</span>
+                    {signal.detail ? (
+                      <>
+                        <span aria-hidden className="shrink-0 text-og-fg-subtle/60">
+                          ·
+                        </span>
+                        <span className="min-w-0 max-w-[8.5rem] truncate text-og-fg sm:max-w-[12rem]">
+                          {signal.detail}
+                        </span>
+                      </>
+                    ) : null}
+                    {selected ? (
+                      <span
+                        data-testid="session-chrome-close"
+                        className="ml-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-og-sm text-og-fg-subtle transition-colors group-hover:text-og-fg pointer-coarse:size-5"
+                        aria-hidden
+                      >
+                        <XIcon className="size-3" />
                       </span>
-                    </>
-                  ) : null}
-                </button>
-              );
-            })}
-            <AnimatePresence initial={false}>
-              {open ? (
-                <motion.button
-                  key="close"
-                  type="button"
-                  aria-label="Close session chrome panel"
-                  onClick={() => setActive(null)}
-                  initial={reduceMotion ? false : { opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={reduceMotion ? { opacity: 1 } : { opacity: 0 }}
-                  transition={{ duration: crossfadeDuration, ease }}
-                  className="relative z-[1] ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-og-md text-og-fg-subtle outline-none transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 pointer-coarse:size-11"
-                >
-                  <XIcon className="size-3" />
-                </motion.button>
-              ) : null}
-            </AnimatePresence>
+                    ) : null}
+                  </button>
+                );
+              })}
+            </div>
           </div>
 
           <motion.div

package/src/composer.ts

@@ -71,9 +71,38 @@ export type {
   ComposerTranscriptionControlProps,
   ComposerTranscriptionMessages,
 } from "./components/composer-transcription-control";
-export { useVoiceInput } from "./hooks/use-voice-input";
+export {
+  VOICE_RECORDING_CLIENT_MAX_DURATION_SECONDS,
+  VOICE_RECORDING_OWNER_HEARTBEAT_MILLISECONDS,
+  VOICE_RECORDING_OWNER_STALE_MILLISECONDS,
+  VOICE_RECORDING_TIMESLICE_MILLISECONDS,
+  useVoiceInput,
+} from "./hooks/use-voice-input";
 export type {
   UseVoiceInputOptions,
   UseVoiceInputResult,
   VoiceInputStatus,
 } from "./hooks/use-voice-input";
+export {
+  IndexedDbVoiceRecordingStore,
+  VoiceRecordingChunkConflictError,
+  VoiceRecordingChunkSequenceError,
+  VoiceRecordingNotFoundError,
+  VoiceRecordingOwnedError,
+  VoiceRecordingStorageUnavailableError,
+  createVoiceRecordingManifest,
+  planVoiceRecordingChunkCommit,
+  prepareVoiceRecordingChunk,
+} from "./voice-recording-store";
+export type {
+  PersistVoiceRecordingChunkInput,
+  PersistVoiceRecordingChunkResult,
+  VoiceRecordingCaptureState,
+  VoiceRecordingChunk,
+  VoiceRecordingChunkUploadState,
+  VoiceRecordingFinalizationState,
+  VoiceRecordingManifest,
+  VoiceRecordingStore,
+  VoiceRecordingTranscriptionState,
+  VoiceRecordingUploadState,
+} from "./voice-recording-store";