@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/collection/components/tl-event-card/tl-event-card.js

@@ -1,102 +1,68 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-import { errorMessage } from "../../utils/order-summary";
-import { toEventCardEvent } from "./event-card-adapter";
+import { createElement, eventCardCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+/**
+ * The web harness for `eventCardCore`.
+ *
+ * It renders and it forwards: which event is shown, how it is read, the status
+ * badge and the date are all in `@ticketlayer/elements-core` (AGENTS.md,
+ * TKT-11).
+ */
 export class TlEventCard {
     constructor() {
-        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();
-    }
-    async componentWillLoad() {
-        if (!this.event && this.eventId) {
-            await this.loadEvent();
-        }
+    syncProps() {
+        this.element.setProps({ event: this.event, eventId: this.eventId });
     }
-    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 is() { return "tl-event-card"; }
     static get encapsulation() { return "shadow"; }
@@ -158,9 +124,7 @@ export class TlEventCard {
     }
     static get states() {
         return {
-            "loadedEvent": {},
-            "loading": {},
-            "error": {}
+            "view": {}
         };
     }
     static get events() {
@@ -198,6 +162,9 @@ export class TlEventCard {
     }
     static get watchers() {
         return [{
+                "propName": "event",
+                "methodName": "syncProps"
+            }, {
                 "propName": "eventId",
                 "methodName": "watchEventId"
             }];

package/dist/collection/components/tl-event-list/tl-event-list.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .event-grid {
   display: grid;
-  gap: var(--tl-spacing-6, 1.5rem);
+  gap: var(--tl-spacing-6);
 }
 
 .cols-1 {
@@ -41,19 +41,19 @@
 
 /* Skeleton Loading */
 .skeleton-card {
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
 }
 
 .skeleton-image {
   aspect-ratio: 16 / 9;
-  background: var(--tl-muted, #f9fafb);
+  background: var(--tl-muted);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .skeleton-content {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -61,8 +61,8 @@
 
 .skeleton-line {
   height: 1rem;
-  background: var(--tl-muted, #f9fafb);
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  background: var(--tl-muted);
+  border-radius: var(--tl-radius-sm);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
@@ -91,44 +91,44 @@
 /* Error State */
 .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);
+  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, #ef4444);
+  color: var(--tl-error);
 }
 
 .error-message {
   margin: 0.25rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 /* Empty State */
 .empty-state {
   text-align: center;
-  padding: var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-8) var(--tl-spacing-4);
 }
 
 .empty-icon {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .empty-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
 }
 
 .empty-message {
   margin: 0.5rem 0 0;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }

package/dist/collection/components/tl-event-list/tl-event-list.js

@@ -1,5 +1,15 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
+import { createElement, eventListCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+/**
+ * tl-event-list - what the channel is selling, as a grid of tl-event-card.
+ *
+ * The web harness for `eventListCore`: it renders and it forwards. What to ask
+ * for, what came back and every string are in `@ticketlayer/elements-core`
+ * (AGENTS.md, TKT-11).
+ *
+ * Usage: <tl-event-list limit="12" columns="3"></tl-event-list>
+ */
 export class TlEventList {
     constructor() {
         /**
@@ -10,54 +20,87 @@ export class TlEventList {
          * 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 is() { return "tl-event-list"; }
     static get encapsulation() { return "shadow"; }
@@ -136,9 +179,7 @@ export class TlEventList {
     }
     static get states() {
         return {
-            "events": {},
-            "loading": {},
-            "error": {}
+            "view": {}
         };
     }
     static get events() {
@@ -166,6 +207,9 @@ export class TlEventList {
             }, {
                 "propName": "category",
                 "methodName": "watchFiltersChange"
+            }, {
+                "propName": "columns",
+                "methodName": "syncProps"
             }];
     }
 }

package/dist/collection/components/tl-login/tl-login.css

@@ -1,17 +1,17 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
-  color: var(--tl-foreground, #111827);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 .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);
+  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 {
@@ -23,7 +23,7 @@
 .lead {
   margin: 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .label {
@@ -32,22 +32,22 @@
 }
 
 .input {
-  padding: var(--tl-spacing-3, 0.75rem);
+  padding: var(--tl-spacing-3);
   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);
+  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, #6366f1);
+  outline: 2px solid var(--tl-primary);
   outline-offset: 1px;
 }
 
 .code-input {
-  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-family: var(--tl-font-family-mono);
   font-size: 1.25rem;
   letter-spacing: 0.25em;
   text-align: center;
@@ -55,17 +55,17 @@
 
 .primary,
 .secondary {
-  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-3) var(--tl-spacing-4);
   font: inherit;
   font-size: 0.9375rem;
   font-weight: 600;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   cursor: pointer;
 }
 
 .primary {
-  color: var(--tl-primary-foreground, #ffffff);
-  background: var(--tl-primary, #6366f1);
+  color: var(--tl-primary-foreground);
+  background: var(--tl-primary);
   border: none;
 }
 
@@ -74,9 +74,9 @@
 }
 
 .secondary {
-  color: var(--tl-foreground, #111827);
-  background: var(--tl-secondary, #f3f4f6);
-  border: 1px solid var(--tl-border, #e5e7eb);
+  color: var(--tl-foreground);
+  background: var(--tl-secondary);
+  border: 1px solid var(--tl-border);
 }
 
 .primary:disabled,
@@ -90,7 +90,7 @@
   padding: 0;
   font: inherit;
   font-size: 0.875rem;
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
   background: none;
   border: none;
   cursor: pointer;
@@ -104,19 +104,19 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
 }
 
 .error {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .notice {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--tl-success, #10b981);
+  color: var(--tl-success);
 }
 
 .signed-in {