@stigmer/react 3.9.0 → 3.11.0

package/src/pricing-governance/ModelGovernanceDetail.tsx

@@ -81,11 +81,11 @@ export function ModelGovernanceDetail({
   ];
 
   return (
-    <div className="space-y-4 rounded-lg border border-border bg-card px-4 py-3">
+    <div className="stg:space-y-4 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-3">
       {/* ── header: identity + actions ──────────────────────────────────── */}
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <h4 className="flex flex-wrap items-center gap-2 text-sm font-semibold text-foreground">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
+        <div className="stg:min-w-0">
+          <h4 className="stg:flex stg:flex-wrap stg:items-center stg:gap-2 stg:text-sm stg:font-semibold stg:text-foreground">
             {baseline.displayName || baseline.modelId}
             {governance && (
               <GovernanceBadge
@@ -94,17 +94,17 @@ export function ModelGovernanceDetail({
               />
             )}
             {baseline.featured && (
-              <span className="rounded bg-accent px-1.5 py-0.5 text-[10px] font-medium text-primary">
+              <span className="stg:rounded stg:bg-accent stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary">
                 Featured
               </span>
             )}
           </h4>
-          <p className="mt-0.5 text-[11px] text-muted-foreground">
+          <p className="stg:mt-0.5 stg:text-[11px] stg:text-muted-foreground">
             {baseline.modelId} · {baseline.provider} · {baseline.harness}
             {baseline.shortDescription ? ` — ${baseline.shortDescription}` : ""}
           </p>
         </div>
-        <div className="flex shrink-0 gap-2">
+        <div className="stg:flex stg:shrink-0 stg:gap-2">
           <Button size="sm" variant="outline" onClick={onBack}>
             Back
           </Button>
@@ -119,17 +119,17 @@ export function ModelGovernanceDetail({
 
       {/* ── rate card: baseline vs effective ────────────────────────────── */}
       <section aria-label="Rates">
-        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           Rates ($ per million tokens)
         </h5>
-        <div className="rounded-md border border-border-muted" role="table" aria-label="Baseline vs effective rates">
+        <div className="stg:rounded-md stg:border stg:border-border-muted" role="table" aria-label="Baseline vs effective rates">
           <div
             role="row"
-            className="grid grid-cols-[1.5fr_1fr_1fr] gap-2 border-b border-border-muted px-2.5 py-1.5 text-[11px] font-medium text-muted-foreground"
+            className="stg:grid stg:grid-cols-[1.5fr_1fr_1fr] stg:gap-2 stg:border-b stg:border-border-muted stg:px-2.5 stg:py-1.5 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
           >
             <span role="columnheader">Rate</span>
-            <span role="columnheader" className="text-right">Baseline</span>
-            <span role="columnheader" className="text-right">Effective</span>
+            <span role="columnheader" className="stg:text-right">Baseline</span>
+            <span role="columnheader" className="stg:text-right">Effective</span>
           </div>
           {baseRates.map((rate) => {
             const overridden = rate.effective !== null && rate.effective !== rate.baseline;
@@ -137,16 +137,16 @@ export function ModelGovernanceDetail({
               <div
                 key={rate.label}
                 role="row"
-                className="grid grid-cols-[1.5fr_1fr_1fr] gap-2 border-b border-border-muted px-2.5 py-1.5 text-xs last:border-b-0"
+                className="stg:grid stg:grid-cols-[1.5fr_1fr_1fr] stg:gap-2 stg:border-b stg:border-border-muted stg:px-2.5 stg:py-1.5 stg:text-xs stg:last:border-b-0"
               >
-                <span role="cell" className="text-muted-foreground">{rate.label}</span>
+                <span role="cell" className="stg:text-muted-foreground">{rate.label}</span>
                 <span
                   role="cell"
-                  className={cn("text-right text-foreground", overridden && "line-through text-muted-foreground")}
+                  className={cn("stg:text-right stg:text-foreground", overridden && "stg:line-through stg:text-muted-foreground")}
                 >
                   {formatRate(rate.baseline)}
                 </span>
-                <span role="cell" className={cn("text-right text-foreground", overridden && "font-medium")}>
+                <span role="cell" className={cn("stg:text-right stg:text-foreground", overridden && "stg:font-medium")}>
                   {rate.effective !== null ? formatRate(rate.effective) : "—"}
                 </span>
               </div>
@@ -158,13 +158,13 @@ export function ModelGovernanceDetail({
       {/* ── active overrides with provenance ────────────────────────────── */}
       {hasOverrides && governance && (
         <section aria-label="Active pricing overrides">
-          <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             Active Overrides
           </h5>
-          <div className="space-y-1">
+          <div className="stg:space-y-1">
             {governance.activeOverrides.map((override) => (
-              <p key={override.overrideId} className="text-[11px] text-muted-foreground">
-                <span className="font-medium text-foreground">
+              <p key={override.overrideId} className="stg:text-[11px] stg:text-muted-foreground">
+                <span className="stg:font-medium stg:text-foreground">
                   {RATE_FIELD_LABELS[override.rateField] ?? "Rate"}
                   {override.variant ? ` (${override.variant})` : ""}
                 </span>
@@ -189,19 +189,19 @@ export function ModelGovernanceDetail({
       {/* ── variants ─────────────────────────────────────────────────────── */}
       {Object.keys(baseline.pricingVariants).length > 0 && (
         <section aria-label="Pricing variants">
-          <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             Variants
           </h5>
-          <div className="space-y-2">
+          <div className="stg:space-y-2">
             {Object.entries(baseline.pricingVariants).map(([key, variant]) => {
               const variantEntry =
                 row.variantGovernance.find((entry) => entry.variant === key) ?? null;
               return (
-                <div key={key} className="rounded-md border border-border-muted px-2.5 py-2">
-                  <p className="text-xs font-medium text-foreground">
+                <div key={key} className="stg:rounded-md stg:border stg:border-border-muted stg:px-2.5 stg:py-2">
+                  <p className="stg:text-xs stg:font-medium stg:text-foreground">
                     {key}
                     {variantEntry && (
-                      <span className="ml-2 align-middle">
+                      <span className="stg:ml-2 stg:align-middle">
                         <GovernanceBadge
                           ledgerReconcilable={variantEntry.ledgerReconcilable}
                           hasOverrides={variantEntry.activeOverrides.length > 0}
@@ -209,14 +209,14 @@ export function ModelGovernanceDetail({
                       </span>
                     )}
                   </p>
-                  <p className="mt-0.5 text-[11px] text-muted-foreground">
+                  <p className="stg:mt-0.5 stg:text-[11px] stg:text-muted-foreground">
                     {blockRates(variant.pricing)
                       .filter(([, micros]) => micros > ZERO)
                       .map(([label, micros]) => `${label} ${formatRate(micros)}`)
                       .join(" · ") || "No rates set"}
                   </p>
                   {variant.wireIds.length > 0 && (
-                    <p className="mt-0.5 text-[11px] text-muted-foreground">
+                    <p className="stg:mt-0.5 stg:text-[11px] stg:text-muted-foreground">
                       Wire ids: {variant.wireIds.join(", ")}
                     </p>
                   )}
@@ -229,10 +229,10 @@ export function ModelGovernanceDetail({
 
       {/* ── catalog metadata ─────────────────────────────────────────────── */}
       <section aria-label="Catalog metadata">
-        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           Catalog
         </h5>
-        <dl className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs sm:grid-cols-3">
+        <dl className="stg:grid stg:grid-cols-2 stg:gap-x-4 stg:gap-y-1 stg:text-xs stg:sm:grid-cols-3">
           <MetaItem label="Provider API id" value={baseline.apiModelId || "—"} />
           <MetaItem label="Speed tier" value={baseline.speedTier || "—"} />
           <MetaItem label="Cost tier" value={baseline.costTier || "—"} />
@@ -250,17 +250,17 @@ export function ModelGovernanceDetail({
 
       {/* ── revision history ─────────────────────────────────────────────── */}
       <section aria-label="Revision history">
-        <h5 className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        <h5 className="stg:mb-1.5 stg:text-[11px] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           Revision History
         </h5>
         {row.history.length === 0 ? (
-          <p className="text-[11px] text-muted-foreground">
+          <p className="stg:text-[11px] stg:text-muted-foreground">
             No previous revisions — this is the original entry.
           </p>
         ) : (
-          <div className="space-y-1">
+          <div className="stg:space-y-1">
             {row.history.map((revision) => (
-              <p key={revision.baselineId} className="text-[11px] text-muted-foreground">
+              <p key={revision.baselineId} className="stg:text-[11px] stg:text-muted-foreground">
                 {revision.status === ModelPricingBaselineStatus.pricing_baseline_retired
                   ? "Retired"
                   : "Superseded"}
@@ -282,8 +282,8 @@ export function ModelGovernanceDetail({
 function MetaItem({ label, value }: { readonly label: string; readonly value: string }) {
   return (
     <div>
-      <dt className="text-[11px] text-muted-foreground">{label}</dt>
-      <dd className="text-foreground">{value}</dd>
+      <dt className="stg:text-[11px] stg:text-muted-foreground">{label}</dt>
+      <dd className="stg:text-foreground">{value}</dd>
     </div>
   );
 }

package/src/pricing-governance/OperatorAccessNotice.tsx

@@ -14,15 +14,15 @@ export function OperatorAccessNotice({ className }: { readonly className?: strin
   return (
     <div
       className={cn(
-        "rounded-lg border border-border bg-card px-4 py-6 text-center",
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-6 stg:text-center",
         className,
       )}
       role="status"
     >
-      <p className="text-xs font-semibold text-foreground">
+      <p className="stg:text-xs stg:font-semibold stg:text-foreground">
         Platform operator access required
       </p>
-      <p className="mx-auto mt-1 max-w-md text-xs text-muted-foreground">
+      <p className="stg:mx-auto stg:mt-1 stg:max-w-md stg:text-xs stg:text-muted-foreground">
         Model pricing governance is a Stigmer-internal surface. It needs the
         platform operator role — organization roles do not grant it. If you
         believe you should have access, contact a platform operator.

package/src/pricing-governance/PricingGovernanceConsole.tsx

@@ -158,10 +158,10 @@ export function PricingGovernanceConsole({
 
   if (view.isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
         {Array.from({ length: 4 }, (_, i) => (
-          <div key={i} className="h-10 animate-pulse rounded-lg bg-muted-subtle" />
+          <div key={i} className="stg:h-10 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
         ))}
       </div>
     );
@@ -174,7 +174,7 @@ export function PricingGovernanceConsole({
       return <OperatorAccessNotice className={className} />;
     }
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(view.error)}
       </p>
     );
@@ -290,11 +290,11 @@ function ModelsTab({
   }
 
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between gap-3">
+    <div className="stg:space-y-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
         <input
           type="search"
-          className={cn(INPUT_CLASSES, "max-w-xs")}
+          className={cn(INPUT_CLASSES, "stg:max-w-xs")}
           value={view.modelQuery}
           onChange={(e) => view.setModelQuery(e.target.value)}
           placeholder="Search models…"
@@ -305,29 +305,29 @@ function ModelsTab({
         </Button>
       </div>
 
-      <div className="rounded-lg border border-border bg-card">
+      <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card">
         {/* Presentational column guide — each row is a self-describing
             button (its full text content is its accessible name), so
             the header is a visual aid, not an ARIA table header. */}
         <div
           aria-hidden="true"
-          className="grid grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] gap-2 border-b border-border px-3 py-2 text-[11px] font-medium text-muted-foreground"
+          className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[11px] stg:font-medium stg:text-muted-foreground"
         >
           <span>Model</span>
           <span>Harness</span>
-          <span className="text-right">Input</span>
-          <span className="text-right">Output</span>
-          <span className="text-right">Variants</span>
-          <span className="text-right">Governance</span>
+          <span className="stg:text-right">Input</span>
+          <span className="stg:text-right">Output</span>
+          <span className="stg:text-right">Variants</span>
+          <span className="stg:text-right">Governance</span>
         </div>
         {view.models.length === 0 ? (
-          <p className="px-3 py-2 text-xs text-muted-foreground">
+          <p className="stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
             {view.modelQuery.trim() !== ""
               ? `No models match "${view.modelQuery.trim()}".`
               : "The catalog is empty — has the baseline seed migration run?"}
           </p>
         ) : (
-          <ul role="list" aria-label="Models" className="m-0 list-none p-0">
+          <ul role="list" aria-label="Models" className="stg:m-0 stg:list-none stg:p-0">
             {view.models.map((row) => (
               <ModelRow key={row.key} row={row} onOpen={() => view.openDetail(row.key)} />
             ))}
@@ -356,26 +356,26 @@ function ModelRow({
   const hasOverrides = (governance?.activeOverrides.length ?? 0) > 0;
 
   return (
-    <li className="border-b border-border last:border-b-0">
+    <li className="stg:border-b stg:border-border stg:last:border-b-0">
       <button
         type="button"
         onClick={onOpen}
         className={cn(
-          "grid w-full grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] items-center gap-2 px-3 py-2 text-left text-xs",
-          "transition-colors hover:bg-accent",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "stg:grid stg:w-full stg:grid-cols-[2fr_1fr_1fr_1fr_0.7fr_1fr] stg:items-center stg:gap-2 stg:px-3 stg:py-2 stg:text-left stg:text-xs",
+          "stg:transition-colors stg:hover:bg-accent",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
         )}
       >
-        <span className="min-w-0">
-          <span className="block truncate font-medium text-foreground" title={baseline.modelId}>
+        <span className="stg:min-w-0">
+          <span className="stg:block stg:truncate stg:font-medium stg:text-foreground" title={baseline.modelId}>
             {baseline.displayName || baseline.modelId}
           </span>
-          <span className="block truncate text-[11px] text-muted-foreground">
+          <span className="stg:block stg:truncate stg:text-[11px] stg:text-muted-foreground">
             {baseline.modelId}
             {baseline.featured ? " · featured" : ""}
           </span>
         </span>
-        <span className="text-muted-foreground">{baseline.harness}</span>
+        <span className="stg:text-muted-foreground">{baseline.harness}</span>
         <RateCell
           baseline={baseline.pricing?.inputPriceMicrosPerMillion ?? ZERO}
           effective={
@@ -392,17 +392,17 @@ function ModelRow({
             ZERO
           }
         />
-        <span className="text-right text-muted-foreground">
+        <span className="stg:text-right stg:text-muted-foreground">
           {variantCount > 0 ? variantCount : "—"}
         </span>
-        <span className="text-right">
+        <span className="stg:text-right">
           {governance ? (
             <GovernanceBadge
               ledgerReconcilable={governance.ledgerReconcilable}
               hasOverrides={hasOverrides}
             />
           ) : (
-            <span className="text-[10px] text-muted-foreground">—</span>
+            <span className="stg:text-[10px] stg:text-muted-foreground">—</span>
           )}
         </span>
       </button>
@@ -426,10 +426,10 @@ function SignOffsTab({
   readonly onDecide: (overrideId: string, approve: boolean) => void;
 }) {
   return (
-    <div className="space-y-3">
+    <div className="stg:space-y-3">
       <input
         type="search"
-        className={cn(INPUT_CLASSES, "max-w-xs")}
+        className={cn(INPUT_CLASSES, "stg:max-w-xs")}
         value={view.signOffQuery}
         onChange={(e) => view.setSignOffQuery(e.target.value)}
         placeholder="Search sign-offs…"
@@ -437,19 +437,19 @@ function SignOffsTab({
       />
 
       {decisionError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(decisionError)}
         </p>
       )}
 
       {view.pendingOverrides.length === 0 ? (
-        <p className="text-xs text-muted-foreground">
+        <p className="stg:text-xs stg:text-muted-foreground">
           {view.signOffQuery.trim() !== ""
             ? `No pending sign-offs match "${view.signOffQuery.trim()}".`
             : "No pricing overrides awaiting a decision."}
         </p>
       ) : (
-        <div className="space-y-2">
+        <div className="stg:space-y-2">
           {view.pendingOverrides.map((override) => (
             <PendingOverrideCard
               key={override.overrideId}

package/src/pricing-governance/PricingGovernancePanel.tsx

@@ -41,10 +41,10 @@ export function PricingGovernancePanel({ className }: PricingGovernancePanelProp
 
   if (isLoading) {
     return (
-      <div className={cn("space-y-2", className)} aria-busy="true">
-        <div className="h-4 w-40 animate-pulse rounded bg-muted-subtle" />
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
         {Array.from({ length: 4 }, (_, i) => (
-          <div key={i} className="h-10 animate-pulse rounded-lg bg-muted-subtle" />
+          <div key={i} className="stg:h-10 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
         ))}
       </div>
     );
@@ -57,7 +57,7 @@ export function PricingGovernancePanel({ className }: PricingGovernancePanelProp
       return <OperatorAccessNotice className={className} />;
     }
     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>
     );
@@ -77,22 +77,22 @@ export function PricingGovernancePanel({ className }: PricingGovernancePanelProp
   };
 
   return (
-    <div className={cn("space-y-6", className)}>
+    <div className={cn("stg:space-y-6", className)}>
       <section aria-label="Pending pricing override proposals">
-        <h3 className="mb-2 text-xs font-semibold text-foreground">
+        <h3 className="stg:mb-2 stg:text-xs stg:font-semibold stg:text-foreground">
           Pending Sign-Offs
         </h3>
         {decisionError && (
-          <p className="mb-2 text-destructive text-xs" role="alert">
+          <p className="stg:mb-2 stg:text-destructive stg:text-xs" role="alert">
             {getUserMessage(decisionError)}
           </p>
         )}
         {governance.pendingOverrides.length === 0 ? (
-          <p className="text-xs text-muted-foreground">
+          <p className="stg:text-xs stg:text-muted-foreground">
             No pricing overrides awaiting a decision.
           </p>
         ) : (
-          <div className="space-y-2">
+          <div className="stg:space-y-2">
             {governance.pendingOverrides.map((override) => (
               <PendingOverrideCard
                 key={override.overrideId}
@@ -106,18 +106,18 @@ export function PricingGovernancePanel({ className }: PricingGovernancePanelProp
       </section>
 
       <section aria-label="Model pricing state">
-        <h3 className="mb-2 text-xs font-semibold text-foreground">
+        <h3 className="stg:mb-2 stg:text-xs stg:font-semibold stg:text-foreground">
           Model Pricing
         </h3>
-        <div className="rounded-lg border border-border bg-card" role="table"
+        <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card" role="table"
              aria-label="Model pricing governance">
           <div role="row"
-               className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] gap-2 border-b border-border px-3 py-2 text-[11px] font-medium text-muted-foreground">
+               className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr] stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-[11px] stg:font-medium stg:text-muted-foreground">
             <span role="columnheader">Model</span>
             <span role="columnheader">Harness</span>
-            <span role="columnheader" className="text-right">Input</span>
-            <span role="columnheader" className="text-right">Output</span>
-            <span role="columnheader" className="text-right">Governance</span>
+            <span role="columnheader" className="stg:text-right">Input</span>
+            <span role="columnheader" className="stg:text-right">Output</span>
+            <span role="columnheader" className="stg:text-right">Governance</span>
           </div>
           {governance.entries.map((entry) => (
             <GovernanceRow
@@ -139,12 +139,12 @@ function GovernanceRow({ entry }: { readonly entry: ModelPricingGovernanceEntry
   const hasOverrides = entry.activeOverrides.length > 0;
   return (
     <div role="row"
-         className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr] items-center gap-2 border-b border-border px-3 py-2 text-xs last:border-b-0">
-      <span role="cell" className="truncate font-medium text-foreground"
+         className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr] stg:items-center stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-xs stg:last:border-b-0">
+      <span role="cell" className="stg:truncate stg:font-medium stg:text-foreground"
             title={entry.modelId}>
         {entry.displayName || entry.modelId}
       </span>
-      <span role="cell" className="text-muted-foreground">{entry.harness}</span>
+      <span role="cell" className="stg:text-muted-foreground">{entry.harness}</span>
       <RateCell
         role="cell"
         baseline={entry.baselineInputMicrosPerMillion}
@@ -155,7 +155,7 @@ function GovernanceRow({ entry }: { readonly entry: ModelPricingGovernanceEntry
         baseline={entry.baselineOutputMicrosPerMillion}
         effective={entry.effectiveOutputMicrosPerMillion}
       />
-      <span role="cell" className="text-right">
+      <span role="cell" className="stg:text-right">
         <GovernanceBadge
           ledgerReconcilable={entry.ledgerReconcilable}
           hasOverrides={hasOverrides}

package/src/pricing-governance/RetireConfirm.tsx

@@ -31,18 +31,18 @@ export function RetireConfirm({
   const confirmed = typed === target.modelId;
 
   return (
-    <div className="space-y-2 rounded-lg border border-destructive bg-card px-3 py-3">
-      <h4 className="text-xs font-semibold text-foreground">
+    <div className="stg:space-y-2 stg:rounded-lg stg:border stg:border-destructive stg:bg-card stg:px-3 stg:py-3">
+      <h4 className="stg:text-xs stg:font-semibold stg:text-foreground">
         Retire {target.displayName || target.modelId}?
       </h4>
-      <p className="text-xs text-muted-foreground">
+      <p className="stg:text-xs stg:text-muted-foreground">
         The model disappears from every price surface (billing lookups, model
         pickers, the served registry) and any active pricing overrides on it are
         archived. The revision history is kept, and the key can be revived by a
-        later upsert. Type <span className="font-medium text-foreground">{target.modelId}</span>{" "}
+        later upsert. Type <span className="stg:font-medium stg:text-foreground">{target.modelId}</span>{" "}
         to confirm.
       </p>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="stg:grid stg:grid-cols-2 stg:gap-2">
         <input
           className={INPUT_CLASSES}
           value={typed}
@@ -60,11 +60,11 @@ export function RetireConfirm({
         />
       </div>
       {submitError && (
-        <p className="text-destructive text-xs" role="alert">
+        <p className="stg:text-destructive stg:text-xs" role="alert">
           {getUserMessage(submitError)}
         </p>
       )}
-      <div className="flex gap-2">
+      <div className="stg:flex stg:gap-2">
         <Button
           size="sm"
           variant="destructive"

package/src/pricing-governance/governance-primitives.tsx

@@ -26,16 +26,16 @@ export function PendingOverrideCard({
 }) {
   const provenance = override.provenance;
   return (
-    <div className="rounded-lg border border-border bg-card px-3 py-2">
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0">
-          <p className="truncate text-xs font-medium text-foreground">
+    <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-3 stg:py-2">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-2">
+        <div className="stg:min-w-0">
+          <p className="stg:truncate stg:text-xs stg:font-medium stg:text-foreground">
             {override.modelId}
             {override.variant ? ` (${override.variant})` : ""}
             {" · "}
             {RATE_FIELD_LABELS[override.rateField] ?? "Rate"}
           </p>
-          <p className="text-[11px] text-muted-foreground">
+          <p className="stg:text-[11px] stg:text-muted-foreground">
             {provenance ? (
               <>
                 Ledger observed {formatRate(provenance.observedRateMicrosPerMillion)} vs
@@ -48,7 +48,7 @@ export function PendingOverrideCard({
             )}
           </p>
         </div>
-        <div className="flex shrink-0 gap-2">
+        <div className="stg:flex stg:shrink-0 stg:gap-2">
           <Button
             size="sm"
             disabled={isSubmitting}
@@ -87,9 +87,9 @@ export function RateCell({
 }) {
   const overridden = baseline !== effective;
   return (
-    <span role={role} className="text-right text-foreground">
+    <span role={role} className="stg:text-right stg:text-foreground">
       {overridden && (
-        <span className="mr-1 text-[10px] text-muted-foreground line-through">
+        <span className="stg:mr-1 stg:text-[10px] stg:text-muted-foreground stg:line-through">
           {formatRate(baseline)}
         </span>
       )}
@@ -113,7 +113,7 @@ export function GovernanceBadge({
 }) {
   if (!ledgerReconcilable) {
     return (
-      <span className="rounded bg-muted-subtle px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+      <span className="stg:rounded stg:bg-muted-subtle stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground">
         Manually governed
       </span>
     );
@@ -121,10 +121,10 @@ export function GovernanceBadge({
   return (
     <span
       className={cn(
-        "rounded px-1.5 py-0.5 text-[10px] font-medium",
+        "stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium",
         hasOverrides
-          ? "bg-accent text-primary"
-          : "bg-muted-subtle text-muted-foreground",
+          ? "stg:bg-accent stg:text-primary"
+          : "stg:bg-muted-subtle stg:text-muted-foreground",
       )}
     >
       {hasOverrides ? "Ledger-corrected" : "Ledger-verified"}