@molecule/app-ui-react 1.1.0 → 1.2.1

package/README.md

@@ -3,7 +3,7 @@ AUTO-GENERATED — DO NOT EDIT THIS FILE.
 Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
 Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
 To change this document, edit the module-level JSDoc in src/index.ts.
-Generated: 2026-09-24T08:01:39.991Z
+Generated: 2026-09-26T05:12:25.359Z
 -->
 
 # @molecule/app-ui-react
@@ -471,6 +471,35 @@ interface ConfirmButtonProps extends Omit<
 }
 ```
 
+#### `ConfirmDialogProps`
+
+Props for {@link ConfirmDialog}.
+
+```typescript
+interface ConfirmDialogProps {
+  /** Whether the dialog is open. */
+  open: boolean
+  /** Called when the dialog should close (escape, backdrop, cancel). */
+  onClose: () => void
+  /** Title. */
+  title: ReactNode
+  /** Body / warning text. */
+  description: ReactNode
+  /** Confirm-button label (e.g. "Delete"). */
+  confirmLabel?: ReactNode
+  /** Cancel-button label. */
+  cancelLabel?: ReactNode
+  /** Called when the user confirms. */
+  onConfirm: () => void | Promise<void>
+  /** Is the confirm action destructive? Defaults to true. */
+  destructive?: boolean
+  /** Extra body content between description and footer. */
+  children?: ReactNode
+  /** Disables both buttons. Set it yourself while your `onConfirm` promise is pending — the dialog does not track it and does not auto-close. */
+  loading?: boolean
+}
+```
+
 #### `ContainerProps`
 
 Props for the Container layout component.
@@ -826,6 +855,32 @@ interface LanguagePickerProps extends Omit<
 }
 ```
 
+#### `LoadErrorBannerProps`
+
+Props for {@link LoadErrorBanner}. Rest props are forwarded to the root
+`<div>`, so they are typed as its attributes.
+
+```typescript
+interface LoadErrorBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** The primary error line (e.g. the localized "Could not load X."). */
+  message: React.ReactNode
+  /** Secondary line under the message (status code, hint). */
+  detail?: React.ReactNode
+  /**
+   * Called when Retry is clicked. Return the promise; while pending, the
+   * button is disabled and shows "Retrying…". Omit for a display-only
+   * banner.
+   */
+  onRetry?: () => void | Promise<void>
+  /** Retry-button label. Falls back to a localized "Retry". */
+  retryLabel?: React.ReactNode
+  /** `data-mol-id` for the retry button (default `load-error-retry`). */
+  retryMolId?: string
+  /** Extra content between message and retry row (e.g. an error code). */
+  children?: React.ReactNode
+}
+```
+
 #### `ModalProps`
 
 Props for the Modal/Dialog component.
@@ -992,6 +1047,46 @@ interface ProgressProps extends BaseProps {
 }
 ```
 
+#### `PromptDialogProps`
+
+Props for {@link PromptDialog}.
+
+```typescript
+interface PromptDialogProps {
+  /** Whether the dialog is open. */
+  open: boolean
+  /** Called when the dialog should close (escape, backdrop, cancel, or a fulfilled {@link PromptDialogProps.onSubmit}). */
+  onClose: () => void
+  /** Dialog heading. */
+  title: React.ReactNode
+  /** Explanatory line under the title. */
+  description?: React.ReactNode
+  /** Input placeholder. */
+  placeholder?: string
+  /** Value the input starts from every time the dialog opens. */
+  initialValue?: string
+  /**
+   * Called with the entered value on confirm. Resolve to close the dialog;
+   * reject or throw to keep it open (show the error via {@link PromptDialogProps.children}).
+   */
+  onSubmit: (value: string) => void | Promise<void>
+  /** Confirm-button label. Falls back to a localized "Confirm". */
+  confirmLabel?: React.ReactNode
+  /** Cancel-button label. Falls back to a localized "Cancel". */
+  cancelLabel?: React.ReactNode
+  /** Render the confirm button in the error color (e.g. an irreversible reset). */
+  destructive?: boolean
+  /** `data-mol-id` for the text input. */
+  inputMolId?: string
+  /** `data-mol-id` for the confirm button. */
+  confirmMolId?: string
+  /** `data-mol-id` for the cancel button. */
+  cancelMolId?: string
+  /** Extra body content under the input (error banners, hints). */
+  children?: React.ReactNode
+}
+```
+
 #### `RadioGroupProps`
 
 Props for the RadioGroup component.
@@ -1059,6 +1154,151 @@ interface RadioOption<T = string> {
 }
 ```
 
+#### `ResponsiveAppShellContentProps`
+
+Props for the {@link ResponsiveAppShellContent} sub-component.
+
+```typescript
+interface ResponsiveAppShellContentProps {
+  /** The routed page content — typically an `<Outlet />`. */
+  children: ReactNode
+  /** Extra classes on the `<main>`. */
+  className?: string
+  /** Inline styles on the `<main>` (rarely needed — layout is owned). */
+  style?: React.CSSProperties
+  /** `data-mol-id` override. Default: `'shell-content'`. */
+  dataMolId?: string
+  /** `data-testid` override. */
+  testId?: string
+}
+```
+
+#### `ResponsiveAppShellDrawerProps`
+
+Props for the {@link ResponsiveAppShellDrawer} sub-component.
+
+```typescript
+interface ResponsiveAppShellDrawerProps {
+  /**
+   * Nav content — the links, same as (or adapted from) the Sidebar's. Only
+   * mounted while the drawer is open on a below-breakpoint viewport.
+   */
+  children: ReactNode
+  /**
+   * Header row content (typically the brand), rendered next to the close
+   * button.
+   */
+  header?: ReactNode
+  /**
+   * Accessible name for the dialog and its `<nav>` landmark. Defaults to the
+   * `appShell.primaryNav` translation (English fallback `"Primary
+   * navigation"`).
+   */
+  navLabel?: string
+  /** Below-nav content (user card, sign-out), after the `<nav>`. */
+  footer?: ReactNode
+  /** Whether the panel shows a close (X) button. Default: `true`. */
+  showCloseButton?: boolean
+  /** Extra classes on the dialog panel. */
+  className?: string
+  /** `data-mol-id` override for the panel. Default: `'shell-drawer'`. */
+  dataMolId?: string
+  /** `data-mol-id` override for the close button. Default: `'shell-drawer-close'`. */
+  closeDataMolId?: string
+  /** `data-testid` override for the panel. */
+  testId?: string
+}
+```
+
+#### `ResponsiveAppShellProps`
+
+Props for the {@link ResponsiveAppShell} root.
+
+```typescript
+interface ResponsiveAppShellProps {
+  /**
+   * The shell sub-components — `<ResponsiveAppShell.TopBar />`,
+   * `<ResponsiveAppShell.Sidebar />`, `<ResponsiveAppShell.Drawer />` and
+   * `<ResponsiveAppShell.Content />`.
+   */
+  children: ReactNode
+  /**
+   * Sidebar (and drawer) width: `'sm'` (208px), `'md'` (240px, default),
+   * `'lg'` (256px) or an exact pixel number.
+   */
+  sidebarWidth?: ShellSidebarWidth
+  /** Extra classes on the root flex-row container. */
+  className?: string
+  /**
+   * `data-mol-id` for the root container. Defaults to `'shell-root'`.
+   */
+  dataMolId?: string
+}
+```
+
+#### `ResponsiveAppShellSidebarProps`
+
+Props for the {@link ResponsiveAppShellSidebar} sub-component.
+
+```typescript
+interface ResponsiveAppShellSidebarProps {
+  /**
+   * Nav content — the links (they land inside the sidebar's `<nav>` landmark;
+   * pass `aria-current="page"` from the active one yourself). Typically the
+   * SAME element variable the Drawer receives, so only the mounted
+   * breakpoint's copy ever instantiates.
+   */
+  children: ReactNode
+  /**
+   * Accessible name for the sidebar's `<nav>` landmark. Defaults to the
+   * `appShell.primaryNav` translation (English fallback `"Primary
+   * navigation"`).
+   */
+  navLabel?: string
+  /**
+   * Below-nav content (user card, quick action) — rendered after the `<nav>`
+   * in a bordered footer row, so it does not sit inside the nav landmark.
+   */
+  footer?: ReactNode
+  /** Extra classes on the `<aside>`. */
+  className?: string
+  /** `data-mol-id` override. Default: `'shell-sidebar'`. */
+  dataMolId?: string
+  /** `data-testid` override. */
+  testId?: string
+}
+```
+
+#### `ResponsiveAppShellTopBarProps`
+
+Props for the {@link ResponsiveAppShellTopBar} sub-component.
+
+```typescript
+interface ResponsiveAppShellTopBarProps {
+  /**
+   * Brand/title node, rendered after the menu trigger — typically a
+   * `<Link to="/…">` with the app name or logo. The shell wraps it in a
+   * flex row; style the node itself.
+   */
+  brand?: ReactNode
+  /** Trailing actions — user menu, theme toggle, search, etc. */
+  actions?: ReactNode
+  /**
+   * Render the top bar only below the breakpoint (mount-conditioned, not
+   * CSS-hidden — no dead DOM on desktop). For apps whose desktop shell has
+   * no top bar (e.g. the sidebar carries everything). Default: `false`
+   * (top bar on every breakpoint).
+   */
+  mobileOnly?: boolean
+  /** Extra classes on the `<header>`. */
+  className?: string
+  /** `data-mol-id` override. Default: `'shell-topbar'`. */
+  dataMolId?: string
+  /** `data-testid` override. */
+  testId?: string
+}
+```
+
 #### `SelectElementProps`
 
 Base props for select elements.
@@ -1853,6 +2093,19 @@ Framework-agnostic mouse event handler.
 type MouseEventHandler = EventHandler<MouseEvent>
 ```
 
+#### `ShellSidebarWidth`
+
+Semantic sidebar width — the same stack-agnostic presets
+`@molecule/app-sidebar-layout-react` uses, so both shells render the same
+fleet geometry: `sm` → 208px, `md` → 240px (default), `lg` → 256px. A raw
+`number` is an exact pixel width. Applied via inline style (a specific
+pixel width is the documented "value a swappable ClassMap cannot express
+as a token" case).
+
+```typescript
+type ShellSidebarWidth = 'sm' | 'md' | 'lg' | number
+```
+
 #### `Size`
 
 Standard size scale used across all molecule UI components (buttons, inputs, badges, etc.).
@@ -1912,6 +2165,30 @@ function cn(inputs?: (string | false | null | undefined)[]): string
 
 **Returns:** A single space-separated class string.
 
+#### `ConfirmDialog(props)`
+
+Are-you-sure-style confirmation modal for destructive actions.
+
+Use standalone (around delete buttons, revoke tokens, irreversible
+migrations) or with a DangerZoneSection action.
+
+```typescript
+function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  destructive = true,
+  children,
+  loading,
+}: ConfirmDialogProps): JSX.Element
+```
+
+- `props` — Component props (see {@link ConfirmDialogProps}).
+
 #### `Icon(props)`
 
 Renders an SVG glyph looked up by `name` from the bonded
@@ -1978,6 +2255,24 @@ function LanguagePicker({
 
 - `props` — {@link LanguagePickerProps}
 
+#### `LoadErrorBanner(props)`
+
+Error banner with an owned pending-state Retry button.
+
+```typescript
+function LoadErrorBanner({
+  message,
+  detail,
+  onRetry,
+  retryLabel,
+  retryMolId = 'load-error-retry',
+  children,
+  ...rest
+}: LoadErrorBannerProps): JSX.Element
+```
+
+- `props` — Component props (see {@link LoadErrorBannerProps}).
+
 #### `PanelCloseProvider(props)`
 
 Provides the panel-close callback to descendants. Rendered internally
@@ -1992,6 +2287,127 @@ function PanelCloseProvider({ close, children }: PanelCloseProviderProps): JSX.E
 
 **Returns:** The children wrapped in the close-context provider.
 
+#### `PromptDialog(props)`
+
+Modal that asks the user for a short string, replacing `window.prompt`.
+
+```typescript
+function PromptDialog({
+  open,
+  onClose,
+  title,
+  description,
+  placeholder,
+  initialValue = '',
+  onSubmit,
+  confirmLabel,
+  cancelLabel,
+  destructive = false,
+  inputMolId,
+  confirmMolId,
+  cancelMolId,
+  children,
+}: PromptDialogProps): JSX.Element
+```
+
+- `props` — Component props (see {@link PromptDialogProps}).
+
+#### `ResponsiveAppShellContent(props)`
+
+The shell's `<main>` landmark. Grows to fill the row and may shrink below
+its content width, so page-level `overflow-x` strips scroll inside the
+page instead of widening the whole shell.
+
+```typescript
+function ResponsiveAppShellContent({
+  children,
+  className,
+  style,
+  dataMolId = 'shell-content',
+  testId,
+}: ResponsiveAppShellContentProps): JSX.Element
+```
+
+- `props` — The page content and class/id overrides.
+
+**Returns:** The main landmark.
+
+#### `ResponsiveAppShellDrawer(props)`
+
+The mobile nav drawer (<768px): a left-anchored dialog panel over a
+backdrop, opened by the menu trigger the TopBar renders.
+
+Implements the WAI-ARIA APG dialog pattern — focus moves into the panel on
+open and returns to the previously focused element (the trigger) on close,
+Tab is trapped inside, Escape and backdrop clicks close, body scroll locks
+(reference-counted with any stacked `<Modal>`), and the shell closes it on
+SPA navigation. Renders nothing on desktop or while closed.
+
+```typescript
+function ResponsiveAppShellDrawer({
+  children,
+  header,
+  navLabel,
+  footer,
+  showCloseButton = true,
+  className,
+  dataMolId = 'shell-drawer',
+  closeDataMolId = 'shell-drawer-close',
+  testId,
+}: ResponsiveAppShellDrawerProps): JSX.Element | null
+```
+
+- `props` — Nav children, header/nav-label/footer slots, close-button and class/id overrides.
+
+**Returns:** The drawer portal while open on mobile, otherwise `null`.
+
+#### `ResponsiveAppShellSidebar(props)`
+
+The desktop sidebar (`<aside>` + `<nav>` landmarks). Renders NOTHING below
+768px — the {@link ResponsiveAppShellDrawer} carries the nav there.
+
+Full viewport height, sticky at the top edge, scrolls internally when its
+content outgrows the viewport.
+
+```typescript
+function ResponsiveAppShellSidebar({
+  children,
+  navLabel,
+  footer,
+  className,
+  dataMolId = 'shell-sidebar',
+  testId,
+}: ResponsiveAppShellSidebarProps): JSX.Element | null
+```
+
+- `props` — Nav children, nav label, footer slot, class/id overrides.
+
+**Returns:** The sidebar landmarks, or `null` below the breakpoint.
+
+#### `ResponsiveAppShellTopBar(props)`
+
+The shell's `<header>` landmark: menu trigger (mobile, when a Drawer is
+composed), brand, and trailing actions.
+
+Sticks to the top of the viewport by default. The menu trigger renders
+only while a `ResponsiveAppShell.Drawer` is part of the composition AND
+the viewport is below the breakpoint.
+
+```typescript
+function ResponsiveAppShellTopBar({
+  brand,
+  actions,
+  mobileOnly = false,
+  className,
+  dataMolId = 'shell-topbar',
+  testId,
+}: ResponsiveAppShellTopBarProps): JSX.Element | null
+```
+
+- `props` — Brand/actions slots, `mobileOnly`, and class/id overrides.
+
+**Returns:** The header landmark, or `null` when `mobileOnly` is set on desktop.
+
 #### `SidebarUserCard(props)`
 
 Sidebar-resident user-account card: avatar + name + status line, opens
@@ -2069,6 +2485,27 @@ function ToastProvider({
 
 **Returns:** The rendered provider with toast container.
 
+#### `useIsDesktop(query)`
+
+Whether the viewport is at least 768px wide (the fleet's `md` breakpoint).
+
+Reads `window.matchMedia` synchronously in the state initializer, so the
+FIRST client render is already correct — no mobile-then-desktop swap frame
+(this is time-tracking's QA-hardened version; the naive
+"state starts false, sync in an effect" variant mounts the wrong shell for
+one frame and double-fetches route data on desktop). Subscribes to
+`change` events afterwards. Guarded for non-browser environments
+(SSR/node): returns `false` (the mobile shell) when no `window.matchMedia`
+exists.
+
+```typescript
+function useIsDesktop(query?: string): boolean
+```
+
+- `query` — Override the media query. Defaults to `(min-width: 768px)`.
+
+**Returns:** Whether the desktop shell should mount.
+
 #### `usePanelClose()`
 
 Returns the callback that dismisses the drawer the current panel is
@@ -2583,6 +3020,24 @@ const RadioGroup: React.ForwardRefExoticComponent<
 >
 ```
 
+#### `ResponsiveAppShell`
+
+The responsive app shell family — see the {@link ResponsiveAppShellBase |
+root component} and the module docs for the full contract.
+
+Consumed as `<ResponsiveAppShell.TopBar />`, `.Sidebar`, `.Drawer` and
+`.Content` inside `<ResponsiveAppShell>`; each is also exported as a named
+component (`ResponsiveAppShellTopBar`, …) for star-import consumers.
+
+```typescript
+const ResponsiveAppShell: typeof ResponsiveAppShellBase & {
+  TopBar: typeof ResponsiveAppShellTopBar
+  Sidebar: typeof ResponsiveAppShellSidebar
+  Drawer: typeof ResponsiveAppShellDrawer
+  Content: typeof ResponsiveAppShellContent
+}
+```
+
 #### `Select`
 
 Select component.

package/dist/components/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,kBAAkB,CAAA;AAyBhE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;WAAoD,OAAO;wCAkD5E,CAAA"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,kBAAkB,CAAA;AAyBhE;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;WAAoD,OAAO;wCAwD5E,CAAA"}

package/dist/components/Alert.js

@@ -40,12 +40,15 @@ const statusIconMap = {
  * page's normal content, and it announces politely (`role="status"`)
  * instead of interrupting.
  */
-export const Alert = forwardRef(({ children, title, status = 'info', variant: _variant, live = true, dismissible, onDismiss, icon, dismissLabel, className, style, testId, }, ref) => {
+export const Alert = forwardRef(({ children, title, status = 'info', variant, live = true, dismissible, onDismiss, icon, dismissLabel, className, style, testId, }, ref) => {
     const cm = getClassMap();
     const alertVariant = statusVariantMap[status] || 'default';
     const iconName = statusIconMap[alertVariant];
     const defaultIcon = iconName ? renderIcon(iconName, cm.iconMd) : null;
-    const alertClasses = cm.cn(cm.alert({ variant: alertVariant }), className);
+    const alertClasses = cm.cn(cm.alert({ variant: alertVariant }), 
+    // The core contract types variant="left-accent"; render it as a 4px
+    // status-colored leading bar (previously silently dropped).
+    variant === 'left-accent' && cm.alertLeftAccent({ variant: alertVariant }), className);
     const role = live ? 'alert' : 'status';
     return (_jsxs("div", { ref: ref, role: role, className: alertClasses, style: style, "data-testid": testId, children: [(icon || defaultIcon) && (_jsx("span", { className: cm.alertIconWrapper, children: (icon || defaultIcon) })), _jsxs("div", { className: cm.alertContent, children: [title && _jsx("h5", { className: cm.alertTitle, children: title }), _jsx("div", { className: cm.alertDescription, children: children })] }), dismissible && (_jsx("button", { type: "button", onClick: onDismiss, className: cm.alertDismiss, "aria-label": dismissLabel ?? t('ui.alert.dismiss', undefined, { defaultValue: 'Dismiss' }), children: renderIcon('x-mark', cm.iconSm) }))] }));
 });

package/dist/components/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAA;AAGtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,MAAM,gBAAgB,GACpB;IACE,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACb,CAAA;AAEH;;GAEG;AACH,MAAM,aAAa,GAA6B;IAC9C,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,UAAU;CAClB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,MAAM,EACf,OAAO,EAAE,QAAQ,EACjB,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,MAAM,GACP,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,IAAI,SAAS,CAAA;IAC1D,MAAM,QAAQ,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;IAC5C,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAErE,MAAM,YAAY,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,SAAS,CAAC,CAAA;IAC1E,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEtC,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,iBAAe,MAAM,aAClF,CAAC,IAAI,IAAI,WAAW,CAAC,IAAI,CACxB,eAAM,SAAS,EAAE,EAAE,CAAC,gBAAgB,YAAG,CAAC,IAAI,IAAI,WAAW,CAAoB,GAAQ,CACxF,EACD,eAAK,SAAS,EAAE,EAAE,CAAC,YAAY,aAC5B,KAAK,IAAI,aAAI,SAAS,EAAE,EAAE,CAAC,UAAU,YAAG,KAAK,GAAM,EACpD,cAAK,SAAS,EAAE,EAAE,CAAC,gBAAgB,YAAG,QAA2B,GAAO,IACpE,EACL,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,EAAE,CAAC,YAAY,gBAExB,YAAY,IAAI,CAAC,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,YAG9E,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,GACzB,CACV,IACG,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAA;AAGtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,MAAM,gBAAgB,GACpB;IACE,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACb,CAAA;AAEH;;GAEG;AACH,MAAM,aAAa,GAA6B;IAC9C,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,UAAU;CAClB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,MAAM,EACf,OAAO,EACP,IAAI,GAAG,IAAI,EACX,WAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,MAAM,GACP,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,IAAI,SAAS,CAAA;IAC1D,MAAM,QAAQ,GAAG,aAAa,CAAC,YAAY,CAAC,CAAA;IAC5C,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAErE,MAAM,YAAY,GAAG,EAAE,CAAC,EAAE,CACxB,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;IACnC,oEAAoE;IACpE,4DAA4D;IAC5D,OAAO,KAAK,aAAa,IAAI,EAAE,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAC1E,SAAS,CACV,CAAA;IACD,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEtC,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,iBAAe,MAAM,aAClF,CAAC,IAAI,IAAI,WAAW,CAAC,IAAI,CACxB,eAAM,SAAS,EAAE,EAAE,CAAC,gBAAgB,YAAG,CAAC,IAAI,IAAI,WAAW,CAAoB,GAAQ,CACxF,EACD,eAAK,SAAS,EAAE,EAAE,CAAC,YAAY,aAC5B,KAAK,IAAI,aAAI,SAAS,EAAE,EAAE,CAAC,UAAU,YAAG,KAAK,GAAM,EACpD,cAAK,SAAS,EAAE,EAAE,CAAC,gBAAgB,YAAG,QAA2B,GAAO,IACpE,EACL,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,EAAE,CAAC,YAAY,gBAExB,YAAY,IAAI,CAAC,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,YAG9E,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,GACzB,CACV,IACG,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,71 @@
+/**
+ * ConfirmDialog component — the shared "Are you sure?" modal.
+ *
+ * Promoted from `@molecule/app-danger-zone-react` (2026-09-24) so every app
+ * confirms destructive actions through the framework bundle instead of
+ * hand-rolling `window.confirm` (broken headless + on touch) or reaching for
+ * the danger-zone feature package just to render one dialog. For an INLINE
+ * two-click arm/commit affordance use {@link ConfirmButton}; for a dialog
+ * that also collects text use {@link PromptDialog}.
+ *
+ * @example
+ * ```tsx
+ * import { ConfirmDialog } from '@molecule/app-ui-react'
+ *
+ * <ConfirmDialog
+ *   open={confirmOpen}
+ *   onClose={() => setConfirmOpen(false)}
+ *   title="Delete vault?"
+ *   description="This action cannot be undone."
+ *   confirmLabel={t('vault.delete', {}, { defaultValue: 'Delete' })}
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ *
+ * @remarks
+ * Does NOT track `onConfirm`'s promise and does NOT close itself on confirm:
+ * set `loading` yourself while the action runs, then call `onClose()` when it
+ * settles — otherwise users can double-fire the destructive action or be left
+ * staring at an open dialog. Cancel/Confirm fall back to the `confirm.*`
+ * i18n keys (companion bond: `@molecule/app-locales-danger-zone`); pass
+ * `confirmLabel`/`cancelLabel` for action-specific wording ("Delete",
+ * "Revoke"). `destructive` (default true) only switches the confirm button
+ * color. `data-mol-id` for e2e locators goes on YOUR trigger button; the
+ * dialog's own buttons are text-labeled ("Cancel"/confirm label) so
+ * `getByRole('button', { name })` reaches them.
+ *
+ * @module
+ */
+import type { JSX, ReactNode } from 'react';
+/** Props for {@link ConfirmDialog}. */
+export interface ConfirmDialogProps {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when the dialog should close (escape, backdrop, cancel). */
+    onClose: () => void;
+    /** Title. */
+    title: ReactNode;
+    /** Body / warning text. */
+    description: ReactNode;
+    /** Confirm-button label (e.g. "Delete"). */
+    confirmLabel?: ReactNode;
+    /** Cancel-button label. */
+    cancelLabel?: ReactNode;
+    /** Called when the user confirms. */
+    onConfirm: () => void | Promise<void>;
+    /** Is the confirm action destructive? Defaults to true. */
+    destructive?: boolean;
+    /** Extra body content between description and footer. */
+    children?: ReactNode;
+    /** Disables both buttons. Set it yourself while your `onConfirm` promise is pending — the dialog does not track it and does not auto-close. */
+    loading?: boolean;
+}
+/**
+ * Are-you-sure-style confirmation modal for destructive actions.
+ *
+ * Use standalone (around delete buttons, revoke tokens, irreversible
+ * migrations) or with a DangerZoneSection action.
+ * @param props - Component props (see {@link ConfirmDialogProps}).
+ */
+export declare function ConfirmDialog({ open, onClose, title, description, confirmLabel, cancelLabel, onConfirm, destructive, children, loading, }: ConfirmDialogProps): JSX.Element;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/components/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQ3C,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,sEAAsE;IACtE,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAA;IACtB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,qCAAqC;IACrC,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACrC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,+IAA+I;IAC/I,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAkB,EAClB,QAAQ,EACR,OAAO,GACR,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA2BlC"}

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Button } from './Button.js';
+import { Modal } from './Modal.js';
+/**
+ * Are-you-sure-style confirmation modal for destructive actions.
+ *
+ * Use standalone (around delete buttons, revoke tokens, irreversible
+ * migrations) or with a DangerZoneSection action.
+ * @param props - Component props (see {@link ConfirmDialogProps}).
+ */
+export function ConfirmDialog({ open, onClose, title, description, confirmLabel, cancelLabel, onConfirm, destructive = true, children, loading, }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    return (_jsx(Modal, { open: open, onClose: onClose, children: _jsxs("div", { className: cm.stack(3), children: [_jsx("h2", { className: cm.cn(cm.textSize('lg'), cm.fontWeight('bold')), children: title }), _jsx("p", { className: cm.textSize('sm'), children: description }), children, _jsxs("div", { className: cm.flex({ justify: 'end', gap: 'sm' }), children: [_jsx(Button, { variant: "ghost", onClick: onClose, disabled: loading, children: cancelLabel ?? t('confirm.cancel', {}, { defaultValue: 'Cancel' }) }), _jsx(Button, { variant: "solid", color: destructive ? 'error' : 'primary', onClick: () => void onConfirm(), disabled: loading, children: loading
+                                ? '…'
+                                : (confirmLabel ?? t('confirm.confirm', {}, { defaultValue: 'Confirm' })) })] })] }) }));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/components/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":";AAyCA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AA0BlC;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,OAAO,GACY;IACnB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YACjC,eAAK,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,aACzB,aAAI,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,YAAG,KAAK,GAAM,EAC5E,YAAG,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAG,WAAW,GAAK,EACjD,QAAQ,EACT,eAAK,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,aACpD,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,YACxD,WAAW,IAAI,CAAC,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,GAC5D,EACT,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,SAAS,EAAE,EAC/B,QAAQ,EAAE,OAAO,YAEhB,OAAO;gCACN,CAAC,CAAC,GAAG;gCACL,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,iBAAiB,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,GACpE,IACL,IACF,GACA,CACT,CAAA;AACH,CAAC"}