@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/execution/tool-rendering-primitives.tsx

@@ -43,9 +43,9 @@ export function CollapsibleCode({ label, content, className }: CollapsibleCodePr
       : content;
 
   return (
-    <div className={cn("space-y-1", className)}>
-      <span className="font-medium text-muted-foreground">{label}</span>
-      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-foreground">
+    <div className={cn("stg:space-y-1", className)}>
+      <span className="stg:font-medium stg:text-muted-foreground">{label}</span>
+      <pre className="stg:max-h-80 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:font-mono stg:text-foreground">
         {displayContent}
       </pre>
       {needsTruncation && (
@@ -92,7 +92,7 @@ export function CollapsiblePre({ content, className }: CollapsiblePreProps) {
 
   return (
     <>
-      <pre className={cn("whitespace-pre-wrap break-words font-mono", className)}>
+      <pre className={cn("stg:whitespace-pre-wrap stg:break-words stg:font-mono", className)}>
         {displayContent}
       </pre>
       {needsTruncation && (
@@ -129,11 +129,11 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
   const isLong = lines.length > 3;
 
   return (
-    <div className="space-y-1">
+    <div className="stg:space-y-1">
       <button
         type="button"
         onClick={() => setIsExpanded((v) => !v)}
-        className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+        className="stg:flex stg:items-center stg:gap-1 stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground"
       >
         <svg
           width="8"
@@ -145,8 +145,8 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
           strokeLinecap="round"
           strokeLinejoin="round"
           className={cn(
-            "shrink-0 transition-transform duration-150",
-            isExpanded && "rotate-90",
+            "stg:shrink-0 stg:transition-transform stg:duration-150",
+            isExpanded && "stg:rotate-90",
           )}
           aria-hidden="true"
         >
@@ -154,13 +154,13 @@ export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockPro
         </svg>
         {label}
         {!isExpanded && isLong && (
-          <span className="font-normal text-muted-foreground-subtle">
+          <span className="stg:font-normal stg:text-muted-foreground-subtle">
             ({lines.length} lines)
           </span>
         )}
       </button>
       {isExpanded && (
-        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-foreground">
+        <pre className="stg:max-h-80 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:font-mono stg:text-foreground">
           {content}
         </pre>
       )}
@@ -184,7 +184,7 @@ export function FilePathIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M7 1H3C2.45 1 2 1.45 2 2V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V4L7 1Z" />
@@ -205,7 +205,7 @@ export function McpServerIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <circle cx="6" cy="3" r="1.5" />

package/src/feedback/StigmerToaster.tsx

@@ -27,16 +27,19 @@ export function StigmerToaster(props: StigmerToasterProps) {
       theme={colorMode}
       position="top-right"
       richColors
-      className="toaster group"
+      className="toaster stg:group"
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
+            // `toast` is sonner's own class (referenced by the group-[.toast]
+            // variants below); `stg:group` is OUR marker so those variants
+            // resolve against `.stg\:group` in the prefixed build.
+            "stg:group toast stg:group-[.toaster]:bg-background stg:group-[.toaster]:text-foreground stg:group-[.toaster]:border-border stg:group-[.toaster]:shadow-lg",
+          description: "stg:group-[.toast]:text-muted-foreground",
           actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+            "stg:group-[.toast]:bg-primary stg:group-[.toast]:text-primary-foreground",
           cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            "stg:group-[.toast]:bg-muted stg:group-[.toast]:text-muted-foreground",
         },
       }}
       {...props}

package/src/file-reference/FileReferenceChipList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link FileReferenceChipList}. */
 export interface FileReferenceChipListProps {
@@ -51,7 +52,7 @@ export function FileReferenceChipList({
 
   return (
     <div
-      className={cn("flex flex-wrap gap-1.5", className)}
+      className={cn("stg:flex stg:flex-wrap stg:gap-1.5", className)}
       role="list"
       aria-label="Referenced workspace files"
     >
@@ -83,24 +84,35 @@ function FileReferenceChip({
   const filename = path.split("/").pop() ?? path;
 
   return (
-    <span
-      role="listitem"
-      aria-label={`Referenced file: ${path}`}
-      title={path}
-      className="inline-flex max-w-[200px] items-center gap-1 rounded-md bg-muted-subtle px-2 py-0.5 text-xs text-foreground"
-    >
-      <FileRefIcon />
-      <span className="truncate">{filename}</span>
-      <button
-        type="button"
-        onClick={onRemove}
-        disabled={disabled}
-        className="ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
-        aria-label={`Remove reference to ${path}`}
+    // The chip shows only the basename; the tooltip restores the full path,
+    // so it is a hover-always hint on the chip, not an overflow-gated
+    // TruncatedText.
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            role="listitem"
+            aria-label={`Referenced file: ${path}`}
+            className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:gap-1 stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
+          />
+        }
       >
-        <XIcon />
-      </button>
-    </span>
+        <FileRefIcon />
+        <span className="stg:truncate">{filename}</span>
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={disabled}
+          className="stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
+          aria-label={`Remove reference to ${path}`}
+        >
+          <XIcon />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {path}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -119,7 +131,7 @@ function FileRefIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-accent-foreground"
+      className="stg:shrink-0 stg:text-accent-foreground"
       aria-hidden="true"
     >
       <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />

package/src/file-reference/__tests__/FileReferenceChipList.test.tsx

@@ -80,7 +80,7 @@ describe("FileReferenceChipList", () => {
     expect(list.getAttribute("aria-label")).toBe("Referenced workspace files");
   });
 
-  it("sets title attribute on chip for full path tooltip", () => {
+  it("keeps the chip free of native titles — the full path rides the house tooltip", () => {
     render(
       <FileReferenceChipList
         refs={["src/deeply/nested/file.ts"]}
@@ -89,6 +89,9 @@ describe("FileReferenceChipList", () => {
     );
 
     const item = screen.getByRole("listitem");
-    expect(item.getAttribute("title")).toBe("src/deeply/nested/file.ts");
+    expect(item.getAttribute("title")).toBeNull();
+    // The basename stays visible; the full path is the tooltip's content
+    // (reveal pinned in the real-browser suites).
+    expect(item.textContent).toContain("file.ts");
   });
 });

package/src/github/GitHubRepoPicker.tsx

@@ -126,7 +126,7 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, idx)}
-      <span className="text-foreground font-medium">
+      <span className="stg:text-foreground stg:font-medium">
         {text.slice(idx, idx + query.length)}
       </span>
       {text.slice(idx + query.length)}
@@ -381,8 +381,8 @@ export function GitHubRepoPicker({
   // --- Branch selection view ---
   if (selectedRepo) {
     return (
-      <div className={["space-y-2", className].filter(Boolean).join(" ")}>
-        <div className="flex items-center gap-2 text-xs text-foreground">
+      <div className={["stg:space-y-2", className].filter(Boolean).join(" ")}>
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-foreground">
           <button
             type="button"
             onClick={() => {
@@ -390,29 +390,29 @@ export function GitHubRepoPicker({
               setBranches([]);
               setTimeout(() => searchRef.current?.focus(), 0);
             }}
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
             aria-label="Back to repo list"
           >
             <ChevronLeftIcon />
           </button>
-          <span className="font-medium truncate">
+          <span className="stg:font-medium stg:truncate">
             {selectedRepo.owner}/{selectedRepo.name}
           </span>
         </div>
 
-        <div className="space-y-1.5">
-          <label className="text-[0.65rem] text-muted-foreground">
+        <div className="stg:space-y-1.5">
+          <label className="stg:text-[0.65rem] stg:text-muted-foreground">
             Branch
           </label>
           {loadingBranches ? (
-            <div className="text-xs text-muted-foreground">
+            <div className="stg:text-xs stg:text-muted-foreground">
               Loading branches...
             </div>
           ) : (
             <select
               value={selectedBranch}
               onChange={(e) => setSelectedBranch(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="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:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
             >
               {branches.map((b) => (
                 <option key={b.name} value={b.name}>
@@ -423,12 +423,12 @@ export function GitHubRepoPicker({
           )}
         </div>
 
-        <div className="flex justify-end">
+        <div className="stg:flex stg:justify-end">
           <button
             type="button"
             onClick={handleAdd}
             disabled={!selectedBranch}
-            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
+            className="stg:rounded-md stg:bg-primary stg:px-2.5 stg:py-1 stg:text-xs stg:text-primary-foreground stg:hover:bg-primary-hover stg:transition-colors stg:disabled:opacity-40"
           >
             Add
           </button>
@@ -440,20 +440,20 @@ export function GitHubRepoPicker({
   // --- Manual URL entry view ---
   if (showManualEntry) {
     return (
-      <div className={["space-y-2", className].filter(Boolean).join(" ")}>
-        <div className="flex items-center gap-2 text-xs text-foreground">
+      <div className={["stg:space-y-2", className].filter(Boolean).join(" ")}>
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-foreground">
           <button
             type="button"
             onClick={() => {
               setShowManualEntry(false);
               setTimeout(() => searchRef.current?.focus(), 0);
             }}
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
             aria-label="Back to repo list"
           >
             <ChevronLeftIcon />
           </button>
-          <span className="font-medium">Paste a repository URL</span>
+          <span className="stg:font-medium">Paste a repository URL</span>
         </div>
 
         <input
@@ -462,7 +462,7 @@ export function GitHubRepoPicker({
           value={manualUrl}
           onChange={(e) => setManualUrl(e.target.value)}
           onKeyDown={handleManualKeyDown}
-          className="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-2 focus-visible:ring-ring"
+          className="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-2 stg:focus-visible:ring-ring"
           autoFocus
         />
         <input
@@ -471,15 +471,15 @@ export function GitHubRepoPicker({
           value={manualBranch}
           onChange={(e) => setManualBranch(e.target.value)}
           onKeyDown={handleManualKeyDown}
-          className="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-2 focus-visible:ring-ring"
+          className="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-2 stg:focus-visible:ring-ring"
         />
 
-        <div className="flex justify-end">
+        <div className="stg:flex stg:justify-end">
           <button
             type="button"
             onClick={handleManualAdd}
             disabled={!manualUrl.trim()}
-            className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
+            className="stg:rounded-md stg:bg-primary stg:px-2.5 stg:py-1 stg:text-xs stg:text-primary-foreground stg:hover:bg-primary-hover stg:transition-colors stg:disabled:opacity-40"
           >
             Add
           </button>
@@ -499,18 +499,18 @@ export function GitHubRepoPicker({
   // --- Main repo list view ---
   return (
     <div
-      className={["space-y-1.5", className].filter(Boolean).join(" ")}
+      className={["stg:space-y-1.5", className].filter(Boolean).join(" ")}
     >
       {/* Mode toggle */}
-      <div className="flex rounded-md border border-border bg-muted-faint p-0.5">
+      <div className="stg:flex stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:p-0.5">
         <button
           type="button"
           onClick={() => handleModeSwitch("my-repos")}
           className={[
-            "flex-1 rounded px-2 py-1 text-[0.65rem] font-medium transition-colors",
+            "stg:flex-1 stg:rounded stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
             mode === "my-repos"
-              ? "bg-background text-foreground shadow-sm"
-              : "text-muted-foreground hover:text-foreground",
+              ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+              : "stg:text-muted-foreground stg:hover:text-foreground",
           ].join(" ")}
         >
           My Repos
@@ -519,10 +519,10 @@ export function GitHubRepoPicker({
           type="button"
           onClick={() => handleModeSwitch("all-github")}
           className={[
-            "flex-1 rounded px-2 py-1 text-[0.65rem] font-medium transition-colors",
+            "stg:flex-1 stg:rounded stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
             mode === "all-github"
-              ? "bg-background text-foreground shadow-sm"
-              : "text-muted-foreground hover:text-foreground",
+              ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+              : "stg:text-muted-foreground stg:hover:text-foreground",
           ].join(" ")}
         >
           All GitHub
@@ -547,21 +547,21 @@ export function GitHubRepoPicker({
         value={activeSearch}
         onChange={(e) => setActiveSearch(e.target.value)}
         onKeyDown={handleSearchKeyDown}
-        className="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-2 focus-visible:ring-ring"
+        className="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-2 stg:focus-visible:ring-ring"
         autoFocus
       />
 
       {activeError && (
-        <p className="text-xs text-destructive">
+        <p className="stg:text-xs stg:text-destructive">
           {activeError}
         </p>
       )}
 
       {/* Scrollable repo list with scroll shadows */}
-      <div className="relative">
+      <div className="stg:relative">
         {canScrollUp && (
           <div
-            className="absolute inset-x-0 top-0 h-3 z-10 pointer-events-none"
+            className="stg:absolute stg:inset-x-0 stg:top-0 stg:h-3 stg:z-10 stg:pointer-events-none"
             style={{
               background:
                 "linear-gradient(to bottom, var(--color-card, hsl(0 0% 9%)), transparent)",
@@ -574,7 +574,7 @@ export function GitHubRepoPicker({
           id={LIST_ID}
           role="listbox"
           aria-label="Repositories"
-          className="max-h-64 overflow-y-auto"
+          className="stg:max-h-64 stg:overflow-y-auto"
         >
           {mode === "my-repos" ? (
             <MyReposList
@@ -603,7 +603,7 @@ export function GitHubRepoPicker({
 
         {canScrollDown && (
           <div
-            className="absolute inset-x-0 bottom-0 h-3 z-10 pointer-events-none"
+            className="stg:absolute stg:inset-x-0 stg:bottom-0 stg:h-3 stg:z-10 stg:pointer-events-none"
             style={{
               background:
                 "linear-gradient(to top, var(--color-card, hsl(0 0% 9%)), transparent)",
@@ -613,20 +613,20 @@ export function GitHubRepoPicker({
       </div>
 
       {/* Footer: manual URL + manage access */}
-      <div className="flex items-center gap-3 border-t border-border pt-1.5 text-[0.65rem] text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:gap-3 stg:border-t stg:border-border stg:pt-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
         <button
           type="button"
           onClick={() => setShowManualEntry(true)}
-          className="hover:text-foreground transition-colors"
+          className="stg:hover:text-foreground stg:transition-colors"
         >
           Paste a URL
         </button>
-        <span className="opacity-30">·</span>
+        <span className="stg:opacity-30">·</span>
         <a
           href={GITHUB_INSTALLATIONS_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:text-foreground transition-colors"
+          className="stg:hover:text-foreground stg:transition-colors"
         >
           Manage access
         </a>
@@ -662,7 +662,7 @@ function MyReposList({
 
   if (flatItems.length === 0) {
     return (
-      <div className="py-4 text-center text-xs text-muted-foreground">
+      <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
         {search ? "No repos match your search" : "No repositories found"}
       </div>
     );
@@ -672,10 +672,10 @@ function MyReposList({
     <>
       {groups.map((group, gi) => (
         <div key={group.key}>
-          <div className="sticky top-0 z-[1] bg-card px-2 py-1 text-[0.65rem] font-medium text-muted-foreground backdrop-blur-sm">
+          <div className="stg:sticky stg:top-0 stg:z-[1] stg:bg-card stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground stg:backdrop-blur-sm">
             {group.label}
             {!group.isRecent && (
-              <span className="ml-1 opacity-50">
+              <span className="stg:ml-1 stg:opacity-50">
                 ({group.repos.length})
               </span>
             )}
@@ -699,7 +699,7 @@ function MyReposList({
       ))}
 
       {isBackgroundLoading && (
-        <div className="py-1 text-center text-[0.6rem] text-muted-foreground">
+        <div className="stg:py-1 stg:text-center stg:text-[0.6rem] stg:text-muted-foreground">
           Loading more...
         </div>
       )}
@@ -732,7 +732,7 @@ function SearchResultsList({
 }) {
   if (!query) {
     return (
-      <div className="py-6 text-center text-xs text-muted-foreground">
+      <div className="stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
         Type to search all of GitHub
       </div>
     );
@@ -744,7 +744,7 @@ function SearchResultsList({
 
   if (results.length === 0) {
     return (
-      <div className="py-4 text-center text-xs text-muted-foreground">
+      <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
         No repositories found
       </div>
     );
@@ -753,7 +753,7 @@ function SearchResultsList({
   return (
     <>
       {totalCount > 0 && (
-        <div className="px-2 py-1 text-[0.6rem] text-muted-foreground">
+        <div className="stg:px-2 stg:py-1 stg:text-[0.6rem] stg:text-muted-foreground">
           {totalCount.toLocaleString()} {totalCount === 1 ? "result" : "results"}
         </div>
       )}
@@ -771,7 +771,7 @@ function SearchResultsList({
       ))}
 
       {isSearching && (
-        <div className="py-1 text-center text-[0.6rem] text-muted-foreground">
+        <div className="stg:py-1 stg:text-center stg:text-[0.6rem] stg:text-muted-foreground">
           Searching...
         </div>
       )}
@@ -780,7 +780,7 @@ function SearchResultsList({
         <button
           type="button"
           onClick={onLoadMore}
-          className="w-full py-1.5 text-center text-[0.65rem] text-muted-foreground hover:text-foreground transition-colors"
+          className="stg:w-full stg:py-1.5 stg:text-center stg:text-[0.65rem] stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
         >
           Load more results
         </button>
@@ -815,18 +815,18 @@ function RepoRow({
       data-idx={flatIdx}
       onClick={() => onClick(repo)}
       className={[
-        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
+        "stg:flex stg:w-full stg:items-center stg:gap-2 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
         flatIdx === focusIndex
-          ? "bg-accent text-foreground"
-          : "text-foreground hover:bg-accent-hover",
+          ? "stg:bg-accent stg:text-foreground"
+          : "stg:text-foreground stg:hover:bg-accent-hover",
       ].join(" ")}
       role="option"
       aria-selected={flatIdx === focusIndex}
     >
-      <span className="min-w-0 flex-1 truncate">
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate">
         <HighlightMatch text={displayName} query={query} />
       </span>
-      <span className="shrink-0 rounded px-1 py-0.5 text-[0.6rem] bg-muted text-muted-foreground">
+      <span className="stg:shrink-0 stg:rounded stg:px-1 stg:py-0.5 stg:text-[0.6rem] stg:bg-muted stg:text-muted-foreground">
         {repo.isPrivate ? "private" : "public"}
       </span>
     </button>
@@ -839,25 +839,25 @@ function RepoRow({
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-1 py-1">
-      <div className="px-2 py-1">
-        <div className="h-2.5 w-16 rounded bg-muted animate-pulse" />
+    <div className="stg:space-y-1 stg:py-1">
+      <div className="stg:px-2 stg:py-1">
+        <div className="stg:h-2.5 stg:w-16 stg:rounded stg:bg-muted stg:animate-pulse" />
       </div>
       {[55, 70, 40, 62].map((w, i) => (
-        <div key={i} className="flex items-center gap-2 px-2 py-1.5">
+        <div key={i} className="stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1.5">
           <div
-            className="h-3 rounded bg-muted animate-pulse"
+            className="stg:h-3 stg:rounded stg:bg-muted stg:animate-pulse"
             style={{ width: `${w}%` }}
           />
         </div>
       ))}
-      <div className="px-2 py-1">
-        <div className="h-2.5 w-20 rounded bg-muted animate-pulse" />
+      <div className="stg:px-2 stg:py-1">
+        <div className="stg:h-2.5 stg:w-20 stg:rounded stg:bg-muted stg:animate-pulse" />
       </div>
       {[48, 65, 53].map((w, i) => (
-        <div key={i + 4} className="flex items-center gap-2 px-2 py-1.5">
+        <div key={i + 4} className="stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1.5">
           <div
-            className="h-3 rounded bg-muted animate-pulse"
+            className="stg:h-3 stg:rounded stg:bg-muted stg:animate-pulse"
             style={{ width: `${w}%` }}
           />
         </div>

package/src/iam-policy/GrantAccessForm.tsx

@@ -115,8 +115,8 @@ export function GrantAccessForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
-      <div className="space-y-3">
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
+      <div className="stg:space-y-3">
         {/* Principal picker (org-member typeahead) */}
         <PrincipalPicker
           orgId={orgId}
@@ -136,19 +136,19 @@ export function GrantAccessForm({
       </div>
 
       {error && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -161,9 +161,9 @@ export function GrantAccessForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -184,7 +184,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />