@happyvertical/smrt-commerce 0.55.24 → 0.56.1

package/dist/svelte/components/InvoiceActions.svelte

@@ -30,6 +30,11 @@ export interface Props {
   onprint?: () => void;
   /** Called when export/download is clicked */
   onexport?: () => void;
+  /**
+   * Host-authorized credit-note creation for an issued source invoice. The
+   * caller owns authorization, navigation, and persistence.
+   */
+  oncreatecreditnote?: () => void;
   /** Size variant */
   size?: 'sm' | 'md';
 }
@@ -43,6 +48,7 @@ const {
   ondelete,
   onprint,
   onexport,
+  oncreatecreditnote,
   size = 'md',
 }: Props = $props();
 
@@ -93,6 +99,12 @@ const canDelete = $derived(status === 'draft');
     </Button>
   {/if}
 
+  {#if oncreatecreditnote && !canEdit}
+    <Button variant="secondary" {size} onclick={oncreatecreditnote} disabled={loading}>
+      {t(M['commerce.invoice_actions.create_credit_note'])}
+    </Button>
+  {/if}
+
   {#if onexport}
     <Button variant="secondary" {size} onclick={onexport} disabled={loading}>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">

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

@@ -17,6 +17,11 @@ export interface Props {
     onprint?: () => void;
     /** Called when export/download is clicked */
     onexport?: () => void;
+    /**
+     * Host-authorized credit-note creation for an issued source invoice. The
+     * caller owns authorization, navigation, and persistence.
+     */
+    oncreatecreditnote?: () => void;
     /** Size variant */
     size?: 'sm' | 'md';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceActions.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,yCAAyC;AACzC,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AA+FD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"InvoiceActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceActions.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,yCAAyC;AACzC,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAsGD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/InvoiceEditor.svelte

@@ -22,6 +22,7 @@ import type {
 } from '../invoices/types.js';
 import InvoiceLineEditor from './InvoiceLineEditor.svelte';
 import InvoiceReview from './InvoiceReview.svelte';
+import MoneyInvoiceEditor from './MoneyInvoiceEditor.svelte';
 /** General native invoice editor; server owns prices, tax, authorization and persistence. */
 export interface Props extends InvoiceEditorProps {}
 let {
@@ -29,7 +30,15 @@ let {
   method = 'post',
   id,
   title,
-  values,
+  values = {
+    customerId: '',
+    issuedOn: '',
+    dueOn: '',
+    currency: 'USD',
+    paymentTerms: '',
+    taxRate: '0',
+    lines: [],
+  },
   roundingScope = 'line',
   customers = [],
   errors = {},
@@ -48,6 +57,7 @@ let {
   cancelHref,
   children,
   onsubmit,
+  money,
 }: Props = $props();
 const { t } = useI18n();
 const instanceId = $props.id();
@@ -86,6 +96,9 @@ function lineErrors(key: string) {
   ) as Partial<Record<keyof InvoiceLineFieldNames, string>>;
 }
 </script>
+{#if money?.mode === 'v2'}
+  <MoneyInvoiceEditor {action} {method} {money} {canEdit} {pending} {hiddenFields} intentField={names.intent} {saveIntent} {saveLabel} {onsubmit} />
+{:else}
 <section class="invoice-editor" aria-labelledby={`${formId}-title`} data-smrt-component="InvoiceEditor">
   <h2 id={`${formId}-title`}>{title ?? t(M['commerce.preparation.title'])}</h2>
   {#if review}<InvoiceReview {review} />{/if}
@@ -126,6 +139,7 @@ function lineErrors(key: string) {
     </div>
   </Form>
 </section>
+{/if}
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceEditor.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,sBAAsB,CAAC;AAI9B,6FAA6F;AAC7F,MAAM,WAAW,KAAM,SAAQ,kBAAkB;CAAG;AAuHpD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"InvoiceEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceEditor.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,sBAAsB,CAAC;AAK9B,6FAA6F;AAC7F,MAAM,WAAW,KAAM,SAAQ,kBAAkB;CAAG;AAqIpD,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

@@ -66,8 +66,8 @@ 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.
+// This legacy branch receives decimal-major values from its historical API.
+// Exact retained views above use integer minor units through formatInvoiceMinorUnits.
 function formatMoney(amount: number): string {
   return new Intl.NumberFormat('en-CA', {
     style: 'currency',
@@ -178,7 +178,7 @@ const total = $derived(items.reduce((sum, item) => sum + item.amount, 0));
       </tbody>
       <tfoot>
         <tr class="total-row">
-          <td colspan={showSource ? 4 : 3} class="total-label">Subtotal</td>
+          <td colspan={showSource ? 4 : 3} class="total-label">{t(M['commerce.invoice_line_items.line_total'])}</td>
           <td class="col-amount">{formatMoney(total)}</td>
           {#if editable}
             <td></td>

package/dist/svelte/components/InvoiceRecordScreen.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+/**
+ * InvoiceRecordScreen composes the published generic record screen with
+ * commerce's stored-money projection and host-authorized credit-note action.
+ * The host loads `data` server-side with `loadInvoiceRecordScreenData()`.
+ */
+import {
+  RecordScreen,
+  type RecordScreenProps,
+} from '@happyvertical/smrt-svelte/screens';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import type { InvoiceRecordScreenData } from '../../invoice-record-screen.js';
+import { M } from '../i18n.js';
+
+export interface InvoiceRecordScreenProps {
+  /** Generic record-screen wiring owned by the host application. */
+  screen: Omit<
+    RecordScreenProps,
+    'lineItemStoredTotals' | 'extraActions' | 'children'
+  >;
+  /** Tenant-scoped persisted invoice facts from `loadInvoiceRecordScreenData`. */
+  data: InvoiceRecordScreenData;
+  /** Result of the host's server-side authorization check. */
+  canCreateCreditNote?: boolean;
+  /** Host-owned navigation or mutation after an authorized click. */
+  onCreateCreditNote?: () => void;
+}
+
+let {
+  screen,
+  data,
+  canCreateCreditNote = false,
+  onCreateCreditNote,
+}: InvoiceRecordScreenProps = $props();
+const { t } = useI18n();
+
+const showCreditAction = $derived(
+  data.kind === 'invoice' &&
+    canCreateCreditNote &&
+    onCreateCreditNote !== undefined,
+);
+</script>
+
+{#snippet relatedCredits()}
+  {#if data.creditNotes.length > 0}
+    <section class="invoice-record-screen__credits" aria-label={t(M['commerce.invoice_record.credit_notes'])}>
+      <h2>{t(M['commerce.invoice_record.credit_notes'])}</h2>
+      <ul>
+        {#each data.creditNotes as credit (credit.id)}
+          <li>
+            <strong>{credit.invoiceNumber}</strong>
+            <span>{credit.status}</span>
+            <time datetime={credit.issueDate}>{credit.issueDate.slice(0, 10)}</time>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+{/snippet}
+
+{#if showCreditAction}
+  <RecordScreen {...screen} lineItemStoredTotals={() => data.storedTotals}>
+    {#snippet extraActions()}
+      <Button variant="secondary" onclick={onCreateCreditNote}>
+        {t(M['commerce.invoice_actions.create_credit_note'])}
+      </Button>
+    {/snippet}
+    {#snippet children()}
+      {@render relatedCredits()}
+    {/snippet}
+  </RecordScreen>
+{:else}
+  <RecordScreen {...screen} lineItemStoredTotals={() => data.storedTotals}>
+    {#snippet children()}
+      {@render relatedCredits()}
+    {/snippet}
+  </RecordScreen>
+{/if}
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .invoice-record-screen__credits {
+    display: grid;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+    margin-block-start: var(--smrt-spacing-md, 1rem);
+  }
+  .invoice-record-screen__credits h2 { margin: 0; font: var(--smrt-typography-title-small-font); }
+  .invoice-record-screen__credits ul { display: grid; gap: var(--smrt-spacing-xs, 0.25rem); margin: 0; padding-inline-start: 1.25rem; }
+  .invoice-record-screen__credits li { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-sm, 0.5rem); color: var(--smrt-color-on-surface); }
+  .invoice-record-screen__credits li span, .invoice-record-screen__credits time { color: var(--smrt-color-on-surface-variant); }
+}
+</style>

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

@@ -0,0 +1,21 @@
+/**
+ * InvoiceRecordScreen composes the published generic record screen with
+ * commerce's stored-money projection and host-authorized credit-note action.
+ * The host loads `data` server-side with `loadInvoiceRecordScreenData()`.
+ */
+import { type RecordScreenProps } from '@happyvertical/smrt-svelte/screens';
+import type { InvoiceRecordScreenData } from '../../invoice-record-screen.js';
+export interface InvoiceRecordScreenProps {
+    /** Generic record-screen wiring owned by the host application. */
+    screen: Omit<RecordScreenProps, 'lineItemStoredTotals' | 'extraActions' | 'children'>;
+    /** Tenant-scoped persisted invoice facts from `loadInvoiceRecordScreenData`. */
+    data: InvoiceRecordScreenData;
+    /** Result of the host's server-side authorization check. */
+    canCreateCreditNote?: boolean;
+    /** Host-owned navigation or mutation after an authorized click. */
+    onCreateCreditNote?: () => void;
+}
+declare const InvoiceRecordScreen: import("svelte").Component<InvoiceRecordScreenProps, {}, "">;
+type InvoiceRecordScreen = ReturnType<typeof InvoiceRecordScreen>;
+export default InvoiceRecordScreen;
+//# sourceMappingURL=InvoiceRecordScreen.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceRecordScreen.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceRecordScreen.svelte.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAI9E,MAAM,WAAW,wBAAwB;IACvC,kEAAkE;IAClE,MAAM,EAAE,IAAI,CACV,iBAAiB,EACjB,sBAAsB,GAAG,cAAc,GAAG,UAAU,CACrD,CAAC;IACF,gFAAgF;IAChF,IAAI,EAAE,uBAAuB,CAAC;IAC9B,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAiED,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/InvoiceTotals.svelte

@@ -75,8 +75,8 @@ const calculatedTax = $derived(taxAmount ?? subtotal * (taxRate / 100));
 // Calculate balance due
 const balanceDue = $derived(total - amountPaid);
 
-// Format decimal-dollar amounts. The commerce models store DECIMAL dollars
-// (AGENTS.md "Currency in decimal fields"), not integer cents.
+// This legacy branch receives decimal-major values from its historical API.
+// Exact retained views above use integer minor units through formatInvoiceMinorUnits.
 function formatMoney(amount: number): string {
   return new Intl.NumberFormat('en-CA', {
     style: 'currency',

package/dist/svelte/components/MoneyInvoiceEditor.svelte

@@ -0,0 +1,282 @@
+<script lang="ts">
+import { CurrencyDisplay } from '@happyvertical/smrt-ui';
+import { Form, Input, Select } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { M } from '../i18n.js';
+import {
+  calculateMoneyEditorDraft,
+  type MoneyEditorProps,
+  moneyEditorFieldNames,
+} from '../invoices/money-editor.js';
+
+export interface Props {
+  /** Native form action owned by the caller's invoice route. */
+  action: string;
+  /** Native HTTP method retained for progressive enhancement. */
+  method?: 'post' | 'get';
+  /** Typed v2 money draft, tax-code choices, and stored issued snapshot. */
+  money: MoneyEditorProps;
+  /** Presentation capability; the server remains the authority for writes. */
+  canEdit?: boolean;
+  /** Caller transport state that disables edits and the save submitter. */
+  pending?: boolean;
+  /** Caller-owned request identity and route fields submitted unchanged. */
+  hiddenFields?: readonly { name: string; value: string }[];
+  /** Native submitter field name expected by the caller. */
+  intentField?: string;
+  /** Submitter value that requests a draft save. */
+  saveIntent?: string;
+  /** Caller-visible label for the save submitter. */
+  saveLabel?: string;
+  /** Optional native form enhancement; omitted submissions stay native. */
+  onsubmit?: HTMLFormAttributes['onsubmit'];
+}
+
+let {
+  action,
+  method = 'post',
+  money,
+  canEdit = true,
+  pending = false,
+  hiddenFields = [],
+  intentField = 'intent',
+  saveIntent = 'save',
+  saveLabel = 'Save invoice draft',
+  onsubmit,
+}: Props = $props();
+const { t } = useI18n();
+
+const names = $derived({ ...moneyEditorFieldNames, ...money.names });
+// The selector owns a local pending choice until the native form submits.
+// svelte-ignore state_referenced_locally
+let lineAmountType = $state(money.draft.lineAmountType);
+// svelte-ignore state_referenced_locally
+let lines = $state([...money.draft.lines]);
+let modeConfirmed = $state(false);
+const frozen = $derived(money.frozen === true);
+const editable = $derived(canEdit && !frozen);
+// Issued documents display only their server-authoritative snapshot; never recalculate it.
+const calculation = $derived(
+  frozen
+    ? null
+    : calculateMoneyEditorDraft(
+        { ...money.draft, lineAmountType, lines },
+        money.taxCodes,
+      ),
+);
+const result = $derived(calculation?.valid ? calculation.result : null);
+const stored = $derived(money.stored);
+const totals = $derived(
+  frozen && stored
+    ? stored
+    : result
+      ? {
+          lineAmountType,
+          roundingScope: money.draft.roundingScope,
+          subtotalMinor: result.subtotalMinor,
+          discountTotalMinor: result.discountTotalMinor,
+          taxMinor: result.taxMinor,
+          totalMinor: result.totalMinor,
+          taxes: result.taxes.map((tax) => {
+            const code = money.taxCodes.find(
+              (candidate) => candidate.id === tax.taxCodeId,
+            );
+            const component = code?.components.find(
+              (candidate) => candidate.taxComponentId === tax.taxComponentId,
+            );
+            return {
+              id: `${tax.taxCodeId}:${tax.taxComponentId ?? ''}`,
+              taxComponentId: tax.taxComponentId,
+              name:
+                code?.componentNames?.[tax.taxComponentId ?? ''] ??
+                code?.name ??
+                code?.code ??
+                'Tax',
+              percent: component?.percent ?? '0',
+              taxableMinor: tax.taxableMinor,
+              taxMinor: tax.taxMinor,
+            };
+          }),
+        }
+      : null,
+);
+
+function inheritedHint(line: MoneyEditorProps['draft']['lines'][number]) {
+  const code = money.taxCodes.find(
+    (candidate) => candidate.id === line.inheritedTaxCodeId,
+  );
+  if (!code) return 'No tax code';
+  const source =
+    line.inheritedTaxCodeSource === 'exempt-customer'
+      ? 'customer is exempt'
+      : line.inheritedTaxCodeSource === 'customer'
+        ? 'from customer'
+        : line.inheritedTaxCodeSource === 'product'
+          ? 'from product'
+          : 'app default';
+  return `${code.code} · ${source}`;
+}
+
+function groupedTaxes(
+  taxes: readonly {
+    id: string;
+    taxComponentId?: string | null;
+    name: string;
+    percent: string;
+    taxableMinor: number;
+    taxMinor: number;
+  }[],
+) {
+  const rows = new Map<
+    string,
+    {
+      id: string;
+      taxComponentId?: string | null;
+      name: string;
+      percent: string;
+      taxableMinor: number;
+      taxMinor: number;
+    }
+  >();
+  for (const tax of taxes) {
+    const key = `${tax.taxComponentId ?? tax.id}\u0000${tax.name}\u0000${tax.percent}`;
+    const current = rows.get(key);
+    if (current) {
+      current.taxableMinor += tax.taxableMinor;
+      current.taxMinor += tax.taxMinor;
+    } else rows.set(key, { ...tax });
+  }
+  return [...rows.values()];
+}
+
+function patchLine(
+  index: number,
+  patch: Partial<MoneyEditorProps['draft']['lines'][number]>,
+) {
+  lines[index] = { ...lines[index], ...patch };
+}
+
+function changeDiscount(index: number, event: Event) {
+  const discountType = (event.currentTarget as HTMLSelectElement)
+    .value as MoneyEditorProps['draft']['lines'][number]['discountType'];
+  patchLine(index, { discountType, discountValue: '' });
+}
+
+function changeTaxCode(index: number, event: Event) {
+  const taxCodeId = (event.currentTarget as HTMLSelectElement).value;
+  patchLine(index, {
+    taxCodeId: taxCodeId || null,
+    taxMode: taxCodeId ? 'override' : 'inherit',
+  });
+}
+
+function changeMode(event: Event) {
+  const next = (event.currentTarget as HTMLSelectElement)
+    .value as typeof lineAmountType;
+  if (next === lineAmountType) return;
+  if (
+    money.draft.lines.length > 0 &&
+    !modeConfirmed &&
+    typeof window !== 'undefined' &&
+    !window.confirm('Keep the prices as typed and recompute tax?')
+  ) {
+    (event.currentTarget as HTMLSelectElement).value = lineAmountType;
+    return;
+  }
+  modeConfirmed = true;
+  lineAmountType = next;
+}
+</script>
+
+<section class="invoice-editor money-editor" aria-label={t(M['commerce.invoice_money.aria_label'])} data-smrt-component="MoneyInvoiceEditor" data-money-model="v2">
+  {#if frozen}
+    <p role="status">Frozen{money.status ? ` · ${money.status}` : ''}</p>
+    {#if money.kind !== 'credit_note'}
+      <Button
+        type="button"
+        disabled={!money.onCreateCreditNote}
+        title={money.onCreateCreditNote ? undefined : 'Credit notes are not available yet'}
+        onclick={money.onCreateCreditNote}
+      >{t(M['commerce.invoice_actions.create_credit_note'])}</Button>
+    {/if}
+  {/if}
+  {#if money.sellerTaxRegistrations?.length || money.partyTaxId}
+    <p class="tax-registrations">
+      {#each money.sellerTaxRegistrations ?? [] as registration}{registration}{#if money.partyTaxId || registration !== money.sellerTaxRegistrations?.at(-1)} · {/if}{/each}
+      {#if money.partyTaxId}{money.partyTaxId}{/if}
+    </p>
+  {/if}
+  <Form {action} {method} preventDefault={false} stagedReview={false} {onsubmit} aria-busy={pending}>
+    {#each hiddenFields as field}<Input type="hidden" name={field.name} value={field.value} interaction={false} />{/each}
+    <fieldset disabled={!editable || pending}>
+      <label>
+        {t(M['commerce.invoice_money.amounts_are'])}
+        <Select name={names.lineAmountType} value={lineAmountType} onchange={changeMode}>
+          <option value="exclusive">{t(M['commerce.invoice_money.tax_exclusive'])}</option>
+          <option value="inclusive">{t(M['commerce.invoice_money.tax_inclusive'])}</option>
+          <option value="none">{t(M['commerce.invoice_money.no_tax'])}</option>
+        </Select>
+      </label>
+      <Input type="hidden" name={names.roundingScope} value={money.draft.roundingScope} interaction={false} />
+      {#if money.customerTaxExempt && lineAmountType === 'inclusive'}<p>{t(M['commerce.invoice_money.exempt_inclusive'])}</p>{/if}
+      {#each lines as line, index (line.id)}
+        <fieldset class="money-line">
+          <legend>{t(M['commerce.invoice_money.line'], { number: index + 1 })}</legend>
+          <Input type="hidden" name={names.lineId} value={line.id} interaction={false} />
+          <label>Description <Input name={names.lineDescription} value={line.description} oninput={(event) => patchLine(index, { description: (event.currentTarget as HTMLInputElement).value })} /></label>
+          <label>Quantity <Input name={names.lineQuantity} value={line.quantity} inputmode="decimal" oninput={(event) => patchLine(index, { quantity: (event.currentTarget as HTMLInputElement).value })} /></label>
+          <label>{t(M['commerce.invoice_money.unit_price'])} <Input name={names.lineUnitPrice} value={line.unitPrice} inputmode="decimal" oninput={(event) => patchLine(index, { unitPrice: (event.currentTarget as HTMLInputElement).value })} /></label>
+          <label>{t(M['commerce.invoice_money.discount_type'])}
+            <Select name={names.lineDiscountType} value={line.discountType} onchange={(event) => changeDiscount(index, event)}>
+              <option value="none">None</option><option value="percent">%</option><option value="amount">$</option>
+            </Select>
+          </label>
+          <label>Discount <Input name={names.lineDiscountValue} value={line.discountValue} inputmode="decimal" oninput={(event) => patchLine(index, { discountValue: (event.currentTarget as HTMLInputElement).value })} /></label>
+          <label>{t(M['commerce.invoice_money.tax_code'])}
+            <Select name={names.lineTaxCodeId} value={line.taxMode === 'override' ? line.taxCodeId ?? '' : ''} onchange={(event) => changeTaxCode(index, event)}>
+              <option value="">{inheritedHint(line)}</option>
+              {#each money.taxCodes as code}<option value={code.id}>{code.code}</option>{/each}
+            </Select>
+          </label>
+          <Input type="hidden" name={names.lineTaxMode} value={line.taxMode} interaction={false} />
+          {#if money.customerTaxExempt && line.taxMode === 'override'}<p role="status">{t(M['commerce.invoice_money.exempt_override'])}</p>{/if}
+        </fieldset>
+      {/each}
+    </fieldset>
+    {#if editable}<Button type="submit" name={intentField} value={saveIntent} disabled={pending}>{saveLabel}</Button>{/if}
+  </Form>
+  {#if !totals}
+    <p role="alert">{calculation?.valid || frozen ? 'Stored totals are required for a frozen document.' : calculation?.message}</p>
+  {:else}
+    <dl class="summary" aria-live="polite">
+      {#if totals.lineAmountType !== 'inclusive' || totals.taxMinor === 0}
+        <div><dt>Subtotal</dt><dd><CurrencyDisplay amount={totals.subtotalMinor} currency={money.draft.currency} unit="cents" /></dd></div>
+      {/if}
+      {#if totals.discountTotalMinor !== 0}<div class="muted"><dt>{t(M['commerce.invoice_money.includes_discounts'])} <CurrencyDisplay amount={Math.abs(totals.discountTotalMinor)} currency={money.draft.currency} unit="cents" /></dt></div>{/if}
+      {#each groupedTaxes(totals.taxes).filter((tax) => tax.taxMinor !== 0) as tax (tax.id)}
+        <div class:muted={totals.lineAmountType === 'inclusive'}>
+          <dt>{totals.lineAmountType === 'inclusive' ? `Includes ${tax.name} ${tax.percent}% of` : `${tax.name} ${tax.percent}% on`} <CurrencyDisplay amount={totals.lineAmountType === 'inclusive' ? tax.taxMinor : tax.taxableMinor} currency={money.draft.currency} unit="cents" /></dt>
+          {#if totals.lineAmountType !== 'inclusive'}<dd><CurrencyDisplay amount={tax.taxMinor} currency={money.draft.currency} unit="cents" /></dd>{/if}
+        </div>
+      {/each}
+      {#if totals.roundingScope === 'document'}<div class="muted"><dt>{t(M['commerce.invoice_money.rounded_document'])}</dt></div>{/if}
+      <div class="total"><dt>Total</dt><dd><CurrencyDisplay amount={totals.totalMinor} currency={money.draft.currency} unit="cents" /></dd></div>
+      {#if totals.lineAmountType === 'inclusive' && totals.taxMinor !== 0 && money.showNetSubtotal}<div><dt>Subtotal (excl. tax)</dt><dd><CurrencyDisplay amount={totals.subtotalMinor} currency={money.draft.currency} unit="cents" /></dd></div>{/if}
+    </dl>
+  {/if}
+</section>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .money-editor, .money-editor :global(.form), fieldset, .money-line { display: grid; gap: var(--smrt-spacing-3); min-width: 0; }
+  .money-editor { max-width: 48rem; overflow-wrap: anywhere; }
+  .summary { display: grid; gap: var(--smrt-spacing-2); }
+  .summary > div { display: flex; justify-content: space-between; gap: var(--smrt-spacing-4); }
+  .summary .muted { color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); }
+  .summary .total { border-top: var(--smrt-hairline-strong); padding-top: var(--smrt-spacing-2); font-weight: var(--smrt-typography-weight-semibold); }
+  dd { margin: 0; }
+}
+</style>

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

@@ -0,0 +1,31 @@
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { type MoneyEditorProps } from '../invoices/money-editor.js';
+export interface Props {
+    /** Native form action owned by the caller's invoice route. */
+    action: string;
+    /** Native HTTP method retained for progressive enhancement. */
+    method?: 'post' | 'get';
+    /** Typed v2 money draft, tax-code choices, and stored issued snapshot. */
+    money: MoneyEditorProps;
+    /** Presentation capability; the server remains the authority for writes. */
+    canEdit?: boolean;
+    /** Caller transport state that disables edits and the save submitter. */
+    pending?: boolean;
+    /** Caller-owned request identity and route fields submitted unchanged. */
+    hiddenFields?: readonly {
+        name: string;
+        value: string;
+    }[];
+    /** Native submitter field name expected by the caller. */
+    intentField?: string;
+    /** Submitter value that requests a draft save. */
+    saveIntent?: string;
+    /** Caller-visible label for the save submitter. */
+    saveLabel?: string;
+    /** Optional native form enhancement; omitted submissions stay native. */
+    onsubmit?: HTMLFormAttributes['onsubmit'];
+}
+declare const MoneyInvoiceEditor: import("svelte").Component<Props, {}, "">;
+type MoneyInvoiceEditor = ReturnType<typeof MoneyInvoiceEditor>;
+export default MoneyInvoiceEditor;
+//# sourceMappingURL=MoneyInvoiceEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyInvoiceEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MoneyInvoiceEditor.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,6BAA6B,CAAC;AAGrC,MAAM,WAAW,KAAK;IACpB,8DAA8D;IAC9D,MAAM,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACxB,0EAA0E;IAC1E,KAAK,EAAE,gBAAgB,CAAC;IACxB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,SAAS;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;CAC3C;AAoPD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}