@cratis/components 1.10.1 → 2.0.0

package/README.md

@@ -23,11 +23,26 @@ The package provides dual CommonJS and ES Module builds with proper conditional
 ## Installation
 
 ```bash
-npm install @cratis/components
+npm install @cratis/components primereact primeicons
 # or
-yarn add @cratis/components
+yarn add @cratis/components primereact primeicons
 ```
 
+`primereact` and `primeicons` are peer dependencies — installing them in your
+app ensures a single copy is shared with the wrappers in this package. The
+`@cratis/arc*` packages and `react`/`react-dom` are also peer dependencies;
+you typically already have them.
+
+The following are **optional** peer dependencies, only required if you use the
+component that depends on them:
+
+| Component | Optional peer |
+|---|---|
+| `PivotViewer` | `pixi.js` (canvas) and `framer-motion` (animated panels) |
+| `DataPage` resizable layout | `allotment` |
+
+Install them only when you reach for the corresponding component.
+
 ## Usage
 
 ### Importing Components
@@ -46,16 +61,472 @@ import { TimeMachine, DataPage } from '@cratis/components';
 
 ### Available Subpath Exports
 
+Components:
+
+- `@cratis/components` — package root (re-exports `CratisComponentsProvider` and the namespaced component groups)
 - `@cratis/components/CommandDialog`
+- `@cratis/components/CommandStepper`
 - `@cratis/components/CommandForm`
+- `@cratis/components/CommandForm/fields`
 - `@cratis/components/Common`
 - `@cratis/components/DataPage`
 - `@cratis/components/DataTables`
 - `@cratis/components/Dialogs`
 - `@cratis/components/Dropdown`
-- `@cratis/components/EventModeling`
+- `@cratis/components/ObjectContentEditor`
+- `@cratis/components/ObjectNavigationalBar`
 - `@cratis/components/PivotViewer`
+- `@cratis/components/SchemaEditor`
 - `@cratis/components/TimeMachine`
+- `@cratis/components/Toolbar`
+- `@cratis/components/types`
+
+Stylesheets:
+
+- `@cratis/components/styles` — Tailwind utilities + Cratis CSS variable tokens (single stylesheet, recommended)
+- `@cratis/components/tokens` — only the `--cratis-*` CSS variable tokens (for consumers using their own utility CSS solution)
+
+## Styling
+
+This package ships primarily for its functionality and Arc integrations.
+Styling is designed to stay out of the way: choose the setup that matches how
+much control you want, and the other layers stay invisible.
+
+> **Tip — see each setup live:** every Storybook story includes a **Styling**
+> toolbar (paintbrush icon) that flips between five modes that demonstrate
+> the three setups below: *Lara Dark Blue*, *Lara Light Blue*, *Themed with
+> custom palette*, *Unstyled (bare structure)*, and *Unstyled + Tailwind pt*.
+> Open any story (`yarn dev`) and switch modes to see the same component under
+> each setup.
+
+### TL;DR — choose a styling setup
+
+| Setup | When | Effort | What you write |
+|---|---|---|---|
+| **Use a PrimeReact theme** | You want components to look good immediately and tweak from there. | Lowest | Theme CSS import + provider |
+| **Use a custom palette on top of a PrimeReact theme** | You want PrimeReact's structure but your own colors. | Low | A PrimeReact theme + CSS variable overrides |
+| **Use fully unstyled mode** | You're integrating into a tightly controlled design system. | Highest | `unstyled: true` + a `pt` preset in CSS or Tailwind |
+
+> **Why the first two options still load a PrimeReact theme**
+>
+> In PrimeReact 10, every widget's *structural* CSS (padding, borders, dialog
+> frame, focus rings, button shapes) ships **inside the theme file**. There is
+> no separate "primitives" stylesheet. So a consumer who doesn't load any
+> PrimeReact theme also has no structural CSS — components render as their
+> raw HTML primitives.
+>
+> The `--cratis-*` token layer is therefore an **additive Cratis-scoped tint**
+> for surfaces *our* wrappers own (validation error text, the FormElement
+> addon, breadcrumb borders, etc.). It is not, by itself, enough to skin
+> PrimeReact widgets. Override PrimeReact's variables when you want the whole
+> UI in your palette. Use `unstyled: true` and a `pt` preset when you want to
+> replace PrimeReact's visuals entirely.
+
+All three setups use the same one-line setup. You can change direction later
+because the same provider, tokens, and `pt` hooks stay available.
+
+### One-line setup (every styling option)
+
+```tsx
+import '@cratis/components/styles';
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const App = () => (
+    <CratisComponentsProvider>
+        <YourApp />
+    </CratisComponentsProvider>
+);
+```
+
+- `@cratis/components/styles` ships the Tailwind utility classes used inside
+  the package plus the `--cratis-*` CSS variable token layer that every
+  internal component reads from. (Use `@cratis/components/tokens` instead if
+  you're bringing your own Tailwind.)
+- `CratisComponentsProvider` is a thin wrapper over PrimeReact's
+  `PrimeReactProvider` so Cratis has one place to layer in defaults. Drop in
+  raw `PrimeReactProvider` if you'd rather.
+
+The three setups below differ only in **what else** you load on top of this
+setup.
+
+---
+
+### Use a PrimeReact theme
+
+Load any PrimeReact theme stylesheet alongside Cratis Components. PrimeReact's
+own widgets paint themselves from the theme, and the `--cratis-*` tokens cascade
+to the matching theme variables so Cratis-scoped surfaces follow along.
+
+```tsx
+// 1. Theme first, then Cratis styles so any --cratis-* override wins.
+import 'primereact/resources/themes/lara-dark-blue/theme.css';
+import 'primeicons/primeicons.css';
+import '@cratis/components/styles';
+
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const App = () => (
+    <CratisComponentsProvider>
+        <YourApp />
+    </CratisComponentsProvider>
+);
+```
+
+#### Override a single component with CSS
+
+Plain CSS works fine on top of the theme. Target either PrimeReact's class
+names or your own `className`:
+
+```css
+/* yourApp.css */
+.p-button {
+    border-radius: 999px;            /* pill buttons everywhere */
+}
+
+.dangerous-button {
+    background: var(--cratis-red-500);
+    color: white;
+}
+```
+
+```tsx
+<Button label="Delete" className="dangerous-button" />
+```
+
+#### Override a single component with Tailwind
+
+Pass Tailwind utility classes through the wrapper's `className` prop:
+
+```tsx
+<InputTextField value={c => c.name}
+                className="rounded-2xl bg-slate-900 text-slate-50" />
+
+<Dialog title="Confirm" className="shadow-2xl rounded-3xl">
+    {/* … */}
+</Dialog>
+```
+
+**Use this setup when:** you're prototyping, building internal tools, or are
+happy with one of the prebuilt PrimeReact themes.
+
+---
+
+### Use a custom palette on top of a PrimeReact theme
+
+Keep a PrimeReact theme as your **structural baseline** (so every widget gets
+its padding, dialog frame, button shape, focus ring, etc.) and override the
+PrimeReact CSS variables on `:root` to repaint the whole UI in your own
+colors. The `--cratis-*` tokens follow along through tokens.css's cascade, so
+Cratis-scoped surfaces stay in sync — and you can override the Cratis tokens
+independently if you want Cratis surfaces to differ from PrimeReact widgets.
+
+#### With plain CSS
+
+```css
+/* palette.override.css — imported once, after @cratis/components/styles */
+:root {
+    /* PrimeReact variables — these are what PrimeReact widgets read. */
+    --surface-0:        #1e293b;
+    --surface-100:      #1e293b;
+    --surface-ground:   #020617;
+    --surface-section:  #0f172a;
+    --surface-card:     #1e293b;
+    --surface-overlay:  #1e293b;
+    --surface-hover:    #334155;
+    --surface-border:   #334155;
+
+    --text-color:           #f8fafc;
+    --text-color-secondary: #94a3b8;
+
+    --primary-color:      #38bdf8;
+    --primary-color-text: #0b1220;
+
+    --highlight-bg:         #1e40af;
+    --highlight-text-color: #ffffff;
+
+    --border-radius: 10px;
+
+    /* --cratis-* tokens default to var(--surface-*) etc. via tokens.css, so
+       the overrides above flow through automatically. Set these explicitly
+       only if you want Cratis-scoped surfaces tinted differently. */
+    --cratis-red-500:   #ef4444;
+    --cratis-green-500: #22c55e;
+}
+```
+
+```tsx
+// 1. PrimeReact theme provides the structure.
+import 'primereact/resources/themes/lara-dark-blue/theme.css';
+import 'primeicons/primeicons.css';
+import '@cratis/components/styles';
+// 2. Your palette overrides — must come after the theme so they win.
+import './palette.override.css';
+```
+
+#### Scoped (dark-on-light, light-on-dark, etc.)
+
+PrimeReact variables cascade like any other CSS variable, so an ancestor
+scope works:
+
+```css
+.dark-zone {
+    --surface-card: #0b1220;
+    --text-color:   #f8fafc;
+    --primary-color: #60a5fa;
+}
+```
+
+```tsx
+<div className="dark-zone">
+    <Dialog title="Always dark">…</Dialog>
+</div>
+```
+
+#### With Tailwind CSS
+
+Tailwind's `@layer base` is the idiomatic spot — declare the palette once and
+Tailwind handles cascade and dark mode:
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "primereact/resources/themes/lara-dark-blue/theme.css";
+@import "@cratis/components/styles";
+
+@layer base {
+    :root {
+        --surface-card:   theme('colors.slate.800');
+        --surface-border: theme('colors.slate.700');
+        --text-color:     theme('colors.slate.50');
+        --primary-color:  theme('colors.sky.400');
+        --cratis-red-500: theme('colors.red.500');
+    }
+
+    .dark {
+        --surface-card: theme('colors.slate.900');
+        --text-color:   theme('colors.slate.100');
+    }
+}
+```
+
+#### What `--cratis-*` tokens are for
+
+PrimeReact widgets read PrimeReact's own variables (`--surface-card`,
+`--text-color`, `--primary-color`, …) directly. Cratis wrappers add some
+surfaces of their own (inline validation error text, the FormElement addon
+background, the breadcrumb bottom border, etc.) — those use a parallel set
+of `--cratis-*` tokens that default to the PrimeReact value via the cascade
+defined in `tokens.css`.
+
+The upshot:
+
+- Override **PrimeReact variables** to repaint the whole UI (PrimeReact widgets + Cratis surfaces).
+- Override **`--cratis-*` tokens** when you specifically want Cratis surfaces to differ from PrimeReact widgets.
+
+#### `--cratis-*` token reference (Cratis-scoped surfaces)
+
+| Group | Tokens |
+|---|---|
+| Surfaces | `--cratis-surface-0`, `--cratis-surface-100`, `--cratis-surface-ground`, `--cratis-surface-section`, `--cratis-surface-card`, `--cratis-surface-overlay`, `--cratis-surface-hover`, `--cratis-surface-border` |
+| Text | `--cratis-text-color`, `--cratis-text-color-secondary` |
+| Brand | `--cratis-primary-color`, `--cratis-primary-color-text`, `--cratis-primary-300`, `--cratis-primary-400`, `--cratis-primary-500`, `--cratis-primary-600` |
+| Selection | `--cratis-highlight-bg`, `--cratis-highlight-text-color` |
+| Semantic | `--cratis-green-500`, `--cratis-orange-500`, `--cratis-red-500` |
+| Geometry | `--cratis-border-radius` |
+| Effects | `--cratis-focus-ring`, `--cratis-maskbg` |
+
+Each defaults to the PrimeReact variable with the same name minus the
+`--cratis-` prefix (e.g. `--cratis-surface-card` → `var(--surface-card)`).
+
+**Use this setup when:** you want a custom look without writing a PrimeReact
+theme from scratch, you're shipping multiple palette variants (light/dark/
+brand), or you want Cratis-scoped surfaces tinted differently from PrimeReact
+widgets.
+
+---
+
+### Use fully unstyled mode
+
+Turn off every PrimeReact base style at the provider and supply visuals
+through PrimeReact's `pt` (pass-through) mechanism, your own CSS, or both.
+Components render structurally only and become a blank canvas.
+
+```tsx
+import '@cratis/components/styles';   // tokens + Tailwind utilities still useful for spacing/layout
+import { CratisComponentsProvider } from '@cratis/components';
+
+export const App = () => (
+    <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
+        <YourApp />
+    </CratisComponentsProvider>
+);
+```
+
+#### A `pt` preset in plain CSS
+
+Attach a `className` from your own stylesheet via a global preset:
+
+```ts
+// pt-preset.ts
+export const globalPt = {
+    button: {
+        root: { className: 'my-btn' },
+    },
+    dialog: {
+        root: { className: 'my-dialog' },
+        header: { className: 'my-dialog__header' },
+        content: { className: 'my-dialog__body' },
+    },
+    inputtext: {
+        root: { className: 'my-input' },
+    },
+} as const;
+```
+
+```css
+/* yourApp.css */
+.my-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: var(--cratis-primary-color);
+    color: var(--cratis-primary-color-text);
+    border: none;
+    border-radius: var(--cratis-border-radius);
+    cursor: pointer;
+}
+
+.my-dialog__header {
+    padding: 1rem 1.25rem;
+    background: var(--cratis-surface-card);
+    border-bottom: 1px solid var(--cratis-surface-border);
+    font-weight: 600;
+}
+```
+
+#### A `pt` preset in Tailwind
+
+Same shape, Tailwind utilities as the class strings:
+
+```ts
+// pt-preset.ts
+export const globalPt = {
+    button: {
+        root: { className: 'inline-flex items-center px-4 py-2 rounded-lg bg-sky-500 text-white hover:bg-sky-400 disabled:opacity-50' },
+    },
+    dialog: {
+        root:    { className: 'rounded-2xl shadow-2xl overflow-hidden' },
+        header:  { className: 'px-5 py-3 bg-slate-800 text-slate-50 font-semibold border-b border-slate-700' },
+        content: { className: 'p-5 bg-slate-900 text-slate-100' },
+    },
+    inputtext: {
+        root: { className: 'w-full px-3 py-2 rounded-md bg-slate-800 text-slate-50 border border-slate-700 focus:border-sky-400 focus:outline-none' },
+    },
+} as const;
+```
+
+#### Per-instance overrides
+
+Anything global can be overridden per-instance — useful when one component
+needs to look different:
+
+```tsx
+<Dialog
+    title="Brand callout"
+    pt={{ root: { className: 'rounded-none' },
+          header: { className: 'bg-pink-600 text-white' } }}>
+    …
+</Dialog>
+
+<InputTextField value={c => c.name}
+                pt={{ root: { className: 'border-2 border-pink-500' } }} />
+```
+
+#### Composite components in unstyled mode
+
+`DataPage` and `StepperCommandDialog` compose multiple PrimeReact widgets and
+expose explicit per-slot props. The global `pt` reaches every internal widget;
+per-instance overrides target the inner slot directly:
+
+```tsx
+<DataPage<AllAuthors, Author, never>
+    title="Authors" query={AllAuthors}
+    tablePt={{ table: { className: 'min-w-full divide-y divide-slate-700' } }}
+    menubarPt={{ root: { className: 'px-3 py-2 bg-slate-900' } }}>
+    <DataPage.MenuItems>…</DataPage.MenuItems>
+    <DataPage.Columns>…</DataPage.Columns>
+</DataPage>
+
+<StepperCommandDialog<RegisterOrder> command={RegisterOrder} title="New order"
+    /* pt targets the Stepper */
+    pt={{ stepperpanel: { content: { className: 'pt-6' } } }}
+    /* dialogPt targets the outer Dialog */
+    dialogPt={{ header: { className: 'bg-slate-900' } }}>
+    …
+</StepperCommandDialog>
+```
+
+`ObjectContentEditor`, `ObjectNavigationalBar`, and `SchemaEditor` accept only
+`className` on the root — restyle their internals via the **global** `pt`
+preset.
+
+**Use this setup when:** you have a design system to honor, you're matching a
+brand kit, or you want zero PrimeReact CSS in the final bundle.
+
+---
+
+### Combining styling setups
+
+The styling options compose, so you don't have to choose one for the whole app:
+
+- **Themed with one unstyled component** — keep the PrimeReact theme and pass
+  `unstyled` per-component to opt that one widget out:
+  ```tsx
+  <Dialog title="Custom" unstyled pt={brandDialogPt}>…</Dialog>
+  ```
+- **Unstyled with one themed island** — wrap a subtree in a second
+  `CratisComponentsProvider` that restores defaults:
+  ```tsx
+  <CratisComponentsProvider value={{ unstyled: true, pt: globalPt }}>
+      <App />
+      <CratisComponentsProvider value={{ unstyled: false }}>
+          <PrimeReactThemedSubtree />
+      </CratisComponentsProvider>
+  </CratisComponentsProvider>
+  ```
+- **Dark mode** — scope the palette overrides to `.dark` (override
+  `--surface-card`, `--text-color`, `--primary-color`, etc., plus any
+  `--cratis-*` tokens you want to diverge) and toggle the class on the root
+  element. PrimeReact widgets and Cratis surfaces both follow the cascade.
+
+### Per-component `pt` cheat sheet
+
+Three patterns, depending on how much PrimeReact a wrapper composes:
+
+1. **Single-widget wrappers** — `Dialog`, every `CommandForm` field,
+   `EventsView`, and `Dropdown` forward `pt`, `ptOptions`, `unstyled`, and
+   `className` straight to their inner PrimeReact component.
+2. **Multi-slot composites** — `StepperCommandDialog` (`pt` for Stepper,
+   `dialogPt` for Dialog), `DataPage` (`tablePt` for DataTable, `menubarPt`
+   for Menubar), and `DataTableForQuery` / `DataTableForObservableQuery`
+   (`pt` for DataTable, `paginatorPt` for Paginator) — each slot has
+   `*PtOptions`, `*Unstyled`, and (where applicable) `*ClassName` siblings.
+3. **Large composites** — `ObjectContentEditor`, `ObjectNavigationalBar`,
+   `SchemaEditor` expose `className` only; restyle internals via the global
+   `pt` preset.
+
+### What is *not* fully pass-through
+
+A small number of internal usages opt into PrimeReact's slot-rendering by
+name (for example, a custom Menubar item template uses `p-menuitem-link` /
+`p-menuitem-text` to match the surrounding default-rendered items). These are
+correct contracts with PrimeReact's own slot rendering, not hard-coded
+theming — they have no effect in `unstyled` mode and match the rest of the
+menu in themed mode.
+
+`BusyIndicatorDialog` only honors the global `pt` set via
+`CratisComponentsProvider`; it does not accept per-instance `pt` because its
+request type is owned by `@cratis/arc.react`.
 
 ## Troubleshooting
 
@@ -81,4 +552,4 @@ If using TypeScript 4.7+, try updating your `tsconfig.json`:
 
 ### Import Errors
 
-Ensure you're using the correct import paths. The package uses case-sensitive paths that match the actual component names.
+Ensure you're using the correct import paths. The package uses case-sensitive paths that match the actual component names.

package/dist/cjs/CommandDialog/CommandDialog.js

@@ -6,7 +6,7 @@ var Dialog = require('../Dialogs/Dialog.js');
 var React = require('react');
 var commands = require('@cratis/arc.react/commands');
 
-const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, children }) => {
+const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resizable, buttons, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, className, pt, ptOptions, unstyled, children }) => {
     const { setCommandValues, setCommandResult, isValid: isCommandFormValid } = commands.useCommandFormContext();
     const commandInstance = commands.useCommandInstance();
     const [isBusy, setIsBusy] = React.useState(false);
@@ -63,11 +63,101 @@ const CommandDialogWrapper = ({ title, visible, width, style, contentStyle, resi
     };
     const processedChildren = processChildren(children);
     const isDialogValid = (isValid !== false) && isCommandFormValid;
-    return (jsxRuntime.jsx(Dialog.Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
+    return (jsxRuntime.jsx(Dialog.Dialog, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, onClose: onClose, onConfirm: handleConfirm, onCancel: onCancel, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isDialogValid, isBusy: isBusy, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: processedChildren }) }));
 };
+/**
+ * A {@link Dialog} that hosts a Cratis Arc `CommandForm`, runs the bound
+ * command on confirm, and only closes when the command succeeds. This is
+ * the standard pattern for "user fills in a form, clicks OK, command runs
+ * server-side, dialog dismisses" — `CommandDialog` collapses about thirty
+ * lines of orchestration into the props on a single component.
+ *
+ * ## Where `TCommand` comes from
+ *
+ * `TCommand` is an auto-generated TypeScript class produced by the Arc proxy
+ * generator from a C# `[Command]` record. `dotnet build` writes a `.ts` file
+ * per command with the right property types and a typed `execute()` method;
+ * importing the class is all the connection-to-the-backend you need. The
+ * class also exposes a `.use()` hook for direct (non-dialog) usage and a
+ * `useWithChangeTracking()` variant.
+ *
+ * ## What happens on confirm
+ *
+ * 1. If `onBeforeExecute` is supplied, it transforms the command values.
+ *    Used for generated IDs (`Guid.create()`) that the user did not type in.
+ * 2. The command's `execute()` runs through Arc's command pipeline. The
+ *    backend handler returns either a typed response (mapped to `TResponse`)
+ *    or a `ValidationResult[]`.
+ * 3. On `IsSuccess: true`, `onSuccess(response)` fires and the dialog closes
+ *    through the dialog host context.
+ * 4. On a validation failure, `onValidationFailure(errors)` fires and the
+ *    form's per-field error display is updated. The dialog stays open.
+ * 5. On a domain or transport failure, `onFailed(result)` fires. The dialog
+ *    stays open and the `CommandResult` is set on the form context so the
+ *    UI can surface the error to the user.
+ *
+ * Throughout, the dialog is in the `isBusy` state — every action button is
+ * disabled and the confirm button shows a spinner.
+ *
+ * ## Field binding
+ *
+ * Children that are `CommandFormField` instances (`InputTextField`,
+ * `NumberField`, `DropdownField`, every `@cratis/components/CommandForm/fields`
+ * widget) bind to a property on the command via the `value` accessor:
+ *
+ * ```tsx
+ * <InputTextField value={c => c.name} title="Name" />
+ * ```
+ *
+ * The accessor's argument is the command instance — TypeScript infers
+ * `c.name` is a string and the field type-checks against that. Arbitrary
+ * non-field children (custom layout, additional text, decorative elements)
+ * are rendered as plain content.
+ *
+ * ## Typed dialog host usage
+ *
+ * Combine with `useDialog<CommandResult<TResponse>>()` from
+ * `@cratis/arc.react/dialogs` to get a fully-typed result at the call site:
+ *
+ * ```tsx
+ * import { useDialog, DialogResult } from '@cratis/arc.react/dialogs';
+ * import { CommandDialog } from '@cratis/components/CommandDialog';
+ * import { RegisterAuthor } from './RegisterAuthor';   // proxy from C#
+ *
+ * type RegisterAuthorResponse = { authorId: string };
+ *
+ * const RegisterAuthorDialog = () => {
+ *     const { closeDialog } = useDialogContext<CommandResult<RegisterAuthorResponse>>();
+ *     return (
+ *         <CommandDialog<RegisterAuthor, RegisterAuthorResponse>
+ *             command={RegisterAuthor}
+ *             title="Register author"
+ *             okLabel="Register"
+ *             onSuccess={(response) => closeDialog(DialogResult.Ok)}
+ *             onCancel={() => closeDialog(DialogResult.Cancelled)}>
+ *             <InputTextField value={c => c.name}  title="Name" />
+ *             <InputTextField value={c => c.email} title="Email" />
+ *         </CommandDialog>
+ *     );
+ * };
+ * ```
+ *
+ * ## What's special vs. raw Dialog + CommandForm
+ *
+ * - Confirm wiring (`onConfirm` → `commandInstance.execute()`) is handled
+ *   internally; you only supply `onSuccess` / `onValidationFailure` / `onFailed`.
+ * - The dialog's `isBusy` state tracks the in-flight command without manual
+ *   `useState`.
+ * - Field error propagation from `CommandResult.validationResults` to the
+ *   form context is automatic.
+ *
+ * @typeParam TCommand - The command class (proxy generated from C# `[Command]`).
+ * @typeParam TResponse - The success payload type returned by the command's `Handle()` method on the backend.
+ * @param props - {@link CommandDialogProps}.
+ */
 const CommandDialogComponent = (props) => {
-    const { title, visible, width, style, contentStyle, resizable, buttons = dialogs.DialogButtons.OkCancel, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, children, ...commandFormProps } = props;
-    return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: commandFormProps.onBeforeExecute, children: children }) }));
+    const { title, visible, width, style, contentStyle, resizable, buttons = dialogs.DialogButtons.OkCancel, okLabel, cancelLabel, yesLabel, noLabel, isValid, onClose, onConfirm, onCancel, className, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
+    return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(CommandDialogWrapper, { title: title, visible: visible, width: width, style: style, contentStyle: contentStyle, resizable: resizable, buttons: buttons, okLabel: okLabel, cancelLabel: cancelLabel, yesLabel: yesLabel, noLabel: noLabel, isValid: isValid, onClose: onClose, onConfirm: onConfirm, onCancel: onCancel, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: commandFormProps.onBeforeExecute, className: className, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
 };
 const CommandDialogColumnWrapper = ({ children }) => (jsxRuntime.jsx(commands.CommandForm.Column, { children: children }));
 CommandDialogColumnWrapper.displayName = 'CommandFormColumn';

package/dist/cjs/CommandDialog/CommandDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","DialogResult","_jsx","CommandFormFieldWrapper","Dialog","DialogButtons","CommandForm"],"mappings":"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"}
+{"version":3,"file":"CommandDialog.js","sources":["../../../CommandDialog/CommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","DialogResult","_jsx","CommandFormFieldWrapper","Dialog","DialogButtons","CommandForm"],"mappings":"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"}