themelia-ui 2.0.0 → 3.0.0

package/.agents/skills/themelia-ui/references/components/admin--patterns--commerce.md

@@ -1,2040 +0,0 @@
-<!-- GENERATED by scripts/gen-consumer-docs.mjs — do not edit. -->
-
-# `admin/patterns/commerce`
-
-Admin screens present orders, invoices, carts, fulfilment and loyalty.
-
-## Selection
-
-- **Use when:** Admin screens present orders, invoices, carts, fulfilment and loyalty.
-- **Avoid when:** The record is a catalogue product, whose options and readiness live in features/products.
-- **Consider instead:** `features/products`
-- **Stability:** stable.
-
-## Import
-
-```tsx fragment — import-only example
-import { AddressCard } from "themelia-ui/admin/patterns/commerce"
-import "themelia-ui/admin/patterns/commerce.css"
-```
-
-## Composition
-
-This family composes `base/action-menu`, `base/avatar`, `base/badge`, `base/buttons`, `base/choice-inputs`, `base/copyable`, `base/display`, `base/feedback`, `base/forms`, `base/item`, `base/navigation`, `base/structure`, `base/table`, `base/text-inputs`, `base/timeline`, `base/typography`, `base/value-inputs`, `patterns/timelines`.
-
-Application policy—routing, fetching, persistence, permissions, and translation—stays
-outside the package and arrives through the public props, callbacks, slots, or accessors below.
-
-## Public declarations
-
-### `AddressCard`
-
-Kind: callable.
-
-```text
-({ kind, name, line1, line2, city, region, postalCode, country, phone, isDefault, onEdit, onRemove, onMakeDefault, strings, className, ...props }: AddressCardProps) => import("react").JSX.Element
-```
-
-### `AddressCardProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `kind` | no | `AddressKind` |  |
-| `name` | yes | `string` |  |
-| `line1` | yes | `string` |  |
-| `line2` | no | `string` |  |
-| `city` | yes | `string` |  |
-| `region` | no | `string` | State, province, or region. |
-| `postalCode` | no | `string` |  |
-| `country` | yes | `string` |  |
-| `phone` | no | `string` |  |
-| `isDefault` | no | `boolean` | Marks this as the account's default for its kind. |
-| `onEdit` | no | `() => void` |  |
-| `onRemove` | no | `() => void` |  |
-| `onMakeDefault` | no | `() => void` |  |
-| `strings` | no | `Partial<AddressStrings>` |  |
-
-### `AddressKind`
-
-Kind: type.
-
-What an address is for.
-
-```text
-"shipping" | "billing" | "pickup"
-```
-
-### `AddressStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `defaultBadge` | yes | `string` |  |
-| `edit` | yes | `string` |  |
-| `remove` | yes | `string` |  |
-| `makeDefault` | yes | `string` |  |
-| `shipping` | yes | `string` |  |
-| `billing` | yes | `string` |  |
-| `pickup` | yes | `string` |  |
-
-### `AmountRow`
-
-Kind: callable.
-
-```text
-({ label, amount, total, deduction, note, className, ...props }: AmountRowProps) => import("react").JSX.Element
-```
-
-### `AmountRowProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `label` | yes | `ReactNode` |  |
-| `amount` | yes | `string` | Already formatted, including its currency. |
-| `total` | no | `boolean` | Marks the row the eye should land on — a total, an amount due. |
-| `deduction` | no | `boolean` | Money coming off the total. Rewrites the sign rather than trusting the caller's, and tints the figure. |
-| `note` | no | `ReactNode` | A rate, a qualifier — sits quietly beside the label. |
-
-### `Booking`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `date` | yes | `Date \| string \| number` | A Date, an ISO string, or a timestamp — DateBlock owns the formatting. |
-| `service` | yes | `string` | What was booked. |
-| `customer` | yes | `string` |  |
-| `time` | yes | `string` | Already formatted — "14:00". |
-| `amount` | yes | `string` | Already formatted, including its currency. |
-
-### `BookingCard`
-
-Kind: callable.
-
-```text
-({ status, details, actionLabel, onAction, className, ...props }: BookingCardProps) => import("react").JSX.Element
-```
-
-### `BookingCardProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `status` | no | `ReactNode` | A chip, usually — the booking's state. |
-| `details` | yes | `BookingDetail[]` |  |
-| `actionLabel` | no | `ReactNode` |  |
-| `onAction` | no | `() => void` |  |
-
-### `BookingDetail`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `label` | yes | `ReactNode` |  |
-| `value` | yes | `ReactNode` |  |
-| `fullWidth` | no | `boolean` | Spans the row and sits on its own ground — for a note or an address. |
-
-### `calculateSeoScore`
-
-Kind: callable.
-
-```text
-(input: SeoScoreInput) => SeoScore
-```
-
-### `CartLine`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `title` | yes | `string` |  |
-| `variantTitle` | no | `string` | The chosen option — "Large / Blue". |
-| `quantity` | yes | `number` |  |
-| `price` | yes | `string` | Already formatted, including its currency. |
-| `imageSrc` | no | `string` |  |
-| `imageAlt` | no | `string` |  |
-
-### `CartStrings`
-
-Kind: interface.
-
-Copy owned by the commerce blocks: one dictionary for the domain, so shared words match.
-Counts are functions, so a translation controls pluralisation.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `subtotal` | yes | `string` |  |
-| `tax` | yes | `string` |  |
-| `shipping` | yes | `string` |  |
-| `discount` | yes | `string` |  |
-| `total` | yes | `string` |  |
-| `checkout` | yes | `string` |  |
-| `formatQuantity` | yes | `(quantity: number) => string` |  |
-
-### `CartSummary`
-
-Kind: callable.
-
-```text
-({ items, subtotal, tax, shipping, discount, total, onCheckout, strings, className, ...props }: CartSummaryProps) => import("react").JSX.Element
-```
-
-### `CartSummaryProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `items` | yes | `CartLine[]` |  |
-| `subtotal` | no | `string` | Every amount is already formatted — this block totals nothing itself. |
-| `tax` | no | `string` |  |
-| `shipping` | no | `string` |  |
-| `discount` | no | `string` | Rendered as a deduction, with the sign rewritten. |
-| `total` | yes | `string` |  |
-| `onCheckout` | no | `() => void` |  |
-| `strings` | no | `Partial<CartStrings>` |  |
-
-### `CodeEntry`
-
-Kind: callable.
-
-```text
-({ kind, appliedCode, appliedDiscount, balance, error, loading, onApply, onRemove, strings, className, ...props }: CodeEntryProps) => import("react").JSX.Element
-```
-
-### `CodeEntryKind`
-
-Kind: type.
-
-CodeEntry — a discount code or a gift card.
-
-These were two components, and they were the same component twice: a title, a field, a
-button, and an applied state. The only real difference is that a gift card holds a
-BALANCE — money that may outlast this order — where a discount either applies or does
-not. That is one optional prop, not a second component.
-
-`kind` picks the preset: the icon, the default copy, and whether the code is upper-cased
-on submit. Gift card codes are printed in capitals and nobody types them that way.
-
-```text
-"discount" | "gift"
-```
-
-### `CodeEntryProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "onSubmit">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `kind` | no | `CodeEntryKind` |  |
-| `appliedCode` | no | `string` | The code in force. Present switches the card to its applied state. |
-| `appliedDiscount` | no | `string` | What it took off, already formatted. |
-| `balance` | no | `string` | What is left on the card, already formatted. Gift cards only. |
-| `error` | no | `string` | A rejection message, shown under the field. |
-| `loading` | no | `boolean` |  |
-| `onApply` | no | `(code: string) => void` |  |
-| `onRemove` | no | `() => void` |  |
-| `strings` | no | `Partial<CodeEntryStrings>` |  |
-
-### `CodeEntryStrings`
-
-Kind: interface.
-
-Copy for `CodeEntry`, which serves both a discount code and a gift card.
-
-Two presets rather than two components: the wording differs because redeeming a gift
-card is a balance lookup before it is an application, but the interaction is identical.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `helperText` | no | `string` | Under the title. Empty for the discount case, which needs no explaining. |
-| `fieldLabel` | yes | `string` | The field shows no visible label, so this is its only accessible name. |
-| `placeholder` | yes | `string` |  |
-| `apply` | yes | `string` |  |
-| `remove` | yes | `string` |  |
-| `applied` | yes | `string` |  |
-| `balance` | yes | `string` | What is left on a gift card. Unused by the discount preset. |
-
-### `DEFAULT_SEO_LIMITS`
-
-Kind: const.
-
-```text
-SeoLimits
-```
-
-### `defaultAddressStrings`
-
-Kind: const.
-
-```text
-AddressStrings
-```
-
-### `defaultCartStrings`
-
-Kind: const.
-
-```text
-CartStrings
-```
-
-### `defaultDiscountCodeStrings`
-
-Kind: const.
-
-```text
-CodeEntryStrings
-```
-
-### `defaultDiscountStackStrings`
-
-Kind: const.
-
-```text
-DiscountStackStrings
-```
-
-### `defaultFulfillmentGroupStrings`
-
-Kind: const.
-
-```text
-FulfillmentGroupStrings
-```
-
-### `defaultGiftCodeStrings`
-
-Kind: const.
-
-```text
-CodeEntryStrings
-```
-
-### `defaultInventorySectionStrings`
-
-Kind: const.
-
-```text
-InventorySectionStrings
-```
-
-### `defaultInventoryStrings`
-
-Kind: const.
-
-```text
-InventoryStrings
-```
-
-### `defaultInvoiceStrings`
-
-Kind: const.
-
-```text
-InvoiceStrings
-```
-
-### `defaultLoyaltyStrings`
-
-Kind: const.
-
-```text
-LoyaltyStrings
-```
-
-### `defaultOrderCustomerStrings`
-
-Kind: const.
-
-```text
-OrderCustomerStrings
-```
-
-### `defaultOrderHeaderStrings`
-
-Kind: const.
-
-```text
-OrderHeaderStrings
-```
-
-### `defaultOrderStatusStrings`
-
-Kind: const.
-
-```text
-OrderStatusStrings
-```
-
-### `defaultOrderStatusVocabulary`
-
-Kind: const.
-
-```text
-OrderStatusVocabulary
-```
-
-### `defaultOrderSummaryStrings`
-
-Kind: const.
-
-```text
-OrderSummaryStrings
-```
-
-### `defaultPaymentMethodStrings`
-
-Kind: const.
-
-```text
-PaymentMethodStrings
-```
-
-### `defaultRefundStrings`
-
-Kind: const.
-
-```text
-RefundStrings
-```
-
-### `defaultSeoStrings`
-
-Kind: const.
-
-```text
-SeoStrings
-```
-
-### `defaultShipmentStrings`
-
-Kind: const.
-
-```text
-ShipmentStrings
-```
-
-### `defaultSubscriptionStrings`
-
-Kind: const.
-
-```text
-SubscriptionStrings
-```
-
-### `defaultTaxBreakdownStrings`
-
-Kind: const.
-
-```text
-TaxBreakdownStrings
-```
-
-### `defaultTransactionStrings`
-
-Kind: const.
-
-```text
-TransactionStrings
-```
-
-### `defaultVendorStrings`
-
-Kind: const.
-
-```text
-VendorStrings
-```
-
-### `Discount`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | no | `string` |  |
-| `label` | yes | `string` |  |
-| `kind` | no | `ReactNode` | What kind of discount it is — "Code", "Automatic", "Volume".<br><br>Rendered as a quiet qualifier beside the label, not as a chip. A Badge here was the<br>first thing tried and it failed contrast at 3.45:1 in the dark theme: a chip is drawn<br>to sit on a card, and the ledger it lands in has its own tinted ground under it. |
-| `amount` | yes | `string` |  |
-
-### `DiscountStack`
-
-Kind: callable.
-
-```text
-({ discounts, totalSavings, strings, className, ...props }: DiscountStackProps) => import("react").JSX.Element
-```
-
-### `DiscountStackProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `discounts` | yes | `Discount[]` | In the order they stack, because order changes the arithmetic. |
-| `totalSavings` | yes | `string` |  |
-| `strings` | no | `Partial<DiscountStackStrings>` |  |
-
-### `DiscountStackStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `totalSavings` | yes | `string` |  |
-
-### `formatDeduction`
-
-Kind: callable.
-
-Writes an amount as a deduction. A blank value is returned untouched.
-
-```text
-(value: string) => string
-```
-
-### `FULFILLMENT_STATUS_TONE`
-
-Kind: const.
-
-```text
-Record<FulfillmentStatus, BadgeTone>
-```
-
-### `FulfillmentGroup`
-
-Kind: callable.
-
-```text
-({ status, location, notice, noticeIcon: NoticeIcon, items, children, actions, strings, vocabulary, className, ...props }: FulfillmentGroupProps) => import("react").JSX.Element
-```
-
-### `FulfillmentGroupProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `status` | yes | `FulfillmentStatus` |  |
-| `location` | no | `ReactNode` | Where it ships from. |
-| `notice` | no | `ReactNode` | A standing fact about the group — "Shipping not required". |
-| `noticeIcon` | no | `LucideIcon` | The glyph beside the notice. A component, so the group sizes it. |
-| `items` | no | `OrderLine[]` |  |
-| `children` | no | `ReactNode` | Overrides `items` entirely, for a caller who needs the rows themselves. |
-| `actions` | no | `ActionDefinition[]` | The first renders as a button; the rest collapse into an overflow menu. |
-| `strings` | no | `Partial<FulfillmentGroupStrings>` |  |
-| `vocabulary` | no | `Partial<OrderStatusVocabulary>` |  |
-
-### `FulfillmentGroupStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `formatHeading` | yes | `(status: string, count: number) => string` | Names the group by state and size — "Unfulfilled (3)". |
-| `formatUnitPrice` | yes | `(unitPrice: string, quantity: number) => string` | Reads the price column aloud — "€50.00 each, 1 of them". |
-
-### `FulfillmentStatus`
-
-Kind: type.
-
-Where the goods are.
-
-```text
-"unfulfilled" | "partiallyFulfilled" | "fulfilled" | "scheduled" | "onHold" | "cancelled"
-```
-
-### `InventoryLevel`
-
-Kind: callable.
-
-```text
-({ productName, variant, stock, reorderLevel, maxStock, lastRestocked, strings, className, ...props }: InventoryLevelProps) => import("react").JSX.Element
-```
-
-### `InventoryLevelProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `productName` | yes | `string` |  |
-| `variant` | no | `string` | The chosen option, when the product has any. |
-| `stock` | yes | `number` |  |
-| `reorderLevel` | yes | `number` | Below this, the level reads as low rather than healthy. |
-| `maxStock` | yes | `number` | The gauge's upper bound. |
-| `lastRestocked` | no | `string` | Already formatted. |
-| `strings` | no | `Partial<InventoryStrings>` |  |
-
-### `InventoryPolicy`
-
-Kind: type.
-
-What happens when stock runs out.
-
-```text
-"deny" | "continue"
-```
-
-### `InventorySection`
-
-Kind: callable.
-
-```text
-({ value, onFieldChange, sections, strings, className, ...props }: InventorySectionProps) => import("react").JSX.Element
-```
-
-### `InventorySectionField`
-
-Kind: type.
-
-```text
-keyof InventorySectionValue
-```
-
-### `InventorySectionName`
-
-Kind: type.
-
-Which groups to draw. Omit for all of them.
-
-```text
-"summary" | "identity" | "tracking" | "location" | "shipping" | "customs" | "tags"
-```
-
-### `InventorySectionProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "onChange">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `value` | yes | `InventorySectionValue` |  |
-| `onFieldChange` | no | `(change: { field: InventorySectionField; value: InventorySectionValue[InventorySectionField]; previousValue: InventorySectionValue[InventorySectionField]; }) => void` | Reports the field, its new value, and what it replaced. Omit for a read-only record. |
-| `sections` | no | `InventorySectionName[]` |  |
-| `strings` | no | `Partial<InventorySectionStrings>` |  |
-
-### `InventorySectionStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `description` | yes | `string` |  |
-| `sections` | yes | `Record<"identity" \| "tracking" \| "location" \| "shipping" \| "customs" \| "tags", string>` |  |
-| `fields` | yes | `Record<"sku" \| "barcode" \| "trackQuantity" \| "available" \| "committed" \| "incoming" \| "lowStockThreshold" \| "inventoryPolicy" \| "binLocation" \| "requiresShipping" \| "weight" \| "countryOfOrigin" \| "hsCode" \| "tags", string>` |  |
-| `placeholders` | yes | `Partial<Record<string, string>>` |  |
-| `hints` | yes | `Partial<Record<string, string>>` |  |
-| `policy` | yes | `Record<"deny" \| "continue", string>` |  |
-| `summary` | yes | `Record<"available" \| "committed" \| "incoming" \| "threshold", string>` |  |
-
-### `InventorySectionValue`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `sku` | no | `string` |  |
-| `barcode` | no | `string` |  |
-| `trackQuantity` | no | `boolean` | Off means the other quantity fields have no meaning and are not drawn. |
-| `available` | no | `string` |  |
-| `committed` | no | `string` |  |
-| `incoming` | no | `string` |  |
-| `lowStockThreshold` | no | `string` |  |
-| `inventoryPolicy` | no | `InventoryPolicy` |  |
-| `binLocation` | no | `string` |  |
-| `requiresShipping` | no | `boolean` |  |
-| `weight` | no | `string` |  |
-| `countryOfOrigin` | no | `string` |  |
-| `hsCode` | no | `string` |  |
-| `tags` | no | `string[]` |  |
-
-### `InventoryStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `inStock` | yes | `string` |  |
-| `lowStock` | yes | `string` |  |
-| `outOfStock` | yes | `string` |  |
-| `reorderAt` | yes | `string` |  |
-| `lastRestocked` | yes | `string` |  |
-| `formatLevel` | yes | `(stock: number, max: number) => string` | Names the gauge, which otherwise states the level by width alone. |
-
-### `INVOICE_STATUS_TONE`
-
-Kind: const.
-
-```text
-Record<InvoiceStatus, BadgeTone>
-```
-
-### `InvoiceHeader`
-
-Kind: callable.
-
-```text
-({ invoiceNumber, status, from, to, issuedAt, dueAt, amountDue, strings, className, ...props }: InvoiceHeaderProps) => import("react").JSX.Element
-```
-
-### `InvoiceHeaderProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `invoiceNumber` | yes | `string` |  |
-| `status` | yes | `InvoiceStatus` |  |
-| `from` | yes | `InvoiceParty` |  |
-| `to` | yes | `InvoiceParty` |  |
-| `issuedAt` | no | `string` | Already formatted. |
-| `dueAt` | no | `string` |  |
-| `amountDue` | yes | `string` | Already formatted, including its currency. |
-| `strings` | no | `Partial<InvoiceStrings>` |  |
-
-### `InvoiceLine`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | no | `string` |  |
-| `description` | yes | `string` |  |
-| `quantity` | yes | `number` |  |
-| `unitPrice` | yes | `number` | A number, not a string — the table totals these. |
-
-### `InvoiceLineItems`
-
-Kind: callable.
-
-```text
-({ lines, currency, taxRate, strings, className, ...props }: InvoiceLineItemsProps) => import("react").JSX.Element
-```
-
-### `InvoiceLineItemsProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `lines` | yes | `InvoiceLine[]` |  |
-| `currency` | no | `string` | ISO 4217. Handed to the Money primitive, which knows each currency's exponent. |
-| `taxRate` | no | `number` | A ratio — `0.2` is 20%. Omit to show no tax row. |
-| `strings` | no | `Partial<InvoiceStrings>` |  |
-
-### `InvoiceMini`
-
-Kind: callable.
-
-```text
-({ invoiceNumber, status, customerName, lineCount, dueAt, total, strings, className, ...props }: InvoiceMiniProps) => import("react").JSX.Element
-```
-
-### `InvoiceMiniProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `invoiceNumber` | yes | `string` |  |
-| `status` | yes | `InvoiceStatus` |  |
-| `customerName` | yes | `string` |  |
-| `lineCount` | yes | `number` |  |
-| `dueAt` | yes | `string` | Already formatted. |
-| `total` | yes | `string` | Already formatted, including its currency. |
-| `strings` | no | `Partial<InvoiceStrings>` |  |
-
-### `InvoiceParty`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `name` | yes | `string` |  |
-| `location` | no | `ReactNode` | A city, a country — whatever identifies the party beyond its name. |
-
-### `InvoiceStatus`
-
-Kind: type.
-
-Where an invoice stands.
-
-```text
-"paid" | "pending" | "overdue"
-```
-
-### `InvoiceStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `billFrom` | yes | `string` |  |
-| `billTo` | yes | `string` |  |
-| `issued` | yes | `string` |  |
-| `due` | yes | `string` |  |
-| `amountDue` | yes | `string` |  |
-| `item` | yes | `string` |  |
-| `quantity` | yes | `string` |  |
-| `price` | yes | `string` |  |
-| `amount` | yes | `string` |  |
-| `subtotal` | yes | `string` |  |
-| `tax` | yes | `string` |  |
-| `total` | yes | `string` |  |
-| `paid` | yes | `string` |  |
-| `pending` | yes | `string` |  |
-| `overdue` | yes | `string` |  |
-| `formatLineCount` | yes | `(count: number) => string` |  |
-
-### `LoyaltyMovement`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `label` | yes | `string` | What earned or spent the points. |
-| `date` | yes | `string` | Already formatted. |
-| `points` | yes | `string` | The magnitude. The sign is drawn from `earned`, not parsed out of this. |
-| `earned` | yes | `boolean` |  |
-
-### `LoyaltyPoints`
-
-Kind: callable.
-
-```text
-({ balance, tier, tierTone, movements, onRedeem, strings, className, ...props }: LoyaltyPointsProps) => import("react").JSX.Element
-```
-
-### `LoyaltyPointsProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `balance` | yes | `number \| string` | A number gets locale grouping; a string is taken as already formatted. |
-| `tier` | no | `ReactNode` | The tier's name. A caller's word, so there is no English default to leak. |
-| `tierTone` | no | `BadgeTone` |  |
-| `movements` | no | `LoyaltyMovement[]` |  |
-| `onRedeem` | no | `() => void` |  |
-| `strings` | no | `Partial<LoyaltyStrings>` |  |
-
-### `LoyaltyStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `balanceLabel` | yes | `string` |  |
-| `pointsAvailable` | yes | `string` |  |
-| `activityLabel` | yes | `string` | Over the movement list — without it the rows hang under a balance they only relate to. |
-| `redeem` | yes | `string` |  |
-
-### `MINUS_SIGN`
-
-Kind: const.
-
-```text
-unknown
-```
-
-### `ORDER_STATUS_TONE`
-
-Kind: const.
-
-```text
-Record<OrderStatus, BadgeTone>
-```
-
-### `OrderAddress`
-
-Kind: interface.
-
-A postal address as an order carries it. `AddressCard` keeps its own flat props.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `name` | no | `string` |  |
-| `line1` | yes | `string` |  |
-| `line2` | no | `string` |  |
-| `city` | yes | `string` |  |
-| `region` | no | `string` | State, province, or region. |
-| `postalCode` | no | `string` |  |
-| `country` | yes | `string` |  |
-| `phone` | no | `string` |  |
-
-### `OrderCustomer`
-
-Kind: callable.
-
-```text
-({ name, email, phone, orderCount, shippingAddress, billingAddress, billingSameAsShipping, onOpenCustomer, onEditShipping, onEditBilling, strings, className, ...props }: OrderCustomerProps) => import("react").JSX.Element
-```
-
-### `OrderCustomerProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `name` | yes | `string` |  |
-| `email` | no | `string` |  |
-| `phone` | no | `string` |  |
-| `orderCount` | no | `number` | How many orders this customer has placed, this one included. |
-| `shippingAddress` | no | `OrderAddress` |  |
-| `billingAddress` | no | `OrderAddress` |  |
-| `billingSameAsShipping` | no | `boolean` | Renders one line in place of a repeated address. |
-| `onOpenCustomer` | no | `() => void` |  |
-| `onEditShipping` | no | `() => void` |  |
-| `onEditBilling` | no | `() => void` |  |
-| `strings` | no | `Partial<OrderCustomerStrings>` |  |
-
-### `OrderCustomerStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `shippingAddress` | yes | `string` |  |
-| `billingAddress` | yes | `string` |  |
-| `editShipping` | yes | `string` |  |
-| `editBilling` | yes | `string` |  |
-| `sameAsShipping` | yes | `string` | Shown in place of a repeated address. |
-| `noAddress` | yes | `string` |  |
-| `formatOrderCount` | yes | `(count: number) => string` |  |
-
-### `OrderEvent`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `label` | yes | `string` |  |
-| `timestamp` | no | `string` | Already formatted. |
-| `complete` | yes | `boolean` |  |
-
-### `OrderHeader`
-
-Kind: callable.
-
-```text
-({ orderNumber, fulfillmentStatus, paymentStatus, placedAt, source, actions, strings, vocabulary, className, ...props }: OrderHeaderProps) => import("react").JSX.Element
-```
-
-### `OrderHeaderProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `orderNumber` | yes | `string` |  |
-| `fulfillmentStatus` | no | `FulfillmentStatus` | Where the goods are. |
-| `paymentStatus` | no | `PaymentStatus` | Where the money is. |
-| `placedAt` | no | `string` | Already formatted. |
-| `source` | no | `string` | Where the order came from — a channel, an app, an import. |
-| `actions` | no | `ActionDefinition[]` |  |
-| `strings` | no | `Partial<OrderHeaderStrings>` |  |
-| `vocabulary` | no | `Partial<OrderStatusVocabulary>` |  |
-
-### `OrderHeaderStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `formatOrderNumber` | yes | `(orderNumber: string) => string` | Precedes the order's own reference — "#1036". |
-| `formatOrigin` | yes | `(placedAt: string, source: string) => string` | Joins when the order was placed to where it came from. |
-
-### `OrderLine`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `title` | yes | `string` |  |
-| `variantTitle` | no | `string` | The chosen option — "OS / blue". |
-| `sku` | no | `string` |  |
-| `imageSrc` | no | `string` |  |
-| `imageAlt` | no | `string` |  |
-| `unitPrice` | yes | `string` | Already formatted, including its currency. |
-| `quantity` | yes | `number` |  |
-| `total` | yes | `string` | Already formatted. Passed, never multiplied. |
-| `properties` | no | `OrderLineProperty[]` | Rendered as label/value rows under the title, so every consumer's extras match. |
-| `children` | no | `ReactNode` | Whatever `properties` cannot express. |
-
-### `OrderLineItem`
-
-Kind: callable.
-
-```text
-({ id: _id, title, variantTitle, sku, imageSrc, imageAlt, unitPrice, quantity, total, properties, children, strings, className, ...props }: OrderLineItemProps) => import("react").JSX.Element
-```
-
-### `OrderLineItemProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children" | "id" | "title">`, `OrderLine`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `strings` | no | `Partial<FulfillmentGroupStrings>` |  |
-
-### `OrderLineProperty`
-
-Kind: interface.
-
-A per-line fact the kit did not anticipate — a gift message, engraving, an interval.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `label` | yes | `ReactNode` |  |
-| `value` | yes | `ReactNode` |  |
-
-### `OrderStatus`
-
-Kind: type.
-
-How far an order has travelled. Ordered as the stages actually occur.
-
-```text
-"pending" | "paid" | "fulfilled" | "shipped" | "delivered" | "cancelled"
-```
-
-### `OrderStatusCard`
-
-Kind: callable.
-
-```text
-({ orderNumber, status, events, eta, defaultHistoryOpen, strings, className, ...props }: OrderStatusCardProps) => import("react").JSX.Element
-```
-
-### `OrderStatusCardProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `orderNumber` | yes | `string` |  |
-| `status` | yes | `OrderStatus` |  |
-| `events` | yes | `OrderEvent[]` | Oldest first, so "latest complete" and "next" are found by position. |
-| `eta` | no | `string` | Already formatted. |
-| `defaultHistoryOpen` | no | `boolean` | Opens the full event list on first render. Closed by default: the panel above<br>already summarises it. |
-| `strings` | no | `Partial<OrderStatusStrings>` |  |
-
-### `OrderStatusStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `statusLabel` | yes | `string` |  |
-| `latestEvent` | yes | `string` |  |
-| `nextStep` | yes | `string` |  |
-| `eta` | yes | `string` |  |
-| `formatHistory` | yes | `(count: number) => string` | The disclosure over the full event list — it takes the count, which is the reason to open it. |
-| `pending` | yes | `string` |  |
-| `paid` | yes | `string` |  |
-| `fulfilled` | yes | `string` |  |
-| `shipped` | yes | `string` |  |
-| `delivered` | yes | `string` |  |
-| `cancelled` | yes | `string` |  |
-
-### `OrderStatusVocabulary`
-
-Kind: interface.
-
-Shared by every surface that names a fulfillment or payment state.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `fulfillment` | yes | `Record<"unfulfilled" \| "partiallyFulfilled" \| "fulfilled" \| "scheduled" \| "onHold" \| "cancelled", string>` |  |
-| `payment` | yes | `Record<"pending" \| "authorized" \| "paid" \| "partiallyRefunded" \| "refunded" \| "voided", string>` |  |
-
-### `OrderSummary`
-
-Kind: callable.
-
-```text
-({ goods, total, payments, paymentStatus, alert, strings, vocabulary, className, ...props }: OrderSummaryProps) => import("react").JSX.Element
-```
-
-### `OrderSummaryProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `goods` | yes | `SummaryLine[]` | What was ordered — subtotal, discount, shipping, tax. |
-| `total` | yes | `SummaryLine` | The line the eye should land on. |
-| `payments` | no | `SummaryLine[]` | What has actually moved — paid, refunded, balance. |
-| `paymentStatus` | no | `PaymentStatus` |  |
-| `alert` | no | `ReactNode` | A standing caveat about the balance, not an error. |
-| `strings` | no | `Partial<OrderSummaryStrings>` |  |
-| `vocabulary` | no | `Partial<OrderStatusVocabulary>` |  |
-
-### `OrderSummaryStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-
-### `OrderTimeline`
-
-Kind: callable.
-
-```text
-({ events, className, ...props }: OrderTimelineProps) => import("react").JSX.Element
-```
-
-### `OrderTimelineEvent`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `title` | yes | `string` |  |
-| `description` | no | `string` |  |
-| `timestamp` | yes | `string` | Already formatted. |
-| `status` | yes | `"completed" \| "current" \| "pending"` |  |
-
-### `OrderTimelineProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `events` | yes | `OrderTimelineEvent[]` |  |
-
-### `OrderTransactions`
-
-Kind: callable.
-
-```text
-({ transactions, strings, className, ...props }: OrderTransactionsProps) => import("react").JSX.Element
-```
-
-### `OrderTransactionsProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `transactions` | yes | `Transaction[]` |  |
-| `strings` | no | `Partial<TransactionStrings>` |  |
-
-### `OUTGOING_TRANSACTION_KINDS`
-
-Kind: const.
-
-```text
-ReadonlySet<TransactionKind>
-```
-
-### `PAYMENT_STATUS_TONE`
-
-Kind: const.
-
-```text
-Record<PaymentStatus, BadgeTone>
-```
-
-### `PaymentBrand`
-
-Kind: type.
-
-Card networks and wallets. The brand is named, never painted: trademark colours would
-need literals `verify composition` forbids. Pass a logo as `icon`.
-
-```text
-"visa" | "mastercard" | "amex" | "paypal" | "applePay" | "googlePay" | "unknown"
-```
-
-### `PaymentEvent`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `label` | yes | `string` |  |
-| `date` | yes | `string` | Already formatted. |
-| `amount` | no | `string` | Already formatted, including its currency. |
-| `icon` | no | `LucideIcon` |  |
-| `settled` | yes | `boolean` |  |
-
-### `PaymentMethodCard`
-
-Kind: callable.
-
-```text
-({ brand, last4, expiry, holderName, isDefault, onChange, strings, className, ...props }: PaymentMethodCardProps) => import("react").JSX.Element
-```
-
-### `PaymentMethodCardProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `brand` | yes | `PaymentBrand` |  |
-| `last4` | yes | `string` | The last four digits — the only part of a card number this component accepts. |
-| `expiry` | no | `string` | `MM/YY`. |
-| `holderName` | no | `string` |  |
-| `isDefault` | no | `boolean` |  |
-| `onChange` | no | `() => void` | Carries no value: this never holds a payment method to hand back. |
-| `strings` | no | `Partial<PaymentMethodStrings>` |  |
-
-### `PaymentMethodStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `defaultBadge` | yes | `string` |  |
-| `expires` | yes | `string` |  |
-| `change` | yes | `string` |  |
-| `formatCard` | yes | `(brand: string, last4: string) => string` | Names the card without reading the number aloud. |
-
-### `PaymentStatus`
-
-Kind: type.
-
-Where the money is.
-
-```text
-"pending" | "authorized" | "paid" | "partiallyRefunded" | "refunded" | "voided"
-```
-
-### `PaymentTimeline`
-
-Kind: callable.
-
-```text
-({ events, className, ...props }: PaymentTimelineProps) => import("react").JSX.Element
-```
-
-### `PaymentTimelineProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `events` | yes | `PaymentEvent[]` |  |
-
-### `REFUND_STAGES`
-
-Kind: const.
-
-```text
-readonly RefundStage[]
-```
-
-### `RefundStage`
-
-Kind: type.
-
-The four stages money takes on its way back.
-
-```text
-"requested" | "approved" | "processing" | "completed"
-```
-
-### `RefundStatus`
-
-Kind: callable.
-
-```text
-({ stage, amount, reason, method, eta, strings, className, ...props }: RefundStatusProps) => import("react").JSX.Element
-```
-
-### `RefundStatusProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `stage` | yes | `RefundStage` |  |
-| `amount` | yes | `string` | Already formatted, including its currency. |
-| `reason` | no | `ReactNode` |  |
-| `method` | no | `ReactNode` | Where the money is going back to. |
-| `eta` | no | `string` | Already formatted. |
-| `strings` | no | `Partial<RefundStrings>` |  |
-
-### `RefundStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `amount` | yes | `string` |  |
-| `reason` | yes | `string` |  |
-| `method` | yes | `string` |  |
-| `eta` | yes | `string` |  |
-| `requested` | yes | `string` |  |
-| `approved` | yes | `string` |  |
-| `processing` | yes | `string` |  |
-| `completed` | yes | `string` |  |
-
-### `SeoCheck`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `SeoCheckId` |  |
-| `status` | yes | `SeoCheckStatus` |  |
-| `score` | yes | `number` |  |
-| `maxScore` | yes | `number` |  |
-| `ratio` | no | `number` | The unrounded fraction earned, for percentages: `score` is rounded to whole points and<br>can hide a small penalty. Always set by `calculateSeoScore`; optional so hand-built<br>checks stay valid, and readers fall back to `score / maxScore`. |
-| `actual` | yes | `number` | The measured length, so a card can show "62 / 60". |
-| `min` | no | `number` |  |
-| `max` | no | `number` |  |
-
-### `SeoCheckId`
-
-Kind: type.
-
-Scores a listing's search presentation. Pure functions, so a draft can be scored while
-typing. Weights: title 30, description 30, permalink 15, slug 10, origin 10, and keyword
-5 only when a keyword is supplied.
-
-```text
-"title" | "description" | "permalink" | "slug" | "url" | "keyword"
-```
-
-### `SeoCheckStatus`
-
-Kind: type.
-
-`review` is "present but outside the range", not "broken".
-
-```text
-"good" | "review" | "missing"
-```
-
-### `SeoLimits`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `titleMin` | yes | `number` |  |
-| `titleMax` | yes | `number` |  |
-| `descriptionMin` | yes | `number` |  |
-| `descriptionMax` | yes | `number` |  |
-| `permalinkMax` | yes | `number` |  |
-
-### `SeoListing`
-
-Kind: callable.
-
-```text
-({ listing, score, onEdit, strings, className, ...props }: SeoListingProps) => import("react").JSX.Element
-```
-
-### `SeoListingProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "title">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `listing` | yes | `SeoScoreInput` | What the result will read as. |
-| `score` | no | `SeoScore` | A score computed elsewhere (e.g. per keystroke by an editor). Without it, the listing is scored here. |
-| `onEdit` | no | `() => void` |  |
-| `strings` | no | `Partial<SeoStrings>` |  |
-
-### `seoPermalinkPath`
-
-Kind: callable.
-
-The path alone — no origin, no query, no fragment.
-
-```text
-(permalink?: string) => string
-```
-
-### `seoPermalinkSlug`
-
-Kind: callable.
-
-The last segment of the path — the part a human reads.
-
-```text
-(permalink?: string) => string
-```
-
-### `SeoScore`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `score` | yes | `number` | 0–100. |
-| `status` | yes | `SeoCheckStatus` |  |
-| `checks` | yes | `SeoCheck[]` |  |
-| `limits` | yes | `SeoLimits` |  |
-
-### `SeoScoreInput`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | no | `string` |  |
-| `description` | no | `string` |  |
-| `permalink` | no | `string` | The full URL, or just its path. |
-| `baseUrl` | no | `string` | The origin the permalink sits on — scored for HTTPS. |
-| `keyword` | no | `string` | What the copy is meant to rank for. Omit it and the check is not run. |
-| `limits` | no | `Partial<SeoLimits>` |  |
-
-### `SeoStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `edit` | yes | `string` |  |
-| `noTitle` | yes | `string` |  |
-| `noDescription` | yes | `string` |  |
-| `noPermalink` | yes | `string` |  |
-| `checks` | yes | `Record<"title" \| "description" \| "permalink" \| "slug" \| "url" \| "keyword", string>` |  |
-| `status` | yes | `Record<"good" \| "review" \| "missing", string>` |  |
-| `formatScore` | yes | `(score: number) => string` |  |
-| `formatMeasure` | yes | `(actual: number, max: number) => string` | "62 / 60" — the measured length against its cap. |
-| `formatPercent` | yes | `(percent: number) => string` | Inside a check's ring. A locale that writes percentages differently overrides it. |
-
-### `SHIPMENT_STATUS_TONE`
-
-Kind: const.
-
-```text
-Record<ShipmentStatus, BadgeTone>
-```
-
-### `ShipmentDetail`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `label` | yes | `string` |  |
-| `value` | yes | `ReactNode` |  |
-
-### `ShipmentStatus`
-
-Kind: type.
-
-Where a parcel is. `delayed` is a warning, not an error — it is still coming.
-
-```text
-"pending" | "inTransit" | "delivered" | "delayed"
-```
-
-### `ShipmentStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `carrier` | yes | `string` |  |
-| `trackingNumber` | yes | `string` |  |
-| `pending` | yes | `string` |  |
-| `inTransit` | yes | `string` |  |
-| `delivered` | yes | `string` |  |
-| `delayed` | yes | `string` |  |
-
-### `ShipmentTracking`
-
-Kind: callable.
-
-```text
-({ trackingNumber, carrier, status, steps, details, strings, className, ...props }: ShipmentTrackingProps) => import("react").JSX.Element
-```
-
-### `ShipmentTrackingProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `trackingNumber` | yes | `string` |  |
-| `carrier` | no | `string` |  |
-| `status` | yes | `ShipmentStatus` |  |
-| `steps` | yes | `TrackingStep[]` |  |
-| `details` | no | `ShipmentDetail[]` | Anything else worth stating — weight, service, signature. |
-| `strings` | no | `Partial<ShipmentStrings>` |  |
-
-### `stripLeadingMinus`
-
-Kind: callable.
-
-Drops whatever sign the caller already supplied, so exactly one can be added back.
-
-```text
-(value: string) => string
-```
-
-### `SubscriptionPerk`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `label` | yes | `string` |  |
-| `icon` | no | `LucideIcon` |  |
-
-### `SubscriptionStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `plan` | yes | `string` |  |
-| `nextBilling` | yes | `string` |  |
-| `included` | yes | `string` |  |
-| `manage` | yes | `string` |  |
-| `upgrade` | yes | `string` |  |
-
-### `SubscriptionSummary`
-
-Kind: callable.
-
-```text
-({ planName, price, cycle, nextBillingDate, status, perks, onManage, onUpgrade, strings, className, ...props }: SubscriptionSummaryProps) => import("react").JSX.Element
-```
-
-### `SubscriptionSummaryProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `planName` | yes | `string` |  |
-| `price` | yes | `string` | Already formatted, including its currency. |
-| `cycle` | yes | `string` | How often it recurs — "monthly", "per year". |
-| `nextBillingDate` | yes | `string` | Already formatted. |
-| `status` | no | `ReactNode` |  |
-| `perks` | no | `SubscriptionPerk[]` |  |
-| `onManage` | no | `() => void` |  |
-| `onUpgrade` | no | `() => void` |  |
-| `strings` | no | `Partial<SubscriptionStrings>` |  |
-
-### `SummaryLine`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | no | `string` |  |
-| `label` | yes | `ReactNode` |  |
-| `note` | no | `ReactNode` | A middle column — "3 items", "20%". |
-| `amount` | yes | `string` | Already formatted, including its currency. |
-| `deduction` | no | `boolean` | Money off the customer's total. |
-
-### `SummaryPanel`
-
-Kind: callable.
-
-```text
-({ children, className, ...props }: SummaryPanelProps) => import("react").JSX.Element
-```
-
-### `SummaryPanelProps`
-
-Kind: interface.
-
-Extends: `ComponentProps<"div">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `children` | yes | `ReactNode` | A quieter ground than the card it sits in, so the rows read as a sub-total block. |
-
-### `TaxBreakdown`
-
-Kind: callable.
-
-```text
-({ subtotal, taxes, totalTax, total, strings, className, ...props }: TaxBreakdownProps) => import("react").JSX.Element
-```
-
-### `TaxBreakdownProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `subtotal` | yes | `string` |  |
-| `taxes` | yes | `TaxLine[]` |  |
-| `totalTax` | no | `string` | The rollup. Only worth drawing when there is more than one line to roll up. |
-| `total` | yes | `string` |  |
-| `strings` | no | `Partial<TaxBreakdownStrings>` |  |
-
-### `TaxBreakdownStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `subtotal` | yes | `string` |  |
-| `totalTax` | yes | `string` |  |
-| `total` | yes | `string` |  |
-
-### `TaxLine`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | no | `string` |  |
-| `label` | yes | `string` |  |
-| `rate` | no | `string` | The rate as written — "20%", "7.5%". Sits quietly beside the label. |
-| `amount` | yes | `string` |  |
-
-### `TrackingStep`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | no | `string` |  |
-| `label` | yes | `string` |  |
-| `done` | yes | `boolean` | Whether the parcel has reached this event. The latest reached event stays current until delivery. |
-| `timestamp` | no | `string` | Already formatted. When the stage happened — a parcel's rail is a log, not a plan. |
-
-### `Transaction`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | yes | `string` |  |
-| `kind` | yes | `TransactionKind` |  |
-| `status` | yes | `TransactionStatus` |  |
-| `amount` | yes | `string` | The magnitude, already formatted. The sign comes from the kind. |
-| `processedAt` | yes | `string` | Already formatted. |
-| `method` | no | `string` | How it was taken — "Visa ending 4417", "PayPal". |
-| `reference` | no | `string` | The gateway's own id. Mono: it is compared and copied, not read. |
-| `gateway` | no | `string` |  |
-
-### `TRANSACTION_STATUS_TONE`
-
-Kind: const.
-
-```text
-Record<TransactionStatus, BadgeTone>
-```
-
-### `TransactionKind`
-
-Kind: type.
-
-What was attempted against the payment method.
-
-```text
-"authorization" | "capture" | "sale" | "refund" | "void" | "chargeback"
-```
-
-### `TransactionStatus`
-
-Kind: type.
-
-Whether it worked.
-
-```text
-"success" | "pending" | "failure"
-```
-
-### `TransactionStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `title` | yes | `string` |  |
-| `kind` | yes | `Record<"authorization" \| "capture" \| "sale" \| "refund" \| "void" \| "chargeback", string>` |  |
-| `status` | yes | `Record<"success" \| "pending" \| "failure", string>` |  |
-| `reference` | yes | `string` |  |
-| `empty` | yes | `string` |  |
-
-### `UpcomingBookings`
-
-Kind: callable.
-
-```text
-({ bookings, boxedDate, className, ...props }: UpcomingBookingsProps) => import("react").JSX.Element
-```
-
-### `UpcomingBookingsProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<"div">, "children">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `bookings` | yes | `Booking[]` | Soonest first. This does not sort them — the order shown is the order given. |
-| `boxedDate` | no | `boolean` | Draws each date as a compact rounded tile. Appointment times stay beside the service. |
-
-### `VendorMetric`
-
-Kind: interface.
-
-An operating fact — lead time, fill rate, disputes.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | no | `string` |  |
-| `label` | yes | `ReactNode` |  |
-| `value` | yes | `ReactNode` |  |
-
-### `VendorProfile`
-
-Kind: callable.
-
-```text
-({ name, initials, avatarUrl, role, verified, earnings, metrics, stats, view, onViewChange, onMessage, onHire, strings, className, ...props }: VendorProfileProps) => import("react").JSX.Element
-```
-
-### `VendorProfileProps`
-
-Kind: interface.
-
-Extends: `Omit<ComponentProps<typeof ContentBlock>, "children" | "title" | "role">`.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `name` | yes | `string` |  |
-| `initials` | no | `string` | Derived from `name` when omitted. |
-| `avatarUrl` | no | `string` |  |
-| `role` | no | `ReactNode` | Category, market, location — whatever places them. |
-| `verified` | no | `boolean` |  |
-| `earnings` | no | `string` | Already formatted, including its currency. |
-| `metrics` | no | `VendorMetric[]` |  |
-| `stats` | no | `VendorStat[]` |  |
-| `view` | no | `VendorView` | Controlled. |
-| `onViewChange` | no | `(view: VendorView) => void` |  |
-| `onMessage` | no | `() => void` |  |
-| `onHire` | no | `() => void` |  |
-| `strings` | no | `Partial<VendorStrings>` |  |
-
-### `VendorStat`
-
-Kind: interface.
-
-A performance tile. `change` is a comparison, and its tone is stated, not inferred.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `id` | no | `string` |  |
-| `label` | yes | `ReactNode` |  |
-| `value` | yes | `ReactNode` |  |
-| `change` | no | `ReactNode` |  |
-| `changeTone` | no | `"secondary" \| "success" \| "warning" \| "destructive"` |  |
-
-### `VendorStrings`
-
-Kind: interface.
-
-| member | required | type | description / documented default |
-| --- | :-: | --- | --- |
-| `tabOverview` | yes | `string` |  |
-| `tabStats` | yes | `string` |  |
-| `totalEarnings` | yes | `string` |  |
-| `message` | yes | `string` |  |
-| `hire` | yes | `string` |  |
-| `verified` | yes | `string` | Names the tick, which otherwise states the fact by shape alone. |
-
-### `VendorView`
-
-Kind: type.
-
-```text
-"overview" | "stats"
-```
-
-## Preview recipes
-
-Preview route: Catalogue & partners — `/blocks-catalogue`
-
-### SeoListing
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-import { calculateSeoScore } from "themelia-ui/admin/patterns/commerce"
-
-const score = calculateSeoScore({ title, description, permalink, baseUrl, keyword })
-<SeoListing listing={listing} score={score} onEdit={edit} />
-```
-
-### InventorySection
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<InventorySection
-  value={value}
-  sections={["summary", "identity", "tracking"]}
-  onFieldChange={({ field, value }) => update(field, value)}
-/>
-```
-
-### VendorProfile
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<VendorProfile name="Northwind Traders" earnings="48,200.00 EUR" metrics={metrics} stats={stats} />
-```
-
-### BookingCard
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<BookingCard title="Reservation #4417" details={details} actionLabel="Open booking" onAction={open} />
-```
-
-### CartSummary
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<CartSummary items={items} subtotal="258.00 EUR" discount="50.00 EUR" total="264.40 EUR" />
-```
-
-### TaxBreakdown
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<TaxBreakdown subtotal="258.00 EUR" taxes={taxes} totalTax="52.89 EUR" total="310.89 EUR" />
-```
-
-### DiscountStack
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<DiscountStack discounts={discounts} totalSavings="50.00 EUR" />
-```
-
-### CodeEntry
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<CodeEntry onApply={apply} />
-<CodeEntry kind="gift" appliedCode="GC-4417-92AB" balance="45.00 EUR" onRemove={remove} />
-```
-
-### OrderStatusCard
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OrderStatusCard orderNumber="#1041" status="shipped" events={events} eta="18 Aug" />
-```
-
-### ShipmentTracking
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<ShipmentTracking trackingNumber="1Z999AA1…" carrier="UPS" status="inTransit" steps={steps} />
-```
-
-### RefundStatus
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<RefundStatus stage="processing" amount="124.00 EUR" reason="Damaged on arrival" />
-```
-
-### InvoiceHeader
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<InvoiceHeader invoiceNumber="INV-2026-0114" status="overdue" from={from} to={to} amountDue="3,120.00 EUR" />
-```
-
-### InvoiceLineItems
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<InvoiceLineItems currency="EUR" taxRate={0.2} lines={lines} />
-```
-
-### InvoiceMini
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<ContentBlock surface="bordered"><InvoiceMini invoiceNumber="INV-0114" status="overdue" customerName="…" total="3,120.00 EUR" /></ContentBlock>
-```
-
-### AddressCard
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<AddressCard kind="shipping" name="Alice Mercer" line1="14 Kingsway" city="London" country="United Kingdom" isDefault />
-```
-
-### PaymentMethodCard
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<PaymentMethodCard brand="visa" last4="4417" expiry="09/28" isDefault onChange={change} />
-```
-
-### PaymentTimeline
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<PaymentTimeline events={events} />
-```
-
-### SubscriptionSummary
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<SubscriptionSummary planName="Scale" price="240.00 EUR" cycle="Per month" nextBillingDate="01 Sep 2026" />
-```
-
-### InventoryLevel
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<InventoryLevel productName="Merino crew neck" stock={8} reorderLevel={12} maxStock={120} />
-```
-
-### UpcomingBookings
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<UpcomingBookings bookings={bookings} boxedDate />
-```
-
-### LoyaltyPoints
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<LoyaltyPoints balance={4830} tier="Platinum" movements={movements} onRedeem={redeem} />
-```
-
-### Two statuses, not one
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OrderHeader
-  orderNumber="1036"
-  paymentStatus="refunded"
-  fulfillmentStatus="unfulfilled"
-  placedAt="December 21, 2025 at 10:10 pm"
-  source="Simple Sample Data (via import)"
-/>
-```
-
-### Fulfillment groups
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<FulfillmentGroup
-  status="unfulfilled"
-  location="Bul Bulgaria 111"
-  notice="Shipping not required"
-  items={lines}
-  actions={[{ id: "fulfil", label: "Mark as fulfilled", onClick: fulfil }]}
-/>
-```
-
-### A line, and what a consumer attaches to it
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OrderLineItem
-  {...line}
-  properties={[
-    { label: "Engraving", value: "A. MERCER" },
-    { label: "Gift message", value: "Happy birthday" },
-  ]}
-/>
-```
-
-### OrderSummary
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OrderSummary
-  goods={[{ label: "Subtotal", note: "3 items", amount: "€239.95" }]}
-  total={{ label: "Total", amount: "€239.95" }}
-  payments={[{ label: "Paid", amount: "€0.00" }, { label: "Balance", amount: "€239.95" }]}
-  alert="€239.95 of the balance is currently unauthorized"
-/>
-```
-
-### OrderTransactions
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OrderTransactions transactions={transactions} />
-```
-
-### Customer and addresses
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OrderCustomer
-  name="Alice Mercer"
-  email="alice@example.test"
-  orderCount={4}
-  shippingAddress={address}
-  billingSameAsShipping
-/>
-```