@universal-everything/ui 1.0.0-dev.50f8f9d

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2023 LUKSO Blockchain GmbH
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,170 @@
+# @universal-everything/ui
+
+Framework-agnostic UI components for the universal-relayer wallet kit,
+built with [Lit 3](https://lit.dev). Same custom elements drop into
+React, Vue, Svelte, Astro, or plain HTML — author UI once, ship
+everywhere.
+
+## Install
+
+```bash
+pnpm add @universal-everything/ui @universal-everything/sdk-core lit
+```
+
+## Quick start (vanilla HTML)
+
+```html
+<script type="module">
+  import { WalletKitClient } from "@universal-everything/sdk-core";
+  import "@universal-everything/ui";
+
+  const client = new WalletKitClient({
+    baseUrl: "https://relayer.example.com",
+    getAccessToken: async () => sessionStorage.getItem("token"),
+  });
+
+  const provider = document.querySelector("wallet-kit-provider");
+  provider.client = client;
+
+  document.querySelector("wallet-kit-login").addEventListener("login-request", () => {
+    // Trigger your auth flow
+  });
+  document.querySelector("wallet-kit-wallet-list").addEventListener("wallet-select", (e) => {
+    console.log("picked", e.detail.wallet);
+  });
+</script>
+
+<wallet-kit-provider>
+  <wallet-kit-login></wallet-kit-login>
+  <wallet-kit-wallet-list></wallet-kit-wallet-list>
+</wallet-kit-provider>
+```
+
+## In React
+
+```tsx
+import { WalletKitClient } from "@universal-everything/sdk-core";
+import "@universal-everything/ui";
+import type { WalletKitProviderElement } from "@universal-everything/ui";
+
+function Kit() {
+  const providerRef = useRef<WalletKitProviderElement | null>(null);
+  const client = useMemo(() => new WalletKitClient({ … }), []);
+  useEffect(() => {
+    if (providerRef.current) providerRef.current.client = client;
+  }, [client]);
+
+  return (
+    <wallet-kit-provider ref={providerRef}>
+      <wallet-kit-login
+        authenticated={authenticated || undefined}
+        user-label={user?.id}
+      />
+      <wallet-kit-wallet-list />
+    </wallet-kit-provider>
+  );
+}
+```
+
+See `apps/demo-web/src/UiPanel.tsx` for a complete Privy integration.
+
+## In Vue
+
+```vue
+<template>
+  <wallet-kit-provider ref="provider">
+    <wallet-kit-login
+      :authenticated="authenticated || undefined"
+      :user-label="userId"
+      @login-request="login"
+      @logout-request="logout"
+    />
+    <wallet-kit-wallet-list @wallet-select="onSelect" />
+  </wallet-kit-provider>
+</template>
+
+<script setup>
+import "@universal-everything/ui";
+const provider = ref();
+onMounted(() => { provider.value.client = myClient; });
+</script>
+```
+
+## In Svelte
+
+```svelte
+<script>
+  import "@universal-everything/ui";
+  let provider;
+  $: if (provider) provider.client = myClient;
+</script>
+
+<wallet-kit-provider bind:this={provider}>
+  <wallet-kit-login
+    authenticated={authenticated || undefined}
+    user-label={userId}
+    on:login-request={login}
+    on:logout-request={logout}
+  />
+  <wallet-kit-wallet-list on:wallet-select={onSelect} />
+</wallet-kit-provider>
+```
+
+## Components
+
+### `<wallet-kit-provider>`
+
+Holds a `WalletKitClient` and broadcasts it to descendants via
+`@lit/context`. Set `.client` as a JS property (not an attribute — it's
+an object).
+
+### `<wallet-kit-login>`
+
+Auth-agnostic login/logout button. This component never knows about
+Privy or any other identity provider — your host app wires that.
+
+- **Properties**: `authenticated` (bool), `user-label` (string),
+  `pending` (bool)
+- **Events**:
+  - `login-request` — fired when the user clicks "Sign in"
+  - `logout-request` — fired when the user clicks "Logout"
+
+### `<wallet-kit-wallet-list>`
+
+Consumes the client from context, auto-loads `client.listWallets()`
+on first render, renders a selectable list with `aria-selected`.
+
+- **Properties**: `selected-wallet-id` (string) — purely visual, the
+  host owns selection state.
+- **Methods**: `refresh()` — re-fetch on demand.
+- **Events**: `wallet-select` with `detail: { wallet }` when a row is
+  clicked / Enter-pressed.
+- **Slots**: `loading`, `error`, `empty` — override the default
+  messages without re-implementing the happy path.
+
+## Theming
+
+Shadow DOM means app-wide stylesheets don't leak in. Theme via CSS
+custom properties on the host element:
+
+```css
+wallet-kit-login {
+  --wk-login-bg: #7c3aed;
+  --wk-login-fg: #fff;
+  --wk-login-radius: 1rem;
+}
+wallet-kit-wallet-list {
+  --wk-list-border: #e5e5e5;
+  --wk-list-primary-border: #7c3aed;
+  --wk-list-selected-bg: #f3e8ff;
+}
+```
+
+## Data composables
+
+This package handles UI. For framework-native data hooks / composables
+/ stores, see the framework adapters:
+
+- React → [`@universal-everything/sdk-react`](../sdk-react/)
+- Vue 3 → [`@universal-everything/sdk-vue`](../sdk-vue/)
+- Svelte 5 → [`@universal-everything/sdk-svelte`](../sdk-svelte/)

package/dist/context.d.ts

@@ -0,0 +1,19 @@
+import { WalletKitClient } from '@universal-everything/sdk-core';
+
+/**
+ * Lit context key for the `WalletKitClient`. `<wallet-kit-provider>`
+ * is the canonical provider; any `@consume({ context: walletKitContext })`
+ * field on a descendant custom element resolves to the client set on
+ * the provider.
+ *
+ * `createContext` keys identity by reference, so we export the single
+ * instance and re-use it across all components in this package. A
+ * Symbol-valued key would be safer if this package could be duplicated
+ * in a bundle, but our `package.json` flags `lit` / `@lit/context` as
+ * non-singletons and the cost/benefit doesn't justify it today.
+ */
+declare const walletKitContext: {
+    __context__: WalletKitClient | undefined;
+};
+
+export { walletKitContext };

package/dist/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "@lit/context";
+const walletKitContext = createContext(
+  /* @__PURE__ */ Symbol.for("universaleverything/ui/walletKit")
+);
+export {
+  walletKitContext
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { WalletKitProviderElement } from './wallet-kit-provider.js';
+export { WalletKitLoginElement } from './wallet-kit-login.js';
+export { WalletKitWalletListElement } from './wallet-kit-wallet-list.js';
+export { walletKitContext } from './context.js';
+import 'lit';
+import '@universal-everything/sdk-core';

package/dist/index.js

@@ -0,0 +1,13 @@
+import "./wallet-kit-provider";
+import "./wallet-kit-login";
+import "./wallet-kit-wallet-list";
+import { walletKitContext } from "./context";
+import { WalletKitLoginElement } from "./wallet-kit-login";
+import { WalletKitProviderElement } from "./wallet-kit-provider";
+import { WalletKitWalletListElement } from "./wallet-kit-wallet-list";
+export {
+  WalletKitLoginElement,
+  WalletKitProviderElement,
+  WalletKitWalletListElement,
+  walletKitContext
+};

package/dist/wallet-kit-login.d.ts

@@ -0,0 +1,43 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * Auth-agnostic login button. This component deliberately does not
+ * know about Privy / Clerk / OAuth — the host app wires whichever
+ * identity provider it uses and passes three properties:
+ *
+ * - `authenticated: boolean` — whether a user is signed in
+ * - `userLabel?: string` — short label to show while signed in
+ *   (typically `did:privy:...` or an email — host chooses)
+ * - `pending?: boolean` — whether the identity provider is still
+ *   initializing (shows a disabled placeholder)
+ *
+ * Emits `login-request` / `logout-request` `CustomEvent`s; the host
+ * binds those to its provider's login/logout calls. Emitting events
+ * (instead of accepting `.onLogin` callbacks) keeps the component
+ * framework-agnostic — React `onLoginRequest`, Vue `@login-request`,
+ * Svelte `on:login-request`, and `addEventListener` all route the
+ * same way.
+ *
+ * Styling: CSS custom properties `--wk-login-bg`, `--wk-login-fg`,
+ * `--wk-login-border`, `--wk-login-radius` are the theme surface.
+ * The shadow root boundary means app-wide stylesheets do NOT leak in.
+ */
+declare class WalletKitLoginElement extends LitElement {
+    static styles: lit.CSSResult;
+    accessor authenticated: boolean;
+    accessor userLabel: string | undefined;
+    accessor pending: boolean;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "wallet-kit-login": WalletKitLoginElement;
+    }
+    interface HTMLElementEventMap {
+        "login-request": CustomEvent<void>;
+        "logout-request": CustomEvent<void>;
+    }
+}
+
+export { WalletKitLoginElement };

package/dist/wallet-kit-login.js

@@ -0,0 +1,139 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _pending_dec, _userLabel_dec, _authenticated_dec, _a, _WalletKitLoginElement_decorators, _init, _authenticated, _userLabel, _pending;
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+_WalletKitLoginElement_decorators = [customElement("wallet-kit-login")];
+class WalletKitLoginElement extends (_a = LitElement, _authenticated_dec = [property({ type: Boolean })], _userLabel_dec = [property({ type: String, attribute: "user-label" })], _pending_dec = [property({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _authenticated, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _userLabel, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _pending, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+  }
+  render() {
+    if (this.pending) {
+      return html`<button disabled>Loading…</button>`;
+    }
+    if (this.authenticated) {
+      return html`
+        ${this.userLabel ? html`<span class="user">signed in as <code>${this.userLabel}</code></span>` : nothing}
+        <button
+          class="secondary"
+          type="button"
+          @click=${() => this.dispatchEvent(
+        new CustomEvent("logout-request", {
+          bubbles: true,
+          composed: true
+        })
+      )}
+        >
+          Logout
+        </button>
+      `;
+    }
+    return html`<button
+      type="button"
+      @click=${() => this.dispatchEvent(
+      new CustomEvent("login-request", { bubbles: true, composed: true })
+    )}
+    >
+      Sign in
+    </button>`;
+  }
+}
+_init = __decoratorStart(_a);
+_authenticated = new WeakMap();
+_userLabel = new WeakMap();
+_pending = new WeakMap();
+__decorateElement(_init, 4, "authenticated", _authenticated_dec, WalletKitLoginElement, _authenticated);
+__decorateElement(_init, 4, "userLabel", _userLabel_dec, WalletKitLoginElement, _userLabel);
+__decorateElement(_init, 4, "pending", _pending_dec, WalletKitLoginElement, _pending);
+WalletKitLoginElement = __decorateElement(_init, 0, "WalletKitLoginElement", _WalletKitLoginElement_decorators, WalletKitLoginElement);
+__publicField(WalletKitLoginElement, "styles", css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.75rem;
+      font:
+        inherit,
+        system-ui,
+        sans-serif;
+    }
+    button {
+      background: var(--wk-login-bg, #0b5fff);
+      color: var(--wk-login-fg, #fff);
+      border: 1px solid var(--wk-login-border, transparent);
+      border-radius: var(--wk-login-radius, 0.375rem);
+      padding: 0.4rem 0.9rem;
+      cursor: pointer;
+      font: inherit;
+    }
+    button[disabled] {
+      opacity: 0.6;
+      cursor: default;
+    }
+    button.secondary {
+      background: transparent;
+      color: var(--wk-login-fg-secondary, #111);
+      border-color: var(--wk-login-border, #ddd);
+    }
+    .user {
+      font-size: 0.9em;
+      color: var(--wk-login-user-fg, inherit);
+    }
+    code {
+      font-size: 0.85em;
+    }
+  `);
+__runInitializers(_init, 1, WalletKitLoginElement);
+export {
+  WalletKitLoginElement
+};

package/dist/wallet-kit-provider.d.ts

@@ -0,0 +1,39 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { WalletKitClient } from '@universal-everything/sdk-core';
+
+/**
+ * Host element that owns a `WalletKitClient` and exposes it to
+ * descendant wallet-kit components via Lit's context protocol.
+ *
+ * Framework-agnostic: you wire Privy (or whatever identity source) on
+ * the host side and pass the resulting client as a property:
+ *
+ * ```ts
+ * const client = new WalletKitClient({
+ *   baseUrl: RELAYER_BASE,
+ *   getAccessToken: () => privy.getAccessToken(),
+ * });
+ * document.querySelector('wallet-kit-provider').client = client;
+ * ```
+ *
+ * In React 19+ `<wallet-kit-provider client={client}>` Just Works —
+ * React maps the prop to the property since the element has a matching
+ * reactive property declaration.
+ *
+ * The provider renders a default slot so it composes like any
+ * grouping element — descendants pick the client up via context
+ * without extra ceremony.
+ */
+declare class WalletKitProviderElement extends LitElement {
+    static styles: lit.CSSResult;
+    accessor client: WalletKitClient | undefined;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "wallet-kit-provider": WalletKitProviderElement;
+    }
+}
+
+export { WalletKitProviderElement };

package/dist/wallet-kit-provider.js

@@ -0,0 +1,77 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _client_dec, _a, _WalletKitProviderElement_decorators, _init, _client;
+import { provide } from "@lit/context";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { walletKitContext } from "./context";
+_WalletKitProviderElement_decorators = [customElement("wallet-kit-provider")];
+class WalletKitProviderElement extends (_a = LitElement, _client_dec = [provide({ context: walletKitContext }), property({ attribute: false })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _client, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+_init = __decoratorStart(_a);
+_client = new WeakMap();
+__decorateElement(_init, 4, "client", _client_dec, WalletKitProviderElement, _client);
+WalletKitProviderElement = __decorateElement(_init, 0, "WalletKitProviderElement", _WalletKitProviderElement_decorators, WalletKitProviderElement);
+__publicField(WalletKitProviderElement, "styles", css`
+    :host {
+      display: contents;
+    }
+  `);
+__runInitializers(_init, 1, WalletKitProviderElement);
+export {
+  WalletKitProviderElement
+};

package/dist/wallet-kit-wallet-list.d.ts

@@ -0,0 +1,62 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { Wallet } from '@universal-everything/sdk-core';
+
+/**
+ * Renders the authenticated user's wallets by calling
+ * `client.listWallets()` off the `WalletKitClient` that an ancestor
+ * `<wallet-kit-provider>` placed in context.
+ *
+ * Use it as a drop-in anywhere inside a provider:
+ *
+ * ```html
+ * <wallet-kit-provider .client=${client}>
+ *   <wallet-kit-wallet-list></wallet-kit-wallet-list>
+ * </wallet-kit-provider>
+ * ```
+ *
+ * Auto-loads on first connect; `refresh()` re-fetches. Emits
+ * `wallet-select` with `{ wallet: Wallet }` when the user clicks a
+ * row — hosts can react to selection without pulling the full list
+ * back out of the component.
+ *
+ * Loading / error / empty states are all rendered inline via
+ * dedicated slots so hosts can theme them without re-implementing
+ * the happy path:
+ *
+ * ```html
+ * <wallet-kit-wallet-list>
+ *   <span slot="empty">No wallets yet — create one above.</span>
+ * </wallet-kit-wallet-list>
+ * ```
+ */
+declare class WalletKitWalletListElement extends LitElement {
+    static styles: lit.CSSResult;
+    private accessor client;
+    private accessor wallets;
+    private accessor error;
+    private accessor loading;
+    /**
+     * When set, the matching wallet row renders with `aria-selected`.
+     * Purely visual — selection is entirely in the host's control, the
+     * component never owns selection state.
+     */
+    accessor selectedWalletId: string | undefined;
+    private hasLoadedOnce;
+    willUpdate(changed: Map<string, unknown>): void;
+    refresh(): Promise<void>;
+    private selectWallet;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "wallet-kit-wallet-list": WalletKitWalletListElement;
+    }
+    interface HTMLElementEventMap {
+        "wallet-select": CustomEvent<{
+            wallet: Wallet;
+        }>;
+    }
+}
+
+export { WalletKitWalletListElement };

package/dist/wallet-kit-wallet-list.js

@@ -0,0 +1,211 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _selectedWalletId_dec, _loading_dec, _error_dec, _wallets_dec, _client_dec, _a, _WalletKitWalletListElement_decorators, _init, _client, _wallets, _error, _loading, _selectedWalletId;
+import { consume } from "@lit/context";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { walletKitContext } from "./context";
+_WalletKitWalletListElement_decorators = [customElement("wallet-kit-wallet-list")];
+class WalletKitWalletListElement extends (_a = LitElement, _client_dec = [consume({ context: walletKitContext, subscribe: true }), state()], _wallets_dec = [state()], _error_dec = [state()], _loading_dec = [state()], _selectedWalletId_dec = [property({ type: String, attribute: "selected-wallet-id" })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _client, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _wallets, __runInitializers(_init, 12, this, null)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _error, __runInitializers(_init, 16, this, null)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _loading, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _selectedWalletId, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "hasLoadedOnce", false);
+  }
+  willUpdate(changed) {
+    if (changed.has("client") && this.client && !this.hasLoadedOnce) {
+      this.hasLoadedOnce = true;
+      void this.refresh();
+    }
+  }
+  async refresh() {
+    if (!this.client) return;
+    this.loading = true;
+    this.error = null;
+    try {
+      this.wallets = await this.client.listWallets();
+    } catch (err) {
+      this.error = err;
+    } finally {
+      this.loading = false;
+    }
+  }
+  selectWallet(wallet) {
+    this.dispatchEvent(
+      new CustomEvent("wallet-select", {
+        detail: { wallet },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    if (!this.client) {
+      return html`<div class="hint">No client. Wrap in &lt;wallet-kit-provider&gt;.</div>`;
+    }
+    if (this.loading && !this.wallets) {
+      return html`<slot name="loading"><div class="hint">Loading wallets…</div></slot>`;
+    }
+    if (this.error) {
+      return html`<div class="error">
+        <slot name="error">${this.error.code || this.error.message}</slot>
+      </div>`;
+    }
+    if (!this.wallets || this.wallets.length === 0) {
+      return html`<slot name="empty"><div class="hint">No wallets yet.</div></slot>`;
+    }
+    return html`
+      <ul role="listbox">
+        ${this.wallets.map(
+      (w) => html`
+            <li
+              class=${w.isPrimary ? "primary" : ""}
+              role="option"
+              aria-selected=${w.walletId === this.selectedWalletId ? "true" : "false"}
+              tabindex="0"
+              @click=${() => this.selectWallet(w)}
+              @keydown=${(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.selectWallet(w);
+        }
+      }}
+            >
+              <span class="label">
+                ${w.label || html`<code>${w.address}</code>`}
+                ${w.isPrimary ? html`<span class="meta">(primary)</span>` : nothing}
+              </span>
+              <span class="meta">
+                ${w.label ? html`<code>${shorten(w.address)}</code>` : nothing}
+              </span>
+            </li>
+          `
+    )}
+      </ul>
+    `;
+  }
+}
+_init = __decoratorStart(_a);
+_client = new WeakMap();
+_wallets = new WeakMap();
+_error = new WeakMap();
+_loading = new WeakMap();
+_selectedWalletId = new WeakMap();
+__decorateElement(_init, 4, "client", _client_dec, WalletKitWalletListElement, _client);
+__decorateElement(_init, 4, "wallets", _wallets_dec, WalletKitWalletListElement, _wallets);
+__decorateElement(_init, 4, "error", _error_dec, WalletKitWalletListElement, _error);
+__decorateElement(_init, 4, "loading", _loading_dec, WalletKitWalletListElement, _loading);
+__decorateElement(_init, 4, "selectedWalletId", _selectedWalletId_dec, WalletKitWalletListElement, _selectedWalletId);
+WalletKitWalletListElement = __decorateElement(_init, 0, "WalletKitWalletListElement", _WalletKitWalletListElement_decorators, WalletKitWalletListElement);
+__publicField(WalletKitWalletListElement, "styles", css`
+    :host {
+      display: block;
+      font: inherit;
+    }
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+    li {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--wk-list-border, #e5e5e5);
+      border-radius: var(--wk-list-radius, 0.375rem);
+      background: var(--wk-list-bg, #fff);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+    }
+    li.primary {
+      border-color: var(--wk-list-primary-border, #0b5fff);
+    }
+    li[aria-selected="true"] {
+      background: var(--wk-list-selected-bg, #e8f0ff);
+    }
+    code {
+      font-size: 0.85em;
+    }
+    .label {
+      font-weight: 500;
+    }
+    .meta {
+      font-size: 0.75em;
+      color: var(--wk-list-meta-fg, #666);
+      display: flex;
+      gap: 0.25rem;
+    }
+    .error {
+      color: var(--wk-list-error-fg, #b00);
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--wk-list-error-border, #fbb);
+      border-radius: var(--wk-list-radius, 0.375rem);
+      background: var(--wk-list-error-bg, #fff5f5);
+    }
+    .hint {
+      color: var(--wk-list-meta-fg, #666);
+      padding: 0.5rem 0.75rem;
+    }
+  `);
+__runInitializers(_init, 1, WalletKitWalletListElement);
+function shorten(addr) {
+  return addr.length <= 12 ? addr : `${addr.slice(0, 6)}\u2026${addr.slice(-4)}`;
+}
+export {
+  WalletKitWalletListElement
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@universal-everything/ui",
+  "version": "1.0.0-dev.50f8f9d",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/universal-everything/universal-relayer.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./wallet-kit-provider": {
+      "types": "./dist/wallet-kit-provider.d.ts",
+      "import": "./dist/wallet-kit-provider.js"
+    },
+    "./wallet-kit-login": {
+      "types": "./dist/wallet-kit-login.d.ts",
+      "import": "./dist/wallet-kit-login.js"
+    },
+    "./wallet-kit-wallet-list": {
+      "types": "./dist/wallet-kit-wallet-list.d.ts",
+      "import": "./dist/wallet-kit-wallet-list.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lit/context": "^1.1.0",
+    "lit": "^3.2.0",
+    "@universal-everything/sdk-core": "1.1.0-dev.50f8f9d"
+  },
+  "devDependencies": {
+    "jsdom": "^30.0.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.9"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}