@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/collection/components/tl-ticket-selector/tl-ticket-selector.css

@@ -1,33 +1,33 @@
 :host {
   /* Map SDK variables (--tl-*) to component variables (--tl-color-*) */
   /* This allows the component to inherit theme from SDK */
-  --tl-color-primary: var(--tl-primary, #6366f1);
-  --tl-color-primary-foreground: var(--tl-primary-foreground, #ffffff);
-  --tl-color-background: var(--tl-background, #ffffff);
-  --tl-color-foreground: var(--tl-foreground, #111827);
-  --tl-color-muted: var(--tl-muted, #f3f4f6);
-  --tl-color-muted-foreground: var(--tl-muted-foreground, #6b7280);
-  --tl-color-border: var(--tl-border, #e5e7eb);
-  --tl-color-destructive: var(--tl-error, #ef4444);
+  --tl-color-primary: var(--tl-primary);
+  --tl-color-primary-foreground: var(--tl-primary-foreground);
+  --tl-color-background: var(--tl-background);
+  --tl-color-foreground: var(--tl-foreground);
+  --tl-color-muted: var(--tl-muted);
+  --tl-color-muted-foreground: var(--tl-muted-foreground);
+  --tl-color-border: var(--tl-border);
+  --tl-color-destructive: var(--tl-error);
 
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .ticket-selector {
-  background: var(--tl-color-background, #ffffff);
+  background: var(--tl-color-background);
 }
 
 /* Skeleton loading */
 .skeleton-container {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
 }
 
 .skeleton-row {
   height: 60px;
-  background: var(--tl-color-muted, #f3f4f6);
-  border-radius: var(--tl-radius-md, 0.5rem);
-  margin-bottom: var(--tl-spacing-3, 0.75rem);
+  background: var(--tl-color-muted);
+  border-radius: var(--tl-radius-md);
+  margin-bottom: var(--tl-spacing-3);
   animation: pulse 1.5s ease-in-out infinite;
 }
 
@@ -38,8 +38,8 @@
 
 /* Error state */
 .error-state {
-  padding: var(--tl-spacing-4, 1rem);
-  color: var(--tl-color-destructive, #ef4444);
+  padding: var(--tl-spacing-4);
+  color: var(--tl-color-destructive);
 }
 
 .error-message {
@@ -49,7 +49,7 @@
 
 /* Ticket list */
 .ticket-list {
-  margin-bottom: var(--tl-spacing-4, 1rem);
+  margin-bottom: var(--tl-spacing-4);
 }
 
 /* Ticket row */
@@ -57,8 +57,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--tl-spacing-3, 0.75rem) 0;
-  border-bottom: 1px solid var(--tl-color-border, #e5e7eb);
+  padding: var(--tl-spacing-3) 0;
+  border-bottom: 1px solid var(--tl-color-border);
 }
 
 .ticket-row.sold-out {
@@ -73,13 +73,13 @@
 .ticket-header {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
   flex-wrap: wrap;
 }
 
 .ticket-name {
   font-weight: 600;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
   font-size: 15px;
 }
 
@@ -91,43 +91,43 @@
 }
 
 .status-badge.limited {
-  background-color: var(--tl-color-warning-bg, #fef3c7);
-  color: var(--tl-color-warning, #d97706);
+  background-color: var(--tl-color-warning-bg);
+  color: var(--tl-color-warning);
 }
 
 .status-badge.sold-out {
-  background-color: var(--tl-color-destructive-bg, #fee2e2);
-  color: var(--tl-color-destructive, #ef4444);
+  background-color: var(--tl-color-destructive-bg);
+  color: var(--tl-color-destructive);
 }
 
 .ticket-description {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 14px;
-  color: var(--tl-color-muted-foreground, #6b7280);
+  color: var(--tl-color-muted-foreground);
 }
 
 .ticket-price {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 14px;
   font-weight: 600;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
 }
 
 /* Quantity controls */
 .quantity-controls {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-2, 0.5rem);
-  margin-left: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-2);
+  margin-left: var(--tl-spacing-4);
 }
 
 .qty-btn {
   width: 32px;
   height: 32px;
-  border-radius: var(--tl-radius-sm, 0.25rem);
-  border: 1px solid var(--tl-color-border, #d1d5db);
-  background: var(--tl-color-background, #ffffff);
-  color: var(--tl-color-foreground, #111827);
+  border-radius: var(--tl-radius-sm);
+  border: 1px solid var(--tl-color-border);
+  background: var(--tl-color-background);
+  color: var(--tl-color-foreground);
   font-size: 18px;
   font-weight: 500;
   cursor: pointer;
@@ -138,8 +138,8 @@
 }
 
 .qty-btn:hover:not(:disabled) {
-  background-color: var(--tl-color-muted, #f3f4f6);
-  border-color: var(--tl-color-border-hover, #9ca3af);
+  background-color: var(--tl-color-muted);
+  border-color: var(--tl-color-border-hover);
 }
 
 .qty-btn:disabled {
@@ -152,7 +152,7 @@
   text-align: center;
   font-weight: 600;
   font-size: 16px;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
 }
 
 /* Success message */
@@ -160,12 +160,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tl-spacing-2, 0.5rem);
-  padding: var(--tl-spacing-3, 0.75rem);
-  background-color: var(--tl-color-success, #10b981);
+  gap: var(--tl-spacing-2);
+  padding: var(--tl-spacing-3);
+  background-color: var(--tl-color-success);
   color: #ffffff;
-  border-radius: var(--tl-radius-md, 0.5rem);
-  margin-bottom: var(--tl-spacing-3, 0.75rem);
+  border-radius: var(--tl-radius-md);
+  margin-bottom: var(--tl-spacing-3);
   font-weight: 500;
   font-size: 14px;
 }
@@ -178,11 +178,11 @@
 /* Add to cart button */
 .add-to-cart-btn {
   width: 100%;
-  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  padding: var(--tl-spacing-3) var(--tl-spacing-4);
+  border-radius: var(--tl-radius-md);
   border: none;
-  background-color: var(--tl-color-primary, #6366f1);
-  color: var(--tl-color-primary-foreground, #ffffff);
+  background-color: var(--tl-color-primary);
+  color: var(--tl-color-primary-foreground);
   font-weight: 600;
   font-size: 16px;
   cursor: pointer;
@@ -199,7 +199,32 @@
 
 .add-to-cart-btn.disabled,
 .add-to-cart-btn:disabled {
-  background-color: var(--tl-color-muted, #d1d5db);
-  color: var(--tl-color-muted-foreground, #6b7280);
+  background-color: var(--tl-color-muted);
+  color: var(--tl-color-muted-foreground);
   cursor: not-allowed;
 }
+
+/* Selection totals: only rendered when the surface quotes a fee, so the
+   buyer sees the booking fee before the tickets reach the cart. */
+.selection-totals {
+  padding: var(--tl-spacing-3) 0;
+  border-top: 1px solid var(--tl-color-border);
+}
+
+.selection-totals .total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--tl-spacing-1) 0;
+  font-size: 14px;
+  color: var(--tl-color-muted-foreground);
+}
+
+.selection-totals .total-row.total {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--tl-color-foreground);
+  padding-top: var(--tl-spacing-2);
+  border-top: 1px solid var(--tl-color-border);
+  margin-top: var(--tl-spacing-2);
+}

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

@@ -1,5 +1,15 @@
 import { h } from "@stencil/core";
-import { getSDK, hasSDK, whenSDK } from "../../utils/sdk-connector";
+import { createElement, ticketSelectorCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+/**
+ * The web harness for `ticketSelectorCore`.
+ *
+ * It renders and it forwards: every decision, every string and every sum is in
+ * `@ticketlayer/elements-core` (AGENTS.md, TKT-11). What is left here is the
+ * Stencil surface a host writes HTML against - the tag, the attributes, the
+ * three `tl*` events - plus the one thing that is genuinely web: finding the
+ * client the page published on `window.Ticketlayer`.
+ */
 export class TlTicketSelector {
     constructor() {
         /**
@@ -10,157 +20,106 @@ export class TlTicketSelector {
          * Button label
          */
         this.buttonLabel = 'Add to Cart';
-        this.ticketTypes = [];
-        this.quantities = {};
-        this.loading = true;
-        this.error = null;
-        this.adding = false;
-        this.addSuccess = false;
+        this.element = createElement(ticketSelectorCore, {
+            client: () => getSDK(),
+            // What "the client is up" means on the web. The core waits on it in its
+            // own mount; the harness no longer decides when to load (TKT-197).
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
-    watchPropsChange() {
-        this.loadTicketTypes();
+    /**
+     * The fee the surface has quoted for this selection. Core state, exposed here
+     * because it is set from outside the element and not from an attribute: there
+     * is no quote operation on the buyer-facing surface yet, so it stays null and
+     * no fee row is rendered.
+     */
+    get feeQuote() {
+        return this.element.state.feeQuote;
     }
-    async componentWillLoad() {
-        await this.waitForSDKAndLoad();
+    set feeQuote(quote) {
+        this.element.actions.setFeeQuote(quote);
     }
     /**
-     * Wait for SDK to be ready, then load ticket types
+     * A new event or occurrence is a new subject: the element is torn down and
+     * mounted again, so whatever the core set up for the old one is undone
+     * before anything is set up for the new one.
      */
-    async waitForSDKAndLoad() {
-        if (!this.eventId || !this.occurrenceId) {
-            return;
-        }
-        try {
-            await whenSDK();
-            await this.loadTicketTypes();
-        }
-        catch (err) {
-            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
-            this.loading = false;
-        }
+    watchPropsChange() {
+        this.syncProps();
+        this.remount();
     }
-    async loadTicketTypes() {
-        try {
-            console.log('[tl-ticket-selector] Loading ticket types...', {
-                eventId: this.eventId,
-                occurrenceId: this.occurrenceId
-            });
-            this.loading = true;
-            this.error = null;
-            const sdk = getSDK();
-            const eventsManager = sdk.getEventsManager();
-            const types = await eventsManager.getTicketTypes(this.eventId, this.occurrenceId);
-            console.log('[tl-ticket-selector] Ticket types loaded:', types.length);
-            this.ticketTypes = types;
-            // Initialise quantities to 0
-            const initialQuantities = {};
-            types.forEach((t) => {
-                initialQuantities[t.id] = 0;
-            });
-            this.quantities = initialQuantities;
-        }
-        catch (err) {
-            console.error('[tl-ticket-selector] Failed to load ticket types:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.loading = false;
-        }
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            occurrenceId: this.occurrenceId,
+            showButton: this.showButton,
+            buttonLabel: this.buttonLabel,
+        });
     }
-    handleQuantityChange(ticketTypeId, delta) {
-        const ticketType = this.ticketTypes.find(t => t.id === ticketTypeId);
-        if (!ticketType)
-            return;
-        const currentQty = this.quantities[ticketTypeId] || 0;
-        const newQty = Math.max(0, Math.min(ticketType.maxPerOrder, currentQty + delta));
-        this.quantities = {
-            ...this.quantities,
-            [ticketTypeId]: newQty,
-        };
-        const total = this.calculateTotal();
-        this.tlQuantityChange.emit({ ticketTypeId, quantity: newQty, total });
+    /**
+     * On screen: render what the core says and put the core to work. What "to
+     * work" means is the core's own business - for this element, waiting for the
+     * client and reading the ticket types.
+     *
+     * `connectedCallback` and not `componentWillLoad` because this runs again
+     * when the element is moved in the DOM, and that is exactly when a mount and
+     * its teardown have to pair up.
+     */
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    calculateTotal() {
-        return this.ticketTypes.reduce((sum, tt) => {
-            return sum + (this.quantities[tt.id] || 0) * tt.price;
-        }, 0);
+    /**
+     * Off screen: run the mount's teardown, and nothing more. `destroy()` is
+     * terminal and Stencil calls this for a move as well as a removal, so
+     * destroying here would leave a re-inserted element frozen. The instance
+     * holds no listener and no subscription once these two have run.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    getTotalItems() {
-        return Object.values(this.quantities).reduce((sum, qty) => sum + qty, 0);
+    remount() {
+        this.teardown?.();
+        this.teardown = this.element.mount();
     }
-    async handleAddToCart() {
-        const itemsToAdd = Object.entries(this.quantities)
-            .filter(([_, qty]) => qty > 0)
-            .map(([ticketTypeId, quantity]) => ({ ticketTypeId, quantity }));
-        if (itemsToAdd.length === 0)
-            return;
-        this.adding = true;
-        this.addSuccess = false;
-        try {
-            if (hasSDK()) {
-                const sdk = getSDK();
-                const cartManager = sdk.getCartManager?.();
-                if (cartManager) {
-                    for (const item of itemsToAdd) {
-                        await cartManager.addItem(item.ticketTypeId, item.quantity, this.occurrenceId);
-                    }
-                    console.log('[tl-ticket-selector] Items added to cart');
-                }
-            }
-            // Reset quantities after adding
-            const resetQuantities = {};
-            this.ticketTypes.forEach(t => {
-                resetQuantities[t.id] = 0;
-            });
-            this.quantities = resetQuantities;
-            this.addSuccess = true;
-            // Clear success message after 3 seconds
-            setTimeout(() => {
-                this.addSuccess = false;
-            }, 3000);
-            this.tlAddToCart.emit({ items: itemsToAdd });
+    forward(event, detail) {
+        if (event === 'tlAddToCart')
+            this.tlAddToCart.emit(detail);
+        else if (event === 'tlQuantityChange') {
+            this.tlQuantityChange.emit(detail);
         }
-        catch (err) {
-            console.error('[tl-ticket-selector] Failed to add to cart:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to add to cart';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.adding = false;
-        }
-    }
-    formatPrice(priceInPence, currency = 'GBP') {
-        return new Intl.NumberFormat('en-GB', {
-            style: 'currency',
-            currency,
-        }).format(priceInPence / 100);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     renderSkeleton() {
         return (h("div", { class: "skeleton-container" }, h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" })));
     }
     renderError() {
-        return (h("div", { class: "error-state" }, h("p", { class: "error-message" }, this.error)));
+        return (h("div", { class: "error-state" }, h("p", { class: "error-message" }, this.view.state.error)));
     }
-    renderTicketRow(tt) {
-        const isSoldOut = tt.availabilityStatus === 'sold_out';
-        const qty = this.quantities[tt.id] || 0;
-        return (h("div", { class: `ticket-row ${isSoldOut ? 'sold-out' : ''}`, key: tt.id }, h("div", { class: "ticket-info" }, h("div", { class: "ticket-header" }, h("span", { class: "ticket-name" }, tt.name), tt.availabilityStatus === 'limited' && (h("span", { class: "status-badge limited" }, "Limited")), isSoldOut && (h("span", { class: "status-badge sold-out" }, "Sold Out"))), tt.description && (h("p", { class: "ticket-description" }, tt.description)), h("p", { class: "ticket-price" }, this.formatPrice(tt.price, tt.currency))), h("div", { class: "quantity-controls" }, h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, -1), disabled: isSoldOut || qty === 0, "aria-label": "Decrease quantity" }, "\u2212"), h("span", { class: "qty-value" }, qty), h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, 1), disabled: isSoldOut || qty >= tt.maxPerOrder, "aria-label": "Increase quantity" }, "+"))));
+    renderTicketRow(row) {
+        const strings = this.view.strings;
+        return (h("div", { class: `ticket-row ${row.soldOut ? 'sold-out' : ''}`, key: row.id }, h("div", { class: "ticket-info" }, h("div", { class: "ticket-header" }, h("span", { class: "ticket-name" }, row.name), row.limited && h("span", { class: "status-badge limited" }, strings.limited), row.soldOut && h("span", { class: "status-badge sold-out" }, strings.soldOut)), row.description && h("p", { class: "ticket-description" }, row.description), h("p", { class: "ticket-price" }, row.priceLabel)), h("div", { class: "quantity-controls" }, h("button", { class: "qty-btn", onClick: () => this.element.actions.changeQuantity(row.id, -1), disabled: !row.canDecrease, "aria-label": strings.decrease }, "\u2212"), h("span", { class: "qty-value" }, row.quantity), h("button", { class: "qty-btn", onClick: () => this.element.actions.changeQuantity(row.id, 1), disabled: !row.canIncrease, "aria-label": strings.increase }, "+"))));
     }
     render() {
-        if (this.loading) {
+        const { status, state, strings, derived } = this.view;
+        if (status === 'loading') {
             return this.renderSkeleton();
         }
-        if (this.error) {
+        if (status === 'error') {
             return this.renderError();
         }
-        const totalItems = this.getTotalItems();
-        const totalPrice = this.calculateTotal();
-        return (h("div", { class: "ticket-selector" }, h("div", { class: "ticket-list" }, this.ticketTypes.map(tt => this.renderTicketRow(tt))), this.addSuccess && (h("div", { class: "success-message" }, h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Added to cart!")), this.showButton && (h("button", { class: `add-to-cart-btn ${totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.handleAddToCart(), disabled: totalItems === 0 || this.adding }, this.adding
-            ? 'Adding...'
-            : totalItems === 0
-                ? 'Select Tickets'
-                : `${this.buttonLabel} - ${this.formatPrice(totalPrice)}`))));
+        return (h("div", { class: "ticket-selector" }, h("div", { class: "ticket-list" }, derived.rows.map((row) => this.renderTicketRow(row))), derived.showTotals && (h("div", { class: "selection-totals" }, h("div", { class: "total-row" }, h("span", null, strings.ticketsRow), h("span", null, derived.subtotalLabel)), h("div", { class: "total-row fee" }, h("span", null, derived.totals.feeLabel), h("span", null, derived.feeLabel)), h("div", { class: "total-row total" }, h("span", null, strings.totalRow), h("span", null, derived.totalLabel)))), state.addSuccess && (h("div", { class: "success-message" }, h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), strings.added)), this.showButton && (h("button", { class: `add-to-cart-btn ${derived.totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.element.actions.addToCart(), disabled: derived.actionDisabled }, derived.actionLabel))));
     }
     static get is() { return "tl-ticket-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -258,12 +217,7 @@ export class TlTicketSelector {
     }
     static get states() {
         return {
-            "ticketTypes": {},
-            "quantities": {},
-            "loading": {},
-            "error": {},
-            "adding": {},
-            "addSuccess": {}
+            "view": {}
         };
     }
     static get events() {
@@ -327,6 +281,12 @@ export class TlTicketSelector {
             }, {
                 "propName": "occurrenceId",
                 "methodName": "watchPropsChange"
+            }, {
+                "propName": "showButton",
+                "methodName": "syncProps"
+            }, {
+                "propName": "buttonLabel",
+                "methodName": "syncProps"
             }];
     }
 }

package/dist/collection/utils/cart-totals.js

@@ -0,0 +1,9 @@
+/**
+ * The money rows a cart-shaped view renders.
+ *
+ * The rule and the arithmetic moved to `@ticketlayer/elements-core` with the
+ * core split (TKT-68): it is behaviour, and behaviour lives in a core so every
+ * harness derives the same figures. This file stays as the import path the
+ * components and their specs already use.
+ */
+export { cartTotals, expressesFee, minorUnits, selectionTotals, FEE_LABEL_FALLBACK, } from '@ticketlayer/elements-core';

package/dist/collection/utils/order-summary.js

@@ -1,101 +1,17 @@
-/** Money arrives as minor-unit integers or decimal strings ("50.00"). */
-export function formatPrice(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);
-}
-export function formatDateTime(iso) {
-    return new Date(iso).toLocaleDateString('en-GB', {
-        weekday: 'short',
-        day: 'numeric',
-        month: 'short',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-}
-export function formatDate(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). */
-export function ticketItems(order) {
-    return (order.items ?? []).filter((i) => !i.type || i.type === 'ticket');
-}
-export 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. */
-export function orderEventName(order) {
-    return order.eventName || ticketItems(order)[0]?.name || order.items?.[0]?.name || null;
-}
-export function orderCustomerEmail(order, customer) {
-    const fromOrder = order?.customerEmail || order?.customer?.email;
-    if (fromOrder)
-        return fromOrder;
-    const c = customer;
-    return c?.email || null;
-}
-export function statusLabel(status) {
-    if (!status)
-        return '';
-    return status.replace(/_/g, ' ').replace(/^\w/, (m) => m.toUpperCase());
-}
-export 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';
-    }
-}
-export function errorMessage(err, fallback) {
-    return err instanceof Error && err.message ? err.message : fallback;
-}
-/** True for the "not signed in" family of API errors (401/403, NO_SESSION, NOT_AUTHENTICATED). */
-export 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';
-}
 /**
- * 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.
+ * The order helpers, as the components have always imported them.
+ *
+ * Everything here now lives in `@ticketlayer/elements-core`
+ * (`src/orders.ts`): the order shape, the money rows, the status tone, the
+ * date and price formatting and the occurrence lookup all moved across with
+ * the split of `tl-my-orders` and `tl-order-confirmation` (TKT-69), so a
+ * native harness answers the same questions the same way. This module stays as
+ * the import path, unchanged for callers, because `tl-order-tickets` and
+ * `tl-ticket` are not split yet and read these helpers from here.
+ *
+ * `resolveOccurrence` is the one signature that moved: it takes the core's
+ * `ElementClient` rather than this package's `TicketlayerSDK`. A
+ * `TicketlayerSDK` satisfies that shape, so every existing call still
+ * compiles, which is why it is re-exported rather than wrapped.
  */
-export async function resolveOccurrence(sdk, occurrenceId, maxEvents = 12) {
-    const events = sdk.getEventsManager();
-    const listing = await events.list({ limit: maxEvents });
-    const candidates = listing.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;
-}
+export { errorMessage, formatDate, formatDateTime, formatPrice, isAuthError, orderCustomerEmail, orderEventName, orderTotals, resolveOccurrence, statusLabel, statusTone, ticketCount, ticketItems, totalsAgree, } from '@ticketlayer/elements-core';