@stigmer/react 3.10.0 → 3.11.0

package/src/execution/FileReviewCard.tsx

@@ -315,22 +315,22 @@ export const FileReviewCard = memo(function FileReviewCard({
           : `${total} file change${total === 1 ? "" : "s"}`
       }
       className={cn(
-        "rounded-lg border border-border-prominent",
-        interactive && "border-l-2 border-l-warning",
+        "stg:rounded-lg stg:border stg:border-border-prominent",
+        interactive && "stg:border-l-2 stg:border-l-warning",
         className,
       )}
     >
       {/* The bar: summary + whole-set verdict + the detail expander, one line. */}
-      <div className="flex flex-wrap items-center gap-2 px-2.5 py-1.5 text-xs">
-        <span className="shrink-0 font-medium text-foreground">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-xs">
+        <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
           {interactive ? "Review file changes" : "File changes"}
         </span>
         {/* The flexible middle: the summary (truncating) plus the set's
             aggregate +N −M, visible even while collapsed so the bar carries
             the magnitude of what is being decided, not just the file count.
             Hidden when no file has counts (FileLineStats). */}
-        <span className="flex min-w-0 flex-1 items-center gap-2">
-          <span className="min-w-0 truncate text-muted-foreground">{summary}</span>
+        <span className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2">
+          <span className="stg:min-w-0 stg:truncate stg:text-muted-foreground">{summary}</span>
           <FileLineStats
             linesAdded={totals.additions}
             linesRemoved={totals.deletions}
@@ -367,10 +367,10 @@ export const FileReviewCard = memo(function FileReviewCard({
           onClick={() => setExpanded((v) => !v)}
           data-cursor-target="file-review-expander"
           className={cn(
-            "inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-1",
-            "text-xs font-medium text-muted-foreground transition-colors",
-            "hover:bg-accent-hover hover:text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-1 stg:rounded-md stg:border stg:border-border stg:px-2 stg:py-1",
+            "stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors",
+            "stg:hover:bg-accent-hover stg:hover:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           {/* The closed label states what expanding reveals: the reviewable
@@ -386,7 +386,7 @@ export const FileReviewCard = memo(function FileReviewCard({
       {interactive && incomplete && showBulkControls && (
         <p
           id={incompleteNoticeId}
-          className="px-2.5 pb-1.5 text-[11px] italic text-muted-foreground"
+          className="stg:px-2.5 stg:pb-1.5 stg:text-[11px] stg:italic stg:text-muted-foreground"
         >
           {incompleteNotice(showPerFile, blockSummary, binaryOnly)}
         </p>
@@ -398,7 +398,7 @@ export const FileReviewCard = memo(function FileReviewCard({
           control it belongs to — something a single global banner cannot do.
           Rendered on the bar so it is visible regardless of expansion. */}
       {interactive && wholeSetError && (
-        <div className="px-2.5 pb-1.5">
+        <div className="stg:px-2.5 stg:pb-1.5">
           <InCardDecisionError
             error={wholeSetError}
             leadIn="submit decision"
@@ -410,7 +410,7 @@ export const FileReviewCard = memo(function FileReviewCard({
       {expanded && (
         <div
           id={bodyId}
-          className="space-y-2 border-t border-border-muted px-3 py-2.5"
+          className="stg:space-y-2 stg:border-t stg:border-border-muted stg:px-3 stg:py-2.5"
         >
           {/* The list body carries no summary header: the bar already shows
               the file count and the aggregate +N −M (per-file counts are
@@ -456,7 +456,7 @@ export const FileReviewCard = memo(function FileReviewCard({
                 // its detail is informational, with no per-file control.
                 changes.map((change) =>
                   showDiffs ? (
-                    <div key={change.id} className="space-y-1.5">
+                    <div key={change.id} className="stg:space-y-1.5">
                       <CaptureBadge change={change} />
                       <CapturedChangeDiff change={change} />
                     </div>
@@ -528,8 +528,8 @@ function ExpanderChevron({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >
@@ -585,7 +585,7 @@ const FileChangeReviewRow = memo(function FileChangeReviewRow({
     />
   );
   return (
-    <div className="space-y-1.5">
+    <div className="stg:space-y-1.5">
       {showDiffs ? (
         <>
           <CaptureBadge change={change} />
@@ -635,8 +635,8 @@ const SettledFileRow = memo(function SettledFileRow({
     return <FileListRow change={change} trailing={<VerdictBadge verdict={verdict} />} />;
   }
   return (
-    <div className="space-y-1.5">
-      <div className="flex items-center gap-2">
+    <div className="stg:space-y-1.5">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <CaptureBadge change={change} />
         <VerdictBadge verdict={verdict} />
       </div>
@@ -690,16 +690,16 @@ function FileListRow({
       : "";
   return (
     <div
-      className="flex flex-wrap items-center gap-x-2 gap-y-1"
+      className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-2 stg:gap-y-1"
       data-cursor-target="file-review-list-row"
     >
       <FileKindBadge kind={change.kind} />
       {renamedFrom && (
-        <span className="min-w-0 truncate font-mono text-xs text-muted-foreground-faint">
+        <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-xs stg:text-muted-foreground-faint">
           {renamedFrom}&nbsp;→&nbsp;
         </span>
       )}
-      <FilePathLink path={path} dirDisplay="dim" className="min-w-0 flex-1 text-xs" />
+      <FilePathLink path={path} dirDisplay="dim" className="stg:min-w-0 stg:flex-1 stg:text-xs" />
       <FileLineStats
         linesAdded={change.linesAdded}
         linesRemoved={change.linesRemoved}
@@ -720,18 +720,18 @@ function FileListRow({
 function VerdictBadge({ verdict }: { verdict: FileDecisionAction | null }) {
   if (verdict === FileDecisionAction.APPROVE) {
     return (
-      <span className="shrink-0 text-[11px] font-medium text-diff-added-fg">Kept</span>
+      <span className="stg:shrink-0 stg:text-[11px] stg:font-medium stg:text-diff-added-fg">Kept</span>
     );
   }
   if (verdict === FileDecisionAction.REJECT) {
     return (
-      <span className="shrink-0 text-[11px] font-medium text-diff-removed-fg">
+      <span className="stg:shrink-0 stg:text-[11px] stg:font-medium stg:text-diff-removed-fg">
         Discarded
       </span>
     );
   }
   return (
-    <span className="shrink-0 text-[11px] italic text-muted-foreground">
+    <span className="stg:shrink-0 stg:text-[11px] stg:italic stg:text-muted-foreground">
       Not reviewed
     </span>
   );
@@ -806,7 +806,7 @@ function FileVerdictControl({
       role="radiogroup"
       aria-label={`Decision for ${path}`}
       aria-describedby={describedById}
-      className="flex items-center gap-1.5"
+      className="stg:flex stg:items-center stg:gap-1.5"
     >
       <VerdictOption
         label={keepLabel}
@@ -844,17 +844,17 @@ interface VerdictOptionProps {
 // fill AND tone (not color alone), and every property flows through `--stgm-*`
 // tokens with no opacity modifiers.
 const VERDICT_BASE = cn(
-  "inline-flex items-center justify-center gap-1.5 rounded-md border px-2.5 py-1",
-  "text-xs font-medium transition-colors",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-  "disabled:cursor-not-allowed disabled:opacity-50",
+  "stg:inline-flex stg:items-center stg:justify-center stg:gap-1.5 stg:rounded-md stg:border stg:px-2.5 stg:py-1",
+  "stg:text-xs stg:font-medium stg:transition-colors",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-2",
+  "stg:disabled:cursor-not-allowed stg:disabled:opacity-50",
 );
 
-const VERDICT_REST = "border-border text-muted-foreground hover:bg-accent-hover hover:text-foreground";
+const VERDICT_REST = "stg:border-border stg:text-muted-foreground stg:hover:bg-accent-hover stg:hover:text-foreground";
 
 const VERDICT_SELECTED: Record<VerdictOptionProps["tone"], string> = {
-  keep: "border-success bg-success-subtle text-success",
-  discard: "border-destructive bg-destructive-subtle text-destructive",
+  keep: "stg:border-success stg:bg-success-subtle stg:text-success",
+  discard: "stg:border-destructive stg:bg-destructive-subtle stg:text-destructive",
 };
 
 function VerdictOption({
@@ -910,7 +910,7 @@ function CaptureBadge({ change }: { change: CapturedFileChange }) {
   if (!provenance) return null;
   return (
     <span
-      className="inline-flex w-fit items-center rounded border border-border bg-muted-subtle px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground"
+      className="stg:inline-flex stg:w-fit stg:items-center stg:rounded stg:border stg:border-border stg:bg-muted-subtle stg:px-1.5 stg:py-0.5 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
       aria-label={provenance.aria}
       data-cursor-target="file-review-capture"
     >
@@ -943,7 +943,7 @@ function BlockReasonNote({
   return (
     <p
       id={id}
-      className="text-[11px] italic text-muted-foreground"
+      className="stg:text-[11px] stg:italic stg:text-muted-foreground"
       data-cursor-target="file-review-block-reason"
     >
       {text}
@@ -1015,7 +1015,7 @@ function incompleteNotice(
 
 function ReviewProgress({ decided, total }: { decided: number; total: number }) {
   return (
-    <p role="status" className="text-[11px] text-muted-foreground">
+    <p role="status" className="stg:text-[11px] stg:text-muted-foreground">
       {decided} of {total} files reviewed
       {decided > 0 && decided < total && " — decide the rest to continue"}
     </p>
@@ -1076,7 +1076,7 @@ function SpinnerIcon() {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />

package/src/execution/FileReviewDock.tsx

@@ -94,11 +94,11 @@ export function FileReviewDock({
       role="region"
       aria-label="File changes awaiting review"
       data-cursor-target="file-review-dock"
-      className={cn("border-t border-border-muted", className)}
+      className={cn("stg:border-t stg:border-border-muted", className)}
     >
       {/* The cap bounds the dock, not each card: with the (defensive) multi-set
           case the whole surface stays within reach of the composer. */}
-      <div className="max-h-[40vh] space-y-2 overflow-y-auto px-4 py-2">
+      <div className="stg:max-h-[40vh] stg:space-y-2 stg:overflow-y-auto stg:px-4 stg:py-2">
         {changeSets.map((changeSet) => (
           <DockedChangeSet
             key={changeSet.id}

package/src/execution/FollowUpInput.tsx

@@ -136,15 +136,15 @@ export function FollowUpInput({
       role="form"
       aria-label="Send follow-up message"
       className={cn(
-        "shrink-0 px-4 py-3",
+        "stg:shrink-0 stg:px-4 stg:py-3",
         className,
       )}
     >
       <div
         className={cn(
-          "rounded-xl border border-border bg-card shadow-sm",
-          "focus-within:ring-2 focus-within:ring-ring",
-          isDisabled && "opacity-50",
+          "stg:rounded-xl stg:border stg:border-border stg:bg-card stg:shadow-sm",
+          "stg:focus-within:ring-2 stg:focus-within:ring-ring",
+          isDisabled && "stg:opacity-50",
         )}
       >
         <textarea
@@ -158,11 +158,11 @@ export function FollowUpInput({
           placeholder={placeholder}
           disabled={isDisabled}
           rows={1}
-          className="block w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+          className="stg:block stg:w-full stg:resize-none stg:bg-transparent stg:px-4 stg:pt-3 stg:pb-2 stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground stg:focus:outline-none stg:disabled:cursor-not-allowed"
         />
 
-        <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">
-          <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:border-t stg:border-border-muted stg:px-3 stg:py-2">
+          <div className="stg:flex stg:items-center stg:gap-2">
             {showModelSelector && (
               <ModelSelector
                 value={modelId}
@@ -176,7 +176,7 @@ export function FollowUpInput({
             type="button"
             disabled={!canSubmit}
             onClick={handleSubmit}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
+            className="stg:flex stg:h-8 stg:w-8 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-lg stg:bg-primary stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover stg:disabled:pointer-events-none stg:disabled:opacity-40"
             aria-label="Send message"
           >
             {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
@@ -214,7 +214,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />
     </svg>

package/src/execution/InteractionModeBadge.tsx

@@ -41,8 +41,8 @@ export const InteractionModeBadge = memo(function InteractionModeBadge({
       role="status"
       aria-label="Plan mode"
       className={cn(
-        "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.65rem] font-medium",
-        "bg-accent text-muted-foreground",
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-1.5 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+        "stg:bg-accent stg:text-muted-foreground",
         className,
       )}
     >

package/src/execution/McpToolDetail.tsx

@@ -49,7 +49,7 @@ export function McpToolDetail({ toolCall, className }: McpToolDetailProps) {
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
 
   return (
-    <div className={cn("space-y-3 text-xs", className)}>
+    <div className={cn("stg:space-y-3 stg:text-xs", className)}>
       <McpMetadataRow
         mcpServerSlug={toolCall.mcpServerSlug}
         toolName={toolCall.name}
@@ -92,8 +92,8 @@ function McpOffloadedOutputView({
   readonly outputRef: NonNullable<ToolCall["outputRef"]>;
 }) {
   return (
-    <div className="space-y-1">
-      <span className="font-medium text-muted-foreground">Result</span>
+    <div className="stg:space-y-1">
+      <span className="stg:font-medium stg:text-muted-foreground">Result</span>
       {outputRef.isImage ? (
         <McpOffloadedImage storageKey={outputRef.storageKey} />
       ) : (
@@ -109,12 +109,12 @@ function McpOffloadedImage({ storageKey }: { readonly storageKey: string }) {
   const { url, error } = useArtifactDownloadUrl(executionId, storageKey);
 
   if (error) {
-    return <p className="text-xs text-destructive">Couldn&apos;t load image output.</p>;
+    return <p className="stg:text-xs stg:text-destructive">Couldn&apos;t load image output.</p>;
   }
   if (!url) {
     return (
       <div
-        className="h-40 w-64 animate-pulse rounded-md border border-border bg-muted"
+        className="stg:h-40 stg:w-64 stg:animate-pulse stg:rounded-md stg:border stg:border-border stg:bg-muted"
         aria-busy="true"
         aria-label="Loading image output"
       />
@@ -125,13 +125,13 @@ function McpOffloadedImage({ storageKey }: { readonly storageKey: string }) {
       href={url}
       target="_blank"
       rel="noreferrer"
-      className="inline-block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="stg:inline-block stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
     >
       <img
         src={url}
         alt="Tool output screenshot"
         loading="lazy"
-        className="max-h-96 w-auto rounded-md border border-border"
+        className="stg:max-h-96 stg:w-auto stg:rounded-md stg:border stg:border-border"
       />
     </a>
   );
@@ -154,11 +154,11 @@ function McpOffloadedText({
 
   const size = Number(outputRef.sizeBytes);
   const sizeSuffix = size ? ` (${formatBytes(size)})` : "";
-  const previewClass = "max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle p-2 text-foreground";
-  const linkClass = "inline-block text-xs font-medium text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+  const previewClass = "stg:max-h-80 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:text-foreground";
+  const linkClass = "stg:inline-block stg:text-xs stg:font-medium stg:text-primary stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring";
 
   return (
-    <div className="space-y-1">
+    <div className="stg:space-y-1">
       {!expanded ? (
         <>
           {outputRef.truncatedPreview && (
@@ -169,18 +169,18 @@ function McpOffloadedText({
           </button>
         </>
       ) : isLoading ? (
-        <p className="text-xs text-muted-foreground">Loading full output…</p>
+        <p className="stg:text-xs stg:text-muted-foreground">Loading full output…</p>
       ) : error ? (
-        <p className="text-xs text-destructive">Couldn&apos;t load full output. Try again.</p>
+        <p className="stg:text-xs stg:text-destructive">Couldn&apos;t load full output. Try again.</p>
       ) : content !== null ? (
-        <div className="space-y-1">
+        <div className="stg:space-y-1">
           <CollapsiblePre content={content} className={previewClass} />
           {isTruncated && (
             <button
               type="button"
               onClick={() => download(outputRef.storageKey)}
               disabled={isDownloading}
-              className={cn(linkClass, "disabled:opacity-50")}
+              className={cn(linkClass, "stg:disabled:opacity-50")}
             >
               {isDownloading ? "Preparing download…" : `Output truncated — download full file${sizeSuffix}`}
             </button>
@@ -218,13 +218,13 @@ export function McpMetadataRow({
   if (!hasMetadata) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
+    <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-3 stg:gap-y-1 stg:text-muted-foreground">
       {mcpServerSlug && (
-        <span className="inline-flex items-center gap-1.5 rounded bg-muted px-1.5 py-0.5 font-mono">
+        <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono">
           <McpServerIcon />
           {mcpServerSlug}
-          <span className="text-muted-foreground-subtle">/</span>
-          <span className="text-foreground">{humanizeToolName(toolName)}</span>
+          <span className="stg:text-muted-foreground-subtle">/</span>
+          <span className="stg:text-foreground">{humanizeToolName(toolName)}</span>
         </span>
       )}
       {duration && <span>{duration}</span>}
@@ -264,11 +264,11 @@ export function McpArgsView({ args }: McpArgsViewProps) {
   }
 
   return (
-    <div className="space-y-2">
-      <span className="font-medium text-muted-foreground">Arguments</span>
+    <div className="stg:space-y-2">
+      <span className="stg:font-medium stg:text-muted-foreground">Arguments</span>
 
       {scalars.length > 0 && (
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md border border-border bg-muted-faint px-2.5 py-2">
+        <dl className="stg:grid stg:grid-cols-[auto_1fr] stg:gap-x-3 stg:gap-y-1 stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:px-2.5 stg:py-2">
           {scalars.map(([key, value]) => (
             <ScalarRow key={key} label={key} value={value} />
           ))}
@@ -291,17 +291,17 @@ function ScalarRow({ label, value }: { label: string; value: string }) {
 
   return (
     <>
-      <dt className="whitespace-nowrap font-mono text-muted-foreground">
+      <dt className="stg:whitespace-nowrap stg:font-mono stg:text-muted-foreground">
         {humanizeArgKey(label)}
       </dt>
       {isMultiline ? (
-        <dd className="min-w-0">
-          <pre className="whitespace-pre-wrap break-words rounded border border-border bg-muted-subtle px-2 py-1 font-mono text-foreground">
+        <dd className="stg:min-w-0">
+          <pre className="stg:whitespace-pre-wrap stg:break-words stg:rounded stg:border stg:border-border stg:bg-muted-subtle stg:px-2 stg:py-1 stg:font-mono stg:text-foreground">
             {value}
           </pre>
         </dd>
       ) : (
-        <dd className="min-w-0 truncate font-mono text-foreground" title={value}>
+        <dd className="stg:min-w-0 stg:truncate stg:font-mono stg:text-foreground" title={value}>
           {value}
         </dd>
       )}
@@ -317,11 +317,11 @@ function McpResultView({ result }: { result: string }) {
   const parsed = parseMcpResult(result);
 
   return (
-    <div className="space-y-1">
-      <span className="font-medium text-muted-foreground">Result</span>
+    <div className="stg:space-y-1">
+      <span className="stg:font-medium stg:text-muted-foreground">Result</span>
       <CollapsiblePre
         content={parsed}
-        className="max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle p-2 text-foreground"
+        className="stg:max-h-80 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:text-foreground"
       />
     </div>
   );

package/src/execution/MessageAttachments.tsx

@@ -83,7 +83,7 @@ export function MessageAttachments({
           (~h-6) share this row, and flexbox's default stretch alignment
           would balloon the document 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="Submitted attachments"
       >
@@ -172,17 +172,17 @@ function ImagePreviewChip({
   }
 
   return (
-    <span role="listitem" aria-label={name} title={name} className="inline-flex">
-      {/* The whole tile is the preview target. UNSTYLED_BUTTON is
-          load-bearing: without it the tile shows the UA's default button
-          box in preflight-less hosts (see the constant). */}
+    <span role="listitem" aria-label={name} title={name} className="stg:inline-flex">
+      {/* The whole tile is the preview target. UNSTYLED_BUTTON adds the
+          pointer cursor — the image tile carries no other clickability
+          cue. */}
       <button
         type="button"
         onClick={onPreview}
         aria-label={`Preview ${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",
+          "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",
         )}
       >
         {url ? (
@@ -191,14 +191,14 @@ function ImagePreviewChip({
             alt=""
             aria-hidden="true"
             loading="lazy"
-            className="h-full w-full object-cover"
+            className="stg:h-full stg:w-full stg:object-cover"
           />
         ) : (
           // Pulse placeholder while the presigned URL is minted — pulse
           // means work is genuinely in flight (contrast ImageGlyphTile).
           // Same footprint as the image, so no layout shift.
           <span
-            className="block h-full w-full animate-pulse bg-muted"
+            className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
             aria-hidden="true"
           />
         )}
@@ -219,7 +219,7 @@ function ImageGlyphTile({ name }: { readonly name: string }) {
       role="listitem"
       aria-label={name}
       title={name}
-      className="inline-flex h-14 w-14 items-center justify-center rounded-md bg-muted-subtle"
+      className="stg:inline-flex stg:h-14 stg:w-14 stg:items-center stg:justify-center stg:rounded-md stg:bg-muted-subtle"
     >
       <ImageGlyph />
     </span>
@@ -251,7 +251,7 @@ function DocumentChip({
   const content = (
     <>
       <FileGlyph />
-      <span className="min-w-0 truncate">{name}</span>
+      <span className="stg:min-w-0 stg:truncate">{name}</span>
     </>
   );
 
@@ -260,7 +260,7 @@ function DocumentChip({
       role="listitem"
       aria-label={name}
       title={name}
-      className="inline-flex max-w-[200px] items-center rounded-md bg-muted-subtle px-2 py-0.5 text-xs text-foreground"
+      className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
     >
       {downloadable ? (
         <button
@@ -270,14 +270,14 @@ function DocumentChip({
           aria-label={`Download ${name}`}
           className={cn(
             UNSTYLED_BUTTON,
-            "flex min-w-0 items-center gap-1 rounded-sm text-inherit [font:inherit] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            isDownloading && "opacity-70",
+            "stg:flex stg:min-w-0 stg:items-center stg:gap-1 stg:rounded-sm stg:hover:text-accent-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            isDownloading && "stg:opacity-70",
           )}
         >
           {content}
         </button>
       ) : (
-        <span className="flex min-w-0 items-center gap-1">{content}</span>
+        <span className="stg:flex stg:min-w-0 stg:items-center stg:gap-1">{content}</span>
       )}
     </span>
   );
@@ -329,7 +329,7 @@ function ImageGlyph() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <rect x="3" y="3" width="18" height="18" rx="2" />
@@ -354,7 +354,7 @@ function FileGlyph() {
       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" />