@xtyle/core 0.5.0

package/dist/elements/panel.d.ts

@@ -0,0 +1,36 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+type PanelVariant = "default" | "collapsible";
+export declare class XtylePanel extends XtyleElement {
+    private titleId;
+    private fragment;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get title(): string;
+    set title(value: string | null | undefined);
+    get level(): number;
+    set level(value: number);
+    get variant(): PanelVariant;
+    set variant(value: PanelVariant);
+    get open(): boolean;
+    set open(value: boolean);
+    get scrollable(): boolean;
+    set scrollable(value: boolean);
+    /** Accessible name for a panel that carries no visible `title` — names the region without a heading. */
+    get label(): string;
+    set label(value: string | null | undefined);
+    attributeChangedCallback(): void;
+    private get hasActions();
+    private get hasHeader();
+    private get hasName();
+    private get bindings();
+    /** Structural state ops can't patch incrementally: the variant, heading tag (`level`),
+     * header presence, and scrollable body wiring. A change here rebuilds; an `open` toggle on
+     * a collapsible panel is a cheap patch (aria-expanded + region visibility). */
+    private shapeSignature;
+    private warnIfUnnamed;
+    private applyIntent;
+    protected template(): string;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=panel.d.ts.map

package/dist/elements/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/elements/panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAKjE,KAAK,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;AAI9C,qBAAa,UAAW,SAAQ,YAAY;IAC3C,OAAO,CAAC,OAAO,CAA0C;IACzD,OAAO,CAAC,QAAQ,CAEb;IAEH,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,OAAO,IAAI,YAAY,CAE1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,YAAY,EAE9B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED,wGAAwG;IACxG,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,QAAQ,GAWnB;IAED;;mFAE+E;IAC/E,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,WAAW;IAMnB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}

package/dist/elements/panel.js

@@ -0,0 +1,109 @@
+import { XtyleElement, define } from "./base.js";
+import { panelHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/panel/source.generated.js";
+let panelTitleSeq = 0;
+export class XtylePanel extends XtyleElement {
+    titleId = `xtyle-panel-title-${panelTitleSeq++}`;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "panel", {
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["title", "level", "variant", "open", "scroll", "label"];
+    }
+    get title() {
+        return this.getAttribute("title") ?? "";
+    }
+    set title(value) {
+        this.reflectString("title", value);
+    }
+    get level() {
+        const raw = Number(this.getAttribute("level"));
+        return raw >= 1 && raw <= 6 ? Math.trunc(raw) : 2;
+    }
+    set level(value) {
+        this.setAttribute("level", String(value));
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "default";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        this.reflectBoolean("open", value);
+    }
+    get scrollable() {
+        return this.hasAttribute("scroll");
+    }
+    set scrollable(value) {
+        this.reflectBoolean("scroll", value);
+    }
+    /** Accessible name for a panel that carries no visible `title` — names the region without a heading. */
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.reflectString("label", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get hasActions() {
+        return this.fragment.hasSlotted("actions");
+    }
+    get hasHeader() {
+        return this.title !== "" || this.hasActions;
+    }
+    get hasName() {
+        return this.hasHeader || this.label !== "";
+    }
+    get bindings() {
+        return {
+            title: this.title || null,
+            level: this.level,
+            variant: this.variant,
+            open: this.open,
+            scrollable: this.scrollable,
+            hasActions: this.hasActions,
+            titleId: this.titleId,
+            label: this.label || null,
+        };
+    }
+    /** Structural state ops can't patch incrementally: the variant, heading tag (`level`),
+     * header presence, and scrollable body wiring. A change here rebuilds; an `open` toggle on
+     * a collapsible panel is a cheap patch (aria-expanded + region visibility). */
+    shapeSignature() {
+        return `${this.variant}|${this.level}|${this.hasHeader}|${this.title}|${this.scrollable}|${this.label}`;
+    }
+    warnIfUnnamed() {
+        if (!this.hasName) {
+            console.warn("xtyle-panel: no title, actions, or label — the panel has no accessible name. Provide a `title` (visible heading) or `label` (name only) so the region is announced.");
+        }
+    }
+    applyIntent(intent, _event) {
+        if (!intent.toggleOpen)
+            return;
+        this.open = !this.open;
+        this.dispatchEvent(new Event("toggle", { bubbles: true, composed: true }));
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(panelHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+    }
+}
+define("xtyle-panel", XtylePanel);
+//# sourceMappingURL=panel.js.map

package/dist/elements/panel.js.map

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

package/dist/elements/parallax.d.ts

@@ -0,0 +1,32 @@
+type Mode = "scroll" | "cursor";
+/**
+ * A layered banner whose children drift for depth. The layers are the consumer's own children, stacked
+ * in one grid cell by CSS (so the overlaid banner renders with no JavaScript at all), and the runtime
+ * adds only the shift on layers that carry a `data-speed`. In the default `scroll` mode that shift is
+ * scroll-linked; in `cursor` mode it follows the pointer. Each layer can pick a travel direction with
+ * `data-direction` (a compass token or an angle). With no JS, or under `prefers-reduced-motion`, the
+ * layers sit still: the parallax is an enhancement, never a requirement.
+ */
+export declare class XtyleParallax extends HTMLElement {
+    static get observedAttributes(): string[];
+    private controller;
+    private frame;
+    private mq;
+    private layers;
+    private pointer;
+    get amplitude(): number;
+    get mode(): Mode;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private get reducedMotion();
+    private applyMinHeight;
+    private enhance;
+    private onPointerMove;
+    private resetPointer;
+    private scheduleRepaint;
+    private paint;
+    private teardown;
+}
+export {};
+//# sourceMappingURL=parallax.d.ts.map

package/dist/elements/parallax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallax.d.ts","sourceRoot":"","sources":["../../src/elements/parallax.ts"],"names":[],"mappings":"AAKA,KAAK,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAC;AA8BhC;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC7C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,EAAE,CAA4F;IACtG,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,OAAO,CAAuB;IAEtC,IAAI,SAAS,IAAI,MAAM,CAOtB;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IAED,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAI5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQ5C,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,eAAe,CAMrB;IAEF,OAAO,CAAC,KAAK;IA0Bb,OAAO,CAAC,QAAQ;CAWhB"}

package/dist/elements/parallax.js

@@ -0,0 +1,167 @@
+import { define } from "./base.js";
+const DEFAULT_AMPLITUDE = 80;
+const SQRT1_2 = Math.SQRT1_2;
+const NAMED_DIRECTIONS = {
+    n: { x: 0, y: -1 },
+    s: { x: 0, y: 1 },
+    e: { x: 1, y: 0 },
+    w: { x: -1, y: 0 },
+    ne: { x: SQRT1_2, y: -SQRT1_2 },
+    nw: { x: -SQRT1_2, y: -SQRT1_2 },
+    se: { x: SQRT1_2, y: SQRT1_2 },
+    sw: { x: -SQRT1_2, y: SQRT1_2 },
+};
+/** A direction is either a compass token (`n`, `se`, …) or an angle in degrees clockwise from north
+ * (`0` = up, `90` = right); anything else leaves the layer on its mode's default axis. */
+function parseDirection(raw) {
+    if (!raw)
+        return null;
+    const key = raw.trim().toLowerCase();
+    const named = NAMED_DIRECTIONS[key];
+    if (named)
+        return named;
+    const deg = Number(key);
+    if (!Number.isFinite(deg))
+        return null;
+    const rad = (deg * Math.PI) / 180;
+    return { x: Math.sin(rad), y: -Math.cos(rad) };
+}
+const clamp = (v, lo, hi) => (v < lo ? lo : v > hi ? hi : v);
+/**
+ * A layered banner whose children drift for depth. The layers are the consumer's own children, stacked
+ * in one grid cell by CSS (so the overlaid banner renders with no JavaScript at all), and the runtime
+ * adds only the shift on layers that carry a `data-speed`. In the default `scroll` mode that shift is
+ * scroll-linked; in `cursor` mode it follows the pointer. Each layer can pick a travel direction with
+ * `data-direction` (a compass token or an angle). With no JS, or under `prefers-reduced-motion`, the
+ * layers sit still: the parallax is an enhancement, never a requirement.
+ */
+export class XtyleParallax extends HTMLElement {
+    static get observedAttributes() {
+        return ["min-height", "amplitude", "mode"];
+    }
+    controller = null;
+    frame = 0;
+    mq = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+    layers = [];
+    pointer = { x: 0, y: 0 };
+    get amplitude() {
+        const attr = this.getAttribute("amplitude");
+        if (attr === null || attr.trim() === "")
+            return DEFAULT_AMPLITUDE;
+        const raw = Number(attr);
+        // A negative amplitude flips every layer at once (per-layer `data-speed` sign still composes on top),
+        // so an author can reverse the whole banner without touching each layer.
+        return Number.isFinite(raw) ? raw : DEFAULT_AMPLITUDE;
+    }
+    get mode() {
+        return this.getAttribute("mode") === "cursor" ? "cursor" : "scroll";
+    }
+    connectedCallback() {
+        this.applyMinHeight();
+        if (!this.hasAttribute("data-enhanced"))
+            this.enhance();
+    }
+    disconnectedCallback() {
+        this.teardown();
+    }
+    attributeChangedCallback(name) {
+        if (name === "min-height")
+            this.applyMinHeight();
+        else if (name === "mode" && this.isConnected) {
+            this.teardown();
+            this.enhance();
+        }
+    }
+    get reducedMotion() {
+        return this.mq?.matches ?? false;
+    }
+    applyMinHeight() {
+        const value = this.getAttribute("min-height");
+        if (value)
+            this.style.setProperty("--xtyle-parallax-min-height", value);
+        else
+            this.style.removeProperty("--xtyle-parallax-min-height");
+    }
+    enhance() {
+        this.layers = Array.from(this.children)
+            .filter((n) => n instanceof HTMLElement)
+            .map((el) => ({ el, speed: Number(el.getAttribute("data-speed")) || 0, dir: parseDirection(el.getAttribute("data-direction")) }))
+            .filter((layer) => layer.speed !== 0);
+        if (this.layers.length === 0 || this.reducedMotion)
+            return;
+        this.setAttribute("data-enhanced", "");
+        this.controller = new AbortController();
+        const opts = { passive: true, signal: this.controller.signal };
+        if (this.mode === "cursor") {
+            window.addEventListener("pointermove", this.onPointerMove, opts);
+            document.addEventListener("pointerleave", this.resetPointer, opts);
+        }
+        else {
+            // Capture phase so scrolls from any ancestor scroll container reach us: `scroll` does not bubble,
+            // so a plain window listener misses an inner scroller (e.g. an app-shell main region).
+            window.addEventListener("scroll", this.scheduleRepaint, { ...opts, capture: true });
+            window.addEventListener("resize", this.scheduleRepaint, opts);
+        }
+        this.paint();
+    }
+    onPointerMove = (event) => {
+        const rect = this.getBoundingClientRect();
+        this.pointer = {
+            x: clamp((event.clientX - (rect.left + rect.width / 2)) / (rect.width / 2), -1, 1),
+            y: clamp((event.clientY - (rect.top + rect.height / 2)) / (rect.height / 2), -1, 1),
+        };
+        this.scheduleRepaint();
+    };
+    resetPointer = () => {
+        this.pointer = { x: 0, y: 0 };
+        this.scheduleRepaint();
+    };
+    scheduleRepaint = () => {
+        if (this.frame)
+            return;
+        this.frame = requestAnimationFrame(() => {
+            this.frame = 0;
+            this.paint();
+        });
+    };
+    paint() {
+        const rect = this.getBoundingClientRect();
+        if (rect.bottom < 0 || rect.top > window.innerHeight)
+            return;
+        const amp = this.amplitude;
+        if (this.mode === "cursor") {
+            // Layers push away from the pointer (negative), so the scene tilts to reveal depth as the cursor
+            // moves toward an edge, rather than sliding after it.
+            const { x: px, y: py } = this.pointer;
+            for (const { el, speed, dir } of this.layers) {
+                const [ox, oy] = dir
+                    ? [-(px * dir.x + py * dir.y) * speed * amp * dir.x, -(px * dir.x + py * dir.y) * speed * amp * dir.y]
+                    : [-px * speed * amp, -py * speed * amp];
+                el.style.translate = `${ox.toFixed(2)}px ${oy.toFixed(2)}px`;
+            }
+            return;
+        }
+        // Clamp progress to [-0.5, 0.5]: past half-off-screen the extra drift is barely visible but would
+        // carry a layer beyond its scale headroom and reveal the band behind it, so the travel is bounded.
+        const f = clamp((rect.top + rect.height / 2 - window.innerHeight / 2) / window.innerHeight, -0.5, 0.5);
+        for (const { el, speed, dir } of this.layers) {
+            const d = dir ?? { x: 0, y: 1 };
+            const o = f * speed * amp;
+            el.style.translate = `${(o * d.x).toFixed(2)}px ${(o * d.y).toFixed(2)}px`;
+        }
+    }
+    teardown() {
+        this.controller?.abort();
+        this.controller = null;
+        if (this.frame) {
+            cancelAnimationFrame(this.frame);
+            this.frame = 0;
+        }
+        this.pointer = { x: 0, y: 0 };
+        for (const { el } of this.layers)
+            el.style.translate = "";
+        this.removeAttribute("data-enhanced");
+    }
+}
+define("xtyle-parallax", XtyleParallax);
+//# sourceMappingURL=parallax.js.map

package/dist/elements/parallax.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallax.js","sourceRoot":"","sources":["../../src/elements/parallax.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAM7B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;AAC7B,MAAM,gBAAgB,GAAwB;IAC7C,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;IAClB,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACjB,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACjB,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAClB,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE;IAC/B,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE;IAChC,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE;IAC9B,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE;CAC/B,CAAC;AAEF;0FAC0F;AAC1F,SAAS,cAAc,CAAC,GAAkB;IACzC,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IACtB,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,KAAK,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACpC,IAAI,KAAK;QAAE,OAAO,KAAK,CAAC;IACxB,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IACvC,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;IAClC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;AAChD,CAAC;AAED,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAU,EAAE,EAAU,EAAU,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7F;;;;;;;GAOG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAC7C,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,YAAY,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;IAC5C,CAAC;IAEO,UAAU,GAA2B,IAAI,CAAC;IAC1C,KAAK,GAAG,CAAC,CAAC;IACV,EAAE,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9F,MAAM,GAAY,EAAE,CAAC;IACrB,OAAO,GAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAEtC,IAAI,SAAS;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QAC5C,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE;YAAE,OAAO,iBAAiB,CAAC;QAClE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QACzB,sGAAsG;QACtG,yEAAyE;QACzE,OAAO,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC;IACvD,CAAC;IAED,IAAI,IAAI;QACP,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrE,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;YAAE,IAAI,CAAC,OAAO,EAAE,CAAC;IACzD,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;IACjB,CAAC;IAED,wBAAwB,CAAC,IAAY;QACpC,IAAI,IAAI,KAAK,YAAY;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;aAC5C,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAC9C,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,EAAE,CAAC;QAChB,CAAC;IACF,CAAC;IAED,IAAY,aAAa;QACxB,OAAO,IAAI,CAAC,EAAE,EAAE,OAAO,IAAI,KAAK,CAAC;IAClC,CAAC;IAEO,cAAc;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAC9C,IAAI,KAAK;YAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;;YACnE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,6BAA6B,CAAC,CAAC;IAC/D,CAAC;IAEO,OAAO;QACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aACrC,MAAM,CAAC,CAAC,CAAC,EAAoB,EAAE,CAAC,CAAC,YAAY,WAAW,CAAC;aACzD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC;aAChI,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3D,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QACvC,IAAI,CAAC,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACxC,MAAM,IAAI,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,EAAW,CAAC;QACxE,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YACjE,QAAQ,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QACpE,CAAC;aAAM,CAAC;YACP,kGAAkG;YAClG,uFAAuF;YACvF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACpF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC;IAEO,aAAa,GAAG,CAAC,KAAmB,EAAQ,EAAE;QACrD,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC1C,IAAI,CAAC,OAAO,GAAG;YACd,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YAClF,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;SACnF,CAAC;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC,CAAC;IAEM,YAAY,GAAG,GAAS,EAAE;QACjC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC9B,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC,CAAC;IAEM,eAAe,GAAG,GAAS,EAAE;QACpC,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO;QACvB,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;YACf,IAAI,CAAC,KAAK,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;IAEM,KAAK;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC1C,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW;YAAE,OAAO;QAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC;QAC3B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC5B,iGAAiG;YACjG,sDAAsD;YACtD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YACtC,KAAK,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAC9C,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG;oBACnB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;oBACtG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG,GAAG,CAAC,CAAC;gBAC1C,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9D,CAAC;YACD,OAAO;QACR,CAAC;QACD,kGAAkG;QAClG,mGAAmG;QACnG,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACvG,KAAK,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC9C,MAAM,CAAC,GAAG,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YAChC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC;YAC1B,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;QAC5E,CAAC;IACF,CAAC;IAEO,QAAQ;QACf,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAChB,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC9B,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM;YAAE,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAC1D,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACvC,CAAC;CACD;AAED,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC"}

package/dist/elements/pie.d.ts

@@ -0,0 +1,26 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type PieDatum, type PieScheme, type PieVariant } from "../markup/index.js";
+export type { PieDatum, PieScheme, PieVariant };
+export declare class XtylePie extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private dataProp;
+    private schemeProp;
+    private fragment;
+    static get observedAttributes(): string[];
+    get data(): PieDatum[];
+    set data(value: PieDatum[]);
+    get scheme(): PieScheme;
+    set scheme(value: PieScheme);
+    get variant(): PieVariant;
+    set variant(value: PieVariant);
+    get reverse(): boolean;
+    set reverse(value: boolean);
+    attributeChangedCallback(name: string): void;
+    private paletteRegister;
+    private colors;
+    private get bindings();
+    private wireInteraction;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=pie.d.ts.map

package/dist/elements/pie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie.d.ts","sourceRoot":"","sources":["../../src/elements/pie.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAsB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAc,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhG,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAWhD,qBAAa,QAAS,SAAQ,YAAY;IACzC,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,QAAQ,CAGb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,QAAQ,EAAE,CAErB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAGzB;IAED,IAAI,MAAM,IAAI,SAAS,CAMtB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,SAAS,EAG1B;IAED,IAAI,OAAO,IAAI,UAAU,CAExB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,UAAU,EAE5B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM5C,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,MAAM;IAOd,OAAO,KAAK,QAAQ,GAYnB;IAED,OAAO,CAAC,eAAe;IAoCvB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAKjC"}

package/dist/elements/pie.js

@@ -0,0 +1,146 @@
+import { XtyleElement, define, escapeHtml } from "./base.js";
+import { pieHostCss } from "../markup/index.js";
+import { seriesPalette, seriesColorsFor, SERIES_SCHEMES, SERIES_TOKENS } from "../series.js";
+import { FragmentHost } from "./fragment-host.js";
+import { readLiveRegister } from "./live-register.js";
+import { manifest, fragmentSources } from "./fragments/pie/source.generated.js";
+function parseJson(raw) {
+    if (!raw)
+        return null;
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+export class XtylePie extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    dataProp = null;
+    schemeProp = null;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "pie", {
+        applyIntent: () => { },
+        afterApply: () => this.wireInteraction(),
+    });
+    static get observedAttributes() {
+        return ["data", "scheme", "reverse", "variant", "show-values", "legend", "size", "label"];
+    }
+    get data() {
+        return this.dataProp ?? parseJson(this.getAttribute("data")) ?? [];
+    }
+    set data(value) {
+        this.dataProp = value;
+        if (this.root.firstChild)
+            this.render();
+    }
+    get scheme() {
+        if (this.schemeProp)
+            return this.schemeProp;
+        const raw = this.getAttribute("scheme");
+        if (!raw)
+            return "skittles";
+        if (raw.startsWith("["))
+            return parseJson(raw) ?? "skittles";
+        return raw;
+    }
+    set scheme(value) {
+        this.schemeProp = value;
+        if (this.root.firstChild)
+            this.render();
+    }
+    get variant() {
+        return this.getAttribute("variant") === "donut" ? "donut" : "pie";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get reverse() {
+        return this.hasAttribute("reverse");
+    }
+    set reverse(value) {
+        this.reflectBoolean("reverse", value);
+    }
+    attributeChangedCallback(name) {
+        if (name === "data")
+            this.dataProp = null;
+        if (name === "scheme")
+            this.schemeProp = null;
+        if (this.root.firstChild)
+            this.render();
+    }
+    paletteRegister() {
+        return readLiveRegister(this, SERIES_TOKENS, () => {
+            if (this.root.firstChild)
+                this.render();
+        });
+    }
+    colors(items) {
+        const scheme = this.scheme;
+        if (Array.isArray(scheme))
+            return seriesPalette(scheme, items.length, {}, { reverse: this.reverse });
+        const resolved = SERIES_SCHEMES.includes(scheme) ? scheme : "skittles";
+        return seriesColorsFor(resolved, items, this.paletteRegister(), { reverse: this.reverse });
+    }
+    get bindings() {
+        const data = this.data.filter((d) => Number(d.value) > 0);
+        return {
+            data,
+            colors: this.colors(data),
+            variant: this.variant,
+            showValues: this.hasAttribute("show-values"),
+            legend: this.getAttribute("legend") !== "false",
+            size: this.getAttribute("size") ? Number(this.getAttribute("size")) : 200,
+            title: this.getAttribute("label"),
+            ariaLabel: this.getAttribute("label"),
+        };
+    }
+    wireInteraction() {
+        const chart = this.root.querySelector(".xtyle-pie");
+        const tooltip = this.root.querySelector(".xtyle-pie__tooltip");
+        if (!chart || !tooltip)
+            return;
+        const slices = [...this.root.querySelectorAll(".xtyle-pie__slice")];
+        const data = this.data.filter((d) => Number(d.value) > 0);
+        const total = data.reduce((sum, d) => sum + Number(d.value), 0) || 1;
+        const show = (slice) => {
+            const i = Number(slice.dataset.i);
+            const d = data[i];
+            if (!d)
+                return;
+            const percent = Math.round((Number(d.value) / total) * 100);
+            tooltip.innerHTML = `<span class="xtyle-pie__tooltip-name">${escapeHtml(d.label)}</span> <span class="xtyle-pie__tooltip-value">${escapeHtml(String(d.value))} · ${percent}%</span>`;
+            const chartRect = chart.getBoundingClientRect();
+            const sliceRect = slice.getBoundingClientRect();
+            tooltip.style.left = `${sliceRect.left + sliceRect.width / 2 - chartRect.left}px`;
+            tooltip.style.top = `${sliceRect.top - chartRect.top}px`;
+            tooltip.hidden = false;
+            chart.classList.add("xtyle-pie--hovering");
+            for (const s of slices)
+                s.classList.toggle("is-active", s === slice);
+        };
+        const hide = () => {
+            tooltip.hidden = true;
+            chart.classList.remove("xtyle-pie--hovering");
+            for (const s of slices)
+                s.classList.remove("is-active");
+        };
+        for (const slice of slices) {
+            slice.addEventListener("pointerenter", () => show(slice));
+            slice.addEventListener("focus", () => show(slice));
+            slice.addEventListener("pointerleave", hide);
+            slice.addEventListener("blur", hide);
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(pieHostCss);
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-pie", XtylePie);
+//# sourceMappingURL=pie.js.map

package/dist/elements/pie.js.map

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

package/dist/elements/progress.d.ts

@@ -0,0 +1,62 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { FullTone } from "../index.js";
+export type ProgressVariant = "linear" | "circular";
+export type ProgressSize = "sm" | "md" | "lg";
+export type ProgressValueFormat = "percent" | "value" | "value-max";
+export type ProgressPulse = "fast" | "slow" | null;
+export declare class XtyleProgress extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private fragment;
+    static get observedAttributes(): string[];
+    get variant(): ProgressVariant;
+    set variant(value: ProgressVariant);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get size(): ProgressSize;
+    set size(value: ProgressSize);
+    get min(): number;
+    set min(value: number);
+    get max(): number;
+    set max(value: number);
+    get value(): number;
+    set value(value: number);
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    get showValue(): boolean;
+    set showValue(value: boolean);
+    get valueFormat(): ProgressValueFormat;
+    set valueFormat(value: ProgressValueFormat);
+    get colorizeValue(): boolean;
+    set colorizeValue(value: boolean);
+    get valuePosition(): "end" | "inset";
+    set valuePosition(value: "end" | "inset");
+    /** Report as a `meter` (a measurement against a capacity, e.g. disk used) rather than the default
+     * `progressbar` (a task advancing). Flips the ARIA role; the visual treatment is unchanged. */
+    get meter(): boolean;
+    set meter(value: boolean);
+    private get ariaRole();
+    /** The `<threshold>` config elements — direct children of the host, never displayed. Read live off
+     * the host (`:scope > threshold`): they sit there as hidden direct children under SSR-light and as
+     * unprojected light children under a shadow render alike. The captured-group read is a fallback for
+     * a forced-light host whose scaffold paint relocated them out of the element. */
+    private thresholdEls;
+    /** Declarative `<threshold below tone pulse>` children, sorted by their ceiling. The active band is the
+     * first whose `below` percent the current value falls under; it overrides the tone and may pulse. */
+    private thresholds;
+    private activeThreshold;
+    get effectiveTone(): FullTone;
+    private effectivePulse;
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** A signature of the state ops can't patch incrementally — the variant (linear vs circular
+     * are entirely different element trees), the indeterminate flag (it drops `aria-valuenow` and the
+     * indicator's inline size, which `setAttr` can't remove), `show-value` (it adds/removes the
+     * readout node), and the accessible name (switching between `aria-label` and `aria-labelledby`,
+     * or dropping the name entirely, requires removing an attribute, which `setAttr` can't do). When
+     * it changes, the structure is rebuilt rather than patched. */
+    private shapeSignature;
+    private warnIfUnnamed;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=progress.d.ts.map

package/dist/elements/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/elements/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK5C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;AACpE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AAEnD,qBAAa,aAAc,SAAQ,YAAY;IAC9C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAEb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,OAAO,IAAI,eAAe,CAE7B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,eAAe,EAEjC;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,IAAI,IAAI,IAAI,YAAY,CAEvB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,YAAY,EAE3B;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAE/B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,IAAI,WAAW,IAAI,mBAAmB,CAGrC;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,mBAAmB,EAEzC;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAE/B;IAED,IAAI,aAAa,IAAI,KAAK,GAAG,OAAO,CAEnC;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,EAEvC;IAED;mGAC+F;IAC/F,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED;;;qFAGiF;IACjF,OAAO,CAAC,YAAY;IAMpB;yGACqG;IACrG,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,eAAe;IAQvB,IAAI,aAAa,IAAI,QAAQ,CAE5B;IAED,OAAO,CAAC,cAAc;IAKtB,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAkBnB;IAED;;;;;mEAK+D;IAC/D,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,aAAa;IAQrB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}