@stigmer/react 3.12.2 → 3.12.4

package/src/workflow/execution-comparison/ExecutionComparisonPicker.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../../internal/DialogShell.js";
 import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
 import { useWorkflowExecutionList } from "../useWorkflowExecutionList.js";
 import { WorkflowExecutionPhaseBadge } from "../WorkflowExecutionPhaseBadge.js";
@@ -48,7 +49,6 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
   onConfirm,
   onClose,
 }: ExecutionComparisonPickerProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
   const { executions, isLoading } = useWorkflowExecutionList({
@@ -82,24 +82,6 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
     setSelectedId((preferred ?? fallback)?.metadata?.id ?? null);
   }, [open, candidates, selectedId, basePhase]);
 
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open) {
-      if (!dialog.open) dialog.showModal();
-    } else {
-      if (dialog.open) dialog.close();
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const handleClose = () => onClose();
-    dialog.addEventListener("close", handleClose);
-    return () => dialog.removeEventListener("close", handleClose);
-  }, [onClose]);
-
   useEffect(() => {
     if (!open) setSelectedId(null);
   }, [open]);
@@ -108,21 +90,22 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
     if (selectedId) onConfirm(selectedId);
   }, [selectedId, onConfirm]);
 
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) onClose();
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
 
   return (
-    <dialog
-      ref={dialogRef}
-      className={cn(
-        "stgm stg:m-auto stg:max-h-[70vh] stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-background,#fff)] stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-backdrop",
-      )}
-      onClick={handleBackdropClick}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
+      width="md"
+      dismissOnBackdrop
+      // `stgm` re-establishes the theme scope (rendered from the workflow
+      // canvas); the var-fallback styling predates the token utilities.
+      className="stgm stg:max-h-[70vh] stg:bg-[var(--stgm-background,#fff)] stg:border-[var(--stgm-border,#e5e5e5)]"
       aria-label="Select execution to compare"
     >
       <div className="stg:flex stg:flex-col">
@@ -217,7 +200,7 @@ export const ExecutionComparisonPicker = memo(function ExecutionComparisonPicker
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 });
 

package/src/workflow/facets/WorkflowArtifactsTab.tsx

@@ -5,6 +5,7 @@
 
 import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/api_pb";
 import { useMemo } from "react";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import { ArtifactRowView } from "../../execution/ArtifactRowView.js";
 import type { ArtifactRowItem } from "../../execution/artifact-row-item.js";
 import { deriveWorkflowArtifactItems } from "../deriveWorkflowArtifactItems.js";
@@ -55,7 +56,7 @@ export function WorkflowArtifactsTab({
   }
 
   return (
-    <ul role="list" className="stg:flex stg:flex-col">
+    <ul role="list" className={`${UNSTYLED_LIST} stg:flex stg:flex-col`}>
       {entries.map(({ artifact, item }) => (
         <WorkflowArtifactRow
           key={artifact.metadata?.id ?? item.name}

package/src/workflow/facets/WorkflowUsageTab.tsx

@@ -5,6 +5,7 @@
 
 import { useMemo } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import type {
   DerivedCostSummary,
   DerivedTaskState,
@@ -72,7 +73,7 @@ export function WorkflowUsageTab({
           <h3 className="stg:px-2 stg:text-xs stg:font-semibold stg:uppercase stg:tracking-wider stg:text-muted-foreground">
             By task
           </h3>
-          <ul role="list" className="stg:flex stg:flex-col">
+          <ul role="list" className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col")}>
             {items.map((item) => (
               <UsageRow key={item.taskName} item={item} />
             ))}

package/src/workflow/inspector/WorkflowSummaryPanel.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useMemo, useState, useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import type { WorkflowGraphModel, WorkflowGraphBudget, WorkflowGraphEnvVar } from "../workflow-graph-model.js";
 import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model.js";
 import { CATEGORY_DISPLAY_NAMES } from "../canvas-constants.js";
@@ -155,7 +156,7 @@ function ValidationSection({
       </button>
 
       {expanded && (
-        <ul className="stg:flex stg:flex-col stg:gap-1" role="list">
+        <ul className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col stg:gap-1")} role="list">
           {Array.from(errors.entries()).map(([nodeId, nodeErrors]) =>
             nodeErrors.map((error, i) => (
               <li

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

@@ -2,6 +2,7 @@
 
 import { memo, useCallback, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../../../internal/element-resets.js";
 import {
   Tooltip,
   TooltipContent,
@@ -283,7 +284,7 @@ function ForkBranches({
   return (
     <div className="stg:flex stg:flex-col stg:gap-3 stg:px-3 stg:py-3">
       {/* Join policy */}
-      <fieldset>
+      <fieldset className={UNSTYLED_FIELDSET}>
         <legend className="stg:text-xs stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:mb-1.5">
           Join policy
         </legend>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useCallback, useState, useMemo } from "react";
+import { UNSTYLED_FIELDSET } from "../../../internal/element-resets.js";
 import type { WorkflowGraphNode } from "../../workflow-graph-model.js";
 import type { InspectorMutations } from "../types.js";
 
@@ -177,7 +178,7 @@ export const IterationTab = memo(function IterationTab({
 
       {/* Error policy */}
       {parallelism > 0 && (
-        <fieldset>
+        <fieldset className={UNSTYLED_FIELDSET}>
           <legend className="stg:text-[10px] stg:font-medium stg:text-[var(--stgm-muted-foreground,#737373)] stg:mb-1.5">
             Error policy
           </legend>

package/src/workflow/instance/CreateWorkflowInstanceDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useId, useRef, useState } from "react";
+import { useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../../internal/DialogShell.js";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import type { ResourceRef } from "@stigmer/sdk";
@@ -39,7 +40,6 @@ export function CreateWorkflowInstanceDialog({
   workflowId,
   onCreated,
 }: CreateWorkflowInstanceDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const { create, isCreating, error, clearError } = useCreateWorkflowInstance();
 
   // Instance-scoped element ids (oss#571): a reusable component must not
@@ -65,11 +65,17 @@ export function CreateWorkflowInstanceDialog({
   }, [clearError]);
 
   const handleClose = useCallback(() => {
-    dialogRef.current?.close();
     onOpenChange(false);
     resetForm();
   }, [onOpenChange, resetForm]);
 
+  const handleShellOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) handleClose();
+    },
+    [handleClose],
+  );
+
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
@@ -93,30 +99,11 @@ export function CreateWorkflowInstanceDialog({
     [name, org, workflowId, description, environmentRefs, visibility, create, onCreated, handleClose],
   );
 
-  // Sync native dialog open state
-  const prevOpenRef = useRef(false);
-  if (open !== prevOpenRef.current) {
-    prevOpenRef.current = open;
-    if (open) {
-      // Must defer showModal to after render
-      requestAnimationFrame(() => {
-        if (dialogRef.current && !dialogRef.current.open) {
-          dialogRef.current.showModal();
-        }
-      });
-    } else if (dialogRef.current?.open) {
-      dialogRef.current.close();
-    }
-  }
-
   return (
-    <dialog
-      ref={dialogRef}
-      onClose={handleClose}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        "stg:backdrop:bg-backdrop",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={handleShellOpenChange}
+      width="lg"
       aria-labelledby={titleId}
     >
       <form onSubmit={handleSubmit} className="stg:flex stg:flex-col">
@@ -255,7 +242,7 @@ export function CreateWorkflowInstanceDialog({
           </button>
         </div>
       </form>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/instance/WorkflowInstanceDetailPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../../internal/element-resets.js";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
@@ -263,7 +264,7 @@ export function WorkflowInstanceDetailPanel({
               {(spec?.environmentRefs?.length ?? 0) === 0 ? (
                 <p className="stg:text-xs stg:text-muted-foreground">No environments bound.</p>
               ) : (
-                <ol className="stg:space-y-1">
+                <ol className={cn(UNSTYLED_LIST, "stg:space-y-1")}>
                   {spec!.environmentRefs.map((ref, idx) => (
                     <li key={`${ref.slug}-${idx}`} className="stg:flex stg:items-center stg:gap-2 stg:text-sm">
                       <span className="stg:text-xs stg:text-muted-foreground stg:w-4 stg:text-right">{idx + 1}.</span>

package/src/workflow/templates/WorkflowTemplatePreview.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../../internal/DialogShell.js";
 import { parse as parseYaml } from "yaml";
 import {
   ReactFlowProvider,
@@ -42,25 +43,12 @@ export function WorkflowTemplatePreview({
   onClose,
   onSelect,
 }: WorkflowTemplatePreviewProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const handleClose = () => onClose();
-    dialog.addEventListener("close", handleClose);
-    return () => dialog.removeEventListener("close", handleClose);
-  }, [onClose]);
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
+    },
+    [onClose],
+  );
 
   const handleSelect = useCallback(() => {
     if (template) onSelect(template);
@@ -72,19 +60,21 @@ export function WorkflowTemplatePreview({
   );
 
   if (!template || !meta) {
-    return <dialog ref={dialogRef} className="stg:hidden" />;
+    return null;
   }
 
   const categoryLabel =
     TEMPLATE_CATEGORY_LABELS[template.category] ?? template.category;
 
   return (
-    <dialog
-      ref={dialogRef}
-      className={cn(
-        "stgm stg:m-auto stg:max-h-[85vh] stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
+      width="3xl"
+      // `stgm` re-establishes the theme scope (rendered from the template
+      // browser canvas); background surface is deliberate for the graph.
+      className="stgm stg:max-h-[85vh] stg:bg-background"
+      aria-label={`Preview ${template.name}`}
     >
       <div className="stg:flex stg:flex-col">
         {/* Header */}
@@ -193,7 +183,7 @@ export function WorkflowTemplatePreview({
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workspace/ExplorerTree.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { FileTreeNode } from "../internal/file-tree/index.js";
 import type { SelectedWorkspaceFile } from "../internal/store/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
@@ -231,7 +232,7 @@ function ExplorerRootBody({
   return (
     <>
       <nav aria-label={`File tree for ${entryName}`}>
-        <ul className="stg:py-0.5 stg:pl-1.5" role="tree">
+        <ul className={cn(UNSTYLED_LIST, "stg:py-0.5 stg:pl-1.5")} role="tree">
           {tree.map((node) => (
             <FileTreeNode
               key={node.path}

package/src/workspace/WorkspaceContentSearch.tsx

@@ -11,6 +11,7 @@ import {
   type ReactNode,
 } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
 import type {
   WorkspaceContentMatch,
@@ -235,7 +236,7 @@ export function WorkspaceContentSearch({
           <MessageState>No files containing &ldquo;{trimmed}&rdquo;.</MessageState>
         ) : (
           <>
-            <ul id={listboxId} role="listbox" aria-label="Search results" className="stg:py-0.5">
+            <ul id={listboxId} role="listbox" aria-label="Search results" className={cn(UNSTYLED_LIST, "stg:py-0.5")}>
               {renderRows({
                 groups,
                 query: trimmed,

package/src/workspace/WorkspaceFileSearch.tsx

@@ -10,6 +10,7 @@ import {
   type KeyboardEvent,
 } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
 import type { WorkspaceFileLister } from "./WorkspaceFileLister.js";
 import type { SelectedWorkspaceFile } from "../internal/store/workspace-file-selection-store.js";
@@ -210,7 +211,7 @@ export function WorkspaceFileSearch({
               id={listboxId}
               role="listbox"
               aria-label="Search results"
-              className="stg:py-0.5"
+              className={cn(UNSTYLED_LIST, "stg:py-0.5")}
             >
               {renderRows({
                 groups,

package/src/workspace/WorkspaceSummary.tsx

@@ -3,6 +3,7 @@
 import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
 import type { WorkspaceSource } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { TruncatedText } from "../internal/truncated-text.js";
 
@@ -43,7 +44,7 @@ export function WorkspaceSummary({
   if (entries.length === 0) return null;
 
   return (
-    <ul className={cn("stg:space-y-1.5", className)} aria-label="Workspace entries">
+    <ul className={cn(UNSTYLED_LIST, "stg:space-y-1.5", className)} aria-label="Workspace entries">
       {entries.map((entry) => (
         <li key={entry.name} className="stg:text-xs">
           <div className="stg:flex stg:items-center stg:gap-1.5 stg:font-medium">