@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/cadence/specs/rich-text-editor.md

@@ -0,0 +1,108 @@
+# Rich Text Editor
+
+The interaction body field uses a rich text editor built with Tiptap. Tiptap provides a headless, extensible editor on top of ProseMirror with first-class React support. The editor is used when creating or editing interactions (emails and notes) on a contact.
+
+## Storage Format
+
+Rich text content is stored as **HTML** in the `body` column of the interactions table. The column type is `TEXT` (up to ~65KB). Tiptap natively serializes to and parses from HTML, so no additional transformation layer is needed.
+
+The Zod schema remains `body: z.string()` — the string contains HTML markup. When creating or editing an interaction, the editor's HTML output is submitted as the body value. When loading an interaction for editing, the HTML string is passed back to the editor as initial content.
+
+## Editor Configuration
+
+The editor uses a fixed set of Tiptap extensions. No extension is optional or user-configurable.
+
+```ts
+const extensions = [
+  StarterKit.configure({
+    heading: { levels: [1, 2, 3] }
+  }),
+  Link.configure({
+    openOnClick: false,
+    autolink: true
+  }),
+  Placeholder.configure({
+    placeholder: 'Write your note...'
+  })
+]
+```
+
+### Included via StarterKit
+
+- **Bold**, **Italic**, **Strike** — inline formatting
+- **Headings** — H1, H2, H3
+- **Bullet List**, **Ordered List** — with list items
+- **Blockquote**
+- **Code** (inline) and **Code Block**
+- **Horizontal Rule**
+- **Hard Break** — shift+enter line break within a block
+
+### Additional Extensions
+
+- **Link** — URLs are detected and auto-linked as the user types. Clicking a link in the editor does not navigate (editing mode). Links open in a new tab when viewing.
+- **Placeholder** — ghost text shown when the editor is empty
+
+### Not Included
+
+No image uploads, tables, text color, font size, or text alignment. The editor is optimized for structured prose — the kind of content you'd write in an email or meeting note.
+
+## Toolbar
+
+The toolbar sits directly above the editor area. Buttons are grouped by function with visual dividers between groups. Each button toggles its formatting on or off and shows an active state when the cursor is inside that format.
+
+| Group      | Buttons                              |
+| ---------- | ------------------------------------ |
+| Text       | Bold, Italic, Strikethrough          |
+| Heading    | H1, H2, H3                          |
+| List       | Bullet List, Ordered List            |
+| Block      | Blockquote, Code Block               |
+| Insert     | Horizontal Rule, Link                |
+
+### Link Button Behavior
+
+Clicking the link button opens a small popover with a URL text input and a confirm button. If the cursor is on an existing link, the popover pre-fills the URL and shows a remove button. The popover closes on confirm, remove, escape, or clicking outside.
+
+## Editor Component
+
+The editor is a single reusable component used in both the create and edit interaction forms. It accepts initial HTML content and exposes the current HTML content for form submission.
+
+```tsx
+<RichTextEditor
+  content={interaction?.body ?? ''}
+  onChange={(html) => setBody(html)}
+  placeholder="Write your note..."
+/>
+```
+
+- **Create flow** — editor starts empty (or with placeholder text)
+- **Edit flow** — editor initializes with the existing `body` HTML from the interaction
+- The component renders the toolbar and the editable area together as a single bordered container
+
+### Form Integration
+
+The editor stores its HTML output in a hidden input or a React state value that gets included in the form submission. The body is submitted alongside the other interaction fields (type, subject, date) using the same form action pattern as the rest of the app.
+
+On submit, the body HTML is validated server-side:
+- Must not be empty (strip tags and check for non-whitespace content)
+- Must not exceed 50,000 characters (HTML markup included)
+
+## Rendering Saved Content
+
+When displaying a saved interaction (contact detail page, recent activity), the body HTML is rendered inside a `prose` container using Tailwind Typography. This ensures consistent styling for headings, lists, links, blockquotes, and code blocks without writing custom CSS for each element.
+
+```tsx
+<div className="prose prose-sm" dangerouslySetInnerHTML={{ __html: interaction.body }} />
+```
+
+### Sanitization
+
+Before rendering, the HTML is sanitized server-side to strip any tags or attributes not produced by the editor. This prevents XSS if content is ever modified outside the editor. Allowed tags and attributes correspond exactly to what the configured Tiptap extensions can produce.
+
+## Interaction Type Differences
+
+The editor behaves the same for both email and note interactions. The only difference is contextual:
+
+- **Email** — the form includes a subject field above the editor. Placeholder text reads "Write your email..."
+- **Note** — no subject field. Placeholder text reads "Write your note..."
+
+The toolbar, extensions, and storage format are identical for both types.

package/skills/maestro-examples/references/cadence/specs/table.md

@@ -0,0 +1,151 @@
+# Table Component
+
+The contacts table is the primary interface for browsing and managing contacts. It uses TanStack Table for client-side sorting, filtering, and column management. All data is fetched server-side; TanStack Table operates on the already-loaded dataset.
+
+## Column Definitions
+
+Each column is defined with `columnHelper.accessor(...)` or `columnHelper.display(...)`. The contacts table has these columns:
+
+| Column           | Accessor              | Sortable | Filterable | Notes                                        |
+| ---------------- | --------------------- | -------- | ---------- | -------------------------------------------- |
+| Name             | `firstName`           | Yes      | Yes        | Renders `firstName + lastName`               |
+| Email            | `email`               | Yes      | No         |                                              |
+| Phone            | `phone`               | No       | No         |                                              |
+| Job Title        | `jobTitle`            | Yes      | No         |                                              |
+| Tags             | `tags`                | No       | Yes        | Renders chips                                |
+| Last Contacted   | derived                | Yes      | Yes        | Computed from most recent interaction date   |
+| Created          | `createdDate`         | Yes      | No         |                                              |
+| Actions          | display column         | No       | No         | Archive, delete, edit actions                |
+
+### Derived Columns
+
+The **Last Contacted** column is not stored on the contact model. The server returns it as part of the contact list response (a computed field from the most recent interaction date). TanStack Table treats it like any other accessor once the data arrives.
+
+## Sorting
+
+TanStack Table manages sorting state via `SortingState`, an array of `{ id: string, desc: boolean }` objects.
+
+```tsx
+const [sorting, setSorting] = useState<SortingState>([
+  { id: 'firstName', desc: false }
+])
+
+const table = useReactTable({
+  data: contacts,
+  columns,
+  state: { sorting },
+  onSortingChange: setSorting,
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel()
+})
+```
+
+- Multi-column sorting is supported by default — holding shift and clicking a second column header adds it to the sort array
+- The default sort is by first name ascending
+- Column headers render a sort indicator (asc/desc/none) from `header.column.getIsSorted()`
+
+## Filtering
+
+Filtering uses TanStack Table's `ColumnFiltersState` — an array of `{ id: string, value: unknown }` objects. Each filterable column has a `filterFn` that determines how values are matched.
+
+```tsx
+const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+const table = useReactTable({
+  data: contacts,
+  columns,
+  state: { columnFilters },
+  onColumnFiltersChange: setColumnFilters,
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getSortedRowModel: getSortedRowModel()
+})
+```
+
+### Filter Types by Column
+
+**Name** — text input. Uses the built-in `includesString` filter function. Matches against the combined `firstName + lastName` string.
+
+**Tags** — multi-select. The filter value is a `string[]` of selected tag names. A custom `filterFn` checks that every selected tag exists in the contact's `tags` array (AND logic — the contact must have all selected tags).
+
+```tsx
+filterFn: (row, columnId, selectedTags: string[]) => {
+  const tags = row.getValue<string[]>(columnId)
+  return selectedTags.every(tag => tags.includes(tag))
+}
+```
+
+**Last Contacted** — date range preset. The filter value is a `{ preset: string }` object with options like "Last 7 days", "Last 30 days", "Over 30 days", "Over 90 days", "Never". A custom `filterFn` compares the contact's last interaction date against the selected range.
+
+```tsx
+filterFn: (row, columnId, filter: { preset: string }) => {
+  const date = row.getValue<string | null>(columnId)
+  if (filter.preset === 'never') return date === null
+  if (date === null) return false
+  const daysSince = daysBetween(date, now)
+  // match against preset thresholds
+}
+```
+
+### Filter Chips
+
+Active filters render as removable chips above the table. Each chip displays a human-readable summary of the filter (e.g. "Tag: Lead", "Last contacted: Over 30 days"). Clicking the X on a chip removes that entry from `columnFilters`.
+
+```tsx
+{columnFilters.map(filter => (
+  <FilterChip
+    key={filter.id}
+    label={formatFilterLabel(filter)}
+    onRemove={() => setColumnFilters(prev => prev.filter(f => f.id !== filter.id))}
+  />
+))}
+```
+
+## Global Search
+
+A single search input above the table filters across all text columns (name, email, job title). This uses TanStack Table's `globalFilterFn`.
+
+```tsx
+const [globalFilter, setGlobalFilter] = useState('')
+
+const table = useReactTable({
+  data: contacts,
+  columns,
+  state: { globalFilter, columnFilters, sorting },
+  onGlobalFilterChange: setGlobalFilter,
+  globalFilterFn: 'includesString',
+  getCoreRowModel: getCoreRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getSortedRowModel: getSortedRowModel()
+})
+```
+
+Global search and column filters compose together — a contact must pass both the global search and all active column filters to appear in the table.
+
+## Table Layout
+
+The table toolbar sits above the table body and contains, left to right:
+
+1. **Search input** — global text search with a debounced 300ms delay
+2. **Filter controls** — dropdowns/popovers for tag and last-contacted filters
+3. **Active filter chips** — removable pills showing each active filter
+
+Below the toolbar is the table itself with sortable column headers and data rows. Each row links to the contact detail page.
+
+## Recent Activity Table
+
+The Recent Activity view (V2) also uses TanStack Table but with a different column set:
+
+| Column        | Accessor   | Sortable | Filterable | Notes                          |
+| ------------- | ---------- | -------- | ---------- | ------------------------------ |
+| Contact       | derived    | Yes      | No         | Links to contact detail        |
+| Type          | `type`     | No       | Yes        | "email" or "note" multi-select |
+| Subject       | `subject`  | No       | No         |                                |
+| Date          | `date`     | Yes      | No         | Default sort desc              |
+| Logged By     | `userId`   | No       | Yes        | User name multi-select filter  |
+
+Filtering uses the same `ColumnFiltersState` pattern. The type filter is a multi-select (OR logic — show interactions matching any selected type). The logged-by filter is also a multi-select.
+
+## Archive Table
+
+The Archive view (V3) reuses the contacts table columns but shows only contacts where `archivedDate` is not null. It adds a **Restore** action column in place of the Archive action.

package/skills/maestro-examples/references/cadence/specs/use-cases.md

@@ -0,0 +1,62 @@
+# Use Cases
+
+Use cases for the multi-tenant CRM, grouped by entity.
+
+## Authentication
+
+| #   | Use Case                                                                          | Auth Required | Actor  |
+| --- | --------------------------------------------------------------------------------- | ------------- | ------ |
+| A1  | Log in with org slug, email, and password                                         | No            | Anyone |
+| A2  | Log out                                                                           | Yes           | User   |
+
+## Organizations
+
+| #   | Use Case                                                                          | Auth Required | Actor  |
+| --- | --------------------------------------------------------------------------------- | ------------- | ------ |
+| O1  | Create an organization (name + slug)                                              | No            | Anyone |
+| O2  | View organization details                                                         | Yes           | User   |
+| O3  | Edit organization name                                                            | Yes           | Admin  |
+| O4  | Delete an organization (soft delete)                                              | Yes           | Admin  |
+
+## Users
+
+| #   | Use Case                                                                          | Auth Required | Actor  |
+| --- | --------------------------------------------------------------------------------- | ------------- | ------ |
+| U1  | Invite a new user by email and assign a role                                      | Yes           | Admin  |
+| U2  | List users in the organization                                                    | Yes           | User   |
+| U3  | Change a user's role                                                              | Yes           | Admin  |
+| U4  | Remove a user from the organization                                               | Yes           | Admin  |
+
+## Contacts
+
+| #   | Use Case                                                                          | Auth Required | Actor  |
+| --- | --------------------------------------------------------------------------------- | ------------- | ------ |
+| C1  | List active contacts in a sortable, filterable table                              | Yes           | User   |
+| C2  | View a contact's detail page (info + interactions)                                | Yes           | User   |
+| C3  | Create a contact                                                                  | Yes           | Member |
+| C4  | Edit a contact's details (name, email, phone, job title)                          | Yes           | Member |
+| C5  | Add or remove tags on a contact                                                   | Yes           | Member |
+| C6  | Archive a contact (hide from default views)                                       | Yes           | Member |
+| C7  | Restore an archived contact                                                       | Yes           | Member |
+| C8  | Delete a contact                                                                  | Yes           | Member |
+| C9  | Filter contacts by tag, name, or last-contacted date                              | Yes           | User   |
+| C10 | Sort contacts by multiple columns                                                 | Yes           | User   |
+
+## Interactions
+
+| #   | Use Case                                                                          | Auth Required | Actor  |
+| --- | --------------------------------------------------------------------------------- | ------------- | ------ |
+| I1  | Log an email interaction on a contact                                             | Yes           | Member |
+| I2  | Log a note interaction on a contact                                               | Yes           | Member |
+| I3  | Edit an interaction (creator or admin only)                                       | Yes           | Member |
+| I4  | Delete an interaction (creator or admin only)                                     | Yes           | Member |
+| I5  | View interactions on a contact in reverse chronological order                     | Yes           | User   |
+
+## Views
+
+| #   | Use Case                                                                          | Auth Required | Actor  |
+| --- | --------------------------------------------------------------------------------- | ------------- | ------ |
+| V1  | View Contacts (default landing page, all active contacts)                         | Yes           | User   |
+| V2  | View Recent Activity (interactions across all contacts, reverse chronological)    | Yes           | User   |
+| V3  | View Archive (archived contacts with option to restore)                           | Yes           | User   |
+| V4  | Filter Recent Activity by interaction type and user                               | Yes           | User   |

package/skills/maestro-examples/references/cadence/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "moduleDetection": "force",
+
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true,
+
+    "strict": true,
+    "noImplicitAny": false,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true,
+
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["./src", "./packages/*/src", "./packages/*/tests", "./scripts"]
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/app.css

@@ -0,0 +1,152 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-primary-50: var(--color-sky-50);
+  --color-primary-100: var(--color-sky-100);
+  --color-primary-200: var(--color-sky-200);
+  --color-primary-300: var(--color-sky-300);
+  --color-primary-400: var(--color-sky-400);
+  --color-primary-500: var(--color-sky-500);
+  --color-primary-600: var(--color-sky-600);
+  --color-primary-700: var(--color-sky-700);
+  --color-primary-800: var(--color-sky-800);
+  --color-primary-900: var(--color-sky-900);
+  --color-primary-950: var(--color-sky-950);
+
+  --color-negative-50: var(--color-red-50);
+  --color-negative-100: var(--color-red-100);
+  --color-negative-200: var(--color-red-200);
+  --color-negative-300: var(--color-red-300);
+  --color-negative-400: var(--color-red-400);
+  --color-negative-500: var(--color-red-500);
+  --color-negative-600: var(--color-red-600);
+  --color-negative-700: var(--color-red-700);
+  --color-negative-800: var(--color-red-800);
+  --color-negative-900: var(--color-red-900);
+  --color-negative-950: var(--color-red-950);
+
+  --color-positive-50: var(--color-emerald-50);
+  --color-positive-100: var(--color-emerald-100);
+  --color-positive-200: var(--color-emerald-200);
+  --color-positive-300: var(--color-emerald-300);
+  --color-positive-400: var(--color-emerald-400);
+  --color-positive-500: var(--color-emerald-500);
+  --color-positive-600: var(--color-emerald-600);
+  --color-positive-700: var(--color-emerald-700);
+  --color-positive-800: var(--color-emerald-800);
+  --color-positive-900: var(--color-emerald-900);
+  --color-positive-950: var(--color-emerald-950);
+
+  --color-notice-50: var(--color-yellow-50);
+  --color-notice-100: var(--color-yellow-100);
+  --color-notice-200: var(--color-yellow-200);
+  --color-notice-300: var(--color-yellow-300);
+  --color-notice-400: var(--color-yellow-400);
+  --color-notice-500: var(--color-yellow-500);
+  --color-notice-600: var(--color-yellow-600);
+  --color-notice-700: var(--color-yellow-700);
+  --color-notice-800: var(--color-yellow-800);
+  --color-notice-900: var(--color-yellow-900);
+  --color-notice-950: var(--color-yellow-950);
+
+  --color-neutral-50: var(--color-gray-50);
+  --color-neutral-100: var(--color-gray-100);
+  --color-neutral-200: var(--color-gray-200);
+  --color-neutral-300: var(--color-gray-300);
+  --color-neutral-400: var(--color-gray-400);
+  --color-neutral-500: var(--color-gray-500);
+  --color-neutral-600: var(--color-gray-600);
+  --color-neutral-700: var(--color-gray-700);
+  --color-neutral-800: var(--color-gray-800);
+  --color-neutral-900: var(--color-gray-900);
+  --color-neutral-950: var(--color-gray-950);
+
+  --color-info-50: var(--color-blue-50);
+  --color-info-100: var(--color-blue-100);
+  --color-info-200: var(--color-blue-200);
+  --color-info-300: var(--color-blue-300);
+  --color-info-400: var(--color-blue-400);
+  --color-info-500: var(--color-blue-500);
+  --color-info-600: var(--color-blue-600);
+  --color-info-700: var(--color-blue-700);
+  --color-info-800: var(--color-blue-800);
+  --color-info-900: var(--color-blue-900);
+  --color-info-950: var(--color-blue-950);
+}
+
+/* Typography utilities */
+.typography-h1 {
+  @apply text-2xl font-semibold tracking-tight text-balance text-neutral-900;
+}
+
+.typography-h2 {
+  @apply text-base font-semibold text-neutral-900;
+}
+
+.typography-h3 {
+  @apply text-sm font-semibold text-neutral-900;
+}
+
+.typography-link {
+  @apply text-sm font-medium text-primary-500 hover:text-primary-600;
+}
+
+.typography-link-neutral {
+  @apply text-neutral-500 hover:text-neutral-600;
+}
+
+.typography-button {
+  @apply text-sm font-medium;
+}
+
+/* Route dialog view transitions */
+::view-transition-old(dialog-overlay) {
+  animation: dialog-overlay-out 200ms ease-in forwards;
+}
+::view-transition-new(dialog-overlay) {
+  animation: dialog-overlay-in 200ms ease-out;
+}
+::view-transition-old(dialog-modal) {
+  animation: dialog-modal-out 200ms ease-in forwards;
+}
+::view-transition-new(dialog-modal) {
+  animation: dialog-modal-in 250ms ease-out;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+}
+
+@keyframes dialog-overlay-in {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+  }
+  to {
+    opacity: 1;
+    backdrop-filter: blur(16px);
+  }
+}
+@keyframes dialog-overlay-out {
+  from {
+    opacity: 1;
+    backdrop-filter: blur(16px);
+  }
+  to {
+    opacity: 0;
+    backdrop-filter: blur(0px);
+  }
+}
+@keyframes dialog-modal-in {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+}
+@keyframes dialog-modal-out {
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/components/alert-dialog.tsx

@@ -0,0 +1,153 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add alert-dialog --directory app
+
+import * as React from 'react'
+import { Dialog, Modal, ModalOverlay, Heading } from 'react-aria-components'
+import { tw } from '../utils/tw'
+import { Icon } from './icon'
+import { Button } from './button'
+import { ButtonGroupContext } from './button-group'
+import { ButtonContext } from './helpers/button-context'
+
+export type AlertDialogProps = {
+  title: string
+  description?: string
+  variant?: 'info' | 'positive' | 'neutral' | 'negative' | 'notice'
+  icon?: React.ReactNode
+  children?: React.ReactNode | ((props: { close(): void }) => React.ReactNode)
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  isDismissable?: boolean
+  className?: string
+}
+
+const variantStyles = {
+  info: {
+    container: 'border-info-500/20',
+    icon: 'text-info-500',
+    iconBg: 'bg-info-500/10',
+    header: 'text-info-500'
+  },
+  positive: {
+    container: 'border-positive-200',
+    icon: 'text-positive-600',
+    iconBg: 'bg-positive-100',
+    header: 'text-positive-800'
+  },
+  notice: {
+    container: 'border-notice-200',
+    icon: 'text-notice-600',
+    iconBg: 'bg-notice-100',
+    header: 'text-notice-800'
+  },
+  negative: {
+    container: 'border-negative-200',
+    icon: 'text-negative-600',
+    iconBg: 'bg-negative-100',
+    header: 'text-negative-800'
+  },
+  neutral: {
+    container: 'border-neutral-200',
+    icon: 'text-neutral-600',
+    iconBg: 'bg-neutral-100',
+    header: 'text-neutral-700'
+  }
+}
+
+const defaultIconNames = {
+  info: 'information-circle',
+  positive: 'check',
+  neutral: 'information-circle',
+  negative: 'x-mark',
+  notice: 'exclamation-triangle'
+} as const
+
+interface AlertDialogContextValue {
+  close(): void
+}
+
+const AlertDialogContext = React.createContext<AlertDialogContextValue>({ close: () => undefined })
+
+function AlertDialog_({
+  description,
+  title,
+  variant = 'info',
+  icon,
+  isOpen,
+  onOpenChange,
+  isDismissable = true,
+  className,
+  children
+}: AlertDialogProps) {
+  const displayIcon = icon !== undefined ? icon : <Icon name={defaultIconNames[variant]} className="h-8 w-8" />
+  const styles = variantStyles[variant]
+
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable={isDismissable}
+      isKeyboardDismissDisabled={!isDismissable}
+      className={tw(
+        'fixed inset-0 z-[4000] flex items-center justify-center bg-black/25 backdrop-blur-sm',
+        'transition-opacity duration-200 ease-out',
+        'data-[entering]:opacity-0',
+        'data-[exiting]:opacity-0'
+      )}
+    >
+      <Modal
+        className={tw(
+          'w-[calc(100%-2rem)] max-w-sm',
+          'transition-all duration-200 ease-out',
+          'data-[entering]:scale-95 data-[entering]:opacity-0 data-[entering]:translate-y-2',
+          'data-[exiting]:scale-95 data-[exiting]:opacity-0 data-[exiting]:translate-y-2'
+        )}
+      >
+        <Dialog className={tw('outline-none bg-white rounded-xl shadow-xl ring-1 ring-black/5 w-full', className)} role="alertdialog">
+          {({ close }) => (
+            <AlertDialogContext.Provider value={{ close }}>
+              <ButtonGroupContext.Provider
+                value={{ orientation: 'horizontal', alignment: 'center', fullWidth: true, className: 'flex-nowrap' }}
+              >
+                <ButtonContext.Provider value={{ shape: 'rectangle', variant: 'soft', fullWidth: true }}>
+                  <div className={tw('border rounded-xl p-6', styles.container)}>
+                    <div className="flex flex-col items-center text-center">
+                      {displayIcon && (
+                        <div className={tw('w-12 h-12 rounded-xl flex items-center justify-center mb-4', styles.iconBg)}>
+                          <div className={tw(styles.icon)}>{displayIcon}</div>
+                        </div>
+                      )}
+                      <Heading
+                        slot="title"
+                        className={tw('text-xl font-semibold', description ? 'mb-2' : 'mb-5', styles.header)}
+                      >
+                        {title}
+                      </Heading>
+                      {description && <div className="text-sm text-neutral-600 mb-5">{description}</div>}
+                      {typeof children === 'function' ? children({ close }) : children}
+                    </div>
+                  </div>
+                </ButtonContext.Provider>
+              </ButtonGroupContext.Provider>
+            </AlertDialogContext.Provider>
+          )}
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+AlertDialog_.displayName = 'AlertDialog'
+
+function CancelButton({ children = 'Cancel' }: { children?: React.ReactNode }) {
+  const context = React.useContext(AlertDialogContext)
+  return (
+    <Button color="neutral" onClick={context.close} variant="soft" shape="rectangle">
+      {children}
+    </Button>
+  )
+}
+
+export const AlertDialog = Object.assign(AlertDialog_, {
+  CancelButton
+})