@stigmer/react 3.10.0 → 3.11.0

package/src/identity-provider/CreateIdentityProviderForm.tsx

@@ -152,8 +152,8 @@ export function CreateIdentityProviderForm({
   );
 
   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">
         <FormField
           id="stgm-idp-name"
           label="Name"
@@ -196,7 +196,7 @@ export function CreateIdentityProviderForm({
         />
 
         {/* SSO toggle */}
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <button
             type="button"
             role="switch"
@@ -204,19 +204,19 @@ export function CreateIdentityProviderForm({
             onClick={() => setIsSso((v) => !v)}
             disabled={isCreating}
             className={cn(
-              "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-              isSso ? "bg-primary" : "bg-muted",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:relative stg:inline-flex stg:h-5 stg:w-9 stg:shrink-0 stg:cursor-pointer stg:rounded-full stg:border-2 stg:border-transparent stg:transition-colors",
+              isSso ? "stg:bg-primary" : "stg:bg-muted",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             <span
               className={cn(
-                "pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-                isSso ? "translate-x-4" : "translate-x-0",
+                "stg:pointer-events-none stg:inline-block stg:h-4 stg:w-4 stg:rounded-full stg:bg-background stg:shadow-sm stg:ring-0 stg:transition-transform",
+                isSso ? "stg:translate-x-4" : "stg:translate-x-0",
               )}
             />
           </button>
-          <span className="text-xs font-medium text-foreground">
+          <span className="stg:text-xs stg:font-medium stg:text-foreground">
             SSO provider
           </span>
         </div>
@@ -250,19 +250,19 @@ export function CreateIdentityProviderForm({
       </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 />}
@@ -275,9 +275,9 @@ export function CreateIdentityProviderForm({
             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
@@ -312,8 +312,8 @@ function FormField({
   required?: boolean;
 }) {
   return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-1">
+      <label htmlFor={id} className="stg:text-xs stg:font-medium stg:text-foreground">
         {label}
       </label>
       <input
@@ -325,14 +325,14 @@ function FormField({
         disabled={disabled}
         required={required}
         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",
         )}
       />
       {hint && (
-        <p className="text-[0.65rem] text-muted-foreground">{hint}</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>
       )}
     </div>
   );
@@ -374,10 +374,10 @@ function JitSection({
 }) {
   if (isSso) {
     return (
-      <div className="rounded-md border border-border-muted bg-muted-faint px-3 py-2">
-        <p className="text-[0.65rem] text-muted-foreground">
+      <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           SSO providers automatically provision accounts and grant the{" "}
-          <span className="font-medium text-foreground">viewer</span> role on
+          <span className="stg:font-medium stg:text-foreground">viewer</span> role on
           the owning organization. JIT provisioning settings are not applicable.
         </p>
       </div>
@@ -385,12 +385,12 @@ function JitSection({
   }
 
   return (
-    <fieldset className="space-y-2.5" disabled={disabled}>
-      <hr className="border-border-muted" />
-      <legend className="text-xs font-medium text-foreground">
+    <fieldset className="stg:space-y-2.5" disabled={disabled}>
+      <hr className="stg:border-border-muted" />
+      <legend className="stg:text-xs stg:font-medium stg:text-foreground">
         JIT provisioning
       </legend>
-      <p className="text-[0.65rem] text-muted-foreground">
+      <p className="stg:text-[0.65rem] stg:text-muted-foreground">
         Configure automatic account creation and role assignment for users
         authenticating with this provider.
       </p>
@@ -413,10 +413,10 @@ function JitSection({
 
       {autoGrant && (
         <>
-          <div className="space-y-1">
+          <div className="stg:space-y-1">
             <label
               htmlFor="stgm-idp-grant-role"
-              className="text-xs font-medium text-foreground"
+              className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
@@ -426,9 +426,9 @@ function JitSection({
               onChange={(e) => onAutoGrantRoleChange(Number(e.target.value) as IamRole)}
               disabled={disabled}
               className={cn(
-                "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-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:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
               )}
             >
               {JIT_ROLE_OPTIONS.map((opt) => (
@@ -437,7 +437,7 @@ function JitSection({
                 </option>
               ))}
             </select>
-            <p className="text-[0.65rem] text-muted-foreground">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground">
               Role granted automatically — org admins can upgrade later
             </p>
           </div>
@@ -475,8 +475,8 @@ function ToggleSwitch({
   disabled?: boolean;
 }) {
   return (
-    <div className="space-y-0.5">
-      <div className="flex items-center gap-2">
+    <div className="stg:space-y-0.5">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="button"
           role="switch"
@@ -484,22 +484,22 @@ function ToggleSwitch({
           onClick={() => onChange(!checked)}
           disabled={disabled}
           className={cn(
-            "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-            checked ? "bg-primary" : "bg-muted",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:relative stg:inline-flex stg:h-5 stg:w-9 stg:shrink-0 stg:cursor-pointer stg:rounded-full stg:border-2 stg:border-transparent stg:transition-colors",
+            checked ? "stg:bg-primary" : "stg:bg-muted",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           <span
             className={cn(
-              "pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-              checked ? "translate-x-4" : "translate-x-0",
+              "stg:pointer-events-none stg:inline-block stg:h-4 stg:w-4 stg:rounded-full stg:bg-background stg:shadow-sm stg:ring-0 stg:transition-transform",
+              checked ? "stg:translate-x-4" : "stg:translate-x-0",
             )}
           />
         </button>
-        <span className="text-xs font-medium text-foreground">{label}</span>
+        <span className="stg:text-xs stg:font-medium stg:text-foreground">{label}</span>
       </div>
       {hint && (
-        <p className="pl-11 text-[0.65rem] text-muted-foreground">{hint}</p>
+        <p className="stg:pl-11 stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>
       )}
     </div>
   );
@@ -519,7 +519,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/identity-provider/IdentityProviderDetailPanel.tsx

@@ -177,26 +177,26 @@ export function IdentityProviderDetailPanel({
   const updatedAt = identityProvider.status?.audit?.specAudit?.updatedAt;
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("stg:space-y-4", className)}>
       {/* Header */}
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
           {onBack && (
             <button
               type="button"
               onClick={onBack}
-              className="text-muted-foreground hover:text-foreground mb-1 flex items-center gap-1 text-xs transition-colors"
+              className="stg:text-muted-foreground stg:hover:text-foreground stg:mb-1 stg:flex stg:items-center stg:gap-1 stg:text-xs stg:transition-colors"
             >
               <ArrowLeftIcon />
               Back to list
             </button>
           )}
-          <h3 className="text-foreground truncate text-sm font-semibold">
+          <h3 className="stg:text-foreground stg:truncate stg:text-sm stg:font-semibold">
             {spec?.displayName || meta?.name || "Identity Provider"}
           </h3>
-          <div className="flex items-center gap-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             {meta?.slug && (
-              <span className="text-muted-foreground font-mono text-xs">
+              <span className="stg:text-muted-foreground stg:font-mono stg:text-xs">
                 {meta.slug}
               </span>
             )}
@@ -209,9 +209,9 @@ export function IdentityProviderDetailPanel({
             type="button"
             onClick={enterEdit}
             className={cn(
-              "shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:shrink-0 stg:rounded-md stg:px-2.5 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",
             )}
           >
             Edit
@@ -228,7 +228,7 @@ export function IdentityProviderDetailPanel({
           updatedAt={updatedAt}
         />
       ) : (
-        <form onSubmit={handleSave} className="space-y-3">
+        <form onSubmit={handleSave} className="stg:space-y-3">
           <FieldInput
             id="stgm-idp-edit-name"
             label="Display name"
@@ -277,7 +277,7 @@ export function IdentityProviderDetailPanel({
           />
 
           {/* SSO toggle */}
-          <div className="flex items-center gap-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             <button
               type="button"
               role="switch"
@@ -285,19 +285,19 @@ export function IdentityProviderDetailPanel({
               onClick={() => setIsSso((v) => !v)}
               disabled={isUpdating}
               className={cn(
-                "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-                isSso ? "bg-primary" : "bg-muted",
-                "disabled:pointer-events-none disabled:opacity-50",
+                "stg:relative stg:inline-flex stg:h-5 stg:w-9 stg:shrink-0 stg:cursor-pointer stg:rounded-full stg:border-2 stg:border-transparent stg:transition-colors",
+                isSso ? "stg:bg-primary" : "stg:bg-muted",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
               )}
             >
               <span
                 className={cn(
-                  "pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-                  isSso ? "translate-x-4" : "translate-x-0",
+                  "stg:pointer-events-none stg:inline-block stg:h-4 stg:w-4 stg:rounded-full stg:bg-background stg:shadow-sm stg:ring-0 stg:transition-transform",
+                  isSso ? "stg:translate-x-4" : "stg:translate-x-0",
                 )}
               />
             </button>
-            <span className="text-xs font-medium text-foreground">
+            <span className="stg:text-xs stg:font-medium stg:text-foreground">
               SSO provider
             </span>
           </div>
@@ -330,19 +330,19 @@ export function IdentityProviderDetailPanel({
           />
 
           {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 pt-1">
+          <div className="stg:flex stg:items-center stg:gap-2 stg:pt-1">
             <button
               type="submit"
               disabled={!canSave}
               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",
               )}
             >
               {isUpdating && <SpinnerIcon />}
@@ -353,9 +353,9 @@ export function IdentityProviderDetailPanel({
               onClick={cancelEdit}
               disabled={isUpdating}
               className={cn(
-                "rounded-md px-2.5 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-2.5 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
@@ -383,7 +383,7 @@ function ViewMode({
   updatedAt?: Timestamp;
 }) {
   return (
-    <dl className="space-y-2.5">
+    <dl className="stg:space-y-2.5">
       <Field label="JWKS URI" value={spec?.jwksUri} mono />
       <Field
         label="Allowed issuers"
@@ -414,7 +414,7 @@ function ViewMode({
       {/* JIT provisioning fields */}
       {!spec?.isSsoProvider && spec?.autoProvisionAccounts && (
         <>
-          <hr className="border-border-muted" />
+          <hr className="stg:border-border-muted" />
           <Field
             label="Auto-provision accounts"
             value={spec.autoProvisionAccounts ? "Enabled" : "Disabled"}
@@ -439,7 +439,7 @@ function ViewMode({
         </>
       )}
 
-      <div className="flex gap-6">
+      <div className="stg:flex stg:gap-6">
         {createdAt && (
           <Field
             label="Created"
@@ -469,13 +469,13 @@ function Field({
   if (!value) return null;
   return (
     <div>
-      <dt className="text-muted-foreground text-[0.65rem] font-medium">
+      <dt className="stg:text-muted-foreground stg:text-[0.65rem] stg:font-medium">
         {label}
       </dt>
       <dd
         className={cn(
-          "text-foreground mt-0.5 break-all text-xs",
-          mono && "font-mono",
+          "stg:text-foreground stg:mt-0.5 stg:break-all stg:text-xs",
+          mono && "stg:font-mono",
         )}
       >
         {value}
@@ -521,14 +521,14 @@ function CopyableField({
 
   return (
     <div>
-      <dt className="text-muted-foreground text-[0.65rem] font-medium">
+      <dt className="stg:text-muted-foreground stg:text-[0.65rem] stg:font-medium">
         {label}
       </dt>
-      <dd className="mt-0.5">
-        <div className="flex items-center gap-2">
+      <dd className="stg:mt-0.5">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <span
             id={valueId}
-            className="text-foreground break-all font-mono text-xs select-all"
+            className="stg:text-foreground stg:break-all stg:font-mono stg:text-xs stg:select-all"
           >
             {value}
           </span>
@@ -536,9 +536,9 @@ function CopyableField({
             type="button"
             onClick={handleCopy}
             className={cn(
-              "shrink-0 rounded px-1.5 py-0.5 text-[0.6rem]",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem]",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:transition-colors",
             )}
             aria-label={`Copy ${label}`}
           >
@@ -546,7 +546,7 @@ function CopyableField({
           </button>
         </div>
         {hint && (
-          <p className="text-muted-foreground mt-0.5 text-[0.65rem]">
+          <p className="stg:text-muted-foreground stg:mt-0.5 stg:text-[0.65rem]">
             {hint}
           </p>
         )}
@@ -554,7 +554,7 @@ function CopyableField({
           role="status"
           aria-live="polite"
           aria-atomic="true"
-          className="sr-only"
+          className="stg:sr-only"
         >
           {copied && "SSO login URL copied to clipboard"}
         </div>
@@ -587,8 +587,8 @@ function FieldInput({
   required?: boolean;
 }) {
   return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-1">
+      <label htmlFor={id} className="stg:text-xs stg:font-medium stg:text-foreground">
         {label}
       </label>
       <input
@@ -600,14 +600,14 @@ function FieldInput({
         disabled={disabled}
         required={required}
         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",
         )}
       />
       {hint && (
-        <p className="text-[0.65rem] text-muted-foreground">{hint}</p>
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>
       )}
     </div>
   );
@@ -620,14 +620,14 @@ function FieldInput({
 function ProvisioningModeBadge({ spec }: { spec: IdentityProvider["spec"] }) {
   if (spec?.isSsoProvider) {
     return (
-      <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+      <span className="stg:inline-flex stg:items-center stg:rounded-full stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-primary">
         SSO
       </span>
     );
   }
   if (spec?.autoProvisionAccounts) {
     return (
-      <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+      <span className="stg:inline-flex stg:items-center stg:rounded-full stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-primary">
         JIT
       </span>
     );
@@ -671,10 +671,10 @@ function JitEditSection({
 }) {
   if (isSso) {
     return (
-      <div className="rounded-md border border-border-muted bg-muted-faint px-3 py-2">
-        <p className="text-[0.65rem] text-muted-foreground">
+      <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:px-3 stg:py-2">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           SSO providers automatically provision accounts and grant the{" "}
-          <span className="font-medium text-foreground">viewer</span> role on
+          <span className="stg:font-medium stg:text-foreground">viewer</span> role on
           the owning organization. JIT provisioning settings are not applicable.
         </p>
       </div>
@@ -682,12 +682,12 @@ function JitEditSection({
   }
 
   return (
-    <fieldset className="space-y-2.5" disabled={disabled}>
-      <hr className="border-border-muted" />
-      <legend className="text-xs font-medium text-foreground">
+    <fieldset className="stg:space-y-2.5" disabled={disabled}>
+      <hr className="stg:border-border-muted" />
+      <legend className="stg:text-xs stg:font-medium stg:text-foreground">
         JIT provisioning
       </legend>
-      <p className="text-[0.65rem] text-muted-foreground">
+      <p className="stg:text-[0.65rem] stg:text-muted-foreground">
         Configure automatic account creation and role assignment for users
         authenticating with this provider.
       </p>
@@ -710,10 +710,10 @@ function JitEditSection({
 
       {autoGrant && (
         <>
-          <div className="space-y-1">
+          <div className="stg:space-y-1">
             <label
               htmlFor="stgm-idp-edit-grant-role"
-              className="text-xs font-medium text-foreground"
+              className="stg:text-xs stg:font-medium stg:text-foreground"
             >
               Auto-grant role
             </label>
@@ -723,9 +723,9 @@ function JitEditSection({
               onChange={(e) => onAutoGrantRoleChange(Number(e.target.value) as IamRole)}
               disabled={disabled}
               className={cn(
-                "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-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:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
               )}
             >
               {JIT_ROLE_OPTIONS.map((opt) => (
@@ -734,7 +734,7 @@ function JitEditSection({
                 </option>
               ))}
             </select>
-            <p className="text-[0.65rem] text-muted-foreground">
+            <p className="stg:text-[0.65rem] stg:text-muted-foreground">
               Role granted automatically — org admins can upgrade later
             </p>
           </div>
@@ -772,8 +772,8 @@ function ToggleSwitch({
   disabled?: boolean;
 }) {
   return (
-    <div className="space-y-0.5">
-      <div className="flex items-center gap-2">
+    <div className="stg:space-y-0.5">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="button"
           role="switch"
@@ -781,22 +781,22 @@ function ToggleSwitch({
           onClick={() => onChange(!checked)}
           disabled={disabled}
           className={cn(
-            "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-            checked ? "bg-primary" : "bg-muted",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:relative stg:inline-flex stg:h-5 stg:w-9 stg:shrink-0 stg:cursor-pointer stg:rounded-full stg:border-2 stg:border-transparent stg:transition-colors",
+            checked ? "stg:bg-primary" : "stg:bg-muted",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           <span
             className={cn(
-              "pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-              checked ? "translate-x-4" : "translate-x-0",
+              "stg:pointer-events-none stg:inline-block stg:h-4 stg:w-4 stg:rounded-full stg:bg-background stg:shadow-sm stg:ring-0 stg:transition-transform",
+              checked ? "stg:translate-x-4" : "stg:translate-x-0",
             )}
           />
         </button>
-        <span className="text-xs font-medium text-foreground">{label}</span>
+        <span className="stg:text-xs stg:font-medium stg:text-foreground">{label}</span>
       </div>
       {hint && (
-        <p className="pl-11 text-[0.65rem] text-muted-foreground">{hint}</p>
+        <p className="stg:pl-11 stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>
       )}
     </div>
   );
@@ -856,7 +856,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" />