@stigmer/react 3.9.0 → 3.11.0

package/src/datastore/CollectionSchemaView.tsx

@@ -37,7 +37,7 @@ export interface CollectionSchemaViewProps {
  */
 export function CollectionSchemaView({ spec, className }: CollectionSchemaViewProps) {
   return (
-    <div className={cn("flex flex-col gap-6", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-6", className)}>
       <AuthorizationSummary authorization={spec.authorization} timezone={spec.timezone} />
       {spec.collections.map((coll) => (
         <CollectionSchema key={coll.name} collection={coll} />
@@ -63,44 +63,44 @@ function AuthorizationSummary({
 
   return (
     <Section title="Authorization">
-      <div className="flex flex-col gap-3 p-3 text-sm">
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs font-medium text-muted-foreground">Roles</span>
+      <div className="stg:flex stg:flex-col stg:gap-3 stg:p-3 stg:text-sm">
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2">
+          <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">Roles</span>
           {roles.length === 0 ? (
-            <span className="text-xs text-muted-foreground">none declared</span>
+            <span className="stg:text-xs stg:text-muted-foreground">none declared</span>
           ) : (
             roles.map((r) => (
               <span
                 key={r.name}
-                className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground"
+                className="stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:text-foreground"
               >
                 {r.name}
               </span>
             ))
           )}
         </div>
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-xs font-medium text-muted-foreground">Default role</span>
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2">
+          <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">Default role</span>
           {defaultRole ? (
-            <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground">
+            <span className="stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:text-foreground">
               {defaultRole}
             </span>
           ) : (
-            <span className="text-xs text-muted-foreground">
+            <span className="stg:text-xs stg:text-muted-foreground">
               none — unbound callers are denied
             </span>
           )}
         </div>
         {bindings.length > 0 && (
-          <div className="flex flex-col gap-1">
-            <span className="text-xs font-medium text-muted-foreground">
+          <div className="stg:flex stg:flex-col stg:gap-1">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Bindings ({bindings.length})
             </span>
-            <ul className="flex flex-col gap-0.5">
+            <ul className="stg:flex stg:flex-col stg:gap-0.5">
               {bindings.map((b, i) => (
-                <li key={i} className="text-xs text-foreground">
-                  <code className="font-mono">{formatSubject(b.subject)}</code>
-                  <span className="text-muted-foreground"> → </span>
+                <li key={i} className="stg:text-xs stg:text-foreground">
+                  <code className="stg:font-mono">{formatSubject(b.subject)}</code>
+                  <span className="stg:text-muted-foreground"> → </span>
                   {b.role}
                 </li>
               ))}
@@ -108,9 +108,9 @@ function AuthorizationSummary({
           </div>
         )}
         {timezone && (
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-medium text-muted-foreground">Timezone</span>
-            <span className="text-xs text-foreground">{timezone}</span>
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">Timezone</span>
+            <span className="stg:text-xs stg:text-foreground">{timezone}</span>
           </div>
         )}
       </div>
@@ -178,63 +178,63 @@ function CollectionSchema({ collection }: { readonly collection: CollectionDecla
 
   return (
     <Section title={collection.name} count={collection.fields.length}>
-      <div className="flex flex-col">
+      <div className="stg:flex stg:flex-col">
         {collection.description && (
-          <p className="border-b border-border px-3 py-2 text-xs text-muted-foreground">
+          <p className="stg:border-b stg:border-border stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">
             {collection.description}
           </p>
         )}
 
-        <table className="w-full text-left text-xs">
+        <table className="stg:w-full stg:text-left stg:text-xs">
           <thead>
-            <tr className="border-b border-border text-muted-foreground">
-              <th scope="col" className="px-3 py-2 font-medium">Field</th>
-              <th scope="col" className="px-3 py-2 font-medium">Type</th>
-              <th scope="col" className="px-3 py-2 font-medium">Required</th>
-              <th scope="col" className="px-3 py-2 font-medium">Default</th>
-              <th scope="col" className="px-3 py-2 font-medium">Description</th>
+            <tr className="stg:border-b stg:border-border stg:text-muted-foreground">
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Field</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Type</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Required</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Default</th>
+              <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Description</th>
             </tr>
           </thead>
           <tbody>
             {collection.fields.map((f) => (
-              <tr key={f.name} className="border-b border-border last:border-b-0">
-                <td className="px-3 py-2 font-mono text-foreground">{f.name}</td>
-                <td className="px-3 py-2 text-foreground">
+              <tr key={f.name} className="stg:border-b stg:border-border stg:last:border-b-0">
+                <td className="stg:px-3 stg:py-2 stg:font-mono stg:text-foreground">{f.name}</td>
+                <td className="stg:px-3 stg:py-2 stg:text-foreground">
                   {FieldType[f.type]}
                   {f.enumValues.length > 0 && (
-                    <span className="text-muted-foreground">
+                    <span className="stg:text-muted-foreground">
                       {" "}
                       ({f.enumValues.join(" | ")})
                     </span>
                   )}
                 </td>
-                <td className="px-3 py-2 text-muted-foreground">{f.required ? "yes" : ""}</td>
-                <td className="px-3 py-2 font-mono text-muted-foreground">
+                <td className="stg:px-3 stg:py-2 stg:text-muted-foreground">{f.required ? "yes" : ""}</td>
+                <td className="stg:px-3 stg:py-2 stg:font-mono stg:text-muted-foreground">
                   {f.default !== undefined
                     ? formatFieldValue(f.type, toJson(ValueSchema, f.default))
                     : ""}
                 </td>
-                <td className="px-3 py-2 text-muted-foreground">{f.description}</td>
+                <td className="stg:px-3 stg:py-2 stg:text-muted-foreground">{f.description}</td>
               </tr>
             ))}
           </tbody>
         </table>
 
         {constraints.length > 0 && (
-          <div className="border-t border-border">
-            <h4 className="px-3 pt-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          <div className="stg:border-t stg:border-border">
+            <h4 className="stg:px-3 stg:pt-2 stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
               Constraints
             </h4>
-            <ul className="flex flex-col gap-1 p-3">
+            <ul className="stg:flex stg:flex-col stg:gap-1 stg:p-3">
               {constraints.map((c) => (
-                <li key={`${c.kind}:${c.name}`} className="flex flex-wrap items-baseline gap-2 text-xs">
-                  <span className="rounded bg-muted px-1.5 py-0.5 font-medium text-muted-foreground">
+                <li key={`${c.kind}:${c.name}`} className="stg:flex stg:flex-wrap stg:items-baseline stg:gap-2 stg:text-xs">
+                  <span className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-medium stg:text-muted-foreground">
                     {c.kind}
                   </span>
-                  <code className="font-mono text-foreground">{c.name}</code>
-                  {c.fields && <span className="text-muted-foreground">({c.fields})</span>}
+                  <code className="stg:font-mono stg:text-foreground">{c.name}</code>
+                  {c.fields && <span className="stg:text-muted-foreground">({c.fields})</span>}
                   {c.message && (
-                    <span className="text-muted-foreground">— “{c.message}”</span>
+                    <span className="stg:text-muted-foreground">— “{c.message}”</span>
                   )}
                 </li>
               ))}

package/src/datastore/DatastoreDetailView.tsx

@@ -87,7 +87,7 @@ export function DatastoreDetailView({
     org: meta?.org,
     slug: meta?.slug,
     description: spec?.description,
-    icon: <DatastoreIcon className="size-6 text-muted-foreground" />,
+    icon: <DatastoreIcon className="stg:size-6 stg:text-muted-foreground" />,
     createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
     updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
   };
@@ -107,7 +107,7 @@ export function DatastoreDetailView({
       className={className}
     >
       {tab === "overview" ? (
-        <div className="flex flex-col gap-6">
+        <div className="stg:flex stg:flex-col stg:gap-6">
           {status && <DatastoreSyncReport status={status} />}
           {spec && <CollectionSchemaView spec={spec} />}
         </div>
@@ -132,28 +132,28 @@ export function DatastoreDetailView({
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
     <div
-      className={cn("flex flex-col gap-6", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-6", className)}
       aria-busy="true"
       aria-label="Loading datastore details"
     >
-      <div className="flex items-start gap-3">
-        <div className="mt-1 size-6 shrink-0 animate-pulse rounded bg-muted" />
-        <div className="flex-1 space-y-2">
-          <div className="h-5 w-48 animate-pulse rounded bg-muted" />
-          <div className="h-3 w-64 animate-pulse rounded bg-muted" />
+      <div className="stg:flex stg:items-start stg:gap-3">
+        <div className="stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:flex-1 stg:space-y-2">
+          <div className="stg:h-5 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:h-3 stg:w-64 stg:animate-pulse stg:rounded stg:bg-muted" />
         </div>
       </div>
-      <div className="space-y-2">
-        <div className="h-3 w-28 animate-pulse rounded bg-muted" />
+      <div className="stg:space-y-2">
+        <div className="stg:h-3 stg:w-28 stg:animate-pulse stg:rounded stg:bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted-faint"
+          className="stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint"
           style={{ height: "160px" }}
         />
       </div>
-      <div className="space-y-2">
-        <div className="h-3 w-20 animate-pulse rounded bg-muted" />
+      <div className="stg:space-y-2">
+        <div className="stg:h-3 stg:w-20 stg:animate-pulse stg:rounded stg:bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted-faint"
+          className="stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint"
           style={{ height: "240px" }}
         />
       </div>
@@ -165,11 +165,11 @@ function NotFoundState({ className }: { readonly className?: string }) {
   return (
     <div
       role="status"
-      className={cn("flex flex-col items-center gap-2 py-12 text-center", className)}
+      className={cn("stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-12 stg:text-center", className)}
     >
-      <DatastoreIcon className="size-10 text-muted-foreground-faint" />
-      <p className="text-sm font-medium text-muted-foreground">Datastore not found</p>
-      <p className="text-xs text-muted-foreground-subtle">
+      <DatastoreIcon className="stg:size-10 stg:text-muted-foreground-faint" />
+      <p className="stg:text-sm stg:font-medium stg:text-muted-foreground">Datastore not found</p>
+      <p className="stg:text-xs stg:text-muted-foreground-subtle">
         This datastore doesn&apos;t exist or you don&apos;t have access to it.
       </p>
     </div>

package/src/datastore/DatastoreSyncReport.tsx

@@ -33,34 +33,34 @@ export function DatastoreSyncReport({ status, className }: DatastoreSyncReportPr
 
   return (
     <Section title="Sync report" className={className}>
-      <div className="flex flex-col">
-        <div className="flex flex-wrap items-center gap-2 border-b border-border px-3 py-2">
+      <div className="stg:flex stg:flex-col">
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2">
           <SyncOutcomeBadge outcome={status.lastSyncOutcome} />
           {syncedAt && (
-            <span className="text-xs text-muted-foreground">last synced {syncedAt}</span>
+            <span className="stg:text-xs stg:text-muted-foreground">last synced {syncedAt}</span>
           )}
         </div>
         {status.collections.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">
             No collections have been synced yet.
           </p>
         ) : (
-          <table className="w-full text-left text-xs">
+          <table className="stg:w-full stg:text-left stg:text-xs">
             <thead>
-              <tr className="border-b border-border text-muted-foreground">
-                <th scope="col" className="px-3 py-2 font-medium">Collection</th>
-                <th scope="col" className="px-3 py-2 font-medium">State</th>
-                <th scope="col" className="px-3 py-2 text-right font-medium">Records</th>
+              <tr className="stg:border-b stg:border-border stg:text-muted-foreground">
+                <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">Collection</th>
+                <th scope="col" className="stg:px-3 stg:py-2 stg:font-medium">State</th>
+                <th scope="col" className="stg:px-3 stg:py-2 stg:text-right stg:font-medium">Records</th>
               </tr>
             </thead>
             <tbody>
               {status.collections.map((coll) => (
-                <tr key={coll.name} className="border-b border-border last:border-b-0">
-                  <td className="px-3 py-2 font-mono text-foreground">{coll.name}</td>
-                  <td className="px-3 py-2">
+                <tr key={coll.name} className="stg:border-b stg:border-border stg:last:border-b-0">
+                  <td className="stg:px-3 stg:py-2 stg:font-mono stg:text-foreground">{coll.name}</td>
+                  <td className="stg:px-3 stg:py-2">
                     <MaterializationBadge state={coll.state} />
                   </td>
-                  <td className="px-3 py-2 text-right tabular-nums text-foreground">
+                  <td className="stg:px-3 stg:py-2 stg:text-right stg:tabular-nums stg:text-foreground">
                     {String(coll.recordCount)}
                   </td>
                 </tr>

package/src/datastore/DeleteDatastoreDialog.tsx

@@ -116,29 +116,29 @@ export function DeleteDatastoreDialog({
       onCancel={handleDialogCancel}
       aria-label={`Delete datastore ${slug}`}
       className={cn(
-        "fixed inset-0 z-50 m-auto w-full max-w-md rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
-        "backdrop:bg-black/50",
-        "open:animate-in open:fade-in-0 open:zoom-in-95",
+        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
+        "stg:backdrop:bg-black/50",
+        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >
-      <div className="flex flex-col gap-4 p-6">
-        <div className="flex flex-col gap-1.5">
-          <h3 className="text-base font-semibold text-foreground">
+      <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
+          <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
             Delete datastore “{slug}”?
           </h3>
           {isEmpty ? (
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               This datastore holds no records. Its declared collections will be
               removed. This cannot be undone.
             </p>
           ) : (
-            <p className="text-sm text-muted-foreground">
+            <p className="stg:text-sm stg:text-muted-foreground">
               “{slug}” holds{" "}
-              <strong className="font-semibold text-foreground">
+              <strong className="stg:font-semibold stg:text-foreground">
                 {String(totalRecords)} record{totalRecords === BigInt(1) ? "" : "s"}
               </strong>{" "}
               across{" "}
-              <strong className="font-semibold text-foreground">
+              <strong className="stg:font-semibold stg:text-foreground">
                 {nonEmptyCollections} collection{nonEmptyCollections === 1 ? "" : "s"}
               </strong>
               . Deleting the datastore destroys them all. This cannot be undone.
@@ -149,15 +149,15 @@ export function DeleteDatastoreDialog({
         {error && (
           <div
             role="alert"
-            className="rounded-md border border-destructive bg-card px-3 py-2 text-sm text-destructive"
+            className="stg:rounded-md stg:border stg:border-destructive stg:bg-card stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
           >
             {getUserMessage(error)}
           </div>
         )}
 
         {!isEmpty && (
-          <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
-            Type <span className="font-mono text-foreground">{slug}</span> to confirm
+          <label className="stg:flex stg:flex-col stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
+            Type <span className="stg:font-mono stg:text-foreground">{slug}</span> to confirm
             <input
               type="text"
               className={FIELD_INPUT_CLASSES}
@@ -170,14 +170,14 @@ export function DeleteDatastoreDialog({
           </label>
         )}
 
-        <div className="flex justify-end gap-2">
+        <div className="stg:flex stg:justify-end stg:gap-2">
           <button
             type="button"
             onClick={() => onOpenChange(false)}
             className={cn(
-              "rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-foreground",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Cancel
@@ -187,10 +187,10 @@ export function DeleteDatastoreDialog({
             onClick={handleDelete}
             disabled={!armed || isDeleting}
             className={cn(
-              "rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground",
-              "hover:bg-destructive-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:bg-destructive stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-destructive-foreground",
+              "stg:hover:bg-destructive-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             {isDeleting ? "Deleting…" : "Delete datastore"}

package/src/datastore/FieldValueControl.tsx

@@ -14,10 +14,10 @@ import {
  * tokens; no pixel font sizes, no hex fallbacks).
  */
 export const FIELD_INPUT_CLASSES = cn(
-  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-  "placeholder:text-muted-foreground",
-  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-  "disabled:pointer-events-none disabled:opacity-50",
+  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+  "stg:placeholder:text-muted-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
 );
 
 /** Props for {@link FieldValueControl}. */
@@ -267,11 +267,11 @@ function JsonControl({ value, onChange, disabled, id, "aria-label": ariaLabel }:
   );
 
   return (
-    <div className="flex flex-col gap-1">
+    <div className="stg:flex stg:flex-col stg:gap-1">
       <textarea
         id={id}
         rows={4}
-        className={cn(FIELD_INPUT_CLASSES, "resize-y font-mono")}
+        className={cn(FIELD_INPUT_CLASSES, "stg:resize-y stg:font-mono")}
         value={raw}
         onChange={handleChange}
         placeholder="{}"
@@ -280,7 +280,7 @@ function JsonControl({ value, onChange, disabled, id, "aria-label": ariaLabel }:
         aria-invalid={parseError !== null}
       />
       {parseError && (
-        <span role="alert" className="text-xs text-destructive">
+        <span role="alert" className="stg:text-xs stg:text-destructive">
           {parseError}
         </span>
       )}

package/src/datastore/RecordFilterBuilder.tsx

@@ -85,12 +85,12 @@ export function RecordFilterBuilder({
     <div
       role="toolbar"
       aria-label="Record filters"
-      className={cn("flex flex-wrap items-center gap-1.5", className)}
+      className={cn("stg:flex stg:flex-wrap stg:items-center stg:gap-1.5", className)}
     >
       {conditions.map((condition, index) => (
         <span
           key={`${condition.field}:${index}`}
-          className="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-foreground"
+          className="stg:inline-flex stg:items-center stg:gap-1 stg:rounded-full stg:border stg:border-border stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
         >
           {formatConditionChip(condition)}
           <button
@@ -98,12 +98,12 @@ export function RecordFilterBuilder({
             onClick={() => removeCondition(index)}
             aria-label={`Remove filter ${formatConditionChip(condition)}`}
             className={cn(
-              "inline-flex size-3.5 items-center justify-center rounded-full text-muted-foreground",
-              "hover:bg-accent hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "stg:inline-flex stg:size-3.5 stg:items-center stg:justify-center stg:rounded-full stg:text-muted-foreground",
+              "stg:hover:bg-accent stg:hover:text-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
             )}
           >
-            <CrossIcon className="size-2.5" />
+            <CrossIcon className="stg:size-2.5" />
           </button>
         </span>
       ))}
@@ -115,8 +115,8 @@ export function RecordFilterBuilder({
           type="button"
           onClick={() => onChange([])}
           className={cn(
-            "text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "stg:text-xs stg:text-muted-foreground stg:underline-offset-2 stg:hover:text-foreground stg:hover:underline",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
           )}
         >
           Clear all
@@ -196,23 +196,23 @@ function AddFilterPopover({
     <Popover.Root open={open} onOpenChange={handleOpenChange}>
       <Popover.Trigger
         className={cn(
-          "inline-flex items-center gap-1 rounded-full border border-dashed border-input px-2 py-0.5 text-xs text-muted-foreground",
-          "hover:border-ring hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-full stg:border stg:border-dashed stg:border-input stg:px-2 stg:py-0.5 stg:text-xs stg:text-muted-foreground",
+          "stg:hover:border-ring stg:hover:text-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
         )}
       >
-        <PlusIcon className="size-3" />
+        <PlusIcon className="stg:size-3" />
         Add filter
       </Popover.Trigger>
       <Popover.Portal container={portalContainer}>
         <Popover.Positioner sideOffset={8} align="start">
           <Popover.Popup
             className={cn(
-              "z-popover w-72 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-md",
-              "flex flex-col gap-2",
+              "stg:z-popover stg:w-72 stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-3 stg:text-popover-foreground stg:shadow-md",
+              "stg:flex stg:flex-col stg:gap-2",
             )}
           >
-            <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
+            <label className="stg:flex stg:flex-col stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
               Field
               <select
                 className={FIELD_INPUT_CLASSES}
@@ -229,7 +229,7 @@ function AddFilterPopover({
             </label>
 
             {selected && (
-              <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
+              <label className="stg:flex stg:flex-col stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
                 Operator
                 <select
                   className={FIELD_INPUT_CLASSES}
@@ -260,7 +260,7 @@ function AddFilterPopover({
               (isListOperator(op) ? (
                 <ListValueEditor field={selected} values={values} onChange={setValues} />
               ) : (
-                <div className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
+                <div className="stg:flex stg:flex-col stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
                   Value
                   <FieldValueControl
                     field={controlDeclaration(selected)}
@@ -271,14 +271,14 @@ function AddFilterPopover({
                 </div>
               ))}
 
-            <div className="mt-1 flex justify-end gap-2">
+            <div className="stg:mt-1 stg:flex stg:justify-end stg:gap-2">
               <button
                 type="button"
                 onClick={() => handleOpenChange(false)}
                 className={cn(
-                  "rounded-md border border-input bg-background px-2.5 py-1 text-xs font-medium text-foreground",
-                  "hover:bg-accent hover:text-accent-foreground",
-                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  "stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground",
+                  "stg:hover:bg-accent stg:hover:text-accent-foreground",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
                 )}
               >
                 Cancel
@@ -288,10 +288,10 @@ function AddFilterPopover({
                 onClick={apply}
                 disabled={!canApply}
                 className={cn(
-                  "rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground",
-                  "hover:bg-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                  "disabled:pointer-events-none disabled:opacity-50",
+                  "stg:rounded-md stg:bg-primary stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-primary-foreground",
+                  "stg:hover:bg-primary-hover",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+                  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                 )}
               >
                 Apply
@@ -338,29 +338,29 @@ function ListValueEditor({
   }, [pending, values, onChange]);
 
   return (
-    <div className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
+    <div className="stg:flex stg:flex-col stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
       Values
       {values.length > 0 && (
-        <div className="flex flex-wrap gap-1">
+        <div className="stg:flex stg:flex-wrap stg:gap-1">
           {values.map((v, i) => (
             <span
               key={i}
-              className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-normal text-foreground"
+              className="stg:inline-flex stg:items-center stg:gap-1 stg:rounded-full stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:font-normal stg:text-foreground"
             >
               {typeof v === "string" ? v : JSON.stringify(v)}
               <button
                 type="button"
                 onClick={() => onChange(values.filter((_, j) => j !== i))}
                 aria-label={`Remove value ${typeof v === "string" ? v : JSON.stringify(v)}`}
-                className="inline-flex size-3 items-center justify-center rounded-full text-muted-foreground hover:text-foreground"
+                className="stg:inline-flex stg:size-3 stg:items-center stg:justify-center stg:rounded-full stg:text-muted-foreground stg:hover:text-foreground"
               >
-                <CrossIcon className="size-2" />
+                <CrossIcon className="stg:size-2" />
               </button>
             </span>
           ))}
         </div>
       )}
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <FieldValueControl
           field={controlDeclaration(field)}
           value={pending}
@@ -372,10 +372,10 @@ function ListValueEditor({
           onClick={add}
           disabled={pending === undefined}
           className={cn(
-            "shrink-0 rounded-md border border-input bg-background px-2 py-1 text-xs font-medium text-foreground",
-            "hover:bg-accent hover:text-accent-foreground",
-            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:shrink-0 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:text-foreground",
+            "stg:hover:bg-accent stg:hover:text-accent-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           Add