@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/resource-creation/WizardNav.tsx

@@ -45,22 +45,22 @@ export function WizardNav({
   return (
     <div
       className={cn(
-        "flex items-center justify-between border-t border-border px-6 py-4",
+        "stg:flex stg:items-center stg:justify-between stg:border-t stg:border-border stg:px-6 stg:py-4",
         className,
       )}
     >
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         {onCancel && (
           <button
             type="button"
             onClick={onCancel}
             disabled={isSubmitting}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm",
-              "text-muted-foreground transition-colors",
-              "hover:text-foreground hover:bg-accent-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm",
+              "stg:text-muted-foreground stg:transition-colors",
+              "stg:hover:text-foreground stg:hover:bg-accent-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",
             )}
           >
             Cancel
@@ -68,20 +68,20 @@ export function WizardNav({
         )}
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         {showBack && (
           <button
             type="button"
             onClick={onBack}
             disabled={isSubmitting}
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground transition-colors",
-              "hover:bg-accent-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:gap-1.5 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:transition-colors",
+              "stg:hover:bg-accent-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",
             )}
           >
-            <ArrowLeftIcon className="size-3.5" />
+            <ArrowLeftIcon className="stg:size-3.5" />
             Back
           </button>
         )}
@@ -92,15 +92,15 @@ export function WizardNav({
           disabled={nextDisabled || isSubmitting}
           data-cursor-target="wizard-next"
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-colors",
-            "hover:bg-primary-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:bg-primary stg:px-4 stg:py-1.5 stg:text-sm stg:font-medium stg:text-primary-foreground stg:transition-colors",
+            "stg:hover:bg-primary-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isSubmitting && <SpinnerIcon />}
           {nextLabel}
-          {!isSubmitting && <ArrowRightIcon className="size-3.5" />}
+          {!isSubmitting && <ArrowRightIcon className="stg:size-3.5" />}
         </button>
       </div>
     </div>
@@ -155,7 +155,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/resource-creation/WizardShell.tsx

@@ -63,21 +63,21 @@ export function WizardShell({
   return (
     <div
       className={cn(
-        "flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background",
+        "stg:flex stg:min-h-0 stg:flex-col stg:overflow-hidden stg:rounded-lg stg:border stg:border-border stg:bg-background",
         className,
       )}
     >
       {/* Mobile step indicator (visible < sm) */}
-      <div className="flex items-center gap-2 border-b border-border px-4 py-3 sm:hidden">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border stg:px-4 stg:py-3 stg:sm:hidden">
         <MobileProgress current={currentStepIndex + 1} total={steps.length} />
-        <span className="text-sm font-medium text-foreground">
+        <span className="stg:text-sm stg:font-medium stg:text-foreground">
           {steps[currentStepIndex]?.label}
         </span>
       </div>
 
-      <div className="flex min-h-0 flex-1">
+      <div className="stg:flex stg:min-h-0 stg:flex-1">
         {/* Step indicator sidebar (visible >= sm) */}
-        <aside className="hidden w-52 shrink-0 border-r border-border bg-muted-faint px-3 py-6 sm:block">
+        <aside className="stg:hidden stg:w-52 stg:shrink-0 stg:border-r stg:border-border stg:bg-muted-faint stg:px-3 stg:py-6 stg:sm:block">
           <StepIndicator
             steps={steps}
             currentStepIndex={currentStepIndex}
@@ -86,7 +86,7 @@ export function WizardShell({
         </aside>
 
         {/* Content area */}
-        <main className="flex-1 overflow-y-auto px-6 py-6 sm:px-8">
+        <main className="stg:flex-1 stg:overflow-y-auto stg:px-6 stg:py-6 stg:sm:px-8">
           {children}
         </main>
       </div>
@@ -117,7 +117,7 @@ function MobileProgress({
   readonly total: number;
 }) {
   return (
-    <span className="inline-flex items-center justify-center rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-primary-foreground">
+    <span className="stg:inline-flex stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-2 stg:py-0.5 stg:text-[10px] stg:font-semibold stg:text-primary-foreground">
       {current}/{total}
     </span>
   );

package/src/resource-detail/ConfirmDialog.tsx

@@ -80,29 +80,29 @@ export function ConfirmDialog({
       ref={dialogRef}
       onCancel={handleDialogCancel}
       className={cn(
-        "fixed inset-0 z-50 m-auto w-full max-w-sm 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-sm 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">
             {state.title}
           </h3>
-          <p className="text-sm text-muted-foreground">
+          <p className="stg:text-sm stg:text-muted-foreground">
             {state.description}
           </p>
         </div>
-        <div className="flex justify-end gap-2">
+        <div className="stg:flex stg:justify-end stg:gap-2">
           <button
             type="button"
             onClick={onCancel}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-              "border border-input bg-background 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:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+              "stg:border stg:border-input stg:bg-background 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",
             )}
           >
             {state.cancelLabel ?? "Cancel"}
@@ -111,11 +111,11 @@ export function ConfirmDialog({
             type="button"
             onClick={onConfirm}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
               isDestructive
-                ? "bg-destructive text-destructive-foreground hover:bg-destructive-hover"
-                : "bg-primary text-primary-foreground hover:bg-primary-hover",
+                ? "stg:bg-destructive stg:text-destructive-foreground stg:hover:bg-destructive-hover"
+                : "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
             )}
           >
             {state.confirmLabel ?? "Confirm"}

package/src/resource-detail/ResourceActionBar.tsx

@@ -54,17 +54,17 @@ export function ResourceActionBar({
   if (!primaryAction && !hasOverflow) return null;
 
   return (
-    <div className={cn("flex items-center gap-2", className)}>
+    <div className={cn("stg:flex stg:items-center stg:gap-2", className)}>
       {primaryAction && (
         <button
           type="button"
           onClick={primaryAction.onAction}
           disabled={primaryAction.disabled}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           {primaryAction.icon}
@@ -90,7 +90,7 @@ function OverflowMenu({
   return (
     <ActionMenu>
       <ActionMenu.Trigger aria-label="More actions">
-        <KebabIcon className="size-4" />
+        <KebabIcon className="stg:size-4" />
       </ActionMenu.Trigger>
       <ActionMenu.Content>
         {grouped.map((group, groupIndex) => (

package/src/resource-detail/ResourceDetailShell.tsx

@@ -56,11 +56,11 @@ export function ResourceDetailShell({
   const hasTabs = tabs != null && tabs.length > 0;
 
   return (
-    <div className={cn("flex flex-col gap-6", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-6", className)}>
       {headerBanner}
 
       {/* Header + Action bar row */}
-      <div className="flex items-start justify-between gap-4">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-4">
         <Header
           header={header}
           visibilityControl={visibilityControl}
@@ -69,7 +69,7 @@ export function ResourceDetailShell({
         <ResourceActionBar
           primaryAction={primaryAction}
           actions={actions}
-          className="shrink-0"
+          className="stg:shrink-0"
         />
       </div>
 
@@ -121,25 +121,25 @@ function Header({
   const showSlug = slug && slug !== name && !qualifiedSlug;
 
   return (
-    <div className="flex min-w-0 items-start gap-3">
+    <div className="stg:flex stg:min-w-0 stg:items-start stg:gap-3">
       {iconUrl ? (
         <img
           src={iconUrl}
           alt=""
-          className="mt-0.5 size-8 shrink-0 rounded object-cover"
+          className="stg:mt-0.5 stg:size-8 stg:shrink-0 stg:rounded stg:object-cover"
         />
       ) : icon ? (
-        <span className="mt-1 shrink-0">{icon}</span>
+        <span className="stg:mt-1 stg:shrink-0">{icon}</span>
       ) : null}
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
+      <div className="stg:min-w-0 stg:flex-1">
+        <div className="stg:flex stg:items-center stg:gap-2">
           {nameElement ?? (
-            <h2 className="truncate text-lg font-semibold text-foreground">
+            <h2 className="stg:truncate stg:text-lg stg:font-semibold stg:text-foreground">
               {name}
             </h2>
           )}
           {showSlug && (
-            <code className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+            <code className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-xs stg:font-medium stg:text-muted-foreground">
               {slug}
             </code>
           )}
@@ -152,11 +152,11 @@ function Header({
           {visibilityControl}
         </div>
         {qualifiedSlug && (
-          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
+          <span className="stg:mt-0.5 stg:block stg:truncate stg:font-mono stg:text-xs stg:text-muted-foreground">
             {qualifiedSlug}
           </span>
         )}
-        <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+        <div className="stg:mt-0.5 stg:flex stg:flex-wrap stg:items-center stg:gap-x-1.5 stg:text-xs stg:text-muted-foreground">
           {org && <span>{org}</span>}
           {metaExtra}
           {createdAt && (
@@ -173,7 +173,7 @@ function Header({
           )}
         </div>
         {description && (
-          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+          <p className="stg:mt-2 stg:text-sm stg:text-muted-foreground">{description}</p>
         )}
       </div>
     </div>
@@ -186,7 +186,7 @@ function Header({
 
 function Dot() {
   return (
-    <span className="shrink-0" aria-hidden="true">
+    <span className="stg:shrink-0" aria-hidden="true">
       {"\u00B7"}
     </span>
   );

package/src/resource-detail/Section.tsx

@@ -39,17 +39,17 @@ export function Section({
 }: SectionProps) {
   return (
     <section className={className} data-scroll-target={scrollTarget}>
-      <div className="mb-2 flex items-center gap-2">
-        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+      <div className="stg:mb-2 stg:flex stg:items-center stg:gap-2">
+        <h3 className="stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           {title}
         </h3>
         {count != null && count > 0 && (
-          <span className="inline-flex size-5 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
+          <span className="stg:inline-flex stg:size-5 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:text-[10px] stg:font-semibold stg:text-muted-foreground">
             {count}
           </span>
         )}
         {(headerActions || onEdit) && (
-          <div className="ml-auto flex items-center gap-1">
+          <div className="stg:ml-auto stg:flex stg:items-center stg:gap-1">
             {headerActions}
             {onEdit && (
               <button
@@ -57,19 +57,19 @@ export function Section({
                 onClick={onEdit}
                 aria-label={`Edit ${title.toLowerCase()}`}
                 className={cn(
-                  "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground",
-                  "hover:bg-accent-hover hover:text-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "transition-colors",
+                  "stg:inline-flex stg:size-6 stg:items-center stg:justify-center stg:rounded-md stg:text-muted-foreground",
+                  "stg:hover:bg-accent-hover stg:hover:text-foreground",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                  "stg:transition-colors",
                 )}
               >
-                <PencilIcon className="size-3.5" />
+                <PencilIcon className="stg:size-3.5" />
               </button>
             )}
           </div>
         )}
       </div>
-      <div className="overflow-hidden rounded-lg border border-border">
+      <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
         {children}
       </div>
     </section>

package/src/resource-workbench/components/BulkActionBar.tsx

@@ -53,17 +53,17 @@ export function BulkActionBar<TData>({
       aria-label="Bulk actions"
       aria-live="polite"
       className={cn(
-        "flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-2 shadow-md",
+        "stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-2 stg:shadow-md",
         className,
       )}
     >
-      <span className="text-xs font-medium text-foreground">
+      <span className="stg:text-xs stg:font-medium stg:text-foreground">
         {selectedCount} {selectedCount === 1 ? "item" : "items"} selected
       </span>
 
-      <span className="h-4 w-px bg-border" aria-hidden="true" />
+      <span className="stg:h-4 stg:w-px stg:bg-border" aria-hidden="true" />
 
-      <div className="flex items-center gap-1">
+      <div className="stg:flex stg:items-center stg:gap-1">
         {actions.map((action) => (
           <BulkActionButton
             key={action.id}
@@ -77,9 +77,9 @@ export function BulkActionBar<TData>({
         type="button"
         onClick={onCancel}
         className={cn(
-          "ml-auto text-xs text-muted-foreground transition-colors",
-          "hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+          "stg:ml-auto stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:text-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm",
         )}
       >
         Cancel
@@ -103,16 +103,16 @@ function BulkActionButton<TData>({
       disabled={action.disabled}
       onClick={() => action.onAction(selectedItems)}
       className={cn(
-        "inline-flex items-center gap-1.5 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",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:inline-flex stg:items-center stg:gap-1.5 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",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         isDestructive
-          ? "text-destructive hover:bg-destructive-subtle"
-          : "text-foreground hover:bg-accent-hover",
+          ? "stg:text-destructive stg:hover:bg-destructive-subtle"
+          : "stg:text-foreground stg:hover:bg-accent-hover",
       )}
     >
       {action.icon && (
-        <span className="shrink-0" aria-hidden="true">
+        <span className="stg:shrink-0" aria-hidden="true">
           {action.icon}
         </span>
       )}

package/src/resource-workbench/components/ColumnHeader.tsx

@@ -42,7 +42,7 @@ export function ColumnHeader({
       <th
         scope="col"
         className={cn(
-          "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+          "stg:px-3 stg:py-2 stg:text-left stg:text-xs stg:font-medium stg:text-muted-foreground",
           className,
         )}
       >
@@ -56,7 +56,7 @@ export function ColumnHeader({
       scope="col"
       aria-sort={ariaSort}
       className={cn(
-        "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+        "stg:px-3 stg:py-2 stg:text-left stg:text-xs stg:font-medium stg:text-muted-foreground",
         className,
       )}
     >
@@ -64,10 +64,10 @@ export function ColumnHeader({
         type="button"
         onClick={onSort}
         className={cn(
-          "inline-flex items-center gap-1 rounded-sm px-0.5 py-0.5 -mx-0.5",
-          "hover:text-foreground transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          sortDirection && "text-foreground",
+          "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-sm stg:px-0.5 stg:py-0.5 stg:-mx-0.5",
+          "stg:hover:text-foreground stg:transition-colors",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          sortDirection && "stg:text-foreground",
         )}
       >
         {label}
@@ -94,9 +94,9 @@ function SortIndicator({
       strokeLinejoin="round"
       aria-hidden="true"
       className={cn(
-        "shrink-0 transition-transform",
-        !direction && "opacity-0 group-hover:opacity-40",
-        direction === "desc" && "rotate-180",
+        "stg:shrink-0 stg:transition-transform",
+        !direction && "stg:opacity-0 stg:group-hover:opacity-40",
+        direction === "desc" && "stg:rotate-180",
       )}
     >
       <path d="M6 2.5v7M3 6.5l3-4 3 4" />

package/src/resource-workbench/components/FilterBar.tsx

@@ -49,7 +49,7 @@ export function FilterBar({
     <div
       role="toolbar"
       aria-label="Active 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)}
     >
       {filters.map((filter) => {
         const def = defMap.get(filter.filterId);
@@ -71,9 +71,9 @@ export function FilterBar({
           type="button"
           onClick={onClearAll}
           className={cn(
-            "text-xs text-muted-foreground transition-colors",
-            "hover:text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+            "stg:text-xs stg:text-muted-foreground stg:transition-colors",
+            "stg:hover:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm",
           )}
         >
           Clear all
@@ -99,19 +99,19 @@ function FilterChip({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground",
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:text-muted-foreground",
       )}
     >
-      <span className="font-medium">{label}:</span>
+      <span className="stg:font-medium">{label}:</span>
       <span>{value}</span>
       <button
         type="button"
         onClick={onRemove}
         aria-label={`Remove ${label} filter`}
         className={cn(
-          "ml-0.5 inline-flex items-center justify-center rounded-sm p-0.5",
-          "text-muted-foreground-subtle hover:text-foreground hover:bg-accent-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:ml-0.5 stg:inline-flex stg:items-center stg:justify-center stg:rounded-sm stg:p-0.5",
+          "stg:text-muted-foreground-subtle stg:hover:text-foreground stg:hover:bg-accent-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         )}
       >
         <XIcon />

package/src/resource-workbench/components/ResourceAvatar.tsx

@@ -22,20 +22,20 @@ export interface ResourceAvatarProps {
 }
 
 const AVATAR_COLORS = [
-  "bg-[#6366f1]",
-  "bg-[#8b5cf6]",
-  "bg-[#a855f7]",
-  "bg-[#d946ef]",
-  "bg-[#ec4899]",
-  "bg-[#f43f5e]",
-  "bg-[#ef4444]",
-  "bg-[#f97316]",
-  "bg-[#eab308]",
-  "bg-[#22c55e]",
-  "bg-[#14b8a6]",
-  "bg-[#06b6d4]",
-  "bg-[#3b82f6]",
-  "bg-[#2563eb]",
+  "stg:bg-[#6366f1]",
+  "stg:bg-[#8b5cf6]",
+  "stg:bg-[#a855f7]",
+  "stg:bg-[#d946ef]",
+  "stg:bg-[#ec4899]",
+  "stg:bg-[#f43f5e]",
+  "stg:bg-[#ef4444]",
+  "stg:bg-[#f97316]",
+  "stg:bg-[#eab308]",
+  "stg:bg-[#22c55e]",
+  "stg:bg-[#14b8a6]",
+  "stg:bg-[#06b6d4]",
+  "stg:bg-[#3b82f6]",
+  "stg:bg-[#2563eb]",
 ] as const;
 
 function hashSlug(slug: string): number {
@@ -47,8 +47,8 @@ function hashSlug(slug: string): number {
 }
 
 const SIZE_CLASSES = {
-  sm: "size-6 text-[10px]",
-  md: "size-8 text-xs",
+  sm: "stg:size-6 stg:text-[10px]",
+  md: "stg:size-8 stg:text-xs",
 } as const;
 
 /**
@@ -76,7 +76,7 @@ export function ResourceAvatar({
     return (
       <span
         className={cn(
-          "inline-flex shrink-0 items-center justify-center rounded-full bg-muted",
+          "stg:inline-flex stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted",
           sizeClass,
           className,
         )}
@@ -84,7 +84,7 @@ export function ResourceAvatar({
         <img
           src={iconUrl}
           alt=""
-          className="size-4/5 object-contain"
+          className="stg:size-4/5 stg:object-contain"
         />
       </span>
     );
@@ -97,7 +97,7 @@ export function ResourceAvatar({
     <span
       aria-hidden="true"
       className={cn(
-        "inline-flex shrink-0 items-center justify-center rounded-full font-medium text-white",
+        "stg:inline-flex stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:font-medium stg:text-white",
         sizeClass,
         colorClass,
         className,

package/src/resource-workbench/components/ResourceCards.tsx

@@ -58,7 +58,7 @@ export function ResourceCards<TData>({
       role="list"
       aria-label={ariaLabel}
       className={cn(
-        "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        "stg:grid stg:grid-cols-1 stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-3",
         className,
       )}
     >
@@ -88,14 +88,14 @@ export function ResourceCards<TData>({
                 : undefined
             }
             className={cn(
-              "relative flex rounded-lg border border-border bg-card p-4 transition-colors",
-              isSelected && "border-primary/40 bg-primary-subtle",
-              isClickable && "cursor-pointer hover:border-primary/40 hover:bg-accent-hover",
-              isClickable && "focus-within:ring-2 focus-within:ring-ring",
+              "stg:relative stg:flex stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4 stg:transition-colors",
+              isSelected && "stg:border-primary/40 stg:bg-primary-subtle",
+              isClickable && "stg:cursor-pointer stg:hover:border-primary/40 stg:hover:bg-accent-hover",
+              isClickable && "stg:focus-within:ring-2 stg:focus-within:ring-ring",
             )}
           >
             {enableSelection && onToggleSelection && (
-              <div className="absolute left-2 top-2">
+              <div className="stg:absolute stg:left-2 stg:top-2">
                 <SelectionCheckbox
                   checked={isSelected}
                   onChange={() => onToggleSelection(id)}
@@ -103,11 +103,11 @@ export function ResourceCards<TData>({
                 />
               </div>
             )}
-            <div className={cn("min-w-0 flex-1", enableSelection && "pl-5")}>
+            <div className={cn("stg:min-w-0 stg:flex-1", enableSelection && "stg:pl-5")}>
               {renderCard(item, index)}
             </div>
             {renderCardAction && (
-              <div className="ml-2 shrink-0" onClick={(e) => e.stopPropagation()}>
+              <div className="stg:ml-2 stg:shrink-0" onClick={(e) => e.stopPropagation()}>
                 {renderCardAction(item)}
               </div>
             )}