One contract.
Four places to ship it.

Four surfaces, one contract

Every surface renders the same canonical envelopes, so a figure that appears in a card on the website appears identically in chat and inside an agent widget.

Packages

Install only the surfaces you need. Everything is ESM with types, and React is a peer dependency.

Package	What it does	Version
@hetibank/apps	MCP Apps / OpenAI Apps SDK kit: JSON-RPC bridge, widget runtime, tool-result hooks and resource templates.	0.1.0
@hetibank/backgrounds	Token-safe animated backgrounds for agent websites and report backdrops: 42 canvas/SVG effect profiles, paint-only and reduced-motion aware.	0.1.0
@hetibank/chat	UI kit for chat surfaces: messages, safe Markdown, component envelopes, evidence, forms, voice controls and handoff.	0.1.0
@hetibank/client	Typed HETIBANK API client with an injected transport, typed errors and evidence-preserving responses.	0.1.0
@hetibank/contracts	Canonical, runtime-validated HETIBANK API and presentation contracts. No UI, no business math.	0.1.0
@hetibank/plugins	Open-source plugin kit: manifest schemas, validation CLI, packaging, MCP server and plugin templates.	0.1.0
@hetibank/theme	Brandable design tokens, brokerage overlays and WCAG contrast gates for the HETIBANK SDK.	0.1.0
@hetibank/ui	Dependency-light HETIBANK UI primitives, states, evidence and shell containers with plain CSS and shadcn vocabulary.	0.1.0
@hetibank/websites	UI kit for brokerage websites: property cards, search and filters, financing, reports and branded shell compositions.	0.1.0

Quickstart

Render a canonical property card with a brand theme. The card data comes from the API; nothing here computes money.

pnpm add @hetibank/websites @hetibank/ui @hetibank/theme @hetibank/contracts

import { ThemeProvider } from "@hetibank/ui";
import { PropertyCard } from "@hetibank/websites";
import { createBrandTheme } from "@hetibank/theme";
import "@hetibank/theme/styles.css";
import "@hetibank/ui/styles.css";
import "@hetibank/websites/styles.css";

const theme = createBrandTheme({
  brand: { name: "Desert Bloom Realty", primary: "#5b3a29", accent: "#ad6436" },
});

export function SearchPage({ card }) {
  return (
    <ThemeProvider theme={theme} as="section">
      <PropertyCard component={card} />
    </ThemeProvider>
  );
}

Rules the code enforces