@opengeni/react 0.46.1 → 0.52.1

package/src/components/timeline-annotations.tsx

@@ -0,0 +1,84 @@
+import type {
+  DraftTimelineAnnotation,
+  TimelineAnnotation,
+  TimelineAnnotationSource,
+} from "@opengeni/sdk";
+import { Suspense, lazy, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+
+export type TimelineAnnotationLike = DraftTimelineAnnotation | TimelineAnnotation;
+
+const TimelineAnnotationsDialog = lazy(() => import("./timeline-annotations-dialog"));
+
+export function TimelineAnnotationsChip({
+  annotations,
+  editable = false,
+  focusAnnotationId,
+  onFocusConsumed,
+  onUpdate,
+  onRemove,
+  onRevealSource,
+  className,
+}: {
+  annotations: readonly TimelineAnnotationLike[];
+  editable?: boolean | undefined;
+  focusAnnotationId?: string | null | undefined;
+  onFocusConsumed?: (() => void) | undefined;
+  onUpdate?: ((id: string, note: string) => void) | undefined;
+  onRemove?: ((id: string) => void) | undefined;
+  onRevealSource?: ((source: TimelineAnnotationSource) => boolean) | undefined;
+  className?: string | undefined;
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  if (annotations.length === 0) return null;
+  const focusRequested = Boolean(
+    focusAnnotationId && annotations.some((item) => item.id === focusAnnotationId),
+  );
+  const visible = open || focusRequested;
+  const countLabel = `${annotations.length} ${annotations.length === 1 ? "annotation" : "annotations"}`;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={cn(
+          "inline-flex min-h-8 items-center gap-1.5 rounded-full border border-og-border bg-og-surface-1 px-2.5 py-1 text-og-sm font-medium text-og-fg-muted outline-hidden transition hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]",
+          className,
+        )}
+        aria-label={`Review ${countLabel}`}
+        aria-haspopup="dialog"
+        aria-expanded={visible}
+        onClick={() => setOpen((current) => !current)}
+      >
+        {countLabel}
+      </button>
+      {visible ? (
+        <Suspense fallback={null}>
+          <TimelineAnnotationsDialog
+            annotations={annotations}
+            editable={editable}
+            focusAnnotationId={focusAnnotationId}
+            onFocusConsumed={() => {
+              setOpen(true);
+              onFocusConsumed?.();
+            }}
+            onUpdate={onUpdate}
+            onRemove={onRemove}
+            onRevealSource={onRevealSource}
+            triggerRef={triggerRef}
+            countLabel={countLabel}
+            onDismiss={(restoreFocus) => {
+              setOpen(false);
+              if (restoreFocus) triggerRef.current?.focus();
+            }}
+          />
+        </Suspense>
+      ) : null}
+    </>
+  );
+}
+
+export default TimelineAnnotationsChip;

package/src/components/tooltip.tsx

@@ -8,19 +8,17 @@
  * tips and look like a blank white bubble.
  */
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import {
-  createContext,
-  useContext,
-  useRef,
-  type ComponentProps,
-  type CSSProperties,
-  type RefObject,
-} from "react";
+import { createContext, useContext, type ComponentProps, type CSSProperties } from "react";
 
 import { cn } from "../lib/cn";
-import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 
-const TooltipSourceContext = createContext<RefObject<HTMLElement | null> | null>(null);
+type TooltipSourceContextValue = {
+  source: HTMLElement | null;
+  ref: (node: HTMLElement | null) => void;
+};
+
+const TooltipSourceContext = createContext<TooltipSourceContextValue | null>(null);
 
 function TooltipProvider({
   delayDuration = 300,
@@ -30,9 +28,9 @@ function TooltipProvider({
 }
 
 function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
-  const sourceRef = useRef<HTMLElement | null>(null);
+  const source = usePortalTokenSource<HTMLElement>();
   return (
-    <TooltipSourceContext.Provider value={sourceRef}>
+    <TooltipSourceContext.Provider value={source}>
       <TooltipPrimitive.Root data-slot="tooltip" {...props}>
         {children}
       </TooltipPrimitive.Root>
@@ -50,7 +48,7 @@ function TooltipTrigger({
       data-slot="tooltip-trigger"
       asChild={asChild}
       ref={(node) => {
-        if (sourceRef) sourceRef.current = node;
+        sourceRef?.ref(node);
       }}
       {...props}
     />
@@ -69,9 +67,8 @@ function TooltipContent({
   style,
   ...props
 }: ComponentProps<typeof TooltipPrimitive.Content>) {
-  const sourceRef = useContext(TooltipSourceContext);
-  const fallbackRef = useRef<HTMLElement | null>(null);
-  const portalStyle = usePortalTokenStyle(sourceRef ?? fallbackRef);
+  const source = useContext(TooltipSourceContext);
+  const portalStyle = usePortalTokenStyle(source?.source ?? null);
 
   return (
     <TooltipPrimitive.Portal>

package/src/components/user-message-body.tsx

@@ -330,7 +330,7 @@ export function UserMessageBody({ messageId, text, children, className }: UserMe
           aria-controls={contentId}
           aria-expanded={expanded}
           data-og-user-message-disclosure=""
-          className="mt-1.5 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-none transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11"
+          className="mt-1.5 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-hidden transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11"
           onClick={(event) => toggle(event.currentTarget)}
         >
           {expanded ? "Show less" : "Show more"}

package/src/components/workbench-changes.tsx

@@ -1,6 +1,7 @@
 import type { GitFileDiff } from "@opengeni/sdk";
 import { ArrowUpRightIcon, FileWarningIcon, HistoryIcon } from "lucide-react";
 import {
+  Component,
   type ReactNode,
   useCallback,
   useEffect,
@@ -10,7 +11,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { VList } from "virtua";
+import { VList, type VListHandle } from "virtua";
 import { cn } from "../lib/cn";
 import { useUnicodeFallbackFonts } from "../lib/use-unicode-fonts";
 import { useThemeType } from "../lib/use-theme-type";
@@ -96,6 +97,153 @@ type RailRow =
   | { kind: "group"; label: string; count: number }
   | { kind: "file"; file: SandboxGitFileDiff; index: number };
 
+type ChangesRailVListProps = {
+  children: ReactNode;
+  className: string;
+  coarsePointer: boolean;
+  files: readonly SandboxGitFileDiff[];
+  rowCount: number;
+};
+
+type ChangesRailVListState = {
+  renderedRowCount: number;
+  resetVersion: number;
+};
+
+type ChangesRailSnapshot = {
+  focusedPath: string | null;
+  scrollOffset: number;
+};
+
+/** Virtua must reset its cached range when the rail shrinks. Keep that remount
+ * scoped to shrink transitions and preserve the reader's focus/scroll context. */
+class ChangesRailVList extends Component<
+  ChangesRailVListProps,
+  ChangesRailVListState,
+  ChangesRailSnapshot | null
+> {
+  state: ChangesRailVListState = {
+    renderedRowCount: this.props.rowCount,
+    resetVersion: 0,
+  };
+
+  private host: HTMLDivElement | null = null;
+  private listHandle: VListHandle | null = null;
+  private pendingFocusedPath: string | null = null;
+  private restoreFrame: number | null = null;
+
+  static getDerivedStateFromProps(
+    props: ChangesRailVListProps,
+    state: ChangesRailVListState,
+  ): ChangesRailVListState | null {
+    if (props.rowCount === state.renderedRowCount) return null;
+    return {
+      renderedRowCount: props.rowCount,
+      resetVersion:
+        props.rowCount < state.renderedRowCount ? state.resetVersion + 1 : state.resetVersion,
+    };
+  }
+
+  getSnapshotBeforeUpdate(
+    _previousProps: ChangesRailVListProps,
+    previousState: ChangesRailVListState,
+  ): ChangesRailSnapshot | null {
+    if (previousState.resetVersion === this.state.resetVersion) return null;
+    const scroller = this.host?.firstElementChild;
+    if (!(scroller instanceof HTMLElement)) return null;
+    const active = document.activeElement;
+    const focusedRow =
+      active instanceof HTMLElement && scroller.contains(active)
+        ? active.closest<HTMLElement>("[data-rail-file-path]")
+        : null;
+    return {
+      focusedPath: focusedRow?.dataset.railFilePath ?? this.pendingFocusedPath,
+      scrollOffset: scroller.scrollTop,
+    };
+  }
+
+  componentDidUpdate(
+    _previousProps: ChangesRailVListProps,
+    _previousState: ChangesRailVListState,
+    snapshot: ChangesRailSnapshot | null,
+  ): void {
+    if (!snapshot || !this.listHandle) return;
+    this.cancelRestoreFrame();
+    const maxOffset = Math.max(0, this.listHandle.scrollSize - this.listHandle.viewportSize);
+    this.listHandle.scrollTo(Math.min(Math.max(snapshot.scrollOffset, 0), maxOffset));
+    const focusedPath = snapshot.focusedPath;
+    if (!focusedPath) return;
+    this.pendingFocusedPath = focusedPath;
+    this.continueFocusRestore();
+  }
+
+  componentWillUnmount(): void {
+    this.cancelRestoreFrame();
+    this.pendingFocusedPath = null;
+  }
+
+  private cancelRestoreFrame(): void {
+    if (this.restoreFrame === null) return;
+    if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.restoreFrame);
+    this.restoreFrame = null;
+  }
+
+  private continueFocusRestore = (): void => {
+    const path = this.pendingFocusedPath;
+    if (!path) return;
+    if (this.restoreFocusedPath(path)) {
+      this.pendingFocusedPath = null;
+      return;
+    }
+    if (this.restoreFrame === null && typeof requestAnimationFrame === "function") {
+      this.restoreFrame = requestAnimationFrame(() => {
+        this.restoreFrame = null;
+        this.continueFocusRestore();
+      });
+    }
+  };
+
+  private restoreFocusedPath(path: string): boolean {
+    const host = this.host;
+    if (!host) return true;
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && active.isConnected && active !== document.body) {
+      return true;
+    }
+    if (!this.props.files.some((file) => file.path === path)) return true;
+    const row = Array.from(host.querySelectorAll<HTMLButtonElement>("[data-rail-file-path]")).find(
+      (candidate) => candidate.dataset.railFilePath === path,
+    );
+    if (!row) return false;
+    row.focus({ preventScroll: true });
+    return true;
+  }
+
+  private setHost = (host: HTMLDivElement | null): void => {
+    this.host = host;
+  };
+
+  private setListHandle = (handle: VListHandle | null): void => {
+    this.listHandle = handle;
+  };
+
+  render() {
+    return (
+      <div ref={this.setHost} data-opengeni-changes-rail className={this.props.className}>
+        <VList
+          key={this.state.resetVersion}
+          ref={this.setListHandle}
+          className="h-full"
+          itemSize={this.props.coarsePointer ? 44 : 28}
+          ssrCount={Math.min(30, this.props.rowCount)}
+        >
+          {this.props.children}
+        </VList>
+      </div>
+    );
+  }
+}
+
 /** Order the files and build the rail rows (grouped past the threshold). The
  *  returned `orderedFiles` drives BOTH the rail and the diff pane so a rail row's
  *  `index` addresses the matching pane section. Exported for tests. */
@@ -321,7 +469,7 @@ export function WorkbenchChanges({
               }}
               title={activeFile?.path}
               data-compact-file-picker
-              className="h-11 w-full rounded-og-md border border-og-border bg-og-bg px-3 font-og-mono text-og-sm text-og-fg outline-none transition-colors focus:border-og-accent focus:ring-2 focus:ring-og-accent-soft"
+              className="h-11 w-full rounded-og-md border border-og-border bg-og-bg px-3 font-og-mono text-og-sm text-og-fg outline-hidden transition-colors focus:border-og-accent focus:ring-2 focus:ring-og-accent-soft"
             >
               {orderedFiles.map((file, index) => (
                 <option key={file.path} value={index}>
@@ -330,7 +478,13 @@ export function WorkbenchChanges({
               ))}
             </select>
           </div>
-          <div className="min-h-0 min-w-0 flex-1 overflow-auto" data-opengeni-changes-pane>
+          <div
+            aria-label="Changed file diff"
+            className="min-h-0 min-w-0 flex-1 overflow-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
+            data-opengeni-changes-pane
+            role="region"
+            tabIndex={0}
+          >
             {activeFile ? (
               <DiffSection
                 file={activeFile}
@@ -344,42 +498,44 @@ export function WorkbenchChanges({
       ) : (
         <div className="flex min-h-0 flex-1">
           {/* File rail — virtualized (virtua): a dense change set is fine. */}
-          <div className="w-[clamp(12rem,28%,15rem)] shrink-0 border-r border-og-border bg-og-surface-1/35">
-            <VList
-              className="h-full"
-              itemSize={coarsePointer ? 44 : 28}
-              ssrCount={Math.min(30, rows.length)}
-            >
-              {rows.map((row) =>
-                row.kind === "group" ? (
-                  <div
-                    key={`g:${row.label}`}
-                    data-rail-group
-                    className="flex items-center gap-1.5 px-2 pb-0.5 pt-2 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle"
-                  >
-                    <span className="min-w-0 truncate">{row.label}</span>
-                    <span className="shrink-0">{row.count}</span>
-                  </div>
-                ) : (
-                  <RailFileRow
-                    key={row.file.path}
-                    file={row.file}
-                    grouped={grouped}
-                    active={row.index === activeIndex}
-                    onClick={() => jumpTo(row.index)}
-                  />
-                ),
-              )}
-            </VList>
-          </div>
+          <ChangesRailVList
+            rowCount={rows.length}
+            coarsePointer={coarsePointer}
+            files={orderedFiles}
+            className="w-[clamp(12rem,28%,15rem)] shrink-0 border-r border-og-border bg-og-surface-1/35"
+          >
+            {rows.map((row) =>
+              row.kind === "group" ? (
+                <div
+                  key={`g:${row.label}`}
+                  data-rail-group
+                  className="flex items-center gap-1.5 px-2 pb-0.5 pt-2 text-og-xs font-medium uppercase tracking-wide text-og-fg-subtle"
+                >
+                  <span className="min-w-0 truncate">{row.label}</span>
+                  <span className="shrink-0">{row.count}</span>
+                </div>
+              ) : (
+                <RailFileRow
+                  key={row.file.path}
+                  file={row.file}
+                  grouped={grouped}
+                  active={row.index === activeIndex}
+                  onClick={() => jumpTo(row.index)}
+                />
+              ),
+            )}
+          </ChangesRailVList>
 
           {/* Diff pane — windowed file sections. Only the sections inside the
             visible window ± overscan are in the DOM; the container reserves the
             full scroll height so scrolling + the rail-jump stay accurate. */}
           <div
             ref={windowed.scrollRef}
-            className="min-h-0 min-w-0 flex-1 overflow-auto"
+            aria-label="Changed files diff"
+            className="min-h-0 min-w-0 flex-1 overflow-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
             data-opengeni-changes-pane
+            role="region"
+            tabIndex={0}
           >
             <div style={{ position: "relative", height: windowed.totalHeight }}>
               {orderedFiles.map((file, index) => {
@@ -479,8 +635,9 @@ function RailFileRow({
       onClick={onClick}
       title={file.path}
       data-rail-file
+      data-rail-file-path={file.path}
       className={cn(
-        "relative flex min-h-7 w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-og-sm transition-colors hover:bg-og-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent pointer-coarse:min-h-11",
+        "relative flex min-h-7 w-full items-center gap-1.5 truncate px-2 py-0.5 text-left text-og-sm transition-colors hover:bg-og-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent pointer-coarse:min-h-11",
         grouped && "pl-3",
         active &&
           "bg-og-accent-soft text-og-fg before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-r-full before:bg-og-accent",
@@ -597,7 +754,7 @@ function GuardBody({
         <button
           type="button"
           onClick={() => onOpenFile(file.path)}
-          className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-og-sm border border-og-border px-2 py-1 text-og-xs font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-11"
+          className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-og-sm border border-og-border px-2 py-1 text-og-xs font-medium text-og-fg-muted transition-colors hover:border-og-border-strong hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-11"
         >
           Open in Files
           <ArrowUpRightIcon className="size-3.5" aria-hidden />
@@ -622,7 +779,7 @@ function LayoutToggle({
           type="button"
           onClick={() => onChange(value)}
           className={cn(
-            "min-h-7 rounded-og-xs px-1.5 py-0.5 text-og-xs capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+            "min-h-7 rounded-og-xs px-1.5 py-0.5 text-og-xs capitalize focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
             layout === value
               ? "bg-og-accent-soft text-og-fg"
               : "text-og-fg-subtle hover:text-og-fg",

package/src/components/workspace-dock.tsx

@@ -44,6 +44,8 @@ export type WorkspaceDockProps = {
   /** Controlled collapsed state for hosts that expose their own dock toggle. */
   collapsed?: boolean | undefined;
   onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+  /** Keep the built-in collapse control when the host controls collapsed state. */
+  showCollapseControl?: boolean | undefined;
   /** A status accessory pinned to the right of the tab strip, left of the
    *  maximize/collapse controls (e.g. the machine-state chip). Renders in both
    *  the docked header and the full-screen overlay header. */
@@ -129,6 +131,7 @@ export function WorkspaceDock({
   onActiveTabChange,
   collapsed: collapsedProp,
   onCollapsedChange,
+  showCollapseControl = false,
   headerAccessory,
   mobileLeadingControl,
   autoSaveId = "og.session.dock",
@@ -343,6 +346,11 @@ export function WorkspaceDock({
           className="fixed inset-0 z-40 flex flex-col bg-og-bg"
           hidden={collapsed}
           style={{
+            // Author utility classes can override the user-agent `[hidden]`
+            // rule (for example this surface's `flex` class). Keep an inline
+            // display guard so a collapsed mobile workspace is actually gone
+            // visually as well as from the accessibility tree.
+            display: collapsed ? "none" : undefined,
             paddingTop: "env(safe-area-inset-top)",
             paddingBottom: "env(safe-area-inset-bottom)",
           }}
@@ -367,7 +375,7 @@ export function WorkspaceDock({
             onClick={expand}
             title="Open workspace"
             aria-label="Open workspace"
-            className="absolute right-3 top-3 z-30 inline-flex size-11 items-center justify-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted shadow-lg transition-colors hover:border-og-border-strong hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent"
+            className="absolute right-3 top-3 z-30 inline-flex size-11 items-center justify-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted shadow-lg transition-colors hover:border-og-border-strong hover:text-og-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
             style={{ marginTop: "env(safe-area-inset-top)" }}
           >
             <ChevronsLeftRightIcon className="size-4" aria-hidden />
@@ -396,7 +404,7 @@ export function WorkspaceDock({
               <Maximize2Icon className="size-3.5" />
             )}
           </ChromeButton>
-          {hostControlled ? null : (
+          {hostControlled && !showCollapseControl ? null : (
             <ChromeButton onClick={collapse} title="Collapse" label="Collapse dock">
               <PanelRightCloseIcon className="size-3.5" />
             </ChromeButton>
@@ -426,7 +434,7 @@ export function WorkspaceDock({
         </Panel>
 
         {!collapsed && (
-          <Separator className="group relative z-10 w-1.5 shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent max-[1023px]:-mx-[19px] max-[1023px]:w-11 pointer-coarse:-mx-[19px] pointer-coarse:w-11">
+          <Separator className="group relative z-10 w-1.5 shrink-0 outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent max-[1023px]:-mx-[19px] max-[1023px]:w-11 pointer-coarse:-mx-[19px] pointer-coarse:w-11">
             <span className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-og-border transition-colors group-hover:bg-og-accent group-focus-visible:bg-og-accent group-data-[separator-state=dragging]:bg-og-accent" />
           </Separator>
         )}
@@ -503,7 +511,7 @@ function ChromeButton({
       onClick={onClick}
       title={title}
       aria-label={label}
-      className="inline-flex size-7 items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:size-11 pointer-coarse:size-11"
+      className="inline-flex size-7 items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:size-11 pointer-coarse:size-11"
     >
       {children}
     </button>
@@ -664,7 +672,7 @@ function DockChrome({
               onClick={() => onTab(tab.id)}
               onKeyDown={(event) => onTabKeyDown(event, index)}
               className={cn(
-                "flex min-h-7 shrink-0 items-center justify-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+                "flex min-h-7 shrink-0 items-center justify-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
                 tab.id === current
                   ? "bg-og-accent-soft text-og-fg"
                   : "text-og-fg-subtle hover:text-og-fg",

package/src/composer.ts

@@ -64,6 +64,7 @@ export type {
   ComposerSubmitBlocker,
   ComposerSubmitMode,
   ComposerSurfaceProps,
+  ResponsiveBasis,
   UseChatComposerControllerOptions,
 } from "./components/composer";
 export { ComposerTranscriptionControl } from "./components/composer-transcription-control";
@@ -101,7 +102,9 @@ export type {
   VoiceRecordingChunk,
   VoiceRecordingChunkUploadState,
   VoiceRecordingFinalizationState,
+  VoiceRecordingHandoffMode,
   VoiceRecordingManifest,
+  VoiceRecordingRecoveryMode,
   VoiceRecordingStore,
   VoiceRecordingTranscriptionState,
   VoiceRecordingUploadState,