@stigmer/react 3.9.0 → 3.11.0

package/src/workflow/WorkflowArchitectDialog.tsx

@@ -118,12 +118,12 @@ export function WorkflowArchitectDialog({
       onCancel={handleDialogCancel}
       onClick={handleBackdropClick}
       className={cn(
-        "fixed inset-0 z-50 m-auto w-full max-w-3xl 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-3xl 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">
+      <div className="stg:flex stg:flex-col">
         <DialogPhase flow={flow} onClose={() => onOpenChange(false)} />
       </div>
     </dialog>
@@ -163,10 +163,10 @@ function DialogPhase({ flow, onClose }: DialogPhaseProps) {
 // ---------------------------------------------------------------------------
 
 const INPUT_CLASSES = cn(
-  "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm 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-sm 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",
 );
 
 function InputPhase({
@@ -178,33 +178,33 @@ function InputPhase({
 }) {
   return (
     <>
-      <div className="border-b border-border px-6 py-4">
-        <h3 className="text-base font-semibold text-foreground">
+      <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
+        <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
           Generate Workflow
         </h3>
-        <p className="mt-0.5 text-xs text-muted-foreground">
+        <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
           Describe what you want and the Workflow Architect agent will design,
           validate, and generate a workflow definition
         </p>
       </div>
 
-      <div className="max-h-[60vh] overflow-y-auto px-6 py-4">
+      <div className="stg:max-h-[60vh] stg:overflow-y-auto stg:px-6 stg:py-4">
         {flow.error && (
           <div
-            className="mb-4 rounded-md border border-destructive bg-destructive-muted px-3 py-2 text-sm text-destructive"
+            className="stg:mb-4 stg:rounded-md stg:border stg:border-destructive stg:bg-destructive-muted stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
             role="alert"
           >
             {flow.error}
           </div>
         )}
 
-        <div className="flex flex-col gap-1">
+        <div className="stg:flex stg:flex-col stg:gap-1">
           <label
             htmlFor="architect-prompt"
-            className="text-xs font-medium text-foreground"
+            className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Description
-            <span className="ml-1 text-destructive" aria-label="required">
+            <span className="stg:ml-1 stg:text-destructive" aria-label="required">
               *
             </span>
           </label>
@@ -214,7 +214,7 @@ function InputPhase({
             onChange={(e) => flow.setPrompt(e.target.value)}
             placeholder="e.g., A workflow that enriches customer data using my data-agent, validates the output, and sends a Slack notification on failure"
             rows={5}
-            className={cn(INPUT_CLASSES, "resize-y")}
+            className={cn(INPUT_CLASSES, "stg:resize-y")}
             onKeyDown={(e) => {
               if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                 e.preventDefault();
@@ -222,22 +222,22 @@ function InputPhase({
               }
             }}
           />
-          <p className="text-[0.7rem] text-muted-foreground">
+          <p className="stg:text-[0.7rem] stg:text-muted-foreground">
             Describe the goal, steps, and any specific agents or task kinds to
             use. The agent will discover available resources automatically.
           </p>
         </div>
       </div>
 
-      <div className="flex justify-end gap-2 border-t border-border px-6 py-3">
+      <div className="stg:flex stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-6 stg:py-3">
         <button
           type="button"
           onClick={onClose}
           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",
           )}
         >
           Cancel
@@ -247,10 +247,10 @@ function InputPhase({
           onClick={flow.generate}
           disabled={flow.prompt.trim().length < 10}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-            "bg-primary text-primary-foreground 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:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+            "stg:bg-primary stg:text-primary-foreground 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",
           )}
         >
           Generate
@@ -273,33 +273,33 @@ function StreamingPhase({
 }) {
   return (
     <>
-      <div className="border-b border-border px-6 py-4">
-        <div className="flex items-center gap-2">
-          <h3 className="text-base font-semibold text-foreground">
+      <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
+        <div className="stg:flex stg:items-center stg:gap-2">
+          <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
             Workflow Architect
           </h3>
-          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground">
             <SpinnerIcon />
             {flow.phase === "starting" ? "Starting…" : "Working…"}
           </span>
         </div>
-        <p className="mt-0.5 text-xs text-muted-foreground">
+        <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
           The agent is designing and validating your workflow
         </p>
       </div>
 
-      <div className="h-[55vh] overflow-hidden">
+      <div className="stg:h-[55vh] stg:overflow-hidden">
         <MessageThread
           executions={[]}
           activeStreamExecution={flow.execution}
           pendingUserMessage={
             flow.phase === "starting" ? flow.prompt : undefined
           }
-          className="h-full"
+          className="stg:h-full"
         />
       </div>
 
-      <div className="flex justify-end gap-2 border-t border-border px-6 py-3">
+      <div className="stg:flex stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-6 stg:py-3">
         <button
           type="button"
           onClick={() => {
@@ -307,10 +307,10 @@ function StreamingPhase({
             onClose();
           }}
           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",
           )}
         >
           Cancel
@@ -336,19 +336,19 @@ function ResultPhase({
 
   return (
     <>
-      <div className="border-b border-border px-6 py-4">
-        <h3 className="text-base font-semibold text-foreground">
+      <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
+        <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
           Generated Workflow
         </h3>
-        <p className="mt-0.5 text-xs text-muted-foreground">
+        <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">
           Review the generated workflow before creating it
         </p>
       </div>
 
-      <div className="max-h-[65vh] overflow-y-auto px-6 py-4">
+      <div className="stg:max-h-[65vh] stg:overflow-y-auto stg:px-6 stg:py-4">
         {flow.error && (
           <div
-            className="mb-4 rounded-md border border-destructive bg-destructive-muted px-3 py-2 text-sm text-destructive"
+            className="stg:mb-4 stg:rounded-md stg:border stg:border-destructive stg:bg-destructive-muted stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
             role="alert"
           >
             {flow.error}
@@ -356,11 +356,11 @@ function ResultPhase({
         )}
 
         {flow.explanation && (
-          <div className="mb-4">
-            <h4 className="mb-1 text-xs font-medium text-muted-foreground">
+          <div className="stg:mb-4">
+            <h4 className="stg:mb-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
               Explanation
             </h4>
-            <p className="whitespace-pre-wrap text-sm text-foreground">
+            <p className="stg:whitespace-pre-wrap stg:text-sm stg:text-foreground">
               {flow.explanation}
             </p>
           </div>
@@ -368,26 +368,26 @@ function ResultPhase({
 
         {flow.extractedYaml && (
           <div>
-            <h4 className="mb-1 text-xs font-medium text-muted-foreground">
+            <h4 className="stg:mb-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
               Workflow Structure
             </h4>
-            <div className="h-[280px] overflow-hidden rounded-md border border-border">
+            <div className="stg:h-[280px] stg:overflow-hidden stg:rounded-md stg:border stg:border-border">
               <WorkflowDiffGraph
                 beforeYaml=""
                 afterYaml={flow.extractedYaml}
               />
             </div>
 
-            <div className="mt-3">
+            <div className="stg:mt-3">
               <button
                 type="button"
                 onClick={() => setShowYaml((v) => !v)}
-                className="text-xs font-medium text-muted-foreground hover:text-foreground"
+                className="stg:text-xs stg:font-medium stg:text-muted-foreground stg:hover:text-foreground"
               >
                 {showYaml ? "▾ Hide YAML" : "▸ View YAML"}
               </button>
               {showYaml && (
-                <pre className="mt-1 max-h-60 overflow-auto rounded-md border border-border bg-muted p-3 text-xs leading-relaxed text-foreground">
+                <pre className="stg:mt-1 stg:max-h-60 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted stg:p-3 stg:text-xs stg:leading-relaxed stg:text-foreground">
                   {flow.extractedYaml}
                 </pre>
               )}
@@ -396,31 +396,31 @@ function ResultPhase({
         )}
       </div>
 
-      <div className="flex justify-between border-t border-border px-6 py-3">
+      <div className="stg:flex stg:justify-between stg:border-t stg:border-border stg:px-6 stg:py-3">
         <button
           type="button"
           onClick={onClose}
           disabled={isApplying}
           className={cn(
-            "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-            "text-muted-foreground hover:text-foreground",
-            "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:font-medium stg:transition-colors",
+            "stg:text-muted-foreground stg:hover:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         >
           Close
         </button>
-        <div className="flex gap-2">
+        <div className="stg:flex stg:gap-2">
           <button
             type="button"
             onClick={flow.reset}
             disabled={isApplying}
             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",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "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",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Try Again
@@ -430,10 +430,10 @@ function ResultPhase({
             onClick={flow.createWorkflow}
             disabled={isApplying}
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-              "bg-primary text-primary-foreground 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:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:transition-colors",
+              "stg:bg-primary stg:text-primary-foreground 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",
             )}
           >
             {isApplying && <SpinnerIcon />}
@@ -458,30 +458,30 @@ function ErrorPhase({
 }) {
   return (
     <>
-      <div className="border-b border-border px-6 py-4">
-        <h3 className="text-base font-semibold text-foreground">
+      <div className="stg:border-b stg:border-border stg:px-6 stg:py-4">
+        <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
           Generation Failed
         </h3>
       </div>
 
-      <div className="px-6 py-6">
+      <div className="stg:px-6 stg:py-6">
         <div
-          className="rounded-md border border-destructive bg-destructive-muted px-3 py-2 text-sm text-destructive"
+          className="stg:rounded-md stg:border stg:border-destructive stg:bg-destructive-muted stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
           role="alert"
         >
           {flow.error ?? "An unexpected error occurred."}
         </div>
       </div>
 
-      <div className="flex justify-end gap-2 border-t border-border px-6 py-3">
+      <div className="stg:flex stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-6 stg:py-3">
         <button
           type="button"
           onClick={onClose}
           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",
           )}
         >
           Close
@@ -490,9 +490,9 @@ function ErrorPhase({
           type="button"
           onClick={flow.reset}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "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:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           Try Again
@@ -516,7 +516,7 @@ function SpinnerIcon({ size = 14 }: { readonly size?: number }) {
       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/workflow/WorkflowArtifactDocument.tsx

@@ -93,39 +93,39 @@ export function WorkflowArtifactDocument({
     <div
       role="article"
       aria-label={`Artifact ${displayName}`}
-      className={cn("flex min-h-0 min-w-0 flex-1 flex-col", className)}
+      className={cn("stg:flex stg:min-h-0 stg:min-w-0 stg:flex-1 stg:flex-col", className)}
     >
       {/* Toolbar sticks to the top of the editor pane's scroll container so the
           file identity and actions stay visible while the body scrolls. Rows
           wrap on narrow panes (min-w-0 + flex-wrap) rather than forcing a
           horizontal scrollbar — the DD-20 reflow contract. */}
-      <div className="sticky top-0 z-10 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border bg-background px-4 py-2">
-        <span className="shrink-0 text-muted-foreground">
+      <div className="stg:sticky stg:top-0 stg:z-10 stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-x-3 stg:gap-y-1.5 stg:border-b stg:border-border stg:bg-background stg:px-4 stg:py-2">
+        <span className="stg:shrink-0 stg:text-muted-foreground">
           <FileIcon />
         </span>
-        <span className="truncate text-sm font-medium text-foreground">
+        <span className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {displayName}
         </span>
-        <span className="shrink-0 text-[0.65rem] tabular-nums text-muted-foreground-faint">
+        <span className="stg:shrink-0 stg:text-[0.65rem] stg:tabular-nums stg:text-muted-foreground-faint">
           {formatArtifactSize(sizeBytes)}
         </span>
         {specContentType && (
-          <span className="shrink-0 text-[0.65rem] text-muted-foreground">
+          <span className="stg:shrink-0 stg:text-[0.65rem] stg:text-muted-foreground">
             {specContentType}
           </span>
         )}
 
-        <div className="ml-auto flex min-w-0 flex-wrap items-center gap-3">
+        <div className="stg:ml-auto stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-3">
           {showCopy && (
             <button
               type="button"
               onClick={copy}
               aria-label={copied ? "Copied to clipboard" : "Copy content"}
               className={cn(
-                "inline-flex items-center gap-1.5 text-xs font-medium transition-colors",
+                "stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:transition-colors",
                 copied
-                  ? "text-success"
-                  : "text-muted-foreground hover:text-foreground",
+                  ? "stg:text-success"
+                  : "stg:text-muted-foreground stg:hover:text-foreground",
                 FOCUS_RING_CLASSES,
               )}
             >
@@ -138,7 +138,7 @@ export function WorkflowArtifactDocument({
             onClick={() => download(id)}
             disabled={isDownloading || !id}
             className={cn(
-              "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+              "stg:inline-flex stg:items-center stg:gap-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:disabled:opacity-50",
               FOCUS_RING_CLASSES,
             )}
           >
@@ -148,7 +148,7 @@ export function WorkflowArtifactDocument({
         </div>
       </div>
 
-      <div className="min-w-0">
+      <div className="stg:min-w-0">
         <ArtifactFileContent
           fileName={displayName}
           content={content}
@@ -159,7 +159,7 @@ export function WorkflowArtifactDocument({
         />
       </div>
 
-      <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+      <div role="status" aria-live="polite" aria-atomic="true" className="stg:sr-only">
         {copied && "Content copied to clipboard"}
       </div>
     </div>
@@ -171,7 +171,7 @@ export function WorkflowArtifactDocument({
 // ---------------------------------------------------------------------------
 
 const FOCUS_RING_CLASSES =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm";
 
 // ---------------------------------------------------------------------------
 // Inline SVG icons (SDK independence — no lucide dependency)
@@ -207,7 +207,7 @@ function CopyIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
@@ -227,7 +227,7 @@ function DownloadIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M6 1.5V8.5" />
@@ -248,7 +248,7 @@ function CheckIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M2 6.5L4.5 9L10 3" />

package/src/workflow/WorkflowCanvasEditor.tsx

@@ -542,18 +542,18 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
   }, [canvas.selection, canvas.graph]);
 
   const fallback = loadingFallback ?? (
-    <div className="flex h-full w-full items-center justify-center text-sm text-[var(--stgm-muted-foreground,#737373)]">
+    <div className="stg:flex stg:h-full stg:w-full stg:items-center stg:justify-center stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]">
       Loading canvas…
     </div>
   );
 
   if (canvas.error) {
     return (
-      <div className={cn("flex h-full w-full flex-col items-center justify-center gap-2 p-4", className)}>
-        <span className="text-sm font-medium text-[var(--stgm-destructive,#ef4444)]">
+      <div className={cn("stg:flex stg:h-full stg:w-full stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:p-4", className)}>
+        <span className="stg:text-sm stg:font-medium stg:text-[var(--stgm-destructive,#ef4444)]">
           Failed to parse workflow
         </span>
-        <span className="max-w-md text-center text-xs text-[var(--stgm-muted-foreground,#737373)]">
+        <span className="stg:max-w-md stg:text-center stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
           {canvas.error}
         </span>
       </div>
@@ -565,16 +565,16 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
   return (
     <div
       ref={containerRef}
-      className={cn("stgm relative flex h-full w-full", className)}
+      className={cn("stgm stg:relative stg:flex stg:h-full stg:w-full", className)}
       tabIndex={-1}
     >
-      <div className="sr-only" aria-live="polite" aria-atomic="true">
+      <div className="stg:sr-only" aria-live="polite" aria-atomic="true">
         {selectionAnnouncement}
       </div>
 
       {showPalette && !paletteCollapsed && <WorkflowTaskPalette />}
 
-      <div className="relative flex-1">
+      <div className="stg:relative stg:flex-1">
         {showPalette && (
           <PaletteToggle
             collapsed={paletteCollapsed}
@@ -617,12 +617,12 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
             />
           </Suspense>
           {!hasGraph && (
-            <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-              <div className="flex flex-col items-center gap-2 text-center">
-                <span className="text-sm text-[var(--stgm-muted-foreground,#737373)]">
+            <div className="stg:pointer-events-none stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center">
+              <div className="stg:flex stg:flex-col stg:items-center stg:gap-2 stg:text-center">
+                <span className="stg:text-sm stg:text-[var(--stgm-muted-foreground,#737373)]">
                   No workflow to visualize
                 </span>
-                <span className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+                <span className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
                   Drag a task from the palette to get started
                 </span>
               </div>
@@ -675,7 +675,7 @@ const WorkflowCanvasEditorInner = memo(function WorkflowCanvasEditorInner({
       </div>
 
       {showInspector && hasGraph && (
-        <div className="w-[280px] min-w-[240px] overflow-hidden border-l border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))]">
+        <div className="stg:w-[280px] stg:min-w-[240px] stg:overflow-hidden stg:border-l stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))]">
           <WorkflowInspectorPanel
             selection={canvas.selection}
             graph={canvas.graph}
@@ -736,9 +736,9 @@ function PaletteToggle({
       type="button"
       onClick={onToggle}
       className={cn(
-        "absolute left-2 z-10 rounded border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] p-1 shadow-sm",
-        "hover:bg-[var(--stgm-muted,#f5f5f5)] active:bg-[var(--stgm-accent,#e5e5e5)]",
-        collapsed ? "top-2" : "bottom-2",
+        "stg:absolute stg:left-2 stg:z-10 stg:rounded stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:p-1 stg:shadow-sm",
+        "stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:active:bg-[var(--stgm-accent,#e5e5e5)]",
+        collapsed ? "stg:top-2" : "stg:bottom-2",
       )}
       aria-label={collapsed ? "Show task palette" : "Hide task palette"}
       title={collapsed ? "Show task palette" : "Hide task palette"}
@@ -752,7 +752,7 @@ function PaletteToggle({
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className="text-[var(--stgm-foreground,#1a1a2e)]"
+        className="stg:text-[var(--stgm-foreground,#1a1a2e)]"
       >
         {collapsed ? (
           <>
@@ -799,35 +799,35 @@ function CanvasToolbar({
   isSaving?: boolean;
 }) {
   const btnClass =
-    "rounded border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-2 py-1 text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)] shadow-sm hover:bg-[var(--stgm-muted,#f5f5f5)] active:bg-[var(--stgm-accent,#e5e5e5)] disabled:cursor-not-allowed disabled:opacity-40";
+    "stg:rounded stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:shadow-sm stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:active:bg-[var(--stgm-accent,#e5e5e5)] stg:disabled:cursor-not-allowed stg:disabled:opacity-40";
 
   return (
-    <div className="absolute left-2 top-2 z-10 flex items-center gap-1">
+    <div className="stg:absolute stg:left-2 stg:top-2 stg:z-10 stg:flex stg:items-center stg:gap-1">
       <button type="button" onClick={onUndo} disabled={!canUndo} className={btnClass} aria-label="Undo" title={`Undo (${TOOLBAR_SHORTCUTS.undo})`}>
         Undo
       </button>
       <button type="button" onClick={onRedo} disabled={!canRedo} className={btnClass} aria-label="Redo" title={`Redo (${TOOLBAR_SHORTCUTS.redo})`}>
         Redo
       </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" />
       <button type="button" onClick={onAutoLayout} className={btnClass} aria-label="Auto-layout" title="Auto-layout">
         Auto-layout
       </button>
       {onSave && (
         <>
-          <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={onSave}
             disabled={!isDirty || isSaving}
-            className="rounded bg-[var(--stgm-primary,#6366f1)] px-2.5 py-1 text-xs font-medium text-[var(--stgm-primary-foreground,#fff)] shadow-sm hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+            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:shadow-sm stg:hover:opacity-90 stg:disabled:cursor-not-allowed stg:disabled:opacity-40"
           >
             {isSaving ? "Saving\u2026" : "Save"}
           </button>
         </>
       )}
       {isDirty && !onSave && (
-        <span className="ml-1 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+        <span className="stg:ml-1 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
           Modified
         </span>
       )}

package/src/workflow/WorkflowCanvasInner.tsx

@@ -139,16 +139,16 @@ export function WorkflowCanvasInner({
       minZoom={0.2}
       maxZoom={3}
       proOptions={{ hideAttribution: true }}
-      className="h-full w-full"
+      className="stg:h-full stg:w-full"
     >
       <Controls
         showInteractive={false}
-        className="!border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-card,var(--stgm-background,#fff))] !shadow-sm [&>button]:!border-[var(--stgm-border-prominent,#d4d4d8)] [&>button]:!bg-[var(--stgm-card,var(--stgm-background,#fff))] [&>button]:!fill-[var(--stgm-foreground,#1a1a2e)] [&>button:hover]:!bg-[var(--stgm-muted,#f5f5f5)]"
+        className="stg:!border-[var(--stgm-border-prominent,#d4d4d8)] stg:!bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:!shadow-sm stg:[&>button]:!border-[var(--stgm-border-prominent,#d4d4d8)] stg:[&>button]:!bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:[&>button]:!fill-[var(--stgm-foreground,#1a1a2e)] stg:[&>button:hover]:!bg-[var(--stgm-muted,#f5f5f5)]"
       />
       <MiniMap
         nodeColor={minimapNodeColor}
         maskColor="var(--stgm-muted, rgba(245, 245, 245, 0.7))"
-        className="!border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-card,var(--stgm-background,#fff))]"
+        className="stg:!border-[var(--stgm-border-prominent,#d4d4d8)] stg:!bg-[var(--stgm-card,var(--stgm-background,#fff))]"
       />
       <Background
         variant={BackgroundVariant.Dots}