@happyvertical/smrt-commerce 0.53.4 → 0.53.6

package/dist/svelte/components/CustomerDirectory.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+import { StatusBadge } from '@happyvertical/smrt-ui';
+import { Alert } from '@happyvertical/smrt-ui/feedback';
+import { Form, FormGroup, Input, Select } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { EmptyState, PageHeader } from '@happyvertical/smrt-ui/layout';
+import { Button, Card, Skeleton } from '@happyvertical/smrt-ui/ui';
+import { M } from '../i18n.js';
+import type {
+  CustomerDisplayData,
+  PartyDirectoryExtension,
+  PartyDirectoryItem,
+  PartySurfaceLabels,
+} from '../party-types.js';
+
+/** Props for the searchable, paginated customer directory. */
+export interface Props {
+  /** Customer rows and caller-owned detail links. */
+  items?: PartyDirectoryItem<CustomerDisplayData>[];
+  /** Total matching rows across every page. */
+  total?: number;
+  /** Current one-based page number. */
+  page?: number;
+  /** Number of rows requested per page. */
+  pageSize?: number;
+  /** Search text reflected from the caller's query state. */
+  query?: string;
+  /** Status filter reflected from the caller's query state. */
+  status?: string;
+  /** Caller-owned URL for the native search form. */
+  searchAction?: string;
+  /** HTML name used for the search query field. */
+  queryName?: string;
+  /** HTML name used for the status field. */
+  statusName?: string;
+  /** Caller-owned URL for the previous page. */
+  previousHref?: string;
+  /** Caller-owned URL for the next page. */
+  nextHref?: string;
+  /** Caller-owned URL for creating a customer. */
+  addHref?: string;
+  /** Controls whether the create affordance is presented. */
+  canCreate?: boolean;
+  /** Renders loading placeholders instead of current rows. */
+  loading?: boolean;
+  /** Server or upstream failure to present instead of current rows. */
+  errorMessage?: string;
+  /** Customer terminology and action-label overrides. */
+  labels?: PartySurfaceLabels;
+  /** Consumer content appended to every customer row. */
+  extension?: PartyDirectoryExtension<CustomerDisplayData>;
+}
+
+const {
+  items = [],
+  total = items.length,
+  page = 1,
+  pageSize,
+  query = '',
+  status = '',
+  searchAction,
+  queryName = 'q',
+  statusName = 'status',
+  previousHref,
+  nextHref,
+  addHref,
+  canCreate = false,
+  loading = false,
+  errorMessage,
+  labels = {},
+  extension,
+}: Props = $props();
+
+const { t } = useI18n();
+const singular = $derived(
+  labels.singular ?? t(M['commerce.customer.singular']),
+);
+const plural = $derived(labels.plural ?? t(M['commerce.customer.plural']));
+const first = $derived(
+  pageSize === undefined || total === 0 ? 0 : (page - 1) * pageSize + 1,
+);
+const last = $derived(
+  pageSize === undefined ? 0 : Math.min(page * pageSize, total),
+);
+
+function statusLabel(value: string): string {
+  if (value === 'active') return t(M['commerce.party.status_active']);
+  if (value === 'inactive') return t(M['commerce.party.status_inactive']);
+  if (value === 'suspended') return t(M['commerce.party.status_suspended']);
+  return value;
+}
+
+function customerTypeLabel(value: string | undefined): string {
+  if (value === 'dtc') return t(M['commerce.customer.type_dtc']);
+  if (value === 'wholesale') return t(M['commerce.customer.type_wholesale']);
+  if (value === 'retail') return t(M['commerce.customer.type_retail']);
+  return value ?? singular;
+}
+</script>
+
+<section class="party-directory">
+  <PageHeader title={plural} subtitle={labels.plural ? t(M['commerce.party.manage_named'], { plural }) : t(M['commerce.customer.manage'])}>
+    {#snippet actions()}
+      {#if canCreate && addHref}<Button href={addHref}>{labels.add ?? (labels.singular ? t(M['commerce.party.add_named'], { singular }) : t(M['commerce.customer.add']))}</Button>{/if}
+    {/snippet}
+  </PageHeader>
+
+  <Form class="directory-search" method="get" action={searchAction} preventDefault={false} stagedReview={false}>
+    <FormGroup label={labels.search ?? (labels.plural ? t(M['commerce.party.search_named'], { plural }) : t(M['commerce.customer.search']))}>
+      <Input type="search" name={queryName} value={query} maxlength={160} />
+    </FormGroup>
+    <FormGroup label={t(M['commerce.party.status'])}>
+      <Select name={statusName} value={status}>
+        <option value="">{t(M['commerce.party.status_all'])}</option>
+        {#if status && !['active', 'inactive', 'suspended'].includes(status)}
+          <option value={status}>{status}</option>
+        {/if}
+        <option value="active">{t(M['commerce.party.status_active'])}</option>
+        <option value="inactive">{t(M['commerce.party.status_inactive'])}</option>
+        <option value="suspended">{t(M['commerce.party.status_suspended'])}</option>
+      </Select>
+    </FormGroup>
+    <Button type="submit" variant="secondary">{t(M['commerce.party.search'])}</Button>
+  </Form>
+
+  {#if errorMessage}
+    <Alert variant="error" title={t(M['commerce.customer.unable_to_load'])}>{errorMessage}</Alert>
+  {:else if loading}
+    <div class="loading" role="status" aria-label={labels.loading ?? t(M['commerce.customer.loading'])}>
+      <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'])} />
+  {:else}
+    <p class="result-count">
+      {pageSize === undefined
+        ? t(M['commerce.party.showing_count'], { count: items.length, total })
+        : t(M['commerce.party.showing'], { first, last, total })}
+    </p>
+    <div class="party-list">
+      {#each items as item (item.data.id)}
+        <Card padding="md" hoverable data-party-id={item.data.id}>
+          <div class="party-row">
+            <div class="party-copy">
+              <h2>{#if item.href}<a href={item.href}>{item.data.profile.name}</a>{:else}{item.data.profile.name}{/if}</h2>
+              <p>{item.data.profile.email || t(M['commerce.party.no_contact_details'])}</p>
+              <p class="meta">{customerTypeLabel(item.data.customerType)}{item.data.paymentTerms ? ` · ${item.data.paymentTerms}` : ''}</p>
+            </div>
+            <StatusBadge status={item.data.status} label={statusLabel(item.data.status)} />
+          </div>
+          {@render extension?.(item.data)}
+        </Card>
+      {/each}
+    </div>
+    <nav class="pagination" aria-label={t(M['commerce.party.pagination'], { singular })}>
+      {#if previousHref}<Button href={previousHref} variant="secondary">{labels.previous ?? t(M['commerce.party.previous'])}</Button>{/if}
+      <span>{t(M['commerce.party.page'], { page })}</span>
+      {#if nextHref}<Button href={nextHref} variant="secondary">{labels.next ?? t(M['commerce.party.next'])}</Button>{/if}
+    </nav>
+  {/if}
+</section>
+
+<style>
+  .party-directory { display: grid; gap: var(--smrt-spacing-5); max-inline-size: 64rem; min-inline-size: 0; }
+  :global(.directory-search) { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto; align-items: end; gap: var(--smrt-spacing-3); }
+  :global(.directory-search .form-group) { margin: 0; min-inline-size: 0; }
+  .loading, .party-list { display: grid; gap: var(--smrt-spacing-3); }
+  .result-count { margin: 0; color: var(--smrt-color-on-surface-variant); }
+  .party-row { display: flex; align-items: start; justify-content: space-between; gap: var(--smrt-spacing-4); }
+  .party-copy { min-inline-size: 0; }
+  h2, p { margin: 0; }
+  h2 { font: var(--smrt-typography-title-medium-font); }
+  h2 a { color: var(--smrt-color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
+  .meta { margin-block-start: var(--smrt-spacing-2); color: var(--smrt-color-on-surface-variant); }
+  .pagination { display: flex; align-items: center; justify-content: center; gap: var(--smrt-spacing-3); }
+  @media (max-width: 42rem) { :global(.directory-search) { grid-template-columns: minmax(0, 1fr); } :global(.directory-search .button) { inline-size: 100%; } .party-row { align-items: start; } }
+</style>

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

@@ -0,0 +1,42 @@
+import type { CustomerDisplayData, PartyDirectoryExtension, PartyDirectoryItem, PartySurfaceLabels } from '../party-types.js';
+/** Props for the searchable, paginated customer directory. */
+export interface Props {
+    /** Customer rows and caller-owned detail links. */
+    items?: PartyDirectoryItem<CustomerDisplayData>[];
+    /** Total matching rows across every page. */
+    total?: number;
+    /** Current one-based page number. */
+    page?: number;
+    /** Number of rows requested per page. */
+    pageSize?: number;
+    /** Search text reflected from the caller's query state. */
+    query?: string;
+    /** Status filter reflected from the caller's query state. */
+    status?: string;
+    /** Caller-owned URL for the native search form. */
+    searchAction?: string;
+    /** HTML name used for the search query field. */
+    queryName?: string;
+    /** HTML name used for the status field. */
+    statusName?: string;
+    /** Caller-owned URL for the previous page. */
+    previousHref?: string;
+    /** Caller-owned URL for the next page. */
+    nextHref?: string;
+    /** Caller-owned URL for creating a customer. */
+    addHref?: string;
+    /** Controls whether the create affordance is presented. */
+    canCreate?: boolean;
+    /** Renders loading placeholders instead of current rows. */
+    loading?: boolean;
+    /** Server or upstream failure to present instead of current rows. */
+    errorMessage?: string;
+    /** Customer terminology and action-label overrides. */
+    labels?: PartySurfaceLabels;
+    /** Consumer content appended to every customer row. */
+    extension?: PartyDirectoryExtension<CustomerDisplayData>;
+}
+declare const CustomerDirectory: import("svelte").Component<Props, {}, "">;
+type CustomerDirectory = ReturnType<typeof CustomerDirectory>;
+export default CustomerDirectory;
+//# sourceMappingURL=CustomerDirectory.svelte.d.ts.map

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

@@ -0,0 +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,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;AA6HD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/CustomerForm.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+import type { CodeSelectOption } from '@happyvertical/smrt-ui/forms';
+import {
+  Checkbox,
+  ErrorSummary,
+  Form,
+  FormActionBar,
+  FormGroup,
+  Input,
+  Select,
+  Textarea,
+} from '@happyvertical/smrt-ui/forms';
+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 type {
+  CustomerFieldNames,
+  CustomerFormValues,
+  PartyContactLabels,
+  PartyExtension,
+  PartyFormErrors,
+  PartyFormTransport,
+  PartySurfaceLabels,
+} from '../party-types.js';
+import { DEFAULT_CUSTOMER_FIELD_NAMES } from '../party-types.js';
+import PartyAddressFields from './PartyAddressFields.svelte';
+import PartyContactFields from './PartyContactFields.svelte';
+
+/** Props for the native, SSR-safe customer create/edit form. */
+export interface Props {
+  /** Selects create or edit copy and identity-lock defaults. */
+  mode?: 'create' | 'edit';
+  /** Exact customer values to render, including server-retained strings. */
+  values?: CustomerFormValues;
+  /** Caller-owned native form action, method, tokens, and submitter intents. */
+  transport?: PartyFormTransport;
+  /** HTML field-name overrides used to preserve an existing payload contract. */
+  fieldNames?: Partial<CustomerFieldNames>;
+  /** Form, field, and contact errors returned by the server. */
+  errors?: PartyFormErrors;
+  /** Customer terminology and action-label overrides. */
+  labels?: PartySurfaceLabels;
+  /** Contact terminology overrides. */
+  contactLabels?: PartyContactLabels;
+  /** Caller-restricted country choices for both addresses. */
+  countryOptions?: readonly CodeSelectOption[];
+  /** Caller-restricted region choices for both addresses. */
+  provinceOptions?: readonly CodeSelectOption[];
+  /** Renders values without mutation affordances. */
+  readOnly?: boolean;
+  /** Controls whether the save submitter is presented. */
+  canSubmit?: boolean;
+  /** Controls whether the native add-contact submitter is presented. */
+  canAddContact?: boolean;
+  /** Controls whether native remove-contact submitters are presented. */
+  canRemoveContact?: boolean;
+  /** Keeps an established Profile identity category from being converted. */
+  lockIdentityKind?: boolean;
+  /** Caller-owned URL used by the default cancel action. */
+  cancelHref?: string;
+  /** Consumer fields rendered before the action bar. */
+  extension?: PartyExtension<CustomerFormValues>;
+  /** Replaces the default cancel and save action bar. */
+  actions?: Snippet;
+}
+
+const {
+  mode = 'create',
+  values = {},
+  transport = {},
+  fieldNames = {},
+  errors = {},
+  labels = {},
+  contactLabels,
+  countryOptions,
+  provinceOptions,
+  readOnly = false,
+  canSubmit = true,
+  canAddContact = true,
+  canRemoveContact = true,
+  lockIdentityKind = mode === 'edit',
+  cancelHref,
+  extension,
+  actions,
+}: Props = $props();
+
+const { t } = useI18n();
+const singular = $derived(
+  labels.singular ?? t(M['commerce.customer.singular']),
+);
+const names = $derived({ ...DEFAULT_CUSTOMER_FIELD_NAMES, ...fieldNames });
+const intentName = $derived(transport.intentName ?? 'intent');
+const errorList = $derived(
+  Object.entries(errors.fields ?? {})
+    .filter((entry): entry is [string, string] => typeof entry[1] === 'string')
+    .map(([field, message]) => ({
+      controlId:
+        field in names ? names[field as keyof CustomerFieldNames] : field,
+      message,
+    })),
+);
+</script>
+
+<Form
+  class="party-form"
+  action={transport.action}
+  method={transport.method ?? 'post'}
+  preventDefault={false}
+  stagedReview={false}
+>
+  {#each Object.entries(transport.hiddenFields ?? {}) as [name, value]}
+    <Input interaction={false} type="hidden" {name} {value} />
+  {/each}
+  {#if values.profileId}
+    <Input interaction={false} type="hidden" name={names.profileId} value={values.profileId} />
+  {/if}
+  {#if !readOnly && canSubmit}
+    <span class="native-default-submit" aria-hidden="true">
+      <Button type="submit" name={intentName} value={transport.saveIntent ?? 'save'} tabindex={-1}>
+        {labels.save ?? (labels.singular ? t(M[mode === 'create' ? 'commerce.party.add_named' : 'commerce.party.save_named'], { singular: labels.singular }) : t(M[mode === 'create' ? 'commerce.customer.add' : 'commerce.customer.save']))}
+      </Button>
+    </span>
+  {/if}
+
+  {#if errors.form}<p class="form-error" role="alert">{errors.form}</p>{/if}
+  <ErrorSummary errors={errorList} />
+
+  <fieldset class="form-section">
+    <legend>{t(M['commerce.party.identity'])}</legend>
+    {#if lockIdentityKind && values.identityKind}
+      <p class="locked-value">{t(M['commerce.party.identity'])}: {values.identityKind === 'business' ? t(M['commerce.party.identity_business']) : t(M['commerce.party.identity_person'])}</p>
+      <Input interaction={false} type="hidden" name={names.identityKind} value={values.identityKind} />
+    {:else}
+      <FormGroup label={t(M['commerce.party.identity'])} required error={errors.fields?.identityKind}>
+        <Select name={names.identityKind} value={values.identityKind ?? ''} required disabled={readOnly}>
+          <option value="">{t(M['commerce.party.select_identity'])}</option>
+          <option value="business">{t(M['commerce.party.identity_business'])}</option>
+          <option value="person">{t(M['commerce.party.identity_person'])}</option>
+        </Select>
+      </FormGroup>
+    {/if}
+    <FormGroup label={t(M['commerce.party.name'], { singular })} required error={errors.fields?.name}>
+      <Input name={names.name} value={values.name ?? ''} maxlength={160} required readonly={readOnly} />
+    </FormGroup>
+    <div class="field-grid">
+      <FormGroup label={t(M['commerce.party.profile_email'])} error={errors.fields?.email}>
+        <Input name={names.email} type="email" value={values.email ?? ''} maxlength={320} readonly={readOnly} />
+      </FormGroup>
+      <FormGroup label={t(M['commerce.customer.type'])} error={errors.fields?.customerType}>
+        <Select name={names.customerType} value={values.customerType ?? 'dtc'} disabled={readOnly}>
+          {#if values.customerType && !['dtc', 'wholesale', 'retail'].includes(values.customerType)}
+            <option value={values.customerType}>{values.customerType}</option>
+          {/if}
+          <option value="dtc">{t(M['commerce.customer.type_dtc'])}</option>
+          <option value="wholesale">{t(M['commerce.customer.type_wholesale'])}</option>
+          <option value="retail">{t(M['commerce.customer.type_retail'])}</option>
+        </Select>
+      </FormGroup>
+    </div>
+    <FormGroup label={t(M['commerce.party.description'])} error={errors.fields?.description}>
+      <Textarea name={names.description} value={values.description ?? ''} rows={3} maxlength={1000} readonly={readOnly} />
+    </FormGroup>
+  </fieldset>
+
+  <fieldset class="form-section">
+    <legend>{t(M['commerce.party.commercial_terms'])}</legend>
+    <div class="field-grid">
+      <FormGroup label={t(M['commerce.party.status'])} error={errors.fields?.status}>
+        <Select name={names.status} value={values.status ?? 'active'} disabled={readOnly}>
+          {#if values.status && !['active', 'inactive', 'suspended'].includes(values.status)}
+            <option value={values.status}>{values.status}</option>
+          {/if}
+          <option value="active">{t(M['commerce.party.status_active'])}</option>
+          <option value="inactive">{t(M['commerce.party.status_inactive'])}</option>
+          <option value="suspended">{t(M['commerce.party.status_suspended'])}</option>
+        </Select>
+      </FormGroup>
+      <FormGroup label={t(M['commerce.customer.credit_limit'])} hint={t(M['commerce.customer.credit_limit_hint'])} error={errors.fields?.creditLimit}>
+        <Input name={names.creditLimit} inputmode="decimal" value={values.creditLimit ?? ''} readonly={readOnly} />
+      </FormGroup>
+      <FormGroup label={t(M['commerce.party.payment_terms'])} error={errors.fields?.paymentTerms}>
+        <Input name={names.paymentTerms} value={values.paymentTerms ?? ''} maxlength={120} readonly={readOnly} />
+      </FormGroup>
+    </div>
+    <Checkbox name={names.taxExempt} value="true" checked={values.taxExempt ?? false} disabled={readOnly} label={t(M['commerce.customer.tax_exempt'])} />
+    <FormGroup label={t(M['commerce.party.internal_notes'])} error={errors.fields?.notes}>
+      <Textarea name={names.notes} value={values.notes ?? ''} rows={4} maxlength={4000} readonly={readOnly} />
+    </FormGroup>
+  </fieldset>
+
+  <div class="address-pair">
+    <PartyAddressFields heading={t(M['commerce.party.shipping_address'])} value={values.shippingAddress} names={{ street1: names.shippingStreet1, street2: names.shippingStreet2, city: names.shippingCity, state: names.shippingState, postalCode: names.shippingPostalCode, country: names.shippingCountry }} errors={{ street1: errors.fields?.shippingStreet1, street2: errors.fields?.shippingStreet2, city: errors.fields?.shippingCity, state: errors.fields?.shippingState, postalCode: errors.fields?.shippingPostalCode, country: errors.fields?.shippingCountry }} {readOnly} {countryOptions} {provinceOptions} />
+    <PartyAddressFields heading={t(M['commerce.party.billing_address'])} value={values.billingAddress} names={{ street1: names.billingStreet1, street2: names.billingStreet2, city: names.billingCity, state: names.billingState, postalCode: names.billingPostalCode, country: names.billingCountry }} errors={{ street1: errors.fields?.billingStreet1, street2: errors.fields?.billingStreet2, city: errors.fields?.billingCity, state: errors.fields?.billingState, postalCode: errors.fields?.billingPostalCode, country: errors.fields?.billingCountry }} {readOnly} {countryOptions} {provinceOptions} />
+  </div>
+
+  <PartyContactFields
+    contacts={values.contacts ?? []}
+    fieldNames={names}
+    errors={errors.contacts}
+    labels={contactLabels}
+    readOnly={readOnly}
+    canAdd={canAddContact}
+    canRemove={canRemoveContact}
+    {intentName}
+    addIntent={transport.addContactIntent}
+    removeIntent={transport.removeContactIntent}
+  />
+
+  {@render extension?.(values)}
+
+  {#if actions}
+    {@render actions()}
+  {:else if !readOnly && canSubmit}
+    <FormActionBar label={t(M['commerce.party.form_actions'], { singular })}>
+      {#if cancelHref}<Button href={cancelHref} variant="ghost">{labels.cancel ?? t(M['commerce.party.cancel'])}</Button>{/if}
+      <Button type="submit" name={intentName} value={transport.saveIntent ?? 'save'}>
+        {labels.save ?? (labels.singular ? t(M[mode === 'create' ? 'commerce.party.add_named' : 'commerce.party.save_named'], { singular: labels.singular }) : t(M[mode === 'create' ? 'commerce.customer.add' : 'commerce.customer.save']))}
+      </Button>
+    </FormActionBar>
+  {/if}
+</Form>
+
+<style>
+  :global(.party-form) { display: grid; gap: var(--smrt-spacing-5); min-inline-size: 0; padding-block-end: var(--smrt-spacing-8); }
+  .native-default-submit { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+  .form-error { margin: 0; padding: var(--smrt-spacing-4); border-inline-start: 4px solid var(--smrt-color-error); background: var(--smrt-color-error-container); color: var(--smrt-color-on-error-container); border-radius: var(--smrt-radius-small); }
+  .form-section { min-inline-size: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); }
+  legend { padding-inline: var(--smrt-spacing-2); font: var(--smrt-typography-title-medium-font); color: var(--smrt-color-on-surface); }
+  .locked-value { color: var(--smrt-color-on-surface-variant); }
+  .field-grid, .address-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--smrt-spacing-4); }
+  .address-pair { gap: var(--smrt-spacing-4); }
+  @media (max-width: 42rem) { .field-grid, .address-pair { grid-template-columns: minmax(0, 1fr); } }
+</style>

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

@@ -0,0 +1,44 @@
+import type { CodeSelectOption } from '@happyvertical/smrt-ui/forms';
+import type { Snippet } from 'svelte';
+import type { CustomerFieldNames, CustomerFormValues, PartyContactLabels, PartyExtension, PartyFormErrors, PartyFormTransport, PartySurfaceLabels } from '../party-types.js';
+/** Props for the native, SSR-safe customer create/edit form. */
+export interface Props {
+    /** Selects create or edit copy and identity-lock defaults. */
+    mode?: 'create' | 'edit';
+    /** Exact customer values to render, including server-retained strings. */
+    values?: CustomerFormValues;
+    /** Caller-owned native form action, method, tokens, and submitter intents. */
+    transport?: PartyFormTransport;
+    /** HTML field-name overrides used to preserve an existing payload contract. */
+    fieldNames?: Partial<CustomerFieldNames>;
+    /** Form, field, and contact errors returned by the server. */
+    errors?: PartyFormErrors;
+    /** Customer terminology and action-label overrides. */
+    labels?: PartySurfaceLabels;
+    /** Contact terminology overrides. */
+    contactLabels?: PartyContactLabels;
+    /** Caller-restricted country choices for both addresses. */
+    countryOptions?: readonly CodeSelectOption[];
+    /** Caller-restricted region choices for both addresses. */
+    provinceOptions?: readonly CodeSelectOption[];
+    /** Renders values without mutation affordances. */
+    readOnly?: boolean;
+    /** Controls whether the save submitter is presented. */
+    canSubmit?: boolean;
+    /** Controls whether the native add-contact submitter is presented. */
+    canAddContact?: boolean;
+    /** Controls whether native remove-contact submitters are presented. */
+    canRemoveContact?: boolean;
+    /** Keeps an established Profile identity category from being converted. */
+    lockIdentityKind?: boolean;
+    /** Caller-owned URL used by the default cancel action. */
+    cancelHref?: string;
+    /** Consumer fields rendered before the action bar. */
+    extension?: PartyExtension<CustomerFormValues>;
+    /** Replaces the default cancel and save action bar. */
+    actions?: Snippet;
+}
+declare const CustomerForm: import("svelte").Component<Props, {}, "">;
+type CustomerForm = ReturnType<typeof CustomerForm>;
+export default CustomerForm;
+//# sourceMappingURL=CustomerForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CustomerForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAarE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAM3B,gEAAgE;AAChE,MAAM,WAAW,KAAK;IACpB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,uDAAuD;IACvD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,qCAAqC;IACrC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,4DAA4D;IAC5D,cAAc,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC7C,2DAA2D;IAC3D,eAAe,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC9C,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC/C,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA6JD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/InvoiceAllocationFields.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+import {
+  Checkbox,
+  FormGroup,
+  Input,
+  Select,
+} from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { invoicePreparationMessages as M } from '../invoices/messages.js';
+import type { InvoiceAllocationFieldsProps } from '../invoices/types.js';
+/** Optional allocation fields; compose inside a caller-owned invoice form. */
+export interface Props extends InvoiceAllocationFieldsProps {}
+let {
+  currency,
+  allocations,
+  sources = [],
+  mayReadSources = true,
+  canEdit = true,
+  pending = false,
+  fields = {},
+  addIntent = 'addAllocation',
+  id,
+}: Props = $props();
+const { t } = useI18n();
+const instanceId = $props.id();
+const formId = $derived(id ?? `invoice-allocations-${instanceId}`);
+const names = $derived({
+  source: 'sourceId',
+  amount: 'allocationAmount',
+  remove: 'removeRow',
+  intent: 'intent',
+  ...fields,
+});
+</script>
+<div class="allocations">
+  {#if !mayReadSources}<p>{t(M['commerce.preparation.restricted'])}</p>
+  {:else if sources.length === 0}<p>{t(M['commerce.preparation.empty'])}</p>{/if}
+      {#if allocations.length === 0}<p>{t(M['commerce.preparation.no_rows'])}</p>{/if}
+      {#each allocations as allocation, index (allocation.key)}
+        <fieldset disabled={!canEdit}>
+          <legend>{t(M['commerce.preparation.allocation'], { number: index + 1 })}</legend>
+          <FormGroup label={t(M[mayReadSources ? 'commerce.preparation.source' : 'commerce.preparation.reference'])} id={`${formId}-source-${index}`} error={allocation.sourceError}>
+            {#if mayReadSources}
+              <Select name={names.source} value={allocation.sourceId} interaction={{ id: `source-${allocation.key}` }}>
+                <option value="">{t(M['commerce.preparation.choose'])}</option>
+                {#if allocation.sourceId && !sources.some(source => source.id === allocation.sourceId)}
+                  <option value={allocation.sourceId}>{t(M['commerce.preparation.retained'], { reference: allocation.sourceId })}</option>
+                {/if}
+                {#each sources as source}
+                  <option value={source.id} disabled={source.selectable === false && source.id !== allocation.sourceId}>{t(M['commerce.preparation.available'], { label: source.label, amount: source.availableMinor, currency })}</option>
+                {/each}
+              </Select>
+            {:else}
+              <Input name={names.source} value={allocation.sourceId} interaction={{ id: `source-${allocation.key}` }} />
+            {/if}
+          </FormGroup>
+          <FormGroup label={t(M['commerce.preparation.amount'], { currency })} id={`${formId}-amount-${index}`} error={allocation.amountError}>
+            <Input name={names.amount} value={allocation.amount} inputmode="decimal" aria-describedby={allocation.amountError ? `${formId}-amount-${index}-error` : `${formId}-help`} interaction={{ id: `amount-${allocation.key}` }} />
+          </FormGroup>
+          {#if canEdit}<Checkbox name={names.remove} value={String(index)} checked={allocation.remove ?? false} label={t(M['commerce.preparation.remove'])} interaction={{ id: `remove-${allocation.key}` }} />{/if}
+        </fieldset>
+      {/each}
+
+<p id={`${formId}-help`}>{t(M['commerce.preparation.help'])}</p>
+{#if canEdit}<Button type="submit" name={names.intent} value={addIntent} formnovalidate disabled={pending} variant="secondary">{t(M['commerce.preparation.add'])}</Button>{/if}
+</div>
+<style>
+.allocations { display: grid; gap: var(--smrt-spacing-4); min-width: 0; }
+fieldset { min-width: 0; margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); }
+p { margin: 0; }
+</style>

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

@@ -0,0 +1,8 @@
+import type { InvoiceAllocationFieldsProps } from '../invoices/types.js';
+/** Optional allocation fields; compose inside a caller-owned invoice form. */
+export interface Props extends InvoiceAllocationFieldsProps {
+}
+declare const InvoiceAllocationFields: import("svelte").Component<Props, {}, "">;
+type InvoiceAllocationFields = ReturnType<typeof InvoiceAllocationFields>;
+export default InvoiceAllocationFields;
+//# sourceMappingURL=InvoiceAllocationFields.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceAllocationFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceAllocationFields.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAEzE,8EAA8E;AAC9E,MAAM,WAAW,KAAM,SAAQ,4BAA4B;CAAG;AAkE9D,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/InvoiceCard.svelte

@@ -23,8 +23,8 @@ export interface Props {
 
 const { invoice, currency = 'CAD', href, onclick }: Props = $props();
 
-// Format money. Amounts are decimal dollars (the commerce models store DECIMAL
-// dollars — AGENTS.md "Currency in decimal fields"), not integer cents.
+// This legacy InvoiceData display contract uses major-unit amounts.
+// Convert integer minor-unit model values in the caller adapter.
 function formatMoney(amount: number): string {
   return new Intl.NumberFormat('en-CA', {
     style: 'currency',