@bwalletx/connect 0.2.0 → 0.3.0

package/dist/shell.cjs

@@ -0,0 +1,578 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/shell/index.ts
+var shell_exports = {};
+__export(shell_exports, {
+  BwalletxBarElement: () => BwalletxBarElement,
+  BwalletxDrawerElement: () => BwalletxDrawerElement,
+  BwalletxTopbarElement: () => BwalletxTopbarElement,
+  DEFAULT_WALLET_ORIGINS: () => DEFAULT_WALLET_ORIGINS,
+  ICONS: () => ICONS,
+  LIKE_DEFAULT_CENTS: () => LIKE_DEFAULT_CENTS,
+  LIKE_MAX_DAILY_CENTS: () => LIKE_MAX_DAILY_CENTS,
+  SLOT_IDS: () => SLOT_IDS,
+  ShellBridge: () => ShellBridge,
+  TOKENS: () => TOKENS,
+  WELL_KNOWN_PATH: () => WELL_KNOWN_PATH,
+  _resetWalletState: () => _resetWalletState,
+  applyManifest: () => applyManifest,
+  defineBappShell: () => defineBappShell,
+  detectWalletUA: () => detectWalletUA,
+  isSameOriginPath: () => isSameOriginPath,
+  isSlotId: () => isSlotId,
+  loadManifest: () => loadManifest,
+  parseManifest: () => parseManifest,
+  slotPath: () => slotPath,
+  startShellBridge: () => startShellBridge,
+  validateManifest: () => validateManifest,
+  walletState: () => walletState
+});
+module.exports = __toCommonJS(shell_exports);
+
+// src/shell/manifest.ts
+var SLOT_IDS = ["wallet", "exchange", "b", "feed", "chat"];
+var WELL_KNOWN_PATH = "/.well-known/bapp.json";
+var LIKE_DEFAULT_CENTS = 1;
+var LIKE_MAX_DAILY_CENTS = 100;
+function isSameOriginPath(p) {
+  if (typeof p !== "string" || p.length === 0 || p.length > 512) return false;
+  if (p[0] !== "/" || p[1] === "/" || p[1] === "\\") return false;
+  if (/[\\\u0000-\u001f\u007f\s]/.test(p)) return false;
+  try {
+    return new URL(p, "https://bapp.invalid").origin === "https://bapp.invalid";
+  } catch {
+    return false;
+  }
+}
+var isObj = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var str = (v, max = 64) => typeof v === "string" && v.trim().length > 0 && v.length <= max;
+function validateManifest(input) {
+  const errors = [];
+  if (!isObj(input)) return { ok: false, errors: ["manifest must be a JSON object"] };
+  const m = input;
+  const known = /* @__PURE__ */ new Set(["$schema", "version", "name", "icon", "home", "theme", "slots", "drawer", "like"]);
+  for (const k of Object.keys(m)) if (!known.has(k)) errors.push(`unknown field "${k}"`);
+  if (m.version !== 1) errors.push("version must be 1");
+  if (!str(m.name, 40)) errors.push("name must be a non-empty string (max 40)");
+  if (!isSameOriginPath(m.icon)) errors.push('icon must be a same-origin path starting with "/"');
+  const home = m.home === void 0 ? "/" : m.home;
+  if (!isSameOriginPath(home)) errors.push('home must be a same-origin path starting with "/"');
+  let theme;
+  if (m.theme !== void 0) {
+    if (!isObj(m.theme)) errors.push("theme must be an object");
+    else {
+      for (const k of Object.keys(m.theme)) if (k !== "accent") errors.push(`unknown field "theme.${k}"`);
+      if (m.theme.accent !== void 0 && !(typeof m.theme.accent === "string" && /^#[0-9a-fA-F]{6}$/.test(m.theme.accent)))
+        errors.push("theme.accent must be #RRGGBB");
+      theme = m.theme.accent ? { accent: m.theme.accent } : {};
+    }
+  }
+  const slots = {};
+  if (!isObj(m.slots)) errors.push("slots must be an object with wallet, exchange, b, feed, chat");
+  else {
+    for (const k of Object.keys(m.slots)) if (!SLOT_IDS.includes(k)) errors.push(`unknown slot "${k}"`);
+    for (const id of SLOT_IDS) {
+      const s = m.slots[id];
+      if (!isObj(s)) {
+        errors.push(`slots.${id} is required (use "enabled": false for an unused slot)`);
+        continue;
+      }
+      for (const k of Object.keys(s)) if (!["path", "label", "enabled"].includes(k)) errors.push(`unknown field "slots.${id}.${k}"`);
+      if (typeof s.enabled !== "boolean") errors.push(`slots.${id}.enabled must be true or false`);
+      if (s.path !== void 0 && !isSameOriginPath(s.path)) errors.push(`slots.${id}.path must be a same-origin path starting with "/"`);
+      if (s.enabled === true && s.path === void 0 && id !== "b") errors.push(`slots.${id}.path is required when enabled`);
+      if (s.label !== void 0 && !str(s.label, 12)) errors.push(`slots.${id}.label must be a short string (max 12)`);
+      slots[id] = { enabled: s.enabled === true, ...s.path !== void 0 ? { path: s.path } : {}, ...s.label !== void 0 ? { label: s.label } : {} };
+    }
+  }
+  const drawer = [];
+  if (m.drawer !== void 0) {
+    if (!Array.isArray(m.drawer)) errors.push("drawer must be an array");
+    else if (m.drawer.length > 24) errors.push("drawer has more than 24 items");
+    else m.drawer.forEach((d, i) => {
+      if (!isObj(d)) {
+        errors.push(`drawer[${i}] must be an object`);
+        return;
+      }
+      for (const k of Object.keys(d)) if (!["label", "path", "icon"].includes(k)) errors.push(`unknown field "drawer[${i}].${k}"`);
+      if (!str(d.label, 40)) errors.push(`drawer[${i}].label must be a non-empty string (max 40)`);
+      if (!isSameOriginPath(d.path)) errors.push(`drawer[${i}].path must be a same-origin path starting with "/"`);
+      if (d.icon !== void 0 && !isSameOriginPath(d.icon)) errors.push(`drawer[${i}].icon must be a same-origin path starting with "/"`);
+      drawer.push({ label: d.label, path: d.path, ...d.icon ? { icon: d.icon } : {} });
+    });
+  }
+  let like;
+  if (m.like !== void 0) {
+    const l = m.like;
+    if (!isObj(l)) errors.push("like must be an object");
+    else {
+      for (const k of Object.keys(l)) if (!["fields", "amountCents", "currency", "dailyCapCents"].includes(k)) errors.push(`unknown field "like.${k}"`);
+      const f = l.fields;
+      if (!isObj(f) || !str(f.id) || !str(f.token)) errors.push('like.fields needs "id" and "token" field names');
+      else for (const k of ["payee", "title", "media"]) if (f[k] !== void 0 && !str(f[k])) errors.push(`like.fields.${k} must be a field name`);
+      const amount = l.amountCents ?? LIKE_DEFAULT_CENTS;
+      const cap = l.dailyCapCents ?? LIKE_MAX_DAILY_CENTS;
+      const currency = l.currency ?? "PNEE";
+      if (!Number.isInteger(amount) || amount < 1) errors.push("like.amountCents must be a whole number of cents, at least 1");
+      if (!Number.isInteger(cap) || cap < 1 || cap > LIKE_MAX_DAILY_CENTS) errors.push("like.dailyCapCents must be 1..100 ($1 max)");
+      else if (Number.isInteger(amount) && amount > cap) errors.push("like.amountCents cannot exceed like.dailyCapCents");
+      if (currency !== "PNEE" && currency !== "BSV") errors.push('like.currency must be "PNEE" or "BSV"');
+      if (isObj(f)) {
+        const fields = { id: f.id, token: f.token };
+        for (const k of ["payee", "title", "media"]) if (typeof f[k] === "string") fields[k] = f[k];
+        like = { fields, amountCents: amount, currency, dailyCapCents: cap };
+      }
+    }
+  }
+  if (errors.length) return { ok: false, errors };
+  return {
+    ok: true,
+    errors: [],
+    manifest: {
+      version: 1,
+      name: m.name.trim(),
+      icon: m.icon,
+      home,
+      ...theme ? { theme } : {},
+      slots,
+      drawer,
+      ...like ? { like } : {}
+    }
+  };
+}
+function parseManifest(input) {
+  const r = validateManifest(input);
+  if (!r.ok) throw new Error(`Invalid bapp.json:
+- ${r.errors.join("\n- ")}`);
+  return r.manifest;
+}
+async function loadManifest(path = WELL_KNOWN_PATH, fetchImpl = fetch) {
+  if (!isSameOriginPath(path)) throw new Error("loadManifest: path must be same-origin");
+  const res = await fetchImpl(path, { credentials: "same-origin", headers: { accept: "application/json" } });
+  if (!res.ok) throw new Error(`loadManifest: ${path} returned ${res.status}`);
+  return parseManifest(await res.json());
+}
+function slotPath(m, slot) {
+  const s = m.slots[slot];
+  return s && s.enabled && s.path ? s.path : null;
+}
+var isSlotId = (v) => typeof v === "string" && SLOT_IDS.includes(v);
+
+// src/shell/wallet.ts
+var DEFAULT_WALLET_ORIGINS = ["https://web.bwalletx.com", "https://bwalletx.com"];
+var UA_RE = /\b(?:bWallet|YoursWalletMobile)\//;
+var INSET_RE = /\bbWalletInset\/(\d{1,4})\b/;
+function detectWalletUA(ua = typeof navigator !== "undefined" ? navigator.userAgent : "") {
+  const inset = INSET_RE.exec(ua);
+  if (inset || UA_RE.test(ua)) return { inWallet: true, via: "ua", ...inset ? { inset: Number(inset[1]) } : {} };
+  return { inWallet: false, via: null };
+}
+var state = { inWallet: false, via: null };
+function walletState() {
+  return state;
+}
+function setState(next, win) {
+  state = next;
+  if (next.inWallet) win.document?.documentElement?.setAttribute("data-bwx-in-wallet", next.via ?? "");
+  win.dispatchEvent(new CustomEvent("bapp-wallet", { detail: next }));
+}
+var ShellBridge = class {
+  manifest;
+  origins;
+  win;
+  target = null;
+  active = null;
+  onMessage = (e) => this.handle(e);
+  onActive = (e) => {
+    const s = e.detail?.slot;
+    if (isSlotId(s)) this.setActive(s);
+  };
+  onMenu = () => this.post({ type: "bapp:menu" });
+  onClose = () => this.post({ type: "bapp:close" });
+  constructor(opts) {
+    this.manifest = opts.manifest;
+    this.origins = opts.walletOrigins ?? DEFAULT_WALLET_ORIGINS;
+    this.win = opts.win ?? window;
+    const ua = detectWalletUA(opts.userAgent);
+    if (ua.inWallet) {
+      this.target = { win: this.win, origin: this.win.location.origin };
+      setState(ua, this.win);
+    }
+  }
+  start() {
+    this.win.addEventListener("message", this.onMessage);
+    this.win.addEventListener("bapp-active", this.onActive);
+    this.win.addEventListener("bapp-menu", this.onMenu);
+    this.win.addEventListener("bapp-close", this.onClose);
+    return this;
+  }
+  stop() {
+    this.win.removeEventListener("message", this.onMessage);
+    this.win.removeEventListener("bapp-active", this.onActive);
+    this.win.removeEventListener("bapp-menu", this.onMenu);
+    this.win.removeEventListener("bapp-close", this.onClose);
+  }
+  get inWallet() {
+    return this.target !== null;
+  }
+  /** Tell the wallet which slot is showing (lights up the native dock). */
+  setActive(slot) {
+    this.active = slot;
+    this.post({ type: "bapp:active", v: 1, slot });
+  }
+  /** Is this message from a trusted wallet? */
+  trusted(e) {
+    const parent = this.win.parent;
+    if (parent && parent !== this.win && e.source === parent) return this.origins.includes(e.origin);
+    if (this.target?.win === this.win && (e.source === this.win || e.source === null)) return e.origin === this.win.location.origin;
+    return false;
+  }
+  handle(e) {
+    const d = e.data;
+    if (!d || typeof d !== "object" || typeof d.type !== "string" || !d.type.startsWith("bapp:")) return;
+    if (!this.trusted(e)) return;
+    if (d.type === "bapp:hello") {
+      if (!this.target) {
+        this.target = { win: e.source, origin: e.origin };
+        setState({ inWallet: true, via: "frame" }, this.win);
+      }
+      this.post({ type: "bapp:ready", v: 1, manifest: "/.well-known/bapp.json", ...this.active ? { slot: this.active } : {} });
+      return;
+    }
+    if (d.type === "bapp:navigate") {
+      if (!isSlotId(d.slot)) return;
+      const path = slotPath(this.manifest, d.slot);
+      if (d.slot !== "b" && !path) return;
+      if (d.slot === "b" && !this.manifest.slots.b.enabled) return;
+      const ev = new CustomEvent("bapp-navigate", { cancelable: true, detail: { slot: d.slot, path, source: "wallet" } });
+      this.win.dispatchEvent(ev);
+      if (!ev.defaultPrevented && path) this.win.location.assign(path);
+      this.setActive(d.slot);
+    }
+  }
+  post(msg) {
+    if (!this.target) return;
+    const { win, origin } = this.target;
+    const rn = this.win.ReactNativeWebView;
+    if (win === this.win && rn) rn.postMessage(JSON.stringify(msg));
+    else win.postMessage(msg, origin);
+  }
+};
+function startShellBridge(opts) {
+  return new ShellBridge(opts).start();
+}
+function _resetWalletState() {
+  state = { inWallet: false, via: null };
+}
+
+// src/shell/elements.ts
+var TOKENS = {
+  barHeight: 88,
+  barBg: "#0A0B0D",
+  hairline: "#1C1C1E",
+  icon: 20,
+  active: "#FFD24D",
+  inactive: "#F2F2F0",
+  label: "#98A2B3",
+  bSize: 52,
+  stripHeight: 28,
+  rowHeight: 56,
+  tool: 36,
+  toolRing: "#2A2A2C",
+  toolIcon: "#F5B800"
+};
+var DEFAULT_LABELS = { wallet: "Wallet", exchange: "Exchange", b: "b", feed: "Feed", chat: "Chat" };
+var svg = (d) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${d}</svg>`;
+var ICONS = {
+  wallet: svg('<rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/>'),
+  exchange: svg('<path d="M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4"/>'),
+  feed: svg('<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 9h8M8 13h8M8 17h5"/>'),
+  chat: svg('<path d="M21 12a8 8 0 0 1-12 7l-5 1 1-4a8 8 0 1 1 16-4z"/>'),
+  menu: svg('<path d="M4 6h16M4 12h16M4 18h16"/>'),
+  close: svg('<path d="M6 6l12 12M18 6L6 18"/>')
+};
+var esc = (s) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+var Base = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+function inWallet(el) {
+  const a = el.getAttribute("in-wallet");
+  if (a === "true" || a === "") return true;
+  if (a === "false") return false;
+  return walletState().inWallet || detectWalletUA().inWallet;
+}
+function emit(el, type, detail, cancelable = false) {
+  return el.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable }));
+}
+function navigate(el, detail) {
+  const ok = emit(el, "bapp-navigate", { ...detail, source: "web" }, true);
+  if (ok && detail.path && el.getAttribute("navigate") !== "manual") location.assign(detail.path);
+}
+var ShellElement = class extends Base {
+  _manifest = null;
+  onWallet = () => this.render();
+  get manifest() {
+    return this._manifest;
+  }
+  set manifest(m) {
+    this._manifest = m;
+    this.render();
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) this.attachShadow({ mode: "open" });
+    window.addEventListener("bapp-wallet", this.onWallet);
+    this.render();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("bapp-wallet", this.onWallet);
+  }
+  attributeChangedCallback() {
+    if (this.shadowRoot) this.render();
+  }
+  accent() {
+    return this._manifest?.theme?.accent ?? TOKENS.active;
+  }
+};
+var BAR_CSS = `
+:host{display:block;--bwx-accent:${TOKENS.active}}
+:host([hidden]),:host([data-in-wallet]){display:none!important}
+nav{height:${TOKENS.barHeight}px;box-sizing:border-box;background:${TOKENS.barBg};border-top:1px solid ${TOKENS.hairline};
+ display:flex;align-items:flex-start;padding:10px 0 env(safe-area-inset-bottom,0);font:10px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
+button{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
+ color:${TOKENS.inactive};-webkit-tap-highlight-color:transparent;touch-action:manipulation}
+button:focus-visible{outline:2px solid var(--bwx-accent);outline-offset:2px;border-radius:10px}
+button svg{width:${TOKENS.icon}px;height:${TOKENS.icon}px}
+.lbl{font-size:10px;color:${TOKENS.label};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
+button[aria-current="page"]{color:var(--bwx-accent)}
+button[aria-current="page"] .lbl{color:var(--bwx-accent);font-weight:700}
+button:disabled{opacity:.35;cursor:default;pointer-events:none}
+.b{width:${TOKENS.bSize}px;height:${TOKENS.bSize}px;border-radius:50%;background:#000;border:2px solid var(--bwx-accent);box-sizing:border-box;
+ display:grid;place-items:center;font:800 24px/1 Georgia,"Times New Roman",serif;color:var(--bwx-accent);margin-top:-4px}
+button[data-slot="b"][aria-current="page"] .b{box-shadow:0 0 0 3px #FFD24D33}
+`;
+var BwalletxBarElement = class extends ShellElement {
+  static observedAttributes = ["active", "in-wallet", "hidden"];
+  holdTimer = null;
+  held = false;
+  get active() {
+    const a = this.getAttribute("active");
+    return isSlotId(a) ? a : null;
+  }
+  set active(s) {
+    if (s) this.setAttribute("active", s);
+    else this.removeAttribute("active");
+  }
+  attributeChangedCallback(name, old, val) {
+    super.attributeChangedCallback();
+    if (name === "active" && val !== old && isSlotId(val)) emit(this, "bapp-active", { slot: val });
+  }
+  render() {
+    const root = this.shadowRoot;
+    if (!root) return;
+    if (inWallet(this)) this.setAttribute("data-in-wallet", "");
+    else this.removeAttribute("data-in-wallet");
+    const m = this._manifest;
+    const active = this.active;
+    const slots = SLOT_IDS.map((id) => {
+      const s = m?.slots[id];
+      const enabled = !!s?.enabled;
+      const label = s?.label ?? DEFAULT_LABELS[id];
+      const cur = active === id ? ' aria-current="page"' : "";
+      const dis = enabled ? "" : ' disabled aria-disabled="true"';
+      if (id === "b") return `<button type="button" data-slot="b" aria-label="b agent${m ? ` in ${esc(m.name)}` : ""}"${cur}${dis}><span class="b">b</span></button>`;
+      return `<button type="button" data-slot="${id}" aria-label="${esc(label)}"${cur}${dis}>${ICONS[id]}<span class="lbl">${esc(label)}</span></button>`;
+    }).join("");
+    root.innerHTML = `<style>${BAR_CSS}</style><nav part="bar" aria-label="${m ? esc(m.name) : "App"} navigation" style="--bwx-accent:${this.accent()}">${slots}</nav>`;
+    root.querySelectorAll("button[data-slot]").forEach((b) => {
+      const id = b.dataset.slot;
+      if (id === "b") this.wireB(b);
+      else b.addEventListener("click", () => this.go(id));
+    });
+  }
+  go(id) {
+    const m = this._manifest;
+    if (!m || !m.slots[id]?.enabled) return;
+    this.active = id;
+    navigate(this, { slot: id, path: slotPath(m, id) });
+  }
+  /** (b): tap = bapp-b-press, hold (>=450ms) = bapp-b-hold {phase:'start'|'end'}. Hold-to-talk is a later phase. */
+  wireB(b) {
+    const clear = () => {
+      if (this.holdTimer) clearTimeout(this.holdTimer);
+      this.holdTimer = null;
+    };
+    b.addEventListener("pointerdown", () => {
+      this.held = false;
+      clear();
+      this.holdTimer = setTimeout(() => {
+        this.held = true;
+        emit(this, "bapp-b-hold", { phase: "start" });
+      }, 450);
+    });
+    const up = () => {
+      clear();
+      if (this.held) emit(this, "bapp-b-hold", { phase: "end" });
+    };
+    b.addEventListener("pointerup", up);
+    b.addEventListener("pointercancel", up);
+    b.addEventListener("pointerleave", up);
+    b.addEventListener("click", () => {
+      if (this.held) {
+        this.held = false;
+        return;
+      }
+      if (!this._manifest?.slots.b.enabled) return;
+      emit(this, "bapp-b-press", { path: slotPath(this._manifest, "b") });
+      const p = slotPath(this._manifest, "b");
+      if (p) this.go("b");
+    });
+  }
+};
+var TOP_CSS = `
+:host{display:block;--bwx-accent:${TOKENS.active};font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
+:host([hidden]){display:none!important}
+.strip{height:${TOKENS.stripHeight}px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:11px;color:#9a9a9a;background:${TOKENS.barBg}}
+::slotted([slot^="strip"]){color:inherit}
+.row{height:${TOKENS.rowHeight}px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;background:${TOKENS.barBg};border-bottom:1px solid ${TOKENS.hairline}}
+.btn,::slotted([slot="tools"]){all:unset;box-sizing:border-box;width:${TOKENS.tool}px;height:${TOKENS.tool}px;flex:none;border-radius:50%;border:1px solid ${TOKENS.toolRing};
+ display:grid;place-items:center;color:${TOKENS.toolIcon};cursor:pointer;-webkit-tap-highlight-color:transparent}
+.btn:focus-visible{outline:2px solid var(--bwx-accent);outline-offset:2px}
+.btn svg{width:18px;height:18px}
+.app{border-color:${TOKENS.toolIcon};background:#1a1405;font-weight:800;font-size:13px;line-height:1;overflow:hidden}
+.app img{width:100%;height:100%;object-fit:cover}
+.title{flex:1;min-width:0;color:#F2F2F0;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.title small{display:block;color:#777;font-weight:500;font-size:11px}
+.tools{display:flex;gap:8px}
+`;
+var BwalletxTopbarElement = class extends ShellElement {
+  static observedAttributes = ["title", "subtitle", "in-wallet", "drawer", "menu", "strip", "hidden"];
+  render() {
+    const root = this.shadowRoot;
+    if (!root) return;
+    const m = this._manifest;
+    const wallet = inWallet(this);
+    const menu = wallet || this.getAttribute("menu") === "true";
+    const name = this.getAttribute("title") ?? m?.name ?? "";
+    const sub = this.getAttribute("subtitle");
+    const initials = name.replace(/[^A-Za-z0-9]/g, "").slice(0, 2) || "b";
+    const icon = m?.icon ? `<img src="${esc(m.icon)}" alt="">` : esc(initials);
+    const strip = this.getAttribute("strip") !== "off";
+    root.innerHTML = `<style>${TOP_CSS}</style><header part="topbar" style="--bwx-accent:${this.accent()}">
+${strip ? `<div class="strip" part="strip"><slot name="strip-left"></slot><slot name="strip-right"></slot></div>` : ""}
+<div class="row" part="row">
+${menu ? `<button type="button" class="btn" data-act="menu" aria-label="bWalletX menu">${ICONS.menu}</button>` : ""}
+<button type="button" class="btn app" data-act="drawer" aria-label="${esc(name || "App")} home and sections" aria-haspopup="true">${icon}</button>
+<div class="title" part="title">${esc(name)}${sub ? `<small>${esc(sub)}</small>` : ""}</div>
+<div class="tools"><slot name="tools"></slot>${wallet ? `<button type="button" class="btn" data-act="close" aria-label="Close ${esc(name || "app")}">${ICONS.close}</button>` : ""}</div>
+</div></header>`;
+    root.querySelector('[data-act="menu"]')?.addEventListener("click", () => emit(this, "bapp-menu", {}));
+    root.querySelector('[data-act="close"]')?.addEventListener("click", () => emit(this, "bapp-close", {}));
+    root.querySelector('[data-act="drawer"]')?.addEventListener("click", () => {
+      if (!emit(this, "bapp-drawer-toggle", {}, true)) return;
+      const id = this.getAttribute("drawer");
+      const d = id ? document.getElementById(id) : document.querySelector("bwalletx-drawer");
+      d?.toggle();
+    });
+  }
+};
+var DRAWER_CSS = `
+:host{position:fixed;inset:var(--bwx-drawer-top,84px) 0 var(--bwx-drawer-bottom,88px) 0;z-index:50;display:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
+:host([open]){display:block}
+.scrim{position:absolute;inset:0;background:#0009}
+nav{position:absolute;top:0;left:0;bottom:0;width:min(78%,320px);box-sizing:border-box;background:#0d0e10;border-right:1px solid ${TOKENS.hairline};padding:14px;overflow:auto}
+h4{margin:10px 0 6px;font-size:11px;color:#777;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
+a{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;color:#F2F2F0;text-decoration:none;font-size:15px}
+a img{width:20px;height:20px}
+a[aria-current="page"]{background:#1a1405;color:var(--bwx-accent)}
+a:focus-visible{outline:2px solid var(--bwx-accent)}
+hr{border:0;border-top:1px solid ${TOKENS.hairline};margin:10px 0}
+.back{color:${TOKENS.toolIcon}}
+`;
+var BwalletxDrawerElement = class extends ShellElement {
+  static observedAttributes = ["open", "current", "in-wallet"];
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(v) {
+    this.toggleAttribute("open", v);
+  }
+  toggle(force) {
+    this.open = force ?? !this.open;
+  }
+  render() {
+    const root = this.shadowRoot;
+    if (!root) return;
+    const m = this._manifest;
+    const cur = this.getAttribute("current") ?? (typeof location !== "undefined" ? location.pathname : "/");
+    const items = m ? [{ label: "Home", path: m.home }, ...m.drawer] : [];
+    const links = items.map((it, i) => `<a href="${esc(it.path)}" data-i="${i}"${it.path === cur ? ' aria-current="page"' : ""}>${"icon" in it && it.icon ? `<img src="${esc(it.icon)}" alt="">` : ""}${esc(it.label)}</a>`).join("");
+    const back = inWallet(this) ? `<hr><a href="#" class="back" data-act="close">\u2190 Back to bWalletX</a>` : "";
+    root.innerHTML = `<style>${DRAWER_CSS}</style><div class="scrim" part="scrim"></div><nav part="drawer" aria-label="${m ? esc(m.name) : "App"} sections" style="--bwx-accent:${this.accent()}"><h4>${m ? esc(m.name) : ""}</h4>${links}${back}</nav>`;
+    root.querySelector(".scrim").addEventListener("click", () => this.toggle(false));
+    root.querySelectorAll("a[data-i]").forEach((a) => a.addEventListener("click", (e) => {
+      e.preventDefault();
+      const it = items[Number(a.dataset.i)];
+      this.toggle(false);
+      navigate(this, { path: it.path });
+    }));
+    root.querySelector('[data-act="close"]')?.addEventListener("click", (e) => {
+      e.preventDefault();
+      this.toggle(false);
+      emit(this, "bapp-close", {});
+    });
+  }
+};
+function defineBappShell() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("bwalletx-bar")) customElements.define("bwalletx-bar", BwalletxBarElement);
+  if (!customElements.get("bwalletx-topbar")) customElements.define("bwalletx-topbar", BwalletxTopbarElement);
+  if (!customElements.get("bwalletx-drawer")) customElements.define("bwalletx-drawer", BwalletxDrawerElement);
+}
+function applyManifest(m, root = document) {
+  root.querySelectorAll("bwalletx-bar,bwalletx-topbar,bwalletx-drawer").forEach((el) => {
+    el.manifest = m;
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BwalletxBarElement,
+  BwalletxDrawerElement,
+  BwalletxTopbarElement,
+  DEFAULT_WALLET_ORIGINS,
+  ICONS,
+  LIKE_DEFAULT_CENTS,
+  LIKE_MAX_DAILY_CENTS,
+  SLOT_IDS,
+  ShellBridge,
+  TOKENS,
+  WELL_KNOWN_PATH,
+  _resetWalletState,
+  applyManifest,
+  defineBappShell,
+  detectWalletUA,
+  isSameOriginPath,
+  isSlotId,
+  loadManifest,
+  parseManifest,
+  slotPath,
+  startShellBridge,
+  validateManifest,
+  walletState
+});
+//# sourceMappingURL=shell.cjs.map