@screenly/edge-apps 0.0.1 → 0.0.2

package/dist/components/auto-scaler/auto-scaler.js

@@ -0,0 +1,304 @@
+/**
+ * <auto-scaler>
+ *
+ * Web component that automatically scales its slotted content from a reference
+ * resolution to the current viewport.
+ *
+ * Usage:
+ * ```html
+ * <auto-scaler
+ *   reference-width="1920"
+ *   reference-height="1080"
+ *   orientation="auto"
+ *   center-content
+ * >
+ *   <!-- Your app content sized for 1920×1080 -->
+ * </auto-scaler>
+ * ```
+ */
+export class AutoScalerElement extends HTMLElement {
+    currentScale = 1;
+    resizeObserver;
+    resizeTimeout;
+    boundDebouncedResize = () => this.debouncedResize();
+    // Internal options derived from attributes
+    _referenceWidth;
+    _referenceHeight;
+    _orientation = 'auto';
+    _centerContent = true;
+    _padding = '20';
+    _debounceMs = 100;
+    static get observedAttributes() {
+        return [
+            'reference-width',
+            'reference-height',
+            'orientation',
+            'center-content',
+            'padding',
+            'debounce-ms',
+        ];
+    }
+    constructor() {
+        super();
+        // Create shadow root for encapsulated styles (best practice)
+        const shadow = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      ::slotted(*) {
+        /* Slotted content can assume a 1920×1080 canvas; AutoScaler rescales host */
+      }
+    `;
+        const slot = document.createElement('slot');
+        shadow.append(style, slot);
+    }
+    connectedCallback() {
+        // Handle properties that may have been set before upgrade
+        this.upgradeProperty('referenceWidth');
+        this.upgradeProperty('referenceHeight');
+        this.loadAttributes();
+        this.init();
+    }
+    disconnectedCallback() {
+        this.teardown();
+    }
+    attributeChangedCallback(name, _oldValue, _newValue) {
+        if (!this.isConnected)
+            return;
+        // Recalculate when configuration changes
+        if (AutoScalerElement.observedAttributes.includes(name)) {
+            this.loadAttributes();
+            this.init();
+        }
+    }
+    /**
+     * Upgrade any properties that were set on the instance before
+     * the custom element definition was loaded.
+     * See: https://web.dev/articles/custom-elements-best-practices
+     */
+    upgradeProperty(prop) {
+        if (Object.prototype.hasOwnProperty.call(this, prop)) {
+            const element = this;
+            const value = element[prop];
+            delete element[prop];
+            element[prop] = value;
+        }
+    }
+    loadAttributes() {
+        const refWidthAttr = this.getAttribute('reference-width');
+        const refHeightAttr = this.getAttribute('reference-height');
+        if (refWidthAttr && refHeightAttr) {
+            const referenceWidth = Number(refWidthAttr);
+            const referenceHeight = Number(refHeightAttr);
+            if (Number.isFinite(referenceWidth) && Number.isFinite(referenceHeight)) {
+                this._referenceWidth = referenceWidth;
+                this._referenceHeight = referenceHeight;
+            }
+        }
+        const orientationAttr = this.getAttribute('orientation');
+        if (orientationAttr === 'landscape' ||
+            orientationAttr === 'portrait' ||
+            orientationAttr === 'auto') {
+            this._orientation = orientationAttr;
+        }
+        else {
+            this._orientation = 'auto';
+        }
+        this._centerContent = this.hasAttribute('center-content');
+        const paddingAttr = this.getAttribute('padding');
+        if (paddingAttr && Number.isFinite(Number(paddingAttr))) {
+            this._padding = String(Number(paddingAttr));
+        }
+        else {
+            this._padding = '20';
+        }
+        const debounceMsAttr = this.getAttribute('debounce-ms');
+        if (debounceMsAttr && Number.isFinite(Number(debounceMsAttr))) {
+            this._debounceMs = Number(debounceMsAttr);
+        }
+        else {
+            this._debounceMs = 100;
+        }
+    }
+    init() {
+        if (!this._referenceWidth || !this._referenceHeight) {
+            return;
+        }
+        // Set initial container styles
+        this.style.width = `${this._referenceWidth}px`;
+        this.style.height = `${this._referenceHeight}px`;
+        this.style.padding = `${this._padding}px`;
+        this.style.position = 'fixed';
+        this.style.top = '0px';
+        this.style.transformOrigin = 'top left';
+        this.style.overflow = 'hidden';
+        // Calculate and apply initial scale
+        this.calculateAndApplyScale();
+        // Set up resize handling
+        this.setupResizeHandling();
+    }
+    calculateAndApplyScale() {
+        if (!this._referenceWidth || !this._referenceHeight) {
+            return;
+        }
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Determine orientation
+        let orientation;
+        if (this._orientation === 'auto' || !this._orientation) {
+            orientation = viewportWidth >= viewportHeight ? 'landscape' : 'portrait';
+        }
+        else {
+            orientation = this._orientation;
+        }
+        // Set container dimensions based on orientation
+        let effectiveWidth;
+        if (orientation === 'portrait') {
+            // Swap dimensions for portrait
+            this.style.width = `${this._referenceHeight}px`;
+            this.style.height = `${this._referenceWidth}px`;
+            effectiveWidth = this._referenceHeight;
+        }
+        else {
+            // Use original dimensions for landscape
+            this.style.width = `${this._referenceWidth}px`;
+            this.style.height = `${this._referenceHeight}px`;
+            effectiveWidth = this._referenceWidth;
+        }
+        // Set CSS variable for signage unit (su)
+        // 1su = 1% of reference width (e.g., 1920px / 100 = 19.2px)
+        const oneSU = effectiveWidth / 100;
+        this.style.setProperty('--su', `${oneSU}px`);
+        // Calculate scale based on orientation
+        let scaleX;
+        let scaleY;
+        if (orientation === 'landscape') {
+            scaleX = viewportWidth / this._referenceWidth;
+            scaleY = viewportHeight / this._referenceHeight;
+        }
+        else {
+            // Portrait mode - swap reference dimensions
+            scaleX = viewportWidth / this._referenceHeight;
+            scaleY = viewportHeight / this._referenceWidth;
+        }
+        // Use the smaller scale to ensure content fits
+        const scale = Math.min(scaleX, scaleY);
+        // Apply scale transform
+        this.style.transform = `scale(${scale})`;
+        // Calculate scaled dimensions (swap in portrait mode)
+        let scaledWidth;
+        if (orientation === 'portrait') {
+            scaledWidth = this._referenceHeight * scale;
+        }
+        else {
+            scaledWidth = this._referenceWidth * scale;
+        }
+        // Always center horizontally when scaled content is smaller than viewport
+        // This ensures content is centered for narrow screens like 480x800 portrait
+        if (scaledWidth < viewportWidth) {
+            const offsetX = (viewportWidth - scaledWidth) / 2;
+            this.style.left = `${offsetX}px`;
+        }
+        else if (this._centerContent) {
+            // If center-content is explicitly set, center even when content is larger
+            const offsetX = (viewportWidth - scaledWidth) / 2;
+            this.style.left = `${offsetX}px`;
+        }
+        else {
+            this.style.left = '0px';
+        }
+        // Dispatch event and update scale if changed
+        if (scale !== this.currentScale) {
+            this.currentScale = scale;
+            this.dispatchEvent(new CustomEvent('scalechange', {
+                detail: { scale },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    setupResizeHandling() {
+        this.teardownResizeHandling();
+        // Use ResizeObserver if available, fallback to window resize
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.debouncedResize();
+            });
+            this.resizeObserver.observe(document.body);
+        }
+        else {
+            window.addEventListener('resize', this.boundDebouncedResize);
+        }
+    }
+    debouncedResize() {
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+        this.resizeTimeout = window.setTimeout(() => {
+            this.calculateAndApplyScale();
+        }, this._debounceMs);
+    }
+    teardownResizeHandling() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = undefined;
+        }
+        window.removeEventListener('resize', this.boundDebouncedResize);
+    }
+    teardown() {
+        this.teardownResizeHandling();
+    }
+    /**
+     * Public API: get current scale factor
+     */
+    get scale() {
+        return this.currentScale;
+    }
+    /**
+     * Manually trigger scale recalculation
+     */
+    recalculate() {
+        this.calculateAndApplyScale();
+    }
+    /**
+     * Properties that reflect to attributes (primitive data).
+     * Keeping them in sync matches platform behavior.
+     */
+    get referenceWidth() {
+        return this._referenceWidth;
+    }
+    set referenceWidth(value) {
+        if (value === undefined || value === null) {
+            this.removeAttribute('reference-width');
+        }
+        else {
+            this.setAttribute('reference-width', String(value));
+        }
+    }
+    get referenceHeight() {
+        return this._referenceHeight;
+    }
+    set referenceHeight(value) {
+        if (value === undefined || value === null) {
+            this.removeAttribute('reference-height');
+        }
+        else {
+            this.setAttribute('reference-height', String(value));
+        }
+    }
+}
+// Register the custom element
+if (typeof window !== 'undefined' && !customElements.get('auto-scaler')) {
+    customElements.define('auto-scaler', AutoScalerElement);
+}

package/dist/components/brand-logo/brand-logo.d.ts

@@ -0,0 +1,42 @@
+/**
+ * BrandLogo Web Component
+ * Displays the branding logo from Screenly settings with fallback to screen name
+ *
+ * Usage:
+ * ```html
+ * <brand-logo></brand-logo>
+ * ```
+ *
+ * Attributes:
+ * - `show-name` (optional): Show screen name alongside logo (default: false)
+ * - `fallback-to-name` (optional): Show screen name if logo unavailable (default: true)
+ * - `max-width` (optional): Maximum width for logo (default: "120px")
+ * - `max-height` (optional): Maximum height for logo (default: "32px")
+ */
+export declare class BrandLogo extends HTMLElement {
+    private logoUrl;
+    private _showName;
+    private _fallbackToName;
+    private _maxWidth;
+    private _maxHeight;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private upgradeProperty;
+    private loadAttributes;
+    private updateCssProperties;
+    private loadLogo;
+    private updateLogo;
+    private updateFallback;
+    private render;
+    get showName(): boolean;
+    set showName(value: boolean);
+    get fallbackToName(): boolean;
+    set fallbackToName(value: boolean);
+    get maxWidth(): string;
+    set maxWidth(value: string);
+    get maxHeight(): string;
+    set maxHeight(value: string);
+}
+//# sourceMappingURL=brand-logo.d.ts.map

package/dist/components/brand-logo/brand-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-logo.d.ts","sourceRoot":"","sources":["../../../src/components/brand-logo/brand-logo.ts"],"names":[],"mappings":"AAmDA;;;;;;;;;;;;;;GAcG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACxC,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,eAAe,CAAgB;IACvC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,UAAU,CAAiB;IAEnC,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAWjB,wBAAwB;IAKxB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;YAKb,QAAQ;IAkBtB,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,MAAM;IAed,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1B;IAED,IAAI,cAAc,IAAI,OAAO,CAE5B;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,OAAO,EAEhC;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAMzB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAM1B;CACF"}

package/dist/components/brand-logo/brand-logo.js

@@ -0,0 +1,209 @@
+import { setupBrandingLogo, getScreenName } from '../../utils/index.js';
+const htmlTemplate = `
+<img alt="Brand Logo" />
+<span class="brand-name"></span>
+`;
+const cssTemplate = `
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+img {
+  height: var(--brand-logo-height, 32px);
+  width: auto;
+  max-width: var(--brand-logo-max-width, 120px);
+  object-fit: contain;
+  vertical-align: middle;
+  padding-right: 0.75rem;
+}
+
+img[src=""],
+img:not([src]) {
+  display: none;
+}
+
+.brand-name {
+  font-weight: 500;
+  font-size: 1.25rem;
+  letter-spacing: 0.025em;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.brand-name:empty {
+  display: none;
+}
+
+@media (orientation: portrait) {
+  .brand-name {
+    font-size: 1.5rem;
+  }
+}
+`;
+/**
+ * BrandLogo Web Component
+ * Displays the branding logo from Screenly settings with fallback to screen name
+ *
+ * Usage:
+ * ```html
+ * <brand-logo></brand-logo>
+ * ```
+ *
+ * Attributes:
+ * - `show-name` (optional): Show screen name alongside logo (default: false)
+ * - `fallback-to-name` (optional): Show screen name if logo unavailable (default: true)
+ * - `max-width` (optional): Maximum width for logo (default: "120px")
+ * - `max-height` (optional): Maximum height for logo (default: "32px")
+ */
+export class BrandLogo extends HTMLElement {
+    logoUrl = '';
+    _showName = false;
+    _fallbackToName = true;
+    _maxWidth = '120px';
+    _maxHeight = '32px';
+    static get observedAttributes() {
+        return ['show-name', 'fallback-to-name', 'max-width', 'max-height'];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.upgradeProperty('showName');
+        this.upgradeProperty('fallbackToName');
+        this.upgradeProperty('maxWidth');
+        this.upgradeProperty('maxHeight');
+        this.loadAttributes();
+        this.render();
+        this.loadLogo();
+    }
+    attributeChangedCallback() {
+        this.loadAttributes();
+        this.render();
+    }
+    upgradeProperty(prop) {
+        if (Object.prototype.hasOwnProperty.call(this, prop)) {
+            const element = this;
+            const value = element[prop];
+            delete element[prop];
+            element[prop] = value;
+        }
+    }
+    loadAttributes() {
+        this._showName = this.hasAttribute('show-name');
+        this._fallbackToName = this.getAttribute('fallback-to-name') !== 'false';
+        this._maxWidth = this.getAttribute('max-width') || '120px';
+        this._maxHeight = this.getAttribute('max-height') || '32px';
+        this.updateCssProperties();
+    }
+    updateCssProperties() {
+        this.style.setProperty('--brand-logo-height', this._maxHeight);
+        this.style.setProperty('--brand-logo-max-width', this._maxWidth);
+    }
+    async loadLogo() {
+        try {
+            const logoUrl = await setupBrandingLogo();
+            this.logoUrl = logoUrl;
+            if (logoUrl) {
+                this.updateLogo();
+            }
+            else if (this.fallbackToName) {
+                this.updateFallback();
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load branding logo:', error);
+            if (this.fallbackToName) {
+                this.updateFallback();
+            }
+        }
+    }
+    updateLogo() {
+        const img = this.shadowRoot.querySelector('img');
+        const nameEl = this.shadowRoot.querySelector('.brand-name');
+        if (img) {
+            img.src = this.logoUrl;
+            img.style.removeProperty('display');
+        }
+        if (nameEl && this._showName) {
+            const screenName = getScreenName();
+            if (screenName) {
+                nameEl.textContent = screenName;
+                nameEl.style.removeProperty('display');
+            }
+        }
+    }
+    updateFallback() {
+        const img = this.shadowRoot.querySelector('img');
+        const nameEl = this.shadowRoot.querySelector('.brand-name');
+        if (img) {
+            img.removeAttribute('src');
+        }
+        if (nameEl) {
+            const screenName = getScreenName();
+            if (screenName) {
+                nameEl.textContent = screenName;
+            }
+        }
+    }
+    render() {
+        const style = this.shadowRoot.querySelector('style');
+        if (!style) {
+            // First render
+            this.shadowRoot.innerHTML = `
+        <style>${cssTemplate}</style>
+        ${htmlTemplate}
+      `;
+        }
+    }
+    // Public properties reflecting to attributes (primitive data)
+    get showName() {
+        return this._showName;
+    }
+    set showName(value) {
+        if (value) {
+            this.setAttribute('show-name', '');
+        }
+        else {
+            this.removeAttribute('show-name');
+        }
+    }
+    get fallbackToName() {
+        return this._fallbackToName;
+    }
+    set fallbackToName(value) {
+        this.setAttribute('fallback-to-name', value ? 'true' : 'false');
+    }
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    set maxWidth(value) {
+        if (!value) {
+            this.removeAttribute('max-width');
+        }
+        else {
+            this.setAttribute('max-width', value);
+        }
+    }
+    get maxHeight() {
+        return this._maxHeight;
+    }
+    set maxHeight(value) {
+        if (!value) {
+            this.removeAttribute('max-height');
+        }
+        else {
+            this.setAttribute('max-height', value);
+        }
+    }
+}
+// Register the custom element
+if (typeof window !== 'undefined' && !customElements.get('brand-logo')) {
+    customElements.define('brand-logo', BrandLogo);
+}

package/dist/components/calendar-views/calendar-view-utils.d.ts

@@ -0,0 +1,5 @@
+import type { CalendarEvent, EventLayout } from './event-layout.js';
+import type { TimeSlot } from './calendar-window-utils.js';
+export declare function buildTimeGutter(timeSlots: TimeSlot[]): HTMLElement;
+export declare function buildEventElement(event: CalendarEvent, windowStartHour: number, layout: EventLayout, locale: string, timezone: string): HTMLElement;
+//# sourceMappingURL=calendar-view-utils.d.ts.map

package/dist/components/calendar-views/calendar-view-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-view-utils.d.ts","sourceRoot":"","sources":["../../../src/components/calendar-views/calendar-view-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAO1D,wBAAgB,eAAe,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,WAAW,CAUlE;AAgED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,aAAa,EACpB,eAAe,EAAE,MAAM,EACvB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,WAAW,CA0Bb"}

package/dist/components/calendar-views/calendar-view-utils.js

@@ -0,0 +1,73 @@
+import { getEventStyle, formatEventStartTime, formatEventTime, } from './weekly-calendar-view/weekly-calendar-view-utils.js';
+export function buildTimeGutter(timeSlots) {
+    const timeGutter = document.createElement('div');
+    timeGutter.className = 'time-gutter';
+    for (const slot of timeSlots) {
+        const label = document.createElement('div');
+        label.className = 'time-label';
+        label.textContent = slot.time;
+        timeGutter.appendChild(label);
+    }
+    return timeGutter;
+}
+function buildCompactEventItem(event, locale, timezone) {
+    const item = document.createElement('div');
+    item.className = 'event-item event-compact';
+    if (event.backgroundColor) {
+        item.style.setProperty('background-color', event.backgroundColor);
+    }
+    const titleEl = document.createElement('div');
+    titleEl.className = 'event-title';
+    titleEl.textContent = `${event.title}, `;
+    const inlineTimeEl = document.createElement('span');
+    inlineTimeEl.className = 'event-inline-time';
+    inlineTimeEl.textContent = formatEventStartTime(event.startTime, locale, timezone);
+    titleEl.appendChild(inlineTimeEl);
+    item.appendChild(titleEl);
+    return item;
+}
+function buildFullEventItem(event, style, locale, timezone) {
+    const item = document.createElement('div');
+    const itemClasses = ['event-item'];
+    if (style.clippedTop)
+        itemClasses.push('clipped-top');
+    if (style.clippedBottom)
+        itemClasses.push('clipped-bottom');
+    item.className = itemClasses.join(' ');
+    if (event.backgroundColor) {
+        item.style.setProperty('background-color', event.backgroundColor);
+    }
+    const titleEl = document.createElement('div');
+    titleEl.className = 'event-title';
+    titleEl.textContent = event.title;
+    const timeEl = document.createElement('div');
+    timeEl.className = 'event-time';
+    timeEl.textContent = formatEventTime(event.startTime, event.endTime, locale, timezone);
+    item.appendChild(titleEl);
+    item.appendChild(timeEl);
+    return item;
+}
+export function buildEventElement(event, windowStartHour, layout, locale, timezone) {
+    const style = getEventStyle(event, windowStartHour, layout, timezone);
+    const wrapper = document.createElement('div');
+    wrapper.className = 'event-wrapper';
+    wrapper.style.setProperty('top', `${style.topPercent}%`);
+    wrapper.style.setProperty('height', `${style.heightPercent}%`);
+    wrapper.style.setProperty('left', `${style.leftPercent}%`);
+    wrapper.style.setProperty('z-index', String(style.zIndex));
+    if (style.isLastColumn) {
+        wrapper.style.setProperty('right', '0');
+    }
+    else {
+        wrapper.style.setProperty('width', `${style.widthPercent}%`);
+    }
+    // Events shorter than 45 minutes don't have room for a stacked title + time range,
+    // so they get the compact inline layout instead.
+    const COMPACT_THRESHOLD_PERCENT = (45 / 60) * (100 / 12);
+    const isCompact = style.heightPercent <= COMPACT_THRESHOLD_PERCENT;
+    const item = isCompact
+        ? buildCompactEventItem(event, locale, timezone)
+        : buildFullEventItem(event, style, locale, timezone);
+    wrapper.appendChild(item);
+    return wrapper;
+}

package/dist/components/calendar-views/calendar-window-utils.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarEvent } from './event-layout.js';
+export interface TimeSlot {
+    time: string;
+    hour: number;
+}
+export declare function getWindowStartHour(currentHour: number): number;
+export declare function generateTimeSlots(startHour: number, now: Date, locale: string, timezone: string): TimeSlot[];
+export declare function filterEventsForWindow(events: CalendarEvent[], dayDateStr: string, windowStartHour: number, timezone: string): CalendarEvent[];
+//# sourceMappingURL=calendar-window-utils.d.ts.map

package/dist/components/calendar-views/calendar-window-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-window-utils.d.ts","sourceRoot":"","sources":["../../../src/components/calendar-views/calendar-window-utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAKtD,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb;AAKD,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,EACjB,GAAG,EAAE,IAAI,EACT,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,QAAQ,EAAE,CA0BZ;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,aAAa,EAAE,EACvB,UAAU,EAAE,MAAM,EAClB,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,GACf,aAAa,EAAE,CAgBjB"}