@stigmer/react 3.10.0 → 3.11.0

package/src/identity-provider/IdentityProviderListPanel.tsx

@@ -64,14 +64,14 @@ export function IdentityProviderListPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading identity providers"
       >
         {Array.from({ length: 2 }, (_, 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>
@@ -80,7 +80,7 @@ export function IdentityProviderListPanel({
 
   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>
     );
@@ -90,7 +90,7 @@ export function IdentityProviderListPanel({
     return (
       <p
         className={cn(
-          "text-muted-foreground py-4 text-center text-xs",
+          "stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs",
           className,
         )}
       >
@@ -101,7 +101,7 @@ export function IdentityProviderListPanel({
 
   return (
     <div
-      className={cn("space-y-2", className)}
+      className={cn("stg:space-y-2", className)}
       role="list"
       aria-label="Identity providers"
     >
@@ -172,28 +172,28 @@ function IdpRow({
     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">
-            Delete <span className="font-medium">{name}</span>?
+        <div className="stg:min-w-0 stg:flex-1">
+          <p className="stg:text-xs stg:text-foreground">
+            Delete <span className="stg:font-medium">{name}</span>?
           </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">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
           <button
             type="button"
             onClick={handleDelete}
             disabled={isDeleting}
             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",
             )}
           >
             {isDeleting && <SpinnerIcon />}
@@ -204,9 +204,9 @@ function IdpRow({
             onClick={onCancelDelete}
             disabled={isDeleting}
             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
@@ -219,29 +219,29 @@ function IdpRow({
   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"
     >
       <ShieldIcon />
 
-      <div className="min-w-0 flex-1">
-        <span className="block truncate text-sm font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <span className="stg:block stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {name}
         </span>
         {slug && (
-          <span className="block text-xs text-muted-foreground font-mono">
+          <span className="stg:block stg:text-xs stg:text-muted-foreground stg:font-mono">
             {slug}
           </span>
         )}
       </div>
 
-      <div className="hidden sm:flex shrink-0 items-center gap-3 text-xs text-muted-foreground">
+      <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-3 stg:text-xs stg:text-muted-foreground">
         {isSso && (
-          <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>
         )}
         {isJit && (
-          <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>
         )}
@@ -252,16 +252,16 @@ function IdpRow({
         )}
       </div>
 
-      <div className="flex shrink-0 items-center gap-1">
+      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
         {onEdit && (
           <button
             type="button"
             onClick={onEdit}
             aria-label={`Edit ${name}`}
             className={cn(
-              "shrink-0 rounded p-1",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "transition-colors",
+              "stg:shrink-0 stg:rounded stg:p-1",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:transition-colors",
             )}
           >
             <PencilIcon />
@@ -272,9 +272,9 @@ function IdpRow({
           onClick={onConfirmDelete}
           aria-label={`Delete ${name}`}
           className={cn(
-            "shrink-0 rounded p-1",
-            "text-muted-foreground hover:text-destructive hover:bg-destructive-subtle",
-            "transition-colors",
+            "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 />
@@ -312,7 +312,7 @@ function ShieldIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
     >
       <path d="M8 1.5L2 4v4c0 3.5 2.5 5.5 6 7 3.5-1.5 6-3.5 6-7V4L8 1.5z" />
     </svg>
@@ -368,7 +368,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/IdentityProviderWizard.tsx

@@ -205,19 +205,19 @@ export function IdentityProviderWizard({
   // -- Render ----------------------------------------------------------
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("stg:space-y-4", className)}>
       {/* Step indicator */}
       <StepIndicator current={step} />
 
       {step === "pick" && (
         <>
-          <p className="text-muted-foreground text-xs">
+          <p className="stg:text-muted-foreground stg:text-xs">
             Choose your identity provider to get started. Known providers
             will have their OIDC configuration auto-populated.
           </p>
           <ProviderPicker onSelect={handlePickProvider} />
           {onCancel && (
-            <div className="pt-1">
+            <div className="stg:pt-1">
               <CancelButton onClick={onCancel} />
             </div>
           )}
@@ -301,28 +301,28 @@ const STEPS: { key: WizardStep; label: string }[] = [
 function StepIndicator({ current }: { current: WizardStep }) {
   const currentIdx = STEPS.findIndex((s) => s.key === current);
   return (
-    <nav aria-label="Wizard progress" className="flex items-center gap-1.5">
+    <nav aria-label="Wizard progress" className="stg:flex stg:items-center stg:gap-1.5">
       {STEPS.map((s, i) => {
         const state =
           i < currentIdx ? "done" : i === currentIdx ? "active" : "upcoming";
         return (
-          <span key={s.key} className="flex items-center gap-1.5">
+          <span key={s.key} className="stg:flex stg:items-center stg:gap-1.5">
             {i > 0 && (
               <span
                 className={cn(
-                  "h-px w-4",
-                  state === "upcoming" ? "bg-border" : "bg-primary-subtle",
+                  "stg:h-px stg:w-4",
+                  state === "upcoming" ? "stg:bg-border" : "stg:bg-primary-subtle",
                 )}
               />
             )}
             <span
               className={cn(
-                "text-[0.65rem] font-medium",
+                "stg:text-[0.65rem] stg:font-medium",
                 state === "active"
-                  ? "text-primary"
+                  ? "stg:text-primary"
                   : state === "done"
-                    ? "text-muted-foreground"
-                    : "text-muted-foreground-faint",
+                    ? "stg:text-muted-foreground"
+                    : "stg:text-muted-foreground-faint",
               )}
             >
               {s.label}
@@ -375,8 +375,8 @@ function ConfigureStep({
     !isLoading;
 
   return (
-    <div className="space-y-3">
-      <p className="text-muted-foreground text-xs">
+    <div className="stg:space-y-3">
+      <p className="stg:text-muted-foreground stg:text-xs">
         {preset.variables.length > 0
           ? `Enter your ${preset.label} details to auto-populate the OIDC configuration.`
           : `${preset.label} configuration is fully automatic — just provide a name and audience.`}
@@ -398,7 +398,7 @@ function ConfigureStep({
         />
       ))}
 
-      <hr className="border-border-muted" />
+      <hr className="stg:border-border-muted" />
 
       {/* Common fields */}
       <FieldInput
@@ -422,20 +422,20 @@ function ConfigureStep({
       />
 
       {discoveryError && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(discoveryError)}
         </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="button"
           onClick={onContinue}
           disabled={!canContinue}
           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",
           )}
         >
           {isLoading && <SpinnerIcon />}
@@ -514,10 +514,10 @@ function ReviewStep({
     !isCreating;
 
   return (
-    <form onSubmit={onSubmit} className="space-y-3">
+    <form onSubmit={onSubmit} className="stg:space-y-3">
       {discoveryFailed && (
         <div
-          className="rounded-md border border-warning/30 bg-warning/5 px-3 py-2 text-xs text-warning-foreground"
+          className="stg:rounded-md stg:border stg:border-warning/30 stg:bg-warning/5 stg:px-3 stg:py-2 stg:text-xs stg:text-warning-foreground"
           role="alert"
         >
           Auto-discovery could not reach the provider. Enter the
@@ -525,7 +525,7 @@ function ReviewStep({
         </div>
       )}
 
-      <p className="text-muted-foreground text-xs">
+      <p className="stg:text-muted-foreground stg:text-xs">
         Review the OIDC configuration. All fields are editable.
       </p>
 
@@ -596,19 +596,19 @@ function ReviewStep({
       />
 
       {createError && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(createError)}
         </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={!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 />}
@@ -657,47 +657,47 @@ function SuccessStep({
       : "viewer";
 
   return (
-    <div className="space-y-4">
-      <div className="rounded-md border border-primary/30 bg-primary-subtle px-3 py-2.5">
-        <p className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-4">
+      <div className="stg:rounded-md stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-3 stg:py-2.5">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           {displayName} created successfully
         </p>
       </div>
 
-      <div className="space-y-2">
-        <p className="text-xs font-medium text-foreground">What happens next</p>
+      <div className="stg:space-y-2">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">What happens next</p>
 
         {isSso ? (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             Users can sign in via SSO at{" "}
-            <span className="font-mono text-foreground">
+            <span className="stg:font-mono stg:text-foreground">
               /login?org={org}
             </span>
             . Accounts are auto-provisioned and granted the{" "}
-            <span className="font-medium text-foreground">viewer</span> role on
+            <span className="stg:font-medium stg:text-foreground">viewer</span> role on
             this organization.
           </p>
         ) : autoProvision && autoGrant ? (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             Users authenticating with JWTs from this provider will be
             automatically provisioned and granted the{" "}
-            <span className="font-medium text-foreground">{roleName}</span> role
+            <span className="stg:font-medium stg:text-foreground">{roleName}</span> role
             on this organization. No additional setup is required.
           </p>
         ) : autoProvision ? (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             Accounts are auto-provisioned on first authentication, but no
             organization role is granted automatically. Use the Members page to
             grant access.
           </p>
         ) : (
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             The trust relationship is configured. Accounts must be created
             manually before users can authenticate.
           </p>
         )}
 
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           To verify the setup, have a user authenticate with a JWT from this
           provider and confirm they can access the organization&apos;s resources.
         </p>
@@ -707,8 +707,8 @@ function SuccessStep({
         type="button"
         onClick={onDone}
         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",
+          "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",
         )}
       >
         Done
@@ -745,8 +745,8 @@ function FieldInput({
   options?: readonly { readonly value: string; readonly label: string }[];
 }) {
   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>
       {type === "select" && options ? (
@@ -756,9 +756,9 @@ function FieldInput({
           onChange={(e) => onChange(e.target.value)}
           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",
           )}
         >
           {options.map((opt) => (
@@ -777,15 +777,15 @@ 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>
   );
@@ -827,10 +827,10 @@ function JitProvisioningSection({
 }) {
   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>
@@ -838,12 +838,12 @@ function JitProvisioningSection({
   }
 
   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>
@@ -911,8 +911,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"
@@ -920,22 +920,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>
   );
@@ -956,9 +956,9 @@ function TextButton({
       onClick={onClick}
       disabled={disabled}
       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",
       )}
     >
       {children}
@@ -990,7 +990,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/ProviderPicker.tsx

@@ -32,7 +32,7 @@ export interface ProviderPickerProps {
 export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
   return (
     <div
-      className={cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className)}
+      className={cn("stg:grid stg:grid-cols-2 stg:gap-2 stg:sm:grid-cols-3", className)}
       role="listbox"
       aria-label="Choose an identity provider"
     >
@@ -44,20 +44,20 @@ export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
           aria-selected={false}
           onClick={() => onSelect(preset)}
           className={cn(
-            "flex flex-col items-start gap-2 rounded-lg px-3 py-3 text-left transition-colors",
-            "border hover:border-primary/60 hover:bg-accent-hover",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "stg:flex stg:flex-col stg:items-start stg:gap-2 stg:rounded-lg stg:px-3 stg:py-3 stg:text-left stg:transition-colors",
+            "stg:border stg:hover:border-primary/60 stg:hover:bg-accent-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
             preset.id === "custom"
-              ? "border-dashed border-border"
-              : "border-border-muted",
+              ? "stg:border-dashed stg:border-border"
+              : "stg:border-border-muted",
           )}
         >
           <ProviderIcon presetId={preset.id} />
-          <div className="min-w-0">
-            <span className="block text-sm font-medium text-foreground">
+          <div className="stg:min-w-0">
+            <span className="stg:block stg:text-sm stg:font-medium stg:text-foreground">
               {preset.label}
             </span>
-            <span className="block text-[0.65rem] leading-tight text-muted-foreground">
+            <span className="stg:block stg:text-[0.65rem] stg:leading-tight stg:text-muted-foreground">
               {preset.description}
             </span>
           </div>
@@ -74,7 +74,7 @@ export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
 function ProviderIcon({ presetId }: { presetId: string }) {
   const Icon = ICON_MAP[presetId] ?? DefaultIcon;
   return (
-    <span className="flex size-8 items-center justify-center rounded-lg bg-muted">
+    <span className="stg:flex stg:size-8 stg:items-center stg:justify-center stg:rounded-lg stg:bg-muted">
       <Icon />
     </span>
   );
@@ -91,7 +91,7 @@ const ICON_MAP: Record<string, React.ComponentType> = {
 
 function LockIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <rect x="3.5" y="7" width="9" height="7" rx="1.5" />
       <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
     </svg>
@@ -100,7 +100,7 @@ function LockIcon() {
 
 function KeyIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="5.5" cy="10" r="3" />
       <path d="M8 8l5.5-5.5M11 5l2-0.5L13.5 2.5" />
     </svg>
@@ -109,7 +109,7 @@ function KeyIcon() {
 
 function GlobeIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="8" cy="8" r="6" />
       <path d="M2 8h12M8 2c2 2 2.5 4 2.5 6S10 14 8 14c-2-2-2.5-4-2.5-6S6 2 8 2z" />
     </svg>
@@ -118,7 +118,7 @@ function GlobeIcon() {
 
 function CloudIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <path d="M4 12.5h8.5a3 3 0 0 0 0-6 .5.5 0 0 1-.5-.4A4.5 4.5 0 0 0 3.5 8v.5a3 3 0 0 0 .5 6z" />
     </svg>
   );
@@ -126,7 +126,7 @@ function CloudIcon() {
 
 function UsersIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="6" cy="5" r="2.5" />
       <path d="M1.5 14c0-2.5 2-4.5 4.5-4.5S10.5 11.5 10.5 14" />
       <circle cx="11.5" cy="5.5" r="1.5" />
@@ -137,7 +137,7 @@ function UsersIcon() {
 
 function CodeIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <path d="M5 4.5L1.5 8 5 11.5M11 4.5l3.5 3.5-3.5 3.5M9 2.5l-2 11" />
     </svg>
   );
@@ -145,7 +145,7 @@ function CodeIcon() {
 
 function DefaultIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="stg:text-muted-foreground">
       <circle cx="8" cy="8" r="6" />
     </svg>
   );