@stigmer/react 3.12.2 → 3.12.3

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/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/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>
   );
 }