@happyvertical/smrt-commerce 0.55.0 → 0.55.2

package/dist/svelte/components/CustomerDirectory.svelte

@@ -9,6 +9,7 @@ import { M } from '../i18n.js';
 import type {
   CustomerDisplayData,
   PartyDirectoryExtension,
+  PartyDirectoryFilters,
   PartyDirectoryItem,
   PartySurfaceLabels,
 } from '../party-types.js';
@@ -35,6 +36,14 @@ export interface Props {
   statusName?: string;
   /** Caller-owned state carried through the native GET form. Query and status names are ignored. */
   hiddenFields?: Record<string, string>;
+  /** Caller-owned GET controls rendered beside search and status. */
+  filters?: PartyDirectoryFilters;
+  /** Names rendered by `filters`; same-named hidden fields are omitted. */
+  filterNames?: string[];
+  /** Whether caller-owned filters currently narrow the result. */
+  hasAdditionalFilters?: boolean;
+  /** Overrides the empty-state guidance for this directory. */
+  emptyDescription?: string;
   /** Caller-owned URL for the previous page. */
   previousHref?: string;
   /** Caller-owned URL for the next page. */
@@ -64,6 +73,10 @@ const {
   queryName = 'q',
   statusName = 'status',
   hiddenFields = {},
+  filters,
+  filterNames = [],
+  hasAdditionalFilters = false,
+  emptyDescription,
   previousHref,
   nextHref,
   addHref,
@@ -87,9 +100,21 @@ const last = $derived(
 );
 const searchHiddenFields = $derived(
   Object.entries(hiddenFields).filter(
-    ([name]) => name !== queryName && name !== statusName,
+    ([name]) =>
+      name !== queryName && name !== statusName && !filterNames.includes(name),
   ),
 );
+const hasActiveFilters = $derived(
+  query.trim().length > 0 || status.length > 0 || hasAdditionalFilters,
+);
+const resolvedEmptyDescription = $derived(
+  emptyDescription ??
+    (hasActiveFilters
+      ? t(M['commerce.party.try_filters'])
+      : canCreate && addHref
+        ? t(M['commerce.party.empty_initial_create'], { singular })
+        : t(M['commerce.party.empty_initial'], { plural })),
+);
 
 function statusLabel(value: string): string {
   if (value === 'active') return t(M['commerce.party.status_active']);
@@ -131,6 +156,7 @@ function customerTypeLabel(value: string | undefined): string {
         <option value="suspended">{t(M['commerce.party.status_suspended'])}</option>
       </Select>
     </FormGroup>
+    {@render filters?.()}
     <Button type="submit" variant="secondary">{t(M['commerce.party.search'])}</Button>
   </Form>
 
@@ -141,7 +167,7 @@ function customerTypeLabel(value: string | undefined): string {
       <Skeleton height="6rem" /><Skeleton height="6rem" /><Skeleton height="6rem" />
     </div>
   {:else if items.length === 0}
-    <EmptyState title={labels.empty ?? t(M['commerce.customer.no_results'])} description={t(M['commerce.party.try_filters'])} />
+    <EmptyState title={labels.empty ?? t(M['commerce.customer.no_results'])} description={resolvedEmptyDescription} />
   {:else}
     <p class="result-count">
       {pageSize === undefined

package/dist/svelte/components/CustomerDirectory.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CustomerDisplayData, PartyDirectoryExtension, PartyDirectoryItem, PartySurfaceLabels } from '../party-types.js';
+import type { CustomerDisplayData, PartyDirectoryExtension, PartyDirectoryFilters, PartyDirectoryItem, PartySurfaceLabels } from '../party-types.js';
 /** Props for the searchable, paginated customer directory. */
 export interface Props {
     /** Customer rows and caller-owned detail links. */
@@ -21,6 +21,14 @@ export interface Props {
     statusName?: string;
     /** Caller-owned state carried through the native GET form. Query and status names are ignored. */
     hiddenFields?: Record<string, string>;
+    /** Caller-owned GET controls rendered beside search and status. */
+    filters?: PartyDirectoryFilters;
+    /** Names rendered by `filters`; same-named hidden fields are omitted. */
+    filterNames?: string[];
+    /** Whether caller-owned filters currently narrow the result. */
+    hasAdditionalFilters?: boolean;
+    /** Overrides the empty-state guidance for this directory. */
+    emptyDescription?: string;
     /** Caller-owned URL for the previous page. */
     previousHref?: string;
     /** Caller-owned URL for the next page. */

package/dist/svelte/components/CustomerDirectory.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomerDirectory.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CustomerDirectory.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAG3B,8DAA8D;AAC9D,MAAM,WAAW,KAAK;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAClD,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kGAAkG;IAClG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,uDAAuD;IACvD,SAAS,CAAC,EAAE,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;CAC1D;AAsID,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CustomerDirectory.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CustomerDirectory.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAG3B,8DAA8D;AAC9D,MAAM,WAAW,KAAK;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAClD,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kGAAkG;IAClG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,mEAAmE;IACnE,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,gEAAgE;IAChE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,uDAAuD;IACvD,SAAS,CAAC,EAAE,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;CAC1D;AAuJD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/InvoiceCard.svelte

@@ -7,10 +7,15 @@
  */
 
 import { ripple } from '@happyvertical/smrt-ui';
-import type { InvoiceData, InvoiceStatus } from '../types.js';
+import type { Snippet } from 'svelte';
+import {
+  formatInvoiceMinorUnits,
+  type RetainedInvoiceCardView,
+} from '../invoice-display.js';
+import type { InvoiceData } from '../types.js';
 
 /** Props for InvoiceCard component */
-export interface Props {
+export interface LegacyInvoiceCardProps {
   /** Invoice data */
   invoice: InvoiceData;
   /** Currency code */
@@ -21,7 +26,28 @@ export interface Props {
   onclick?: () => void;
 }
 
-const { invoice, currency = 'CAD', href, onclick }: Props = $props();
+/** Exact retained card branch. */
+export interface RetainedInvoiceCardProps {
+  /** Caller-authoritative retained card. */
+  retained: RetainedInvoiceCardView;
+  /** Navigation href. */
+  href?: string;
+  /** Renders caller-owned retained evidence. */
+  details?: Snippet<[RetainedInvoiceCardView]>;
+}
+
+/** Legacy decimal-major card or exact retained card. */
+export type Props = LegacyInvoiceCardProps | RetainedInvoiceCardProps;
+
+const props: Props = $props();
+const retained = $derived('retained' in props ? props.retained : null);
+const invoice = $derived(retained ?? (props as LegacyInvoiceCardProps).invoice);
+const currency = $derived(
+  retained?.currency ?? (props as LegacyInvoiceCardProps).currency ?? 'CAD',
+);
+const href = $derived(props.href);
+const onclick = $derived('onclick' in props ? props.onclick : undefined);
+const details = $derived('details' in props ? props.details : undefined);
 
 // This legacy InvoiceData display contract uses major-unit amounts.
 // Convert integer minor-unit model values in the caller adapter.
@@ -33,6 +59,12 @@ function formatMoney(amount: number): string {
   }).format(amount);
 }
 
+const amountText = $derived(
+  retained
+    ? formatInvoiceMinorUnits(retained.totalMinor, retained.currency)
+    : formatMoney((invoice as InvoiceData).totalAmount),
+);
+
 // Format date
 function formatDate(date: Date | string | null | undefined): string {
   if (!date) return '';
@@ -63,6 +95,7 @@ const statusClass = $derived.by(() => {
 
 // Check if overdue
 const isOverdue = $derived.by(() => {
+  if (retained) return false;
   if (invoice.status === 'paid' || invoice.status === 'cancelled') return false;
   if (!invoice.dueDate) return false;
   const due =
@@ -78,7 +111,7 @@ const isOverdue = $derived.by(() => {
     <div class="card-header">
       <span class="invoice-number">{invoice.invoiceNumber}</span>
       <span class="status-badge {isOverdue ? 'status-error' : statusClass}">
-        {isOverdue ? 'Overdue' : invoice.status}
+        {isOverdue ? 'Overdue' : retained?.statusLabel ?? invoice.status}
       </span>
     </div>
 
@@ -86,7 +119,7 @@ const isOverdue = $derived.by(() => {
       {#if invoice.customerName}
         <span class="customer-name">{invoice.customerName}</span>
       {/if}
-      <span class="invoice-amount">{formatMoney(invoice.totalAmount)}</span>
+      <span class="invoice-amount">{amountText}</span>
     </div>
 
     <div class="card-footer">
@@ -97,7 +130,24 @@ const isOverdue = $derived.by(() => {
         </span>
       {/if}
     </div>
+    {#if retained}{@render details?.(retained)}{/if}
   </a>
+{:else if retained}
+  <article class="invoice-card">
+    <div class="card-header">
+      <span class="invoice-number">{invoice.invoiceNumber}</span>
+      <span class="status-badge {statusClass}">{retained.statusLabel}</span>
+    </div>
+    <div class="card-body">
+      {#if invoice.customerName}<span class="customer-name">{invoice.customerName}</span>{/if}
+      <span class="invoice-amount">{amountText}</span>
+    </div>
+    <div class="card-footer">
+      <span class="issue-date">{formatDate(invoice.issueDate)}</span>
+      {#if invoice.dueDate}<span class="due-date">Due {formatDate(invoice.dueDate)}</span>{/if}
+    </div>
+    {@render details?.(retained)}
+  </article>
 {:else}
   <!-- raw-primitive-allow: large pressable invoice card wrapping rich header/body/footer content with use:ripple, a structural selection control no Button primitive should own (mirrors the href anchor branch) -->
   <button type="button" class="invoice-card" onclick={onclick} use:ripple>
@@ -112,7 +162,7 @@ const isOverdue = $derived.by(() => {
       {#if invoice.customerName}
         <span class="customer-name">{invoice.customerName}</span>
       {/if}
-      <span class="invoice-amount">{formatMoney(invoice.totalAmount)}</span>
+      <span class="invoice-amount">{amountText}</span>
     </div>
 
     <div class="card-footer">
@@ -232,4 +282,4 @@ const isOverdue = $derived.by(() => {
     color: var(--smrt-color-error);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
-</style>
+</style>

package/dist/svelte/components/InvoiceCard.svelte.d.ts

@@ -1,6 +1,8 @@
+import type { Snippet } from 'svelte';
+import { type RetainedInvoiceCardView } from '../invoice-display.js';
 import type { InvoiceData } from '../types.js';
 /** Props for InvoiceCard component */
-export interface Props {
+export interface LegacyInvoiceCardProps {
     /** Invoice data */
     invoice: InvoiceData;
     /** Currency code */
@@ -10,6 +12,17 @@ export interface Props {
     /** Click handler */
     onclick?: () => void;
 }
+/** Exact retained card branch. */
+export interface RetainedInvoiceCardProps {
+    /** Caller-authoritative retained card. */
+    retained: RetainedInvoiceCardView;
+    /** Navigation href. */
+    href?: string;
+    /** Renders caller-owned retained evidence. */
+    details?: Snippet<[RetainedInvoiceCardView]>;
+}
+/** Legacy decimal-major card or exact retained card. */
+export type Props = LegacyInvoiceCardProps | RetainedInvoiceCardProps;
 declare const InvoiceCard: import("svelte").Component<Props, {}, "">;
 type InvoiceCard = ReturnType<typeof InvoiceCard>;
 export default InvoiceCard;

package/dist/svelte/components/InvoiceCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvoiceCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceCard.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAG9D,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,mBAAmB;IACnB,OAAO,EAAE,WAAW,CAAC;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAoHD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"InvoiceCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceCard.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,sCAAsC;AACtC,MAAM,WAAW,sBAAsB;IACrC,mBAAmB;IACnB,OAAO,EAAE,WAAW,CAAC;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,kCAAkC;AAClC,MAAM,WAAW,wBAAwB;IACvC,0CAA0C;IAC1C,QAAQ,EAAE,uBAAuB,CAAC;IAClC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC;CAC9C;AAED,wDAAwD;AACxD,MAAM,MAAM,KAAK,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;AAyJtE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/InvoiceHeader.svelte

@@ -7,12 +7,13 @@
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../i18n.js';
+import type { RetainedInvoiceHeaderView } from '../invoice-display.js';
 import type { InvoiceStatus } from '../types.js';
 
 const { t } = useI18n();
 
 /** Props for InvoiceHeader component */
-export interface Props {
+export interface LegacyInvoiceHeaderProps {
   /** Invoice number/reference */
   invoiceNumber: string;
   /** Current status */
@@ -33,17 +34,31 @@ export interface Props {
   onstatuschange?: (status: InvoiceStatus) => void;
 }
 
-const {
-  invoiceNumber,
-  status,
-  issueDate,
-  dueDate,
-  paidDate,
-  customerName,
-  projectName,
-  editable = false,
-  onstatuschange,
-}: Props = $props();
+/** Exact retained metadata branch with an open caller-owned status. */
+export interface RetainedInvoiceHeaderProps {
+  /** Caller-authoritative retained header. */
+  retained: RetainedInvoiceHeaderView;
+}
+
+/** Legacy metadata or an explicit retained view. */
+export type Props = LegacyInvoiceHeaderProps | RetainedInvoiceHeaderProps;
+
+const props: Props = $props();
+const retained = $derived('retained' in props ? props.retained : null);
+const legacy = $derived(retained ? null : (props as LegacyInvoiceHeaderProps));
+const invoiceNumber = $derived(
+  retained ? retained.invoiceNumber : legacy?.invoiceNumber,
+);
+const status = $derived(retained ? retained.status : legacy?.status);
+const issueDate = $derived(retained ? retained.issueDate : legacy?.issueDate);
+const dueDate = $derived(retained ? retained.dueDate : legacy?.dueDate);
+const paidDate = $derived(retained ? retained.paidDate : legacy?.paidDate);
+const customerName = $derived(
+  retained ? retained.customerName : legacy?.customerName,
+);
+const projectName = $derived(
+  retained ? retained.projectName : legacy?.projectName,
+);
 
 // Format date
 function formatDate(date: Date | string | null | undefined): string {
@@ -93,10 +108,15 @@ const statusConfig: Record<
   },
 };
 
-const statusInfo = $derived(statusConfig[status] ?? statusConfig.draft);
+const statusInfo = $derived(
+  retained
+    ? { ...statusConfig.draft, label: retained.statusLabel }
+    : (statusConfig[status as InvoiceStatus] ?? statusConfig.draft),
+);
 
 // Check if overdue
 const isOverdue = $derived.by(() => {
+  if (retained) return false;
   if (status === 'paid' || status === 'cancelled') return false;
   if (!dueDate) return false;
   const due = typeof dueDate === 'string' ? new Date(dueDate) : dueDate;
@@ -154,7 +174,7 @@ const isOverdue = $derived.by(() => {
       </div>
     {/if}
 
-    {#if paidDate && status === 'paid'}
+    {#if paidDate && (retained || status === 'paid')}
       <div class="meta-item paid">
         <span class="meta-label">{t(M['commerce.invoice_header.paid_date'])}</span>
         <span class="meta-value">{formatDate(paidDate)}</span>

package/dist/svelte/components/InvoiceHeader.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { RetainedInvoiceHeaderView } from '../invoice-display.js';
 import type { InvoiceStatus } from '../types.js';
 /** Props for InvoiceHeader component */
-export interface Props {
+export interface LegacyInvoiceHeaderProps {
     /** Invoice number/reference */
     invoiceNumber: string;
     /** Current status */
@@ -20,6 +21,13 @@ export interface Props {
     /** Called when status changes */
     onstatuschange?: (status: InvoiceStatus) => void;
 }
+/** Exact retained metadata branch with an open caller-owned status. */
+export interface RetainedInvoiceHeaderProps {
+    /** Caller-authoritative retained header. */
+    retained: RetainedInvoiceHeaderView;
+}
+/** Legacy metadata or an explicit retained view. */
+export type Props = LegacyInvoiceHeaderProps | RetainedInvoiceHeaderProps;
 declare const InvoiceHeader: import("svelte").Component<Props, {}, "">;
 type InvoiceHeader = ReturnType<typeof InvoiceHeader>;
 export default InvoiceHeader;

package/dist/svelte/components/InvoiceHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvoiceHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceHeader.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,MAAM,EAAE,aAAa,CAAC;IACtB,iBAAiB;IACjB,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,eAAe;IACf,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB;IAChB,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAChC,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAClD;AA6ID,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InvoiceHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceHeader.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,wCAAwC;AACxC,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,MAAM,EAAE,aAAa,CAAC;IACtB,iBAAiB;IACjB,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,eAAe;IACf,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB;IAChB,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAChC,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAClD;AAED,uEAAuE;AACvE,MAAM,WAAW,0BAA0B;IACzC,4CAA4C;IAC5C,QAAQ,EAAE,yBAAyB,CAAC;CACrC;AAED,oDAAoD;AACpD,MAAM,MAAM,KAAK,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AA0J1E,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/InvoiceLineItems.svelte

@@ -10,12 +10,17 @@ import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import { M } from '../i18n.js';
+import {
+  formatInvoiceMinorUnits,
+  type RetainedInvoiceLineItemsView,
+  type RetainedInvoiceLineView,
+} from '../invoice-display.js';
 import type { LineItem } from '../types.js';
 
 const { t } = useI18n();
 
 /** Props for InvoiceLineItems component */
-export interface Props {
+export interface LegacyInvoiceLineItemsProps {
   /** Line items to display */
   items: LineItem[];
   /** Enable editing mode */
@@ -34,16 +39,32 @@ export interface Props {
   emptyMessage?: string;
 }
 
-const {
-  items,
-  editable = false,
-  currency = 'CAD',
-  onupdate,
-  ondelete,
-  onadd,
-  showSource = false,
-  emptyMessage = 'No line items',
-}: Props = $props();
+/** Exact retained line-items branch. */
+export interface RetainedInvoiceLineItemsProps {
+  /** Caller-authoritative retained line items and subtotal. */
+  retained: RetainedInvoiceLineItemsView;
+  /** Renders additional retained evidence for each line. */
+  details?: Snippet<[RetainedInvoiceLineView]>;
+  /** Empty state message. */
+  emptyMessage?: string;
+}
+
+/** Legacy decimal-major items or exact retained items. */
+export type Props = LegacyInvoiceLineItemsProps | RetainedInvoiceLineItemsProps;
+
+const props: Props = $props();
+const retained = $derived('retained' in props ? props.retained : null);
+const details = $derived('details' in props ? props.details : undefined);
+const legacy = $derived(
+  retained ? null : (props as LegacyInvoiceLineItemsProps),
+);
+const items = $derived(legacy?.items ?? []);
+const editable = $derived(legacy?.editable ?? false);
+const currency = $derived(legacy?.currency ?? 'CAD');
+const ondelete = $derived(legacy?.ondelete);
+const onadd = $derived(legacy?.onadd);
+const showSource = $derived(legacy?.showSource ?? false);
+const emptyMessage = $derived(props.emptyMessage ?? 'No line items');
 
 // Format decimal-dollar amounts. The commerce models store DECIMAL dollars
 // (AGENTS.md "Currency in decimal fields"), not integer cents.
@@ -67,7 +88,34 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
 </script>
 
 <div class="line-items-container">
-  {#if items.length === 0}
+  {#if retained}
+    {#if retained.lines.length === 0}
+      <div class="empty-state"><p>{emptyMessage}</p></div>
+    {:else}
+      <table class="line-items-table">
+        <thead><tr><th class="col-description">Description</th><th class="col-source">Source</th><th class="col-qty">Qty</th><th class="col-price">{t(M['commerce.invoice_line_items.unit_price'])}</th><th class="col-amount">Amount</th></tr></thead>
+        <tbody>
+          {#each retained.lines as line (line.id)}
+            <tr>
+              <td class="col-description">
+                {#if line.category}<span class="item-category">{line.category}</span>{/if}
+                <span class="item-description">{line.description}</span>
+                {#if line.discountLabel}<span>{line.discountLabel}</span>{/if}
+                {#each line.taxLabels ?? [] as tax}<span>{tax}</span>{/each}
+                {#if line.correctionLabel}<span>{line.correctionLabel}</span>{/if}
+                {@render details?.(line)}
+              </td>
+              <td class="col-source">{line.sourceLabel ?? '—'}</td>
+              <td class="col-qty">{line.quantity}</td>
+              <td class="col-price">{line.unitPriceMinor === undefined || line.unitPriceMinor === null ? '—' : formatInvoiceMinorUnits(line.unitPriceMinor, retained.currency)}</td>
+              <td class="col-amount">{formatInvoiceMinorUnits(line.amountMinor, retained.currency)}</td>
+            </tr>
+          {/each}
+        </tbody>
+        <tfoot><tr class="total-row"><td colspan="4" class="total-label">Subtotal</td><td class="col-amount">{formatInvoiceMinorUnits(retained.subtotalMinor, retained.currency)}</td></tr></tfoot>
+      </table>
+    {/if}
+  {:else if items.length === 0}
     <div class="empty-state">
       <p>{emptyMessage}</p>
       {#if editable && onadd}

package/dist/svelte/components/InvoiceLineItems.svelte.d.ts

@@ -1,6 +1,8 @@
+import type { Snippet } from 'svelte';
+import { type RetainedInvoiceLineItemsView, type RetainedInvoiceLineView } from '../invoice-display.js';
 import type { LineItem } from '../types.js';
 /** Props for InvoiceLineItems component */
-export interface Props {
+export interface LegacyInvoiceLineItemsProps {
     /** Line items to display */
     items: LineItem[];
     /** Enable editing mode */
@@ -18,6 +20,17 @@ export interface Props {
     /** Empty state message */
     emptyMessage?: string;
 }
+/** Exact retained line-items branch. */
+export interface RetainedInvoiceLineItemsProps {
+    /** Caller-authoritative retained line items and subtotal. */
+    retained: RetainedInvoiceLineItemsView;
+    /** Renders additional retained evidence for each line. */
+    details?: Snippet<[RetainedInvoiceLineView]>;
+    /** Empty state message. */
+    emptyMessage?: string;
+}
+/** Legacy decimal-major items or exact retained items. */
+export type Props = LegacyInvoiceLineItemsProps | RetainedInvoiceLineItemsProps;
 declare const InvoiceLineItems: import("svelte").Component<Props, {}, "">;
 type InvoiceLineItems = ReturnType<typeof InvoiceLineItems>;
 export default InvoiceLineItems;

package/dist/svelte/components/InvoiceLineItems.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvoiceLineItems.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceLineItems.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,2CAA2C;AAC3C,MAAM,WAAW,KAAK;IACpB,4BAA4B;IAC5B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgID,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InvoiceLineItems.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceLineItems.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAEL,KAAK,4BAA4B,EACjC,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,2CAA2C;AAC3C,MAAM,WAAW,2BAA2B;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wCAAwC;AACxC,MAAM,WAAW,6BAA6B;IAC5C,6DAA6D;IAC7D,QAAQ,EAAE,4BAA4B,CAAC;IACvC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAC7C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,0DAA0D;AAC1D,MAAM,MAAM,KAAK,GAAG,2BAA2B,GAAG,6BAA6B,CAAC;AAiKhF,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/InvoiceTotals.svelte

@@ -6,12 +6,17 @@
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
 import { M } from '../i18n.js';
+import {
+  formatInvoiceMinorUnits,
+  type RetainedInvoiceTotalsView,
+} from '../invoice-display.js';
 
 const { t } = useI18n();
 
 /** Props for InvoiceTotals component */
-export interface Props {
+export interface LegacyInvoiceTotalsProps {
   /** Subtotal in decimal dollars */
   subtotal: number;
   /** Tax rate as percentage (e.g., 5 for 5%) */
@@ -34,18 +39,33 @@ export interface Props {
   size?: 'sm' | 'md' | 'lg';
 }
 
-const {
-  subtotal,
-  taxRate = 0,
-  taxAmount,
-  total,
-  amountPaid = 0,
-  currency = 'CAD',
-  showTax = true,
-  showPaid = false,
-  taxLabel = 'GST',
-  size = 'md',
-}: Props = $props();
+/** Exact retained totals branch. */
+export interface RetainedInvoiceTotalsProps {
+  /** Caller-authoritative totals; omitted facts remain omitted. */
+  retained: RetainedInvoiceTotalsView;
+  /** Renders additional retained totals evidence. */
+  details?: Snippet<[RetainedInvoiceTotalsView]>;
+  /** Size variant. */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/** Legacy decimal-major totals or exact retained totals. */
+export type Props = LegacyInvoiceTotalsProps | RetainedInvoiceTotalsProps;
+
+const props: Props = $props();
+const retained = $derived('retained' in props ? props.retained : null);
+const details = $derived('details' in props ? props.details : undefined);
+const legacy = $derived(retained ? null : (props as LegacyInvoiceTotalsProps));
+const subtotal = $derived(legacy?.subtotal ?? 0);
+const taxRate = $derived(legacy?.taxRate ?? 0);
+const taxAmount = $derived(legacy?.taxAmount);
+const total = $derived(legacy?.total ?? 0);
+const amountPaid = $derived(legacy?.amountPaid ?? 0);
+const currency = $derived(legacy?.currency ?? 'CAD');
+const showTax = $derived(legacy?.showTax ?? true);
+const showPaid = $derived(legacy?.showPaid ?? false);
+const taxLabel = $derived(legacy?.taxLabel ?? 'GST');
+const size = $derived(props.size ?? 'md');
 
 // Calculate tax if not provided. `taxRate` is a percentage (e.g. 5 for 5%), so
 // the `/ 100` converts percent → fraction — it is NOT a cents conversion. The
@@ -67,6 +87,16 @@ function formatMoney(amount: number): string {
 </script>
 
 <div class="invoice-totals" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+  {#if retained}
+    <div class="totals-row"><span class="totals-label">Subtotal</span><span class="totals-value">{formatInvoiceMinorUnits(retained.subtotalMinor, retained.currency)}</span></div>
+    {#if retained.discountMinor !== undefined}<div class="totals-row"><span class="totals-label">Discount</span><span class="totals-value">{formatInvoiceMinorUnits(retained.discountMinor, retained.currency)}</span></div>{/if}
+    {#each retained.taxes ?? [] as tax (tax.id)}<div class="totals-row"><span class="totals-label">{tax.label}</span><span class="totals-value">{formatInvoiceMinorUnits(tax.amountMinor, retained.currency)}</span></div>{/each}
+    {#if retained.holdbackMinor !== undefined}<div class="totals-row"><span class="totals-label">{retained.holdbackLabel ?? 'Holdback'}</span><span class="totals-value">{formatInvoiceMinorUnits(retained.holdbackMinor, retained.currency)}</span></div>{/if}
+    <div class="totals-row total"><span class="totals-label">Total</span><span class="totals-value">{formatInvoiceMinorUnits(retained.totalMinor, retained.currency)}</span></div>
+    {#if retained.paidMinor !== undefined}<div class="totals-row paid"><span class="totals-label">{t(M['commerce.invoice_totals.amount_paid'])}</span><span class="totals-value">{formatInvoiceMinorUnits(retained.paidMinor, retained.currency)}</span></div>{/if}
+    {#if retained.payableMinor !== undefined}<div class="totals-row balance"><span class="totals-label">Payable</span><span class="totals-value">{formatInvoiceMinorUnits(retained.payableMinor, retained.currency)}</span></div>{/if}
+    {@render details?.(retained)}
+  {:else}
   <div class="totals-row">
     <span class="totals-label">Subtotal</span>
     <span class="totals-value">{formatMoney(subtotal)}</span>
@@ -103,6 +133,7 @@ function formatMoney(amount: number): string {
       <span class="totals-value">{formatMoney(Math.abs(balanceDue))}</span>
     </div>
   {/if}
+  {/if}
 </div>
 
 <style>

package/dist/svelte/components/InvoiceTotals.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { Snippet } from 'svelte';
+import { type RetainedInvoiceTotalsView } from '../invoice-display.js';
 /** Props for InvoiceTotals component */
-export interface Props {
+export interface LegacyInvoiceTotalsProps {
     /** Subtotal in decimal dollars */
     subtotal: number;
     /** Tax rate as percentage (e.g., 5 for 5%) */
@@ -21,6 +23,17 @@ export interface Props {
     /** Size variant */
     size?: 'sm' | 'md' | 'lg';
 }
+/** Exact retained totals branch. */
+export interface RetainedInvoiceTotalsProps {
+    /** Caller-authoritative totals; omitted facts remain omitted. */
+    retained: RetainedInvoiceTotalsView;
+    /** Renders additional retained totals evidence. */
+    details?: Snippet<[RetainedInvoiceTotalsView]>;
+    /** Size variant. */
+    size?: 'sm' | 'md' | 'lg';
+}
+/** Legacy decimal-major totals or exact retained totals. */
+export type Props = LegacyInvoiceTotalsProps | RetainedInvoiceTotalsProps;
 declare const InvoiceTotals: import("svelte").Component<Props, {}, "">;
 type InvoiceTotals = ReturnType<typeof InvoiceTotals>;
 export default InvoiceTotals;

package/dist/svelte/components/InvoiceTotals.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvoiceTotals.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceTotals.svelte.ts"],"names":[],"mappings":"AAYA,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAqFD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InvoiceTotals.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceTotals.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,uBAAuB,CAAC;AAG/B,wCAAwC;AACxC,MAAM,WAAW,wBAAwB;IACvC,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,oCAAoC;AACpC,MAAM,WAAW,0BAA0B;IACzC,iEAAiE;IACjE,QAAQ,EAAE,yBAAyB,CAAC;IACpC,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAC/C,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,4DAA4D;AAC5D,MAAM,MAAM,KAAK,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AAsG1E,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}