@stigmer/react 3.10.0 → 3.11.0

package/src/internal/DecisionButton.tsx

@@ -39,12 +39,12 @@ export interface DecisionButtonProps {
 }
 
 const BASE = cn(
-  "inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5",
-  "text-xs font-medium transition-colors",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  "stg:inline-flex stg:items-center stg:justify-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5",
+  "stg:text-xs stg:font-medium stg:transition-colors",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-2",
   // Disabled dimming is ELEMENT opacity (allowed), never a `bg-token/NN` opacity
   // modifier — each preset keeps full control of the token colors themselves.
-  "disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none",
+  "stg:disabled:cursor-not-allowed stg:disabled:opacity-50 stg:disabled:pointer-events-none",
 );
 
 // Quiet, Cursor-grade, token-only.
@@ -53,17 +53,17 @@ const VARIANT: Record<DecisionVariant, string> = {
   // and border against the ghost actions — NOT by hue — so the hierarchy holds
   // without color being the only channel (a11y).
   primary:
-    "border border-border bg-accent text-accent-foreground hover:bg-accent-hover",
+    "stg:border stg:border-border stg:bg-accent stg:text-accent-foreground stg:hover:bg-accent-hover",
   // The canonical SDK ghost: no fill at rest, neutral wash on hover.
-  ghost: "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
+  ghost: "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
   // Quiet at rest; the destructive cue is revealed on hover AND keyboard focus
   // (parity for keyboard users — not hover-only). A persistent red button is
   // unnecessary: rejecting is the safe action, and a destructive tool gate is
   // already flagged by the card's accent.
   danger: cn(
-    "text-muted-foreground",
-    "hover:bg-destructive-subtle hover:text-destructive",
-    "focus-visible:bg-destructive-subtle focus-visible:text-destructive",
+    "stg:text-muted-foreground",
+    "stg:hover:bg-destructive-subtle stg:hover:text-destructive",
+    "stg:focus-visible:bg-destructive-subtle stg:focus-visible:text-destructive",
   ),
 };
 
@@ -119,7 +119,7 @@ function SpinnerIcon() {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />

package/src/internal/InCardDecisionError.tsx

@@ -38,7 +38,7 @@ export function InCardDecisionError({
   return (
     <p
       role="alert"
-      className="text-[11px] text-destructive"
+      className="stg:text-[11px] stg:text-destructive"
       data-cursor-target={cursorTarget}
     >
       Couldn&rsquo;t {leadIn} — {error.message}

package/src/internal/JumpToLatestButton.tsx

@@ -23,16 +23,16 @@ export function JumpToLatestButton({ onClick, visible }: JumpToLatestButtonProps
       aria-hidden={!visible}
       tabIndex={visible ? 0 : -1}
       className={cn(
-        "absolute bottom-3 left-1/2 z-10 -translate-x-1/2",
-        "flex items-center gap-1.5 rounded-full",
-        "border border-border bg-card px-3 py-1.5",
-        "text-xs font-medium text-muted-foreground shadow-md",
-        "transition-[opacity,transform] duration-[var(--stgm-motion-duration)]",
-        "hover:bg-muted hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:absolute stg:bottom-3 stg:left-1/2 stg:z-10 stg:-translate-x-1/2",
+        "stg:flex stg:items-center stg:gap-1.5 stg:rounded-full",
+        "stg:border stg:border-border stg:bg-card stg:px-3 stg:py-1.5",
+        "stg:text-xs stg:font-medium stg:text-muted-foreground stg:shadow-md",
+        "stg:transition-[opacity,transform] stg:duration-[var(--stgm-motion-duration)]",
+        "stg:hover:bg-muted stg:hover:text-foreground",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         visible
-          ? "pointer-events-auto translate-y-0 opacity-100"
-          : "pointer-events-none translate-y-2 opacity-0",
+          ? "stg:pointer-events-auto stg:translate-y-0 stg:opacity-100"
+          : "stg:pointer-events-none stg:translate-y-2 stg:opacity-0",
       )}
     >
       <ChevronDownIcon />

package/src/internal/MermaidDiagram.tsx

@@ -121,7 +121,7 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
       <div
         role="img"
         aria-label="Mermaid diagram"
-        className="mb-3 last:mb-0 flex justify-center overflow-x-auto rounded-md border border-border bg-card p-3 [&_svg]:max-w-full"
+        className="stg:mb-3 stg:last:mb-0 stg:flex stg:justify-center stg:overflow-x-auto stg:rounded-md stg:border stg:border-border stg:bg-card stg:p-3 stg:[&_svg]:max-w-full"
         dangerouslySetInnerHTML={{ __html: state.svg }}
       />
     );
@@ -150,12 +150,12 @@ function MermaidSourceFallback({
   failureMessage: string | null;
 }) {
   return (
-    <div className="mb-3 last:mb-0">
-      <pre className="overflow-x-auto rounded-md bg-muted p-3">
-        <code className="font-mono text-xs text-foreground">{chart}</code>
+    <div className="stg:mb-3 stg:last:mb-0">
+      <pre className="stg:overflow-x-auto stg:rounded-md stg:bg-muted stg:p-3">
+        <code className="stg:font-mono stg:text-xs stg:text-foreground">{chart}</code>
       </pre>
       {failureMessage !== null && (
-        <p role="status" className="mt-1 text-xs text-muted-foreground">
+        <p role="status" className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
           Mermaid diagram failed to render; showing source. ({failureMessage})
         </p>
       )}

package/src/internal/Pagination.tsx

@@ -30,9 +30,9 @@ export interface PaginationProps {
 }
 
 const buttonClasses = cn(
-  "rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors",
-  "hover:bg-accent hover:text-foreground",
-  "disabled:pointer-events-none disabled:opacity-40",
+  "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors",
+  "stg:hover:bg-accent stg:hover:text-foreground",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-40",
 );
 
 export function Pagination({
@@ -44,7 +44,7 @@ export function Pagination({
 }: PaginationProps) {
   return (
     <div
-      className={cn("flex items-center justify-between", className)}
+      className={cn("stg:flex stg:items-center stg:justify-between", className)}
       role="navigation"
       aria-label={ariaLabel}
     >
@@ -56,7 +56,7 @@ export function Pagination({
       >
         Previous
       </button>
-      <span className="text-xs tabular-nums text-muted-foreground">
+      <span className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         Page {pageNum} of {totalPages}
       </span>
       <button

package/src/internal/ResizableSplit.tsx

@@ -13,11 +13,17 @@ import { cn } from "@stigmer/theme";
 export type ResizablePane = "primary" | "secondary";
 
 /**
- * Which pane (if any) collapses below the `lg` breakpoint, leaving its sibling
- * full-width. Use this to hide the pixel-sized pane on narrow screens — always
- * pair it with {@link ResizableSplitProps.resizablePane} (hide the fixed pane so
- * the visible sibling is the flexing one and fills the row). `"none"` keeps both
+ * Which pane (if any) collapses when the split's own box is narrower than
+ * 48rem, leaving its sibling full-width. Use this to hide the pixel-sized
+ * pane in tight quarters — always pair it with
+ * {@link ResizableSplitProps.resizablePane} (hide the fixed pane so the
+ * visible sibling is the flexing one and fills the row). `"none"` keeps both
  * panes at every width.
+ *
+ * The narrowness check is a CSS container query against the split root —
+ * never a viewport media query — so an embedded dock inside a wide window
+ * collapses exactly like a narrow window does (stigmer/stigmer#301). See
+ * {@link ResizableSplitProps.responsiveCollapse} for the threshold rationale.
  */
 export type ResizableCollapse = "primary" | "secondary" | "none";
 
@@ -52,7 +58,22 @@ export interface ResizableSplitProps {
    * a distinct persisted width per mode.
    */
   readonly storageKey?: string;
-  /** Which pane collapses below the `lg` breakpoint. @default "none" */
+  /**
+   * Which pane collapses when the split's own box is narrower than 48rem
+   * (768px, Tailwind's `--container-3xl`).
+   *
+   * The threshold is fixed and keys on the split root via a CSS container
+   * query. 48rem clears the session layout's content minimums (320px min
+   * chat + drag handle + a usable workspace panel) and approximately
+   * preserves the console's previous viewport-`lg` trigger point, where the
+   * viewer's box is the ~1024px window minus the ~280px sidebar. It is
+   * deliberately not a prop: container-query conditions cannot read CSS
+   * custom properties, so a runtime threshold would need an inline-`<style>`
+   * or ResizeObserver mechanism — heavier than the static utility this is,
+   * with no consumer needing it.
+   *
+   * @default "none"
+   */
   readonly responsiveCollapse?: ResizableCollapse;
   /**
    * Which pane (if any) is collapsed at every width, hiding the drag handle and
@@ -126,7 +147,8 @@ function readInitialWidth(
  *   so the pane always grows toward its own side
  * - Optional `localStorage` persistence via `storageKey`, re-initialized when
  *   the key or resizable side changes (no remount required)
- * - Optional responsive collapse of the pixel pane below `lg`
+ * - Optional responsive collapse of the pixel pane when the split's own box
+ *   is narrow (container query, not viewport — see `responsiveCollapse`)
  * - Styled with `--stgm-*` tokens; no hardcoded colors
  *
  * @example
@@ -273,8 +295,8 @@ export function ResizableSplit({
   // Cleanup rAF on unmount
   useEffect(() => () => cancelAnimationFrame(rafRef.current), []);
 
-  const fixedPaneClass = "shrink-0 overflow-hidden";
-  const flexPaneClass = "min-w-0 flex-1";
+  const fixedPaneClass = "stg:shrink-0 stg:overflow-hidden";
+  const flexPaneClass = "stg:min-w-0 stg:flex-1";
 
   // A collapsed pane hides entirely and its sibling flexes to fill the row,
   // overriding the fixed/flex split. Width state is untouched, so expanding
@@ -293,12 +315,30 @@ export function ResizableSplit({
         : fixedPaneClass;
 
   return (
-    <div ref={containerRef} className={cn("flex min-h-0 flex-1", className)}>
+    <div
+      ref={containerRef}
+      className={cn(
+        "stg:flex stg:min-h-0 stg:flex-1",
+        // The responsive collapse queries the split's OWN width, so the root
+        // must be a CSS container (stigmer/stigmer#301). Applied ONLY while a
+        // collapse is requested: `container-type: inline-size` imposes layout
+        // containment, which re-parents `position: fixed` descendants and
+        // creates a stacking context — the workflow inspector's in-tree
+        // viewport-covering backdrop (InspectorHeader) lives inside a split
+        // pane and must not be captured. The one `responsiveCollapse`
+        // consumer (the session layout) has no in-tree fixed descendants:
+        // its dialogs are native <dialog> (top layer) and its floating UI
+        // portals out.
+        responsiveCollapse !== "none" && "stg:@container/resizable-split",
+        className,
+      )}
+    >
       {/* Primary region (first child, order-stable across flips/collapses) */}
       <div
         className={cn(
           primaryPaneClass,
-          responsiveCollapse === "primary" && "max-lg:hidden",
+          responsiveCollapse === "primary" &&
+            "stg:@max-3xl/resizable-split:hidden",
         )}
         style={
           isPrimaryResizable && !isCollapsed ? { width: panelWidth } : undefined
@@ -323,25 +363,26 @@ export function ResizableSplit({
         onPointerUp={handlePointerUp}
         onKeyDown={handleKeyDown}
         className={cn(
-          "group relative z-10 w-1 shrink-0 cursor-col-resize touch-none select-none",
-          "bg-[var(--stgm-border,#e5e5e5)]",
-          "hover:bg-[var(--stgm-primary,#6366f1)]",
-          "focus-visible:bg-[var(--stgm-primary,#6366f1)] focus-visible:outline-none",
-          "active:bg-[var(--stgm-primary,#6366f1)]",
-          "transition-colors duration-100",
-          responsiveCollapse !== "none" && "max-lg:hidden",
-          isCollapsed && "hidden",
+          "stg:group stg:relative stg:z-10 stg:w-1 stg:shrink-0 stg:cursor-col-resize stg:touch-none stg:select-none",
+          "stg:bg-[var(--stgm-border,#e5e5e5)]",
+          "stg:hover:bg-[var(--stgm-primary,#6366f1)]",
+          "stg:focus-visible:bg-[var(--stgm-primary,#6366f1)] stg:focus-visible:outline-none",
+          "stg:active:bg-[var(--stgm-primary,#6366f1)]",
+          "stg:transition-colors stg:duration-100",
+          responsiveCollapse !== "none" && "stg:@max-3xl/resizable-split:hidden",
+          isCollapsed && "stg:hidden",
         )}
       >
         {/* Wider invisible hit target (12px) for easier grabbing */}
-        <div className="absolute inset-y-0 -left-1.5 -right-1.5" />
+        <div className="stg:absolute stg:inset-y-0 stg:-left-1.5 stg:-right-1.5" />
       </div>
 
       {/* Secondary region (second child, order-stable across flips/collapses) */}
       <div
         className={cn(
           secondaryPaneClass,
-          responsiveCollapse === "secondary" && "max-lg:hidden",
+          responsiveCollapse === "secondary" &&
+            "stg:@max-3xl/resizable-split:hidden",
         )}
         style={
           !isPrimaryResizable && !isCollapsed ? { width: panelWidth } : undefined

package/src/internal/RevealToggle.tsx

@@ -52,9 +52,9 @@ export function RevealToggle({
       aria-expanded={expanded}
       data-cursor-target={cursorTarget}
       className={cn(
-        "mt-1 flex w-full items-center justify-center gap-1 rounded py-0.5",
-        "text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:mt-1 stg:flex stg:w-full stg:items-center stg:justify-center stg:gap-1 stg:rounded stg:py-0.5",
+        "stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         className,
       )}
     >
@@ -80,8 +80,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 transition-transform duration-150",
-        expanded && "rotate-180",
+        "stg:shrink-0 stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-180",
       )}
       aria-hidden="true"
     >

package/src/internal/ScrollFade.tsx

@@ -15,8 +15,8 @@ export function ScrollFade({ position }: { readonly position: "top" | "bottom" }
   return (
     <div
       className={[
-        "pointer-events-none absolute inset-x-0 z-10 h-3",
-        isTop ? "top-0" : "bottom-0",
+        "stg:pointer-events-none stg:absolute stg:inset-x-0 stg:z-10 stg:h-3",
+        isTop ? "stg:top-0" : "stg:bottom-0",
       ].join(" ")}
       style={{
         background: isTop

package/src/internal/VirtualizedThread.tsx

@@ -64,10 +64,10 @@ export interface VirtualizedThreadProps {
 // ---------------------------------------------------------------------------
 
 const SCROLLBAR_CLASSES = cn(
-  "[scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent]",
-  "[&::-webkit-scrollbar]:w-1.5",
-  "[&::-webkit-scrollbar-track]:bg-transparent",
-  "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40",
+  "stg:[scrollbar-width:thin] stg:[scrollbar-color:var(--color-border)_transparent]",
+  "stg:[&::-webkit-scrollbar]:w-1.5",
+  "stg:[&::-webkit-scrollbar-track]:bg-transparent",
+  "stg:[&::-webkit-scrollbar-thumb]:rounded-full stg:[&::-webkit-scrollbar-thumb]:bg-border/40",
 );
 
 // ---------------------------------------------------------------------------
@@ -186,10 +186,10 @@ export function VirtualizedThread({
           computeItemKey={(_index, item) => item.key}
           increaseViewportBy={{ top: 200, bottom: 200 }}
           scrollerRef={handleScrollerRef}
-          className="h-full"
+          className="stg:h-full"
           components={{ Scroller: ScrollerWithA11y }}
           itemContent={(index, item) => (
-            <div className={cn("pb-4 pt-0 first:pt-6", threadContentColumnClass(contentColumn))}>
+            <div className={cn("stg:pb-4 stg:pt-0 stg:first:pt-6", threadContentColumnClass(contentColumn))}>
               <ThreadItemWrapper animate={index >= items.length - 2}>
                 <ThreadItemRenderer
                   item={item}

package/src/internal/__tests__/BoundedContent.test.tsx

@@ -20,7 +20,7 @@ afterEach(cleanup);
 
 /** The collapsed clamp element: `overflow-hidden` + the shared budget. */
 function clampEl(container: HTMLElement): Element | null {
-  return container.querySelector(`.overflow-hidden.${PREVIEW_MAX_HEIGHT}`);
+  return container.querySelector(`.stg\\:overflow-hidden.${PREVIEW_MAX_HEIGHT.replace(":", "\\:")}`);
 }
 
 describe("BoundedContent", () => {

package/src/internal/__tests__/DecisionButton.test.tsx

@@ -20,30 +20,30 @@ describe("DecisionButton", () => {
     render(<DecisionButton label="Approve" variant="primary" onClick={() => {}} />);
     const cls = screen.getByRole("button").className;
     expect(cls).toContain("border");
-    expect(cls).toContain("bg-accent");
-    expect(cls).toContain("text-accent-foreground");
-    expect(cls).not.toContain("bg-success");
+    expect(cls).toContain("stg:bg-accent");
+    expect(cls).toContain("stg:text-accent-foreground");
+    expect(cls).not.toContain("stg:bg-success");
   });
 
   it("ghost carries no fill at rest (lowest weight)", () => {
     render(<DecisionButton label="Skip" variant="ghost" onClick={() => {}} />);
     const cls = screen.getByRole("button").className;
-    expect(cls).toContain("text-muted-foreground");
+    expect(cls).toContain("stg:text-muted-foreground");
     // No resting background — only a neutral hover wash.
     expect(cls).not.toMatch(/(?:^|\s)bg-/);
-    expect(cls).toContain("hover:bg-accent-hover");
+    expect(cls).toContain("stg:hover:bg-accent-hover");
   });
 
   it("danger is a quiet ghost that reveals the destructive cue on hover AND focus, never the loud red fill", () => {
     render(<DecisionButton label="Reject" variant="danger" onClick={() => {}} />);
     const cls = screen.getByRole("button").className;
-    expect(cls).toContain("text-muted-foreground");
+    expect(cls).toContain("stg:text-muted-foreground");
     expect(cls).not.toMatch(/(?:^|\s)bg-/); // transparent at rest
-    expect(cls).toContain("hover:text-destructive");
-    expect(cls).toContain("hover:bg-destructive-subtle");
+    expect(cls).toContain("stg:hover:text-destructive");
+    expect(cls).toContain("stg:hover:bg-destructive-subtle");
     // Keyboard parity: the cue is not hover-only.
-    expect(cls).toContain("focus-visible:text-destructive");
-    expect(cls).not.toContain("bg-destructive text-destructive-foreground");
+    expect(cls).toContain("stg:focus-visible:text-destructive");
+    expect(cls).not.toContain("stg:bg-destructive stg:text-destructive-foreground");
   });
 
   it("uses NO `bg-token/NN` opacity modifiers in any variant", () => {
@@ -75,7 +75,7 @@ describe("DecisionButton", () => {
         isActive
       />,
     );
-    expect(screen.getByRole("button").querySelector("svg.animate-spin")).toBeTruthy();
+    expect(screen.getByRole("button").querySelector("svg.stg\\:animate-spin")).toBeTruthy();
 
     // In-flight, but a DIFFERENT button is the active one — no spinner here.
     rerender(
@@ -87,7 +87,7 @@ describe("DecisionButton", () => {
         isActive={false}
       />,
     );
-    expect(screen.getByRole("button").querySelector("svg.animate-spin")).toBeNull();
+    expect(screen.getByRole("button").querySelector("svg.stg\\:animate-spin")).toBeNull();
   });
 
   it("forwards className and the data-cursor-target hook", () => {
@@ -96,12 +96,12 @@ describe("DecisionButton", () => {
         label="Approve all"
         variant="ghost"
         onClick={() => {}}
-        className="ml-auto"
+        className="stg:ml-auto"
         cursorTarget="approve-all-button"
       />,
     );
     const btn = screen.getByRole("button");
-    expect(btn.className).toContain("ml-auto");
+    expect(btn.className).toContain("stg:ml-auto");
     expect(btn.getAttribute("data-cursor-target")).toBe("approve-all-button");
   });
 });

package/src/internal/__tests__/ResizableSplit.layout.test.tsx

@@ -0,0 +1,136 @@
+// Layout-contract regression suite for ResizableSplit's responsive collapse
+// (stigmer/stigmer#301). Runs in a real Chromium via `vitest.a11y.config.ts` —
+// evaluating a CSS container query requires a real layout engine, which
+// happy-dom does not have.
+//
+// The contract under test: `responsiveCollapse` keys on the split's OWN box
+// (a container query), never the browser viewport. The defining scenario is
+// the one the issue reports — a narrow dock inside a WIDE window. A viewport
+// media query can never fire there (the window is wide), so every assertion
+// below that expects a collapse is meaningless under the old `max-lg`
+// implementation and fails against it.
+//
+// Like the provider container suite (#260/DD-019), this renders against the
+// SHIPPED stylesheet (`dist/styles.css`, built by `npm run build:libs`), so
+// the contract is verified on the artifact consumers actually load.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, afterEach, beforeAll } from "vitest";
+import { render, cleanup, screen } from "@testing-library/react";
+import { page } from "@vitest/browser/context";
+import { ResizableSplit } from "../ResizableSplit";
+
+// The harness default viewport (414×896) is narrower than Tailwind's `lg`,
+// where a viewport-keyed collapse would fire too — hiding the very defect
+// this suite exists to catch. Pin a desktop-wide window so the narrow-dock
+// cases can only pass with a container-keyed implementation.
+beforeAll(async () => {
+  await page.viewport(1280, 800);
+});
+
+afterEach(cleanup);
+
+/** The collapse threshold the component documents: 48rem = 768px. */
+const THRESHOLD_PX = 768;
+
+/** Comfortably inside the collapse band — the issue's 360–640px dock class. */
+const NARROW_PX = 500;
+
+/** Comfortably above the threshold, yet far below the Chromium viewport. */
+const WIDE_PX = THRESHOLD_PX + 132;
+
+/**
+ * Render the split docked in a fixed-width wrapper, the embedded-host
+ * arrangement from stigmer/stigmer#301: the wrapper is narrower than the
+ * viewport, so any viewport-keyed rule sees a wide window while the
+ * component's own box is tight.
+ */
+function renderDocked(
+  wrapperWidthPx: number,
+  overrides: Partial<React.ComponentProps<typeof ResizableSplit>> = {},
+) {
+  return render(
+    <div style={{ width: wrapperWidthPx, height: 400, display: "flex" }}>
+      <ResizableSplit
+        resizablePane="primary"
+        responsiveCollapse="primary"
+        primary={<div data-testid="primary">chat</div>}
+        secondary={<div data-testid="secondary">panel</div>}
+        {...overrides}
+      />
+    </div>,
+  );
+}
+
+function paneOf(testId: string): HTMLElement {
+  return screen.getByTestId(testId).parentElement!;
+}
+
+describe("ResizableSplit responsive collapse keys on its container (#301)", () => {
+  it("sanity: the test viewport is wide enough that a viewport-lg query could never fire", () => {
+    // Guards the premise of every case below. If the runner's viewport ever
+    // shrinks below Tailwind's `lg` (1024px), the narrow-dock cases stop
+    // discriminating between container- and viewport-keyed implementations.
+    expect(window.innerWidth).toBeGreaterThanOrEqual(1024);
+  });
+
+  it("collapses the primary pane in a narrow dock inside a wide window", () => {
+    renderDocked(NARROW_PX);
+
+    expect(getComputedStyle(paneOf("primary")).display).toBe("none");
+    // The drag handle hides with the pane...
+    const separator = screen.getByRole("separator", { hidden: true });
+    expect(getComputedStyle(separator).display).toBe("none");
+    // ...so the secondary pane owns the full dock width.
+    expect(paneOf("secondary").getBoundingClientRect().width).toBe(NARROW_PX);
+  });
+
+  it("keeps both panes side-by-side once the dock is wider than the threshold", () => {
+    renderDocked(WIDE_PX);
+
+    const primary = paneOf("primary");
+    const secondary = paneOf("secondary");
+    expect(getComputedStyle(primary).display).not.toBe("none");
+    expect(getComputedStyle(secondary).display).not.toBe("none");
+    // The fixed pane holds its pixel width; the sibling flexes into the rest.
+    expect(primary.getBoundingClientRect().width).toBe(384);
+    expect(secondary.getBoundingClientRect().width).toBeGreaterThan(0);
+  });
+
+  it("collapses the secondary pane when it is the responsive side", () => {
+    renderDocked(NARROW_PX, {
+      resizablePane: "secondary",
+      responsiveCollapse: "secondary",
+    });
+
+    expect(getComputedStyle(paneOf("secondary")).display).toBe("none");
+    expect(paneOf("primary").getBoundingClientRect().width).toBe(NARROW_PX);
+  });
+
+  it('responsiveCollapse="none": never collapses and creates no containment context', () => {
+    const { container } = renderDocked(NARROW_PX, {
+      responsiveCollapse: "none",
+    });
+
+    expect(getComputedStyle(paneOf("primary")).display).not.toBe("none");
+    expect(getComputedStyle(paneOf("secondary")).display).not.toBe("none");
+
+    // The containment invariant: without a collapse to decide, the root must
+    // NOT be a CSS container — `container-type: inline-size` would re-parent
+    // `position: fixed` descendants (the workflow inspector's click-away
+    // backdrop renders in-tree inside a split pane) and add a stacking
+    // context. See the conditional in ResizableSplit.
+    const root = paneOf("primary").parentElement!;
+    expect(getComputedStyle(root).containerType).toBe("normal");
+  });
+
+  it("the collapse-enabled root is an inline-size container named for its query", () => {
+    renderDocked(NARROW_PX);
+
+    const root = screen.getByRole("separator", { hidden: true }).parentElement!;
+    const style = getComputedStyle(root);
+    expect(style.containerType).toBe("inline-size");
+    expect(style.containerName).toBe("resizable-split");
+  });
+});

package/src/internal/__tests__/ResizableSplit.test.tsx

@@ -72,6 +72,53 @@ describe("ResizableSplit", () => {
     });
   });
 
+  // Class-name pins only; the collapse behavior itself is a container query
+  // that needs a real layout engine, proven by ResizableSplit.layout.test.tsx
+  // (stigmer/stigmer#301).
+  describe("responsiveCollapse", () => {
+    it("marks the root as a named CSS container only while a collapse is requested", () => {
+      const { container, rerender } = render(
+        <ResizableSplit
+          responsiveCollapse="primary"
+          primary={<div data-testid="primary">Primary</div>}
+          secondary={<div data-testid="secondary">Secondary</div>}
+        />,
+      );
+      const root = container.firstElementChild as HTMLElement;
+      expect(root.className).toContain("stg:@container/resizable-split");
+
+      // Without a collapse to decide, the container marker must be absent —
+      // `container-type` imposes layout containment (re-parents fixed
+      // descendants, adds a stacking context), which the workflow splits'
+      // pane content must never inherit.
+      rerender(
+        <ResizableSplit
+          responsiveCollapse="none"
+          primary={<div data-testid="primary">Primary</div>}
+          secondary={<div data-testid="secondary">Secondary</div>}
+        />,
+      );
+      expect(root.className).not.toContain("@container");
+    });
+
+    it("tags the collapsing pane and the separator with the container-query variant", () => {
+      render(
+        <ResizableSplit
+          responsiveCollapse="primary"
+          primary={<div data-testid="primary">Primary</div>}
+          secondary={<div data-testid="secondary">Secondary</div>}
+        />,
+      );
+      const pane = screen.getByTestId("primary").parentElement as HTMLElement;
+      const separator = screen.getByRole("separator");
+      expect(pane.className).toContain("stg:@max-3xl/resizable-split:hidden");
+      expect(separator.className).toContain("stg:@max-3xl/resizable-split:hidden");
+      const sibling = screen.getByTestId("secondary")
+        .parentElement as HTMLElement;
+      expect(sibling.className).not.toContain("@max-3xl");
+    });
+  });
+
   describe("collapsedPane", () => {
     /** The pane wrapper div for a rendered probe. */
     function paneOf(testId: string): HTMLElement {
@@ -81,7 +128,7 @@ describe("ResizableSplit", () => {
     it("hides the collapsed pane and the separator; the sibling flexes", () => {
       renderSplit({ collapsedPane: "secondary" });
       expect(paneOf("secondary").className).toContain("hidden");
-      expect(paneOf("primary").className).toContain("flex-1");
+      expect(paneOf("primary").className).toContain("stg:flex-1");
       const separator = screen.getByRole("separator", { hidden: true });
       expect(separator.className).toContain("hidden");
       expect(separator.getAttribute("tabindex")).toBe("-1");
@@ -91,7 +138,7 @@ describe("ResizableSplit", () => {
       renderSplit({ resizablePane: "primary", collapsedPane: "secondary" });
       // Primary is normally pixel-sized; with its sibling collapsed it flexes.
       expect(paneOf("primary").style.width).toBe("");
-      expect(paneOf("primary").className).toContain("flex-1");
+      expect(paneOf("primary").className).toContain("stg:flex-1");
     });
 
     it("keeps both children mounted (same DOM nodes) across a collapse toggle", () => {