@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/collection/components/tl-my-orders/tl-my-orders.js

@@ -1,12 +1,16 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-import { errorMessage, formatDate, formatPrice, isAuthError, orderEventName, statusLabel, statusTone, ticketCount, } from "../../utils/order-summary";
+import { createElement, myOrdersCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 /**
  * tl-my-orders - the signed-in customer's orders (GET /sales/my-orders through
  * the SDK): event, date, ticket count, total and status per row. Clicking a
  * row expands it to show the order's tickets (tl-order-tickets). Shows
  * tl-login inline when nobody is signed in.
  *
+ * The web harness for `myOrdersCore`: it renders and it forwards. Who is
+ * signed in, the two auth subscriptions that keep that current, the listing
+ * and every string are in `@ticketlayer/elements-core` (AGENTS.md, TKT-11).
+ *
  * Usage: <tl-my-orders></tl-my-orders>
  *
  * @event tlOrderSelect - a row was expanded ({ orderId })
@@ -18,107 +22,60 @@ export class TlMyOrders {
         this.emptyMessage = "When you buy tickets they'll show up here, ready to view and download.";
         /** Columns for the expanded ticket grid. */
         this.columns = 2;
-        this.orders = [];
-        this.authenticated = false;
-        this.loading = true;
-        this.error = null;
-        this.expandedId = null;
-        this.sdk = null;
-        this.unsubscribes = [];
+        this.element = createElement(myOrdersCore, {
+            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;
     }
-    async componentWillLoad() {
-        this.sdk = await whenSDK().catch(() => null);
-        if (!this.sdk) {
-            this.loading = false;
-            this.error = 'Orders are not available right now';
-            return;
-        }
-        // Older SDKs have no auth accessor: try the list and let a 401 decide.
-        const auth = this.sdk.getAuthManager?.();
-        this.authenticated = auth ? auth.authenticated : true;
-        // The session hydrates after the SDK publishes; follow both signals.
-        this.unsubscribes.push(this.sdk.on('auth:changed', () => this.syncAuth()));
-        this.unsubscribes.push(this.sdk.on('session:changed', () => this.syncAuth()));
-        if (this.authenticated) {
-            await this.load();
-        }
-        else {
-            this.loading = false;
-        }
+    syncProps() {
+        this.element.setProps({ emptyMessage: this.emptyMessage, columns: this.columns });
     }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((off) => off());
-        this.unsubscribes = [];
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    syncAuth() {
-        const auth = this.sdk?.getAuthManager?.();
-        if (!auth)
-            return;
-        const was = this.authenticated;
-        this.authenticated = auth.authenticated;
-        if (this.authenticated && !was) {
-            this.load();
-        }
-        else if (!this.authenticated && was) {
-            this.orders = [];
-            this.expandedId = null;
-        }
-    }
-    async load() {
-        if (!this.sdk)
-            return;
-        try {
-            this.loading = true;
-            this.error = null;
-            const orders = this.sdk.getOrdersManager?.();
-            if (!orders)
-                throw new Error('Orders are not available');
-            const list = (await orders.mine());
-            this.orders = list ?? [];
-            this.authenticated = true;
-        }
-        catch (err) {
-            if (isAuthError(err)) {
-                // Not signed in: fall through to the inline login rather than an error.
-                this.authenticated = false;
-                this.orders = [];
-            }
-            else {
-                console.error('[tl-my-orders] Failed to load orders:', err);
-                this.error = errorMessage(err, 'Failed to load your orders');
-                this.tlError.emit({ message: this.error });
-            }
-        }
-        finally {
-            this.loading = 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;
     }
-    toggle(orderId) {
-        const opening = this.expandedId !== orderId;
-        this.expandedId = opening ? orderId : null;
-        if (opening)
-            this.tlOrderSelect.emit({ orderId });
+    forward(event, detail) {
+        if (event === 'tlOrderSelect')
+            this.tlOrderSelect.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
-    renderRow(order) {
-        const expanded = this.expandedId === order.id;
-        const count = ticketCount(order);
-        const tone = statusTone(order.status);
-        return (h("li", { class: { order: true, expanded }, key: order.id }, h("button", { type: "button", class: "order-row", "aria-expanded": expanded ? 'true' : 'false', onClick: () => this.toggle(order.id) }, h("span", { class: "order-main" }, h("span", { class: "order-number" }, "Order ", order.orderNumber), h("span", { class: "order-event" }, orderEventName(order) ?? 'Order'), h("span", { class: "order-meta" }, order.createdAt && h("span", null, formatDate(order.createdAt)), h("span", null, count, " ticket", count === 1 ? '' : 's'))), h("span", { class: "order-side" }, h("span", { class: "order-total" }, formatPrice(order.total, order.currency)), h("span", { class: `status status-${tone}` }, statusLabel(order.status)), h("svg", { class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 18l6-6-6-6" })))), expanded && (h("div", { class: "order-tickets" }, h("tl-order-tickets", { orderId: order.id, columns: this.columns })))));
+    renderRow(row) {
+        return (h("li", { class: { order: true, expanded: row.expanded }, key: row.id }, h("button", { type: "button", class: "order-row", "aria-expanded": row.expanded ? 'true' : 'false', onClick: () => this.element.actions.toggle(row.id) }, h("span", { class: "order-main" }, h("span", { class: "order-number" }, row.numberLabel), h("span", { class: "order-event" }, row.eventName), h("span", { class: "order-meta" }, row.dateLabel && h("span", null, row.dateLabel), h("span", null, row.countLabel))), h("span", { class: "order-side" }, h("span", { class: "order-total" }, row.totalLabel), h("span", { class: `status status-${row.statusTone}` }, row.statusLabel), h("svg", { class: "chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 18l6-6-6-6" })))), row.expanded && (h("div", { class: "order-tickets" }, h("tl-order-tickets", { orderId: row.id, columns: this.columns })))));
     }
     render() {
-        if (this.loading) {
+        const { status, strings, state, derived } = this.view;
+        if (status === 'loading') {
             return (h("div", { class: "orders" }, [0, 1, 2].map((i) => (h("div", { class: "skeleton", key: i })))));
         }
-        if (!this.authenticated) {
-            return (h("div", { class: "orders" }, h("div", { class: "signin" }, h("p", { class: "signin-title" }, "Sign in to see your orders"), h("p", { class: "signin-text" }, "Your tickets and order history live in your account.")), h("tl-login", null)));
+        if (status === 'signed-out') {
+            return (h("div", { class: "orders" }, h("div", { class: "signin" }, h("p", { class: "signin-title" }, strings.signInTitle), h("p", { class: "signin-text" }, strings.signInText)), h("tl-login", null)));
         }
-        if (this.error) {
-            return (h("div", { class: "orders" }, h("div", { class: "state error" }, h("p", { class: "state-title" }, "Could not load your orders"), h("p", { class: "state-text" }, this.error))));
+        if (status === 'error') {
+            return (h("div", { class: "orders" }, h("div", { class: "state error" }, h("p", { class: "state-title" }, strings.errorTitle), h("p", { class: "state-text" }, state.error))));
         }
-        if (this.orders.length === 0) {
-            return (h("div", { class: "orders" }, h("div", { class: "state empty" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M13 5v2M13 17v2M13 11v2" })), h("p", { class: "state-title" }, "No orders yet"), h("p", { class: "state-text" }, this.emptyMessage))));
+        if (status === 'empty') {
+            return (h("div", { class: "orders" }, h("div", { class: "state empty" }, h("svg", { class: "empty-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", d: "M13 5v2M13 17v2M13 11v2" })), h("p", { class: "state-title" }, strings.emptyTitle), h("p", { class: "state-text" }, this.emptyMessage))));
         }
-        return (h("div", { class: "orders" }, h("ul", { class: "order-list" }, this.orders.map((o) => this.renderRow(o)))));
+        return (h("div", { class: "orders" }, h("ul", { class: "order-list" }, derived.rows.map((row) => this.renderRow(row)))));
     }
     static get is() { return "tl-my-orders"; }
     static get encapsulation() { return "shadow"; }
@@ -178,11 +135,7 @@ export class TlMyOrders {
     }
     static get states() {
         return {
-            "orders": {},
-            "authenticated": {},
-            "loading": {},
-            "error": {},
-            "expandedId": {}
+            "view": {}
         };
     }
     static get events() {
@@ -218,4 +171,13 @@ export class TlMyOrders {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "emptyMessage",
+                "methodName": "syncProps"
+            }, {
+                "propName": "columns",
+                "methodName": "syncProps"
+            }];
+    }
 }

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

@@ -1,26 +1,15 @@
 /**
  * TlOccurrenceSelector Styles
- * 
- * CSS custom properties for theming:
- * --tl-primary: Primary brand colour (default: #e64b12)
- * --tl-primary-foreground: Text on primary (default: #ffffff)
- * --tl-background: Background colour (default: #ffffff)
- * --tl-foreground: Main text colour (default: #0f172a)
- * --tl-muted: Muted background (default: #f1f5f9)
- * --tl-muted-foreground: Muted text (default: #64748b)
- * --tl-border: Border colour (default: #e2e8f0)
- * --tl-radius: Border radius (default: 0.5rem)
- * --tl-font-family: Font family (default: system-ui)
+ *
+ * The --tl-* tokens this reads, and their defaults, are declared once in
+ * @ticketlayer/theme (packages/theme/tokens.json) and shipped in the global
+ * stylesheet. There is nothing to repeat here.
  */
 
 :host {
-  /* Don't redefine CSS variables - let them inherit from parent document */
-  /* Only define local fallback for radius mapping */
-  --tl-radius: var(--tl-radius-md, 0.5rem);
-
   display: block;
-  font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
-  color: var(--tl-foreground, #0f172a);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 * {
@@ -37,7 +26,7 @@
 .no-occurrences {
   text-align: center;
   padding: 3rem 1rem;
-  color: var(--tl-muted-foreground, #64748b);
+  color: var(--tl-muted-foreground);
 }
 
 /* =========================================================================
@@ -56,8 +45,8 @@
   align-items: flex-start;
   width: 100%;
   padding: 1rem 1.25rem;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   text-align: left;
   cursor: pointer;
@@ -66,8 +55,8 @@
 }
 
 .occurrence-item:hover:not(:disabled) {
-  border-color: var(--tl-primary, #e64b12);
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+  border-color: var(--tl-primary);
+  background: color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background));
 }
 
 .occurrence-item:focus-visible {
@@ -78,12 +67,12 @@
 .occurrence-item:disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .occurrence-item.sold-out {
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .occurrence-info {
@@ -93,7 +82,7 @@
 .occurrence-date {
   font-weight: 600;
   font-size: 0.9375rem;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   margin-bottom: 0.25rem;
 }
 
@@ -120,7 +109,7 @@
 
 .status-arrow {
   font-size: 1.25rem;
-  color: var(--tl-primary, #e64b12);
+  color: var(--tl-primary);
 }
 
 /* =========================================================================
@@ -136,7 +125,7 @@
 .slots-date-header {
   font-size: 1.125rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   padding-bottom: 0.5rem;
   border-bottom: 1px solid var(--tl-border);
 }
@@ -153,8 +142,8 @@
   align-items: center;
   justify-content: center;
   padding: 0.75rem 0.5rem;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   cursor: pointer;
   transition: all 0.15s ease;
@@ -163,8 +152,8 @@
 }
 
 .time-slot:hover:not(:disabled) {
-  border-color: var(--tl-primary, #e64b12);
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+  border-color: var(--tl-primary);
+  background: color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background));
 }
 
 .time-slot:focus-visible {
@@ -175,18 +164,18 @@
 .time-slot:disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .time-slot.sold-out {
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .slot-time {
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
 }
 
 .slot-sold-out {
@@ -230,7 +219,7 @@
 }
 
 .calendar-panel {
-  border: 1px solid var(--tl-border, #e2e8f0);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   padding: 1rem;
 }
@@ -246,7 +235,7 @@
 .month-label {
   font-size: 1rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   flex: 1;
 }
 
@@ -262,16 +251,16 @@
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   cursor: pointer;
   transition: all 0.15s ease;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
 }
 
 .nav-button:hover:not(:disabled) {
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .nav-button:disabled {
@@ -309,7 +298,7 @@
   justify-content: center;
   aspect-ratio: 1;
   padding: 0.1875rem;
-  background: var(--tl-background, #ffffff);
+  background: var(--tl-background);
   border: 1px solid transparent;
   border-radius: var(--tl-radius);
   cursor: default;
@@ -317,7 +306,7 @@
   font-family: inherit;
   font-size: 0.9375rem;
   font-weight: 500;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
 }
 
 .calendar-day.other-month {
@@ -327,35 +316,35 @@
 
 .calendar-day.has-occurrences {
   cursor: pointer;
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 10%, var(--tl-background, #ffffff));
+  background: color-mix(in srgb, var(--tl-primary) 10%, var(--tl-background));
   border-color: transparent;
   font-weight: 600;
-  color: var(--tl-primary, #e64b12);
+  color: var(--tl-primary);
 }
 
 .calendar-day.has-occurrences:hover {
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 18%, var(--tl-background, #ffffff));
+  background: color-mix(in srgb, var(--tl-primary) 18%, var(--tl-background));
   border-color: transparent;
 }
 
 .calendar-day.has-occurrences.sold-out {
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
   border-color: transparent;
 }
 
 .calendar-day.has-occurrences.sold-out:hover {
-  background: color-mix(in srgb, var(--tl-muted, #f1f5f9) 80%, var(--tl-background, #ffffff));
+  background: color-mix(in srgb, var(--tl-muted) 80%, var(--tl-background));
   border-color: transparent;
 }
 
 .calendar-day.selected {
-  background: var(--tl-primary, #e64b12);
-  border-color: var(--tl-primary, #e64b12);
-  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary);
+  border-color: var(--tl-primary);
+  color: var(--tl-primary-foreground);
 }
 
 .calendar-day.selected:hover {
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black);
+  background: color-mix(in srgb, var(--tl-primary) 90%, black);
 }
 
 .calendar-day.selected .occurrence-dot {
@@ -394,7 +383,7 @@
   align-items: center;
   justify-content: center;
   color: var(--tl-muted-foreground);
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
   border-radius: var(--tl-radius);
   padding: 2rem 1rem;
   text-align: center;
@@ -405,7 +394,7 @@
 .selected-date-header {
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   padding-bottom: 0.625rem;
   margin-bottom: 0.625rem;
 }
@@ -422,8 +411,8 @@
   justify-content: space-between;
   width: 100%;
   padding: 0.625rem 0.875rem;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   text-align: left;
   cursor: pointer;
@@ -432,8 +421,8 @@
 }
 
 .time-slot-item:hover:not(:disabled) {
-  border-color: var(--tl-primary, #e64b12);
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+  border-color: var(--tl-primary);
+  background: color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background));
 }
 
 .time-slot-item:focus-visible {
@@ -444,12 +433,12 @@
 .time-slot-item:disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .time-slot-item.sold-out {
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .time-slot-item .slot-time {
@@ -538,7 +527,7 @@
 }
 
 .skeleton {
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
   border-radius: var(--tl-radius);
   animation: skeleton-pulse 1.5s ease-in-out infinite;
 }
@@ -557,7 +546,7 @@
 
 /* Skeleton for calendar view */
 .skeleton-calendar {
-  border: 1px solid var(--tl-border, #e2e8f0);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   padding: 1rem;
   min-height: 350px;
@@ -629,7 +618,7 @@
 }
 
 .error-message {
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   font-size: 0.9375rem;
   max-width: 400px;
 }
@@ -637,8 +626,8 @@
 .retry-button {
   margin-top: 0.5rem;
   padding: 0.625rem 1.25rem;
-  background: var(--tl-primary, #e64b12);
-  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary);
+  color: var(--tl-primary-foreground);
   border: none;
   border-radius: var(--tl-radius);
   font-family: inherit;
@@ -649,7 +638,7 @@
 }
 
 .retry-button:hover {
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black);
+  background: color-mix(in srgb, var(--tl-primary) 90%, black);
 }
 
 .retry-button:focus-visible {