@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/platform-client/PlatformClientListPanel.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { usePlatformClientList } from "./usePlatformClientList.js";
 import { useDeletePlatformClient } from "./useDeletePlatformClient.js";
 
@@ -64,14 +65,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 +81,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 +91,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 +102,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 +170,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 +208,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,53 +223,62 @@ 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"
-            title={`Secret fingerprint: ${fingerprint}`}
-          >
-            ••••{fingerprint.slice(-4)}
-          </span>
+          <Tooltip>
+            <TooltipTrigger render={<span className="stg:font-mono" />}>
+              ••••{fingerprint.slice(-4)}
+            </TooltipTrigger>
+            <TooltipContent side="top" className="stg:break-all">
+              {`Secret fingerprint: ${fingerprint}`}
+            </TooltipContent>
+          </Tooltip>
         )}
         <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>
         )}
         {createdAt && (
-          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
-            {formatShortDate(timestampDate(createdAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={<time dateTime={timestampDate(createdAt).toISOString()} />}
+            >
+              {formatShortDate(timestampDate(createdAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Created ${timestampDate(createdAt).toISOString()}`}
+            </TooltipContent>
+          </Tooltip>
         )}
       </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 +289,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,22 +308,29 @@ 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) {
     const date = timestampDate(spec.expiresAt);
     const isExpired = date < new Date();
     return (
-      <span
-        className={cn(
-          "text-[0.65rem]",
-          isExpired ? "text-destructive font-medium" : "text-muted-foreground",
-        )}
-        title={`Expires ${date.toISOString()}`}
-      >
-        {isExpired ? "Expired" : `Exp ${formatShortDate(date)}`}
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <time
+              dateTime={date.toISOString()}
+              className={cn(
+                "stg:text-[0.65rem]",
+                isExpired ? "stg:text-destructive stg:font-medium" : "stg:text-muted-foreground",
+              )}
+            />
+          }
+        >
+          {isExpired ? "Expired" : `Exp ${formatShortDate(date)}`}
+        </TooltipTrigger>
+        <TooltipContent side="top">{`Expires ${date.toISOString()}`}</TooltipContent>
+      </Tooltip>
     );
   }
   return null;
@@ -347,7 +364,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 +421,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

@@ -86,6 +86,8 @@ interface CatalogForm {
   readonly speedTier: string;
   readonly costTier: string;
   readonly featured: boolean;
+  /** Comma-separated base-level wire ids (inbound aliases). */
+  readonly wireIds: string;
   readonly input: string;
   readonly output: string;
   readonly cacheWrite: string;
@@ -105,6 +107,7 @@ const EMPTY_FORM: CatalogForm = {
   speedTier: "fast",
   costTier: "standard",
   featured: false,
+  wireIds: "",
   input: "",
   output: "",
   cacheWrite: "0",
@@ -126,6 +129,7 @@ function formFromBaseline(baseline: ModelPricingBaseline): CatalogForm {
     speedTier: baseline.speedTier || "fast",
     costTier: baseline.costTier || "standard",
     featured: baseline.featured,
+    wireIds: baseline.wireIds.join(", "),
     input: microsToDollarString(pricing?.inputPriceMicrosPerMillion ?? ZERO),
     output: microsToDollarString(pricing?.outputPriceMicrosPerMillion ?? ZERO),
     cacheWrite: microsToDollarString(pricing?.cacheWritePriceMicrosPerMillion ?? ZERO),
@@ -212,6 +216,10 @@ function buildBaseline(
     speedTier: form.speedTier,
     costTier: form.costTier,
     featured: form.featured,
+    wireIds: form.wireIds
+      .split(",")
+      .map((w) => w.trim())
+      .filter((w) => w !== ""),
     pricing: create(PricingBlockSchema, {
       inputPriceMicrosPerMillion: input,
       outputPriceMicrosPerMillion: output,
@@ -368,40 +376,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 +430,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 +524,19 @@ export function BaselineEditor({
         </Field>
       </div>
 
-      <label className="flex cursor-pointer items-center gap-1.5 text-xs text-foreground">
+      {/* Inbound aliases, editable on existing entries (unlike identity):
+          adding an alias to a live model is this field's primary use. */}
+      <Field label="Wire ids (comma-separated)">
+        <input
+          className={INPUT_CLASSES}
+          value={form.wireIds}
+          onChange={(e) => set("wireIds", e.target.value)}
+          placeholder="e.g. gemini-3-flash-preview"
+          disabled={isSubmitting}
+        />
+      </Field>
+
+      <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 +546,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 +565,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 +579,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 +602,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 +639,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>