@ticketlayer/elements-core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ticketlayer Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# @ticketlayer/elements-core
+
+The headless cores the Ticketlayer Elements render.
+
+One core per element. A core is plain TypeScript: props, a state store,
+actions, derived values, a status, the copy it renders, the
+`@ticketlayer/theme` tokens its harnesses use, the `tl*` events it emits, the
+client methods it calls and the runtimes it is meant for. No DOM, no React, no
+network, and no client of its own: a core is handed one.
+
+A harness renders a core and forwards its events, and decides nothing.
+`@ticketlayer/elements` is the web harness, built with Stencil; a React Native
+harness will render the same cores in an app. That split is the platform plan's
+section 2.7 and `AGENTS.md` at the root of this repository.
+
+## The shape
+
+```ts
+import { defineElement } from '@ticketlayer/elements-core';
+
+export const exampleCore = defineElement({
+  tag: 'tl-example',
+  docs: 'What a host gets from putting this on a page.',
+  category: 'purchase',
+  runtimes: ['web', 'native'],
+  tokens: ['primary', 'spacing-3'],
+  sdkMethods: ['events.getTicketTypes'],
+  props: { eventId: { type: 'string', attr: 'event-id', required: true, docs: 'Event ID' } },
+  events: { tlPicked: { detail: '{ id: string; }', docs: 'Emitted when one is picked' } },
+  strings: { empty: 'Nothing on sale' },
+  statuses: ['loading', 'error', 'ready'],
+
+  state: () => ({ loading: true, error: null, items: [] }),
+  status: ({ state }) => (state.loading ? 'loading' : state.error ? 'error' : 'ready'),
+  derive: ({ state, strings }) => ({ caption: state.items.length ? '' : strings.empty }),
+  actions: (ctx) => ({
+    async load() {
+      const items = await ctx.client().getEventsManager().getTicketTypes(ctx.props.eventId, '');
+      ctx.setState({ items, loading: false });
+    },
+  }),
+});
+```
+
+A harness instantiates it, renders `view`, and forwards:
+
+```ts
+const element = createElement(exampleCore, {
+  client: () => getSDK(),
+  emit: (event, detail) => this.forward(event, detail),
+});
+element.subscribe((view) => (this.view = view));
+```
+
+`view` is `{ status, props, state, strings, derived }`, recomputed after every
+change. The first three lines of a harness's render are a switch on `status`.
+
+## Tokens
+
+`tokens` names `@ticketlayer/theme` tokens by their canonical name: `primary`,
+not `--tl-primary`, not the `color-primary` alias, and never a value. The type
+is generated from `packages/theme/tokens.json`, so a token renamed there stops
+every core that named it compiling, and
+`packages/elements/scripts/check-core-tokens.mjs` fails a web harness whose
+stylesheet reaches for a token its core did not declare, or declares one the
+stylesheet never uses.
+
+## The manifest and the catalogue
+
+`manifestOf(core)` projects the declarative half of a core to JSON.
+`packages/elements/scripts/build-catalogue.mjs` emits
+`elements.catalogue.json` from those manifests, so what the docs site, the CLI
+and a native host read is a projection of the object that runs rather than a
+second copy kept by hand. An element that has a core has no entry in the
+hand-kept `packages/elements/src/catalogue.manifest.json`; the emitter refuses a
+tag that is in both, and fails when a core claims the `web` runtime and no
+Stencil component answers to its tag, or when the props and events a core
+declares are not the ones its harness built.
+
+## Build and test
+
+```bash
+pnpm --filter @ticketlayer/elements-core build   # tsc twice: dist/esm and dist/cjs
+pnpm --filter @ticketlayer/elements-core test    # builds, then node --test test/*.test.mjs
+```
+
+Both module formats are published. Stencil's rollup build and a native bundler
+take the ESM; the Jest run behind `stencil test --spec` and the catalogue
+emitter take the CommonJS, because Jest will not load ESM from `node_modules`.
+
+## What is here today
+
+`tl-ticket-selector` is the reference element: the first split, and the one the
+shape was proved against (TKT-68). The other seventeen still hold their
+behaviour in their Stencil component and their facts in the hand-kept manifest;
+they move across one at a time (TKT-11).

package/dist/cjs/client.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * The client a core is handed.
+ *
+ * Cores receive a client and never construct one (TKT-11), and they never
+ * import `@ticketlayer/live`: this is the structural shape of the connector a
+ * host publishes, narrowed to what the cores in this package actually call.
+ * `@ticketlayer/elements`' `TicketlayerSDK` satisfies it, so a Stencil harness
+ * passes `getSDK()` straight through; a React Native harness will pass the
+ * connector `@ticketlayer/live/native` gives it.
+ *
+ * Everything the managers return is `unknown`. A core narrows what it reads and
+ * tolerates what it does not, because the same core runs against whatever
+ * client version the host installed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/cores/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ELEMENT_CORES = exports.ticketSelectorCore = void 0;
+const ticket_selector_js_1 = require("./ticket-selector.js");
+var ticket_selector_js_2 = require("./ticket-selector.js");
+Object.defineProperty(exports, "ticketSelectorCore", { enumerable: true, get: function () { return ticket_selector_js_2.ticketSelectorCore; } });
+/** Every core, by tag. */
+exports.ELEMENT_CORES = {
+    [ticket_selector_js_1.ticketSelectorCore.tag]: ticket_selector_js_1.ticketSelectorCore,
+};

package/dist/cjs/cores/ticket-selector.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ticketSelectorCore = void 0;
+/**
+ * `tl-ticket-selector`: the reference core.
+ *
+ * This is the whole of what the element does. The Stencil harness in
+ * `packages/elements/src/components/tl-ticket-selector/` renders `view` and
+ * forwards the three `tl*` events; it decides nothing, holds no copy and does
+ * no arithmetic. A React Native harness will render the same view.
+ *
+ * Behaviour is the behaviour the Stencil component had before the split, to
+ * the letter: the same quantity clamping, the same reset after a successful
+ * add, the same three second success message, the same button text, and the
+ * same rule that no fee row is shown until the surface quotes a fee. The one
+ * thing that did not come across is the `console.log` tracing, which a library
+ * should not do for its host.
+ */
+const define_js_1 = require("../define.js");
+const money_js_1 = require("../money.js");
+const STRINGS = {
+    selectTickets: 'Select Tickets',
+    adding: 'Adding...',
+    added: 'Added to cart!',
+    limited: 'Limited',
+    soldOut: 'Sold Out',
+    ticketsRow: 'Tickets',
+    totalRow: 'Total',
+    decrease: 'Decrease quantity',
+    increase: 'Increase quantity',
+    loadFailed: 'Failed to load tickets',
+    addFailed: 'Failed to add to cart',
+    noClient: 'SDK not initialized.',
+};
+/** How long the "Added to cart!" message stays up. */
+const SUCCESS_MS = 3000;
+const totalsOf = (ctx) => (0, money_js_1.selectionTotals)(ctx.state.ticketTypes.map((tt) => ({ price: tt.price, quantity: ctx.state.quantities[tt.id] || 0 })), ctx.state.feeQuote);
+const totalItemsOf = (state) => Object.values(state.quantities).reduce((sum, qty) => sum + qty, 0);
+exports.ticketSelectorCore = (0, define_js_1.defineElement)({
+    tag: 'tl-ticket-selector',
+    docs: 'Pick quantities of the ticket types on sale for one occurrence, and add them to the cart.',
+    category: 'purchase',
+    runtimes: ['web', 'native'],
+    tokens: [
+        'background',
+        'border',
+        'border-hover',
+        'error',
+        'error-bg',
+        'font-family',
+        'foreground',
+        'muted',
+        'muted-foreground',
+        'primary',
+        'primary-foreground',
+        'radius-md',
+        'radius-sm',
+        'spacing-1',
+        'spacing-2',
+        'spacing-3',
+        'spacing-4',
+        'success',
+        'warning',
+        'warning-bg',
+    ],
+    sdkMethods: ['cart.addItem', 'events.getTicketTypes'],
+    props: {
+        eventId: { type: 'string', attr: 'event-id', required: true, docs: 'Event ID' },
+        occurrenceId: { type: 'string', attr: 'occurrence-id', required: true, docs: 'Occurrence ID' },
+        showButton: { type: 'boolean', attr: 'show-button', default: true, docs: 'Show add to cart button' },
+        buttonLabel: { type: 'string', attr: 'button-label', default: 'Add to Cart', docs: 'Button label' },
+    },
+    events: {
+        tlAddToCart: {
+            detail: '{ items: AddToCartItem[]; }',
+            docs: 'Emitted when items are added to cart',
+        },
+        tlQuantityChange: {
+            detail: '{ ticketTypeId: string; quantity: number; total: number; }',
+            docs: 'Emitted when quantity changes',
+        },
+        tlError: {
+            detail: '{ message: string; }',
+            docs: 'Emitted on error',
+        },
+    },
+    strings: STRINGS,
+    statuses: ['loading', 'error', 'ready'],
+    state: () => ({
+        ticketTypes: [],
+        quantities: {},
+        loading: true,
+        error: null,
+        adding: false,
+        addSuccess: false,
+        feeQuote: null,
+    }),
+    status: ({ state }) => (state.loading ? 'loading' : state.error ? 'error' : 'ready'),
+    derive: (ctx) => {
+        const { state, strings, props, formatMoney } = ctx;
+        const totals = totalsOf(ctx);
+        const totalItems = totalItemsOf(state);
+        const currency = state.ticketTypes[0]?.currency;
+        const rows = state.ticketTypes.map((tt) => {
+            const quantity = state.quantities[tt.id] || 0;
+            const soldOut = tt.availabilityStatus === 'sold_out';
+            return {
+                id: tt.id,
+                name: tt.name,
+                description: tt.description ?? null,
+                priceLabel: formatMoney(tt.price, tt.currency),
+                quantity,
+                soldOut,
+                limited: tt.availabilityStatus === 'limited',
+                canDecrease: !soldOut && quantity > 0,
+                canIncrease: !soldOut && quantity < tt.maxPerOrder,
+            };
+        });
+        return {
+            rows,
+            totals,
+            totalItems,
+            currency,
+            subtotalLabel: formatMoney(totals.subtotal, currency),
+            feeLabel: formatMoney(totals.fees, currency),
+            totalLabel: formatMoney(totals.total, currency),
+            showTotals: totals.showFee && totalItems > 0,
+            actionLabel: state.adding
+                ? strings.adding
+                : totalItems === 0
+                    ? strings.selectTickets
+                    : `${props.buttonLabel} - ${formatMoney(totals.total)}`,
+            actionDisabled: totalItems === 0 || state.adding,
+        };
+    },
+    actions: (ctx) => ({
+        /** Read the ticket types for the current event and occurrence. */
+        async load() {
+            try {
+                ctx.setState({ loading: true, error: null });
+                const types = (await ctx.client().getEventsManager().getTicketTypes(ctx.props.eventId, ctx.props.occurrenceId));
+                const quantities = {};
+                for (const type of types)
+                    quantities[type.id] = 0;
+                ctx.setState({ ticketTypes: types, quantities });
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : ctx.strings.loadFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ loading: false });
+            }
+        },
+        /** Nudge one row's quantity, clamped to 0 and the type's maxPerOrder. */
+        changeQuantity(ticketTypeId, delta) {
+            const ticketType = ctx.state.ticketTypes.find((t) => t.id === ticketTypeId);
+            if (!ticketType)
+                return;
+            const current = ctx.state.quantities[ticketTypeId] || 0;
+            const quantity = Math.max(0, Math.min(ticketType.maxPerOrder, current + delta));
+            ctx.setState((state) => ({ quantities: { ...state.quantities, [ticketTypeId]: quantity } }));
+            // After setState, so the total is the one the buyer can now see.
+            ctx.emit('tlQuantityChange', { ticketTypeId, quantity, total: totalsOf(ctx).total });
+        },
+        /**
+         * Add every selected line to the cart, then clear the selection.
+         *
+         * With no client, or a client too old to carry a cart manager, the
+         * selection is still cleared and `tlAddToCart` still fires: a host that
+         * listens for the event and does its own cart keeps working.
+         */
+        async addToCart() {
+            const items = Object.entries(ctx.state.quantities)
+                .filter(([, quantity]) => quantity > 0)
+                .map(([ticketTypeId, quantity]) => ({ ticketTypeId, quantity }));
+            if (items.length === 0)
+                return;
+            ctx.setState({ adding: true, addSuccess: false });
+            try {
+                const cart = ctx.optionalClient()?.getCartManager?.();
+                if (cart) {
+                    for (const item of items) {
+                        await cart.addItem(item.ticketTypeId, item.quantity, ctx.props.occurrenceId);
+                    }
+                }
+                const quantities = {};
+                for (const type of ctx.state.ticketTypes)
+                    quantities[type.id] = 0;
+                ctx.setState({ quantities, addSuccess: true });
+                ctx.after(SUCCESS_MS, () => ctx.setState({ addSuccess: false }));
+                ctx.emit('tlAddToCart', { items });
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : ctx.strings.addFailed;
+                ctx.setState({ error: message });
+                ctx.emit('tlError', { message });
+            }
+            finally {
+                ctx.setState({ adding: false });
+            }
+        },
+        /** What the surface quoted for this selection, when it ever quotes one. */
+        setFeeQuote(quote) {
+            ctx.setState({ feeQuote: quote });
+        },
+        /**
+         * The host never produced a client. Shown, not emitted: the element has
+         * nothing to say to a page that has not started Live yet.
+         */
+        connectFailed(message) {
+            ctx.setState({ error: message || ctx.strings.noClient, loading: false });
+        },
+    }),
+});

package/dist/cjs/define.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineElement = defineElement;
+exports.createElement = createElement;
+const CATEGORIES = [
+    'discovery',
+    'purchase',
+    'cart',
+    'checkout',
+    'account',
+    'tickets',
+];
+const RUNTIMES = ['web', 'native'];
+/**
+ * Declare a core. The checks here are the ones a type cannot make: a tag that
+ * is not a `tl-` custom element name, a category or runtime outside the set the
+ * catalogue knows, a duplicated token, a status list that does not include what
+ * `status` can return. They run at import time, so a malformed core fails the
+ * build rather than a browser.
+ */
+function defineElement(core) {
+    const fail = (message) => {
+        throw new Error(`[elements-core] ${core.tag || '<no tag>'}: ${message}`);
+    };
+    if (!/^tl-[a-z0-9]+(-[a-z0-9]+)*$/.test(core.tag))
+        fail('tag must look like tl-something');
+    if (!CATEGORIES.includes(core.category))
+        fail(`category must be one of ${CATEGORIES.join(', ')}`);
+    if (!core.runtimes.length || core.runtimes.some((r) => !RUNTIMES.includes(r))) {
+        fail(`runtimes must be a non-empty subset of ${RUNTIMES.join(', ')}`);
+    }
+    if (new Set(core.tokens).size !== core.tokens.length)
+        fail('tokens must not repeat');
+    if (!core.statuses.length)
+        fail('statuses must not be empty');
+    for (const [name, spec] of Object.entries(core.events)) {
+        if (!/^tl[A-Z]/.test(name))
+            fail(`event ${name} must be named tlSomething`);
+        if (!spec.detail)
+            fail(`event ${name} must state its detail type`);
+    }
+    for (const [name, spec] of Object.entries(core.props)) {
+        if (spec.required && spec.default !== undefined)
+            fail(`prop ${name} is required and has a default`);
+    }
+    return Object.freeze({ ...core });
+}
+const DEFAULT_LOCALE = 'en-GB';
+const DEFAULT_CURRENCY = 'GBP';
+/**
+ * Instantiate a core. The instance owns the state and the timers; the harness
+ * owns the pixels. `subscribe` fires after every change with the whole view, so
+ * a harness only has to assign it to whatever makes its runtime re-render.
+ */
+function createElement(core, options = {}) {
+    const defaults = {};
+    for (const [name, spec] of Object.entries(core.props)) {
+        if (spec.default !== undefined)
+            defaults[name] = spec.default;
+    }
+    let props = { ...defaults, ...(options.props ?? {}) };
+    const strings = { ...core.strings, ...(options.strings ?? {}) };
+    const locale = options.locale ?? DEFAULT_LOCALE;
+    const fallbackCurrency = options.currency ?? DEFAULT_CURRENCY;
+    let resolveClient = toResolver(options.client);
+    let state = core.state(props);
+    let destroyed = false;
+    const timers = new Set();
+    const listeners = new Set();
+    const formatMoney = (amountInMinorUnits, currency) => new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currency || fallbackCurrency,
+    }).format(amountInMinorUnits / 100);
+    const viewContext = () => ({ props, state, strings, formatMoney });
+    const buildView = () => {
+        const ctx = viewContext();
+        return {
+            status: core.status(ctx),
+            props,
+            state,
+            strings,
+            derived: core.derive(ctx),
+        };
+    };
+    const notify = () => {
+        if (destroyed)
+            return;
+        const view = buildView();
+        for (const listener of [...listeners])
+            listener(view);
+    };
+    const actionContext = {
+        get props() {
+            return props;
+        },
+        get state() {
+            return state;
+        },
+        strings,
+        formatMoney,
+        setState(patch) {
+            if (destroyed)
+                return;
+            const next = typeof patch === 'function' ? patch(state) : patch;
+            state = { ...state, ...next };
+            notify();
+        },
+        emit(event, detail) {
+            if (!core.events[event]) {
+                throw new Error(`[elements-core] ${core.tag}: ${event} is not a declared event`);
+            }
+            options.emit?.(event, detail);
+        },
+        client() {
+            const client = resolveClient();
+            if (!client) {
+                throw new Error(`[elements-core] ${core.tag}: no client. A harness hands the core the client the host published.`);
+            }
+            return client;
+        },
+        optionalClient() {
+            try {
+                return resolveClient();
+            }
+            catch {
+                return null;
+            }
+        },
+        after(ms, run) {
+            if (destroyed)
+                return;
+            const handle = setTimeout(() => {
+                timers.delete(handle);
+                if (!destroyed)
+                    run();
+            }, ms);
+            timers.add(handle);
+        },
+    };
+    const actions = core.actions(actionContext);
+    return {
+        core,
+        get props() {
+            return props;
+        },
+        get state() {
+            return state;
+        },
+        get view() {
+            return buildView();
+        },
+        actions,
+        setProps(next) {
+            if (destroyed)
+                return;
+            props = { ...props, ...next };
+            notify();
+        },
+        setClient(client) {
+            resolveClient = toResolver(client);
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        destroy() {
+            destroyed = true;
+            for (const handle of timers)
+                clearTimeout(handle);
+            timers.clear();
+            listeners.clear();
+        },
+    };
+}
+function toResolver(client) {
+    if (typeof client === 'function')
+        return client;
+    return () => client ?? null;
+}

package/dist/cjs/index.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FEE_LABEL_FALLBACK = exports.selectionTotals = exports.minorUnits = exports.expressesFee = exports.cartTotals = exports.manifestOf = exports.defineElement = exports.createElement = void 0;
+/**
+ * `@ticketlayer/elements-core`: the headless cores the Ticketlayer Elements
+ * render.
+ *
+ * One core per element, in `src/cores/`. A core is plain TypeScript: state,
+ * actions, derived values, a status, its copy, the theme tokens its harnesses
+ * use and the `tl*` events it emits, with no DOM, no React and no client of its
+ * own. The harnesses are thin: `packages/elements` renders a core with Stencil
+ * on the web, and a React Native harness will render the same core in an app
+ * (platform plan section 2.7, AGENTS.md, TKT-11).
+ *
+ * `elements.catalogue.json` is emitted from the manifests these cores carry, so
+ * what the docs site and a native host read is a projection of the object that
+ * runs, not a second copy kept by hand.
+ */
+var define_js_1 = require("./define.js");
+Object.defineProperty(exports, "createElement", { enumerable: true, get: function () { return define_js_1.createElement; } });
+Object.defineProperty(exports, "defineElement", { enumerable: true, get: function () { return define_js_1.defineElement; } });
+var manifest_js_1 = require("./manifest.js");
+Object.defineProperty(exports, "manifestOf", { enumerable: true, get: function () { return manifest_js_1.manifestOf; } });
+var money_js_1 = require("./money.js");
+Object.defineProperty(exports, "cartTotals", { enumerable: true, get: function () { return money_js_1.cartTotals; } });
+Object.defineProperty(exports, "expressesFee", { enumerable: true, get: function () { return money_js_1.expressesFee; } });
+Object.defineProperty(exports, "minorUnits", { enumerable: true, get: function () { return money_js_1.minorUnits; } });
+Object.defineProperty(exports, "selectionTotals", { enumerable: true, get: function () { return money_js_1.selectionTotals; } });
+Object.defineProperty(exports, "FEE_LABEL_FALLBACK", { enumerable: true, get: function () { return money_js_1.FEE_LABEL_FALLBACK; } });
+__exportStar(require("./cores/index.js"), exports);

package/dist/cjs/manifest.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.manifestOf = manifestOf;
+/** Project a core onto its manifest. Sorted, so the catalogue diff is stable. */
+function manifestOf(core) {
+    const props = Object.entries(core.props)
+        .map(([name, spec]) => ({
+        name,
+        attr: spec.attr,
+        type: spec.type,
+        default: spec.default ?? null,
+        required: !!spec.required,
+        docs: spec.docs,
+    }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    const events = Object.entries(core.events)
+        .map(([name, spec]) => ({ name, detail: spec.detail, docs: spec.docs }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    return {
+        tag: core.tag,
+        docs: core.docs,
+        category: core.category,
+        runtimes: [...core.runtimes],
+        tokens: [...core.tokens].sort(),
+        sdkMethods: [...core.sdkMethods].sort(),
+        props,
+        events,
+        strings: { ...core.strings },
+        statuses: [...core.statuses],
+        actions: Object.keys(dryRunActions(core)).sort(),
+    };
+}
+/**
+ * The action names, without running anything. `actions` is a factory, so the
+ * only way to learn the names is to build it once against a context whose
+ * every member throws: a core that called the client or set state while
+ * declaring its actions would fail here, loudly, which is the intent.
+ */
+function dryRunActions(core) {
+    const refuse = (what) => () => {
+        throw new Error(`[elements-core] ${core.tag}: ${what} cannot run while the actions are declared`);
+    };
+    return core.actions({
+        props: {},
+        state: {},
+        strings: core.strings,
+        formatMoney: refuse('formatMoney'),
+        setState: refuse('setState'),
+        emit: refuse('emit'),
+        client: refuse('client'),
+        optionalClient: refuse('optionalClient'),
+        after: refuse('after'),
+    });
+}