billing-kit-components — diagrams

The mermaid sources for this repo. They live here rather than in the README because npm renders no mermaid: on the package page a fence like this one ships as raw DSL. GitHub and the QuxKit docs site both draw them. The README carries an ASCII equivalent of each.

Install path: the seat gate, the registry, your repo

flowchart LR
    subgraph reg["billing-kit-components — proprietary, per seat"]
        items["19 components + 3 hooks<br/>source, shadcn schema"]
    end

    gate{{"seat gate<br/>ai_member_cloud entitlement"}}

    subgraph app["your app"]
        direction TB
        src["component source<br/>yours to own and restyle"]
        bk["billing-kit — Apache-2.0<br/>Money · Quantity · types"]
        src -->|reads types| bk
    end

    cli(["npx shadcn add"]) -->|seat token| gate
    gate -->|valid| items
    items -->|writes source| src

    classDef prop fill:#7c3aed,stroke:#6d28d9,color:#ffffff;
    classDef apache fill:#0d9488,stroke:#0f766e,color:#ffffff;
    classDef gate fill:#8a6212,stroke:#6d4d0e,color:#ffffff;
    class items prop;
    class bk apache;
    class gate gate;

One Money formatter, from SQL to the rendered amount

flowchart LR
    db[("billing-kit<br/>queryUsage · balance<br/>SQL — server only")]
    route["your HTTP route<br/>MoneyJSON wire form"]
    hook["useBalance · useUsage<br/>rebuilds Money and Quantity"]
    comp["component<br/>formatMoney()"]
    ui(["$99.00 &nbsp; ¥1,200 &nbsp; -$24.50"])

    db --> route --> hook --> comp --> ui

    bad["minor / 100<br/>wrong for JPY and KWD; a double drifts"]
    comp -. never .- bad

    classDef ok fill:#0d9488,stroke:#0f766e,color:#ffffff;
    classDef stop fill:#9e2b2b,stroke:#7f2222,color:#ffffff;
    class hook,comp ok;
    class bad stop;