@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/types/components/tl-login/tl-login.d.ts

@@ -1,10 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type SDKCustomer } from '../../utils/sdk-connector';
-export type TlLoginPhase = 'email' | 'sent' | 'code' | 'verifying' | 'signed-in';
-export interface TlAuthChanged {
-    customer: SDKCustomer | null;
-    authenticated: boolean;
-}
+import { type LoginDerived, type LoginProps, type LoginState, type TlAuthChanged as CoreTlAuthChanged, type TlLoginPhase as CoreTlLoginPhase } from '@ticketlayer/elements-core';
+export type TlLoginPhase = CoreTlLoginPhase;
+export type TlAuthChanged = CoreTlAuthChanged;
 /**
  * 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
@@ -15,6 +12,13 @@ export interface TlAuthChanged {
  * 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 })
@@ -26,13 +30,6 @@ export declare class TlLogin {
     heading: string;
     /** Offer a "enter the code" path alongside the emailed link (default true). */
     allowCodeEntry: boolean;
-    phase: TlLoginPhase;
-    email: string;
-    code: string;
-    busy: boolean;
-    error: string | null;
-    notice: string | null;
-    customer: SDKCustomer | null;
     tlAuthChanged: EventEmitter<TlAuthChanged>;
     tlMagicLinkSent: EventEmitter<{
         email: string;
@@ -40,20 +37,69 @@ export declare class TlLogin {
     tlError: EventEmitter<{
         message: string;
     }>;
-    private auth;
-    private unsubscribes;
-    private urlCodeUsed;
-    componentWillLoad(): Promise<void>;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<LoginProps, LoginState, LoginDerived, CoreTlLoginPhase, {
+        signedInPrefix: string;
+        fallbackAccount: string;
+        signOut: string;
+        verifyingTitle: string;
+        verifyingLead: string;
+        sentTitle: string;
+        sentLeadBefore: string;
+        sentLeadAfter: string;
+        sentAgain: string;
+        resendLink: string;
+        resending: string;
+        enterCodeInstead: string;
+        differentEmail: string;
+        codeTitle: string;
+        codeLeadBefore: string;
+        codeLeadAfter: string;
+        codeLabel: string;
+        codePlaceholder: string;
+        codeSubmit: string;
+        checking: string;
+        back: string;
+        emailLead: string;
+        emailLabel: string;
+        emailPlaceholder: string;
+        emailSubmit: string;
+        sendingLink: string;
+        enterEmail: string;
+        enterCode: string;
+        codeRejected: string;
+        requestFailed: string;
+        unavailable: string;
+        unsupported: string;
+    }>;
+    syncProps(): void;
+    connectedCallback(): void;
+    /**
+     * 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(): Promise<import("../../utils/sdk-connector").TicketlayerSDK | undefined>;
+    /**
+     * 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(): void;
-    private codeFromUrl;
-    private syncFromSDK;
+    private forward;
     private handleEmailInput;
     private handleCodeInput;
     private handleEmailSubmit;
     private handleCodeSubmit;
-    private requestLink;
-    private exchange;
-    private signOut;
     private renderError;
     render(): any;
 }

package/dist/types/components/tl-my-orders/tl-my-orders.d.ts

@@ -1,11 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type TlOrderData } from '../../utils/order-summary';
+import { type MyOrdersDerived, type MyOrdersProps, type MyOrdersState, type MyOrdersStatus } from '@ticketlayer/elements-core';
 /**
  * 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 })
@@ -16,24 +20,38 @@ export declare class TlMyOrders {
     emptyMessage: string;
     /** Columns for the expanded ticket grid. */
     columns: number;
-    orders: TlOrderData[];
-    authenticated: boolean;
-    loading: boolean;
-    error: string | null;
-    expandedId: string | null;
     tlOrderSelect: EventEmitter<{
         orderId: string;
     }>;
     tlError: EventEmitter<{
         message: string;
     }>;
-    private sdk;
-    private unsubscribes;
-    componentWillLoad(): Promise<void>;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<MyOrdersProps, MyOrdersState, MyOrdersDerived, MyOrdersStatus, {
+        signInTitle: string;
+        signInText: string;
+        errorTitle: string;
+        emptyTitle: string;
+        orderPrefix: string;
+        unnamedEvent: string;
+        ticketSingular: string;
+        ticketPlural: string;
+        unavailable: string;
+        noOrdersManager: string;
+        loadFailed: string;
+    }>;
+    syncProps(): void;
+    connectedCallback(): void;
+    /**
+     * 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(): void;
-    private syncAuth;
-    private load;
-    private toggle;
+    private forward;
     private renderRow;
     render(): any;
 }

package/dist/types/components/tl-occurrence-selector/tl-occurrence-selector.d.ts

@@ -1,29 +1,25 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * Occurrence data structure
+ * The web harness for `occurrenceSelectorCore`.
+ *
+ * It renders and it forwards. Which of the three views to show, where the
+ * calendar opens, which days and times are pressable, how far the month
+ * navigation may walk and every label are in `@ticketlayer/elements-core`
+ * (AGENTS.md, TKT-11, TKT-202). What is left here is the Stencil surface a host
+ * writes HTML against, the icons, and the three things that are genuinely web:
+ *
+ *  - finding the client the page published on `window.Ticketlayer`;
+ *  - measuring the element, with a `ResizeObserver`, and telling the core what
+ *    it measured - the core decides what a width means;
+ *  - writing the host's `theme` prop onto the element as `--tl-*` custom
+ *    properties. Those nine are the same nine the stylesheet reads and the core
+ *    declares, so nothing is themed here that the catalogue cannot see - a
+ *    token named only in a `.tsx` would be invisible to
+ *    `scripts/check-core-tokens.mjs`, which reads the stylesheet.
  */
-export interface TlOccurrence {
-    id: string;
-    startsAt: string;
-    endsAt?: string;
-    status?: string;
-    availableCapacity?: number;
-    soldOut?: boolean;
-}
-/**
- * Theme configuration for styling
- */
-export interface TlOccurrenceSelectorTheme {
-    primaryColor?: string;
-    primaryForeground?: string;
-    backgroundColor?: string;
-    foregroundColor?: string;
-    mutedColor?: string;
-    mutedForeground?: string;
-    borderColor?: string;
-    borderRadius?: string;
-    fontFamily?: string;
-}
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type OccurrenceSelectorDerived, type OccurrenceSelectorProps, type OccurrenceSelectorState, type OccurrenceSelectorStatus, type TlOccurrence as CoreTlOccurrence, type TlOccurrenceSelectorTheme as CoreTlOccurrenceSelectorTheme } from '@ticketlayer/elements-core';
+export type TlOccurrence = CoreTlOccurrence;
+export type TlOccurrenceSelectorTheme = CoreTlOccurrenceSelectorTheme;
 type DisplayMode = 'list' | 'slots' | 'calendar';
 type Orientation = 'horizontal' | 'vertical' | 'auto';
 export declare class TlOccurrenceSelector {
@@ -49,159 +45,75 @@ export declare class TlOccurrenceSelector {
     tlSelect: EventEmitter<{
         occurrence: TlOccurrence;
     }>;
-    /**
-     * Loading state
-     */
-    loading: boolean;
-    /**
-     * Error message
-     */
-    error: string | null;
-    /**
-     * Fetched occurrences
-     */
-    occurrences: TlOccurrence[];
-    /**
-     * Current month being displayed in calendar view
-     */
-    currentMonth: Date;
-    /**
-     * Currently selected date in calendar view
-     */
-    selectedDate: Date | null;
-    /**
-     * Computed display mode based on occurrences
-     */
-    computedDisplayMode: DisplayMode;
-    /**
-     * Container width for responsive layout
-     */
-    containerWidth: number;
+    private element;
+    private unsubscribe?;
+    private teardown?;
     private containerRef?;
     private resizeObserver?;
-    componentWillLoad(): Promise<void>;
-    /**
-     * Wait for SDK to be ready, then fetch occurrences
-     */
-    private waitForSDKAndFetch;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    onEventIdChange(): Promise<void>;
-    /**
-     * Fetch occurrences from the SDK
-     */
-    private fetchOccurrences;
-    /**
-     * Compute the display mode based on occurrence count and date distribution
-     */
-    private computeDisplayMode;
-    /**
-     * Compute the initial date selection for calendar/slots views
-     */
-    private computeInitialSelection;
-    /**
-     * Get a map of dates to occurrences
-     */
-    private getDatesWithOccurrences;
-    /**
-     * Get the first and last occurrence dates
-     */
-    private getDateRange;
-    /**
-     * Check if all occurrences fit in one week (Monday-Sunday)
-     */
-    private isSingleWeek;
-    /**
-     * Check if all occurrences are in the same month
-     */
-    private isSingleMonth;
-    /**
-     * Check if we should use horizontal layout
-     */
-    private isHorizontalLayout;
-    /**
-     * Format a date for display
-     */
-    private formatDate;
-    /**
-     * Format a time for display
-     */
-    private formatTime;
-    /**
-     * Format a full date and time for list view
-     */
-    private formatDateTime;
-    /**
-     * Handle occurrence selection
-     */
-    private handleSelect;
-    /**
-     * Handle date selection in calendar view
-     */
-    private handleDateSelect;
-    /**
-     * Navigate to previous month
-     */
-    private handlePrevMonth;
-    /**
-     * Navigate to next month
-     */
-    private handleNextMonth;
-    /**
-     * Check if prev month button should be disabled
-     */
-    private isPrevMonthDisabled;
-    /**
-     * Check if next month button should be disabled
-     */
-    private isNextMonthDisabled;
-    /**
-     * Get calendar grid days for the current month
-     */
-    private getCalendarDays;
-    /**
-     * Check if a date has occurrences
-     */
-    private hasOccurrencesOnDate;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<OccurrenceSelectorProps, OccurrenceSelectorState, OccurrenceSelectorDerived, OccurrenceSelectorStatus, {
+        noEventId: string;
+        noClient: string;
+        notFound: string;
+        loadFailed: string;
+        empty: string;
+        retry: string;
+        soldOut: string;
+        available: string;
+        selectADate: string;
+        previousMonth: string;
+        nextMonth: string;
+        weekdayMon: string;
+        weekdayTue: string;
+        weekdayWed: string;
+        weekdayThu: string;
+        weekdayFri: string;
+        weekdaySat: string;
+        weekdaySun: string;
+    }>;
     /**
-     * Check if all occurrences on a date are sold out
+     * A new event is a new subject: the element is torn down and mounted again,
+     * so whatever the core set up for the old one is undone before anything is
+     * set up for the new one.
      */
-    private isDateSoldOut;
+    watchSubject(): void;
+    syncProps(): void;
     /**
-     * Get occurrences for the selected date
+     * On screen: subscribe to the view, then put the core to work.
+     *
+     * `connectedCallback` and not `componentWillLoad` because this runs again
+     * when the element is moved in the DOM, and that is exactly when a mount and
+     * its teardown have to pair up.
      */
-    private getSelectedDateOccurrences;
+    connectedCallback(): void;
+    /** Measuring the element is the runtime's job; what a width means is not. */
+    componentDidLoad(): void;
     /**
-     * Get CSS custom properties from theme
+     * Off screen: run the mount's teardown, and nothing more. Not `destroy()`:
+     * Stencil calls this for a DOM move as well as a removal, and a destroyed
+     * core never mounts again.
      */
-    private getThemeStyles;
+    disconnectedCallback(): void;
+    private forward;
     /**
-     * Render the list view (≤5 occurrences)
+     * The host's theme, as custom properties over the ones the theme package
+     * ships. Web only: a custom property is not a fact every runtime has, so the
+     * core declares the prop and the harness is what acts on it.
      */
+    private themeStyles;
+    /** The availability mark a row carries, in the list and the slots panel. */
+    private renderRowStatus;
+    /** The list view (five occurrences or fewer). */
     private renderListView;
-    /**
-     * Render the time slots view (>5 occurrences, same day)
-     */
+    /** The time slots view (more than five, all on one date). */
     private renderSlotsView;
-    /**
-     * Render the calendar header
-     */
     private renderCalendarHeader;
-    /**
-     * Render the calendar grid
-     */
+    private renderCalendarDay;
     private renderCalendarGrid;
-    /**
-     * Render the selected date's time slots
-     */
+    /** The picked date's times, beside or below the calendar. */
     private renderSelectedDateSlots;
-    /**
-     * Render the calendar view with slots panel
-     */
     private renderCalendarView;
-    /**
-     * Render skeleton loading state
-     */
+    /** The skeleton, which is a calendar because that is the common shape. */
     private renderSkeleton;
     render(): any;
 }

package/dist/types/components/tl-order-confirmation/tl-order-confirmation.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type TlOrderData, type TlResolvedOccurrence } from '../../utils/order-summary';
+import { type OrderConfirmationDerived, type OrderConfirmationProps, type OrderConfirmationState, type OrderConfirmationStatus, type TlOrderData } from '@ticketlayer/elements-core';
 /**
  * tl-order-confirmation - the "thank you" page block: order reference,
  * customer email, event and date, ticket lines, totals, then the tickets
@@ -12,6 +12,13 @@ import { type TlOrderData, type TlResolvedOccurrence } from '../../utils/order-s
  *  3. the SDK's `checkout:completed` event, for a page that mounts this before
  *     the customer pays
  *
+ * The web harness for `orderConfirmationCore`: it renders and it forwards. All
+ * three of those routes, the money rows, the event lookup 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 parameters the core asks for.
+ *
  * Usage: <tl-order-confirmation order-id="ord_xxx"></tl-order-confirmation>
  *
  * @event tlOrderLoaded - the order was loaded
@@ -26,28 +33,54 @@ export declare class TlOrderConfirmation {
     showTickets: boolean;
     /** Columns for the ticket grid. */
     columns: number;
-    order: TlOrderData | null;
-    resolvedOrderId: string | null;
-    loading: boolean;
-    error: string | null;
-    paymentFailed: boolean;
-    occurrence: TlResolvedOccurrence | null;
-    signedInCustomer: unknown | null;
     tlOrderLoaded: EventEmitter<{
         order: TlOrderData;
     }>;
     tlError: EventEmitter<{
         message: string;
     }>;
+    private element;
     private unsubscribe?;
-    watchOrderId(next?: string): void;
-    componentWillLoad(): Promise<void>;
-    componentDidLoad(): void;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<OrderConfirmationProps, OrderConfirmationState, OrderConfirmationDerived, OrderConfirmationStatus, {
+        paymentFailedTitle: string;
+        paymentFailedLead: string;
+        title: string;
+        leadPrefix: string;
+        leadSuffix: string;
+        leadGeneric: string;
+        errorPrefix: string;
+        rowReference: string;
+        rowEmail: string;
+        rowEvent: string;
+        rowDate: string;
+        subtotalRow: string;
+        taxRow: string;
+        discountRow: string;
+        totalRow: string;
+        ticketsTitle: string;
+        ticketsHint: string;
+        noOrdersManager: string;
+        notFound: string;
+        loadFailed: string;
+    }>;
+    /**
+     * A new order id is a new subject, and the core resolves it again the way
+     * the mount did - the prop first, the link second. Not a remount: the
+     * `checkout:completed` subscription belongs to the element rather than to
+     * the order it is showing.
+     */
+    watchOrderId(): void;
+    syncProps(): void;
+    connectedCallback(): void;
+    /**
+     * Off screen: run the mount's teardown, which drops the
+     * `checkout:completed` subscription. Not `destroy()`: Stencil calls this for
+     * a DOM move as well as a removal, and a destroyed core never mounts again.
+     */
     disconnectedCallback(): void;
-    private urlParams;
-    private orderIdFromUrl;
-    private load;
-    private resolveEvent;
+    private forward;
     private renderRows;
     private renderTotals;
     render(): any;

package/dist/types/components/tl-order-tickets/tl-order-tickets.d.ts

@@ -1,4 +1,4 @@
-import type { TlTicketData } from '../tl-ticket/tl-ticket';
+import { type OrderTicketsDerived, type OrderTicketsProps, type OrderTicketsState, type OrderTicketsStatus } from '@ticketlayer/elements-core';
 /**
  * tl-order-tickets - renders all the tickets for an order as scannable QR
  * cards with PDF download. Fetches the order through the SDK (order-access
@@ -6,44 +6,42 @@ import type { TlTicketData } from '../tl-ticket/tl-ticket';
  *
  * Usage: <tl-order-tickets order-id="ord_xxx"></tl-order-tickets>
  *
- * On an empty result it waits rather than concluding there is nothing.
- *
- * Tickets are issued asynchronously: the payment confirms, the order is
- * marked paid, and entitlement issuance follows a moment later. A confirmation
- * page therefore renders BEFORE the passes exist - reliably, not occasionally.
- * The component used to answer that with "No tickets for this order yet",
- * which is true and reads as "something went wrong" to someone who has just
- * been charged. Refreshing showed them, so the only thing missing was the
- * waiting.
- *
- * So: an empty order is treated as issuance in flight and polled, with the
- * gaps widening, for about a minute. Then it stops and says the tickets are
- * coming by email, because at that point something probably is wrong and a
- * page that polls forever is worse than one that admits it.
+ * On an empty result it waits rather than concluding there is nothing: tickets
+ * are issued a moment after the order is paid, so a confirmation page renders
+ * before the passes exist. The waiting, the widening schedule behind it and
+ * the point at which it gives up are all in `orderTicketsCore`
+ * (`@ticketlayer/elements-core`, AGENTS.md, TKT-11), along with every string.
+ * This harness renders and forwards, and the one thing it owns is pairing
+ * `mount()` with its teardown - which is what stops the polling when the
+ * element goes off screen.
  */
 export declare class TlOrderTickets {
     /** The order whose tickets to show. */
     orderId: string;
     /** Columns in the grid (default 2). */
     columns: number;
-    tickets: TlTicketData[];
-    loading: boolean;
-    error: string | null;
-    /** The order loaded, but has no tickets yet and we are still waiting. */
-    issuing: boolean;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<OrderTicketsProps, OrderTicketsState, OrderTicketsDerived, OrderTicketsStatus, {
+        loading: string;
+        preparing: string;
+        delayed: string;
+        notAvailable: string;
+        loadFailed: string;
+    }>;
+    /** A different order: forget this one and read again, from the top. */
+    watchOrder(): void;
+    syncProps(): void;
+    connectedCallback(): void;
     /**
-     * Gaps between polls, in milliseconds. Front-loaded because issuance
-     * usually lands in the first few seconds, then widening so a genuinely
-     * stuck order is not hammered. Sums to roughly one minute.
+     * Off screen: run the mount's teardown, which is what stops the polling.
+     * Not `destroy()`: Stencil calls this for a DOM move as well as a removal,
+     * and a destroyed core never mounts again.
      */
-    private static readonly POLL_DELAYS_MS;
-    private timer?;
-    private poll;
-    watchOrder(): void;
-    componentWillLoad(): Promise<void>;
     disconnectedCallback(): void;
-    private reset;
-    private stopPolling;
-    private load;
+    /** The core declares no events, so nothing ever reaches here. */
+    private forward;
     render(): any;
 }