@stigmer/react 3.9.0 → 3.11.0

package/src/user/UserMenu.tsx

@@ -130,34 +130,34 @@ export function UserMenu({
       <MenuTrigger
         aria-label={triggerLabel}
         className={cn(
-          "hover:bg-sidebar-accent flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 transition-colors focus:outline-none",
+          "stg:hover:bg-sidebar-accent stg:flex stg:w-full stg:cursor-pointer stg:items-center stg:gap-2 stg:rounded-lg stg:px-2 stg:py-1.5 stg:transition-colors stg:focus:outline-none",
           className,
         )}
       >
         <UserAvatar name={displayName} />
         {user ? (
-          <div className="flex min-w-0 flex-1 flex-col text-left">
+          <div className="stg:flex stg:min-w-0 stg:flex-1 stg:flex-col stg:text-left">
             {user.name && (
-              <span className="truncate text-sm font-medium">
+              <span className="stg:truncate stg:text-sm stg:font-medium">
                 {user.name}
               </span>
             )}
-            <span className="text-sidebar-muted-foreground truncate text-xs">
+            <span className="stg:text-sidebar-muted-foreground stg:truncate stg:text-xs">
               {user.email}
             </span>
           </div>
         ) : (
-          <span className="text-sidebar-muted-foreground truncate text-sm">
+          <span className="stg:text-sidebar-muted-foreground stg:truncate stg:text-sm">
             Local mode
           </span>
         )}
-        <ChevronsUpDown className="text-sidebar-muted-foreground ml-auto size-3.5 shrink-0" />
+        <ChevronsUpDown className="stg:text-sidebar-muted-foreground stg:ml-auto stg:size-3.5 stg:shrink-0" />
       </MenuTrigger>
 
       <MenuContent align="start" side="top" sideOffset={8}>
         {showSettings && (
           <MenuItem onClick={onSettingsClick}>
-            <Settings className="size-4" />
+            <Settings className="stg:size-4" />
             Settings
           </MenuItem>
         )}
@@ -182,7 +182,7 @@ export function UserMenu({
           <>
             {hasContentBeforeSignOut && <MenuSeparator />}
             <MenuItem onClick={onSignOut}>
-              <LogOut className="size-4" />
+              <LogOut className="stg:size-4" />
               Sign out
             </MenuItem>
           </>
@@ -206,7 +206,7 @@ function ColorSchemeSection({
   return (
     <MenuGroup aria-label="Color scheme">
       <MenuLabel>
-        <SunMoon className="mr-1 inline size-3 align-[-2px]" />
+        <SunMoon className="stg:mr-1 stg:inline stg:size-3 stg:align-[-2px]" />
         Color Scheme
       </MenuLabel>
       <MenuRadioGroup
@@ -227,14 +227,14 @@ function UserAvatar({ name }: { name?: string }) {
   return (
     <div
       className={cn(
-        "bg-sidebar-accent text-sidebar-accent-foreground border-sidebar-border",
-        "flex size-6 shrink-0 items-center justify-center rounded-full border",
+        "stg:bg-sidebar-accent stg:text-sidebar-accent-foreground stg:border-sidebar-border",
+        "stg:flex stg:size-6 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:border",
       )}
     >
       {initial ? (
-        <span className="text-xs font-medium">{initial}</span>
+        <span className="stg:text-xs stg:font-medium">{initial}</span>
       ) : (
-        <User className="size-3.5" />
+        <User className="stg:size-3.5" />
       )}
     </div>
   );

package/src/version-history/DiffFileList.tsx

@@ -34,7 +34,7 @@ export function DiffFileList({
   return (
     <nav
       aria-label="Changed files"
-      className={cn("flex flex-col overflow-auto", className)}
+      className={cn("stg:flex stg:flex-col stg:overflow-auto", className)}
     >
       {files.map((file) => (
         <button
@@ -43,15 +43,15 @@ export function DiffFileList({
           onClick={() => onSelect(file.path)}
           aria-current={file.path === selectedPath ? "true" : undefined}
           className={cn(
-            "flex items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+            "stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-inset",
             file.path === selectedPath
-              ? "bg-accent-hover text-foreground"
-              : "text-muted-foreground hover:bg-accent-hover hover:text-foreground",
+              ? "stg:bg-accent-hover stg:text-foreground"
+              : "stg:text-muted-foreground stg:hover:bg-accent-hover stg:hover:text-foreground",
           )}
         >
           <ChangeTypeBadge changeType={file.changeType} />
-          <span className="min-w-0 flex-1 truncate font-mono">{file.path}</span>
+          <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:font-mono">{file.path}</span>
           <DeltaCount additions={file.additions} deletions={file.deletions} />
         </button>
       ))}
@@ -71,14 +71,14 @@ function ChangeTypeBadge({
   const letter = changeType === "modified" ? "M" : changeType === "added" ? "A" : "D";
   const color =
     changeType === "modified"
-      ? "text-diff-hunk-header-fg"
+      ? "stg:text-diff-hunk-header-fg"
       : changeType === "added"
-        ? "text-diff-added-fg"
-        : "text-diff-removed-fg";
+        ? "stg:text-diff-added-fg"
+        : "stg:text-diff-removed-fg";
 
   return (
     <span
-      className={cn("shrink-0 font-mono text-[10px] font-bold", color)}
+      className={cn("stg:shrink-0 stg:font-mono stg:text-[10px] stg:font-bold", color)}
       aria-label={changeType}
     >
       {letter}
@@ -98,13 +98,13 @@ function DeltaCount({
   readonly deletions: number;
 }) {
   return (
-    <span className="shrink-0 font-mono text-[10px]">
+    <span className="stg:shrink-0 stg:font-mono stg:text-[10px]">
       {additions > 0 && (
-        <span className="text-diff-added-fg">+{additions}</span>
+        <span className="stg:text-diff-added-fg">+{additions}</span>
       )}
       {additions > 0 && deletions > 0 && " "}
       {deletions > 0 && (
-        <span className="text-diff-removed-fg">-{deletions}</span>
+        <span className="stg:text-diff-removed-fg">-{deletions}</span>
       )}
     </span>
   );

package/src/version-history/DiffSummary.tsx

@@ -35,7 +35,7 @@ export function DiffSummary({
       role="status"
       aria-live="polite"
       className={cn(
-        "flex items-center gap-2 text-xs text-muted-foreground",
+        "stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground",
         className,
       )}
     >
@@ -43,7 +43,7 @@ export function DiffSummary({
       {additions > 0 && (
         <>
           <span aria-hidden="true">&middot;</span>
-          <span className="font-mono text-diff-added-fg">
+          <span className="stg:font-mono stg:text-diff-added-fg">
             +{additions} {additions === 1 ? "addition" : "additions"}
           </span>
         </>
@@ -51,7 +51,7 @@ export function DiffSummary({
       {deletions > 0 && (
         <>
           <span aria-hidden="true">&middot;</span>
-          <span className="font-mono text-diff-removed-fg">
+          <span className="stg:font-mono stg:text-diff-removed-fg">
             -{deletions} {deletions === 1 ? "deletion" : "deletions"}
           </span>
         </>

package/src/version-history/DiffViewer.tsx

@@ -38,7 +38,7 @@ export function DiffViewer({ hunks, filePath, className }: DiffViewerProps) {
       <div
         role="status"
         className={cn(
-          "flex items-center justify-center py-8 text-sm text-muted-foreground",
+          "stg:flex stg:items-center stg:justify-center stg:py-8 stg:text-sm stg:text-muted-foreground",
           className,
         )}
       >
@@ -50,18 +50,18 @@ export function DiffViewer({ hunks, filePath, className }: DiffViewerProps) {
   return (
     <div
       className={cn(
-        "overflow-auto rounded-lg border border-border font-mono text-[13px] leading-[1.6]",
+        "stg:overflow-auto stg:rounded-lg stg:border stg:border-border stg:font-mono stg:text-[13px] stg:leading-[1.6]",
         className,
       )}
     >
       {filePath && (
-        <div className="sticky top-0 z-10 border-b border-border bg-muted px-3 py-1.5 text-xs font-medium text-muted-foreground">
+        <div className="stg:sticky stg:top-0 stg:z-10 stg:border-b stg:border-border stg:bg-muted stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground">
           {filePath}
         </div>
       )}
 
-      <table className="w-full border-collapse" role="table">
-        <thead className="sr-only">
+      <table className="stg:w-full stg:border-collapse" role="table">
+        <thead className="stg:sr-only">
           <tr>
             <th scope="col">Line</th>
             <th scope="col">Change</th>
@@ -97,7 +97,7 @@ function HunkRows({
         <tr>
           <td
             colSpan={3}
-            className="select-none bg-diff-hunk-header-bg px-3 py-1 text-[11px] text-diff-hunk-header-fg"
+            className="stg:select-none stg:bg-diff-hunk-header-bg stg:px-3 stg:py-1 stg:text-[11px] stg:text-diff-hunk-header-fg"
             aria-label={`Hunk: ${header}`}
           >
             {header}
@@ -116,25 +116,25 @@ function HunkRows({
 // ---------------------------------------------------------------------------
 
 const LINE_NUM_CLASSES =
-  "w-[1px] min-w-10 select-none whitespace-nowrap px-2 text-right text-[11px] text-muted-foreground-faint";
-const MARKER_CLASSES = "w-[1px] select-none px-1 text-center";
+  "stg:w-[1px] stg:min-w-10 stg:select-none stg:whitespace-nowrap stg:px-2 stg:text-right stg:text-[11px] stg:text-muted-foreground-faint";
+const MARKER_CLASSES = "stg:w-[1px] stg:select-none stg:px-1 stg:text-center";
 
 function DiffLineRow({ line }: { readonly line: DiffLine }) {
   const marker = line.type === "added" ? "+" : line.type === "removed" ? "-" : " ";
 
   const rowClass =
     line.type === "added"
-      ? "bg-diff-added-bg"
+      ? "stg:bg-diff-added-bg"
       : line.type === "removed"
-        ? "bg-diff-removed-bg"
+        ? "stg:bg-diff-removed-bg"
         : "";
 
   const markerColor =
     line.type === "added"
-      ? "text-diff-added-fg"
+      ? "stg:text-diff-added-fg"
       : line.type === "removed"
-        ? "text-diff-removed-fg"
-        : "text-muted-foreground-faint";
+        ? "stg:text-diff-removed-fg"
+        : "stg:text-muted-foreground-faint";
 
   const ariaLabel =
     line.type === "added"
@@ -158,7 +158,7 @@ function DiffLineRow({ line }: { readonly line: DiffLine }) {
       <td className={cn(MARKER_CLASSES, markerColor)} aria-hidden="true">
         {marker}
       </td>
-      <td className="whitespace-pre-wrap break-all px-2">
+      <td className="stg:whitespace-pre-wrap stg:break-all stg:px-2">
         {line.content}
       </td>
     </tr>

package/src/version-history/MultiFileDiffView.tsx

@@ -55,13 +55,13 @@ export function MultiFileDiffView({
       <div
         role="status"
         className={cn(
-          "flex flex-col items-center gap-2 py-12 text-center",
+          "stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-12 stg:text-center",
           className,
         )}
       >
-        <NoDiffIcon className="size-8 text-muted-foreground-faint" />
-        <p className="text-sm text-muted-foreground">No differences found</p>
-        <p className="text-xs text-muted-foreground-subtle">
+        <NoDiffIcon className="stg:size-8 stg:text-muted-foreground-faint" />
+        <p className="stg:text-sm stg:text-muted-foreground">No differences found</p>
+        <p className="stg:text-xs stg:text-muted-foreground-subtle">
           These two versions have identical content.
         </p>
       </div>
@@ -69,7 +69,7 @@ export function MultiFileDiffView({
   }
 
   return (
-    <div className={cn("flex flex-col gap-3", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-3", className)}>
       <DiffSummary
         fileCount={diff.files.length}
         additions={diff.totalAdditions}
@@ -77,7 +77,7 @@ export function MultiFileDiffView({
       />
 
       {diff.files.length > 1 && (
-        <div className="overflow-hidden rounded-lg border border-border">
+        <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
           <DiffFileList
             files={diff.files}
             selectedPath={selectedPath}

package/src/version-history/UnifiedDiffView.tsx

@@ -45,7 +45,7 @@ export function UnifiedDiffView({ patch, className }: UnifiedDiffViewProps) {
   return (
     <pre
       className={cn(
-        "max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-xs",
+        "stg:max-h-96 stg:overflow-auto stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:font-mono stg:text-xs",
         className,
       )}
     >
@@ -53,9 +53,9 @@ export function UnifiedDiffView({ patch, className }: UnifiedDiffViewProps) {
         <div
           key={i}
           className={cn(
-            line.startsWith("+") && !line.startsWith("+++") && "text-diff-added-fg",
-            line.startsWith("-") && !line.startsWith("---") && "text-diff-removed-fg",
-            line.startsWith("@@") && "text-diff-hunk-header-fg",
+            line.startsWith("+") && !line.startsWith("+++") && "stg:text-diff-added-fg",
+            line.startsWith("-") && !line.startsWith("---") && "stg:text-diff-removed-fg",
+            line.startsWith("@@") && "stg:text-diff-hunk-header-fg",
           )}
         >
           {line || " "}

package/src/version-history/VersionTimeline.tsx

@@ -77,7 +77,7 @@ export function VersionTimeline({
     : null;
 
   return (
-    <div className={cn("flex flex-col pt-2", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:pt-2", className)}>
       {compareSelection && (
         <CompareInfoBar
           selectedLabel={compareLabel!}
@@ -116,12 +116,12 @@ function CompareInfoBar({
     <div
       role="status"
       aria-live="polite"
-      className="mb-3 flex items-center gap-2 rounded-md border border-dashed border-primary bg-primary-subtle px-3 py-2 text-xs"
+      className="stg:mb-3 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:border-dashed stg:border-primary stg:bg-primary-subtle stg:px-3 stg:py-2 stg:text-xs"
     >
-      <CompareIcon className="size-3.5 shrink-0 text-primary" />
-      <span className="flex-1 text-foreground">
+      <CompareIcon className="stg:size-3.5 stg:shrink-0 stg:text-primary" />
+      <span className="stg:flex-1 stg:text-foreground">
         Select another version to compare with{" "}
-        <code className="rounded bg-muted px-1 py-0.5 font-mono text-[10px] font-medium">
+        <code className="stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:font-mono stg:text-[10px] stg:font-medium">
           {selectedLabel}
         </code>
       </span>
@@ -129,9 +129,9 @@ function CompareInfoBar({
         type="button"
         onClick={onCancel}
         className={cn(
-          "rounded px-2 py-0.5 text-[10px] 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:rounded stg:px-2 stg:py-0.5 stg:text-[10px] 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",
         )}
       >
         Cancel
@@ -164,22 +164,22 @@ function CompareIcon({ className }: { readonly className?: string }) {
 function TimelineSkeleton({ className }: { readonly className?: string }) {
   return (
     <div
-      className={cn("flex flex-col gap-4 pt-2", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-4 stg:pt-2", className)}
       aria-busy="true"
       aria-label="Loading version history"
     >
       {[1, 2, 3].map((i) => (
-        <div key={i} className="flex gap-3">
-          <div className="flex flex-col items-center">
-            <div className="size-2.5 animate-pulse rounded-full bg-muted" />
-            {i < 3 && <div className="mt-1 w-px flex-1 bg-border" />}
+        <div key={i} className="stg:flex stg:gap-3">
+          <div className="stg:flex stg:flex-col stg:items-center">
+            <div className="stg:size-2.5 stg:animate-pulse stg:rounded-full stg:bg-muted" />
+            {i < 3 && <div className="stg:mt-1 stg:w-px stg:flex-1 stg:bg-border" />}
           </div>
-          <div className="mb-4 flex-1 space-y-2 px-2.5 py-2">
-            <div className="flex gap-2">
-              <div className="h-4 w-20 animate-pulse rounded bg-muted" />
-              <div className="h-4 w-12 animate-pulse rounded-full bg-muted" />
+          <div className="stg:mb-4 stg:flex-1 stg:space-y-2 stg:px-2.5 stg:py-2">
+            <div className="stg:flex stg:gap-2">
+              <div className="stg:h-4 stg:w-20 stg:animate-pulse stg:rounded stg:bg-muted" />
+              <div className="stg:h-4 stg:w-12 stg:animate-pulse stg:rounded-full stg:bg-muted" />
             </div>
-            <div className="h-3 w-32 animate-pulse rounded bg-muted" />
+            <div className="stg:h-3 stg:w-32 stg:animate-pulse stg:rounded stg:bg-muted" />
           </div>
         </div>
       ))}
@@ -198,12 +198,12 @@ function EmptyState({
     <div
       role="status"
       className={cn(
-        "flex flex-col items-center gap-2 py-8 text-center",
+        "stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-8 stg:text-center",
         className,
       )}
     >
-      <HistoryIcon className="size-8 text-muted-foreground-faint" />
-      <p className="text-sm text-muted-foreground">{message}</p>
+      <HistoryIcon className="stg:size-8 stg:text-muted-foreground-faint" />
+      <p className="stg:text-sm stg:text-muted-foreground">{message}</p>
     </div>
   );
 }

package/src/version-history/VersionTimelineEntry.tsx

@@ -41,25 +41,25 @@ export function VersionTimelineEntry({
     <div
       role="listitem"
       aria-current={entry.isCurrent ? "true" : undefined}
-      className="relative flex gap-3"
+      className="stg:relative stg:flex stg:gap-3"
     >
       {/* Timeline connector */}
-      <div className="flex flex-col items-center pt-1">
+      <div className="stg:flex stg:flex-col stg:items-center stg:pt-1">
         <div
           className={cn(
-            "size-2.5 shrink-0 rounded-full border-2",
+            "stg:size-2.5 stg:shrink-0 stg:rounded-full stg:border-2",
             entry.isCurrent
-              ? "border-primary bg-primary"
+              ? "stg:border-primary stg:bg-primary"
               : isCompareSource
-                ? "border-primary border-dashed bg-background"
+                ? "stg:border-primary stg:border-dashed stg:bg-background"
                 : isSelected
-                  ? "border-primary bg-background"
-                  : "border-border bg-background",
+                  ? "stg:border-primary stg:bg-background"
+                  : "stg:border-border stg:bg-background",
           )}
           aria-hidden="true"
         />
         {!isLast && (
-          <div className="mt-1 w-px flex-1 bg-border" aria-hidden="true" />
+          <div className="stg:mt-1 stg:w-px stg:flex-1 stg:bg-border" aria-hidden="true" />
         )}
       </div>
 
@@ -71,49 +71,49 @@ export function VersionTimelineEntry({
         tabIndex={0}
         aria-selected={isSelected}
         className={cn(
-          "mb-4 flex min-w-0 flex-1 flex-col gap-1 rounded-md px-2.5 py-2 text-left transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:mb-4 stg:flex stg:min-w-0 stg:flex-1 stg:flex-col stg:gap-1 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-left stg:transition-colors",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           isCompareSource
-            ? "border border-dashed border-primary bg-primary-subtle"
+            ? "stg:border stg:border-dashed stg:border-primary stg:bg-primary-subtle"
             : isSelected
-              ? "bg-accent-hover"
-              : "hover:bg-accent-hover",
+              ? "stg:bg-accent-hover"
+              : "stg:hover:bg-accent-hover",
         )}
       >
         {/* Top line: hash + tag + current badge */}
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           <code
-            className="shrink-0 rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-foreground"
+            className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:font-medium stg:text-foreground"
             title={entry.id}
           >
             {entry.label}
           </code>
 
           {isCompareSource && (
-            <span className="shrink-0 rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-medium text-primary-foreground">
+            <span className="stg:shrink-0 stg:rounded-full stg:bg-primary stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary-foreground">
               A
             </span>
           )}
 
           {entry.tag && (
-            <span className="shrink-0 rounded-full bg-primary-subtle px-1.5 py-0.5 text-[10px] font-medium text-primary">
+            <span className="stg:shrink-0 stg:rounded-full stg:bg-primary-subtle stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary">
               {entry.tag}
             </span>
           )}
 
           {entry.isCurrent && (
-            <span className="shrink-0 rounded-full bg-status-ready-subtle px-1.5 py-0.5 text-[10px] font-medium text-status-ready">
+            <span className="stg:shrink-0 stg:rounded-full stg:bg-status-ready-subtle stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-status-ready">
               current
             </span>
           )}
 
           {trailing && (
-            <div className="ml-auto shrink-0">{trailing}</div>
+            <div className="stg:ml-auto stg:shrink-0">{trailing}</div>
           )}
         </div>
 
         {/* Second line: timestamp + actor */}
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
           <time
             dateTime={entry.timestamp.toISOString()}
             title={entry.timestamp.toLocaleString()}
@@ -124,12 +124,12 @@ export function VersionTimelineEntry({
           {entry.actor && (
             <>
               <span aria-hidden="true">&middot;</span>
-              <span className="flex items-center gap-1">
+              <span className="stg:flex stg:items-center stg:gap-1">
                 {entry.actor.avatar && (
                   <img
                     src={entry.actor.avatar}
                     alt=""
-                    className="size-3.5 rounded-full"
+                    className="stg:size-3.5 stg:rounded-full"
                   />
                 )}
                 <span>{entry.actor.displayName || entry.actor.id}</span>
@@ -140,7 +140,7 @@ export function VersionTimelineEntry({
 
         {/* Optional sublabel (commit message) */}
         {entry.sublabel && (
-          <p className="text-xs text-muted-foreground">
+          <p className="stg:text-xs stg:text-muted-foreground">
             {entry.sublabel}
           </p>
         )}
@@ -170,23 +170,23 @@ function GitProvenanceRow({
     : null;
 
   return (
-    <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-      <GitIcon className="size-3 shrink-0" />
+    <div className="stg:flex stg:items-center stg:gap-1.5 stg:text-[11px] stg:text-muted-foreground">
+      <GitIcon className="stg:size-3 stg:shrink-0" />
       {provenance.ref && (
-        <span className="font-medium">{provenance.ref}</span>
+        <span className="stg:font-medium">{provenance.ref}</span>
       )}
       {commitUrl ? (
         <a
           href={commitUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className="font-mono text-primary underline-offset-2 hover:underline"
+          className="stg:font-mono stg:text-primary stg:underline-offset-2 stg:hover:underline"
           onClick={(e) => e.stopPropagation()}
         >
           {truncatedCommit}
         </a>
       ) : (
-        <code className="font-mono">{truncatedCommit}</code>
+        <code className="stg:font-mono">{truncatedCommit}</code>
       )}
     </div>
   );

package/src/version-history/__tests__/UnifiedDiffView.test.tsx

@@ -44,7 +44,7 @@ describe("UnifiedDiffView", () => {
 
   it("forwards className to the rendered container (e.g. a height cap)", () => {
     const patch = "@@ -1 +1 @@\n-a\n+b\n";
-    const { container } = render(<UnifiedDiffView patch={patch} className="max-h-80" />);
-    expect(container.querySelector(".max-h-80")).not.toBeNull();
+    const { container } = render(<UnifiedDiffView patch={patch} className="stg:max-h-80" />);
+    expect(container.querySelector(".stg\\:max-h-80")).not.toBeNull();
   });
 });