@polyxd/web 0.3.0

package/dist/components/tree.d.ts

@@ -0,0 +1,10 @@
+import { type Node } from "@polyxd/core";
+import { type VNode } from "../dom.ts";
+import type { Ctx } from "../renderer.ts";
+/**
+ * Tree: a hierarchy people expand, browse and pick from (WAI-ARIA APG tree view). The visible
+ * nodes are flattened into rows (core) so level, position and set size can be exposed, and a
+ * large tree renders only the rows near its viewport. Focus roves: one row is tabbable, arrows
+ * move between them.
+ */
+export declare function Tree(node: Node, ctx: Ctx): VNode;

package/dist/components/tree.js

@@ -0,0 +1,177 @@
+import { TYPEAHEAD_MS, VIRTUAL_LIMIT, asList, treeKey, treeRows, typeAheadTarget, visibleWindow } from "@polyxd/core";
+import { h } from "../dom.js";
+import { Icon } from "./avatar.js";
+/** Fallback row height (px) until the first row has been measured. */
+const FALLBACK_ROW_HEIGHT = 40;
+/**
+ * Tree: a hierarchy people expand, browse and pick from (WAI-ARIA APG tree view). The visible
+ * nodes are flattened into rows (core) so level, position and set size can be exposed, and a
+ * large tree renders only the rows near its viewport. Focus roves: one row is tabbable, arrows
+ * move between them.
+ */
+export function Tree(node, ctx) {
+    const b = ctx.b;
+    const r = ctx.r;
+    const captionId = ctx.id(node, "caption");
+    const selection = node.selection ?? "none";
+    const selectable = selection !== "none" && !!node.selected;
+    // Expanded state: host data when bound, else local with the first level open.
+    const boundExpanded = node.expanded ? asList(b.value(node.expanded)) : undefined;
+    const [localExpanded, setLocalExpanded] = ctx.state(node, "expanded", null);
+    const expandedSet = boundExpanded ? new Set(boundExpanded) : localExpanded;
+    const selected = selectable ? b.value(node.selected) : undefined;
+    const isSelected = (v) => (Array.isArray(selected) ? selected.includes(v) : selected !== undefined && selected === v);
+    const { rows, indexByKey, topValues } = treeRows(node, r.data, b.scope, expandedSet);
+    // Roving tabindex: focus is tracked by node pointer so it survives expand/collapse and data updates.
+    const [focusKey, setFocusKey] = ctx.state(node, "focus", null);
+    const focusIndex = (focusKey !== null ? indexByKey.get(focusKey) : undefined) ?? 0;
+    const [pending] = ctx.state(node, "pending", () => ({ index: null }));
+    // Virtualisation: only past VIRTUAL_LIMIT rows, when the list becomes its own scroll viewport.
+    const virtual = rows.length > VIRTUAL_LIMIT;
+    const [geometry, setGeometry] = ctx.state(node, "geometry", () => ({ rowHeight: FALLBACK_ROW_HEIGHT, viewportHeight: FALLBACK_ROW_HEIGHT * 12, scrollTop: 0 }));
+    const { start, end } = visibleWindow(rows.length, geometry.scrollTop, geometry.rowHeight, geometry.viewportHeight);
+    const listOf = () => r.root?.querySelector(`[data-pxd-id="${CSS.escape(node.id)}"] .pxd-tree-list`);
+    // Move focus to a row; when it is outside the rendered window, scroll so it gets rendered first.
+    const focusRow = (index) => {
+        if (!rows.length)
+            return;
+        const i = Math.max(0, Math.min(rows.length - 1, index));
+        setFocusKey(rows[i].key);
+        const el = listOf()?.querySelector(`[data-index="${i}"]`);
+        if (el)
+            return el.focus();
+        pending.index = i;
+        const vp = listOf()?.parentElement;
+        if (virtual && vp?.classList.contains("pxd-tree-viewport")) {
+            const top = Math.max(0, i * geometry.rowHeight - (geometry.viewportHeight - geometry.rowHeight) / 2);
+            vp.scrollTop = top;
+            setGeometry({ ...geometry, scrollTop: top });
+        }
+    };
+    ctx.after(() => {
+        if (pending.index === null)
+            return;
+        const el = listOf()?.querySelector(`[data-index="${pending.index}"]`);
+        if (el) {
+            pending.index = null;
+            el.focus();
+        }
+        if (virtual) {
+            const first = listOf()?.querySelector(".pxd-tree-item");
+            const vp = listOf()?.parentElement;
+            const rowHeight = first && first.offsetHeight > 0 ? first.offsetHeight : geometry.rowHeight;
+            const viewportHeight = vp?.clientHeight || geometry.viewportHeight;
+            if (rowHeight !== geometry.rowHeight || viewportHeight !== geometry.viewportHeight)
+                setGeometry({ ...geometry, rowHeight, viewportHeight });
+        }
+    });
+    const setExpanded = (values, open) => {
+        if (node.expanded) {
+            const cur = boundExpanded ?? [];
+            b.write(node.expanded, open ? [...cur, ...values.filter((v) => !cur.includes(v))] : cur.filter((v) => !values.includes(v)));
+            return;
+        }
+        const next = new Set(localExpanded ?? topValues);
+        for (const v of values)
+            open ? next.add(v) : next.delete(v);
+        setLocalExpanded(next);
+    };
+    const toggle = (row) => setExpanded([row.value], !row.expanded);
+    const select = (row) => {
+        if (!selectable)
+            return;
+        if (selection === "single")
+            return b.write(node.selected, row.value);
+        const cur = Array.isArray(selected) ? selected : [];
+        b.write(node.selected, cur.includes(row.value) ? cur.filter((x) => x !== row.value) : [...cur, row.value]);
+    };
+    // Activate: select where selectable, and dispatch the action with its context bound to this node.
+    const activate = (row) => {
+        select(row);
+        if (node.action)
+            r.dispatch(node.action, row.scope, node.id);
+    };
+    // Type-ahead: letters typed in quick succession jump to the next label starting with them.
+    const [typedState] = ctx.state(node, "typed", () => ({ buffer: "", at: 0 }));
+    const typeAhead = (char) => {
+        const now = Date.now();
+        typedState.buffer = now - typedState.at < TYPEAHEAD_MS ? typedState.buffer + char.toLowerCase() : char.toLowerCase();
+        typedState.at = now;
+        const j = typeAheadTarget(rows, focusIndex, typedState.buffer);
+        if (j >= 0)
+            focusRow(j);
+    };
+    const onKeyDown = (e) => {
+        const row = rows[focusIndex];
+        const move = treeKey(rows, focusIndex, e);
+        if (!row || !move)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        if ("focus" in move)
+            focusRow(move.focus);
+        else if ("toggle" in move)
+            toggle(row);
+        else if ("activate" in move)
+            activate(row);
+        else if ("select" in move)
+            select(row);
+        else if ("expandSiblings" in move)
+            setExpanded(rows.filter((x) => x.parent === row.parent && x.hasChildren).map((x) => x.value), true);
+        else if ("typeAhead" in move)
+            typeAhead(move.typeAhead);
+    };
+    const caption = b.text(node.label);
+    const listStyle = virtual ? { paddingTop: start * geometry.rowHeight, paddingBottom: (rows.length - end) * geometry.rowHeight } : undefined;
+    const list = h("ul", { role: "tree", class: "pxd-tree-list", "aria-labelledby": captionId, "aria-multiselectable": selection === "multiple" ? true : undefined, style: listStyle, onKeydown: onKeyDown }, ...rows.slice(start, end).map((row, offset) => {
+        const i = start + offset;
+        const rowSelected = selectable ? isSelected(row.value) : undefined;
+        return h("li", {
+            key: row.key,
+            role: "treeitem",
+            class: `pxd-tree-item${rowSelected ? " pxd-tree-item-selected" : ""}`,
+            style: { "--polyxd-tree-depth": row.level - 1 },
+            "data-index": i,
+            tabindex: i === focusIndex ? "0" : "-1",
+            "aria-level": row.level,
+            "aria-setsize": row.setsize,
+            "aria-posinset": row.posinset,
+            "aria-expanded": row.hasChildren ? row.expanded : undefined,
+            "aria-selected": rowSelected,
+            onFocus: (e) => {
+                if (e.target === e.currentTarget)
+                    setFocusKey(row.key);
+            },
+            onClick: (e) => {
+                e.stopPropagation();
+                focusRow(i);
+                if (selectable)
+                    select(row);
+                else if (row.hasChildren)
+                    toggle(row);
+            },
+            onDblclick: (e) => {
+                e.stopPropagation();
+                if (node.action)
+                    r.dispatch(node.action, row.scope, node.id);
+                else if (row.hasChildren)
+                    toggle(row);
+            },
+        }, h("div", { class: "pxd-tree-row" }, row.hasChildren
+            ? h("button", {
+                type: "button",
+                class: `pxd-tree-expander${row.expanded ? " pxd-tree-expander-open" : ""}`,
+                tabindex: "-1",
+                "aria-hidden": "true",
+                onClick: (e) => {
+                    e.stopPropagation();
+                    focusRow(i);
+                    toggle(row);
+                },
+                onDblclick: (e) => e.stopPropagation(),
+            }, Icon("chevronRight", 16))
+            : h("span", { class: "pxd-tree-expander pxd-tree-expander-leaf", "aria-hidden": "true" }), h("span", { class: "pxd-tree-text" }, row.label), row.detail !== undefined && h("span", { class: "pxd-tree-detail" }, row.detail)));
+    }));
+    return h("div", { class: "pxd-tree", ...ctx.a11y(node) }, h("div", { class: "pxd-tree-caption", id: captionId }, caption), virtual ? h("div", { class: "pxd-tree-viewport", onScroll: (e) => setGeometry({ ...geometry, scrollTop: e.currentTarget.scrollTop }) }, list) : list);
+}
+//# sourceMappingURL=tree.js.map

package/dist/components/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/components/tree.ts"],"names":[],"mappings":"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"}

package/dist/dom.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A small virtual DOM: components describe elements, the patcher keeps the real ones in step.
+ * It exists so a re-render after every keystroke leaves the element someone is typing in alone
+ * (identity, focus and caret survive), the way a React tree does, without a framework.
+ */
+export type Props = Record<string, unknown>;
+export interface VNode {
+    tag: string;
+    props: Props;
+    children: VChild[];
+    key?: string | number;
+}
+/** A host element the renderer adopts as it is (a Frame's outlet, a host component's output). */
+export interface Adopted {
+    dom: Element;
+    key?: string | number;
+}
+export type VChild = VNode | Adopted | string | number | null | undefined | false | VChild[];
+export declare function h(tag: string, props: Props | null, ...children: VChild[]): VNode;
+/** A real element placed in the tree as it is; its inside is the host's business. */
+export declare const adopt: (dom: Element, key?: string | number) => Adopted;
+/** Renders children into a container, patching what is already there. */
+export declare function render(container: Element, children: VChild[]): void;
+/** Takes everything down, calling refs so observers and dialogs are released. */
+export declare function unmount(container: Element): void;

package/dist/dom.js

@@ -0,0 +1,211 @@
+/**
+ * A small virtual DOM: components describe elements, the patcher keeps the real ones in step.
+ * It exists so a re-render after every keystroke leaves the element someone is typing in alone
+ * (identity, focus and caret survive), the way a React tree does, without a framework.
+ */
+const SVG_NS = "http://www.w3.org/2000/svg";
+const SVG_TAGS = new Set(["svg", "path", "circle", "rect", "line", "polyline", "polygon", "g", "text"]);
+/** Set as properties, so a controlled input shows the value the document holds. */
+const PROPERTIES = new Set(["value", "checked", "selected", "indeterminate", "textContent"]);
+/** Set as attributes even though the element has a property of that name (form controls read these from the markup). */
+const ATTRIBUTES = new Set(["list", "form", "type", "autocomplete", "for", "role", "tabindex", "lang", "dir", "translate", "spellcheck", "autocapitalize", "autocorrect", "inputmode", "enterkeyhint", "colspan", "rowspan", "scope", "title", "width", "height", "size", "min", "max", "step", "pattern", "placeholder", "maxlength", "minlength", "accept", "alt", "src", "href", "rel", "poster", "controls", "name", "contenteditable", "draggable", "autofocus"]);
+export function h(tag, props, ...children) {
+    const p = props ?? {};
+    return { tag, props: p, children, key: p.key };
+}
+/** A real element placed in the tree as it is; its inside is the host's business. */
+export const adopt = (dom, key) => ({ dom, key });
+const isAdopted = (v) => !!v && typeof v === "object" && "dom" in v;
+function flatten(children, out = []) {
+    for (const c of children) {
+        if (c === null || c === undefined || c === false)
+            continue;
+        if (Array.isArray(c))
+            flatten(c, out);
+        else if (typeof c === "number")
+            out.push(String(c));
+        else
+            out.push(c);
+    }
+    return out;
+}
+function setStyle(el, value, previous) {
+    if (typeof value === "string") {
+        el.style.cssText = value;
+        return;
+    }
+    const next = (value ?? {});
+    const prev = (typeof previous === "object" && previous) || {};
+    for (const k of Object.keys(prev))
+        if (!(k in next))
+            k.startsWith("--") ? el.style.removeProperty(k) : (el.style[k] = "");
+    for (const [k, v] of Object.entries(next)) {
+        if (v === undefined || v === null)
+            k.startsWith("--") ? el.style.removeProperty(k) : (el.style[k] = "");
+        else if (k.startsWith("--"))
+            el.style.setProperty(k, String(v));
+        else
+            el.style[k] = typeof v === "number" && !/^(opacity|zIndex|flex|lineHeight|fontWeight|order)$/.test(k) ? `${v}px` : String(v);
+    }
+}
+function setProp(el, name, value, previous, svg) {
+    if (name === "key" || name === "children")
+        return;
+    if (name === "ref") {
+        el.__ref = value;
+        return;
+    }
+    if (name.startsWith("on") && (typeof value === "function" || value === undefined)) {
+        const event = name.slice(2).toLowerCase();
+        const on = (el.__on ??= {});
+        if (value && !on[event])
+            el.addEventListener(event, (e) => el.__on?.[event]?.(e));
+        if (value)
+            on[event] = value;
+        else
+            delete on[event];
+        return;
+    }
+    if (name === "style")
+        return setStyle(el, value, previous);
+    if (name === "class" || name === "className") {
+        const v = value === undefined || value === null || value === false ? "" : String(value);
+        if (svg)
+            v ? el.setAttribute("class", v) : el.removeAttribute("class");
+        else if (el.className !== v)
+            el.className = v;
+        return;
+    }
+    const lower = name.toLowerCase();
+    if (!svg && PROPERTIES.has(name)) {
+        const v = value === undefined || value === null ? (typeof el[name] === "boolean" ? false : "") : value;
+        if (el[name] !== v)
+            el[name] = v;
+        return;
+    }
+    if (!svg && !name.includes("-") && !ATTRIBUTES.has(lower) && name in el && typeof el[name] !== "function" && typeof el[name] === "boolean") {
+        // disabled, hidden, required, multiple, open, readOnly…: the property mirrors the attribute.
+        el[name] = Boolean(value);
+        return;
+    }
+    // An ARIA state that is false is still a state ("aria-checked=false"); any other false attribute is absent.
+    if (value === undefined || value === null || (value === false && !name.startsWith("aria-")))
+        el.removeAttribute(lower === "classname" ? "class" : name);
+    else
+        el.setAttribute(name, value === true ? (name.startsWith("aria-") || name === "draggable" || name === "contenteditable" ? "true" : "") : String(value));
+}
+function create(v, svg) {
+    if (typeof v === "string") {
+        const text = document.createTextNode(v);
+        text.__vnode = v;
+        return text;
+    }
+    if (isAdopted(v)) {
+        v.dom.__vnode = v;
+        return v.dom;
+    }
+    const isSvg = svg || SVG_TAGS.has(v.tag);
+    const el = (isSvg ? document.createElementNS(SVG_NS, v.tag) : document.createElement(v.tag));
+    for (const [k, val] of Object.entries(v.props))
+        setProp(el, k, val, undefined, isSvg);
+    for (const c of flatten(v.children))
+        el.appendChild(create(c, isSvg));
+    el.__vnode = v;
+    return el;
+}
+/** Called once the element is in the document, so a ref may measure it or open it modally. */
+function mounted(node) {
+    const el = node;
+    if (el.nodeType !== 1)
+        return;
+    el.__ref?.(el);
+    for (const c of Array.from(el.childNodes))
+        if (!c.__vnode || !isAdopted(c.__vnode))
+            mounted(c);
+}
+function unmounted(node) {
+    const el = node;
+    if (el.nodeType !== 1)
+        return;
+    if (isAdopted(el.__vnode))
+        return;
+    el.__ref?.(null);
+    for (const c of Array.from(el.childNodes))
+        unmounted(c);
+}
+const keyOf = (v) => (v && typeof v === "object" ? v.key : undefined);
+const sameKind = (a, b) => a !== undefined && typeof a === typeof b && (typeof a === "string" || (isAdopted(a) ? isAdopted(b) && a.dom === b.dom : !isAdopted(b) && a.tag === b.tag && keyOf(a) === keyOf(b)));
+/** Brings an existing element in line with a new description of the same kind. */
+function update(node, next, svg) {
+    const el = node;
+    const prev = el.__vnode;
+    if (typeof next === "string") {
+        if (node.textContent !== next)
+            node.textContent = next;
+        el.__vnode = next;
+        return;
+    }
+    if (isAdopted(next))
+        return;
+    const previous = prev?.props ?? {};
+    const isSvg = svg || SVG_TAGS.has(next.tag);
+    for (const k of Object.keys(previous))
+        if (!(k in next.props))
+            setProp(el, k, undefined, previous[k], isSvg);
+    for (const [k, val] of Object.entries(next.props))
+        if (k === "style" || k === "ref" || previous[k] !== val)
+            setProp(el, k, val, previous[k], isSvg);
+    el.__vnode = next;
+    reconcile(el, flatten(next.children), isSvg);
+}
+/** Keyed reconciliation of a parent's children: matched by key, else by position and kind. */
+function reconcile(parent, next, svg) {
+    const old = Array.from(parent.childNodes);
+    const byKey = new Map();
+    for (const o of old) {
+        const k = keyOf(o.__vnode);
+        if (k !== undefined)
+            byKey.set(k, o);
+    }
+    const used = new Set();
+    let cursor = old[0] ?? null;
+    for (const n of next) {
+        const k = keyOf(n);
+        let match;
+        if (k !== undefined)
+            match = byKey.get(k);
+        else if (cursor && !used.has(cursor) && keyOf(cursor.__vnode) === undefined && sameKind(cursor.__vnode, n))
+            match = cursor;
+        if (match && sameKind(match.__vnode, n)) {
+            used.add(match);
+            if (match !== cursor)
+                parent.insertBefore(match, cursor);
+            else
+                cursor = cursor.nextSibling ?? null;
+            update(match, n, svg);
+        }
+        else {
+            const made = create(n, svg);
+            parent.insertBefore(made, cursor);
+            mounted(made);
+        }
+    }
+    for (const o of old) {
+        if (used.has(o))
+            continue;
+        unmounted(o);
+        o.remove();
+    }
+}
+/** Renders children into a container, patching what is already there. */
+export function render(container, children) {
+    reconcile(container, flatten(children), false);
+}
+/** Takes everything down, calling refs so observers and dialogs are released. */
+export function unmount(container) {
+    for (const c of Array.from(container.childNodes)) {
+        unmounted(c);
+        c.remove();
+    }
+}
+//# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"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"}

package/dist/elements.d.ts

@@ -0,0 +1,87 @@
+/**
+ * <polyxd-surface> and <polyxd-frame>: custom elements around the renderer. No shadow DOM, so the
+ * stylesheet and the themes apply as they are, scoped by data-pxd-theme on the surface. The
+ * document and data are properties; the string settings are also attributes; what the surface
+ * sends is dispatched as DOM events (polyxd-action, polyxd-datachange, polyxd-dismiss) as well as
+ * the on* callback properties.
+ */
+import type { ActionEvent, Data, UIDocument } from "@polyxd/core";
+import { type Density, type HostComponent, type Mode, type SurfaceProps } from "./renderer.ts";
+import type { ComponentRenderer } from "./components/index.ts";
+export interface PolyxdEvents {
+    "polyxd-action": CustomEvent<ActionEvent>;
+    "polyxd-datachange": CustomEvent<Data>;
+    "polyxd-dismiss": CustomEvent<void>;
+}
+/** The properties shared by both elements. */
+export declare class PolyxdSurfaceElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): ("density" | "disclosure" | "locale" | "mode" | "theme")[];
+    onAction: ((event: ActionEvent) => void) | null;
+    onDataChange: ((data: Data) => void) | null;
+    onDismiss: (() => void) | null;
+    get document(): UIDocument | null;
+    set document(doc: UIDocument | null);
+    get data(): Data | undefined;
+    set data(data: Data | undefined);
+    get derive(): SurfaceProps["derive"];
+    set derive(fn: SurfaceProps["derive"]);
+    get resolveMedia(): SurfaceProps["resolveMedia"];
+    set resolveMedia(fn: SurfaceProps["resolveMedia"]);
+    get components(): Record<string, ComponentRenderer | HostComponent> | undefined;
+    set components(map: Record<string, ComponentRenderer | HostComponent> | undefined);
+    get theme(): string | undefined;
+    set theme(v: string | undefined);
+    get mode(): Mode | undefined;
+    set mode(v: Mode | undefined);
+    get density(): Density | undefined;
+    set density(v: Density | undefined);
+    get locale(): string | undefined;
+    set locale(v: string | undefined);
+    get disclosure(): "progressive" | "show-everything" | undefined;
+    set disclosure(v: "progressive" | "show-everything" | undefined);
+    /** The current data, as the surface holds it (inputs write here). */
+    get surfaceData(): Data | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** What the renderer is given: subclasses add the frame's props. */
+    protected props(): SurfaceProps | null;
+    /** Redraws now rather than on the next tick (tests and hosts that measure right away). */
+    flush(): void;
+}
+/**
+ * Renders a shell document (surface.kind "shell": a Frame with an Outlet) around the host's
+ * current screen: the element's light-DOM children at connection time, or the `outlet` property.
+ * `current` marks the navigation item and titles the page; `loading` shows a skeleton.
+ */
+export declare class PolyxdFrameElement extends PolyxdSurfaceElement {
+    #private;
+    get outlet(): Element | null;
+    set outlet(el: Element | null);
+    get current(): {
+        key?: string;
+        title?: string;
+    } | undefined;
+    set current(v: {
+        key?: string;
+        title?: string;
+    } | undefined);
+    get loading(): boolean;
+    set loading(v: boolean);
+    connectedCallback(): void;
+    private flushSoon;
+    protected props(): SurfaceProps | null;
+}
+/** Registers both elements once; safe to call again. */
+export declare function defineElements(): void;
+export interface Mounted {
+    update: (props: Partial<SurfaceProps>) => void;
+    unmount: () => void;
+    readonly data: Data;
+}
+/**
+ * Renders a document into any element without the custom elements (hosts whose DOM is owned by
+ * something else). Returns a handle to update the props or take it down.
+ */
+export declare function mount(el: HTMLElement, props: SurfaceProps): Mounted;