@opengeni/react 0.15.0 → 0.23.0

package/src/components/workbench-changes.tsx

@@ -12,25 +12,28 @@ import {
 } from "react";
 import { VList } from "virtua";
 import { cn } from "../lib/cn";
+import { useUnicodeFallbackFonts } from "../lib/use-unicode-fonts";
 import { useThemeType } from "../lib/use-theme-type";
 import { formatAsOf } from "../hooks/use-machine-chip";
+import type { SandboxGitFileDiff } from "../hooks/use-sandbox-git";
 import { useWindowedSections } from "../hooks/use-windowed-sections";
 import { PierreDiff } from "./pierre-diff";
 
 /* ----------------------------------------------------------------------------
    Changes tab — a PR-review surface.
 
-   A file rail (status glyph, ±counts, grouped by top-level dir when the change
-   set is large) on the left; a stacked, WINDOWED diff pane on the right. Only
+   A file rail (status glyph, ±counts, grouped by repository when metadata is
+   available, otherwise by top-level directory for a large legacy input) on the
+   left; a stacked, WINDOWED diff pane on the right. Only
    the file sections inside the visible window ± overscan mount a Pierre/Shiki
    highlighter (the one renderer), so a 40- or 400-file change set never mounts N
-   highlighters at once (dossier §10.7, D2). A per-file >guard (binary / diff too
+   highlighters at once (D2). A per-file size guard (binary / diff too
    large) degrades to an "open live" affordance instead of a diff body.
 
-   `git.diff` is a single flat scope, so "group by repo then directory" here means
-   "group by top-level directory" — which is exactly the repo dir in a multi-repo
-   workspace and the top folder otherwise. Grouping only kicks in past the
-   threshold; a small change set stays a flat list.
+   Workspace-wide Git results carry an explicit `repoRoot`, so grouping never
+   guesses repository ownership from a directory name. Multi-repo results group
+   at every size; legacy unscoped inputs group by top-level directory only past
+   the threshold.
    -------------------------------------------------------------------------- */
 
 /** Group the rail (and reorder the pane) once the change set is larger than this. */
@@ -67,9 +70,16 @@ const STATUS_LETTER: Record<GitFileDiff["status"], string> = {
   typechange: "T",
 };
 
+function compactFileLabel(file: SandboxGitFileDiff): string {
+  const slash = file.path.lastIndexOf("/");
+  const basename = slash >= 0 ? file.path.slice(slash + 1) : file.path;
+  const parent = slash >= 0 ? file.path.slice(0, slash + 1) : "";
+  return `${STATUS_LETTER[file.status]} · ${basename}${parent ? ` — ${parent}` : ""}`;
+}
+
 export type WorkbenchChangesProps = {
   /** The changed files (`useSandboxGit().diff`). Assumed non-empty by the caller. */
-  diff: GitFileDiff[];
+  diff: SandboxGitFileDiff[];
   /** Which source the diff came from — drives the "live" vs "as of turn" badge. */
   source: "live" | "capture" | null;
   /** When the served capture was taken (ISO), when `source === "capture"`. */
@@ -84,28 +94,41 @@ export type WorkbenchChangesProps = {
 
 type RailRow =
   | { kind: "group"; label: string; count: number }
-  | { kind: "file"; file: GitFileDiff; index: number };
+  | { kind: "file"; file: SandboxGitFileDiff; index: number };
 
 /** 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. */
-export function buildRail(files: GitFileDiff[]): { orderedFiles: GitFileDiff[]; rows: RailRow[] } {
-  if (files.length <= GROUP_THRESHOLD) {
+export function buildRail(files: SandboxGitFileDiff[]): {
+  orderedFiles: SandboxGitFileDiff[];
+  rows: RailRow[];
+  grouped: boolean;
+} {
+  const roots = new Set(
+    files.flatMap((file) => (file.repoRoot === undefined ? [] : [file.repoRoot])),
+  );
+  const groupByRepo = roots.size > 1;
+  if (!groupByRepo && files.length <= GROUP_THRESHOLD) {
     return {
       orderedFiles: files,
       rows: files.map((file, index) => ({ kind: "file", file, index })),
+      grouped: false,
     };
   }
-  const groups = new Map<string, GitFileDiff[]>();
+  const groups = new Map<string, SandboxGitFileDiff[]>();
   for (const file of files) {
     const slash = file.path.indexOf("/");
-    const key = slash > 0 ? file.path.slice(0, slash) : "(root)";
+    const key = groupByRepo
+      ? file.repoRoot || "(workspace)"
+      : slash > 0
+        ? file.path.slice(0, slash)
+        : "(root)";
     const bucket = groups.get(key);
     if (bucket) bucket.push(file);
     else groups.set(key, [file]);
   }
   const labels = [...groups.keys()].sort((a, b) => a.localeCompare(b));
-  const orderedFiles: GitFileDiff[] = [];
+  const orderedFiles: SandboxGitFileDiff[] = [];
   const rows: RailRow[] = [];
   for (const label of labels) {
     const bucket = (groups.get(label) ?? []).slice().sort((a, b) => a.path.localeCompare(b.path));
@@ -115,7 +138,7 @@ export function buildRail(files: GitFileDiff[]): { orderedFiles: GitFileDiff[];
       orderedFiles.push(file);
     }
   }
-  return { orderedFiles, rows };
+  return { orderedFiles, rows, grouped: true };
 }
 
 /** A file's diff body is "too large to inline" when it's binary or the diff guard
@@ -150,8 +173,13 @@ export function WorkbenchChanges({
   const [activePath, setActivePath] = useState<string | null>(null);
   const pickerId = useId();
 
-  const { orderedFiles, rows } = useMemo(() => buildRail(diff), [diff]);
-  const grouped = diff.length > GROUP_THRESHOLD;
+  const unicodeFontPaths = useMemo(
+    () => diff.flatMap((file) => (file.oldPath ? [file.path, file.oldPath] : [file.path])),
+    [diff],
+  );
+  useUnicodeFallbackFonts(unicodeFontPaths);
+
+  const { orderedFiles, rows, grouped } = useMemo(() => buildRail(diff), [diff]);
   const selectedIndex = orderedFiles.findIndex((file) => file.path === activePath);
   const activeIndex = selectedIndex >= 0 ? selectedIndex : 0;
 
@@ -251,10 +279,20 @@ export function WorkbenchChanges({
           compact && source === "capture" && "flex-col items-stretch gap-1.5 py-2",
         )}
       >
-        <span data-contrast-audited className="min-w-0 text-og-xs text-og-fg-muted">
+        <span
+          role="status"
+          aria-atomic="true"
+          aria-live="polite"
+          data-contrast-audited
+          className="min-w-0 text-og-xs text-og-fg-muted"
+        >
           {diff.length} {diff.length === 1 ? "file" : "files"} changed
-          <span className="ml-2 text-og-status-idle">+{additions}</span>
-          <span className="ml-1 text-og-status-failed">−{deletions}</span>
+          <span data-contrast-audited className="ml-2 text-og-status-idle">
+            +{additions}
+          </span>
+          <span data-contrast-audited className="ml-1 text-og-status-failed">
+            −{deletions}
+          </span>
         </span>
         <div
           className={cn(
@@ -281,12 +319,13 @@ export function WorkbenchChanges({
                 const index = Number(event.currentTarget.value);
                 setActivePath(orderedFiles[index]?.path ?? null);
               }}
+              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"
             >
               {orderedFiles.map((file, index) => (
                 <option key={file.path} value={index}>
-                  {STATUS_LETTER[file.status]} · {file.path}
+                  {compactFileLabel(file)}
                 </option>
               ))}
             </select>
@@ -316,7 +355,7 @@ export function WorkbenchChanges({
                   <div
                     key={`g:${row.label}`}
                     data-rail-group
-                    className="flex items-center gap-1.5 px-2 pb-0.5 pt-2 text-2xs font-medium uppercase tracking-wide text-og-fg-subtle"
+                    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>
@@ -387,7 +426,7 @@ function SourceBadge({
   if (source === "capture" && capturedAt) {
     return (
       <span
-        className="inline-flex items-center gap-1 rounded-og-xs border border-og-border px-1.5 py-px text-2xs text-og-fg-muted"
+        className="inline-flex items-center gap-1 rounded-og-xs border border-og-border px-1.5 py-px text-og-xs text-og-fg-muted"
         title={new Date(capturedAt).toLocaleString()}
       >
         <HistoryIcon className="size-3 shrink-0 text-og-status-running" aria-hidden />
@@ -396,7 +435,7 @@ function SourceBadge({
     );
   }
   return (
-    <span className="rounded-og-xs bg-og-surface-2 px-1.5 py-px text-2xs text-og-fg-subtle">
+    <span className="rounded-og-xs bg-og-surface-2 px-1.5 py-px text-og-xs text-og-fg-subtle">
       {label}
     </span>
   );
@@ -419,14 +458,21 @@ function RailFileRow({
   active,
   onClick,
 }: {
-  file: GitFileDiff;
+  file: SandboxGitFileDiff;
   grouped: boolean;
   active: boolean;
   onClick: () => void;
 }) {
-  // In a grouped rail the top-level dir is the group header, so show the path
-  // beneath it; otherwise show the whole path.
-  const shown = grouped ? file.path.slice(file.path.indexOf("/") + 1) || file.path : file.path;
+  // A real repository group strips the exact repo root. Legacy top-directory
+  // grouping strips only that first segment.
+  const repoPrefix = file.repoRoot ? `${file.repoRoot}/` : null;
+  const shown = grouped
+    ? file.repoRoot !== undefined
+      ? repoPrefix && file.path.startsWith(repoPrefix)
+        ? file.path.slice(repoPrefix.length)
+        : file.path
+      : file.path.slice(file.path.indexOf("/") + 1) || file.path
+    : file.path;
   return (
     <button
       type="button"
@@ -441,14 +487,19 @@ function RailFileRow({
       )}
     >
       <span
+        data-contrast-audited
         className={cn("w-3 shrink-0 text-center font-og-mono text-og-xs", STATUS_TINT[file.status])}
       >
         {STATUS_LETTER[file.status]}
       </span>
       <span className="min-w-0 flex-1 truncate">{shown}</span>
-      <span className="ml-auto flex shrink-0 items-center gap-1 pl-1 font-og-mono text-2xs">
-        <span className="text-og-status-idle">+{file.additions}</span>
-        <span className="text-og-status-failed">−{file.deletions}</span>
+      <span className="ml-auto flex shrink-0 items-center gap-1 pl-1 font-og-mono text-og-xs">
+        <span data-contrast-audited className="text-og-status-idle">
+          +{file.additions}
+        </span>
+        <span data-contrast-audited className="text-og-status-failed">
+          −{file.deletions}
+        </span>
       </span>
     </button>
   );
@@ -512,7 +563,7 @@ function DiffSection({
           <span className="min-w-0 truncate font-og-mono text-og-xs">
             {renamed ? `${file.oldPath} → ${file.path}` : file.path}
           </span>
-          <span className="flex shrink-0 items-center gap-2 font-og-mono text-2xs">
+          <span className="flex shrink-0 items-center gap-2 font-og-mono text-og-xs">
             <span className="text-og-status-idle">+{file.additions}</span>
             <span className="text-og-status-failed">−{file.deletions}</span>
           </span>
@@ -571,7 +622,7 @@ function LayoutToggle({
           type="button"
           onClick={() => onChange(value)}
           className={cn(
-            "min-h-7 rounded-og-xs px-1.5 py-0.5 text-2xs capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-11",
+            "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",
             layout === value
               ? "bg-og-accent-soft text-og-fg"
               : "text-og-fg-subtle hover:text-og-fg",

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
@@ -116,6 +141,7 @@ export function WorkspaceDock({
   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);
@@ -132,9 +158,9 @@ export function WorkspaceDock({
   // 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);
@@ -206,6 +232,23 @@ export function WorkspaceDock({
     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) {
@@ -224,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);
@@ -243,8 +327,16 @@ export function WorkspaceDock({
   if (narrow) {
     return (
       <div ref={rootRef} 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>
         <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"
@@ -323,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>
         )}
 
@@ -354,6 +453,9 @@ export function WorkspaceDock({
               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",
@@ -429,8 +531,15 @@ function DockChrome({
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
   const tabsetId = useId();
   const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  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;
@@ -442,6 +551,55 @@ function DockChrome({
     });
   }, [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) {
@@ -465,8 +623,8 @@ function DockChrome({
 
   return (
     <>
-      <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">
-        <div className="flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11">
+      <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
@@ -477,11 +635,19 @@ function DockChrome({
             grow into or overlap the chrome controls (they stay shrink-0). The
             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. */}
+            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 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"
+          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
@@ -504,13 +670,17 @@ function DockChrome({
                   : "text-og-fg-subtle hover:text-og-fg",
               )}
             >
-              <span>{tab.label}</span>
+              <span data-contrast-audited>{tab.label}</span>
               {tab.badge}
             </button>
           ))}
         </div>
-        <div className="flex min-w-0 shrink-0 items-center justify-self-end">{accessory}</div>
-        <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 className="min-h-0 min-w-0 flex-1 overflow-hidden">
         {tabs.length > 0 ? (

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";