@ticketlayer/elements 0.2.0

package/dist/esm/tl-cart-badge.entry.js

@@ -0,0 +1,107 @@
+import { r as registerInstance, c as createEvent, h } from './index-Ba-RZTFI.js';
+import { w as whenSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlCartBadgeCss = () => `:host{display:inline-block}.cart-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:var(--tl-spacing-2, 0.5rem);border-radius:var(--tl-radius-md, 0.5rem);color:var(--tl-color-foreground, #111827);transition:background-color 0.2s, transform 0.15s}.cart-badge:hover{background-color:var(--tl-color-muted, #f3f4f6)}.cart-badge:active{transform:scale(0.95)}.cart-badge:focus-visible{outline:2px solid var(--tl-color-primary, #6366f1);outline-offset:2px}.size-sm{padding:var(--tl-spacing-1, 0.25rem)}.size-sm .icon-svg,.size-sm .icon-text{width:18px;height:18px;font-size:18px}.size-md .icon-svg,.size-md .icon-text{width:24px;height:24px;font-size:24px}.size-lg{padding:var(--tl-spacing-3, 0.75rem)}.size-lg .icon-svg,.size-lg .icon-text{width:32px;height:32px;font-size:32px}.icon-svg{width:24px;height:24px;stroke-width:2}.icon-text{line-height:1}.badge-count{position:absolute;top:0;right:0;transform:translate(30%, -30%);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background-color:var(--tl-color-primary, #6366f1);color:var(--tl-color-primary-foreground, #ffffff);font-size:11px;font-weight:600;font-family:var(--tl-font-family, system-ui, sans-serif);display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}.size-sm .badge-count{min-width:16px;height:16px;font-size:10px;padding:0 4px}.size-lg .badge-count{min-width:22px;height:22px;font-size:13px;padding:0 6px}.badge-only{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background-color:rgba(255, 255, 255, 0.3);color:inherit;font-size:12px;font-weight:600;font-family:var(--tl-font-family, system-ui, sans-serif);line-height:1}.badge-only.size-sm{min-width:18px;height:18px;font-size:11px;padding:0 5px}.badge-only.size-lg{min-width:22px;height:22px;font-size:13px;padding:0 7px}`;
+
+// Storage key for persisted cart count
+const CART_COUNT_KEY = 'tl_cart_count';
+const TlCartBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlClick = createEvent(this, "tlClick");
+        /**
+         * Show the badge even when count is 0
+         */
+        this.showEmpty = false;
+        /**
+         * Size variant
+         */
+        this.size = 'md';
+        /**
+         * Badge only mode - only shows the count bubble, no icon or button
+         */
+        this.badgeOnly = false;
+        this.itemCount = 0;
+        this.handleClick = () => {
+            this.tlClick.emit({ itemCount: this.itemCount });
+        };
+    }
+    componentWillLoad() {
+        // Initialize with persisted count to prevent FOUC
+        this.itemCount = this.getPersistedCartCount();
+    }
+    componentDidLoad() {
+        this.subscribeToCartUpdates();
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    getPersistedCartCount() {
+        if (typeof window === 'undefined')
+            return 0;
+        try {
+            const stored = localStorage.getItem(CART_COUNT_KEY);
+            return stored ? parseInt(stored, 10) || 0 : 0;
+        }
+        catch {
+            return 0;
+        }
+    }
+    persistCartCount(count) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            localStorage.setItem(CART_COUNT_KEY, count.toString());
+        }
+        catch {
+            // localStorage may be unavailable
+        }
+    }
+    async subscribeToCartUpdates() {
+        const sdk = await whenSDK().catch(() => null);
+        if (!sdk)
+            return;
+        const cartManager = sdk.getCartManager?.();
+        if (!cartManager)
+            return;
+        // Subscribe to cart updates
+        this.unsubscribe = cartManager.on?.('cart:updated', (cart) => {
+            const newCount = cart?.itemCount || 0;
+            console.log('[tl-cart-badge] Cart updated:', newCount);
+            this.itemCount = newCount;
+            this.persistCartCount(newCount);
+        });
+        // Load initial cart
+        cartManager.get?.().then((cart) => {
+            const newCount = cart?.itemCount || 0;
+            this.itemCount = newCount;
+            this.persistCartCount(newCount);
+        }).catch(() => {
+            // Cart may not exist yet - keep persisted value
+        });
+    }
+    renderIcon() {
+        if (this.icon) {
+            return h("span", { class: "icon-text" }, this.icon);
+        }
+        return (h("svg", { class: "icon-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" })));
+    }
+    render() {
+        const showBadge = this.itemCount > 0 || this.showEmpty;
+        const displayCount = this.itemCount > 99 ? '99+' : this.itemCount.toString();
+        // Badge only mode - just show the count bubble
+        if (this.badgeOnly) {
+            if (this.itemCount === 0) {
+                return null;
+            }
+            return (h("span", { class: `badge-only size-${this.size}` }, displayCount));
+        }
+        // Full mode with icon and badge
+        return (h("button", { class: `cart-badge size-${this.size}`, onClick: this.handleClick, "aria-label": `Cart with ${this.itemCount} items` }, this.renderIcon(), showBadge && this.itemCount > 0 && (h("span", { class: "badge-count" }, displayCount))));
+    }
+};
+TlCartBadge.style = tlCartBadgeCss();
+
+export { TlCartBadge as tl_cart_badge };

package/dist/esm/tl-cart-drawer.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Ba-RZTFI.js';
+import { o as onSDKEvent } from './sdk-connector-CqhvfyKV.js';
+
+const tlCartDrawerCss = () => `:host{--_bg:var(--tl-background, #ffffff);--_fg:var(--tl-foreground, #111827);--_muted-fg:var(--tl-muted-foreground, #6b7280);--_muted:var(--tl-muted, #f3f4f6);--_border:var(--tl-border, #e5e7eb);--_font:var(--tl-font-family, system-ui, -apple-system, sans-serif);font-family:var(--_font)}.overlay{position:fixed;inset:0;z-index:2147483640;background:rgba(8, 8, 16, 0.6);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity 0.25s ease}.overlay.is-open{opacity:1;pointer-events:auto}.panel{position:fixed;top:0;bottom:0;width:min(420px, 100%);display:flex;flex-direction:column;background:var(--_bg);color:var(--_fg);box-shadow:0 0 48px rgba(0, 0, 0, 0.5);transition:transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);will-change:transform}.panel--right{right:0;border-left:1px solid var(--_border);transform:translateX(100%)}.panel--left{left:0;border-right:1px solid var(--_border);transform:translateX(-100%)}.panel.is-open{transform:translateX(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--_border)}.drawer-title{margin:0;font-size:1.1rem;font-weight:700}.close-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:999px;background:var(--_muted);color:var(--_muted-fg);cursor:pointer;transition:color 0.15s}.close-btn:hover{color:var(--_fg)}.close-btn svg{width:16px;height:16px}.drawer-body{flex:1;overflow-y:auto;padding:18px 20px}`;
+
+const TlCartDrawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlOpen = createEvent(this, "tlOpen");
+        this.tlClose = createEvent(this, "tlClose");
+        /** Edge the panel slides in from. */
+        this.side = 'right';
+        /** Heading shown at the top of the panel. */
+        this.heading = 'Your cart';
+        /** Controlled open state (also driven by the `ui:cart-requested` intent). */
+        this.open = false;
+        this.visible = false;
+        this.onKey = (e) => {
+            if (e.key === 'Escape' && this.visible)
+                this.setOpen(false);
+        };
+        this.close = () => this.setOpen(false);
+    }
+    connectedCallback() {
+        this.visible = this.open;
+        // Open on the cart intent; close on the shared modal-close intent.
+        this.offCart = onSDKEvent('ui:cart-requested', () => this.setOpen(true));
+        this.offClose = onSDKEvent('ui:modal-close-requested', () => this.setOpen(false));
+        if (typeof document !== 'undefined')
+            document.addEventListener('keydown', this.onKey);
+    }
+    disconnectedCallback() {
+        this.offCart?.();
+        this.offClose?.();
+        if (typeof document !== 'undefined')
+            document.removeEventListener('keydown', this.onKey);
+    }
+    onOpenProp(v) {
+        this.visible = v;
+    }
+    setOpen(v) {
+        if (this.visible === v)
+            return;
+        this.open = v;
+        this.visible = v;
+        if (v)
+            this.tlOpen.emit();
+        else
+            this.tlClose.emit();
+    }
+    render() {
+        return (h(Host, { key: '5b4dbc69206ef19bcf3b0ba619a67728c8e35e68' }, h("div", { key: '0312918752eb5eebb86206be7094c1024dbd3457', class: { overlay: true, 'is-open': this.visible }, onClick: (e) => {
+                if (e.target === e.currentTarget)
+                    this.close();
+            } }, h("aside", { key: '8c50e6b0cfacf3a881e4ec1ab272ef8da13cd796', class: { panel: true, [`panel--${this.side}`]: true, 'is-open': this.visible }, role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-hidden": this.visible ? 'false' : 'true' }, h("header", { key: 'ee7efe3700ff05c921f6ace97f39f957ebf6670e', class: "drawer-header" }, h("h2", { key: '07841a92eea5bca5db0ebf64df91a14eaa5ecffc', class: "drawer-title" }, this.heading), h("button", { key: 'c2099831dfaf89b44b7228c1ee5634d61c5af919', class: "close-btn", onClick: this.close, "aria-label": "Close cart" }, h("svg", { key: 'a2c8e0ecf42e4fe43ca1d6b6ccc6f4687e6af483', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'de07e2ce6b0b60a137d8b534826963a03421af7b', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'f67798d0e026cce074bf15b246cdd3b726be98f6', class: "drawer-body" }, h("tl-cart", { key: '1b2a5a44e1862a3b4754bd36e17de063d012453e' }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenProp": 0
+            }]
+    }; }
+};
+TlCartDrawer.style = tlCartDrawerCss();
+
+export { TlCartDrawer as tl_cart_drawer };

package/dist/esm/tl-cart.entry.js

@@ -0,0 +1,146 @@
+import { r as registerInstance, c as createEvent, h } from './index-Ba-RZTFI.js';
+import { w as whenSDK, h as hasSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlCartCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.skeleton-container{padding:var(--tl-spacing-4, 1rem)}.skeleton-item{height:70px;background:var(--tl-color-muted, #f3f4f6);border-radius:var(--tl-radius-md, 0.5rem);margin-bottom:var(--tl-spacing-3, 0.75rem);animation:pulse 1.5s ease-in-out infinite}.skeleton-totals{height:100px;background:var(--tl-color-muted, #f3f4f6);border-radius:var(--tl-radius-md, 0.5rem);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.empty-cart{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--tl-spacing-8, 2rem);text-align:center}.empty-icon{width:48px;height:48px;color:var(--tl-color-muted-foreground, #9ca3af);margin-bottom:var(--tl-spacing-4, 1rem)}.empty-title{margin:0 0 var(--tl-spacing-2, 0.5rem);font-size:16px;font-weight:600;color:var(--tl-color-foreground, #111827)}.empty-message{margin:0;font-size:14px;color:var(--tl-color-muted-foreground, #6b7280)}.cart{background:var(--tl-color-background, #ffffff)}.cart.compact .cart-items{margin-bottom:var(--tl-spacing-2, 0.5rem)}.cart-items{margin-bottom:var(--tl-spacing-4, 1rem)}.cart-item{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--tl-spacing-3, 0.75rem) 0;border-bottom:1px solid var(--tl-color-border, #e5e7eb);transition:opacity 0.2s}.cart-item:last-child{border-bottom:none}.cart-item.removing{opacity:0.5}.item-info{flex:1;min-width:0}.item-name{margin:0;font-weight:600;font-size:15px;color:var(--tl-color-foreground, #111827)}.item-event{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:14px;color:var(--tl-color-muted-foreground, #6b7280)}.item-date{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:13px;color:var(--tl-color-muted-foreground, #9ca3af)}.item-quantity{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:13px;color:var(--tl-color-muted-foreground, #6b7280)}.item-actions{display:flex;align-items:center;gap:var(--tl-spacing-3, 0.75rem);margin-left:var(--tl-spacing-4, 1rem)}.item-price{margin:0;font-weight:600;font-size:15px;color:var(--tl-color-foreground, #111827);white-space:nowrap}.remove-btn{width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--tl-radius-sm, 0.25rem);color:var(--tl-color-muted-foreground, #9ca3af);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, color 0.15s}.remove-btn:hover:not(:disabled){background-color:var(--tl-color-destructive-bg, #fee2e2);color:var(--tl-color-destructive, #ef4444)}.remove-btn:disabled{cursor:not-allowed;opacity:0.5}.remove-btn svg{width:16px;height:16px}.spinner{width:14px;height:14px;border:2px solid var(--tl-color-border, #e5e7eb);border-top-color:var(--tl-color-primary, #6366f1);border-radius:50%;animation:spin 0.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.cart-totals{padding:var(--tl-spacing-3, 0.75rem) 0;border-top:1px solid var(--tl-color-border, #e5e7eb)}.total-row{display:flex;justify-content:space-between;align-items:center;padding:var(--tl-spacing-1, 0.25rem) 0}.total-row.subtotal,.total-row.fees{font-size:14px;color:var(--tl-color-muted-foreground, #6b7280)}.total-row.total{font-size:16px;font-weight:700;color:var(--tl-color-foreground, #111827);padding-top:var(--tl-spacing-2, 0.5rem);border-top:1px solid var(--tl-color-border, #e5e7eb);margin-top:var(--tl-spacing-2, 0.5rem)}.checkout-btn{width:100%;margin-top:var(--tl-spacing-4, 1rem);padding:var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);border-radius:var(--tl-radius-md, 0.5rem);border:none;background-color:var(--tl-color-primary, #6366f1);color:var(--tl-color-primary-foreground, #ffffff);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.checkout-btn:hover:not(:disabled){opacity:0.9}.checkout-btn:active:not(:disabled){transform:scale(0.98)}.checkout-btn:disabled{background-color:var(--tl-color-muted, #d1d5db);color:var(--tl-color-muted-foreground, #6b7280);cursor:not-allowed}.cart.compact .item-info{flex-direction:row;align-items:center}.cart.compact .cart-totals{padding:var(--tl-spacing-2, 0.5rem) 0}.cart.compact .total-row.total{margin-top:0;border-top:none;padding-top:0}`;
+
+const TlCart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlCheckout = createEvent(this, "tlCheckout");
+        this.tlItemRemoved = createEvent(this, "tlItemRemoved");
+        this.tlCartUpdated = createEvent(this, "tlCartUpdated");
+        this.tlError = createEvent(this, "tlError");
+        /**
+         * Show checkout button
+         */
+        this.showCheckoutButton = true;
+        /**
+         * Checkout button label
+         */
+        this.checkoutLabel = 'Checkout';
+        /**
+         * Show remove item buttons
+         */
+        this.showRemoveButtons = true;
+        /**
+         * Compact mode - hides some details
+         */
+        this.compact = false;
+        this.cart = null;
+        this.loading = true;
+        this.error = null;
+        this.removingItemId = null;
+        this.handleCheckout = () => {
+            if (this.cart && this.cart.items.length > 0) {
+                this.tlCheckout.emit({ cart: this.cart });
+            }
+        };
+    }
+    componentWillLoad() {
+        this.loadCart();
+    }
+    componentDidLoad() {
+        this.subscribeToCartUpdates();
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    async loadCart() {
+        try {
+            console.log('[tl-cart] Loading cart...');
+            this.loading = true;
+            this.error = null;
+            const sdk = await whenSDK();
+            const cartManager = sdk.getCartManager?.();
+            if (cartManager) {
+                const cartData = await cartManager.get();
+                console.log('[tl-cart] Cart loaded:', cartData);
+                this.cart = cartData;
+            }
+        }
+        catch (err) {
+            console.error('[tl-cart] Failed to load cart:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to load cart';
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async subscribeToCartUpdates() {
+        const sdk = await whenSDK().catch(() => null);
+        if (!sdk)
+            return;
+        const cartManager = sdk.getCartManager?.();
+        if (!cartManager)
+            return;
+        this.unsubscribe = cartManager.on?.('cart:updated', (cartData) => {
+            console.log('[tl-cart] Cart updated:', cartData);
+            this.cart = cartData;
+            this.tlCartUpdated.emit({ cart: cartData });
+        });
+    }
+    async handleRemoveItem(itemId) {
+        if (!hasSDK())
+            return;
+        this.removingItemId = itemId;
+        try {
+            const sdk = getSDK();
+            const cartManager = sdk.getCartManager?.();
+            if (cartManager) {
+                await cartManager.removeItem(itemId);
+                console.log('[tl-cart] Item removed:', itemId);
+                this.tlItemRemoved.emit({ itemId });
+            }
+        }
+        catch (err) {
+            console.error('[tl-cart] Failed to remove item:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to remove item';
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.removingItemId = null;
+        }
+    }
+    formatPrice(priceInPence, currency = 'GBP') {
+        return new Intl.NumberFormat('en-GB', {
+            style: 'currency',
+            currency,
+        }).format(priceInPence / 100);
+    }
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-GB', {
+            weekday: 'short',
+            day: 'numeric',
+            month: 'short',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    renderSkeleton() {
+        return (h("div", { class: "skeleton-container" }, h("div", { class: "skeleton-item" }), h("div", { class: "skeleton-item" }), h("div", { class: "skeleton-totals" })));
+    }
+    renderEmptyCart() {
+        return (h("div", { class: "empty-cart" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" })), h("p", { class: "empty-title" }, "Your cart is empty"), h("p", { class: "empty-message" }, "Add tickets to get started")));
+    }
+    renderCartItem(item) {
+        const isRemoving = this.removingItemId === item.id;
+        return (h("div", { class: `cart-item ${isRemoving ? 'removing' : ''}`, key: item.id }, h("div", { class: "item-info" }, h("p", { class: "item-name" }, item.ticketTypeName), !this.compact && (h("p", { class: "item-event" }, item.eventName)), !this.compact && item.occurrenceDate && (h("p", { class: "item-date" }, this.formatDate(item.occurrenceDate))), h("p", { class: "item-quantity" }, "Qty: ", item.quantity)), h("div", { class: "item-actions" }, h("p", { class: "item-price" }, this.formatPrice(item.totalPrice, item.currency)), this.showRemoveButtons && (h("button", { class: "remove-btn", onClick: () => this.handleRemoveItem(item.id), disabled: isRemoving, "aria-label": "Remove item" }, isRemoving ? (h("span", { class: "spinner" })) : (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" }))))))));
+    }
+    render() {
+        if (this.loading) {
+            return this.renderSkeleton();
+        }
+        if (!this.cart || this.cart.items.length === 0) {
+            return this.renderEmptyCart();
+        }
+        const { items, subtotal, fees, total, currency } = this.cart;
+        return (h("div", { class: `cart ${this.compact ? 'compact' : ''}` }, h("div", { class: "cart-items" }, items.map(item => this.renderCartItem(item))), h("div", { class: "cart-totals" }, !this.compact && (h("div", { class: "total-row subtotal" }, h("span", null, "Subtotal"), h("span", null, this.formatPrice(subtotal, currency)))), fees > 0 && !this.compact && (h("div", { class: "total-row fees" }, h("span", null, "Fees"), h("span", null, this.formatPrice(fees, currency)))), h("div", { class: "total-row total" }, h("span", null, "Total"), h("span", null, this.formatPrice(total, currency)))), this.showCheckoutButton && (h("button", { class: "checkout-btn", onClick: this.handleCheckout, disabled: items.length === 0 }, this.checkoutLabel))));
+    }
+};
+TlCart.style = tlCartCss();
+
+export { TlCart as tl_cart };

package/dist/esm/tl-checkout-wrapper.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Ba-RZTFI.js';
+import { h as hasSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlCheckoutWrapperCss = () => `tl-checkout-wrapper,.tl-checkout-wrapper{display:inline-block;cursor:pointer}tl-checkout-wrapper:focus,.tl-checkout-wrapper:focus{outline:2px solid var(--tl-ring, #3b82f6);outline-offset:2px;border-radius:var(--tl-radius-sm, 0.25rem)}tl-checkout-wrapper[disabled],tl-checkout-wrapper.tl-checkout-wrapper--disabled,.tl-checkout-wrapper--disabled{cursor:not-allowed;opacity:0.5}`;
+
+const TlCheckoutWrapper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlComplete = createEvent(this, "tl-complete");
+        this.tlError = createEvent(this, "tl-error");
+        this.tlClose = createEvent(this, "tl-close");
+        /**
+         * Whether the wrapper is disabled
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (!hasSDK()) {
+                console.error('[tl-checkout-wrapper] SDK not initialized. Call setSDK(ticketlayer) first.');
+                this.tlError.emit({ message: 'SDK not initialized' });
+                return;
+            }
+            const sdk = getSDK();
+            // Open the checkout modal via SDK
+            sdk.checkout.openModal({
+                onComplete: (order) => {
+                    this.tlComplete.emit(order);
+                },
+                onError: (err) => {
+                    this.tlError.emit({ message: err.message });
+                },
+                onClose: () => {
+                    this.tlClose.emit();
+                },
+            });
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleClick();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'ebaae5dd6710ffc5353ece4327012df0332fdbb7', class: {
+                'tl-checkout-wrapper': true,
+                'tl-checkout-wrapper--disabled': this.disabled,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '0118d9921df5af1ae2376fd4135bac487aac7ebd' })));
+    }
+    get el() { return getElement(this); }
+};
+TlCheckoutWrapper.style = tlCheckoutWrapperCss();
+
+export { TlCheckoutWrapper as tl_checkout_wrapper };

package/dist/esm/tl-event-card.entry.js

@@ -0,0 +1,138 @@
+import { r as registerInstance, c as createEvent, h } from './index-Ba-RZTFI.js';
+import { w as whenSDK } from './sdk-connector-CqhvfyKV.js';
+import { e as errorMessage } from './order-summary-BGekdjN9.js';
+
+/** Adapt an event detail to the card shape (the list adapter lives in the SDK connector). */
+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 tlEventCardCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.event-card{background:var(--tl-secondary, #f3f4f6);border-radius:var(--tl-radius-lg, 0.75rem);overflow:hidden;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);cursor:pointer;transition:box-shadow 0.2s ease, transform 0.2s ease}.event-card:hover{box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);transform:translateY(-2px)}.image-container{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--tl-muted, #f9fafb)}.event-image{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.event-card:hover .event-image{transform:scale(1.05)}.image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--tl-muted-foreground, #6b7280)}.status-container{position:absolute;top:0.5rem;right:0.5rem}.status-badge{display:inline-block;padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500;border-radius:var(--tl-radius-sm, 0.25rem)}.status-available{background:var(--tl-success, #10b981);color:var(--tl-success-foreground, #ffffff)}.status-limited{background:var(--tl-warning, #f59e0b);color:var(--tl-warning-foreground, #ffffff)}.status-sold-out{background:var(--tl-error, #ef4444);color:var(--tl-error-foreground, #ffffff)}.content{padding:var(--tl-spacing-4, 1rem)}.category{display:inline-block;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--tl-primary, #6366f1)}.title{margin:0.25rem 0 0;font-size:1.125rem;font-weight:600;color:var(--tl-foreground, #111827);line-height:1.3}.event-card:hover .title{color:var(--tl-primary, #6366f1)}.meta{display:flex;align-items:center;gap:0.5rem;margin:0.5rem 0 0;font-size:0.875rem;color:var(--tl-muted-foreground, #6b7280)}.meta:first-of-type{margin-top:0.75rem}.icon{width:1rem;height:1rem;flex-shrink:0}.description{margin:0.75rem 0 0;font-size:0.875rem;color:var(--tl-muted-foreground, #6b7280);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-skeleton{cursor:default;pointer-events:none}.card-skeleton .image-container{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.skeleton-line{height:0.875rem;margin-top:0.5rem;background:var(--tl-muted, #f9fafb);border-radius:var(--tl-radius-sm, 0.25rem);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.skeleton-line.short{width:40%}.skeleton-line.long{width:80%}.card-error{padding:var(--tl-spacing-4, 1rem);font-size:0.875rem;color:var(--tl-error, #ef4444);cursor:default}.card-error:hover{transform:none}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}`;
+
+const TlEventCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlClick = createEvent(this, "tlClick");
+        this.tlError = createEvent(this, "tlError");
+        this.loadedEvent = null;
+        this.loading = false;
+        this.error = null;
+        this.handleClick = () => {
+            const event = this.current;
+            if (!event)
+                return;
+            console.log('[tl-event-card] Clicked:', event.id);
+            this.tlClick.emit({ eventId: event.id });
+        };
+    }
+    watchEventId() {
+        this.loadEvent();
+    }
+    async componentWillLoad() {
+        if (!this.event && this.eventId) {
+            await this.loadEvent();
+        }
+    }
+    async loadEvent() {
+        if (this.event || !this.eventId)
+            return;
+        try {
+            this.loading = true;
+            this.error = null;
+            const sdk = await whenSDK();
+            const detail = (await sdk.getEventsManager().get(this.eventId));
+            if (!detail)
+                throw new Error('Event not found');
+            this.loadedEvent = toEventCardEvent(detail);
+        }
+        catch (err) {
+            console.error('[tl-event-card] Failed to load event:', err);
+            this.error = errorMessage(err, 'Failed to load event');
+            this.tlError.emit({ message: this.error });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    get current() {
+        return this.event ?? this.loadedEvent;
+    }
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-GB', {
+            weekday: 'short',
+            day: 'numeric',
+            month: 'short',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    getStatusBadgeClass() {
+        const baseClass = 'status-badge';
+        switch (this.current?.availabilityStatus) {
+            case 'available':
+                return `${baseClass} status-available`;
+            case 'limited':
+                return `${baseClass} status-limited`;
+            case 'sold_out':
+                return `${baseClass} status-sold-out`;
+            default:
+                return baseClass;
+        }
+    }
+    getStatusLabel() {
+        switch (this.current?.availabilityStatus) {
+            case 'available':
+                return 'Available';
+            case 'limited':
+                return 'Limited';
+            case 'sold_out':
+                return 'Sold Out';
+            default:
+                return '';
+        }
+    }
+    render() {
+        if (this.loading) {
+            return (h("div", { class: "event-card card-skeleton", "aria-busy": "true" }, h("div", { class: "image-container" }), h("div", { class: "content" }, h("div", { class: "skeleton-line short" }), h("div", { class: "skeleton-line long" }))));
+        }
+        if (this.error) {
+            return h("div", { class: "event-card card-error" }, this.error);
+        }
+        const event = this.current;
+        if (!event) {
+            return null;
+        }
+        // The sales surface exposes a single `imageUrl` (card/listing thumbnail);
+        // `thumbnailUrl` is an accepted alias if a host ever supplies a distinct one.
+        const image = event.thumbnailUrl || event.imageUrl;
+        return (h("div", { class: "event-card", onClick: this.handleClick }, h("div", { class: "image-container" }, image ? (h("img", { src: image, alt: event.name, class: "event-image" })) : (h("div", { class: "image-placeholder" }, h("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("div", { class: "status-container" }, h("span", { class: this.getStatusBadgeClass() }, this.getStatusLabel()))), h("div", { class: "content" }, event.category && h("span", { class: "category" }, event.category), h("h3", { class: "title" }, event.name), event.nextOccurrence && (h("p", { class: "meta" }, h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })), this.formatDate(event.nextOccurrence.startsAt))), event.venue && (h("p", { class: "meta" }, h("svg", { class: "icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })), event.venue.name, ", ", event.venue.city)), event.shortDescription && (h("p", { class: "description" }, event.shortDescription)))));
+    }
+    static get watchers() { return {
+        "eventId": [{
+                "watchEventId": 0
+            }]
+    }; }
+};
+TlEventCard.style = tlEventCardCss();
+
+export { TlEventCard as tl_event_card };

package/dist/esm/tl-event-list.entry.js

@@ -0,0 +1,78 @@
+import { r as registerInstance, c as createEvent, h } from './index-Ba-RZTFI.js';
+import { w as whenSDK } from './sdk-connector-CqhvfyKV.js';
+
+const tlEventListCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.event-grid{display:grid;gap:var(--tl-spacing-6, 1.5rem)}.cols-1{grid-template-columns:1fr}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}@media (max-width: 1024px){.cols-4,.cols-3{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 640px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}}.skeleton-card{background:var(--tl-secondary, #f3f4f6);border-radius:var(--tl-radius-lg, 0.75rem);overflow:hidden}.skeleton-image{aspect-ratio:16 / 9;background:var(--tl-muted, #f9fafb);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.skeleton-content{padding:var(--tl-spacing-4, 1rem);display:flex;flex-direction:column;gap:0.5rem}.skeleton-line{height:1rem;background:var(--tl-muted, #f9fafb);border-radius:var(--tl-radius-sm, 0.25rem);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.skeleton-line.short{width:4rem;height:0.75rem}.skeleton-line.medium{width:75%}.skeleton-line.long{width:50%}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{background:rgba(239, 68, 68, 0.1);border:1px solid var(--tl-error, #ef4444);border-radius:var(--tl-radius-lg, 0.75rem);padding:var(--tl-spacing-4, 1rem)}.error-title{margin:0;font-weight:500;color:var(--tl-error, #ef4444)}.error-message{margin:0.25rem 0 0;font-size:0.875rem;color:var(--tl-error, #ef4444)}.empty-state{text-align:center;padding:var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem)}.empty-icon{width:4rem;height:4rem;margin:0 auto 1rem;color:var(--tl-muted-foreground, #6b7280)}.empty-title{margin:0;font-size:1.25rem;font-weight:600;color:var(--tl-foreground, #111827)}.empty-message{margin:0.5rem 0 0;color:var(--tl-muted-foreground, #6b7280)}`;
+
+const TlEventList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tlEventClick = createEvent(this, "tlEventClick");
+        /**
+         * Maximum number of events to display
+         */
+        this.limit = 12;
+        /**
+         * Columns for grid layout (1, 2, 3, or 4)
+         */
+        this.columns = 3;
+        this.events = [];
+        this.loading = true;
+        this.error = null;
+        this.handleEventClick = (event) => {
+            console.log('[tl-event-list] Event clicked:', event.detail.eventId);
+            this.tlEventClick.emit(event.detail);
+        };
+    }
+    watchFiltersChange() {
+        this.loadEvents();
+    }
+    async componentWillLoad() {
+        await this.loadEvents();
+    }
+    async loadEvents() {
+        try {
+            console.log('[tl-event-list] Loading events via SDK...', { limit: this.limit, category: this.category });
+            this.loading = true;
+            this.error = null;
+            const sdk = await whenSDK();
+            const eventsManager = sdk.getEventsManager();
+            const response = await eventsManager.list({
+                limit: this.limit,
+                category: this.category,
+            });
+            console.log('[tl-event-list] Events loaded:', response.items.length);
+            this.events = response.items;
+        }
+        catch (err) {
+            console.error('[tl-event-list] Failed to load events:', err);
+            this.error = err instanceof Error ? err.message : 'Failed to load events';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        const gridClass = `event-grid cols-${Math.min(Math.max(this.columns, 1), 4)}`;
+        if (this.loading) {
+            return (h("div", { class: gridClass }, Array.from({ length: 6 }).map((_, i) => (h("div", { class: "skeleton-card", key: i }, h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-content" }, h("div", { class: "skeleton-line short" }), h("div", { class: "skeleton-line medium" }), h("div", { class: "skeleton-line long" })))))));
+        }
+        if (this.error) {
+            return (h("div", { class: "error-state" }, h("p", { class: "error-title" }, "Error loading events"), h("p", { class: "error-message" }, this.error)));
+        }
+        if (this.events.length === 0) {
+            return (h("div", { class: "empty-state" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })), h("p", { class: "empty-title" }, "No events available"), h("p", { class: "empty-message" }, "Check back later for upcoming events.")));
+        }
+        return (h("div", { class: gridClass }, this.events.map((event) => (h("tl-event-card", { key: event.id, event: event, onTlClick: this.handleEventClick })))));
+    }
+    static get watchers() { return {
+        "limit": [{
+                "watchFiltersChange": 0
+            }],
+        "category": [{
+                "watchFiltersChange": 0
+            }]
+    }; }
+};
+TlEventList.style = tlEventListCss();
+
+export { TlEventList as tl_event_list };