@stigmer/react 3.9.0 → 3.11.0

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"

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) => (