@stigmer/react 3.12.2 → 3.12.3

package/src/resource-detail/ConfirmDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { ConfirmState } from "./types.js";
 
 export interface ConfirmDialogProps {
@@ -16,9 +17,8 @@ export interface ConfirmDialogProps {
 /**
  * Accessible confirmation dialog for destructive actions.
  *
- * Uses the native `<dialog>` element with `showModal()` for built-in
- * focus trapping, Escape key handling, and backdrop. Styled via
- * `--stgm-*` design tokens.
+ * Renders on {@link DialogShell} (native `<dialog>` + `showModal()` — focus
+ * trapping, Escape, token backdrop). Styled via `--stgm-*` design tokens.
  *
  * Pairs with {@link useConfirmAction} which manages the imperative
  * `confirm()` → Promise pattern.
@@ -51,22 +51,9 @@ export function ConfirmDialog({
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (state && !dialog.open) {
-      dialog.showModal();
-    } else if (!state && dialog.open) {
-      dialog.close();
-    }
-  }, [state]);
-
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onCancel();
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onCancel();
     },
     [onCancel],
   );
@@ -76,15 +63,7 @@ export function ConfirmDialog({
   const isDestructive = state.variant === "destructive";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-sm stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
+    <DialogShell open onOpenChange={handleOpenChange} width="sm" aria-label={state.title}>
       <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
         <div className="stg:flex stg:flex-col stg:gap-1.5">
           <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
@@ -122,6 +101,6 @@ export function ConfirmDialog({
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }

package/src/sharing/ShareAgentDialog.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useId, useMemo, useRef, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import {
   MAX_ALLOWED_ORIGINS,
   StigmerError,
@@ -137,8 +138,6 @@ export function ShareAgentDialog({
   onSharingChanged,
   modal = true,
 }: ShareAgentDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   // Instance-scoped title id (oss#593): a reusable component must not
   // hardcode DOM ids — hosts legitimately mount this dialog more than once
   // per page (e.g. zone-cached detail pages), and duplicate ids break the
@@ -146,36 +145,15 @@ export function ShareAgentDialog({
   const titleId = useId();
 
   const handleClose = useCallback(() => {
-    dialogRef.current?.close();
     onOpenChange(false);
   }, [onOpenChange]);
 
-  // Sync native dialog open state (matches the SDK dialog convention).
-  // Non-modal hosts pass `open` as a plain attribute instead — the dialog
-  // renders in-flow with no top layer to manage.
-  const prevOpenRef = useRef(false);
-  if (modal && open !== prevOpenRef.current) {
-    prevOpenRef.current = open;
-    if (open) {
-      requestAnimationFrame(() => {
-        if (dialogRef.current && !dialogRef.current.open) {
-          dialogRef.current.showModal();
-        }
-      });
-    } else if (dialogRef.current?.open) {
-      dialogRef.current.close();
-    }
-  }
-
   return (
-    <dialog
-      ref={dialogRef}
-      open={modal ? undefined : open}
-      onClose={handleClose}
-      className={cn(
-        "stg:w-full stg:max-w-lg stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:shadow-xl",
-        modal ? "stg:fixed stg:inset-0 stg:m-auto stg:backdrop:bg-backdrop" : "stg:relative",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      modal={modal}
+      width="lg"
       aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its draft state resets per
@@ -191,7 +169,7 @@ export function ShareAgentDialog({
           titleId={titleId}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/skill/SkillDiffDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useSkillDiff } from "./useSkillDiff.js";
 import { MultiFileDiffView } from "../version-history/MultiFileDiffView.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
@@ -57,31 +58,9 @@ export interface SkillDiffDialogProps {
  * ```
  */
 export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (state && !dialog.open) {
-      dialog.showModal();
-    } else if (!state && dialog.open) {
-      dialog.close();
-    }
-  }, [state]);
-
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
-    },
-    [onClose],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === e.currentTarget) {
-        onClose();
-      }
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onClose();
     },
     [onClose],
   );
@@ -94,15 +73,13 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
   if (!state) return null;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[85vh] stg:w-full stg:max-w-4xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open
+      onOpenChange={handleOpenChange}
+      width="4xl"
+      dismissOnBackdrop
+      className="stg:h-[85vh]"
+      aria-label="Skill version diff"
     >
       <div className="stg:flex stg:h-full stg:flex-col">
         {/* Header */}
@@ -142,7 +119,7 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
           ) : null}
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/ViewYamlDialog.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { memo, useCallback, useEffect, useRef } from "react";
-import { cn } from "@stigmer/theme";
+import { memo, useCallback } from "react";
 import type { WorkflowGraphModel } from "./workflow-graph-model.js";
 import { taskToYaml } from "./inspector/task-to-yaml.js";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useCopyFeedback } from "../internal/useCopyFeedback.js";
 
 /** Props for {@link ViewYamlDialog}. */
@@ -32,7 +32,6 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
   graph,
   onClose,
 }: ViewYamlDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const { copy, copied } = useCopyFeedback();
 
   const node = nodeId && graph
@@ -41,45 +40,27 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
 
   const yaml = node ? taskToYaml(node) : "";
 
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (nodeId && node) {
-      if (!dialog.open) dialog.showModal();
-    } else {
-      if (dialog.open) dialog.close();
-    }
-  }, [nodeId, node]);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const handleClose = () => onClose();
-    dialog.addEventListener("close", handleClose);
-    return () => dialog.removeEventListener("close", handleClose);
-  }, [onClose]);
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) onClose();
+    },
+    [onClose],
+  );
 
   const handleCopy = useCallback(() => {
     void copy(yaml);
   }, [copy, yaml]);
 
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
   return (
-    <dialog
-      ref={dialogRef}
-      className={cn(
-        "stgm stg:m-auto stg:max-h-[80vh] stg:w-full stg:max-w-lg 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={Boolean(nodeId && node)}
+      onOpenChange={handleOpenChange}
+      width="lg"
+      dismissOnBackdrop
+      // `stgm` re-establishes the theme scope (this dialog renders from the
+      // workflow canvas); the var-fallback styling of the body predates the
+      // token utilities and stays untouched here.
+      className="stgm stg:max-h-[80vh] stg:bg-[var(--stgm-background,#fff)] stg:border-[var(--stgm-border,#e5e5e5)]"
       aria-label={node ? `YAML for ${node.taskName}` : "View YAML"}
     >
       {node && (
@@ -121,7 +102,7 @@ export const ViewYamlDialog = memo(function ViewYamlDialog({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 });
 

package/src/workflow/WorkflowArchitectDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import {
   useWorkflowArchitectFlow,
   type ArchitectPhase,
@@ -64,8 +65,6 @@ export function WorkflowArchitectDialog({
   onSuccess,
   onError,
 }: WorkflowArchitectDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const handleSuccess = useCallback(
     (successOrg: string, slug: string) => {
       onOpenChange(false);
@@ -80,54 +79,23 @@ export function WorkflowArchitectDialog({
     onError,
   });
 
+  // Each opening starts from a clean prompt.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      flow.reset();
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
+    if (open) flow.reset();
   }, [open, flow.reset]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
-  const isWorking =
-    flow.phase === "starting" ||
-    flow.phase === "streaming" ||
-    flow.phase === "applying";
-
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="3xl"
+      dismissOnBackdrop
+      aria-label="Workflow Architect"
     >
       <div className="stg:flex stg:flex-col">
         <DialogPhase flow={flow} onClose={() => onOpenChange(false)} />
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/WorkflowExplainDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useExplainWorkflowFlow, type ExplainPhase } from "./useExplainWorkflowFlow.js";
 import { MessageThread } from "../execution/MessageThread.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
@@ -36,8 +37,6 @@ export function WorkflowExplainDialog({
   org,
   currentYaml,
 }: WorkflowExplainDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const flow = useExplainWorkflowFlow({
     org,
     currentYaml,
@@ -46,36 +45,14 @@ export function WorkflowExplainDialog({
     },
   });
 
-  // Show/hide dialog
+  // Each opening starts a fresh explanation.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
+    if (open) {
       flow.reset();
-      dialog.showModal();
       flow.explain();
-    } else if (!open && dialog.open) {
-      dialog.close();
     }
   }, [open, flow.reset, flow.explain]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
   const { copy, copied } = useCopyFeedback();
   const handleCopy = useCallback(() => {
     if (flow.explanation) {
@@ -84,15 +61,12 @@ export function WorkflowExplainDialog({
   }, [copy, flow.explanation]);
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-2xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="2xl"
+      dismissOnBackdrop
+      aria-label="Workflow Explanation"
     >
       <div className="stg:flex stg:flex-col">
         {/* Header */}
@@ -206,7 +180,7 @@ export function WorkflowExplainDialog({
           </div>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/WorkflowGraphFullscreenDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import { WorkflowOverviewGraph } from "./WorkflowOverviewGraph.js";
 
@@ -38,23 +39,9 @@ export function WorkflowGraphFullscreenDialog({
   onClose,
   onOpenInEditor,
 }: WorkflowGraphFullscreenDialogProps) {
-  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]);
-
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
@@ -62,14 +49,15 @@ export function WorkflowGraphFullscreenDialog({
   const workflowName = workflow?.metadata?.name || "Task Flow";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
       aria-label={`${workflowName} — full view`}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:h-[90vh] stg:w-[95vw] stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-2xl stg:outline-none",
-        "stg:[&::backdrop]:bg-black/60",
-      )}
+      // Near-full-viewport outlier: free-form sizing and the background
+      // surface for the graph canvas. The previously hardcoded ::backdrop
+      // color (bg-black/60 — it predated and escaped the #652 fence via the
+      // arbitrary-variant spelling) now rides the shell's token backdrop.
+      className="stg:h-[90vh] stg:w-[95vw] stg:max-w-none stg:bg-background stg:text-foreground stg:outline-none"
     >
       {open && (
         <div className="stg:flex stg:h-full stg:flex-col">
@@ -101,7 +89,7 @@ export function WorkflowGraphFullscreenDialog({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/workflow/WorkflowRunDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { useRunWorkflowFlow } from "./useRunWorkflowFlow.js";
@@ -82,8 +83,6 @@ export function WorkflowRunDialog({
   onSuccess,
   onError,
 }: WorkflowRunDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   const handleSuccess = useCallback(
     (executionId: string) => {
       onOpenChange(false);
@@ -100,25 +99,19 @@ export function WorkflowRunDialog({
     onError,
   });
 
-  // Sync open state with the native dialog
+  // Each opening starts from a clean form.
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      flow.reset();
-      // Preselection must follow reset (reset clears the selection back to
-      // the server-resolved default). Guarded against stale ids: an instance
-      // deleted between the caller capturing the id and this open falls back
-      // to the default option instead of a <select> value with no option.
-      if (
-        initialInstanceId &&
-        instances.some((i) => i.metadata?.id === initialInstanceId)
-      ) {
-        flow.setSelectedInstanceId(initialInstanceId);
-      }
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
+    if (!open) return;
+    flow.reset();
+    // Preselection must follow reset (reset clears the selection back to
+    // the server-resolved default). Guarded against stale ids: an instance
+    // deleted between the caller capturing the id and this open falls back
+    // to the default option instead of a <select> value with no option.
+    if (
+      initialInstanceId &&
+      instances.some((i) => i.metadata?.id === initialInstanceId)
+    ) {
+      flow.setSelectedInstanceId(initialInstanceId);
     }
   }, [
     open,
@@ -128,36 +121,16 @@ export function WorkflowRunDialog({
     instances,
   ]);
 
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onOpenChange(false);
-      }
-    },
-    [onOpenChange],
-  );
-
   const workflowName =
     workflow.metadata?.name || workflow.metadata?.slug || "Workflow";
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      onClick={handleBackdropClick}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-lg stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      width="lg"
+      dismissOnBackdrop
+      aria-label={`Run ${workflowName}`}
     >
       <div className="stg:flex stg:flex-col">
         {/* Header */}
@@ -231,7 +204,7 @@ export function WorkflowRunDialog({
           </button>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }