@opengeni/react 0.13.0 → 0.20.0

package/src/components/workspace-dock.tsx

@@ -15,7 +15,14 @@ import {
   PanelRightCloseIcon,
   XIcon,
 } from "lucide-react";
-import { Group, Panel, Separator, useDefaultLayout, usePanelRef } from "react-resizable-panels";
+import {
+  Group,
+  Panel,
+  Separator,
+  useDefaultLayout,
+  usePanelRef,
+  type LayoutStorage,
+} from "react-resizable-panels";
 import { cn } from "../lib/cn";
 
 export type WorkspaceTab = {
@@ -53,6 +60,24 @@ export type WorkspaceDockProps = {
   className?: string | undefined;
 };
 
+const SERVER_LAYOUT_STORAGE: LayoutStorage = {
+  getItem: () => null,
+  setItem: () => {},
+};
+
+/** `useDefaultLayout` defaults to the ambient `localStorage` identifier when
+ * storage is undefined, which throws during SSR. Access can also throw in a
+ * browser that blocks storage (sandboxed frames/private policy), so both cases
+ * use a stable, non-persisting implementation instead. */
+function getLayoutStorage(): LayoutStorage {
+  if (typeof window === "undefined") return SERVER_LAYOUT_STORAGE;
+  try {
+    return window.localStorage;
+  } catch {
+    return SERVER_LAYOUT_STORAGE;
+  }
+}
+
 /**
  * The resizable / collapsible / maximizable right-hand Workspace dock. Replaces
  * a fixed grid column: drag the separator to set width, collapse to a thin rail
@@ -113,6 +138,10 @@ export function WorkspaceDock({
   className,
 }: WorkspaceDockProps) {
   const narrow = useIsNarrow(DOCK_OVERLAY_BREAKPOINT);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const reopenRef = useRef<HTMLButtonElement | null>(null);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+  const initialNarrowFocusRef = useRef(false);
   const dockPanelRef = usePanelRef();
   const [internalCollapsed, setInternalCollapsed] = useState(false);
   const [maximized, setMaximized] = useState(false);
@@ -124,13 +153,14 @@ export function WorkspaceDock({
   // bug). Standalone (uncontrolled) usage keeps the built-in collapse button
   // and the thin re-open rail as its only affordances.
   const hostControlled = collapsedProp !== undefined;
+  const previousCollapsedRef = useRef(collapsed);
 
   // Persisted layout (width split) keyed by autoSaveId.
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
     panelIds: ["primary", "dock"],
-    storage: typeof window !== "undefined" ? window.localStorage : undefined,
+    storage: getLayoutStorage(),
     id: autoSaveId,
-  } as Parameters<typeof useDefaultLayout>[0]);
+  });
 
   const requestedTab = activeTab ?? internalTab;
   const tabIds = tabs.map((tab) => tab.id);
@@ -164,6 +194,61 @@ export function WorkspaceDock({
     }
   }, [collapsedProp, dockPanelRef]);
 
+  // Treat the narrow overlay like a real modal: remember the external opener,
+  // move focus into the selected tab, and restore it on close. The standalone
+  // desktop dock instead focuses its newly-visible reopen rail after collapse.
+  useEffect(() => {
+    const previous = previousCollapsedRef.current;
+    previousCollapsedRef.current = collapsed;
+    if (previous === collapsed) return;
+
+    if (!collapsed) {
+      const active = document.activeElement;
+      const workspaceSurface = rootRef.current?.querySelector<HTMLElement>(
+        narrow ? '[role="dialog"]' : "[data-workspace-surface]",
+      );
+      if (active instanceof HTMLElement && !workspaceSurface?.contains(active)) {
+        returnFocusRef.current = active;
+      }
+      if (narrow) {
+        const frame = requestAnimationFrame(() => {
+          rootRef.current
+            ?.querySelector<HTMLElement>('[role="dialog"] [role="tab"][aria-selected="true"]')
+            ?.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+      }
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      if (!hostControlled) {
+        reopenRef.current?.focus();
+        return;
+      }
+      const target = returnFocusRef.current;
+      if (target?.isConnected) target.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [collapsed, hostControlled, narrow]);
+
+  // On the first narrow render there is no collapsed-state transition to drive
+  // focus into the modal: the overlay can already be open at mount. Place focus
+  // on its selected tab once, just as we do when an existing overlay is opened.
+  useEffect(() => {
+    if (!narrow || collapsed || initialNarrowFocusRef.current) return;
+    initialNarrowFocusRef.current = true;
+    const active = document.activeElement;
+    const workspaceSurface = rootRef.current?.querySelector<HTMLElement>('[role="dialog"]');
+    if (active instanceof HTMLElement && !workspaceSurface?.contains(active)) {
+      returnFocusRef.current = active;
+    }
+    const frame = requestAnimationFrame(() => {
+      workspaceSurface?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [collapsed, narrow]);
+
   // Keep the active tab valid if the available tabs change.
   useEffect(() => {
     if (firstTabId && !requestedTabIsValid) {
@@ -182,14 +267,55 @@ export function WorkspaceDock({
     setCollapsed(false);
   }, [dockPanelRef, setCollapsed]);
 
-  // Esc restores from maximize (desktop) and closes the mobile overlay.
+  // Esc restores from maximize (desktop) and closes the mobile overlay. Tab is
+  // fenced inside either full-screen surface: both visually cover the host, so
+  // keyboard focus must never move into invisible content behind them.
   useEffect(() => {
     const overlayOpen = maximized || (narrow && !collapsed);
     if (!overlayOpen) return;
     const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      if (maximized) setMaximized(false);
-      else collapse();
+      if (event.key === "Escape") {
+        if (maximized) setMaximized(false);
+        else collapse();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const surface = rootRef.current?.querySelector<HTMLElement>(
+        narrow ? '[role="dialog"]' : "[data-workspace-surface]",
+      );
+      if (!surface) return;
+      const focusable = Array.from(surface.querySelectorAll<HTMLElement>("*")).filter(
+        (element) =>
+          element.tabIndex >= 0 &&
+          !element.hasAttribute("disabled") &&
+          element.getClientRects().length > 0 &&
+          getComputedStyle(element).visibility !== "hidden",
+      );
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      const active = document.activeElement;
+      if (!first || !last) {
+        event.preventDefault();
+        surface.focus();
+        return;
+      }
+      if (!surface.contains(active)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+        return;
+      }
+      if ((event.shiftKey && active === first) || (!event.shiftKey && active === last)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+        return;
+      }
+      // Focus can emerge from a shadow-DOM editor/highlighter host at a point
+      // the light-DOM order cannot predict. Repair any escape after the browser
+      // performs its default Tab move.
+      requestAnimationFrame(() => {
+        const next = document.activeElement;
+        if (!surface.contains(next)) (event.shiftKey ? last : first).focus();
+      });
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -200,33 +326,53 @@ export function WorkspaceDock({
   // driven by the same `collapsed` contract (collapsed → hidden).
   if (narrow) {
     return (
-      <div className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
-        <div className="min-h-0 min-w-0 flex-1">{primary}</div>
-        {!collapsed && (
-          <div
-            role="dialog"
-            aria-modal="true"
-            aria-label="Workspace"
-            className="fixed inset-0 z-40 flex flex-col bg-og-bg"
-            style={{
-              paddingTop: "env(safe-area-inset-top)",
-              paddingBottom: "env(safe-area-inset-bottom)",
-            }}
+      <div ref={rootRef} className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
+        <div
+          data-workspace-primary
+          aria-hidden={!collapsed ? true : undefined}
+          className="min-h-0 min-w-0 flex-1"
+          inert={!collapsed ? true : undefined}
+        >
+          {primary}
+        </div>
+        <div
+          data-workspace-surface
+          role="dialog"
+          aria-modal="true"
+          aria-label="Workspace"
+          className="fixed inset-0 z-40 flex flex-col bg-og-bg"
+          hidden={collapsed}
+          style={{
+            paddingTop: "env(safe-area-inset-top)",
+            paddingBottom: "env(safe-area-inset-bottom)",
+          }}
+        >
+          <DockChrome
+            tabs={tabs}
+            current={current}
+            onTab={setTab}
+            leading={mobileLeadingControl}
+            accessory={headerAccessory}
+            controls={
+              <ChromeButton onClick={collapse} title="Close workspace" label="Close workspace">
+                <XIcon className="size-4" />
+              </ChromeButton>
+            }
+          />
+        </div>
+        {collapsed && !hostControlled ? (
+          <button
+            ref={reopenRef}
+            type="button"
+            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"
+            style={{ marginTop: "env(safe-area-inset-top)" }}
           >
-            <DockChrome
-              tabs={tabs}
-              current={current}
-              onTab={setTab}
-              leading={mobileLeadingControl}
-              accessory={headerAccessory}
-              controls={
-                <ChromeButton onClick={collapse} title="Close workspace" label="Close workspace">
-                  <XIcon className="size-4" />
-                </ChromeButton>
-              }
-            />
-          </div>
-        )}
+            <ChevronsLeftRightIcon className="size-4" aria-hidden />
+          </button>
+        ) : null}
       </div>
     );
   }
@@ -261,7 +407,7 @@ export function WorkspaceDock({
   );
 
   return (
-    <div className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
+    <div ref={rootRef} className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
       <Group
         orientation="horizontal"
         className="min-h-0 flex-1"
@@ -269,12 +415,19 @@ export function WorkspaceDock({
         onLayoutChanged={onLayoutChanged}
       >
         <Panel id="primary" minSize="30%" className="min-h-0 min-w-0">
-          {primary}
+          <div
+            data-workspace-primary
+            aria-hidden={maximized ? true : undefined}
+            className="h-full min-h-0 min-w-0"
+            inert={maximized ? true : undefined}
+          >
+            {primary}
+          </div>
         </Panel>
 
         {!collapsed && (
-          <Separator className="group relative w-1.5 shrink-0 outline-none">
-            <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-data-[separator-state=dragging]:bg-og-accent" />
+          <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">
+            <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>
         )}
 
@@ -296,13 +449,22 @@ export function WorkspaceDock({
           }}
           className="min-h-0 min-w-0"
         >
-          {/* Hidden behind the overlay while maximized (avoids double-mounting
-              the surfaces). */}
-          {!collapsed && !maximized && (
-            <div className="flex h-full min-h-0 min-w-0 flex-col border-l border-og-border bg-og-bg">
-              {dockChrome}
-            </div>
-          )}
+          {/* One persistent mount across normal, collapsed, and maximized modes:
+              layout changes must never destroy an editor buffer or terminal view. */}
+          <div
+            data-workspace-surface
+            role={maximized ? "dialog" : undefined}
+            aria-modal={maximized ? true : undefined}
+            aria-label={maximized ? "Workspace" : undefined}
+            aria-hidden={collapsed ? true : undefined}
+            className={cn(
+              "flex h-full min-h-0 min-w-0 flex-col bg-og-bg",
+              maximized ? "fixed inset-0 z-40" : "border-l border-og-border",
+              collapsed && "invisible pointer-events-none",
+            )}
+          >
+            {dockChrome}
+          </div>
         </Panel>
       </Group>
 
@@ -310,6 +472,7 @@ export function WorkspaceDock({
           when the host controls collapse — its own toggle is the one way in. */}
       {collapsed && !maximized && !hostControlled && (
         <button
+          ref={reopenRef}
           type="button"
           onClick={expand}
           title="Open workspace"
@@ -318,9 +481,6 @@ export function WorkspaceDock({
           <ChevronsLeftRightIcon className="size-3.5" />
         </button>
       )}
-
-      {/* Maximize overlay: full-workspace surface above everything. */}
-      {maximized && <div className="fixed inset-0 z-40 flex flex-col bg-og-bg">{dockChrome}</div>}
     </div>
   );
 }
@@ -343,7 +503,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 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-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:size-11 pointer-coarse:size-11"
     >
       {children}
     </button>
@@ -369,14 +529,82 @@ function DockChrome({
   controls: ReactNode;
 }) {
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
-  const activeIndex = tabs.findIndex((tab) => tab.id === active?.id);
   const tabsetId = useId();
   const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
-  const panelId = `${tabsetId}-panel`;
+  const tabListRef = useRef<HTMLDivElement | null>(null);
+  const [visitedTabs, setVisitedTabs] = useState<Set<string>>(() => new Set());
+  const [tabOverflow, setTabOverflow] = useState({ start: false, end: false });
+  const activeId = active?.id ?? "";
+  const activeTabIndex = tabs.findIndex((tab) => tab.id === activeId);
+  const keepActiveTabVisible = useCallback(() => {
+    const selected = activeTabIndex >= 0 ? tabRefs.current[activeTabIndex] : null;
+    selected?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [activeTabIndex]);
+
+  useEffect(() => {
+    if (!activeId) return;
+    setVisitedTabs((previous) => {
+      if (previous.has(activeId)) return previous;
+      const next = new Set(previous);
+      next.add(activeId);
+      return next;
+    });
+  }, [activeId]);
+
+  // A controlled/initial tab can become active without receiving focus (for
+  // example, a host routing a guarded diff into Files). Native scrolling only
+  // follows focus, so keep the selected tab inside the horizontally scrollable
+  // strip even when state — rather than a click or arrow key — selected it.
+  useDockLayoutEffect(() => {
+    keepActiveTabVisible();
+  }, [activeId, keepActiveTabVisible]);
+
+  // Hidden scrollbars keep the chrome quiet, but without an edge cue a clipped
+  // host label reads like corrupted copy. Fade only the edge(s) with more tabs,
+  // and recompute after scrolling, resizing, or late font metrics.
+  useDockLayoutEffect(() => {
+    const list = tabListRef.current;
+    if (!list) return;
+    const update = () => {
+      const max = Math.max(0, list.scrollWidth - list.clientWidth);
+      const next = { start: list.scrollLeft > 1, end: list.scrollLeft < max - 1 };
+      setTabOverflow((previous) =>
+        previous.start === next.start && previous.end === next.end ? previous : next,
+      );
+    };
+    update();
+    list.addEventListener("scroll", update, { passive: true });
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(() => {
+            keepActiveTabVisible();
+            update();
+          });
+    observer?.observe(list);
+    for (const tab of tabRefs.current) {
+      if (tab) observer?.observe(tab);
+    }
+    return () => {
+      list.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [activeId, keepActiveTabVisible, tabs.length]);
+
+  const tabMask =
+    tabOverflow.start && tabOverflow.end
+      ? "linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%)"
+      : tabOverflow.start
+        ? "linear-gradient(to right, transparent 0, black 14px, black 100%)"
+        : tabOverflow.end
+          ? "linear-gradient(to right, black 0, black calc(100% - 14px), transparent 100%)"
+          : undefined;
 
   const activateTab = (index: number) => {
     const tab = tabs[index];
-    if (!tab) return;
+    if (!tab) {
+      return;
+    }
     onTab(tab.id);
     tabRefs.current[index]?.focus();
   };
@@ -395,15 +623,31 @@ function DockChrome({
 
   return (
     <>
-      <div className="flex shrink-0 items-center gap-2 border-b border-og-border px-1.5 py-1">
-        {leading ? <div className="flex shrink-0 items-center">{leading}</div> : null}
+      <div className="grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0 min-[640px]:max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto_auto]">
+        <div className="flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11 min-[640px]:max-[1023px]:col-start-1 min-[640px]:max-[1023px]:row-start-1">
+          {leading ?? (
+            <span className="hidden truncate px-1 text-og-sm font-semibold text-og-fg max-[1023px]:inline">
+              Workspace
+            </span>
+          )}
+        </div>
         {/* The tab list scrolls horizontally when it can't fit — it must never
             grow into or overlap the chrome controls (they stay shrink-0). The
-            scrollbar is hidden to keep the strip calm. */}
+            scrollbar is hidden to keep the strip calm. On the narrow overlay it
+            owns a full second row, so status/close chrome can never squeeze the
+            canonical workspace navigation out of view. Tablets have enough
+            width to retain the denser single-row chrome, with this same strip
+            absorbing any unusually long host-injected labels. */}
         <div
-          className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          ref={tabListRef}
+          className="flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full min-[640px]:max-[1023px]:col-span-1 min-[640px]:max-[1023px]:col-start-2 min-[640px]:max-[1023px]:row-start-1"
           role="tablist"
           aria-orientation="horizontal"
+          style={{
+            maskImage: tabMask,
+            WebkitMaskImage: tabMask,
+            scrollPaddingInline: "16px",
+          }}
         >
           {tabs.map((tab, index) => (
             <button
@@ -415,33 +659,50 @@ function DockChrome({
               type="button"
               role="tab"
               aria-selected={tab.id === current}
-              aria-controls={panelId}
+              aria-controls={`${tabsetId}-panel-${index}`}
               tabIndex={tab.id === current ? 0 : -1}
               onClick={() => onTab(tab.id)}
               onKeyDown={(event) => onTabKeyDown(event, index)}
               className={cn(
-                "flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors 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-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",
                 tab.id === current
                   ? "bg-og-accent-soft text-og-fg"
                   : "text-og-fg-subtle hover:text-og-fg",
               )}
             >
-              <span>{tab.label}</span>
+              <span data-contrast-audited>{tab.label}</span>
               {tab.badge}
             </button>
           ))}
         </div>
-        {accessory ? <div className="flex shrink-0 items-center">{accessory}</div> : null}
-        <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle">{controls}</div>
+        <div className="flex min-w-0 shrink-0 items-center justify-self-end min-[640px]:max-[1023px]:col-start-3 min-[640px]:max-[1023px]:row-start-1">
+          {accessory}
+        </div>
+        <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle min-[640px]:max-[1023px]:col-start-4 min-[640px]:max-[1023px]:row-start-1">
+          {controls}
+        </div>
       </div>
-      <div
-        id={panelId}
-        aria-label={activeIndex < 0 ? "Workspace" : undefined}
-        aria-labelledby={activeIndex >= 0 ? `${tabsetId}-tab-${activeIndex}` : undefined}
-        className="min-h-0 min-w-0 flex-1 overflow-hidden"
-        role="tabpanel"
-      >
-        {active?.content}
+      <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
+        {tabs.length > 0 ? (
+          tabs.map((tab, index) => {
+            const selected = tab.id === activeId;
+            const shouldMount = selected || visitedTabs.has(tab.id);
+            return (
+              <div
+                key={tab.id}
+                id={`${tabsetId}-panel-${index}`}
+                aria-labelledby={`${tabsetId}-tab-${index}`}
+                className="h-full min-h-0 min-w-0 overflow-hidden"
+                hidden={!selected}
+                role="tabpanel"
+              >
+                {shouldMount ? tab.content : null}
+              </div>
+            );
+          })
+        ) : (
+          <div className="h-full min-h-0 min-w-0" aria-label="Workspace" role="tabpanel" />
+        )}
       </div>
     </>
   );

package/src/composer.ts

@@ -0,0 +1,60 @@
+/**
+ * Advanced chat-composer framework. Import this subpath as a namespace:
+ *
+ * `import * as Composer from "@opengeni/react/composer"`.
+ */
+export {
+  Actions,
+  AttachButton,
+  Attachments,
+  CommandPalette,
+  Confirmation,
+  Controls,
+  Footer,
+  Frame,
+  Help,
+  Hint,
+  Input,
+  ModelPicker,
+  OPEN_WORKSTREAM_CONTROL_EVENT,
+  PauseButton,
+  PausedState,
+  RestoredResources,
+  Root,
+  SendButton,
+  Status,
+  Surface,
+  defaultChatComposerMessages,
+  useChatComposer,
+  useChatComposerController,
+} from "./components/composer";
+export type {
+  ChatComposerController,
+  ChatComposerContextValue,
+  ChatComposerMessages,
+  ComposerActionsProps,
+  ComposerAttachButtonProps,
+  ComposerCommandPaletteProps,
+  ComposerControlLinks,
+  ComposerControlState,
+  ComposerControlsProps,
+  ComposerDelivery,
+  ComposerDraftState,
+  ComposerFooterProps,
+  ComposerFrameProps,
+  ComposerHintProps,
+  ComposerInputProps,
+  ComposerModelPickerProps,
+  ComposerPauseButtonProps,
+  ComposerRootProps,
+  ComposerSendButtonProps,
+  ComposerSubmitBlocker,
+  ComposerSubmitMode,
+  ComposerSurfaceProps,
+  UseChatComposerControllerOptions,
+} from "./components/composer";
+export { ComposerTranscriptionControl } from "./components/composer-transcription-control";
+export type {
+  ComposerTranscriptionControlProps,
+  ComposerTranscriptionMessages,
+} from "./components/composer-transcription-control";