staffa 0.1.0 → 0.3.0

package/dist/components/dialog.js

@@ -3,44 +3,74 @@ import { drawSlot } from "../core.js";
 import { button } from "./button.js";
 import { buttonGroup } from "./buttonGroup.js";
 import { textline } from "./textline.js";
-// 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": {
-        "&": "position:fixed z-index:201 top:50% left:50% " +
+    ".s-dialog": {
+        "&": "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({});
+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
@@ -49,74 +79,41 @@ 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) {
-    return new Promise((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) => {
-                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));
-                    }
-                });
-                A("div", opts.inner, () => {
-                    if (opts.content)
-                        opts.content(close);
-                });
-                A(() => {
-                    if (opts.footer != null) {
-                        A("footer", opts.footerInner, () => drawSlot(opts.footer));
+    if (!dialogCount) {
+        // Install Esc handler the first time we create a dialog
+        document.addEventListener("keydown", (e) => {
+            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;
                     }
-                });
-            });
+                }
+            }
         });
+    }
+    const dialogId = ++dialogCount;
+    if (opts.cancelWithScope !== false)
+        A.clean(() => { delete dialogs[dialogId]; });
+    return new Promise((resolve) => {
+        dialogs[dialogId] = { resolve, opts };
     });
 }
 /**
  * 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.");
@@ -128,7 +125,7 @@ export function alert(message, opts = {}) {
         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 });
                 } });
         },
@@ -137,10 +134,7 @@ export function alert(message, opts = {}) {
 }
 /**
  * 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
@@ -155,8 +149,8 @@ export function confirm(message, opts = {}) {
             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(); } });
                     } });
             },
@@ -170,10 +164,7 @@ export function confirm(message, opts = {}) {
 }
 /**
  * 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
@@ -190,7 +181,6 @@ export function prompt(message, defaultValue = "", opts = {}) {
             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) => {
                         e.preventDefault();
@@ -198,8 +188,8 @@ export function prompt(message, defaultValue = "", opts = {}) {
                         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/dist/components/field.d.ts

@@ -1,4 +1,4 @@
-import { type BaseOptions, type Bindable, type Slot, type Styling } from "../core.js";
+import { type Bindable, type Slot, type Attributes } from "../core.js";
 /**
  * Options shared by all *form field* components (textline, textarea, checkbox,
  * autocomplete, ...).
@@ -7,7 +7,9 @@ import { type BaseOptions, type Bindable, type Slot, type Styling } from "../cor
  * 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. */
@@ -25,8 +27,8 @@ 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;
 }
 /**
  * Render the standard field chrome (label + control + help/error) around a
@@ -38,8 +40,8 @@ export interface FieldOptions extends BaseOptions {
  *
  * @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 declare function drawField(opts: FieldOptions, drawControl: (id: string, isInvalid: () => boolean) => void): void;
 /**

package/dist/components/field.js

@@ -1,21 +1,19 @@
 import A from "aberdeen";
 import { drawSlot, uniqueId } from "../core.js";
 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",
     },
 });
 /**
@@ -28,30 +26,30 @@ 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, drawControl) {
     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 #*");
+                        A("span.s-req aria-hidden=true #*");
                 });
             }
         });
         drawControl(id, isInvalid);
         A(() => {
             if (opts.help != null && !opts.error)
-                A("div.S_help", () => drawSlot(opts.help));
+                A("div.s-help", () => drawSlot(opts.help));
         });
         A(() => {
             if (opts.error)
-                A("div.S_error role=alert #", opts.error);
+                A("div.s-error role=alert #", opts.error);
         });
     });
 }

package/dist/components/form.d.ts

@@ -1,4 +1,4 @@
-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 {
     /**
@@ -10,11 +10,11 @@ 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;
 }

package/dist/components/form.js

@@ -1,9 +1,9 @@
 import A from "aberdeen";
 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",
     },
 });
@@ -30,7 +30,7 @@ A.insertGlobalCss({
  */
 export function form(opts = {}) {
     const o = 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(() => {
@@ -53,7 +53,7 @@ export function form(opts = {}) {
         // Own scope so toggling actions doesn't recreate the fields above.
         A(() => {
             if (o.actions)
-                A("footer", o.actionsInner, () => o.actions?.());
+                A("footer", o.actionsAttrs, () => o.actions?.());
         });
     });
 }

package/dist/components/main.d.ts

@@ -1,6 +1,9 @@
-import { type BaseOptions, type Content, type Slot, type Styling } from "../core.js";
+import { type Content, type Slot, type Attributes } from "../core.js";
+import { type MenuOptions } from "./menu.js";
 /** Options for {@link main}. */
-export interface MainOptions extends BaseOptions {
+export interface MainOptions {
+    /** Aberdeen attr/style string applied to the outermost shell element. */
+    attrs?: Attributes;
     /** App/page title shown in the top bar. */
     title?: Slot;
     /** Secondary line under the title. */
@@ -14,31 +17,55 @@ export interface MainOptions extends BaseOptions {
     /** Footer content, pinned below the scroll area. */
     footer?: Slot;
     /**
-     * Max content width. When set, the content is centered in a "sheet" with a
-     * drop shadow and a distinct surface, against the darker page background.
-     * e.g. `"60rem"`.
+     * Max width for the page's *content*, e.g. `"60rem"`. The header and footer
+     * backgrounds still span the full shell width, but their contents — and the
+     * sidebar + separator + content trio (or just the content when there's no
+     * sidebar) — cap to this width and centre horizontally. When unset, everything
+     * fills the available width. Either way the content shares the page surface —
+     * it is not boxed.
      */
     maxWidth?: string;
-    /** Aberdeen attr/style string applied to the content sheet. */
-    inner?: Styling;
+    /** Aberdeen attr/style string applied to the content area. */
+    contentAttrs?: Attributes;
     /** Aberdeen attr/style string applied to the top bar. */
-    topbarInner?: Styling;
+    topbarAttrs?: Attributes;
+    /**
+     * Navigation menu. When provided, renders a sidebar (in `"left"` / `"right"`
+     * mode) or a button+dropdown (in `"button"` mode). The sidebar automatically
+     * collapses to button mode when the shell is too narrow.
+     */
+    nav?: MenuOptions;
+    /**
+     * Where to render the nav. Defaults to `"left"`.
+     * - `"left"` / `"right"`: sidebar next to the content area; collapses to a
+     *   button+dropdown in the top bar when the shell width drops below 640 px.
+     * - `"button"`: always a button+dropdown, never a sidebar.
+     */
+    navPosition?: "left" | "right" | "button";
+    /** Aberdeen attr/style string applied to the sidebar nav panel. */
+    navAttrs?: Attributes;
 }
 /**
  * An application shell that wires up the things almost every app needs: a sticky
  * top bar (icon, title, subtitle, action menu), a scrollable content area, and a
- * footer. With {@link MainOptions.maxWidth} the content becomes a centered,
- * shadowed "sheet" — the common dashboard/document look — while staying fully
- * customisable via the various draw-function options and styling strings.
+ * footer. With {@link MainOptions.maxWidth} the content area is centred and its
+ * width capped. Add a `nav` to get a responsive sidebar (auto-collapses to a
+ * menu button below 640 px, or always a button with `navPosition: "button"`).
  *
  * @example
  * ```ts
  * S.main({
  *   icon: "✦",
- *   title: "Skye Demo",
- *   subtitle: "Component playground",
+ *   title: "Staffa Demo",
  *   maxWidth: "56rem",
- *   menu: () => S.button({ text: "New", size: "sm" }),
+ *   nav: {
+ *     items: [
+ *       { label: "Home", icon: () => A("#🏠"), href: "/" },
+ *       { label: "Settings", href: "/settings" },
+ *     ],
+ *   },
+ *   navPosition: "left",
+ *   menu: () => S.button({ text: "New", attrs: ".small" }),
  *   content: () => drawPage(),
  *   footer: "© 2026",
  * });