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

package/dist/window/window.js

@@ -0,0 +1,347 @@
+import { html, nothing } from "lit-html";
+import { AsterElement, define, uid } from "../base/element.js";
+import { openWhen } from "../overlay/anchor.js";
+import { windowBar } from "./chrome.js";
+const STEP = 16;
+const BIG_STEP = 64;
+const MARGIN = 8;
+/** Non-modal chrome; content ownership stays with the host page. */
+export class Window extends AsterElement {
+    #content = this.prop(nothing);
+    #heading = this.prop("");
+    #open = this.prop(false);
+    #state = this.prop("normal");
+    #managed = this.prop(false);
+    #active = this.prop(false);
+    #preserve = this.prop(false);
+    #closing = this.prop(false);
+    #id = uid("aster-window");
+    #opener = null;
+    #at;
+    #bounds;
+    #restoreMaximized = false;
+    #mounted = false;
+    #resize;
+    #observed = null;
+    #focus = null;
+    #closeTask;
+    #generation = 0;
+    #beforeClose;
+    #dragEnd;
+    get heading() { return this.#heading.value; }
+    set heading(v) { this.#heading.value = v; }
+    get content() { return this.#content.value; }
+    set content(v) { this.#content.value = v; }
+    get open() { return this.#open.value; }
+    get state() { return this.#state.value; }
+    get active() { return this.#active.value; }
+    get managed() { return this.#managed.value; }
+    set managed(v) { this.#managed.value = v; }
+    get preserveContent() { return this.#preserve.value; }
+    set preserveContent(v) { this.#preserve.value = v; }
+    get closing() { return this.#closing.value; }
+    get beforeClose() { return this.#beforeClose; }
+    set beforeClose(v) { this.#beforeClose = v; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#resize = new ResizeObserver(() => {
+            if (!this.#open.peek() || this.#state.peek() !== "normal")
+                return;
+            this.#recover();
+            this.#capture();
+            this.emit("placementchange", this.placement());
+        });
+        this.#observe();
+        this.listen(window, "resize", () => this.#recover());
+        this.onDisconnect(() => {
+            this.#resize?.disconnect();
+            this.#observed = null;
+            this.#generation++;
+            this.#closeTask = undefined;
+            this.#closing.value = false;
+            this.#dragEnd?.();
+        });
+    }
+    show(opener = document.activeElement) {
+        if (!this.#open.peek()) {
+            this.#opener = opener;
+            this.#mounted = true;
+            this.#open.value = true;
+        }
+        if (this.#state.peek() === "minimized")
+            this.#state.value = this.#restoreMaximized ? "maximized" : "normal";
+        requestAnimationFrame(() => {
+            if (!this.isConnected || !this.#open.peek())
+                return;
+            const panel = this.#panel();
+            if (!panel)
+                return;
+            if (this.#state.peek() === "normal")
+                this.#place(this.#at ?? beside(opener, panel));
+            this.#applySize();
+            this.activate();
+            this.emit("statechange", this.#state.peek());
+        });
+    }
+    /** Activates chrome without reparenting the content or recreating its models. */
+    activate(focus = true) {
+        const panel = this.#panel();
+        if (!panel || !this.#open.peek() || this.#state.peek() === "minimized" || document.querySelector("dialog:modal"))
+            return;
+        if (!this.#active.peek()) {
+            const previous = document.activeElement;
+            this.#active.value = true;
+            // Top-layer order is insertion order; z-index cannot raise a popover.
+            if (panel.matches(":popover-open"))
+                panel.hidePopover();
+            panel.showPopover();
+            if (!focus && previous instanceof HTMLElement && previous.isConnected)
+                previous.focus({ preventScroll: true });
+            this.emit("activate");
+        }
+        if (focus)
+            (this.#focus?.isConnected && panel.contains(this.#focus) ? this.#focus : panel).focus({ preventScroll: true });
+    }
+    deactivate() { this.#active.value = false; }
+    close() {
+        if (this.#closeTask)
+            return this.#closeTask;
+        if (!this.#open.peek())
+            return Promise.resolve(true);
+        if (!this.#beforeClose) {
+            this.#finishClose();
+            return Promise.resolve(true);
+        }
+        const generation = this.#generation;
+        const guard = this.#beforeClose;
+        this.#closing.value = true;
+        this.#closeTask = Promise.resolve().then(() => guard()).then(allowed => {
+            if (!allowed || generation !== this.#generation || !this.isConnected)
+                return false;
+            this.#finishClose();
+            return true;
+        }).catch((error) => {
+            if (generation === this.#generation)
+                this.emit("closeerror", error);
+            return false;
+        }).finally(() => {
+            if (generation === this.#generation) {
+                this.#closing.value = false;
+                this.#closeTask = undefined;
+            }
+        });
+        return this.#closeTask;
+    }
+    toggle(opener) {
+        if (this.#open.peek() && this.#state.peek() !== "minimized")
+            void this.close();
+        else
+            this.show(opener);
+    }
+    minimize() {
+        if (!this.#open.peek() || this.#state.peek() === "minimized")
+            return;
+        this.#capture();
+        this.#restoreMaximized = this.#state.peek() === "maximized";
+        this.#rememberFocus();
+        const returnFocus = this.#active.peek() || this.#panel()?.contains(document.activeElement);
+        this.#state.value = "minimized";
+        this.#active.value = false;
+        this.#panel()?.hidePopover();
+        if (returnFocus)
+            this.#returnFocus();
+        this.#changed();
+    }
+    maximize() {
+        if (!this.#open.peek())
+            return;
+        this.#capture();
+        this.#state.value = "maximized";
+        this.#changed();
+    }
+    restore() {
+        if (!this.#open.peek())
+            return;
+        const minimized = this.#state.peek() === "minimized";
+        this.#state.value = minimized && this.#restoreMaximized ? "maximized" : "normal";
+        this.#changed();
+        requestAnimationFrame(() => { this.#applySize(); this.activate(); });
+    }
+    placement() {
+        this.#capture();
+        return { state: this.#state.peek(), ...(this.#bounds ? { bounds: { ...this.#bounds } } : {}), restoreMaximized: this.#restoreMaximized };
+    }
+    /** Invalid persisted data is rejected atomically. CSS limits size to the viewport. */
+    setPlacement(value) {
+        if (!["normal", "maximized", "minimized"].includes(value?.state))
+            throw new TypeError("Invalid window state");
+        const b = value.bounds;
+        if (b && (![b.x, b.y, b.width, b.height].every(Number.isFinite) || b.width <= 0 || b.height <= 0))
+            throw new TypeError("Invalid window bounds");
+        this.#bounds = b ? { ...b } : undefined;
+        this.#at = b ? { x: b.x, y: b.y } : undefined;
+        this.#restoreMaximized = value.restoreMaximized === true;
+        this.#state.value = value.state;
+        requestAnimationFrame(() => this.#applySize());
+    }
+    updated() {
+        this.#observe();
+        if (this.#open.peek() && this.#state.peek() !== "minimized")
+            this.#applySize();
+    }
+    render() {
+        const open = this.#open.value;
+        const state = this.#state.value;
+        const preserve = this.#preserve.value;
+        if (!open && !(preserve && this.#mounted))
+            return nothing;
+        const heading = `${this.#id}-heading`;
+        const managed = this.#managed.value;
+        return html `<div class="aster-window" popover="manual" role="dialog" aria-modal="false" aria-labelledby=${heading}
+      data-state=${state} data-active=${String(this.#active.value)} aria-busy=${String(this.#closing.value)}
+      tabindex="-1" ${openWhen(open && state !== "minimized")}
+      @pointerdown=${() => this.activate(false)} @focusin=${() => { this.#rememberFocus(); this.activate(false); }}
+      @keydown=${(e) => {
+            if (e.key !== "Escape" || e.defaultPrevented)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            void this.close();
+        }}>
+      ${windowBar(heading, this.#heading.value, html `<button type="button" class="aster-window-move" aria-label=${`Move ${this.#heading.value}`}
+          ?disabled=${state !== "normal"} aria-describedby=${`${this.#id}-move-help`}
+          @keydown=${(e) => this.#geometryKey(e, false)}>
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5v13M1.5 8h13M8 1.5 6 3.5M8 1.5l2 2M8 14.5l-2-2M8 14.5l2-2M1.5 8l2-2M1.5 8l2 2M14.5 8l-2-2M14.5 8l-2 2"/></svg>
+        </button>
+        <span id=${`${this.#id}-move-help`} hidden>Arrow keys move the window; with Shift, further.</span>
+        <button type="button" aria-label=${`Resize ${this.#heading.value}`} ?disabled=${state !== "normal"}
+          aria-describedby=${`${this.#id}-resize-help`} @keydown=${(e) => this.#geometryKey(e, true)}>
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 13 13 3M7 3h6v6M3 7v6h6"/></svg>
+        </button>
+        <span id=${`${this.#id}-resize-help`} hidden>Arrow keys resize the window; with Shift, further.</span>
+        ${managed ? html `<button type="button" aria-label=${`Minimize ${this.#heading.value}`} @click=${() => this.minimize()}>
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 12h10"/></svg></button>
+          <button type="button" aria-label=${`${state === "maximized" ? "Restore" : "Maximize"} ${this.#heading.value}`}
+            @click=${() => state === "maximized" ? this.restore() : this.maximize()}>
+            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 3h10v10H3zM3 6h10"/></svg></button>` : nothing}
+        <button type="button" class="aster-window-close" aria-label=${`Close ${this.#heading.value}`} ?disabled=${this.#closing.value} @click=${() => void this.close()}>
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+        </button>`, (event) => this.#drag(event))}
+      <div class="aster-window-body">${this.#content.value}</div>
+    </div>`;
+    }
+    #finishClose() {
+        const returnFocus = this.#active.peek() || this.#panel()?.contains(document.activeElement);
+        this.#rememberFocus();
+        this.#capture();
+        this.#open.value = false;
+        this.#active.value = false;
+        this.#panel()?.hidePopover();
+        if (returnFocus)
+            this.#returnFocus();
+        this.emit("close");
+    }
+    #rememberFocus() {
+        if (document.activeElement instanceof HTMLElement && this.#panel()?.contains(document.activeElement))
+            this.#focus = document.activeElement;
+    }
+    #returnFocus() {
+        if (this.#opener?.isConnected)
+            this.#opener.focus({ preventScroll: true });
+    }
+    #changed() {
+        this.emit("statechange", this.#state.peek());
+        this.emit("placementchange", this.placement());
+    }
+    #geometryKey(e, resize) {
+        if (this.#state.peek() !== "normal")
+            return;
+        const step = e.shiftKey ? BIG_STEP : STEP;
+        const d = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+        const by = d[e.key];
+        const panel = this.#panel();
+        if (!by || !panel)
+            return;
+        e.preventDefault();
+        if (resize) {
+            const r = panel.getBoundingClientRect();
+            panel.style.width = `${Math.max(240, r.width + by[0])}px`;
+            panel.style.height = `${Math.max(160, r.height + by[1])}px`;
+            this.#recover();
+            this.#capture();
+        }
+        else if (this.#at)
+            this.#place({ x: this.#at.x + by[0], y: this.#at.y + by[1] });
+        this.emit("placementchange", this.placement());
+    }
+    #drag(e) {
+        if (e.button !== 0 || this.#state.peek() !== "normal" || e.target.closest("button") || !this.#at)
+            return;
+        const bar = e.currentTarget;
+        this.#dragEnd?.();
+        const start = { x: e.clientX - this.#at.x, y: e.clientY - this.#at.y };
+        bar.setPointerCapture(e.pointerId);
+        e.preventDefault();
+        const move = (m) => this.#place({ x: m.clientX - start.x, y: m.clientY - start.y });
+        const end = () => {
+            bar.removeEventListener("pointermove", move);
+            bar.removeEventListener("pointerup", end);
+            bar.removeEventListener("pointercancel", end);
+            this.#dragEnd = undefined;
+            this.emit("placementchange", this.placement());
+        };
+        bar.addEventListener("pointermove", move);
+        bar.addEventListener("pointerup", end);
+        bar.addEventListener("pointercancel", end);
+        this.#dragEnd = end;
+    }
+    #capture() {
+        const panel = this.#panel();
+        if (!panel?.matches(":popover-open") || this.#state.peek() !== "normal" || panel.dataset.state !== "normal")
+            return;
+        const r = panel.getBoundingClientRect();
+        this.#bounds = { x: r.x, y: r.y, width: r.width, height: r.height };
+    }
+    #applySize() {
+        const panel = this.#panel();
+        if (!panel)
+            return;
+        if (this.#bounds) {
+            panel.style.width = `${this.#bounds.width}px`;
+            panel.style.height = `${this.#bounds.height}px`;
+        }
+        this.#recover();
+    }
+    #recover() {
+        if (this.#state.peek() === "normal" && this.#at && this.#panel()?.matches(":popover-open"))
+            this.#place(this.#at);
+    }
+    #observe() {
+        const panel = this.#panel();
+        if (panel === this.#observed || !this.#resize)
+            return;
+        this.#resize.disconnect();
+        this.#observed = panel;
+        if (panel)
+            this.#resize.observe(panel);
+    }
+    #place(to) {
+        const panel = this.#panel();
+        if (!panel)
+            return;
+        const x = Math.max(MARGIN, Math.min(to.x, innerWidth - panel.offsetWidth - MARGIN));
+        const y = Math.max(MARGIN, Math.min(to.y, innerHeight - panel.offsetHeight - MARGIN));
+        this.#at = { x, y };
+        panel.style.setProperty("--window-x", `${x}px`);
+        panel.style.setProperty("--window-y", `${y}px`);
+    }
+    #panel() { return this.querySelector(".aster-window"); }
+}
+function beside(opener, panel) {
+    const r = opener?.getBoundingClientRect();
+    if (!r)
+        return { x: (innerWidth - panel.offsetWidth) / 2, y: (innerHeight - panel.offsetHeight) / 2 };
+    const above = r.top - MARGIN - panel.offsetHeight;
+    return { x: r.left, y: above >= MARGIN ? above : r.bottom + MARGIN };
+}
+define("aster-window", Window);

package/dist/window/workspace.d.ts

@@ -0,0 +1,29 @@
+import { type ReadonlySignal } from "@preact/signals-core";
+import { Window, type WindowPlacement } from "./window.ts";
+export interface WorkspaceEntry {
+    readonly id: string;
+    readonly window: Window;
+}
+export interface WorkspaceSnapshot {
+    version: 1;
+    windows: {
+        id: string;
+        open: boolean;
+        placement: WindowPlacement;
+    }[];
+    active: string | null;
+}
+/** Coordinates registered windows through their public lifecycle only. */
+export declare class Workspace {
+    #private;
+    get entries(): readonly WorkspaceEntry[];
+    get active(): ReadonlySignal<string | null>;
+    register(id: string, window: Window): () => void;
+    show(id: string, opener?: HTMLElement | null): void;
+    /** Cycles visible windows; hosts choose a shortcut that suits their page. */
+    cycle(backwards?: boolean): void;
+    snapshot(): WorkspaceSnapshot;
+    /** Applies placement to registered windows only; never creates content or closes dirty windows. */
+    restore(snapshot: WorkspaceSnapshot): void;
+    dispose(): void;
+}

package/dist/window/workspace.js

@@ -0,0 +1,137 @@
+import { signal } from "@preact/signals-core";
+import { Window } from "./window.js";
+/** Coordinates registered windows through their public lifecycle only. */
+export class Workspace {
+    #entries = signal([]);
+    #active = signal(null);
+    #cleanup = new Map();
+    #restoring = false;
+    #generation = 0;
+    get entries() { return this.#entries.value; }
+    get active() { return this.#active; }
+    register(id, window) {
+        if (!id || this.#cleanup.has(id) || this.#entries.peek().some(entry => entry.window === window))
+            throw new Error("Workspace windows require unique IDs and elements");
+        const activate = () => {
+            for (const entry of this.#entries.peek())
+                if (entry.window !== window)
+                    entry.window.deactivate();
+            this.#active.value = id;
+            this.#entries.value = [...this.#entries.peek().filter(entry => entry.id !== id), { id, window }];
+        };
+        const leave = () => {
+            if (window.open && window.state !== "minimized")
+                return;
+            if (this.#active.peek() !== id)
+                return;
+            this.#active.value = null;
+            if (this.#restoring)
+                return;
+            const next = [...this.#entries.peek()].reverse().find(entry => entry.window.open && entry.window.state !== "minimized");
+            if (next)
+                next.window.activate();
+        };
+        window.addEventListener("activate", activate);
+        window.addEventListener("close", leave);
+        window.addEventListener("statechange", leave);
+        this.#entries.value = [...this.#entries.peek(), { id, window }];
+        let registered = true;
+        const remove = () => {
+            if (!registered)
+                return;
+            registered = false;
+            window.removeEventListener("activate", activate);
+            window.removeEventListener("close", leave);
+            window.removeEventListener("statechange", leave);
+            window.deactivate();
+            this.#cleanup.delete(id);
+            this.#entries.value = this.#entries.peek().filter(entry => entry.id !== id);
+            if (this.#active.peek() === id) {
+                this.#active.value = null;
+                if (!this.#restoring)
+                    [...this.#entries.peek()].reverse().find(entry => entry.window.open && entry.window.state !== "minimized")?.window.activate();
+            }
+        };
+        this.#cleanup.set(id, remove);
+        return remove;
+    }
+    show(id, opener) {
+        if (document.querySelector("dialog:modal"))
+            return;
+        this.#find(id).show(opener);
+    }
+    /** Cycles visible windows; hosts choose a shortcut that suits their page. */
+    cycle(backwards = false) {
+        if (document.querySelector("dialog:modal"))
+            return;
+        const visible = this.#entries.peek().filter(entry => entry.window.open && entry.window.state !== "minimized");
+        // Registration order is not stable after activation; sort IDs for predictable cycling.
+        visible.sort((a, b) => a.id.localeCompare(b.id));
+        if (!visible.length)
+            return;
+        const current = visible.findIndex(entry => entry.id === this.#active.peek());
+        visible[(current + (backwards ? -1 : 1) + visible.length) % visible.length].window.activate();
+    }
+    snapshot() {
+        return { version: 1, windows: this.#entries.peek().map(entry => ({ id: entry.id, open: entry.window.open, placement: entry.window.placement() })), active: this.#active.peek() };
+    }
+    /** Applies placement to registered windows only; never creates content or closes dirty windows. */
+    restore(snapshot) {
+        if (snapshot?.version !== 1 || !Array.isArray(snapshot.windows))
+            throw new TypeError("Invalid workspace snapshot");
+        const known = snapshot.windows.filter(saved => this.#cleanup.has(saved.id));
+        const ids = new Set();
+        for (const saved of known) {
+            if (ids.has(saved.id) || typeof saved.open !== "boolean")
+                throw new TypeError("Invalid workspace entry");
+            ids.add(saved.id);
+            const p = saved.placement;
+            if (!p || !["normal", "maximized", "minimized"].includes(p.state) || (p.bounds && (![p.bounds.x, p.bounds.y, p.bounds.width, p.bounds.height].every(Number.isFinite) || p.bounds.width <= 0 || p.bounds.height <= 0)))
+                throw new TypeError("Invalid workspace placement");
+        }
+        const generation = ++this.#generation;
+        this.#restoring = true;
+        this.#active.value = null;
+        for (const entry of this.#entries.peek())
+            entry.window.deactivate();
+        try {
+            for (const saved of known) {
+                const window = this.#find(saved.id);
+                if (saved.open)
+                    window.show(null);
+                window.setPlacement(saved.placement);
+            }
+        }
+        finally {
+            this.#restoring = false;
+        }
+        requestAnimationFrame(() => {
+            if (generation !== this.#generation)
+                return;
+            for (const saved of known) {
+                const window = this.#entries.peek().find(entry => entry.id === saved.id)?.window;
+                if (!window)
+                    continue;
+                if (window.open && window.state !== "minimized") {
+                    window.deactivate();
+                    window.activate(false);
+                }
+            }
+            const active = this.#entries.peek().find(entry => entry.id === snapshot.active && entry.window.open && entry.window.state !== "minimized");
+            active?.window.activate();
+        });
+    }
+    dispose() {
+        this.#generation++;
+        this.#restoring = true;
+        for (const remove of [...this.#cleanup.values()])
+            remove();
+        this.#restoring = false;
+    }
+    #find(id) {
+        const entry = this.#entries.peek().find(entry => entry.id === id);
+        if (!entry)
+            throw new Error(`Unknown workspace window: ${id}`);
+        return entry.window;
+    }
+}

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@getaster/elements",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-preview.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles/*": "./styles/*"
+  },
+  "dependencies": {
+    "@getaster/data": "0.1.0-preview.0",
+    "@preact/signals-core": "1.14.4",
+    "lit-html": "3.3.3"
+  },
+  "bin": {
+    "aster-theme-check": "./bin/aster-theme-check.js"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GetAster/aster-ui.git",
+    "directory": "packages/elements"
+  },
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "NOTICE",
+    "README.md",
+    "styles",
+    "bin"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/**/*.js",
+    "./styles/*.css"
+  ]
+}