New
Twelve illustrated cards for quiet changes through the year.
Kaufmann Commerce UI / Commerce family
Cart Suite
A server-rendered cart with a narrow browser projection for quantity, stock, and shipping-destination events. Transport remains replaceable.
Realtime rehearsal
Change products, quantities, simulated stock, and destination country. Only this lab area loads client-side JavaScript.
A printed forest letter with a short read-aloud story.
Kaufmann Commerce
Your cart
Seasonal Circle Cards
€24.00Forest Letter · Autumn
€12.00Shipping destination
AustriaCountry
Tracked delivery in 2–4 business days.
000 eventsWaiting for a simulated frontend event …
Streaming API
CartPanel remains server rendered and accepts localisable labels, while the store understands small domain UI events as a browser projection. The WebSocket adapter is intentionally thin: authentication, cursor semantics, ordering, tenant scope, reservation, and reconnection belong to the future backend contract.
Frontend rehearsal onlyThe controls above emit local events. No event is presented as canonical inventory, an authoritative shipping quote, or a binding order.
---
import { CartPanel } from "@kaufmann/ui";
import { shippingPolicy } from "../commerce/shipping";
---
<CartPanel
cart={serverRenderedCart}
shipping={shippingPolicy}
heading="Your cart"
locale="en-GB"
labels={{
checkout: "Continue to checkout",
connection: { rehearsal: "Demo stream" }
}}
/>import {
createCommerceStore,
connectCommerceSocket,
} from "@kaufmann/ui/realtime";
const store = createCommerceStore(serverRenderedCart);
// Later, when the authenticated backend contract exists:
const stream = connectCommerceSocket({
url: commerceStreamUrl,
store,
parse: parseBackendEvent,
});