@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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/__tests__/truncated-text.layout.test.tsx

@@ -0,0 +1,68 @@
+// TruncatedText's overflow gating in a real Chromium (stigmer-cloud#268).
+// The native `title` idiom this helper replaced fired whether or not the
+// text was actually clipped; the helper opens the house tooltip ONLY when
+// CSS truncation really happened. That distinction is a layout fact —
+// happy-dom reports zero geometry — so only a real browser can pin it.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { userEvent } from "@vitest/browser/context";
+import type { ReactElement } from "react";
+import { TruncatedText } from "../truncated-text.js";
+
+const LONG = "a-very-long-model-identifier/that-cannot-fit-in-eighty-pixels";
+const SHORT = "fits";
+
+/** A themed, hard-sized cell so truncation geometry is real. */
+function renderInCell(ui: ReactElement, width: string) {
+  const cell = document.createElement("div");
+  cell.className = "stgm";
+  cell.style.width = width;
+  cell.style.display = "block";
+  document.body.appendChild(cell);
+  render(ui, { container: cell });
+  return cell;
+}
+
+function portaledText(cell: HTMLElement): string {
+  return Array.from(document.body.children)
+    .filter((node) => node !== cell)
+    .map((node) => node.textContent ?? "")
+    .join(" ");
+}
+
+afterEach(() => {
+  cleanup();
+  document.querySelectorAll(".stgm").forEach((node) => node.remove());
+});
+
+describe("TruncatedText overflow gating", () => {
+  it("reveals the full value on hover when the text is actually clipped", async () => {
+    const cell = renderInCell(<TruncatedText text={LONG} />, "80px");
+    expect(cell.querySelector("[title]")).toBeNull();
+
+    const span = cell.querySelector("span");
+    expect(span!.scrollWidth).toBeGreaterThan(span!.clientWidth);
+
+    await userEvent.hover(span!);
+    await vi.waitFor(
+      () => expect(portaledText(cell)).toContain(LONG),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(span!);
+  });
+
+  it("stays quiet when nothing is clipped — the tooltip would only repeat the cell", async () => {
+    const cell = renderInCell(<TruncatedText text={SHORT} />, "300px");
+
+    const span = cell.querySelector("span");
+    await userEvent.hover(span!);
+    // Base UI's default open delay is 600ms; wait past it and assert the
+    // portal never produced the tooltip.
+    await new Promise((resolve) => setTimeout(resolve, 1200));
+    expect(portaledText(cell)).not.toContain(SHORT);
+    await userEvent.unhover(span!);
+  });
+});

package/src/internal/__tests__/truncated-text.test.tsx

@@ -0,0 +1,33 @@
+// Fast structural pins for TruncatedText (the native-title sweep's
+// truncation replacement, stigmer-cloud#268). Happy-dom can honestly pin
+// the STRUCTURE — full text in the DOM, zero native titles, zero new tab
+// stops; the overflow-gated REVEAL needs real layout and lives in
+// truncated-text.layout.test.tsx.
+
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup, screen } from "@testing-library/react";
+import { TruncatedText } from "../truncated-text.js";
+
+afterEach(cleanup);
+
+describe("TruncatedText", () => {
+  it("renders the full text in the DOM with no native title and no tab stop", () => {
+    render(<TruncatedText text="models/anthropic/claude-4.6-opus" />);
+
+    // CSS truncation is purely visual: screen readers and selection get
+    // the full value from the DOM, so no sr-only duplicate is needed.
+    const span = screen.getByText("models/anthropic/claude-4.6-opus");
+    expect(span.closest("[title]")).toBeNull();
+    expect(span.closest("[tabindex]")).toBeNull();
+  });
+
+  it("applies stg:truncate by default and yields to a line-clamp class", () => {
+    const { rerender } = render(<TruncatedText text="abc" />);
+    expect(screen.getByText("abc").className).toContain("stg:truncate");
+
+    rerender(<TruncatedText text="abc" className="stg:line-clamp-2" />);
+    const clamped = screen.getByText("abc");
+    expect(clamped.className).toContain("stg:line-clamp-2");
+    expect(clamped.className).not.toContain("stg:truncate");
+  });
+});

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}