@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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>
   );

package/src/identity-provider/SsoLoginPrompt.tsx

@@ -125,7 +125,7 @@ export function SsoLoginPrompt({
 
   return (
     <div
-      className={cn("w-full", className)}
+      className={cn("stg:w-full", className)}
       role="region"
       aria-label="SSO sign-in"
     >
@@ -195,10 +195,10 @@ interface OrgInputFormProps {
 const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
   function OrgInputForm({ value, onChange, onSubmit }, ref) {
     return (
-      <form onSubmit={onSubmit} className="space-y-3">
+      <form onSubmit={onSubmit} className="stg:space-y-3">
         <label
           htmlFor="sso-org-input"
-          className="block text-sm font-medium text-foreground"
+          className="stg:block stg:text-sm stg:font-medium stg:text-foreground"
         >
           Organization
         </label>
@@ -212,22 +212,22 @@ const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
           autoComplete="organization"
           spellCheck={false}
           className={cn(
-            "block w-full rounded-md border border-input bg-background px-3 py-2",
-            "text-sm text-foreground placeholder:text-muted-foreground",
-            "focus:outline-none focus:ring-2 focus:ring-ring",
-            "transition-colors",
+            "stg:block stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-2",
+            "stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground",
+            "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+            "stg:transition-colors",
           )}
         />
         <button
           type="submit"
           disabled={!value.trim()}
           className={cn(
-            "w-full rounded-md px-4 py-2 text-sm font-medium",
-            "bg-primary text-primary-foreground",
-            "hover:bg-primary-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
-            "transition-colors",
+            "stg:w-full stg:rounded-md stg:px-4 stg:py-2 stg:text-sm stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground",
+            "stg:hover:bg-primary-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            "stg:transition-colors",
           )}
         >
           Continue
@@ -240,13 +240,13 @@ const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
 function LoadingState({ org }: { org: string }) {
   return (
     <div
-      className="flex flex-col items-center gap-3 py-4"
+      className="stg:flex stg:flex-col stg:items-center stg:gap-3 stg:py-4"
       aria-busy="true"
       aria-label={`Looking up SSO provider for ${org}`}
     >
       <SpinnerIcon />
-      <p className="text-sm text-muted-foreground">
-        Looking up <span className="font-medium text-foreground">{org}</span>&hellip;
+      <p className="stg:text-sm stg:text-muted-foreground">
+        Looking up <span className="stg:font-medium stg:text-foreground">{org}</span>&hellip;
       </p>
     </div>
   );
@@ -266,11 +266,11 @@ function FoundState({
   onChangeOrg: () => void;
 }) {
   return (
-    <div className="space-y-4">
-      <div className="text-center">
-        <p className="text-xs text-muted-foreground">
+    <div className="stg:space-y-4">
+      <div className="stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           Signing in to{" "}
-          <span className="font-medium text-foreground">{org}</span>
+          <span className="stg:font-medium stg:text-foreground">{org}</span>
         </p>
       </div>
 
@@ -279,12 +279,12 @@ function FoundState({
         onClick={onClick}
         onKeyDown={onKeyDown}
         className={cn(
-          "flex w-full items-center justify-center gap-2 rounded-md px-4 py-2.5",
-          "text-sm font-medium",
-          "bg-primary text-primary-foreground",
-          "hover:bg-primary-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "transition-colors",
+          "stg:flex stg:w-full stg:items-center stg:justify-center stg:gap-2 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:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          "stg:transition-colors",
         )}
       >
         <SsoShieldIcon />
@@ -294,7 +294,7 @@ function FoundState({
       <button
         type="button"
         onClick={onChangeOrg}
-        className="block w-full text-center text-xs text-muted-foreground hover:text-foreground transition-colors"
+        className="stg:block stg:w-full stg:text-center stg:text-xs stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
       >
         Not your organization? Change
       </button>
@@ -310,15 +310,15 @@ function NotFoundState({
   onBack: () => void;
 }) {
   return (
-    <div className="space-y-3 text-center">
-      <p className="text-sm text-muted-foreground">
+    <div className="stg:space-y-3 stg:text-center">
+      <p className="stg:text-sm stg:text-muted-foreground">
         No SSO provider configured for{" "}
-        <span className="font-medium text-foreground">{org}</span>.
+        <span className="stg:font-medium stg:text-foreground">{org}</span>.
       </p>
       <button
         type="button"
         onClick={onBack}
-        className="text-xs text-primary hover:text-primary-hover transition-colors"
+        className="stg:text-xs stg:text-primary stg:hover:text-primary-hover stg:transition-colors"
       >
         Try a different organization
       </button>
@@ -336,16 +336,16 @@ function ErrorState({
   onBack: () => void;
 }) {
   return (
-    <div className="space-y-3 text-center" role="alert">
-      <p className="text-sm text-destructive">{getUserMessage(error)}</p>
-      <div className="flex items-center justify-center gap-3">
+    <div className="stg:space-y-3 stg:text-center" role="alert">
+      <p className="stg:text-sm stg:text-destructive">{getUserMessage(error)}</p>
+      <div className="stg:flex stg:items-center stg:justify-center stg:gap-3">
         <button
           type="button"
           onClick={onRetry}
           className={cn(
-            "rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "transition-colors",
+            "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:transition-colors",
           )}
         >
           Retry
@@ -353,7 +353,7 @@ function ErrorState({
         <button
           type="button"
           onClick={onBack}
-          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          className="stg:text-xs stg:text-muted-foreground stg:hover:text-foreground stg:transition-colors"
         >
           Back
         </button>
@@ -376,7 +376,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin text-muted-foreground"
+      className="stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/index.ts

@@ -528,6 +528,7 @@ export {
   useMcpServerSetup,
   useMcpServerConnect,
   useMcpServerOAuthConnect,
+  getOAuthConnectErrorMessage,
   useMcpServerCredentials,
   useOAuthGrantStatus,
   useDisconnectOAuth,

package/src/inline-edit/InlineEditImage.tsx

@@ -73,20 +73,20 @@ export function InlineEditImage({
     [handleConfirm, handleCancel],
   );
 
-  const sizeClasses = size === "sm" ? "size-6" : "size-8";
+  const sizeClasses = size === "sm" ? "stg:size-6" : "stg:size-8";
   const displayError = localError || error;
 
   if (disabled || !isEditing) {
     return (
-      <div className={cn("group/inline-edit inline-flex", className)}>
+      <div className={cn("stg:group/inline-edit stg:inline-flex", className)}>
         <button
           type="button"
           onClick={() => { if (!disabled) setIsEditing(true); }}
           disabled={disabled}
           className={cn(
-            "relative rounded-md p-0.5 transition-colors",
-            !disabled && "hover:bg-accent-hover cursor-pointer",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:relative stg:rounded-md stg:p-0.5 stg:transition-colors",
+            !disabled && "stg:hover:bg-accent-hover stg:cursor-pointer",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
           aria-label="Change icon"
         >
@@ -94,14 +94,14 @@ export function InlineEditImage({
             <img
               src={value}
               alt=""
-              className={cn(sizeClasses, "shrink-0 rounded object-cover")}
+              className={cn(sizeClasses, "stg:shrink-0 stg:rounded stg:object-cover")}
             />
           ) : (
-            fallback ?? <ImagePlaceholder className={cn(sizeClasses, "text-muted-foreground")} />
+            fallback ?? <ImagePlaceholder className={cn(sizeClasses, "stg:text-muted-foreground")} />
           )}
           {!disabled && (
-            <span className="absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100">
-              <PencilIcon className="size-2.5" />
+            <span className="stg:absolute stg:-bottom-0.5 stg:-right-0.5 stg:flex stg:size-4 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:text-muted-foreground stg:opacity-0 stg:transition-opacity stg:group-hover/inline-edit:opacity-100">
+              <PencilIcon className="stg:size-2.5" />
             </span>
           )}
         </button>
@@ -110,8 +110,8 @@ export function InlineEditImage({
   }
 
   return (
-    <div className={cn("flex flex-col gap-1", className)}>
-      <div className="flex items-center gap-1.5">
+    <div className={cn("stg:flex stg:flex-col stg:gap-1", className)}>
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <input
           ref={inputRef}
           type="url"
@@ -121,37 +121,37 @@ export function InlineEditImage({
           disabled={isSaving}
           placeholder="https://example.com/icon.png"
           className={cn(
-            "flex-1 rounded-md border border-border bg-input-bg px-2 py-1 text-sm text-foreground",
-            "focus:outline-none focus:ring-2 focus:ring-ring",
-            "disabled:opacity-50",
-            displayError && "border-destructive",
+            "stg:flex-1 stg:rounded-md stg:border stg:border-border stg:bg-input-bg stg:px-2 stg:py-1 stg:text-sm stg:text-foreground",
+            "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
+            "stg:disabled:opacity-50",
+            displayError && "stg:border-destructive",
           )}
         />
         <button type="button" onClick={handleConfirm} disabled={isSaving} aria-label="Save"
           className={cn(
-            "inline-flex size-7 items-center justify-center rounded-md",
-            "bg-primary text-primary-foreground hover:bg-primary-hover disabled:opacity-50",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:inline-flex stg:size-7 stg:items-center stg:justify-center stg:rounded-md",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover stg:disabled:opacity-50",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}>
-          {isSaving ? <Spinner /> : <CheckIcon className="size-3.5" />}
+          {isSaving ? <Spinner /> : <CheckIcon className="stg:size-3.5" />}
         </button>
         <button type="button" onClick={handleCancel} disabled={isSaving} aria-label="Cancel"
           className={cn(
-            "inline-flex size-7 items-center justify-center rounded-md",
-            "border border-border bg-background text-foreground hover:bg-accent disabled:opacity-50",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:inline-flex stg:size-7 stg:items-center stg:justify-center stg:rounded-md",
+            "stg:border stg:border-border stg:bg-background stg:text-foreground stg:hover:bg-accent stg:disabled:opacity-50",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}>
-          <XIcon className="size-3.5" />
+          <XIcon className="stg:size-3.5" />
         </button>
         {draft && (
           <button type="button" onClick={() => setDraft("")} disabled={isSaving} aria-label="Clear"
-            className="text-xs text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground">
+            className="stg:text-xs stg:text-muted-foreground stg:underline stg:decoration-muted-foreground/40 stg:underline-offset-2 stg:hover:text-foreground">
             Clear
           </button>
         )}
       </div>
       {displayError && (
-        <p className="px-1 text-xs text-destructive" role="alert">{displayError}</p>
+        <p className="stg:px-1 stg:text-xs stg:text-destructive" role="alert">{displayError}</p>
       )}
     </div>
   );
@@ -201,7 +201,7 @@ function ImagePlaceholder({ className }: { readonly className?: string }) {
 
 function Spinner() {
   return (
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="animate-spin" aria-hidden="true">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="stg:animate-spin" aria-hidden="true">
       <path d="M8 2a6 6 0 1 0 6 6" />
     </svg>
   );

package/src/inline-edit/InlineEditKeyValue.tsx

@@ -97,55 +97,55 @@ export function InlineEditKeyValue({
 
   if (disabled || !isEditing) {
     return (
-      <div className={cn("flex flex-col", className)}>
+      <div className={cn("stg:flex stg:flex-col", className)}>
         {value.length > 0 ? (
-          <div className="flex flex-col divide-y divide-border">
+          <div className="stg:flex stg:flex-col stg:divide-y stg:divide-border">
             {value.map((row) => (
-              <div key={row.key} className="flex items-start gap-3 px-3 py-2.5">
-                <code className="shrink-0 font-mono text-sm font-medium text-foreground">
+              <div key={row.key} className="stg:flex stg:items-start stg:gap-3 stg:px-3 stg:py-2.5">
+                <code className="stg:shrink-0 stg:font-mono stg:text-sm stg:font-medium stg:text-foreground">
                   {row.key}
                 </code>
                 {showValue && (
-                  <span className="min-w-0 break-all font-mono text-xs text-muted-foreground">
+                  <span className="stg:min-w-0 stg:break-all stg:font-mono stg:text-xs stg:text-muted-foreground">
                     {row.value}
                   </span>
                 )}
                 {showSecretToggle && (
-                  <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                  <span className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground">
                     {row.isSecret ? "secret" : "config"}
                   </span>
                 )}
                 {showOptionalToggle && row.optional && (
-                  <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground-subtle">
+                  <span className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground-subtle">
                     optional
                   </span>
                 )}
                 {row.description && (
-                  <span className="text-xs text-muted-foreground">{row.description}</span>
+                  <span className="stg:text-xs stg:text-muted-foreground">{row.description}</span>
                 )}
               </div>
             ))}
           </div>
         ) : (
-          <p className="px-3 py-3 text-xs text-muted-foreground italic">No entries</p>
+          <p className="stg:px-3 stg:py-3 stg:text-xs stg:text-muted-foreground stg:italic">No entries</p>
         )}
       </div>
     );
   }
 
   return (
-    <div className={cn("flex flex-col gap-3", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-3", className)}>
       {draft.map((row, i) => (
-        <div key={i} className="flex items-start gap-2 rounded-md border border-border bg-muted-faint p-2.5">
-          <div className="flex flex-1 flex-col gap-1.5">
+        <div key={i} className="stg:flex stg:items-start stg:gap-2 stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:p-2.5">
+          <div className="stg:flex stg:flex-1 stg:flex-col stg:gap-1.5">
             <input
               type="text"
               value={row.key}
               onChange={(e) => updateRow(i, { key: e.target.value })}
               placeholder={keyLabel}
               className={cn(
-                "rounded-md border border-border bg-input-bg px-2 py-1 font-mono text-sm text-foreground",
-                "focus:outline-none focus:ring-2 focus:ring-ring",
+                "stg:rounded-md stg:border stg:border-border stg:bg-input-bg stg:px-2 stg:py-1 stg:font-mono stg:text-sm stg:text-foreground",
+                "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
               )}
             />
             {showValue && (
@@ -155,8 +155,8 @@ export function InlineEditKeyValue({
                 onChange={(e) => updateRow(i, { value: e.target.value })}
                 placeholder={valueLabel}
                 className={cn(
-                  "rounded-md border border-border bg-input-bg px-2 py-1 font-mono text-sm text-foreground",
-                  "focus:outline-none focus:ring-2 focus:ring-ring",
+                  "stg:rounded-md stg:border stg:border-border stg:bg-input-bg stg:px-2 stg:py-1 stg:font-mono stg:text-sm stg:text-foreground",
+                  "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
                 )}
               />
             )}
@@ -167,30 +167,30 @@ export function InlineEditKeyValue({
                 onChange={(e) => updateRow(i, { description: e.target.value })}
                 placeholder="Description"
                 className={cn(
-                  "rounded-md border border-border bg-input-bg px-2 py-1 text-xs text-foreground",
-                  "focus:outline-none focus:ring-2 focus:ring-ring",
+                  "stg:rounded-md stg:border stg:border-border stg:bg-input-bg stg:px-2 stg:py-1 stg:text-xs stg:text-foreground",
+                  "stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-ring",
                 )}
               />
             )}
-            <div className="flex items-center gap-3">
+            <div className="stg:flex stg:items-center stg:gap-3">
               {showSecretToggle && (
-                <label className="inline-flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                <label className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground stg:cursor-pointer">
                   <input
                     type="checkbox"
                     checked={row.isSecret ?? false}
                     onChange={(e) => updateRow(i, { isSecret: e.target.checked })}
-                    className="size-3.5 rounded border-border"
+                    className="stg:size-3.5 stg:rounded stg:border-border"
                   />
                   Secret
                 </label>
               )}
               {showOptionalToggle && (
-                <label className="inline-flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer">
+                <label className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground stg:cursor-pointer">
                   <input
                     type="checkbox"
                     checked={row.optional ?? false}
                     onChange={(e) => updateRow(i, { optional: e.target.checked })}
-                    className="size-3.5 rounded border-border"
+                    className="stg:size-3.5 stg:rounded stg:border-border"
                   />
                   Optional
                 </label>
@@ -202,12 +202,12 @@ export function InlineEditKeyValue({
             onClick={() => removeRow(i)}
             aria-label={`Remove ${row.key || "entry"}`}
             className={cn(
-              "mt-1 inline-flex size-6 items-center justify-center rounded-md text-muted-foreground",
-              "hover:bg-destructive-subtle hover:text-destructive",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:mt-1 stg:inline-flex stg:size-6 stg:items-center stg:justify-center stg:rounded-md stg:text-muted-foreground",
+              "stg:hover:bg-destructive-subtle stg:hover:text-destructive",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
-            <TrashIcon className="size-3.5" />
+            <TrashIcon className="stg:size-3.5" />
           </button>
         </div>
       ))}
@@ -216,27 +216,27 @@ export function InlineEditKeyValue({
         type="button"
         onClick={addRow}
         className={cn(
-          "inline-flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs font-medium",
-          "border border-dashed border-border text-muted-foreground",
-          "hover:border-muted-foreground hover:text-foreground hover:bg-muted-subtle",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "transition-colors",
+          "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-1.5 stg:text-xs stg:font-medium",
+          "stg:border stg:border-dashed stg:border-border stg:text-muted-foreground",
+          "stg:hover:border-muted-foreground stg:hover:text-foreground stg:hover:bg-muted-subtle",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          "stg:transition-colors",
         )}
       >
-        <PlusIcon className="size-3" />
+        <PlusIcon className="stg:size-3" />
         Add entry
       </button>
 
-      <div className="flex items-center justify-end gap-1.5">
+      <div className="stg:flex stg:items-center stg:justify-end stg:gap-1.5">
         <button
           type="button"
           onClick={handleCancel}
           disabled={isSaving}
           className={cn(
-            "rounded-md px-2.5 py-1 text-xs font-medium",
-            "border border-border bg-background text-foreground hover:bg-accent",
-            "disabled:opacity-50",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium",
+            "stg:border stg:border-border stg:bg-background stg:text-foreground stg:hover:bg-accent",
+            "stg:disabled:opacity-50",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           Cancel
@@ -246,10 +246,10 @@ export function InlineEditKeyValue({
           onClick={handleSave}
           disabled={isSaving}
           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:opacity-50",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "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:opacity-50",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           {isSaving && <Spinner />}
@@ -258,7 +258,7 @@ export function InlineEditKeyValue({
       </div>
 
       {error && (
-        <p className="px-1 text-xs text-destructive" role="alert">{error}</p>
+        <p className="stg:px-1 stg:text-xs stg:text-destructive" role="alert">{error}</p>
       )}
     </div>
   );
@@ -294,7 +294,7 @@ function TrashIcon({ className }: { readonly className?: string }) {
 
 function Spinner() {
   return (
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="animate-spin" aria-hidden="true">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="stg:animate-spin" aria-hidden="true">
       <path d="M8 2a6 6 0 1 0 6 6" />
     </svg>
   );