@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/esm/ticket-selector-BwChnHVC.js

@@ -0,0 +1,3606 @@
+/** The store a core gets when its harness supplies none: it forgets. */
+const NO_STORAGE = {
+    get: () => null,
+    set: () => undefined,
+};
+/** The parameters a core gets when its harness supplies none: there are none. */
+const NO_QUERY = {
+    get: () => null,
+};
+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 storage = options.storage ?? NO_STORAGE;
+    const query = options.query ?? NO_QUERY;
+    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 whenClient = async () => {
+        if (options.clientReady)
+            await options.clientReady();
+        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;
+    };
+    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;
+            }
+        },
+        storage,
+        query,
+        whenClient,
+        after(ms, run) {
+            if (destroyed)
+                return;
+            const handle = setTimeout(() => {
+                timers.delete(handle);
+                if (!destroyed)
+                    run();
+            }, ms);
+            timers.add(handle);
+        },
+    };
+    const actions = core.actions(actionContext);
+    // The live mount, as an identity rather than a boolean: a teardown closes
+    // over the token it was made for, so a stale one tears nothing down.
+    let mountToken = null;
+    let cleanups = [];
+    const teardownMount = (token) => {
+        if (mountToken !== token)
+            return;
+        mountToken = null;
+        const pending = cleanups;
+        cleanups = [];
+        for (const cleanup of pending.reverse())
+            cleanup();
+    };
+    const mount = () => {
+        if (destroyed)
+            return () => { };
+        if (mountToken)
+            teardownMount(mountToken);
+        const token = {};
+        mountToken = token;
+        const live = () => mountToken === token && !destroyed;
+        const returned = core.mount?.({
+            ...actionContext,
+            get props() {
+                return props;
+            },
+            get state() {
+                return state;
+            },
+            actions,
+            active: live,
+            onTeardown(cleanup) {
+                if (live())
+                    cleanups.push(cleanup);
+                else
+                    cleanup();
+            },
+        });
+        if (typeof returned === 'function') {
+            if (live())
+                cleanups.push(returned);
+            else
+                returned();
+        }
+        return () => teardownMount(token);
+    };
+    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);
+            };
+        },
+        mount,
+        get mounted() {
+            return mountToken !== null;
+        },
+        destroy() {
+            if (mountToken)
+                teardownMount(mountToken);
+            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;
+}
+
+/**
+ * The money rows a cart-shaped view renders: subtotal, the booking fee, a
+ * discount and the total.
+ *
+ * Pure: no Stencil, no DOM, no SDK. A core derives these figures and a harness
+ * renders what it returns, so the rule for what is shown can be unit tested on
+ * its own (the platform plan's headless-core split, AGENTS.md). It lived in
+ * `packages/elements/src/utils/cart-totals.ts` until the core split (TKT-68)
+ * and is re-exported from there, so every existing import still resolves.
+ *
+ * The client (`@ticketlayer/live`) already derives these figures from the
+ * sales-surface response and publishes `subtotal`, `fees`, `discount`,
+ * `total`, `hasFees` and `feeLabel` on the cart it hands us. Cores never
+ * import the client, so the same rule is stated here for the case where a
+ * host binds an older connector, or a bare sales cart: read what is there,
+ * and never invent money that is not.
+ *
+ * Money is integer minor units (2500 = 25.00) everywhere on this platform.
+ * Nothing here divides or multiplies money; the only division is the one
+ * `formatPrice` does to render it.
+ */
+/** Shown when the response names no fee of its own. */
+const FEE_LABEL_FALLBACK = 'Booking fee';
+/**
+ * Minor units, or null when the value is not minor units. Integers and
+ * all-digit strings only: a decimal is not minor units, and treating it as
+ * money here would put floating point into a total.
+ */
+function minorUnits(value) {
+    if (typeof value === 'number')
+        return Number.isInteger(value) ? value : null;
+    if (typeof value === 'string' && /^-?\d+$/.test(value))
+        return Number(value);
+    return null;
+}
+/**
+ * THE RULE: a fee of zero is not the same as no fee.
+ *
+ * Render the fee row when the response EXPRESSES a fee - an amount above
+ * zero, or a fee the surface has NAMED (a `type: 'fee'` line or a fee label)
+ * even where it computes to zero. A response with no fee figure at all, or a
+ * bare zero nothing names, expresses no fee: a channel with no fee profile
+ * renders no row, and we never show a "Booking fee 0.00" the surface did not
+ * put there.
+ */
+function expressesFee(fees, named) {
+    if (fees === null)
+        return named;
+    return fees > 0 || named;
+}
+const lineType = (line) => line.type || 'ticket';
+function cartTotals(cart) {
+    const c = cart || {};
+    const lines = Array.isArray(c.items) ? c.items : [];
+    const feeLines = lines.filter((l) => lineType(l) === 'fee');
+    const discountLines = lines.filter((l) => lineType(l) === 'discount');
+    const subtotal = minorUnits(c.itemsSubtotal) ??
+        minorUnits(c.subtotal) ??
+        lines
+            .filter((l) => !['fee', 'tax', 'discount'].includes(lineType(l)))
+            .reduce((sum, l) => sum + (minorUnits(l.subtotal) ?? 0), 0);
+    const feeFromLines = feeLines.length
+        ? feeLines.reduce((sum, l) => sum + (minorUnits(l.subtotal) ?? 0), 0)
+        : null;
+    const fees = minorUnits(c.totalFees) ?? minorUnits(c.fees) ?? feeFromLines;
+    const discountFromLines = discountLines.length
+        ? discountLines.reduce((sum, l) => sum + Math.abs(minorUnits(l.subtotal) ?? 0), 0)
+        : null;
+    const discount = minorUnits(c.totalDiscounts) ?? minorUnits(c.discount) ?? discountFromLines;
+    const tax = minorUnits(c.totalTax) ?? 0;
+    const named = (typeof c.feeLabel === 'string' && !!c.feeLabel) ||
+        feeLines.some((l) => typeof l.name === 'string' && !!l.name);
+    const label = (typeof c.feeLabel === 'string' && c.feeLabel) ||
+        feeLines.map((l) => l.name).find((n) => typeof n === 'string' && !!n) ||
+        FEE_LABEL_FALLBACK;
+    return {
+        currency: c.currency || 'GBP',
+        subtotal,
+        fees: fees ?? 0,
+        discount: discount ?? 0,
+        // The server's total is what the buyer is charged, so it wins over any sum
+        // we could do here. We only add up when the response carries no total.
+        total: minorUnits(c.total) ?? subtotal + (fees ?? 0) + tax - (discount ?? 0),
+        // The client already applied the rule; honour its answer when it sent one.
+        showFee: typeof c.hasFees === 'boolean' ? c.hasFees : expressesFee(fees, named),
+        feeLabel: label,
+    };
+}
+/**
+ * The totals for a selection that is not yet a cart (tl-ticket-selector).
+ *
+ * The buyer-facing surface quotes no fee before the cart exists - there is no
+ * quote or preview operation, and the channel's fee profile is not exposed to
+ * a publishable key - so `quote` is null on every call today and no fee row is
+ * rendered. It is a parameter rather than an assumption so that the row lights
+ * up from data the moment the surface quotes one, and so the rule stays
+ * testable now.
+ */
+function selectionTotals(lines, quote = null) {
+    const subtotal = (lines || []).reduce((sum, l) => sum + (minorUnits(l.price) ?? 0) * (Math.max(0, Math.trunc(l.quantity || 0)) || 0), 0);
+    const fees = quote ? minorUnits(quote.amount) : null;
+    const named = !!quote?.label;
+    return {
+        subtotal,
+        fees: fees ?? 0,
+        total: subtotal + (fees ?? 0),
+        showFee: quote ? expressesFee(fees, named) : false,
+        feeLabel: quote?.label || FEE_LABEL_FALLBACK,
+    };
+}
+
+/**
+ * The order shape, and what every harness has to work out from it.
+ *
+ * The sales order view carries line items, totals and tickets but no event
+ * name, no occurrence date and often no customer email, so these derive what
+ * they can from the order and resolve the rest through the client. They lived
+ * in `packages/elements/src/utils/order-summary.ts`, where only the web could
+ * reach them; they moved here with the split of `tl-my-orders` and
+ * `tl-order-confirmation` (TKT-69) so the same rules answer on every runtime.
+ * That module re-exports them, so every existing import still resolves and
+ * `tl-order-tickets` and `tl-ticket`, which are not split yet, read the same
+ * helpers they always did.
+ *
+ * `en-GB` is written out in the date and money helpers rather than taken from
+ * the instance's locale. That is what the components did and this is a
+ * behaviour-identical move; `ctx.formatMoney` is the locale-aware formatter and
+ * these are deliberately not it, because an order's money arrives as a minor
+ * unit integer OR a decimal string and `formatMoney` takes only the first.
+ */
+/** Money arrives as minor-unit integers or decimal strings ("50.00"). */
+function formatPrice$1(value, currency = 'GBP') {
+    if (value === null || value === undefined || value === '')
+        return '';
+    const fmt = new Intl.NumberFormat('en-GB', { style: 'currency', currency });
+    if (typeof value === 'number')
+        return fmt.format(value / 100);
+    const n = Number(value);
+    return Number.isNaN(n) ? String(value) : fmt.format(n);
+}
+function formatDateTime(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+function formatDate$3(iso) {
+    return new Date(iso).toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+/** Line items that are tickets (fees, taxes and discounts have their own type). */
+function ticketItems(order) {
+    return (order.items ?? []).filter((i) => !i.type || i.type === 'ticket');
+}
+function ticketCount(order) {
+    const fromItems = ticketItems(order).reduce((sum, i) => sum + (Number(i.quantity) || 0), 0);
+    return fromItems || order.tickets?.length || 0;
+}
+/** Event name as the order view exposes it: the first ticket line's name. */
+function orderEventName(order) {
+    return order.eventName || ticketItems(order)[0]?.name || order.items?.[0]?.name || null;
+}
+function orderCustomerEmail(order, customer) {
+    const fromOrder = order?.customerEmail || order?.customer?.email;
+    if (fromOrder)
+        return fromOrder;
+    const c = customer;
+    return c?.email || null;
+}
+function statusLabel(status) {
+    if (!status)
+        return '';
+    return status.replace(/_/g, ' ').replace(/^\w/, (m) => m.toUpperCase());
+}
+function statusTone(status) {
+    switch (status) {
+        case 'confirmed':
+            return 'success';
+        case 'completed':
+        case 'fulfilled':
+            return 'info';
+        case 'pending':
+        case 'processing':
+            return 'warning';
+        case 'cancelled':
+        case 'expired':
+        case 'failed':
+            return 'error';
+        default:
+            return 'muted';
+    }
+}
+function errorMessage(err, fallback) {
+    return err instanceof Error && err.message ? err.message : fallback;
+}
+/**
+ * Find the event and start time for an occurrence id. The order view only
+ * carries the occurrence id, so this walks the channel's listings (cached by
+ * live-api) until one owns the occurrence. Best effort: null when not found,
+ * and null on a client whose events manager cannot list or fetch, which is an
+ * older connector rather than a failure.
+ */
+async function resolveOccurrence(client, occurrenceId, maxEvents = 12) {
+    const events = client.getEventsManager();
+    if (!events?.list || !events.get)
+        return null;
+    const listing = await events.list({ limit: maxEvents });
+    const items = (listing?.items ?? []);
+    const candidates = items.slice(0, maxEvents);
+    for (const candidate of candidates) {
+        const detail = (await events.get(candidate.id).catch(() => null));
+        const occ = detail?.occurrences?.find((o) => o.id === occurrenceId);
+        if (occ) {
+            return {
+                eventId: detail?.id ?? candidate.id,
+                eventName: detail?.name ?? candidate.name ?? '',
+                startsAt: occ.startsAt ?? null,
+            };
+        }
+    }
+    return null;
+}
+function orderTotals(order) {
+    const o = order || {};
+    const items = Array.isArray(o.items) ? o.items : [];
+    const feeLines = items.filter((i) => i.type === 'fee');
+    const discountLines = items.filter((i) => i.type === 'discount');
+    const tickets = ticketItems(o);
+    const feeFromLines = feeLines.length
+        ? feeLines.reduce((sum, i) => sum + (minorUnits(i.subtotal) ?? 0), 0)
+        : null;
+    const fees = feeFromLines ?? minorUnits(o.totalFees) ?? 0;
+    const declaredSubtotal = minorUnits(o.subtotal);
+    const subtotal = tickets.length
+        ? tickets.reduce((sum, i) => sum + (minorUnits(i.subtotal) ?? 0), 0)
+        : (declaredSubtotal ?? 0) - fees;
+    const discountFromLines = discountLines.length
+        ? discountLines.reduce((sum, i) => sum + Math.abs(minorUnits(i.subtotal) ?? 0), 0)
+        : null;
+    const discount = minorUnits(o.totalDiscounts) ?? discountFromLines ?? 0;
+    const tax = minorUnits(o.totalTax) ?? 0;
+    const named = feeLines.some((i) => typeof i.name === 'string' && !!i.name);
+    return {
+        currency: o.currency || 'GBP',
+        subtotal,
+        fees,
+        feeLabel: feeLines.map((i) => i.name).find((n) => !!n) || FEE_LABEL_FALLBACK,
+        showFee: expressesFee(feeFromLines ?? minorUnits(o.totalFees), named),
+        tax,
+        discount,
+        total: minorUnits(o.total) ?? subtotal + fees + tax - discount,
+    };
+}
+
+/**
+ * `tl-buy-tickets-button`: the pre-styled button that opens the purchase
+ * modal for one event.
+ *
+ * The sibling of `tl-buy-tickets-wrapper`. The wrapper turns whatever the host
+ * already has into the thing that opens the modal; this one IS the thing, so
+ * on top of the wrapper's single action it carries the four sale states a
+ * seller puts a button in, the label each one defaults to, and the price the
+ * button may show beside it.
+ *
+ * Until now it could not be split for a different reason from the wrapper's.
+ * Its four states painted themselves from literal hex in the component, and a
+ * core may hold no value at all, so there was nothing to lift. TKT-203 moved
+ * them onto token families - `available` to primary, `soldOut` to error,
+ * `comingSoon` to warning, `waitlist` to info, each deriving its hover with
+ * `color-mix` - and that is what unblocked this.
+ *
+ * What a core still cannot say, and this one does not try to: WHICH family a
+ * state paints with. `tokens` is a flat list and there is no shape for mapping
+ * one onto a status. So this core does what `tl-event-card`'s status badge
+ * does - it derives the CLASS NAME the state is rendered under
+ * (`derived.stateClass`) and leaves the stylesheet to say which family that
+ * class reaches for. The core names the state; the harness names the paint.
+ *
+ * Behaviour is what the Stencil component did, to the letter:
+ *
+ *  - `disabled`, `soldOut` and `comingSoon` are not pressable, and a press on
+ *    one of them does nothing whatever: no event, no modal.
+ *  - a press announces `tlClick` FIRST and opens the modal after, so a host
+ *    hears the intent even on a page that never started Live.
+ *  - with no client, or a connector too old to have the modal verbs, the press
+ *    still announces `tlClick` and then quietly opens nothing. Unlike the
+ *    wrapper this element has no error event to say so with, and inventing one
+ *    would be a new published surface rather than a split.
+ *  - the label is the `label` prop when the host set one, else the state's own.
+ *  - the price is formatted `en-GB`, in the button's currency, with the pence
+ *    shown only when there are any.
+ *
+ * What did not come across is the `console.error` the component wrote when the
+ * modal threw, for the reason `tl-cart` and `tl-promo-code` dropped theirs: a
+ * library should not write to its host's console.
+ *
+ * The other thing a core refuses to know is which key press counts as
+ * activation. `activate()` is the whole input surface; the harness decides what
+ * reaches it - a click and Enter or Space on the web, a press on a phone.
+ */
+const STRINGS$e = {
+    available: 'Buy Tickets',
+    soldOut: 'Sold Out',
+    waitlist: 'Join Waitlist',
+    comingSoon: 'On Sale Soon',
+};
+/** Sale state -> the class it renders under. */
+const STATE_CLASSES = {
+    available: 'state-available',
+    soldOut: 'state-sold-out',
+    waitlist: 'state-waitlist',
+    comingSoon: 'state-coming-soon',
+};
+/** The states a press does nothing in, whatever `disabled` says. */
+const NOT_PRESSABLE = ['soldOut', 'comingSoon'];
+const pressable = (props) => !props.disabled && !NOT_PRESSABLE.includes(props.state);
+/**
+ * As the component formatted it: `en-GB`, minor units, and the pence only when
+ * there are any. The locale is written down here rather than taken from
+ * `ctx.formatMoney` because that is what the element did before the split and
+ * this is a split, not a change (see the note on the card core's date).
+ */
+function formatPrice(priceInMinorUnits, currency) {
+    const amount = priceInMinorUnits / 100;
+    const hasDecimals = amount % 1 !== 0;
+    return new Intl.NumberFormat('en-GB', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: hasDecimals ? 2 : 0,
+        maximumFractionDigits: hasDecimals ? 2 : 0,
+    }).format(amount);
+}
+const buyTicketsButtonCore = defineElement({
+    tag: 'tl-buy-tickets-button',
+    docs: 'A buy-tickets button in one of four sale states, which opens the purchase modal.',
+    category: 'purchase',
+    runtimes: ['web'],
+    tokens: [
+        'error',
+        'error-foreground',
+        'font-family',
+        'info',
+        'info-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-lg',
+        'radius-md',
+        'radius-sm',
+        'warning',
+        'warning-foreground',
+    ],
+    sdkMethods: ['event.openModal'],
+    props: {
+        eventId: {
+            type: 'string',
+            attr: 'event-id',
+            required: true,
+            docs: 'Event ID to purchase tickets for',
+        },
+        occurrenceId: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'occurrence-id',
+            docs: 'Optional pre-selected occurrence ID',
+        },
+        state: {
+            type: 'string',
+            tsType: '"available" | "comingSoon" | "soldOut" | "waitlist"',
+            attr: 'state',
+            default: 'available',
+            docs: 'Button state - determines colour, label, and icon',
+        },
+        label: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'label',
+            docs: 'Button label override (default depends on state)',
+        },
+        variant: {
+            type: 'string',
+            tsType: '"outline" | "primary" | "secondary"',
+            attr: 'variant',
+            default: 'primary',
+            docs: 'Button variant',
+        },
+        size: {
+            type: 'string',
+            tsType: '"lg" | "md" | "sm"',
+            attr: 'size',
+            default: 'md',
+            docs: 'Button size',
+        },
+        fullWidth: {
+            type: 'boolean',
+            attr: 'full-width',
+            default: false,
+            docs: 'Full width button',
+        },
+        price: {
+            type: 'number',
+            tsType: 'number | undefined',
+            attr: 'price',
+            docs: 'Price to display (in minor units e.g. pence)',
+        },
+        currency: {
+            type: 'string',
+            attr: 'currency',
+            default: 'GBP',
+            docs: 'Currency code for price formatting',
+        },
+        pricePrefix: {
+            type: 'string',
+            attr: 'price-prefix',
+            default: 'From',
+            docs: 'Show price prefix text',
+        },
+        disabled: {
+            type: 'boolean',
+            attr: 'disabled',
+            default: false,
+            docs: 'Disabled state',
+        },
+    },
+    events: {
+        tlClick: {
+            detail: '{ eventId: string; occurrenceId?: string | undefined; }',
+            docs: 'Emitted when button is clicked (before modal opens)',
+        },
+    },
+    strings: STRINGS$e,
+    statuses: ['ready', 'disabled'],
+    state: () => ({}),
+    status: ({ props }) => (pressable(props) ? 'ready' : 'disabled'),
+    derive: ({ props, strings }) => ({
+        interactive: pressable(props),
+        buttonLabel: props.label || strings[props.state],
+        stateClass: STATE_CLASSES[props.state],
+        priceLabel: props.price === undefined ? null : formatPrice(props.price, props.currency),
+    }),
+    actions: (ctx) => ({
+        /** A click, a tap, Enter or Space: whatever the harness calls a press. */
+        activate() {
+            if (!pressable(ctx.props))
+                return;
+            // Announced first, and whatever happens next: a host that tracks buying
+            // intent hears it even on a page that never started Live.
+            ctx.emit('tlClick', { eventId: ctx.props.eventId, occurrenceId: ctx.props.occurrenceId });
+            const client = ctx.optionalClient();
+            // Tolerated rather than assumed, like every other accessor a core reads:
+            // the same core runs against whatever connector version the host has.
+            if (!client || !client.event)
+                return;
+            try {
+                client.event(ctx.props.eventId).openModal({ occurrenceId: ctx.props.occurrenceId });
+            }
+            catch {
+                // The component swallowed this too (it logged and carried on). This
+                // element has no error event to announce it with, and giving it one
+                // would be a new published surface rather than a split.
+            }
+        },
+    }),
+});
+
+/**
+ * `tl-buy-tickets-wrapper`: whatever the page already has, turned into the
+ * thing that opens the purchase modal.
+ *
+ * The element renders nothing of its own - the host's own button, link or card
+ * is slotted into it - so this is the smallest core in the package: no state,
+ * one action, and three events that exist only because the modal reports back
+ * to whoever opened it.
+ *
+ * Until now it could not be split at all. Its events were `tl-complete`,
+ * `tl-error` and `tl-close`, and `defineElement` requires `tlSomething`; the
+ * names were renamed to `tlComplete`, `tlError` and `tlClose` (TKT-203), which
+ * is what made this possible. The rename is a breaking change to a published
+ * element and is deliberate.
+ *
+ * Behaviour is what the Stencil component did, to the letter:
+ *
+ *  - a disabled wrapper does nothing at all, and announces nothing.
+ *  - with no client on the page the click announces `tlError` rather than
+ *    throwing, because the host asked for a modal and deserves to hear that it
+ *    did not open.
+ *  - the modal is the client's, not the element's. This core asks for it and
+ *    then only relays what comes back.
+ *
+ * What did not come across is the `console.error` tracing, for the reason
+ * `tl-cart` and `tl-promo-code` dropped theirs: a library should not write to
+ * its host's console when it has an event for saying the same thing.
+ *
+ * What a core still cannot say, and this one does not try to: which key press
+ * counts as activation. `activate()` is the whole input surface, and each
+ * harness decides what reaches it - a click and Enter or Space on the web, a
+ * press on a phone.
+ */
+const STRINGS$d = {
+    noClient: 'SDK not initialized',
+    notAvailable: 'Tickets are not available',
+};
+const buyTicketsWrapperCore = defineElement({
+    tag: 'tl-buy-tickets-wrapper',
+    docs: 'Wrap any content and open the purchase modal when it is activated.',
+    category: 'purchase',
+    runtimes: ['web'],
+    tokens: ['radius-sm', 'ring'],
+    sdkMethods: ['event.openModal'],
+    props: {
+        eventId: {
+            type: 'string',
+            attr: 'event-id',
+            required: true,
+            docs: 'The event ID to purchase tickets for',
+        },
+        occurrenceId: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'occurrence-id',
+            docs: 'Optional specific occurrence ID (skips occurrence selector)',
+        },
+        disabled: {
+            type: 'boolean',
+            attr: 'disabled',
+            default: false,
+            docs: 'Whether the wrapper is disabled',
+        },
+    },
+    events: {
+        // `OrderResult` because that is the name the web harness writes, and the
+        // catalogue compares the two: it is the connector's name for the shape
+        // `ElementOrderResult` describes here.
+        tlComplete: { detail: 'OrderResult', docs: 'Emitted when purchase completes successfully' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted when an error occurs' },
+        tlClose: { detail: 'void', docs: 'Emitted when the modal closes' },
+    },
+    strings: STRINGS$d,
+    statuses: ['ready', 'disabled'],
+    state: () => ({}),
+    status: ({ props }) => (props.disabled ? 'disabled' : 'ready'),
+    derive: ({ props }) => ({ interactive: !props.disabled }),
+    actions: (ctx) => ({
+        /** A click, a tap, Enter or Space: whatever the harness calls a press. */
+        activate() {
+            if (ctx.props.disabled)
+                return;
+            const client = ctx.optionalClient();
+            if (!client) {
+                ctx.emit('tlError', { message: ctx.strings.noClient });
+                return;
+            }
+            // Tolerated rather than assumed, like every other accessor a core reads:
+            // the same core runs against whatever connector version the host has.
+            if (!client.event) {
+                ctx.emit('tlError', { message: ctx.strings.notAvailable });
+                return;
+            }
+            client.event(ctx.props.eventId).openModal({
+                occurrenceId: ctx.props.occurrenceId,
+                onComplete: (order) => ctx.emit('tlComplete', order),
+                onError: (err) => ctx.emit('tlError', { message: err.message }),
+                onClose: () => ctx.emit('tlClose', undefined),
+            });
+        },
+    }),
+});
+
+/**
+ * `tl-cart`: the cart as a list of lines, its money rows and a checkout button.
+ *
+ * The first core that lives on a subscription. It reads the cart once when a
+ * harness mounts it and then keeps itself current from the client's
+ * `cart:updated` bus, binding that subscription inside its own `mount` and
+ * handing the unsubscribe to `ctx.onTeardown` (TKT-197). No harness owns a
+ * subscription any more, on any runtime, and a remount cannot leave two
+ * behind: `createElement` keeps at most one mount live.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter:
+ * the same money rows through `cartTotals`, the same compact mode, the same
+ * silence when the host published no client, the same events in the same
+ * order. What did not come across is the `console.log` tracing, which a library
+ * should not do for its host.
+ */
+const STRINGS$c = {
+    emptyTitle: 'Your cart is empty',
+    emptyMessage: 'Add tickets to get started',
+    subtotalRow: 'Subtotal',
+    discountRow: 'Discount',
+    totalRow: 'Total',
+    removeItem: 'Remove item',
+    quantityPrefix: 'Qty: ',
+    loadFailed: 'Failed to load cart',
+    removeFailed: 'Failed to remove item',
+};
+/**
+ * The occurrence date, as the component formatted it.
+ *
+ * `en-GB` is written here rather than taken from the instance's locale because
+ * that is what the component did, and this split is behaviour-identical. There
+ * is no locale on the view context today; `formatMoney` closes over one and
+ * nothing else does.
+ */
+function formatDate$2(dateString) {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+const cartCore = defineElement({
+    tag: 'tl-cart',
+    docs: "The buyer's cart: its lines, the money rows the surface reported and a checkout button.",
+    category: 'cart',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'error-bg',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+        'radius-sm',
+        'spacing-1',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'spacing-8',
+    ],
+    sdkMethods: ['cart.get', 'cart.on', 'cart.removeItem'],
+    props: {
+        showCheckoutButton: {
+            type: 'boolean',
+            attr: 'show-checkout-button',
+            default: true,
+            docs: 'Show checkout button',
+        },
+        checkoutLabel: {
+            type: 'string',
+            attr: 'checkout-label',
+            default: 'Checkout',
+            docs: 'Checkout button label',
+        },
+        showRemoveButtons: {
+            type: 'boolean',
+            attr: 'show-remove-buttons',
+            default: true,
+            docs: 'Show remove item buttons',
+        },
+        compact: { type: 'boolean', attr: 'compact', default: false, docs: 'Compact mode - hides some details' },
+    },
+    events: {
+        tlCheckout: { detail: '{ cart: TlCartData; }', docs: 'Emitted when checkout is clicked' },
+        tlItemRemoved: { detail: '{ itemId: string; }', docs: 'Emitted when item is removed' },
+        tlCartUpdated: { detail: '{ cart: TlCartData; }', docs: 'Emitted when cart is updated' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted on error' },
+    },
+    strings: STRINGS$c,
+    statuses: ['loading', 'empty', 'ready'],
+    state: () => ({ cart: null, loading: true, error: null, removingItemId: null }),
+    /**
+     * On screen: wait for the host's client, subscribe to the cart, then read it.
+     *
+     * Subscribing before the read is deliberate. The component started both at
+     * once (`componentWillLoad` read, `componentDidLoad` subscribed) and so could
+     * miss an update that landed mid-read; going first closes that window
+     * without changing anything a host can see.
+     *
+     * The subscription is the cart manager's and not the client's: the connector
+     * adapts the payload on the cart manager's bus and passes it through
+     * untouched on the client's, and this element renders the adapted figures.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed(err instanceof Error ? err.message : ctx.strings.loadFailed);
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const manager = client.getCartManager?.();
+            const off = manager?.on?.('cart:updated', (data) => {
+                ctx.actions.cartUpdated(data);
+            });
+            if (typeof off === 'function')
+                ctx.onTeardown(off);
+            await ctx.actions.load();
+        })();
+    },
+    status: ({ state }) => state.loading ? 'loading' : !state.cart || state.cart.items.length === 0 ? 'empty' : 'ready',
+    derive: (ctx) => {
+        const { state, strings, props, formatMoney } = ctx;
+        // Money comes from the response through cartTotals: the fee row is shown
+        // when the surface expressed a fee, and the total is the server's figure,
+        // never a sum taken here.
+        const totals = cartTotals(state.cart);
+        const currency = totals.currency;
+        const items = state.cart?.items ?? [];
+        return {
+            rows: items.map((item) => ({
+                id: item.id,
+                name: item.ticketTypeName,
+                eventName: item.eventName,
+                dateLabel: item.occurrenceDate ? formatDate$2(item.occurrenceDate) : null,
+                quantityLabel: `${strings.quantityPrefix}${item.quantity}`,
+                priceLabel: formatMoney(item.totalPrice, item.currency),
+                removing: state.removingItemId === item.id,
+                showEvent: !props.compact,
+                showDate: !props.compact && !!item.occurrenceDate,
+            })),
+            totals,
+            subtotalLabel: formatMoney(totals.subtotal, currency),
+            feeAmountLabel: formatMoney(totals.fees, currency),
+            discountLabel: formatMoney(totals.discount, currency),
+            totalLabel: formatMoney(totals.total, currency),
+            showSubtotalRow: !props.compact,
+            showFeeRow: totals.showFee && !props.compact,
+            showDiscountRow: totals.discount > 0 && !props.compact,
+            checkoutDisabled: items.length === 0,
+        };
+    },
+    actions: (ctx) => ({
+        /** Read the cart as it stands. */
+        async load() {
+            try {
+                ctx.setState({ loading: true, error: null });
+                const manager = ctx.optionalClient()?.getCartManager?.();
+                if (manager) {
+                    // Bound rather than called optionally: a connector that carries a
+                    // cart manager without a `get` is broken, and the component said so
+                    // through tlError rather than rendering an empty cart.
+                    const read = manager.get?.bind(manager);
+                    if (!read)
+                        throw new TypeError('cartManager.get is not a function');
+                    ctx.setState({ cart: ((await read()) ?? null) });
+                }
+            }
+            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 });
+            }
+        },
+        /** The cart changed under us. Show it, and tell the host. */
+        cartUpdated(cart) {
+            ctx.setState({ cart });
+            ctx.emit('tlCartUpdated', { cart });
+        },
+        /**
+         * Take one line out of the cart. With no client at all, nothing happens
+         * and nothing is announced: the buyer's click is simply inert, which is
+         * what it was before.
+         */
+        async removeItem(itemId) {
+            if (!ctx.optionalClient())
+                return;
+            ctx.setState({ removingItemId: itemId });
+            try {
+                const manager = ctx.client().getCartManager?.();
+                if (manager) {
+                    const remove = manager.removeItem?.bind(manager);
+                    if (!remove)
+                        throw new TypeError('cartManager.removeItem is not a function');
+                    await remove(itemId);
+                    ctx.emit('tlItemRemoved', { itemId });
+                }
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : ctx.strings.removeFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ removingItemId: null });
+            }
+        },
+        /** Hand the cart to whatever the host does next. An empty cart says nothing. */
+        checkout() {
+            const cart = ctx.state.cart;
+            if (cart && cart.items.length > 0)
+                ctx.emit('tlCheckout', { cart });
+        },
+        /**
+         * The host never produced a client. Announced, because the component
+         * announced it: the read and the wait were one try block, so a page that
+         * never started Live emitted tlError.
+         */
+        connectFailed(message) {
+            const text = message || ctx.strings.loadFailed;
+            ctx.setState({ error: text, loading: false });
+            ctx.emit('tlError', { message: text });
+        },
+    }),
+});
+
+/**
+ * `tl-cart-badge`: the cart icon with the item count on it.
+ *
+ * Small, and the second element that lives on a subscription: it binds
+ * `cart:updated` inside its own `mount` and hands the unsubscribe to
+ * `ctx.onTeardown` (TKT-197), so a badge that is moved in the DOM, or rendered
+ * twice by a host that mounts and unmounts it, never ends up counting twice.
+ *
+ * The one thing it remembers is the last count, so the badge does not flash
+ * empty on the next page before the cart has been read. That is behaviour, so
+ * it is here; where the count is written down is per runtime, so that is
+ * `ctx.storage`, which the harness supplies.
+ */
+/** Where the last known count is kept. The key the component used. */
+const CART_COUNT_KEY = 'tl_cart_count';
+const STRINGS$b = {
+    /** Read as "Cart with 2 items". The count is appended. */
+    ariaPrefix: 'Cart with ',
+    ariaSuffix: ' items',
+    overflow: '99+',
+};
+/** Above this the bubble reads "99+" rather than a number nothing can fit. */
+const OVERFLOW_ABOVE = 99;
+const countOf = (cart) => {
+    const c = cart;
+    return typeof c?.itemCount === 'number' ? c.itemCount : 0;
+};
+const cartBadgeCore = defineElement({
+    tag: 'tl-cart-badge',
+    docs: 'A cart icon carrying the number of items in the cart, kept current from the cart bus.',
+    category: 'cart',
+    runtimes: ['web'],
+    tokens: [
+        'font-family',
+        'foreground',
+        'muted',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+        'spacing-1',
+        'spacing-2',
+        'spacing-3',
+    ],
+    sdkMethods: ['cart.get', 'cart.on'],
+    props: {
+        showEmpty: {
+            type: 'boolean',
+            attr: 'show-empty',
+            default: false,
+            docs: 'Show the badge even when count is 0',
+        },
+        icon: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'icon',
+            docs: 'Custom icon (emoji or text). If not provided, uses cart SVG',
+        },
+        size: {
+            type: 'string',
+            tsType: '"lg" | "md" | "sm"',
+            attr: 'size',
+            default: 'md',
+            docs: 'Size variant',
+        },
+        badgeOnly: {
+            type: 'boolean',
+            attr: 'badge-only',
+            default: false,
+            docs: 'Badge only mode - only shows the count bubble, no icon or button',
+        },
+    },
+    events: {
+        tlClick: { detail: '{ itemCount: number; }', docs: 'Emitted when the badge is clicked' },
+    },
+    strings: STRINGS$b,
+    statuses: ['ready'],
+    state: () => ({ itemCount: 0 }),
+    /**
+     * On screen: show the remembered count straight away, then wait for the
+     * client, subscribe, and read the cart.
+     *
+     * Hydrating first is what keeps the badge from flashing empty; the component
+     * did it in `componentWillLoad` and this runs earlier still, in the harness's
+     * `connectedCallback`. A host with no store simply starts at zero.
+     */
+    mount: (ctx) => {
+        ctx.actions.hydrate();
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                // A page that never started Live keeps the remembered count and says
+                // nothing, which is what the component did.
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const manager = client.getCartManager?.();
+            if (!manager)
+                return;
+            const off = manager.on?.('cart:updated', (cart) => {
+                ctx.actions.countChanged(countOf(cart));
+            });
+            if (typeof off === 'function')
+                ctx.onTeardown(off);
+            try {
+                const read = manager.get?.bind(manager);
+                if (!read)
+                    return;
+                const cart = await read();
+                if (!ctx.active())
+                    return;
+                ctx.actions.countChanged(countOf(cart));
+            }
+            catch {
+                // The cart may not exist yet. Keep the remembered value.
+            }
+        })();
+    },
+    status: () => 'ready',
+    derive: ({ state, props, strings }) => ({
+        displayCount: state.itemCount > OVERFLOW_ABOVE ? strings.overflow : state.itemCount.toString(),
+        showBadge: state.itemCount > 0,
+        renderNothing: props.badgeOnly && state.itemCount === 0,
+        ariaLabel: `${strings.ariaPrefix}${state.itemCount}${strings.ariaSuffix}`,
+        sizeClass: `size-${props.size}`,
+    }),
+    actions: (ctx) => ({
+        /** A new count from the cart: show it, and remember it for next time. */
+        countChanged(count) {
+            ctx.setState({ itemCount: count });
+            ctx.storage.set(CART_COUNT_KEY, String(count));
+        },
+        /** Start from whatever the last visit left behind, or zero. */
+        hydrate() {
+            const stored = ctx.storage.get(CART_COUNT_KEY);
+            ctx.setState({ itemCount: (stored ? parseInt(stored, 10) : 0) || 0 });
+        },
+        /** The buyer asked for the cart. What that opens is the host's business. */
+        click() {
+            ctx.emit('tlClick', { itemCount: ctx.state.itemCount });
+        },
+    }),
+});
+
+/**
+ * `tl-cart-drawer`: the off-canvas panel the cart slides into.
+ *
+ * It owns no cart of its own - the panel embeds `tl-cart` - so what is here is
+ * the open/closed rule and the two bus intents it listens for, bound inside its
+ * own `mount` and unbound by the teardown (TKT-197).
+ *
+ * Two ways in, and they are not the same, which is the subtlety this core has
+ * to keep: an intent, the backdrop, the close button and Escape all go through
+ * `setOpen`, which announces the change with `tlOpen` or `tlClose`. The host
+ * setting the `open` prop goes through `openChanged`, which does not: the
+ * component's `@Watch('open')` moved the panel without emitting, and a host
+ * that drove the drawer and also listened would otherwise start hearing its
+ * own writes back.
+ *
+ * The subscription is the client's bus and not the cart manager's: these are
+ * UI intents, which `@ticketlayer/live` relays untouched, and nothing here
+ * reads the cart.
+ */
+/** What opens the drawer, and what closes it. Relayed on the client's bus. */
+const OPEN_INTENT = 'ui:cart-requested';
+const CLOSE_INTENT = 'ui:modal-close-requested';
+const STRINGS$a = {
+    close: 'Close cart',
+    privacy: 'Privacy Policy',
+    privacyHref: 'https://ticketlayer.com/privacy',
+    reportAbuse: 'Report Abuse',
+    reportAbuseHref: 'https://ticketlayer.com/report-abuse',
+    poweredBy: 'Powered by',
+    brand: 'ticketlayer',
+    brandHref: 'https://ticketlayer.com',
+};
+const cartDrawerCore = defineElement({
+    tag: 'tl-cart-drawer',
+    docs: 'A slide-in panel holding the cart, opened by the cart intent on the client bus.',
+    category: 'cart',
+    runtimes: ['web'],
+    tokens: ['background', 'border', 'font-family', 'foreground', 'muted', 'muted-foreground'],
+    sdkMethods: ['client.on'],
+    props: {
+        side: {
+            type: 'string',
+            tsType: '"left" | "right"',
+            attr: 'side',
+            default: 'right',
+            docs: 'Edge the panel slides in from.',
+        },
+        heading: {
+            type: 'string',
+            attr: 'heading',
+            default: 'Your cart',
+            docs: 'Heading shown at the top of the panel.',
+        },
+        open: {
+            type: 'boolean',
+            attr: 'open',
+            default: false,
+            docs: 'Controlled open state (also driven by the `ui:cart-requested` intent).',
+        },
+    },
+    events: {
+        tlOpen: { detail: 'void', docs: '' },
+        tlClose: { detail: 'void', docs: '' },
+    },
+    strings: STRINGS$a,
+    statuses: ['open', 'closed'],
+    state: (props) => ({ visible: props.open }),
+    /**
+     * On screen: take the `open` prop as it stands, then listen for the intents.
+     *
+     * Taking the prop again is what the component's `connectedCallback` did, and
+     * it matters here for a second reason: an instance is built before a harness
+     * has read its attributes, so the state a constructor could see is the
+     * default rather than the host's.
+     */
+    mount: (ctx) => {
+        ctx.actions.openChanged(ctx.props.open);
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                // No client, no intents. The drawer still opens from its `open` prop.
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const offOpen = client.on?.(OPEN_INTENT, () => ctx.actions.setOpen(true));
+            if (typeof offOpen === 'function')
+                ctx.onTeardown(offOpen);
+            const offClose = client.on?.(CLOSE_INTENT, () => ctx.actions.setOpen(false));
+            if (typeof offClose === 'function')
+                ctx.onTeardown(offClose);
+        })();
+    },
+    status: ({ state }) => (state.visible ? 'open' : 'closed'),
+    derive: ({ state, props }) => ({
+        visible: state.visible,
+        sideClass: `panel--${props.side}`,
+        ariaHidden: state.visible ? 'false' : 'true',
+    }),
+    actions: (ctx) => ({
+        /** Open or close, and say so. Asking for the state it is already in is nothing. */
+        setOpen(open) {
+            if (ctx.state.visible === open)
+                return;
+            ctx.setState({ visible: open });
+            ctx.emit(open ? 'tlOpen' : 'tlClose', undefined);
+        },
+        /** The host moved the `open` prop. Follow it, and stay quiet about it. */
+        openChanged(open) {
+            if (ctx.state.visible === open)
+                return;
+            ctx.setState({ visible: open });
+        },
+    }),
+});
+
+/**
+ * `tl-checkout-wrapper`: the same idea as `tl-buy-tickets-wrapper`, pointed at
+ * the checkout rather than at one event.
+ *
+ * Whatever the host slots in becomes the thing that opens the checkout modal
+ * for the cart as it stands, so this core takes no subject at all: the cart is
+ * the client's, and the modal is the client's.
+ *
+ * It was blocked from being split by the same thing its sibling was - events
+ * named `tl-complete`, `tl-error` and `tl-close`, which `defineElement`
+ * refuses - and is unblocked by the same rename to `tlComplete`, `tlError` and
+ * `tlClose` (TKT-203).
+ *
+ * Behaviour is what the Stencil component did, to the letter, including the
+ * `tlError` a click announces when no client has been published; the
+ * `console.error` beside it did not come across, for the reason `tl-cart` and
+ * `tl-promo-code` dropped theirs.
+ */
+const STRINGS$9 = {
+    noClient: 'SDK not initialized',
+    notAvailable: 'Checkout is not available',
+};
+const checkoutWrapperCore = defineElement({
+    tag: 'tl-checkout-wrapper',
+    docs: 'Wrap any content and open the checkout modal when it is activated.',
+    category: 'checkout',
+    runtimes: ['web'],
+    tokens: ['radius-sm', 'ring'],
+    sdkMethods: ['checkout.openModal'],
+    props: {
+        disabled: {
+            type: 'boolean',
+            attr: 'disabled',
+            default: false,
+            docs: 'Whether the wrapper is disabled',
+        },
+    },
+    events: {
+        // `OrderResult` because that is the name the web harness writes; see
+        // `buy-tickets-wrapper.ts`.
+        tlComplete: { detail: 'OrderResult', docs: 'Emitted when checkout completes successfully' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted when an error occurs' },
+        tlClose: { detail: 'void', docs: 'Emitted when the modal closes' },
+    },
+    strings: STRINGS$9,
+    statuses: ['ready', 'disabled'],
+    state: () => ({}),
+    status: ({ props }) => (props.disabled ? 'disabled' : 'ready'),
+    derive: ({ props }) => ({ interactive: !props.disabled }),
+    actions: (ctx) => ({
+        /** A click, a tap, Enter or Space: whatever the harness calls a press. */
+        activate() {
+            if (ctx.props.disabled)
+                return;
+            const client = ctx.optionalClient();
+            if (!client) {
+                ctx.emit('tlError', { message: ctx.strings.noClient });
+                return;
+            }
+            if (!client.checkout) {
+                ctx.emit('tlError', { message: ctx.strings.notAvailable });
+                return;
+            }
+            client.checkout.openModal({
+                onComplete: (order) => ctx.emit('tlComplete', order),
+                onError: (err) => ctx.emit('tlError', { message: err.message }),
+                onClose: () => ctx.emit('tlClose', undefined),
+            });
+        },
+    }),
+});
+
+/**
+ * `tl-event-card`: one event, as a card.
+ *
+ * Two ways to fill it, which is the whole of its behaviour: a host hands it an
+ * event through the `event` prop (that is what `tl-event-list` does), or it is
+ * given an `eventId` and reads the event itself. The prop wins, and a card that
+ * has one never touches the client.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter,
+ * including the status badge's three labels and the `en-GB` date. What did not
+ * come across is the `console.log` tracing, which a library should not do for
+ * its host.
+ */
+/**
+ * Adapt an event detail to the card shape. The list adapter lives in the SDK
+ * connector; this one is the card's own, and it is behaviour, so it is here.
+ */
+function toEventCardEvent(detail) {
+    const occurrences = detail.occurrences ?? [];
+    const starts = occurrences
+        .map((o) => o.startsAt)
+        .filter((s) => !!s)
+        .sort();
+    const now = Date.now();
+    const next = starts.find((s) => new Date(s).getTime() >= now) ?? starts[0];
+    const soldOut = detail.status === 'sold_out' ||
+        (occurrences.length > 0 && occurrences.every((o) => o.status === 'sold_out'));
+    return {
+        id: detail.id,
+        name: detail.name,
+        ...(detail.shortDescription ? { shortDescription: detail.shortDescription } : {}),
+        ...(detail.imageUrl ? { imageUrl: detail.imageUrl } : {}),
+        ...(detail.venueName
+            ? { venue: { id: detail.venueId ?? '', name: detail.venueName, city: detail.venueCity ?? '' } }
+            : {}),
+        ...(next ? { nextOccurrence: { startsAt: next } } : {}),
+        availabilityStatus: soldOut ? 'sold_out' : 'available',
+    };
+}
+const STRINGS$8 = {
+    available: 'Available',
+    limited: 'Limited',
+    soldOut: 'Sold Out',
+    notFound: 'Event not found',
+    loadFailed: 'Failed to load event',
+};
+/** As the component formatted it. See the note on the cart core's date. */
+function formatDate$1(dateString) {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+const eventCardCore = defineElement({
+    tag: 'tl-event-card',
+    docs: 'One event as a card: its image, name, next date, venue and how it is selling.',
+    category: 'discovery',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'error',
+        'error-foreground',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'radius-lg',
+        'radius-sm',
+        'secondary',
+        'spacing-4',
+        'success',
+        'success-foreground',
+        'warning',
+        'warning-foreground',
+    ],
+    sdkMethods: ['events.get'],
+    props: {
+        event: {
+            type: 'object',
+            tsType: 'TlEventCardEvent | undefined',
+            attr: null,
+            docs: 'Event data to display (tl-event-list passes this)',
+        },
+        eventId: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'event-id',
+            docs: 'Load the event from the SDK by id when no `event` is given, so a single\ncard works standalone (e.g. on a Webflow page).',
+        },
+    },
+    events: {
+        tlClick: { detail: '{ eventId: string; }', docs: 'Emitted when the card is clicked' },
+        tlError: { detail: '{ message: string; }', docs: 'Emitted when the event could not be loaded by id' },
+    },
+    strings: STRINGS$8,
+    statuses: ['loading', 'error', 'empty', 'ready'],
+    state: () => ({ loadedEvent: null, loading: false, error: null }),
+    /**
+     * On screen: read the event, but only when there is one to read and nobody
+     * has handed us the event already.
+     *
+     * `loading` is set here, synchronously, rather than inside the read. The
+     * component awaited its load in `componentWillLoad`, so its first paint was
+     * already past it; a mount hook cannot hold the first paint, so the card
+     * shows its own skeleton instead of a blank. That is the same change
+     * `tl-ticket-selector` took when it moved onto the hook (TKT-197).
+     */
+    mount: (ctx) => {
+        if (ctx.props.event || !ctx.props.eventId)
+            return;
+        ctx.setState({ loading: true, error: null });
+        void (async () => {
+            try {
+                await ctx.whenClient();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.loadFailed(err instanceof Error && err.message ? err.message : ctx.strings.loadFailed);
+                return;
+            }
+            if (!ctx.active())
+                return;
+            await ctx.actions.load();
+        })();
+    },
+    status: ({ state, props }) => state.loading ? 'loading' : state.error ? 'error' : props.event || state.loadedEvent ? 'ready' : 'empty',
+    derive: ({ state, props, strings }) => {
+        const event = props.event ?? state.loadedEvent;
+        const badge = (suffix) => `status-badge ${suffix}`;
+        const status = event?.availabilityStatus;
+        return {
+            event,
+            // The sales surface exposes a single `imageUrl` (card/listing
+            // thumbnail); `thumbnailUrl` is an accepted alias if a host ever
+            // supplies a distinct one.
+            image: event ? event.thumbnailUrl || event.imageUrl || null : null,
+            statusBadgeClass: status === 'available'
+                ? badge('status-available')
+                : status === 'limited'
+                    ? badge('status-limited')
+                    : status === 'sold_out'
+                        ? badge('status-sold-out')
+                        : 'status-badge',
+            statusLabel: status === 'available'
+                ? strings.available
+                : status === 'limited'
+                    ? strings.limited
+                    : status === 'sold_out'
+                        ? strings.soldOut
+                        : '',
+            dateLabel: event?.nextOccurrence ? formatDate$1(event.nextOccurrence.startsAt) : null,
+            venueLabel: event?.venue ? `${event.venue.name}, ${event.venue.city}` : null,
+        };
+    },
+    actions: (ctx) => ({
+        /**
+         * Read the event by id. A card that was handed an event, or has no id, has
+         * nothing to read, and this is the guard the component's watcher relied on.
+         */
+        async load() {
+            if (ctx.props.event || !ctx.props.eventId)
+                return;
+            try {
+                ctx.setState({ loading: true, error: null });
+                const events = ctx.client().getEventsManager();
+                const read = events.get?.bind(events);
+                if (!read)
+                    throw new TypeError('eventsManager.get is not a function');
+                const detail = (await read(ctx.props.eventId));
+                if (!detail)
+                    throw new Error(ctx.strings.notFound);
+                ctx.setState({ loadedEvent: toEventCardEvent(detail) });
+            }
+            catch (err) {
+                const message = err instanceof Error && err.message ? err.message : ctx.strings.loadFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+        /**
+         * The host never produced a client. Announced, because the component
+         * announced it: the wait and the read were one try block.
+         */
+        loadFailed(message) {
+            const text = message || ctx.strings.loadFailed;
+            ctx.setState({ error: text, loading: false });
+            ctx.emit('tlError', { message: text });
+        },
+        /** The buyer picked this card. Where that goes is the host's business. */
+        click() {
+            const event = ctx.props.event ?? ctx.state.loadedEvent;
+            if (!event)
+                return;
+            ctx.emit('tlClick', { eventId: event.id });
+        },
+    }),
+});
+
+/**
+ * `tl-event-list`: what the channel is selling, as a grid of cards.
+ *
+ * One read, and a re-read whenever the host changes what it is asking for. The
+ * cards themselves are `tl-event-card`, which has its own core; this one
+ * decides only what to ask for and what the grid says while there is nothing
+ * in it.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including the
+ * two things that read like oversights and are kept:
+ *
+ *  - there is NO error event. A failed listing is drawn and never announced,
+ *    which makes this the only element of the eighteen that can fail silently
+ *    as far as a host is concerned. Adding `tlError` would be a new event on a
+ *    published element, so it is a decision for somebody rather than something
+ *    to slip into a refactor.
+ *  - the element paints nothing until the first listing lands. It holds
+ *    skeleton markup and uses it for every read but the first, because the
+ *    component awaited its read in `componentWillLoad` and Stencil does not
+ *    paint until that resolves. The harness keeps that by waiting on the same
+ *    thing; the core simply reports `loading` and lets the harness decide when
+ *    a first paint happens, which is a rendering question.
+ *
+ * What did not come across is the `console.log` tracing, which a library
+ * should not do for its host (`tl-cart` dropped its own for the same reason).
+ */
+const STRINGS$7 = {
+    errorTitle: 'Error loading events',
+    emptyTitle: 'No events available',
+    emptyMessage: 'Check back later for upcoming events.',
+    loadFailed: 'Failed to load events',
+    noListing: 'Events are not available',
+};
+/** The grid has a class per column count, and only four of them. */
+const MIN_COLUMNS = 1;
+const MAX_COLUMNS = 4;
+const eventListCore = defineElement({
+    tag: 'tl-event-list',
+    docs: "What the channel is selling, as a grid of event cards, optionally narrowed to one category.",
+    category: 'discovery',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'error',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'radius-lg',
+        'radius-sm',
+        'secondary',
+        'spacing-4',
+        'spacing-6',
+        'spacing-8',
+    ],
+    sdkMethods: ['events.list'],
+    props: {
+        limit: { type: 'number', attr: 'limit', default: 12, docs: 'Maximum number of events to display' },
+        category: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'category',
+            docs: 'Category filter',
+        },
+        columns: { type: 'number', attr: 'columns', default: 3, docs: 'Columns for grid layout (1, 2, 3, or 4)' },
+    },
+    events: {
+        tlEventClick: { detail: '{ eventId: string; }', docs: 'Emitted when an event card is clicked' },
+    },
+    strings: STRINGS$7,
+    statuses: ['loading', 'error', 'empty', 'ready'],
+    state: () => ({ events: [], loading: true, error: null }),
+    mount: (ctx) => {
+        void ctx.actions.load();
+    },
+    status: ({ state }) => state.loading ? 'loading' : state.error ? 'error' : state.events.length === 0 ? 'empty' : 'ready',
+    derive: ({ state, props }) => ({
+        events: state.events,
+        columns: Math.min(Math.max(props.columns, MIN_COLUMNS), MAX_COLUMNS),
+    }),
+    actions: (ctx) => ({
+        /**
+         * Read the listing. Also what a harness calls when the limit or the
+         * category changes, because a different question deserves a fresh answer
+         * and the previous one is not narrowed down to it.
+         */
+        async load() {
+            try {
+                ctx.setState({ loading: true, error: null });
+                const client = await ctx.whenClient();
+                const events = client.getEventsManager();
+                if (!events?.list)
+                    throw new TypeError(ctx.strings.noListing);
+                const response = (await events.list({ limit: ctx.props.limit, category: ctx.props.category }));
+                ctx.setState({ events: (response?.items ?? []) });
+            }
+            catch (err) {
+                // Shown and not announced: this element has no error event.
+                ctx.setState({ error: err instanceof Error ? err.message : ctx.strings.loadFailed });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+    }),
+});
+
+/**
+ * `tl-login`: magic-link sign-in. No password is handled anywhere in here.
+ *
+ * The customer enters an email, the client is asked to send a link, and the
+ * code that comes back is exchanged for a session either because the link
+ * landed on this page with `?code=` or because the customer typed the six
+ * digits out of the email. Both go through the same `exchange` action.
+ *
+ * The first core to read {@link ActionContext.query}, the seam this split
+ * added. An element that is the far end of an emailed link has to be able to
+ * see what the link said, and where that is written down is per runtime: the
+ * web has `window.location.search`, a native harness has its deep-link router.
+ * So the core says it reads `code`, once, on mount, and the harness says where
+ * from. A harness that supplies no query reads null and the element simply
+ * starts on the email step, which is what a page with no code in its URL does
+ * anyway.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including:
+ *
+ *  - the URL code is single use. It is taken once per instance and never read
+ *    again, so a remount cannot spend a code that was already exchanged.
+ *  - a failed exchange goes back to where it came from, and the two ways in
+ *    are told apart: a typed code returns to the code step, a URL code returns
+ *    to the email step.
+ *  - a failed sign out is swallowed. The customer is shown as signed out and
+ *    `tlAuthChanged` says so, because the session is gone locally either way,
+ *    and that is what the component did.
+ *
+ * What did not come across is the `console.error` tracing, which a library
+ * should not do for its host (`tl-cart` dropped its own for the same reason).
+ */
+const STRINGS$6 = {
+    signedInPrefix: 'Signed in as ',
+    fallbackAccount: 'your account',
+    signOut: 'Sign out',
+    verifyingTitle: 'Signing you in…',
+    verifyingLead: 'Just a moment.',
+    sentTitle: 'Check your inbox',
+    // The lead reads "We've sent a sign-in link to <strong>you@…</strong>. Open
+    // it on this device to continue." Split in two because the address is
+    // emphasised in the middle of it, and the shape has no way to say "this copy
+    // has a slot in it" - see the README's note on what a core still cannot
+    // express.
+    sentLeadBefore: "We've sent a sign-in link to ",
+    sentLeadAfter: '. Open it on this device to continue.',
+    sentAgain: 'Sent again. Check your inbox.',
+    resendLink: 'Resend link',
+    resending: 'Sending…',
+    enterCodeInstead: 'Enter the code instead',
+    differentEmail: 'Use a different email',
+    codeTitle: 'Enter your code',
+    codeLeadBefore: 'Type the 6-digit code from the email we sent to ',
+    codeLeadAfter: '.',
+    codeLabel: 'Code',
+    codePlaceholder: '123456',
+    codeSubmit: 'Sign in',
+    checking: 'Checking…',
+    back: 'Back',
+    emailLead: "Enter your email and we'll send you a secure sign-in link. No password needed.",
+    emailLabel: 'Email address',
+    emailPlaceholder: 'you@example.com',
+    emailSubmit: 'Email me a sign-in link',
+    sendingLink: 'Sending link…',
+    enterEmail: 'Enter your email address',
+    enterCode: 'Enter the code from your email',
+    codeRejected: 'That code did not work. Check it and try again, or request a new link.',
+    requestFailed: 'Could not send your sign-in link',
+    unavailable: 'Sign-in is not available right now',
+    unsupported: 'Sign-in is not available with this SDK',
+};
+const loginCore = defineElement({
+    tag: 'tl-login',
+    docs: 'Magic-link sign-in: an email in, a link or a six-digit code back, and a session. No password is ever handled.',
+    category: 'account',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'font-family',
+        'font-family-mono',
+        'foreground',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-lg',
+        'radius-md',
+        'secondary',
+        'spacing-3',
+        'spacing-4',
+        'spacing-6',
+        'success',
+    ],
+    sdkMethods: ['auth.requestMagicLink', 'auth.exchange', 'auth.logout', 'on'],
+    props: {
+        heading: { type: 'string', attr: 'heading', default: 'Sign in', docs: 'Heading for the email step.' },
+        allowCodeEntry: {
+            type: 'boolean',
+            attr: 'allow-code-entry',
+            default: true,
+            docs: 'Offer a "enter the code" path alongside the emailed link (default true).',
+        },
+    },
+    events: {
+        tlAuthChanged: { detail: 'TlAuthChanged', docs: 'signed in or out ({ customer, authenticated })' },
+        tlMagicLinkSent: { detail: '{ email: string; }', docs: 'a link was requested for an email' },
+        tlError: { detail: '{ message: string; }', docs: 'request or code exchange failed' },
+    },
+    strings: STRINGS$6,
+    statuses: ['email', 'sent', 'code', 'verifying', 'signed-in'],
+    state: () => ({
+        phase: 'email',
+        email: '',
+        code: '',
+        busy: false,
+        error: null,
+        notice: null,
+        customer: null,
+        authAvailable: false,
+        urlCodeUsed: false,
+    }),
+    /**
+     * On screen: wait for the client, read who is signed in, follow both auth
+     * signals, then spend the code the link arrived with, if it did.
+     *
+     * The code is taken from the query whether or not it gets used, which is
+     * what makes it single use: arriving already signed in burns it, exactly as
+     * the component did.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed();
+                return;
+            }
+            if (!ctx.active())
+                return;
+            const auth = client.getAuthManager?.();
+            if (!auth) {
+                ctx.actions.unsupported();
+                return;
+            }
+            ctx.setState({ authAvailable: true });
+            ctx.actions.syncFromClient();
+            // The session hydrates after the client publishes; follow both signals.
+            for (const event of ['auth:changed', 'session:changed']) {
+                const off = client.on?.(event, () => ctx.actions.syncFromClient());
+                if (typeof off === 'function')
+                    ctx.onTeardown(off);
+            }
+            const urlCode = ctx.state.urlCodeUsed ? null : ctx.query.get('code');
+            if (urlCode) {
+                ctx.setState({ urlCodeUsed: true });
+                if (!auth.authenticated)
+                    await ctx.actions.exchange(urlCode);
+            }
+        })();
+    },
+    status: ({ state }) => state.phase,
+    derive: ({ state, strings, props }) => ({
+        signedInEmail: state.customer?.email ?? strings.fallbackAccount,
+        inputsDisabled: state.busy || !state.authAvailable,
+        emailSubmitLabel: state.busy ? strings.sendingLink : strings.emailSubmit,
+        resendLabel: state.busy ? strings.resending : strings.resendLink,
+        codeSubmitLabel: state.busy ? strings.checking : strings.codeSubmit,
+        showCodeEntry: props.allowCodeEntry,
+    }),
+    // Named so `submitCode` can call `exchange`: the action context does not
+    // carry the actions, only a mount's does.
+    actions: (ctx) => {
+        /** The auth manager as it stands, or null on a client that has none. */
+        const authManager = () => ctx.optionalClient()?.getAuthManager?.() ?? null;
+        const self = {
+            /** Typing clears whatever the last attempt complained about. */
+            setEmail(value) {
+                ctx.setState({ email: value, error: null });
+            },
+            setCode(value) {
+                ctx.setState({ code: value, error: null });
+            },
+            /**
+             * Ask for a link. The response always reports success, so nothing here
+             * can reveal whether an account exists.
+             */
+            async requestLink(resend = false) {
+                const email = ctx.state.email.trim();
+                if (!email) {
+                    ctx.setState({ error: ctx.strings.enterEmail });
+                    return;
+                }
+                const auth = authManager();
+                if (!auth)
+                    return;
+                ctx.setState({ busy: true, error: null, notice: null });
+                try {
+                    await auth.requestMagicLink({ email });
+                    ctx.setState({ phase: 'sent', notice: resend ? ctx.strings.sentAgain : null });
+                    ctx.emit('tlMagicLinkSent', { email });
+                }
+                catch (err) {
+                    const message = errorMessage(err, ctx.strings.requestFailed);
+                    ctx.setState({ error: message });
+                    ctx.emit('tlError', { message });
+                }
+                finally {
+                    ctx.setState({ busy: false });
+                }
+            },
+            /** The code the customer typed. */
+            async submitCode() {
+                await self.exchange(ctx.state.code.trim());
+            },
+            /**
+             * Trade a code for a session. On failure the step it came from decides
+             * where it goes back to: a typed code returns to the code step, a URL
+             * code (which arrives while the phase is still `email`) returns to the
+             * email step.
+             */
+            async exchange(code) {
+                if (!code) {
+                    ctx.setState({ error: ctx.strings.enterCode });
+                    return;
+                }
+                const auth = authManager();
+                if (!auth)
+                    return;
+                const previous = ctx.state.phase;
+                ctx.setState({ busy: true, error: null, phase: 'verifying' });
+                try {
+                    const res = (await auth.exchange(code));
+                    const customer = auth.customer ?? res?.customer ?? null;
+                    ctx.setState({ customer, phase: 'signed-in', code: '' });
+                    ctx.emit('tlAuthChanged', { customer, authenticated: true });
+                }
+                catch {
+                    ctx.setState({
+                        phase: previous === 'verifying' || previous === 'email' ? 'email' : 'code',
+                        error: ctx.strings.codeRejected,
+                    });
+                    ctx.emit('tlError', { message: ctx.strings.codeRejected });
+                }
+                finally {
+                    ctx.setState({ busy: false });
+                }
+            },
+            /**
+             * Sign out. A failure is swallowed on purpose: the session is gone from
+             * this page either way, so the customer is shown as signed out and the
+             * host is told so.
+             */
+            async signOut() {
+                const auth = authManager();
+                if (!auth)
+                    return;
+                ctx.setState({ busy: true });
+                try {
+                    await auth.logout();
+                }
+                catch {
+                    // Shown as signed out regardless, which is what the component did.
+                }
+                finally {
+                    ctx.setState({ busy: false, customer: null, phase: 'email' });
+                    ctx.emit('tlAuthChanged', { customer: null, authenticated: false });
+                }
+            },
+            /** The steps a buyer can walk between by hand. */
+            goTo(phase) {
+                ctx.setState({ phase });
+            },
+            /**
+             * The client says the session changed. Signed in wins outright; signed
+             * out only pulls the element back when it was showing the signed-in
+             * step, so a customer half way through typing a code is left alone.
+             */
+            syncFromClient() {
+                const auth = authManager();
+                if (!auth)
+                    return;
+                if (auth.authenticated) {
+                    ctx.setState({ customer: auth.customer ?? null, phase: 'signed-in' });
+                }
+                else if (ctx.state.phase === 'signed-in') {
+                    ctx.setState({ customer: null, phase: 'email' });
+                }
+            },
+            /** The host never started Live. Said on screen, and nowhere else. */
+            connectFailed() {
+                ctx.setState({ error: ctx.strings.unavailable });
+            },
+            /** A connector with no auth accessor cannot sign anybody in. */
+            unsupported() {
+                ctx.setState({ error: ctx.strings.unsupported });
+            },
+        };
+        return self;
+    },
+});
+
+/**
+ * `tl-promo-code`: an input and an Apply button that redeems a presale or
+ * promo code for the current cart.
+ *
+ * Redemption unlocks gated pricing on the customer; the client re-reads the
+ * cart and publishes `cart:updated`, so `tl-cart` and the badges re-render on
+ * their own and this element subscribes to nothing. It has nothing to do when
+ * a harness mounts it either, so it declares no `mount` hook - the harness
+ * still calls `mount()` and still gets a teardown, which is the point of the
+ * hook being unconditional.
+ *
+ * The API has no un-redeem, so the applied state offers only "use a different
+ * code", which clears the input for another redemption.
+ *
+ * Behaviour is what the Stencil component did before the split, to the letter,
+ * including the two error messages and the uppercased code in the receipt. What
+ * did not come across is the `console.error` tracing.
+ */
+const STRINGS$5 = {
+    applying: 'Applying…',
+    codePrefix: 'Code ',
+    appliedSuffix: ' applied',
+    alreadyHeldSuffix: ' was already applied',
+    useDifferent: 'Use a different code',
+    enterCode: 'Enter a code',
+    notAvailable: 'Promo codes are not available',
+    signIn: 'Sign in to use this code',
+    rejected: 'That code could not be applied',
+};
+/** True for the "not signed in" family of API errors (401/403, NO_SESSION, NOT_AUTHENTICATED). */
+function isAuthError(err) {
+    const e = err;
+    if (!e || typeof e !== 'object')
+        return false;
+    return e.status === 401 || e.status === 403 || e.code === 'NO_SESSION' || e.code === 'NOT_AUTHENTICATED';
+}
+const promoCodeCore = defineElement({
+    tag: 'tl-promo-code',
+    docs: 'Redeem a presale or promo code for the current cart.',
+    category: 'purchase',
+    runtimes: ['web'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'font-family',
+        'font-family-mono',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'success',
+    ],
+    sdkMethods: ['cart.get', 'presale.redeem'],
+    props: {
+        placeholder: {
+            type: 'string',
+            attr: 'placeholder',
+            default: 'Promo or presale code',
+            docs: 'Input placeholder.',
+        },
+        buttonLabel: { type: 'string', attr: 'button-label', default: 'Apply', docs: 'Apply button label.' },
+    },
+    events: {
+        tlPromoApplied: { detail: 'TlPromoApplied', docs: '' },
+        tlError: { detail: '{ message: string; }', docs: '' },
+    },
+    strings: STRINGS$5,
+    statuses: ['idle', 'applied'],
+    state: () => ({ code: '', applying: false, applied: null, error: null }),
+    status: ({ state }) => (state.applied ? 'applied' : 'idle'),
+    derive: ({ state, props, strings }) => ({
+        actionLabel: state.applying ? strings.applying : props.buttonLabel,
+        disabled: state.applying,
+        appliedCode: state.applied?.code ?? null,
+        appliedSuffix: state.applied?.alreadyHeld ? strings.alreadyHeldSuffix : strings.appliedSuffix,
+    }),
+    actions: (ctx) => ({
+        /** The buyer typed. Typing clears whatever the last attempt complained about. */
+        setCode(code) {
+            ctx.setState({ code, error: null });
+        },
+        /**
+         * Redeem what is in the box.
+         *
+         * The client refreshes the cart on redeem, so the cart is read back only
+         * to put it in the payload; a read that fails is not a failed redemption
+         * and does not become one.
+         */
+        async apply() {
+            const code = ctx.state.code.trim();
+            if (!code) {
+                ctx.setState({ error: ctx.strings.enterCode });
+                return;
+            }
+            ctx.setState({ applying: true, error: null });
+            try {
+                const client = await ctx.whenClient();
+                const presale = client.getPresaleManager?.();
+                if (!presale)
+                    throw new Error(ctx.strings.notAvailable);
+                const result = await presale.redeem(code);
+                const cart = (await client.getCartManager?.()?.get?.().catch(() => null)) ?? null;
+                const applied = { code: code.toUpperCase(), ...result, cart };
+                ctx.setState({ applied, code: '' });
+                ctx.emit('tlPromoApplied', applied);
+            }
+            catch (err) {
+                const message = isAuthError(err)
+                    ? ctx.strings.signIn
+                    : err instanceof Error && err.message
+                        ? err.message
+                        : ctx.strings.rejected;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ applying: false });
+            }
+        },
+        /** Back to the input, for a second code. There is no un-redeem to offer. */
+        reset() {
+            ctx.setState({ applied: null, error: null });
+        },
+    }),
+});
+
+/**
+ * `tl-my-orders`: the signed-in customer's orders, one expandable row each.
+ *
+ * The first core whose whole shape is decided by whether somebody is signed
+ * in. It reads the client's auth manager once, follows `auth:changed` and
+ * `session:changed` from there, and lists the orders whenever the answer turns
+ * from signed out to signed in. Both subscriptions are bound in its own
+ * `mount` and handed to `ctx.onTeardown` (TKT-197), so a remount cannot leave
+ * four listeners on the bus.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including the
+ * three things that read like accidents and are not:
+ *
+ *  - a connector with no auth accessor is treated as SIGNED IN, and a 401 from
+ *    the listing is what decides otherwise. That is deliberate: an older
+ *    connector has no way to answer the question, and showing the sign-in form
+ *    to someone who is signed in is the worse failure.
+ *  - a 401 or 403 from the listing is not an error. It drops back to the
+ *    signed-out view, which renders the inline sign-in, and emits nothing.
+ *  - the element does NOT announce that the host never started Live. It shows
+ *    "Orders are not available right now" and stays quiet, where `tl-cart`
+ *    emits `tlError` for the same condition, because the component's wait and
+ *    its read were in different places. Kept rather than made consistent.
+ *
+ * What did not come across is the `console.error` tracing, which a library
+ * should not do for its host (`tl-cart` dropped its own for the same reason).
+ */
+const STRINGS$4 = {
+    signInTitle: 'Sign in to see your orders',
+    signInText: 'Your tickets and order history live in your account.',
+    errorTitle: 'Could not load your orders',
+    emptyTitle: 'No orders yet',
+    orderPrefix: 'Order ',
+    unnamedEvent: 'Order',
+    ticketSingular: 'ticket',
+    ticketPlural: 'tickets',
+    unavailable: 'Orders are not available right now',
+    noOrdersManager: 'Orders are not available',
+    loadFailed: 'Failed to load your orders',
+};
+const myOrdersCore = defineElement({
+    tag: 'tl-my-orders',
+    docs: "The signed-in customer's orders: event, date, ticket count, total and status, each row expanding to its tickets.",
+    category: 'account',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'error',
+        'error-foreground',
+        'font-family',
+        'foreground',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-lg',
+        'secondary',
+        'secondary-foreground',
+        'spacing-1',
+        'spacing-3',
+        'spacing-4',
+        'spacing-8',
+        'success',
+        'success-foreground',
+        'warning',
+        'warning-foreground',
+    ],
+    sdkMethods: ['orders.mine', 'auth.authenticated', 'on'],
+    props: {
+        emptyMessage: {
+            type: 'string',
+            attr: 'empty-message',
+            default: "When you buy tickets they'll show up here, ready to view and download.",
+            docs: 'Copy for the empty state.',
+        },
+        columns: { type: 'number', attr: 'columns', default: 2, docs: 'Columns for the expanded ticket grid.' },
+    },
+    events: {
+        tlOrderSelect: { detail: '{ orderId: string; }', docs: 'a row was expanded ({ orderId })' },
+        tlError: { detail: '{ message: string; }', docs: 'the orders could not be loaded' },
+    },
+    strings: STRINGS$4,
+    statuses: ['loading', 'signed-out', 'error', 'empty', 'ready'],
+    state: () => ({ orders: [], authenticated: false, loading: true, error: null, expandedId: null }),
+    /**
+     * On screen: wait for the client, read who is signed in, follow both auth
+     * signals, then list the orders if there is somebody to list them for.
+     *
+     * The session hydrates after the client publishes, so `auth:changed` and
+     * `session:changed` are both followed: the connector raises one or the other
+     * depending on whether the customer signed in here or arrived with a session
+     * already warm.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            let client;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed();
+                return;
+            }
+            if (!ctx.active())
+                return;
+            // An older connector has no auth accessor and cannot answer, so assume
+            // signed in and let a 401 from the listing decide.
+            const auth = client.getAuthManager?.();
+            ctx.setState({ authenticated: auth ? auth.authenticated : true });
+            for (const event of ['auth:changed', 'session:changed']) {
+                const off = client.on?.(event, () => ctx.actions.syncAuth());
+                if (typeof off === 'function')
+                    ctx.onTeardown(off);
+            }
+            if (ctx.state.authenticated)
+                await ctx.actions.load();
+            else
+                ctx.setState({ loading: false });
+        })();
+    },
+    status: ({ state }) => state.loading
+        ? 'loading'
+        : !state.authenticated
+            ? 'signed-out'
+            : state.error
+                ? 'error'
+                : state.orders.length === 0
+                    ? 'empty'
+                    : 'ready',
+    derive: ({ state, strings }) => ({
+        rows: state.orders.map((order) => {
+            const count = ticketCount(order);
+            return {
+                id: order.id,
+                numberLabel: `${strings.orderPrefix}${order.orderNumber}`,
+                eventName: orderEventName(order) ?? strings.unnamedEvent,
+                dateLabel: order.createdAt ? formatDate$3(order.createdAt) : null,
+                countLabel: `${count} ${count === 1 ? strings.ticketSingular : strings.ticketPlural}`,
+                totalLabel: formatPrice$1(order.total, order.currency),
+                statusLabel: statusLabel(order.status),
+                statusTone: statusTone(order.status),
+                expanded: state.expandedId === order.id,
+            };
+        }),
+    }),
+    // The action map is named so `syncAuth` can call `load`: the action context
+    // does not carry the actions (only a mount's does), and listing the orders
+    // when the session turns warm is the same work the mount does.
+    actions: (ctx) => {
+        const self = {
+            /** List the orders. A 401 means signed out, which is not an error. */
+            async load() {
+                const client = ctx.optionalClient();
+                if (!client)
+                    return;
+                try {
+                    ctx.setState({ loading: true, error: null });
+                    const orders = client.getOrdersManager?.();
+                    if (!orders)
+                        throw new Error(ctx.strings.noOrdersManager);
+                    const list = (await orders.mine());
+                    ctx.setState({ orders: list ?? [], authenticated: true });
+                }
+                catch (err) {
+                    if (isAuthError(err)) {
+                        // Not signed in: fall through to the inline sign-in rather than an error.
+                        ctx.setState({ authenticated: false, orders: [] });
+                    }
+                    else {
+                        const message = errorMessage(err, ctx.strings.loadFailed);
+                        ctx.setState({ error: message });
+                        ctx.emit('tlError', { message });
+                    }
+                }
+                finally {
+                    ctx.setState({ loading: false });
+                }
+            },
+            /**
+             * The client says the session changed. Listing on the way in and clearing
+             * on the way out; an unchanged answer does nothing, which is what keeps a
+             * burst of `session:changed` from listing the orders four times.
+             */
+            syncAuth() {
+                const auth = ctx.optionalClient()?.getAuthManager?.();
+                if (!auth)
+                    return;
+                const was = ctx.state.authenticated;
+                ctx.setState({ authenticated: auth.authenticated });
+                if (auth.authenticated && !was)
+                    void self.load();
+                else if (!auth.authenticated && was)
+                    ctx.setState({ orders: [], expandedId: null });
+            },
+            /** Open a row, or close the open one. Only opening is announced. */
+            toggle(orderId) {
+                const opening = ctx.state.expandedId !== orderId;
+                ctx.setState({ expandedId: opening ? orderId : null });
+                if (opening)
+                    ctx.emit('tlOrderSelect', { orderId });
+            },
+            /**
+             * The host never produced a client. Said on screen and nowhere else: the
+             * component did not emit `tlError` here, because its wait for the client
+             * was outside the try block that announces a failure.
+             */
+            connectFailed() {
+                ctx.setState({ loading: false, error: ctx.strings.unavailable });
+            },
+        };
+        return self;
+    },
+});
+
+/**
+ * `tl-occurrence-selector`: every date and time one event is on, and the one
+ * the buyer picks.
+ *
+ * The largest of the eighteen, and the last big one: 883 lines of Stencil with
+ * no spec at all, which is why TKT-202 wrote the characterisation spec first
+ * and split it on its own. Everything below is what that component did, ported
+ * rather than redesigned, and the spec
+ * (`packages/elements/src/components/tl-occurrence-selector/test/`) is the
+ * proof - it passed against the component before this file existed and passes
+ * against the harness now, unchanged.
+ *
+ * What it decides, in the order it decides it:
+ *
+ *  - Which of three views to render. A host can force one; otherwise five
+ *    occurrences or fewer is a LIST, more than five all on one calendar date
+ *    is a grid of SLOTS, and more than five over several dates is a CALENDAR
+ *    with the picked date's times beside it.
+ *  - Where the calendar opens. Ported with its bug intact: the dates are sorted
+ *    as `Date.toDateString()` STRINGS, so "Fri Jul 05 2030" sorts before
+ *    "Fri Jun 14 2030" and a weekday name decides the order before a month
+ *    does. Fixing that is a decision about the product, not part of moving the
+ *    code, and a split that quietly corrected it would be exactly the kind of
+ *    change the characterisation spec exists to catch.
+ *  - Which days a buyer may press, which are sold out, and how far the month
+ *    navigation may walk in each direction.
+ *  - Every label: the `en-GB` dates and times, the capacity line, the weekday
+ *    headings and the two month-navigation labels a screen reader reads.
+ *
+ * What is NOT here, and why:
+ *
+ *  - The `theme` prop. It is declared, because it is part of the element's
+ *    published surface, and it is the harness that acts on it: the prop is a
+ *    set of CSS CUSTOM PROPERTIES written onto the element, and a custom
+ *    property is not a fact every runtime has. A core holds no values at all,
+ *    so there is nothing here for it to hold.
+ *  - How wide the element is. `containerWidth` is state the harness measures
+ *    and pushes in through `resized()`; the core decides what a width MEANS
+ *    (`auto` becomes horizontal at 768px and not before), which is the same
+ *    bargain as `ctx.storage` - the core says what, the harness says where.
+ *  - Which token family a state paints with. The core derives the CLASS a
+ *    calendar day renders under and the stylesheet says what that class paints,
+ *    because a core cannot map a status onto a token family
+ *    (`tl-event-card`'s status badge and `tl-buy-tickets-button` make the same
+ *    bargain).
+ *
+ * What did not come across is the `console.error` on a failed read and the
+ * `console.log` on every selection, for the reason `tl-cart` and
+ * `tl-promo-code` dropped theirs: a library should not write to its host's
+ * console.
+ */
+const STRINGS$3 = {
+    noEventId: 'Event ID is required',
+    noClient: 'SDK not initialized.',
+    notFound: 'Event not found',
+    loadFailed: 'Failed to load occurrences',
+    empty: 'No dates available for this event.',
+    retry: 'Retry',
+    soldOut: 'Sold Out',
+    /** Follows the figure: "120 available". */
+    available: 'available',
+    selectADate: 'Select a date to see available times',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    weekdayMon: 'Mon',
+    weekdayTue: 'Tue',
+    weekdayWed: 'Wed',
+    weekdayThu: 'Thu',
+    weekdayFri: 'Fri',
+    weekdaySat: 'Sat',
+    weekdaySun: 'Sun',
+};
+/** Above this many pixels an `auto` layout puts the times beside the calendar. */
+const HORIZONTAL_MIN_WIDTH = 768;
+/** More than this many occurrences and the list view gives way. */
+const LIST_LIMIT = 5;
+// ---------------------------------------------------------------------------
+// Dates. Every one of these is the component's own arithmetic, moved.
+// ---------------------------------------------------------------------------
+/** Local midnight on the day `date` falls on. */
+function startOfDay(date) {
+    const start = new Date(date);
+    start.setHours(0, 0, 0, 0);
+    return start;
+}
+/** The key a day is held under, which is also what a harness hands back. */
+function dayKey(date) {
+    return date.toDateString();
+}
+/** Monday of the week `date` falls in. */
+function mondayOf(date) {
+    const monday = new Date(date);
+    const dayOfWeek = monday.getDay();
+    monday.setDate(monday.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
+    monday.setHours(0, 0, 0, 0);
+    return monday;
+}
+/** The first of the month `date` falls in. */
+function firstOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+const startTime = (occurrence) => new Date(occurrence.startsAt).getTime();
+const byStart = (a, b) => startTime(a) - startTime(b);
+/** As the component decided it: an explicit zero counts as gone. */
+const isSoldOut = (occurrence) => !!occurrence.soldOut || occurrence.availableCapacity === 0;
+/** Day key -> the occurrences on it, in the order the event gave them. */
+function occurrencesByDate(occurrences) {
+    const map = new Map();
+    for (const occurrence of occurrences) {
+        const key = dayKey(startOfDay(new Date(occurrence.startsAt)));
+        const on = map.get(key);
+        if (on)
+            on.push(occurrence);
+        else
+            map.set(key, [occurrence]);
+    }
+    return map;
+}
+/** The earliest and latest occurrence, or null when there are none. */
+function dateRangeOf(occurrences) {
+    if (!occurrences.length)
+        return null;
+    let first = new Date(occurrences[0].startsAt);
+    let last = new Date(occurrences[0].startsAt);
+    for (const occurrence of occurrences) {
+        const date = new Date(occurrence.startsAt);
+        if (date < first)
+            first = date;
+        if (date > last)
+            last = date;
+    }
+    return { first, last };
+}
+/** Whether everything fits between one Monday and the Sunday after it. */
+function isSingleWeek(occurrences) {
+    const range = dateRangeOf(occurrences);
+    if (!range)
+        return false;
+    const sunday = new Date(mondayOf(range.first));
+    sunday.setDate(sunday.getDate() + 6);
+    sunday.setHours(23, 59, 59, 999);
+    return range.last <= sunday;
+}
+/** Whether everything falls in one calendar month. */
+function isSingleMonth(occurrences) {
+    const range = dateRangeOf(occurrences);
+    if (!range)
+        return false;
+    return (range.first.getMonth() === range.last.getMonth() &&
+        range.first.getFullYear() === range.last.getFullYear());
+}
+/**
+ * Where the calendar opens.
+ *
+ * The sort is on `toDateString()` STRINGS and that is not an oversight here:
+ * it is what the component did, so "Fri Jul 05 2030" comes before
+ * "Fri Jun 14 2030" and the element opens on July. See the note at the top.
+ */
+function initialSelection(occurrences) {
+    if (!occurrences.length)
+        return null;
+    const today = startOfDay(new Date());
+    const keys = Array.from(occurrencesByDate(occurrences).keys()).sort();
+    let selected = null;
+    for (const key of keys) {
+        const date = new Date(key);
+        if (date >= today) {
+            selected = date;
+            break;
+        }
+    }
+    if (!selected && keys.length)
+        selected = new Date(keys[keys.length - 1]);
+    if (!selected)
+        return null;
+    return { selectedDate: selected, currentMonth: firstOfMonth(selected) };
+}
+/**
+ * The grid: one week when everything fits in one, else the whole month padded
+ * out to whole Monday-to-Sunday weeks.
+ */
+function calendarDays(occurrences, currentMonth) {
+    const days = [];
+    if (isSingleWeek(occurrences)) {
+        const range = dateRangeOf(occurrences);
+        if (!range)
+            return days;
+        const cursor = mondayOf(range.first);
+        for (let i = 0; i < 7; i += 1) {
+            days.push(new Date(cursor));
+            cursor.setDate(cursor.getDate() + 1);
+        }
+        return days;
+    }
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const monthStart = new Date(year, month, 1);
+    const monthEnd = new Date(year, month + 1, 0);
+    const startDay = monthStart.getDay();
+    const calendarStart = new Date(monthStart);
+    calendarStart.setDate(calendarStart.getDate() - (startDay === 0 ? 6 : startDay - 1));
+    const endDay = monthEnd.getDay();
+    const calendarEnd = new Date(monthEnd);
+    calendarEnd.setDate(calendarEnd.getDate() + (endDay === 0 ? 0 : 7 - endDay));
+    const cursor = new Date(calendarStart);
+    while (cursor <= calendarEnd) {
+        days.push(new Date(cursor));
+        cursor.setDate(cursor.getDate() + 1);
+    }
+    return days;
+}
+/**
+ * As the component formatted them: `en-GB`, written down here rather than taken
+ * from the host's locale because that is what the element did before the split
+ * and this is a split, not a change (see the note on the card core's date).
+ */
+function formatDate(date) {
+    return date.toLocaleDateString('en-GB', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+}
+function formatTime(dateString) {
+    return new Date(dateString).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+}
+function formatMonth(date) {
+    return date.toLocaleDateString('en-GB', { month: 'long', year: 'numeric' });
+}
+/** The event detail's occurrences, as this element holds them. */
+function toOccurrence(occurrence) {
+    return {
+        id: occurrence.id,
+        startsAt: occurrence.startsAt,
+        endsAt: occurrence.endsAt,
+        status: occurrence.availabilityStatus,
+        availableCapacity: occurrence.availableCapacity,
+        soldOut: occurrence.availabilityStatus === 'sold_out',
+    };
+}
+const occurrenceSelectorCore = defineElement({
+    tag: 'tl-occurrence-selector',
+    docs: 'A smart occurrence selector component that fetches and displays event occurrences from the Ticketlayer API.',
+    category: 'discovery',
+    // Not `native`: the hand-kept manifest said `web` and there is no React
+    // Native harness for a calendar yet. Splitting it does not make that claim
+    // true, and the catalogue is read as a promise about where an element runs.
+    runtimes: ['web'],
+    tokens: [
+        'background',
+        'border',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+    ],
+    sdkMethods: ['events.get'],
+    props: {
+        eventId: {
+            type: 'string',
+            attr: 'event-id',
+            required: true,
+            docs: 'Event ID to fetch occurrences for',
+        },
+        displayMode: {
+            type: 'string',
+            tsType: '"calendar" | "list" | "slots" | undefined',
+            attr: 'display-mode',
+            docs: 'Force a specific display mode (auto-detected if not set)',
+        },
+        orientation: {
+            type: 'string',
+            tsType: '"auto" | "horizontal" | "vertical"',
+            attr: 'orientation',
+            default: 'auto',
+            docs: 'Layout orientation (auto = horizontal on desktop, vertical on mobile)',
+        },
+        theme: {
+            type: 'object',
+            tsType: 'TlOccurrenceSelectorTheme | undefined',
+            attr: null,
+            docs: 'Theme configuration',
+        },
+    },
+    events: {
+        tlSelect: {
+            detail: '{ occurrence: TlOccurrence; }',
+            docs: 'Emitted when an occurrence is selected',
+        },
+    },
+    strings: STRINGS$3,
+    statuses: ['loading', 'error', 'empty', 'ready'],
+    state: () => ({
+        loading: true,
+        error: null,
+        occurrences: [],
+        currentMonth: new Date(),
+        selectedDate: null,
+        containerWidth: 0,
+    }),
+    /**
+     * On screen: wait for the host's client, then read the event.
+     *
+     * The component did this in `componentWillLoad`, which held the first paint
+     * until the read came back. A mount hook cannot hold a paint, so the element
+     * shows its own skeleton first instead of a blank - the same change
+     * `tl-ticket-selector` and `tl-event-card` took when they moved onto the hook
+     * (TKT-197).
+     *
+     * There is nothing to unsubscribe: this element reads once and lives on what
+     * it read, so the mount registers no teardown and the harness still gets one.
+     */
+    mount: (ctx) => {
+        if (!ctx.props.eventId) {
+            ctx.actions.loadFailed(ctx.strings.noEventId);
+            return;
+        }
+        void (async () => {
+            try {
+                await ctx.whenClient();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.loadFailed(err instanceof Error ? err.message : ctx.strings.noClient);
+                return;
+            }
+            if (!ctx.active())
+                return;
+            await ctx.actions.load();
+        })();
+    },
+    status: ({ state }) => state.loading ? 'loading' : state.error ? 'error' : state.occurrences.length === 0 ? 'empty' : 'ready',
+    derive: ({ state, props, strings }) => {
+        const { occurrences, selectedDate } = state;
+        const byDate = occurrencesByDate(occurrences);
+        const range = dateRangeOf(occurrences);
+        // Which view. The component decided this once, when the read came back;
+        // deriving it means a host that changes `display-mode` afterwards is
+        // answered at once rather than at the next read (TKT-202, named in the
+        // pull request as the one behaviour this split does not preserve exactly).
+        const mode = props.displayMode
+            ? props.displayMode
+            : occurrences.length <= LIST_LIMIT
+                ? 'list'
+                : byDate.size === 1
+                    ? 'slots'
+                    : 'calendar';
+        const horizontal = props.orientation === 'horizontal'
+            ? true
+            : props.orientation === 'vertical'
+                ? false
+                : state.containerWidth >= HORIZONTAL_MIN_WIDTH;
+        const row = (occurrence) => {
+            const soldOut = isSoldOut(occurrence);
+            const start = formatTime(occurrence.startsAt);
+            return {
+                id: occurrence.id,
+                dateLabel: formatDate(new Date(occurrence.startsAt)),
+                timeLabel: occurrence.endsAt ? `${start} - ${formatTime(occurrence.endsAt)}` : start,
+                startLabel: start,
+                soldOut,
+                capacityLabel: occurrence.availableCapacity
+                    ? `${occurrence.availableCapacity} ${strings.available}`
+                    : null,
+                statusKind: soldOut ? 'soldOut' : occurrence.availableCapacity ? 'available' : 'arrow',
+            };
+        };
+        const inTimeOrder = [...occurrences].sort(byStart);
+        const selectedKey = selectedDate ? dayKey(selectedDate) : null;
+        const selectedOn = selectedKey ? [...(byDate.get(selectedKey) ?? [])].sort(byStart) : [];
+        const today = startOfDay(new Date());
+        const firstMonth = range ? firstOfMonth(range.first) : null;
+        const lastMonth = range ? firstOfMonth(range.last) : null;
+        const days = calendarDays(occurrences, state.currentMonth).map((date) => {
+            const key = dayKey(date);
+            const on = byDate.get(key);
+            const hasOccurrences = !!on;
+            const soldOut = hasOccurrences && on.every(isSoldOut);
+            const otherMonth = date.getMonth() !== state.currentMonth.getMonth();
+            const selected = selectedKey === key;
+            const isToday = key === dayKey(today);
+            const past = date < today;
+            return {
+                key,
+                dayNumber: String(date.getDate()),
+                otherMonth,
+                hasOccurrences,
+                soldOut,
+                selected,
+                today: isToday,
+                past,
+                selectable: hasOccurrences,
+                className: [
+                    'calendar-day',
+                    otherMonth ? 'other-month' : '',
+                    hasOccurrences ? 'has-occurrences' : '',
+                    soldOut ? 'sold-out' : '',
+                    selected ? 'selected' : '',
+                    isToday ? 'today' : '',
+                    past ? 'past' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '),
+            };
+        });
+        return {
+            mode,
+            horizontal,
+            viewClass: `calendar-view ${horizontal ? 'horizontal' : 'vertical'}`,
+            rows: occurrences.map(row),
+            slots: inTimeOrder.map(row),
+            slotsDateLabel: inTimeOrder.length ? formatDate(new Date(inTimeOrder[0].startsAt)) : null,
+            monthLabel: formatMonth(state.currentMonth),
+            showMonthNav: !isSingleMonth(occurrences),
+            canGoBack: !!firstMonth && state.currentMonth > firstMonth,
+            canGoForward: !!lastMonth && state.currentMonth < lastMonth,
+            weekdayLabels: [
+                strings.weekdayMon,
+                strings.weekdayTue,
+                strings.weekdayWed,
+                strings.weekdayThu,
+                strings.weekdayFri,
+                strings.weekdaySat,
+                strings.weekdaySun,
+            ],
+            days,
+            selectedDateLabel: selectedDate && selectedOn.length ? formatDate(selectedDate) : null,
+            selectedSlots: selectedOn.map(row),
+        };
+    },
+    actions: (ctx) => ({
+        /**
+         * Read the event and take its occurrences. Also what Retry runs, which is
+         * why it sets `loading` and clears the error itself rather than relying on
+         * the state it started in.
+         */
+        async load() {
+            ctx.setState({ loading: true, error: null });
+            try {
+                const events = ctx.client().getEventsManager();
+                const read = events.get?.bind(events);
+                if (!read)
+                    throw new TypeError('eventsManager.get is not a function');
+                const detail = (await read(ctx.props.eventId));
+                if (!detail)
+                    throw new Error(ctx.strings.notFound);
+                const occurrences = (detail.occurrences ?? []).map(toOccurrence);
+                ctx.setState({ occurrences, ...(initialSelection(occurrences) ?? {}) });
+            }
+            catch (err) {
+                ctx.setState({
+                    error: err instanceof Error ? err.message : ctx.strings.loadFailed,
+                    occurrences: [],
+                });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+        /** Nothing to read: no event id, or the host never produced a client. */
+        loadFailed(message) {
+            ctx.setState({ error: message, loading: false });
+        },
+        /**
+         * The buyer picked an occurrence. A sold out one is not pickable, which the
+         * harness also renders as disabled: the core decides, the harness shows.
+         */
+        select(occurrenceId) {
+            const occurrence = ctx.state.occurrences.find((o) => o.id === occurrenceId);
+            if (!occurrence || isSoldOut(occurrence))
+                return;
+            ctx.emit('tlSelect', { occurrence });
+        },
+        /** The buyer picked a day. Only a day with something on it counts. */
+        selectDate(key) {
+            if (!occurrencesByDate(ctx.state.occurrences).has(key))
+                return;
+            const date = new Date(key);
+            if (Number.isNaN(date.getTime()))
+                return;
+            const { currentMonth } = ctx.state;
+            const movedMonth = date.getMonth() !== currentMonth.getMonth() || date.getFullYear() !== currentMonth.getFullYear();
+            ctx.setState({
+                selectedDate: date,
+                ...(movedMonth ? { currentMonth: firstOfMonth(date) } : {}),
+            });
+        },
+        /** Back a month, and never before the first month there is anything in. */
+        previousMonth() {
+            const range = dateRangeOf(ctx.state.occurrences);
+            if (!range)
+                return;
+            const next = new Date(ctx.state.currentMonth);
+            next.setMonth(next.getMonth() - 1);
+            if (next >= firstOfMonth(range.first))
+                ctx.setState({ currentMonth: next });
+        },
+        /** Forward a month, and never past the last month there is anything in. */
+        nextMonth() {
+            const range = dateRangeOf(ctx.state.occurrences);
+            if (!range)
+                return;
+            const next = new Date(ctx.state.currentMonth);
+            next.setMonth(next.getMonth() + 1);
+            if (next <= firstOfMonth(range.last))
+                ctx.setState({ currentMonth: next });
+        },
+        /**
+         * How wide the harness measures the element. What a width means is the
+         * core's (`auto` turns horizontal at 768px); measuring one is the
+         * runtime's, and on the web that is a `ResizeObserver`.
+         */
+        resized(width) {
+            if (width === ctx.state.containerWidth)
+                return;
+            ctx.setState({ containerWidth: width });
+        },
+    }),
+});
+
+/**
+ * `tl-order-confirmation`: the thank-you block - reference, email, event and
+ * date, the ticket lines, the money rows, and the tickets themselves.
+ *
+ * It finds its order three ways, in this order, and that priority is the whole
+ * point of the element:
+ *
+ *  1. the `order-id` prop, for a host that already knows;
+ *  2. the query the page was opened with (`?orderId=`), which is the contract
+ *     the hosted box office confirmation page uses, plus `?redirect_status=`,
+ *     which is how a payment provider says on the way back whether the money
+ *     actually moved;
+ *  3. the client's `checkout:completed`, for a page that mounts this before
+ *     the customer has paid.
+ *
+ * (2) is why this core reads {@link ActionContext.query} and (3) is why it
+ * holds a subscription, bound in its own `mount` and handed to
+ * `ctx.onTeardown` (TKT-197). It is the last of the eighteen elements to live
+ * on a subscription.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including:
+ *
+ *  - a redirect that is not `succeeded` shows "Payment not completed" and does
+ *    NOT read the order, even when there is an order id to read.
+ *  - a re-read while an order is already on screen does not blank it: the
+ *    skeleton is only for the first read.
+ *  - a failed read keeps the thank-you header and puts the message underneath,
+ *    because someone who has just paid should not be told the purchase failed.
+ *  - `checkout:completed` shows what it carries at once and THEN re-reads,
+ *    because an embed's payload is only the id and the order number until the
+ *    tickets have been issued.
+ *  - the event name and date are best effort. The order view carries neither,
+ *    so they are walked out of the channel's listing, and a failure there
+ *    leaves the line at whatever the order itself said.
+ *
+ * What did not come across is the `console.error` tracing, which a library
+ * should not do for its host (`tl-cart` dropped its own for the same reason).
+ */
+const STRINGS$2 = {
+    paymentFailedTitle: 'Payment not completed',
+    paymentFailedLead: "Your payment wasn't completed. Your cart is still saved, so you can try again.",
+    title: "You're going!",
+    leadPrefix: 'Order ',
+    leadSuffix: ' is confirmed. Your tickets are on their way to your email.',
+    leadGeneric: 'Your order is confirmed. Your tickets are on their way to your email.',
+    errorPrefix: "We couldn't load your order details yet. ",
+    rowReference: 'Order reference',
+    rowEmail: 'Email',
+    rowEvent: 'Event',
+    rowDate: 'Date',
+    subtotalRow: 'Subtotal',
+    taxRow: 'Tax',
+    discountRow: 'Discount',
+    totalRow: 'Total',
+    ticketsTitle: 'Your tickets',
+    ticketsHint: 'Show these QR codes at the door for entry. Use Download PDF on a ticket to save it.',
+    noOrdersManager: 'Orders are not available',
+    notFound: 'Order not found',
+    loadFailed: 'Failed to load your order',
+};
+/** The query parameter a payment provider comes back on, and the one value that means paid. */
+const REDIRECT_STATUS = 'redirect_status';
+const REDIRECT_SUCCEEDED = 'succeeded';
+const orderConfirmationCore = defineElement({
+    tag: 'tl-order-confirmation',
+    docs: 'The thank-you block: order reference, email, event and date, the ticket lines, the money rows and the tickets.',
+    category: 'checkout',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'border',
+        'error',
+        'font-family',
+        'font-family-mono',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'radius-lg',
+        'radius-md',
+        'secondary',
+        'spacing-1',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'spacing-6',
+        'success',
+        'success-foreground',
+    ],
+    sdkMethods: ['orders.get', 'events.list', 'events.get', 'auth.customer', 'on'],
+    props: {
+        orderId: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'order-id',
+            docs: 'The order to show. Falls back to `?orderId=` in the page URL.',
+        },
+        customerEmail: {
+            type: 'string',
+            tsType: 'string | undefined',
+            attr: 'customer-email',
+            docs: 'Email to show when the order view carries none (a host that collected it at checkout).',
+        },
+        showTickets: {
+            type: 'boolean',
+            attr: 'show-tickets',
+            default: true,
+            docs: 'Mount tl-order-tickets under the summary (default true).',
+        },
+        columns: { type: 'number', attr: 'columns', default: 2, docs: 'Columns for the ticket grid.' },
+    },
+    events: {
+        tlOrderLoaded: { detail: '{ order: TlOrderData; }', docs: 'the order was loaded' },
+        tlError: { detail: '{ message: string; }', docs: 'the order could not be loaded' },
+    },
+    strings: STRINGS$2,
+    statuses: ['payment-failed', 'idle', 'loading', 'ready'],
+    state: () => ({
+        order: null,
+        resolvedOrderId: null,
+        loading: false,
+        error: null,
+        paymentFailed: false,
+        occurrence: null,
+        signedInCustomer: null,
+    }),
+    /**
+     * On screen: read the link, start the read, subscribe.
+     *
+     * The query goes first because it decides whether there is anything to read
+     * at all: a payment that did not go through is not an order to fetch. The
+     * read is started and not awaited before subscribing, so a
+     * `checkout:completed` that lands mid-read is not missed - the component
+     * read in `componentWillLoad` and subscribed in `componentDidLoad`, and had
+     * exactly that window.
+     *
+     * The subscription needs the client and the read does not: `load` waits for
+     * the client itself, inside the try block that announces a failure, which is
+     * why a page that never starts Live still emits `tlError` here when it was
+     * given an order to show.
+     */
+    mount: (ctx) => {
+        void (async () => {
+            // The link, before anything else: a failed redirect means no read.
+            const redirect = ctx.query.get(REDIRECT_STATUS);
+            ctx.setState({
+                paymentFailed: !!redirect && redirect !== REDIRECT_SUCCEEDED,
+                resolvedOrderId: ctx.props.orderId || ctx.query.get('orderId') || null,
+            });
+            const reading = ctx.state.resolvedOrderId && !ctx.state.paymentFailed
+                ? ctx.actions.load()
+                : Promise.resolve();
+            let client = null;
+            try {
+                client = await ctx.whenClient();
+            }
+            catch {
+                client = null;
+            }
+            if (client && ctx.active()) {
+                const off = client.on?.('checkout:completed', (payload) => {
+                    ctx.actions.checkoutCompleted(payload);
+                });
+                if (typeof off === 'function')
+                    ctx.onTeardown(off);
+            }
+            await reading;
+        })();
+    },
+    status: ({ state }) => state.paymentFailed
+        ? 'payment-failed'
+        : !state.resolvedOrderId && !state.order
+            ? 'idle'
+            : state.loading
+                ? 'loading'
+                : 'ready',
+    derive: ({ state, props, strings }) => {
+        const order = state.order;
+        const totals = orderTotals(order);
+        const currency = totals.currency;
+        const email = props.customerEmail || orderCustomerEmail(order, state.signedInCustomer);
+        const eventName = state.occurrence?.eventName || (order ? orderEventName(order) : null);
+        const startsAt = state.occurrence?.startsAt;
+        const rows = [];
+        if (order)
+            rows.push({ label: strings.rowReference, value: order.orderNumber, reference: true });
+        if (email)
+            rows.push({ label: strings.rowEmail, value: email, reference: false });
+        if (eventName)
+            rows.push({ label: strings.rowEvent, value: eventName, reference: false });
+        if (startsAt)
+            rows.push({ label: strings.rowDate, value: formatDateTime(startsAt), reference: false });
+        return {
+            leadText: order?.orderNumber
+                ? `${strings.leadPrefix}${order.orderNumber}${strings.leadSuffix}`
+                : strings.leadGeneric,
+            rows,
+            lines: order
+                ? ticketItems(order).map((item) => ({
+                    label: `${item.quantity} x ${item.name}`,
+                    priceLabel: formatPrice$1(item.subtotal, order.currency),
+                }))
+                : [],
+            totals,
+            subtotalLabel: formatPrice$1(totals.subtotal, currency),
+            feeAmountLabel: formatPrice$1(totals.fees, currency),
+            taxLabel: formatPrice$1(totals.tax, currency),
+            discountLabel: formatPrice$1(totals.discount, currency),
+            totalLabel: formatPrice$1(totals.total, currency),
+            showTaxRow: totals.tax > 0,
+            showDiscountRow: totals.discount > 0,
+            // An embed's checkout:completed carries only id and order number until
+            // the refetch lands, so there is nothing to summarise yet.
+            showSummary: !!order && Array.isArray(order.items),
+            showError: !!state.error && !order,
+            showTickets: props.showTickets && !!order,
+            ticketsOrderId: order?.id || state.resolvedOrderId || '',
+        };
+    },
+    actions: (ctx) => {
+        /**
+         * Put an event name and a start time on the summary. The order view has
+         * neither, so the occurrence is walked out of the channel's listing. Best
+         * effort and never blocking: a failure leaves the line at what the order
+         * said, and a result that arrives after the order changed underneath is
+         * dropped.
+         */
+        const resolveEvent = async (client, order) => {
+            const occurrenceId = order.tickets?.find((t) => t.eventOccurrenceId)?.eventOccurrenceId;
+            if (!occurrenceId)
+                return;
+            try {
+                const resolved = await resolveOccurrence(client, occurrenceId);
+                if (resolved && ctx.state.order?.id === order.id)
+                    ctx.setState({ occurrence: resolved });
+            }
+            catch {
+                // Leave the event line at what the order gives us.
+            }
+        };
+        const self = {
+            /** Read the order. The skeleton is only for the first read. */
+            async load() {
+                const id = ctx.state.resolvedOrderId;
+                if (!id)
+                    return;
+                try {
+                    ctx.setState({ loading: !ctx.state.order, error: null });
+                    const client = await ctx.whenClient();
+                    const orders = client.getOrdersManager?.();
+                    if (!orders)
+                        throw new Error(ctx.strings.noOrdersManager);
+                    const order = (await orders.get(id));
+                    if (!order)
+                        throw new Error(ctx.strings.notFound);
+                    ctx.setState({
+                        order,
+                        signedInCustomer: client.getAuthManager?.()?.customer ?? null,
+                    });
+                    ctx.emit('tlOrderLoaded', { order });
+                    void resolveEvent(client, order);
+                }
+                catch (err) {
+                    const message = errorMessage(err, ctx.strings.loadFailed);
+                    ctx.setState({ error: message });
+                    ctx.emit('tlError', { message });
+                }
+                finally {
+                    ctx.setState({ loading: false });
+                }
+            },
+            /**
+             * The host pointed the element at a different order. It resolves again
+             * the way the mount did - the prop first, the link second - and reads.
+             * Not a remount: the `checkout:completed` subscription belongs to the
+             * element, not to the order it happens to be showing.
+             */
+            orderIdChanged() {
+                ctx.setState({ resolvedOrderId: ctx.props.orderId || ctx.query.get('orderId') || null });
+                void self.load();
+            },
+            /**
+             * The client finished a checkout. Show what it carries at once, because
+             * an order number on screen beats a skeleton, then read the order again:
+             * the tickets are issued after the order exists, so the payload almost
+             * never has them.
+             */
+            checkoutCompleted(order) {
+                if (!order?.id)
+                    return;
+                ctx.setState({ paymentFailed: false, order, resolvedOrderId: order.id });
+                ctx.emit('tlOrderLoaded', { order });
+                void self.load();
+            },
+        };
+        return self;
+    },
+});
+
+/**
+ * `tl-order-tickets`: every ticket in an order, as scannable cards.
+ *
+ * The one core that waits rather than concluding. Tickets are issued
+ * asynchronously - the payment confirms, the order is marked paid, and
+ * entitlement issuance follows a moment later - so a confirmation page renders
+ * BEFORE the passes exist, reliably rather than occasionally. The element used
+ * to answer that with "no tickets for this order yet", which is true and reads
+ * as "something went wrong" to somebody who has just been charged. Refreshing
+ * showed them, so the only thing missing was the waiting.
+ *
+ * So an empty order is treated as issuance in flight and polled, with the gaps
+ * widening, for about a minute. Then it stops and says the tickets are coming
+ * by email, because at that point something probably is wrong and an element
+ * that polls forever is worse than one that admits it.
+ *
+ * The polling belongs to the mount, which is what the split adds: the
+ * component cancelled its timer in `disconnectedCallback`, and here the mount's
+ * teardown does it, so every runtime gets the same guarantee rather than each
+ * harness remembering. A scheduled poll is cancelled by moving the generation
+ * on rather than by clearing a handle - `ctx.after` has no handle to clear -
+ * so a stale timer still fires and does nothing, which is the same thing from
+ * outside: no request is made.
+ *
+ * Behaviour is what the Stencil component did, to the letter, including:
+ *
+ *  - a failed read STOPS the polling. Retrying a 403 a dozen times helps
+ *    nobody, and a failure is a different thing from an order with no tickets.
+ *  - `loading` is only ever true before the first read finishes. Every later
+ *    read, including a poll and a new order id, leaves whatever is on screen.
+ *  - pointing it at another order clears the tickets without putting the
+ *    loading state back, so there is a beat where the element reads as "taking
+ *    longer than usual" before the new read lands. Kept, not tidied.
+ *
+ * There is no `tlError` here, and no event of any kind: nothing this element
+ * does is announced to the host. Kept as found.
+ */
+/**
+ * Gaps between polls, in milliseconds. Front-loaded because issuance usually
+ * lands in the first few seconds, then widening so a genuinely stuck order is
+ * not hammered. Sums to roughly one minute, and running out is what turns
+ * `issuing` into `delayed`.
+ */
+const POLL_DELAYS_MS = [
+    1000, 1500, 2000, 3000, 4000, 5000, 6000, 8000, 10000, 12000,
+];
+const STRINGS$1 = {
+    loading: 'Loading tickets…',
+    preparing: 'Preparing your tickets…',
+    delayed: 'Your tickets are taking longer than usual. They will be emailed to you as soon as they are ready.',
+    notAvailable: 'Tickets are not available',
+    loadFailed: 'Failed to load tickets',
+};
+const orderTicketsCore = defineElement({
+    tag: 'tl-order-tickets',
+    docs: "Every ticket in an order as a scannable card, waiting out issuance rather than reporting an empty order as empty.",
+    category: 'tickets',
+    runtimes: ['web', 'native'],
+    tokens: ['border', 'error', 'font-family', 'muted-foreground', 'primary', 'spacing-2', 'spacing-4', 'spacing-6'],
+    sdkMethods: ['orders.get'],
+    props: {
+        orderId: { type: 'string', attr: 'order-id', required: true, docs: 'The order whose tickets to show.' },
+        columns: { type: 'number', attr: 'columns', default: 2, docs: 'Columns in the grid (default 2).' },
+    },
+    events: {},
+    strings: STRINGS$1,
+    statuses: ['loading', 'error', 'issuing', 'delayed', 'ready'],
+    state: () => ({ tickets: [], loading: true, error: null, issuing: false }),
+    /**
+     * On screen: read, and keep reading while issuance is in flight. Off screen:
+     * stop, which is the whole reason the polling lives in the mount.
+     */
+    mount: (ctx) => {
+        ctx.onTeardown(() => ctx.actions.stopPolling());
+        void ctx.actions.load();
+    },
+    status: ({ state }) => state.loading
+        ? 'loading'
+        : state.error
+            ? 'error'
+            : state.tickets.length > 0
+                ? 'ready'
+                : state.issuing
+                    ? 'issuing'
+                    : 'delayed',
+    derive: ({ state, props }) => ({
+        tickets: state.tickets,
+        columns: props.columns,
+        orderId: props.orderId,
+    }),
+    actions: (ctx) => {
+        // Neither of these is state: nothing renders from them, and the component
+        // held both as instance fields for the same reason. `generation` is how a
+        // scheduled poll is cancelled, since `ctx.after` hands back no handle.
+        let generation = 0;
+        let poll = 0;
+        const self = {
+            /**
+             * Read the order. Tickets end the waiting; no tickets and a gap left in
+             * the schedule extends it; no tickets and no gap left gives up.
+             */
+            async load() {
+                try {
+                    ctx.setState({ error: null });
+                    const client = await ctx.whenClient();
+                    const orders = client.getOrdersManager?.();
+                    if (!orders)
+                        throw new Error(ctx.strings.notAvailable);
+                    const order = (await orders.get(ctx.props.orderId));
+                    const tickets = order?.tickets ?? [];
+                    ctx.setState({ tickets });
+                    if (tickets.length > 0) {
+                        // Arrived. Stop asking.
+                        ctx.setState({ issuing: false });
+                        self.stopPolling();
+                    }
+                    else {
+                        const delay = POLL_DELAYS_MS[poll];
+                        // `undefined` once the schedule runs out: give up waiting, and say so.
+                        ctx.setState({ issuing: delay !== undefined });
+                        if (delay !== undefined) {
+                            poll += 1;
+                            self.stopPolling();
+                            const mine = generation;
+                            ctx.after(delay, () => {
+                                if (mine === generation)
+                                    void self.load();
+                            });
+                        }
+                    }
+                }
+                catch (err) {
+                    // A failed request is a different thing from an order with no
+                    // tickets, and stops the polling.
+                    //
+                    // Defensive rather than load bearing, as it was in the component:
+                    // a poll is scheduled only on the success path, and the timer that
+                    // triggered this read has already fired, so there is normally
+                    // nothing left to cancel. Mutation testing says so out loud -
+                    // removing this line kills no test - and it is kept because the
+                    // component had it and because it is what makes the intent legible.
+                    self.stopPolling();
+                    ctx.setState({ issuing: false, error: err instanceof Error ? err.message : ctx.strings.loadFailed });
+                }
+                finally {
+                    ctx.setState({ loading: false });
+                }
+            },
+            /**
+             * A different order: forget this one, put the schedule back to the top
+             * and read. The loading state is deliberately NOT restored, so the
+             * element reads as "taking longer than usual" for a beat, exactly as the
+             * component did.
+             */
+            orderIdChanged() {
+                self.stopPolling();
+                poll = 0;
+                ctx.setState({ tickets: [], issuing: false });
+                void self.load();
+            },
+            /** Cancel whatever poll is scheduled. Also what the teardown runs. */
+            stopPolling() {
+                generation += 1;
+            },
+        };
+        return self;
+    },
+});
+
+/**
+ * `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,
+    }),
+    /**
+     * On screen: wait for the host's client, then read the ticket types. The
+     * harness used to do this (it awaited `whenSDK()` and called `load()`
+     * itself); the core does it now, so every runtime loads at the same moment
+     * and in the same order (TKT-197).
+     *
+     * There is nothing to undo, so nothing is returned. The guards are what make
+     * a remount safe: `active()` is false once this mount has been torn down, so
+     * an element that was removed while the client was still coming up neither
+     * loads nor writes an error into a view nobody is rendering.
+     */
+    mount: (ctx) => {
+        // Nothing to read until the host has said which occurrence is on sale.
+        // Until then the element stays in `loading`, which is what it did before.
+        if (!ctx.props.eventId || !ctx.props.occurrenceId)
+            return;
+        void (async () => {
+            try {
+                await ctx.whenClient();
+                if (!ctx.active())
+                    return;
+                await ctx.actions.load();
+            }
+            catch (err) {
+                if (!ctx.active())
+                    return;
+                ctx.actions.connectFailed(err instanceof Error ? err.message : ctx.strings.noClient);
+            }
+        })();
+    },
+    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 });
+        },
+    }),
+});
+
+export { cartDrawerCore as a, buyTicketsButtonCore as b, createElement as c, cartCore as d, eventListCore as e, eventCardCore as f, cartBadgeCore as g, occurrenceSelectorCore as h, orderTicketsCore as i, buyTicketsWrapperCore as j, checkoutWrapperCore as k, loginCore as l, myOrdersCore as m, orderConfirmationCore as o, promoCodeCore as p, ticketSelectorCore as t };