@stigmer/react 3.12.2 → 3.12.4

package/src/agent-instance/CreateAgentInstanceDialog.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 { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
 import type { ResourceRef } from "@stigmer/sdk";
@@ -39,7 +40,6 @@ export function CreateAgentInstanceDialog({
   agentId,
   onCreated,
 }: CreateAgentInstanceDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const { create, isCreating, error, clearError } = useCreateAgentInstance();
 
   // Instance-scoped element ids (oss#593): a reusable component must not
@@ -65,11 +65,17 @@ export function CreateAgentInstanceDialog({
   }, [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 CreateAgentInstanceDialog({
     [name, org, agentId, 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 CreateAgentInstanceDialog({
           </button>
         </div>
       </form>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/api-key/CreateApiKeyForm.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useId, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
 import { useCreateApiKey } from "./useCreateApiKey.js";
@@ -122,7 +123,7 @@ export function CreateApiKeyForm({
         </div>
 
         {/* Expiry */}
-        <fieldset className="stg:space-y-1.5">
+        <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-1.5")}>
           <legend className="stg:text-xs stg:font-medium stg:text-foreground">
             Expiration
           </legend>

package/src/attachment/AttachmentImageLightbox.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";
 
 /** Props for {@link AttachmentImageLightbox}. */
 export interface AttachmentImageLightboxProps {
@@ -48,47 +49,23 @@ export function AttachmentImageLightbox({
   onClose,
   className,
 }: AttachmentImageLightboxProps) {
-  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]);
-
-  // Escape arrives as the native `cancel` event; intercept it so the
-  // caller's `open` prop stays the single source of truth for visibility.
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
-    },
-    [onClose],
-  );
-
-  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}
-      onCancel={handleCancel}
-      onClick={handleBackdropClick}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
+      dismissOnBackdrop
       aria-label={`Preview ${filename}`}
+      // Lightbox outlier: viewport-relative sizing (not a width preset) and
+      // the background surface for image content.
       className={cn(
-        "stg:fixed stg:inset-0 stg:m-auto stg:max-h-[85vh] stg:max-w-[85vw] stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-lg stg:outline-none",
-        "stg:backdrop:bg-backdrop",
+        "stg:w-auto stg:max-h-[85vh] stg:max-w-[85vw] stg:bg-background stg:text-foreground stg:outline-none",
         className,
       )}
     >
@@ -127,7 +104,7 @@ export function AttachmentImageLightbox({
           </div>
         </div>
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/channel/ChannelConversationsDialog.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { useCallback, useId, useRef } from "react";
+import { useCallback, useId } from "react";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { MessageSquare, User, X } from "lucide-react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
 import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
@@ -68,38 +70,18 @@ export function ChannelConversationsDialog({
   sessionHref,
   modal = true,
 }: ChannelConversationsDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const titleId = useId();
 
   const handleClose = useCallback(() => {
-    dialogRef.current?.close();
     onOpenChange(false);
   }, [onOpenChange]);
 
-  // Sync native dialog open state (matches the SDK dialog convention).
-  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 each opening fetches fresh. */}
@@ -111,7 +93,7 @@ export function ChannelConversationsDialog({
           onClose={handleClose}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 
@@ -172,7 +154,7 @@ function ChannelConversationsDialogBody({
             description="When someone messages this channel, the sessions serving them appear here."
           />
         ) : (
-          <ul className="stg:space-y-1">
+          <ul className={cn(UNSTYLED_LIST, "stg:space-y-1")}>
             {sessions.map((session) => (
               <ConversationRow
                 key={session.metadata?.id}

package/src/channel/ChannelCredentialsDialog.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 { getUserMessage, type ResourceRef } from "@stigmer/sdk";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
@@ -51,8 +52,6 @@ export function ChannelCredentialsDialog({
   onSaved,
   modal = true,
 }: ChannelCredentialsDialogProps) {
-  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
@@ -60,34 +59,15 @@ export function ChannelCredentialsDialog({
   const titleId = useId();
 
   const handleClose = useCallback(() => {
-    dialogRef.current?.close();
     onOpenChange(false);
   }, [onOpenChange]);
 
-  // Sync native dialog open state (matches the SDK dialog convention).
-  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-md 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="md"
       aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its draft resets per session —
@@ -101,7 +81,7 @@ export function ChannelCredentialsDialog({
           titleId={titleId}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/channel/ChannelTemplatesDialog.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { useCallback, useId, useRef, type ReactNode } from "react";
+import { useCallback, useId, type ReactNode } from "react";
 import { ExternalLink, LayoutTemplate, X } from "lucide-react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
 import type { ChannelTemplate } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
@@ -89,40 +91,20 @@ export function ChannelTemplatesDialog({
   onEditYaml,
   modal = true,
 }: ChannelTemplatesDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const titleId = useId();
 
   const handleClose = useCallback(() => {
-    dialogRef.current?.close();
     onOpenChange(false);
   }, [onOpenChange]);
 
-  // Sync native dialog open state (matches the SDK dialog convention).
-  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(
-        // Wider than the conversations dialog on purpose: template
-        // bodies are the content, and a narrow column shreds them.
-        "stg:w-full stg:max-w-2xl 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}
+      // Wider than the conversations dialog on purpose: template
+      // bodies are the content, and a narrow column shreds them.
+      width="2xl"
       aria-labelledby={titleId}
     >
       {/* Body mounts only while open so each opening fetches fresh —
@@ -135,7 +117,7 @@ export function ChannelTemplatesDialog({
           onClose={handleClose}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 
@@ -316,7 +298,7 @@ function ChannelTemplatesList({
         </p>
         <WhatsAppManagerLink label="Manage in WhatsApp Manager" />
       </div>
-      <ul className="stg:space-y-2">
+      <ul className={cn(UNSTYLED_LIST, "stg:space-y-2")}>
         {templates.map((template) => (
           <TemplateRow
             key={`${template.name}\u0000${template.language}`}

package/src/channel/ConnectSlackDialog.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getErrorReason, type ResourceRef } from "@stigmer/sdk";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
@@ -89,8 +91,6 @@ export function ConnectSlackDialog({
   modal = true,
   channelAppsHref,
 }: ConnectSlackDialogProps) {
-  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
@@ -98,36 +98,15 @@ export function ConnectSlackDialog({
   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-md 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="md"
       aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its flow state resets per
@@ -142,7 +121,7 @@ export function ConnectSlackDialog({
           channelAppsHref={channelAppsHref}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 
@@ -549,7 +528,7 @@ function FlowProgress({
 
   return (
     <div className="stg:space-y-3" aria-live="polite">
-      <ul className="stg:space-y-2">
+      <ul className={cn(UNSTYLED_LIST, "stg:space-y-2")}>
         {FLOW_STEPS.map((step, i) => {
           const isActive = i === activeIndex;
           const isDone = activeIndex > i;

package/src/channel/ConnectWhatsAppDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { getErrorReason, type ResourceRef } from "@stigmer/sdk";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
@@ -100,8 +101,6 @@ export function ConnectWhatsAppDialog({
   modal = true,
   channelAppsHref,
 }: ConnectWhatsAppDialogProps) {
-  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
@@ -109,36 +108,15 @@ export function ConnectWhatsAppDialog({
   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-md 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="md"
       aria-labelledby={titleId}
     >
       {/* Body mounts only while open so its flow state resets per
@@ -153,7 +131,7 @@ export function ConnectWhatsAppDialog({
           titleId={titleId}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/channel/connect/ServingAppSection.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../../internal/element-resets.js";
 import type { ResourceRef } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
 
@@ -67,7 +68,7 @@ export function ServingAppSection({
   }
 
   return (
-    <fieldset>
+    <fieldset className={UNSTYLED_FIELDSET}>
       <legend className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
         Connect as
       </legend>

package/src/channel-app/CreateChannelAppForm.tsx

@@ -2,6 +2,7 @@
 
 import { type FormEvent, useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
 import {
@@ -286,7 +287,7 @@ function ProviderPicker({
 }) {
   const groupName = useId();
   return (
-    <fieldset>
+    <fieldset className={UNSTYLED_FIELDSET}>
       <legend className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
         Provider
       </legend>