staffa 0.1.0 → 0.2.1

package/src/components/button.ts

@@ -1,33 +1,8 @@
 import A from "aberdeen";
-import { type BaseOptions, type Content, type Slot, type Styling, drawSlot } from "../core.js";
-
-/**
- * Visual weight of a button.
- * - `filled`: solid background, highest emphasis.
- * - `tonal`: soft tinted background, medium emphasis.
- * - `outlined`: bordered, transparent background, lowest emphasis.
- *
- * Every variant carries at least a visible border, per Staffa's "everything is
- * legible at a glance" principle.
- */
-export type ButtonVariant = "filled" | "tonal" | "outlined";
-
-/**
- * Color of a button.
- *
- * The four named **semantic roles** map to theme colours and are offered as
- * autocomplete suggestions. You may also pass *any* CSS colour the browser
- * understands and it becomes the button's accent directly: a literal like
- * `"#ef6b00"` / `"rgb(255 107 0)"`, or a theme custom-property reference like
- * `"$sWarning"` (Aberdeen's `$name` shorthand for `var(--name)`).
- *
- * The `(string & {})` member is what keeps the literal suggestions visible while
- * still allowing arbitrary strings — TypeScript only widens to `string` lazily.
- */
-export type ButtonColor = "primary" | "neutral" | "danger" | "success" | (string & {});
+import { type Content, type Slot, type Attributes, drawSlot } from "../core.js";
 
 /** Options for {@link button}. */
-export interface ButtonOptions extends BaseOptions {
+export interface ButtonOptions {
 	/** Button label text. */
 	text?: string;
 	/** Custom content (overrides {@link ButtonOptions.text | text}). */
@@ -36,10 +11,6 @@ export interface ButtonOptions extends BaseOptions {
 	icon?: Slot;
 	/** Click handler. */
 	click?: (event: Event) => void;
-	/** Visual weight. Defaults to `"filled"`. */
-	variant?: ButtonVariant;
-	/** Color role. Defaults to `"primary"`. */
-	color?: ButtonColor;
 	/** Size. Defaults to `"md"`. */
 	size?: "sm" | "md" | "lg";
 	/** Disables the button. */
@@ -50,42 +21,36 @@ export interface ButtonOptions extends BaseOptions {
 	href?: string;
 	/** Accessible label, when the button has only an icon. */
 	ariaLabel?: string;
-	/** Aberdeen attr/style string applied to the button element. */
-	inner?: Styling;
+	/**
+	 * Aberdeen attr/style string applied to the button. A button is a surface, so
+	 * pass surface modifier classes here to restyle it, e.g. `".danger"`,
+	 * `".neutral .outlined"`. Defaults to a filled `.primary` surface.
+	 */
+	attrs?: Attributes;
 }
 
-// The color role sets a local `--c` (and `--cfg` for text on filled); the
-// variant rules consume them, so we avoid writing colour×variant rules.
+// The button is a `.s-s` surface (defaulting to `.primary` in button() below), so
+// its colours come from the surface classes in theme.ts. This rule only handles
+// layout, border, focus, hover and sizing.
 A.insertGlobalCss({
-	".S_btn": {
+	".s-btn": {
 		"&":
-			"--c:$sPrimary --cfg:$sPrimaryFg " +
 			"display:inline-flex align-items:center justify-content:center gap:$2 " +
 			"font-weight:600 line-height:1.2 white-space:nowrap cursor:pointer text-decoration:none " +
-			"border: 1px solid transparent; r:$sRadius padding: 0.5em 1em; " +
+			"border: 1px solid $s-border; r: $s-radius; padding: 0.5em 1em; " +
 			"transition: background 0.15s, border-color 0.15s, filter 0.15s, box-shadow 0.15s;",
-		"&:focus-visible": "outline:none box-shadow: 0 0 0 3px $sFocus;",
+		"&:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus;",
 		"&:disabled, &[aria-disabled=true]": "opacity:0.45 cursor:not-allowed pointer-events:none filter:saturate(0.6)",
-		// Colour roles.
-		"&.S_neutral": "--c:$sBorderStrong --cfg:$sFg",
-		"&.S_danger": "--c:$sDanger --cfg:#fff",
-		"&.S_success": "--c:$sSuccess --cfg:#08110d",
-		// Variants.
-		"&.S_filled": "background:$c color:$cfg border-color:$c",
-		"&.S_filled:hover": "filter:brightness(1.1)",
-		"&.S_tonal": "color:$c background: color-mix(in srgb, $c 20%, transparent); border-color: color-mix(in srgb, $c 30%, transparent);",
-		"&.S_tonal:hover": "background: color-mix(in srgb, $c 30%, transparent);",
-		"&.S_outlined": "color:$c background:transparent border-color: color-mix(in srgb, $c 55%, $sBorder);",
-		"&.S_outlined:hover": "background: color-mix(in srgb, $c 12%, transparent);",
-		// Sizes.
-		"&.S_sm": "padding: 0.32em 0.7em; font-size:0.85em",
-		"&.S_lg": "padding: 0.66em 1.3em; font-size:1.1em",
+		"&:hover": "filter: brightness(1.08)",
+		"&.tonal:hover, &.outlined:hover": "background: color-mix(in srgb, $s-b 26%, transparent);",
+		"&.s-sm": "padding: 0.32em 0.7em; font-size:0.85em",
+		"&.s-lg": "padding: 0.66em 1.3em; font-size:1.1em",
 	},
 });
 
 /**
  * A button. Always carries at least a visible border so its affordance is
- * obvious at a glance, regardless of {@link ButtonVariant | variant}.
+ * obvious at a glance.
  *
  * Shortcut: pass a string to use it as the label, or a function for custom
  * content.
@@ -93,7 +58,7 @@ A.insertGlobalCss({
  * @example
  * ```ts
  * S.button({ text: "Save", click: save });
- * S.button({ text: "Delete", color: "danger", variant: "outlined", click: del });
+ * S.button({ text: "Delete", attrs: ".danger .outlined", click: del });
  * S.button("Cancel");                        // shorthand for { text: "Cancel" }
  * S.button({ href: "/docs", text: "Docs" }); // renders an <a role=button>
  * ```
@@ -102,17 +67,11 @@ export function button(opts: ButtonOptions | string | Content = {}): void {
 	const o: ButtonOptions = typeof opts === "string" ? { text: opts } : typeof opts === "function" ? { content: opts } : opts;
 
 	const tag = o.href != null ? "a" : "button";
-	const variant = o.variant ?? "filled";
-	const color = o.color ?? "primary";
-	const size = o.size === "sm" || o.size === "lg" ? `.S_${o.size}` : "";
+	const sizeCls = o.size != null ? `.s-${o.size}` : "";
 
-	// Semantic roles select a colour class (the CSS sets `--c`/`--cfg`); any other
-	// value is a raw CSS colour we assign to `--c`, which the variant rules consume
-	// via `var(--c)`. (`primary` is the base default — its class is a no-op.)
-	const semantic = color === "primary" || color === "neutral" || color === "danger" || color === "success";
-	const colorCls = semantic ? `.S_${color}` : "";
-
-	const el = A(`${tag}.S_btn.S_${variant}${colorCls}${size}`, o.root, o.inner, () => {
+	// A filled `.primary` surface by default; `attrs` (applied after) can override
+	// the role/variant with e.g. `.danger`, `.neutral .outlined`.
+	A(`${tag}.s-btn.s-s.primary${sizeCls}`, o.attrs, () => {
 		if (o.href != null) {
 			A(`href=${o.href} role=button`);
 			if (o.disabled) A("aria-disabled=true");
@@ -127,11 +86,4 @@ export function button(opts: ButtonOptions | string | Content = {}): void {
 		if (o.content) o.content();
 		else if (o.text != null) A("#", o.text);
 	});
-
-	// Aberdeen's inline styler doesn't set CSS custom properties, so assign the
-	// custom accent on the element directly. A leading `$` is Aberdeen's shorthand
-	// for a CSS variable reference, so expand it to `var(--name)`.
-	if (!semantic && el instanceof HTMLElement) {
-		el.style.setProperty("--c", color.startsWith("$") ? `var(--${color.slice(1)})` : color);
-	}
 }

package/src/components/buttonChooser.ts

@@ -0,0 +1,66 @@
+import A from "aberdeen";
+import { type Bindable, type Attributes } from "../core.js";
+import { buttonGroup } from "./buttonGroup.js";
+
+/** Options for {@link buttonChooser}. */
+export interface ButtonChooserOptions {
+	/** Aberdeen attr/style string applied to the button group. */
+	attrs?: Attributes;
+	/**
+	 * The options to display, as a plain object mapping id → display label.
+	 * Buttons appear in insertion order.
+	 */
+	options: Record<string, string>;
+	/**
+	 * Two-way binding for the selected id, or `null` when nothing is selected.
+	 * Use an `A.proxy` or `A.ref`.
+	 */
+	bind: Bindable<string | null>;
+	/**
+	 * When `true`, clicking the already-selected button deselects it, setting
+	 * `bind.value` to `null`. Useful for "none / auto" states.
+	 */
+	allowDeselect?: boolean;
+	/** Button size. Defaults to `"md"`. */
+	size?: "sm" | "md" | "lg";
+	/** Name attribute for the hidden `<input>`, enabling form submission. */
+	name?: string;
+}
+
+/**
+ * A single-selection segmented control: an attached button group where exactly
+ * one button is active at a time. Optionally allows deselecting back to `null`.
+ *
+ * Renders a hidden `<input>` alongside (when `name` is set) so the selected
+ * value is included in native form submission.
+ *
+ * @example
+ * ```ts
+ * const $view = A.proxy({ value: "day" as string | null });
+ * S.buttonChooser({
+ *   options: { day: "Day", week: "Week", month: "Month" },
+ *   bind: $view,
+ * });
+ * ```
+ */
+export function buttonChooser(opts: ButtonChooserOptions): void {
+	A(() => {
+		const selected = opts.bind.value;
+		buttonGroup({
+			attrs: opts.attrs,
+			buttons: Object.entries(opts.options).map(([id, label]) => ({
+				text: label,
+				size: opts.size,
+				attrs: selected === id ? ".primary" : ".neutral .outlined",
+				click: () => {
+					opts.bind.value = (opts.allowDeselect && selected === id) ? null : id;
+				},
+			})),
+		});
+	});
+
+	if (opts.name) {
+		// Hidden input carries the value into native form submission.
+		A(() => A(`input type=hidden name=${opts.name} value=`, opts.bind.value ?? ""));
+	}
+}

package/src/components/buttonGroup.ts

@@ -19,23 +19,23 @@ export interface ButtonGroupOptions extends ContentOptions {
 }
 
 A.insertGlobalCss({
-	".S_bgroup": {
+	".s-bgroup": {
 		"&": "display:inline-flex align-items:stretch",
-		"&.S_spaced": "gap:$2 flex-wrap:wrap",
-		"&.S_vertical": "flex-direction:column",
-		"&.S_attached": "gap:0",
+		"&.s-spaced": "gap:$2 flex-wrap:wrap",
+		"&.s-vertical": "flex-direction:column",
+		"&.s-attached": "gap:0",
 		// When attached, collapse the shared border and square off the touching
 		// corners, keeping only the outer ends of the group rounded.
-		"&.S_attached:not(.S_vertical) > .S_btn:not(:first-child)": "margin-left:-1px",
-		"&.S_attached:not(.S_vertical) > .S_btn:not(:first-child):not(:last-child)": "r:0",
-		"&.S_attached:not(.S_vertical) > .S_btn:first-child:not(:last-child)": "border-top-right-radius:0 border-bottom-right-radius:0",
-		"&.S_attached:not(.S_vertical) > .S_btn:last-child:not(:first-child)": "border-top-left-radius:0 border-bottom-left-radius:0",
-		"&.S_attached.S_vertical > .S_btn:not(:first-child)": "margin-top:-1px",
-		"&.S_attached.S_vertical > .S_btn:not(:first-child):not(:last-child)": "r:0",
-		"&.S_attached.S_vertical > .S_btn:first-child:not(:last-child)": "border-bottom-left-radius:0 border-bottom-right-radius:0",
-		"&.S_attached.S_vertical > .S_btn:last-child:not(:first-child)": "border-top-left-radius:0 border-top-right-radius:0",
+		"&.s-attached:not(.s-vertical) > .s-btn:not(:first-child)": "margin-left:-1px",
+		"&.s-attached:not(.s-vertical) > .s-btn:not(:first-child):not(:last-child)": "r:0",
+		"&.s-attached:not(.s-vertical) > .s-btn:first-child:not(:last-child)": "border-top-right-radius:0 border-bottom-right-radius:0",
+		"&.s-attached:not(.s-vertical) > .s-btn:last-child:not(:first-child)": "border-top-left-radius:0 border-bottom-left-radius:0",
+		"&.s-attached.s-vertical > .s-btn:not(:first-child)": "margin-top:-1px",
+		"&.s-attached.s-vertical > .s-btn:not(:first-child):not(:last-child)": "r:0",
+		"&.s-attached.s-vertical > .s-btn:first-child:not(:last-child)": "border-bottom-left-radius:0 border-bottom-right-radius:0",
+		"&.s-attached.s-vertical > .s-btn:last-child:not(:first-child)": "border-top-left-radius:0 border-top-right-radius:0",
 		// Keep the hovered/focused button's border above its neighbours.
-		"&.S_attached > .S_btn:hover, &.S_attached > .S_btn:focus-visible": "z-index:1",
+		"&.s-attached > .s-btn:hover, &.s-attached > .s-btn:focus-visible": "z-index:1",
 	},
 });
 
@@ -46,17 +46,17 @@ A.insertGlobalCss({
  * @example
  * ```ts
  * S.buttonGroup({ buttons: [
- *   { text: "Day", variant: "outlined", color: "neutral" },
- *   { text: "Week", variant: "outlined", color: "neutral" },
- *   { text: "Month", variant: "outlined", color: "neutral" },
+ *   { text: "Day", attrs: ".neutral .outlined" },
+ *   { text: "Week", attrs: ".neutral .outlined" },
+ *   { text: "Month", attrs: ".neutral .outlined" },
  * ]});
  * ```
  */
 export function buttonGroup(opts: ButtonGroupOptions = {}): void {
 	const layout = opts.layout ?? "attached";
-	const cls = `.S_${layout}${opts.vertical ? ".S_vertical" : ""}`;
+	const cls = `.s-${layout}${opts.vertical ? ".s-vertical" : ""}`;
 
-	A(`div.S_bgroup${cls} role=group`, opts.root, opts.inner, () => {
+	A(`div.s-bgroup${cls} role=group`, opts.attrs, () => {
 		if (opts.buttons) for (const b of opts.buttons) button(b);
 		if (opts.content) opts.content();
 	});

package/src/components/checkbox.ts

@@ -15,12 +15,12 @@ export interface CheckboxOptions extends Omit<FieldOptions, "label"> {
 }
 
 A.insertGlobalCss({
-	".S_check": {
+	".s-check": {
 		"&": "display:flex flex-direction:column gap:$1",
 		"> label": "display:flex align-items:center gap:$2 cursor:pointer user-select:none",
 		"> label:has(input:disabled)": "cursor:not-allowed opacity:0.6",
 		// Native control styled with accent-color: accessible and zero-fuss.
-		"input": "width:1.15em height:1.15em accent-color:$sPrimary cursor:inherit m:0",
+		"input": "width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0",
 	},
 });
 
@@ -37,9 +37,9 @@ A.insertGlobalCss({
 export function checkbox(opts: CheckboxOptions = {}): void {
 	const id = opts.id ?? uniqueId("check");
 
-	A("div.S_check", opts.root, () => {
+	A("div.s-check", opts.attrs, () => {
 		A(`label for=${id}`, () => {
-			A("input type=checkbox", opts.control, () => {
+			A("input type=checkbox", opts.inputAttrs, () => {
 				A(`id=${id}`);
 				if (opts.name) A(`name=${opts.name}`);
 				// `checked` is a boolean attribute: only set it when actually true.
@@ -56,15 +56,15 @@ export function checkbox(opts: CheckboxOptions = {}): void {
 			// Own scope so the label text/required marker don't recreate the input.
 			A(() => {
 				if (opts.label != null) drawSlot(opts.label);
-				if (opts.required) A("span.S_req aria-hidden=true #*");
+				if (opts.required) A("span.s-req aria-hidden=true #*");
 			});
 		});
 
 		A(() => {
-			if (opts.help != null && !opts.error) A("div.S_help", () => drawSlot(opts.help));
+			if (opts.help != null && !opts.error) A("div.s-help", () => drawSlot(opts.help));
 		});
 		A(() => {
-			if (opts.error) A("div.S_error role=alert #", opts.error);
+			if (opts.error) A("div.s-error role=alert #", opts.error);
 		});
 	});
 }

package/src/components/dialog.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type Slot, type Styling, drawSlot } from "../core.js";
+import { type Slot, type Attributes, drawSlot } from "../core.js";
 import { button } from "./button.js";
 import { buttonGroup } from "./buttonGroup.js";
 import { textline } from "./textline.js";
@@ -10,14 +10,14 @@ export interface DialogOptions {
 	header?: Slot;
 	/** Slot rendered in the styled footer bar. */
 	footer?: Slot;
+	/** Aberdeen attr/style string applied to the dialog panel. A surface — pass modifier classes (e.g. `".warning"`) to recolour it. */
+	attrs?: Attributes;
 	/** Aberdeen attr/style string applied to the header bar. */
-	headerInner?: Styling;
+	headerAttrs?: Attributes;
 	/** Aberdeen attr/style string applied to the footer bar. */
-	footerInner?: Styling;
+	footerAttrs?: Attributes;
 	/** Aberdeen attr/style string applied to the scrollable content `<div>`. */
-	inner?: Styling;
-	/** Aberdeen attr/style string applied to the dialog panel itself. */
-	root?: Styling;
+	contentAttrs?: Attributes;
 	/**
 	 * Allow closing via Esc or clicking the backdrop. Defaults to `true`.
 	 * May be changed on a proxied options object while the dialog is open
@@ -25,10 +25,16 @@ export interface DialogOptions {
 	 */
 	allowCancel?: boolean;
 	/**
-	 * Dialog body. Receives a `close()` function — call it to dismiss the dialog
-	 * programmatically.
+	 * When set to `true` (default) the model will be destroyed when the `dialog()`-calling
+	 * scope is destroyed.
 	 */
-	content?: (close: () => void) => void;
+	cancelWithScope?: boolean;
+	/**
+	 * Dialog body. A {@link Slot} whose draw-function receives a `close()` function
+	 * — call it to dismiss the dialog programmatically. (A plain string renders as
+	 * rich text.)
+	 */
+	content?: Slot<[close: () => void]>;
 	/**
 	 * Called when the dialog closes for any reason (explicit `close()`, Esc, or
 	 * backdrop click). Useful when you want a side-effect on close but don't need
@@ -37,48 +43,84 @@ export interface DialogOptions {
 	onClose?: () => void;
 }
 
-// Transition helper classes.
-// `.S_backdrop` = backdrop, hidden when another backdrop follows it in the DOM.
-// `.S_dialog`   = dialog box, slides + fades in/out.
 A.insertGlobalCss({
-	".S_backdrop": {
-		"&": "position:fixed inset:0 z-index:200; background: rgba(0,0,0,0.55); transition: opacity 0.2s ease;",
-		"&:not(:has(~ .S_backdrop))": "display:block",
-		"&:not(:has(~ .S_backdrop)) + .S_dialog": "display:flex flex-direction:column",
-		// Transition states: applied momentarily on create; re-applied on destroy.
+	".s-backdrop": {
+		"&": "position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;",
 		"&.hidden": "opacity:0 pointer-events:none",
 	},
-	".S_dialog": {
+	".s-dialog": {
 		"&":
-			"position:fixed z-index:201 top:50% left:50% " +
+			"position:fixed z-index:200 top:50% left:50% " +
+			"display:flex flex-direction:column " +
 			"transform:translate(-50%,-50%) " +
 			"min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) " +
-			"bg:$sSurface border: 1px solid $sBorder; r:$sRadiusLg box-shadow:$sShadow overflow:hidden " +
-			"transition: opacity 0.2s ease, transform 0.2s ease;",
-		// Header and footer are fixed; only the content <div> scrolls.
+			"border: 1px solid $s-border; r: $s-radius-lg; box-shadow: $s-shadow; overflow:hidden " +
+			"transition: opacity 0.2s ease-out, transform 0.2s ease-out;",
 		"> header":
 			"display:flex align-items:center gap:$2 padding: $2 $3; " +
-			"bg:$sSurfaceHi border-bottom: 1px solid $sBorder; font-weight:600 flex-shrink:0",
+			"border-bottom: 1px solid $s-border; font-weight:600 flex-shrink:0",
 		"> footer":
 			"display:flex align-items:center gap:$2 padding: $2 $3; " +
-			"bg:$sSurfaceHi border-top: 1px solid $sBorder; flex-shrink:0",
+			"border-top: 1px solid $s-border; flex-shrink:0",
 		"> div": "p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0",
-		"&.hidden": "opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px));",
-		"&.hidden *": "pointer-events:none",
+		"&.hidden": "opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none",
 	},
 });
 
+const dialogs = A.proxy({} as Record<number,{resolve: (value: void | PromiseLike<void>) => void, opts: DialogOptions}>);
+let dialogCount = 0;
+
+const topDialogId = A.derive(() => {
+	const keys = Object.keys(dialogs);
+	if (keys.length) return keys[keys.length-1];
+});
+
+A.mount(document.body, () => {
+	A.onEach(dialogs, ({resolve, opts}, dialogId) => {
+		const close = () => { delete dialogs[dialogId]; };
+
+		A.clean(() => {
+			// Fires when this render is torn down — either because $closed became
+			// true (normal close) or because the parent reactive scope was cleaned up.
+			opts.onClose?.();
+			resolve();
+		});
+
+		// Backdrop - hide when not the top dialog
+		const overlaid = A.derive(() => topDialogId.value != dialogId);
+		A("div.s-backdrop create=hidden destroy=hidden .hidden=", overlaid, "click=", () => {
+			if (opts.allowCancel !== false) close();
+		});
+
+		// Dialog itself
+		A("div.s-dialog.s-s.panel create=hidden destroy=hidden", opts.attrs, () => {
+			A(() => {
+				if (opts.header != null) {
+					A("header.s-s.raised", opts.headerAttrs, () => drawSlot(opts.header));
+				}
+			});
+
+			A("div", opts.contentAttrs, () => {
+				drawSlot(opts.content, close);
+			});
+
+			A(() => {
+				if (opts.footer != null) {
+					A("footer.s-s.raised", opts.footerAttrs, () => drawSlot(opts.footer));
+				}
+			});
+		});
+	});
+})
+
 /**
  * A dialog rendered into `document.body` via `A.mount`, with a dimming backdrop
  * that fades in and out. Returns a `Promise<void>` that resolves when the dialog
  * closes. Lifecycle is also tied to the parent reactive scope — when that scope
  * is cleaned up the dialog disappears and the promise resolves.
  *
- * Only the **last** open dialog (and its backdrop) is visible; earlier pairs are
- * hidden via the CSS `+` selector, so nested dialogs stack correctly.
- *
- * The header and footer are pinned; only the body content scrolls when it is
- * taller than `88vh`.
+ * Multiple dialogs stack correctly: each new pair (backdrop + dialog) has a
+ * higher z-index, while older dialogs are pushed behind their covering backdrop.
  *
  * @example
  * ```ts
@@ -87,68 +129,34 @@ A.insertGlobalCss({
  *   content: (close) => {
  *     A("p #Are you sure?");
  *     S.button({ text: "Yes", click: () => { doIt(); close(); } });
- *     S.button({ text: "Cancel", variant: "outlined", click: close });
+ *     S.button({ text: "Cancel", attrs: ".neutral .outlined", click: close });
  *   },
  * });
  * ```
  */
 export function dialog(opts: DialogOptions): Promise<void> {
-	return new Promise<void>((resolve) => {
-		const $closed = A.proxy(false);
-		const close = () => { $closed.value = true; };
-
-		let resolved = false;
-		const onDone = () => {
-			if (resolved) return;
-			resolved = true;
-			opts.onClose?.();
-			resolve();
-		};
-
-		// A.mount ties this scope to the calling reactive scope — when the parent
-		// scope is torn down, the backdrop and dialog are removed from body too.
-		A.mount(document.body, () => {
-			// The 'peek' is there such that when 'closed' is first set, this scope doesn't need to watch anything anymore.
-			if (A.peek($closed, "value"), $closed.value) return;
-
-			// Global Esc listener — registered here so it's removed on close.
-			const onKey = (e: KeyboardEvent) => {
-				if (e.key === "Escape" && opts.allowCancel !== false) close();
-			};
-			document.addEventListener("keydown", onKey);
-			A.clean(() => {
-				document.removeEventListener("keydown", onKey);
-				// Fires when this render is torn down — either because $closed became
-				// true (normal close) or because the parent reactive scope was cleaned up.
-				onDone();
-			});
-
-			// Backdrop: fades in on creation, fades out on removal.
-			A("div.S_backdrop create=hidden destroy=hidden", () => {
-				A("click=", () => {
-					if (opts.allowCancel !== false) close();
-				});
-			});
-
-			// Dialog panel: fades + slides in/out.
-			A("div.S_dialog create=hidden destroy=hidden", opts.root, () => {
-				A(() => {
-					if (opts.header != null) {
-						A("header", opts.headerInner, () => drawSlot(opts.header));
+	if (!dialogCount) {
+		// Install Esc handler the first time we create a dialog
+		document.addEventListener("keydown", (e: KeyboardEvent) => {
+			if (e.key === "Escape" && opts.allowCancel !== false) {
+				const ds = A.unproxy(dialogs);
+				// Search for top-most dialog
+				for(let i=dialogCount; i>0; i--) {
+					if (ds[i]) {
+						if (ds[i].opts.allowCancel !== false) {
+							// The clean handler should call resolve and onClose
+							delete dialogs[i];
+						}
+						break;
 					}
-				});
-
-				A("div", opts.inner, () => {
-					if (opts.content) opts.content(close);
-				});
-
-				A(() => {
-					if (opts.footer != null) {
-						A("footer", opts.footerInner, () => drawSlot(opts.footer));
-					}
-				});
-			});
+				}
+			}
 		});
+	}
+	const dialogId = ++dialogCount;
+	if (opts.cancelWithScope !== false) A.clean(() => { delete dialogs[dialogId]; });
+	return new Promise<void>((resolve) => {
+		dialogs[dialogId] = {resolve, opts};
 	});
 }
 
@@ -156,8 +164,6 @@ export function dialog(opts: DialogOptions): Promise<void> {
  * Shows a message dialog with a single OK button. Returns a `Promise<void>`
  * that resolves when the user dismisses it.
  *
- * All properties of `opts` override the defaults, including `content`.
- *
  * @example
  * ```ts
  * await S.alert("File saved successfully.");
@@ -169,7 +175,7 @@ export function alert(message: string, opts: Partial<DialogOptions> = {}): Promi
 		allowCancel: true,
 		content: (close) => {
 			A("p", () => { A("#", message); });
-			buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
+			buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
 				button({ text: "OK", click: close });
 			}});
 		},
@@ -179,10 +185,7 @@ export function alert(message: string, opts: Partial<DialogOptions> = {}): Promi
 
 /**
  * Shows a confirmation dialog with Cancel and OK buttons. Returns a
- * `Promise<boolean>` — `true` if the user clicked OK, `false` otherwise
- * (including Esc / backdrop click when `allowCancel` is not `false`).
- *
- * All properties of `opts` override the defaults, including `content`.
+ * `Promise<boolean>` — `true` if the user clicked OK, `false` otherwise.
  *
  * @example
  * ```ts
@@ -197,8 +200,8 @@ export function confirm(message: string, opts: Partial<DialogOptions> = {}): Pro
 			allowCancel: true,
 			content: (close) => {
 				A("p", () => { A("#", message); });
-				buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
-					button({ text: "Cancel", variant: "outlined", color: "neutral", click: close });
+				buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
+					button({ text: "Cancel", attrs: ".neutral .outlined", click: close });
 					button({ text: "OK", click: () => { confirmed = true; close(); } });
 				}});
 			},
@@ -213,10 +216,7 @@ export function confirm(message: string, opts: Partial<DialogOptions> = {}): Pro
 
 /**
  * Shows a prompt dialog with a text input. Returns a `Promise<string | null>` —
- * the entered string if the user confirmed, or `null` if cancelled (Esc /
- * backdrop click / Cancel button).
- *
- * All properties of `opts` override the defaults, including `content`.
+ * the entered string if the user confirmed, or `null` if cancelled.
  *
  * @example
  * ```ts
@@ -233,7 +233,6 @@ export function prompt(message: string, defaultValue = "", opts: Partial<DialogO
 			content: (close) => {
 				A("p", () => { A("#", message); });
 				const $v = A.proxy({ value: defaultValue });
-				// Wrap in a form so Enter submits; display:contents keeps flex layout intact.
 				A("form display:contents", () => {
 					A("submit=", (e: Event) => {
 						e.preventDefault();
@@ -241,8 +240,8 @@ export function prompt(message: string, defaultValue = "", opts: Partial<DialogO
 						close();
 					});
 					textline({ bind: A.ref($v, "value") });
-					buttonGroup({ layout: "spaced", root: "align-self:flex-end", content: () => {
-						button({ text: "Cancel", variant: "outlined", color: "neutral", type: "button", click: close });
+					buttonGroup({ layout: "spaced", attrs: "align-self:flex-end", content: () => {
+						button({ text: "Cancel", attrs: ".neutral .outlined", type: "button", click: close });
 						button({ text: "OK", type: "submit" });
 					}});
 				});