@stigmer/react 3.10.0 → 3.11.0

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

package/src/internal/form-primitives.tsx

@@ -9,25 +9,27 @@ import { cn } from "@stigmer/theme";
 // ---------------------------------------------------------------------------
 
 /**
- * Neutralizes the UA's default `<button>` styling (buttonface background,
- * padding, default cursor). The SDK's scoped preflight in `styles.css`
- * resets only borders/box-sizing; in the console and desktop app the host's
- * global Tailwind preflight covers the rest, but a preflight-less host
- * (docs tours, third-party embeds) would otherwise render every bare button
- * as a gray UA box. Font is NOT reset here — callers that render text set
- * `[font:inherit]` or explicit text utilities themselves.
+ * Pointer cursor for buttons that are styled entirely by their content
+ * (chips, image tiles, icon-only affordances) — surfaces where nothing else
+ * signals clickability.
  *
- * Applies to buttons that are styled entirely by their content (chips,
- * icon-only affordances), not to the themed button components.
+ * This used to also carry `bg-transparent p-0` as a stopgap for
+ * preflight-less hosts; the scoped form-control preflight in `styles.css`
+ * (#374) now neutralizes the UA button box (background, padding, font) for
+ * every button under `.stgm`, so only the cursor remains. The cursor stays
+ * a per-component choice rather than a preflight rule on purpose: Tailwind's
+ * preflight leaves buttons with the default arrow cursor, and the scoped
+ * preflight mirrors it byte-for-byte so embeds render exactly like the
+ * consoles.
  */
-export const UNSTYLED_BUTTON = "cursor-pointer bg-transparent p-0";
+export const UNSTYLED_BUTTON = "stg:cursor-pointer";
 
 /** Standard text-input styling for the operator consoles. */
 export const INPUT_CLASSES = cn(
-  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-  "placeholder:text-muted-foreground",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  "disabled:pointer-events-none disabled:opacity-50",
+  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+  "stg:placeholder:text-muted-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
 );
 
 /** Labelled form field wrapper. */
@@ -43,8 +45,8 @@ export function Field({
   readonly children: React.ReactNode;
 }) {
   return (
-    <label className={cn("block space-y-1", className)}>
-      <span className="text-[11px] font-medium text-muted-foreground">
+    <label className={cn("stg:block stg:space-y-1", className)}>
+      <span className="stg:text-[11px] stg:font-medium stg:text-muted-foreground">
         {label}
         {required ? " *" : ""}
       </span>

package/src/internal/markdown-components.tsx

@@ -157,7 +157,7 @@ function extractMermaidSource(children: ReactNode): string | null {
 export const MARKDOWN_COMPONENTS: Components = {
   p({ children, ...props }: MdProps<"p">) {
     return (
-      <p className="text-sm text-foreground mb-3 last:mb-0 leading-relaxed break-words" {...props}>
+      <p className="stg:text-sm stg:text-foreground stg:mb-3 stg:last:mb-0 stg:leading-relaxed stg:break-words" {...props}>
         {children}
       </p>
     );
@@ -167,7 +167,7 @@ export const MARKDOWN_COMPONENTS: Components = {
     return (
       <a
         href={href}
-        className="text-primary underline underline-offset-2 hover:text-primary-muted break-words"
+        className="stg:text-primary stg:underline stg:underline-offset-2 stg:hover:text-primary-muted stg:break-words"
         target="_blank"
         rel="noopener noreferrer"
         {...props}
@@ -179,7 +179,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   h1({ children, ...props }: MdProps<"h1">) {
     return (
-      <h1 className="text-lg font-semibold text-foreground mt-5 mb-2 first:mt-0 break-words" {...props}>
+      <h1 className="stg:text-lg stg:font-semibold stg:text-foreground stg:mt-5 stg:mb-2 stg:first:mt-0 stg:break-words" {...props}>
         {children}
       </h1>
     );
@@ -187,7 +187,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   h2({ children, ...props }: MdProps<"h2">) {
     return (
-      <h2 className="text-base font-semibold text-foreground mt-5 mb-2 first:mt-0 break-words" {...props}>
+      <h2 className="stg:text-base stg:font-semibold stg:text-foreground stg:mt-5 stg:mb-2 stg:first:mt-0 stg:break-words" {...props}>
         {children}
       </h2>
     );
@@ -195,7 +195,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   h3({ children, ...props }: MdProps<"h3">) {
     return (
-      <h3 className="text-sm font-semibold text-foreground mt-4 mb-1.5 first:mt-0 break-words" {...props}>
+      <h3 className="stg:text-sm stg:font-semibold stg:text-foreground stg:mt-4 stg:mb-1.5 stg:first:mt-0 stg:break-words" {...props}>
         {children}
       </h3>
     );
@@ -203,7 +203,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   h4({ children, ...props }: MdProps<"h4">) {
     return (
-      <h4 className="text-sm font-medium text-foreground mt-3 mb-1 first:mt-0 break-words" {...props}>
+      <h4 className="stg:text-sm stg:font-medium stg:text-foreground stg:mt-3 stg:mb-1 stg:first:mt-0 stg:break-words" {...props}>
         {children}
       </h4>
     );
@@ -211,7 +211,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   ul({ children, ...props }: MdProps<"ul">) {
     return (
-      <ul className="list-disc pl-5 mb-3 last:mb-0 space-y-1 text-sm text-foreground" {...props}>
+      <ul className="stg:list-disc stg:pl-5 stg:mb-3 stg:last:mb-0 stg:space-y-1 stg:text-sm stg:text-foreground" {...props}>
         {children}
       </ul>
     );
@@ -219,7 +219,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   ol({ children, ...props }: MdProps<"ol">) {
     return (
-      <ol className="list-decimal pl-5 mb-3 last:mb-0 space-y-1 text-sm text-foreground" {...props}>
+      <ol className="stg:list-decimal stg:pl-5 stg:mb-3 stg:last:mb-0 stg:space-y-1 stg:text-sm stg:text-foreground" {...props}>
         {children}
       </ol>
     );
@@ -227,7 +227,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   li({ children, ...props }: MdProps<"li">) {
     return (
-      <li className="leading-relaxed break-words" {...props}>
+      <li className="stg:leading-relaxed stg:break-words" {...props}>
         {children}
       </li>
     );
@@ -245,7 +245,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
     return (
       <pre
-        className="mb-3 last:mb-0 overflow-x-auto rounded-md bg-muted p-3"
+        className="stg:mb-3 stg:last:mb-0 stg:overflow-x-auto stg:rounded-md stg:bg-muted stg:p-3"
         {...props}
       >
         {children}
@@ -272,7 +272,7 @@ export const MARKDOWN_COMPONENTS: Components = {
       return (
         <code
           className={cn(
-            "hljs font-mono text-xs text-foreground",
+            "hljs stg:font-mono stg:text-xs stg:text-foreground",
             codeClassName,
           )}
           {...props}
@@ -284,7 +284,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
     return (
       <code
-        className="font-mono text-xs bg-muted px-1 py-0.5 rounded text-foreground break-words"
+        className="stg:font-mono stg:text-xs stg:bg-muted stg:px-1 stg:py-0.5 stg:rounded stg:text-foreground stg:break-words"
         {...props}
       >
         {children}
@@ -295,7 +295,7 @@ export const MARKDOWN_COMPONENTS: Components = {
   blockquote({ children, ...props }: MdProps<"blockquote">) {
     return (
       <blockquote
-        className="border-l-2 border-border pl-4 mb-3 last:mb-0 text-muted-foreground italic"
+        className="stg:border-l-2 stg:border-border stg:pl-4 stg:mb-3 stg:last:mb-0 stg:text-muted-foreground stg:italic"
         {...props}
       >
         {children}
@@ -305,8 +305,8 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   table({ children, ...props }: MdProps<"table">) {
     return (
-      <div className="mb-3 last:mb-0 overflow-x-auto">
-        <table className="w-full border-collapse text-sm" {...props}>
+      <div className="stg:mb-3 stg:last:mb-0 stg:overflow-x-auto">
+        <table className="stg:w-full stg:border-collapse stg:text-sm" {...props}>
           {children}
         </table>
       </div>
@@ -316,7 +316,7 @@ export const MARKDOWN_COMPONENTS: Components = {
   th({ children, ...props }: MdProps<"th">) {
     return (
       <th
-        className="border border-border px-3 py-1.5 text-left font-medium text-foreground bg-muted-subtle"
+        className="stg:border stg:border-border stg:px-3 stg:py-1.5 stg:text-left stg:font-medium stg:text-foreground stg:bg-muted-subtle"
         {...props}
       >
         {children}
@@ -326,19 +326,19 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   td({ children, ...props }: MdProps<"td">) {
     return (
-      <td className="border border-border px-3 py-1.5 text-foreground" {...props}>
+      <td className="stg:border stg:border-border stg:px-3 stg:py-1.5 stg:text-foreground" {...props}>
         {children}
       </td>
     );
   },
 
   hr(props: MdProps<"hr">) {
-    return <hr className="my-4 border-border" {...props} />;
+    return <hr className="stg:my-4 stg:border-border" {...props} />;
   },
 
   strong({ children, ...props }: MdProps<"strong">) {
     return (
-      <strong className="font-semibold text-foreground" {...props}>
+      <strong className="stg:font-semibold stg:text-foreground" {...props}>
         {children}
       </strong>
     );
@@ -346,7 +346,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   em({ children, ...props }: MdProps<"em">) {
     return (
-      <em className="italic" {...props}>
+      <em className="stg:italic" {...props}>
         {children}
       </em>
     );
@@ -370,7 +370,7 @@ export const PLAN_DOCUMENT_MARKDOWN_COMPONENTS: Components = {
 
   h1({ children, ...props }: MdProps<"h1">) {
     return (
-      <h1 className="text-lg font-semibold text-foreground mt-6 mb-3 first:mt-0 break-words" {...props}>
+      <h1 className="stg:text-lg stg:font-semibold stg:text-foreground stg:mt-6 stg:mb-3 stg:first:mt-0 stg:break-words" {...props}>
         {children}
       </h1>
     );
@@ -379,7 +379,7 @@ export const PLAN_DOCUMENT_MARKDOWN_COMPONENTS: Components = {
   h2({ children, ...props }: MdProps<"h2">) {
     return (
       <h2
-        className="text-base font-semibold text-foreground mt-6 mb-2.5 pb-1 border-b border-border-muted first:mt-0 break-words"
+        className="stg:text-base stg:font-semibold stg:text-foreground stg:mt-6 stg:mb-2.5 stg:pb-1 stg:border-b stg:border-border-muted stg:first:mt-0 stg:break-words"
         {...props}
       >
         {children}
@@ -389,7 +389,7 @@ export const PLAN_DOCUMENT_MARKDOWN_COMPONENTS: Components = {
 
   h3({ children, ...props }: MdProps<"h3">) {
     return (
-      <h3 className="text-sm font-semibold text-foreground mt-5 mb-2 first:mt-0 break-words" {...props}>
+      <h3 className="stg:text-sm stg:font-semibold stg:text-foreground stg:mt-5 stg:mb-2 stg:first:mt-0 stg:break-words" {...props}>
         {children}
       </h3>
     );
@@ -397,7 +397,7 @@ export const PLAN_DOCUMENT_MARKDOWN_COMPONENTS: Components = {
 
   h4({ children, ...props }: MdProps<"h4">) {
     return (
-      <h4 className="text-sm font-medium text-foreground mt-4 mb-1.5 first:mt-0 break-words" {...props}>
+      <h4 className="stg:text-sm stg:font-medium stg:text-foreground stg:mt-4 stg:mb-1.5 stg:first:mt-0 stg:break-words" {...props}>
         {children}
       </h4>
     );

package/src/internal/menu.tsx

@@ -41,7 +41,7 @@ function MenuContent({
   return (
     <MenuPrimitive.Portal container={portalContainer}>
       <MenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
+        className="stg:isolate stg:z-50 stg:outline-none"
         align={align}
         alignOffset={alignOffset}
         side={side}
@@ -49,11 +49,11 @@ function MenuContent({
       >
         <MenuPrimitive.Popup
           className={cn(
-            "bg-popover text-popover-foreground ring-foreground/10",
-            "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden",
+            "stg:bg-popover stg:text-popover-foreground stg:ring-foreground/10",
+            "stg:data-[side=bottom]:slide-in-from-top-2 stg:data-[side=inline-end]:slide-in-from-left-2 stg:data-[side=inline-start]:slide-in-from-right-2 stg:data-[side=left]:slide-in-from-right-2 stg:data-[side=right]:slide-in-from-left-2 stg:data-[side=top]:slide-in-from-bottom-2",
+            "stg:data-open:animate-in stg:data-open:fade-in-0 stg:data-open:zoom-in-95",
+            "stg:data-closed:animate-out stg:data-closed:fade-out-0 stg:data-closed:zoom-out-95",
+            "stg:z-50 stg:max-h-(--available-height) stg:w-(--anchor-width) stg:min-w-32 stg:origin-(--transform-origin) stg:overflow-x-hidden stg:overflow-y-auto stg:rounded-lg stg:p-1 stg:shadow-md stg:ring-1 stg:duration-100 stg:outline-none stg:data-closed:overflow-hidden",
             className,
           )}
           {...props}
@@ -74,11 +74,11 @@ function MenuItem({
     <MenuPrimitive.Item
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground",
-        "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive",
-        "relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "stg:focus:bg-accent stg:focus:text-accent-foreground stg:not-data-[variant=destructive]:focus:**:text-accent-foreground",
+        "stg:data-[variant=destructive]:text-destructive stg:data-[variant=destructive]:focus:bg-destructive-subtle stg:data-[variant=destructive]:focus:text-destructive stg:data-[variant=destructive]:*:[svg]:text-destructive",
+        "stg:relative stg:flex stg:cursor-default stg:items-center stg:gap-1.5 stg:rounded-md stg:px-1.5 stg:py-1 stg:text-sm stg:outline-hidden stg:select-none",
+        "stg:data-disabled:pointer-events-none stg:data-disabled:opacity-50",
+        "stg:[&_svg]:pointer-events-none stg:[&_svg]:shrink-0 stg:[&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -98,15 +98,15 @@ function MenuRadioItem({
   return (
     <MenuPrimitive.RadioItem
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground",
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "stg:focus:bg-accent stg:focus:text-accent-foreground stg:focus:**:text-accent-foreground",
+        "stg:relative stg:flex stg:cursor-default stg:items-center stg:gap-1.5 stg:rounded-md stg:py-1 stg:pr-8 stg:pl-1.5 stg:text-sm stg:outline-hidden stg:select-none",
+        "stg:data-disabled:pointer-events-none stg:data-disabled:opacity-50",
+        "stg:[&_svg]:pointer-events-none stg:[&_svg]:shrink-0 stg:[&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
     >
-      <span className="pointer-events-none absolute right-2 flex items-center justify-center">
+      <span className="stg:pointer-events-none stg:absolute stg:right-2 stg:flex stg:items-center stg:justify-center">
         <MenuPrimitive.RadioItemIndicator>
           <CheckIcon />
         </MenuPrimitive.RadioItemIndicator>
@@ -122,7 +122,7 @@ function MenuSeparator({
 }: MenuPrimitive.Separator.Props) {
   return (
     <MenuPrimitive.Separator
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("stg:bg-border stg:-mx-1 stg:my-1 stg:h-px", className)}
       {...props}
     />
   );
@@ -142,7 +142,7 @@ function MenuLabel({
   return (
     <span
       className={cn(
-        "text-muted-foreground block px-1.5 py-1 text-[11px] font-medium uppercase tracking-wider select-none",
+        "stg:text-muted-foreground stg:block stg:px-1.5 stg:py-1 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:select-none",
         className,
       )}
       {...props}

package/src/internal/scroll-area.tsx

@@ -19,12 +19,12 @@ function ScrollArea({
   return (
     <div
       className={cn(
-        "relative overflow-auto",
-        "[scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent]",
-        "[&::-webkit-scrollbar]:w-2.5",
-        "[&::-webkit-scrollbar-track]:bg-transparent",
-        "[&::-webkit-scrollbar-thumb]:rounded-full",
-        "[&::-webkit-scrollbar-thumb]:bg-border",
+        "stg:relative stg:overflow-auto",
+        "stg:[scrollbar-width:thin] stg:[scrollbar-color:var(--color-border)_transparent]",
+        "stg:[&::-webkit-scrollbar]:w-2.5",
+        "stg:[&::-webkit-scrollbar-track]:bg-transparent",
+        "stg:[&::-webkit-scrollbar-thumb]:rounded-full",
+        "stg:[&::-webkit-scrollbar-thumb]:bg-border",
         className,
       )}
       {...props}

package/src/internal/thread-card/ThreadCardShell.tsx

@@ -78,11 +78,11 @@ export function ThreadCardShell({
         // border-prominent (not border): a transparent card needs a line the
         // eye actually catches — the default border token is white at 14%
         // opacity, which vanishes on the dark thread surface.
-        "rounded-lg border border-border-prominent overflow-hidden",
-        accent === "warning" && "border-l-2 border-l-warning",
-        accent === "destructive" && "border-l-2 border-l-destructive",
+        "stg:rounded-lg stg:border stg:border-border-prominent stg:overflow-hidden",
+        accent === "warning" && "stg:border-l-2 stg:border-l-warning",
+        accent === "destructive" && "stg:border-l-2 stg:border-l-destructive",
       )
-    : "border-b border-border-muted last:border-b-0";
+    : "stg:border-b stg:border-border-muted stg:last:border-b-0";
 
   return (
     <div ref={ref} data-cursor-target={cursorTarget} className={cn(chrome, className)}>
@@ -118,13 +118,13 @@ export interface ThreadCardHeaderProps {
   readonly children: ReactNode;
 }
 
-const HEADER_LAYOUT = "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs";
+const HEADER_LAYOUT = "stg:flex stg:w-full stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-xs";
 
 const HEADER_INTERACTIVE = cn(
-  "cursor-pointer text-left transition-colors",
-  "hover:bg-muted-subtle",
+  "stg:cursor-pointer stg:text-left stg:transition-colors",
+  "stg:hover:bg-muted-subtle",
   // ring-inset so the card's overflow-hidden does not clip the focus ring.
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
 );
 
 /** The thread card's one-line header. See the module doc for the contract. */
@@ -157,7 +157,7 @@ export function ThreadCardHeader({
       className={cn(
         HEADER_LAYOUT,
         HEADER_INTERACTIVE,
-        gesture.expanded && "bg-muted-faint",
+        gesture.expanded && "stg:bg-muted-faint",
       )}
     >
       {children}
@@ -182,7 +182,7 @@ export interface ThreadCardBodyProps {
 /** The thread card's body padding contract. */
 export function ThreadCardBody({ id, cursorTarget, children }: ThreadCardBodyProps) {
   return (
-    <div id={id} data-cursor-target={cursorTarget} className="px-2.5 pb-2.5 pt-1">
+    <div id={id} data-cursor-target={cursorTarget} className="stg:px-2.5 stg:pb-2.5 stg:pt-1">
       {children}
     </div>
   );

package/src/internal/thread-card/glyphs.tsx

@@ -16,7 +16,7 @@ import { cn } from "@stigmer/theme";
 /** Quarter-arc spinner for an in-flight item. */
 export function SpinnerIcon() {
   return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="animate-spin">
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="stg:animate-spin">
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
     </svg>
   );
@@ -97,8 +97,8 @@ export function ChevronIcon({ expanded }: { readonly expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 text-muted-foreground transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:text-muted-foreground stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >

package/src/internal/tooltip.tsx

@@ -40,23 +40,21 @@ function TooltipContent({
   const portalContainer = useStigmerPortalContainer();
 
   return (
-    // `?? undefined`, never a raw null: Base UI treats an EXPLICIT null
-    // container as "wait for one" and renders the popup nowhere, while
-    // undefined falls back to document.body — the standalone behavior
-    // `useStigmerPortalContainer` documents. Without the coalesce, a
-    // tooltip outside a StigmerProvider opens invisibly.
-    <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+    // Raw pass-through, no coalescing: the hook's three-state return
+    // (undefined / null / element) maps exactly onto Base UI's
+    // `container` semantics — see `useStigmerPortalContainer`.
+    <TooltipPrimitive.Portal container={portalContainer}>
       <TooltipPrimitive.Positioner
-        className="isolate z-50 outline-none"
+        className="stg:isolate stg:z-50 stg:outline-none"
         side={side}
         sideOffset={sideOffset}
       >
         <TooltipPrimitive.Popup
           className={cn(
-            "bg-popover text-popover-foreground ring-foreground/10 z-50 max-w-64 rounded-lg px-2.5 py-1.5 text-sm shadow-md ring-1",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "duration-100",
+            "stg:bg-popover stg:text-popover-foreground stg:ring-foreground/10 stg:z-50 stg:max-w-64 stg:rounded-lg stg:px-2.5 stg:py-1.5 stg:text-sm stg:shadow-md stg:ring-1",
+            "stg:data-open:animate-in stg:data-open:fade-in-0 stg:data-open:zoom-in-95",
+            "stg:data-closed:animate-out stg:data-closed:fade-out-0 stg:data-closed:zoom-out-95",
+            "stg:duration-100",
             className,
           )}
           {...props}