@synfin/widget 0.1.0

package/dist/element.js

@@ -0,0 +1,542 @@
+/**
+ * <synfin-widget>: the custom element. Owns the persistent chrome (pair + amount
+ * fields, the asset selector popover, the refresh countdown) and drives the
+ * quote lifecycle through @synfin/client, swapping only the result region per
+ * quote. Non-custodial: it holds no keys and signs nothing; creating a plan
+ * emits synfin:plan for the host to execute. Shadow DOM isolates styles so it is
+ * robust inside any host page.
+ */
+import { createClient, SynfinApiError, } from '@synfin/client';
+import { requestQuote } from './api.js';
+import { ASSETS, assetIcon, findAsset, searchAssets, } from './assets.js';
+import { formatAmount } from './format.js';
+import { normalizeConfig, } from './config.js';
+import { EVENTS, emit } from './events.js';
+import { resultHtml, selectedRow } from './render.js';
+import { STYLES } from './styles.js';
+import { displayQuote, viewFromQuote } from './state.js';
+const ATTRS = [
+    'api-key',
+    'fee-bps',
+    'fee-recipient',
+    'from',
+    'to',
+    'amount',
+    'appearance',
+    'base-url',
+    'refresh-ms',
+    'show-fee-breakdown',
+    'show-attribution',
+];
+const DEBOUNCE_MS = 400;
+export class SynfinWidgetElement extends HTMLElement {
+    static get observedAttributes() {
+        return ATTRS;
+    }
+    /** Injectable fetch (tests and advanced hosts); defaults to global fetch. */
+    fetchImpl;
+    cfg = normalizeConfig({}).config;
+    client = null;
+    view = { kind: 'idle' };
+    debounce = 0;
+    ticker = 0;
+    countdown = 0;
+    reqSeq = 0;
+    selectorOpen = null;
+    built = false;
+    syncing = false;
+    /** The venue the user has chosen (defaults to best); persists across refreshes
+     *  while it stays available. */
+    selectedVenue = null;
+    /** Transient Create-a-plan feedback, cleared on a fresh quote. */
+    plan = null;
+    connectedCallback() {
+        this.build();
+        this.reconfigure();
+    }
+    disconnectedCallback() {
+        clearTimeout(this.debounce);
+        clearInterval(this.ticker);
+    }
+    attributeChangedCallback() {
+        if (this.built && !this.syncing)
+            this.reconfigure();
+    }
+    /** Set config programmatically (React wrapper / advanced hosts). */
+    configure(partial) {
+        for (const [k, v] of Object.entries(partial)) {
+            const attr = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+            if (v === undefined || v === null)
+                this.removeAttribute(attr);
+            else
+                this.setAttribute(attr, String(v));
+        }
+    }
+    // ---- config ----------------------------------------------------------------
+    reconfigure() {
+        const a = (n) => this.getAttribute(n);
+        const raw = {
+            ...(a('api-key') !== null ? { apiKey: a('api-key') } : {}),
+            ...(a('fee-bps') !== null ? { feeBps: Number(a('fee-bps')) } : {}),
+            ...(a('fee-recipient') !== null
+                ? { feeRecipient: a('fee-recipient') }
+                : {}),
+            ...(a('from') !== null ? { from: a('from') } : {}),
+            ...(a('to') !== null ? { to: a('to') } : {}),
+            ...(a('amount') !== null ? { amount: a('amount') } : {}),
+            ...(a('appearance') === 'light' ? { appearance: 'light' } : {}),
+            ...(a('base-url') !== null ? { baseUrl: a('base-url') } : {}),
+            ...(a('refresh-ms') !== null
+                ? { refreshMs: Number(a('refresh-ms')) }
+                : {}),
+            // Boolean attribute: present (any value other than "false") turns on the
+            // partner-facing fee detail; absent leaves the clean end-user default.
+            ...(a('show-fee-breakdown') !== null
+                ? { showFeeBreakdown: a('show-fee-breakdown') !== 'false' }
+                : {}),
+            // "Powered by Synfin" attribution is ON by default; a white-label partner
+            // sets show-attribution="false" to remove it.
+            ...(a('show-attribution') !== null
+                ? { showAttribution: a('show-attribution') !== 'false' }
+                : {}),
+        };
+        const { config } = normalizeConfig(raw);
+        this.cfg = config;
+        if (this.getAttribute('appearance') !== config.appearance) {
+            this.syncing = true; // reflect without re-entering reconfigure
+            this.setAttribute('appearance', config.appearance);
+            this.syncing = false;
+        }
+        // Planning needs a key, so the client is created only when one is present.
+        // Quotes go through requestQuote, which sends no auth header when keyless.
+        this.client =
+            config.apiKey !== null
+                ? createClient({
+                    apiKey: config.apiKey,
+                    baseUrl: config.baseUrl,
+                    ...(this.fetchImpl ? { fetch: this.fetchImpl } : {}),
+                })
+                : null;
+        this.paintChrome();
+        void this.quote(true);
+    }
+    // ---- shell -----------------------------------------------------------------
+    root() {
+        return this.shadowRoot;
+    }
+    $(sel) {
+        return this.root().querySelector(sel);
+    }
+    build() {
+        if (this.built)
+            return;
+        const sh = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = STYLES;
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.innerHTML = `
+      <div class="head">
+        <span class="refresh">
+          <svg class="refresh__ring" viewBox="0 0 16 16" aria-hidden="true"><circle class="bg" cx="8" cy="8" r="6"></circle><circle class="fg" cx="8" cy="8" r="6" pathLength="100" stroke-dasharray="100" stroke-dashoffset="0"></circle></svg>
+          <button type="button" data-refresh aria-label="Refresh quote">refresh</button>
+        </span>
+      </div>
+      <div class="field" data-field="from">
+        <span class="field__label">You pay</span>
+        <div class="field__row">
+          <input class="amount" data-amount type="text" inputmode="decimal" autocomplete="off" placeholder="0.00" aria-label="Amount to pay" />
+          <button class="asset" data-asset="from" aria-haspopup="listbox" aria-label="Select the asset you pay"></button>
+        </div>
+      </div>
+      <div class="swapwrap"><button class="swap" data-swap type="button" aria-label="Swap the pair">&#8645;</button></div>
+      <div class="field" data-field="to">
+        <span class="field__label">You receive</span>
+        <div class="field__row">
+          <span class="receive receive--dim" data-receive>-</span>
+          <button class="asset" data-asset="to" aria-haspopup="listbox" aria-label="Select the asset you receive"></button>
+        </div>
+      </div>
+      <div class="result" data-result aria-live="polite"></div>
+    `;
+        sh.append(style, card);
+        this.built = true;
+        this.$('[data-amount]')?.addEventListener('input', () => this.onAmount());
+        this.$('[data-swap]')?.addEventListener('click', () => this.swap());
+        this.$('[data-refresh]')?.addEventListener('click', () => this.quote(true));
+        this.$('[data-asset="from"]')?.addEventListener('click', () => this.openSelector('from'));
+        this.$('[data-asset="to"]')?.addEventListener('click', () => this.openSelector('to'));
+        this.root().addEventListener('click', (e) => {
+            const t = e.target;
+            if (t.closest('[data-action="plan"]')) {
+                void this.createPlan();
+                return;
+            }
+            const venue = t.closest('[data-venue]');
+            if (venue)
+                this.selectVenue(venue.getAttribute('data-venue') ?? '');
+        });
+    }
+    assetBtn(side, a) {
+        const btn = this.$(`[data-asset="${side}"]`);
+        if (btn)
+            btn.innerHTML = `${assetIcon(a.symbol)}<span class="asset__sym">${a.symbol}</span><span class="asset__caret" aria-hidden="true">&#9662;</span>`;
+    }
+    paintChrome() {
+        const from = findAsset(this.cfg.from) ?? ASSETS[0];
+        const to = findAsset(this.cfg.to) ?? ASSETS[1];
+        this.assetBtn('from', from);
+        this.assetBtn('to', to);
+        const amt = this.$('[data-amount]');
+        if (amt && amt.value !== this.cfg.amount && document.activeElement !== amt)
+            amt.value = this.cfg.amount;
+    }
+    // ---- quoting ---------------------------------------------------------------
+    onAmount() {
+        const amt = this.$('[data-amount]');
+        const val = amt ? amt.value.trim() : '';
+        this.cfg = { ...this.cfg, amount: val };
+        clearTimeout(this.debounce);
+        // An empty field returns to neutral idle immediately, so no error banner or
+        // styling ever lingers from a previous invalid entry.
+        if (val === '') {
+            this.setView({ kind: 'idle' });
+            this.stopCountdown();
+            return;
+        }
+        this.debounce = window.setTimeout(() => void this.quote(true), DEBOUNCE_MS);
+    }
+    /** Change the pair from an INTERNAL action (swap/select): update live state
+     *  and re-quote directly, never through observed attributes (which would
+     *  reset the typed amount and re-enter reconfigure). */
+    setPair(from, to) {
+        this.cfg = { ...this.cfg, from, to };
+        this.paintChrome();
+        emit(this, EVENTS.asset, { from, to });
+        void this.quote(true);
+    }
+    swap() {
+        this.setPair(this.cfg.to, this.cfg.from);
+    }
+    setView(v) {
+        this.view = v;
+        this.paintResult();
+    }
+    /** Re-render the result region from the current view, selected venue, and plan
+     *  feedback. Called on a new quote and on any selection / plan change. */
+    paintResult() {
+        const region = this.$('[data-result]');
+        if (region)
+            region.innerHTML = resultHtml(this.view, this.cfg, this.selectedVenue, this.plan);
+        this.paintReceive();
+        // Roving-tabindex arrow-key navigation for the venue radiogroup.
+        this.$('.venues[role="radiogroup"]')?.addEventListener('keydown', (e) => this.venueKeys(e));
+    }
+    /** The "You receive" chrome follows the SELECTED venue, same formatting as the
+     *  summary line so the two never disagree. */
+    paintReceive() {
+        const recv = this.$('[data-receive]');
+        if (!recv)
+            return;
+        const sel = this.view.kind === 'quoted'
+            ? selectedRow(this.view, this.selectedVenue)
+            : null;
+        if (sel) {
+            const got = sel.fees ? sel.fees.userReceives : sel.net;
+            recv.textContent = got !== null ? formatAmount(got) : '-';
+            recv.classList.remove('receive--dim');
+        }
+        else {
+            recv.textContent = this.view.kind === 'loading' ? '...' : '-';
+            recv.classList.add('receive--dim');
+        }
+    }
+    /** Select a venue (click or keyboard). Repaints so the receive figure, fees,
+     *  and plan all follow the choice, and emits synfin:venue for the host. */
+    selectVenue(id) {
+        if (this.view.kind !== 'quoted' || id === '')
+            return;
+        const row = this.view.venues.find((r) => r.venueId === id && r.available);
+        if (!row || this.selectedVenue === id)
+            return;
+        this.selectedVenue = id;
+        this.plan = null; // a shown plan was for the previously selected venue
+        this.paintResult();
+        this.$(`[data-venue="${id}"]`)?.focus();
+        emit(this, EVENTS.venue, {
+            venueId: id,
+            net: row.net,
+            isBest: row.isBest,
+            pair: this.view.pair,
+        });
+    }
+    venueKeys(e) {
+        if (this.view.kind !== 'quoted')
+            return;
+        const avail = this.view.venues
+            .filter((r) => r.available)
+            .map((r) => r.venueId);
+        if (avail.length === 0)
+            return;
+        // Space/Enter select the FOCUSED radio (WAI-ARIA radiogroup), which may be a
+        // different, still-unchecked option than the currently-selected one.
+        if (e.key === ' ' || e.key === 'Enter') {
+            const focused = e.target?.closest('[data-venue]');
+            const id = focused?.getAttribute('data-venue');
+            if (id !== null && id !== undefined && avail.includes(id)) {
+                e.preventDefault();
+                this.selectVenue(id);
+            }
+            return;
+        }
+        // Arrow keys move selection along with focus (selection-follows-focus).
+        const cur = this.selectedVenue !== null && avail.includes(this.selectedVenue)
+            ? avail.indexOf(this.selectedVenue)
+            : 0;
+        let next = cur;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowRight')
+            next = Math.min(avail.length - 1, cur + 1);
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft')
+            next = Math.max(0, cur - 1);
+        else
+            return;
+        e.preventDefault();
+        const id = avail[next];
+        if (id)
+            this.selectVenue(id);
+    }
+    async quote(showLoading) {
+        const amt = this.cfg.amount.trim();
+        // Empty is a NEUTRAL idle state: no message, no error styling (distinct from
+        // an invalid amount, which shows a banner below).
+        if (amt === '') {
+            this.setView({ kind: 'idle' });
+            this.stopCountdown();
+            return;
+        }
+        // A same-asset pair is a clear on-screen message, not a bare blank.
+        if (this.cfg.from === this.cfg.to) {
+            this.setView({
+                kind: 'invalid',
+                title: 'Choose two different assets',
+                message: 'Pick a different asset to receive.',
+            });
+            this.stopCountdown();
+            return;
+        }
+        // A non-empty but invalid amount (letters, 1.2.3, negatives, zero) is
+        // surfaced honestly, never left as a blank that looks like loading.
+        if (!/^\d+(\.\d+)?$/.test(amt) || Number(amt) <= 0) {
+            this.setView({
+                kind: 'invalid',
+                title: 'Enter a valid amount',
+                message: 'Type a positive number, for example 100 or 12.5.',
+            });
+            this.stopCountdown();
+            return;
+        }
+        const seq = ++this.reqSeq;
+        if (showLoading && this.view.kind !== 'quoted') {
+            this.setView({ kind: 'loading' });
+        }
+        try {
+            const quote = await requestQuote({
+                baseUrl: this.cfg.baseUrl,
+                apiKey: this.cfg.apiKey,
+                ...(this.fetchImpl ? { fetch: this.fetchImpl } : {}),
+            }, {
+                from: this.cfg.from,
+                to: this.cfg.to,
+                amount: this.cfg.amount,
+                ...(this.cfg.feeBps !== null ? { feeBps: this.cfg.feeBps } : {}),
+                ...(this.cfg.feeRecipient !== null
+                    ? { feeRecipient: this.cfg.feeRecipient }
+                    : {}),
+            });
+            if (seq !== this.reqSeq)
+                return; // a newer request superseded this one
+            const view = viewFromQuote(quote);
+            if (view.kind === 'quoted') {
+                // Keep the user's chosen venue if it is still available; otherwise
+                // default the selection to the best. A fresh quote clears plan feedback.
+                const avail = view.venues
+                    .filter((r) => r.available)
+                    .map((r) => r.venueId);
+                if (this.selectedVenue === null || !avail.includes(this.selectedVenue))
+                    this.selectedVenue = view.best?.venueId ?? avail[0] ?? null;
+                this.plan = null;
+            }
+            this.setView(view);
+            if (view.kind === 'quoted') {
+                // Emit the display-mapped quote so the integrator sees the ticker (CC),
+                // never the internal canonical name (Amulet).
+                emit(this, EVENTS.quote, displayQuote(quote));
+                this.startCountdown();
+            }
+            else {
+                // No usable route: emit a clean synfin:error, never a success-shaped
+                // synfin:quote carrying undefined best/net fields.
+                emit(this, EVENTS.error, {
+                    code: 'no_route',
+                    message: 'No venue can fill this pair at this size.',
+                });
+                this.stopCountdown();
+            }
+        }
+        catch (err) {
+            if (seq !== this.reqSeq)
+                return;
+            const code = err instanceof SynfinApiError ? err.code : 'network';
+            const message = err instanceof Error ? err.message : 'could not reach the Synfin API';
+            this.setView({ kind: 'error', code, message });
+            emit(this, EVENTS.error, { code, message });
+            this.stopCountdown();
+        }
+    }
+    startCountdown() {
+        this.stopCountdown();
+        const total = Math.round(this.cfg.refreshMs / 1000);
+        this.countdown = total;
+        const paint = () => {
+            const fg = this.root().querySelector('.refresh__ring .fg');
+            if (fg)
+                fg.style.strokeDashoffset = String(100 - (this.countdown / total) * 100);
+        };
+        paint();
+        this.ticker = window.setInterval(() => {
+            this.countdown -= 1;
+            paint();
+            if (this.countdown <= 0)
+                void this.quote(false);
+        }, 1000);
+    }
+    stopCountdown() {
+        clearInterval(this.ticker);
+    }
+    async createPlan() {
+        if (this.client === null ||
+            this.view.kind !== 'quoted' ||
+            this.cfg.feeRecipient === null)
+            return;
+        const sel = selectedRow(this.view, this.selectedVenue);
+        if (sel === null || !sel.available)
+            return;
+        // Visible feedback (not a silent success), and pause auto-refresh so the
+        // confirmation is not overwritten by the next quote.
+        this.stopCountdown();
+        this.plan = { status: 'creating' };
+        this.paintResult();
+        try {
+            const plan = await this.client.createPlan({
+                from: this.cfg.from,
+                to: this.cfg.to,
+                amount: this.cfg.amount,
+                venueId: sel.venueId, // the venue the USER selected, not always best
+                takerParty: this.cfg.feeRecipient,
+                idempotencyKey: `w_${Date.now()}_${Math.round(Number(this.cfg.amount) * 1000)}`,
+                ...(this.cfg.feeBps !== null ? { feeBps: this.cfg.feeBps } : {}),
+                feeRecipient: this.cfg.feeRecipient,
+            });
+            const planId = plan.planId;
+            this.plan = { status: 'created', ...(planId ? { planId } : {}) };
+            this.paintResult();
+            emit(this, EVENTS.plan, plan);
+        }
+        catch (err) {
+            const code = err instanceof SynfinApiError ? err.code : 'network';
+            const message = err instanceof Error ? err.message : 'plan failed';
+            this.plan = { status: 'error', message };
+            this.paintResult();
+            emit(this, EVENTS.error, { code, message });
+        }
+    }
+    // ---- asset selector --------------------------------------------------------
+    openSelector(side) {
+        if (this.selectorOpen)
+            this.closeSelector();
+        this.selectorOpen = side;
+        const pop = document.createElement('div');
+        pop.className = 'pop';
+        pop.setAttribute('role', 'dialog');
+        pop.setAttribute('aria-modal', 'true');
+        pop.setAttribute('aria-label', `Select the ${side} asset`);
+        pop.innerHTML = `
+      <div class="pop__head">
+        <input class="pop__search" data-search placeholder="Search assets" aria-label="Search assets" role="combobox" aria-expanded="true" aria-controls="synfin-opts" />
+        <button class="pop__close" data-close aria-label="Close">&#10005;</button>
+      </div>
+      <div class="pop__list" id="synfin-opts" role="listbox" data-list></div>`;
+        this.$('.card').append(pop);
+        const search = pop.querySelector('[data-search]');
+        const list = pop.querySelector('[data-list]');
+        const renderList = (q) => {
+            const other = side === 'from' ? this.cfg.to : this.cfg.from;
+            const items = searchAssets(q);
+            list.innerHTML =
+                items.length === 0
+                    ? `<div class="opt--empty">No assets match "${q.replace(/[<>&]/g, '')}"</div>`
+                    : items
+                        .map((a, i) => `<button class="opt" role="option" tabindex="-1" data-sym="${a.symbol}" ${a.symbol === other ? 'aria-disabled="true" disabled' : ''} ${i === 0 ? 'aria-selected="true"' : ''}>
+              ${assetIcon(a.symbol)}
+              <span class="opt__name"><span class="opt__sym">${a.symbol}</span><span class="opt__full">${a.name}</span></span>
+            </button>`)
+                        .join('');
+        };
+        renderList('');
+        const pick = (sym) => {
+            if (side === 'from' && sym === this.cfg.to)
+                return;
+            if (side === 'to' && sym === this.cfg.from)
+                return;
+            this.closeSelector();
+            if (side === 'from')
+                this.setPair(sym, this.cfg.to);
+            else
+                this.setPair(this.cfg.from, sym);
+        };
+        search.addEventListener('input', () => renderList(search.value));
+        list.addEventListener('click', (e) => {
+            const opt = e.target.closest('[data-sym]');
+            if (opt && !opt.hasAttribute('disabled'))
+                pick(opt.getAttribute('data-sym') ?? '');
+        });
+        pop
+            .querySelector('[data-close]')
+            ?.addEventListener('click', () => this.closeSelector());
+        search.addEventListener('keydown', (e) => this.selectorKeys(e, list, pick, search));
+        setTimeout(() => search.focus(), 0);
+    }
+    selectorKeys(e, list, pick, search) {
+        const opts = [
+            ...list.querySelectorAll('[data-sym]:not([disabled])'),
+        ];
+        const cur = list.querySelector('[aria-selected="true"]');
+        let idx = cur ? opts.indexOf(cur) : -1;
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.closeSelector();
+        }
+        else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            idx =
+                e.key === 'ArrowDown'
+                    ? Math.min(opts.length - 1, idx + 1)
+                    : Math.max(0, idx - 1);
+            opts.forEach((o) => o.setAttribute('aria-selected', o === opts[idx] ? 'true' : 'false'));
+            opts[idx]?.scrollIntoView({ block: 'nearest' });
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const sel = (opts[idx] ?? opts[0])?.getAttribute('data-sym');
+            if (sel)
+                pick(sel);
+        }
+        void search;
+    }
+    closeSelector() {
+        this.selectorOpen = null;
+        this.root().querySelector('.pop')?.remove();
+        this.$(`[data-asset="${'from'}"]`)?.focus();
+    }
+}
+//# sourceMappingURL=element.js.map

package/dist/events.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The DOM CustomEvents the widget emits, so ANY host (plain HTML, React, Vue,
+ * Svelte) reacts without a framework hook. composed:true lets them cross the
+ * Shadow DOM boundary.
+ */
+export declare const EVENTS: {
+    readonly quote: "synfin:quote";
+    readonly asset: "synfin:asset";
+    readonly venue: "synfin:venue";
+    readonly plan: "synfin:plan";
+    readonly status: "synfin:status";
+    readonly error: "synfin:error";
+};
+export type SynfinEventName = (typeof EVENTS)[keyof typeof EVENTS];
+export declare function emit(target: EventTarget, name: SynfinEventName, detail: unknown): void;
+//# sourceMappingURL=events.d.ts.map

package/dist/events.js

@@ -0,0 +1,17 @@
+/**
+ * The DOM CustomEvents the widget emits, so ANY host (plain HTML, React, Vue,
+ * Svelte) reacts without a framework hook. composed:true lets them cross the
+ * Shadow DOM boundary.
+ */
+export const EVENTS = {
+    quote: 'synfin:quote',
+    asset: 'synfin:asset',
+    venue: 'synfin:venue',
+    plan: 'synfin:plan',
+    status: 'synfin:status',
+    error: 'synfin:error',
+};
+export function emit(target, name, detail) {
+    target.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+}
+//# sourceMappingURL=events.js.map

package/dist/format.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Display formatting and the fee breakdown. The fee lines are read STRAIGHT
+ * from the quote's clientFees (RFC-0007), never recomputed here: the widget
+ * shows exactly what the keyed quote disclosed.
+ */
+import type { ClientFees } from '@synfin/client';
+/** Trim a decimal string to at most `dp` fraction digits for display. */
+export declare function formatAmount(value: string | null, dp?: number): string;
+/** Add two non-negative decimal strings exactly (no float error), for the fee
+ *  total. Falls back to the first value if either is not a plain decimal. */
+export declare function addAmounts(a: string, b: string): string;
+export interface FeeLine {
+    readonly label: string;
+    readonly bps: number;
+    readonly amount: string;
+}
+/** The integrator (partner) fee, with its partner/Synfin split for the
+ *  partner-facing detail mode only (never shown to the end user). */
+export interface IntegratorLine extends FeeLine {
+    readonly partnerShare: string;
+    readonly synfinShare: string;
+}
+export interface FeeBreakdown {
+    readonly service: FeeLine;
+    readonly integrator: IntegratorLine | null;
+    /** What the end user receives after ALL fees (verbatim from the quote). */
+    readonly userReceives: string;
+    /** The total fee the end user pays (service + integrator), exact. This is the
+     *  ONLY fee figure the end-user default shows: no brand, no attribution. */
+    readonly total: string;
+}
+/** Derive the displayed breakdown from the quote's clientFees, verbatim. The
+ *  labels here are PARTNER-facing (detail mode); the end-user default shows only
+ *  the net receive and the neutral `total`, never these labels or the split. */
+export declare function feeBreakdown(fees: ClientFees): FeeBreakdown;
+//# sourceMappingURL=format.d.ts.map

package/dist/format.js

@@ -0,0 +1,57 @@
+/** Trim a decimal string to at most `dp` fraction digits for display. */
+export function formatAmount(value, dp = 6) {
+    if (value === null)
+        return '-';
+    if (!/^-?\d+(\.\d+)?$/.test(value))
+        return value;
+    const [int = '0', frac = ''] = value.split('.');
+    if (frac === '')
+        return int;
+    const kept = frac.slice(0, dp).replace(/0+$/, '');
+    return kept === '' ? int : `${int}.${kept}`;
+}
+/** Add two non-negative decimal strings exactly (no float error), for the fee
+ *  total. Falls back to the first value if either is not a plain decimal. */
+export function addAmounts(a, b) {
+    const dec = /^\d+(\.\d+)?$/;
+    if (!dec.test(a) || !dec.test(b))
+        return a;
+    const split = (s) => {
+        const [i = '0', f = ''] = s.split('.');
+        return [i, f];
+    };
+    const [ai, af] = split(a);
+    const [bi, bf] = split(b);
+    const dp = Math.max(af.length, bf.length);
+    const sum = BigInt(ai + af.padEnd(dp, '0')) + BigInt(bi + bf.padEnd(dp, '0'));
+    const s = sum.toString().padStart(dp + 1, '0');
+    const int = s.slice(0, s.length - dp);
+    const frac = dp > 0 ? s.slice(s.length - dp) : '';
+    return frac === '' ? int : `${int}.${frac}`;
+}
+/** Derive the displayed breakdown from the quote's clientFees, verbatim. The
+ *  labels here are PARTNER-facing (detail mode); the end-user default shows only
+ *  the net receive and the neutral `total`, never these labels or the split. */
+export function feeBreakdown(fees) {
+    return {
+        service: {
+            label: 'Synfin service',
+            bps: fees.service.bps,
+            amount: fees.service.amount,
+        },
+        integrator: fees.integrator === null
+            ? null
+            : {
+                label: 'Integrator fee',
+                bps: fees.integrator.bps,
+                amount: fees.integrator.amount,
+                partnerShare: fees.integrator.partnerShare,
+                synfinShare: fees.integrator.synfinShare,
+            },
+        userReceives: fees.userReceives,
+        total: fees.integrator === null
+            ? fees.service.amount
+            : addAmounts(fees.service.amount, fees.integrator.amount),
+    };
+}
+//# sourceMappingURL=format.js.map

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { SynfinWidgetElement } from './element.js';
+export { FEE_CAP_BPS, normalizeConfig, type ConfigIssue, type NormalizedConfig, type WidgetConfig, } from './config.js';
+export { ASSETS, findAsset, searchAssets, type WidgetAsset } from './assets.js';
+export { EVENTS, type SynfinEventName } from './events.js';
+export { feeBreakdown, formatAmount, type FeeBreakdown, type FeeLine, } from './format.js';
+export { viewFromQuote, type QuotedView, type VenueRow, type WidgetView, } from './state.js';
+/** Register <synfin-widget> (idempotent, no-op without customElements). */
+export declare function defineWidget(tag?: string): void;
+//# sourceMappingURL=index.d.ts.map