@happyvertical/smrt-commerce 0.53.3 → 0.53.5

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type QuoteRevision } from '../quote-types.js';
+/** Read-only revision evidence, in caller-provided order. */
+export interface Props {
+    /** Immutable summaries, including unknown caller status labels. */
+    revisions: QuoteRevision[];
+    /** Optional localized heading. */
+    title?: string;
+    /** Optional authorized evidence/details for each revision. */
+    evidence?: Snippet<[QuoteRevision]>;
+}
+declare const QuoteRevisionHistory: import("svelte").Component<Props, {}, "">;
+type QuoteRevisionHistory = ReturnType<typeof QuoteRevisionHistory>;
+export default QuoteRevisionHistory;
+//# sourceMappingURL=QuoteRevisionHistory.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuoteRevisionHistory.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/QuoteRevisionHistory.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,mBAAmB,CAAC;AAE3B,6DAA6D;AAC7D,MAAM,WAAW,KAAK;IACpB,mEAAmE;IACnE,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;CACrC;AA0CD,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/VendorDetail.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+import { StatusBadge } from '@happyvertical/smrt-ui';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { PageHeader } from '@happyvertical/smrt-ui/layout';
+import { Button, Card } from '@happyvertical/smrt-ui/ui';
+import { M } from '../i18n.js';
+import type {
+  PartyContactLabels,
+  PartyExtension,
+  PartySurfaceLabels,
+  VendorDisplayData,
+} from '../party-types.js';
+import { formatPartyMinorUnits } from '../party-types.js';
+import PartyContactFields from './PartyContactFields.svelte';
+
+/** Props for the vendor detail/summary surface. */
+export interface Props {
+  /** Vendor and Profile projection to render. */
+  vendor: VendorDisplayData;
+  /** Vendor terminology and action-label overrides. */
+  labels?: PartySurfaceLabels;
+  /** Contact terminology overrides. */
+  contactLabels?: PartyContactLabels;
+  /** Caller-owned URL back to the vendor directory. */
+  backHref?: string;
+  /** Caller-owned URL for editing this vendor. */
+  editHref?: string;
+  /** Controls whether the edit affordance is presented. */
+  canEdit?: boolean;
+  /** Currency exponent used only for minor-unit display conversion. */
+  minorUnitExponent?: number;
+  /** Locale used for currency display. */
+  locale?: string;
+  /** Consumer content rendered after the standard vendor sections. */
+  extension?: PartyExtension<VendorDisplayData>;
+}
+
+const {
+  vendor,
+  labels = {},
+  contactLabels,
+  backHref,
+  editHref,
+  canEdit = false,
+  minorUnitExponent = 2,
+  locale = 'en',
+  extension,
+}: Props = $props();
+const { t } = useI18n();
+const singular = $derived(labels.singular ?? t(M['commerce.vendor.singular']));
+const plural = $derived(labels.plural ?? t(M['commerce.vendor.plural']));
+const notRecorded = $derived(t(M['commerce.party.not_recorded']));
+const amountUnavailable = $derived(t(M['commerce.party.amount_unavailable']));
+
+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 identityKindLabel(value: string | undefined): string {
+  if (value === 'business') return t(M['commerce.party.identity_business']);
+  if (value === 'person') return t(M['commerce.party.identity_person']);
+  return value || notRecorded;
+}
+
+function minimumOrder(amountMinor: number): string {
+  try {
+    return formatPartyMinorUnits(
+      amountMinor,
+      vendor.currency ?? 'USD',
+      minorUnitExponent,
+      locale,
+    );
+  } catch (error) {
+    if (error instanceof RangeError) return amountUnavailable;
+    throw error;
+  }
+}
+</script>
+
+<section class="party-detail">
+  {#if backHref}<Button href={backHref} variant="ghost">{t(M['commerce.party.back_to'], { plural })}</Button>{/if}
+  <PageHeader title={vendor.profile.name} subtitle={vendor.profile.description ?? t(M['commerce.vendor.details'])}>
+    {#snippet actions()}
+      {#if canEdit && editHref}<Button href={editHref}>{labels.edit ?? (labels.singular ? t(M['commerce.party.edit_named'], { singular }) : t(M['commerce.vendor.edit']))}</Button>{/if}
+    {/snippet}
+  </PageHeader>
+
+  <div class="summary-grid">
+    <Card padding="md">
+      <h2>{t(M['commerce.party.identity'])}</h2>
+      <dl>
+        <dt>{t(M['commerce.party.type'])}</dt><dd>{identityKindLabel(vendor.profile.identityKind)}</dd>
+        <dt>{t(M['commerce.party.status'])}</dt><dd><StatusBadge status={vendor.status} label={statusLabel(vendor.status)} /></dd>
+        <dt>{t(M['commerce.party.email'])}</dt><dd>{#if vendor.profile.email}<a href={`mailto:${vendor.profile.email}`}>{vendor.profile.email}</a>{:else}{notRecorded}{/if}</dd>
+      </dl>
+    </Card>
+    <Card padding="md">
+      <h2>{t(M['commerce.party.commercial_terms'])}</h2>
+      <dl>
+        <dt>{t(M['commerce.vendor.lead_time'])}</dt><dd>{vendor.leadTimeDays === undefined ? notRecorded : t(M['commerce.vendor.lead_time_days'], { days: vendor.leadTimeDays })}</dd>
+        <dt>{t(M['commerce.vendor.minimum_order'])}</dt><dd>{vendor.minimumOrderMinor === undefined ? notRecorded : minimumOrder(vendor.minimumOrderMinor)}</dd>
+        <dt>{t(M['commerce.party.payment_terms'])}</dt><dd>{vendor.paymentTerms || notRecorded}</dd>
+        <dt>{t(M['commerce.vendor.currency'])}</dt><dd>{vendor.currency || notRecorded}</dd>
+      </dl>
+    </Card>
+  </div>
+
+  <Card padding="md">
+    <h2>{t(M['commerce.vendor.default_order_contact'])}</h2>
+    <dl>
+      <dt>{t(M['commerce.party.email'])}</dt><dd>{#if vendor.defaultContactEmail}<a href={`mailto:${vendor.defaultContactEmail}`}>{vendor.defaultContactEmail}</a>{:else}{notRecorded}{/if}</dd>
+      <dt>{t(M['commerce.party.phone'])}</dt><dd>{#if vendor.defaultContactPhone}<a href={`tel:${vendor.defaultContactPhone}`}>{vendor.defaultContactPhone}</a>{:else}{notRecorded}{/if}</dd>
+    </dl>
+  </Card>
+
+  <PartyContactFields contacts={vendor.contacts ?? []} labels={contactLabels} readOnly />
+  {#if vendor.notes}<Card padding="md"><h2>{t(M['commerce.party.notes'])}</h2><p class="notes">{vendor.notes}</p></Card>{/if}
+  {@render extension?.(vendor)}
+</section>
+
+<style>
+  .party-detail { display: grid; gap: var(--smrt-spacing-5); max-inline-size: 64rem; min-inline-size: 0; overflow-wrap: anywhere; }
+  .summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-4); }
+  h2 { margin: 0 0 var(--smrt-spacing-4); font: var(--smrt-typography-title-medium-font); color: var(--smrt-color-on-surface); }
+  dl { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--smrt-spacing-2) var(--smrt-spacing-4); margin: 0; }
+  dt { color: var(--smrt-color-on-surface-variant); }
+  dd { margin: 0; }
+  a { color: var(--smrt-color-primary); }
+  .notes { margin: 0; white-space: pre-wrap; }
+  @media (max-width: 42rem) { .summary-grid { grid-template-columns: minmax(0, 1fr); } dl { grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-1); } dd { margin-block-end: var(--smrt-spacing-2); } }
+</style>

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

@@ -0,0 +1,26 @@
+import type { PartyContactLabels, PartyExtension, PartySurfaceLabels, VendorDisplayData } from '../party-types.js';
+/** Props for the vendor detail/summary surface. */
+export interface Props {
+    /** Vendor and Profile projection to render. */
+    vendor: VendorDisplayData;
+    /** Vendor terminology and action-label overrides. */
+    labels?: PartySurfaceLabels;
+    /** Contact terminology overrides. */
+    contactLabels?: PartyContactLabels;
+    /** Caller-owned URL back to the vendor directory. */
+    backHref?: string;
+    /** Caller-owned URL for editing this vendor. */
+    editHref?: string;
+    /** Controls whether the edit affordance is presented. */
+    canEdit?: boolean;
+    /** Currency exponent used only for minor-unit display conversion. */
+    minorUnitExponent?: number;
+    /** Locale used for currency display. */
+    locale?: string;
+    /** Consumer content rendered after the standard vendor sections. */
+    extension?: PartyExtension<VendorDisplayData>;
+}
+declare const VendorDetail: import("svelte").Component<Props, {}, "">;
+type VendorDetail = ReturnType<typeof VendorDetail>;
+export default VendorDetail;
+//# sourceMappingURL=VendorDetail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VendorDetail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/VendorDetail.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,mBAAmB,CAAC;AAK3B,mDAAmD;AACnD,MAAM,WAAW,KAAK;IACpB,+CAA+C;IAC/C,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qDAAqD;IACrD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,qCAAqC;IACrC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,SAAS,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAsGD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/VendorDirectory.svelte

@@ -0,0 +1,178 @@
+<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 {
+  PartyDirectoryExtension,
+  PartyDirectoryItem,
+  PartySurfaceLabels,
+  VendorDisplayData,
+} from '../party-types.js';
+
+/** Props for the searchable, paginated vendor directory. */
+export interface Props {
+  /** Vendor rows and caller-owned detail links. */
+  items?: PartyDirectoryItem<VendorDisplayData>[];
+  /** 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 vendor. */
+  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;
+  /** Vendor terminology and action-label overrides. */
+  labels?: PartySurfaceLabels;
+  /** Consumer content appended to every vendor row. */
+  extension?: PartyDirectoryExtension<VendorDisplayData>;
+}
+
+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.vendor.singular']));
+const plural = $derived(labels.plural ?? t(M['commerce.vendor.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 vendorMeta(vendor: VendorDisplayData): string {
+  const leadTime =
+    vendor.leadTimeDays === undefined
+      ? t(M['commerce.vendor.lead_time_missing'])
+      : t(M['commerce.vendor.lead_time_days'], { days: vendor.leadTimeDays });
+  return vendor.paymentTerms
+    ? `${leadTime} · ${vendor.paymentTerms}`
+    : leadTime;
+}
+</script>
+
+<section class="party-directory">
+  <PageHeader title={plural} subtitle={labels.plural ? t(M['commerce.party.manage_named'], { plural }) : t(M['commerce.vendor.manage'])}>
+    {#snippet actions()}
+      {#if canCreate && addHref}<Button href={addHref}>{labels.add ?? (labels.singular ? t(M['commerce.party.add_named'], { singular }) : t(M['commerce.vendor.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.vendor.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.vendor.unable_to_load'])}>{errorMessage}</Alert>
+  {:else if loading}
+    <div class="loading" role="status" aria-label={labels.loading ?? t(M['commerce.vendor.loading'])}>
+      <Skeleton height="6rem" /><Skeleton height="6rem" /><Skeleton height="6rem" />
+    </div>
+  {:else if items.length === 0}
+    <EmptyState title={labels.empty ?? t(M['commerce.vendor.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.defaultContactEmail || item.data.profile.email || t(M['commerce.party.no_contact_details'])}</p>
+              <p class="meta">{vendorMeta(item.data)}</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/VendorDirectory.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { PartyDirectoryExtension, PartyDirectoryItem, PartySurfaceLabels, VendorDisplayData } from '../party-types.js';
+/** Props for the searchable, paginated vendor directory. */
+export interface Props {
+    /** Vendor rows and caller-owned detail links. */
+    items?: PartyDirectoryItem<VendorDisplayData>[];
+    /** 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 vendor. */
+    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;
+    /** Vendor terminology and action-label overrides. */
+    labels?: PartySurfaceLabels;
+    /** Consumer content appended to every vendor row. */
+    extension?: PartyDirectoryExtension<VendorDisplayData>;
+}
+declare const VendorDirectory: import("svelte").Component<Props, {}, "">;
+type VendorDirectory = ReturnType<typeof VendorDirectory>;
+export default VendorDirectory;
+//# sourceMappingURL=VendorDirectory.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VendorDirectory.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/VendorDirectory.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,mBAAmB,CAAC;AAG3B,4DAA4D;AAC5D,MAAM,WAAW,KAAK;IACpB,iDAAiD;IACjD,KAAK,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAChD,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,8CAA8C;IAC9C,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,qDAAqD;IACrD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,qDAAqD;IACrD,SAAS,CAAC,EAAE,uBAAuB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AA8HD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/VendorForm.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+import type { CodeSelectOption } from '@happyvertical/smrt-ui/forms';
+import {
+  CurrencySelect,
+  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 {
+  PartyContactLabels,
+  PartyExtension,
+  PartyFormErrors,
+  PartyFormTransport,
+  PartySurfaceLabels,
+  VendorFieldNames,
+  VendorFormValues,
+} from '../party-types.js';
+import { DEFAULT_VENDOR_FIELD_NAMES } from '../party-types.js';
+import PartyContactFields from './PartyContactFields.svelte';
+
+/** Props for the native, SSR-safe vendor create/edit form. */
+export interface Props {
+  /** Selects create or edit copy and identity-lock defaults. */
+  mode?: 'create' | 'edit';
+  /** Exact vendor values to render, including server-retained strings. */
+  values?: VendorFormValues;
+  /** 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<VendorFieldNames>;
+  /** Form, field, and contact errors returned by the server. */
+  errors?: PartyFormErrors;
+  /** Vendor terminology and action-label overrides. */
+  labels?: PartySurfaceLabels;
+  /** Contact terminology overrides. */
+  contactLabels?: PartyContactLabels;
+  /** Caller-restricted currency choices; omitted uses the shared ISO defaults. */
+  currencyOptions?: 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<VendorFormValues>;
+  /** Replaces the default cancel and save action bar. */
+  actions?: Snippet;
+}
+
+const {
+  mode = 'create',
+  values = {},
+  transport = {},
+  fieldNames = {},
+  errors = {},
+  labels = {},
+  contactLabels,
+  currencyOptions,
+  readOnly = false,
+  canSubmit = true,
+  canAddContact = true,
+  canRemoveContact = true,
+  lockIdentityKind = mode === 'edit',
+  cancelHref,
+  extension,
+  actions,
+}: Props = $props();
+
+const i18n = useI18n();
+const { t } = i18n;
+const singular = $derived(labels.singular ?? t(M['commerce.vendor.singular']));
+const names = $derived({ ...DEFAULT_VENDOR_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 VendorFieldNames] : 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.vendor.add' : 'commerce.vendor.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.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>
+    </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.vendor.lead_time'])} error={errors.fields?.leadTimeDays}>
+        <Input name={names.leadTimeDays} inputmode="numeric" value={values.leadTimeDays ?? ''} readonly={readOnly} />
+      </FormGroup>
+      <FormGroup label={t(M['commerce.vendor.minimum_order'])} hint={t(M['commerce.vendor.minimum_order_hint'])} error={errors.fields?.minimumOrder}>
+        <Input name={names.minimumOrder} inputmode="decimal" value={values.minimumOrder ?? ''} readonly={readOnly} />
+      </FormGroup>
+      <FormGroup label={t(M['commerce.vendor.currency'])} error={errors.fields?.currency}>
+        <CurrencySelect name={names.currency} value={values.currency ?? 'USD'} options={currencyOptions} locale={i18n.locale} 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>
+      <FormGroup label={t(M['commerce.vendor.default_contact_email'])} error={errors.fields?.defaultContactEmail}>
+        <Input name={names.defaultContactEmail} type="email" value={values.defaultContactEmail ?? ''} maxlength={320} readonly={readOnly} />
+      </FormGroup>
+      <FormGroup label={t(M['commerce.vendor.default_contact_phone'])} error={errors.fields?.defaultContactPhone}>
+        <Input name={names.defaultContactPhone} type="tel" value={values.defaultContactPhone ?? ''} maxlength={80} readonly={readOnly} />
+      </FormGroup>
+    </div>
+    <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>
+
+  <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.vendor.add' : 'commerce.vendor.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 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--smrt-spacing-4); }
+  @media (max-width: 42rem) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
+</style>