react-confirm-alert 3.0.6 → 3.1.1

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "react-confirm-alert",
-  "version": "3.0.6",
+  "version": "3.1.1",
   "description": "react component confirm dialog.",
   "main": "lib/index.js",
+  "module": "dist/index.esm.js",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline",
-    "test": "npm run lint && mocha ./test/**/*.test.js --compilers js:babel-register",
-    "test:watch": "mocha ./test/**/*.test.js --compilers js:babel-register --watch",
-    "lint": "eslint ./src",
-    "clean": "rimraf lib",
-    "build": "npm run clean && cross-env NODE_ENV=production babel src --out-dir lib && npm run build:demo",
-    "build:demo": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
-    "prepublish": "npm run build"
+    "build": "vite build && node -e \"require('fs').rmSync('typings',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && node -e \"require('fs').copyFileSync('src/react-confirm-alert.css','style.css')\"",
+    "prepublishOnly": "npm run build",
+    "test": "vitest run",
+    "test:fixtures": "node fixtures/run.mjs",
+    "test:types": "tsc -p tsconfig.json && tsc -p tsconfig.test-d.json",
+    "docs:build": "npm run build --prefix website",
+    "check:package": "publint --strict && attw --pack . && size-limit",
+    "version-packages": "changeset version && npm install --package-lock-only",
+    "release": "npm run build && npm run check:package && changeset publish"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/GA-MO/react-confirm-alert.git"
+    "url": "git+https://github.com/GA-MO/react-confirm-alert.git"
   },
   "keywords": [
     "react alert example",
@@ -37,43 +39,37 @@
   "typings": "./index.d.ts",
   "files": [
     "lib",
+    "dist",
+    "typings",
     "src/react-confirm-alert.css",
+    "style.css",
     "index.d.ts"
   ],
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "chai": "^4.1.2",
-    "cross-env": "^5.2.0",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.5.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-config-standard-react": "^5.0.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^5.1.1",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-react": "^7.3.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "mocha": "^3.5.0",
-    "prop-types": "^15.6.2",
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.3",
+    "@size-limit/preset-small-lib": "^14.3.0",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^6.1.2",
+    "@vitest/browser": "^5.0.5",
+    "@vitest/browser-playwright": "^5.0.5",
+    "jsdom": "^30.1.3",
+    "playwright": "^1.64.1",
+    "publint": "^0.3.25",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-hot-loader": "^4.3.3",
-    "rimraf": "^2.6.1",
-    "style-loader": "^0.18.2",
-    "url-loader": "^0.5.9",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1"
+    "size-limit": "^14.3.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=10.0.0"
-  }
+    "react-dom": ">=18.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
 }

package/src/react-confirm-alert.css

@@ -3,9 +3,8 @@ body.react-confirm-alert-body-element {
 }
 
 .react-confirm-alert-blur {
-  filter: url(#gaussian-blur);
-  filter: blur(2px);
-  -webkit-filter: blur(2px);
+  filter: blur(var(--rca-blur, 2px));
+  -webkit-filter: blur(var(--rca-blur, 2px));
 }
 
 .react-confirm-alert-overlay {
@@ -14,38 +13,25 @@ body.react-confirm-alert-body-element {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 99;
-  background: rgba(255, 255, 255, 0.9);
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
+  z-index: var(--rca-z-index, 99);
+  background: var(--rca-backdrop, rgba(255, 255, 255, 0.9));
   display: flex;
   justify-content: center;
-  -ms-align-items: center;
   align-items: center;
   opacity: 0;
-  -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
+  animation: react-confirm-alert-fadeIn var(--rca-duration, 0.5s) var(--rca-easing, ease) var(--rca-delay, 0.2s) forwards;
 }
 
 .react-confirm-alert-body {
-  font-family: Arial, Helvetica, sans-serif;
-  width: 400px;
-  padding: 30px;
+  font-family: var(--rca-font, Arial, Helvetica, sans-serif);
+  width: var(--rca-width, 400px);
+  max-width: calc(100vw - 92px);
+  padding: var(--rca-padding, 30px);
   text-align: left;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
-  color: #666;
-}
-
-.react-confirm-alert-svg {
-  position: absolute;
-  top: 0;
-  left: 0;
+  background: var(--rca-bg, #fff);
+  border-radius: var(--rca-radius, 10px);
+  box-shadow: var(--rca-shadow, 0 20px 75px rgba(0, 0, 0, 0.13));
+  color: var(--rca-fg, #666);
 }
 
 .react-confirm-alert-body > h1 {
@@ -58,10 +44,6 @@ body.react-confirm-alert-body-element {
 }
 
 .react-confirm-alert-button-group {
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
   display: flex;
   justify-content: flex-start;
   margin-top: 20px;
@@ -69,40 +51,68 @@ body.react-confirm-alert-body-element {
 
 .react-confirm-alert-button-group > button {
   outline: none;
-  background: #333;
+  background: var(--rca-button-bg, #333);
   border: none;
   display: inline-block;
   padding: 6px 18px;
-  color: #eee;
-  margin-right: 10px;
-  border-radius: 5px;
+  color: var(--rca-button-fg, #eee);
+  margin-right: var(--rca-gap, 10px);
+  border-radius: var(--rca-button-radius, 5px);
   font-size: 12px;
   cursor: pointer;
 }
 
-@-webkit-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+/* Keyboard focus is visible again (B15); a mouse click shows no ring. */
+.react-confirm-alert-button-group > button:focus-visible {
+  outline: var(--rca-focus-ring, 2px solid Highlight);
+  outline-offset: 2px;
 }
 
-@-moz-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+/* modal: true renders the overlay as a <dialog> in the top layer. Reset the browser's dialog box so it
+   looks like the v3 overlay, and never set display while it is closed. */
+dialog.react-confirm-alert-overlay {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
 }
 
-@-o-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
+dialog.react-confirm-alert-overlay:not([open]) {
+  display: none;
+}
+
+dialog.react-confirm-alert-overlay::backdrop {
+  background: transparent;
+}
+
+.react-confirm-alert-button-group > [data-variant='danger'] {
+  background: var(--rca-danger, #c62828);
+  color: #fff;
+}
+
+[data-rca]:not([data-kind='custom']) [data-slot='title'] {
+  margin: 0 0 8px;
+  font-size: 1.25em;
+  font-weight: 600;
+  color: var(--rca-title, #222);
+}
+
+.react-confirm-alert [data-slot='message'] {
+  margin: 0;
+  white-space: pre-line;
+}
+
+.react-confirm-alert:focus {
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .react-confirm-alert-overlay {
+    animation: none;
     opacity: 1;
   }
 }

package/style.css

@@ -0,0 +1,127 @@
+body.react-confirm-alert-body-element {
+  overflow: hidden;
+}
+
+.react-confirm-alert-blur {
+  filter: blur(var(--rca-blur, 2px));
+  -webkit-filter: blur(var(--rca-blur, 2px));
+}
+
+.react-confirm-alert-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--rca-z-index, 99);
+  background: var(--rca-backdrop, rgba(255, 255, 255, 0.9));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  animation: react-confirm-alert-fadeIn var(--rca-duration, 0.5s) var(--rca-easing, ease) var(--rca-delay, 0.2s) forwards;
+}
+
+.react-confirm-alert-body {
+  font-family: var(--rca-font, Arial, Helvetica, sans-serif);
+  width: var(--rca-width, 400px);
+  max-width: calc(100vw - 92px);
+  padding: var(--rca-padding, 30px);
+  text-align: left;
+  background: var(--rca-bg, #fff);
+  border-radius: var(--rca-radius, 10px);
+  box-shadow: var(--rca-shadow, 0 20px 75px rgba(0, 0, 0, 0.13));
+  color: var(--rca-fg, #666);
+}
+
+.react-confirm-alert-body > h1 {
+  margin-top: 0;
+}
+
+.react-confirm-alert-body > h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.react-confirm-alert-button-group {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 20px;
+}
+
+.react-confirm-alert-button-group > button {
+  outline: none;
+  background: var(--rca-button-bg, #333);
+  border: none;
+  display: inline-block;
+  padding: 6px 18px;
+  color: var(--rca-button-fg, #eee);
+  margin-right: var(--rca-gap, 10px);
+  border-radius: var(--rca-button-radius, 5px);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* Keyboard focus is visible again (B15); a mouse click shows no ring. */
+.react-confirm-alert-button-group > button:focus-visible {
+  outline: var(--rca-focus-ring, 2px solid Highlight);
+  outline-offset: 2px;
+}
+
+/* modal: true renders the overlay as a <dialog> in the top layer. Reset the browser's dialog box so it
+   looks like the v3 overlay, and never set display while it is closed. */
+dialog.react-confirm-alert-overlay {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+}
+
+dialog.react-confirm-alert-overlay:not([open]) {
+  display: none;
+}
+
+dialog.react-confirm-alert-overlay::backdrop {
+  background: transparent;
+}
+
+.react-confirm-alert-button-group > [data-variant='danger'] {
+  background: var(--rca-danger, #c62828);
+  color: #fff;
+}
+
+[data-rca]:not([data-kind='custom']) [data-slot='title'] {
+  margin: 0 0 8px;
+  font-size: 1.25em;
+  font-weight: 600;
+  color: var(--rca-title, #222);
+}
+
+.react-confirm-alert [data-slot='message'] {
+  margin: 0;
+  white-space: pre-line;
+}
+
+.react-confirm-alert:focus {
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .react-confirm-alert-overlay {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+@keyframes react-confirm-alert-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/typings/Dialog.d.ts

@@ -0,0 +1,27 @@
+import { type KeyboardEvent, type ReactNode, type ReactElement } from 'react';
+import type { DialogClassNames, AlertOptions, ConfirmOptions, PromptOptions } from './types';
+interface InPlace {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export interface DialogProps extends InPlace {
+    children: ReactNode;
+    modal?: boolean | undefined;
+    closeOnEscape?: boolean | undefined;
+    closeOnClickOutside?: boolean | undefined;
+    onKeyDown?: ((event: KeyboardEvent<HTMLElement>, close: () => void) => void) | undefined;
+    unstyled?: boolean | undefined;
+    classNames?: DialogClassNames | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+}
+type Declarative<O> = InPlace & Omit<O, 'signal' | 'strategy'>;
+export type ConfirmDialogProps = Declarative<AlertOptions> | Declarative<ConfirmOptions> | (Declarative<PromptOptions> & {
+    onSubmit: (value: string) => void | Promise<void>;
+});
+/** A dialog rendered where it is placed, so its children read the latest state of the component (#63 #66). */
+export declare function Dialog(props: DialogProps): ReactElement | null;
+/** confirm, alert or prompt rendered in place and driven by `open`. */
+export declare function ConfirmDialog(props: ConfirmDialogProps): ReactElement | null;
+export {};

package/typings/DialogFrame.d.ts

@@ -0,0 +1,28 @@
+import { type KeyboardEvent, type ReactNode, type ReactElement } from 'react';
+import type { DialogId, DialogKind, StyleOptions } from './types';
+export interface DialogFrameProps {
+    id?: DialogId;
+    modal: boolean;
+    state: 'open' | 'closing';
+    kind: DialogKind;
+    /** style layers, widest first (see classNames.ts) */
+    layers: readonly StyleOptions[];
+    /** v3 overlayClassName, added to the dialog slot */
+    extraClass?: string | undefined;
+    tone?: 'default' | 'danger' | undefined;
+    depth?: number | undefined;
+    topmost?: boolean | undefined;
+    label?: string | undefined;
+    labelledBy?: string | undefined;
+    describedBy?: string | undefined;
+    role: 'dialog' | 'alertdialog';
+    closeOnClickOutside: boolean;
+    closeOnEscape: boolean;
+    /** the v3 API reads Escape from document keydown and focuses the panel */
+    legacy: boolean;
+    onKeyDown?: ((event: KeyboardEvent<HTMLElement>, close: () => void) => void) | undefined;
+    onClickOutside?: (() => void) | undefined;
+    onDismiss: () => void;
+    children: ReactNode;
+}
+export declare function DialogFrame(props: DialogFrameProps): ReactElement;

package/typings/DialogHost.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement } from 'react';
+import { alert, closeAll, confirm, openDialog, prompt } from './api';
+export interface DialogHostProps {
+    /** when this value changes, every open dialog is dismissed, e.g. pass the pathname */
+    dismissKey?: unknown;
+}
+export declare function DialogHost({ dismissKey }: DialogHostProps): ReactElement;
+declare const dialogs: {
+    alert: typeof alert;
+    confirm: typeof confirm;
+    prompt: typeof prompt;
+    openDialog: typeof openDialog;
+    closeAll: typeof closeAll;
+};
+/** The same functions as the module exports, so a component reads as one that opens dialogs. */
+export declare function useDialog(): typeof dialogs;
+export {};

package/typings/DialogStack.d.ts

@@ -0,0 +1,5 @@
+import { type ReactElement } from 'react';
+export declare function DialogStack({ target, host }: {
+    target: string | null;
+    host?: symbol;
+}): ReactElement | null;

package/typings/api.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode, type ReactElement } from 'react';
+import type { AlertOptions, ConfirmOptions, CustomOptions, DialogHandle, DialogId, DialogRenderProps, PromptOptions } from './types';
+export declare function Body({ props, children }: {
+    props: DialogRenderProps<any>;
+    children: ReactNode;
+}): ReactElement;
+export declare function Buttons<R>({ props, signal: getSignal, focus }: {
+    props: DialogRenderProps<R>;
+    signal: () => AbortSignal;
+    focus: number;
+}): ReactElement;
+export declare function alert(input: string | Omit<AlertOptions, 'kind'>): Promise<void>;
+export declare function confirm(input: string | Omit<ConfirmOptions, 'kind'>): Promise<boolean>;
+export declare function PromptBody({ props, options }: {
+    props: DialogRenderProps<string>;
+    options: Omit<PromptOptions, 'kind'>;
+}): ReactElement;
+export declare function prompt(input: string | Omit<PromptOptions, 'kind'>): Promise<string | null>;
+export declare function openDialog<R = void>(options: Omit<CustomOptions<R>, 'kind'>): DialogHandle<R>;
+export declare function closeDialog(id: DialogId): void;
+export declare function closeAll(): void;

package/typings/classNames.d.ts

@@ -0,0 +1,16 @@
+import type { DialogClassNames, DialogDefaults, DialogSlot, StyleOptions } from './types';
+/**
+ * Style layers from widest to narrowest. confirmAlert keeps the v3 look unless the app sets
+ * confirmAlert defaults, so app-wide unstyled or classNames never reach it by surprise.
+ */
+export declare function styleLayers(options: StyleOptions, legacy: boolean): StyleOptions[];
+export declare function classFor(slot: DialogSlot, layers: readonly StyleOptions[], extra?: string): string | undefined;
+export type SlotProps = (slot: DialogSlot, extra?: string) => {
+    className: string | undefined;
+    'data-slot': DialogSlot;
+};
+export declare const slotsFor: (layers: readonly StyleOptions[]) => SlotProps;
+export declare const SlotContext: import("react").Context<SlotProps>;
+export declare const useSlot: () => SlotProps;
+export declare function configureDialogs(defaults: DialogDefaults): void;
+export type { DialogClassNames };

package/typings/compat.d.ts

@@ -0,0 +1,48 @@
+import { Component, type ButtonHTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { DialogClassNames, Strategy } from './types';
+export type ReactConfirmAlertButton = {
+    label: string;
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export interface ReactConfirmAlertProps {
+    targetId?: string;
+    title?: string;
+    message?: string;
+    buttons?: Array<ReactConfirmAlertButton>;
+    childrenElement?: () => ReactNode;
+    customUI?: (customUiOptions: {
+        title: string;
+        message: string;
+        buttons: Array<ReactConfirmAlertButton>;
+        onClose: () => void;
+    }) => ReactNode;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    /** @deprecated use onKeyDown with the new API */
+    keyCodeForClose?: Array<number>;
+    willUnmount?: () => void;
+    afterClose?: () => void;
+    onClickOutside?: () => void;
+    onKeypressEscape?: (event: KeyboardEvent) => void;
+    /** @deprecated use onKeyDown with the new API */
+    onkeyPress?: (event: KeyboardEvent, close: () => void) => void;
+    overlayClassName?: string;
+    /** render a native modal <dialog> in the top layer instead of the v3 overlay (default false) */
+    modal?: boolean;
+    /** what happens to a dialog that is already open (default 'replace', as in v3) */
+    strategy?: Strategy;
+    /** leave out the v3 class names */
+    unstyled?: boolean;
+    /** classes per slot, added after the app defaults */
+    classNames?: DialogClassNames;
+}
+export type ConfirmAlertOptions = ReactConfirmAlertProps;
+export declare function confirmAlert(properties: ReactConfirmAlertProps): void;
+/**
+ * Rendered in place, open while mounted. The parent unmounts it from a button's onClick.
+ * @deprecated use <ConfirmDialog open>
+ */
+export default class ReactConfirmAlert extends Component<ReactConfirmAlertProps> {
+    componentWillUnmount(): void;
+    render(): ReactElement;
+}

package/typings/fallbackRoot.d.ts

@@ -0,0 +1,4 @@
+export declare function ensureContainer(target: string | null): {
+    target: string | null;
+    blur: boolean;
+};

package/typings/index.d.ts

@@ -0,0 +1,9 @@
+export { confirmAlert, default } from './compat';
+export type { ConfirmAlertOptions, ReactConfirmAlertButton, ReactConfirmAlertProps } from './compat';
+export { alert, closeAll, closeDialog, confirm, openDialog, prompt } from './api';
+export { DialogHost, useDialog } from './DialogHost';
+export { configureDialogs } from './classNames';
+export type { DialogHostProps } from './DialogHost';
+export { ConfirmDialog, Dialog } from './Dialog';
+export type { ConfirmDialogProps, DialogProps } from './Dialog';
+export type { AlertOptions, BaseOptions, ButtonContext, ButtonDataAttributes, DialogClassNames, DialogDataAttributes, DialogDefaults, DialogSlot, SlotDataAttributes, StyleOptions, ConfirmOptions, CustomOptions, DialogButton, DialogHandle, DialogId, DialogKind, DialogRenderProps, PromptOptions, Strategy } from './types';

package/typings/lifecycle.d.ts

@@ -0,0 +1,7 @@
+import type { DialogId, EntryOptions, Strategy } from './types';
+export declare function registerFrame(id: DialogId, frame: HTMLElement | null, panel: HTMLElement | null): void;
+export declare function openEntry(options: EntryOptions, target: string | null, strategy: Strategy, settle?: (result: unknown) => void): DialogId;
+export declare function closeDialog(id: DialogId, { sync }?: {
+    sync?: boolean | undefined;
+}): void;
+export declare function reopenClosedFrames(): void;

package/typings/page.d.ts

@@ -0,0 +1,2 @@
+export declare function syncPage(): void;
+export declare function installPageEffects(): void;

package/typings/store.d.ts

@@ -0,0 +1,59 @@
+import type { Root } from 'react-dom/client';
+import type { DialogDefaults, DialogId, EntryOptions, Strategy } from './types';
+export type Phase = 'queued' | 'open' | 'closing';
+export interface Entry {
+    id: DialogId;
+    options: EntryOptions;
+    phase: Phase;
+    /** id of the element the dialog renders into, or null for the default container */
+    target: string | null;
+    /** v3 blurs body.children[0] only when the library created the default container */
+    blur: boolean;
+    settle: (result: unknown) => void;
+}
+export interface StoreState {
+    entries: readonly Entry[];
+    /** mounted DialogHosts; the last one renders the default container's dialogs */
+    hosts: readonly symbol[];
+}
+export declare const emptyState: StoreState;
+export declare function push(state: StoreState, entry: Omit<Entry, 'phase'>, strategy: Strategy): StoreState;
+export declare function beginClose(state: StoreState, id: DialogId): StoreState;
+export declare function remove(state: StoreState, id: DialogId): StoreState;
+export declare function update(state: StoreState, id: DialogId, patch: Partial<EntryOptions>): StoreState;
+export declare function addHost(state: StoreState, host: symbol): StoreState;
+export declare function removeHost(state: StoreState, host: symbol): StoreState;
+export declare function promoteQueued(state: StoreState): StoreState;
+export declare function topmost(state: StoreState): Entry | undefined;
+export interface Store {
+    get: () => StoreState;
+    set: (next: StoreState) => void;
+    subscribe: (listener: () => void) => () => void;
+    nextId: () => DialogId;
+}
+interface Container {
+    element: HTMLElement;
+    root: Root;
+    created: boolean;
+}
+export interface Runtime {
+    state: StoreState;
+    counter: number;
+    listeners: Set<() => void>;
+    containers: Map<string | null, Container>;
+    frames: Map<DialogId, {
+        frame: HTMLElement;
+        panel: HTMLElement | null;
+    }>;
+    blurred: Element | null;
+    /** dialogs whose button is waiting on a Promise; Escape and outside clicks wait too */
+    busy: Set<DialogId>;
+    pageSynced: boolean;
+    /** open <Dialog> and <ConfirmDialog> elements, which live outside the store but lock scroll too */
+    inPlace: number;
+    defaults: DialogDefaults;
+    watchingContainers: boolean;
+}
+export declare function runtime(): Runtime;
+export declare const store: Store;
+export {};