@stigmer/react 3.10.0 → 3.11.0

package/src/workflow/inspector/tabs/AdvancedTab.tsx

@@ -38,19 +38,19 @@ export const AdvancedTab = memo(function AdvancedTab({
   );
 
   return (
-    <div className="flex flex-col gap-4 px-3 py-3">
+    <div className="stg:flex stg:flex-col stg:gap-4 stg:px-3 stg:py-3">
       {!isBranching && (
-        <section className="flex flex-col gap-1.5">
-          <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+        <section className="stg:flex stg:flex-col stg:gap-1.5">
+          <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
             Flow control
           </h4>
-          <p className="text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+          <p className="stg:text-[10px] stg:leading-tight stg:text-[var(--stgm-muted-foreground,#737373)]">
             Override the default sequential execution order.
           </p>
           <select
             value={currentFlow}
             onChange={handleFlowChange}
-            className="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+            className="stg:w-full stg:rounded-md stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-2 stg:py-1.5 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)] stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
           >
             <option value="">Next (implicit sequential)</option>
             <option value="end">End workflow</option>
@@ -64,16 +64,16 @@ export const AdvancedTab = memo(function AdvancedTab({
       )}
 
       {isBranching && (
-        <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
           Flow routing for this task is managed through its branch configuration in the Configure tab.
         </p>
       )}
 
-      <section className="flex flex-col gap-1.5">
-        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+      <section className="stg:flex stg:flex-col stg:gap-1.5">
+        <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
           Task metadata
         </h4>
-        <div className="flex flex-col gap-1 text-[11px]">
+        <div className="stg:flex stg:flex-col stg:gap-1 stg:text-[11px]">
           <MetadataRow label="ID" value={node.id} />
           <MetadataRow label="Kind" value={kindString} />
           <MetadataRow label="Category" value={node.category} />
@@ -87,9 +87,9 @@ export const AdvancedTab = memo(function AdvancedTab({
 
 function MetadataRow({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex items-baseline gap-2">
-      <span className="shrink-0 text-[var(--stgm-muted-foreground,#737373)]">{label}:</span>
-      <span className="min-w-0 break-all font-mono text-[var(--stgm-foreground,#1a1a2e)]">{value}</span>
+    <div className="stg:flex stg:items-baseline stg:gap-2">
+      <span className="stg:shrink-0 stg:text-[var(--stgm-muted-foreground,#737373)]">{label}:</span>
+      <span className="stg:min-w-0 stg:break-all stg:font-mono stg:text-[var(--stgm-foreground,#1a1a2e)]">{value}</span>
     </div>
   );
 }

package/src/workflow/inspector/tabs/BranchesTab.tsx

@@ -95,19 +95,19 @@ function SwitchCaseBranches({
   );
 
   return (
-    <div className="flex flex-col gap-3 px-3 py-3">
-      <div className="flex items-center justify-between">
-        <h3 className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+    <div className="stg:flex stg:flex-col stg:gap-3 stg:px-3 stg:py-3">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)]">
           Cases ({cases.length})
         </h3>
       </div>
 
       {cases.length === 0 ? (
-        <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">
           No cases defined. Add a case to create conditional branches.
         </p>
       ) : (
-        <div className="flex flex-col gap-1.5">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
           {cases.map((caseEntry, idx) => {
             const isDefault = !caseEntry.when;
             const targetEdge = edges.find((e) => e.sourceHandle === `case_${caseEntry.name}`);
@@ -115,19 +115,19 @@ function SwitchCaseBranches({
               <div
                 key={caseEntry.name}
                 className={cn(
-                  "group/case flex items-center gap-2 rounded-md border px-2 py-1.5",
+                  "stg:group/case stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:px-2 stg:py-1.5",
                   isDefault
-                    ? "border-dashed border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-muted,#f5f5f5)]"
-                    : "border-[var(--stgm-border,#e5e5e5)]",
+                    ? "stg:border-dashed stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-muted,#f5f5f5)]"
+                    : "stg:border-[var(--stgm-border,#e5e5e5)]",
                 )}
               >
                 {/* Reorder controls */}
-                <div className="flex flex-col gap-0.5 opacity-0 group-hover/case:opacity-100 transition-opacity">
+                <div className="stg:flex stg:flex-col stg:gap-0.5 stg:opacity-0 stg:group-hover/case:opacity-100 stg:transition-opacity">
                   <button
                     type="button"
                     onClick={() => handleMoveUp(idx)}
                     disabled={idx === 0}
-                    className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                    className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                     aria-label={`Move ${caseEntry.name} up`}
                   >
                     <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -138,7 +138,7 @@ function SwitchCaseBranches({
                     type="button"
                     onClick={() => handleMoveDown(idx)}
                     disabled={idx === cases.length - 1}
-                    className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                    className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                     aria-label={`Move ${caseEntry.name} down`}
                   >
                     <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -148,24 +148,24 @@ function SwitchCaseBranches({
                 </div>
 
                 {/* Case info */}
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-1.5">
-                    <span className="text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)] truncate">
+                <div className="stg:min-w-0 stg:flex-1">
+                  <div className="stg:flex stg:items-center stg:gap-1.5">
+                    <span className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate">
                       {caseEntry.name}
                     </span>
                     {isDefault && (
-                      <span className="shrink-0 rounded-sm bg-[var(--stgm-muted,#f5f5f5)] border border-[var(--stgm-border,#e5e5e5)] px-1 py-px text-[9px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+                      <span className="stg:shrink-0 stg:rounded-sm stg:bg-[var(--stgm-muted,#f5f5f5)] stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:px-1 stg:py-px stg:text-[9px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                         default
                       </span>
                     )}
                   </div>
                   {caseEntry.when && (
-                    <p className="mt-0.5 text-[10px] font-mono text-[var(--stgm-muted-foreground,#737373)] truncate">
+                    <p className="stg:mt-0.5 stg:text-[10px] stg:font-mono stg:text-[var(--stgm-muted-foreground,#737373)] stg:truncate">
                       {caseEntry.when}
                     </p>
                   )}
                   {targetEdge && (
-                    <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+                    <p className="stg:mt-0.5 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
                       → {targetEdge.target}
                     </p>
                   )}
@@ -175,7 +175,7 @@ function SwitchCaseBranches({
                 <button
                   type="button"
                   onClick={() => handleRemove(caseEntry.name)}
-                  className="shrink-0 opacity-0 group-hover/case:opacity-100 transition-opacity text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-destructive,#ef4444)]"
+                  className="stg:shrink-0 stg:opacity-0 stg:group-hover/case:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
                   aria-label={`Remove case ${caseEntry.name}`}
                   title="Remove case"
                 >
@@ -270,30 +270,30 @@ function ForkBranches({
   }, [renamingIdx, renameValue, branches, mutations, node.id]);
 
   return (
-    <div className="flex flex-col gap-3 px-3 py-3">
+    <div className="stg:flex stg:flex-col stg:gap-3 stg:px-3 stg:py-3">
       {/* Join policy */}
       <fieldset>
-        <legend className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5">
+        <legend className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:mb-1.5">
           Join policy
         </legend>
-        <div className="flex flex-col gap-1.5">
-          <label className="flex items-center gap-2 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] cursor-pointer">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
+          <label className="stg:flex stg:items-center stg:gap-2 stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:cursor-pointer">
             <input
               type="radio"
               name={`join-policy-${node.id}`}
               checked={!compete}
               onChange={() => handleSetCompete(false)}
-              className="h-3 w-3 accent-[var(--stgm-primary,#6366f1)]"
+              className="stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
             />
             Wait for all branches
           </label>
-          <label className="flex items-center gap-2 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] cursor-pointer">
+          <label className="stg:flex stg:items-center stg:gap-2 stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:cursor-pointer">
             <input
               type="radio"
               name={`join-policy-${node.id}`}
               checked={compete}
               onChange={() => handleSetCompete(true)}
-              className="h-3 w-3 accent-[var(--stgm-primary,#6366f1)]"
+              className="stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
             />
             Race mode (first branch wins)
           </label>
@@ -302,23 +302,23 @@ function ForkBranches({
 
       {/* Branch listing */}
       <div>
-        <h3 className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:mb-1.5">
           Parallel branches ({branches.length})
         </h3>
 
-        <div className="flex flex-col gap-1.5">
+        <div className="stg:flex stg:flex-col stg:gap-1.5">
           {branches.map((branch, idx) => (
             <div
               key={branch.name}
-              className="group/branch flex items-center gap-2 rounded-md border border-[var(--stgm-border,#e5e5e5)] px-2 py-1.5"
+              className="stg:group/branch stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:px-2 stg:py-1.5"
             >
               {/* Reorder */}
-              <div className="flex flex-col gap-0.5 opacity-0 group-hover/branch:opacity-100 transition-opacity">
+              <div className="stg:flex stg:flex-col stg:gap-0.5 stg:opacity-0 stg:group-hover/branch:opacity-100 stg:transition-opacity">
                 <button
                   type="button"
                   onClick={() => handleMoveUp(idx)}
                   disabled={idx === 0}
-                  className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                  className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                   aria-label={`Move ${branch.name} up`}
                 >
                   <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -329,7 +329,7 @@ function ForkBranches({
                   type="button"
                   onClick={() => handleMoveDown(idx)}
                   disabled={idx === branches.length - 1}
-                  className="text-[var(--stgm-muted-foreground,#737373)] disabled:opacity-30 hover:text-[var(--stgm-foreground,#1a1a2e)]"
+                  className="stg:text-[var(--stgm-muted-foreground,#737373)] stg:disabled:opacity-30 stg:hover:text-[var(--stgm-foreground,#1a1a2e)]"
                   aria-label={`Move ${branch.name} down`}
                 >
                   <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
@@ -339,7 +339,7 @@ function ForkBranches({
               </div>
 
               {/* Branch info */}
-              <div className="min-w-0 flex-1">
+              <div className="stg:min-w-0 stg:flex-1">
                 {renamingIdx === idx ? (
                   <input
                     type="text"
@@ -351,18 +351,18 @@ function ForkBranches({
                       if (e.key === "Escape") setRenamingIdx(null);
                     }}
                     autoFocus
-                    className="w-full rounded border border-[var(--stgm-ring,#3b82f6)] bg-[var(--stgm-background,#fff)] px-1 py-0.5 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] outline-none"
+                    className="stg:w-full stg:rounded stg:border stg:border-[var(--stgm-ring,#3b82f6)] stg:bg-[var(--stgm-background,#fff)] stg:px-1 stg:py-0.5 stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:outline-none"
                   />
                 ) : (
                   <span
-                    className="text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)] truncate block cursor-text"
+                    className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate stg:block stg:cursor-text"
                     onDoubleClick={() => startRename(idx, branch.name)}
                     title="Double-click to rename"
                   >
                     {branch.name}
                   </span>
                 )}
-                <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+                <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
                   {branch.taskCount} {branch.taskCount === 1 ? "task" : "tasks"}
                 </span>
               </div>
@@ -372,7 +372,7 @@ function ForkBranches({
                 type="button"
                 onClick={() => handleRemove(branch.name)}
                 disabled={branches.length <= 2}
-                className="shrink-0 opacity-0 group-hover/branch:opacity-100 transition-opacity text-[var(--stgm-muted-foreground,#737373)] hover:text-[var(--stgm-destructive,#ef4444)] disabled:opacity-30 disabled:cursor-not-allowed"
+                className="stg:shrink-0 stg:opacity-0 stg:group-hover/branch:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)] stg:disabled:opacity-30 stg:disabled:cursor-not-allowed"
                 aria-label={`Remove branch ${branch.name}`}
                 title={branches.length <= 2 ? "Fork requires at least 2 branches" : "Remove branch"}
               >

package/src/workflow/inspector/tabs/CatchTab.tsx

@@ -73,27 +73,27 @@ export const CatchTab = memo(function CatchTab({ node, mutations }: CatchTabProp
   }, [mutations, node.id]);
 
   return (
-    <div className="flex flex-col gap-4 px-3 py-3">
+    <div className="stg:flex stg:flex-col stg:gap-4 stg:px-3 stg:py-3">
       {/* Protected (try) tasks */}
       <section>
-        <h3 className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5">
+        <h3 className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:mb-1.5">
           Protected tasks ({tryTasks.length})
         </h3>
         {tryTasks.length === 0 ? (
-          <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">
+          <p className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">
             No tasks in the try block.
           </p>
         ) : (
-          <div className="flex flex-col gap-1">
+          <div className="stg:flex stg:flex-col stg:gap-1">
             {tryTasks.map((task, idx) => (
               <div
                 key={`${task.name}-${idx}`}
-                className="flex items-center gap-2 rounded border border-[var(--stgm-border,#e5e5e5)] px-2 py-1"
+                className="stg:flex stg:items-center stg:gap-2 stg:rounded stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:px-2 stg:py-1"
               >
-                <span className="text-[10px] font-mono text-[var(--stgm-muted-foreground,#737373)]">
+                <span className="stg:text-[10px] stg:font-mono stg:text-[var(--stgm-muted-foreground,#737373)]">
                   {task.kind}
                 </span>
-                <span className="text-[11px] text-[var(--stgm-foreground,#1a1a2e)] truncate">
+                <span className="stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate">
                   {task.name}
                 </span>
               </div>
@@ -105,14 +105,14 @@ export const CatchTab = memo(function CatchTab({ node, mutations }: CatchTabProp
       {/* Catch configuration */}
       {catchBlock ? (
         <section>
-          <h3 className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)] mb-1.5">
+          <h3 className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:mb-1.5">
             Catch handler
           </h3>
 
-          <div className="flex flex-col gap-2.5">
+          <div className="stg:flex stg:flex-col stg:gap-2.5">
             {/* Error variable */}
             <div>
-              <label className="mb-1 block text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)]">
+              <label className="stg:mb-1 stg:block stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)]">
                 Error variable name
               </label>
               <input
@@ -121,45 +121,45 @@ export const CatchTab = memo(function CatchTab({ node, mutations }: CatchTabProp
                 onChange={(e) => setErrorVar(e.target.value)}
                 onBlur={handleErrorVarBlur}
                 onKeyDown={(e) => { if (e.key === "Enter") handleErrorVarBlur(); }}
-                className="w-full rounded border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                className="stg:w-full stg:rounded stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] stg:px-2 stg:py-1.5 stg:text-xs stg:font-mono stg:text-[var(--stgm-foreground,#1a1a2e)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
                 placeholder="error"
               />
-              <p className="mt-0.5 text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
-                Access in catch block as <code className="font-mono">${"${"}$context.{errorVar}{"}"}</code>
+              <p className="stg:mt-0.5 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
+                Access in catch block as <code className="stg:font-mono">${"${"}$context.{errorVar}{"}"}</code>
               </p>
             </div>
 
             {/* Compensate toggle */}
-            <label className="flex items-center gap-2 text-[11px] text-[var(--stgm-foreground,#1a1a2e)] cursor-pointer">
+            <label className="stg:flex stg:items-center stg:gap-2 stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:cursor-pointer">
               <input
                 type="checkbox"
                 checked={catchBlock.compensate}
                 onChange={handleCompensateToggle}
-                className="h-3 w-3 accent-[var(--stgm-primary,#6366f1)]"
+                className="stg:h-3 stg:w-3 stg:accent-[var(--stgm-primary,#6366f1)]"
               />
               Run compensation before catch block
             </label>
 
             {/* Catch tasks */}
             <div>
-              <h4 className="text-[10px] font-medium text-[var(--stgm-muted-foreground,#737373)] mb-1">
+              <h4 className="stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:mb-1">
                 Catch tasks ({catchBlock.tasks.length})
               </h4>
               {catchBlock.tasks.length === 0 ? (
-                <p className="text-[10px] text-[var(--stgm-muted-foreground,#737373)] italic">
+                <p className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)] stg:italic">
                   No tasks in catch block
                 </p>
               ) : (
-                <div className="flex flex-col gap-1">
+                <div className="stg:flex stg:flex-col stg:gap-1">
                   {catchBlock.tasks.map((task, idx) => (
                     <div
                       key={`${task.name}-${idx}`}
-                      className="flex items-center gap-2 rounded border border-dashed border-[var(--stgm-border,#e5e5e5)] px-2 py-1"
+                      className="stg:flex stg:items-center stg:gap-2 stg:rounded stg:border stg:border-dashed stg:border-[var(--stgm-border,#e5e5e5)] stg:px-2 stg:py-1"
                     >
-                      <span className="text-[10px] font-mono text-[var(--stgm-muted-foreground,#737373)]">
+                      <span className="stg:text-[10px] stg:font-mono stg:text-[var(--stgm-muted-foreground,#737373)]">
                         {task.kind}
                       </span>
-                      <span className="text-[11px] text-[var(--stgm-foreground,#1a1a2e)] truncate">
+                      <span className="stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate">
                         {task.name}
                       </span>
                     </div>
@@ -172,7 +172,7 @@ export const CatchTab = memo(function CatchTab({ node, mutations }: CatchTabProp
             <button
               type="button"
               onClick={handleRemoveCatch}
-              className="mt-1 w-full rounded border border-[var(--stgm-destructive,#ef4444)]/30 px-2 py-1.5 text-[11px] font-medium text-[var(--stgm-destructive,#ef4444)] transition-colors hover:bg-[var(--stgm-destructive,#ef4444)]/10"
+              className="stg:mt-1 stg:w-full stg:rounded stg:border stg:border-[var(--stgm-destructive,#ef4444)]/30 stg:px-2 stg:py-1.5 stg:text-[11px] stg:font-medium stg:text-[var(--stgm-destructive,#ef4444)] stg:transition-colors stg:hover:bg-[var(--stgm-destructive,#ef4444)]/10"
             >
               Remove catch handler
             </button>
@@ -180,7 +180,7 @@ export const CatchTab = memo(function CatchTab({ node, mutations }: CatchTabProp
         </section>
       ) : (
         <section>
-          <p className="text-[11px] text-[var(--stgm-muted-foreground,#737373)]">
+          <p className="stg:text-[11px] stg:text-[var(--stgm-muted-foreground,#737373)]">
             No catch handler configured. Add one using the + button on the node.
           </p>
         </section>

package/src/workflow/inspector/tabs/ConfigureTab.tsx

@@ -53,7 +53,7 @@ export const ConfigureTab = memo(function ConfigureTab({
 
   if (isSwitchCase && mutations.onUpdateBranchRouting && mutations.onMigrateBranchHandle && mutations.onRemoveBranchEdges) {
     return (
-      <div className="px-3 py-3">
+      <div className="stg:px-3 stg:py-3">
         <BranchConditionBuilder
           nodeId={node.id}
           config={node.config}
@@ -76,7 +76,7 @@ export const ConfigureTab = memo(function ConfigureTab({
 
   if (isHumanInput && mutations.onUpdateBranchRouting && mutations.onMigrateBranchHandle && mutations.onRemoveBranchEdges) {
     return (
-      <div className="px-3 py-3">
+      <div className="stg:px-3 stg:py-3">
         <ApprovalFormBuilder
           nodeId={node.id}
           config={node.config}
@@ -109,7 +109,7 @@ export const ConfigureTab = memo(function ConfigureTab({
   }
 
   return (
-    <div className="px-3 py-4 text-xs text-[var(--stgm-muted-foreground,#737373)]">
+    <div className="stg:px-3 stg:py-4 stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
       No configurable fields for this task kind.
     </div>
   );

package/src/workflow/inspector/tabs/DataTab.tsx

@@ -36,14 +36,14 @@ export const DataTab = memo(function DataTab({
   }, [value, node.id, onUpdateExport]);
 
   return (
-    <div className="flex flex-col gap-4 px-3 py-3">
-      <section className="flex flex-col gap-1.5">
-        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+    <div className="stg:flex stg:flex-col stg:gap-4 stg:px-3 stg:py-3">
+      <section className="stg:flex stg:flex-col stg:gap-1.5">
+        <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
           Export
         </h4>
-        <p className="text-[10px] leading-tight text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:text-[10px] stg:leading-tight stg:text-[var(--stgm-muted-foreground,#737373)]">
           Save task output to the workflow context for downstream tasks.
-          Use <code className="rounded bg-[var(--stgm-muted,#f5f5f5)] px-1 text-[10px]">{"${ . }"}</code> to export the entire output.
+          Use <code className="stg:rounded stg:bg-[var(--stgm-muted,#f5f5f5)] stg:px-1 stg:text-[10px]">{"${ . }"}</code> to export the entire output.
         </p>
         <input
           type="text"
@@ -51,7 +51,7 @@ export const DataTab = memo(function DataTab({
           onChange={handleChange}
           onBlur={handleBlur}
           placeholder='e.g., ${ . } or ${ .fieldName }'
-          className="w-full rounded-md border border-[var(--stgm-border,#d4d4d8)] bg-[var(--stgm-background,#fff)] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] focus:outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+          className="stg:w-full stg:rounded-md stg:border stg:border-[var(--stgm-border,#d4d4d8)] stg:bg-[var(--stgm-background,#fff)] stg:px-2 stg:py-1.5 stg:text-xs stg:text-[var(--stgm-foreground,#1a1a2e)] stg:placeholder:text-[var(--stgm-muted-foreground,#a3a3a3)] stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
         />
       </section>
     </div>

package/src/workflow/inspector/tabs/DocsTab.tsx

@@ -21,27 +21,27 @@ export const DocsTab = memo(function DocsTab({ descriptor }: DocsTabProps) {
   const hasDocsUrl = !!descriptor.documentationUrl;
 
   return (
-    <div className="flex flex-col gap-4 px-3 py-3">
+    <div className="stg:flex stg:flex-col stg:gap-4 stg:px-3 stg:py-3">
       {descriptor.description && (
-        <section className="flex flex-col gap-1">
-          <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+        <section className="stg:flex stg:flex-col stg:gap-1">
+          <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
             Description
           </h4>
-          <p className="text-xs leading-relaxed text-[var(--stgm-foreground,#1a1a2e)]">
+          <p className="stg:text-xs stg:leading-relaxed stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {descriptor.description}
           </p>
         </section>
       )}
 
       {hasExamples && (
-        <section className="flex flex-col gap-2">
-          <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+        <section className="stg:flex stg:flex-col stg:gap-2">
+          <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
             YAML examples
           </h4>
           {descriptor.yamlExamples!.map((example, i) => (
             <pre
               key={i}
-              className="overflow-x-auto rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-muted,#f5f5f5)] p-2 text-[11px] leading-relaxed text-[var(--stgm-foreground,#1a1a2e)]"
+              className="stg:overflow-x-auto stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-muted,#f5f5f5)] stg:p-2 stg:text-[11px] stg:leading-relaxed stg:text-[var(--stgm-foreground,#1a1a2e)]"
             >
               <code>{example}</code>
             </pre>
@@ -50,15 +50,15 @@ export const DocsTab = memo(function DocsTab({ descriptor }: DocsTabProps) {
       )}
 
       {hasDocsUrl && (
-        <section className="flex flex-col gap-1">
-          <h4 className="text-[11px] font-semibold uppercase tracking-wide text-[var(--stgm-muted-foreground,#737373)]">
+        <section className="stg:flex stg:flex-col stg:gap-1">
+          <h4 className="stg:text-[11px] stg:font-semibold stg:uppercase stg:tracking-wide stg:text-[var(--stgm-muted-foreground,#737373)]">
             Documentation
           </h4>
           <a
             href={descriptor.documentationUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-xs font-medium text-[var(--stgm-primary,#6366f1)] hover:underline"
+            className="stg:text-xs stg:font-medium stg:text-[var(--stgm-primary,#6366f1)] stg:hover:underline"
           >
             View full documentation →
           </a>
@@ -66,7 +66,7 @@ export const DocsTab = memo(function DocsTab({ descriptor }: DocsTabProps) {
       )}
 
       {!hasExamples && !hasDocsUrl && !descriptor.description && (
-        <p className="text-xs text-[var(--stgm-muted-foreground,#737373)]">
+        <p className="stg:text-xs stg:text-[var(--stgm-muted-foreground,#737373)]">
           No documentation available for this task kind.
         </p>
       )}