@ticketlayer/elements 0.3.3 → 0.4.0

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

@@ -1,9 +1,400 @@
 'use strict';
 
-var index = require('./index-BpfoKd9Q.js');
+var index = require('./index-I9CoYv3k.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
+var money = require('./money-BtmM2gt-.js');
 
-const tlOccurrenceSelectorCss = () => `:host{--tl-radius:var(--tl-radius-md, 0.5rem);display:block;font-family:var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);color:var(--tl-foreground, #0f172a)}*{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, #64748b)}.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, #ffffff);border:1px solid var(--tl-border, #e2e8f0);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, #e64b12);background:color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff))}.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, #f1f5f9)}.occurrence-item.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.occurrence-info{flex:1}.occurrence-date{font-weight:600;font-size:0.9375rem;color:var(--tl-foreground, #0f172a);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, #e64b12)}.slots-view{display:flex;flex-direction:column;gap:1rem}.slots-date-header{font-size:1.125rem;font-weight:600;color:var(--tl-foreground, #0f172a);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, #ffffff);border:1px solid var(--tl-border, #e2e8f0);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, #e64b12);background:color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff))}.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, #f1f5f9)}.time-slot.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.slot-time{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground, #0f172a)}.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, #e2e8f0);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, #0f172a);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, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;color:var(--tl-foreground, #0f172a)}.nav-button:hover:not(:disabled){background:var(--tl-muted, #f1f5f9)}.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, #ffffff);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, #0f172a)}.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, #e64b12) 10%, var(--tl-background, #ffffff));border-color:transparent;font-weight:600;color:var(--tl-primary, #e64b12)}.calendar-day.has-occurrences:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 18%, var(--tl-background, #ffffff));border-color:transparent}.calendar-day.has-occurrences.sold-out{background:var(--tl-muted, #f1f5f9);border-color:transparent}.calendar-day.has-occurrences.sold-out:hover{background:color-mix(in srgb, var(--tl-muted, #f1f5f9) 80%, var(--tl-background, #ffffff));border-color:transparent}.calendar-day.selected{background:var(--tl-primary, #e64b12);border-color:var(--tl-primary, #e64b12);color:var(--tl-primary-foreground, #ffffff)}.calendar-day.selected:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 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, #f1f5f9);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, #0f172a);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, #ffffff);border:1px solid var(--tl-border, #e2e8f0);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, #e64b12);background:color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff))}.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, #f1f5f9)}.time-slot-item.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.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, #f1f5f9);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, #e2e8f0);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, #0f172a);font-size:0.9375rem;max-width:400px}.retry-button{margin-top:0.5rem;padding:0.625rem 1.25rem;background:var(--tl-primary, #e64b12);color:var(--tl-primary-foreground, #ffffff);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, #e64b12) 90%, black)}.retry-button:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}`;
+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) => money.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 });
+        },
+    }),
+});
+
+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}`;
 
 const TlOccurrenceSelector = class {
     constructor(hostRef) {
@@ -571,7 +962,7 @@ const TlOccurrenceSelector = class {
 };
 TlOccurrenceSelector.style = tlOccurrenceSelectorCss();
 
-const tlTicketSelectorCss = () => `:host{--tl-color-primary:var(--tl-primary, #6366f1);--tl-color-primary-foreground:var(--tl-primary-foreground, #ffffff);--tl-color-background:var(--tl-background, #ffffff);--tl-color-foreground:var(--tl-foreground, #111827);--tl-color-muted:var(--tl-muted, #f3f4f6);--tl-color-muted-foreground:var(--tl-muted-foreground, #6b7280);--tl-color-border:var(--tl-border, #e5e7eb);--tl-color-destructive:var(--tl-error, #ef4444);display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.ticket-selector{background:var(--tl-color-background, #ffffff)}.skeleton-container{padding:var(--tl-spacing-4, 1rem)}.skeleton-row{height:60px;background:var(--tl-color-muted, #f3f4f6);border-radius:var(--tl-radius-md, 0.5rem);margin-bottom:var(--tl-spacing-3, 0.75rem);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{padding:var(--tl-spacing-4, 1rem);color:var(--tl-color-destructive, #ef4444)}.error-message{margin:0;font-size:14px}.ticket-list{margin-bottom:var(--tl-spacing-4, 1rem)}.ticket-row{display:flex;align-items:center;justify-content:space-between;padding:var(--tl-spacing-3, 0.75rem) 0;border-bottom:1px solid var(--tl-color-border, #e5e7eb)}.ticket-row.sold-out{opacity:0.5}.ticket-info{flex:1;min-width:0}.ticket-header{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem);flex-wrap:wrap}.ticket-name{font-weight:600;color:var(--tl-color-foreground, #111827);font-size:15px}.status-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.status-badge.limited{background-color:var(--tl-color-warning-bg, #fef3c7);color:var(--tl-color-warning, #d97706)}.status-badge.sold-out{background-color:var(--tl-color-destructive-bg, #fee2e2);color:var(--tl-color-destructive, #ef4444)}.ticket-description{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:14px;color:var(--tl-color-muted-foreground, #6b7280)}.ticket-price{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:14px;font-weight:600;color:var(--tl-color-foreground, #111827)}.quantity-controls{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem);margin-left:var(--tl-spacing-4, 1rem)}.qty-btn{width:32px;height:32px;border-radius:var(--tl-radius-sm, 0.25rem);border:1px solid var(--tl-color-border, #d1d5db);background:var(--tl-color-background, #ffffff);color:var(--tl-color-foreground, #111827);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, border-color 0.15s}.qty-btn:hover:not(:disabled){background-color:var(--tl-color-muted, #f3f4f6);border-color:var(--tl-color-border-hover, #9ca3af)}.qty-btn:disabled{cursor:not-allowed;opacity:0.5}.qty-value{width:32px;text-align:center;font-weight:600;font-size:16px;color:var(--tl-color-foreground, #111827)}.success-message{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2, 0.5rem);padding:var(--tl-spacing-3, 0.75rem);background-color:var(--tl-color-success, #10b981);color:#ffffff;border-radius:var(--tl-radius-md, 0.5rem);margin-bottom:var(--tl-spacing-3, 0.75rem);font-weight:500;font-size:14px}.success-icon{width:18px;height:18px}.add-to-cart-btn{width:100%;padding:var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);border-radius:var(--tl-radius-md, 0.5rem);border:none;background-color:var(--tl-color-primary, #6366f1);color:var(--tl-color-primary-foreground, #ffffff);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.add-to-cart-btn:hover:not(:disabled){opacity:0.9}.add-to-cart-btn:active:not(:disabled){transform:scale(0.98)}.add-to-cart-btn.disabled,.add-to-cart-btn:disabled{background-color:var(--tl-color-muted, #d1d5db);color:var(--tl-color-muted-foreground, #6b7280);cursor:not-allowed}`;
+const tlTicketSelectorCss = () => `:host{--tl-color-primary:var(--tl-primary);--tl-color-primary-foreground:var(--tl-primary-foreground);--tl-color-background:var(--tl-background);--tl-color-foreground:var(--tl-foreground);--tl-color-muted:var(--tl-muted);--tl-color-muted-foreground:var(--tl-muted-foreground);--tl-color-border:var(--tl-border);--tl-color-destructive:var(--tl-error);display:block;font-family:var(--tl-font-family)}.ticket-selector{background:var(--tl-color-background)}.skeleton-container{padding:var(--tl-spacing-4)}.skeleton-row{height:60px;background:var(--tl-color-muted);border-radius:var(--tl-radius-md);margin-bottom:var(--tl-spacing-3);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{padding:var(--tl-spacing-4);color:var(--tl-color-destructive)}.error-message{margin:0;font-size:14px}.ticket-list{margin-bottom:var(--tl-spacing-4)}.ticket-row{display:flex;align-items:center;justify-content:space-between;padding:var(--tl-spacing-3) 0;border-bottom:1px solid var(--tl-color-border)}.ticket-row.sold-out{opacity:0.5}.ticket-info{flex:1;min-width:0}.ticket-header{display:flex;align-items:center;gap:var(--tl-spacing-2);flex-wrap:wrap}.ticket-name{font-weight:600;color:var(--tl-color-foreground);font-size:15px}.status-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.status-badge.limited{background-color:var(--tl-color-warning-bg);color:var(--tl-color-warning)}.status-badge.sold-out{background-color:var(--tl-color-destructive-bg);color:var(--tl-color-destructive)}.ticket-description{margin:var(--tl-spacing-1) 0 0;font-size:14px;color:var(--tl-color-muted-foreground)}.ticket-price{margin:var(--tl-spacing-1) 0 0;font-size:14px;font-weight:600;color:var(--tl-color-foreground)}.quantity-controls{display:flex;align-items:center;gap:var(--tl-spacing-2);margin-left:var(--tl-spacing-4)}.qty-btn{width:32px;height:32px;border-radius:var(--tl-radius-sm);border:1px solid var(--tl-color-border);background:var(--tl-color-background);color:var(--tl-color-foreground);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, border-color 0.15s}.qty-btn:hover:not(:disabled){background-color:var(--tl-color-muted);border-color:var(--tl-color-border-hover)}.qty-btn:disabled{cursor:not-allowed;opacity:0.5}.qty-value{width:32px;text-align:center;font-weight:600;font-size:16px;color:var(--tl-color-foreground)}.success-message{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2);padding:var(--tl-spacing-3);background-color:var(--tl-color-success);color:#ffffff;border-radius:var(--tl-radius-md);margin-bottom:var(--tl-spacing-3);font-weight:500;font-size:14px}.success-icon{width:18px;height:18px}.add-to-cart-btn{width:100%;padding:var(--tl-spacing-3) var(--tl-spacing-4);border-radius:var(--tl-radius-md);border:none;background-color:var(--tl-color-primary);color:var(--tl-color-primary-foreground);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.add-to-cart-btn:hover:not(:disabled){opacity:0.9}.add-to-cart-btn:active:not(:disabled){transform:scale(0.98)}.add-to-cart-btn.disabled,.add-to-cart-btn:disabled{background-color:var(--tl-color-muted);color:var(--tl-color-muted-foreground);cursor:not-allowed}.selection-totals{padding:var(--tl-spacing-3) 0;border-top:1px solid var(--tl-color-border)}.selection-totals .total-row{display:flex;justify-content:space-between;align-items:center;padding:var(--tl-spacing-1) 0;font-size:14px;color:var(--tl-color-muted-foreground)}.selection-totals .total-row.total{font-size:16px;font-weight:700;color:var(--tl-color-foreground);padding-top:var(--tl-spacing-2);border-top:1px solid var(--tl-color-border);margin-top:var(--tl-spacing-2)}`;
 
 const TlTicketSelector = class {
     constructor(hostRef) {
@@ -587,19 +978,49 @@ const TlTicketSelector = class {
          * Button label
          */
         this.buttonLabel = 'Add to Cart';
-        this.ticketTypes = [];
-        this.quantities = {};
-        this.loading = true;
-        this.error = null;
-        this.adding = false;
-        this.addSuccess = false;
+        this.element = createElement(ticketSelectorCore, {
+            client: () => sdkConnector.getSDK(),
+            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;
+    }
+    /**
+     * The fee the surface has quoted for this selection. Core state, exposed here
+     * because it is set from outside the element and not from an attribute: there
+     * is no quote operation on the buyer-facing surface yet, so it stays null and
+     * no fee row is rendered.
+     */
+    get feeQuote() {
+        return this.element.state.feeQuote;
+    }
+    set feeQuote(quote) {
+        this.element.actions.setFeeQuote(quote);
     }
     watchPropsChange() {
-        this.loadTicketTypes();
+        this.syncProps();
+        this.element.actions.load();
+    }
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            occurrenceId: this.occurrenceId,
+            showButton: this.showButton,
+            buttonLabel: this.buttonLabel,
+        });
     }
     async componentWillLoad() {
+        this.syncProps();
+        this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        });
+        this.view = this.element.view;
         await this.waitForSDKAndLoad();
     }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+        this.element.destroy();
+    }
     /**
      * Wait for SDK to be ready, then load ticket types
      */
@@ -609,135 +1030,40 @@ const TlTicketSelector = class {
         }
         try {
             await sdkConnector.whenSDK();
-            await this.loadTicketTypes();
-        }
-        catch (err) {
-            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
-            this.loading = false;
-        }
-    }
-    async loadTicketTypes() {
-        try {
-            console.log('[tl-ticket-selector] Loading ticket types...', {
-                eventId: this.eventId,
-                occurrenceId: this.occurrenceId
-            });
-            this.loading = true;
-            this.error = null;
-            const sdk = sdkConnector.getSDK();
-            const eventsManager = sdk.getEventsManager();
-            const types = await eventsManager.getTicketTypes(this.eventId, this.occurrenceId);
-            console.log('[tl-ticket-selector] Ticket types loaded:', types.length);
-            this.ticketTypes = types;
-            // Initialise quantities to 0
-            const initialQuantities = {};
-            types.forEach((t) => {
-                initialQuantities[t.id] = 0;
-            });
-            this.quantities = initialQuantities;
+            await this.element.actions.load();
         }
         catch (err) {
-            console.error('[tl-ticket-selector] Failed to load ticket types:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.loading = false;
+            this.element.actions.connectFailed(err instanceof Error ? err.message : this.view.strings.noClient);
         }
     }
-    handleQuantityChange(ticketTypeId, delta) {
-        const ticketType = this.ticketTypes.find(t => t.id === ticketTypeId);
-        if (!ticketType)
-            return;
-        const currentQty = this.quantities[ticketTypeId] || 0;
-        const newQty = Math.max(0, Math.min(ticketType.maxPerOrder, currentQty + delta));
-        this.quantities = {
-            ...this.quantities,
-            [ticketTypeId]: newQty,
-        };
-        const total = this.calculateTotal();
-        this.tlQuantityChange.emit({ ticketTypeId, quantity: newQty, total });
-    }
-    calculateTotal() {
-        return this.ticketTypes.reduce((sum, tt) => {
-            return sum + (this.quantities[tt.id] || 0) * tt.price;
-        }, 0);
-    }
-    getTotalItems() {
-        return Object.values(this.quantities).reduce((sum, qty) => sum + qty, 0);
-    }
-    async handleAddToCart() {
-        const itemsToAdd = Object.entries(this.quantities)
-            .filter(([_, qty]) => qty > 0)
-            .map(([ticketTypeId, quantity]) => ({ ticketTypeId, quantity }));
-        if (itemsToAdd.length === 0)
-            return;
-        this.adding = true;
-        this.addSuccess = false;
-        try {
-            if (sdkConnector.hasSDK()) {
-                const sdk = sdkConnector.getSDK();
-                const cartManager = sdk.getCartManager?.();
-                if (cartManager) {
-                    for (const item of itemsToAdd) {
-                        await cartManager.addItem(item.ticketTypeId, item.quantity, this.occurrenceId);
-                    }
-                    console.log('[tl-ticket-selector] Items added to cart');
-                }
-            }
-            // Reset quantities after adding
-            const resetQuantities = {};
-            this.ticketTypes.forEach(t => {
-                resetQuantities[t.id] = 0;
-            });
-            this.quantities = resetQuantities;
-            this.addSuccess = true;
-            // Clear success message after 3 seconds
-            setTimeout(() => {
-                this.addSuccess = false;
-            }, 3000);
-            this.tlAddToCart.emit({ items: itemsToAdd });
-        }
-        catch (err) {
-            console.error('[tl-ticket-selector] Failed to add to cart:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to add to cart';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.adding = false;
+    forward(event, detail) {
+        if (event === 'tlAddToCart')
+            this.tlAddToCart.emit(detail);
+        else if (event === 'tlQuantityChange') {
+            this.tlQuantityChange.emit(detail);
         }
-    }
-    formatPrice(priceInPence, currency = 'GBP') {
-        return new Intl.NumberFormat('en-GB', {
-            style: 'currency',
-            currency,
-        }).format(priceInPence / 100);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     renderSkeleton() {
         return (index.h("div", { class: "skeleton-container" }, index.h("div", { class: "skeleton-row" }), index.h("div", { class: "skeleton-row" }), index.h("div", { class: "skeleton-row" })));
     }
     renderError() {
-        return (index.h("div", { class: "error-state" }, index.h("p", { class: "error-message" }, this.error)));
+        return (index.h("div", { class: "error-state" }, index.h("p", { class: "error-message" }, this.view.state.error)));
     }
-    renderTicketRow(tt) {
-        const isSoldOut = tt.availabilityStatus === 'sold_out';
-        const qty = this.quantities[tt.id] || 0;
-        return (index.h("div", { class: `ticket-row ${isSoldOut ? 'sold-out' : ''}`, key: tt.id }, index.h("div", { class: "ticket-info" }, index.h("div", { class: "ticket-header" }, index.h("span", { class: "ticket-name" }, tt.name), tt.availabilityStatus === 'limited' && (index.h("span", { class: "status-badge limited" }, "Limited")), isSoldOut && (index.h("span", { class: "status-badge sold-out" }, "Sold Out"))), tt.description && (index.h("p", { class: "ticket-description" }, tt.description)), index.h("p", { class: "ticket-price" }, this.formatPrice(tt.price, tt.currency))), index.h("div", { class: "quantity-controls" }, index.h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, -1), disabled: isSoldOut || qty === 0, "aria-label": "Decrease quantity" }, "\u2212"), index.h("span", { class: "qty-value" }, qty), index.h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, 1), disabled: isSoldOut || qty >= tt.maxPerOrder, "aria-label": "Increase quantity" }, "+"))));
+    renderTicketRow(row) {
+        const strings = this.view.strings;
+        return (index.h("div", { class: `ticket-row ${row.soldOut ? 'sold-out' : ''}`, key: row.id }, index.h("div", { class: "ticket-info" }, index.h("div", { class: "ticket-header" }, index.h("span", { class: "ticket-name" }, row.name), row.limited && index.h("span", { class: "status-badge limited" }, strings.limited), row.soldOut && index.h("span", { class: "status-badge sold-out" }, strings.soldOut)), row.description && index.h("p", { class: "ticket-description" }, row.description), index.h("p", { class: "ticket-price" }, row.priceLabel)), index.h("div", { class: "quantity-controls" }, index.h("button", { class: "qty-btn", onClick: () => this.element.actions.changeQuantity(row.id, -1), disabled: !row.canDecrease, "aria-label": strings.decrease }, "\u2212"), index.h("span", { class: "qty-value" }, row.quantity), index.h("button", { class: "qty-btn", onClick: () => this.element.actions.changeQuantity(row.id, 1), disabled: !row.canIncrease, "aria-label": strings.increase }, "+"))));
     }
     render() {
-        if (this.loading) {
+        const { status, state, strings, derived } = this.view;
+        if (status === 'loading') {
             return this.renderSkeleton();
         }
-        if (this.error) {
+        if (status === 'error') {
             return this.renderError();
         }
-        const totalItems = this.getTotalItems();
-        const totalPrice = this.calculateTotal();
-        return (index.h("div", { class: "ticket-selector" }, index.h("div", { class: "ticket-list" }, this.ticketTypes.map(tt => this.renderTicketRow(tt))), this.addSuccess && (index.h("div", { class: "success-message" }, index.h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Added to cart!")), this.showButton && (index.h("button", { class: `add-to-cart-btn ${totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.handleAddToCart(), disabled: totalItems === 0 || this.adding }, this.adding
-            ? 'Adding...'
-            : totalItems === 0
-                ? 'Select Tickets'
-                : `${this.buttonLabel} - ${this.formatPrice(totalPrice)}`))));
+        return (index.h("div", { class: "ticket-selector" }, index.h("div", { class: "ticket-list" }, derived.rows.map((row) => this.renderTicketRow(row))), derived.showTotals && (index.h("div", { class: "selection-totals" }, index.h("div", { class: "total-row" }, index.h("span", null, strings.ticketsRow), index.h("span", null, derived.subtotalLabel)), index.h("div", { class: "total-row fee" }, index.h("span", null, derived.totals.feeLabel), index.h("span", null, derived.feeLabel)), index.h("div", { class: "total-row total" }, index.h("span", null, strings.totalRow), index.h("span", null, derived.totalLabel)))), state.addSuccess && (index.h("div", { class: "success-message" }, index.h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), strings.added)), this.showButton && (index.h("button", { class: `add-to-cart-btn ${derived.totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.element.actions.addToCart(), disabled: derived.actionDisabled }, derived.actionLabel))));
     }
     static get watchers() { return {
         "eventId": [{
@@ -745,6 +1071,12 @@ const TlTicketSelector = class {
             }],
         "occurrenceId": [{
                 "watchPropsChange": 0
+            }],
+        "showButton": [{
+                "syncProps": 0
+            }],
+        "buttonLabel": [{
+                "syncProps": 0
             }]
     }; }
 };