@tbbn/widget-core

Status: WORKING.

Shared base for every packages/widget-* custom element — Shadow DOM attachment, the common api-base-url/api-key/access-token attribute contract (backed by @tbbn/sdk-js's TbbnClient), the shared infra-brand design tokens (packages/ui/src/tokens.ts's ink/paper/rust/teal/stone palette, since widgets embed on a merchant's site representing TBBN's identity, not the merchant's own), and renderLoading()/renderError() helpers so every widget's loading/error states look the same.

import { TbbnWidgetElement } from '@tbbn/widget-core';

class MyWidget extends TbbnWidgetElement {
  static get observedAttributes() {
    return ['listing-id'];
  }

  protected async render() {
    this.renderLoading();
    try {
      const listing = await this.client.listings.get(this.getAttribute('listing-id')!);
      this.setContent(`<div class="tbbn-card">${listing.title}</div>`);
    } catch (err) {
      this.renderError(err);
    }
  }
}
customElements.define('my-widget', MyWidget);

Depends on

@tbbn/sdk-js.