@stigmer/react 3.10.0 → 3.11.0

package/src/inline-edit/InlineEditResourceList.tsx

@@ -109,15 +109,15 @@ export function InlineEditResourceList({
 
   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((ref, index) => {
               const label = ref.label ?? ref.slug;
               const row = (
-                <div className="flex items-center gap-3">
-                  {itemIcon && <span className="size-4 shrink-0 text-muted-foreground">{itemIcon}</span>}
-                  <span className="text-sm font-medium text-foreground">{label}</span>
+                <div className="stg:flex stg:items-center stg:gap-3">
+                  {itemIcon && <span className="stg:size-4 stg:shrink-0 stg:text-muted-foreground">{itemIcon}</span>}
+                  <span className="stg:text-sm stg:font-medium stg:text-foreground">{label}</span>
                 </div>
               );
 
@@ -127,22 +127,22 @@ export function InlineEditResourceList({
                   type="button"
                   onClick={() => onItemClick(ref)}
                   className={cn(
-                    "w-full px-3 py-2.5 text-left transition-colors",
-                    "hover:bg-accent-hover",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                    "stg:w-full stg:px-3 stg:py-2.5 stg:text-left stg:transition-colors",
+                    "stg:hover:bg-accent-hover",
+                    "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
                   )}
                 >
                   {row}
                 </button>
               ) : (
-                <div key={`${ref.org}/${ref.slug}` || index} className="px-3 py-2.5">
+                <div key={`${ref.org}/${ref.slug}` || index} className="stg:px-3 stg:py-2.5">
                   {row}
                 </div>
               );
             })}
           </div>
         ) : (
-          <p className="px-3 py-3 text-xs text-muted-foreground italic">
+          <p className="stg:px-3 stg:py-3 stg:text-xs stg:text-muted-foreground stg:italic">
             No {resourceLabel}s configured
           </p>
         )}
@@ -151,13 +151,13 @@ export function InlineEditResourceList({
   }
 
   return (
-    <div className={cn("flex flex-col gap-2", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-2", className)}>
       {draft.length > 0 && (
-        <div className="flex flex-col divide-y divide-border rounded-md border border-border">
+        <div className="stg:flex stg:flex-col stg:divide-y stg:divide-border stg:rounded-md stg:border stg:border-border">
           {draft.map((ref, i) => (
-            <div key={`${ref.org}/${ref.slug}`} className="flex items-center gap-2 px-3 py-1.5">
-              {itemIcon && <span className="size-4 shrink-0 text-muted-foreground">{itemIcon}</span>}
-              <span className="flex-1 text-sm font-medium text-foreground">
+            <div key={`${ref.org}/${ref.slug}`} className="stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-1.5">
+              {itemIcon && <span className="stg:size-4 stg:shrink-0 stg:text-muted-foreground">{itemIcon}</span>}
+              <span className="stg:flex-1 stg:text-sm stg:font-medium stg:text-foreground">
                 {ref.label ?? ref.slug}
               </span>
               <button
@@ -165,12 +165,12 @@ export function InlineEditResourceList({
                 onClick={() => removeItem(i)}
                 aria-label={`Remove ${ref.label ?? ref.slug}`}
                 className={cn(
-                  "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: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",
                 )}
               >
-                <XIcon className="size-3.5" />
+                <XIcon className="stg:size-3.5" />
               </button>
             </div>
           ))}
@@ -178,22 +178,22 @@ export function InlineEditResourceList({
       )}
 
       {showPicker && renderPicker ? (
-        <div className="rounded-md border border-border bg-muted-faint p-2">
+        <div className="stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:p-2">
           {renderPicker(addItem)}
         </div>
       ) : showGenericAdd ? (
-        <div className="flex items-center gap-2 rounded-md border border-border bg-muted-faint p-2">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:p-2">
           <input
             type="text"
             value={addOrg}
             onChange={(e) => setAddOrg(e.target.value)}
             placeholder="org"
             className={cn(
-              "w-24 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:w-24 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",
             )}
           />
-          <span className="text-xs text-muted-foreground">/</span>
+          <span className="stg:text-xs stg:text-muted-foreground">/</span>
           <input
             type="text"
             value={addSlug}
@@ -210,8 +210,8 @@ export function InlineEditResourceList({
               }
             }}
             className={cn(
-              "flex-1 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:flex-1 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",
             )}
           />
           <button
@@ -225,13 +225,13 @@ export function InlineEditResourceList({
             }}
             disabled={!addSlug.trim()}
             className={cn(
-              "inline-flex size-6 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-6 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",
             )}
           >
-            <PlusIcon className="size-3" />
+            <PlusIcon className="stg:size-3" />
           </button>
         </div>
       ) : (
@@ -239,28 +239,28 @@ export function InlineEditResourceList({
           type="button"
           onClick={() => renderPicker ? setShowPicker(true) : setShowGenericAdd(true)}
           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 {resourceLabel}
         </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
@@ -270,10 +270,10 @@ export function InlineEditResourceList({
           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 />}
@@ -282,7 +282,7 @@ export function InlineEditResourceList({
       </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>
   );
@@ -318,7 +318,7 @@ function XIcon({ 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/InlineEditSelect.tsx

@@ -58,22 +58,22 @@ export function InlineEditSelect({
 
   if (disabled || !isEditing) {
     return (
-      <div className={cn("group/inline-edit", className)}>
+      <div className={cn("stg:group/inline-edit", className)}>
         <button
           type="button"
           onClick={() => { if (!disabled) setIsEditing(true); }}
           disabled={disabled}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-left transition-colors",
-            !disabled && "hover:bg-accent-hover cursor-pointer",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-1.5 stg:py-0.5 stg:text-left 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-inset stg:focus-visible:ring-ring",
           )}
         >
-          <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground">
+          <span className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-xs stg:font-medium stg:text-foreground">
             {currentLabel}
           </span>
           {!disabled && (
-            <ChevronDownIcon className="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" />
+            <ChevronDownIcon className="stg:size-3 stg:shrink-0 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity stg:group-hover/inline-edit:opacity-100" />
           )}
         </button>
       </div>
@@ -81,8 +81,8 @@ export function InlineEditSelect({
   }
 
   return (
-    <div ref={containerRef} className={cn("flex flex-col gap-1", className)}>
-      <div className="rounded-lg border border-border bg-background p-1" role="radiogroup">
+    <div ref={containerRef} className={cn("stg:flex stg:flex-col stg:gap-1", className)}>
+      <div className="stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-1" role="radiogroup">
         {options.map((option) => (
           <button
             key={option.value}
@@ -92,28 +92,28 @@ export function InlineEditSelect({
             disabled={isSaving}
             onClick={() => handleSelect(option.value)}
             className={cn(
-              "flex w-full items-start gap-2 rounded-md px-2.5 py-1.5 text-left transition-colors",
+              "stg:flex stg:w-full stg:items-start stg:gap-2 stg:rounded-md stg:px-2.5 stg:py-1.5 stg:text-left stg:transition-colors",
               option.value === value
-                ? "bg-muted-subtle text-foreground"
-                : "hover:bg-accent-hover text-foreground",
-              "disabled:opacity-50",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                ? "stg:bg-muted-subtle stg:text-foreground"
+                : "stg:hover:bg-accent-hover stg:text-foreground",
+              "stg:disabled:opacity-50",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
             )}
           >
             <div className={cn(
-              "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border",
+              "stg:mt-0.5 stg:flex stg:size-4 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:border",
               option.value === value
-                ? "border-primary bg-primary"
-                : "border-muted-foreground",
+                ? "stg:border-primary stg:bg-primary"
+                : "stg:border-muted-foreground",
             )}>
               {option.value === value && (
-                <div className="size-1.5 rounded-full bg-primary-foreground" />
+                <div className="stg:size-1.5 stg:rounded-full stg:bg-primary-foreground" />
               )}
             </div>
-            <div className="min-w-0 flex-1">
-              <span className="text-sm font-medium">{option.label}</span>
+            <div className="stg:min-w-0 stg:flex-1">
+              <span className="stg:text-sm stg:font-medium">{option.label}</span>
               {option.description && (
-                <p className="mt-0.5 text-xs text-muted-foreground">{option.description}</p>
+                <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">{option.description}</p>
               )}
             </div>
             {isSaving && option.value !== value && (
@@ -123,7 +123,7 @@ export function InlineEditSelect({
         ))}
       </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>
   );
@@ -143,7 +143,7 @@ function ChevronDownIcon({ 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/InlineEditText.tsx

@@ -88,31 +88,31 @@ export function InlineEditText({
 
   if (disabled || !isEditing) {
     return (
-      <div className={cn("group/inline-edit", className)}>
+      <div className={cn("stg:group/inline-edit", className)}>
         <button
           type="button"
           onClick={() => { if (!disabled) setIsEditing(true); }}
           disabled={disabled}
           className={cn(
-            "inline-flex w-full items-center gap-1.5 rounded-md px-1.5 py-0.5 text-left transition-colors",
-            !disabled && "hover:bg-accent-hover cursor-pointer",
-            disabled && "cursor-default",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            "stg:inline-flex stg:w-full stg:items-center stg:gap-1.5 stg:rounded-md stg:px-1.5 stg:py-0.5 stg:text-left stg:transition-colors",
+            !disabled && "stg:hover:bg-accent-hover stg:cursor-pointer",
+            disabled && "stg:cursor-default",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
           )}
         >
           <span
             className={cn(
-              "min-w-0 truncate",
+              "stg:min-w-0 stg:truncate",
               variant === "heading"
-                ? "text-lg font-semibold text-foreground"
-                : "text-sm text-foreground",
-              !value && "text-muted-foreground italic",
+                ? "stg:text-lg stg:font-semibold stg:text-foreground"
+                : "stg:text-sm stg:text-foreground",
+              !value && "stg:text-muted-foreground stg:italic",
             )}
           >
             {value || placeholder}
           </span>
           {!disabled && (
-            <PencilIcon className="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" />
+            <PencilIcon className="stg:size-3 stg:shrink-0 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity stg:group-hover/inline-edit:opacity-100" />
           )}
         </button>
       </div>
@@ -120,8 +120,8 @@ export function InlineEditText({
   }
 
   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="text"
@@ -131,11 +131,11 @@ export function InlineEditText({
           disabled={isSaving}
           placeholder={placeholder}
           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",
-            variant === "heading" && "text-lg font-semibold",
-            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",
+            variant === "heading" && "stg:text-lg stg:font-semibold",
+            displayError && "stg:border-destructive",
           )}
         />
         <button
@@ -144,13 +144,13 @@ export function InlineEditText({
           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"
@@ -158,17 +158,17 @@ export function InlineEditText({
           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 hover:text-accent-foreground",
-            "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:hover:text-accent-foreground",
+            "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>
       </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>
   );
@@ -204,7 +204,7 @@ function XIcon({ 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/InlineEditTextarea.tsx

@@ -100,29 +100,29 @@ export function InlineEditTextarea({
 
   if (disabled || !isEditing) {
     return (
-      <div className={cn("group/inline-edit", className)}>
+      <div className={cn("stg:group/inline-edit", className)}>
         <button
           type="button"
           onClick={() => { if (!disabled) setIsEditing(true); }}
           disabled={disabled}
           className={cn(
-            "w-full rounded-md px-2 py-1.5 text-left transition-colors",
-            !disabled && "hover:bg-accent-hover cursor-pointer",
-            disabled && "cursor-default",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            "stg:w-full stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:transition-colors",
+            !disabled && "stg:hover:bg-accent-hover stg:cursor-pointer",
+            disabled && "stg:cursor-default",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
           )}
         >
-          <div className="flex items-start justify-between gap-2">
+          <div className="stg:flex stg:items-start stg:justify-between stg:gap-2">
             <pre
               className={cn(
-                "min-w-0 whitespace-pre-wrap break-words font-mono text-sm text-foreground",
-                !value && "text-muted-foreground italic font-sans",
+                "stg:min-w-0 stg:whitespace-pre-wrap stg:break-words stg:font-mono stg:text-sm stg:text-foreground",
+                !value && "stg:text-muted-foreground stg:italic stg:font-sans",
               )}
             >
               {value || placeholder}
             </pre>
             {!disabled && (
-              <PencilIcon className="mt-0.5 size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" />
+              <PencilIcon className="stg:mt-0.5 stg:size-3 stg:shrink-0 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity stg:group-hover/inline-edit:opacity-100" />
             )}
           </div>
         </button>
@@ -131,7 +131,7 @@ export function InlineEditTextarea({
   }
 
   return (
-    <div className={cn("flex flex-col gap-1.5", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-1.5", className)}>
       <textarea
         ref={textareaRef}
         value={draft}
@@ -141,26 +141,26 @@ export function InlineEditTextarea({
         placeholder={placeholder}
         rows={minRows}
         className={cn(
-          "w-full resize-y rounded-md border border-border bg-input-bg px-3 py-2 font-mono text-sm text-foreground",
-          "focus:outline-none focus:ring-2 focus:ring-ring",
-          "disabled:opacity-50",
-          displayError && "border-destructive",
+          "stg:w-full stg:resize-y stg:rounded-md stg:border stg:border-border stg:bg-input-bg stg:px-3 stg:py-2 stg:font-mono 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",
         )}
       />
-      <div className="flex items-center justify-between">
-        <span className="text-[10px] text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <span className="stg:text-[10px] stg:text-muted-foreground">
           {isSaving ? "Saving..." : "Ctrl+Enter to save, Escape to cancel"}
         </span>
-        <div className="flex items-center gap-1.5">
+        <div className="stg:flex stg:items-center 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 hover:text-accent-foreground",
-              "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:hover:text-accent-foreground",
+              "stg:disabled:opacity-50",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Cancel
@@ -170,10 +170,10 @@ export function InlineEditTextarea({
             onClick={handleConfirm}
             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 />}
@@ -182,7 +182,7 @@ export function InlineEditTextarea({
         </div>
       </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>
   );
@@ -202,7 +202,7 @@ function PencilIcon({ 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/internal/ApprovalPeekBar.tsx

@@ -35,16 +35,16 @@ export function ApprovalPeekBar({ visible, count, onClick }: ApprovalPeekBarProp
       aria-hidden={!visible}
       tabIndex={visible ? 0 : -1}
       className={cn(
-        "absolute bottom-3 left-1/2 z-10 -translate-x-1/2",
-        "flex items-center gap-1.5 rounded-full",
-        "border border-warning/40 bg-warning/10 px-3 py-1.5",
-        "text-xs font-medium text-warning shadow-md",
-        "transition-[opacity,transform] duration-[var(--stgm-motion-duration)]",
-        "hover:bg-warning/20",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:absolute stg:bottom-3 stg:left-1/2 stg:z-10 stg:-translate-x-1/2",
+        "stg:flex stg:items-center stg:gap-1.5 stg:rounded-full",
+        "stg:border stg:border-warning/40 stg:bg-warning/10 stg:px-3 stg:py-1.5",
+        "stg:text-xs stg:font-medium stg:text-warning stg:shadow-md",
+        "stg:transition-[opacity,transform] stg:duration-[var(--stgm-motion-duration)]",
+        "stg:hover:bg-warning/20",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         visible
-          ? "pointer-events-auto translate-y-0 opacity-100"
-          : "pointer-events-none translate-y-2 opacity-0",
+          ? "stg:pointer-events-auto stg:translate-y-0 stg:opacity-100"
+          : "stg:pointer-events-none stg:translate-y-2 stg:opacity-0",
       )}
     >
       <ClockIcon />

package/src/internal/BoundedContent.tsx

@@ -13,7 +13,7 @@ import { RevealToggle } from "./RevealToggle.js";
  * One constant so the settled edit/write diff and the HITL approval gate diff
  * are visually identical — change it here to retune both at once.
  */
-export const PREVIEW_MAX_HEIGHT = "max-h-48";
+export const PREVIEW_MAX_HEIGHT = "stg:max-h-48";
 
 /** Props for {@link BoundedContent}. */
 export interface BoundedContentProps {
@@ -75,13 +75,13 @@ export function BoundedContent({
     <div className={className}>
       <div
         ref={ref}
-        className={cn("relative overflow-hidden", clamped && maxHeightClass)}
+        className={cn("stg:relative stg:overflow-hidden", clamped && maxHeightClass)}
       >
         {children}
         {showFade && (
           <div
             aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-background to-transparent"
+            className="stg:pointer-events-none stg:absolute stg:inset-x-0 stg:bottom-0 stg:h-8 stg:bg-gradient-to-t stg:from-background stg:to-transparent"
           />
         )}
       </div>

package/src/internal/CloudFeatureNotice.tsx

@@ -42,12 +42,12 @@ export function CloudFeatureNotice({
     <div
       role="status"
       className={cn(
-        "bg-muted-subtle text-muted-foreground flex items-start gap-2.5 rounded-lg border border-transparent px-4 py-3",
+        "stg:bg-muted-subtle stg:text-muted-foreground stg:flex stg:items-start stg:gap-2.5 stg:rounded-lg stg:border stg:border-transparent stg:px-4 stg:py-3",
         className,
       )}
     >
-      <InfoIcon className="mt-0.5 size-4 shrink-0" />
-      <p className="text-xs leading-relaxed">{children}</p>
+      <InfoIcon className="stg:mt-0.5 stg:size-4 stg:shrink-0" />
+      <p className="stg:text-xs stg:leading-relaxed">{children}</p>
     </div>
   );
 }