@sealpixel/ui 1.0.0-rc.0

package/dist/components/lumbra-stage.js

@@ -0,0 +1,344 @@
+import { css, html, LitElement, svg } from 'lit';
+import { GestureController } from '../controllers/gesture-controller.js';
+import { base } from '../theme.js';
+import { apply, invert, previewToSource, sameAffine, scaleOf, } from '../view-mapping.js';
+const DOUBLE_TAP_MS = 350;
+const DOUBLE_TAP_PX = 24;
+/**
+ * Shows the preview on a canvas, fitted and zoomable, with an SVG overlay in
+ * image pixel coordinates for tool gizmos. Tier-A hints (CSS filter and
+ * transform) are applied to the canvas until the next preview arrives.
+ */
+export class LumbraStage extends LitElement {
+    static { this.styles = [
+        base,
+        css `
+      :host {
+        display: block;
+        position: relative;
+        overflow: hidden;
+        background-color: var(--lumbra-color-bg);
+        background-image:
+          linear-gradient(45deg, var(--lumbra-stage-checker-a) 25%, transparent 25%),
+          linear-gradient(-45deg, var(--lumbra-stage-checker-a) 25%, transparent 25%),
+          linear-gradient(45deg, transparent 75%, var(--lumbra-stage-checker-a) 75%),
+          linear-gradient(-45deg, transparent 75%, var(--lumbra-stage-checker-a) 75%);
+        background-size: 16px 16px;
+        background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+        touch-action: none;
+        user-select: none;
+      }
+      .viewport {
+        position: absolute;
+        inset: 0;
+      }
+      .content {
+        position: absolute;
+        left: 0;
+        top: 0;
+        transform-origin: 0 0;
+        will-change: transform;
+      }
+      canvas {
+        display: block;
+        image-rendering: auto;
+        transform-origin: 50% 50%;
+        box-shadow: var(--lumbra-shadow, none);
+      }
+      svg.overlay {
+        position: absolute;
+        left: 0;
+        top: 0;
+        overflow: visible;
+        pointer-events: none;
+      }
+      svg.overlay [data-interactive] {
+        pointer-events: all;
+      }
+      .status {
+        position: absolute;
+        right: var(--lumbra-space);
+        bottom: var(--lumbra-space);
+        padding: 3px 9px;
+        border: 0;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--lumbra-color-surface) 85%, transparent);
+        color: var(--lumbra-color-fg-muted);
+        font: inherit;
+        font-size: 12px;
+        font-variant-numeric: tabular-nums;
+        backdrop-filter: blur(6px);
+        cursor: pointer;
+      }
+      .status:disabled {
+        cursor: default;
+      }
+      .status:not(:disabled):hover {
+        color: var(--lumbra-color-fg);
+      }
+      .status:focus-visible {
+        outline: 2px solid var(--lumbra-color-focus);
+        outline-offset: 2px;
+      }
+      .pending {
+        position: absolute;
+        left: var(--lumbra-space);
+        top: var(--lumbra-space);
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--lumbra-color-accent);
+        opacity: 0.8;
+      }
+    `,
+    ]; }
+    static { this.properties = {
+        preview: { attribute: false },
+        pending: { type: Boolean },
+        overlay: { attribute: false },
+        hintFilter: { attribute: false },
+        hintTransform: { attribute: false },
+        zoom: { type: Number },
+        panEnabled: { type: Boolean },
+        t: { attribute: false },
+    }; }
+    constructor() {
+        super();
+        this.canvas = null;
+        this.drawnVersion = -1;
+        this.pan = { x: 0, y: 0 };
+        this.fitted = false;
+        /** Preview px → source px of the drawn preview; a change means the stage shows another view. */
+        this.viewMap = null;
+        this.lastTap = null;
+        this.resizeObserver = null;
+        this.gestures = new GestureController(this, {
+            drag: (e) => {
+                if (!this.panEnabled)
+                    return;
+                this.panBy(e.dx, e.dy);
+            },
+            // A second tap close to the first fits the image again (double-tap, double-click).
+            tap: (e) => {
+                const now = performance.now();
+                const prev = this.lastTap;
+                if (prev &&
+                    now - prev.at < DOUBLE_TAP_MS &&
+                    Math.hypot(e.x - prev.x, e.y - prev.y) < DOUBLE_TAP_PX) {
+                    this.lastTap = null;
+                    this.fit();
+                    return;
+                }
+                this.lastTap = { x: e.x, y: e.y, at: now };
+            },
+            pinch: (e) => this.zoomAround(e.scale, e.cx, e.cy, e.dx, e.dy),
+            wheelZoom: (e) => this.zoomAround(e.factor, e.cx, e.cy, 0, 0),
+            // Plain scrolling pans only while the image is larger than the view;
+            // otherwise the page scrolls as the user expects.
+            wheelPan: (e) => {
+                if (!this.overflows())
+                    return false;
+                this.panBy(e.dx, e.dy);
+                return true;
+            },
+        });
+        this.preview = null;
+        this.pending = false;
+        this.overlay = null;
+        this.hintFilter = '';
+        this.hintTransform = '';
+        this.zoom = 1;
+        this.panEnabled = true;
+        this.t = (key) => key;
+    }
+    get geometry() {
+        return this.preview?.geometry ?? null;
+    }
+    get imageWidth() {
+        return this.preview?.image.width ?? 0;
+    }
+    get imageHeight() {
+        return this.preview?.image.height ?? 0;
+    }
+    /** Converts a client point into preview image pixels. */
+    toImage(clientX, clientY) {
+        const r = this.getBoundingClientRect();
+        return {
+            x: (clientX - r.left - this.pan.x) / this.zoom,
+            y: (clientY - r.top - this.pan.y) / this.zoom,
+        };
+    }
+    fit() {
+        const w = this.imageWidth;
+        const h = this.imageHeight;
+        if (!w || !h)
+            return;
+        const r = this.getBoundingClientRect();
+        this.zoom = this.fitZoom();
+        this.pan = { x: (r.width - w * this.zoom) / 2, y: (r.height - h * this.zoom) / 2 };
+        this.fitted = true;
+        this.requestUpdate();
+        this.viewChanged();
+    }
+    fitZoom() {
+        const r = this.getBoundingClientRect();
+        const margin = 24;
+        const zoom = Math.min((r.width - margin) / this.imageWidth, (r.height - margin) / this.imageHeight, 4);
+        return Math.max(zoom, 0.01);
+    }
+    /**
+     * The preview now shows another view of the same source (a tool switched
+     * between cropped and uncropped, a resize changed the output). Keep the
+     * source pixel under the view centre where it was and keep its size on
+     * screen, instead of fitting and letting the image jump. A view that was
+     * fitted is fitted again only when the steady view would overflow.
+     */
+    reanchor(prev, next) {
+        const r = this.getBoundingClientRect();
+        const cx = r.width / 2;
+        const cy = r.height / 2;
+        const centre = apply(prev, (cx - this.pan.x) / this.zoom, (cy - this.pan.y) / this.zoom);
+        const q = apply(invert(next), centre.x, centre.y);
+        const zoom = Math.min(16, Math.max(0.05, (this.zoom * scaleOf(prev)) / scaleOf(next)));
+        const iw = this.imageWidth * zoom;
+        const ih = this.imageHeight * zoom;
+        if (this.fitted && (iw > r.width || ih > r.height)) {
+            this.fit();
+            return;
+        }
+        this.zoom = zoom;
+        this.pan = this.clampPan({ x: cx - q.x * zoom, y: cy - q.y * zoom });
+        this.fitted = Math.abs(zoom - this.fitZoom()) < 1e-3;
+        this.requestUpdate();
+        this.viewChanged();
+    }
+    /** True when the zoomed image is larger than the view in at least one axis. */
+    overflows() {
+        const r = this.getBoundingClientRect();
+        return this.imageWidth * this.zoom > r.width || this.imageHeight * this.zoom > r.height;
+    }
+    /**
+     * Keeps the image in view: an image smaller than the view stays fully
+     * visible, a larger one never shows empty space beyond its edges.
+     */
+    clampPan(pan) {
+        const r = this.getBoundingClientRect();
+        const iw = this.imageWidth * this.zoom;
+        const ih = this.imageHeight * this.zoom;
+        if (!iw || !ih)
+            return pan;
+        const axis = (v, size, view) => size <= view ? clamp(v, 0, view - size) : clamp(v, view - size, 0);
+        return { x: axis(pan.x, iw, r.width), y: axis(pan.y, ih, r.height) };
+    }
+    panBy(dx, dy) {
+        const next = this.clampPan({ x: this.pan.x + dx, y: this.pan.y + dy });
+        if (next.x === this.pan.x && next.y === this.pan.y)
+            return;
+        this.pan = next;
+        this.requestUpdate();
+        this.viewChanged();
+    }
+    /** Zoom or pan changed: overlays scale their gizmos by zoom and must re-render. */
+    viewChanged() {
+        this.dispatchEvent(new CustomEvent('stage-view', { detail: { zoom: this.zoom, pan: this.pan } }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.fitted)
+                this.fit();
+        });
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+    }
+    firstUpdated() {
+        this.canvas = this.renderRoot.querySelector('canvas');
+        this.gestures.attach(this.renderRoot.querySelector('.viewport'));
+    }
+    updated(changed) {
+        if (changed.has('preview'))
+            this.draw();
+    }
+    draw() {
+        const canvas = this.canvas;
+        const preview = this.preview;
+        if (!canvas || !preview)
+            return;
+        const { image } = preview;
+        const sizeChanged = canvas.width !== image.width || canvas.height !== image.height;
+        if (sizeChanged) {
+            canvas.width = image.width;
+            canvas.height = image.height;
+        }
+        if (preview.version !== this.drawnVersion || sizeChanged) {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const data = new Uint8ClampedArray(image.data.byteLength);
+                data.set(image.data);
+                ctx.putImageData(new ImageData(data, image.width, image.height), 0, 0);
+            }
+            this.drawnVersion = preview.version;
+            // A real preview landed: drop tier-A hints.
+            this.hintFilter = '';
+            this.hintTransform = '';
+        }
+        const nextMap = previewToSource(preview.viewGeometry);
+        const prevMap = this.viewMap;
+        this.viewMap = nextMap;
+        if (prevMap && !sameAffine(prevMap, nextMap))
+            this.reanchor(prevMap, nextMap);
+        else if (!prevMap || (!this.fitted && sizeChanged))
+            this.fit();
+    }
+    zoomAround(factor, cx, cy, dx, dy) {
+        const next = Math.min(16, Math.max(0.05, this.zoom * factor));
+        const k = next / this.zoom;
+        this.zoom = next;
+        this.pan = this.clampPan({
+            x: cx - (cx - this.pan.x) * k + dx,
+            y: cy - (cy - this.pan.y) * k + dy,
+        });
+        this.fitted = false;
+        this.requestUpdate();
+        this.viewChanged();
+    }
+    render() {
+        const w = this.imageWidth;
+        const h = this.imageHeight;
+        const transform = `translate(${this.pan.x}px, ${this.pan.y}px) scale(${this.zoom})`;
+        return html `
+      <div class="viewport" part="viewport">
+        <div class="content" style="transform:${transform}">
+          <canvas
+            part="canvas"
+            width=${w}
+            height=${h}
+            style="filter:${this.hintFilter || 'none'};transform:${this.hintTransform || 'none'}"
+            role="img"
+            aria-label="preview"
+          ></canvas>
+          ${this.overlay
+            ? svg `<svg class="overlay" part="overlay" width=${w} height=${h} viewBox="0 0 ${w} ${h}">${this.overlay}</svg>`
+            : null}
+        </div>
+      </div>
+      ${this.pending ? html `<div class="pending" aria-hidden="true"></div>` : null}
+      <button
+        type="button"
+        class="status"
+        part="status"
+        ?disabled=${this.fitted}
+        title=${this.t('stage.fit')}
+        aria-label=${`${this.t('stage.zoom', { percent: Math.round(this.zoom * 100) })}. ${this.t('stage.fit')}`}
+        @click=${() => this.fit()}
+      >${Math.round(this.zoom * 100)}%</button>
+    `;
+    }
+}
+function clamp(v, lo, hi) {
+    return v < lo ? lo : v > hi ? hi : v;
+}
+//# sourceMappingURL=lumbra-stage.js.map

package/dist/components/lumbra-stage.js.map

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

package/dist/components/lumbra-toolbar.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import type { UiTool } from '../tool.js';
+/** Tool switcher with roving tabindex. Horizontal on narrow layouts, vertical on wide. */
+export declare class LumbraToolbar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        tools: {
+            attribute: boolean;
+        };
+        active: {
+            type: StringConstructor;
+        };
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        t: {
+            attribute: boolean;
+        };
+    };
+    tools: UiTool[];
+    active: string | null;
+    orientation: 'horizontal' | 'vertical';
+    t: (key: string) => string;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+    private select;
+    private onKeydown;
+}
+//# sourceMappingURL=lumbra-toolbar.d.ts.map

package/dist/components/lumbra-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lumbra-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/lumbra-toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,0FAA0F;AAC1F,qBAAa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA4EpB;IAEF,OAAgB,UAAU;;;;;;;;;;;;;;MAKxB;IAEM,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;;IAU1B,MAAM;IAkBf,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,SAAS,CAiBf;CACH"}

package/dist/components/lumbra-toolbar.js

@@ -0,0 +1,127 @@
+import { css, html, LitElement } from 'lit';
+import { base } from '../theme.js';
+/** Tool switcher with roving tabindex. Horizontal on narrow layouts, vertical on wide. */
+export class LumbraToolbar extends LitElement {
+    static { this.styles = [
+        base,
+        css `
+      :host {
+        display: flex;
+        padding: 4px;
+        background: var(--lumbra-color-surface);
+        border-top: 1px solid var(--lumbra-color-border);
+        overflow: auto;
+        scrollbar-width: thin;
+      }
+      .tools {
+        display: flex;
+        gap: 4px;
+        /* Centres when it fits, scrolls from the first button when it does not. */
+        margin: auto;
+      }
+      :host([orientation='vertical']) {
+        border-top: none;
+        border-right: 1px solid var(--lumbra-color-border);
+      }
+      :host([orientation='vertical']) .tools {
+        flex-direction: column;
+        margin: 0;
+      }
+      button {
+        min-width: var(--lumbra-touch-target);
+        min-height: calc(var(--lumbra-touch-target) + 10px);
+        border: 1px solid transparent;
+        border-radius: var(--lumbra-radius);
+        background: transparent;
+        color: var(--lumbra-color-fg-muted);
+        font: inherit;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        padding: 6px 4px;
+        max-width: 100%;
+        transition:
+          background var(--lumbra-transition),
+          color var(--lumbra-transition);
+      }
+      button:hover {
+        color: var(--lumbra-color-fg);
+        background: var(--lumbra-color-surface-2);
+      }
+      button[aria-pressed='true'] {
+        color: var(--lumbra-color-accent);
+        background: var(--lumbra-color-accent-soft, var(--lumbra-color-surface-2));
+      }
+      .icon {
+        font-size: 20px;
+        line-height: 1;
+        width: 28px;
+        height: 28px;
+        display: grid;
+        place-items: center;
+        border-radius: 8px;
+      }
+      button[aria-pressed='true'] .icon {
+        background: var(--lumbra-color-accent);
+        color: var(--lumbra-color-accent-fg);
+      }
+      .label {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `,
+    ]; }
+    static { this.properties = {
+        tools: { attribute: false },
+        active: { type: String },
+        orientation: { type: String, reflect: true },
+        t: { attribute: false },
+    }; }
+    constructor() {
+        super();
+        this.onKeydown = (e) => {
+            const keys = this.orientation === 'vertical' ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
+            const dir = e.key === keys[0] ? -1 : e.key === keys[1] ? 1 : 0;
+            if (dir === 0)
+                return;
+            e.preventDefault();
+            const idx = Math.max(0, this.tools.findIndex((t) => t.id === this.active));
+            const next = this.tools[(idx + dir + this.tools.length) % this.tools.length];
+            if (next) {
+                this.select(next.id);
+                this.updateComplete.then(() => this.renderRoot.querySelector(`[data-tool="${next.id}"]`)?.focus());
+            }
+        };
+        this.tools = [];
+        this.active = null;
+        this.orientation = 'horizontal';
+        this.t = (k) => k;
+    }
+    render() {
+        return html `<div class="tools" role="toolbar" aria-orientation=${this.orientation} @keydown=${this.onKeydown}>
+      ${this.tools.map((tool, i) => html `<button
+          part="tool"
+          type="button"
+          data-tool=${tool.id}
+          aria-pressed=${this.active === tool.id ? 'true' : 'false'}
+          tabindex=${this.active === tool.id || (this.active === null && i === 0) ? 0 : -1}
+          @click=${() => this.select(tool.id)}
+        >
+          <span class="icon" aria-hidden="true">${tool.icon}</span>
+          <span class="label">${this.t(tool.label)}</span>
+        </button>`)}
+    </div>`;
+    }
+    select(id) {
+        this.dispatchEvent(new CustomEvent('tool-select', { detail: id, bubbles: true, composed: true }));
+    }
+}
+//# sourceMappingURL=lumbra-toolbar.js.map

package/dist/components/lumbra-toolbar.js.map

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

package/dist/components/pincel-button.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export declare class PincelButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pressed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    disabled: boolean;
+    pressed: boolean;
+    variant: 'default' | 'primary' | 'ghost';
+    label: string;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=pincel-button.d.ts.map

package/dist/components/pincel-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pincel-button.d.ts","sourceRoot":"","sources":["../../src/components/pincel-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBAAa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAwDpB;IAEF,OAAgB,UAAU;;;;;;;;;;;;;;;;MAKxB;IAEM,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;;IAUb,MAAM;CAYhB"}

package/dist/components/pincel-button.js

@@ -0,0 +1,87 @@
+import { css, html, LitElement } from 'lit';
+import { base } from '../theme.js';
+export class PincelButton extends LitElement {
+    static { this.styles = [
+        base,
+        css `
+      :host {
+        display: inline-block;
+      }
+      button {
+        min-width: var(--pincel-touch-target);
+        min-height: var(--pincel-touch-target);
+        padding: 0 calc(var(--pincel-space) * 1.5);
+        border: 1px solid var(--pincel-color-border);
+        border-radius: var(--pincel-radius-sm);
+        background: var(--pincel-color-surface-2);
+        color: var(--pincel-color-fg);
+        font: inherit;
+        font-weight: 500;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--pincel-space);
+        width: 100%;
+        transition:
+          background var(--pincel-transition),
+          border-color var(--pincel-transition),
+          transform var(--pincel-transition);
+      }
+      button:hover:not(:disabled) {
+        background: var(--pincel-color-surface-3, var(--pincel-color-surface-2));
+        border-color: var(--pincel-color-fg-muted);
+      }
+      button:active:not(:disabled) {
+        transform: translateY(1px);
+      }
+      button:disabled {
+        opacity: 0.45;
+        cursor: default;
+      }
+      :host([variant='primary']) button {
+        background: var(--pincel-color-accent);
+        border-color: var(--pincel-color-accent);
+        color: var(--pincel-color-accent-fg);
+      }
+      :host([variant='ghost']) button {
+        background: transparent;
+        border-color: transparent;
+      }
+      :host([pressed]) button {
+        background: var(--pincel-color-accent-soft, transparent);
+        border-color: var(--pincel-color-accent);
+        color: var(--pincel-color-fg);
+      }
+      :host([variant='primary']) button:hover:not(:disabled) {
+        filter: brightness(1.08);
+      }
+    `,
+    ]; }
+    static { this.properties = {
+        disabled: { type: Boolean, reflect: true },
+        pressed: { type: Boolean, reflect: true },
+        variant: { type: String, reflect: true },
+        label: { type: String },
+    }; }
+    constructor() {
+        super();
+        this.disabled = false;
+        this.pressed = false;
+        this.variant = 'default';
+        this.label = '';
+    }
+    render() {
+        return html `<button
+      part="button"
+      type="button"
+      ?disabled=${this.disabled}
+      aria-pressed=${this.pressed ? 'true' : 'false'}
+      aria-label=${this.label || undefined}
+      title=${this.label || undefined}
+    >
+      <slot></slot>
+    </button>`;
+    }
+}
+//# sourceMappingURL=pincel-button.js.map

package/dist/components/pincel-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pincel-button.js","sourceRoot":"","sources":["../../src/components/pincel-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,OAAO,YAAa,SAAQ,UAAU;aAC1B,WAAM,GAAG;QACvB,IAAI;QACJ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;KACF,CAAC;aAEc,eAAU,GAAG;QAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QAC1C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QACzC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACxB,CAAC;IAOF;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QACzB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,QAAQ;qBACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACjC,IAAI,CAAC,KAAK,IAAI,SAAS;cAC5B,IAAI,CAAC,KAAK,IAAI,SAAS;;;cAGvB,CAAC;IACb,CAAC"}