@ticketlayer/elements 0.3.3 → 1.0.0

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

@@ -1,133 +1,72 @@
-import { r as registerInstance, c as createEvent, h } from './index-CNX8hZa8.js';
-import { w as whenSDK } from './sdk-connector-CqhvfyKV.js';
-import { e as errorMessage } from './order-summary-BGekdjN9.js';
+import { r as registerInstance, c as createEvent, h } from './index-imfxp765.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { c as createElement, f as eventCardCore } from './ticket-selector-BwChnHVC.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 tlEventCardCss = () => `:host{display:block;font-family:var(--tl-font-family)}.event-card{background:var(--tl-secondary);border-radius:var(--tl-radius-lg);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)}.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)}.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)}.status-available{background:var(--tl-success);color:var(--tl-success-foreground)}.status-limited{background:var(--tl-warning);color:var(--tl-warning-foreground)}.status-sold-out{background:var(--tl-error);color:var(--tl-error-foreground)}.content{padding:var(--tl-spacing-4)}.category{display:inline-block;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--tl-primary)}.title{margin:0.25rem 0 0;font-size:1.125rem;font-weight:600;color:var(--tl-foreground);line-height:1.3}.event-card:hover .title{color:var(--tl-primary)}.meta{display:flex;align-items:center;gap:0.5rem;margin:0.5rem 0 0;font-size:0.875rem;color:var(--tl-muted-foreground)}.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);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);border-radius:var(--tl-radius-sm);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);font-size:0.875rem;color:var(--tl-error);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.element = createElement(eventCardCore, {
+            client: () => getSDK(),
+            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;
         this.handleClick = () => {
-            const event = this.current;
-            if (!event)
-                return;
-            console.log('[tl-event-card] Clicked:', event.id);
-            this.tlClick.emit({ eventId: event.id });
+            this.element.actions.click();
         };
     }
-    watchEventId() {
-        this.loadEvent();
+    syncProps() {
+        this.element.setProps({ event: this.event, eventId: this.eventId });
     }
-    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;
+    /** A new id is a new subject: tear the old mount down and start again. */
+    watchEventId() {
+        this.syncProps();
+        this.teardown?.();
+        this.teardown = this.element.mount();
     }
-    formatDate(dateString) {
-        const date = new Date(dateString);
-        return date.toLocaleDateString('en-GB', {
-            weekday: 'short',
-            day: 'numeric',
-            month: 'short',
-            hour: '2-digit',
-            minute: '2-digit',
-        });
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    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;
-        }
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    getStatusLabel() {
-        switch (this.current?.availabilityStatus) {
-            case 'available':
-                return 'Available';
-            case 'limited':
-                return 'Limited';
-            case 'sold_out':
-                return 'Sold Out';
-            default:
-                return '';
-        }
+    forward(event, detail) {
+        if (event === 'tlClick')
+            this.tlClick.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     render() {
-        if (this.loading) {
+        const { status, state, derived } = this.view;
+        if (status === '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);
+        if (status === 'error') {
+            return h("div", { class: "event-card card-error" }, state.error);
         }
-        const event = this.current;
+        const event = derived.event;
         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)))));
+        return (h("div", { class: "event-card", onClick: this.handleClick }, h("div", { class: "image-container" }, derived.image ? (h("img", { src: derived.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: derived.statusBadgeClass }, derived.statusLabel))), h("div", { class: "content" }, event.category && h("span", { class: "category" }, event.category), h("h3", { class: "title" }, event.name), derived.dateLabel && (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" })), derived.dateLabel)), derived.venueLabel && (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" })), derived.venueLabel)), event.shortDescription && h("p", { class: "description" }, event.shortDescription))));
     }
     static get watchers() { return {
+        "event": [{
+                "syncProps": 0
+            }],
         "eventId": [{
                 "watchEventId": 0
             }]

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

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h } from './index-CNX8hZa8.js';
-import { w as whenSDK } from './sdk-connector-CqhvfyKV.js';
+import { r as registerInstance, c as createEvent, h } from './index-imfxp765.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { c as createElement, e as eventListCore } from './ticket-selector-BwChnHVC.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 tlEventListCss = () => `:host{display:block;font-family:var(--tl-font-family)}.event-grid{display:grid;gap:var(--tl-spacing-6)}.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);border-radius:var(--tl-radius-lg);overflow:hidden}.skeleton-image{aspect-ratio:16 / 9;background:var(--tl-muted);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.skeleton-content{padding:var(--tl-spacing-4);display:flex;flex-direction:column;gap:0.5rem}.skeleton-line{height:1rem;background:var(--tl-muted);border-radius:var(--tl-radius-sm);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);border-radius:var(--tl-radius-lg);padding:var(--tl-spacing-4)}.error-title{margin:0;font-weight:500;color:var(--tl-error)}.error-message{margin:0.25rem 0 0;font-size:0.875rem;color:var(--tl-error)}.empty-state{text-align:center;padding:var(--tl-spacing-8) var(--tl-spacing-4)}.empty-icon{width:4rem;height:4rem;margin:0 auto 1rem;color:var(--tl-muted-foreground)}.empty-title{margin:0;font-size:1.25rem;font-weight:600;color:var(--tl-foreground)}.empty-message{margin:0.5rem 0 0;color:var(--tl-muted-foreground)}`;
 
 const TlEventList = class {
     constructor(hostRef) {
@@ -15,54 +16,87 @@ const TlEventList = class {
          * Columns for grid layout (1, 2, 3, or 4)
          */
         this.columns = 3;
-        this.events = [];
-        this.loading = true;
-        this.error = null;
+        this.element = createElement(eventListCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
+        /** A card was clicked. The core has nothing to decide about it; pass it on. */
         this.handleEventClick = (event) => {
-            console.log('[tl-event-list] Event clicked:', event.detail.eventId);
             this.tlEventClick.emit(event.detail);
         };
     }
+    /** A different question deserves a fresh answer. */
     watchFiltersChange() {
-        this.loadEvents();
+        this.syncProps();
+        this.element.actions.load();
     }
-    async componentWillLoad() {
-        await this.loadEvents();
+    syncProps() {
+        this.element.setProps({ limit: this.limit, category: this.category, columns: this.columns });
     }
-    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,
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    /**
+     * Nothing is painted until the first listing has landed.
+     *
+     * Kept as found rather than improved, and it is the harness's to keep: the
+     * component awaited its read in `componentWillLoad`, and Stencil does not
+     * paint a component until that resolves, so a slow channel shows an empty
+     * box where the skeleton markup below would fit. Held by the spec.
+     *
+     * Expressed against the core's own status rather than against a read this
+     * harness starts, because the read is the core's (`connectedCallback` has
+     * already mounted it). Every later read draws the skeleton, exactly as
+     * before.
+     */
+    componentWillLoad() {
+        if (this.view.status !== 'loading')
+            return undefined;
+        return new Promise((resolve) => {
+            const off = this.element.subscribe((view) => {
+                if (view.status === 'loading')
+                    return;
+                off();
+                resolve();
             });
-            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;
-        }
+        });
+    }
+    /**
+     * 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.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    forward(event, detail) {
+        if (event === 'tlEventClick')
+            this.tlEventClick.emit(detail);
     }
     render() {
-        const gridClass = `event-grid cols-${Math.min(Math.max(this.columns, 1), 4)}`;
-        if (this.loading) {
+        const { status, state, strings, derived } = this.view;
+        const gridClass = `event-grid cols-${derived.columns}`;
+        if (status === '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 (status === 'error') {
+            return (h("div", { class: "error-state" }, h("p", { class: "error-title" }, strings.errorTitle), h("p", { class: "error-message" }, state.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.")));
+        if (status === 'empty') {
+            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" }, strings.emptyTitle), h("p", { class: "empty-message" }, strings.emptyMessage)));
         }
-        return (h("div", { class: gridClass }, this.events.map((event) => (h("tl-event-card", { key: event.id, event: event, onTlClick: this.handleEventClick })))));
+        return (h("div", { class: gridClass }, derived.events.map((event) => (h("tl-event-card", { key: event.id, event: event, onTlClick: this.handleEventClick })))));
     }
     static get watchers() { return {
         "limit": [{
@@ -70,6 +104,9 @@ const TlEventList = class {
             }],
         "category": [{
                 "watchFiltersChange": 0
+            }],
+        "columns": [{
+                "syncProps": 0
             }]
     }; }
 };

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

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, h } from './index-CNX8hZa8.js';
-import { w as whenSDK } from './sdk-connector-CqhvfyKV.js';
-import { e as errorMessage } from './order-summary-BGekdjN9.js';
+import { r as registerInstance, c as createEvent, h } from './index-imfxp765.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { w as webQuery } from './web-query-Bdbb2lk5.js';
+import { c as createElement, l as loginCore } from './ticket-selector-BwChnHVC.js';
 
-const tlLoginCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif);color:var(--tl-foreground, #111827)}.login{display:flex;flex-direction:column;gap:var(--tl-spacing-3, 0.75rem);padding:var(--tl-spacing-6, 1.5rem);background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-lg, 0.75rem)}.title{margin:0;font-size:1.25rem;font-weight:600}.lead{margin:0;font-size:0.875rem;color:var(--tl-muted-foreground, #6b7280)}.label{font-size:0.875rem;font-weight:500}.input{padding:var(--tl-spacing-3, 0.75rem);font:inherit;font-size:0.9375rem;color:var(--tl-foreground, #111827);background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-md, 0.5rem)}.input:focus{outline:2px solid var(--tl-primary, #6366f1);outline-offset:1px}.code-input{font-family:var(--tl-font-family-mono, ui-monospace, monospace);font-size:1.25rem;letter-spacing:0.25em;text-align:center}.primary,.secondary{padding:var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);font:inherit;font-size:0.9375rem;font-weight:600;border-radius:var(--tl-radius-md, 0.5rem);cursor:pointer}.primary{color:var(--tl-primary-foreground, #ffffff);background:var(--tl-primary, #6366f1);border:none}.primary:hover:not(:disabled){opacity:0.9}.secondary{color:var(--tl-foreground, #111827);background:var(--tl-secondary, #f3f4f6);border:1px solid var(--tl-border, #e5e7eb)}.primary:disabled,.secondary:disabled,.input:disabled{opacity:0.6;cursor:not-allowed}.link{padding:0;font:inherit;font-size:0.875rem;color:var(--tl-primary, #6366f1);background:none;border:none;cursor:pointer}.link:hover{text-decoration:underline}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tl-spacing-4, 1rem)}.error{margin:0;font-size:0.8125rem;color:var(--tl-error, #ef4444)}.notice{margin:0;font-size:0.8125rem;color:var(--tl-success, #10b981)}.signed-in{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.signed-in-text{margin:0;font-size:0.875rem;overflow-wrap:anywhere}`;
+const tlLoginCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.login{display:flex;flex-direction:column;gap:var(--tl-spacing-3);padding:var(--tl-spacing-6);background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg)}.title{margin:0;font-size:1.25rem;font-weight:600}.lead{margin:0;font-size:0.875rem;color:var(--tl-muted-foreground)}.label{font-size:0.875rem;font-weight:500}.input{padding:var(--tl-spacing-3);font:inherit;font-size:0.9375rem;color:var(--tl-foreground);background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-md)}.input:focus{outline:2px solid var(--tl-primary);outline-offset:1px}.code-input{font-family:var(--tl-font-family-mono);font-size:1.25rem;letter-spacing:0.25em;text-align:center}.primary,.secondary{padding:var(--tl-spacing-3) var(--tl-spacing-4);font:inherit;font-size:0.9375rem;font-weight:600;border-radius:var(--tl-radius-md);cursor:pointer}.primary{color:var(--tl-primary-foreground);background:var(--tl-primary);border:none}.primary:hover:not(:disabled){opacity:0.9}.secondary{color:var(--tl-foreground);background:var(--tl-secondary);border:1px solid var(--tl-border)}.primary:disabled,.secondary:disabled,.input:disabled{opacity:0.6;cursor:not-allowed}.link{padding:0;font:inherit;font-size:0.875rem;color:var(--tl-primary);background:none;border:none;cursor:pointer}.link:hover{text-decoration:underline}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tl-spacing-4)}.error{margin:0;font-size:0.8125rem;color:var(--tl-error)}.notice{margin:0;font-size:0.8125rem;color:var(--tl-success)}.signed-in{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.signed-in-text{margin:0;font-size:0.875rem;overflow-wrap:anywhere}`;
 
 const TlLogin = class {
     constructor(hostRef) {
@@ -14,168 +15,101 @@ const TlLogin = class {
         this.heading = 'Sign in';
         /** Offer a "enter the code" path alongside the emailed link (default true). */
         this.allowCodeEntry = true;
-        this.phase = 'email';
-        this.email = '';
-        this.code = '';
-        this.busy = false;
-        this.error = null;
-        this.notice = null;
-        this.customer = null;
-        this.auth = null;
-        this.unsubscribes = [];
-        // A magic-link code is single-use; never exchange the URL code twice.
-        this.urlCodeUsed = false;
+        this.element = createElement(loginCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            query: webQuery,
+            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;
         this.handleEmailInput = (e) => {
-            this.email = e.target.value;
-            this.error = null;
+            this.element.actions.setEmail(e.target.value);
         };
         this.handleCodeInput = (e) => {
-            this.code = e.target.value;
-            this.error = null;
+            this.element.actions.setCode(e.target.value);
         };
         this.handleEmailSubmit = (e) => {
             e.preventDefault();
-            this.requestLink();
+            this.element.actions.requestLink();
         };
         this.handleCodeSubmit = (e) => {
             e.preventDefault();
-            this.exchange(this.code.trim());
+            this.element.actions.submitCode();
         };
     }
-    async componentWillLoad() {
-        const sdk = await whenSDK().catch(() => null);
-        if (!sdk) {
-            this.error = 'Sign-in is not available right now';
-            return;
-        }
-        this.auth = sdk.getAuthManager?.() ?? null;
-        if (!this.auth) {
-            this.error = 'Sign-in is not available with this SDK';
-            return;
-        }
-        this.syncFromSDK();
-        // The session hydrates after the SDK publishes; follow both signals.
-        this.unsubscribes.push(sdk.on('auth:changed', () => this.syncFromSDK()));
-        this.unsubscribes.push(sdk.on('session:changed', () => this.syncFromSDK()));
-        const urlCode = this.codeFromUrl();
-        if (urlCode && !this.auth.authenticated) {
-            await this.exchange(urlCode);
-        }
-    }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((off) => off());
-        this.unsubscribes = [];
+    syncProps() {
+        this.element.setProps({ heading: this.heading, allowCodeEntry: this.allowCodeEntry });
     }
-    codeFromUrl() {
-        if (typeof window === 'undefined' || !window.location?.search || this.urlCodeUsed)
-            return null;
-        const code = new URLSearchParams(window.location.search).get('code');
-        if (code)
-            this.urlCodeUsed = true;
-        return code;
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    syncFromSDK() {
-        if (!this.auth)
-            return;
-        if (this.auth.authenticated) {
-            this.customer = this.auth.customer ?? null;
-            this.phase = 'signed-in';
-        }
-        else if (this.phase === 'signed-in') {
-            this.customer = null;
-            this.phase = 'email';
-        }
-    }
-    async requestLink(resend = false) {
-        const email = this.email.trim();
-        if (!email) {
-            this.error = 'Enter your email address';
-            return;
-        }
-        if (!this.auth)
-            return;
-        this.busy = true;
-        this.error = null;
-        this.notice = null;
-        try {
-            // Always reports success; account existence is never revealed.
-            await this.auth.requestMagicLink({ email });
-            this.phase = 'sent';
-            this.notice = resend ? 'Sent again. Check your inbox.' : null;
-            this.tlMagicLinkSent.emit({ email });
-        }
-        catch (err) {
-            console.error('[tl-login] Magic-link request failed:', err);
-            this.error = errorMessage(err, 'Could not send your sign-in link');
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.busy = false;
-        }
+    /**
+     * Nothing is painted until this page's client is up.
+     *
+     * A rendering decision, and the harness's to make: Stencil waits on this
+     * promise before the first render, and without it the form would flash
+     * disabled for a microtask on every page. The core is already at work by
+     * now - `connectedCallback` mounted it - so this waits on the same
+     * `whenSDK()` it is waiting on rather than deciding anything of its own, and
+     * a page that never starts Live renders the core's "not available" state
+     * instead of hanging.
+     */
+    componentWillLoad() {
+        return whenSDK().catch(() => undefined);
     }
-    async exchange(code) {
-        if (!code) {
-            this.error = 'Enter the code from your email';
-            return;
-        }
-        if (!this.auth)
-            return;
-        const previous = this.phase;
-        this.busy = true;
-        this.error = null;
-        this.phase = 'verifying';
-        try {
-            const res = (await this.auth.exchange(code));
-            this.customer = this.auth.customer ?? res?.customer ?? null;
-            this.phase = 'signed-in';
-            this.code = '';
-            this.tlAuthChanged.emit({ customer: this.customer, authenticated: true });
-        }
-        catch (err) {
-            console.error('[tl-login] Code exchange failed:', err);
-            this.phase = previous === 'verifying' || previous === 'email' ? 'email' : 'code';
-            this.error = 'That code did not work. Check it and try again, or request a new link.';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.busy = false;
-        }
+    /**
+     * Off screen: run the mount's teardown, which drops both auth
+     * subscriptions. Not `destroy()`: Stencil calls this for a DOM move as well
+     * as a removal, and a destroyed core never mounts again.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    async signOut() {
-        if (!this.auth)
-            return;
-        this.busy = true;
-        try {
-            await this.auth.logout();
-        }
-        catch (err) {
-            console.error('[tl-login] Sign out failed:', err);
-        }
-        finally {
-            this.busy = false;
-            this.customer = null;
-            this.phase = 'email';
-            this.tlAuthChanged.emit({ customer: null, authenticated: false });
-        }
+    forward(event, detail) {
+        if (event === 'tlAuthChanged')
+            this.tlAuthChanged.emit(detail);
+        else if (event === 'tlMagicLinkSent')
+            this.tlMagicLinkSent.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     renderError() {
-        return this.error ? (h("p", { class: "error", role: "alert" }, this.error)) : null;
+        const error = this.view.state.error;
+        return error ? (h("p", { class: "error", role: "alert" }, error)) : null;
     }
     render() {
-        if (this.phase === 'signed-in') {
-            return (h("div", { class: "login signed-in" }, h("p", { class: "signed-in-text" }, "Signed in as ", h("strong", null, this.customer?.email ?? 'your account')), h("button", { type: "button", class: "secondary", disabled: this.busy, onClick: () => this.signOut() }, "Sign out")));
+        const { status, state, strings, derived } = this.view;
+        if (status === 'signed-in') {
+            return (h("div", { class: "login signed-in" }, h("p", { class: "signed-in-text" }, strings.signedInPrefix, h("strong", null, derived.signedInEmail)), h("button", { type: "button", class: "secondary", disabled: state.busy, onClick: () => this.element.actions.signOut() }, strings.signOut)));
         }
-        if (this.phase === 'verifying') {
-            return (h("div", { class: "login" }, h("h2", { class: "title" }, "Signing you in\u2026"), h("p", { class: "lead" }, "Just a moment.")));
+        if (status === 'verifying') {
+            return (h("div", { class: "login" }, h("h2", { class: "title" }, strings.verifyingTitle), h("p", { class: "lead" }, strings.verifyingLead)));
         }
-        if (this.phase === 'sent') {
-            return (h("div", { class: "login" }, h("h2", { class: "title" }, "Check your inbox"), h("p", { class: "lead" }, "We've sent a sign-in link to ", h("strong", null, this.email), ". Open it on this device to continue."), this.notice && h("p", { class: "notice" }, this.notice), this.renderError(), h("div", { class: "actions" }, h("button", { type: "button", class: "secondary", disabled: this.busy, onClick: () => this.requestLink(true) }, this.busy ? 'Sending…' : 'Resend link'), this.allowCodeEntry && (h("button", { type: "button", class: "link", onClick: () => (this.phase = 'code') }, "Enter the code instead")), h("button", { type: "button", class: "link", onClick: () => (this.phase = 'email') }, "Use a different email"))));
+        if (status === 'sent') {
+            return (h("div", { class: "login" }, h("h2", { class: "title" }, strings.sentTitle), h("p", { class: "lead" }, strings.sentLeadBefore, h("strong", null, state.email), strings.sentLeadAfter), state.notice && h("p", { class: "notice" }, state.notice), this.renderError(), h("div", { class: "actions" }, h("button", { type: "button", class: "secondary", disabled: state.busy, onClick: () => this.element.actions.requestLink(true) }, derived.resendLabel), derived.showCodeEntry && (h("button", { type: "button", class: "link", onClick: () => this.element.actions.goTo('code') }, strings.enterCodeInstead)), h("button", { type: "button", class: "link", onClick: () => this.element.actions.goTo('email') }, strings.differentEmail))));
         }
-        if (this.phase === 'code') {
-            return (h("form", { class: "login", onSubmit: this.handleCodeSubmit }, h("h2", { class: "title" }, "Enter your code"), h("p", { class: "lead" }, "Type the 6-digit code from the email we sent to ", h("strong", null, this.email), "."), h("label", { class: "label", htmlFor: "tl-login-code" }, "Code"), h("input", { id: "tl-login-code", class: "input code-input", type: "text", inputmode: "numeric", autocomplete: "one-time-code", placeholder: "123456", value: this.code, disabled: this.busy, onInput: this.handleCodeInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: this.busy }, this.busy ? 'Checking…' : 'Sign in'), h("div", { class: "actions" }, h("button", { type: "button", class: "link", onClick: () => this.requestLink(true) }, "Resend link"), h("button", { type: "button", class: "link", onClick: () => (this.phase = 'sent') }, "Back"))));
+        if (status === 'code') {
+            return (h("form", { class: "login", onSubmit: this.handleCodeSubmit }, h("h2", { class: "title" }, strings.codeTitle), h("p", { class: "lead" }, strings.codeLeadBefore, h("strong", null, state.email), strings.codeLeadAfter), h("label", { class: "label", htmlFor: "tl-login-code" }, strings.codeLabel), h("input", { id: "tl-login-code", class: "input code-input", type: "text", inputmode: "numeric", autocomplete: "one-time-code", placeholder: strings.codePlaceholder, value: state.code, disabled: state.busy, onInput: this.handleCodeInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: state.busy }, derived.codeSubmitLabel), h("div", { class: "actions" }, h("button", { type: "button", class: "link", onClick: () => this.element.actions.requestLink(true) }, strings.resendLink), h("button", { type: "button", class: "link", onClick: () => this.element.actions.goTo('sent') }, strings.back))));
         }
-        return (h("form", { class: "login", onSubmit: this.handleEmailSubmit }, h("h2", { class: "title" }, this.heading), h("p", { class: "lead" }, "Enter your email and we'll send you a secure sign-in link. No password needed."), h("label", { class: "label", htmlFor: "tl-login-email" }, "Email address"), h("input", { id: "tl-login-email", class: "input", type: "email", autocomplete: "email", placeholder: "you@example.com", required: true, value: this.email, disabled: this.busy || !this.auth, onInput: this.handleEmailInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: this.busy || !this.auth }, this.busy ? 'Sending link…' : 'Email me a sign-in link')));
+        return (h("form", { class: "login", onSubmit: this.handleEmailSubmit }, h("h2", { class: "title" }, this.heading), h("p", { class: "lead" }, strings.emailLead), h("label", { class: "label", htmlFor: "tl-login-email" }, strings.emailLabel), h("input", { id: "tl-login-email", class: "input", type: "email", autocomplete: "email", placeholder: strings.emailPlaceholder, required: true, value: state.email, disabled: derived.inputsDisabled, onInput: this.handleEmailInput }), this.renderError(), h("button", { type: "submit", class: "primary", disabled: derived.inputsDisabled }, derived.emailSubmitLabel)));
     }
+    static get watchers() { return {
+        "heading": [{
+                "syncProps": 0
+            }],
+        "allowCodeEntry": [{
+                "syncProps": 0
+            }]
+    }; }
 };
 TlLogin.style = tlLoginCss();