@stigmer/react 3.9.0 → 3.11.0

package/src/platform-client/PlatformClientListPanel.tsx

@@ -64,14 +64,14 @@ export function PlatformClientListPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading platform clients"
       >
         {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>
@@ -80,7 +80,7 @@ export function PlatformClientListPanel({
 
   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>
     );
@@ -90,7 +90,7 @@ export function PlatformClientListPanel({
     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,
         )}
       >
@@ -101,7 +101,7 @@ export function PlatformClientListPanel({
 
   return (
     <div
-      className={cn("space-y-2", className)}
+      className={cn("stg:space-y-2", className)}
       role="list"
       aria-label="Platform clients"
     >
@@ -169,34 +169,34 @@ function PlatformClientRow({
     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>?
             {clientId && (
-              <span className="ml-1 text-muted-foreground">
+              <span className="stg:ml-1 stg:text-muted-foreground">
                 This will invalidate client ID{" "}
-                <code className="font-mono">{clientId}</code>.
+                <code className="stg:font-mono">{clientId}</code>.
               </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 +207,9 @@ function PlatformClientRow({
             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,25 +222,25 @@ function PlatformClientRow({
   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"
     >
       <KeyIcon />
 
-      <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>
         {clientId && (
-          <span className="block truncate text-xs text-muted-foreground font-mono">
+          <span className="stg:block stg:truncate stg:text-xs stg:text-muted-foreground stg:font-mono">
             {clientId}
           </span>
         )}
       </div>
 
-      <div className="hidden sm:flex shrink-0 items-center gap-3 text-xs text-muted-foreground">
+      <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-3 stg:text-xs stg:text-muted-foreground">
         {fingerprint && (
           <span
-            className="font-mono"
+            className="stg:font-mono"
             title={`Secret fingerprint: ${fingerprint}`}
           >
             ••••{fingerprint.slice(-4)}
@@ -248,7 +248,7 @@ function PlatformClientRow({
         )}
         <ExpiryBadge spec={spec} />
         {spec?.autoProvisionAccounts && (
-          <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+          <span className="stg:inline-flex stg:items-center stg:rounded-full stg:border stg:border-primary/30 stg:bg-primary-subtle stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium stg:text-primary">
             JIT
           </span>
         )}
@@ -259,16 +259,16 @@ function PlatformClientRow({
         )}
       </div>
 
-      <div className="flex shrink-0 items-center gap-1">
+      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
         {onEdit && (
           <button
             type="button"
             onClick={onEdit}
             aria-label={`Edit ${name}`}
             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",
             )}
           >
             <PencilIcon />
@@ -279,9 +279,9 @@ function PlatformClientRow({
           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 />
@@ -298,7 +298,7 @@ function PlatformClientRow({
 function ExpiryBadge({ spec }: { spec: PlatformClient["spec"] }) {
   if (spec?.neverExpires) {
     return (
-      <span className="text-[0.65rem] text-muted-foreground">No expiry</span>
+      <span className="stg:text-[0.65rem] stg:text-muted-foreground">No expiry</span>
     );
   }
   if (spec?.expiresAt) {
@@ -307,8 +307,8 @@ function ExpiryBadge({ spec }: { spec: PlatformClient["spec"] }) {
     return (
       <span
         className={cn(
-          "text-[0.65rem]",
-          isExpired ? "text-destructive font-medium" : "text-muted-foreground",
+          "stg:text-[0.65rem]",
+          isExpired ? "stg:text-destructive stg:font-medium" : "stg:text-muted-foreground",
         )}
         title={`Expires ${date.toISOString()}`}
       >
@@ -347,7 +347,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="10.5" cy="5.5" r="3" />
       <path d="M8.5 7.5L3 13l-.5-2.5L5 10l1-1-1-1 3.5.5z" />
@@ -404,7 +404,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/platform-client/PlatformClientSecretAlert.tsx

@@ -87,14 +87,14 @@ export function PlatformClientSecretAlert({
     <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-3 flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="text-sm font-medium text-foreground">{title}</p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
+      <div className="stg:mb-3 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">{title}</p>
+          <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
             Copy the client secret now. It will not be shown again.
           </p>
         </div>
@@ -103,16 +103,16 @@ export function PlatformClientSecretAlert({
           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="space-y-2">
+      <div className="stg:space-y-2">
         <CopyableField
           id="stgm-pc-client-id-reveal"
           label="Client ID"
@@ -133,7 +133,7 @@ export function PlatformClientSecretAlert({
         role="status"
         aria-live="polite"
         aria-atomic="true"
-        className="sr-only"
+        className="stg:sr-only"
       >
         {copiedField === "id" && "Client ID copied to clipboard"}
         {copiedField === "secret" && "Client secret copied to clipboard"}
@@ -161,16 +161,16 @@ function CopyableField({
 }) {
   return (
     <div>
-      <span className="text-[0.65rem] font-medium text-muted-foreground">
+      <span className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
         {label}
       </span>
-      <div className="mt-0.5 flex items-center gap-2">
+      <div className="stg:mt-0.5 stg:flex stg:items-center stg:gap-2">
         <code
           id={id}
           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",
           )}
         >
           {value}
@@ -180,9 +180,9 @@ function CopyableField({
           onClick={onCopy}
           aria-label={`Copy ${label}`}
           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/portal-container.ts

@@ -15,24 +15,51 @@ import { createContext, useContext } from "react";
  * `className`-scoped token overrides — even though it lives outside the
  * provider's DOM subtree (where the cascade would otherwise not reach it).
  *
- * Defaults to `null` so components rendered outside a `StigmerProvider`
- * fall back to the browser's default portal target (`document.body`).
+ * Three states, chosen to map EXACTLY onto Base UI's `container` prop
+ * semantics so the value can be passed straight through:
+ *
+ * - `undefined` (the default — no `StigmerProvider` above): Base UI
+ *   falls back to `document.body`, so standalone components stay
+ *   functional (though un-themed).
+ * - `null` (published by `StigmerProvider` during its first paint and
+ *   under SSR, before the portal `<div>` mounts): Base UI treats an
+ *   explicit `null` as "wait for a container" — the popup holds off
+ *   for a frame instead of flashing un-themed into `document.body`,
+ *   then re-portals into the themed container the moment it mounts.
+ * - an `HTMLElement` (the mounted themed container): portaled content
+ *   renders inside it and inherits the `--stgm-*` token scope.
+ *
+ * The default MUST stay `undefined`, never `null`: an explicit `null`
+ * makes Base UI portals render NOWHERE, which breaks every popup for
+ * consumers embedding components outside a provider (stigmer-cloud#271).
  *
  * @internal Consumed by SDK components; not part of the public API.
  */
-export const PortalContainerContext = createContext<HTMLElement | null>(null);
+export const PortalContainerContext = createContext<
+  HTMLElement | null | undefined
+>(undefined);
 
 /**
  * Returns the managed portal container for the nearest `StigmerProvider`.
  *
- * SDK components that use `Popover.Portal`, `Dialog.Portal`,
- * `Select.Portal`, or `Menu.Portal` pass the returned element as the
+ * SDK components that use `Popover.Portal`, `Dialog.Portal`, or
+ * `Menu.Portal` pass the returned value straight through as the
  * `container` prop so that portaled content inherits `--stgm-*` design
  * tokens (including dark-mode values).
  *
- * Returns `null` when called outside a `StigmerProvider`, which makes
- * Base UI portals fall back to `document.body`. This keeps components
- * functional (though un-themed) when used standalone.
+ * The return value is deliberately three-state, mirroring Base UI's
+ * `container` prop semantics so no coalescing is needed at call sites:
+ *
+ * - `undefined` — no `StigmerProvider` above. Base UI portals fall
+ *   back to `document.body`, keeping components functional (though
+ *   un-themed) when used standalone. Never coerce this to `null`:
+ *   Base UI treats an explicit `null` as "wait for a container" and
+ *   renders the popup nowhere.
+ * - `null` — a `StigmerProvider` exists but its themed portal
+ *   container has not mounted yet (first paint, SSR). Base UI waits
+ *   for the container instead of flashing un-themed content into
+ *   `document.body`, then re-portals once it mounts.
+ * - an `HTMLElement` — the mounted themed container.
  *
  * Platform builders who create custom portaled components should use
  * this hook to target the same container as the built-in SDK components.
@@ -58,6 +85,6 @@ export const PortalContainerContext = createContext<HTMLElement | null>(null);
  * }
  * ```
  */
-export function useStigmerPortalContainer(): HTMLElement | null {
+export function useStigmerPortalContainer(): HTMLElement | null | undefined {
   return useContext(PortalContainerContext);
 }

package/src/pricing-governance/BaselineEditor.tsx

@@ -368,40 +368,40 @@ export function BaselineEditor({
   if (pendingBaseline) {
     const changes = diffRates(initial, pendingBaseline);
     return (
-      <div className="space-y-3 rounded-lg border border-border bg-card px-3 py-3">
-        <h4 className="text-xs font-semibold text-foreground">
+      <div className="stg:space-y-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-3 stg:py-3">
+        <h4 className="stg:text-xs stg:font-semibold stg:text-foreground">
           {initial ? "Confirm baseline revision" : "Confirm new catalog entry"}
           {" · "}
-          <span className="font-normal text-muted-foreground">
+          <span className="stg:font-normal stg:text-muted-foreground">
             {pendingBaseline.modelId} / {pendingBaseline.provider} / {pendingBaseline.harness}
           </span>
         </h4>
         {changes.length === 0 ? (
-          <p className="text-xs text-muted-foreground">
+          <p className="stg:text-xs stg:text-muted-foreground">
             No rate changes — only catalog fields move. Billing is unaffected.
           </p>
         ) : (
-          <div className="space-y-1" role="table" aria-label="Rate changes">
+          <div className="stg:space-y-1" role="table" aria-label="Rate changes">
             {changes.map((change) => (
-              <p key={change.label} className="text-xs text-foreground" role="row">
-                <span className="text-muted-foreground">{change.label}: </span>
-                <span className="line-through">{change.before}</span>
+              <p key={change.label} className="stg:text-xs stg:text-foreground" role="row">
+                <span className="stg:text-muted-foreground">{change.label}: </span>
+                <span className="stg:line-through">{change.before}</span>
                 {" → "}
-                <span className="font-medium">{change.after}</span>
+                <span className="stg:font-medium">{change.after}</span>
               </p>
             ))}
-            <p className="text-[11px] text-muted-foreground">
+            <p className="stg:text-[11px] stg:text-muted-foreground">
               New rates govern charges from the moment this revision is applied
               (forward-only; already-billed records keep their stamps).
             </p>
           </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" disabled={isSubmitting} onClick={handleConfirm}>
             {isSubmitting ? "Applying…" : "Apply revision"}
           </Button>
@@ -422,13 +422,13 @@ export function BaselineEditor({
   return (
     <form
       onSubmit={handleReview}
-      className="space-y-3 rounded-lg border border-border bg-card px-3 py-3"
+      className="stg:space-y-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-3 stg:py-3"
     >
-      <h4 className="text-xs font-semibold text-foreground">
+      <h4 className="stg:text-xs stg:font-semibold stg:text-foreground">
         {initial ? `Edit ${initial.modelId}` : "Add model"}
       </h4>
 
-      <div className="grid grid-cols-2 gap-2">
+      <div className="stg:grid stg:grid-cols-2 stg:gap-2">
         <Field label="Model id" required>
           <input
             className={INPUT_CLASSES}
@@ -516,7 +516,7 @@ export function BaselineEditor({
         </Field>
       </div>
 
-      <label className="flex cursor-pointer items-center gap-1.5 text-xs text-foreground">
+      <label className="stg:flex stg:cursor-pointer stg:items-center stg:gap-1.5 stg:text-xs stg:text-foreground">
         <input
           type="checkbox"
           checked={form.featured}
@@ -526,11 +526,11 @@ export function BaselineEditor({
         Featured (appears in the curated default picker list)
       </label>
 
-      <fieldset className="space-y-2">
-        <legend className="text-xs font-medium text-foreground">
+      <fieldset className="stg:space-y-2">
+        <legend className="stg:text-xs stg:font-medium stg:text-foreground">
           Rates ($ per million tokens)
         </legend>
-        <div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
+        <div className="stg:grid stg:grid-cols-2 stg:gap-2 stg:sm:grid-cols-5">
           <RateField label="Input" value={form.input} disabled={isSubmitting} onChange={(v) => set("input", v)} />
           <RateField label="Output" value={form.output} disabled={isSubmitting} onChange={(v) => set("output", v)} />
           <RateField label="Cache write" value={form.cacheWrite} disabled={isSubmitting} onChange={(v) => set("cacheWrite", v)} />
@@ -545,12 +545,12 @@ export function BaselineEditor({
         </div>
       </fieldset>
 
-      <fieldset className="space-y-2">
-        <legend className="text-xs font-medium text-foreground">Pricing variants</legend>
+      <fieldset className="stg:space-y-2">
+        <legend className="stg:text-xs stg:font-medium stg:text-foreground">Pricing variants</legend>
         {form.variants.map((variant, index) => (
-          <div key={index} className="space-y-2 rounded-md border border-border-muted px-2.5 py-2">
-            <div className="flex items-end gap-2">
-              <Field label="Variant key" className="w-32">
+          <div key={index} className="stg:space-y-2 stg:rounded-md stg:border stg:border-border-muted stg:px-2.5 stg:py-2">
+            <div className="stg:flex stg:items-end stg:gap-2">
+              <Field label="Variant key" className="stg:w-32">
                 <input
                   className={INPUT_CLASSES}
                   value={variant.key}
@@ -559,7 +559,7 @@ export function BaselineEditor({
                   disabled={isSubmitting}
                 />
               </Field>
-              <Field label="Wire ids (comma-separated)" className="flex-1">
+              <Field label="Wire ids (comma-separated)" className="stg:flex-1">
                 <input
                   className={INPUT_CLASSES}
                   value={variant.wireIds}
@@ -582,7 +582,7 @@ export function BaselineEditor({
                 Remove
               </Button>
             </div>
-            <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <div className="stg:grid stg:grid-cols-2 stg:gap-2 stg:sm:grid-cols-4">
               <RateField label="Input" value={variant.input} disabled={isSubmitting} onChange={(v) => updateVariant(setForm, index, { input: v })} />
               <RateField label="Output" value={variant.output} disabled={isSubmitting} onChange={(v) => updateVariant(setForm, index, { output: v })} />
               <RateField label="Cache write" value={variant.cacheWrite} disabled={isSubmitting} onChange={(v) => updateVariant(setForm, index, { cacheWrite: v })} />
@@ -619,16 +619,16 @@ export function BaselineEditor({
       </Field>
 
       {validationErrors.length > 0 && (
-        <div role="alert" className="space-y-0.5">
+        <div role="alert" className="stg:space-y-0.5">
           {validationErrors.map((message) => (
-            <p key={message} className="text-destructive text-xs">
+            <p key={message} className="stg:text-destructive stg:text-xs">
               {message}
             </p>
           ))}
         </div>
       )}
 
-      <div className="flex gap-2">
+      <div className="stg:flex stg:gap-2">
         <Button size="sm" type="submit" disabled={isSubmitting}>
           Review changes
         </Button>

package/src/pricing-governance/ModelCatalogPanel.tsx

@@ -108,10 +108,10 @@ export function ModelCatalogPanel({ className }: ModelCatalogPanelProps) {
 
   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>
     );
@@ -124,18 +124,18 @@ export function ModelCatalogPanel({ className }: ModelCatalogPanelProps) {
       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>
     );
   }
 
   return (
-    <section className={cn("space-y-3", className)} aria-label="Model catalog">
-      <div className="flex items-center justify-between">
-        <h3 className="text-xs font-semibold text-foreground">Model Catalog</h3>
-        <div className="flex items-center gap-3">
-          <label className="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted-foreground">
+    <section className={cn("stg:space-y-3", className)} aria-label="Model catalog">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-foreground">Model Catalog</h3>
+        <div className="stg:flex stg:items-center stg:gap-3">
+          <label className="stg:flex stg:cursor-pointer stg:items-center stg:gap-1.5 stg:text-[11px] stg:text-muted-foreground">
             <input
               type="checkbox"
               checked={showHistory}
@@ -172,20 +172,20 @@ export function ModelCatalogPanel({ className }: ModelCatalogPanelProps) {
         />
       )}
 
-      <div className="rounded-lg border border-border bg-card" role="table" aria-label="Baseline catalog">
+      <div className="stg:rounded-lg stg:border stg:border-border stg:bg-card" role="table" aria-label="Baseline catalog">
         <div
           role="row"
-          className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] 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_auto] 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">Variants</span>
-          <span role="columnheader" className="sr-only">Actions</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">Variants</span>
+          <span role="columnheader" className="stg:sr-only">Actions</span>
         </div>
         {activeBaselines.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">
             The catalog is empty — has the baseline seed migration run?
           </p>
         ) : (
@@ -226,33 +226,33 @@ function CatalogRow({
 }) {
   const variantCount = Object.keys(baseline.pricingVariants).length;
   return (
-    <div className="border-b border-border last:border-b-0">
+    <div className="stg:border-b stg:border-border stg:last:border-b-0">
       <div
         role="row"
-        className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] items-center gap-2 px-3 py-2 text-xs"
+        className="stg:grid stg:grid-cols-[2fr_1fr_1fr_1fr_1fr_auto] stg:items-center stg:gap-2 stg:px-3 stg:py-2 stg:text-xs"
       >
-        <span role="cell" className="min-w-0">
-          <span className="block truncate font-medium text-foreground" title={baseline.modelId}>
+        <span role="cell" 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 role="cell" className="text-muted-foreground">
+        <span role="cell" className="stg:text-muted-foreground">
           {baseline.harness}
         </span>
-        <span role="cell" className="text-right text-foreground">
+        <span role="cell" className="stg:text-right stg:text-foreground">
           {formatRate(baseline.pricing?.inputPriceMicrosPerMillion ?? ZERO)}
         </span>
-        <span role="cell" className="text-right text-foreground">
+        <span role="cell" className="stg:text-right stg:text-foreground">
           {formatRate(baseline.pricing?.outputPriceMicrosPerMillion ?? ZERO)}
         </span>
-        <span role="cell" className="text-right text-muted-foreground">
+        <span role="cell" className="stg:text-right stg:text-muted-foreground">
           {variantCount > 0 ? variantCount : "—"}
         </span>
-        <span role="cell" className="flex shrink-0 justify-end gap-2">
+        <span role="cell" className="stg:flex stg:shrink-0 stg:justify-end stg:gap-2">
           <Button size="sm" variant="outline" disabled={disabled} onClick={onEdit}>
             Edit
           </Button>
@@ -262,9 +262,9 @@ function CatalogRow({
         </span>
       </div>
       {history && history.length > 0 && (
-        <div className="space-y-1 px-3 pb-2">
+        <div className="stg:space-y-1 stg:px-3 stg:pb-2">
           {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"}