@stigmer/react 3.9.0 → 3.11.0

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", () => {

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

@@ -24,15 +24,15 @@ describe("ThreadCardShell chrome", () => {
     );
     const root = () =>
       container.querySelector('[data-cursor-target="row"]') as HTMLElement;
-    expect(root().className).toContain("border-border-prominent");
+    expect(root().className).toContain("stg:border-border-prominent");
 
     rerender(
       <ThreadCardShell cursorTarget="row" bordered={false}>
         <ThreadCardHeader>content</ThreadCardHeader>
       </ThreadCardShell>,
     );
-    expect(root().className).toContain("border-b");
-    expect(root().className).not.toContain("border-border-prominent");
+    expect(root().className).toContain("stg:border-b");
+    expect(root().className).not.toContain("stg:border-border-prominent");
   });
 
   it("carries the gate accent", () => {
@@ -42,7 +42,7 @@ describe("ThreadCardShell chrome", () => {
       </ThreadCardShell>,
     );
     const root = container.querySelector('[data-cursor-target="row"]') as HTMLElement;
-    expect(root.className).toContain("border-l-warning");
+    expect(root.className).toContain("stg:border-l-warning");
   });
 });
 

package/src/internal/__tests__/markdown-components.test.tsx

@@ -197,7 +197,7 @@ describe("MARKDOWN_COMPONENTS.code (shared highlight seam)", () => {
     const code = container.querySelector("code");
     expect(code).not.toBeNull();
     expect(code!.className).not.toContain("hljs");
-    expect(code!.className).toContain("bg-muted");
+    expect(code!.className).toContain("stg:bg-muted");
     expect(code!.textContent).toBe("inlineToken");
   });
 });
@@ -255,7 +255,7 @@ describe("MARKDOWN_COMPONENTS.pre (mermaid dispatch seam)", () => {
     expect(container.querySelector('[data-testid="mermaid-diagram"]')).toBeNull();
     const pre = container.querySelector("pre");
     expect(pre).not.toBeNull();
-    expect(pre!.className).toContain("bg-muted");
+    expect(pre!.className).toContain("stg:bg-muted");
   });
 
   it("dispatches through real react-markdown (the artifact/skill surface path)", () => {

package/src/internal/__tests__/thread-animation.test.tsx

@@ -87,8 +87,8 @@ describe("JumpToLatestButton", () => {
     const button = screen.getByRole("button", { name: "Jump to latest" });
     expect(button.getAttribute("aria-hidden")).toBe("false");
     expect(button.getAttribute("tabindex")).toBe("0");
-    expect(button.className).toContain("opacity-100");
-    expect(button.className).toContain("pointer-events-auto");
+    expect(button.className).toContain("stg:opacity-100");
+    expect(button.className).toContain("stg:pointer-events-auto");
   });
 
   it("renders hidden state with correct attributes", () => {
@@ -98,9 +98,9 @@ describe("JumpToLatestButton", () => {
     const button = screen.getByLabelText("Jump to latest");
     expect(button.getAttribute("aria-hidden")).toBe("true");
     expect(button.getAttribute("tabindex")).toBe("-1");
-    expect(button.className).toContain("opacity-0");
-    expect(button.className).toContain("pointer-events-none");
-    expect(button.className).toContain("translate-y-2");
+    expect(button.className).toContain("stg:opacity-0");
+    expect(button.className).toContain("stg:pointer-events-none");
+    expect(button.className).toContain("stg:translate-y-2");
   });
 
   it("calls onClick when clicked in visible state", () => {
@@ -116,6 +116,6 @@ describe("JumpToLatestButton", () => {
     render(<JumpToLatestButton onClick={onClick} visible />);
 
     const button = screen.getByRole("button", { name: "Jump to latest" });
-    expect(button.className).toContain("transition-[opacity,transform]");
+    expect(button.className).toContain("stg:transition-[opacity,transform]");
   });
 });

package/src/internal/file-icons/index.tsx

@@ -70,7 +70,7 @@ export function FileTypeIcon({ fileName }: { readonly fileName: string }): React
       strokeWidth="1.3"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       {/* Every category shares a document outline for a consistent silhouette. */}
@@ -124,7 +124,7 @@ export function FolderTypeIcon({ open = false }: { readonly open?: boolean }): R
       strokeWidth="1.3"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       {open ? (

package/src/internal/file-tree/FileTreeNode.tsx

@@ -118,12 +118,12 @@ export function FileTreeNode({
         draggable={isDraggable}
         onDragStart={isDraggable ? handleDragStart : undefined}
         className={cn(
-          "flex w-full items-center gap-1.5 py-1 text-left text-xs transition-colors",
-          "hover:bg-muted",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          isSelected && !isFolder && "bg-muted text-foreground font-medium",
-          !isSelected && "text-muted-foreground",
-          isDraggable && "cursor-grab active:cursor-grabbing",
+          "stg:flex stg:w-full stg:items-center stg:gap-1.5 stg:py-1 stg:text-left stg:text-xs stg:transition-colors",
+          "stg:hover:bg-muted",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+          isSelected && !isFolder && "stg:bg-muted stg:text-foreground stg:font-medium",
+          !isSelected && "stg:text-muted-foreground",
+          isDraggable && "stg:cursor-grab stg:active:cursor-grabbing",
         )}
         // Indent-guide mode indents via the nested group's margin, so rows need
         // only a small constant inset; padding mode keeps the per-depth inset.
@@ -133,7 +133,7 @@ export function FileTreeNode({
         {isFolder && (
           <span
             aria-hidden="true"
-            className="text-[10px] text-muted-foreground-subtle"
+            className="stg:text-[10px] stg:text-muted-foreground-subtle"
           >
             {expanded ? "▼" : "▶"}
           </span>
@@ -144,14 +144,14 @@ export function FileTreeNode({
           ) : (
             <FileTypeIcon fileName={node.name} />
           ))}
-        <span className={cn("truncate", isFolder && "font-medium text-foreground")}>
+        <span className={cn("stg:truncate", isFolder && "stg:font-medium stg:text-foreground")}>
           {node.name}
         </span>
       </button>
       {isFolder && expanded && node.children && (
         <ul
           role="group"
-          className={cn(indentGuides && "ml-3 border-l border-border")}
+          className={cn(indentGuides && "stg:ml-3 stg:border-l stg:border-border")}
         >
           {node.children.map((child) => (
             <FileTreeNode

package/src/internal/file-tree/__tests__/FileTreeNode-explorer.test.tsx

@@ -81,6 +81,6 @@ describe("FileTreeNode — explorer props", () => {
     );
     // The nested group carries the guide border class.
     const group = container.querySelector('ul[role="group"]');
-    expect(group?.className).toContain("border-l");
+    expect(group?.className).toContain("stg:border-l");
   });
 });