@stigmer/react 3.9.0 → 3.11.0

package/src/github/useGitHubFileReader.ts

@@ -4,6 +4,7 @@ import { useCallback } from "react";
 import type { WorkspaceEntry } from "../workspace/useWorkspaceEntries.js";
 import {
   WorkspaceFileNotFoundError,
+  workspaceImageMimeType,
   type WorkspaceFileContent,
   type WorkspaceFileReader,
 } from "../workspace/WorkspaceFileReader.js";
@@ -116,12 +117,16 @@ export function useGitHubFileReader(
 
       const file = data as GitHubContentsFile;
       if (file.encoding === "base64") {
-        return normalizeGitHubContent(base64ToBytes(file.content), file.size);
+        return normalizeGitHubContent(
+          base64ToBytes(file.content),
+          file.size,
+          workspaceImageMimeType(path),
+        );
       }
 
       // encoding: "none" is GitHub's signal that the file exceeds the Contents
       // API's ~1 MB cap; the bytes live only behind the Blob API.
-      return readViaBlob(parsed, file, token);
+      return readViaBlob(parsed, file, path, token);
     },
     [token],
   );
@@ -138,6 +143,7 @@ export function useGitHubFileReader(
 async function readViaBlob(
   parsed: { owner: string; repo: string },
   file: GitHubContentsFile,
+  path: string,
   token: string,
 ): Promise<WorkspaceFileContent> {
   // Above the ceiling we never download — GitHub already told us the size, so
@@ -161,5 +167,9 @@ async function readViaBlob(
   }
 
   const blob: GitHubBlob = await resp.json();
-  return normalizeGitHubContent(base64ToBytes(blob.content), blob.size);
+  return normalizeGitHubContent(
+    base64ToBytes(blob.content),
+    blob.size,
+    workspaceImageMimeType(path),
+  );
 }

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" />

package/src/iam-policy/OrgMembersPanel.tsx

@@ -80,14 +80,14 @@ export function OrgMembersPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading members"
       >
         {Array.from({ length: 3 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
+            className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg"
           />
         ))}
       </div>
@@ -96,19 +96,19 @@ export function OrgMembersPanel({
 
   if (error) {
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(error)}
       </p>
     );
   }
 
   return (
-    <div className={cn("space-y-3", className)}>
+    <div className={cn("stg:space-y-3", className)}>
       {/* Header */}
-      <div className="flex items-center gap-2">
-        <span className="text-sm font-semibold text-foreground">Members</span>
+      <div className="stg:flex stg:items-center stg:gap-2">
+        <span className="stg:text-sm stg:font-semibold stg:text-foreground">Members</span>
         {count > 0 && (
-          <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
+          <span className="stg:inline-flex stg:items-center stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
             {count}
           </span>
         )}
@@ -116,11 +116,11 @@ export function OrgMembersPanel({
 
       {/* Members list */}
       {members.length === 0 ? (
-        <p className="text-muted-foreground py-4 text-center text-xs">
+        <p className="stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs">
           No members found.
         </p>
       ) : (
-        <div role="list" aria-label="Organization members" className="space-y-2">
+        <div role="list" aria-label="Organization members" className="stg:space-y-2">
           {members.map((entry) => {
             const memberId = entry.principal?.id ?? "";
             return (
@@ -216,35 +216,35 @@ function MemberRow({
   return (
     <div
       role="listitem"
-      className="flex items-center gap-3 rounded-lg border border-border-muted px-3 py-2.5 hover:border-border transition-colors"
+      className="stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:border-border-muted stg:px-3 stg:py-2.5 stg:hover:border-border stg:transition-colors"
     >
       {/* Avatar */}
-      <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+      <div className="stg:flex stg:size-8 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:text-xs stg:font-medium stg:text-muted-foreground">
         {initial}
       </div>
 
       {/* Name + email */}
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-1.5">
-          <span className="truncate text-sm font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <div className="stg:flex stg:items-center stg:gap-1.5">
+          <span className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
             {name}
           </span>
           {isSelf && (
-            <span className="rounded bg-muted px-1.5 py-0.5 text-[0.6rem] font-medium text-muted-foreground">
+            <span className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:text-muted-foreground">
               You
             </span>
           )}
           <ProviderBadge principal={principal} />
         </div>
         {email && email !== name && (
-          <span className="block truncate text-xs text-muted-foreground">
+          <span className="stg:block stg:truncate stg:text-xs stg:text-muted-foreground">
             {email}
           </span>
         )}
       </div>
 
       {/* Role badges */}
-      <div className="hidden sm:flex shrink-0 items-center gap-1.5">
+      <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-1.5">
         {directRoles.map((grant) => (
           <RoleBadge key={grant.role?.code ?? ""} grant={grant} />
         ))}
@@ -252,12 +252,12 @@ function MemberRow({
 
       {/* Actions */}
       {!isSelf && (
-        <div className="flex shrink-0 items-center gap-1">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
           <button
             type="button"
             onClick={() => startAction("change-role")}
             aria-label={`Change role for ${name}`}
-            className="shrink-0 rounded p-1 text-muted-foreground hover:text-foreground hover:bg-accent-hover transition-colors"
+            className="stg:shrink-0 stg:rounded stg:p-1 stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover stg:transition-colors"
           >
             <EditIcon />
           </button>
@@ -265,7 +265,7 @@ function MemberRow({
             type="button"
             onClick={() => startAction("remove")}
             aria-label={`Remove ${name}`}
-            className="shrink-0 rounded p-1 text-muted-foreground hover:text-destructive hover:bg-destructive-subtle transition-colors"
+            className="stg:shrink-0 stg:rounded stg:p-1 stg:text-muted-foreground stg:hover:text-destructive stg:hover:bg-destructive-subtle stg:transition-colors"
           >
             <TrashIcon />
           </button>
@@ -284,10 +284,10 @@ function RoleBadge({ grant }: { grant: RoleGrant }) {
   return (
     <span
       className={cn(
-        "inline-flex items-center rounded-md border px-2 py-0.5 text-[0.65rem] font-medium",
+        "stg:inline-flex stg:items-center stg:rounded-md stg:border stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
         grant.isInherited
-          ? "border-border-muted text-muted-foreground bg-muted-subtle italic"
-          : "border-border bg-muted text-foreground",
+          ? "stg:border-border-muted stg:text-muted-foreground stg:bg-muted-subtle stg:italic"
+          : "stg:border-border stg:bg-muted stg:text-foreground",
       )}
       title={
         grant.isInherited
@@ -297,7 +297,7 @@ function RoleBadge({ grant }: { grant: RoleGrant }) {
     >
       {roleName}
       {grant.isInherited && (
-        <span className="ml-1 text-[0.55rem] text-muted-foreground">
+        <span className="stg:ml-1 stg:text-[0.55rem] stg:text-muted-foreground">
           (inherited)
         </span>
       )}
@@ -336,29 +336,29 @@ function RemoveConfirmation({
   return (
     <div
       role="listitem"
-      className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive-subtle px-3 py-2.5"
+      className="stg:flex stg:items-center stg:justify-between stg:rounded-lg stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-3 stg:py-2.5"
     >
-      <div className="min-w-0 flex-1">
-        <p className="text-xs text-foreground">
-          Remove <span className="font-medium">{memberName}</span> from this
+      <div className="stg:min-w-0 stg:flex-1">
+        <p className="stg:text-xs stg:text-foreground">
+          Remove <span className="stg:font-medium">{memberName}</span> from this
           organization? This revokes all their access.
         </p>
         {error && (
-          <p className="mt-0.5 text-[0.65rem] text-destructive">
+          <p className="stg:mt-0.5 stg:text-[0.65rem] stg:text-destructive">
             {getUserMessage(error)}
           </p>
         )}
       </div>
 
-      <div className="flex shrink-0 items-center gap-1.5 ml-3">
+      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5 stg:ml-3">
         <button
           type="button"
           onClick={handleConfirm}
           disabled={isRevoking}
           className={cn(
-            "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
-            "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+            "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           {isRevoking && <SpinnerIcon />}
@@ -369,9 +369,9 @@ function RemoveConfirmation({
           onClick={onCancel}
           disabled={isRevoking}
           className={cn(
-            "rounded-md px-2.5 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:rounded-md stg:px-2.5 stg:py-1 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
@@ -462,10 +462,10 @@ function ChangeRoleRow({
   return (
     <div
       role="listitem"
-      className="rounded-lg border border-primary/30 bg-primary-subtle px-3 py-2.5 space-y-2"
+      className="stg:rounded-lg stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-3 stg:py-2.5 stg:space-y-2"
     >
-      <p className="text-xs text-foreground">
-        Change role for <span className="font-medium">{memberName}</span>
+      <p className="stg:text-xs stg:text-foreground">
+        Change role for <span className="stg:font-medium">{memberName}</span>
       </p>
 
       <RoleSelector
@@ -476,20 +476,20 @@ function ChangeRoleRow({
       />
 
       {error && (
-        <p className="text-[0.65rem] text-destructive" role="alert">
+        <p className="stg:text-[0.65rem] stg:text-destructive" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <button
           type="button"
           onClick={handleConfirm}
           disabled={!canConfirm}
           className={cn(
-            "inline-flex items-center gap-1 rounded-md px-2.5 py-1 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 stg:rounded-md stg:px-2.5 stg:py-1 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",
           )}
         >
           {isWorking && <SpinnerIcon />}
@@ -500,9 +500,9 @@ function ChangeRoleRow({
           onClick={onCancel}
           disabled={isWorking}
           className={cn(
-            "rounded-md px-2.5 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:rounded-md stg:px-2.5 stg:py-1 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
@@ -565,7 +565,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/iam-policy/PeopleWithAccess.tsx

@@ -67,23 +67,23 @@ export function PeopleWithAccess({
   const grantGate = { kind: resourceKindString, id: resource.id };
 
   return (
-    <div className={cn("flex flex-col gap-4", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-4", className)}>
       {/* Access list */}
-      <div className="space-y-1">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:space-y-1">
+        <p className="stg:text-xs stg:text-muted-foreground">
           {isLoading
             ? "Loading access list..."
             : `${accessList.length} ${accessList.length === 1 ? "person" : "people"} with access`}
         </p>
 
         {fetchError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
             {getUserMessage(fetchError)}
           </p>
         )}
 
         {!isLoading && accessList.length > 0 && (
-          <ul className="space-y-1 mt-2" aria-label="People with access">
+          <ul className="stg:space-y-1 stg:mt-2" aria-label="People with access">
             {accessList.map((entry) => (
               <AccessEntry
                 key={entry.principal?.id ?? "unknown"}
@@ -97,7 +97,7 @@ export function PeopleWithAccess({
         )}
 
         {revokeError && (
-          <p className="text-destructive text-[0.65rem]" role="alert">
+          <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
             {getUserMessage(revokeError)}
           </p>
         )}
@@ -106,7 +106,7 @@ export function PeopleWithAccess({
       {/* Grant form — only for users who can grant access. */}
       {hasGrantableRoles && (
         <PermissionGate resource={grantGate} relation="can_grant_access">
-          <div className="border-t border-border pt-3">
+          <div className="stg:border-t stg:border-border stg:pt-3">
             {showGrantForm ? (
               <GrantAccessForm
                 resourceKind={resourceKind}
@@ -125,10 +125,10 @@ export function PeopleWithAccess({
                 type="button"
                 onClick={() => setShowGrantForm(true)}
                 className={cn(
-                  "w-full rounded-md px-3 py-1.5 text-xs font-medium text-center",
-                  "border border-dashed border-border",
-                  "text-muted-foreground hover:text-foreground hover:border-foreground/30",
-                  "hover:bg-accent-hover transition-colors",
+                  "stg:w-full stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-center",
+                  "stg:border stg:border-dashed stg:border-border",
+                  "stg:text-muted-foreground stg:hover:text-foreground stg:hover:border-foreground/30",
+                  "stg:hover:bg-accent-hover stg:transition-colors",
                 )}
               >
                 + Add people
@@ -168,26 +168,26 @@ function AccessEntry({
   }, [principal?.id, primaryRole?.code, onRevoke]);
 
   return (
-    <li className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-accent-hover group">
-      <div className="flex items-center gap-2 min-w-0">
+    <li className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:rounded-md stg:px-2 stg:py-1.5 stg:hover:bg-accent-hover stg:group">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:min-w-0">
         <div
-          className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-[0.6rem] font-medium text-muted-foreground shrink-0"
+          className="stg:h-6 stg:w-6 stg:rounded-full stg:bg-muted stg:flex stg:items-center stg:justify-center stg:text-[0.6rem] stg:font-medium stg:text-muted-foreground stg:shrink-0"
           aria-hidden="true"
         >
           {(principal?.name?.[0] ?? principal?.email?.[0] ?? "?").toUpperCase()}
         </div>
-        <div className="min-w-0">
-          <p className="text-xs text-foreground truncate">{displayName}</p>
+        <div className="stg:min-w-0">
+          <p className="stg:text-xs stg:text-foreground stg:truncate">{displayName}</p>
           {principal?.email && principal.name && (
-            <p className="text-[0.6rem] text-muted-foreground truncate">
+            <p className="stg:text-[0.6rem] stg:text-muted-foreground stg:truncate">
               {principal.email}
             </p>
           )}
         </div>
       </div>
 
-      <div className="flex items-center gap-1.5 shrink-0">
-        <span className="text-[0.6rem] text-muted-foreground capitalize">
+      <div className="stg:flex stg:items-center stg:gap-1.5 stg:shrink-0">
+        <span className="stg:text-[0.6rem] stg:text-muted-foreground stg:capitalize">
           {primaryRole?.name ?? primaryRole?.code ?? "—"}
         </span>
         <PermissionGate resource={grantGate} relation="can_grant_access">
@@ -197,10 +197,10 @@ function AccessEntry({
             disabled={isRevoking}
             aria-label={`Remove ${displayName}'s access`}
             className={cn(
-              "rounded p-0.5 text-muted-foreground opacity-0 group-hover:opacity-100",
-              "hover:text-destructive hover:bg-destructive/10",
-              "disabled:pointer-events-none disabled:opacity-50",
-              "transition-opacity",
+              "stg:rounded stg:p-0.5 stg:text-muted-foreground stg:opacity-0 stg:group-hover:opacity-100",
+              "stg:hover:text-destructive stg:hover:bg-destructive/10",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+              "stg:transition-opacity",
             )}
           >
             <RemoveIcon />

package/src/iam-policy/PrincipalPicker.tsx

@@ -151,23 +151,23 @@ export function PrincipalPicker({
   // Selected state: show a chip with a clear affordance instead of the input.
   if (value) {
     return (
-      <div className={cn("space-y-1", className)}>
-        <span className="block text-xs font-medium text-foreground">Person</span>
-        <div className="flex items-center justify-between gap-2 rounded-md border border-input bg-background px-2.5 py-1.5">
-          <div className="flex min-w-0 items-center gap-2">
+      <div className={cn("stg:space-y-1", className)}>
+        <span className="stg:block stg:text-xs stg:font-medium stg:text-foreground">Person</span>
+        <div className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5">
+          <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2">
             <div
-              className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.6rem] font-medium text-muted-foreground"
+              className="stg:flex stg:h-6 stg:w-6 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:text-[0.6rem] stg:font-medium stg:text-muted-foreground"
               aria-hidden="true"
             >
               {(value.name[0] ?? "?").toUpperCase()}
             </div>
-            <div className="min-w-0">
-              <div className="flex items-center gap-1.5">
-                <span className="truncate text-xs text-foreground">{value.name}</span>
+            <div className="stg:min-w-0">
+              <div className="stg:flex stg:items-center stg:gap-1.5">
+                <span className="stg:truncate stg:text-xs stg:text-foreground">{value.name}</span>
                 <ProviderBadge principal={value.view} />
               </div>
               {value.email && value.email !== value.name && (
-                <span className="block truncate text-[0.6rem] text-muted-foreground">
+                <span className="stg:block stg:truncate stg:text-[0.6rem] stg:text-muted-foreground">
                   {value.email}
                 </span>
               )}
@@ -179,9 +179,9 @@ export function PrincipalPicker({
             disabled={disabled}
             aria-label="Clear selected person"
             className={cn(
-              "shrink-0 rounded p-0.5 text-muted-foreground",
-              "hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground",
+              "stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             <ClearIcon />
@@ -192,14 +192,14 @@ export function PrincipalPicker({
   }
 
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("stg:space-y-1", className)}>
       <label
         htmlFor={`${listboxId}-input`}
-        className="block text-xs font-medium text-foreground"
+        className="stg:block stg:text-xs stg:font-medium stg:text-foreground"
       >
         Person
       </label>
-      <div className="relative">
+      <div className="stg:relative">
         <input
           id={`${listboxId}-input`}
           ref={inputRef}
@@ -225,10 +225,10 @@ export function PrincipalPicker({
           disabled={disabled || isLoading}
           autoFocus
           className={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",
           )}
         />
 
@@ -238,23 +238,23 @@ export function PrincipalPicker({
             role="listbox"
             aria-label="Organization members"
             className={cn(
-              "absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-border bg-popover py-1 shadow-md",
+              "stg:absolute stg:z-10 stg:mt-1 stg:max-h-56 stg:w-full stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-popover stg:py-1 stg:shadow-md",
             )}
           >
             {isLoading && (
-              <li className="px-2.5 py-2 text-xs text-muted-foreground">
+              <li className="stg:px-2.5 stg:py-2 stg:text-xs stg:text-muted-foreground">
                 Loading members…
               </li>
             )}
 
             {!isLoading && error && (
-              <li className="px-2.5 py-2 text-[0.65rem] text-destructive" role="alert">
+              <li className="stg:px-2.5 stg:py-2 stg:text-[0.65rem] stg:text-destructive" role="alert">
                 {getUserMessage(error)}
               </li>
             )}
 
             {!isLoading && !error && filtered.length === 0 && (
-              <li className="px-2.5 py-2 text-xs text-muted-foreground">
+              <li className="stg:px-2.5 stg:py-2 stg:text-xs stg:text-muted-foreground">
                 {query.trim()
                   ? "No members match your search."
                   : "No members to share with."}
@@ -286,36 +286,36 @@ export function PrincipalPicker({
                       if (!isExcluded) commitSelection(c);
                     }}
                     className={cn(
-                      "flex items-center justify-between gap-2 px-2.5 py-1.5",
+                      "stg:flex stg:items-center stg:justify-between stg:gap-2 stg:px-2.5 stg:py-1.5",
                       isExcluded
-                        ? "cursor-not-allowed opacity-50"
-                        : "cursor-pointer",
-                      isActive && !isExcluded && "bg-accent-hover",
+                        ? "stg:cursor-not-allowed stg:opacity-50"
+                        : "stg:cursor-pointer",
+                      isActive && !isExcluded && "stg:bg-accent-hover",
                     )}
                   >
-                    <div className="flex min-w-0 items-center gap-2">
+                    <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2">
                       <div
-                        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.6rem] font-medium text-muted-foreground"
+                        className="stg:flex stg:h-6 stg:w-6 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:text-[0.6rem] stg:font-medium stg:text-muted-foreground"
                         aria-hidden="true"
                       >
                         {(name[0] ?? "?").toUpperCase()}
                       </div>
-                      <div className="min-w-0">
-                        <div className="flex items-center gap-1.5">
-                          <span className="truncate text-xs text-foreground">
+                      <div className="stg:min-w-0">
+                        <div className="stg:flex stg:items-center stg:gap-1.5">
+                          <span className="stg:truncate stg:text-xs stg:text-foreground">
                             {name}
                           </span>
                           {showBadge && <ProviderBadge principal={c} />}
                         </div>
                         {c.email && c.email !== name && (
-                          <span className="block truncate text-[0.6rem] text-muted-foreground">
+                          <span className="stg:block stg:truncate stg:text-[0.6rem] stg:text-muted-foreground">
                             {c.email}
                           </span>
                         )}
                       </div>
                     </div>
                     {isExcluded && (
-                      <span className="shrink-0 text-[0.6rem] text-muted-foreground">
+                      <span className="stg:shrink-0 stg:text-[0.6rem] stg:text-muted-foreground">
                         Has access
                       </span>
                     )}

package/src/iam-policy/ProviderBadge.tsx

@@ -41,8 +41,8 @@ export function ProviderBadge({ principal, className }: ProviderBadgeProps) {
   return (
     <span
       className={cn(
-        "inline-flex items-center rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-        "bg-muted-subtle text-muted-foreground",
+        "stg:inline-flex stg:items-center stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
+        "stg:bg-muted-subtle stg:text-muted-foreground",
         className,
       )}
       title={`Identity provider: ${label}`}