@bwalletx/connect 0.2.0 → 0.3.0

package/dist/shell-react.d.cts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { B as BappManifest, S as SlotId } from './manifest-Caj_Raqm.cjs';
+
+interface NavigateDetail {
+    slot?: SlotId;
+    path: string | null;
+    source: 'web' | 'wallet';
+}
+type Handler<D> = (detail: D, event: CustomEvent<D>) => void;
+interface Common {
+    manifest: BappManifest | null;
+    /** "auto" (default) detects bWallet; true/false forces. */
+    inWallet?: boolean | 'auto';
+    /** true = never call location.assign; route in onNavigate. */
+    manualNavigation?: boolean;
+    onNavigate?: Handler<NavigateDetail>;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Slotted content, e.g. <button slot="tools"> or <span slot="strip-left">. */
+    children?: ReactNode;
+}
+interface BappBarProps extends Common {
+    active?: SlotId | null;
+    onActive?: Handler<{
+        slot: SlotId;
+    }>;
+    onBPress?: Handler<{
+        path: string | null;
+    }>;
+    onBHold?: Handler<{
+        phase: 'start' | 'end';
+    }>;
+}
+declare function BappBar(p: BappBarProps): react.DOMElement<Record<string, unknown>, Element>;
+interface BappTopbarProps extends Common {
+    title?: string;
+    subtitle?: string;
+    /** id of the <bwalletx-drawer> the app icon opens. */
+    drawer?: string;
+    /** Show ☰ on the web too (it always shows in the wallet). */
+    menu?: boolean;
+    strip?: boolean;
+    onMenu?: Handler<object>;
+    onClose?: Handler<object>;
+    onDrawerToggle?: Handler<object>;
+}
+declare function BappTopbar(p: BappTopbarProps): react.DOMElement<Record<string, unknown>, Element>;
+interface BappDrawerProps extends Common {
+    open?: boolean;
+    /** Path to highlight; default location.pathname. */
+    current?: string;
+    onClose?: Handler<object>;
+}
+declare function BappDrawer(p: BappDrawerProps): react.DOMElement<Record<string, unknown>, Element>;
+
+export { BappBar, type BappBarProps, BappDrawer, type BappDrawerProps, BappManifest, BappTopbar, type BappTopbarProps, type NavigateDetail, SlotId };

package/dist/shell-react.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { B as BappManifest, S as SlotId } from './manifest-Caj_Raqm.js';
+
+interface NavigateDetail {
+    slot?: SlotId;
+    path: string | null;
+    source: 'web' | 'wallet';
+}
+type Handler<D> = (detail: D, event: CustomEvent<D>) => void;
+interface Common {
+    manifest: BappManifest | null;
+    /** "auto" (default) detects bWallet; true/false forces. */
+    inWallet?: boolean | 'auto';
+    /** true = never call location.assign; route in onNavigate. */
+    manualNavigation?: boolean;
+    onNavigate?: Handler<NavigateDetail>;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Slotted content, e.g. <button slot="tools"> or <span slot="strip-left">. */
+    children?: ReactNode;
+}
+interface BappBarProps extends Common {
+    active?: SlotId | null;
+    onActive?: Handler<{
+        slot: SlotId;
+    }>;
+    onBPress?: Handler<{
+        path: string | null;
+    }>;
+    onBHold?: Handler<{
+        phase: 'start' | 'end';
+    }>;
+}
+declare function BappBar(p: BappBarProps): react.DOMElement<Record<string, unknown>, Element>;
+interface BappTopbarProps extends Common {
+    title?: string;
+    subtitle?: string;
+    /** id of the <bwalletx-drawer> the app icon opens. */
+    drawer?: string;
+    /** Show ☰ on the web too (it always shows in the wallet). */
+    menu?: boolean;
+    strip?: boolean;
+    onMenu?: Handler<object>;
+    onClose?: Handler<object>;
+    onDrawerToggle?: Handler<object>;
+}
+declare function BappTopbar(p: BappTopbarProps): react.DOMElement<Record<string, unknown>, Element>;
+interface BappDrawerProps extends Common {
+    open?: boolean;
+    /** Path to highlight; default location.pathname. */
+    current?: string;
+    onClose?: Handler<object>;
+}
+declare function BappDrawer(p: BappDrawerProps): react.DOMElement<Record<string, unknown>, Element>;
+
+export { BappBar, type BappBarProps, BappDrawer, type BappDrawerProps, BappManifest, BappTopbar, type BappTopbarProps, type NavigateDetail, SlotId };

package/dist/shell-react.js

@@ -0,0 +1,52 @@
+import {
+  defineBappShell
+} from "./chunk-OMEKHKMM.js";
+
+// src/shell/react.ts
+import { createElement, useEffect, useRef } from "react";
+function useShell(tag, props, attrs, events) {
+  const ref = useRef(null);
+  useEffect(() => {
+    defineBappShell();
+  }, []);
+  useEffect(() => {
+    if (ref.current) ref.current.manifest = props.manifest;
+  }, [props.manifest]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const all = { "bapp-navigate": props.onNavigate, ...events };
+    const subs = Object.entries(all).filter(([, h]) => h).map(([type, h]) => {
+      const fn = (e) => h(e.detail, e);
+      el.addEventListener(type, fn);
+      return () => el.removeEventListener(type, fn);
+    });
+    return () => subs.forEach((u) => u());
+  });
+  const a = { ref, id: props.id, class: props.className, style: props.style };
+  if (props.inWallet !== void 0 && props.inWallet !== "auto") a["in-wallet"] = String(props.inWallet);
+  if (props.manualNavigation) a.navigate = "manual";
+  for (const [k, v] of Object.entries(attrs)) if (v !== void 0) a[k] = v;
+  return createElement(tag, a, props.children);
+}
+function BappBar(p) {
+  return useShell("bwalletx-bar", p, { active: p.active ?? void 0 }, { "bapp-active": p.onActive, "bapp-b-press": p.onBPress, "bapp-b-hold": p.onBHold });
+}
+function BappTopbar(p) {
+  return useShell("bwalletx-topbar", p, {
+    title: p.title,
+    subtitle: p.subtitle,
+    drawer: p.drawer,
+    menu: p.menu ? "true" : void 0,
+    strip: p.strip === false ? "off" : void 0
+  }, { "bapp-menu": p.onMenu, "bapp-close": p.onClose, "bapp-drawer-toggle": p.onDrawerToggle });
+}
+function BappDrawer(p) {
+  return useShell("bwalletx-drawer", p, { open: p.open ? "" : void 0, current: p.current }, { "bapp-close": p.onClose });
+}
+export {
+  BappBar,
+  BappDrawer,
+  BappTopbar
+};
+//# sourceMappingURL=shell-react.js.map

package/dist/shell-react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/react.ts"],"sourcesContent":["/**\n * React wrappers for the bApp shell. The elements do the work; these set the manifest property\n * and wire the events.\n *\n *   import { BappBar, BappTopbar, BappDrawer } from '@bwalletx/connect/shell/react';\n *   <BappTopbar manifest={m} drawer=\"sections\" />\n *   <BappDrawer id=\"sections\" manifest={m} />\n *   <BappBar manifest={m} active=\"feed\" onNavigate={(d, e) => { e.preventDefault(); router.push(d.path) }} />\n */\nimport { createElement, useEffect, useRef, type CSSProperties, type ReactNode } from 'react';\nimport { defineBappShell } from './elements.js';\nimport type { BappManifest, SlotId } from './manifest.js';\n\nexport interface NavigateDetail { slot?: SlotId; path: string | null; source: 'web' | 'wallet' }\ntype Handler<D> = (detail: D, event: CustomEvent<D>) => void;\n\ninterface Common {\n  manifest: BappManifest | null;\n  /** \"auto\" (default) detects bWallet; true/false forces. */\n  inWallet?: boolean | 'auto';\n  /** true = never call location.assign; route in onNavigate. */\n  manualNavigation?: boolean;\n  onNavigate?: Handler<NavigateDetail>;\n  id?: string;\n  className?: string;\n  style?: CSSProperties;\n  /** Slotted content, e.g. <button slot=\"tools\"> or <span slot=\"strip-left\">. */\n  children?: ReactNode;\n}\n\nfunction useShell(tag: string, props: Common, attrs: Record<string, string | undefined>, events: Record<string, Handler<any> | undefined>) {\n  const ref = useRef<HTMLElement & { manifest: BappManifest | null }>(null);\n  useEffect(() => { defineBappShell(); }, []);\n  useEffect(() => { if (ref.current) ref.current.manifest = props.manifest; }, [props.manifest]);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const all = { 'bapp-navigate': props.onNavigate, ...events };\n    const subs = Object.entries(all).filter(([, h]) => h).map(([type, h]) => {\n      const fn = (e: Event) => h!((e as CustomEvent).detail, e as CustomEvent);\n      el.addEventListener(type, fn);\n      return () => el.removeEventListener(type, fn);\n    });\n    return () => subs.forEach((u) => u());\n  });\n  const a: Record<string, unknown> = { ref, id: props.id, class: props.className, style: props.style };\n  if (props.inWallet !== undefined && props.inWallet !== 'auto') a['in-wallet'] = String(props.inWallet);\n  if (props.manualNavigation) a.navigate = 'manual';\n  for (const [k, v] of Object.entries(attrs)) if (v !== undefined) a[k] = v;\n  return createElement(tag, a, props.children);\n}\n\nexport interface BappBarProps extends Common {\n  active?: SlotId | null;\n  onActive?: Handler<{ slot: SlotId }>;\n  onBPress?: Handler<{ path: string | null }>;\n  onBHold?: Handler<{ phase: 'start' | 'end' }>;\n}\nexport function BappBar(p: BappBarProps) {\n  return useShell('bwalletx-bar', p, { active: p.active ?? undefined }, { 'bapp-active': p.onActive, 'bapp-b-press': p.onBPress, 'bapp-b-hold': p.onBHold });\n}\n\nexport interface BappTopbarProps extends Common {\n  title?: string;\n  subtitle?: string;\n  /** id of the <bwalletx-drawer> the app icon opens. */\n  drawer?: string;\n  /** Show ☰ on the web too (it always shows in the wallet). */\n  menu?: boolean;\n  strip?: boolean;\n  onMenu?: Handler<object>;\n  onClose?: Handler<object>;\n  onDrawerToggle?: Handler<object>;\n}\nexport function BappTopbar(p: BappTopbarProps) {\n  return useShell('bwalletx-topbar', p, {\n    title: p.title, subtitle: p.subtitle, drawer: p.drawer, menu: p.menu ? 'true' : undefined, strip: p.strip === false ? 'off' : undefined,\n  }, { 'bapp-menu': p.onMenu, 'bapp-close': p.onClose, 'bapp-drawer-toggle': p.onDrawerToggle });\n}\n\nexport interface BappDrawerProps extends Common {\n  open?: boolean;\n  /** Path to highlight; default location.pathname. */\n  current?: string;\n  onClose?: Handler<object>;\n}\nexport function BappDrawer(p: BappDrawerProps) {\n  return useShell('bwalletx-drawer', p, { open: p.open ? '' : undefined, current: p.current }, { 'bapp-close': p.onClose });\n}\n\nexport type { BappManifest, SlotId } from './manifest.js';\n"],"mappings":";;;;;AASA,SAAS,eAAe,WAAW,cAAkD;AAqBrF,SAAS,SAAS,KAAa,OAAe,OAA2C,QAAkD;AACzI,QAAM,MAAM,OAAwD,IAAI;AACxE,YAAU,MAAM;AAAE,oBAAgB;AAAA,EAAG,GAAG,CAAC,CAAC;AAC1C,YAAU,MAAM;AAAE,QAAI,IAAI,QAAS,KAAI,QAAQ,WAAW,MAAM;AAAA,EAAU,GAAG,CAAC,MAAM,QAAQ,CAAC;AAC7F,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,MAAM,EAAE,iBAAiB,MAAM,YAAY,GAAG,OAAO;AAC3D,UAAM,OAAO,OAAO,QAAQ,GAAG,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM;AACvE,YAAM,KAAK,CAAC,MAAa,EAAI,EAAkB,QAAQ,CAAgB;AACvE,SAAG,iBAAiB,MAAM,EAAE;AAC5B,aAAO,MAAM,GAAG,oBAAoB,MAAM,EAAE;AAAA,IAC9C,CAAC;AACD,WAAO,MAAM,KAAK,QAAQ,CAAC,MAAM,EAAE,CAAC;AAAA,EACtC,CAAC;AACD,QAAM,IAA6B,EAAE,KAAK,IAAI,MAAM,IAAI,OAAO,MAAM,WAAW,OAAO,MAAM,MAAM;AACnG,MAAI,MAAM,aAAa,UAAa,MAAM,aAAa,OAAQ,GAAE,WAAW,IAAI,OAAO,MAAM,QAAQ;AACrG,MAAI,MAAM,iBAAkB,GAAE,WAAW;AACzC,aAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,KAAK,EAAG,KAAI,MAAM,OAAW,GAAE,CAAC,IAAI;AACxE,SAAO,cAAc,KAAK,GAAG,MAAM,QAAQ;AAC7C;AAQO,SAAS,QAAQ,GAAiB;AACvC,SAAO,SAAS,gBAAgB,GAAG,EAAE,QAAQ,EAAE,UAAU,OAAU,GAAG,EAAE,eAAe,EAAE,UAAU,gBAAgB,EAAE,UAAU,eAAe,EAAE,QAAQ,CAAC;AAC3J;AAcO,SAAS,WAAW,GAAoB;AAC7C,SAAO,SAAS,mBAAmB,GAAG;AAAA,IACpC,OAAO,EAAE;AAAA,IAAO,UAAU,EAAE;AAAA,IAAU,QAAQ,EAAE;AAAA,IAAQ,MAAM,EAAE,OAAO,SAAS;AAAA,IAAW,OAAO,EAAE,UAAU,QAAQ,QAAQ;AAAA,EAChI,GAAG,EAAE,aAAa,EAAE,QAAQ,cAAc,EAAE,SAAS,sBAAsB,EAAE,eAAe,CAAC;AAC/F;AAQO,SAAS,WAAW,GAAoB;AAC7C,SAAO,SAAS,mBAAmB,GAAG,EAAE,MAAM,EAAE,OAAO,KAAK,QAAW,SAAS,EAAE,QAAQ,GAAG,EAAE,cAAc,EAAE,QAAQ,CAAC;AAC1H;","names":[]}