@screenly/edge-apps 0.0.1 → 0.0.3

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

@@ -0,0 +1,57 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+// Once the current hour is past noon, lock the window to 1 PM so the view
+// always shows 13:00–01:00 for the rest of the afternoon and evening.
+// Before 1 PM the window simply starts at the current hour.
+export function getWindowStartHour(currentHour) {
+    return currentHour > 12 ? 13 : currentHour;
+}
+export function generateTimeSlots(startHour, now, locale, timezone) {
+    const slots = [];
+    for (let i = 0; i < 12; i++) {
+        const hour = (startHour + i) % 24;
+        const baseDate = dayjs(now)
+            .tz(timezone)
+            .hour(hour)
+            .minute(0)
+            .second(0)
+            .millisecond(0)
+            .toDate();
+        let timeString;
+        try {
+            timeString = baseDate.toLocaleTimeString(locale, {
+                hour: 'numeric',
+                minute: '2-digit',
+                timeZone: timezone,
+            });
+        }
+        catch {
+            const formattedHour = hour === 0 ? 12 : hour % 12 || 12;
+            const ampm = hour < 12 ? 'AM' : 'PM';
+            timeString = `${formattedHour}:00 ${ampm}`;
+        }
+        slots.push({ time: timeString, hour });
+    }
+    return slots;
+}
+export function filterEventsForWindow(events, dayDateStr, windowStartHour, timezone) {
+    const windowStart = dayjs
+        .tz(`${dayDateStr}T00:00:00`, timezone)
+        .add(windowStartHour, 'hour');
+    const windowEnd = windowStart.add(12, 'hour');
+    const windowStartMs = windowStart.valueOf();
+    const windowEndMs = windowEnd.valueOf();
+    return events.filter((event) => {
+        if (event.isAllDay)
+            return false;
+        const eventStart = dayjs(event.startTime).tz(timezone);
+        if (eventStart.format('YYYY-MM-DD') !== dayDateStr)
+            return false;
+        const eventStartMs = eventStart.valueOf();
+        const eventEndMs = dayjs(event.endTime).tz(timezone).valueOf();
+        return eventStartMs < windowEndMs && eventEndMs > windowStartMs;
+    });
+}

package/dist/components/calendar-views/daily-calendar-view/daily-calendar-view-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_CSS = ":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  font-family: 'Inter', system-ui, sans-serif;\n  overflow: hidden;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n.daily-calendar-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: 1rem 1.25rem 1rem 1rem;\n}\n\n.today-title {\n  font-size: 2.8125rem;\n  font-weight: 400;\n  font-style: normal;\n  color: var(--theme-color-primary, #0f3a97);\n  letter-spacing: -0.1125rem;\n  margin: 2rem 0 2.875rem 0;\n  line-height: normal;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.day-grid {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: #fff;\n  border-radius: 0.75rem;\n  overflow: hidden;\n  padding-top: 1.25rem;\n}\n\n.time-gutter {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 6.5rem;\n}\n\n.time-label {\n  flex: 1;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding-right: 1rem;\n  font-size: 0.98rem;\n  color: #6b7280;\n  white-space: nowrap;\n  transform: translateY(-0.5em);\n}\n\n.day-body {\n  flex: 1;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n  border-left: 0.0625rem solid #f3f4f6;\n}\n\n.hour-row {\n  flex: 1;\n  border-bottom: 0.0625rem solid #f3f4f6;\n  position: relative;\n  min-height: 0;\n}\n\n.hour-row:last-child {\n  border-bottom: none;\n}\n\n.events-area {\n  position: absolute;\n  top: 0;\n  left: 0.653rem;\n  bottom: 0;\n  right: 1.25rem;\n}\n\n.event-wrapper {\n  position: absolute;\n  z-index: 2;\n  outline: 0.125rem solid white;\n  border-radius: 0 0.653rem 0.653rem 0;\n}\n\n.event-item {\n  height: 100%;\n  background: #ededed;\n  border-left: 0.327rem solid var(--theme-color-primary, #0f3a97);\n  border-radius: 0 0.653rem 0.653rem 0;\n  padding: 0.5rem 0.98rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 0.327rem;\n}\n\n.event-item.event-compact {\n  justify-content: center;\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.event-inline-time {\n  color: var(--theme-color-primary, #0f3a97);\n}\n\n.event-item.clipped-top {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.event-item.clipped-bottom {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.event-title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: normal;\n}\n\n.event-time {\n  font-size: 0.75rem;\n  font-weight: 400;\n  color: var(--theme-color-primary, #0f3a97);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: normal;\n}\n\n.current-time-indicator {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 0.125rem;\n  background: #ea4335;\n  z-index: 10;\n  pointer-events: none;\n}\n\n.current-time-indicator::before {\n  content: '';\n  position: absolute;\n  left: -0.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 50%;\n  background: #ea4335;\n}";
+//# sourceMappingURL=daily-calendar-view-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"daily-calendar-view-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/daily-calendar-view/daily-calendar-view-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,ypGA8KxB,CAAA"}

package/dist/components/calendar-views/daily-calendar-view/daily-calendar-view-styles.js

@@ -0,0 +1,175 @@
+export const COMPONENT_CSS = `:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  font-family: 'Inter', system-ui, sans-serif;
+  overflow: hidden;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.daily-calendar-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 1rem 1.25rem 1rem 1rem;
+}
+
+.today-title {
+  font-size: 2.8125rem;
+  font-weight: 400;
+  font-style: normal;
+  color: var(--theme-color-primary, #0f3a97);
+  letter-spacing: -0.1125rem;
+  margin: 2rem 0 2.875rem 0;
+  line-height: normal;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.day-grid {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  background: #fff;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  padding-top: 1.25rem;
+}
+
+.time-gutter {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 6.5rem;
+}
+
+.time-label {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding-right: 1rem;
+  font-size: 0.98rem;
+  color: #6b7280;
+  white-space: nowrap;
+  transform: translateY(-0.5em);
+}
+
+.day-body {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  border-left: 0.0625rem solid #f3f4f6;
+}
+
+.hour-row {
+  flex: 1;
+  border-bottom: 0.0625rem solid #f3f4f6;
+  position: relative;
+  min-height: 0;
+}
+
+.hour-row:last-child {
+  border-bottom: none;
+}
+
+.events-area {
+  position: absolute;
+  top: 0;
+  left: 0.653rem;
+  bottom: 0;
+  right: 1.25rem;
+}
+
+.event-wrapper {
+  position: absolute;
+  z-index: 2;
+  outline: 0.125rem solid white;
+  border-radius: 0 0.653rem 0.653rem 0;
+}
+
+.event-item {
+  height: 100%;
+  background: #ededed;
+  border-left: 0.327rem solid var(--theme-color-primary, #0f3a97);
+  border-radius: 0 0.653rem 0.653rem 0;
+  padding: 0.5rem 0.98rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.327rem;
+}
+
+.event-item.event-compact {
+  justify-content: center;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.event-inline-time {
+  color: var(--theme-color-primary, #0f3a97);
+}
+
+.event-item.clipped-top {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.event-item.clipped-bottom {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.event-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+}
+
+.event-time {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--theme-color-primary, #0f3a97);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: normal;
+}
+
+.current-time-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0.125rem;
+  background: #ea4335;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.current-time-indicator::before {
+  content: '';
+  position: absolute;
+  left: -0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: #ea4335;
+}`;

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

@@ -0,0 +1,21 @@
+import { type CalendarEvent } from '../event-layout.js';
+export type { CalendarEvent };
+export declare class DailyCalendarView extends HTMLElement {
+    private _events;
+    private _now;
+    private _timezone;
+    private _locale;
+    private _initialized;
+    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 _getEventLayouts;
+    private _buildDayBody;
+    private _render;
+}
+//# sourceMappingURL=daily-calendar-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"daily-calendar-view.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/daily-calendar-view/daily-calendar-view.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,oBAAoB,CAAA;AAY3B,YAAY,EAAE,aAAa,EAAE,CAAA;AAE7B,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,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;IAErC,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,EAGlB;IAED,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,aAAa;IA4CrB,OAAO,CAAC,OAAO;CAoDhB"}

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

@@ -0,0 +1,130 @@
+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 './daily-calendar-view-styles.js';
+import { generateTimeSlots, getWindowStartHour, filterEventsForWindow, } from '../calendar-window-utils.js';
+import { buildTimeGutter, buildEventElement } from '../calendar-view-utils.js';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+export class DailyCalendarView extends HTMLElement {
+    _events = [];
+    _now = new Date();
+    _timezone = 'UTC';
+    _locale = 'en';
+    _initialized = false;
+    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)
+            this._render();
+    }
+    _getEventLayouts(todayEvents) {
+        const timezone = this._timezone;
+        const layoutMap = new Map();
+        if (todayEvents.length === 0)
+            return layoutMap;
+        const clusters = findEventClusters(todayEvents, timezone);
+        for (const cluster of clusters) {
+            const clusterLayouts = calculateClusterLayouts(cluster, timezone);
+            for (const [event, layout] of clusterLayouts) {
+                layoutMap.set(getEventKey(event), layout);
+            }
+        }
+        return layoutMap;
+    }
+    _buildDayBody(todayEvents, windowStartHour, timeIndicatorPercent, eventLayouts) {
+        const timezone = this._timezone;
+        const locale = this._locale;
+        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);
+        }
+        const eventsArea = document.createElement('div');
+        eventsArea.className = 'events-area';
+        for (const event of todayEvents) {
+            const layout = eventLayouts.get(getEventKey(event)) ?? {
+                event,
+                column: 0,
+                columnSpan: 1,
+                totalColumns: 1,
+            };
+            eventsArea.appendChild(buildEventElement(event, windowStartHour, layout, locale, timezone));
+        }
+        dayBody.appendChild(eventsArea);
+        if (timeIndicatorPercent >= 0 && timeIndicatorPercent <= 100) {
+            const indicator = document.createElement('div');
+            indicator.className = 'current-time-indicator';
+            indicator.style.setProperty('top', `${timeIndicatorPercent}%`);
+            dayBody.appendChild(indicator);
+        }
+        return dayBody;
+    }
+    _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);
+        const timeSlots = generateTimeSlots(windowStartHour, now, locale, timezone);
+        const todayStr = currentTime.format('YYYY-MM-DD');
+        const todayEvents = filterEventsForWindow(this._events, todayStr, windowStartHour, timezone);
+        const eventLayouts = this._getEventLayouts(todayEvents);
+        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 = 'daily-calendar-container';
+        const title = document.createElement('p');
+        title.className = 'today-title';
+        title.textContent = 'Today';
+        container.appendChild(title);
+        const dayGrid = document.createElement('div');
+        dayGrid.className = 'day-grid';
+        dayGrid.appendChild(buildTimeGutter(timeSlots));
+        dayGrid.appendChild(this._buildDayBody(todayEvents, windowStartHour, timeIndicatorPercent, eventLayouts));
+        container.appendChild(dayGrid);
+        shadow.appendChild(container);
+    }
+}
+if (typeof window !== 'undefined' &&
+    !customElements.get('daily-calendar-view')) {
+    customElements.define('daily-calendar-view', DailyCalendarView);
+}

package/dist/components/calendar-views/daily-calendar-view/index.d.ts

@@ -0,0 +1,2 @@
+export { DailyCalendarView } from './daily-calendar-view.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/daily-calendar-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/components/calendar-views/daily-calendar-view/index.js

@@ -0,0 +1 @@
+export { DailyCalendarView } from './daily-calendar-view.js';

package/dist/components/calendar-views/event-layout.d.ts

@@ -0,0 +1,18 @@
+export interface CalendarEvent {
+    id?: string;
+    title: string;
+    startTime: string;
+    endTime: string;
+    isAllDay: boolean;
+    backgroundColor?: string;
+}
+export interface EventLayout {
+    event: CalendarEvent;
+    column: number;
+    columnSpan: number;
+    totalColumns: number;
+}
+export declare const findEventClusters: (allEvents: CalendarEvent[], timezone: string) => CalendarEvent[][];
+export declare const calculateClusterLayouts: (cluster: CalendarEvent[], timezone: string) => Map<CalendarEvent, EventLayout>;
+export declare const getEventKey: (event: CalendarEvent) => string;
+//# sourceMappingURL=event-layout.d.ts.map

package/dist/components/calendar-views/event-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-layout.d.ts","sourceRoot":"","sources":["../../../src/components/calendar-views/event-layout.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,aAAa,CAAA;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;CACrB;AAcD,eAAO,MAAM,iBAAiB,GAC5B,WAAW,aAAa,EAAE,EAC1B,UAAU,MAAM,KACf,aAAa,EAAE,EAmEjB,CAAA;AA2ED,eAAO,MAAM,uBAAuB,GAClC,SAAS,aAAa,EAAE,EACxB,UAAU,MAAM,KACf,GAAG,CAAC,aAAa,EAAE,WAAW,CAkBhC,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,aAAa,KAAG,MAGa,CAAA"}

package/dist/components/calendar-views/event-layout.js

@@ -0,0 +1,139 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(isSameOrAfter);
+const eventsOverlap = (a, b, timezone) => {
+    const aStart = dayjs(a.startTime).tz(timezone);
+    const aEnd = dayjs(a.endTime).tz(timezone);
+    const bStart = dayjs(b.startTime).tz(timezone);
+    const bEnd = dayjs(b.endTime).tz(timezone);
+    return aStart.isBefore(bEnd) && bStart.isBefore(aEnd);
+};
+export const findEventClusters = (allEvents, timezone) => {
+    if (allEvents.length === 0)
+        return [];
+    const sortedEvents = [...allEvents].sort((a, b) => dayjs(a.startTime).tz(timezone).diff(dayjs(b.startTime).tz(timezone)));
+    const adjacencyList = new Map();
+    for (let i = 0; i < sortedEvents.length; i++) {
+        const eventI = sortedEvents[i];
+        adjacencyList.set(eventI, new Set());
+        const eventAEnd = dayjs(eventI.endTime).tz(timezone);
+        for (let j = i + 1; j < sortedEvents.length; j++) {
+            const eventJ = sortedEvents[j];
+            const eventBStart = dayjs(eventJ.startTime).tz(timezone);
+            if (eventBStart.isSameOrAfter(eventAEnd))
+                break;
+            if (eventsOverlap(eventI, eventJ, timezone)) {
+                adjacencyList.get(eventI).add(eventJ);
+                if (!adjacencyList.has(eventJ)) {
+                    adjacencyList.set(eventJ, new Set());
+                }
+                adjacencyList.get(eventJ).add(eventI);
+            }
+        }
+    }
+    const visited = new Set();
+    const clusters = [];
+    for (const event of sortedEvents) {
+        if (visited.has(event))
+            continue;
+        const cluster = [];
+        const queue = [event];
+        let queueIndex = 0;
+        while (queueIndex < queue.length) {
+            const current = queue[queueIndex++];
+            if (visited.has(current))
+                continue;
+            visited.add(current);
+            cluster.push(current);
+            const neighbors = adjacencyList.get(current) || new Set();
+            for (const neighbor of neighbors) {
+                if (!visited.has(neighbor)) {
+                    queue.push(neighbor);
+                }
+            }
+        }
+        cluster.sort((a, b) => {
+            const startDiff = dayjs(a.startTime)
+                .tz(timezone)
+                .diff(dayjs(b.startTime).tz(timezone));
+            if (startDiff !== 0)
+                return startDiff;
+            const aDuration = dayjs(a.endTime).diff(dayjs(a.startTime));
+            const bDuration = dayjs(b.endTime).diff(dayjs(b.startTime));
+            return bDuration - aDuration;
+        });
+        clusters.push(cluster);
+    }
+    return clusters;
+};
+const assignColumns = (cluster, timezone) => {
+    const columns = [];
+    const assignments = new Map();
+    for (const event of cluster) {
+        const eventStart = dayjs(event.startTime).tz(timezone);
+        let assignedColumn = -1;
+        for (let col = 0; col < columns.length; col++) {
+            if (columns[col]?.isSameOrBefore(eventStart)) {
+                assignedColumn = col;
+                break;
+            }
+        }
+        if (assignedColumn === -1) {
+            assignedColumn = columns.length;
+            columns.push(dayjs(0));
+        }
+        columns[assignedColumn] = dayjs(event.endTime).tz(timezone);
+        assignments.set(event, assignedColumn);
+    }
+    return { assignments, totalColumns: columns.length };
+};
+const groupByColumn = (cluster, assignments, totalColumns) => {
+    const eventsByColumn = new Map();
+    for (let col = 0; col < totalColumns; col++) {
+        eventsByColumn.set(col, []);
+    }
+    for (const event of cluster) {
+        const eventColumn = assignments.get(event);
+        if (eventColumn !== undefined) {
+            eventsByColumn.get(eventColumn).push(event);
+        }
+    }
+    return eventsByColumn;
+};
+const calculateColumnSpan = (event, eventColumn, totalColumns, eventsByColumn, timezone) => {
+    const eventStart = dayjs(event.startTime).tz(timezone);
+    const eventEnd = dayjs(event.endTime).tz(timezone);
+    let columnSpan = 1;
+    for (let col = eventColumn + 1; col < totalColumns; col++) {
+        const eventsInCol = eventsByColumn.get(col) || [];
+        const columnBlocked = eventsInCol.some((other) => {
+            const otherStart = dayjs(other.startTime).tz(timezone);
+            const otherEnd = dayjs(other.endTime).tz(timezone);
+            return eventStart.isBefore(otherEnd) && otherStart.isBefore(eventEnd);
+        });
+        if (columnBlocked)
+            break;
+        columnSpan++;
+    }
+    return columnSpan;
+};
+export const calculateClusterLayouts = (cluster, timezone) => {
+    const { assignments, totalColumns } = assignColumns(cluster, timezone);
+    const eventsByColumn = groupByColumn(cluster, assignments, totalColumns);
+    const layouts = new Map();
+    for (const event of cluster) {
+        const eventColumn = assignments.get(event);
+        const columnSpan = calculateColumnSpan(event, eventColumn, totalColumns, eventsByColumn, timezone);
+        layouts.set(event, { event, column: eventColumn, columnSpan, totalColumns });
+    }
+    return layouts;
+};
+export const getEventKey = (event) => event.id
+    ? event.id
+    : `${event.startTime}|${event.endTime}|${event.title || ''}`;

package/dist/components/calendar-views/schedule-calendar-view/index.d.ts

@@ -0,0 +1,2 @@
+export { ScheduleCalendarView } from './schedule-calendar-view.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/schedule-calendar-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/components/calendar-views/schedule-calendar-view/index.js

@@ -0,0 +1 @@
+export { ScheduleCalendarView } from './schedule-calendar-view.js';

package/dist/components/calendar-views/schedule-calendar-view/schedule-calendar-view-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_CSS = ":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  font-family: 'Inter', system-ui, sans-serif;\n  overflow: hidden;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n.schedule-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: 1rem 1.25rem 1rem 1rem;\n  gap: 1.5rem;\n  overflow: hidden;\n}\n\n.schedule-title {\n  font-size: 2.8125rem;\n  font-weight: 400;\n  color: var(--theme-color-primary, #0f3a97);\n  letter-spacing: -0.1125rem;\n  margin: 2rem 0 0 0;\n  line-height: normal;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.schedule-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: #fff;\n  border-radius: 0.75rem;\n  overflow: hidden;\n  padding: 1.5rem;\n  gap: 2rem;\n}\n\n.day-section {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 0.75rem;\n  overflow: hidden;\n}\n\n.day-section + .day-section {\n  border-left: 0.0625rem solid #f3f4f6;\n  padding-left: 2rem;\n}\n\n.day-heading {\n  font-size: 0.98rem;\n  font-weight: 500;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  line-height: 1.333;\n  flex-shrink: 0;\n}\n\n.events-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  overflow: hidden;\n  flex: 1;\n  min-height: 0;\n}\n\n.event-item {\n  display: flex;\n  flex-direction: column;\n  background: #ededed;\n  border-left: 0.327rem solid var(--theme-color-primary, #0f3a97);\n  border-radius: 0 0.5rem 0.5rem 0;\n  padding: 0.5rem 0.75rem;\n  gap: 0.2rem;\n  flex-shrink: 0;\n}\n\n.event-title {\n  font-size: 0.9rem;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: normal;\n}\n\n.event-time {\n  font-size: 0.8rem;\n  font-weight: 400;\n  color: var(--theme-color-primary, #0f3a97);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: normal;\n}\n\n.no-events {\n  font-size: 0.9rem;\n  color: #9ca3af;\n  text-align: center;\n  padding: 1.5rem 0;\n}";
+//# sourceMappingURL=schedule-calendar-view-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-calendar-view-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar-views/schedule-calendar-view/schedule-calendar-view-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,0lEAqHxB,CAAA"}