From 8b7c3bb6584a643912003b46bfba38fc16c60d29 Mon Sep 17 00:00:00 2001
From: Einar <einari@me.com>
Date: Mon, 2 Mar 2026 16:59:03 +0100
Subject: [PATCH 1/6] Make visible optional - we have other ways of doing this
 with useDialog()

---
 Source/CommandDialog/CommandDialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Source/CommandDialog/CommandDialog.tsx b/Source/CommandDialog/CommandDialog.tsx
index cf54714..071841e 100644
--- a/Source/CommandDialog/CommandDialog.tsx
+++ b/Source/CommandDialog/CommandDialog.tsx
@@ -15,7 +15,7 @@ import {
 
 export interface CommandDialogProps<TCommand extends object, TResponse = object>
     extends Omit<CommandFormProps<TCommand>, 'children'> {
-    visible: boolean;
+    visible?: boolean;
     header: string;
     confirmLabel?: string;
     cancelLabel?: string;
@@ -38,7 +38,7 @@ const CommandDialogWrapper = <TCommand extends object>({
     children
 }: {
     header: string;
-    visible: boolean;
+    visible?: boolean;
     width: string;
     confirmLabel: string;
     cancelLabel: string;
@@ -58,7 +58,7 @@ const CommandDialogWrapper = <TCommand extends object>({
         const result = await (commandInstance as unknown as { execute: () => Promise<ICommandResult<unknown>> }).execute();
         if (result.isSuccess) {
             await onConfirm(result);
-            return true;
+            return false;
         } else {
             setCommandResult(result);
             return false;

From 59f03fcf0fc4d55831b7f8edf5fa6a68e9ca8ddb Mon Sep 17 00:00:00 2001
From: Einar <einari@me.com>
Date: Mon, 2 Mar 2026 16:59:25 +0100
Subject: [PATCH 2/6] Add recommended way for using Dialog and CommandDialog

---
 Documentation/CommandDialog/index.md |  65 ++++++++++++-----
 Documentation/Dialogs/dialog.md      | 105 ++++++++++++++-------------
 2 files changed, 101 insertions(+), 69 deletions(-)

diff --git a/Documentation/CommandDialog/index.md b/Documentation/CommandDialog/index.md
index 914b9cb..2ea1ca5 100644
--- a/Documentation/CommandDialog/index.md
+++ b/Documentation/CommandDialog/index.md
@@ -15,48 +15,75 @@ CommandDialog simplifies the process of presenting a command form to users withi
 - Success and cancellation handling
 - Integration with Cratis Arc command system
 
+## Recommended Usage Pattern
+
+For new implementations, use the same dialog pattern as other typed dialogs:
+
+- Open dialogs through `useDialog<TResult>()`
+- Close from inside the dialog through `useDialogContext<TResult>()`
+- `await` the dialog at the call site and handle `[dialogResult, value]`
+
+When the value represents command execution output, use `CommandResult<TResponse>` as the dialog result type.
+
 ## Basic Usage
 
 ```typescript
-import { CommandDialog } from '@cratis/components';
-import { MyCommand } from './commands';
+import { DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
+import { CommandResult } from '@cratis/arc/commands';
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { CreateProject } from './commands';
+
+type CreateProjectResponse = {
+    projectId: string;
+};
+
+const CreateProjectDialog = () => {
+    const { closeDialog } = useDialogContext<CommandResult<CreateProjectResponse>>();
+
+    return (
+        <CommandDialog<CreateProject, CreateProjectResponse>
+            command={CreateProject}
+            header='Create project'
+            onConfirm={async result => closeDialog(DialogResult.Ok, result as CommandResult<CreateProjectResponse>)}
+            onCancel={() => closeDialog(DialogResult.Cancelled)}
+        />
+    );
+};
 
 function MyComponent() {
-    const [visible, setVisible] = useState(false);
+    const [CreateProjectDialogWrapper, showCreateProjectDialog] = useDialog<CommandResult<CreateProjectResponse>>(CreateProjectDialog);
 
-    const handleConfirm = async (result) => {
-        if (result.isSuccess) {
-            // Handle success
-            setVisible(false);
+    const handleCreateProject = async () => {
+        const [dialogResult, commandResult] = await showCreateProjectDialog();
+
+        if (dialogResult === DialogResult.Ok && commandResult?.isSuccess) {
+            // Handle successful command response
         }
     };
 
     return (
-        <CommandDialog
-            command={MyCommand}
-            visible={visible}
-            header="Execute Command"
-            onConfirm={handleConfirm}
-            onCancel={() => setVisible(false)}
-        >
-            {/* Custom form fields go here */}
-        </CommandDialog>
+        <>
+            <button onClick={handleCreateProject}>Create project</button>
+            <CreateProjectDialogWrapper />
+        </>
     );
 }
 ```
 
+> `CommandDialog` invokes `onConfirm` only when command execution succeeds.
+
 ## Props
 
 ### Required Props
 
 - `command`: Constructor for the command type
-- `visible`: Boolean controlling dialog visibility
 - `header`: Dialog title text
 - `onConfirm`: Callback function when command succeeds
 - `onCancel`: Callback function when dialog is cancelled
 
 ### Optional Props
 
+- `visible`: Boolean controlling dialog visibility (defaults to `true`)
 - `initialValues`: Initial values for the command form
 - `currentValues`: Current values to populate the form
 - `confirmLabel`: Custom text for confirm button (default: "OK")
@@ -71,7 +98,9 @@ function MyComponent() {
 
 ## Context
 
-The component provides a `CommandDialogContext` accessible via `useCommandDialogContext` hook for child components to access dialog state and callbacks.
+`CommandDialog` is built on top of `CommandForm` and uses the command form context internally for values, validation, and execution state.
+
+When used as an awaitable dialog, pair it with `useDialogContext<CommandResult<TResponse>>()` in a wrapping dialog component.
 
 ## Integration
 
diff --git a/Documentation/Dialogs/dialog.md b/Documentation/Dialogs/dialog.md
index f09b7e2..785db04 100644
--- a/Documentation/Dialogs/dialog.md
+++ b/Documentation/Dialogs/dialog.md
@@ -1,75 +1,78 @@
 # Dialog
 
-Base dialog component for creating custom dialogs.
+Base dialog component for creating typed dialogs that can be awaited.
 
-## Purpose
+## Recommended Pattern
 
-The Dialog component provides a customizable modal dialog foundation for building various types of dialogs.
+Use `useDialog<T>()` at the call site and `useDialogContext<T>()` inside the dialog component.
 
-## Key Features
+- The caller opens the dialog with `await` and receives `[dialogResult, value]`
+- The dialog closes itself through `closeDialog(...)`
+- The generic `T` is the value returned from the dialog
 
-- Customizable header and footer
-- Flexible button configuration
-- Modal and non-modal modes
-- Responsive sizing
-- Integration with PrimeReact Dialog
+This pattern gives strongly typed dialog results and a simple async flow.
 
-## Basic Usage
+## Example
 
 ```typescript
-import { Dialog } from '@cratis/components';
+import { useState } from 'react';
+import { DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
+import { Dialog } from '@cratis/components/Dialogs';
 
-function MyComponent() {
-    const [visible, setVisible] = useState(false);
+type Project = {
+    id: string;
+    name: string;
+};
+
+const AddProjectDialog = () => {
+    const { closeDialog } = useDialogContext<Project>();
+    const [name, setName] = useState('');
 
     return (
         <Dialog
-            title="My Dialog"
-            visible={visible}
-            onCancel={() => setVisible(false)}
-            buttons={null}
+            title='Add project'
+            isValid={name.trim().length > 0}
+            onConfirm={() => closeDialog(DialogResult.Ok, { id: crypto.randomUUID(), name })}
+            onCancel={() => closeDialog(DialogResult.Cancelled)}
         >
-            <p>Dialog content goes here</p>
+            {/* Dialog content */}
         </Dialog>
     );
-}
+};
+
+const MyComponent = () => {
+    const [AddProjectDialogWrapper, showAddProjectDialog] = useDialog<Project>(AddProjectDialog);
+
+    const handleAddProject = async () => {
+        const [result, project] = await showAddProjectDialog();
+        if (result === DialogResult.Ok && project) {
+            // Use the typed result
+        }
+    };
+
+    return (
+        <>
+            <button onClick={handleAddProject}>Add project</button>
+            <AddProjectDialogWrapper />
+        </>
+    );
+};
 ```
 
 ## Props
 
 - `title`: Dialog header text
-- `visible`: Controls visibility
-- `onCancel`: Callback when dialog is closed
-- `buttons`: Button configuration (or null for no buttons)
+- `visible`: Controls visibility (defaults to `true`)
+- `onConfirm`: Callback for confirm actions
+- `onCancel`: Callback for cancel actions
+- `onClose`: Fallback close callback
+- `buttons`: Predefined `DialogButtons` or custom footer content
 - `width`: Dialog width
-- `style`: Custom CSS styles
-
-## With Custom Buttons
-
-```typescript
-const buttons = [
-    {
-        label: 'Save',
-        icon: 'pi pi-check',
-        onClick: handleSave
-    },
-    {
-        label: 'Cancel',
-        icon: 'pi pi-times',
-        onClick: () => setVisible(false)
-    }
-];
-
-<Dialog
-    title="Edit Item"
-    visible={visible}
-    onCancel={() => setVisible(false)}
-    buttons={buttons}
->
-    {/* Content */}
-</Dialog>
-```
+- `resizable`: Enables resize
+- `isValid`: Enables or disables confirm actions
+- `okLabel`, `cancelLabel`, `yesLabel`, `noLabel`: Button labels
 
-## Integration
+## Notes
 
-Integrates with PrimeReact Dialog component for consistent styling and behavior.
+- Prefer `onConfirm` and `onCancel` over `onClose` for clear intent.
+- For typed, awaitable dialogs, let the dialog call `closeDialog(...)` from `useDialogContext<T>()`.

From 7756da9cc32974a91056c38355aefd898126a76e Mon Sep 17 00:00:00 2001
From: Einar <einari@me.com>
Date: Mon, 2 Mar 2026 17:00:02 +0100
Subject: [PATCH 3/6] Updating stories for what we recommend

---
 .../CommandDialog/CommandDialog.stories.tsx   |  53 ++++++++-
 Source/Dialogs/Dialog.stories.tsx             | 103 ++++++++++++++----
 2 files changed, 133 insertions(+), 23 deletions(-)

diff --git a/Source/CommandDialog/CommandDialog.stories.tsx b/Source/CommandDialog/CommandDialog.stories.tsx
index 62f17c2..8737bad 100644
--- a/Source/CommandDialog/CommandDialog.stories.tsx
+++ b/Source/CommandDialog/CommandDialog.stories.tsx
@@ -7,6 +7,7 @@ import { CommandDialog } from './CommandDialog';
 import { Command, CommandResult, CommandValidator } from '@cratis/arc/commands';
 import { PropertyDescriptor } from '@cratis/arc/reflection';
 import { InputTextField, NumberField, TextAreaField } from '../CommandForm/fields';
+import { DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
 import '@cratis/arc/validation';
 
 const meta: Meta<typeof CommandDialog> = {
@@ -213,8 +214,58 @@ const ServerValidationWrapper = () => {
     );
 };
 
+const AwaitableWithResultWrapper = () => {
+    const [result, setResult] = useState<string>('');
+
+    const UpdateUserDialog = () => {
+        const { closeDialog } = useDialogContext<CommandResult<object>>();
+
+        return (
+            <CommandDialog<UpdateUserCommand>
+                command={UpdateUserCommand}
+                header="Update User Information (awaitable result)"
+                confirmLabel="Save"
+                cancelLabel="Cancel"
+                autoServerValidate={false}
+                onConfirm={async commandResult => closeDialog(DialogResult.Ok, commandResult)}
+                onCancel={() => closeDialog(DialogResult.Cancelled)}
+            >
+                <InputTextField value={(c: UpdateUserCommand) => c.name} title="Name" placeholder="Enter name (min 2 chars)" />
+                <InputTextField value={(c: UpdateUserCommand) => c.email} title="Email" placeholder="Enter email" type="email" />
+                <NumberField value={(c: UpdateUserCommand) => c.age} title="Age" placeholder="Enter age (18-120)" />
+            </CommandDialog>
+        );
+    };
+
+    const [UpdateUserDialogComponent, showUpdateUserDialog] = useDialog<CommandResult<object>>(UpdateUserDialog);
+
+    return (
+        <div className="storybook-wrapper">
+            <button
+                className="p-button p-component mb-3"
+                onClick={async () => {
+                    const [dialogResult, commandResult] = await showUpdateUserDialog();
+                    if (dialogResult === DialogResult.Ok && commandResult) {
+                        setResult(JSON.stringify(commandResult));
+                    }
+                }}
+            >
+                Open Dialog
+            </button>
+
+            {result && (
+                <div className="p-3 mt-3 bg-green-100 border-round">
+                    <strong>Command executed:</strong> {result}
+                </div>
+            )}
+
+            <UpdateUserDialogComponent />
+        </div>
+    );
+};
+
 export const Default: Story = {
-    render: () => <DialogWrapper />,
+    render: () => <AwaitableWithResultWrapper />,
 };
 
 export const WithServerValidation: Story = {
diff --git a/Source/Dialogs/Dialog.stories.tsx b/Source/Dialogs/Dialog.stories.tsx
index 9968b84..4c5c390 100644
--- a/Source/Dialogs/Dialog.stories.tsx
+++ b/Source/Dialogs/Dialog.stories.tsx
@@ -4,7 +4,7 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Dialog } from './Dialog';
-import { DialogButtons } from '@cratis/arc.react/dialogs';
+import { DialogButtons, DialogResult, useDialog, useDialogContext } from '@cratis/arc.react/dialogs';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
 
@@ -20,19 +20,28 @@ export default meta;
 type Story = StoryObj<typeof Dialog>;
 
 const DialogWrapper = ({ buttons, title, children, isValid }: { buttons: DialogButtons; title: string; children: React.ReactNode; isValid?: boolean }) => {
-    const [visible, setVisible] = useState(false);
-    return (
-        <>
-            <Button label="Open Dialog" onClick={() => setVisible(true)} />
+    const ResultDialog = () => {
+        const { closeDialog } = useDialogContext();
+
+        return (
             <Dialog
                 title={title}
-                visible={visible}
                 buttons={buttons}
-                onClose={() => setVisible(false)}
+                onConfirm={() => closeDialog(DialogResult.Ok)}
+                onCancel={() => closeDialog(DialogResult.Cancelled)}
                 isValid={isValid}
             >
                 {children}
             </Dialog>
+        );
+    };
+
+    const [DialogComponent, showDialog] = useDialog(ResultDialog);
+
+    return (
+        <>
+            <Button label="Open Dialog" onClick={async () => await showDialog()} />
+            <DialogComponent />
         </>
     );
 };
@@ -71,16 +80,18 @@ export const Ok: Story = {
 
 export const WithForm: Story = {
     render: () => {
-        const [visible, setVisible] = useState(false);
-        const [name, setName] = useState('');
-        return (
-            <>
-                <Button label="Open Form Dialog" onClick={() => setVisible(true)} />
+        type NameResult = { name: string };
+
+        const AddNameDialog = () => {
+            const { closeDialog } = useDialogContext<NameResult>();
+            const [name, setName] = useState('');
+
+            return (
                 <Dialog
                     title="Edit Name"
-                    visible={visible}
                     buttons={DialogButtons.OkCancel}
-                    onClose={() => setVisible(false)}
+                    onConfirm={() => closeDialog(DialogResult.Ok, { name })}
+                    onCancel={() => closeDialog(DialogResult.Cancelled)}
                     isValid={name.trim().length > 0}
                 >
                     <div className="flex flex-column gap-2">
@@ -96,6 +107,25 @@ export const WithForm: Story = {
                         )}
                     </div>
                 </Dialog>
+            );
+        };
+
+        const [AddNameDialogComponent, showAddNameDialog] = useDialog<NameResult>(AddNameDialog);
+        const [result, setResult] = useState('');
+
+        return (
+            <>
+                <Button
+                    label="Open Form Dialog"
+                    onClick={async () => {
+                        const [dialogResult, value] = await showAddNameDialog();
+                        if (dialogResult === DialogResult.Ok && value) {
+                            setResult(value.name);
+                        }
+                    }}
+                />
+                {result && <p>Last saved name: {result}</p>}
+                <AddNameDialogComponent />
             </>
         );
     }
@@ -103,23 +133,52 @@ export const WithForm: Story = {
 
 export const CustomButtons: Story = {
     render: () => {
-        const [visible, setVisible] = useState(false);
-        return (
-            <>
-                <Button label="Open Custom Dialog" onClick={() => setVisible(true)} />
+        type ActionResult = { action: 'draft' | 'publish' };
+
+        const CustomActionsDialog = () => {
+            const { closeDialog } = useDialogContext<ActionResult>();
+
+            return (
                 <Dialog
                     title="Custom Actions"
-                    visible={visible}
                     buttons={
                         <>
-                            <Button label="Save Draft" icon="pi pi-save" severity="secondary" onClick={() => setVisible(false)} />
-                            <Button label="Publish" icon="pi pi-send" onClick={() => setVisible(false)} />
+                            <Button
+                                label="Save Draft"
+                                icon="pi pi-save"
+                                severity="secondary"
+                                onClick={() => closeDialog(DialogResult.Ok, { action: 'draft' })}
+                            />
+                            <Button
+                                label="Publish"
+                                icon="pi pi-send"
+                                onClick={() => closeDialog(DialogResult.Ok, { action: 'publish' })}
+                            />
                         </>
                     }
-                    onClose={() => setVisible(false)}
+                    onCancel={() => closeDialog(DialogResult.Cancelled)}
                 >
                     <p>Choose what to do with your changes.</p>
                 </Dialog>
+            );
+        };
+
+        const [CustomActionsDialogComponent, showCustomActionsDialog] = useDialog<ActionResult>(CustomActionsDialog);
+        const [result, setResult] = useState('');
+
+        return (
+            <>
+                <Button
+                    label="Open Custom Dialog"
+                    onClick={async () => {
+                        const [dialogResult, value] = await showCustomActionsDialog();
+                        if (dialogResult === DialogResult.Ok && value) {
+                            setResult(value.action);
+                        }
+                    }}
+                />
+                {result && <p>Last action: {result}</p>}
+                <CustomActionsDialogComponent />
             </>
         );
     }

From 5ed521fd0dcf3b4fc9e50f7dbcedfdc49bc53563 Mon Sep 17 00:00:00 2001
From: Einar <einari@me.com>
Date: Mon, 2 Mar 2026 17:00:14 +0100
Subject: [PATCH 4/6] Adding flex-1

---
 Source/Common/Page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Source/Common/Page.tsx b/Source/Common/Page.tsx
index 0e43fc5..1ea5ded 100644
--- a/Source/Common/Page.tsx
+++ b/Source/Common/Page.tsx
@@ -11,7 +11,7 @@ export interface PageProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Page = ({ title, children, panel, ...rest }: PageProps) => {
     return (
-        <div className='flex flex-col h-full' {...rest}>
+        <div className='flex flex-col h-full flex-1' {...rest}>
             <h1 className='text-3xl mt-3 mb-4'>{title}</h1>
             <main className={`overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`}>
                 {children}

From fe2b2a4b199b7bc4e945b7856e3cd3c34eee20cc Mon Sep 17 00:00:00 2001
From: Einar <einari@me.com>
Date: Mon, 2 Mar 2026 17:00:50 +0100
Subject: [PATCH 5/6] Specs to prove the workflow for working with dialogs
 through closeDialog and context

---
 ...ng_with_close_dialog_and_command_result.ts | 82 +++++++++++++++++++
 Source/Dialogs/Dialog.tsx                     | 21 +++--
 ...confirming_with_close_dialog_and_result.ts | 58 +++++++++++++
 3 files changed, 152 insertions(+), 9 deletions(-)
 create mode 100644 Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
 create mode 100644 Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts

diff --git a/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts b/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
new file mode 100644
index 0000000..ebcd2a8
--- /dev/null
+++ b/Source/CommandDialog/for_CommandDialog/when_confirming_with_close_dialog_and_command_result.ts
@@ -0,0 +1,82 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { vi } from 'vitest';
+import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
+import { CommandDialog } from '../CommandDialog';
+
+const { closeDialog, commandResult } = vi.hoisted(() => ({
+    closeDialog: vi.fn(),
+    commandResult: {
+        isSuccess: true,
+        isValid: true,
+        validationResults: [],
+    },
+}));
+
+vi.mock('primereact/dialog', () => ({
+    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
+        React.createElement('div', null, props.footer, props.children),
+}));
+
+vi.mock('primereact/button', () => ({
+    Button: (props: { icon?: string; label?: string; onClick?: () => Promise<void> | void; disabled?: boolean }) => {
+        if (props.icon === 'pi pi-check' && props.onClick) {
+            props.onClick();
+        }
+        return React.createElement('button', { disabled: props.disabled }, props.label);
+    },
+}));
+
+vi.mock('@cratis/arc.react/dialogs', () => ({
+    DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
+    DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
+    useDialogContext: () => ({ closeDialog }),
+}));
+
+vi.mock('@cratis/arc.react/commands', () => ({
+    CommandForm: (props: { children?: React.ReactNode }) =>
+        React.createElement('div', null, props.children),
+    useCommandFormContext: () => ({
+        isValid: true,
+        setCommandValues: () => {},
+        setCommandResult: () => {},
+    }),
+    useCommandInstance: () => ({
+        execute: async () => commandResult,
+    }),
+    CommandFormFieldWrapper: (props: { field?: React.ReactNode }) =>
+        React.createElement('div', null, props.field),
+}));
+
+class TestCommand {
+    name: string = '';
+}
+
+const TestDialog = () => {
+    const { closeDialog: closeWithResult } = useDialogContext<typeof commandResult>();
+
+    return React.createElement(CommandDialog<TestCommand>, {
+        command: TestCommand,
+        header: 'Update user',
+        onConfirm: async result => closeWithResult(DialogResult.Ok, result),
+        onCancel: () => closeWithResult(DialogResult.Cancelled),
+    });
+};
+
+describe('when confirming with close dialog and command result', () => {
+    beforeEach(() => {
+        closeDialog.mockReset();
+        renderToStaticMarkup(React.createElement(TestDialog));
+    });
+
+    it('should_close_once_with_ok_and_the_command_result', () => {
+        if (closeDialog.mock.calls.length !== 1) {
+            throw new Error(`Expected one closeDialog call, got ${closeDialog.mock.calls.length}`);
+        }
+        closeDialog.mock.calls[0][0].should.equal(3);
+        closeDialog.mock.calls[0][1].should.equal(commandResult);
+    });
+});
diff --git a/Source/Dialogs/Dialog.tsx b/Source/Dialogs/Dialog.tsx
index 157c91c..82bfd36 100644
--- a/Source/Dialogs/Dialog.tsx
+++ b/Source/Dialogs/Dialog.tsx
@@ -61,24 +61,27 @@ export const Dialog = ({
     );
 
     const handleClose = async (result: DialogResult) => {
-        // Use new onConfirm/onCancel callbacks if provided, otherwise fall back to onClose
-        let closeResult: boolean | void | Promise<boolean> | Promise<void> = true;
-        
+        let shouldCloseThroughContext = true;
+
         if (result === DialogResult.Ok || result === DialogResult.Yes) {
             if (onConfirm) {
-                closeResult = await onConfirm();
+                const closeResult = await onConfirm();
+                shouldCloseThroughContext = closeResult === true;
             } else if (onClose) {
-                closeResult = await onClose(result);
+                const closeResult = await onClose(result);
+                shouldCloseThroughContext = closeResult !== false;
             }
         } else {
             if (onCancel) {
-                closeResult = await onCancel();
+                const closeResult = await onCancel();
+                shouldCloseThroughContext = closeResult === true;
             } else if (onClose) {
-                closeResult = await onClose(result);
+                const closeResult = await onClose(result);
+                shouldCloseThroughContext = closeResult !== false;
             }
         }
-        
-        if (closeResult !== false) {
+
+        if (shouldCloseThroughContext) {
             contextCloseDialog?.(result);
         }
     };
diff --git a/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
new file mode 100644
index 0000000..b0c8ab1
--- /dev/null
+++ b/Source/Dialogs/for_Dialog/when_confirming_with_close_dialog_and_result.ts
@@ -0,0 +1,58 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { vi } from 'vitest';
+import { Dialog } from '../Dialog';
+
+const { closeDialog } = vi.hoisted(() => ({
+    closeDialog: vi.fn(),
+}));
+
+vi.mock('primereact/dialog', () => ({
+    Dialog: (props: { footer?: React.ReactNode; children?: React.ReactNode }) =>
+        React.createElement('div', null, props.footer, props.children),
+}));
+
+vi.mock('primereact/button', () => ({
+    Button: (props: { icon?: string; label?: string; onClick?: () => Promise<void> | void; disabled?: boolean }) => {
+        if (props.icon === 'pi pi-check' && props.onClick) {
+            props.onClick();
+        }
+        return React.createElement('button', { disabled: props.disabled }, props.label);
+    },
+}));
+
+vi.mock('@cratis/arc.react/dialogs', () => ({
+    DialogButtons: { Ok: 1, OkCancel: 2, YesNo: 3, YesNoCancel: 4 },
+    DialogResult: { None: 0, Yes: 1, No: 2, Ok: 3, Cancelled: 4 },
+    useDialogContext: () => ({ closeDialog }),
+}));
+
+describe('when confirming with close dialog and result', () => {
+    const resultPayload = { id: 'project-1', name: 'Project 1' };
+
+    beforeEach(() => {
+        closeDialog.mockReset();
+
+        const element = React.createElement(Dialog, {
+            title: 'Add project',
+            visible: true,
+            onConfirm: () => closeDialog(3, resultPayload),
+            onCancel: () => closeDialog(4),
+            buttons: 2,
+            children: React.createElement('p', null, 'Dialog content'),
+        });
+
+        renderToStaticMarkup(element);
+    });
+
+    it('should_close_once_with_ok_and_the_payload', () => {
+        if (closeDialog.mock.calls.length !== 1) {
+            throw new Error(`Expected one closeDialog call, got ${closeDialog.mock.calls.length}`);
+        }
+        closeDialog.mock.calls[0][0].should.equal(3);
+        closeDialog.mock.calls[0][1].should.deep.equal(resultPayload);
+    });
+});

From eed3a05b21959d6aff1893a34f7439914d56bec8 Mon Sep 17 00:00:00 2001
From: Einar <einari@me.com>
Date: Mon, 2 Mar 2026 17:06:34 +0100
Subject: [PATCH 6/6] Fixing build errors

---
 .../CommandDialog/CommandDialog.stories.tsx   | 61 -------------------
 1 file changed, 61 deletions(-)

diff --git a/Source/CommandDialog/CommandDialog.stories.tsx b/Source/CommandDialog/CommandDialog.stories.tsx
index 8737bad..6fba6b8 100644
--- a/Source/CommandDialog/CommandDialog.stories.tsx
+++ b/Source/CommandDialog/CommandDialog.stories.tsx
@@ -88,67 +88,6 @@ class UpdateUserCommandWithServer extends Command<object> {
     }
 }
 
-const DialogWrapper = () => {
-    const [visible, setVisible] = useState(true);
-    const [result, setResult] = useState<string>('');
-    const [validationErrors, setValidationErrors] = useState<string[]>([]);
-
-    return (
-        <div className="storybook-wrapper">
-            <button
-                className="p-button p-component mb-3"
-                onClick={() => {
-                    setVisible(true);
-                    setValidationErrors([]);
-                    setResult('');
-                }}
-            >
-                Open Dialog
-            </button>
-
-            {validationErrors.length > 0 && (
-                <div className="p-3 mt-3 bg-red-100 border-round">
-                    <strong>Validation Errors:</strong>
-                    <ul className="mt-2 mb-0">
-                        {validationErrors.map((error, index) => (
-                            <li key={index}>{error}</li>
-                        ))}
-                    </ul>
-                </div>
-            )}
-
-            {result && (
-                <div className="p-3 mt-3 bg-green-100 border-round">
-                    <strong>Command executed:</strong> {result}
-                </div>
-            )}
-
-            <CommandDialog<UpdateUserCommand>
-                command={UpdateUserCommand}
-                visible={visible}
-                header="Update User Information (with Validation)"
-                confirmLabel="Save"
-                cancelLabel="Cancel"
-                autoServerValidate={false}
-                onConfirm={async (commandResult) => {
-                    setResult(JSON.stringify(commandResult));
-                    setVisible(false);
-                }}
-                onCancel={() => setVisible(false)}
-                onFieldChange={(command) => {
-                    // Client-side only validation - validate as fields change
-                    const errors = command.validation?.validate(command) ?? [];
-                    setValidationErrors(errors.map(v => v.message));
-                }}
-            >
-                <InputTextField value={(c: UpdateUserCommand) => c.name} title="Name" placeholder="Enter name (min 2 chars)" />
-                <InputTextField value={(c: UpdateUserCommand) => c.email} title="Email" placeholder="Enter email" type="email" />
-                <NumberField value={(c: UpdateUserCommand) => c.age} title="Age" placeholder="Enter age (18-120)" />
-            </CommandDialog>
-        </div>
-    );
-};
-
 const ServerValidationWrapper = () => {
     const [visible, setVisible] = useState(true);
     const [result, setResult] = useState<string>('');