@screenly/edge-apps 0.0.1 → 0.0.2

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

@@ -0,0 +1,26 @@
+import { type CalendarEvent } from '../event-layout.js';
+export type { CalendarEvent };
+export declare class WeeklyCalendarView extends HTMLElement {
+    private _events;
+    private _now;
+    private _timezone;
+    private _locale;
+    private _initialized;
+    private _lastWindowStartHour;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldVal: string, newVal: string): void;
+    get events(): CalendarEvent[];
+    set events(value: CalendarEvent[]);
+    get now(): Date;
+    set now(value: Date);
+    private _getWeekStart;
+    private _getEventLayouts;
+    private _buildDayHeader;
+    private _buildDayEventsArea;
+    private _buildDayColumn;
+    private _updateTimeIndicator;
+    private _render;
+}
+//# sourceMappingURL=weekly-calendar-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"weekly-calendar-view.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/weekly-calendar-view/weekly-calendar-view.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,oBAAoB,CAAA;AAc3B,YAAY,EAAE,aAAa,EAAE,CAAA;AAE7B,qBAAa,kBAAmB,SAAQ,WAAW;IACjD,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,IAAI,CAAmB;IAC/B,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,oBAAoB,CAAa;IAEzC,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAKjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAMtE,IAAI,MAAM,IAAI,aAAa,EAAE,CAE5B;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,EAGhC;IAED,IAAI,GAAG,IAAI,IAAI,CAEd;IAED,IAAI,GAAG,CAAC,KAAK,EAAE,IAAI,EAWlB;IAED,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB;IAyCxB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,mBAAmB;IAiC3B,OAAO,CAAC,eAAe;IAyCvB,OAAO,CAAC,oBAAoB;IAyB5B,OAAO,CAAC,OAAO;CAuDhB"}

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

@@ -0,0 +1,220 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { findEventClusters, calculateClusterLayouts, getEventKey, } from '../event-layout.js';
+import { COMPONENT_CSS } from './weekly-calendar-view-styles.js';
+import { getLocalizedDayNames } from '../../../utils/index.js';
+import { generateTimeSlots, getWindowStartHour, filterEventsForWindow, } from '../calendar-window-utils.js';
+import { setAttribute } from './weekly-calendar-view-utils.js';
+import { buildTimeGutter, buildEventElement } from '../calendar-view-utils.js';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+export class WeeklyCalendarView extends HTMLElement {
+    _events = [];
+    _now = new Date();
+    _timezone = 'UTC';
+    _locale = 'en';
+    _initialized = false;
+    _lastWindowStartHour = -1;
+    static get observedAttributes() {
+        return ['timezone', 'locale'];
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this._initialized = true;
+        this._render();
+    }
+    attributeChangedCallback(name, _oldVal, newVal) {
+        if (name === 'timezone')
+            this._timezone = newVal || 'UTC';
+        if (name === 'locale')
+            this._locale = newVal || 'en';
+        if (this._initialized)
+            this._render();
+    }
+    get events() {
+        return this._events;
+    }
+    set events(value) {
+        this._events = value || [];
+        if (this._initialized)
+            this._render();
+    }
+    get now() {
+        return this._now;
+    }
+    set now(value) {
+        this._now = value;
+        if (!this._initialized)
+            return;
+        const newWindowStartHour = getWindowStartHour(dayjs(value).tz(this._timezone).hour());
+        if (newWindowStartHour !== this._lastWindowStartHour) {
+            this._render();
+        }
+        else {
+            this._updateTimeIndicator();
+        }
+    }
+    _getWeekStart() {
+        const timezone = this._timezone;
+        const now = dayjs(this._now).tz(timezone);
+        const weekStart = now.startOf('week');
+        return weekStart.toDate();
+    }
+    _getEventLayouts() {
+        const timezone = this._timezone;
+        const weekStartDate = dayjs(this._getWeekStart()).tz(timezone);
+        const layoutMap = new Map();
+        const eventsByDay = new Map();
+        const weekEvents = this._events.filter((event) => {
+            const eventStart = dayjs(event.startTime).tz(timezone);
+            return (!eventStart.isBefore(weekStartDate) &&
+                eventStart.isBefore(weekStartDate.add(7, 'day')));
+        });
+        weekEvents.forEach((event) => {
+            const eventStart = dayjs(event.startTime).tz(timezone);
+            const dayDiff = eventStart.diff(weekStartDate, 'day');
+            const dayIndex = ((dayDiff % 7) + 7) % 7;
+            if (!eventsByDay.has(dayIndex)) {
+                eventsByDay.set(dayIndex, []);
+            }
+            eventsByDay.get(dayIndex).push(event);
+        });
+        for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
+            const dayEvents = eventsByDay.get(dayIndex) || [];
+            if (dayEvents.length === 0)
+                continue;
+            const clusters = findEventClusters(dayEvents, timezone);
+            for (const cluster of clusters) {
+                const clusterLayouts = calculateClusterLayouts(cluster, timezone);
+                for (const [event, layout] of clusterLayouts) {
+                    layoutMap.set(getEventKey(event), layout);
+                }
+            }
+        }
+        return layoutMap;
+    }
+    _buildDayHeader(dayDayjs, isToday) {
+        const locale = this._locale;
+        const dayHeader = document.createElement('div');
+        dayHeader.className = isToday ? 'day-header today' : 'day-header';
+        const dayName = document.createElement('span');
+        dayName.className = 'day-name';
+        dayName.textContent =
+            getLocalizedDayNames(locale).short[dayDayjs.day()] || '';
+        dayHeader.appendChild(dayName);
+        const dayDateNum = document.createElement('span');
+        dayDateNum.className = 'day-date';
+        dayDateNum.textContent = String(dayDayjs.date());
+        dayHeader.appendChild(dayDateNum);
+        return dayHeader;
+    }
+    _buildDayEventsArea(dayDateStr, windowStartHour, eventLayouts) {
+        const timezone = this._timezone;
+        const locale = this._locale;
+        const eventsArea = document.createElement('div');
+        eventsArea.className = 'events-area';
+        const dayEvents = filterEventsForWindow(this._events, dayDateStr, windowStartHour, timezone);
+        for (const event of dayEvents) {
+            const layout = eventLayouts.get(getEventKey(event)) ?? {
+                event,
+                column: 0,
+                columnSpan: 1,
+                totalColumns: 1,
+            };
+            eventsArea.appendChild(buildEventElement(event, windowStartHour, layout, locale, timezone));
+        }
+        return eventsArea;
+    }
+    _buildDayColumn(dayIdx, weekStart, windowStartHour, todayStr, timeIndicatorPercent, eventLayouts) {
+        const timezone = this._timezone;
+        const dayDayjs = dayjs(weekStart).tz(timezone).add(dayIdx, 'day');
+        const dayDateStr = dayDayjs.format('YYYY-MM-DD');
+        const isToday = dayDateStr === todayStr;
+        const dayCol = document.createElement('div');
+        dayCol.className = 'day-column';
+        setAttribute(dayCol, 'data-day-index', String(dayIdx));
+        dayCol.appendChild(this._buildDayHeader(dayDayjs, isToday));
+        const dayBody = document.createElement('div');
+        dayBody.className = 'day-body';
+        for (let rowIdx = 0; rowIdx < 12; rowIdx++) {
+            const hourRow = document.createElement('div');
+            hourRow.className = 'hour-row';
+            dayBody.appendChild(hourRow);
+        }
+        dayBody.appendChild(this._buildDayEventsArea(dayDateStr, windowStartHour, eventLayouts));
+        if (isToday && timeIndicatorPercent >= 0 && timeIndicatorPercent <= 100) {
+            const indicator = document.createElement('div');
+            indicator.className = 'current-time-indicator';
+            indicator.style.setProperty('top', `${timeIndicatorPercent}%`);
+            dayBody.appendChild(indicator);
+        }
+        dayCol.appendChild(dayBody);
+        return dayCol;
+    }
+    _updateTimeIndicator() {
+        const shadow = this.shadowRoot;
+        const timezone = this._timezone;
+        const currentTime = dayjs(this._now).tz(timezone);
+        const currentHour = currentTime.hour();
+        const currentMinute = currentTime.minute();
+        const windowStartHour = this._lastWindowStartHour;
+        const slotIndex = currentHour - windowStartHour;
+        const timeIndicatorPercent = slotIndex >= 0 && slotIndex < 12
+            ? ((slotIndex + currentMinute / 60) / 12) * 100
+            : -1;
+        const indicator = shadow.querySelector('.current-time-indicator');
+        if (indicator) {
+            if (timeIndicatorPercent >= 0 && timeIndicatorPercent <= 100) {
+                indicator.style.setProperty('top', `${timeIndicatorPercent}%`);
+            }
+            else {
+                indicator.remove();
+            }
+        }
+    }
+    _render() {
+        const shadow = this.shadowRoot;
+        const timezone = this._timezone;
+        const locale = this._locale;
+        const now = this._now;
+        const currentTime = dayjs(now).tz(timezone);
+        const currentHour = currentTime.hour();
+        const currentMinute = currentTime.minute();
+        const windowStartHour = getWindowStartHour(currentHour);
+        this._lastWindowStartHour = windowStartHour;
+        const timeSlots = generateTimeSlots(windowStartHour, now, locale, timezone);
+        const weekStart = this._getWeekStart();
+        const eventLayouts = this._getEventLayouts();
+        const todayStr = currentTime.format('YYYY-MM-DD');
+        const currentSlotIndex = timeSlots.findIndex((slot) => slot.hour === currentHour);
+        const timeIndicatorPercent = currentSlotIndex >= 0
+            ? ((currentSlotIndex + currentMinute / 60) / 12) * 100
+            : -1;
+        shadow.innerHTML = `<style>${COMPONENT_CSS}</style>`;
+        const container = document.createElement('div');
+        container.className = 'weekly-calendar-container';
+        const title = document.createElement('p');
+        title.className = 'this-week-title';
+        title.textContent = 'This week';
+        container.appendChild(title);
+        const weekGrid = document.createElement('div');
+        weekGrid.className = 'week-grid';
+        weekGrid.appendChild(buildTimeGutter(timeSlots));
+        const daysGrid = document.createElement('div');
+        daysGrid.className = 'days-grid';
+        for (let dayIdx = 0; dayIdx < 7; dayIdx++) {
+            daysGrid.appendChild(this._buildDayColumn(dayIdx, weekStart, windowStartHour, todayStr, timeIndicatorPercent, eventLayouts));
+        }
+        weekGrid.appendChild(daysGrid);
+        container.appendChild(weekGrid);
+        shadow.appendChild(container);
+    }
+}
+if (typeof window !== 'undefined' &&
+    !customElements.get('weekly-calendar-view')) {
+    customElements.define('weekly-calendar-view', WeeklyCalendarView);
+}

package/dist/components/dev-tools/dev-tools.d.ts

@@ -0,0 +1,48 @@
+/**
+ * <edge-app-devtools>
+ *
+ * Development overlay showing viewport, reference resolution, and scale.
+ * Intended to be used alongside <auto-scaler>. Listens for the
+ * `scalechange` event dispatched by the scaler.
+ *
+ * Usage:
+ * ```html
+ * <auto-scaler reference-width="1920" reference-height="1080">
+ *   <!-- app content -->
+ * </auto-scaler>
+ * <edge-app-devtools reference-width="1920" reference-height="1080"></edge-app-devtools>
+ * ```
+ */
+export declare class EdgeAppDevToolsElement extends HTMLElement {
+    private infoPanel;
+    private isVisible;
+    private scale;
+    private boundOnResize;
+    private boundOnKeyDown;
+    private boundOnScaleChange;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    private isDevelopmentMode;
+    private upgradeProperty;
+    private get referenceWidth();
+    private get referenceHeight();
+    private updateInfo;
+    /**
+     * Toggle visibility of dev tools.
+     * Does not dispatch events in response to host setting properties,
+     * in line with best practices.
+     */
+    toggle(): void;
+    show(): void;
+    hide(): void;
+    /**
+     * Imperative API for AutoScaler or host code to update the scale.
+     * Prefer listening to `scalechange` events on <auto-scaler>,
+     * but this method is provided for compatibility.
+     */
+    updateScale(scale: number): void;
+}
+//# sourceMappingURL=dev-tools.d.ts.map

package/dist/components/dev-tools/dev-tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-tools.d.ts","sourceRoot":"","sources":["../../../src/components/dev-tools/dev-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,cAAc,CAIrB;IACD,OAAO,CAAC,kBAAkB,CAKzB;IAED,MAAM,KAAK,kBAAkB,aAE5B;;IA4DD,iBAAiB;IAyBjB,oBAAoB;IASpB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,SAAS,EAAE,MAAM,GAAG,IAAI;IAM1B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,eAAe;IAUvB,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,CAAC,UAAU;IAkBlB;;;;OAIG;IACI,MAAM;IAKN,IAAI;IAKJ,IAAI;IAKX;;;;OAIG;IACI,WAAW,CAAC,KAAK,EAAE,MAAM;CAIjC"}

package/dist/components/dev-tools/dev-tools.js

@@ -0,0 +1,186 @@
+/**
+ * <edge-app-devtools>
+ *
+ * Development overlay showing viewport, reference resolution, and scale.
+ * Intended to be used alongside <auto-scaler>. Listens for the
+ * `scalechange` event dispatched by the scaler.
+ *
+ * Usage:
+ * ```html
+ * <auto-scaler reference-width="1920" reference-height="1080">
+ *   <!-- app content -->
+ * </auto-scaler>
+ * <edge-app-devtools reference-width="1920" reference-height="1080"></edge-app-devtools>
+ * ```
+ */
+export class EdgeAppDevToolsElement extends HTMLElement {
+    infoPanel;
+    isVisible = false;
+    scale = 1;
+    boundOnResize = () => this.updateInfo();
+    boundOnKeyDown = (event) => {
+        if (event.key === 'd' || event.key === 'D') {
+            this.toggle();
+        }
+    };
+    boundOnScaleChange = (event) => {
+        const detail = event.detail;
+        if (detail && typeof detail.scale === 'number') {
+            this.updateScale(detail.scale);
+        }
+    };
+    static get observedAttributes() {
+        return ['reference-width', 'reference-height'];
+    }
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+        z-index: 9999;
+        display: none;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .info-panel {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        background: rgba(0, 0, 0, 0.8);
+        color: #00ff00;
+        padding: 12px 16px;
+        border-radius: 4px;
+        font-family: 'Courier New', monospace;
+        font-size: 12px;
+        line-height: 1.6;
+        pointer-events: auto;
+        user-select: none;
+        min-width: 200px;
+      }
+
+      .info-panel__title {
+        font-weight: bold;
+        margin-bottom: 8px;
+        border-bottom: 1px solid #00ff00;
+        padding-bottom: 4px;
+      }
+
+      .info-panel__hint {
+        margin-top: 8px;
+        font-size: 10px;
+        color: #888;
+      }
+    `;
+        this.infoPanel = document.createElement('div');
+        this.infoPanel.className = 'info-panel';
+        shadow.append(style, this.infoPanel);
+    }
+    connectedCallback() {
+        this.upgradeProperty('referenceWidth');
+        this.upgradeProperty('referenceHeight');
+        if (!this.isDevelopmentMode()) {
+            // In production we keep the element present but hidden
+            this.hide();
+            return;
+        }
+        window.addEventListener('resize', this.boundOnResize);
+        window.addEventListener('keydown', this.boundOnKeyDown);
+        // Listen for scalechange events from <auto-scaler> elements
+        // Events bubble up to document level, so we can listen there
+        // This works whether auto-scaler is a parent or sibling
+        document.addEventListener('scalechange', this.boundOnScaleChange);
+        this.show();
+        this.updateInfo();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.boundOnResize);
+        window.removeEventListener('keydown', this.boundOnKeyDown);
+        document.removeEventListener('scalechange', this.boundOnScaleChange);
+    }
+    attributeChangedCallback(_name, _oldValue, _newValue) {
+        if (!this.isConnected)
+            return;
+        this.updateInfo();
+    }
+    isDevelopmentMode() {
+        const meta = import.meta;
+        return (meta.env?.DEV ||
+            window.location.hostname === 'localhost' ||
+            window.location.hostname === '127.0.0.1' ||
+            window.location.search.includes('dev=true'));
+    }
+    upgradeProperty(prop) {
+        if (Object.prototype.hasOwnProperty.call(this, prop)) {
+            const element = this;
+            const value = element[prop];
+            delete element[prop];
+            element[prop] = value;
+        }
+    }
+    get referenceWidth() {
+        const attr = this.getAttribute('reference-width');
+        const value = attr ? Number(attr) : 1920;
+        return Number.isFinite(value) ? value : 1920;
+    }
+    get referenceHeight() {
+        const attr = this.getAttribute('reference-height');
+        const value = attr ? Number(attr) : 1080;
+        return Number.isFinite(value) ? value : 1080;
+    }
+    updateInfo() {
+        if (!this.infoPanel)
+            return;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const refWidth = this.referenceWidth;
+        const refHeight = this.referenceHeight;
+        this.infoPanel.innerHTML = `
+      <div class="info-panel__title">Edge App Dev Tools</div>
+      <div><strong>Viewport:</strong> ${viewportWidth} × ${viewportHeight}px</div>
+      <div><strong>Reference:</strong> ${refWidth} × ${refHeight}px</div>
+      <div><strong>Scale:</strong> ${this.scale.toFixed(3)}</div>
+      <div><strong>Orientation:</strong> ${viewportWidth >= viewportHeight ? 'Landscape' : 'Portrait'}</div>
+      <div class="info-panel__hint">Press 'D' to toggle</div>
+    `;
+    }
+    /**
+     * Toggle visibility of dev tools.
+     * Does not dispatch events in response to host setting properties,
+     * in line with best practices.
+     */
+    toggle() {
+        this.isVisible = !this.isVisible;
+        this.style.display = this.isVisible ? 'block' : 'none';
+    }
+    show() {
+        this.isVisible = true;
+        this.style.display = 'block';
+    }
+    hide() {
+        this.isVisible = false;
+        this.style.display = 'none';
+    }
+    /**
+     * Imperative API for AutoScaler or host code to update the scale.
+     * Prefer listening to `scalechange` events on <auto-scaler>,
+     * but this method is provided for compatibility.
+     */
+    updateScale(scale) {
+        this.scale = scale;
+        this.updateInfo();
+    }
+}
+// Register the custom element
+if (typeof window !== 'undefined' && !customElements.get('edge-app-devtools')) {
+    customElements.define('edge-app-devtools', EdgeAppDevToolsElement);
+}

package/dist/components/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Web Components for Edge Apps
+ * Reusable UI components that can be used across multiple apps
+ */
+export { AppHeader } from './app-header/app-header.js';
+export { AutoScalerElement } from './auto-scaler/auto-scaler.js';
+export { BrandLogo } from './brand-logo/brand-logo.js';
+export { EdgeAppDevToolsElement } from './dev-tools/dev-tools.js';
+export { WeeklyCalendarView } from './calendar-views/weekly-calendar-view/index.js';
+export { DailyCalendarView } from './calendar-views/daily-calendar-view/index.js';
+export { ScheduleCalendarView } from './calendar-views/schedule-calendar-view/index.js';
+export type { CalendarEvent } from './calendar-views/weekly-calendar-view/index.js';
+import './register.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAA;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAA;AACjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAA;AACvF,YAAY,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAGnF,OAAO,eAAe,CAAA"}

package/dist/components/index.js

@@ -0,0 +1,13 @@
+/**
+ * Web Components for Edge Apps
+ * Reusable UI components that can be used across multiple apps
+ */
+export { AppHeader } from './app-header/app-header.js';
+export { AutoScalerElement } from './auto-scaler/auto-scaler.js';
+export { BrandLogo } from './brand-logo/brand-logo.js';
+export { EdgeAppDevToolsElement } from './dev-tools/dev-tools.js';
+export { WeeklyCalendarView } from './calendar-views/weekly-calendar-view/index.js';
+export { DailyCalendarView } from './calendar-views/daily-calendar-view/index.js';
+export { ScheduleCalendarView } from './calendar-views/schedule-calendar-view/index.js';
+// Side-effect: Register all components when this module is imported
+import './register.js';

package/dist/components/register.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Side-effect import file to register all web components
+ * Import this file to ensure all components are registered as custom elements
+ */
+import './brand-logo/brand-logo.js';
+import './app-header/app-header.js';
+import './auto-scaler/auto-scaler.js';
+import './dev-tools/dev-tools.js';
+import './calendar-views/weekly-calendar-view/weekly-calendar-view.js';
+import './calendar-views/daily-calendar-view/daily-calendar-view.js';
+import './calendar-views/schedule-calendar-view/schedule-calendar-view.js';
+//# sourceMappingURL=register.d.ts.map

package/dist/components/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../src/components/register.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,0BAA0B,CAAA;AACjC,OAAO,+DAA+D,CAAA;AACtE,OAAO,6DAA6D,CAAA;AACpE,OAAO,mEAAmE,CAAA"}

package/dist/components/register.js

@@ -0,0 +1,11 @@
+/**
+ * Side-effect import file to register all web components
+ * Import this file to ensure all components are registered as custom elements
+ */
+import './brand-logo/brand-logo.js';
+import './app-header/app-header.js';
+import './auto-scaler/auto-scaler.js';
+import './dev-tools/dev-tools.js';
+import './calendar-views/weekly-calendar-view/weekly-calendar-view.js';
+import './calendar-views/daily-calendar-view/daily-calendar-view.js';
+import './calendar-views/schedule-calendar-view/schedule-calendar-view.js';

package/dist/core/index.d.ts

@@ -0,0 +1,30 @@
+import type { AutoScalerElement } from '../components/auto-scaler/auto-scaler.js';
+import type { EdgeAppDevToolsElement } from '../components/dev-tools/dev-tools.js';
+import '../components/register.js';
+/**
+ * Initialize an edge app with auto-scaling
+ * Convenience function for quick setup using web components
+ *
+ * @example
+ * ```typescript
+ * const { scaler, devTools } = initEdgeApp('app', {
+ *   referenceWidth: 1920,
+ *   referenceHeight: 1080,
+ *   enableDevTools: true,
+ * })
+ * ```
+ */
+export declare function initEdgeApp(containerId: string, options: {
+    referenceWidth: number;
+    referenceHeight: number;
+    orientation?: 'landscape' | 'portrait' | 'auto';
+    centerContent?: boolean;
+    padding?: string;
+    debounceMs?: number;
+    enableDevTools?: boolean;
+    safeZone?: unknown;
+}): {
+    scaler: AutoScalerElement;
+    devTools?: EdgeAppDevToolsElement;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AACjF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAGlF,OAAO,2BAA2B,CAAA;AAElC;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IACP,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAA;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GACA;IAAE,MAAM,EAAE,iBAAiB,CAAC;IAAC,QAAQ,CAAC,EAAE,sBAAsB,CAAA;CAAE,CA+ElE"}

package/dist/core/index.js

@@ -0,0 +1,77 @@
+// Side-effect: Ensure components are registered when initEdgeApp is used
+import '../components/register.js';
+/**
+ * Initialize an edge app with auto-scaling
+ * Convenience function for quick setup using web components
+ *
+ * @example
+ * ```typescript
+ * const { scaler, devTools } = initEdgeApp('app', {
+ *   referenceWidth: 1920,
+ *   referenceHeight: 1080,
+ *   enableDevTools: true,
+ * })
+ * ```
+ */
+export function initEdgeApp(containerId, options) {
+    const container = document.getElementById(containerId);
+    if (!container) {
+        throw new Error(`Container element with id "${containerId}" not found`);
+    }
+    // Ensure components are registered (they auto-register when imported)
+    // Components are registered via side-effect imports in components/register.ts
+    // This is handled when user imports '@screenly/edge-apps/components'
+    // Create <auto-scaler> element
+    const scalerEl = document.createElement('auto-scaler');
+    scalerEl.setAttribute('reference-width', String(options.referenceWidth));
+    scalerEl.setAttribute('reference-height', String(options.referenceHeight));
+    if (options.orientation) {
+        scalerEl.setAttribute('orientation', options.orientation);
+    }
+    if (options.centerContent !== undefined) {
+        if (options.centerContent) {
+            scalerEl.setAttribute('center-content', '');
+        }
+        else {
+            scalerEl.removeAttribute('center-content');
+        }
+    }
+    if (options.padding) {
+        scalerEl.setAttribute('padding', options.padding);
+    }
+    if (options.debounceMs) {
+        scalerEl.setAttribute('debounce-ms', String(options.debounceMs));
+    }
+    // Move container content into scaler element
+    // Store original children
+    const children = Array.from(container.childNodes);
+    // Move children into scaler first
+    children.forEach((child) => {
+        scalerEl.appendChild(child);
+    });
+    // Replace container children with scaler
+    container.replaceChildren(scalerEl);
+    // Create dev tools if enabled
+    let devToolsEl;
+    if (options.enableDevTools) {
+        devToolsEl = document.createElement('edge-app-devtools');
+        devToolsEl.setAttribute('reference-width', String(options.referenceWidth));
+        devToolsEl.setAttribute('reference-height', String(options.referenceHeight));
+        // Listen for scalechange events from scaler
+        scalerEl.addEventListener('scalechange', ((event) => {
+            if (devToolsEl && event.detail?.scale) {
+                devToolsEl.updateScale(event.detail.scale);
+            }
+        }));
+        // Append to body (dev tools should be at root level)
+        document.body.appendChild(devToolsEl);
+        // Update dev tools with initial scale after scaler is connected
+        // Use a small delay to ensure scaler has calculated initial scale
+        setTimeout(() => {
+            if (devToolsEl && scalerEl.scale) {
+                devToolsEl.updateScale(scalerEl.scale);
+            }
+        }, 0);
+    }
+    return { scaler: scalerEl, devTools: devToolsEl };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './utils/index.js';
+export * from './core/index.js';
+export * from './components/index.js';
+export * from './types/index.js';
+//# sourceMappingURL=index.d.ts.map