@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/collection/components/tl-occurrence-selector/tl-occurrence-selector.js

@@ -1,560 +1,178 @@
+/**
+ * The web harness for `occurrenceSelectorCore`.
+ *
+ * It renders and it forwards. Which of the three views to show, where the
+ * calendar opens, which days and times are pressable, how far the month
+ * navigation may walk and every label are in `@ticketlayer/elements-core`
+ * (AGENTS.md, TKT-11, TKT-202). What is left here is the Stencil surface a host
+ * writes HTML against, the icons, and the three things that are genuinely web:
+ *
+ *  - finding the client the page published on `window.Ticketlayer`;
+ *  - measuring the element, with a `ResizeObserver`, and telling the core what
+ *    it measured - the core decides what a width means;
+ *  - writing the host's `theme` prop onto the element as `--tl-*` custom
+ *    properties. Those nine are the same nine the stylesheet reads and the core
+ *    declares, so nothing is themed here that the catalogue cannot see - a
+ *    token named only in a `.tsx` would be invisible to
+ *    `scripts/check-core-tokens.mjs`, which reads the stylesheet.
+ */
 import { h } from "@stencil/core";
+import { createElement, occurrenceSelectorCore, } from "@ticketlayer/elements-core";
 import { getSDK, whenSDK } from "../../utils/sdk-connector";
+/** Theme field -> the custom property the stylesheet reads it through. */
+const THEME_PROPERTIES = [
+    ['primaryColor', '--tl-primary'],
+    ['primaryForeground', '--tl-primary-foreground'],
+    ['backgroundColor', '--tl-background'],
+    ['foregroundColor', '--tl-foreground'],
+    ['mutedColor', '--tl-muted'],
+    ['mutedForeground', '--tl-muted-foreground'],
+    ['borderColor', '--tl-border'],
+    ['borderRadius', '--tl-radius'],
+    ['fontFamily', '--tl-font-family'],
+];
 export class TlOccurrenceSelector {
     constructor() {
         /**
          * Layout orientation (auto = horizontal on desktop, vertical on mobile)
          */
         this.orientation = 'auto';
-        /**
-         * Loading state
-         */
-        this.loading = true;
-        /**
-         * Error message
-         */
-        this.error = null;
-        /**
-         * Fetched occurrences
-         */
-        this.occurrences = [];
-        /**
-         * Current month being displayed in calendar view
-         */
-        this.currentMonth = new Date();
-        /**
-         * Currently selected date in calendar view
-         */
-        this.selectedDate = null;
-        /**
-         * Computed display mode based on occurrences
-         */
-        this.computedDisplayMode = 'list';
-        /**
-         * Container width for responsive layout
-         */
-        this.containerWidth = 0;
-    }
-    async componentWillLoad() {
-        await this.waitForSDKAndFetch();
+        this.element = createElement(occurrenceSelectorCore, {
+            client: () => getSDK(),
+            // What "the client is up" means on the web. The core waits on it inside its
+            // own mount and reads there; the harness decides none of it (TKT-197).
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
     /**
-     * Wait for SDK to be ready, then fetch occurrences
+     * A new event is a new subject: the element is torn down and mounted again,
+     * so whatever the core set up for the old one is undone before anything is
+     * set up for the new one.
      */
-    async waitForSDKAndFetch() {
-        if (!this.eventId) {
-            this.error = 'Event ID is required';
-            this.loading = false;
-            return;
-        }
-        try {
-            await whenSDK();
-            await this.fetchOccurrences();
-        }
-        catch (err) {
-            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
-            this.loading = false;
-        }
+    watchSubject() {
+        this.syncProps();
+        this.teardown?.();
+        this.teardown = this.element.mount();
+    }
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            displayMode: this.displayMode,
+            orientation: this.orientation,
+            theme: this.theme,
+        });
     }
+    /**
+     * On screen: subscribe to the view, then put the core to work.
+     *
+     * `connectedCallback` and not `componentWillLoad` because this runs again
+     * when the element is moved in the DOM, and that is exactly when a mount and
+     * its teardown have to pair up.
+     */
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    /** Measuring the element is the runtime's job; what a width means is not. */
     componentDidLoad() {
-        // Set up resize observer for responsive layout
         if (this.containerRef && typeof ResizeObserver !== 'undefined') {
             this.resizeObserver = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    this.containerWidth = entry.contentRect.width;
-                }
+                for (const entry of entries)
+                    this.element.actions.resized(entry.contentRect.width);
             });
             this.resizeObserver.observe(this.containerRef);
         }
     }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    async onEventIdChange() {
-        await this.fetchOccurrences();
-    }
-    /**
-     * Fetch occurrences from the SDK
-     */
-    async fetchOccurrences() {
-        this.loading = true;
-        this.error = null;
-        try {
-            const sdk = getSDK();
-            const eventsManager = sdk.getEventsManager();
-            const event = await eventsManager.get(this.eventId);
-            if (!event) {
-                throw new Error('Event not found');
-            }
-            // Map EventOccurrence to TlOccurrence
-            this.occurrences = (event.occurrences || []).map((occ) => ({
-                id: occ.id,
-                startsAt: occ.startsAt,
-                endsAt: occ.endsAt,
-                status: occ.availabilityStatus,
-                availableCapacity: occ.availableCapacity,
-                soldOut: occ.availabilityStatus === 'sold_out',
-            }));
-            this.computeDisplayMode();
-            this.computeInitialSelection();
-        }
-        catch (err) {
-            console.error('[tl-occurrence-selector] Failed to fetch occurrences:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to load occurrences';
-            this.occurrences = [];
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    /**
-     * Compute the display mode based on occurrence count and date distribution
-     */
-    computeDisplayMode() {
-        if (this.displayMode) {
-            this.computedDisplayMode = this.displayMode;
-            return;
-        }
-        const count = this.occurrences.length;
-        if (count <= 5) {
-            this.computedDisplayMode = 'list';
-            return;
-        }
-        // Check if all occurrences are on the same calendar date
-        const uniqueDates = new Set();
-        for (const occ of this.occurrences) {
-            const date = new Date(occ.startsAt);
-            uniqueDates.add(date.toDateString());
-        }
-        if (uniqueDates.size === 1) {
-            this.computedDisplayMode = 'slots';
-        }
-        else {
-            this.computedDisplayMode = 'calendar';
-        }
-    }
-    /**
-     * Compute the initial date selection for calendar/slots views
-     */
-    computeInitialSelection() {
-        if (this.occurrences.length === 0)
-            return;
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
-        // Get all dates with occurrences
-        const datesWithOccurrences = this.getDatesWithOccurrences();
-        // Find the first date that is today or in the future
-        let selectedDate = null;
-        for (const dateStr of Array.from(datesWithOccurrences.keys()).sort()) {
-            const date = new Date(dateStr);
-            if (date >= today) {
-                selectedDate = date;
-                break;
-            }
-        }
-        // If no future dates, select the last available date
-        if (!selectedDate && datesWithOccurrences.size > 0) {
-            const sortedDates = Array.from(datesWithOccurrences.keys()).sort();
-            selectedDate = new Date(sortedDates[sortedDates.length - 1]);
-        }
-        if (selectedDate) {
-            this.selectedDate = selectedDate;
-            this.currentMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
-        }
-    }
     /**
-     * Get a map of dates to occurrences
+     * Off screen: run the mount's teardown, and nothing more. Not `destroy()`:
+     * Stencil calls this for a DOM move as well as a removal, and a destroyed
+     * core never mounts again.
      */
-    getDatesWithOccurrences() {
-        const map = new Map();
-        for (const occ of this.occurrences) {
-            const date = new Date(occ.startsAt);
-            date.setHours(0, 0, 0, 0);
-            const dateStr = date.toDateString();
-            if (!map.has(dateStr)) {
-                map.set(dateStr, []);
-            }
-            map.get(dateStr).push(occ);
-        }
-        return map;
-    }
-    /**
-     * Get the first and last occurrence dates
-     */
-    getDateRange() {
-        if (this.occurrences.length === 0)
-            return null;
-        let first = new Date(this.occurrences[0].startsAt);
-        let last = new Date(this.occurrences[0].startsAt);
-        for (const occ of this.occurrences) {
-            const date = new Date(occ.startsAt);
-            if (date < first)
-                first = date;
-            if (date > last)
-                last = date;
-        }
-        return { first, last };
-    }
-    /**
-     * Check if all occurrences fit in one week (Monday-Sunday)
-     */
-    isSingleWeek() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return false;
-        // Get Monday of the week containing the first date
-        const firstMonday = new Date(dateRange.first);
-        const dayOfWeek = firstMonday.getDay();
-        const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Monday = 0 days
-        firstMonday.setDate(firstMonday.getDate() - daysToSubtract);
-        firstMonday.setHours(0, 0, 0, 0);
-        // Get Sunday of that week
-        const sunday = new Date(firstMonday);
-        sunday.setDate(sunday.getDate() + 6);
-        sunday.setHours(23, 59, 59, 999);
-        // Check if last date is within this week
-        return dateRange.last <= sunday;
-    }
-    /**
-     * Check if all occurrences are in the same month
-     */
-    isSingleMonth() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return false;
-        return (dateRange.first.getMonth() === dateRange.last.getMonth() &&
-            dateRange.first.getFullYear() === dateRange.last.getFullYear());
-    }
-    /**
-     * Check if we should use horizontal layout
-     */
-    isHorizontalLayout() {
-        if (this.orientation === 'horizontal')
-            return true;
-        if (this.orientation === 'vertical')
-            return false;
-        // Auto: use horizontal if container is wide enough (768px)
-        return this.containerWidth >= 768;
-    }
-    /**
-     * Format a date for display
-     */
-    formatDate(date) {
-        return date.toLocaleDateString('en-GB', {
-            weekday: 'long',
-            day: 'numeric',
-            month: 'long',
-            year: 'numeric',
-        });
-    }
-    /**
-     * Format a time for display
-     */
-    formatTime(dateString) {
-        const date = new Date(dateString);
-        return date.toLocaleTimeString('en-GB', {
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    }
-    /**
-     * Format a full date and time for list view
-     */
-    formatDateTime(dateString) {
-        const date = new Date(dateString);
-        return {
-            date: date.toLocaleDateString('en-GB', {
-                weekday: 'long',
-                day: 'numeric',
-                month: 'long',
-                year: 'numeric',
-            }),
-            time: date.toLocaleTimeString('en-GB', {
-                hour: '2-digit',
-                minute: '2-digit',
-            }),
-        };
-    }
-    /**
-     * Handle occurrence selection
-     */
-    handleSelect(occurrence) {
-        if (occurrence.soldOut || occurrence.availableCapacity === 0)
-            return;
-        console.log('[tl-occurrence-selector] Selected:', occurrence.id);
-        this.tlSelect.emit({ occurrence });
-    }
-    /**
-     * Handle date selection in calendar view
-     */
-    handleDateSelect(date) {
-        this.selectedDate = date;
-        // If date is in a different month, navigate to that month
-        if (date.getMonth() !== this.currentMonth.getMonth() ||
-            date.getFullYear() !== this.currentMonth.getFullYear()) {
-            this.currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
-        }
-    }
-    /**
-     * Navigate to previous month
-     */
-    handlePrevMonth() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return;
-        const newMonth = new Date(this.currentMonth);
-        newMonth.setMonth(newMonth.getMonth() - 1);
-        // Don't go before the first occurrence month
-        const firstMonth = new Date(dateRange.first.getFullYear(), dateRange.first.getMonth(), 1);
-        if (newMonth >= firstMonth) {
-            this.currentMonth = newMonth;
-        }
-    }
-    /**
-     * Navigate to next month
-     */
-    handleNextMonth() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return;
-        const newMonth = new Date(this.currentMonth);
-        newMonth.setMonth(newMonth.getMonth() + 1);
-        // Don't go past the last occurrence month
-        const lastMonth = new Date(dateRange.last.getFullYear(), dateRange.last.getMonth(), 1);
-        if (newMonth <= lastMonth) {
-            this.currentMonth = newMonth;
-        }
-    }
-    /**
-     * Check if prev month button should be disabled
-     */
-    isPrevMonthDisabled() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return true;
-        const firstMonth = new Date(dateRange.first.getFullYear(), dateRange.first.getMonth(), 1);
-        return this.currentMonth <= firstMonth;
-    }
-    /**
-     * Check if next month button should be disabled
-     */
-    isNextMonthDisabled() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return true;
-        const lastMonth = new Date(dateRange.last.getFullYear(), dateRange.last.getMonth(), 1);
-        return this.currentMonth >= lastMonth;
-    }
-    /**
-     * Get calendar grid days for the current month
-     */
-    getCalendarDays() {
-        // If all occurrences fit in one week, only show that week
-        if (this.isSingleWeek()) {
-            const dateRange = this.getDateRange();
-            if (!dateRange)
-                return [];
-            // Get Monday of the week containing the first date
-            const firstMonday = new Date(dateRange.first);
-            const dayOfWeek = firstMonday.getDay();
-            const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-            firstMonday.setDate(firstMonday.getDate() - daysToSubtract);
-            firstMonday.setHours(0, 0, 0, 0);
-            // Generate 7 days (Monday to Sunday)
-            const days = [];
-            const current = new Date(firstMonday);
-            for (let i = 0; i < 7; i++) {
-                days.push(new Date(current));
-                current.setDate(current.getDate() + 1);
-            }
-            return days;
-        }
-        // Otherwise show full month grid
-        const year = this.currentMonth.getFullYear();
-        const month = this.currentMonth.getMonth();
-        // Start of month
-        const monthStart = new Date(year, month, 1);
-        // End of month
-        const monthEnd = new Date(year, month + 1, 0);
-        // Get the start of the week containing the first day (Monday = 1)
-        const startDay = monthStart.getDay();
-        const daysToSubtract = startDay === 0 ? 6 : startDay - 1; // Monday = 0 days to subtract
-        const calendarStart = new Date(monthStart);
-        calendarStart.setDate(calendarStart.getDate() - daysToSubtract);
-        // Get the end of the week containing the last day
-        const endDay = monthEnd.getDay();
-        const daysToAdd = endDay === 0 ? 0 : 7 - endDay;
-        const calendarEnd = new Date(monthEnd);
-        calendarEnd.setDate(calendarEnd.getDate() + daysToAdd);
-        // Generate all days
-        const days = [];
-        const current = new Date(calendarStart);
-        while (current <= calendarEnd) {
-            days.push(new Date(current));
-            current.setDate(current.getDate() + 1);
-        }
-        return days;
-    }
-    /**
-     * Check if a date has occurrences
-     */
-    hasOccurrencesOnDate(date) {
-        const dateStr = date.toDateString();
-        return this.getDatesWithOccurrences().has(dateStr);
-    }
-    /**
-     * Check if all occurrences on a date are sold out
-     */
-    isDateSoldOut(date) {
-        const dateStr = date.toDateString();
-        const occurrences = this.getDatesWithOccurrences().get(dateStr);
-        if (!occurrences)
-            return false;
-        return occurrences.every(occ => occ.soldOut || occ.availableCapacity === 0);
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    /**
-     * Get occurrences for the selected date
-     */
-    getSelectedDateOccurrences() {
-        if (!this.selectedDate)
-            return [];
-        const dateStr = this.selectedDate.toDateString();
-        const occurrences = this.getDatesWithOccurrences().get(dateStr) || [];
-        // Sort by start time
-        return occurrences.sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
+    forward(event, detail) {
+        if (event === 'tlSelect')
+            this.tlSelect.emit(detail);
     }
     /**
-     * Get CSS custom properties from theme
+     * The host's theme, as custom properties over the ones the theme package
+     * ships. Web only: a custom property is not a fact every runtime has, so the
+     * core declares the prop and the harness is what acts on it.
      */
-    getThemeStyles() {
-        if (!this.theme)
-            return {};
+    themeStyles() {
         const styles = {};
-        if (this.theme.primaryColor) {
-            styles['--tl-primary'] = this.theme.primaryColor;
-        }
-        if (this.theme.primaryForeground) {
-            styles['--tl-primary-foreground'] = this.theme.primaryForeground;
-        }
-        if (this.theme.backgroundColor) {
-            styles['--tl-background'] = this.theme.backgroundColor;
-        }
-        if (this.theme.foregroundColor) {
-            styles['--tl-foreground'] = this.theme.foregroundColor;
-        }
-        if (this.theme.mutedColor) {
-            styles['--tl-muted'] = this.theme.mutedColor;
-        }
-        if (this.theme.mutedForeground) {
-            styles['--tl-muted-foreground'] = this.theme.mutedForeground;
-        }
-        if (this.theme.borderColor) {
-            styles['--tl-border'] = this.theme.borderColor;
-        }
-        if (this.theme.borderRadius) {
-            styles['--tl-radius'] = this.theme.borderRadius;
-        }
-        if (this.theme.fontFamily) {
-            styles['--tl-font-family'] = this.theme.fontFamily;
+        if (!this.theme)
+            return styles;
+        for (const [field, property] of THEME_PROPERTIES) {
+            const value = this.theme[field];
+            if (value)
+                styles[property] = value;
         }
         return styles;
     }
     // =========================================================================
     // RENDER METHODS
     // =========================================================================
-    /**
-     * Render the list view (≤5 occurrences)
-     */
+    /** The availability mark a row carries, in the list and the slots panel. */
+    renderRowStatus(row) {
+        const { strings } = this.view;
+        if (row.statusKind === 'soldOut')
+            return h("span", { class: "status-sold-out" }, strings.soldOut);
+        if (row.statusKind === 'available')
+            return h("span", { class: "status-available" }, row.capacityLabel);
+        return h("span", { class: "status-arrow" }, "\u2192");
+    }
+    /** The list view (five occurrences or fewer). */
     renderListView() {
-        return (h("div", { class: "list-view" }, this.occurrences.map((occurrence) => {
-            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
-            const { date, time } = this.formatDateTime(occurrence.startsAt);
-            return (h("button", { key: occurrence.id, class: `occurrence-item ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("div", { class: "occurrence-info" }, h("div", { class: "occurrence-date" }, date), h("div", { class: "occurrence-time" }, time, occurrence.endsAt && ` - ${this.formatTime(occurrence.endsAt)}`)), h("div", { class: "occurrence-status" }, isSoldOut ? (h("span", { class: "status-sold-out" }, "Sold Out")) : occurrence.availableCapacity ? (h("span", { class: "status-available" }, occurrence.availableCapacity, " available")) : (h("span", { class: "status-arrow" }, "\u2192")))));
-        })));
+        return (h("div", { class: "list-view" }, this.view.derived.rows.map((row) => (h("button", { key: row.id, class: `occurrence-item ${row.soldOut ? 'sold-out' : ''}`, onClick: () => this.element.actions.select(row.id), disabled: row.soldOut }, h("div", { class: "occurrence-info" }, h("div", { class: "occurrence-date" }, row.dateLabel), h("div", { class: "occurrence-time" }, row.timeLabel)), h("div", { class: "occurrence-status" }, this.renderRowStatus(row)))))));
     }
-    /**
-     * Render the time slots view (>5 occurrences, same day)
-     */
+    /** The time slots view (more than five, all on one date). */
     renderSlotsView() {
-        // Sort occurrences by time
-        const sortedOccurrences = [...this.occurrences].sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
-        // Get the date from the first occurrence
-        const dateLabel = sortedOccurrences.length > 0
-            ? this.formatDate(new Date(sortedOccurrences[0].startsAt))
-            : '';
-        return (h("div", { class: "slots-view" }, dateLabel && h("div", { class: "slots-date-header" }, dateLabel), h("div", { class: "time-slots-grid" }, sortedOccurrences.map((occurrence) => {
-            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
-            return (h("button", { key: occurrence.id, class: `time-slot ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("span", { class: "slot-time" }, this.formatTime(occurrence.startsAt)), isSoldOut && h("span", { class: "slot-sold-out" }, "Sold Out")));
-        }))));
+        const { slots, slotsDateLabel } = this.view.derived;
+        return (h("div", { class: "slots-view" }, slotsDateLabel && h("div", { class: "slots-date-header" }, slotsDateLabel), h("div", { class: "time-slots-grid" }, slots.map((row) => (h("button", { key: row.id, class: `time-slot ${row.soldOut ? 'sold-out' : ''}`, onClick: () => this.element.actions.select(row.id), disabled: row.soldOut }, h("span", { class: "slot-time" }, row.startLabel), row.soldOut && h("span", { class: "slot-sold-out" }, this.view.strings.soldOut)))))));
     }
-    /**
-     * Render the calendar header
-     */
     renderCalendarHeader() {
-        const monthLabel = this.currentMonth.toLocaleDateString('en-GB', {
-            month: 'long',
-            year: 'numeric',
-        });
-        const showNavigation = !this.isSingleMonth();
-        return (h("div", { class: "calendar-header" }, h("span", { class: "month-label" }, monthLabel), showNavigation && (h("div", { class: "calendar-nav-buttons" }, h("button", { class: "nav-button", onClick: () => this.handlePrevMonth(), disabled: this.isPrevMonthDisabled(), "aria-label": "Previous month" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M15 18l-6-6 6-6" }))), h("button", { class: "nav-button", onClick: () => this.handleNextMonth(), disabled: this.isNextMonthDisabled(), "aria-label": "Next month" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M9 18l6-6-6-6" })))))));
+        const { strings, derived } = this.view;
+        return (h("div", { class: "calendar-header" }, h("span", { class: "month-label" }, derived.monthLabel), derived.showMonthNav && (h("div", { class: "calendar-nav-buttons" }, h("button", { class: "nav-button", onClick: () => this.element.actions.previousMonth(), disabled: !derived.canGoBack, "aria-label": strings.previousMonth }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M15 18l-6-6 6-6" }))), h("button", { class: "nav-button", onClick: () => this.element.actions.nextMonth(), disabled: !derived.canGoForward, "aria-label": strings.nextMonth }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M9 18l6-6-6-6" })))))));
+    }
+    renderCalendarDay(day) {
+        return (h("button", { key: day.key, class: day.className, onClick: () => this.element.actions.selectDate(day.key), disabled: !day.selectable }, h("span", { class: "day-number" }, day.dayNumber), day.hasOccurrences && h("span", { class: "occurrence-dot" })));
     }
-    /**
-     * Render the calendar grid
-     */
     renderCalendarGrid() {
-        const days = this.getCalendarDays();
-        const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
-        return (h("div", { class: "calendar-grid" }, weekDays.map((day) => (h("div", { class: "weekday-header", key: day }, day))), days.map((date) => {
-            const isCurrentMonth = date.getMonth() === this.currentMonth.getMonth();
-            const hasOccurrences = this.hasOccurrencesOnDate(date);
-            const isSoldOut = this.isDateSoldOut(date);
-            const isSelected = this.selectedDate && date.toDateString() === this.selectedDate.toDateString();
-            const isToday = date.toDateString() === today.toDateString();
-            const isPast = date < today;
-            return (h("button", { key: date.toISOString(), class: `calendar-day 
-                ${!isCurrentMonth ? 'other-month' : ''} 
-                ${hasOccurrences ? 'has-occurrences' : ''} 
-                ${isSoldOut ? 'sold-out' : ''} 
-                ${isSelected ? 'selected' : ''} 
-                ${isToday ? 'today' : ''}
-                ${isPast ? 'past' : ''}`, onClick: () => hasOccurrences && this.handleDateSelect(date), disabled: !hasOccurrences }, h("span", { class: "day-number" }, date.getDate()), hasOccurrences && h("span", { class: "occurrence-dot" })));
-        })));
+        const { derived } = this.view;
+        return (h("div", { class: "calendar-grid" }, derived.weekdayLabels.map((day) => (h("div", { class: "weekday-header", key: day }, day))), derived.days.map((day) => this.renderCalendarDay(day))));
     }
-    /**
-     * Render the selected date's time slots
-     */
+    /** The picked date's times, beside or below the calendar. */
     renderSelectedDateSlots() {
-        const occurrences = this.getSelectedDateOccurrences();
-        if (!this.selectedDate || occurrences.length === 0) {
-            return (h("div", { class: "selected-date-slots empty" }, h("p", null, "Select a date to see available times")));
+        const { strings, derived } = this.view;
+        if (!derived.selectedDateLabel) {
+            return (h("div", { class: "selected-date-slots empty" }, h("p", null, strings.selectADate)));
         }
-        const dateLabel = this.formatDate(this.selectedDate);
-        return (h("div", { class: "selected-date-slots" }, h("div", { class: "selected-date-header" }, dateLabel), h("div", { class: "time-slots-list" }, occurrences.map((occurrence) => {
-            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
-            return (h("button", { key: occurrence.id, class: `time-slot-item ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("span", { class: "slot-time" }, this.formatTime(occurrence.startsAt)), h("div", { class: "slot-status" }, isSoldOut ? (h("span", { class: "status-sold-out" }, "Sold Out")) : occurrence.availableCapacity ? (h("span", { class: "status-available" }, occurrence.availableCapacity, " available")) : (h("span", { class: "status-arrow" }, "\u2192")))));
-        }))));
+        return (h("div", { class: "selected-date-slots" }, h("div", { class: "selected-date-header" }, derived.selectedDateLabel), h("div", { class: "time-slots-list" }, derived.selectedSlots.map((row) => (h("button", { key: row.id, class: `time-slot-item ${row.soldOut ? 'sold-out' : ''}`, onClick: () => this.element.actions.select(row.id), disabled: row.soldOut }, h("span", { class: "slot-time" }, row.startLabel), h("div", { class: "slot-status" }, this.renderRowStatus(row))))))));
     }
-    /**
-     * Render the calendar view with slots panel
-     */
     renderCalendarView() {
-        const isHorizontal = this.isHorizontalLayout();
-        return (h("div", { class: `calendar-view ${isHorizontal ? 'horizontal' : 'vertical'}` }, h("div", { class: "calendar-panel" }, this.renderCalendarHeader(), this.renderCalendarGrid()), h("div", { class: "slots-panel" }, this.renderSelectedDateSlots())));
+        return (h("div", { class: this.view.derived.viewClass }, h("div", { class: "calendar-panel" }, this.renderCalendarHeader(), this.renderCalendarGrid()), h("div", { class: "slots-panel" }, this.renderSelectedDateSlots())));
     }
-    /**
-     * Render skeleton loading state
-     */
+    /** The skeleton, which is a calendar because that is the common shape. */
     renderSkeleton() {
-        // Default to calendar skeleton as it's the most common
         return (h("div", { class: "loading-container" }, h("div", { class: "skeleton-calendar" }, h("div", { class: "skeleton skeleton-calendar-header" }), h("div", { class: "skeleton-calendar-grid" }, Array.from({ length: 35 }, (_, i) => (h("div", { key: i, class: "skeleton skeleton-calendar-day" })))))));
     }
     render() {
-        const themeStyles = this.getThemeStyles();
-        return (h("div", { key: '40758aaa06e5f062de92675766e4531995f74bc7', class: "occurrence-selector", ref: (el) => (this.containerRef = el), style: themeStyles }, this.loading && this.renderSkeleton(), !this.loading && this.error && (h("div", { key: '6d2f5b9c07f65d4941bfb4870729fe3248cb277e', class: "error-container" }, h("svg", { key: 'daaf1f48dcff80ae7cf94ae0da1d66d9c9b7fb0f', class: "error-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("circle", { key: '0a9f494a5cf7f79146e56fc44469a3ca9e5238ae', cx: "12", cy: "12", r: "10" }), h("path", { key: '67d7b453508c847593136bd60e34ea0c38d30cda', d: "M12 8v4m0 4h.01" })), h("p", { key: 'c1cc92585ed4451b686350b6d718c3ba06b72dd3', class: "error-message" }, this.error), h("button", { key: '4ec9d048af704af12a800385b9868501973ba477', class: "retry-button", onClick: () => this.fetchOccurrences() }, "Retry"))), !this.loading && !this.error && (this.occurrences.length === 0 ? (h("div", { class: "no-occurrences" }, h("p", null, "No dates available for this event."))) : (h("div", { class: "selector-content" }, this.computedDisplayMode === 'list' && this.renderListView(), this.computedDisplayMode === 'slots' && this.renderSlotsView(), this.computedDisplayMode === 'calendar' && this.renderCalendarView())))));
+        const { status, strings, state, derived } = this.view;
+        return (h("div", { key: '84951fb5171ed6c79604861a171f49f43c8b809c', class: "occurrence-selector", ref: (el) => (this.containerRef = el), style: this.themeStyles() }, status === 'loading' && this.renderSkeleton(), status === 'error' && (h("div", { key: '2850712eae277f32f3538426c8a5d36b73ca918e', class: "error-container" }, h("svg", { key: '89192cd7cce29781b87c83c8dee71d59f6a685ed', class: "error-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("circle", { key: '27a52ecb1228c541202752be84323abe687c1655', cx: "12", cy: "12", r: "10" }), h("path", { key: 'f51c2b49de89b9c66cde01e11a2de4c56d4dbad9', d: "M12 8v4m0 4h.01" })), h("p", { key: '3c85d762de430f477d2c9ad4341b23765c93e2e3', class: "error-message" }, state.error), h("button", { key: '22fa271a8f0a15e18141cf6d66a25a2bf9299c72', class: "retry-button", onClick: () => void this.element.actions.load() }, strings.retry))), status === 'empty' && (h("div", { key: '285403135ccff6cd6c8de6a9c62c9186c67c102c', class: "no-occurrences" }, h("p", { key: '98373f0c5793cb1aba1328558fac3210e7c6aeeb' }, strings.empty))), status === 'ready' && (h("div", { key: 'a61d2c02538f3339e54770e53a4f807e72182357', class: "selector-content" }, derived.mode === 'list' && this.renderListView(), derived.mode === 'slots' && this.renderSlotsView(), derived.mode === 'calendar' && this.renderCalendarView()))));
     }
     static get is() { return "tl-occurrence-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -665,13 +283,7 @@ export class TlOccurrenceSelector {
     }
     static get states() {
         return {
-            "loading": {},
-            "error": {},
-            "occurrences": {},
-            "currentMonth": {},
-            "selectedDate": {},
-            "computedDisplayMode": {},
-            "containerWidth": {}
+            "view": {}
         };
     }
     static get events() {
@@ -701,7 +313,16 @@ export class TlOccurrenceSelector {
     static get watchers() {
         return [{
                 "propName": "eventId",
-                "methodName": "onEventIdChange"
+                "methodName": "watchSubject"
+            }, {
+                "propName": "displayMode",
+                "methodName": "syncProps"
+            }, {
+                "propName": "orientation",
+                "methodName": "syncProps"
+            }, {
+                "propName": "theme",
+                "methodName": "syncProps"
             }];
     }
 }