@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/pricing-governance/PricingGovernancePanel.tsx

@@ -5,6 +5,7 @@ import { getUserMessage, isPermissionDenied } from "@stigmer/sdk";
 import type {
   ModelPricingGovernanceEntry,
 } from "@stigmer/protos/ai/stigmer/billing/v1/io_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
 import { GovernanceBadge, PendingOverrideCard, RateCell } from "./governance-primitives.js";
 import { usePricingGovernance } from "./usePricingGovernance.js";
@@ -41,10 +42,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 +58,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 +78,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 +107,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 +140,20 @@ 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"
-            title={entry.modelId}>
-        {entry.displayName || entry.modelId}
-      </span>
-      <span role="cell" className="text-muted-foreground">{entry.harness}</span>
+         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">
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span role="cell" className="stg:truncate stg:font-medium stg:text-foreground" />
+          }
+        >
+          {entry.displayName || entry.modelId}
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {entry.modelId}
+        </TooltipContent>
+      </Tooltip>
+      <span role="cell" className="stg:text-muted-foreground">{entry.harness}</span>
       <RateCell
         role="cell"
         baseline={entry.baselineInputMicrosPerMillion}
@@ -155,7 +164,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/__tests__/ModelCatalogPanel.test.tsx

@@ -53,6 +53,7 @@ function sonnetBaseline(overrides: Record<string, unknown> = {}) {
     costTier: "standard",
     speedTier: "fast",
     featured: true,
+    wireIds: ["claude-sonnet-4-6-preview"],
     status: ModelPricingBaselineStatus.pricing_baseline_active,
     pricing: create(PricingBlockSchema, {
       inputPriceMicrosPerMillion: 3_000_000n,
@@ -169,6 +170,42 @@ describe("ModelCatalogPanel", () => {
     expect(submitted.baseline.pricingVariants.fast.wireIds).toEqual([
       "claude-sonnet-4-6-fast",
     ]);
+    // Base-level wire ids survive an unrelated edit — the form surfaces
+    // them precisely so a price edit can never silently erase them.
+    expect(submitted.baseline.wireIds).toEqual(["claude-sonnet-4-6-preview"]);
+  });
+
+  it("edits base-level wire ids and submits the parsed list", async () => {
+    const user = userEvent.setup();
+    const upsertModelPricingBaseline = vi.fn().mockResolvedValue(sonnetBaseline());
+    const client = createMockStigmer({
+      listModelPricingBaselines: vi
+        .fn()
+        .mockResolvedValue({ baselines: [sonnetBaseline()] }),
+      upsertModelPricingBaseline,
+    });
+
+    render(<ModelCatalogPanel />, { wrapper: wrapper(client) });
+    await user.click(await screen.findByRole("button", { name: "Edit" }));
+
+    // The base "Wire ids" field comes before the variant's in DOM order.
+    const wireIdsField = screen.getAllByLabelText("Wire ids (comma-separated)")[0];
+    await user.clear(wireIdsField);
+    await user.type(
+      wireIdsField,
+      "claude-sonnet-4-6-preview, accounts/fireworks/models/sonnet-4p6",
+    );
+    await user.click(screen.getByRole("button", { name: "Review changes" }));
+
+    // Alias-only edits move no rates — the confirm step says so.
+    expect(await screen.findByText(/No rate changes/)).toBeTruthy();
+    await user.click(screen.getByRole("button", { name: "Apply revision" }));
+    await waitFor(() => expect(upsertModelPricingBaseline).toHaveBeenCalledTimes(1));
+
+    expect(upsertModelPricingBaseline.mock.calls[0][0].baseline.wireIds).toEqual([
+      "claude-sonnet-4-6-preview",
+      "accounts/fireworks/models/sonnet-4p6",
+    ]);
   });
 
   it("rejects invalid rates client-side before any RPC", async () => {

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"}

package/src/resource-creation/CreationPicker.tsx

@@ -95,22 +95,22 @@ export function CreationPicker<TData>({
 
   if (view === "gallery") {
     return (
-      <div className={cn("flex flex-col gap-4", className)}>
-        <div className="flex items-center gap-2">
+      <div className={cn("stg:flex stg:flex-col stg:gap-4", className)}>
+        <div className="stg:flex stg:items-center stg:gap-2">
           <button
             type="button"
             onClick={handleBackToOptions}
             aria-label="Back to creation options"
             className={cn(
-              "inline-flex items-center justify-center rounded-md p-1.5",
-              "text-muted-foreground transition-colors",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:inline-flex stg:items-center stg:justify-center stg:rounded-md stg:p-1.5",
+              "stg:text-muted-foreground stg:transition-colors",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             <BackArrowIcon />
           </button>
-          <h2 className="text-base font-semibold text-foreground">
+          <h2 className="stg:text-base stg:font-semibold stg:text-foreground">
             Choose a template
           </h2>
         </div>
@@ -123,17 +123,17 @@ export function CreationPicker<TData>({
   }
 
   return (
-    <div className={cn("flex flex-col gap-6", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-6", className)}>
       <div>
-        <h2 className="text-lg font-semibold text-foreground">
+        <h2 className="stg:text-lg stg:font-semibold stg:text-foreground">
           Create a new {resourceLabel}
         </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
+        <p className="stg:mt-1 stg:text-sm stg:text-muted-foreground">
           Choose how you'd like to get started.
         </p>
       </div>
 
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+      <div className="stg:grid stg:grid-cols-1 stg:gap-3 stg:sm:grid-cols-3">
         {/* Start from scratch */}
         <OptionCard
           title="Start from scratch"
@@ -194,20 +194,20 @@ function OptionCard({
       onClick={onClick}
       data-cursor-target={cursorTarget}
       className={cn(
-        "group flex flex-col items-center gap-3 rounded-lg border border-border bg-card p-6 text-center",
-        "transition-colors hover:border-primary hover:bg-accent",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:group stg:flex stg:flex-col stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-6 stg:text-center",
+        "stg:transition-colors stg:hover:border-primary stg:hover:bg-accent",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
       )}
     >
-      <span className="text-muted-foreground transition-colors group-hover:text-foreground">
+      <span className="stg:text-muted-foreground stg:transition-colors stg:group-hover:text-foreground">
         {icon}
       </span>
-      <div className="flex flex-col gap-1">
-        <span className="text-sm font-medium text-foreground">{title}</span>
-        <span className="text-xs text-muted-foreground">{description}</span>
+      <div className="stg:flex stg:flex-col stg:gap-1">
+        <span className="stg:text-sm stg:font-medium stg:text-foreground">{title}</span>
+        <span className="stg:text-xs stg:text-muted-foreground">{description}</span>
       </div>
       {badge && (
-        <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+        <span className="stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-muted-foreground">
           {badge}
         </span>
       )}
@@ -222,7 +222,7 @@ function OptionCard({
 function BlankPageIcon() {
   return (
     <svg
-      className="size-8"
+      className="stg:size-8"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
@@ -241,7 +241,7 @@ function BlankPageIcon() {
 function GridIcon() {
   return (
     <svg
-      className="size-8"
+      className="stg:size-8"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
@@ -262,7 +262,7 @@ function GridIcon() {
 function UploadIcon() {
   return (
     <svg
-      className="size-8"
+      className="stg:size-8"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
@@ -282,7 +282,7 @@ function UploadIcon() {
 function BackArrowIcon() {
   return (
     <svg
-      className="size-4"
+      className="stg:size-4"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"

package/src/resource-creation/StepIndicator.tsx

@@ -35,22 +35,22 @@ export function StepIndicator({
   return (
     <nav
       aria-label="Wizard progress"
-      className={cn("flex flex-col gap-1", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-1", className)}
     >
-      <ol className="flex flex-col gap-1" role="list">
+      <ol className="stg:flex stg:flex-col stg:gap-1" role="list">
         {steps.map((step, index) => {
           const state = getStepState(index, currentStepIndex);
           const isClickable = state === "completed" && onStepClick != null;
 
           const content = (
-            <div className="flex items-center gap-3">
+            <div className="stg:flex stg:items-center stg:gap-3">
               <StepCircle index={index} state={state} />
               <span
                 className={cn(
-                  "text-sm font-medium transition-colors",
-                  state === "active" && "text-foreground",
-                  state === "completed" && "text-foreground",
-                  state === "pending" && "text-muted-foreground",
+                  "stg:text-sm stg:font-medium stg:transition-colors",
+                  state === "active" && "stg:text-foreground",
+                  state === "completed" && "stg:text-foreground",
+                  state === "pending" && "stg:text-muted-foreground",
                 )}
               >
                 {step.label}
@@ -65,9 +65,9 @@ export function StepIndicator({
                   type="button"
                   onClick={() => onStepClick(index)}
                   className={cn(
-                    "w-full rounded-md px-2 py-2 text-left transition-colors",
-                    "hover:bg-accent-hover",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                    "stg:w-full stg:rounded-md stg:px-2 stg:py-2 stg:text-left stg:transition-colors",
+                    "stg:hover:bg-accent-hover",
+                    "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
                   )}
                   aria-label={`Go back to step ${index + 1}: ${step.label}`}
                   aria-current={undefined}
@@ -76,7 +76,7 @@ export function StepIndicator({
                 </button>
               ) : (
                 <div
-                  className="px-2 py-2"
+                  className="stg:px-2 stg:py-2"
                   aria-current={state === "active" ? "step" : undefined}
                 >
                   {content}
@@ -84,7 +84,7 @@ export function StepIndicator({
               )}
               {index < steps.length - 1 && (
                 <div
-                  className="ml-[18px] h-4 w-px bg-border"
+                  className="stg:ml-[18px] stg:h-4 stg:w-px stg:bg-border"
                   aria-hidden="true"
                 />
               )}
@@ -118,15 +118,15 @@ function StepCircle({
   return (
     <div
       className={cn(
-        "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-colors",
-        state === "completed" && "bg-primary text-primary-foreground",
-        state === "active" && "border-2 border-primary text-primary",
-        state === "pending" && "border border-border text-muted-foreground",
+        "stg:flex stg:size-7 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:text-xs stg:font-medium stg:transition-colors",
+        state === "completed" && "stg:bg-primary stg:text-primary-foreground",
+        state === "active" && "stg:border-2 stg:border-primary stg:text-primary",
+        state === "pending" && "stg:border stg:border-border stg:text-muted-foreground",
       )}
       aria-hidden="true"
     >
       {state === "completed" ? (
-        <CheckIcon className="size-3.5" />
+        <CheckIcon className="stg:size-3.5" />
       ) : (
         <span>{index + 1}</span>
       )}

package/src/resource-creation/TemplateCard.tsx

@@ -24,13 +24,13 @@ export interface TemplateCardProps<TData> {
 // ---------------------------------------------------------------------------
 
 const CATEGORY_COLORS: Record<TemplateCategory, string> = {
-  "customer-support": "bg-blue-500/10 text-blue-700 dark:text-blue-400",
-  "code-review": "bg-violet-500/10 text-violet-700 dark:text-violet-400",
-  "data-analysis": "bg-amber-500/10 text-amber-700 dark:text-amber-400",
-  devops: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
-  content: "bg-pink-500/10 text-pink-700 dark:text-pink-400",
-  integration: "bg-cyan-500/10 text-cyan-700 dark:text-cyan-400",
-  general: "bg-muted text-muted-foreground",
+  "customer-support": "stg:bg-blue-500/10 stg:text-blue-700 stg:dark:text-blue-400",
+  "code-review": "stg:bg-violet-500/10 stg:text-violet-700 stg:dark:text-violet-400",
+  "data-analysis": "stg:bg-amber-500/10 stg:text-amber-700 stg:dark:text-amber-400",
+  devops: "stg:bg-emerald-500/10 stg:text-emerald-700 stg:dark:text-emerald-400",
+  content: "stg:bg-pink-500/10 stg:text-pink-700 stg:dark:text-pink-400",
+  integration: "stg:bg-cyan-500/10 stg:text-cyan-700 stg:dark:text-cyan-400",
+  general: "stg:bg-muted stg:text-muted-foreground",
 };
 
 // ---------------------------------------------------------------------------
@@ -38,13 +38,13 @@ const CATEGORY_COLORS: Record<TemplateCategory, string> = {
 // ---------------------------------------------------------------------------
 
 const AVATAR_COLORS = [
-  "bg-blue-500/15 text-blue-700 dark:text-blue-400",
-  "bg-violet-500/15 text-violet-700 dark:text-violet-400",
-  "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400",
-  "bg-amber-500/15 text-amber-700 dark:text-amber-400",
-  "bg-pink-500/15 text-pink-700 dark:text-pink-400",
-  "bg-cyan-500/15 text-cyan-700 dark:text-cyan-400",
-  "bg-rose-500/15 text-rose-700 dark:text-rose-400",
+  "stg:bg-blue-500/15 stg:text-blue-700 stg:dark:text-blue-400",
+  "stg:bg-violet-500/15 stg:text-violet-700 stg:dark:text-violet-400",
+  "stg:bg-emerald-500/15 stg:text-emerald-700 stg:dark:text-emerald-400",
+  "stg:bg-amber-500/15 stg:text-amber-700 stg:dark:text-amber-400",
+  "stg:bg-pink-500/15 stg:text-pink-700 stg:dark:text-pink-400",
+  "stg:bg-cyan-500/15 stg:text-cyan-700 stg:dark:text-cyan-400",
+  "stg:bg-rose-500/15 stg:text-rose-700 stg:dark:text-rose-400",
 ] as const;
 
 function hashCode(str: string): number {
@@ -104,17 +104,17 @@ export function TemplateCard<TData>({
       onKeyDown={handleKeyDown}
       aria-label={`Use ${template.name} template`}
       className={cn(
-        "group flex cursor-pointer flex-col gap-3 rounded-lg border border-border bg-card p-4",
-        "transition-colors hover:border-primary hover:bg-accent",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:group stg:flex stg:cursor-pointer stg:flex-col stg:gap-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4",
+        "stg:transition-colors stg:hover:border-primary stg:hover:bg-accent",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         className,
       )}
     >
-      <div className="flex items-start gap-3">
+      <div className="stg:flex stg:items-start stg:gap-3">
         {/* Initial avatar */}
         <span
           className={cn(
-            "inline-flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-semibold",
+            "stg:inline-flex stg:size-9 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-md stg:text-sm stg:font-semibold",
             avatarColor,
           )}
           aria-hidden="true"
@@ -122,11 +122,11 @@ export function TemplateCard<TData>({
           {initial}
         </span>
 
-        <div className="min-w-0 flex-1">
-          <p className="text-sm font-medium text-foreground">{template.name}</p>
+        <div className="stg:min-w-0 stg:flex-1">
+          <p className="stg:text-sm stg:font-medium stg:text-foreground">{template.name}</p>
           <span
             className={cn(
-              "mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-medium",
+              "stg:mt-1 stg:inline-block stg:rounded-full stg:px-2 stg:py-0.5 stg:text-[10px] stg:font-medium",
               CATEGORY_COLORS[template.category] ?? CATEGORY_COLORS.general,
             )}
           >
@@ -135,7 +135,7 @@ export function TemplateCard<TData>({
         </div>
       </div>
 
-      <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+      <p className="stg:line-clamp-2 stg:text-xs stg:leading-relaxed stg:text-muted-foreground">
         {template.description}
       </p>
     </div>

package/src/resource-creation/TemplateGallery.tsx

@@ -102,9 +102,9 @@ export function TemplateGallery<TData>({
   }, []);
 
   return (
-    <div className={cn("flex flex-col gap-4", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-4", className)}>
       {/* Search input */}
-      <div className="relative">
+      <div className="stg:relative">
         <SearchIcon />
         <input
           type="search"
@@ -113,9 +113,9 @@ export function TemplateGallery<TData>({
           placeholder="Search templates…"
           aria-label="Search templates"
           className={cn(
-            "w-full rounded-md border border-input bg-input-bg py-2 pl-9 pr-3 text-sm text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-input-bg stg:py-2 stg:pl-9 stg:pr-3 stg:text-sm stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         />
       </div>
@@ -127,7 +127,7 @@ export function TemplateGallery<TData>({
           role="tablist"
           aria-label="Template categories"
           onKeyDown={handleTabKeyDown}
-          className="flex flex-wrap gap-1"
+          className="stg:flex stg:flex-wrap stg:gap-1"
         >
           <CategoryTab
             label="All"
@@ -150,7 +150,7 @@ export function TemplateGallery<TData>({
         <div
           role="list"
           aria-label="Templates"
-          className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+          className="stg:grid stg:grid-cols-1 stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-3"
         >
           {filtered.map((template) => (
             <div key={template.id} role="listitem">
@@ -160,7 +160,7 @@ export function TemplateGallery<TData>({
         </div>
       ) : (
         (emptyContent ?? (
-          <div className="py-8 text-center text-sm text-muted-foreground">
+          <div className="stg:py-8 stg:text-center stg:text-sm stg:text-muted-foreground">
             No templates match your search.
           </div>
         ))
@@ -190,11 +190,11 @@ function CategoryTab({
       tabIndex={isActive ? 0 : -1}
       onClick={onClick}
       className={cn(
-        "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         isActive
-          ? "bg-primary text-primary-foreground"
-          : "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          ? "stg:bg-primary stg:text-primary-foreground"
+          : "stg:bg-muted stg:text-muted-foreground stg:hover:bg-accent stg:hover:text-accent-foreground",
       )}
     >
       {label}
@@ -205,7 +205,7 @@ function CategoryTab({
 function SearchIcon() {
   return (
     <svg
-      className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+      className="stg:pointer-events-none stg:absolute stg:left-3 stg:top-1/2 stg:size-4 stg:-translate-y-1/2 stg:text-muted-foreground"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"