@polyxd/web 0.3.0

package/dist/renderer.js

@@ -0,0 +1,244 @@
+/**
+ * The renderer: one document walked from the root into a virtual tree, patched into a host
+ * element, redrawn whenever the surface's data or a component's own state changes. Component
+ * functions take the document node and a context (scope, heading level, the enclosing Steps or
+ * Frame) and return elements, the way the React components do with hooks and providers.
+ */
+import { a11yAttributes, absolute, createSurface, mainNavigation, resolve, resolveContext, resolveFormat, formatValue, ROOT_SCOPE, } from "@polyxd/core";
+import { adopt, h, render as patch, unmount } from "./dom.js";
+import { registry } from "./components/index.js";
+import { Avatar } from "./components/avatar.js";
+export class Renderer {
+    surface;
+    props;
+    host;
+    /** The surface's outer element once drawn: shortcuts fire only while focus is inside it. */
+    root = null;
+    portalEl = null;
+    components;
+    states = new Map();
+    effects = [];
+    portals = [];
+    /** Modal dialogs open in this draw: while one is, the surface's other regions are hidden from assistive technology (as Radix hides them). */
+    modals = 0;
+    scheduled = false;
+    unsubscribe;
+    observers = new Map();
+    /** Set while patching, so a state change made by an effect schedules another draw instead of nesting. */
+    drawing = false;
+    /** Set by the surface once the first draw is done, so shortcut listeners can be attached once. */
+    disposers = [];
+    constructor(host, props) {
+        this.host = host;
+        this.props = props;
+        this.components = { ...registry, ...(props.components ?? {}) };
+        this.surface = this.makeSurface(props);
+        this.unsubscribe = this.surface.subscribe(() => this.schedule());
+    }
+    makeSurface(props) {
+        return createSurface(props.document, {
+            data: props.data,
+            locale: props.locale ?? "en-GB",
+            derive: props.derive,
+            onAction: (e) => this.props.onAction?.(e),
+            onDataChange: (d) => this.props.onDataChange?.(d),
+            onDismiss: () => this.props.onDismiss?.(),
+        });
+    }
+    get locale() {
+        return this.surface.locale;
+    }
+    get doc() {
+        return this.surface.document;
+    }
+    get data() {
+        return this.surface.data;
+    }
+    get byId() {
+        return this.surface.byId;
+    }
+    get disclosure() {
+        return this.props.disclosure ?? "progressive";
+    }
+    /** New props: a new document remounts; a shell adopts the host's new data; anything else redraws. */
+    update(props) {
+        const previous = this.props;
+        this.props = props;
+        this.components = { ...registry, ...(props.components ?? {}) };
+        if (props.document !== previous.document || (props.locale ?? "en-GB") !== previous.locale) {
+            this.unsubscribe();
+            this.states.clear();
+            this.surface = this.makeSurface(props);
+            this.unsubscribe = this.surface.subscribe(() => this.schedule());
+        }
+        else if (props.data && props.data !== previous.data && props.document.surface.kind === "shell") {
+            // A shell lives as long as the product does, and its host data moves under it.
+            this.surface.replaceData(props.data);
+            return;
+        }
+        this.schedule();
+    }
+    dispose() {
+        this.unsubscribe();
+        for (const d of this.disposers)
+            d();
+        for (const o of this.observers.values())
+            o.disconnect();
+        unmount(this.host);
+    }
+    onDispose(fn) {
+        this.disposers.push(fn);
+    }
+    schedule() {
+        if (this.scheduled)
+            return;
+        this.scheduled = true;
+        queueMicrotask(() => {
+            this.scheduled = false;
+            this.draw();
+        });
+    }
+    /** Watches an element's width; the callback runs with each new width and may set state. */
+    observeWidth(el, key, fn) {
+        if (!el)
+            return;
+        if (this.observers.has(el))
+            return;
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => fn(el.getBoundingClientRect().width);
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        this.observers.set(el, ro);
+        void key;
+        measure();
+    }
+    unobserve(el) {
+        this.observers.get(el)?.disconnect();
+        this.observers.delete(el);
+    }
+    bindings(scope) {
+        const s = this.surface;
+        return {
+            scope,
+            value: (v) => resolve(v, s.data, scope),
+            text: (v, format) => {
+                const r = resolve(v, s.data, scope);
+                return format ? formatValue(r, resolveFormat(format, s.data, scope), s.locale) : r === undefined || r === null ? "" : String(r);
+            },
+            pointer: (v) => absolute(v.path, scope),
+            write: (v, value) => s.setValue(absolute(v.path, scope), value),
+            context: (c) => resolveContext(c, s.data, scope),
+        };
+    }
+    dispatch(action, scope, source) {
+        this.surface.dispatch(action, scope, source);
+    }
+    ctx(base) {
+        const r = this;
+        const key = (node, name) => `${base.scope.pointer}#${node.id}:${name}`;
+        const ctx = {
+            r,
+            scope: base.scope,
+            heading: base.heading,
+            steps: base.steps,
+            frame: base.frame,
+            b: r.bindings(base.scope),
+            render: (id, scope) => r.renderNode(id, scope ? ctx.with({ scope }) : ctx),
+            a11y: (node) => a11yAttributes(node, (v) => {
+                const x = resolve(v, r.data, base.scope);
+                return x === undefined ? undefined : String(x);
+            }),
+            id: (node, suffix = "") => `pxd-${(base.scope.pointer + "-" + node.id + (suffix ? "-" + suffix : "")).replace(/[^A-Za-z0-9_-]+/g, "_")}`,
+            state: (node, name, initial) => {
+                const k = key(node, name);
+                if (!r.states.has(k))
+                    r.states.set(k, typeof initial === "function" ? initial() : initial);
+                const set = (next) => {
+                    const cur = r.states.get(k);
+                    const value = typeof next === "function" ? next(cur) : next;
+                    if (Object.is(value, cur))
+                        return;
+                    r.states.set(k, value);
+                    r.schedule();
+                };
+                return [r.states.get(k), set];
+            },
+            after: (fn) => r.effects.push(fn),
+            portal: (child) => r.portals.push(child),
+            with: (patchCtx) => r.ctx({ ...base, ...patchCtx }),
+        };
+        return ctx;
+    }
+    /** Renders a component by id in a context, honouring `visible`; unknown components say so. */
+    renderNode(id, ctx) {
+        const node = this.byId.get(id);
+        if (!node)
+            return null;
+        if (node.visible !== undefined && resolve(node.visible, this.data, ctx.scope) === false)
+            return null;
+        const Component = this.components[node.component];
+        if (!Component)
+            return h("div", { class: "pxd-unknown", role: "note" }, `Unsupported component “${node.component}”`);
+        const out = Component(node, ctx);
+        return out instanceof Element ? adopt(out, node.id) : out;
+    }
+    draw() {
+        if (this.drawing)
+            return this.schedule();
+        this.drawing = true;
+        this.effects = [];
+        this.portals = [];
+        this.modals = 0;
+        try {
+            const tree = this.surfaceTree();
+            patch(this.host, [tree]);
+            this.root = this.host.querySelector(":scope > .pxd-surface");
+            this.portalEl = this.root?.querySelector(":scope > .pxd-portal") ?? null;
+            const effects = this.effects;
+            this.effects = [];
+            for (const e of effects)
+                e();
+        }
+        finally {
+            this.drawing = false;
+        }
+    }
+    surfaceTree() {
+        const doc = this.doc;
+        const p = this.props;
+        const ctx = this.ctx({ scope: ROOT_SCOPE, heading: 2 });
+        const rootIsDialog = this.byId.get(doc.root)?.component === "Confirm";
+        // A shell has no surface header and places its own navigation: the Frame draws the regions.
+        const shell = doc.surface.kind === "shell";
+        const nav = mainNavigation(doc);
+        const main = shell ? ctx.render(doc.root) : h("div", { class: "pxd-surface-main" }, !rootIsDialog && this.header(ctx), ctx.render(doc.root));
+        const navTree = nav ? ctx.render(nav.id) : null;
+        // Overlays render after the tree, collected while it was built, into the portal inside the surface.
+        const portal = h("div", { class: "pxd-portal" }, ...this.portals);
+        // A modal in the portal hides the rest of the surface from assistive technology while it is open.
+        const hidden = this.modals > 0 ? "true" : undefined;
+        for (const region of [navTree, main])
+            if (region && typeof region === "object" && "props" in region)
+                region.props["aria-hidden"] = hidden;
+        return h("div", {
+            class: ["pxd-surface", shell ? "pxd-surface-shell" : null, doc.surface.presentation === "panel" ? "pxd-surface-panel" : null, nav ? "pxd-surface-with-nav" : null, p.className].filter(Boolean).join(" "),
+            "data-pxd-theme": p.theme,
+            "data-pxd-mode": p.mode,
+            "data-pxd-density": p.density,
+            "data-pxd-surface": doc.surface.id,
+            lang: this.locale,
+        }, navTree, main, portal);
+    }
+    /** Title, and on a record page: where it sits, what state it's in, and what you can do to it. */
+    header(ctx) {
+        const { title, subtitle, breadcrumbs, badge, avatar, actions } = this.doc.surface;
+        const text = (v) => String(resolve(v, this.data, ROOT_SCOPE) ?? "");
+        const plain = !subtitle && !breadcrumbs && !badge && !avatar && !actions;
+        if (plain)
+            return h("h1", { class: "pxd-surface-title" }, title);
+        return h("header", { class: "pxd-page-header" }, breadcrumbs &&
+            h("nav", { class: "pxd-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", null, breadcrumbs.map((c, i) => h("li", { key: i }, c.action ? h("button", { type: "button", class: "pxd-link", onClick: () => this.dispatch(c.action, ROOT_SCOPE, this.doc.surface.id) }, text(c.label)) : text(c.label))))), h("div", { class: "pxd-page-header-main" }, avatar !== undefined && Avatar(ctx, { value: text(avatar), name: title, size: 48 }), h("div", { class: "pxd-page-header-text" }, h("h1", { class: "pxd-surface-title" }, title, badge && h("span", { class: `pxd-badge pxd-tone-${badge.tone ?? "neutral"}` }, text(badge.text))), subtitle !== undefined && h("p", { class: "pxd-surface-subtitle" }, text(subtitle))), actions && h("div", { class: "pxd-page-header-actions" }, ctx.render(actions))));
+    }
+}
+//# sourceMappingURL=renderer.js.map

package/dist/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EACL,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,GAEzH,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,IAAI,KAAK,EAAE,OAAO,EAA2B,MAAM,UAAU,CAAC;AACvF,OAAO,EAAE,QAAQ,EAA0B,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AA+EhD,MAAM,OAAO,QAAQ;IACnB,OAAO,CAAU;IACjB,KAAK,CAAe;IACpB,IAAI,CAAc;IAClB,4FAA4F;IAC5F,IAAI,GAAuB,IAAI,CAAC;IAChC,QAAQ,GAAuB,IAAI,CAAC;IACpC,UAAU,CAAoD;IACtD,MAAM,GAAG,IAAI,GAAG,EAAmB,CAAC;IACpC,OAAO,GAAmB,EAAE,CAAC;IAC7B,OAAO,GAAa,EAAE,CAAC;IAC/B,6IAA6I;IAC7I,MAAM,GAAG,CAAC,CAAC;IACH,SAAS,GAAG,KAAK,CAAC;IAClB,WAAW,CAAa;IACxB,SAAS,GAAG,IAAI,GAAG,EAA2B,CAAC;IACvD,yGAAyG;IACjG,OAAO,GAAG,KAAK,CAAC;IACxB,kGAAkG;IAC1F,SAAS,GAAmB,EAAE,CAAC;IAEvC,YAAY,IAAiB,EAAE,KAAmB;QAChD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACnE,CAAC;IAEO,WAAW,CAAC,KAAmB;QACrC,OAAO,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE;YACnC,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,OAAO;YAC/B,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;YACzC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;YACjD,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE;SAC1C,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IAC7B,CAAC;IACD,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;IAC/B,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;IAC3B,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;IAC3B,CAAC;IACD,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,aAAa,CAAC;IAChD,CAAC;IAED,qGAAqG;IACrG,MAAM,CAAC,KAAmB;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,QAAQ,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,CAAC;QAC/D,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC,MAAM,EAAE,CAAC;YAC1F,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnE,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACjG,+EAA+E;YAC/E,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACrC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS;YAAE,CAAC,EAAE,CAAC;QACpC,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YAAE,CAAC,CAAC,UAAU,EAAE,CAAC;QACxD,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC;IAED,SAAS,CAAC,EAAc;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2FAA2F;IAC3F,YAAY,CAAC,EAAkB,EAAE,GAAW,EAAE,EAA2B;QACvE,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;YAAE,OAAO;QACnC,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAClD,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QAC3D,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;QACvC,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3B,KAAK,GAAG,CAAC;QACT,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,SAAS,CAAC,EAAW;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC;QACrC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC;IAED,QAAQ,CAAC,KAAY;QACnB,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;QACvB,OAAO;YACL,KAAK;YACL,KAAK,EAAE,CAAK,CAAU,EAAK,EAAE,CAAC,OAAO,CAAI,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC;YAC1D,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;gBAClB,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACpC,OAAO,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAClI,CAAC;YACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC;YACvC,KAAK,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC;YAC/D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC;SACjD,CAAC;IACJ,CAAC;IAED,QAAQ,CAAC,MAA0B,EAAE,KAAY,EAAE,MAAc;QAC/D,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAC/C,CAAC;IAED,GAAG,CAAC,IAAwF;QAC1F,MAAM,CAAC,GAAG,IAAI,CAAC;QACf,MAAM,GAAG,GAAG,CAAC,IAAU,EAAE,IAAY,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;QACrF,MAAM,GAAG,GAAQ;YACf,CAAC;YACD,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB,MAAM,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YAC1E,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE;gBACzC,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,OAAO,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACjD,CAAC,CAAC;YACF,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,GAAG,CAAC,EAAE;YACxI,KAAK,EAAE,CAAK,IAAU,EAAE,IAAY,EAAE,OAAsB,EAAE,EAAE;gBAC9D,MAAM,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBAC1B,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;oBAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAE,OAAmB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;gBACxG,MAAM,GAAG,GAAG,CAAC,IAAyB,EAAE,EAAE;oBACxC,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,CAAC;oBACjC,MAAM,KAAK,GAAG,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAE,IAAsB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;oBAC/E,IAAI,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC;wBAAE,OAAO;oBAClC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;oBACvB,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACf,CAAC,CAAC;gBACF,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,GAAG,CAAC,CAAC;YACrC,CAAC;YACD,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACjC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;YACxC,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,EAAE,CAAC;SACpD,CAAC;QACF,OAAO,GAAG,CAAC;IACb,CAAC;IAED,8FAA8F;IAC9F,UAAU,CAAC,EAAU,EAAE,GAAQ;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QACvB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,KAAK;YAAE,OAAO,IAAI,CAAC;QACrG,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAkC,CAAC;QACnF,IAAI,CAAC,SAAS;YAAE,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,0BAA0B,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACrH,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QACjC,OAAO,GAAG,YAAY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5D,CAAC;IAED,IAAI;QACF,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;QACzC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAChC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAc,uBAAuB,CAAC,CAAC;YAC1E,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,aAAa,CAAc,sBAAsB,CAAC,IAAI,IAAI,CAAC;YACtF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClB,KAAK,MAAM,CAAC,IAAI,OAAO;gBAAE,CAAC,EAAE,CAAC;QAC/B,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACrB,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS,KAAK,SAAS,CAAC;QACtE,4FAA4F;QAC5F,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC;QAC3C,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7I,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAChD,oGAAoG;QACpG,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAClE,kGAAkG;QAClG,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QACpD,KAAK,MAAM,MAAM,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;YAAE,IAAI,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAO,IAAI,MAAM;gBAAE,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC;QAC1I,OAAO,CAAC,CACN,KAAK,EACL;YACE,KAAK,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YACzM,gBAAgB,EAAE,CAAC,CAAC,KAAK;YACzB,eAAe,EAAE,CAAC,CAAC,IAAI;YACvB,kBAAkB,EAAE,CAAC,CAAC,OAAO;YAC7B,kBAAkB,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,EAAE,IAAI,CAAC,MAAM;SAClB,EACD,OAAO,EACP,IAAI,EACJ,MAAM,CACP,CAAC;IACJ,CAAC;IAED,iGAAiG;IACzF,MAAM,CAAC,GAAQ;QACrB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;QAClF,MAAM,IAAI,GAAG,CAAC,CAAU,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7E,MAAM,KAAK,GAAG,CAAC,QAAQ,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC;QACzE,IAAI,KAAK;YAAE,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,KAAK,CAAC,CAAC;QACjE,OAAO,CAAC,CACN,QAAQ,EACR,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAC5B,WAAW;YACT,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,EACxD,CAAC,CACC,IAAI,EACJ,IAAI,EACJ,WAAW,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,CAAS,EAAE,EAAE,CACpC,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAC3L,CACF,CACF,EACH,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,sBAAsB,EAAE,EACjC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EACnF,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,sBAAsB,EAAE,EACjC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAsB,KAAK,CAAC,IAAI,IAAI,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAChJ,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CACpF,EACD,OAAO,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,EAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAC/E,CACF,CAAC;IACJ,CAAC;CACF"}

package/dist/skeleton.d.ts

@@ -0,0 +1,14 @@
+import { type SkeletonShape } from "@polyxd/core";
+import { type VNode } from "./dom.ts";
+export interface SkeletonProps {
+    title?: string;
+    pattern?: string;
+    shape?: SkeletonShape;
+    theme?: string;
+    mode?: "light" | "dark";
+    density?: "compact" | "comfortable" | "spacious";
+    locale?: string;
+    className?: string;
+}
+/** The loading state for a surface that has not arrived yet: the shape it will take, shimmering. */
+export declare function Skeleton({ title, pattern, shape, theme, mode, density, locale, className }: SkeletonProps): VNode;

package/dist/skeleton.js

@@ -0,0 +1,13 @@
+import { SKELETON_GROUP_CLASS, SKELETON_SHAPES, skeletonShape, skeletonStatus } from "@polyxd/core";
+import { h } from "./dom.js";
+function Part(part) {
+    if ("block" in part)
+        return h("span", { class: `pxd-skeleton-block pxd-skeleton-${part.block}${part.size ? ` pxd-skeleton-${part.size}` : ""}` });
+    return h("div", { class: SKELETON_GROUP_CLASS[part.group] }, ...part.parts.map(Part));
+}
+/** The loading state for a surface that has not arrived yet: the shape it will take, shimmering. */
+export function Skeleton({ title, pattern, shape, theme, mode, density, locale = "en-GB", className }) {
+    const chosen = skeletonShape(pattern, shape);
+    return h("div", { class: ["pxd-surface", "pxd-skeleton", `pxd-skeleton-${chosen}`, className].filter(Boolean).join(" "), "data-pxd-theme": theme, "data-pxd-mode": mode, "data-pxd-density": density, lang: locale, role: "status", "aria-busy": "true" }, h("span", { class: "pxd-sr-only" }, skeletonStatus(title)), h("div", { class: "pxd-skeleton-body", "aria-hidden": "true" }, Part({ block: "title", size: chosen === "dialog" ? "short" : "medium" }), ...SKELETON_SHAPES[chosen].map(Part)));
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../src/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAyC,MAAM,cAAc,CAAC;AAC3I,OAAO,EAAE,CAAC,EAAc,MAAM,UAAU,CAAC;AAazC,SAAS,IAAI,CAAC,IAAkB;IAC9B,IAAI,OAAO,IAAI,IAAI;QAAE,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,mCAAmC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAClJ,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;AACxF,CAAC;AAED,oGAAoG;AACpG,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,SAAS,EAAiB;IAClH,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC7C,OAAO,CAAC,CACN,KAAK,EACL,EAAE,KAAK,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,MAAM,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,gBAAgB,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,EACzO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,EAC1D,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAChL,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@polyxd/web",
+  "version": "0.3.0",
+  "description": "Web Components renderer for Polyxd UI documents: <polyxd-surface> and <polyxd-frame>, no framework, no shadow DOM, the same DOM and ARIA as @polyxd/react",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css",
+    "./themes/*": "./themes/*",
+    "./preview/*": "./preview/*",
+    "./adapters/*": "./adapters/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "styles.css",
+    "themes",
+    "preview",
+    "adapters",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "scripts": {
+    "build": "tsc -b && node scripts/build-preview.ts",
+    "build:preview": "node scripts/build-preview.ts",
+    "test": "tsc -b && node --test \"test/**/*.test.ts\""
+  },
+  "dependencies": {
+    "@polyxd/core": "^0.3.0"
+  },
+  "devDependencies": {
+    "@polyxd/spec": "^0.3.0",
+    "esbuild": "^0.28.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/visualfart/polyxd.git",
+    "directory": "packages/web"
+  },
+  "homepage": "https://polyxd.com",
+  "bugs": "https://github.com/visualfart/polyxd/issues",
+  "publishConfig": {
+    "access": "public"
+  }
+}