@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/invitation/InvitationRedemption.tsx

@@ -141,7 +141,7 @@ export function InvitationRedemption({
   if (isLoading) {
     return (
       <div
-        className={cn("mx-auto max-w-sm", className)}
+        className={cn("stg:mx-auto stg:max-w-sm", className)}
         aria-busy="true"
         aria-label="Loading invitation"
       >
@@ -153,7 +153,7 @@ export function InvitationRedemption({
   // Fetch error
   if (fetchError) {
     return (
-      <div className={cn("mx-auto max-w-sm", className)}>
+      <div className={cn("stg:mx-auto stg:max-w-sm", className)}>
         <ErrorCard
           message={getUserMessage(fetchError)}
           onRetry={refetch}
@@ -165,7 +165,7 @@ export function InvitationRedemption({
   // No preview returned
   if (!preview) {
     return (
-      <div className={cn("mx-auto max-w-sm", className)}>
+      <div className={cn("stg:mx-auto stg:max-w-sm", className)}>
         <ErrorCard message="This invitation could not be found." />
       </div>
     );
@@ -176,14 +176,14 @@ export function InvitationRedemption({
     const orgName = preview.organizationName || "the organization";
     const roleName = iamRoleDisplayName(preview.role);
     return (
-      <div className={cn("mx-auto max-w-sm", className)}>
-        <div className="rounded-lg border border-primary/30 bg-primary-subtle p-6 text-center shadow-sm">
+      <div className={cn("stg:mx-auto stg:max-w-sm", className)}>
+        <div className="stg:rounded-lg stg:border stg:border-primary/30 stg:bg-primary-subtle stg:p-6 stg:text-center stg:shadow-sm">
           <SuccessIcon />
-          <h2 className="mt-3 text-base font-semibold text-foreground">
+          <h2 className="stg:mt-3 stg:text-base stg:font-semibold stg:text-foreground">
             You&rsquo;ve joined {orgName}
           </h2>
-          <p className="mt-1 text-sm text-muted-foreground">
-            You now have <span className="font-medium text-foreground">{roleName}</span> access.
+          <p className="stg:mt-1 stg:text-sm stg:text-muted-foreground">
+            You now have <span className="stg:font-medium stg:text-foreground">{roleName}</span> access.
           </p>
         </div>
       </div>
@@ -197,44 +197,44 @@ export function InvitationRedemption({
   const expiresAt = preview.expiresAt ? timestampDate(preview.expiresAt) : null;
 
   return (
-    <div className={cn("mx-auto max-w-sm", className)}>
-      <div className="rounded-lg border border-border bg-card p-6 shadow-sm">
+    <div className={cn("stg:mx-auto stg:max-w-sm", className)}>
+      <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-6 stg:shadow-sm">
         {/* Org identity */}
-        <div className="flex flex-col items-center text-center">
+        <div className="stg:flex stg:flex-col stg:items-center stg:text-center">
           {orgLogo ? (
             <img
               src={orgLogo}
               alt={`${orgName} logo`}
-              className="size-14 rounded-full object-cover"
+              className="stg:size-14 stg:rounded-full stg:object-cover"
             />
           ) : (
-            <div className="flex size-14 items-center justify-center rounded-full bg-muted text-xl font-semibold text-muted-foreground">
+            <div className="stg:flex stg:size-14 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:text-xl stg:font-semibold stg:text-muted-foreground">
               {orgInitial}
             </div>
           )}
 
-          <h2 className="mt-3 text-base font-semibold text-foreground">
+          <h2 className="stg:mt-3 stg:text-base stg:font-semibold stg:text-foreground">
             Join {orgName}
           </h2>
 
           {preview.label && (
-            <p className="mt-1 text-sm italic text-muted-foreground">
+            <p className="stg:mt-1 stg:text-sm stg:italic stg:text-muted-foreground">
               {preview.label}
             </p>
           )}
         </div>
 
         {/* Role + expiry details */}
-        <div className="mt-4 flex flex-col items-center gap-1.5 text-center">
-          <span className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted px-2.5 py-1 text-xs font-medium text-foreground">
+        <div className="stg:mt-4 stg:flex stg:flex-col stg:items-center stg:gap-1.5 stg:text-center">
+          <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-border stg:bg-muted stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground">
             <ShieldIcon />
             {roleName} access
           </span>
-          <span className="text-[0.7rem] text-muted-foreground">
+          <span className="stg:text-[0.7rem] stg:text-muted-foreground">
             {iamRoleDescription(preview.role)}
           </span>
           {expiresAt && (
-            <span className="text-[0.7rem] text-muted-foreground">
+            <span className="stg:text-[0.7rem] stg:text-muted-foreground">
               {formatExpiry(expiresAt)}
             </span>
           )}
@@ -247,7 +247,7 @@ export function InvitationRedemption({
 
         {/* Action area */}
         {preview.isValid && (
-          <div className="mt-5">
+          <div className="stg:mt-5">
             {isAuthenticated ? (
               <>
                 <button
@@ -255,17 +255,17 @@ export function InvitationRedemption({
                   onClick={handleAccept}
                   disabled={isRedeeming}
                   className={cn(
-                    "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2.5 text-sm font-medium",
-                    "bg-primary text-primary-foreground hover:bg-primary-hover",
-                    "disabled:pointer-events-none disabled:opacity-50",
-                    "transition-colors",
+                    "stg:w-full stg:inline-flex stg:items-center stg:justify-center stg:gap-1.5 stg:rounded-md stg:px-4 stg:py-2.5 stg:text-sm stg:font-medium",
+                    "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+                    "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+                    "stg:transition-colors",
                   )}
                 >
                   {isRedeeming && <SpinnerIcon />}
                   {isRedeeming ? "Accepting\u2026" : "Accept Invitation"}
                 </button>
                 {redeemError && (
-                  <p className="mt-2 text-center text-[0.65rem] text-destructive" role="alert">
+                  <p className="stg:mt-2 stg:text-center stg:text-[0.65rem] stg:text-destructive" role="alert">
                     {getUserMessage(redeemError)}
                   </p>
                 )}
@@ -275,9 +275,9 @@ export function InvitationRedemption({
                 type="button"
                 onClick={onAuthRequired}
                 className={cn(
-                  "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2.5 text-sm font-medium",
-                  "bg-primary text-primary-foreground hover:bg-primary-hover",
-                  "transition-colors",
+                  "stg:w-full stg:inline-flex stg:items-center stg:justify-center stg:gap-1.5 stg:rounded-md stg:px-4 stg:py-2.5 stg:text-sm stg:font-medium",
+                  "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+                  "stg:transition-colors",
                 )}
               >
                 Accept Invitation
@@ -296,9 +296,9 @@ export function InvitationRedemption({
 
 function InvalidNotice({ reason }: { reason: string }) {
   return (
-    <div className="mt-4 rounded-md bg-muted-subtle px-3 py-2.5 text-center">
+    <div className="stg:mt-4 stg:rounded-md stg:bg-muted-subtle stg:px-3 stg:py-2.5 stg:text-center">
       <WarningIcon />
-      <p className="mt-1 text-xs text-muted-foreground">
+      <p className="stg:mt-1 stg:text-xs stg:text-muted-foreground">
         {reason || "This invitation is no longer valid."}
       </p>
     </div>
@@ -317,16 +317,16 @@ function ErrorCard({
   onRetry?: () => void;
 }) {
   return (
-    <div className="rounded-lg border border-destructive/30 bg-destructive-subtle p-6 text-center shadow-sm">
-      <p className="text-sm text-destructive">{message}</p>
+    <div className="stg:rounded-lg stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:p-6 stg:text-center stg:shadow-sm">
+      <p className="stg:text-sm stg:text-destructive">{message}</p>
       {onRetry && (
         <button
           type="button"
           onClick={onRetry}
           className={cn(
-            "mt-3 inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "transition-colors",
+            "stg:mt-3 stg:inline-flex stg:items-center stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:transition-colors",
           )}
         >
           Try again
@@ -342,18 +342,18 @@ function ErrorCard({
 
 function LoadingSkeleton() {
   return (
-    <div className="rounded-lg border border-border bg-card p-6 shadow-sm space-y-4">
-      <div className="flex flex-col items-center gap-3">
-        <div className="size-14 rounded-full bg-muted-subtle animate-pulse" />
-        <div className="h-5 w-40 rounded bg-muted-subtle animate-pulse" />
-        <div className="h-4 w-56 rounded bg-muted-subtle animate-pulse" />
+    <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-6 stg:shadow-sm stg:space-y-4">
+      <div className="stg:flex stg:flex-col stg:items-center stg:gap-3">
+        <div className="stg:size-14 stg:rounded-full stg:bg-muted-subtle stg:animate-pulse" />
+        <div className="stg:h-5 stg:w-40 stg:rounded stg:bg-muted-subtle stg:animate-pulse" />
+        <div className="stg:h-4 stg:w-56 stg:rounded stg:bg-muted-subtle stg:animate-pulse" />
       </div>
-      <div className="flex flex-col items-center gap-1.5">
-        <div className="h-6 w-28 rounded-md bg-muted-subtle animate-pulse" />
-        <div className="h-3 w-44 rounded bg-muted-subtle animate-pulse" />
-        <div className="h-3 w-24 rounded bg-muted-subtle animate-pulse" />
+      <div className="stg:flex stg:flex-col stg:items-center stg:gap-1.5">
+        <div className="stg:h-6 stg:w-28 stg:rounded-md stg:bg-muted-subtle stg:animate-pulse" />
+        <div className="stg:h-3 stg:w-44 stg:rounded stg:bg-muted-subtle stg:animate-pulse" />
+        <div className="stg:h-3 stg:w-24 stg:rounded stg:bg-muted-subtle stg:animate-pulse" />
       </div>
-      <div className="h-[42px] w-full rounded-md bg-muted-subtle animate-pulse" />
+      <div className="stg:h-[42px] stg:w-full stg:rounded-md stg:bg-muted-subtle stg:animate-pulse" />
     </div>
   );
 }
@@ -395,7 +395,7 @@ function ShieldIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className="shrink-0"
+      className="stg:shrink-0"
     >
       <path d="M8 1.5l5.5 2v4.5c0 3.5-2.5 5.5-5.5 7-3-1.5-5.5-3.5-5.5-7V3.5L8 1.5z" />
     </svg>
@@ -414,7 +414,7 @@ function WarningIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className="mx-auto text-muted-foreground"
+      className="stg:mx-auto stg:text-muted-foreground"
     >
       <circle cx="8" cy="8" r="6" />
       <path d="M8 5v3.5M8 10.5v.5" />
@@ -434,7 +434,7 @@ function SuccessIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className="mx-auto text-primary"
+      className="stg:mx-auto stg:text-primary"
     >
       <circle cx="12" cy="12" r="10" />
       <path d="M8 12l2.5 2.5L16 9" />
@@ -452,7 +452,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" />

package/src/library/ResourceCountCard.tsx

@@ -119,28 +119,28 @@ export function ResourceCountCard({
   const showSkeleton = isLoading && count === undefined;
 
   const rootClasses = cn(
-    "flex flex-col rounded-lg border border-border bg-card p-4 text-left no-underline",
+    "stg:flex stg:flex-col stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4 stg:text-left stg:no-underline",
     isInteractive && [
-      "cursor-pointer transition-colors hover:bg-accent-hover",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "stg:cursor-pointer stg:transition-colors stg:hover:bg-accent-hover",
+      "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
     ],
     className,
   );
 
   const content = (
     <>
-      <div className="text-muted-foreground">{icon}</div>
+      <div className="stg:text-muted-foreground">{icon}</div>
       {showSkeleton ? (
         <div
-          className="mt-3 h-7 w-12 animate-pulse rounded bg-muted"
+          className="stg:mt-3 stg:h-7 stg:w-12 stg:animate-pulse stg:rounded stg:bg-muted"
           aria-hidden="true"
         />
       ) : (
-        <div className="mt-3 text-2xl font-semibold tabular-nums text-foreground">
+        <div className="stg:mt-3 stg:text-2xl stg:font-semibold stg:tabular-nums stg:text-foreground">
           {count !== undefined ? count.toLocaleString() : "\u2014"}
         </div>
       )}
-      <div className="mt-1 text-sm text-muted-foreground">{label}</div>
+      <div className="stg:mt-1 stg:text-sm stg:text-muted-foreground">{label}</div>
     </>
   );
 

package/src/library/ScopeToggle.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { ResourceListScope } from "../search/index.js";
 
 /** Props for {@link ScopeToggle}. */
@@ -107,8 +108,8 @@ export function ScopeToggle({
       aria-label="Resource scope"
       aria-disabled={disabled || undefined}
       className={cn(
-        "inline-flex rounded-md bg-muted p-0.5",
-        disabled && "pointer-events-none opacity-50",
+        "stg:inline-flex stg:rounded-md stg:bg-muted stg:p-0.5",
+        disabled && "stg:pointer-events-none stg:opacity-50",
         className,
       )}
     >
@@ -116,7 +117,7 @@ export function ScopeToggle({
         const isSelected = value === option.value;
         const Icon = option.icon;
 
-        return (
+        const radio = (
           <button
             key={option.value}
             ref={(el) => {
@@ -126,23 +127,34 @@ export function ScopeToggle({
             role="radio"
             aria-checked={isSelected}
             aria-label={option.ariaLabel}
-            title={compact ? option.ariaLabel : undefined}
             tabIndex={isSelected ? 0 : -1}
             disabled={disabled}
             onClick={() => handleSelect(option.value)}
             onKeyDown={(e) => handleKeyDown(e, index)}
             className={cn(
-              "inline-flex cursor-pointer items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:inline-flex stg:cursor-pointer stg:items-center stg:gap-1 stg:rounded-sm stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
               isSelected
-                ? "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",
             )}
           >
-            <Icon className="size-3" />
+            <Icon className="stg:size-3" />
             {!compact && option.label}
           </button>
         );
+
+        // Icon-only radios need their name discoverable by sighted users
+        // too: in compact mode each radio is its own tooltip trigger (hover
+        // and roving-tabindex focus both open it). Full mode shows visible
+        // labels, so a tooltip would only repeat them.
+        if (!compact) return radio;
+        return (
+          <Tooltip key={option.value}>
+            <TooltipTrigger render={radio} />
+            <TooltipContent side="top">{option.ariaLabel}</TooltipContent>
+          </Tooltip>
+        );
       })}
     </div>
   );

package/src/library/VisibilityOptionRow.tsx

@@ -14,7 +14,7 @@ export type VisibilityTone = VisibilityLevelOption["tone"];
 
 /** Base classes for the visibility chip (badge + selector trigger). */
 export const VISIBILITY_CHIP_CLASS =
-  "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground";
+  "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1 stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground";
 
 // ---------------------------------------------------------------------------
 // Option row — one selectable level inside the popover (role="option") or the
@@ -88,25 +88,25 @@ export const VisibilityOptionRow = forwardRef<
       onMouseEnter={onMouseEnter}
       onKeyDown={onKeyDown}
       className={cn(
-        "flex w-full items-start gap-2 rounded-md px-2.5 py-2 text-left transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:pointer-events-none disabled:opacity-50",
-        isHighlighted ? "bg-accent text-foreground" : "hover:bg-accent-hover",
+        "stg:flex stg:w-full stg:items-start stg:gap-2 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-left stg:transition-colors",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+        isHighlighted ? "stg:bg-accent stg:text-foreground" : "stg:hover:bg-accent-hover",
       )}
     >
       <VisibilityIcon
         tone={option.tone}
-        className="mt-0.5 size-3.5 shrink-0 text-muted-foreground"
+        className="stg:mt-0.5 stg:size-3.5 stg:shrink-0 stg:text-muted-foreground"
       />
-      <span className="min-w-0 flex-1">
-        <span className="block text-xs font-medium text-foreground">
+      <span className="stg:min-w-0 stg:flex-1">
+        <span className="stg:block stg:text-xs stg:font-medium stg:text-foreground">
           {option.label}
         </span>
-        <span className="block text-[0.65rem] leading-snug text-muted-foreground">
+        <span className="stg:block stg:text-[0.65rem] stg:leading-snug stg:text-muted-foreground">
           {option.description}
         </span>
       </span>
-      {isSelected && <CheckIcon className="mt-0.5 size-3.5 shrink-0 text-primary" />}
+      {isSelected && <CheckIcon className="stg:mt-0.5 stg:size-3.5 stg:shrink-0 stg:text-primary" />}
     </button>
   );
 });
@@ -118,12 +118,12 @@ export const VisibilityOptionRow = forwardRef<
 /** Selected-segment / active-tone treatment (also used by the inline confirm). */
 export const SELECTED_STYLES: Record<VisibilityTone, string> = {
   private:
-    "bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
-  org: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+    "stg:bg-amber-50 stg:text-amber-800 stg:dark:bg-amber-900/30 stg:dark:text-amber-300",
+  org: "stg:bg-blue-100 stg:text-blue-800 stg:dark:bg-blue-900/40 stg:dark:text-blue-300",
   platform:
-    "bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-300",
+    "stg:bg-violet-100 stg:text-violet-800 stg:dark:bg-violet-900/40 stg:dark:text-violet-300",
   public:
-    "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
+    "stg:bg-emerald-100 stg:text-emerald-800 stg:dark:bg-emerald-900/40 stg:dark:text-emerald-300",
 };
 
 /** Inline-confirm (escalation prompt) treatment, keyed by tone. */
@@ -134,39 +134,39 @@ export const PROMPT_STYLES: Record<
   // Private never escalates, but the row keeps the Record total.
   private: {
     container:
-      "border-amber-200 bg-amber-50 dark:border-amber-800/50 dark:bg-amber-950/30",
-    text: "text-amber-800 dark:text-amber-200",
+      "stg:border-amber-200 stg:bg-amber-50 stg:dark:border-amber-800/50 stg:dark:bg-amber-950/30",
+    text: "stg:text-amber-800 stg:dark:text-amber-200",
     confirm:
-      "bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-500",
+      "stg:bg-amber-600 stg:hover:bg-amber-700 stg:dark:bg-amber-600 stg:dark:hover:bg-amber-500",
     cancel:
-      "text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100",
+      "stg:text-amber-700 stg:hover:text-amber-900 stg:dark:text-amber-300 stg:dark:hover:text-amber-100",
   },
   org: {
     container:
-      "border-blue-200 bg-blue-50 dark:border-blue-800/50 dark:bg-blue-950/30",
-    text: "text-blue-800 dark:text-blue-200",
+      "stg:border-blue-200 stg:bg-blue-50 stg:dark:border-blue-800/50 stg:dark:bg-blue-950/30",
+    text: "stg:text-blue-800 stg:dark:text-blue-200",
     confirm:
-      "bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500",
+      "stg:bg-blue-600 stg:hover:bg-blue-700 stg:dark:bg-blue-600 stg:dark:hover:bg-blue-500",
     cancel:
-      "text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-100",
+      "stg:text-blue-700 stg:hover:text-blue-900 stg:dark:text-blue-300 stg:dark:hover:text-blue-100",
   },
   platform: {
     container:
-      "border-violet-200 bg-violet-50 dark:border-violet-800/50 dark:bg-violet-950/30",
-    text: "text-violet-800 dark:text-violet-200",
+      "stg:border-violet-200 stg:bg-violet-50 stg:dark:border-violet-800/50 stg:dark:bg-violet-950/30",
+    text: "stg:text-violet-800 stg:dark:text-violet-200",
     confirm:
-      "bg-violet-600 hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-500",
+      "stg:bg-violet-600 stg:hover:bg-violet-700 stg:dark:bg-violet-600 stg:dark:hover:bg-violet-500",
     cancel:
-      "text-violet-700 hover:text-violet-900 dark:text-violet-300 dark:hover:text-violet-100",
+      "stg:text-violet-700 stg:hover:text-violet-900 stg:dark:text-violet-300 stg:dark:hover:text-violet-100",
   },
   public: {
     container:
-      "border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-950/30",
-    text: "text-emerald-800 dark:text-emerald-200",
+      "stg:border-emerald-200 stg:bg-emerald-50 stg:dark:border-emerald-800/50 stg:dark:bg-emerald-950/30",
+    text: "stg:text-emerald-800 stg:dark:text-emerald-200",
     confirm:
-      "bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-600 dark:hover:bg-emerald-500",
+      "stg:bg-emerald-600 stg:hover:bg-emerald-700 stg:dark:bg-emerald-600 stg:dark:hover:bg-emerald-500",
     cancel:
-      "text-emerald-700 hover:text-emerald-900 dark:text-emerald-300 dark:hover:text-emerald-100",
+      "stg:text-emerald-700 stg:hover:text-emerald-900 stg:dark:text-emerald-300 stg:dark:hover:text-emerald-100",
   },
 };
 

package/src/library/VisibilitySelector.tsx

@@ -5,6 +5,7 @@ import { Popover } from "@base-ui/react/popover";
 import { cn } from "@stigmer/theme";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useStigmerPortalContainer } from "../portal-container.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
 import {
@@ -288,8 +289,8 @@ export function VisibilitySelector({
         aria-label={ariaLabel}
         aria-disabled={effectivelyDisabled || undefined}
         className={cn(
-          "flex flex-col gap-0.5 rounded-md border border-border p-1",
-          effectivelyDisabled && "pointer-events-none opacity-50",
+          "stg:flex stg:flex-col stg:gap-0.5 stg:rounded-md stg:border stg:border-border stg:p-1",
+          effectivelyDisabled && "stg:pointer-events-none stg:opacity-50",
           className,
         )}
       >
@@ -313,19 +314,19 @@ export function VisibilitySelector({
           aria-label={`${ariaLabel}: ${current.label}`}
           className={cn(
             VISIBILITY_CHIP_CLASS,
-            "transition-colors hover:bg-accent-hover hover:text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             className,
           )}
         >
           {isPending ? (
             <span
-              className="inline-block size-2.5 animate-spin rounded-full border-2 border-current border-t-transparent"
+              className="stg:inline-block stg:size-2.5 stg:animate-spin stg:rounded-full stg:border-2 stg:border-current stg:border-t-transparent"
               aria-hidden="true"
             />
           ) : (
-            <VisibilityIcon tone={current.tone} className="size-2.5" />
+            <VisibilityIcon tone={current.tone} className="stg:size-2.5" />
           )}
           {current.label}
           <CaretIcon />
@@ -337,8 +338,8 @@ export function VisibilitySelector({
               role="listbox"
               aria-label={ariaLabel}
               className={cn(
-                "z-popover w-72 rounded-lg border border-border bg-popover p-1 shadow-md",
-                "text-popover-foreground animate-in fade-in-0 zoom-in-95",
+                "stg:z-popover stg:w-72 stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-1 stg:shadow-md",
+                "stg:text-popover-foreground stg:animate-in stg:fade-in-0 stg:zoom-in-95",
               )}
             >
               {renderRows("option")}
@@ -347,13 +348,13 @@ export function VisibilitySelector({
                 <div
                   role="alert"
                   className={cn(
-                    "mt-1 flex items-center gap-2 rounded-md border px-2.5 py-1.5",
+                    "stg:mt-1 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5",
                     PROMPT_STYLES[pendingOption.tone].container,
                   )}
                 >
                   <span
                     className={cn(
-                      "flex-1 text-[0.65rem] leading-snug",
+                      "stg:flex-1 stg:text-[0.65rem] stg:leading-snug",
                       PROMPT_STYLES[pendingOption.tone].text,
                     )}
                   >
@@ -363,8 +364,8 @@ export function VisibilitySelector({
                     type="button"
                     onClick={() => setPendingInline(null)}
                     className={cn(
-                      "rounded px-2 py-0.5 text-[0.65rem] font-medium",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      "stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+                      "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                       PROMPT_STYLES[pendingOption.tone].cancel,
                     )}
                   >
@@ -374,8 +375,8 @@ export function VisibilitySelector({
                     type="button"
                     onClick={() => apply(pendingOption.value)}
                     className={cn(
-                      "rounded px-2 py-0.5 text-[0.65rem] font-medium text-white",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      "stg:rounded stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-white",
+                      "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                       PROMPT_STYLES[pendingOption.tone].confirm,
                     )}
                   >
@@ -395,7 +396,7 @@ export function VisibilitySelector({
 function CaretIcon() {
   return (
     <svg
-      className="size-2.5 shrink-0 text-muted-foreground"
+      className="stg:size-2.5 stg:shrink-0 stg:text-muted-foreground"
       viewBox="0 0 12 12"
       fill="none"
       stroke="currentColor"
@@ -447,27 +448,33 @@ export function VisibilityBadge({
   const option = visibilityOption(visibility);
   const content = (
     <>
-      <VisibilityIcon tone={option.tone} className="size-2.5" />
+      <VisibilityIcon tone={option.tone} className="stg:size-2.5" />
       {option.label}
     </>
   );
 
   if (onClick) {
     return (
-      <button
-        type="button"
-        onClick={onClick}
-        title="Manage access"
-        aria-label={`${option.label} visibility — manage access`}
-        className={cn(
-          VISIBILITY_CHIP_CLASS,
-          "transition-colors hover:bg-accent-hover hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          className,
-        )}
-      >
-        {content}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={onClick}
+              aria-label={`${option.label} visibility — manage access`}
+              className={cn(
+                VISIBILITY_CHIP_CLASS,
+                "stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                className,
+              )}
+            />
+          }
+        >
+          {content}
+        </TooltipTrigger>
+        <TooltipContent side="top">Manage access</TooltipContent>
+      </Tooltip>
     );
   }
 

package/src/library/__tests__/VisibilitySelector.test.tsx

@@ -17,12 +17,6 @@ import {
   blueprintVisibilityLevels,
 } from "../visibilityLevels";
 
-// Without a StigmerProvider the portal container is null, and Base UI's
-// Portal renders nothing — pin it to document.body so the popover mounts.
-vi.mock("../../portal-container", () => ({
-  useStigmerPortalContainer: () => document.body,
-}));
-
 // Base UI's Popover positioner observes its anchor; happy-dom lacks
 // ResizeObserver, so provide a no-op shim.
 beforeAll(() => {