@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
 import type { NodeExecutionStatus } from "../workflow-graph-conversions.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 
 /** Fork branch completion progress (T06). */
 export interface ForkProgressInfo {
@@ -54,17 +55,23 @@ export const ExecutionBadge = memo(function ExecutionBadge({
   if (status === "waiting_approval" && approvalToolName) {
     const approvalLabel = `Awaiting approval: ${approvalToolName}`;
     return (
-      <span
-        className={cn(
-          "absolute -right-1.5 -top-1.5 z-20 flex h-5 items-center gap-0.5 rounded-full px-1.5 text-[10px] font-semibold leading-none shadow-sm",
-          "bg-[var(--stgm-warning,#f59e0b)] text-[var(--stgm-warning-foreground,#fff)]",
-        )}
-        title={approvalLabel}
-        aria-label={approvalLabel}
-      >
-        ✋
-        <span className="max-w-[60px] truncate">{approvalToolName}</span>
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              className={cn(
+                "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+                "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
+              )}
+              aria-label={approvalLabel}
+            />
+          }
+        >
+          ✋
+          <span className="stg:max-w-[60px] stg:truncate">{approvalToolName}</span>
+        </TooltipTrigger>
+        <TooltipContent side="top">{approvalLabel}</TooltipContent>
+      </Tooltip>
     );
   }
 
@@ -76,17 +83,23 @@ export const ExecutionBadge = memo(function ExecutionBadge({
       : `Agent: ${agentActivity.messagesCount} messages, ${agentActivity.toolCallsCount} tool calls`;
 
     return (
-      <span
-        className={cn(
-          "absolute -right-1.5 -top-1.5 z-20 flex h-5 items-center gap-0.5 rounded-full px-1.5 text-[10px] font-semibold leading-none shadow-sm",
-          "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]",
-        )}
-        title={agentLabel}
-        aria-label={agentLabel}
-      >
-        {agentActivity.currentToolName ? "🔧" : "💬"}
-        <span className="max-w-[60px] truncate">{displayText}</span>
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              className={cn(
+                "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+                "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
+              )}
+              aria-label={agentLabel}
+            />
+          }
+        >
+          {agentActivity.currentToolName ? "🔧" : "💬"}
+          <span className="stg:max-w-[60px] stg:truncate">{displayText}</span>
+        </TooltipTrigger>
+        <TooltipContent side="top">{agentLabel}</TooltipContent>
+      </Tooltip>
     );
   }
 
@@ -97,36 +110,50 @@ export const ExecutionBadge = memo(function ExecutionBadge({
       : `Fork running, ${forkProgress.completed} of ${forkProgress.total} branches completed`;
 
     return (
-      <span
-        className={cn(
-          "absolute -right-1.5 -top-1.5 z-20 flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold leading-none shadow-sm",
-          "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]",
-        )}
-        title={progressLabel}
-        aria-label={progressLabel}
-      >
-        {forkProgress.completed}/{forkProgress.total}
-        {forkProgress.compete && <span className="ml-0.5">⚡</span>}
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              className={cn(
+                "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+                "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
+              )}
+              aria-label={progressLabel}
+            />
+          }
+        >
+          {forkProgress.completed}/{forkProgress.total}
+          {forkProgress.compete && <span className="stg:ml-0.5">⚡</span>}
+        </TooltipTrigger>
+        <TooltipContent side="top">{progressLabel}</TooltipContent>
+      </Tooltip>
     );
   }
 
   const { icon, label, className } = BADGE_CONFIG[status];
 
   return (
-    <span
-      className={cn(
-        "absolute -right-1.5 -top-1.5 z-20 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-semibold leading-none shadow-sm",
-        className,
-      )}
-      title={label + (attemptNumber && attemptNumber > 1 ? ` (attempt ${attemptNumber})` : "")}
-      aria-label={label}
-    >
-      {icon}
-      {status === "retrying" && attemptNumber != null && attemptNumber > 1 && (
-        <span className="ml-0.5">{attemptNumber}</span>
-      )}
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            className={cn(
+              "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+              className,
+            )}
+            aria-label={label}
+          />
+        }
+      >
+        {icon}
+        {status === "retrying" && attemptNumber != null && attemptNumber > 1 && (
+          <span className="stg:ml-0.5">{attemptNumber}</span>
+        )}
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {label + (attemptNumber && attemptNumber > 1 ? ` (attempt ${attemptNumber})` : "")}
+      </TooltipContent>
+    </Tooltip>
   );
 });
 
@@ -140,31 +167,31 @@ const BADGE_CONFIG: Record<Exclude<NodeExecutionStatus, "not_reached" | "pending
   running: {
     icon: "⟳",
     label: "Running",
-    className: "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
   },
   completed: {
     icon: "✓",
     label: "Completed",
-    className: "bg-[var(--stgm-success,#22c55e)] text-[var(--stgm-success-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-success,#22c55e)] stg:text-[var(--stgm-success-foreground,#fff)]",
   },
   failed: {
     icon: "✕",
     label: "Failed",
-    className: "bg-[var(--stgm-destructive,#ef4444)] text-[var(--stgm-destructive-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-destructive,#ef4444)] stg:text-[var(--stgm-destructive-foreground,#fff)]",
   },
   skipped: {
     icon: "—",
     label: "Skipped",
-    className: "bg-[var(--stgm-muted,#e5e5e5)] text-[var(--stgm-muted-foreground,#737373)]",
+    className: "stg:bg-[var(--stgm-muted,#e5e5e5)] stg:text-[var(--stgm-muted-foreground,#737373)]",
   },
   retrying: {
     icon: "↻",
     label: "Retrying",
-    className: "bg-[var(--stgm-warning,#f59e0b)] text-[var(--stgm-warning-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
   },
   waiting_approval: {
     icon: "✋",
     label: "Waiting for approval",
-    className: "bg-[var(--stgm-warning,#f59e0b)] text-[var(--stgm-warning-foreground,#fff)]",
+    className: "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
   },
 };

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

@@ -9,6 +9,12 @@ import { BranchAddPopover } from "../picker/BranchAddPopover.js";
 import type { BranchAddMode, BranchAddResult } from "../picker/BranchAddPopover.js";
 import type { InsertionContext } from "../picker/insertion-context.js";
 import { TrashIcon, DuplicateIcon, PlusIcon } from "../canvas-icons.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../internal/tooltip.js";
 
 export interface NodeActionsProps {
   nodeId: string;
@@ -156,70 +162,84 @@ 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"
-          role="toolbar"
-          aria-label="Task actions"
-          aria-orientation="horizontal"
-        >
-          <ToolbarButton
-            icon={<DuplicateIcon />}
-            label={`Duplicate task ${taskName}`}
-            title="Duplicate"
-            onClick={handleDuplicate}
-          />
-          <ToolbarButton
-            ref={toolbarAddRef}
-            icon={<PlusIcon />}
-            label={`Add task after ${taskName}`}
-            title="Add task after"
-            onClick={handleToolbarAddClick}
-          />
-          <div className="mx-0.5 h-4 w-px bg-[var(--stgm-border,#e5e5e5)]" aria-hidden="true" />
-          <ToolbarButton
-            icon={<TrashIcon />}
-            label={`Delete task ${taskName}`}
-            title="Delete"
-            onClick={handleDelete}
-            destructive
-          />
-        </div>
+        <TooltipProvider>
+          <div
+            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"
+          >
+            <ToolbarButton
+              icon={<DuplicateIcon />}
+              label={`Duplicate task ${taskName}`}
+              tooltip="Duplicate"
+              onClick={handleDuplicate}
+            />
+            <ToolbarButton
+              ref={toolbarAddRef}
+              icon={<PlusIcon />}
+              label={`Add task after ${taskName}`}
+              tooltip="Add task after"
+              onClick={handleToolbarAddClick}
+            />
+            <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}`}
+              tooltip="Delete"
+              onClick={handleDelete}
+              destructive
+            />
+          </div>
+        </TooltipProvider>
       </NodeToolbar>
 
       {/* Delete button — revealed on hover via CSS group */}
-      <button
-        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",
-        )}
-        aria-label={`Delete task ${taskName}`}
-        title="Delete task"
-      >
-        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-          <path d="M2 3h6M3.5 3V2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V3M4 4.5v2.5M6 4.5v2.5M3 3l.5 5h3l.5-5" />
-        </svg>
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={handleDelete}
+              className={cn(
+                "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}`}
+            />
+          }
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+            <path d="M2 3h6M3.5 3V2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V3M4 4.5v2.5M6 4.5v2.5M3 3l.5 5h3l.5-5" />
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent side="top">Delete task</TooltipContent>
+      </Tooltip>
 
       {/* Add successor button — revealed on hover via CSS group */}
-      <button
-        ref={hoverAddRef}
-        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",
-        )}
-        aria-label={`Add task after ${taskName}`}
-        title="Add task"
-      >
-        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-          <path d="M5 2v6M2 5h6" />
-        </svg>
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              ref={hoverAddRef}
+              type="button"
+              onClick={handleHoverAddClick}
+              className={cn(
+                "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}`}
+            />
+          }
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+            <path d="M5 2v6M2 5h6" />
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent side="top">Add task</TooltipContent>
+      </Tooltip>
 
       <TaskPickerPopover
         open={pickerOpen}
@@ -233,32 +253,38 @@ export const NodeActions = memo(function NodeActions({
 
       {branchMode && (
         <>
-          <button
-            ref={branchAddRef}
-            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",
-            )}
-            aria-label={
-              branchMode === "switch-case"
-                ? "Add case"
-                : branchMode === "fork-branch"
-                  ? "Add branch"
-                  : "Add catch"
-            }
-            title={
-              branchMode === "switch-case"
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  ref={branchAddRef}
+                  type="button"
+                  onClick={() => setBranchPopoverOpen(true)}
+                  className={cn(
+                    "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"
+                      ? "Add case"
+                      : branchMode === "fork-branch"
+                        ? "Add branch"
+                        : "Add catch"
+                  }
+                />
+              }
+            >
+              +
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {branchMode === "switch-case"
                 ? "Add case"
                 : branchMode === "fork-branch"
                   ? "Add branch"
-                  : "Add catch"
-            }
-          >
-            +
-          </button>
+                  : "Add catch"}
+            </TooltipContent>
+          </Tooltip>
 
           <BranchAddPopover
             open={branchPopoverOpen}
@@ -279,36 +305,44 @@ 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 {
   icon: React.ReactNode;
+  /** Full accessible name (e.g. "Duplicate task fetch-data"). */
   label: string;
-  title: string;
+  /** Short action name shown on the house tooltip. */
+  tooltip: string;
   onClick: () => void;
   destructive?: boolean;
 }
 
 const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
-  function ToolbarButton({ icon, label, title, onClick, destructive }, ref) {
+  function ToolbarButton({ icon, label, tooltip, onClick, destructive }, ref) {
     return (
-      <button
-        ref={ref}
-        type="button"
-        onClick={onClick}
-        className={destructive ? TOOLBAR_BTN_DESTRUCTIVE_CLASS : TOOLBAR_BTN_CLASS}
-        aria-label={label}
-        title={title}
-      >
-        {icon}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              ref={ref}
+              type="button"
+              onClick={onClick}
+              className={destructive ? TOOLBAR_BTN_DESTRUCTIVE_CLASS : TOOLBAR_BTN_CLASS}
+              aria-label={label}
+            />
+          }
+        >
+          {icon}
+        </TooltipTrigger>
+        <TooltipContent side="top">{tooltip}</TooltipContent>
+      </Tooltip>
     );
   },
 );

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,