@valve-tech/tx-flight-react 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+All notable changes to `@valve-tech/tx-flight-react` are documented in
+this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [Unreleased]
+
+Full v0.9.0 surface ships in the synchronized toolkit release.
+
+## [0.0.1] — 2026-05-08
+
+Name-claim publish so the npm trusted-publisher record can be wired
+before the synced v0.9.0 release. No usable surface — the package
+exports its types but the implementation lands at v0.9.0.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Valve Tech
+
+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,283 @@
+# `@valve-tech/tx-flight-react`
+
+React UI primitives for an in-flight transaction strip. Provider,
+hook, atomic + layout components, pluggable storage. Sits on top of
+[`@valve-tech/wallet-adapter`](../wallet-adapter) (the lifecycle
+vocabulary) and
+[`@valve-tech/tx-tracker`](../tx-tracker) (the per-tx state machine);
+both are **optional** peer deps so the package supports either or
+both integration shapes without forcing a hard dependency.
+
+Part of the
+[`valve-tech/evm-toolkit`](https://github.com/valve-tech/evm-toolkit)
+synchronized release line.
+
+## Why
+
+Every dapp ends up rebuilding the same "in-flight strip": a list of
+recently-submitted txs that show pending → confirmed | failed |
+dropped | replaced, with a hash link to the explorer, an age display,
+and (sometimes) speed-up / cancel buttons. The pieces are simple
+individually but stitching them together — Provider state, storage,
+debounce, eviction, reorg handling, persisting across reload — is
+several hundred lines of boilerplate per app.
+
+This package ships those pieces as headless components and a single
+hook. Bring your own styles, bring your own wallet, optionally bring
+your own tracker. The strip handles the lifecycle wiring.
+
+## Install
+
+```sh
+npm install @valve-tech/tx-flight-react viem
+# Optional peers — install only the integration shape(s) you need:
+npm install @valve-tech/wallet-adapter         # for addWithWalletAdapter
+npm install @valve-tech/tx-tracker @valve-tech/chain-source   # for addByHash
+```
+
+React 18 or 19, viem ^2.
+
+## 30-second quickstart
+
+```tsx
+import {
+  TxFlightProvider,
+  TxFlightList,
+  useTxFlight,
+} from '@valve-tech/tx-flight-react'
+
+// 1. Wrap your app
+function App() {
+  return (
+    <TxFlightProvider>
+      <Header />
+      <TxFlightList />   {/* renders the strip */}
+      <YourApp />
+    </TxFlightProvider>
+  )
+}
+
+// 2. Use the hook from anywhere inside the Provider tree
+function SubmitButton() {
+  const flight = useTxFlight()
+  return (
+    <button onClick={() => {
+      flight.addManual({
+        tx: {
+          id: crypto.randomUUID(),
+          chainId: 1,
+          flow: 'send',
+          submittedAt: Date.now(),
+          submittedTier: 'standard',
+          status: 'pending',
+        },
+      })
+    }}>
+      Submit
+    </button>
+  )
+}
+```
+
+That's a working strip with persistence to localStorage, eviction
+after 60s of terminal lifetime, and a 50-item cap.
+
+## Public surface
+
+### Provider
+
+```tsx
+<TxFlightProvider
+  id="default"                          // string — scopes state + storage key
+  storage={localStorageAdapter()}       // TxFlightStorage | null — null disables persistence
+  maxItems={50}                         // cap on retained entries
+  terminalRetentionMs={60_000}          // how long terminals linger
+  onError={(method, err) => ...}        // surfaced for storage / watcher errors
+  clientFactory={(chainId) => client}   // optional: enable rehydrate watcher revival
+>
+  ...
+</TxFlightProvider>
+```
+
+### Hook
+
+```tsx
+const flight = useTxFlight()                   // ambient id
+const flight = useTxFlight('settings-page')    // explicit id
+
+flight.txs                                     // ReadonlyArray<TrackedTx>
+flight.addWithWalletAdapter(input)             // { id, hooks: WriteHookParams }
+flight.addByHash(input)                        // Promise<string>
+flight.addManual(input)                        // string
+flight.remove(id)                              // void
+flight.clear()                                 // void
+flight.get(id)                                 // TrackedTx | null
+```
+
+Throws if no `<TxFlightProvider>` for the resolved id is in the tree.
+
+### Components
+
+| Component | RSC-safe | Purpose |
+|---|---|---|
+| `<TxFlightList>` | no (uses hook) | Reactive list. Defaults to newest-first by `submittedAt`, optional `filter` / `sort` / `render` / `empty` props. |
+| `<TxFlightItem>` | yes | Default per-tx layout (icon + hash + age + actions). `render` prop swaps the layout while keeping the four atomic children. |
+| `<TxFlightStatusIcon>` | yes | Colored dot per status. `size` (default 16). |
+| `<TxFlightHashLink>` | yes | `<a>` to explorer (or plain `<span>` fallback when no `explorer` is supplied). Truncation modes: `'middle'` \| `'end'` \| `'none'`. |
+| `<TxFlightAge>` | no (uses `useEffect`) | Periodic relative-time display. `format` swaps the wording. |
+| `<TxFlightActions>` | yes | Speed-up / cancel / dismiss button slots. Renders nothing when no callbacks are wired. |
+
+Every component accepts `className` and `style`.
+
+### Storage adapters
+
+```ts
+import {
+  localStorageAdapter,
+  indexedDBAdapter,
+  memoryAdapter,
+} from '@valve-tech/tx-flight-react/storage'
+```
+
+| Adapter | When to use |
+|---|---|
+| `localStorageAdapter({ keyPrefix? })` | Default. Sync API; SSR-safe (no-op when `window` is undefined). |
+| `indexedDBAdapter({ dbName?, storeName? })` | Larger payloads, async. |
+| `memoryAdapter()` | Tests, or "explicit no persistence". |
+
+A consumer-built adapter just satisfies the two-method `TxFlightStorage`
+interface (`load(id) → Promise<TrackedTx[] | null>`,
+`save(id, txs) → Promise<void>`).
+
+## Three add shapes
+
+The strip's lifecycle starts when you call one of three add methods.
+Each has its own input type and return; there is no overloaded
+discriminated `via:` field.
+
+### `addWithWalletAdapter` — when you're using `@valve-tech/wallet-adapter`
+
+```tsx
+import { sendTransactionWithHooks } from '@valve-tech/wallet-adapter'
+
+const flight = useTxFlight()
+
+const userHooks = {
+  onConfirmed: (info) => myToast(`tx ${info.hash} confirmed`),
+}
+
+const { id, hooks } = flight.addWithWalletAdapter({
+  hooks: userHooks,
+  flow: 'mint',
+  chainId: 1,
+  request: { to: contract, data, value: 0n, chainId: 1 },
+})
+
+// Pipe the wrapped hooks straight into wallet-adapter's helper.
+// Each phase fires BOTH your original callback AND a store update.
+await sendTransactionWithHooks({ wallet, request, hooks })
+```
+
+Sync. Wallet-adapter is statically imported (only types — no runtime
+bundle cost).
+
+### `addByHash` — when you have a hash and a viem `PublicClient`
+
+```tsx
+const id = await flight.addByHash({
+  hash: '0xabc...',
+  chainId: 1,
+  client: publicClient,
+  flow: 'claim',
+  withReceipts: true,    // opt into reverted-receipt detection
+  confirmations: 3,
+})
+```
+
+Async — `@valve-tech/tx-tracker` and `@valve-tech/chain-source` are
+**dynamic-imported** so wallet-adapter-only consumers don't pay the
+bundle cost. The strip builds a private ChainSource + TxTracker
+internally; `flight.remove(id)` (or unmount) cleans up the
+subscription.
+
+### `addManual` — when you already have a fully-formed `TrackedTx`
+
+```tsx
+const id = flight.addManual({
+  tx: {
+    id: crypto.randomUUID(),
+    hash: '0xabc...',
+    chainId: 1,
+    flow: 'observed-elsewhere',
+    submittedAt: Date.now(),
+    submittedTier: 'standard',
+    status: 'pending',
+  },
+})
+```
+
+Sync. Useful for back-fill (server push, observed-elsewhere txs). The
+strip stores the entry verbatim; subsequent updates are the consumer's
+responsibility (call `addManual` again with the same `tx.id` to
+overwrite, or `flight.remove(id)` to drop).
+
+## Persistence + rehydrate
+
+By default state persists to `localStorage` under the key
+`tx-flight:${id}`, debounced ~250ms. On Provider mount, persisted
+entries are seeded back into state.
+
+Rehydrate semantics:
+- `pending` with `hash` set, **and** `clientFactory` is wired: a fresh
+  tx-tracker watcher is async-attached so the entry continues
+  advancing toward terminal.
+- `pending` without `clientFactory`: stays `pending` until you
+  manually re-issue `addByHash`.
+- `preparing` / `awaiting-signature`: translated to `failed` with
+  `notes: 'lost during reload'` — wallet interactions cannot resume
+  across reloads.
+- Terminal entries (`confirmed` / `failed` / `dropped` / `replaced`):
+  preserved verbatim until the eviction interval prunes them past
+  `terminalRetentionMs`.
+
+Set `clientFactory` if you want pending entries to keep advancing
+after a reload:
+
+```tsx
+<TxFlightProvider
+  clientFactory={(chainId) => myPublicClients[chainId]}
+>
+```
+
+## Multi-instance
+
+Two providers with the same `id` share one underlying store via
+refCount; useful for nested layouts where the same logical strip is
+mounted in more than one place. Different `id`s are fully independent
+(different in-memory state, different storage key).
+
+```tsx
+<TxFlightProvider id="main">
+  <Layout>
+    <TxFlightProvider id="settings-page">
+      ...
+    </TxFlightProvider>
+  </Layout>
+</TxFlightProvider>
+```
+
+## SSR / RSC
+
+The Provider is a `'use client'` component. Atomic components without
+hooks (`StatusIcon`, `HashLink`, `Actions`, `Item`) are RSC-safe.
+`<TxFlightAge>` and `<TxFlightList>` use hooks (`useEffect`,
+`useTxFlight`) and are client-only.
+
+`localStorageAdapter` no-ops on the server (`typeof window ===
+'undefined'`). The Provider's heavyweight side effects (eviction
+interval, storage IO, watcher subscriptions) live inside `useEffect`
+and never run during `renderToString`.
+
+## License
+
+MIT

package/dist/components/actions.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview `<TxFlightActions>` — button slots for speed-up,
+ * cancel, and dismiss. Renders nothing when no callbacks are wired
+ * (forces consumers to opt in; no orphan buttons).
+ *
+ * The actual `replaceTransaction` plumbing is the consumer's
+ * responsibility (different wallets, different gas-recommendation
+ * strategies). This component just exposes click handlers carrying
+ * the relevant `tx`.
+ */
+import type { CSSProperties, ReactNode } from 'react';
+import type { TrackedTx } from '@valve-tech/wallet-adapter';
+export interface TxFlightActionsShow {
+    speedUp?: boolean;
+    cancel?: boolean;
+    dismiss?: boolean;
+}
+export interface TxFlightActionsProps {
+    tx: TrackedTx;
+    onSpeedUp?: (tx: TrackedTx) => void;
+    onCancel?: (tx: TrackedTx) => void;
+    onDismiss?: (tx: TrackedTx) => void;
+    /**
+     * Per-button visibility override. Default: each button is shown iff
+     * the matching callback is supplied.
+     */
+    show?: TxFlightActionsShow;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const TxFlightActions: ({ tx, onSpeedUp, onCancel, onDismiss, show, className, style, }: TxFlightActionsProps) => ReactNode;
+//# sourceMappingURL=actions.d.ts.map

package/dist/components/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/components/actions.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE3D,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,SAAS,CAAA;IACb,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAED,eAAO,MAAM,eAAe,oEAQzB,oBAAoB,KAAG,SAsCzB,CAAA"}

package/dist/components/actions.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TxFlightActions = ({ tx, onSpeedUp, onCancel, onDismiss, show, className, style, }) => {
+    const showSpeedUp = (show?.speedUp ?? true) && onSpeedUp !== undefined;
+    const showCancel = (show?.cancel ?? true) && onCancel !== undefined;
+    const showDismiss = (show?.dismiss ?? true) && onDismiss !== undefined;
+    if (!showSpeedUp && !showCancel && !showDismiss)
+        return null;
+    return (_jsxs("div", { className: className, style: style, "data-tx-id": tx.id, children: [showSpeedUp && (_jsx("button", { type: "button", "data-action": "speed-up", onClick: () => onSpeedUp?.(tx), children: "Speed up" })), showCancel && (_jsx("button", { type: "button", "data-action": "cancel", onClick: () => onCancel?.(tx), children: "Cancel" })), showDismiss && (_jsx("button", { type: "button", "data-action": "dismiss", onClick: () => onDismiss?.(tx), children: "Dismiss" }))] }));
+};
+//# sourceMappingURL=actions.js.map

package/dist/components/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../../src/components/actions.tsx"],"names":[],"mappings":";AAmCA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EACF,SAAS,EACT,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,KAAK,GACgB,EAAa,EAAE;IACpC,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC,IAAI,SAAS,KAAK,SAAS,CAAA;IACtE,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,IAAI,IAAI,CAAC,IAAI,QAAQ,KAAK,SAAS,CAAA;IACnE,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC,IAAI,SAAS,KAAK,SAAS,CAAA;IAEtE,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,CAAA;IAE5D,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,gBAAc,EAAE,CAAC,EAAE,aACvD,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,iBACD,UAAU,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,yBAGvB,CACV,EACA,UAAU,IAAI,CACb,iBACE,IAAI,EAAC,QAAQ,iBACD,QAAQ,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,uBAGtB,CACV,EACA,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,iBACD,SAAS,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,wBAGvB,CACV,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/components/age.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @fileoverview `<TxFlightAge>` — relative-time display that
+ * auto-refreshes on a periodic tick.
+ *
+ * Client-only because of the `useEffect` interval. The default format
+ * yields English copy: 'just now', '12s ago', '3m ago', '4h ago'.
+ * Consumer-supplied `format` swaps in any locale / wording.
+ */
+import { type CSSProperties, type ReactNode } from 'react';
+export interface TxFlightAgeProps {
+    /** Submission time (ms since epoch). */
+    submittedAt: number;
+    /** How often to re-render. Default: 1000ms. */
+    refreshIntervalMs?: number;
+    /** Custom relative-time formatter. Default: English. */
+    format?: (deltaMs: number) => string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const TxFlightAge: ({ submittedAt, refreshIntervalMs, format, className, style, }: TxFlightAgeProps) => ReactNode;
+//# sourceMappingURL=age.d.ts.map

package/dist/components/age.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"age.d.ts","sourceRoot":"","sources":["../../src/components/age.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAS/E,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAA;IACnB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAED,eAAO,MAAM,WAAW,kEAMrB,gBAAgB,KAAG,SAWrB,CAAA"}

package/dist/components/age.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @fileoverview `<TxFlightAge>` — relative-time display that
+ * auto-refreshes on a periodic tick.
+ *
+ * Client-only because of the `useEffect` interval. The default format
+ * yields English copy: 'just now', '12s ago', '3m ago', '4h ago'.
+ * Consumer-supplied `format` swaps in any locale / wording.
+ */
+import { useEffect, useState } from 'react';
+const defaultFormat = (deltaMs) => {
+    if (deltaMs < 5000)
+        return 'just now';
+    if (deltaMs < 60000)
+        return `${Math.floor(deltaMs / 1000)}s ago`;
+    if (deltaMs < 3600000)
+        return `${Math.floor(deltaMs / 60000)}m ago`;
+    return `${Math.floor(deltaMs / 3600000)}h ago`;
+};
+export const TxFlightAge = ({ submittedAt, refreshIntervalMs = 1000, format = defaultFormat, className, style, }) => {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const t = setInterval(() => setNow(Date.now()), refreshIntervalMs);
+        return () => clearInterval(t);
+    }, [refreshIntervalMs]);
+    return (_jsx("span", { className: className, style: style, children: format(now - submittedAt) }));
+};
+//# sourceMappingURL=age.js.map

package/dist/components/age.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"age.js","sourceRoot":"","sources":["../../src/components/age.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAsC,MAAM,OAAO,CAAA;AAE/E,MAAM,aAAa,GAAG,CAAC,OAAe,EAAU,EAAE;IAChD,IAAI,OAAO,GAAG,IAAK;QAAE,OAAO,UAAU,CAAA;IACtC,IAAI,OAAO,GAAG,KAAM;QAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;IACjE,IAAI,OAAO,GAAG,OAAS;QAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAM,CAAC,OAAO,CAAA;IACtE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAS,CAAC,OAAO,CAAA;AAClD,CAAC,CAAA;AAaD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,WAAW,EACX,iBAAiB,GAAG,IAAI,EACxB,MAAM,GAAG,aAAa,EACtB,SAAS,EACT,KAAK,GACY,EAAa,EAAE;IAChC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,iBAAiB,CAAC,CAAA;QAClE,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IACvB,OAAO,CACL,eAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YACrC,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,GACrB,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/components/hash-link.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @fileoverview `<TxFlightHashLink>` — renders a tx hash with optional
+ * explorer URL. RSC-safe (no hooks, no `'use client'`).
+ *
+ * If `explorer` is supplied, returns an `<a>` to the URL it builds; if
+ * not, returns a plain `<span>`. When `tx.hash` is undefined (preparing
+ * / awaiting-signature), renders an em-dash placeholder.
+ */
+import type { CSSProperties, ReactNode } from 'react';
+import type { TrackedTx } from '@valve-tech/wallet-adapter';
+export type HashTruncate = 'middle' | 'end' | 'none';
+export interface TxFlightHashLinkProps {
+    tx: TrackedTx;
+    /**
+     * URL builder. When omitted, the hash renders as plain text (no
+     * anchor) — silent graceful degradation. Provider-level default
+     * lives at a separate `defaultExplorer` prop (see spec §4.2).
+     */
+    explorer?: (tx: TrackedTx) => string;
+    /** Truncation style for the displayed hash. Default: 'middle'. */
+    truncate?: HashTruncate;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const TxFlightHashLink: ({ tx, explorer, truncate, className, style, }: TxFlightHashLinkProps) => ReactNode;
+//# sourceMappingURL=hash-link.d.ts.map

package/dist/components/hash-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash-link.d.ts","sourceRoot":"","sources":["../../src/components/hash-link.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAA;AAEpD,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,SAAS,CAAA;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,MAAM,CAAA;IACpC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAQD,eAAO,MAAM,gBAAgB,kDAM1B,qBAAqB,KAAG,SA6B1B,CAAA"}

package/dist/components/hash-link.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const truncateHash = (hash, mode) => {
+    if (mode === 'none')
+        return hash;
+    if (mode === 'end')
+        return `${hash.slice(0, 10)}…`;
+    return `${hash.slice(0, 6)}…${hash.slice(-4)}`;
+};
+export const TxFlightHashLink = ({ tx, explorer, truncate = 'middle', className, style, }) => {
+    if (tx.hash === undefined) {
+        return (_jsx("span", { className: className, style: style, "data-tx-hash": "", children: "\u2014" }));
+    }
+    const display = truncateHash(tx.hash, truncate);
+    const url = explorer?.(tx);
+    if (url === undefined) {
+        return (_jsx("span", { className: className, style: style, "data-tx-hash": tx.hash, children: display }));
+    }
+    return (_jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: className, style: style, "data-tx-hash": tx.hash, children: display }));
+};
+//# sourceMappingURL=hash-link.js.map

package/dist/components/hash-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash-link.js","sourceRoot":"","sources":["../../src/components/hash-link.tsx"],"names":[],"mappings":";AA6BA,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,IAAkB,EAAU,EAAE;IAChE,IAAI,IAAI,KAAK,MAAM;QAAE,OAAO,IAAI,CAAA;IAChC,IAAI,IAAI,KAAK,KAAK;QAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAA;IAClD,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAChD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,EAAE,EACF,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,SAAS,EACT,KAAK,GACiB,EAAa,EAAE;IACrC,IAAI,EAAE,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,CACL,eAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,kBAAe,EAAE,uBAElD,CACR,CAAA;IACH,CAAC;IACD,MAAM,OAAO,GAAG,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;IAC/C,MAAM,GAAG,GAAG,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAA;IAC1B,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACtB,OAAO,CACL,eAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,kBAAgB,EAAE,CAAC,IAAI,YAC5D,OAAO,GACH,CACR,CAAA;IACH,CAAC;IACD,OAAO,CACL,YACE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,kBACE,EAAE,CAAC,IAAI,YAEpB,OAAO,GACN,CACL,CAAA;AACH,CAAC,CAAA"}

package/dist/components/item.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview `<TxFlightItem>` — default per-tx layout. Composes the
+ * atomic primitives (StatusIcon, HashLink, Age, Actions). The `render`
+ * prop replaces the default layout entirely while still receiving the
+ * pre-built atomic ReactNodes; consumers can rearrange or wrap them.
+ */
+import type { CSSProperties, ReactNode } from 'react';
+import type { TrackedTx } from '@valve-tech/wallet-adapter';
+export interface TxFlightItemRenderParts {
+    icon: ReactNode;
+    hash: ReactNode;
+    age: ReactNode;
+    actions: ReactNode;
+}
+export interface TxFlightItemProps {
+    tx: TrackedTx;
+    /**
+     * Replace the default layout. Receives the four atomic primitives
+     * pre-built — the consumer rearranges them or wraps them in their
+     * own markup.
+     */
+    render?: (parts: TxFlightItemRenderParts) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const TxFlightItem: ({ tx, render, className, style, }: TxFlightItemProps) => ReactNode;
+//# sourceMappingURL=item.d.ts.map

package/dist/components/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/components/item.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAO3D,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAA;IACf,IAAI,EAAE,SAAS,CAAA;IACf,GAAG,EAAE,SAAS,CAAA;IACd,OAAO,EAAE,SAAS,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,SAAS,CAAA;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAA;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAED,eAAO,MAAM,YAAY,sCAKtB,iBAAiB,KAAG,SAsBtB,CAAA"}

package/dist/components/item.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TxFlightActions } from './actions.js';
+import { TxFlightAge } from './age.js';
+import { TxFlightHashLink } from './hash-link.js';
+import { TxFlightStatusIcon } from './status-icon.js';
+export const TxFlightItem = ({ tx, render, className, style, }) => {
+    const parts = {
+        icon: _jsx(TxFlightStatusIcon, { status: tx.status }),
+        hash: _jsx(TxFlightHashLink, { tx: tx }),
+        age: _jsx(TxFlightAge, { submittedAt: tx.submittedAt }),
+        actions: _jsx(TxFlightActions, { tx: tx }),
+    };
+    if (render) {
+        return (_jsx("div", { className: className, style: style, "data-tx-id": tx.id, "data-status": tx.status, children: render(parts) }));
+    }
+    return (_jsxs("div", { className: className, style: style, "data-tx-id": tx.id, "data-status": tx.status, children: [parts.icon, parts.hash, parts.age, parts.actions] }));
+};
+//# sourceMappingURL=item.js.map

package/dist/components/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../src/components/item.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAqBrD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,MAAM,EACN,SAAS,EACT,KAAK,GACa,EAAa,EAAE;IACjC,MAAM,KAAK,GAA4B;QACrC,IAAI,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAE,EAAE,CAAC,MAAM,GAAI;QAC/C,IAAI,EAAE,KAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;QAClC,GAAG,EAAE,KAAC,WAAW,IAAC,WAAW,EAAE,EAAE,CAAC,WAAW,GAAI;QACjD,OAAO,EAAE,KAAC,eAAe,IAAC,EAAE,EAAE,EAAE,GAAI;KACrC,CAAA;IACD,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,gBAAc,EAAE,CAAC,EAAE,iBAAe,EAAE,CAAC,MAAM,YAC/E,MAAM,CAAC,KAAK,CAAC,GACV,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,gBAAc,EAAE,CAAC,EAAE,iBAAe,EAAE,CAAC,MAAM,aAC/E,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,GAAG,EACT,KAAK,CAAC,OAAO,IACV,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/components/list.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview `<TxFlightList>` — reactive list of tracked txs.
+ * Reads the strip's state via `useTxFlight(id)` (so client-only).
+ *
+ * Defaults to newest-first by `submittedAt`, no filter, default
+ * per-tx layout via `<TxFlightItem>`. Every prop is opt-in
+ * customization; bare `<TxFlightList />` is enough for a working
+ * strip in the ambient Provider.
+ */
+import type { CSSProperties, ReactNode } from 'react';
+import type { TrackedTx } from '@valve-tech/wallet-adapter';
+export interface TxFlightListProps {
+    /** Provider id to read from. Defaults to the ambient context's id. */
+    id?: string;
+    /** Filter predicate. Default: include all. */
+    filter?: (tx: TrackedTx) => boolean;
+    /** Sort comparator. Default: newest-first by `submittedAt`. */
+    sort?: (a: TrackedTx, b: TrackedTx) => number;
+    /** Per-tx renderer. Default: `<TxFlightItem tx={tx} />`. */
+    render?: (tx: TrackedTx) => ReactNode;
+    /** Shown when the visible set is empty. */
+    empty?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const TxFlightList: ({ id, filter, sort, render, empty, className, style, }: TxFlightListProps) => ReactNode;
+//# sourceMappingURL=list.d.ts.map

package/dist/components/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/components/list.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAK3D,MAAM,WAAW,iBAAiB;IAChC,sEAAsE;IACtE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,OAAO,CAAA;IACnC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,KAAK,MAAM,CAAA;IAC7C,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,SAAS,CAAA;IACrC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AASD,eAAO,MAAM,YAAY,2DAQtB,iBAAiB,KAAG,SAStB,CAAA"}

package/dist/components/list.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTxFlight } from '../use-tx-flight.js';
+import { TxFlightItem } from './item.js';
+const defaultSort = (a, b) => b.submittedAt - a.submittedAt;
+const defaultRender = (tx) => (_jsx(TxFlightItem, { tx: tx }, tx.id));
+export const TxFlightList = ({ id, filter, sort = defaultSort, render = defaultRender, empty, className, style, }) => {
+    const { txs } = useTxFlight(id);
+    const visible = (filter ? txs.filter(filter) : [...txs]).sort(sort);
+    if (visible.length === 0)
+        return empty !== undefined ? _jsx(_Fragment, { children: empty }) : null;
+    return (_jsx("div", { className: className, style: style, "data-tx-flight-list": "", children: visible.map(render) }));
+};
+//# sourceMappingURL=list.js.map

package/dist/components/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../src/components/list.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAgBZ,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAiBxC,MAAM,WAAW,GAAG,CAAC,CAAY,EAAE,CAAY,EAAU,EAAE,CACzD,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,WAAW,CAAA;AAE/B,MAAM,aAAa,GAAG,CAAC,EAAa,EAAa,EAAE,CAAC,CAClD,KAAC,YAAY,IAAa,EAAE,EAAE,EAAE,IAAb,EAAE,CAAC,EAAE,CAAY,CACrC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,EAAE,EACF,MAAM,EACN,IAAI,GAAG,WAAW,EAClB,MAAM,GAAG,aAAa,EACtB,KAAK,EACL,SAAS,EACT,KAAK,GACa,EAAa,EAAE;IACjC,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,EAAE,CAAC,CAAA;IAC/B,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACnE,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,4BAAG,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAC1E,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,yBAAsB,EAAE,YAC5D,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,GAChB,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/components/status-icon.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @fileoverview `<TxFlightStatusIcon>` — single-glyph indicator for a
+ * tracked tx's status. RSC-safe (no hooks, no `'use client'`).
+ *
+ * Visual: a colored dot, sized via the `size` prop. Consumer styles
+ * any further treatment via `className` / `style`. Defaults provide
+ * a sensible, opinionated look so the bare component looks intentional
+ * out of the box without consumer CSS.
+ */
+import type { CSSProperties, ReactNode } from 'react';
+import type { TrackedTxStatus } from '@valve-tech/wallet-adapter';
+export interface TxFlightStatusIconProps {
+    status: TrackedTxStatus;
+    /** Pixel size of the dot. Default: 16. */
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const TxFlightStatusIcon: ({ status, size, className, style, }: TxFlightStatusIconProps) => ReactNode;
+//# sourceMappingURL=status-icon.d.ts.map

package/dist/components/status-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-icon.d.ts","sourceRoot":"","sources":["../../src/components/status-icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAsBjE,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,eAAe,CAAA;IACvB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAED,eAAO,MAAM,kBAAkB,wCAK5B,uBAAuB,KAAG,SAe5B,CAAA"}