@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/esm/tl-occurrence-selector_2.entry.js

@@ -1,399 +1,21 @@
-import { r as registerInstance, c as createEvent, h } from './index-OoYV1faY.js';
+import { r as registerInstance, c as createEvent, h } from './index-imfxp765.js';
 import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
-import { s as selectionTotals } from './money-4ig0-WB6.js';
-
-const CATEGORIES = [
-    'discovery',
-    'purchase',
-    'cart',
-    'checkout',
-    'account',
-    'tickets',
-];
-const RUNTIMES = ['web', 'native'];
-/**
- * Declare a core. The checks here are the ones a type cannot make: a tag that
- * is not a `tl-` custom element name, a category or runtime outside the set the
- * catalogue knows, a duplicated token, a status list that does not include what
- * `status` can return. They run at import time, so a malformed core fails the
- * build rather than a browser.
- */
-function defineElement(core) {
-    const fail = (message) => {
-        throw new Error(`[elements-core] ${core.tag || '<no tag>'}: ${message}`);
-    };
-    if (!/^tl-[a-z0-9]+(-[a-z0-9]+)*$/.test(core.tag))
-        fail('tag must look like tl-something');
-    if (!CATEGORIES.includes(core.category))
-        fail(`category must be one of ${CATEGORIES.join(', ')}`);
-    if (!core.runtimes.length || core.runtimes.some((r) => !RUNTIMES.includes(r))) {
-        fail(`runtimes must be a non-empty subset of ${RUNTIMES.join(', ')}`);
-    }
-    if (new Set(core.tokens).size !== core.tokens.length)
-        fail('tokens must not repeat');
-    if (!core.statuses.length)
-        fail('statuses must not be empty');
-    for (const [name, spec] of Object.entries(core.events)) {
-        if (!/^tl[A-Z]/.test(name))
-            fail(`event ${name} must be named tlSomething`);
-        if (!spec.detail)
-            fail(`event ${name} must state its detail type`);
-    }
-    for (const [name, spec] of Object.entries(core.props)) {
-        if (spec.required && spec.default !== undefined)
-            fail(`prop ${name} is required and has a default`);
-    }
-    return Object.freeze({ ...core });
-}
-const DEFAULT_LOCALE = 'en-GB';
-const DEFAULT_CURRENCY = 'GBP';
-/**
- * Instantiate a core. The instance owns the state and the timers; the harness
- * owns the pixels. `subscribe` fires after every change with the whole view, so
- * a harness only has to assign it to whatever makes its runtime re-render.
- */
-function createElement(core, options = {}) {
-    const defaults = {};
-    for (const [name, spec] of Object.entries(core.props)) {
-        if (spec.default !== undefined)
-            defaults[name] = spec.default;
-    }
-    let props = { ...defaults, ...(options.props ?? {}) };
-    const strings = { ...core.strings, ...(options.strings ?? {}) };
-    const locale = options.locale ?? DEFAULT_LOCALE;
-    const fallbackCurrency = options.currency ?? DEFAULT_CURRENCY;
-    let resolveClient = toResolver(options.client);
-    let state = core.state(props);
-    let destroyed = false;
-    const timers = new Set();
-    const listeners = new Set();
-    const formatMoney = (amountInMinorUnits, currency) => new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency: currency || fallbackCurrency,
-    }).format(amountInMinorUnits / 100);
-    const viewContext = () => ({ props, state, strings, formatMoney });
-    const buildView = () => {
-        const ctx = viewContext();
-        return {
-            status: core.status(ctx),
-            props,
-            state,
-            strings,
-            derived: core.derive(ctx),
-        };
-    };
-    const notify = () => {
-        if (destroyed)
-            return;
-        const view = buildView();
-        for (const listener of [...listeners])
-            listener(view);
-    };
-    const actionContext = {
-        get props() {
-            return props;
-        },
-        get state() {
-            return state;
-        },
-        strings,
-        formatMoney,
-        setState(patch) {
-            if (destroyed)
-                return;
-            const next = typeof patch === 'function' ? patch(state) : patch;
-            state = { ...state, ...next };
-            notify();
-        },
-        emit(event, detail) {
-            if (!core.events[event]) {
-                throw new Error(`[elements-core] ${core.tag}: ${event} is not a declared event`);
-            }
-            options.emit?.(event, detail);
-        },
-        client() {
-            const client = resolveClient();
-            if (!client) {
-                throw new Error(`[elements-core] ${core.tag}: no client. A harness hands the core the client the host published.`);
-            }
-            return client;
-        },
-        optionalClient() {
-            try {
-                return resolveClient();
-            }
-            catch {
-                return null;
-            }
-        },
-        after(ms, run) {
-            if (destroyed)
-                return;
-            const handle = setTimeout(() => {
-                timers.delete(handle);
-                if (!destroyed)
-                    run();
-            }, ms);
-            timers.add(handle);
-        },
-    };
-    const actions = core.actions(actionContext);
-    return {
-        core,
-        get props() {
-            return props;
-        },
-        get state() {
-            return state;
-        },
-        get view() {
-            return buildView();
-        },
-        actions,
-        setProps(next) {
-            if (destroyed)
-                return;
-            props = { ...props, ...next };
-            notify();
-        },
-        setClient(client) {
-            resolveClient = toResolver(client);
-        },
-        subscribe(listener) {
-            listeners.add(listener);
-            return () => {
-                listeners.delete(listener);
-            };
-        },
-        destroy() {
-            destroyed = true;
-            for (const handle of timers)
-                clearTimeout(handle);
-            timers.clear();
-            listeners.clear();
-        },
-    };
-}
-function toResolver(client) {
-    if (typeof client === 'function')
-        return client;
-    return () => client ?? null;
-}
-
-/**
- * `tl-ticket-selector`: the reference core.
- *
- * This is the whole of what the element does. The Stencil harness in
- * `packages/elements/src/components/tl-ticket-selector/` renders `view` and
- * forwards the three `tl*` events; it decides nothing, holds no copy and does
- * no arithmetic. A React Native harness will render the same view.
- *
- * Behaviour is the behaviour the Stencil component had before the split, to
- * the letter: the same quantity clamping, the same reset after a successful
- * add, the same three second success message, the same button text, and the
- * same rule that no fee row is shown until the surface quotes a fee. The one
- * thing that did not come across is the `console.log` tracing, which a library
- * should not do for its host.
- */
-const STRINGS = {
-    selectTickets: 'Select Tickets',
-    adding: 'Adding...',
-    added: 'Added to cart!',
-    limited: 'Limited',
-    soldOut: 'Sold Out',
-    ticketsRow: 'Tickets',
-    totalRow: 'Total',
-    decrease: 'Decrease quantity',
-    increase: 'Increase quantity',
-    loadFailed: 'Failed to load tickets',
-    addFailed: 'Failed to add to cart',
-    noClient: 'SDK not initialized.',
-};
-/** How long the "Added to cart!" message stays up. */
-const SUCCESS_MS = 3000;
-const totalsOf = (ctx) => selectionTotals(ctx.state.ticketTypes.map((tt) => ({ price: tt.price, quantity: ctx.state.quantities[tt.id] || 0 })), ctx.state.feeQuote);
-const totalItemsOf = (state) => Object.values(state.quantities).reduce((sum, qty) => sum + qty, 0);
-const ticketSelectorCore = defineElement({
-    tag: 'tl-ticket-selector',
-    docs: 'Pick quantities of the ticket types on sale for one occurrence, and add them to the cart.',
-    category: 'purchase',
-    runtimes: ['web', 'native'],
-    tokens: [
-        'background',
-        'border',
-        'border-hover',
-        'error',
-        'error-bg',
-        'font-family',
-        'foreground',
-        'muted',
-        'muted-foreground',
-        'primary',
-        'primary-foreground',
-        'radius-md',
-        'radius-sm',
-        'spacing-1',
-        'spacing-2',
-        'spacing-3',
-        'spacing-4',
-        'success',
-        'warning',
-        'warning-bg',
-    ],
-    sdkMethods: ['cart.addItem', 'events.getTicketTypes'],
-    props: {
-        eventId: { type: 'string', attr: 'event-id', required: true, docs: 'Event ID' },
-        occurrenceId: { type: 'string', attr: 'occurrence-id', required: true, docs: 'Occurrence ID' },
-        showButton: { type: 'boolean', attr: 'show-button', default: true, docs: 'Show add to cart button' },
-        buttonLabel: { type: 'string', attr: 'button-label', default: 'Add to Cart', docs: 'Button label' },
-    },
-    events: {
-        tlAddToCart: {
-            detail: '{ items: AddToCartItem[]; }',
-            docs: 'Emitted when items are added to cart',
-        },
-        tlQuantityChange: {
-            detail: '{ ticketTypeId: string; quantity: number; total: number; }',
-            docs: 'Emitted when quantity changes',
-        },
-        tlError: {
-            detail: '{ message: string; }',
-            docs: 'Emitted on error',
-        },
-    },
-    strings: STRINGS,
-    statuses: ['loading', 'error', 'ready'],
-    state: () => ({
-        ticketTypes: [],
-        quantities: {},
-        loading: true,
-        error: null,
-        adding: false,
-        addSuccess: false,
-        feeQuote: null,
-    }),
-    status: ({ state }) => (state.loading ? 'loading' : state.error ? 'error' : 'ready'),
-    derive: (ctx) => {
-        const { state, strings, props, formatMoney } = ctx;
-        const totals = totalsOf(ctx);
-        const totalItems = totalItemsOf(state);
-        const currency = state.ticketTypes[0]?.currency;
-        const rows = state.ticketTypes.map((tt) => {
-            const quantity = state.quantities[tt.id] || 0;
-            const soldOut = tt.availabilityStatus === 'sold_out';
-            return {
-                id: tt.id,
-                name: tt.name,
-                description: tt.description ?? null,
-                priceLabel: formatMoney(tt.price, tt.currency),
-                quantity,
-                soldOut,
-                limited: tt.availabilityStatus === 'limited',
-                canDecrease: !soldOut && quantity > 0,
-                canIncrease: !soldOut && quantity < tt.maxPerOrder,
-            };
-        });
-        return {
-            rows,
-            totals,
-            totalItems,
-            currency,
-            subtotalLabel: formatMoney(totals.subtotal, currency),
-            feeLabel: formatMoney(totals.fees, currency),
-            totalLabel: formatMoney(totals.total, currency),
-            showTotals: totals.showFee && totalItems > 0,
-            actionLabel: state.adding
-                ? strings.adding
-                : totalItems === 0
-                    ? strings.selectTickets
-                    : `${props.buttonLabel} - ${formatMoney(totals.total)}`,
-            actionDisabled: totalItems === 0 || state.adding,
-        };
-    },
-    actions: (ctx) => ({
-        /** Read the ticket types for the current event and occurrence. */
-        async load() {
-            try {
-                ctx.setState({ loading: true, error: null });
-                const types = (await ctx.client().getEventsManager().getTicketTypes(ctx.props.eventId, ctx.props.occurrenceId));
-                const quantities = {};
-                for (const type of types)
-                    quantities[type.id] = 0;
-                ctx.setState({ ticketTypes: types, quantities });
-            }
-            catch (err) {
-                const message = err instanceof Error ? err.message : ctx.strings.loadFailed;
-                ctx.setState({ error: message });
-                ctx.emit('tlError', { message });
-            }
-            finally {
-                ctx.setState({ loading: false });
-            }
-        },
-        /** Nudge one row's quantity, clamped to 0 and the type's maxPerOrder. */
-        changeQuantity(ticketTypeId, delta) {
-            const ticketType = ctx.state.ticketTypes.find((t) => t.id === ticketTypeId);
-            if (!ticketType)
-                return;
-            const current = ctx.state.quantities[ticketTypeId] || 0;
-            const quantity = Math.max(0, Math.min(ticketType.maxPerOrder, current + delta));
-            ctx.setState((state) => ({ quantities: { ...state.quantities, [ticketTypeId]: quantity } }));
-            // After setState, so the total is the one the buyer can now see.
-            ctx.emit('tlQuantityChange', { ticketTypeId, quantity, total: totalsOf(ctx).total });
-        },
-        /**
-         * Add every selected line to the cart, then clear the selection.
-         *
-         * With no client, or a client too old to carry a cart manager, the
-         * selection is still cleared and `tlAddToCart` still fires: a host that
-         * listens for the event and does its own cart keeps working.
-         */
-        async addToCart() {
-            const items = Object.entries(ctx.state.quantities)
-                .filter(([, quantity]) => quantity > 0)
-                .map(([ticketTypeId, quantity]) => ({ ticketTypeId, quantity }));
-            if (items.length === 0)
-                return;
-            ctx.setState({ adding: true, addSuccess: false });
-            try {
-                const cart = ctx.optionalClient()?.getCartManager?.();
-                if (cart) {
-                    for (const item of items) {
-                        await cart.addItem(item.ticketTypeId, item.quantity, ctx.props.occurrenceId);
-                    }
-                }
-                const quantities = {};
-                for (const type of ctx.state.ticketTypes)
-                    quantities[type.id] = 0;
-                ctx.setState({ quantities, addSuccess: true });
-                ctx.after(SUCCESS_MS, () => ctx.setState({ addSuccess: false }));
-                ctx.emit('tlAddToCart', { items });
-            }
-            catch (err) {
-                const message = err instanceof Error ? err.message : ctx.strings.addFailed;
-                ctx.setState({ error: message });
-                ctx.emit('tlError', { message });
-            }
-            finally {
-                ctx.setState({ adding: false });
-            }
-        },
-        /** What the surface quoted for this selection, when it ever quotes one. */
-        setFeeQuote(quote) {
-            ctx.setState({ feeQuote: quote });
-        },
-        /**
-         * The host never produced a client. Shown, not emitted: the element has
-         * nothing to say to a page that has not started Live yet.
-         */
-        connectFailed(message) {
-            ctx.setState({ error: message || ctx.strings.noClient, loading: false });
-        },
-    }),
-});
+import { c as createElement, h as occurrenceSelectorCore, t as ticketSelectorCore } from './ticket-selector-BwChnHVC.js';
 
 const tlOccurrenceSelectorCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}*{box-sizing:border-box;margin:0;padding:0}.occurrence-selector{width:100%}.no-occurrences{text-align:center;padding:3rem 1rem;color:var(--tl-muted-foreground)}.list-view{display:flex;flex-direction:column;gap:0.75rem}.occurrence-item{display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:1rem 1.25rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.occurrence-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.occurrence-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.occurrence-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.occurrence-item.sold-out{opacity:0.6;background:var(--tl-muted)}.occurrence-info{flex:1}.occurrence-date{font-weight:600;font-size:0.9375rem;color:var(--tl-foreground);margin-bottom:0.25rem}.occurrence-time{font-size:0.875rem;color:var(--tl-muted-foreground)}.occurrence-status{flex-shrink:0;text-align:right}.status-sold-out{font-size:0.875rem;font-weight:500;color:var(--tl-muted-foreground)}.status-available{font-size:0.875rem;color:var(--tl-muted-foreground)}.status-arrow{font-size:1.25rem;color:var(--tl-primary)}.slots-view{display:flex;flex-direction:column;gap:1rem}.slots-date-header{font-size:1.125rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.5rem;border-bottom:1px solid var(--tl-border)}.time-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.time-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.75rem 0.5rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;font-family:inherit;min-height:3.5rem}.time-slot:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot.sold-out{opacity:0.6;background:var(--tl-muted)}.slot-time{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground)}.slot-sold-out{font-size:0.6875rem;color:var(--tl-muted-foreground);margin-top:0.125rem}.calendar-view{display:flex;flex-direction:column;gap:1.5rem}.calendar-view.horizontal{flex-direction:row;gap:1.5rem;align-items:flex-start}.calendar-view.horizontal .calendar-panel{flex-shrink:0;width:340px}.calendar-view.horizontal .slots-panel{flex:1;min-width:0}.calendar-view.vertical .calendar-panel{width:100%}.calendar-view.vertical .slots-panel{width:100%}.calendar-panel{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:1rem;font-weight:600;color:var(--tl-foreground);flex:1}.calendar-nav-buttons{display:flex;gap:0.375rem}.nav-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;color:var(--tl-foreground)}.nav-button:hover:not(:disabled){background:var(--tl-muted)}.nav-button:disabled{cursor:not-allowed;opacity:0.4}.nav-button svg{width:0.875rem;height:0.875rem}.calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem}.weekday-header{text-align:center;font-size:0.6875rem;font-weight:600;color:var(--tl-muted-foreground);padding:0.375rem 0;text-transform:uppercase;letter-spacing:0.05em}.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;padding:0.1875rem;background:var(--tl-background);border:1px solid transparent;border-radius:var(--tl-radius);cursor:default;transition:all 0.15s ease;font-family:inherit;font-size:0.9375rem;font-weight:500;color:var(--tl-foreground)}.calendar-day.other-month{color:var(--tl-muted-foreground);opacity:0.5}.calendar-day.has-occurrences{cursor:pointer;background:color-mix(in srgb, var(--tl-primary) 10%, var(--tl-background));border-color:transparent;font-weight:600;color:var(--tl-primary)}.calendar-day.has-occurrences:hover{background:color-mix(in srgb, var(--tl-primary) 18%, var(--tl-background));border-color:transparent}.calendar-day.has-occurrences.sold-out{background:var(--tl-muted);border-color:transparent}.calendar-day.has-occurrences.sold-out:hover{background:color-mix(in srgb, var(--tl-muted) 80%, var(--tl-background));border-color:transparent}.calendar-day.selected{background:var(--tl-primary);border-color:var(--tl-primary);color:var(--tl-primary-foreground)}.calendar-day.selected:hover{background:color-mix(in srgb, var(--tl-primary) 90%, black)}.calendar-day.selected .occurrence-dot{background:var(--tl-primary-foreground)}.calendar-day.today .day-number{font-weight:700;text-decoration:underline;text-underline-offset:2px}.calendar-day.past:not(.has-occurrences){opacity:0.4}.day-number{line-height:1}.occurrence-dot{display:none}.slots-panel{min-height:200px}.selected-date-slots{height:100%}.selected-date-slots.empty{display:flex;align-items:center;justify-content:center;color:var(--tl-muted-foreground);background:var(--tl-muted);border-radius:var(--tl-radius);padding:2rem 1rem;text-align:center;min-height:200px;font-size:0.875rem}.selected-date-header{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.625rem;margin-bottom:0.625rem}.time-slots-list{display:flex;flex-direction:column;gap:0.5rem}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.625rem 0.875rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.time-slot-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot-item.sold-out{opacity:0.6;background:var(--tl-muted)}.time-slot-item .slot-time{font-size:0.9375rem;font-weight:600}.slot-status{flex-shrink:0}.slot-status .status-sold-out{font-size:0.75rem}.slot-status .status-available{font-size:0.75rem}.slot-status .status-arrow{font-size:1rem}@media (max-width: 640px){.event-name{font-size:1.25rem}.occurrence-date{font-size:0.875rem}.time-slots-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}.time-slot{padding:0.625rem 0.375rem;min-height:3rem}.slot-time{font-size:0.875rem}.calendar-day{font-size:0.75rem}.weekday-header{font-size:0.625rem}.calendar-view.horizontal .calendar-panel{width:100%}}@media (max-width: 767px){.calendar-view.horizontal{flex-direction:column}}.loading-container{padding:1rem 0;min-height:400px}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}.skeleton{background:var(--tl-muted);border-radius:var(--tl-radius);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-list{display:flex;flex-direction:column;gap:0.75rem}.skeleton-list-item{height:4.5rem;border-radius:var(--tl-radius)}.skeleton-calendar{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem;min-height:350px}.skeleton-calendar-header{height:1.75rem;width:50%;margin-bottom:0.75rem;border-radius:var(--tl-radius)}.skeleton-calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem;margin-top:0.75rem}.skeleton-calendar-day{aspect-ratio:1;border-radius:var(--tl-radius)}.skeleton-slots{display:flex;flex-direction:column;gap:1rem}.skeleton-slots-header{height:1.75rem;width:60%;border-radius:var(--tl-radius);margin-bottom:0.5rem}.skeleton-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.skeleton-slot-item{height:3.5rem;border-radius:var(--tl-radius)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:1rem;text-align:center}.error-icon{width:3rem;height:3rem;color:var(--tl-muted-foreground);stroke-width:1.5}.error-message{color:var(--tl-foreground);font-size:0.9375rem;max-width:400px}.retry-button{margin-top:0.5rem;padding:0.625rem 1.25rem;background:var(--tl-primary);color:var(--tl-primary-foreground);border:none;border-radius:var(--tl-radius);font-family:inherit;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s ease}.retry-button:hover{background:color-mix(in srgb, var(--tl-primary) 90%, black)}.retry-button:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}`;
 
+/** 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'],
+];
 const TlOccurrenceSelector = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -402,559 +24,155 @@ const TlOccurrenceSelector = class {
          * 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;
+        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;
+    }
+    /**
+     * 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.
+     */
+    watchSubject() {
+        this.syncProps();
+        this.teardown?.();
+        this.teardown = this.element.mount();
     }
-    async componentWillLoad() {
-        await this.waitForSDKAndFetch();
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            displayMode: this.displayMode,
+            orientation: this.orientation,
+            theme: this.theme,
+        });
     }
     /**
-     * Wait for SDK to be ready, then fetch occurrences
+     * 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.
      */
-    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;
-        }
+    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
-     */
-    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
+     * 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.
      */
-    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 watchers() { return {
         "eventId": [{
-                "onEventIdChange": 0
+                "watchSubject": 0
+            }],
+        "displayMode": [{
+                "syncProps": 0
+            }],
+        "orientation": [{
+                "syncProps": 0
+            }],
+        "theme": [{
+                "syncProps": 0
             }]
     }; }
 };
@@ -978,6 +196,9 @@ const TlTicketSelector = class {
         this.buttonLabel = 'Add to Cart';
         this.element = createElement(ticketSelectorCore, {
             client: () => getSDK(),
+            // What "the client is up" means on the web. The core waits on it in its
+            // own mount; the harness no longer decides when to load (TKT-197).
+            clientReady: () => whenSDK(),
             emit: (event, detail) => this.forward(event, detail),
         });
         /** The core's whole view. Assigning it is what makes Stencil re-render. */
@@ -995,9 +216,14 @@ const TlTicketSelector = class {
     set feeQuote(quote) {
         this.element.actions.setFeeQuote(quote);
     }
+    /**
+     * A new event or occurrence 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.
+     */
     watchPropsChange() {
         this.syncProps();
-        this.element.actions.load();
+        this.remount();
     }
     syncProps() {
         this.element.setProps({
@@ -1007,32 +233,38 @@ const TlTicketSelector = class {
             buttonLabel: this.buttonLabel,
         });
     }
-    async componentWillLoad() {
+    /**
+     * On screen: render what the core says and put the core to work. What "to
+     * work" means is the core's own business - for this element, waiting for the
+     * client and reading the ticket types.
+     *
+     * `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.element.subscribe((view) => {
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
             this.view = view;
-        });
+        }));
         this.view = this.element.view;
-        await this.waitForSDKAndLoad();
+        this.teardown = this.element.mount();
     }
+    /**
+     * Off screen: run the mount's teardown, and nothing more. `destroy()` is
+     * terminal and Stencil calls this for a move as well as a removal, so
+     * destroying here would leave a re-inserted element frozen. The instance
+     * holds no listener and no subscription once these two have run.
+     */
     disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
         this.unsubscribe?.();
-        this.element.destroy();
+        this.unsubscribe = undefined;
     }
-    /**
-     * Wait for SDK to be ready, then load ticket types
-     */
-    async waitForSDKAndLoad() {
-        if (!this.eventId || !this.occurrenceId) {
-            return;
-        }
-        try {
-            await whenSDK();
-            await this.element.actions.load();
-        }
-        catch (err) {
-            this.element.actions.connectFailed(err instanceof Error ? err.message : this.view.strings.noClient);
-        }
+    remount() {
+        this.teardown?.();
+        this.teardown = this.element.mount();
     }
     forward(event, detail) {
         if (event === 'tlAddToCart')