@bootnodedev/canton-dappbooster 0.3.0

package/dist/index.js

@@ -0,0 +1,1675 @@
+import { i as cx, r as SR_ONLY, t as asRecord } from "./json-CVZFwEw1.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import * as dialog from "@zag-js/dialog";
+import { Portal, normalizeProps, useMachine } from "@zag-js/react";
+//#region src/components/ExplorerLink/anatomy.ts
+const anatomy$5 = { parts: { root: "cnc-explorer-link" } };
+//#endregion
+//#region src/icons/Svg.tsx
+const Svg = ({ children }) => /* @__PURE__ */ jsx("svg", {
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.8,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children
+});
+//#endregion
+//#region src/icons/CheckIcon.tsx
+const CheckIcon = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+//#endregion
+//#region src/icons/CloseIcon.tsx
+const CloseIcon = () => /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
+//#endregion
+//#region src/icons/CopyIcon.tsx
+const CopyIcon = () => /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("rect", {
+	x: "9",
+	y: "9",
+	width: "11",
+	height: "11",
+	rx: "2"
+}), /* @__PURE__ */ jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })] });
+//#endregion
+//#region src/icons/ExternalLinkIcon.tsx
+const ExternalLinkIcon = () => /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M14 4h6v6M20 4 11 13" }), /* @__PURE__ */ jsx("path", { d: "M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4" })] });
+//#endregion
+//#region src/icons/LockIcon.tsx
+const LockIcon = () => /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("rect", {
+	x: "4",
+	y: "10",
+	width: "16",
+	height: "11",
+	rx: "2"
+}), /* @__PURE__ */ jsx("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })] });
+//#endregion
+//#region src/icons/SearchIcon.tsx
+const SearchIcon = () => /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("circle", {
+	cx: "11",
+	cy: "11",
+	r: "7"
+}), /* @__PURE__ */ jsx("path", { d: "M20 20l-3.9-3.9" })] });
+//#endregion
+//#region src/components/ExplorerLink/index.tsx
+/**
+* An icon-only external link to a block explorer. Composes no URLs; pair it with `useExplorerLink`
+* or `getExplorerLink`, which turn an identifier into an href.
+*
+* Reach for it directly when the link stands alone. Inside `Identifier` it is already the `href`
+* slot, so pass the href there instead of nesting one.
+*
+* @example
+* <ExplorerLink href="https://scan.example/party/nico" aria-label="View party id in explorer" />
+*
+* @see [anatomy.ts](https://github.com/BootNodeDev/canton-dappbooster/blob/main/canton-dappbooster/src/components/ExplorerLink/anatomy.ts) for the part classes and state attributes the theme selects.
+*
+* @category Components
+*/
+const ExplorerLink = ({ className, href, ...rest }) => {
+	return /* @__PURE__ */ jsx("a", {
+		...rest,
+		className: cx(anatomy$5.parts.root, className),
+		href,
+		rel: "noopener noreferrer",
+		target: "_blank",
+		children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+	});
+};
+//#endregion
+//#region src/components/Identifier/anatomy.ts
+const anatomy$4 = {
+	parts: {
+		root: "cnc-identifier",
+		value: "cnc-identifier__value",
+		copy: "cnc-identifier__copy",
+		link: "cnc-identifier__link",
+		status: "cnc-identifier__status"
+	},
+	states: { copy: "data-state" }
+};
+const FINGERPRINT = /^[0-9a-f]{68}$/i;
+/**
+* Checks the shape of a party id: a non-blank hint, the `::` separator, and a 68-character hex
+* fingerprint. Returns `undefined` when nothing is wrong. Shape only — whether the party exists is
+* the ledger's answer, not this function's.
+*
+* Reach for this over {@link isValidPartyId} when the caller needs to say what went wrong.
+*
+* @example
+* validatePartyId('nico:1220df94') // 'missing-separator'
+* validatePartyId('nico::1220df94') // 'invalid-fingerprint': 8 hex characters, not 68
+*
+* @category Utilities
+*/
+const validatePartyId = (value) => {
+	const separator = value.indexOf("::");
+	if (separator === -1) return "missing-separator";
+	const hint = value.slice(0, separator);
+	if (hint.trim() === "" || /\s/.test(hint)) return "invalid-hint";
+	const fingerprint = value.slice(separator + 2);
+	return FINGERPRINT.test(fingerprint) ? void 0 : "invalid-fingerprint";
+};
+/**
+* Whether a party id is well-formed. Reach for {@link validatePartyId} instead where the reason
+* matters.
+*
+* @example
+* isValidPartyId(partyId) // true
+* isValidPartyId('nico::1220df94') // false: 8 hex characters where 68 are required
+*
+* @category Utilities
+*/
+const isValidPartyId = (value) => validatePartyId(value) === void 0;
+//#endregion
+//#region src/components/Identifier/truncate.ts
+const PARTY_HEAD = 6;
+const PLAIN_HEAD = 12;
+const TAIL = 8;
+const THRESHOLD = 22;
+const ELLIPSIS = "…";
+const middle = (value, head, tail, threshold) => {
+	if (value.length <= threshold) return value;
+	const start = value.slice(0, Math.max(head, 0));
+	const end = tail > 0 ? value.slice(-tail) : "";
+	return start.length + end.length >= value.length ? value : `${start}${ELLIPSIS}${end}`;
+};
+/**
+* Truncates an identifier for display. A Canton party id is `hint::fingerprint`, so the hint
+* survives whole and only the fingerprint shrinks, unless `hint` bounds it too. Anything else is
+* middle-truncated as one segment, never longer than the input, and cut on UTF-16 code units, so a
+* non-ASCII value can split a surrogate pair.
+*
+* Reach for this over `<Identifier>` inside a sentence or another `<button>`, where the copy
+* control would nest a button in a button. Pass `hint` where the result must fit a bounded width.
+*
+* @example
+* truncateIdentifier('nico::1220df946c5b01ad0f2d2b480f1f43b1d1f2e498f5a49c2f0b1cbb46')
+* // 'nico::1220df…0b1cbb46'
+* truncateIdentifier('treasury-operations::1220df94…', { hint: 12 })
+* // 'treasury-ope…::1220df94…'
+*
+* @category Utilities
+*/
+const truncateIdentifier = (value, options) => {
+	const tail = options?.tail ?? TAIL;
+	const threshold = options?.threshold ?? THRESHOLD;
+	const separator = value.indexOf("::");
+	if (separator === -1) return middle(value, options?.head ?? PLAIN_HEAD, tail, threshold);
+	const hint = value.slice(0, separator);
+	const fingerprint = value.slice(separator + 2);
+	const short = middle(fingerprint, options?.head ?? PARTY_HEAD, tail, threshold);
+	return `${options?.hint === void 0 ? hint : middle(hint, options.hint, 0, options.hint)}::${short}`;
+};
+/**
+* The readable half of a party id. Returns the whole value when there is no separator. Reach for
+* this over {@link truncateIdentifier} where the fingerprint should be dropped rather than
+* shortened, such as a table column or a chart label.
+*
+* @example
+* partyHint('nico::1220df94') // 'nico'
+*
+* @category Utilities
+*/
+const partyHint = (value) => {
+	const separator = value.indexOf("::");
+	return separator === -1 ? value : value.slice(0, separator);
+};
+//#endregion
+//#region src/hooks/useCopyToClipboard.ts
+const RESET_MS = 1200;
+/**
+* Clipboard write with a transient result state. Callers that need their own feedback (a toast,
+* say) use the returned outcome; callers that only need an affordance style off `state`.
+*
+* Reach for this over `<Identifier>` when the copy control must be a sibling of the value rather
+* than a child of it.
+*
+* @example
+* const { state, copy } = useCopyToClipboard({ resetMs: 500 })
+* <button onClick={() => void copy(partyId)} data-state={state}>Copy</button>
+*
+* @category Hooks
+*/
+const useCopyToClipboard = (options) => {
+	const resetMs = options?.resetMs ?? RESET_MS;
+	const [state, setState] = useState("idle");
+	const timer = useRef(void 0);
+	const live = useRef(true);
+	useEffect(() => {
+		live.current = true;
+		return () => {
+			live.current = false;
+			clearTimeout(timer.current);
+		};
+	}, []);
+	return {
+		state,
+		copy: useCallback(async (value) => {
+			const settle = (next) => {
+				clearTimeout(timer.current);
+				if (!live.current) return;
+				setState(next);
+				timer.current = setTimeout(() => setState("idle"), resetMs);
+			};
+			try {
+				const clipboard = globalThis.navigator?.clipboard;
+				if (clipboard === void 0) throw new Error("Clipboard unavailable");
+				await clipboard.writeText(value);
+				settle("copied");
+				return {
+					ok: true,
+					value
+				};
+			} catch (cause) {
+				settle("error");
+				return {
+					ok: false,
+					error: cause instanceof Error ? cause : /* @__PURE__ */ new Error("Copy failed")
+				};
+			}
+		}, [resetMs])
+	};
+};
+//#endregion
+//#region src/components/Identifier/index.tsx
+const DEFAULT_LABEL = "identifier";
+const statusText = (state, label) => {
+	if (state === "copied") return `Copied ${label}`;
+	if (state === "error") return `Could not copy ${label}`;
+	return "";
+};
+/**
+* Displays a Canton identifier: truncated for reading, copyable in full, optionally linked to an
+* explorer. Copy always writes the whole value, never the truncated display value. The href is
+* built by the caller; this component composes no URLs. Renders a `span`, so it is legal anywhere
+* inline text is.
+*
+* @example
+* <Identifier value={partyId} label="party id" href={explorerLink(partyId)} announce={false} />
+*
+* @see [anatomy.ts](https://github.com/BootNodeDev/canton-dappbooster/blob/main/canton-dappbooster/src/components/Identifier/anatomy.ts) for the part classes and state attributes the theme selects.
+*
+* @category Components
+*/
+const Identifier = ({ value, label = DEFAULT_LABEL, truncate, copy = true, announce = true, href, onCopy, className, ...rest }) => {
+	const { state, copy: writeToClipboard } = useCopyToClipboard();
+	const display = truncate === false ? value : truncateIdentifier(value, truncate);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx(anatomy$4.parts.root, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("code", {
+				className: anatomy$4.parts.value,
+				title: value,
+				children: display
+			}),
+			copy && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: anatomy$4.parts.copy,
+				"aria-label": `Copy ${label}`,
+				onClick: () => void writeToClipboard(value).then(onCopy),
+				[anatomy$4.states.copy]: state,
+				children: state === "copied" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+			}), announce && /* @__PURE__ */ jsx("span", {
+				className: anatomy$4.parts.status,
+				role: "status",
+				style: SR_ONLY,
+				children: statusText(state, label)
+			})] }),
+			href !== void 0 && /* @__PURE__ */ jsx(ExplorerLink, {
+				"aria-label": `View ${label} in explorer`,
+				className: anatomy$4.parts.link,
+				href
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/PartyIdInput/anatomy.ts
+const anatomy$3 = {
+	parts: { root: "cnc-party-id-input" },
+	states: { invalid: "data-invalid" }
+};
+//#endregion
+//#region src/utils/invalid.ts
+/**
+* Resolves a field's invalid state into the `aria-invalid` it carries for assistive tech and the
+* boolean the theme's `data-invalid` hook is written from. A consumer's own `aria-invalid` wins, so
+* an app can flag a field for a reason the kit cannot know.
+*
+* @example
+* const [invalid, flagged] = resolveInvalid(ariaInvalid, error !== undefined)
+*/
+const resolveInvalid = (consumer, hasError) => {
+	const invalid = consumer ?? (hasError || void 0);
+	return [invalid, Boolean(invalid) && invalid !== "false"];
+};
+//#endregion
+//#region src/components/PartyIdInput/index.tsx
+const errorOf = (value) => value === "" ? void 0 : validatePartyId(value);
+/**
+* A controlled text field for a Canton party id.
+*
+* It flags a malformed value with `aria-invalid` and hands the reason to `onChange`. Pass
+* `aria-invalid` to flag the field for a reason the kit cannot know, such as a party the app
+* rejects.
+*
+* @example
+* <PartyIdInput value={receiver} onChange={setReceiver} aria-describedby="receiver-error" />
+*
+* @see [anatomy.ts](https://github.com/BootNodeDev/canton-dappbooster/blob/main/canton-dappbooster/src/components/PartyIdInput/anatomy.ts) for the part classes and state attributes the theme selects.
+*
+* @category Components
+*/
+const PartyIdInput = ({ "aria-invalid": ariaInvalid, className, onBlur, onChange, value, ...rest }) => {
+	const [touched, setTouched] = useState(false);
+	const shownError = touched ? errorOf(value) : void 0;
+	const [invalid, flagged] = resolveInvalid(ariaInvalid, shownError !== void 0);
+	const handleBlur = (event) => {
+		setTouched(true);
+		const settled = value.trim();
+		if (!touched || settled !== value) onChange(settled, errorOf(settled));
+		onBlur?.(event);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		autoCapitalize: "off",
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: false,
+		...rest,
+		"aria-invalid": invalid,
+		[anatomy$3.states.invalid]: flagged || void 0,
+		className: cx(anatomy$3.parts.root, className),
+		onBlur: handleBlur,
+		onChange: (event) => {
+			const next = event.target.value;
+			onChange(next, touched ? errorOf(next) : void 0);
+		},
+		type: "text",
+		value
+	});
+};
+//#endregion
+//#region src/components/TokenInput/anatomy.ts
+const anatomy$2 = {
+	parts: {
+		balance: "cnc-token-input__balance",
+		field: "cnc-token-input__field",
+		label: "cnc-token-input__label",
+		max: "cnc-token-input__max",
+		meta: "cnc-token-input__meta",
+		root: "cnc-token-input",
+		row: "cnc-token-input__row",
+		token: "cnc-token-input__token",
+		usdValue: "cnc-token-input__usd-value"
+	},
+	states: {
+		balance: "data-state",
+		disabled: "data-disabled",
+		interactive: "data-interactive",
+		invalid: "data-invalid"
+	}
+};
+const dialogAnatomy = { parts: {
+	backdrop: "cnc-token-select-dialog__backdrop",
+	close: "cnc-token-select-dialog__close",
+	content: "cnc-token-select-dialog",
+	empty: "cnc-token-select-dialog__empty",
+	favorite: "cnc-token-select-dialog__favorite",
+	favoriteLogo: "cnc-token-select-dialog__favorite-logo",
+	favorites: "cnc-token-select-dialog__favorites",
+	favoriteSymbol: "cnc-token-select-dialog__favorite-symbol",
+	header: "cnc-token-select-dialog__header",
+	list: "cnc-token-select-dialog__list",
+	positioner: "cnc-token-select-dialog__positioner",
+	row: "cnc-token-select-dialog__row",
+	rowBalance: "cnc-token-select-dialog__row-balance",
+	rowFigures: "cnc-token-select-dialog__row-figures",
+	rowLocked: "cnc-token-select-dialog__row-locked",
+	rowLogo: "cnc-token-select-dialog__row-logo",
+	rowName: "cnc-token-select-dialog__row-name",
+	rows: "cnc-token-select-dialog__rows",
+	rowSymbol: "cnc-token-select-dialog__row-symbol",
+	rowText: "cnc-token-select-dialog__row-text",
+	search: "cnc-token-select-dialog__search",
+	searchField: "cnc-token-select-dialog__search-field",
+	searchIcon: "cnc-token-select-dialog__search-icon",
+	sizer: "cnc-token-select-dialog__sizer",
+	status: "cnc-token-select-dialog__status",
+	title: "cnc-token-select-dialog__title"
+} };
+//#endregion
+//#region src/components/TokenInput/constants.ts
+const ROW_HEIGHT_REM = 3.25;
+const NO_TOKENS = "No tokens found";
+//#endregion
+//#region src/utils/tokenAmount.ts
+/**
+* Decimal places Daml `Decimal` (`Numeric 10`) accepts. Pass a smaller one where a token's own
+* precision is tighter.
+*
+* @example
+* parseAmount('1.5', DEFAULT_PRECISION)
+*
+* @category Utilities
+*/
+const DEFAULT_PRECISION = 10;
+const TOTAL_DIGITS = 38;
+const DECIMAL = /^\d*(\.\d*)?$/;
+const localeCache = /* @__PURE__ */ new Map();
+const partsOf = (locale) => {
+	const cached = localeCache.get(locale ?? "");
+	if (cached !== void 0) return cached;
+	const grouper = new Intl.NumberFormat(locale, { numberingSystem: "latn" });
+	const parts = grouper.formatToParts(12345.6);
+	const entry = {
+		group: parts.find((part) => part.type === "group")?.value ?? ",",
+		decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
+		grouper
+	};
+	localeCache.set(locale ?? "", entry);
+	return entry;
+};
+const split = (value) => {
+	const dot = value.indexOf(".");
+	return dot === -1 ? [value, ""] : [value.slice(0, dot), value.slice(dot + 1)];
+};
+/**
+* Scales a decimal string to an integer at `precision`, which is the only exact way to compare two
+* amounts. `undefined` when the value is not a decimal or carries more places than `precision` can
+* hold, since dropping a digit would silently change the amount.
+*
+* Reach for {@link validateAmount} instead where the caller needs to say what went wrong.
+*
+* @example
+* parseAmount('1.5') // 15000000000n
+*
+* @category Utilities
+*/
+const parseAmount = (value, precision = 10) => {
+	if (value === "" || !DECIMAL.test(value)) return void 0;
+	const [int, frac] = split(value);
+	if (frac.length > precision) return void 0;
+	return BigInt(`${int === "" ? "0" : int}${frac.padEnd(precision, "0")}`);
+};
+/**
+* The inverse of {@link parseAmount}: a scaled integer back to a canonical decimal string with no
+* trailing zeros.
+*
+* @example
+* formatScaled(15000000000n) // '1.5'
+*
+* @category Utilities
+*/
+const formatScaled = (scaled, precision = 10) => {
+	const digits = scaled.toString().padStart(precision + 1, "0");
+	const cut = digits.length - precision;
+	const frac = digits.slice(cut).replace(/0+$/, "");
+	return frac === "" ? digits.slice(0, cut) : `${digits.slice(0, cut)}.${frac}`;
+};
+/**
+* Groups the integer part for reading and leaves the fraction verbatim, so a value still being
+* typed (`1.`, `1.50`) survives. `Intl` is handed the string unparsed, which formats it exactly
+* where the float would drift. The grouping and decimal separators are the locale's, so
+* {@link sanitizeAmountInput} has to read the result back under the same locale.
+*
+* @example
+* formatAmount('8421337.1234567891') // '8,421,337.1234567891'
+*
+* @category Utilities
+*/
+const formatAmount = (value, locale) => {
+	if (!DECIMAL.test(value)) return value;
+	const [int, frac] = split(value);
+	const { decimal, grouper } = partsOf(locale);
+	const grouped = int === "" ? "" : grouper.format(BigInt(int));
+	return value.includes(".") ? `${grouped}${decimal}${frac}` : grouped;
+};
+/**
+* Reduces raw field input to a decimal: grouping separators and anything that can never belong to
+* an amount are dropped rather than flagged, so a paste of `1,234.5` lands as `1234.5`. A sign or
+* an exponent is kept instead of stripped, so `-5` and `1.5e3` reach {@link validateAmount} as
+* `not-a-number` rather than being salvaged into an amount nobody entered.
+*
+* The inverse of {@link formatAmount}, and it must be passed the same `locale`: under a
+* comma-decimal locale a mismatched pair reads a value a thousand times too small.
+*
+* @example
+* sanitizeAmountInput('.5') // '0.5'
+*
+* @category Utilities
+*/
+const sanitizeAmountInput = (input, locale) => {
+	const { group, decimal } = partsOf(locale);
+	const mapped = input.replaceAll(group, "").replaceAll(decimal, ".");
+	if (/[eE+-]/.test(mapped)) return mapped;
+	const [int, ...frac] = mapped.replace(/[^\d.]/g, "").split(".");
+	const head = int.replace(/^0+(?=\d)/, "");
+	return frac.length === 0 ? head : `${head === "" ? "0" : head}.${frac.join("")}`;
+};
+/**
+* Settles a value the user has finished editing. Only a dangling separator goes: trailing fraction
+* zeros are the user's to keep, and they parse to the same amount either way.
+*
+* @example
+* settleAmount('1.') // '1'
+*
+* @internal
+*/
+const settleAmount = (value) => value.endsWith(".") ? value.slice(0, -1) : value;
+/**
+* Checks an amount against the token's precision, the `Numeric 38,10` ceiling, and an optional
+* range. Returns `undefined` when nothing is wrong, including for the empty string: empty is empty,
+* and required-ness belongs to the form. A `max` that is not itself a decimal returns `invalid-max`
+* rather than reading as no ceiling, so a malformed balance cannot silently uncap the amount.
+*
+* @example
+* validateAmount('1.5000000001', { max: '1.5' }) // 'above-max'
+*
+* @category Utilities
+*/
+const validateAmount = (value, { precision = 10, max } = {}) => {
+	if (value === "") return void 0;
+	const scaled = parseAmount(value, precision);
+	if (scaled === void 0) return DECIMAL.test(value) ? "too-many-decimals" : "not-a-number";
+	if (split(value)[0].replace(/^0+/, "").length > TOTAL_DIGITS - precision) return "too-large";
+	if (max !== void 0 && max !== "") {
+		const scaledMax = parseAmount(max, precision);
+		if (scaledMax === void 0) return "invalid-max";
+		if (scaled > scaledMax) return "above-max";
+	}
+};
+//#endregion
+//#region src/components/TokenInput/formatFigure.ts
+const PLACES = 2;
+/**
+* Rounds an amount to a fixed number of decimals and groups it for reading, so a column of figures
+* compares at a glance where {@link formatAmount} keeps every digit the ledger carries. An amount
+* it cannot read formats to nothing rather than to a zero that would read as a real balance.
+*
+* @example
+* formatFigure('1234.5') // '1,234.50'
+* formatFigure('abc') // undefined
+*
+* @category Utilities
+*/
+const formatFigure = (value, { locale, places = PLACES } = {}) => {
+	const scaled = value === void 0 ? void 0 : parseAmount(value);
+	if (scaled === void 0) return void 0;
+	const at = Math.max(0, Math.min(Math.trunc(places), 10));
+	const step = 10n ** BigInt(10 - at);
+	const [int, frac = ""] = formatScaled((scaled + step / 2n) / step, at).split(".");
+	return formatAmount(at === 0 ? int : `${int}.${frac.padEnd(at, "0")}`, locale);
+};
+//#endregion
+//#region src/components/TokenInput/getLockedFigure.ts
+const getLockedFigure = ({ locked }) => locked !== void 0 && parseAmount(locked) === 0n ? void 0 : formatFigure(locked);
+//#endregion
+//#region src/components/TokenInput/getTokenLabel.ts
+const getTokenLabel = (token) => {
+	const balance = formatFigure(token.balance);
+	const locked = getLockedFigure(token);
+	const parts = [`${token.name} ${token.symbol}`];
+	if (balance !== void 0) parts.push(`balance ${balance}`);
+	if (locked !== void 0) parts.push(`${locked} locked`);
+	return parts.join(", ");
+};
+//#endregion
+//#region src/components/TokenLogo/anatomy.ts
+const anatomy$1 = {
+	parts: { root: "cnc-token-logo" },
+	states: {
+		fallback: "data-fallback",
+		swatch: "data-swatch"
+	}
+};
+/**
+* Picks the placeholder swatch for a token symbol: arbitrary, but the same symbol always lands on
+* the same one. The answer indexes the theme's `--cnc-swatch-*` roles, so the colour itself stays
+* in CSS and follows the mode.
+*
+* @example
+* swatchOf('CC') === swatchOf('CC') // true, and unrelated to swatchOf('USDC')
+*/
+const swatchOf = (symbol) => {
+	let hash = 0;
+	for (const char of symbol) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) % 100003;
+	return hash * 3 % 8 + 1;
+};
+//#endregion
+//#region src/components/TokenLogo/index.tsx
+const INITIALS = 3;
+const initialsOf = (symbol) => [...symbol].slice(0, INITIALS).join("");
+/**
+* A token's logo, falling back to the symbol's initials on a coloured disc when there is no
+* artwork. The disc is `aria-hidden` either way, so whatever renders it must name the token itself.
+*
+* A subcomponent of {@link TokenInput} and its token select, not a public export: a consumer
+* rendering a token badge of their own owes it an accessible name, which this deliberately has not.
+*
+* @example
+* <TokenLogo logo={token.logo} symbol={token.symbol} />
+*
+* @see [anatomy.ts](https://github.com/BootNodeDev/canton-dappbooster/blob/main/canton-dappbooster/src/components/TokenLogo/anatomy.ts) for the part classes and state attributes the theme selects.
+*
+* @internal
+*/
+const TokenLogo = ({ className, logo, symbol }) => {
+	const fallback = logo === void 0 || logo === null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cx(anatomy$1.parts.root, className),
+		[anatomy$1.states.fallback]: fallback || void 0,
+		[anatomy$1.states.swatch]: fallback ? swatchOf(symbol) : void 0,
+		children: fallback ? initialsOf(symbol) : logo
+	});
+};
+//#endregion
+//#region src/providers/TokenListProvider/context.ts
+const TokenListContext = createContext(void 0);
+//#endregion
+//#region src/providers/TokenListProvider/useTokenList.ts
+/**
+* Reads the token list a {@link TokenListProvider} supplies. Reach for it where a screen renders
+* its own token UI; `<TokenInput onTokenSelect>` already reads it itself.
+*
+* @throws with no {@link TokenListProvider} above it.
+*
+* @example
+* const { tokens } = useTokenList()
+* tokens.map((token) => <TokenRow key={tokenKey(token.instrumentId)} token={token} />)
+*
+* @category Hooks
+*/
+const useTokenList = () => {
+	const value = useContext(TokenListContext);
+	if (value === void 0) throw new Error("useTokenList must be used inside a <TokenListProvider>");
+	return value;
+};
+//#endregion
+//#region src/utils/tokenKey.ts
+const SEPARATOR = "/";
+/**
+* The string identity of an instrument, for a map key, a React key or an equality check. Compare
+* these rather than the `id` alone: two registries can both issue a `USDC`.
+*
+* @example
+* tokenKey({ admin: 'DSO::1220ab', id: 'Amulet' }) // 'DSO::1220ab/Amulet'
+*
+* @category Utilities
+*/
+const tokenKey = ({ admin, id }) => `${admin}${SEPARATOR}${id}`;
+//#endregion
+//#region src/components/TokenInput/TokenFavorites.tsx
+/**
+* The token select's shortcut row. Takes the first `MAX_FAVORITES` ids the list provider holds, in
+* the order given, and drops the rest.
+*
+* @example
+* <TokenFavorites ids={[{ admin: 'DSO::1220ab', id: 'Amulet' }]} onSelect={setToken} />
+*/
+const TokenFavorites = ({ ids = [], onSelect }) => {
+	const { byKey } = useTokenList();
+	const favorites = ids.map((id) => byKey.get(tokenKey(id))).filter((token) => token !== void 0).slice(0, 8);
+	if (favorites.length === 0) return null;
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": "Favorite tokens",
+		className: dialogAnatomy.parts.favorites,
+		children: favorites.map((token) => /* @__PURE__ */ jsxs("button", {
+			"aria-label": getTokenLabel(token),
+			className: dialogAnatomy.parts.favorite,
+			onClick: () => onSelect(token),
+			type: "button",
+			children: [/* @__PURE__ */ jsx(TokenLogo, {
+				className: dialogAnatomy.parts.favoriteLogo,
+				logo: token.logo,
+				symbol: token.symbol
+			}), /* @__PURE__ */ jsx("span", {
+				className: dialogAnatomy.parts.favoriteSymbol,
+				children: token.symbol
+			})]
+		}, tokenKey(token.instrumentId)))
+	});
+};
+//#endregion
+//#region src/components/TokenInput/filterTokens.ts
+const haystacks = /* @__PURE__ */ new WeakMap();
+const haystack = (token) => {
+	const cached = haystacks.get(token);
+	if (cached !== void 0) return cached;
+	const next = {
+		admin: token.instrumentId.admin.toLowerCase(),
+		id: token.instrumentId.id.toLowerCase(),
+		name: token.name.toLowerCase(),
+		symbol: token.symbol.toLowerCase()
+	};
+	haystacks.set(token, next);
+	return next;
+};
+/**
+* Normalizes a query to what {@link filterTokens} matches on. Key a memo on this rather than on the
+* raw query, so typing a space either side re-runs nothing.
+*
+* @example
+* const tokens = useMemo(() => filterTokens(all, toNeedle(query)), [all, toNeedle(query)])
+*/
+const toNeedle = (query) => query.trim().toLowerCase();
+/**
+* Narrows a token list to what a query matches: symbol matches first, then name, then either half
+* of the instrument id. The admin party is what tells two registries issuing one symbol apart, so
+* it is matched by prefix, which is how a pasted party id finds its token.
+*
+* @example
+* const shown = filterTokens(tokens, 'ca')
+*/
+const filterTokens = (tokens, query) => {
+	const needle = toNeedle(query);
+	if (needle === "") return tokens;
+	const bySymbol = [];
+	const byName = [];
+	const byInstrument = [];
+	for (const token of tokens) {
+		const { admin, id, name, symbol } = haystack(token);
+		if (symbol.includes(needle)) bySymbol.push(token);
+		else if (name.includes(needle)) byName.push(token);
+		else if (id.startsWith(needle) || admin.startsWith(needle)) byInstrument.push(token);
+	}
+	return [
+		...bySymbol,
+		...byName,
+		...byInstrument
+	];
+};
+//#endregion
+//#region src/components/TokenInput/TokenRow.tsx
+/**
+* One row of the token select's list. `tabbable` is the list's roving tab stop, so exactly one row
+* carries it: a tab stop per row is what the windowing exists to avoid.
+*
+* @example
+* <TokenRow onFocus={() => setActiveKey(tokenKey(token.instrumentId))} onKeyDown={move}
+*   onSelect={setToken} tabbable={index === active} token={token} />
+*/
+const TokenRow = ({ onFocus, onKeyDown, onSelect, tabbable, token }) => {
+	const balance = formatFigure(token.balance);
+	const locked = getLockedFigure(token);
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-label": getTokenLabel(token),
+		className: dialogAnatomy.parts.row,
+		onClick: () => onSelect(token),
+		onFocus,
+		onKeyDown,
+		style: { height: `${ROW_HEIGHT_REM}rem` },
+		tabIndex: tabbable ? 0 : -1,
+		type: "button",
+		children: [
+			/* @__PURE__ */ jsx(TokenLogo, {
+				className: dialogAnatomy.parts.rowLogo,
+				logo: token.logo,
+				symbol: token.symbol
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: dialogAnatomy.parts.rowText,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: dialogAnatomy.parts.rowName,
+					children: token.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: dialogAnatomy.parts.rowSymbol,
+					children: token.symbol
+				})]
+			}),
+			(balance !== void 0 || locked !== void 0) && /* @__PURE__ */ jsxs("span", {
+				className: dialogAnatomy.parts.rowFigures,
+				children: [balance !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: dialogAnatomy.parts.rowBalance,
+					children: balance
+				}), locked !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: dialogAnatomy.parts.rowLocked,
+					children: [locked, /* @__PURE__ */ jsx(LockIcon, {})]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/TokenInput/useRemPx.ts
+const FALLBACK = 16;
+const rootFontSize = () => Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || FALLBACK;
+/**
+* Resolves a rem length to the px a layout calculation needs, following the root font size.
+*
+* @example
+* const rowHeight = useRemPx(3.25)
+*/
+const useRemPx = (rem) => {
+	const [root, setRoot] = useState(FALLBACK);
+	useLayoutEffect(() => {
+		const measure = () => setRoot(rootFontSize());
+		measure();
+		window.addEventListener("resize", measure);
+		return () => window.removeEventListener("resize", measure);
+	}, []);
+	return rem * root;
+};
+//#endregion
+//#region src/components/TokenInput/nextIndex.ts
+/**
+* The row a key moves the tab stop to, or `undefined` for a key that moves nothing and so must
+* keep its default behaviour. Out-of-range results are the caller's to clamp.
+*
+* @example
+* nextIndex('PageDown', 4, 10, 99) // 14
+*/
+const nextIndex = (key, active, page, last) => {
+	switch (key) {
+		case "ArrowDown": return active + 1;
+		case "ArrowUp": return active - 1;
+		case "PageDown": return active + page;
+		case "PageUp": return active - page;
+		case "Home": return 0;
+		case "End": return last;
+		default: return;
+	}
+};
+//#endregion
+//#region src/components/TokenInput/useRovingFocus.ts
+/**
+* The one tab stop a windowed list walks on: which row holds it, the keys that move it, and the
+* focus a scroll would otherwise drop when it unmounts the row holding it.
+*
+* @example
+* const { active, onKeyDown, onRowFocus } = useRovingFocus({
+*   needle,
+*   rowHeight,
+*   scrollRef,
+*   scrollRowIntoView,
+*   tokens,
+* })
+*/
+const useRovingFocus = ({ needle, rowHeight, scrollRef, scrollRowIntoView, tokens }) => {
+	const [activeKey, setActiveKey] = useState();
+	const active = useMemo(() => Math.max(0, tokens.findIndex((token) => tokenKey(token.instrumentId) === activeKey)), [activeKey, tokens]);
+	const pullFocus = useRef(false);
+	const hadFocus = useRef(false);
+	const [applied, setApplied] = useState(needle);
+	if (applied !== needle) {
+		setApplied(needle);
+		setActiveKey(void 0);
+	}
+	const focusActive = () => {
+		scrollRef.current?.querySelector(`.${dialogAnatomy.parts.row}[tabindex="0"]`)?.focus();
+	};
+	useLayoutEffect(() => {
+		const node = scrollRef.current;
+		if (node === null) return;
+		if (pullFocus.current || hadFocus.current && document.activeElement === document.body) {
+			pullFocus.current = false;
+			focusActive();
+		}
+		hadFocus.current = node.contains(document.activeElement);
+	});
+	const moveTo = (index) => {
+		const next = Math.max(0, Math.min(tokens.length - 1, index));
+		scrollRowIntoView(next);
+		if (next === active) {
+			focusActive();
+			return;
+		}
+		pullFocus.current = true;
+		setActiveKey(tokenKey(tokens[next].instrumentId));
+	};
+	return {
+		active,
+		onKeyDown: (event) => {
+			const page = Math.max(1, Math.floor((scrollRef.current?.clientHeight ?? 0) / rowHeight));
+			const next = nextIndex(event.key, active, page, tokens.length - 1);
+			if (next === void 0) return;
+			event.preventDefault();
+			moveTo(next);
+		},
+		onRowFocus: (token) => {
+			hadFocus.current = true;
+			setActiveKey(tokenKey(token.instrumentId));
+		}
+	};
+};
+//#endregion
+//#region src/components/TokenInput/useVirtualRows.ts
+const DEFAULT_OVERSCAN = 4;
+/**
+* Windows a uniform-height list. The hook owns every scroll write, so move it with
+* `scrollRowIntoView`, or hand it a `resetKey` that changes when the rendered sequence does and it
+* rewinds itself: the window is computed from state, which a `scrollTop` written on the node behind
+* the hook's back leaves pointing at the offset it was computed for.
+*
+* @example
+* const { end, offset, start, totalHeight } = useVirtualRows({
+*   count: rows.length,
+*   rowHeight: 56,
+*   scrollRef,
+* })
+* rows.slice(start, end)
+*/
+const useVirtualRows = ({ count, overscan = DEFAULT_OVERSCAN, resetKey, rowHeight, scrollRef }) => {
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewport, setViewport] = useState(0);
+	useLayoutEffect(() => {
+		const node = scrollRef.current;
+		if (node === null) return;
+		const measure = () => setViewport(node.clientHeight);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [scrollRef]);
+	useEffect(() => {
+		const node = scrollRef.current;
+		if (node === null) return;
+		const onScroll = () => setScrollTop(node.scrollTop);
+		node.addEventListener("scroll", onScroll, { passive: true });
+		return () => node.removeEventListener("scroll", onScroll);
+	}, [scrollRef]);
+	const scrollTo = useCallback((top) => {
+		const node = scrollRef.current;
+		if (node !== null) node.scrollTop = top;
+		setScrollTop(top);
+	}, [scrollRef]);
+	const scrollRowIntoView = useCallback((index) => {
+		const node = scrollRef.current;
+		if (node === null) return;
+		const top = index * rowHeight;
+		scrollTo(Math.max(top + rowHeight - node.clientHeight, Math.min(node.scrollTop, top)));
+	}, [
+		rowHeight,
+		scrollRef,
+		scrollTo
+	]);
+	const applied = useRef(resetKey);
+	useLayoutEffect(() => {
+		if (applied.current === resetKey) return;
+		applied.current = resetKey;
+		scrollTo(0);
+	}, [resetKey, scrollTo]);
+	const first = Math.min(Math.floor(scrollTop / rowHeight), Math.max(0, count - 1));
+	const start = Math.max(0, first - overscan);
+	return {
+		end: Math.min(count, start + Math.ceil(viewport / rowHeight) + 1 + overscan * 2),
+		offset: start * rowHeight,
+		scrollRowIntoView,
+		start,
+		totalHeight: count * rowHeight
+	};
+};
+//#endregion
+//#region src/components/TokenInput/TokenList.tsx
+const announce = (needle, count) => {
+	if (needle === "") return "";
+	if (count === 0) return NO_TOKENS;
+	return count === 1 ? "1 token found" : `${count} tokens found`;
+};
+/**
+* The token select's scrolling list. Windowed, so it walks on one roving tab stop and the arrow
+* keys instead of a tab stop per token: the rows out of view are not in the DOM to tab to.
+*
+* @example
+* <TokenList onSelect={(token) => { onTokenSelect(token); onClose() }} />
+*/
+const TokenList = ({ onSelect, query = "" }) => {
+	const scrollRef = useRef(null);
+	const { tokens: all } = useTokenList();
+	const needle = toNeedle(query);
+	const tokens = useMemo(() => filterTokens(all, needle), [all, needle]);
+	const rowHeight = useRemPx(ROW_HEIGHT_REM);
+	const { end, offset, scrollRowIntoView, start, totalHeight } = useVirtualRows({
+		count: tokens.length,
+		resetKey: needle,
+		rowHeight,
+		scrollRef
+	});
+	const { active, onKeyDown, onRowFocus } = useRovingFocus({
+		needle,
+		rowHeight,
+		scrollRef,
+		scrollRowIntoView,
+		tokens
+	});
+	const row = (token, index) => /* @__PURE__ */ jsx(TokenRow, {
+		onFocus: () => onRowFocus(token),
+		onKeyDown,
+		onSelect,
+		tabbable: index === active,
+		token
+	}, tokenKey(token.instrumentId));
+	const stray = tokens.length > 0 && (active < start || active >= end) ? /* @__PURE__ */ jsx("div", {
+		className: dialogAnatomy.parts.rows,
+		style: { transform: `translateY(${active * rowHeight}px)` },
+		children: row(tokens[active], active)
+	}) : null;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Tokens",
+		className: dialogAnatomy.parts.list,
+		ref: scrollRef,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: dialogAnatomy.parts.status,
+				role: "status",
+				style: SR_ONLY,
+				children: announce(needle, tokens.length)
+			}),
+			tokens.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: dialogAnatomy.parts.empty,
+				children: "No tokens found"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: dialogAnatomy.parts.sizer,
+				style: { height: totalHeight },
+				children: [
+					active < start && stray,
+					/* @__PURE__ */ jsx("div", {
+						className: dialogAnatomy.parts.rows,
+						style: { transform: `translateY(${offset}px)` },
+						children: tokens.slice(start, end).map((token, index) => row(token, start + index))
+					}),
+					active >= end && stray
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/TokenInput/TokenSearch.tsx
+/**
+* The token select's filter field.
+*
+* @example
+* <TokenSearch onChange={setQuery} ref={searchRef} value={query} />
+*/
+const TokenSearch = ({ onChange, ref, value }) => /* @__PURE__ */ jsxs("div", {
+	className: dialogAnatomy.parts.searchField,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: dialogAnatomy.parts.searchIcon,
+		children: /* @__PURE__ */ jsx(SearchIcon, {})
+	}), /* @__PURE__ */ jsx("input", {
+		"aria-label": "Search tokens",
+		autoComplete: "off",
+		className: dialogAnatomy.parts.search,
+		onChange: (event) => onChange(event.target.value),
+		placeholder: "Search by name, symbol, id or issuer",
+		ref,
+		spellCheck: false,
+		type: "search",
+		value
+	})]
+});
+//#endregion
+//#region src/components/TokenInput/TokenSelectDialog.tsx
+const TokenSelect = ({ contentId, favoriteIds, onClose, onSelect, returnFocusTo }) => {
+	const searchRef = useRef(null);
+	const [query, setQuery] = useState("");
+	const service = useMachine(dialog.machine, {
+		finalFocusEl: () => returnFocusTo.current,
+		id: useId(),
+		ids: { content: contentId },
+		initialFocusEl: () => searchRef.current,
+		onEscapeKeyDown: (event) => {
+			if (query === "" || document.activeElement !== searchRef.current) return;
+			event.preventDefault();
+			setQuery("");
+		},
+		onOpenChange: (details) => {
+			if (!details.open) onClose();
+		},
+		open: true
+	});
+	const api = dialog.connect(service, normalizeProps);
+	const select = (token) => {
+		onSelect(token);
+		api.setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx("div", {
+		...api.getBackdropProps(),
+		className: dialogAnatomy.parts.backdrop
+	}), /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		className: dialogAnatomy.parts.positioner,
+		children: /* @__PURE__ */ jsxs("div", {
+			...api.getContentProps(),
+			className: dialogAnatomy.parts.content,
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: dialogAnatomy.parts.header,
+					children: [/* @__PURE__ */ jsx("h2", {
+						...api.getTitleProps(),
+						className: dialogAnatomy.parts.title,
+						children: "Select a token"
+					}), /* @__PURE__ */ jsx("button", {
+						...api.getCloseTriggerProps(),
+						"aria-label": "Close",
+						className: dialogAnatomy.parts.close,
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})]
+				}),
+				/* @__PURE__ */ jsx(TokenSearch, {
+					onChange: setQuery,
+					ref: searchRef,
+					value: query
+				}),
+				/* @__PURE__ */ jsx(TokenFavorites, {
+					ids: favoriteIds,
+					onSelect: select
+				}),
+				/* @__PURE__ */ jsx(TokenList, {
+					onSelect: select,
+					query
+				})
+			]
+		})
+	})] });
+};
+/**
+* The dialog `<TokenInput>`'s token button opens.
+*
+* @example
+* <TokenSelectDialog contentId={selectId} onClose={() => setOpen(false)} onSelect={setToken}
+*   open={open} returnFocusTo={triggerRef} />
+*/
+const TokenSelectDialog = ({ open, ...rest }) => open ? /* @__PURE__ */ jsx(TokenSelect, { ...rest }) : null;
+//#endregion
+//#region src/components/TokenInput/caret.ts
+const DIGIT = /\d/;
+const countDigitsAfter = (value, start) => {
+	let digits = 0;
+	for (let index = start; index < value.length; index += 1) if (DIGIT.test(value[index])) digits += 1;
+	return digits;
+};
+const caretBeforeDigits = (display, digits) => {
+	let seen = 0;
+	let index = display.length;
+	while (seen < digits && index > 0) {
+		index -= 1;
+		if (DIGIT.test(display[index])) seen += 1;
+	}
+	return index;
+};
+const dropDigit = (value, caret, forward) => {
+	const step = forward ? 1 : -1;
+	let at = forward ? caret : Math.min(caret, value.length) - 1;
+	while (at >= 0 && at < value.length && !DIGIT.test(value[at])) at += step;
+	if (at < 0 || at >= value.length) return [value, caret];
+	return [`${value.slice(0, at)}${value.slice(at + 1)}`, at];
+};
+//#endregion
+//#region src/components/TokenInput/useFormattedField.ts
+/**
+* Drives a text field whose display is regrouped on every keystroke, keeping the caret where the
+* user left it and undoing edits the sanitizer rejects.
+*
+* @example
+* const field = useFormattedField({ format, sanitize, value, onChange: setValue })
+* return <input onChange={field.onChange} ref={field.ref} value={field.value} />
+*/
+const useFormattedField = ({ format, onChange, sanitize, value }) => {
+	const ref = useRef(null);
+	const pending = useRef(null);
+	const display = format(value);
+	useLayoutEffect(() => {
+		const intent = pending.current;
+		pending.current = null;
+		const field = ref.current;
+		if (field === null || intent === null || intent.value !== value) return;
+		const caret = caretBeforeDigits(field.value, intent.digits);
+		field.setSelectionRange(caret, caret);
+	});
+	return {
+		onChange: (event) => {
+			const typed = event.target.value;
+			const typedAt = event.target.selectionStart ?? typed.length;
+			const inputType = event.nativeEvent.inputType ?? "";
+			const sanitized = sanitize(typed);
+			const stalled = inputType.startsWith("delete") && sanitized === value;
+			const [raw, at] = stalled ? dropDigit(typed, typedAt, inputType.endsWith("Forward")) : [typed, typedAt];
+			const digitsAfter = countDigitsAfter(raw, at);
+			const next = stalled ? sanitize(raw) : sanitized;
+			if (next === value) {
+				const caret = caretBeforeDigits(display, digitsAfter);
+				event.target.value = display;
+				event.target.setSelectionRange(caret, caret);
+			} else pending.current = {
+				digits: digitsAfter,
+				value: next
+			};
+			onChange(next);
+		},
+		ref,
+		value: display
+	};
+};
+//#endregion
+//#region src/components/TokenInput/index.tsx
+const ZERO = formatAmount("0.00");
+/**
+* A controlled field for a Canton token amount. The value stays a decimal string end to end, since
+* a `number` cannot carry `Numeric 10` without losing digits; grouping separators are added for
+* reading and stripped on the way back. Max fills from `balance`, which is also the ceiling
+* `onChange` validates against, so the button never offers more than the field will accept.
+* Passing `onTokenSelect` turns the symbol into a picker over the `TokenListProvider` list.
+*
+* @example
+* <TokenInput label="Amount" token={{ symbol: 'CC' }} value={amount} balance={balance}
+*   onChange={(next, error) => { setAmount(next); setError(error) }} />
+*
+* @see [anatomy.ts](https://github.com/BootNodeDev/canton-dappbooster/blob/main/canton-dappbooster/src/components/TokenInput/anatomy.ts) for the part classes and state attributes the theme selects.
+*
+* @category Components
+*/
+const TokenInput = ({ "aria-describedby": describedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, balance, balanceState, className, disabled, favoriteIds, id, label, onBlur, onChange, onFocus, onTokenSelect, usdValue, token, value, ...rest }) => {
+	const generatedId = useId();
+	const fieldId = id ?? generatedId;
+	const balanceId = `${fieldId}-balance`;
+	const tokenId = `${fieldId}-token`;
+	const selectId = `${fieldId}-token-select`;
+	const triggerRef = useRef(null);
+	const bounds = { max: balance };
+	const error = validateAmount(value, bounds);
+	const [invalid, flagged] = resolveInvalid(ariaInvalid, error !== void 0);
+	const [selectOpen, setSelectOpen] = useState(false);
+	const noBalance = !parseAmount(balance ?? "");
+	const balanceText = balanceState === "error" ? "Balance: N/A" : `Balance: ${balance === void 0 ? ZERO : formatAmount(balance)}`;
+	const field = useFormattedField({
+		format: formatAmount,
+		onChange: (next) => onChange(next, validateAmount(next, bounds)),
+		sanitize: sanitizeAmountInput,
+		value
+	});
+	const handleBlur = (event) => {
+		const settled = settleAmount(value);
+		if (settled !== value) onChange(settled, validateAmount(settled, bounds));
+		onBlur?.(event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(anatomy$2.parts.root, className),
+		...rest,
+		[anatomy$2.states.invalid]: flagged || void 0,
+		[anatomy$2.states.disabled]: disabled || void 0,
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsx("label", {
+				className: anatomy$2.parts.label,
+				htmlFor: fieldId,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: anatomy$2.parts.row,
+				children: [/* @__PURE__ */ jsx("input", {
+					"aria-describedby": cx(describedBy, tokenId, balanceId) || void 0,
+					"aria-invalid": invalid,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					autoComplete: "off",
+					className: anatomy$2.parts.field,
+					disabled,
+					id: fieldId,
+					inputMode: "decimal",
+					onBlur: handleBlur,
+					onChange: field.onChange,
+					onFocus,
+					placeholder: ZERO,
+					ref: field.ref,
+					spellCheck: false,
+					type: "text",
+					value: field.value
+				}), onTokenSelect === void 0 ? /* @__PURE__ */ jsxs("span", {
+					className: anatomy$2.parts.token,
+					id: tokenId,
+					children: [/* @__PURE__ */ jsx(TokenLogo, {
+						logo: token.logo,
+						symbol: token.symbol
+					}), token.symbol]
+				}) : /* @__PURE__ */ jsxs("button", {
+					"aria-controls": selectOpen ? selectId : void 0,
+					"aria-expanded": selectOpen,
+					"aria-haspopup": "dialog",
+					className: anatomy$2.parts.token,
+					disabled,
+					onClick: () => setSelectOpen(true),
+					ref: triggerRef,
+					type: "button",
+					[anatomy$2.states.interactive]: true,
+					children: [/* @__PURE__ */ jsx(TokenLogo, {
+						logo: token.logo,
+						symbol: token.symbol
+					}), /* @__PURE__ */ jsx("span", {
+						id: tokenId,
+						children: token.symbol
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: anatomy$2.parts.meta,
+				children: [
+					"~$",
+					usdValue !== void 0 ? /* @__PURE__ */ jsx("span", {
+						className: anatomy$2.parts.usdValue,
+						children: usdValue
+					}) : "0.00",
+					/* @__PURE__ */ jsx("span", {
+						"aria-busy": balanceState === "loading" || void 0,
+						className: anatomy$2.parts.balance,
+						id: balanceId,
+						role: "status",
+						[anatomy$2.states.balance]: balanceState ?? "ready",
+						children: balanceText
+					}),
+					/* @__PURE__ */ jsx("button", {
+						"aria-describedby": balanceId,
+						className: anatomy$2.parts.max,
+						disabled: disabled || balanceState !== void 0 || noBalance,
+						onClick: () => {
+							if (balance !== void 0) onChange(balance, validateAmount(balance, bounds));
+						},
+						type: "button",
+						children: "Max"
+					})
+				]
+			}),
+			onTokenSelect !== void 0 && /* @__PURE__ */ jsx(TokenSelectDialog, {
+				contentId: selectId,
+				favoriteIds,
+				onClose: () => setSelectOpen(false),
+				onSelect: onTokenSelect,
+				open: selectOpen,
+				returnFocusTo: triggerRef
+			})
+		]
+	});
+};
+//#endregion
+//#region src/hooks/useExplorerLink.ts
+const PATHS = {
+	party: "/party",
+	contract: "/contract",
+	update: "/update"
+};
+const HASH = /^[0-9a-f]{64}$/i;
+const CONTRACT_ID = /^00[0-9a-f]{64,}$/i;
+const detectEntity = (value) => {
+	if (isValidPartyId(value)) return "party";
+	if (HASH.test(value)) return "update";
+	if (CONTRACT_ID.test(value)) return "contract";
+};
+const requireBaseUrl = (baseUrl) => {
+	const trimmed = baseUrl.trim();
+	if (!trimmed) throw new Error("Explorer baseUrl is required");
+	return trimmed.replace(/\/$/, "");
+};
+/**
+* Builds an explorer URL for a Canton identifier. Returns `undefined` whenever no link can be made.
+*
+* @throws when `explorer.baseUrl` is empty or blank, which is a misconfigured app rather than a
+* missing link.
+*
+* @example
+* getExplorerLink({ explorer, value: partyId })
+* // 'https://scan.example/party/…', the party shape having matched on its own
+* getExplorerLink({ explorer, value: '1220df94a1', entity: 'update' })
+* // 'https://scan.example/update/1220df94a1', the entity overriding a shape that matched nothing
+* getExplorerLink({ explorer, value: 'nico' })
+* // undefined: no shape matched, and no entity said otherwise
+*
+* @category Utilities
+*/
+const getExplorerLink = ({ explorer, value, entity }) => {
+	const baseUrl = requireBaseUrl(explorer.baseUrl);
+	if (!value) return void 0;
+	const resolved = entity ?? detectEntity(value);
+	if (resolved === void 0) return void 0;
+	return `${baseUrl}${PATHS[resolved]}/${encodeURIComponent(value)}`;
+};
+/**
+* Holds an explorer config so call sites pass only an identifier, and returns
+* {@link getExplorerLink} bound to it.
+*
+* @throws on render when `explorer.baseUrl` is empty or blank, as {@link getExplorerLink} does.
+*
+* @example
+* const explorerLink = useExplorerLink({ baseUrl: 'https://scan.example' })
+* <Identifier value={partyId} href={explorerLink(partyId)} />
+* <Identifier value={cid} href={explorerLink(cid, 'contract')} />
+* // no href at all where the value matched no shape and no entity said otherwise
+*
+* @category Hooks
+*/
+const useExplorerLink = (explorer) => {
+	const baseUrl = requireBaseUrl(explorer.baseUrl);
+	return useCallback((value, entity) => getExplorerLink({
+		explorer: { baseUrl },
+		value,
+		entity
+	}), [baseUrl]);
+};
+//#endregion
+//#region src/providers/ThemeProvider/anatomy.ts
+const anatomy = { states: { theme: "data-theme" } };
+//#endregion
+//#region src/providers/ThemeProvider/constants.ts
+const DEFAULT_STORAGE_KEY = "cnc-theme";
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+//#endregion
+//#region src/providers/ThemeProvider/context.ts
+const ThemeContext = createContext(void 0);
+//#endregion
+//#region src/providers/ThemeProvider/index.tsx
+const prefersDark = () => window.matchMedia(DARK_QUERY).matches;
+const subscribePrefersDark = (onChange) => {
+	const query = window.matchMedia(DARK_QUERY);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+};
+const readMode = (storageKey) => {
+	try {
+		const stored = localStorage.getItem(storageKey);
+		return stored === "light" || stored === "dark" ? stored : "system";
+	} catch {
+		return "system";
+	}
+};
+/**
+* Owns the light / dark / system choice: persists it, follows the OS while on `system`, tracks the
+* key across tabs, and writes the resolved value to `data-theme` on `<html>`, which is what
+* `@bootnodedev/canton-theme` keys its dark values on. Renders no DOM of its own.
+*
+* The attribute lands before the tree below it paints, but not before the page background; that
+* flash is accepted, and `architecture.md` has the reasoning. Client-only, because it reads the OS
+* preference while picking its initial state, so a server render throws.
+*
+* @see [anatomy.ts](https://github.com/BootNodeDev/canton-dappbooster/blob/main/canton-dappbooster/src/providers/ThemeProvider/anatomy.ts) for the state attribute the theme selects.
+*
+* @example
+* createRoot(el).render(
+*   <ThemeProvider>
+*     <App />
+*   </ThemeProvider>,
+* )
+*
+* @category Components
+*/
+const ThemeProvider = ({ children, storageKey = DEFAULT_STORAGE_KEY }) => {
+	const [mode, setStoredMode] = useState(() => readMode(storageKey));
+	const systemDark = useSyncExternalStore(subscribePrefersDark, prefersDark);
+	const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
+	useLayoutEffect(() => {
+		document.documentElement.setAttribute(anatomy.states.theme, resolved);
+	}, [resolved]);
+	useEffect(() => {
+		const onStorage = (event) => {
+			if (event.key === null || event.key === storageKey) setStoredMode(readMode(storageKey));
+		};
+		window.addEventListener("storage", onStorage);
+		return () => window.removeEventListener("storage", onStorage);
+	}, [storageKey]);
+	const setMode = useCallback((next) => {
+		setStoredMode(next);
+		try {
+			localStorage.setItem(storageKey, next);
+		} catch {}
+	}, [storageKey]);
+	const value = useMemo(() => ({
+		mode,
+		resolved,
+		setMode,
+		toggle: () => setMode(resolved === "dark" ? "light" : "dark")
+	}), [
+		mode,
+		resolved,
+		setMode
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+};
+//#endregion
+//#region src/providers/ThemeProvider/useTheme.ts
+/**
+* Reads and sets the theme mode.
+*
+* @throws with no {@link ThemeProvider} above it. There is no ambient fallback, because a control
+* that silently fails to switch is worse than one that throws in dev.
+*
+* @example
+* const { resolved, toggle } = useTheme()
+* <button onClick={toggle}>{resolved === 'dark' ? 'Light' : 'Dark'} mode</button>
+*
+* @category Hooks
+*/
+const useTheme = () => {
+	const value = useContext(ThemeContext);
+	if (value === void 0) throw new Error("useTheme must be used inside a <ThemeProvider>");
+	return value;
+};
+//#endregion
+//#region src/providers/TokenListProvider/index.tsx
+const held = (token) => parseAmount(token.balance ?? "") ?? -1n;
+const byBalance = (left, right) => {
+	if (left.held === right.held) return 0;
+	return left.held > right.held ? -1 : 1;
+};
+/**
+* Supplies the token list every picker in the tree chooses from.
+*
+* @example
+* <TokenListProvider tokens={tokens}>
+*   <TokenInput label="Amount" token={selected} value={amount} onChange={setAmount}
+*     onTokenSelect={setSelected} />
+* </TokenListProvider>
+*
+* @category Components
+*/
+const TokenListProvider = ({ children, tokens }) => {
+	const value = useMemo(() => {
+		const sorted = tokens.map((token) => ({
+			held: held(token),
+			token
+		})).sort(byBalance).map(({ token }) => token);
+		return {
+			byKey: new Map(sorted.map((token) => [tokenKey(token.instrumentId), token])),
+			tokens: sorted
+		};
+	}, [tokens]);
+	return /* @__PURE__ */ jsx(TokenListContext.Provider, {
+		value,
+		children
+	});
+};
+//#endregion
+//#region src/utils/mergeTokens.ts
+const fill = (into, from) => {
+	const merged = { ...into };
+	for (const [field, value] of Object.entries(from)) if (value !== void 0) Object.assign(merged, { [field]: value });
+	return merged;
+};
+/**
+* Builds one row per instrument out of every source that knows about it, later sources winning
+* field by field. A row is a token the picker can offer, so the union is the catalogue and a
+* holdings source only annotates it: a token nobody holds is still a row, and one nothing named is
+* a row under its own id.
+*
+* @example
+* mergeTokens([[{ instrumentId, symbol: 'CC' }], sumHoldings(holdings)])
+*
+* @category Utilities
+*/
+const mergeTokens = (sources) => {
+	const rows = /* @__PURE__ */ new Map();
+	for (const source of sources) for (const partial of source) {
+		const key = tokenKey(partial.instrumentId);
+		rows.set(key, fill(rows.get(key) ?? { instrumentId: partial.instrumentId }, partial));
+	}
+	return [...rows.values()].map((row) => ({
+		...row,
+		name: row.name ?? row.instrumentId.id,
+		symbol: row.symbol ?? row.instrumentId.id
+	}));
+};
+//#endregion
+//#region src/utils/readInstruments.ts
+const METADATA = "registry/metadata/v1";
+const MAX_PAGES = 100;
+const get = async (url) => {
+	const response = await fetch(url, { headers: { accept: "application/json" } });
+	if (!response.ok) throw new Error(`${url} answered ${response.status}`);
+	return await response.json();
+};
+const toInstrument = (admin, value) => {
+	const { decimals, id, name, symbol } = asRecord(value) ?? {};
+	if (typeof id !== "string" || typeof name !== "string" || typeof symbol !== "string") return;
+	return {
+		decimals: typeof decimals === "number" ? decimals : 10,
+		instrumentId: {
+			admin,
+			id
+		},
+		name,
+		symbol
+	};
+};
+const toPage = (value) => {
+	const { instruments, nextPageToken } = asRecord(value) ?? {};
+	return {
+		instruments: Array.isArray(instruments) ? instruments : [],
+		nextPageToken: typeof nextPageToken === "string" && nextPageToken !== "" ? nextPageToken : void 0
+	};
+};
+/**
+* Reads a registry's instrument metadata, following its pages up to a limit of 100, so the answer
+* is the registry's whole catalogue and a registry that will not stop paging cannot hang the caller.
+*
+* @throws where either request answers anything but 200, or the reply is not JSON.
+*
+* @example
+* const instruments = await readInstruments('https://registry.example/api')
+*
+* @category Utilities
+*/
+const readInstruments = async (registryUrl) => {
+	const base = `${registryUrl.replace(/\/$/, "")}/${METADATA}`;
+	const admin = asRecord(await get(`${base}/info`))?.adminId;
+	if (typeof admin !== "string") throw new Error(`${base}/info returned no adminId`);
+	const found = [];
+	const followed = /* @__PURE__ */ new Set();
+	let pageToken;
+	while (followed.size <= MAX_PAGES) {
+		const query = pageToken === void 0 ? "" : `?pageToken=${encodeURIComponent(pageToken)}`;
+		const page = toPage(await get(`${base}/instruments${query}`));
+		for (const value of page.instruments) {
+			const instrument = toInstrument(admin, value);
+			if (instrument !== void 0) found.push(instrument);
+		}
+		if (page.nextPageToken === void 0 || followed.has(page.nextPageToken)) break;
+		followed.add(page.nextPageToken);
+		pageToken = page.nextPageToken;
+	}
+	return found;
+};
+//#endregion
+//#region src/utils/sumHoldings.ts
+/**
+* Groups a holdings read by instrument and sums it, spendable apart from locked.
+*
+* @example
+* sumHoldings([{ amount: '1.5', instrumentId, isLocked: false }])
+* // [{ balance: '1.5', instrumentId, locked: '0' }]
+*
+* @category Utilities
+*/
+const sumHoldings = (holdings) => {
+	const totals = /* @__PURE__ */ new Map();
+	for (const { amount, instrumentId, isLocked } of holdings) {
+		const scaled = parseAmount(amount);
+		if (scaled === void 0) continue;
+		const key = tokenKey(instrumentId);
+		const at = totals.get(key) ?? {
+			balance: 0n,
+			instrumentId,
+			locked: 0n
+		};
+		totals.set(key, isLocked ? {
+			...at,
+			locked: at.locked + scaled
+		} : {
+			...at,
+			balance: at.balance + scaled
+		});
+	}
+	return [...totals.values()].map(({ balance, instrumentId, locked }) => ({
+		balance: formatScaled(balance),
+		instrumentId,
+		locked: formatScaled(locked)
+	}));
+};
+//#endregion
+export { DEFAULT_PRECISION, ExplorerLink, Identifier, PartyIdInput, ThemeProvider, TokenInput, TokenListProvider, formatAmount, formatFigure, formatScaled, getExplorerLink, isValidPartyId, mergeTokens, parseAmount, partyHint, readInstruments, sanitizeAmountInput, sumHoldings, tokenKey, truncateIdentifier, useCopyToClipboard, useExplorerLink, useTheme, useTokenList, validateAmount, validatePartyId };