@stigmer/react 3.10.0 → 3.11.0

package/src/workflow/node-shell/NodeActions.tsx

@@ -157,7 +157,7 @@ export const NodeActions = memo(function NodeActions({
       {/* Selection toolbar — auto-shown by React Flow when selected */}
       <NodeToolbar position={Position.Top} offset={8} align="center">
         <div
-          className="stgm flex items-center gap-0.5 rounded-md border border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-popover,var(--stgm-background,#fff))] p-0.5 shadow-md"
+          className="stgm stg:flex stg:items-center stg:gap-0.5 stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-popover,var(--stgm-background,#fff))] stg:p-0.5 stg:shadow-md"
           role="toolbar"
           aria-label="Task actions"
           aria-orientation="horizontal"
@@ -175,7 +175,7 @@ export const NodeActions = memo(function NodeActions({
             title="Add task after"
             onClick={handleToolbarAddClick}
           />
-          <div className="mx-0.5 h-4 w-px bg-[var(--stgm-border,#e5e5e5)]" aria-hidden="true" />
+          <div className="stg:mx-0.5 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#e5e5e5)]" aria-hidden="true" />
           <ToolbarButton
             icon={<TrashIcon />}
             label={`Delete task ${taskName}`}
@@ -191,9 +191,9 @@ export const NodeActions = memo(function NodeActions({
         type="button"
         onClick={handleDelete}
         className={cn(
-          "absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] text-[var(--stgm-muted-foreground,#737373)] shadow-sm transition-all",
-          "hover:border-[var(--stgm-destructive,#ef4444)] hover:bg-[var(--stgm-destructive,#ef4444)] hover:text-[var(--stgm-primary-foreground,#fff)]",
-          "scale-75 opacity-0 group-hover:scale-100 group-hover:opacity-100",
+          "stg:absolute stg:-right-2 stg:-top-2 stg:z-10 stg:flex stg:h-5 stg:w-5 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:text-[var(--stgm-muted-foreground,#737373)] stg:shadow-sm stg:transition-all",
+          "stg:hover:border-[var(--stgm-destructive,#ef4444)] stg:hover:bg-[var(--stgm-destructive,#ef4444)] stg:hover:text-[var(--stgm-primary-foreground,#fff)]",
+          "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
         )}
         aria-label={`Delete task ${taskName}`}
         title="Delete task"
@@ -209,9 +209,9 @@ export const NodeActions = memo(function NodeActions({
         type="button"
         onClick={handleHoverAddClick}
         className={cn(
-          "absolute -bottom-3 left-1/2 z-10 flex h-5 w-5 -translate-x-1/2 items-center justify-center rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] text-[var(--stgm-muted-foreground,#737373)] shadow-sm transition-all",
-          "hover:border-[var(--stgm-primary,#6366f1)] hover:bg-[var(--stgm-primary,#6366f1)] hover:text-[var(--stgm-primary-foreground,#fff)]",
-          "scale-75 opacity-0 group-hover:scale-100 group-hover:opacity-100",
+          "stg:absolute stg:-bottom-3 stg:left-1/2 stg:z-10 stg:flex stg:h-5 stg:w-5 stg:-translate-x-1/2 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:text-[var(--stgm-muted-foreground,#737373)] stg:shadow-sm stg:transition-all",
+          "stg:hover:border-[var(--stgm-primary,#6366f1)] stg:hover:bg-[var(--stgm-primary,#6366f1)] stg:hover:text-[var(--stgm-primary-foreground,#fff)]",
+          "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
         )}
         aria-label={`Add task after ${taskName}`}
         title="Add task"
@@ -238,9 +238,9 @@ export const NodeActions = memo(function NodeActions({
             type="button"
             onClick={() => setBranchPopoverOpen(true)}
             className={cn(
-              "absolute -bottom-3 left-1/2 z-10 flex h-5 -translate-x-1/2 items-center justify-center rounded-full border border-[var(--stgm-border-prominent,#d4d4d8)] bg-[var(--stgm-card,var(--stgm-background,#fff))] px-2 text-[9px] font-medium text-[var(--stgm-muted-foreground,#737373)] shadow-sm transition-all",
-              "hover:border-[var(--stgm-primary,#6366f1)] hover:bg-[var(--stgm-primary,#6366f1)] hover:text-[var(--stgm-primary-foreground,#fff)]",
-              "scale-75 opacity-0 group-hover:scale-100 group-hover:opacity-100",
+              "stg:absolute stg:-bottom-3 stg:left-1/2 stg:z-10 stg:flex stg:h-5 stg:-translate-x-1/2 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-2 stg:text-[9px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:shadow-sm stg:transition-all",
+              "stg:hover:border-[var(--stgm-primary,#6366f1)] stg:hover:bg-[var(--stgm-primary,#6366f1)] stg:hover:text-[var(--stgm-primary-foreground,#fff)]",
+              "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
             )}
             aria-label={
               branchMode === "switch-case"
@@ -279,13 +279,13 @@ export const NodeActions = memo(function NodeActions({
 // ---------------------------------------------------------------------------
 
 const TOOLBAR_BTN_CLASS = cn(
-  "flex h-7 w-7 items-center justify-center rounded text-[var(--stgm-popover-foreground,var(--stgm-foreground,#1a1a2e))] outline-none transition-colors",
-  "hover:bg-[var(--stgm-accent,#e5e5e5)] focus-visible:ring-1 focus-visible:ring-[var(--stgm-ring,#3b82f6)]",
+  "stg:flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded stg:text-[var(--stgm-popover-foreground,var(--stgm-foreground,#1a1a2e))] stg:outline-none stg:transition-colors",
+  "stg:hover:bg-[var(--stgm-accent,#e5e5e5)] stg:focus-visible:ring-1 stg:focus-visible:ring-[var(--stgm-ring,#3b82f6)]",
 );
 
 const TOOLBAR_BTN_DESTRUCTIVE_CLASS = cn(
-  "flex h-7 w-7 items-center justify-center rounded text-[var(--stgm-popover-foreground,var(--stgm-foreground,#1a1a2e))] outline-none transition-colors",
-  "hover:bg-[var(--stgm-destructive,#ef4444)]/10 hover:text-[var(--stgm-destructive,#ef4444)] focus-visible:ring-1 focus-visible:ring-[var(--stgm-ring,#3b82f6)]",
+  "stg:flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded stg:text-[var(--stgm-popover-foreground,var(--stgm-foreground,#1a1a2e))] stg:outline-none stg:transition-colors",
+  "stg:hover:bg-[var(--stgm-destructive,#ef4444)]/10 stg:hover:text-[var(--stgm-destructive,#ef4444)] stg:focus-visible:ring-1 stg:focus-visible:ring-[var(--stgm-ring,#3b82f6)]",
 );
 
 interface ToolbarButtonProps {

package/src/workflow/node-shell/NodeContent.tsx

@@ -35,7 +35,7 @@ export const NodeContent = memo(function NodeContent({
 
   if (visualClass === "terminal-pill") {
     return (
-      <span className="text-xs font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+      <span className="stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
         {taskName}
       </span>
     );
@@ -43,7 +43,7 @@ export const NodeContent = memo(function NodeContent({
 
   if (visualClass === "parallel-bar") {
     return (
-      <span className="truncate text-[11px] font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+      <span className="stg:truncate stg:text-[11px] stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
         {taskName}
       </span>
     );
@@ -55,10 +55,10 @@ export const NodeContent = memo(function NodeContent({
     const contentWidth = `calc(100% - ${insets.left + insets.right}px)`;
     return (
       <div
-        className="flex items-center justify-center overflow-hidden text-center"
+        className="stg:flex stg:items-center stg:justify-center stg:overflow-hidden stg:text-center"
         style={{ maxWidth: contentWidth }}
       >
-        <span className="truncate text-xs font-medium leading-tight text-[var(--stgm-foreground,#1a1a2e)]">
+        <span className="stg:truncate stg:text-xs stg:font-medium stg:leading-tight stg:text-[var(--stgm-foreground,#1a1a2e)]">
           {taskName}
         </span>
       </div>
@@ -67,13 +67,13 @@ export const NodeContent = memo(function NodeContent({
 
   // Rectangular shapes: full text inside
   return (
-    <div className="flex flex-1 flex-col gap-0.5 overflow-hidden">
-      <span className="truncate text-sm font-medium text-[var(--stgm-foreground,#1a1a2e)]">
+    <div className="stg:flex stg:flex-1 stg:flex-col stg:gap-0.5 stg:overflow-hidden">
+      <span className="stg:truncate stg:text-sm stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
         {taskName}
       </span>
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <span
-          className="inline-block rounded px-1 py-px text-[10px] font-medium leading-tight"
+          className="stg:inline-block stg:rounded stg:px-1 stg:py-px stg:text-[10px] stg:font-medium stg:leading-tight"
           style={{
             color: categoryColor,
             backgroundColor: `color-mix(in srgb, ${categoryColor} 12%, transparent)`,
@@ -82,7 +82,7 @@ export const NodeContent = memo(function NodeContent({
           {displayName}
         </span>
         {isNested && (
-          <span className="text-[10px] text-[var(--stgm-muted-foreground,#737373)]">
+          <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
             (nested)
           </span>
         )}

package/src/workflow/node-shell/NodeHandles.tsx

@@ -11,10 +11,10 @@ export interface NodeHandlesProps {
 }
 
 const HANDLE_CLASS =
-  "!h-2 !w-2 !rounded-full !border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-card,var(--stgm-background,#fff))]";
+  "stg:!h-2 stg:!w-2 stg:!rounded-full stg:!border-[var(--stgm-border-prominent,#d4d4d8)] stg:!bg-[var(--stgm-card,var(--stgm-background,#fff))]";
 
 const SENTINEL_HANDLE_CLASS =
-  "!h-2 !w-2 !rounded-full !border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-muted,#f5f5f5)]";
+  "stg:!h-2 stg:!w-2 stg:!rounded-full stg:!border-[var(--stgm-border-prominent,#d4d4d8)] stg:!bg-[var(--stgm-muted,#f5f5f5)]";
 
 /**
  * Renders React Flow connection handles for a workflow node based
@@ -127,8 +127,8 @@ function BranchedHandles({ inputClass, outputClass, handles }: BranchedHandlesPr
             <span
               className={
                 handle.isDefault
-                  ? "pointer-events-none absolute text-[8px] italic leading-none text-[var(--stgm-muted-foreground,#737373)] opacity-70"
-                  : "pointer-events-none absolute text-[8px] font-medium leading-none text-[var(--stgm-muted-foreground,#737373)]"
+                  ? "stg:pointer-events-none stg:absolute stg:text-[8px] stg:italic stg:leading-none stg:text-[var(--stgm-muted-foreground,#737373)] stg:opacity-70"
+                  : "stg:pointer-events-none stg:absolute stg:text-[8px] stg:font-medium stg:leading-none stg:text-[var(--stgm-muted-foreground,#737373)]"
               }
               style={{
                 left: `${leftPct}%`,
@@ -144,7 +144,7 @@ function BranchedHandles({ inputClass, outputClass, handles }: BranchedHandlesPr
       })}
       {overflowCount > 0 && (
         <span
-          className="pointer-events-none absolute text-[8px] font-medium leading-none text-[var(--stgm-muted-foreground,#737373)]"
+          className="stg:pointer-events-none stg:absolute stg:text-[8px] stg:font-medium stg:leading-none stg:text-[var(--stgm-muted-foreground,#737373)]"
           style={{
             left: `${((totalSlots) / (totalSlots + 1)) * 100}%`,
             bottom: -14,

package/src/workflow/node-shell/NodeShell.tsx

@@ -95,11 +95,11 @@ function CssShell({
   return (
     <div
       className={cn(
-        "stgm group relative flex items-center transition-shadow",
+        "stgm stg:group stg:relative stg:flex stg:items-center stg:transition-shadow",
         shellClass,
-        selected && "ring-2 ring-[var(--stgm-ring,#3b82f6)]",
+        selected && "stg:ring-2 stg:ring-[var(--stgm-ring,#3b82f6)]",
         diffStatus && DIFF_STATUS_CSS[diffStatus],
-        !diffStatus && errorCount > 0 && "!border-[var(--stgm-destructive,#ef4444)]",
+        !diffStatus && errorCount > 0 && "stg:!border-[var(--stgm-destructive,#ef4444)]",
         !diffStatus && executionStatus && EXECUTION_STATUS_CSS[executionStatus],
       )}
       style={
@@ -117,20 +117,20 @@ function CssShell({
 
 const CSS_VARIANTS: Partial<Record<VisualClass, string>> = {
   "task-card": cn(
-    "min-w-[200px] gap-2 rounded-md border border-[var(--stgm-border-prominent,#d4d4d8)]",
-    "bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-2 shadow-sm",
+    "stg:min-w-[200px] stg:gap-2 stg:rounded-md stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)]",
+    "stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-3 stg:py-2 stg:shadow-sm",
   ),
   "subworkflow-card": cn(
-    "min-w-[200px] gap-2 rounded-md border-2 border-[var(--stgm-border-prominent,#d4d4d8)]",
-    "bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-2 shadow-sm",
+    "stg:min-w-[200px] stg:gap-2 stg:rounded-md stg:border-2 stg:border-[var(--stgm-border-prominent,#d4d4d8)]",
+    "stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-3 stg:py-2 stg:shadow-sm",
   ),
   "container": cn(
-    "min-w-[240px] gap-2 rounded-lg border-2 border-dashed border-[var(--stgm-border-prominent,#d4d4d8)]",
-    "bg-[var(--stgm-card,var(--stgm-background,#fff))] px-3 py-2.5 shadow-sm",
+    "stg:min-w-[240px] stg:gap-2 stg:rounded-lg stg:border-2 stg:border-dashed stg:border-[var(--stgm-border-prominent,#d4d4d8)]",
+    "stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-3 stg:py-2.5 stg:shadow-sm",
   ),
   "terminal-pill": cn(
-    "items-center justify-center rounded-full border-2 px-4 py-1.5",
-    "bg-[var(--stgm-muted,#f5f5f5)]",
+    "stg:items-center stg:justify-center stg:rounded-full stg:border-2 stg:px-4 stg:py-1.5",
+    "stg:bg-[var(--stgm-muted,#f5f5f5)]",
   ),
 };
 
@@ -165,11 +165,11 @@ function SvgShell({
   return (
     <div
       className={cn(
-        "stgm group relative flex flex-col items-center transition-shadow",
-        selected && "ring-2 ring-[var(--stgm-ring,#3b82f6)]",
-        visualClass === "decision-diamond" && "rounded-sm",
-        visualClass === "event-circle" && "rounded-full",
-        visualClass === "gate-octagon" && "rounded",
+        "stgm stg:group stg:relative stg:flex stg:flex-col stg:items-center stg:transition-shadow",
+        selected && "stg:ring-2 stg:ring-[var(--stgm-ring,#3b82f6)]",
+        visualClass === "decision-diamond" && "stg:rounded-sm",
+        visualClass === "event-circle" && "stg:rounded-full",
+        visualClass === "gate-octagon" && "stg:rounded",
         diffStatus && DIFF_STATUS_CSS[diffStatus],
         !diffStatus && executionStatus && EXECUTION_STATUS_CSS[executionStatus],
       )}
@@ -178,9 +178,9 @@ function SvgShell({
       data-diff-status={diffStatus}
     >
       {/* Shape area */}
-      <div className="relative flex items-center justify-center" style={{ width, height: shapeHeight }}>
+      <div className="stg:relative stg:flex stg:items-center stg:justify-center" style={{ width, height: shapeHeight }}>
         <svg
-          className="pointer-events-none absolute inset-0"
+          className="stg:pointer-events-none stg:absolute stg:inset-0"
           width={width}
           height={shapeHeight}
           viewBox={`0 0 ${width} ${shapeHeight}`}
@@ -194,7 +194,7 @@ function SvgShell({
             strokeDasharray={diffStatus === "removed" ? "6 4" : undefined}
           />
         </svg>
-        <div className="relative z-10 flex items-center justify-center overflow-hidden">
+        <div className="stg:relative stg:z-10 stg:flex stg:items-center stg:justify-center stg:overflow-hidden">
           {children}
         </div>
       </div>
@@ -212,14 +212,14 @@ function SvgShell({
  * Never uses color alone — badges provide text/icon differentiation.
  */
 const EXECUTION_STATUS_CSS: Record<NodeExecutionStatus, string> = {
-  not_reached: "opacity-40",
+  not_reached: "stg:opacity-40",
   pending: "",
   running: "stgm-exec-running border-[var(--stgm-primary,#6366f1)]",
-  completed: "border-[var(--stgm-success,#22c55e)]",
-  failed: "!border-[var(--stgm-destructive,#ef4444)]",
-  skipped: "opacity-50",
+  completed: "stg:border-[var(--stgm-success,#22c55e)]",
+  failed: "stg:!border-[var(--stgm-destructive,#ef4444)]",
+  skipped: "stg:opacity-50",
   retrying: "",
-  waiting_approval: "border-[var(--stgm-warning,#f59e0b)]",
+  waiting_approval: "stg:border-[var(--stgm-warning,#f59e0b)]",
 };
 
 function svgStrokeForStatus(status: NodeExecutionStatus, fallback: string): string {
@@ -246,9 +246,9 @@ function svgStrokeForStatus(status: NodeExecutionStatus, fallback: string): stri
  * styling — diffStatus > executionStatus > errorCount > categoryColor.
  */
 const DIFF_STATUS_CSS: Record<NodeDiffStatus, string> = {
-  added: "border-[var(--stgm-success,#22c55e)] bg-[var(--stgm-success,#22c55e)]/5",
-  removed: "opacity-50 border-dashed border-[var(--stgm-destructive,#ef4444)]",
-  modified: "border-[var(--stgm-warning,#f59e0b)]",
+  added: "stg:border-[var(--stgm-success,#22c55e)] stg:bg-[var(--stgm-success,#22c55e)]/5",
+  removed: "stg:opacity-50 stg:border-dashed stg:border-[var(--stgm-destructive,#ef4444)]",
+  modified: "stg:border-[var(--stgm-warning,#f59e0b)]",
   unchanged: "",
 };
 

package/src/workflow/picker/BranchAddPopover.tsx

@@ -143,22 +143,22 @@ export const BranchAddPopover = memo(function BranchAddPopover({
         >
           <Popover.Popup
             className={cn(
-              "stgm z-popover w-60 overflow-hidden rounded-lg border border-border bg-popover shadow-md text-popover-foreground",
+              "stgm stg:z-popover stg:w-60 stg:overflow-hidden stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:shadow-md stg:text-popover-foreground",
             )}
           >
-            <div className="flex flex-col" onKeyDown={handleKeyDown}>
+            <div className="stg:flex stg:flex-col" onKeyDown={handleKeyDown}>
               {/* Header */}
-              <div className="border-b border-border px-3 py-2">
-                <p className="text-xs font-semibold text-[var(--stgm-foreground,#1a1a2e)]">
+              <div className="stg:border-b stg:border-border stg:px-3 stg:py-2">
+                <p className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)]">
                   {config.title}
                 </p>
               </div>
 
               {/* Form fields */}
-              <div className="space-y-2.5 p-3">
+              <div className="stg:space-y-2.5 stg:p-3">
                 {/* Name field */}
                 <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)]">
                     {config.nameLabel}
                   </label>
                   <input
@@ -171,8 +171,8 @@ export const BranchAddPopover = memo(function BranchAddPopover({
                     }}
                     placeholder={config.namePlaceholder}
                     className={cn(
-                      "w-full rounded border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]",
-                      nameError ? "border-[var(--stgm-destructive,#ef4444)]" : "border-border",
+                      "stg:w-full stg:rounded stg:border stg:bg-[var(--stgm-input-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,#737373)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]",
+                      nameError ? "stg:border-[var(--stgm-destructive,#ef4444)]" : "stg:border-border",
                     )}
                     aria-invalid={!!nameError}
                     aria-describedby={nameError ? "branch-name-error" : undefined}
@@ -180,7 +180,7 @@ export const BranchAddPopover = memo(function BranchAddPopover({
                   {nameError && (
                     <p
                       id="branch-name-error"
-                      className="mt-0.5 text-[10px] text-[var(--stgm-destructive,#ef4444)]"
+                      className="stg:mt-0.5 stg:text-[10px] stg:text-[var(--stgm-destructive,#ef4444)]"
                     >
                       {nameError}
                     </p>
@@ -190,16 +190,16 @@ export const BranchAddPopover = memo(function BranchAddPopover({
                 {/* Condition field (switch-case only) */}
                 {config.showCondition && (
                   <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)]">
                       Condition
-                      <span className="ml-1 font-normal">(optional)</span>
+                      <span className="stg:ml-1 stg:font-normal">(optional)</span>
                     </label>
                     <input
                       type="text"
                       value={condition}
                       onChange={(e) => setCondition(e.target.value)}
                       placeholder='e.g. $.plan == "enterprise"'
-                      className="w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs font-mono text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                      className="stg:w-full stg:rounded stg:border stg:border-border 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:placeholder:text-[var(--stgm-muted-foreground,#737373)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
                     />
                   </div>
                 )}
@@ -207,16 +207,16 @@ export const BranchAddPopover = memo(function BranchAddPopover({
                 {/* Error type field (catch-handler only) */}
                 {config.showErrorType && (
                   <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 type filter
-                      <span className="ml-1 font-normal">(optional)</span>
+                      <span className="stg:ml-1 stg:font-normal">(optional)</span>
                     </label>
                     <input
                       type="text"
                       value={errorType}
                       onChange={(e) => setErrorType(e.target.value)}
                       placeholder="e.g. TimeoutError"
-                      className="w-full rounded border border-border bg-[var(--stgm-input-bg,var(--stgm-background,#fff))] px-2 py-1.5 text-xs text-[var(--stgm-foreground,#1a1a2e)] placeholder:text-[var(--stgm-muted-foreground,#737373)] outline-none focus:ring-1 focus:ring-[var(--stgm-ring,#3b82f6)]"
+                      className="stg:w-full stg:rounded stg:border stg:border-border stg:bg-[var(--stgm-input-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,#737373)] stg:outline-none stg:focus:ring-1 stg:focus:ring-[var(--stgm-ring,#3b82f6)]"
                     />
                   </div>
                 )}
@@ -225,7 +225,7 @@ export const BranchAddPopover = memo(function BranchAddPopover({
                 <button
                   type="button"
                   onClick={validateAndSubmit}
-                  className="w-full rounded bg-[var(--stgm-primary,#3b82f6)] px-3 py-1.5 text-xs font-medium text-[var(--stgm-primary-foreground,#fff)] transition-colors hover:bg-[var(--stgm-primary,#3b82f6)]/90 focus:outline-none focus:ring-2 focus:ring-[var(--stgm-ring,#3b82f6)] focus:ring-offset-1"
+                  className="stg:w-full stg:rounded stg:bg-[var(--stgm-primary,#3b82f6)] stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium stg:text-[var(--stgm-primary-foreground,#fff)] stg:transition-colors stg:hover:bg-[var(--stgm-primary,#3b82f6)]/90 stg:focus:outline-none stg:focus:ring-2 stg:focus:ring-[var(--stgm-ring,#3b82f6)] stg:focus:ring-offset-1"
                 >
                   {config.title}
                 </button>

package/src/workflow/task-detail/StructuredDataViewer.tsx

@@ -63,14 +63,14 @@ export const StructuredDataViewer = memo(function StructuredDataViewer({
   const entries = Object.entries(data);
   if (entries.length === 0) {
     return (
-      <p className={cn("text-xs text-muted-foreground", className)}>
+      <p className={cn("stg:text-xs stg:text-muted-foreground", className)}>
         No data fields
       </p>
     );
   }
 
   return (
-    <div className={cn("space-y-3 text-xs", className)}>
+    <div className={cn("stg:space-y-3 stg:text-xs", className)}>
       <ObjectEntries entries={entries} depth={0} />
     </div>
   );
@@ -101,7 +101,7 @@ function ObjectEntries({
   return (
     <>
       {scalars.length > 0 && (
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 rounded-md border border-border bg-muted-faint px-2.5 py-2">
+        <dl className="stg:grid stg:grid-cols-[auto_1fr] stg:gap-x-3 stg:gap-y-1.5 stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:px-2.5 stg:py-2">
           {scalars.map(([key, value]) => (
             <ScalarEntry key={key} label={key} value={value} />
           ))}
@@ -134,28 +134,28 @@ function ScalarEntry({
 
   return (
     <>
-      <dt className="whitespace-nowrap font-mono text-muted-foreground">
+      <dt className="stg:whitespace-nowrap stg:font-mono stg:text-muted-foreground">
         {humanizeArgKey(label)}
       </dt>
       {isLongProse ? (
-        <dd className="min-w-0">
+        <dd className="stg:min-w-0">
           <ProseValue text={strValue} />
         </dd>
       ) : (
         <dd
           className={cn(
-            "min-w-0 font-mono text-foreground",
-            typeof value === "boolean" && "font-medium",
-            (value === null || value === undefined) && "text-muted-foreground",
+            "stg:min-w-0 stg:font-mono stg:text-foreground",
+            typeof value === "boolean" && "stg:font-medium",
+            (value === null || value === undefined) && "stg:text-muted-foreground",
           )}
           title={strValue}
         >
           {strValue.includes("\n") ? (
-            <pre className="whitespace-pre-wrap break-words rounded border border-border bg-muted-subtle px-2 py-1 font-mono text-foreground">
+            <pre className="stg:whitespace-pre-wrap stg:break-words stg:rounded stg:border stg:border-border stg:bg-muted-subtle stg:px-2 stg:py-1 stg:font-mono stg:text-foreground">
               {strValue}
             </pre>
           ) : (
-            <span className="block truncate">{strValue}</span>
+            <span className="stg:block stg:truncate">{strValue}</span>
           )}
         </dd>
       )}
@@ -180,14 +180,14 @@ function ProseValue({ text }: { readonly text: string }) {
 
   return (
     <div>
-      <p className="whitespace-pre-wrap break-words leading-relaxed text-foreground">
+      <p className="stg:whitespace-pre-wrap stg:break-words stg:leading-relaxed stg:text-foreground">
         {displayed}
       </p>
       {needsTruncation && (
         <button
           type="button"
           onClick={() => setExpanded((v) => !v)}
-          className="mt-0.5 text-xs font-medium text-primary transition-colors hover:text-primary-muted"
+          className="stg:mt-0.5 stg:text-xs stg:font-medium stg:text-primary stg:transition-colors stg:hover:text-primary-muted"
         >
           {expanded ? "Show less" : "Show more"}
         </button>
@@ -279,11 +279,11 @@ function ArrayEntry({
 }) {
   if (items.length === 0) {
     return (
-      <div className="flex items-baseline gap-1.5">
-        <span className="font-medium text-muted-foreground">
+      <div className="stg:flex stg:items-baseline stg:gap-1.5">
+        <span className="stg:font-medium stg:text-muted-foreground">
           {humanizeArgKey(label)}
         </span>
-        <span className="text-muted-foreground-subtle">(0 items)</span>
+        <span className="stg:text-muted-foreground-subtle">(0 items)</span>
       </div>
     );
   }
@@ -294,11 +294,11 @@ function ArrayEntry({
 
   if (allScalars && items.length <= INLINE_SCALAR_ARRAY_LIMIT) {
     return (
-      <div className="space-y-1">
-        <span className="font-medium text-muted-foreground">
+      <div className="stg:space-y-1">
+        <span className="stg:font-medium stg:text-muted-foreground">
           {humanizeArgKey(label)}
         </span>
-        <p className="font-mono text-foreground">
+        <p className="stg:font-mono stg:text-foreground">
           {items.map((item) => String(item ?? "null")).join(", ")}
         </p>
       </div>
@@ -350,20 +350,20 @@ function ObjectArraySection({
   const defaultItemExpanded = items.length <= AUTO_COLLAPSE_ITEM_THRESHOLD;
 
   return (
-    <div className="space-y-1.5">
+    <div className="stg:space-y-1.5">
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
-        className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+        className="stg:flex stg:items-center stg:gap-1 stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground"
       >
         <ChevronIcon expanded={expanded} />
         {humanizeArgKey(label)}{" "}
-        <span className="font-normal text-muted-foreground-subtle">
+        <span className="stg:font-normal stg:text-muted-foreground-subtle">
           ({items.length} {items.length === 1 ? "item" : "items"})
         </span>
       </button>
       {expanded && (
-        <div className="space-y-1.5 border-l-2 border-border pl-3">
+        <div className="stg:space-y-1.5 stg:border-l-2 stg:border-border stg:pl-3">
           {items.map((item, index) => (
             <ObjectArrayItem
               key={index}
@@ -400,9 +400,9 @@ function ObjectArrayItem({
 
   if (entries.length === 0) {
     return (
-      <div className="text-muted-foreground">
+      <div className="stg:text-muted-foreground">
         {itemLabel}{" "}
-        <span className="font-normal text-muted-foreground-subtle">
+        <span className="stg:font-normal stg:text-muted-foreground-subtle">
           (empty)
         </span>
       </div>
@@ -410,22 +410,22 @@ function ObjectArrayItem({
   }
 
   return (
-    <div className="space-y-1">
+    <div className="stg:space-y-1">
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
-        className="flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground"
+        className="stg:flex stg:items-center stg:gap-1 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground"
       >
         <ChevronIcon expanded={expanded} />
-        <span className="font-medium">{`Item ${index + 1}`}</span>
+        <span className="stg:font-medium">{`Item ${index + 1}`}</span>
         {subtitle && (
-          <span className="font-normal text-muted-foreground-subtle">
+          <span className="stg:font-normal stg:text-muted-foreground-subtle">
             &mdash; {subtitle}
           </span>
         )}
       </button>
       {expanded && (
-        <div className="border-l-2 border-border pl-3">
+        <div className="stg:border-l-2 stg:border-border stg:pl-3">
           <ObjectEntries entries={entries} depth={depth + 1} />
         </div>
       )}
@@ -489,17 +489,17 @@ function NestedSection({
   const [expanded, setExpanded] = useState(true);
 
   return (
-    <div className="space-y-1.5">
+    <div className="stg:space-y-1.5">
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
-        className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+        className="stg:flex stg:items-center stg:gap-1 stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground"
       >
         <ChevronIcon expanded={expanded} />
         {label}
       </button>
       {expanded && (
-        <div className="border-l-2 border-border pl-3">{children}</div>
+        <div className="stg:border-l-2 stg:border-border stg:pl-3">{children}</div>
       )}
     </div>
   );
@@ -521,8 +521,8 @@ function ChevronIcon({ expanded }: { readonly expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >