@getaster/elements 0.0.0-stage → 0.1.0-preview.1

package/dist/toast/toast.d.ts

@@ -0,0 +1,25 @@
+import { AsterElement, type View } from "../base/element.ts";
+export interface ToastAction {
+    readonly label: string;
+    readonly run: () => void;
+}
+/**
+ * Toasts, one at a time, for results with no visible place of their own or
+ * to offer Undo. A toast stays `duration` milliseconds, or `actionDuration`
+ * with an action. Hovering over it or focusing inside it holds it; once
+ * neither applies it stays a further 2 seconds.
+ */
+export declare class Toaster extends AsterElement {
+    #private;
+    /** How long a toast with no action stays, in milliseconds. Default 1800. */
+    get duration(): number;
+    set duration(v: number);
+    /** How long a toast with an action stays, in milliseconds. Default 6000. */
+    get actionDuration(): number;
+    set actionDuration(v: number);
+    show(message: string, action?: ToastAction): void;
+    dismiss(): void;
+    protected render(): View;
+}
+/** Tells screen readers about a background result, with no popup. */
+export declare function announce(text: string): void;

package/dist/toast/toast.js

@@ -0,0 +1,92 @@
+import { html, nothing } from "lit-html";
+import { AsterElement, define } from "../base/element.js";
+/**
+ * Toasts, one at a time, for results with no visible place of their own or
+ * to offer Undo. A toast stays `duration` milliseconds, or `actionDuration`
+ * with an action. Hovering over it or focusing inside it holds it; once
+ * neither applies it stays a further 2 seconds.
+ */
+export class Toaster extends AsterElement {
+    #shown = this.prop(undefined);
+    #visible = this.prop(false);
+    #duration = this.prop(1800);
+    #actionDuration = this.prop(6000);
+    #hovered = false;
+    #focused = false;
+    #timer;
+    #ids = 0;
+    /** How long a toast with no action stays, in milliseconds. Default 1800. */
+    get duration() {
+        return this.#duration.value;
+    }
+    set duration(v) {
+        this.#duration.value = v;
+    }
+    /** How long a toast with an action stays, in milliseconds. Default 6000. */
+    get actionDuration() {
+        return this.#actionDuration.value;
+    }
+    set actionDuration(v) {
+        this.#actionDuration.value = v;
+    }
+    show(message, action) {
+        this.#shown.value = { message, id: ++this.#ids, ...(action ? { action } : {}) };
+        this.#visible.value = true;
+        // The old toast's button may still hold focus; the new one keeps waiting for it to leave.
+        this.#focused = this.contains(document.activeElement);
+        if (!this.#focused)
+            this.#arm(action ? this.#actionDuration.peek() : this.#duration.peek());
+    }
+    dismiss() {
+        clearTimeout(this.#timer);
+        this.#hovered = this.#focused = false;
+        this.#visible.value = false;
+    }
+    render() {
+        const shown = this.#shown.value;
+        return html `<div class="aster-toast" role="status" ?data-show=${this.#visible.value}
+      @pointerenter=${() => this.#hold(true, undefined)}
+      @pointerleave=${() => this.#hold(false, undefined)}
+      @focusin=${() => this.#hold(undefined, true)}
+      @focusout=${(e) => !this.contains(e.relatedTarget) && this.#hold(undefined, false)}>
+      <i aria-hidden="true"></i><span>${shown?.message ?? ""}</span>
+      ${shown?.action && this.#visible.value
+            ? html `<button type="button" @click=${() => this.#act(shown.action)}>${shown.action.label}</button>`
+            : nothing}
+    </div>`;
+    }
+    #act(action) {
+        this.dismiss();
+        action.run();
+    }
+    /** Pointer and focus each hold the toast; the timer restarts once neither does. */
+    #hold(hovered, focused) {
+        this.#hovered = hovered ?? this.#hovered;
+        this.#focused = focused ?? this.#focused;
+        if (this.#hovered || this.#focused)
+            clearTimeout(this.#timer);
+        else if (this.#visible.peek())
+            this.#arm(2000);
+    }
+    #arm(ms) {
+        clearTimeout(this.#timer);
+        this.#timer = setTimeout(() => {
+            this.#hovered = this.#focused = false;
+            this.#visible.value = false;
+        }, ms);
+    }
+}
+define("aster-toaster", Toaster);
+let region;
+/** Tells screen readers about a background result, with no popup. */
+export function announce(text) {
+    if (!region?.isConnected) {
+        region = document.createElement("p");
+        region.className = "aster-sr-only";
+        region.setAttribute("aria-live", "polite");
+        document.body.append(region);
+    }
+    region.textContent = "";
+    const r = region;
+    requestAnimationFrame(() => (r.textContent = text));
+}

package/dist/tree/navigator.d.ts

@@ -0,0 +1,41 @@
+import type { Entity, KeyText, Tree } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+/**
+ * A tree, one level at a time: each row chooses its node, or opens it to
+ * show the level under it, sliding in (and back out on the way up). A
+ * breadcrumb, back and forward move between levels; the level loads by page
+ * as it scrolls. Choosing emits `choose` with the node's key; Escape emits
+ * `cancel`.
+ *
+ * The slide clones the outgoing list as an inert ghost and animates both
+ * lists; under reduced motion there's no animation.
+ */
+export declare class TreeNavigator extends AsterElement {
+    #private;
+    get tree(): Tree | undefined;
+    set tree(v: Tree | undefined);
+    /** The field an entry shows as its name; the type's title field by default. */
+    get display(): string;
+    set display(v: string);
+    /** Names the navigator, and its top level in the breadcrumb. */
+    get label(): string;
+    set label(v: string);
+    /**
+     * Says why a node can't be chosen (it can still be opened), or
+     * `undefined` if it can: moving a task into its own subtree, say.
+     */
+    get choosable(): ((entity: Entity) => string | undefined) | undefined;
+    set choosable(v: ((entity: Entity) => string | undefined) | undefined);
+    /** The level shown, as keys from the top. */
+    get path(): readonly KeyText[];
+    /** Shows the level under `key` (`undefined`: the top), as if each level were opened in turn. */
+    go(key: KeyText | undefined): Promise<void>;
+    focus(options?: FocusOptions): void;
+    protected render(): View;
+    /** The level of the heading that names the level shown, to fit the page's outline. */
+    get headingLevel(): number;
+    set headingLevel(v: number);
+    /** Text shown on each row's choose button, before the name ("Move under"). */
+    get chooseLabel(): string;
+    set chooseLabel(v: string);
+}

package/dist/tree/navigator.js

@@ -0,0 +1,228 @@
+import { signal } from "@preact/signals-core";
+import { html, nothing, svg } from "lit-html";
+import { AsterElement, define, uid } from "../base/element.js";
+/**
+ * A tree, one level at a time: each row chooses its node, or opens it to
+ * show the level under it, sliding in (and back out on the way up). A
+ * breadcrumb, back and forward move between levels; the level loads by page
+ * as it scrolls. Choosing emits `choose` with the node's key; Escape emits
+ * `cancel`.
+ *
+ * The slide clones the outgoing list as an inert ghost and animates both
+ * lists; under reduced motion there's no animation.
+ */
+export class TreeNavigator extends AsterElement {
+    #tree = this.prop(undefined);
+    #display = this.prop("");
+    #label = this.prop("");
+    #chooseLabel = this.prop("Choose");
+    #headingLevel = this.prop(2);
+    #choosable = this.prop(undefined);
+    /** Keys from the top level down to the level shown. */
+    #path = signal([]);
+    #back = signal([]);
+    #forward = signal([]);
+    #id = uid("aster-drill");
+    #direction = 1;
+    #ghost;
+    get tree() {
+        return this.#tree.value;
+    }
+    set tree(v) {
+        this.#tree.value = v;
+    }
+    /** The field an entry shows as its name; the type's title field by default. */
+    get display() {
+        return this.#display.value;
+    }
+    set display(v) {
+        this.#display.value = v;
+    }
+    /** Names the navigator, and its top level in the breadcrumb. */
+    get label() {
+        return this.#label.value;
+    }
+    set label(v) {
+        this.#label.value = v;
+    }
+    /**
+     * Says why a node can't be chosen (it can still be opened), or
+     * `undefined` if it can: moving a task into its own subtree, say.
+     */
+    get choosable() {
+        return this.#choosable.value;
+    }
+    set choosable(v) {
+        this.#choosable.value = v;
+    }
+    /** The level shown, as keys from the top. */
+    get path() {
+        return this.#path.value;
+    }
+    /** Shows the level under `key` (`undefined`: the top), as if each level were opened in turn. */
+    async go(key) {
+        const tree = this.#tree.peek();
+        if (!tree)
+            return;
+        const path = key === undefined ? [] : [...(await tree.ancestors(key)), key];
+        this.#move(path, path.length >= this.#path.peek().length ? 1 : -1, true);
+    }
+    focus(options) {
+        this.querySelector(".aster-drill-heading")?.focus(options);
+    }
+    render() {
+        const tree = this.#tree.value;
+        if (!tree)
+            return nothing;
+        const path = this.#path.value;
+        const parent = path.at(-1);
+        const level = tree.level(parent);
+        const display = this.#display.value || tree.type.titleField || tree.key;
+        const title = (key) => {
+            const e = this.#entity(key);
+            return e ? String(e[display] ?? "") : "…";
+        };
+        const loaded = level.keys.value.filter((k) => k !== undefined);
+        const count = level.count.value;
+        if (count === undefined && level.status.peek() !== "loading")
+            queueMicrotask(() => void level.ensure(0, level.pageSize).catch(() => { }));
+        const heading = parent === undefined ? this.#label.value || "Top level" : title(parent);
+        const arrow = (back) => html `<svg viewBox="0 0 16 16" aria-hidden="true"><path d=${back ? "m10 3-5 5 5 5" : "m6 3 5 5-5 5"}/></svg>`;
+        return html `<section class="aster-drill" aria-label=${this.#label.value || "Navigate"} @keydown=${(e) => this.#key(e)}>
+      <div class="aster-drill-bar">
+        <button type="button" class="aster-drill-step" aria-label="Back" title="Back" ?disabled=${!this.#back.value.length} @click=${() => this.#travel(true)}>${arrow(true)}</button>
+        <button type="button" class="aster-drill-step" aria-label="Forward" title="Forward" ?disabled=${!this.#forward.value.length} @click=${() => this.#travel(false)}>${arrow(false)}</button>
+        <nav class="aster-drill-crumbs" aria-label="Path">
+          <ol>
+            <li><button type="button" aria-current=${path.length === 0 ? "location" : nothing} @click=${() => this.#move([], -1)}>${this.#label.value || "Top level"}</button></li>
+            ${path.map((k, i) => html `<li><button type="button" aria-current=${i === path.length - 1 ? "location" : nothing}
+                @click=${() => this.#move(path.slice(0, i + 1), i + 1 >= path.length ? 1 : -1)}>${title(k)}</button></li>`)}
+          </ol>
+        </nav>
+      </div>
+      <div class="aster-drill-heading" role="heading" aria-level=${this.#headingLevel.value} id=${`${this.#id}-heading`} tabindex="-1">${heading}</div>
+      <div class="aster-drill-viewport">
+        <ul class="aster-drill-list" aria-labelledby=${`${this.#id}-heading`} aria-busy=${count === undefined ? "true" : "false"}
+          @scroll=${(e) => {
+            const el = e.currentTarget;
+            if (!level.complete.peek() && el.scrollTop + el.clientHeight > el.scrollHeight - 80)
+                void level.ensure(0, loaded.length + level.pageSize);
+        }}>
+          ${count === undefined ? html `<li class="aster-drill-empty"><span role="status">Loading…</span></li>` : nothing}
+          ${count === 0 ? html `<li class="aster-drill-empty">Nothing here.</li>` : nothing}
+          ${loaded.map((key) => {
+            const entity = this.#entity(key);
+            const name = title(key);
+            const folder = tree.hasChildren(key, parent);
+            const why = entity && this.#choosable.value ? this.#choosable.value(entity) : undefined;
+            return html `<li class="aster-drill-row" data-key=${key}>
+              <button type="button" class="aster-drill-choose" aria-disabled=${why ? "true" : nothing} title=${why ?? nothing}
+                aria-label=${`${this.#chooseLabel.value} ${name}`}
+                @click=${() => !why && this.emit("choose", key)}>
+                <svg viewBox="0 0 16 16" aria-hidden="true">${folder ? svg `<path d="M2 4.5h4.5l1.5 1.5h6v6.5H2z"/>` : svg `<path d="M4 2.5h5.5l3 3v8H4zM9.5 2.5v3h3"/>`}</svg>
+                <span>${name}</span>
+              </button>
+              ${folder !== false
+                ? html `<button type="button" class="aster-drill-open" aria-label=${`Open ${name}`} title=${`Open ${name}`}
+                    @click=${() => this.#move([...path, key], 1)}>${arrow(false)}</button>`
+                : nothing}
+            </li>`;
+        })}
+          ${count !== undefined && loaded.length < count ? html `<li class="aster-drill-empty"><span role="status">${loaded.length} of ${count}…</span></li>` : nothing}
+        </ul>
+      </div>
+    </section>`;
+    }
+    /** The level of the heading that names the level shown, to fit the page's outline. */
+    get headingLevel() {
+        return this.#headingLevel.value;
+    }
+    set headingLevel(v) {
+        this.#headingLevel.value = v;
+    }
+    /** Text shown on each row's choose button, before the name ("Move under"). */
+    get chooseLabel() {
+        return this.#chooseLabel.value;
+    }
+    set chooseLabel(v) {
+        this.#chooseLabel.value = v;
+    }
+    #entity(key) {
+        return this.#tree.value?.entity(key);
+    }
+    #move(path, direction, replaceHistory = false) {
+        const from = this.#path.peek();
+        if (from.join() === path.join())
+            return;
+        if (!replaceHistory) {
+            this.#back.value = [...this.#back.peek(), from];
+            this.#forward.value = [];
+        }
+        this.#slide(direction, () => (this.#path.value = path));
+    }
+    #travel(back) {
+        const stack = back ? this.#back.peek() : this.#forward.peek();
+        const to = stack.at(-1);
+        if (!to)
+            return;
+        const here = this.#path.peek();
+        if (back) {
+            this.#back.value = stack.slice(0, -1);
+            this.#forward.value = [...this.#forward.peek(), here];
+        }
+        else {
+            this.#forward.value = stack.slice(0, -1);
+            this.#back.value = [...this.#back.peek(), here];
+        }
+        this.#slide(back ? -1 : 1, () => (this.#path.value = to));
+    }
+    /** Swaps the level with a slide: the new list from the side it's going to, the old one away. */
+    #slide(direction, change) {
+        const list = this.querySelector(".aster-drill-list");
+        const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (list && !reduce) {
+            const ghost = list.cloneNode(true);
+            ghost.inert = true;
+            ghost.setAttribute("aria-hidden", "true");
+            ghost.classList.add("aster-drill-ghost");
+            ghost.removeAttribute("aria-labelledby");
+            ghost.scrollTop = list.scrollTop;
+            this.#ghost?.remove();
+            this.#ghost = ghost;
+        }
+        this.#direction = direction;
+        change();
+        requestAnimationFrame(() => {
+            this.querySelector(".aster-drill-heading")?.focus();
+            const incoming = this.querySelector(".aster-drill-list");
+            const outgoing = this.#ghost;
+            this.#ghost = undefined;
+            if (!incoming)
+                return;
+            incoming.scrollTop = 0;
+            if (!outgoing)
+                return;
+            incoming.parentElement?.append(outgoing);
+            const back = this.#direction < 0;
+            outgoing.style.zIndex = back ? "2" : "0";
+            const timing = { duration: 240, easing: "cubic-bezier(.22,.7,.25,1)" };
+            const animations = [
+                incoming.animate([{ transform: `translateX(${back ? "-24%" : "100%"})`, opacity: 0.65 }, { transform: "none", opacity: 1 }], timing),
+                outgoing.animate([{ transform: "none" }, { transform: `translateX(${back ? "100%" : "-24%"})`, opacity: 0.65 }], timing),
+            ];
+            void Promise.all(animations.map((a) => a.finished.catch(() => { }))).then(() => outgoing.remove());
+        });
+    }
+    #key(e) {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            this.emit("cancel");
+        }
+        else if (e.key === "Backspace" && !e.target.matches("input, textarea") && this.#path.peek().length) {
+            e.preventDefault();
+            const path = this.#path.peek();
+            this.#move(path.slice(0, -1), -1);
+        }
+    }
+}
+define("aster-tree-navigator", TreeNavigator);

package/dist/window/chrome.d.ts

@@ -0,0 +1,3 @@
+import type { View } from "../base/element.ts";
+/** Shared title/chrome geometry for floating windows and dashboard portlets. */
+export declare function windowBar(id: string, heading: string, actions: View, drag?: (event: PointerEvent) => void): View;

package/dist/window/chrome.js

@@ -0,0 +1,7 @@
+import { html } from "lit-html";
+/** Shared title/chrome geometry for floating windows and dashboard portlets. */
+export function windowBar(id, heading, actions, drag) {
+    return html `<div class="aster-window-bar" @pointerdown=${drag}>
+    <h2 id=${id}>${heading}</h2>${actions}
+  </div>`;
+}

package/dist/window/window.d.ts

@@ -0,0 +1,46 @@
+import { AsterElement, type View } from "../base/element.ts";
+export type WindowState = "normal" | "maximized" | "minimized";
+export interface WindowBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface WindowPlacement {
+    state: WindowState;
+    bounds?: WindowBounds;
+    restoreMaximized?: boolean;
+}
+/** Non-modal chrome; content ownership stays with the host page. */
+export declare class Window extends AsterElement {
+    #private;
+    get heading(): string;
+    set heading(v: string);
+    get content(): View;
+    set content(v: View);
+    get open(): boolean;
+    get state(): WindowState;
+    get active(): boolean;
+    get managed(): boolean;
+    set managed(v: boolean);
+    get preserveContent(): boolean;
+    set preserveContent(v: boolean);
+    get closing(): boolean;
+    get beforeClose(): (() => boolean | Promise<boolean>) | undefined;
+    set beforeClose(v: (() => boolean | Promise<boolean>) | undefined);
+    connectedCallback(): void;
+    show(opener?: HTMLElement | null): void;
+    /** Activates chrome without reparenting the content or recreating its models. */
+    activate(focus?: boolean): void;
+    deactivate(): void;
+    close(): Promise<boolean>;
+    toggle(opener?: HTMLElement | null): void;
+    minimize(): void;
+    maximize(): void;
+    restore(): void;
+    placement(): WindowPlacement;
+    /** Invalid persisted data is rejected atomically. CSS limits size to the viewport. */
+    setPlacement(value: WindowPlacement): void;
+    protected updated(): void;
+    protected render(): View;
+}