staffa 0.1.0 → 0.3.0

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" });
 					}});
 				});

package/src/components/field.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type BaseOptions, type Bindable, type Slot, type Styling, drawSlot, uniqueId } from "../core.js";
+import { type Bindable, type Slot, type Attributes, drawSlot, uniqueId } from "../core.js";
 
 /**
  * Options shared by all *form field* components (textline, textarea, checkbox,
@@ -9,7 +9,9 @@ import { type BaseOptions, type Bindable, type Slot, type Styling, drawSlot, uni
  * itself, and optional help/error text below it. {@link form} relies on this
  * shared structure to align groups of fields.
  */
-export interface FieldOptions extends BaseOptions {
+export interface FieldOptions {
+	/** Aberdeen attr/style string applied to the field's wrapper element. */
+	attrs?: Attributes;
 	/** Visible label, associated with the control via `for`/`id` for a11y. */
 	label?: Slot;
 	/** Helper text shown beneath the control. */
@@ -27,26 +29,24 @@ export interface FieldOptions extends BaseOptions {
 	name?: string;
 	/** Explicit id for the control; auto-generated when omitted. */
 	id?: string;
-	/** Aberdeen attr/style string applied to the control element itself. */
-	control?: Styling;
+	/** Aberdeen attr/style string applied to the control (input) element itself. */
+	inputAttrs?: Attributes;
 }
 
 A.insertGlobalCss({
-	".S_field": {
+	".s-field": {
 		"&": "display:flex flex-direction:column gap:$1",
-		"> label": "font-weight:600 font-size:0.9em fg:$sFg user-select:none",
+		"> label": "font-weight:600 font-size:0.9em fg:$s-fg user-select:none",
 	},
-	// Shared, reusable bits (also used by checkbox & autocomplete).
-	".S_req": "fg:$sDanger margin-left:2px",
-	".S_help": "font-size:0.82em fg:$sFgMuted",
-	".S_error": "font-size:0.82em fg:$sDanger",
-	// Shared look for text-like controls.
-	".S_input": {
-		"&": "w:100% bg:$sSurface fg:$sFg border: 1px solid $sBorder; r:$sRadius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;",
-		"&:hover:not(:disabled)": "border-color:$sBorderStrong",
-		"&:focus-visible": "border-color:$sPrimary box-shadow: 0 0 0 3px $sFocus; outline:none",
+	".s-req": "fg:$s-danger margin-left:2px",
+	".s-help": "font-size:0.82em fg:$s-fg-muted",
+	".s-error": "font-size:0.82em fg:$s-danger",
+	".s-input": {
+		"&": "w:100% bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;",
+		"&:hover:not(:disabled)": "border-color:$s-border-strong",
+		"&:focus-visible": "border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none",
 		"&:disabled": "opacity:0.6 cursor:not-allowed",
-		"&[aria-invalid=true]": "border-color:$sDanger",
+		"&[aria-invalid=true]": "border-color:$s-danger",
 	},
 });
 
@@ -60,8 +60,8 @@ A.insertGlobalCss({
  *
  * @param opts The field options.
  * @param drawControl Receives the resolved `id` and the live "invalid" getter,
- *   and must draw the actual control element (using class `S_input` where
- *   appropriate, and passing `opts.control` as an arg for caller styling).
+ *   and must draw the actual control element (using class `s-input` where
+ *   appropriate, and passing `opts.inputAttrs` as an arg for caller styling).
  */
 export function drawField(
 	opts: FieldOptions,
@@ -70,12 +70,12 @@ export function drawField(
 	const id = opts.id ?? uniqueId("field");
 	const isInvalid = () => !!opts.error;
 
-	A("div.S_field", opts.root, () => {
+	A("div.s-field", opts.attrs, () => {
 		A(() => {
 			if (opts.label != null) {
 				A(`label for=${id}`, () => {
 					drawSlot(opts.label);
-					if (opts.required) A("span.S_req aria-hidden=true #*");
+					if (opts.required) A("span.s-req aria-hidden=true #*");
 				});
 			}
 		});
@@ -83,10 +83,10 @@ export function drawField(
 		drawControl(id, isInvalid);
 
 		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/form.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type Content, type ContentOptions, type Styling } from "../core.js";
+import { type Content, type ContentOptions, type Attributes } from "../core.js";
 
 /** Options for {@link form}. */
 export interface FormOptions extends ContentOptions {
@@ -12,20 +12,20 @@ export interface FormOptions extends ContentOptions {
 	/**
 	 * Layout of fields. `"stacked"` (default) is a single column; `"grid"` packs
 	 * fields into a responsive multi-column grid. A field can span the full grid
-	 * width by adding the `.S_wide` class (e.g. `root: ".S_wide"`).
+	 * width by adding the `.s-wide` class (e.g. `attrs: ".s-wide"`).
 	 */
 	layout?: "stacked" | "grid";
 	/** Aberdeen attr/style string for the action bar. */
-	actionsInner?: Styling;
+	actionsAttrs?: Attributes;
 	/** Footer actions (typically a {@link import("./buttonGroup").buttonGroup} or buttons). */
 	actions?: Content;
 }
 
 A.insertGlobalCss({
-	".S_form": {
+	".s-form": {
 		"&": "display:flex flex-direction:column gap:$3",
 		"&.grid": "display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3",
-		"&.grid > .S_wide, &.grid > footer": "grid-column: 1 / -1;",
+		"&.grid > .s-wide, &.grid > footer": "grid-column: 1 / -1;",
 		"> footer": "display:flex align-items:center gap:$2 flex-wrap:wrap margin-top:$1",
 	},
 });
@@ -54,7 +54,7 @@ A.insertGlobalCss({
 export function form(opts: FormOptions | Content = {}): void {
 	const o: FormOptions = typeof opts === "function" ? { content: opts } : opts;
 
-	A(`form.S_form`, o.root, o.inner, () => {
+	A(`form.s-form`, o.attrs, () => {
 		// Toggle grid class in its own scope so changing layout doesn't recreate
 		// the fields (which would lose focus / input state).
 		A(() => {
@@ -78,7 +78,7 @@ export function form(opts: FormOptions | Content = {}): void {
 
 		// Own scope so toggling actions doesn't recreate the fields above.
 		A(() => {
-			if (o.actions) A("footer", o.actionsInner, () => o.actions?.());
+			if (o.actions) A("footer", o.actionsAttrs, () => o.actions?.());
 		});
 	});
 }