@ticketlayer/elements 0.3.3 → 1.0.0

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-import { errorMessage } from "../../utils/order-summary";
+import { createElement, loginCore, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+import { webQuery } from "../../utils/web-query";
 /**
  * tl-login - magic-link sign-in. The customer enters an email, we ask the SDK
  * to send a link (POST /sales/customer-auth/magic-link), then either the link
@@ -11,6 +12,13 @@ import { errorMessage } from "../../utils/order-summary";
  * States: enter email -> check your inbox (resend, enter code) -> signed in
  * (email + sign out).
  *
+ * The web harness for `loginCore`: it renders and it forwards. The phases, the
+ * exchange, the auth subscriptions and every string are in
+ * `@ticketlayer/elements-core` (AGENTS.md, TKT-11). What is left here is the
+ * Stencil surface and the two genuinely web things: the client the page
+ * published on `window.Ticketlayer`, and `window.location.search`, which is
+ * where this runtime keeps the `?code=` the core asks for.
+ *
  * Usage: <tl-login></tl-login>
  *
  * @event tlAuthChanged  - signed in or out ({ customer, authenticated })
@@ -23,167 +31,92 @@ export class TlLogin {
         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);
-        }
+    syncProps() {
+        this.element.setProps({ heading: this.heading, allowCodeEntry: this.allowCodeEntry });
     }
-    disconnectedCallback() {
-        this.unsubscribes.forEach((off) => off());
-        this.unsubscribes = [];
-    }
-    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 is() { return "tl-login"; }
     static get encapsulation() { return "shadow"; }
@@ -243,13 +176,7 @@ export class TlLogin {
     }
     static get states() {
         return {
-            "phase": {},
-            "email": {},
-            "code": {},
-            "busy": {},
-            "error": {},
-            "notice": {},
-            "customer": {}
+            "view": {}
         };
     }
     static get events() {
@@ -306,4 +233,13 @@ export class TlLogin {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "heading",
+                "methodName": "syncProps"
+            }, {
+                "propName": "allowCodeEntry",
+                "methodName": "syncProps"
+            }];
+    }
 }

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

@@ -1,13 +1,13 @@
 :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);
 }
 
 .orders {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
 }
 
 .order-list {
@@ -16,20 +16,20 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
 }
 
 .order {
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .order:hover,
 .order.expanded {
-  border-color: var(--tl-primary, #6366f1);
+  border-color: var(--tl-primary);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
@@ -37,9 +37,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   width: 100%;
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   font: inherit;
   color: inherit;
   text-align: left;
@@ -51,7 +51,7 @@
 .order-main {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-1, 0.25rem);
+  gap: var(--tl-spacing-1);
   min-width: 0;
 }
 
@@ -60,7 +60,7 @@
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .order-event {
@@ -74,15 +74,15 @@
 .order-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
   font-size: 0.8125rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .order-side {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
   flex-shrink: 0;
 }
 
@@ -95,34 +95,34 @@
   font-size: 0.75rem;
   font-weight: 500;
   border-radius: 9999px;
-  background: var(--tl-secondary, #f3f4f6);
-  color: var(--tl-secondary-foreground, #111827);
+  background: var(--tl-secondary);
+  color: var(--tl-secondary-foreground);
 }
 
 .status-success {
-  background: var(--tl-success, #10b981);
-  color: var(--tl-success-foreground, #ffffff);
+  background: var(--tl-success);
+  color: var(--tl-success-foreground);
 }
 
 .status-info {
-  background: var(--tl-primary, #6366f1);
-  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary);
+  color: var(--tl-primary-foreground);
 }
 
 .status-warning {
-  background: var(--tl-warning, #f59e0b);
-  color: var(--tl-warning-foreground, #ffffff);
+  background: var(--tl-warning);
+  color: var(--tl-warning-foreground);
 }
 
 .status-error {
-  background: var(--tl-error, #ef4444);
-  color: var(--tl-error-foreground, #ffffff);
+  background: var(--tl-error);
+  color: var(--tl-error-foreground);
 }
 
 .chevron {
   width: 1.125rem;
   height: 1.125rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
   transition: transform 0.2s ease;
 }
 
@@ -131,9 +131,9 @@
 }
 
 .order-tickets {
-  padding: 0 var(--tl-spacing-4, 1rem) var(--tl-spacing-4, 1rem);
-  border-top: 1px solid var(--tl-border, #e5e7eb);
-  padding-top: var(--tl-spacing-4, 1rem);
+  padding: 0 var(--tl-spacing-4) var(--tl-spacing-4);
+  border-top: 1px solid var(--tl-border);
+  padding-top: var(--tl-spacing-4);
 }
 
 @media (max-width: 480px) {
@@ -161,35 +161,35 @@
 
 .signin-text,
 .state-text {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .state {
-  padding: var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-8) var(--tl-spacing-4);
   text-align: center;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
 }
 
 .state.error .state-title {
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .empty-icon {
   width: 3rem;
   height: 3rem;
-  margin: 0 auto var(--tl-spacing-3, 0.75rem);
-  color: var(--tl-primary, #6366f1);
+  margin: 0 auto var(--tl-spacing-3);
+  color: var(--tl-primary);
 }
 
 /* Skeleton */
 .skeleton {
   height: 5rem;
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }