@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/api-key/ApiKeyCreatedAlert.tsx

@@ -71,16 +71,16 @@ export function ApiKeyCreatedAlert({
     <div
       role="alert"
       className={cn(
-        "rounded-lg border border-primary/30 bg-primary-subtle p-4",
+        "stg:rounded-lg stg:border stg:border-primary/30 stg:bg-primary-subtle stg:p-4",
         className,
       )}
     >
-      <div className="mb-2 flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="text-sm font-medium text-foreground">
+      <div className="stg:mb-2 stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
+          <p className="stg:text-sm stg:font-medium stg:text-foreground">
             API key created: {keyName}
           </p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
             Copy this key now. It will not be shown again.
           </p>
         </div>
@@ -89,22 +89,22 @@ export function ApiKeyCreatedAlert({
           onClick={onDismiss}
           aria-label="Dismiss"
           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",
           )}
         >
           <CloseIcon />
         </button>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <code
           id="stgm-api-key-reveal"
           className={cn(
-            "min-w-0 flex-1 select-all truncate rounded-md",
-            "border border-input bg-background px-2.5 py-1.5",
-            "font-mono text-xs text-foreground",
+            "stg:min-w-0 stg:flex-1 stg:select-all stg:truncate stg:rounded-md",
+            "stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5",
+            "stg:font-mono stg:text-xs stg:text-foreground",
           )}
         >
           {rawKey}
@@ -114,9 +114,9 @@ export function ApiKeyCreatedAlert({
           type="button"
           onClick={handleCopy}
           className={cn(
-            "inline-flex shrink-0 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",
-            "transition-colors",
+            "stg:inline-flex stg:shrink-0 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:transition-colors",
           )}
         >
           {copied ? <CheckIcon /> : <CopyIcon />}

package/src/api-key/ApiKeyListPanel.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useApiKeyList } from "./useApiKeyList.js";
 import { useDeleteApiKey } from "./useDeleteApiKey.js";
 
@@ -65,14 +66,14 @@ export function ApiKeyListPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading API keys"
       >
         {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>
@@ -81,7 +82,7 @@ export function ApiKeyListPanel({
 
   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>
     );
@@ -91,7 +92,7 @@ export function ApiKeyListPanel({
     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,
         )}
       >
@@ -102,7 +103,7 @@ export function ApiKeyListPanel({
 
   return (
     <div
-      className={cn("space-y-2", className)}
+      className={cn("stg:space-y-2", className)}
       role="list"
       aria-label="API keys"
     >
@@ -169,34 +170,34 @@ function ApiKeyRow({
     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>?
             {fingerprint && (
-              <span className="text-muted-foreground">
+              <span className="stg:text-muted-foreground">
                 {" "}
                 (…{fingerprint})
               </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 />}
@@ -207,9 +208,9 @@ function ApiKeyRow({
             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
@@ -222,29 +223,36 @@ function ApiKeyRow({
   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"
     >
       {/* Key icon */}
       <KeyIcon />
 
       {/* Name + fingerprint */}
-      <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>
         {fingerprint && (
-          <span className="block text-xs text-muted-foreground font-mono">
+          <span className="stg:block stg:text-xs stg:text-muted-foreground stg:font-mono">
             …{fingerprint}
           </span>
         )}
       </div>
 
       {/* Metadata columns */}
-      <div className="hidden sm:flex shrink-0 items-center gap-4 text-xs text-muted-foreground">
+      <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-4 stg:text-xs stg:text-muted-foreground">
         {createdAt && (
-          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
-            {formatShortDate(timestampDate(createdAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={<time dateTime={timestampDate(createdAt).toISOString()} />}
+            >
+              {formatShortDate(timestampDate(createdAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Created ${timestampDate(createdAt).toISOString()}`}
+            </TooltipContent>
+          </Tooltip>
         )}
         <span>
           {neverExpires
@@ -266,9 +274,9 @@ function ApiKeyRow({
         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 />
@@ -326,7 +334,7 @@ function KeyIcon() {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
     >
       <circle cx="5.5" cy="10.5" r="3" />
       <path d="M8 8l5.5-5.5M11 5l2-2M10.5 2.5l2 2" />
@@ -365,7 +373,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/api-key/CreateApiKeyForm.tsx

@@ -91,13 +91,13 @@ export function CreateApiKeyForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
-      <div className="space-y-3">
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
+      <div className="stg:space-y-3">
         {/* Name */}
-        <div className="space-y-1">
+        <div className="stg:space-y-1">
           <label
             htmlFor="stgm-new-apikey-name"
-            className="text-xs font-medium text-foreground"
+            className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
@@ -111,20 +111,20 @@ export function CreateApiKeyForm({
             autoFocus
             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",
             )}
           />
         </div>
 
         {/* Expiry */}
-        <fieldset className="space-y-1.5">
-          <legend className="text-xs font-medium text-foreground">
+        <fieldset className="stg:space-y-1.5">
+          <legend className="stg:text-xs stg:font-medium stg:text-foreground">
             Expiration
           </legend>
-          <div className="flex flex-wrap gap-2">
+          <div className="stg:flex stg:flex-wrap stg:gap-2">
             {EXPIRY_OPTIONS.map(({ value, label }) => (
               <ExpiryRadio
                 key={value}
@@ -140,19 +140,19 @@ export function CreateApiKeyForm({
       </div>
 
       {error && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -165,9 +165,9 @@ export function CreateApiKeyForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -215,11 +215,11 @@ function ExpiryRadio({
   return (
     <label
       className={cn(
-        "inline-flex cursor-pointer items-center rounded-md border px-2.5 py-1 text-xs transition-colors",
+        "stg:inline-flex stg:cursor-pointer stg:items-center stg:rounded-md stg:border stg:px-2.5 stg:py-1 stg:text-xs stg:transition-colors",
         checked
-          ? "border-primary bg-primary-subtle text-primary font-medium"
-          : "border-input bg-background text-muted-foreground hover:border-border hover:text-foreground",
-        disabled && "pointer-events-none opacity-50",
+          ? "stg:border-primary stg:bg-primary-subtle stg:text-primary stg:font-medium"
+          : "stg:border-input stg:bg-background stg:text-muted-foreground stg:hover:border-border stg:hover:text-foreground",
+        disabled && "stg:pointer-events-none stg:opacity-50",
       )}
     >
       <input
@@ -229,7 +229,7 @@ function ExpiryRadio({
         checked={checked}
         disabled={disabled}
         onChange={() => onChange(value)}
-        className="sr-only"
+        className="stg:sr-only"
       />
       {label}
     </label>
@@ -250,7 +250,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/attachment/AttachmentChipList.tsx

@@ -7,6 +7,7 @@ import { formatFileSize } from "./attachment-utils.js";
 import { useObjectUrl } from "./useObjectUrl.js";
 import { AttachmentImageLightbox } from "./AttachmentImageLightbox.js";
 import { UNSTYLED_BUTTON } from "../internal/form-primitives.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link AttachmentChipList}. */
 export interface AttachmentChipListProps {
@@ -83,7 +84,7 @@ export function AttachmentChipList({
           (~h-6) share this row, and flexbox's default stretch alignment
           would balloon the file chips to tile height. */}
       <div
-        className={cn("flex flex-wrap items-center gap-1.5", className)}
+        className={cn("stg:flex stg:flex-wrap stg:items-center stg:gap-1.5", className)}
         role="list"
         aria-label="Attached files"
       >
@@ -216,84 +217,92 @@ function ImageAttachmentChip({
   return (
     // The remove badge and retry pill are SIBLINGS of the preview button,
     // absolutely positioned over it — buttons cannot nest inside buttons.
-    <span
-      role="listitem"
-      aria-label={chipAriaLabel(entry)}
-      title={entry.file.name}
-      className="relative inline-flex"
-    >
-      {/* The whole tile is the preview target. Preview stays enabled while
-          `disabled` (that prop gates the mutating remove/retry actions) and
-          in every phase: the object URL wraps in-memory bytes, no fetch.
-          UNSTYLED_BUTTON is load-bearing: without it the tile shows the
-          UA's default button box in preflight-less hosts (see the constant). */}
-      <button
-        type="button"
-        onClick={onPreview}
-        aria-label={`Preview ${entry.file.name}`}
-        className={cn(
-          UNSTYLED_BUTTON,
-          "relative block h-14 w-14 overflow-hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          isError && "ring-1 ring-destructive",
-        )}
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            role="listitem"
+            aria-label={chipAriaLabel(entry)}
+            className="stg:relative stg:inline-flex"
+          />
+        }
       >
-        {url ? (
-          <img
-            src={url}
-            alt=""
-            aria-hidden="true"
-            onError={() => setLoadFailed(true)}
+        {/* The whole tile is the preview target. Preview stays enabled while
+            `disabled` (that prop gates the mutating remove/retry actions) and
+            in every phase: the object URL wraps in-memory bytes, no fetch.
+            UNSTYLED_BUTTON adds the pointer cursor — the image tile carries
+            no other clickability cue. */}
+        <button
+          type="button"
+          onClick={onPreview}
+          aria-label={`Preview ${entry.file.name}`}
+          className={cn(
+            UNSTYLED_BUTTON,
+            "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            isError && "stg:ring-1 stg:ring-destructive",
+          )}
+        >
+          {url ? (
+            <img
+              src={url}
+              alt=""
+              aria-hidden="true"
+              onError={() => setLoadFailed(true)}
+              className={cn(
+                "stg:h-full stg:w-full stg:object-cover",
+                (isUploading || isError) && "stg:opacity-50",
+              )}
+            />
+          ) : (
+            // One-frame placeholder until the object-URL effect runs; same
+            // footprint as the image, so no layout shift.
+            <span
+              className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
+              aria-hidden="true"
+            />
+          )}
+          {isUploading && (
+            <span className="stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center">
+              <ChipSpinner size={16} />
+            </span>
+          )}
+        </button>
+
+        {isError && (
+          <button
+            type="button"
+            onClick={onRetry}
+            disabled={disabled}
+            aria-label={`Retry uploading ${entry.file.name}`}
             className={cn(
-              "h-full w-full object-cover",
-              (isUploading || isError) && "opacity-50",
+              UNSTYLED_BUTTON,
+              "stg:absolute stg:left-1/2 stg:top-1/2 stg:-translate-x-1/2 stg:-translate-y-1/2 stg:rounded-full stg:bg-destructive stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:leading-none stg:text-destructive-foreground stg:shadow-sm stg:hover:bg-destructive-hover stg:disabled:pointer-events-none",
             )}
-          />
-        ) : (
-          // One-frame placeholder until the object-URL effect runs; same
-          // footprint as the image, so no layout shift.
-          <span
-            className="block h-full w-full animate-pulse bg-muted"
-            aria-hidden="true"
-          />
+          >
+            Retry
+          </button>
         )}
-        {isUploading && (
-          <span className="absolute inset-0 flex items-center justify-center">
-            <ChipSpinner size={16} />
-          </span>
-        )}
-      </button>
 
-      {isError && (
         <button
           type="button"
-          onClick={onRetry}
+          onClick={onRemove}
           disabled={disabled}
-          aria-label={`Retry uploading ${entry.file.name}`}
+          aria-label={`Remove ${entry.file.name}`}
           className={cn(
             UNSTYLED_BUTTON,
-            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-destructive px-1.5 py-0.5 text-[0.6rem] font-medium leading-none text-destructive-foreground shadow-sm [font-family:inherit] hover:bg-destructive-hover disabled:pointer-events-none",
+            // The established corner-badge geometry (ContextPopover,
+            // ComposerToolbar). Solid bg + border keep it legible over any
+            // image without opacity-modified tokens (Dont-Do #4).
+            "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-4 stg:w-4 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-border stg:bg-background stg:text-muted-foreground stg:shadow-sm stg:hover:text-destructive stg:disabled:pointer-events-none",
           )}
         >
-          Retry
+          <XIcon />
         </button>
-      )}
-
-      <button
-        type="button"
-        onClick={onRemove}
-        disabled={disabled}
-        aria-label={`Remove ${entry.file.name}`}
-        className={cn(
-          UNSTYLED_BUTTON,
-          // The established corner-badge geometry (ContextPopover,
-          // ComposerToolbar). Solid bg + border keep it legible over any
-          // image without opacity-modified tokens (Dont-Do #4).
-          "absolute -right-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm hover:text-destructive disabled:pointer-events-none",
-        )}
-      >
-        <XIcon />
-      </button>
-    </span>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {entry.file.name}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -320,20 +329,20 @@ function FileAttachmentChip({
       role="listitem"
       aria-label={chipAriaLabel(entry)}
       className={cn(
-        "inline-flex max-w-[200px] items-center gap-1 rounded-md px-2 py-0.5 text-xs",
+        "stg:inline-flex stg:max-w-[200px] stg:items-center stg:gap-1 stg:rounded-md stg:px-2 stg:py-0.5 stg:text-xs",
         isError
-          ? "border border-destructive/30 bg-destructive-subtle text-destructive"
-          : "bg-muted-subtle text-foreground",
-        isUploading && "opacity-70",
+          ? "stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:text-destructive"
+          : "stg:bg-muted-subtle stg:text-foreground",
+        isUploading && "stg:opacity-70",
       )}
     >
       {isUploading && <ChipSpinner />}
       {isError && <ErrorDot />}
       {!isUploading && !isError && <FileIcon />}
 
-      <span className="truncate">{entry.file.name}</span>
+      <span className="stg:truncate">{entry.file.name}</span>
 
-      <span className="shrink-0 text-[0.6rem] tabular-nums text-muted-foreground">
+      <span className="stg:shrink-0 stg:text-[0.6rem] stg:tabular-nums stg:text-muted-foreground">
         {formatFileSize(entry.file.size)}
       </span>
 
@@ -363,7 +372,7 @@ function RetryButton({
       disabled={disabled}
       className={cn(
         UNSTYLED_BUTTON,
-        "shrink-0 text-[0.6rem] font-medium text-destructive underline [font-family:inherit] hover:text-destructive-muted disabled:pointer-events-none",
+        "stg:shrink-0 stg:text-[0.6rem] stg:font-medium stg:text-destructive stg:underline stg:hover:text-destructive-muted stg:disabled:pointer-events-none",
       )}
       aria-label={`Retry uploading ${filename}`}
     >
@@ -388,7 +397,7 @@ function RemoveButton({
       disabled={disabled}
       className={cn(
         UNSTYLED_BUTTON,
-        "ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none",
+        "stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none",
       )}
       aria-label={`Remove ${filename}`}
     >
@@ -440,7 +449,7 @@ function ChipSpinner({ size = 10 }: { readonly size?: number }) {
       stroke="currentColor"
       strokeWidth="2.5"
       strokeLinecap="round"
-      className="shrink-0 animate-spin text-muted-foreground"
+      className="stg:shrink-0 stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
@@ -451,7 +460,7 @@ function ChipSpinner({ size = 10 }: { readonly size?: number }) {
 function ErrorDot() {
   return (
     <span
-      className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-destructive"
+      className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:shrink-0 stg:rounded-full stg:bg-destructive"
       aria-hidden="true"
     />
   );
@@ -468,7 +477,7 @@ function FileIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />