@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/WorkflowCodePreviewGraph.tsx

@@ -82,7 +82,7 @@ function WorkflowCodePreviewGraphInner({
 
   if (!yaml?.trim() || nodes.length === 0) {
     return (
-      <div className={cn("flex h-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]", className)}>
         No tasks to visualize
       </div>
     );
@@ -90,7 +90,7 @@ function WorkflowCodePreviewGraphInner({
 
   return (
     <WorkflowGraphModeProvider mode="overview">
-      <div className={cn("h-full w-full", className)}>
+      <div className={cn("stg:h-full stg:w-full", className)}>
         <ReactFlow
           nodes={nodes}
           edges={edges}

package/src/workflow/WorkflowDashboard.tsx

@@ -100,14 +100,14 @@ export const WorkflowDashboard = memo(function WorkflowDashboard({
   return (
     <section
       aria-label="Workflow dashboard"
-      className={cn("space-y-6", className)}
+      className={cn("stg:space-y-6", className)}
     >
       <ExecutionSummaryWidget
         summary={summary}
         isLoading={summaryLoading}
       />
 
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div className="stg:grid stg:gap-6 stg:lg:grid-cols-2">
         <PendingApprovalsWidget
           approvals={approvals}
           totalCount={approvalCount}

package/src/workflow/WorkflowDetailView.tsx

@@ -279,7 +279,7 @@ export function WorkflowDetailView({
     org: meta?.org,
     slug: meta?.slug,
     description: undefined,
-    icon: <WorkflowIcon className="size-6 text-muted-foreground" />,
+    icon: <WorkflowIcon className="stg:size-6 stg:text-muted-foreground" />,
     createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
     updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
   };
@@ -456,7 +456,7 @@ function OverviewTab({
   );
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="stg:flex stg:flex-col stg:gap-6">
       {/* Summary stat cards */}
       <WorkflowOverviewSummary
         summary={summary}
@@ -473,11 +473,11 @@ function OverviewTab({
               <ExpandButton onClick={() => setGraphExpanded(true)} />
             }
           >
-            <div className="h-[28rem]">
+            <div className="stg:h-[28rem]">
               <WorkflowOverviewGraph
                 workflow={workflow}
                 onOpenInEditor={onOpenInEditor}
-                className="h-full w-full rounded-sm bg-[var(--stgm-muted-subtle,#fafafa)]"
+                className="stg:h-full stg:w-full stg:rounded-sm stg:bg-[var(--stgm-muted-subtle,#fafafa)]"
               />
             </div>
           </Section>
@@ -491,7 +491,7 @@ function OverviewTab({
       )}
 
       {/* Quick action links */}
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-3">
         {onOpenInEditor && (
           <QuickActionButton
             label="Edit workflow"
@@ -535,7 +535,7 @@ function OverviewTab({
       {showDescription && (
         <Section title="Description">
           {editable ? (
-            <div className="max-h-20 overflow-y-auto p-3">
+            <div className="stg:max-h-20 stg:overflow-y-auto stg:p-3">
               <InlineEditTextarea
                 value={spec?.description || ""}
                 onSave={(v) => saveField?.("description", v || undefined) ?? Promise.resolve(false)}
@@ -552,7 +552,7 @@ function OverviewTab({
 
       {budget && hasBudget(budget) && (
         <Section title="Budget">
-          <div className="divide-y divide-border">
+          <div className="stg:divide-y stg:divide-border">
             {budget.maxCostMicros > 0 && (
               <MetadataRow
                 label="Max Cost"
@@ -594,19 +594,19 @@ function OverviewTab({
               keyLabel="Variable name"
             />
           ) : (
-            <div className="divide-y divide-border">
+            <div className="stg:divide-y stg:divide-border">
               {envEntries.map(([key, decl]) => (
-                <div key={key} className="flex items-center gap-3 px-4 py-2.5">
-                  <code className="shrink-0 text-xs font-medium text-foreground">
+                <div key={key} className="stg:flex stg:items-center stg:gap-3 stg:px-4 stg:py-2.5">
+                  <code className="stg:shrink-0 stg:text-xs stg:font-medium stg:text-foreground">
                     {key}
                   </code>
                   {!decl.optional && (
-                    <span className="shrink-0 rounded bg-destructive/10 px-1 py-0.5 text-[10px] font-medium text-destructive">
+                    <span className="stg:shrink-0 stg:rounded stg:bg-destructive/10 stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-destructive">
                       required
                     </span>
                   )}
                   {decl.description && (
-                    <span className="truncate text-xs text-muted-foreground">
+                    <span className="stg:truncate stg:text-xs stg:text-muted-foreground">
                       {decl.description}
                     </span>
                   )}
@@ -619,7 +619,7 @@ function OverviewTab({
 
       {doc && (
         <Section title="Document">
-          <div className="flex flex-wrap gap-x-6 gap-y-1 px-4 py-2.5 text-xs text-muted-foreground">
+          <div className="stg:flex stg:flex-wrap stg:gap-x-6 stg:gap-y-1 stg:px-4 stg:py-2.5 stg:text-xs stg:text-muted-foreground">
             <span>DSL {doc.dsl}</span>
             <span>{doc.namespace}</span>
             <span>v{doc.version}</span>
@@ -644,12 +644,12 @@ function QuickActionButton({
       type="button"
       onClick={onClick}
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-        "border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)]",
-        "text-[var(--stgm-foreground,#1a1a2e)]",
-        "hover:bg-[var(--stgm-accent,#f5f5f5)]",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stgm-ring,#6366f1)]",
-        "transition-colors",
+        "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+        "stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)]",
+        "stg:text-[var(--stgm-foreground,#1a1a2e)]",
+        "stg:hover:bg-[var(--stgm-accent,#f5f5f5)]",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-[var(--stgm-ring,#6366f1)]",
+        "stg:transition-colors",
       )}
     >
       {icon}
@@ -691,10 +691,10 @@ function ExpandButton({ onClick }: { readonly onClick: () => void }) {
       onClick={onClick}
       aria-label="Expand task flow"
       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",
       )}
     >
       <svg
@@ -729,25 +729,25 @@ function DescriptionContent({ text }: { readonly text: string }) {
   }, [text]);
 
   return (
-    <div className="relative p-3">
+    <div className="stg:relative stg:p-3">
       <pre
         ref={contentRef}
         className={cn(
-          "whitespace-pre-wrap break-words text-sm text-foreground font-sans overflow-y-auto transition-[max-height] duration-200",
-          !expanded && "overflow-hidden",
+          "stg:whitespace-pre-wrap stg:break-words stg:text-sm stg:text-foreground stg:font-sans stg:overflow-y-auto stg:transition-[max-height] stg:duration-200",
+          !expanded && "stg:overflow-hidden",
         )}
         style={{ maxHeight: expanded ? "none" : DESCRIPTION_COLLAPSED_HEIGHT }}
       >
         {text}
       </pre>
       {!expanded && overflows && (
-        <div className="pointer-events-none absolute inset-x-3 bottom-10 h-8 bg-gradient-to-t from-background to-transparent" />
+        <div className="stg:pointer-events-none stg:absolute stg:inset-x-3 stg:bottom-10 stg:h-8 stg:bg-gradient-to-t stg:from-background stg:to-transparent" />
       )}
       {overflows && (
         <button
           type="button"
           onClick={() => setExpanded((v) => !v)}
-          className="mt-2 text-xs font-medium text-primary transition-colors hover:text-primary-muted"
+          className="stg:mt-2 stg:text-xs stg:font-medium stg:text-primary stg:transition-colors stg:hover:text-primary-muted"
         >
           {expanded ? "Show less" : "Show more"}
         </button>
@@ -767,7 +767,7 @@ function ValidationIndicator({ state }: { readonly state: ValidationState }) {
   return (
     <>
       <Dot />
-      <span className={cn("text-xs", config.colorClass)}>
+      <span className={cn("stg:text-xs", config.colorClass)}>
         {config.label}
       </span>
     </>
@@ -775,10 +775,10 @@ function ValidationIndicator({ state }: { readonly state: ValidationState }) {
 }
 
 const VALIDATION_STATE_CONFIG: Partial<Record<ValidationState, { label: string; colorClass: string }>> = {
-  [ValidationState.VALID]: { label: "Valid", colorClass: "text-success" },
-  [ValidationState.INVALID]: { label: "Invalid", colorClass: "text-destructive" },
-  [ValidationState.PENDING]: { label: "Validating…", colorClass: "text-muted-foreground" },
-  [ValidationState.FAILED]: { label: "Validation Error", colorClass: "text-destructive" },
+  [ValidationState.VALID]: { label: "Valid", colorClass: "stg:text-success" },
+  [ValidationState.INVALID]: { label: "Invalid", colorClass: "stg:text-destructive" },
+  [ValidationState.PENDING]: { label: "Validating…", colorClass: "stg:text-muted-foreground" },
+  [ValidationState.FAILED]: { label: "Validation Error", colorClass: "stg:text-destructive" },
 };
 
 // ---------------------------------------------------------------------------
@@ -793,16 +793,16 @@ function MetadataRow({
   readonly value: string;
 }) {
   return (
-    <div className="flex items-center gap-3 px-4 py-2.5">
-      <span className="w-28 shrink-0 text-xs text-muted-foreground">{label}</span>
-      <span className="text-sm text-foreground">{value}</span>
+    <div className="stg:flex stg:items-center stg:gap-3 stg:px-4 stg:py-2.5">
+      <span className="stg:w-28 stg:shrink-0 stg:text-xs stg:text-muted-foreground">{label}</span>
+      <span className="stg:text-sm stg:text-foreground">{value}</span>
     </div>
   );
 }
 
 function Dot() {
   return (
-    <span className="shrink-0" aria-hidden="true">
+    <span className="stg:shrink-0" aria-hidden="true">
       {"\u00B7"}
     </span>
   );
@@ -827,32 +827,32 @@ function hasBudget(budget: {
 
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      <div className="flex items-start gap-3">
-        <div className="h-8 w-48 animate-pulse rounded bg-muted" />
+    <div className={cn("stg:flex stg:flex-col stg:gap-6", className)}>
+      <div className="stg:flex stg:items-start stg:gap-3">
+        <div className="stg:h-8 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted" />
       </div>
-      <div className="h-40 animate-pulse rounded-lg bg-muted" />
-      <div className="h-28 animate-pulse rounded-lg bg-muted" />
+      <div className="stg:h-40 stg:animate-pulse stg:rounded-lg stg:bg-muted" />
+      <div className="stg:h-28 stg:animate-pulse stg:rounded-lg stg:bg-muted" />
     </div>
   );
 }
 
 function TabLoadingSkeleton() {
   return (
-    <div className="flex flex-col gap-2">
-      <div className="h-8 w-full animate-pulse rounded bg-muted" />
-      <div className="h-8 w-full animate-pulse rounded bg-muted" />
-      <div className="h-8 w-3/4 animate-pulse rounded bg-muted" />
+    <div className="stg:flex stg:flex-col stg:gap-2">
+      <div className="stg:h-8 stg:w-full stg:animate-pulse stg:rounded stg:bg-muted" />
+      <div className="stg:h-8 stg:w-full stg:animate-pulse stg:rounded stg:bg-muted" />
+      <div className="stg:h-8 stg:w-3/4 stg:animate-pulse stg:rounded stg:bg-muted" />
     </div>
   );
 }
 
 function NotFoundState({ className }: { readonly className?: string }) {
   return (
-    <div className={cn("flex flex-col items-center justify-center py-16", className)}>
-      <WorkflowIcon className="size-10 text-muted-foreground-faint" />
-      <p className="mt-2 text-sm text-muted-foreground">Workflow not found</p>
-      <p className="text-xs text-muted-foreground-subtle">
+    <div className={cn("stg:flex stg:flex-col stg:items-center stg:justify-center stg:py-16", className)}>
+      <WorkflowIcon className="stg:size-10 stg:text-muted-foreground-faint" />
+      <p className="stg:mt-2 stg:text-sm stg:text-muted-foreground">Workflow not found</p>
+      <p className="stg:text-xs stg:text-muted-foreground-subtle">
         This workflow doesn&apos;t exist or you don&apos;t have access to it.
       </p>
     </div>

package/src/workflow/WorkflowDiffGraph.tsx

@@ -123,15 +123,15 @@ function WorkflowDiffGraphInner({
 
   if (error) {
     return (
-      <div className={cn("flex h-full flex-col items-center justify-center gap-2 px-6 text-center", className)}>
-        <p className="text-sm text-[var(--stgm-muted-foreground,#737373)]">{error}</p>
+      <div className={cn("stg:flex stg:h-full stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:px-6 stg:text-center", className)}>
+        <p className="stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]">{error}</p>
       </div>
     );
   }
 
   if (nodes.length === 0) {
     return (
-      <div className={cn("flex h-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]", className)}>
+      <div className={cn("stg:flex stg:h-full stg:items-center stg:justify-center stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]", className)}>
         No changes to display
       </div>
     );
@@ -139,9 +139,9 @@ function WorkflowDiffGraphInner({
 
   return (
     <WorkflowGraphModeProvider mode="diff">
-      <div className={cn("relative h-full w-full", className)}>
+      <div className={cn("stg:relative stg:h-full stg:w-full", className)}>
         {diff && (
-          <div className="absolute left-3 top-3 z-50">
+          <div className="stg:absolute stg:left-3 stg:top-3 stg:z-50">
             <DiffSummaryBar diff={diff} />
           </div>
         )}

package/src/workflow/WorkflowEditorView.tsx

@@ -213,28 +213,28 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
   }, [mode, editor.diagnostics]);
 
   const rootClassName = cn(
-    "stgm-workflow-editor flex flex-col",
-    isFullPage && "fixed inset-0 z-50 bg-background",
-    !isFullPage && "h-full",
+    "stgm-workflow-editor stg:flex stg:flex-col",
+    isFullPage && "stg:fixed stg:inset-0 stg:z-50 stg:bg-background",
+    !isFullPage && "stg:h-full",
     className,
   );
 
   return (
     <div className={rootClassName}>
       {/* Toolbar */}
-      <div className="flex items-center justify-between border-b border-border px-3 py-2">
-        <div className="flex items-center gap-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-3 stg:py-2">
+        <div className="stg:flex stg:items-center stg:gap-3">
           {/* Mode Toggle */}
           <ModeToggle mode={mode} onSwitchToCode={handleSwitchToCode} onSwitchToVisual={handleSwitchToVisual} />
-          <div className="mx-1 h-4 w-px bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
+          <div className="stg:mx-1 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
           <button
             type="button"
             onClick={toggleRefinePanel}
             className={cn(
-              "inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
               showRefinePanel
-                ? "bg-primary/10 text-primary"
-                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                ? "stg:bg-primary/10 stg:text-primary"
+                : "stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground",
             )}
             aria-pressed={showRefinePanel}
             aria-label="Refine with AI"
@@ -242,7 +242,7 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
             <RefineSparklesIcon />
             Refine
           </button>
-          <div className="mx-1 h-4 w-px bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
+          <div className="stg:mx-1 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
           <ValidationSummary
             errorCount={editor.errorCount}
             warningCount={editor.warningCount}
@@ -252,8 +252,8 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
               type="button"
               onClick={handleFixWithAI}
               className={cn(
-                "inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors",
-                "text-muted-foreground hover:bg-muted hover:text-foreground",
+                "stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground",
               )}
               aria-label="Fix validation errors with AI"
             >
@@ -262,11 +262,11 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
             </button>
           )}
           {(editor.isDirty || canvasDirty) && (
-            <span className="text-xs text-muted-foreground">Unsaved changes</span>
+            <span className="stg:text-xs stg:text-muted-foreground">Unsaved changes</span>
           )}
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="stg:flex stg:items-center stg:gap-2">
           {mode === "code" && (editor.isDirty || editor.versionMessage) && (
             <input
               type="text"
@@ -275,10 +275,10 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
               placeholder="Version message (optional)"
               disabled={editor.isSaving}
               className={cn(
-                "h-7 w-48 rounded border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 text-xs",
-                "text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)]",
-                "focus:border-[var(--stgm-primary,#6366f1)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-primary,#6366f1)]",
-                "disabled:opacity-40",
+                "stg:h-7 stg:w-48 stg:rounded stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-2 stg:text-xs",
+                "stg:text-[var(--stgm-foreground,#1a1a2e)] stg:placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)]",
+                "stg:focus:border-[var(--stgm-primary,#6366f1)] stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-primary,#6366f1)]",
+                "stg:disabled:opacity-40",
               )}
             />
           )}
@@ -288,9 +288,9 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
               onClick={editor.reset}
               disabled={!editor.isDirty || editor.isSaving}
               className={cn(
-                "rounded px-2.5 py-1 text-xs font-medium transition-colors",
-                "text-muted-foreground hover:bg-muted hover:text-foreground",
-                "disabled:pointer-events-none disabled:opacity-40",
+                "stg:rounded stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
               Reset
@@ -302,9 +302,9 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
               onClick={handleSave}
               disabled={!editor.isDirty || editor.isSaving || editor.errorCount > 0}
               className={cn(
-                "rounded bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors",
-                "hover:bg-primary/90",
-                "disabled:pointer-events-none disabled:opacity-40",
+                "stg:rounded stg:bg-primary stg:px-3 stg:py-1 stg:text-xs stg:font-medium stg:text-primary-foreground stg:transition-colors",
+                "stg:hover:bg-primary/90",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-40",
               )}
             >
               {editor.isSaving ? "Saving\u2026" : "Save"}
@@ -314,8 +314,8 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
             type="button"
             onClick={() => setShowExplainDialog(true)}
             className={cn(
-              "inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors",
-              "text-muted-foreground hover:bg-muted hover:text-foreground",
+              "stg:inline-flex stg:items-center stg:gap-1 stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground",
             )}
             aria-label="Explain this workflow"
           >
@@ -325,7 +325,7 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
           <button
             type="button"
             onClick={toggleFullPage}
-            className="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+            className="stg:rounded stg:p-1 stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground"
             aria-label={isFullPage ? "Exit full page" : "Full page"}
           >
             <ExpandIcon expanded={isFullPage} />
@@ -335,7 +335,7 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
 
       {/* Save error banner */}
       {editor.saveError && (
-        <div className="border-b border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+        <div className="stg:border-b stg:border-destructive/20 stg:bg-destructive/5 stg:px-3 stg:py-2 stg:text-xs stg:text-destructive">
           {editor.saveError.message}
         </div>
       )}
@@ -359,18 +359,18 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
       />
 
       {/* Main content area */}
-      <div className="flex min-h-0 flex-1">
+      <div className="stg:flex stg:min-h-0 stg:flex-1">
         {mode === "code" ? (
           <>
-            <div className="flex-1 overflow-hidden border-r border-border">
+            <div className="stg:flex-1 stg:overflow-hidden stg:border-r stg:border-border">
               <WorkflowYamlEditor
                 value={editor.yaml}
                 onChange={editor.setYaml}
                 diagnostics={editor.diagnostics as import("@codemirror/lint").Diagnostic[]}
-                className="h-full rounded-none border-0"
+                className="stg:h-full stg:rounded-none stg:border-0"
               />
             </div>
-            <div className="w-[40%] min-w-[240px] overflow-hidden">
+            <div className="stg:w-[40%] stg:min-w-[240px] stg:overflow-hidden">
               {showRefinePanel ? (
                 <WorkflowRefinePanel
                   org={org}
@@ -378,12 +378,12 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
                   onAccept={handleRefineAccept}
                   onClose={toggleRefinePanel}
                   initialInstruction={pendingFixInstruction}
-                  className="h-full"
+                  className="stg:h-full"
                 />
               ) : (
                 <WorkflowCodePreviewGraph
                   yaml={editor.yaml}
-                  className="h-full"
+                  className="stg:h-full"
                 />
               )}
             </div>
@@ -397,17 +397,17 @@ export const WorkflowEditorView = memo(function WorkflowEditorView({
               onDirtyChange={setCanvasDirty}
               nodeErrors={nodeErrors}
               layoutEngine={layoutEngine}
-              className={showRefinePanel ? "w-[60%]" : "flex-1"}
+              className={showRefinePanel ? "stg:w-[60%]" : "stg:flex-1"}
             />
             {showRefinePanel && (
-              <div className="w-[40%] min-w-[240px] overflow-hidden">
+              <div className="stg:w-[40%] stg:min-w-[240px] stg:overflow-hidden">
                 <WorkflowRefinePanel
                   org={org}
                   currentYaml={editor.yaml}
                   onAccept={handleRefineAccept}
                   onClose={toggleRefinePanel}
                   initialInstruction={pendingFixInstruction}
-                  className="h-full"
+                  className="stg:h-full"
                 />
               </div>
             )}
@@ -433,14 +433,14 @@ function ModeToggle({
 }) {
   const segmentClass = (active: boolean) =>
     cn(
-      "rounded px-2.5 py-1 text-xs font-medium transition-colors",
+      "stg:rounded stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
       active
-        ? "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]"
-        : "text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]",
+        ? "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]"
+        : "stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]",
     );
 
   return (
-    <div className="flex items-center gap-0.5 rounded-md border border-[var(--stgm-border,#d4d4d8)] p-0.5" role="tablist" aria-label="Editor mode">
+    <div className="stg:flex stg:items-center stg:gap-0.5 stg:rounded-md stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:p-0.5" role="tablist" aria-label="Editor mode">
       <button type="button" role="tab" aria-selected={mode === "code"} onClick={onSwitchToCode} className={segmentClass(mode === "code")}>
         Code
       </button>
@@ -463,23 +463,23 @@ function ModeWarningDialog({
   onCancel: () => void;
 }) {
   return (
-    <div className="border-b border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-accent,#fffbeb)] px-3 py-2">
-      <div className="flex items-center justify-between gap-3">
-        <p className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+    <div className="stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-accent,#fffbeb)] stg:px-3 stg:py-2">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
+        <p className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">
           Switching to visual mode will normalize YAML formatting. Comments and custom ordering will not be preserved.
         </p>
-        <div className="flex shrink-0 items-center gap-1.5">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
           <button
             type="button"
             onClick={onCancel}
-            className="rounded px-2 py-1 text-xs text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+            className="stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]"
           >
             Cancel
           </button>
           <button
             type="button"
             onClick={onConfirm}
-            className="rounded bg-[var(--stgm-primary,#6366f1)] px-2.5 py-1 text-xs font-medium text-[var(--stgm-primary-foreground,#fff)] hover:opacity-90"
+            className="stg:rounded stg:bg-[var(--stgm-primary,#6366f1)] stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-[var(--stgm-primary-foreground,#fff)] stg:hover:opacity-90"
           >
             Continue
           </button>
@@ -501,23 +501,23 @@ function DirtyPromptDialog({
   onCancel: () => void;
 }) {
   return (
-    <div className="border-b border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-accent,#fffbeb)] px-3 py-2">
-      <div className="flex items-center justify-between gap-3">
-        <p className="text-xs text-[var(--stgm-foreground,#1a1a2e)]">
+    <div className="stg:border-b stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-accent,#fffbeb)] stg:px-3 stg:py-2">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-3">
+        <p className="stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)]">
           You have unsaved changes in the visual editor. Switching to code mode will discard them.
         </p>
-        <div className="flex shrink-0 items-center gap-1.5">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1.5">
           <button
             type="button"
             onClick={onCancel}
-            className="rounded px-2 py-1 text-xs text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)]"
+            className="stg:rounded stg:px-2 stg:py-1 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:bg-[var(--stgm-muted,#f5f5f5)]"
           >
             Stay in Visual
           </button>
           <button
             type="button"
             onClick={onDiscard}
-            className="rounded bg-[var(--stgm-destructive,#ef4444)] px-2.5 py-1 text-xs font-medium text-[var(--stgm-destructive-foreground,#fff)] hover:opacity-90"
+            className="stg:rounded stg:bg-[var(--stgm-destructive,#ef4444)] stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-[var(--stgm-destructive-foreground,#fff)] stg:hover:opacity-90"
           >
             Discard &amp; Switch
           </button>
@@ -540,7 +540,7 @@ function ValidationSummary({
 }) {
   if (errorCount === 0 && warningCount === 0) {
     return (
-      <span className="text-xs text-success">
+      <span className="stg:text-xs stg:text-success">
         <CheckCircleIcon />
         {" "}Valid
       </span>
@@ -548,14 +548,14 @@ function ValidationSummary({
   }
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="stg:flex stg:items-center stg:gap-2">
       {errorCount > 0 && (
-        <span className="text-xs text-destructive">
+        <span className="stg:text-xs stg:text-destructive">
           {errorCount} {errorCount === 1 ? "error" : "errors"}
         </span>
       )}
       {warningCount > 0 && (
-        <span className="text-xs text-warning">
+        <span className="stg:text-xs stg:text-warning">
           {warningCount} {warningCount === 1 ? "warning" : "warnings"}
         </span>
       )}
@@ -574,7 +574,7 @@ function CheckCircleIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="inline-block"
+      className="stg:inline-block"
     >
       <circle cx="8" cy="8" r="6.5" />
       <path d="M5.5 8l2 2 3-3.5" />