@happyvertical/smrt-commerce 0.53.4 → 0.53.5

package/dist/svelte/components/PurchasingPlayground.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { P } from '../purchasing-i18n.js';
+import type {
+  PurchaseDraftValues,
+  PurchaseReviewSnapshot,
+} from '../purchasing-types.js';
+import PurchaseOrderEditor from './PurchaseOrderEditor.svelte';
+import PurchaseSourceSelector from './PurchaseSourceSelector.svelte';
+/** Interactive purchasing form demo; no record is written. */
+export interface Props {
+  /** Show the explicit retained-allocation reduction workflow. */
+  reduction?: boolean;
+}
+let { reduction = false }: Props = $props();
+const { t } = useI18n();
+let values = $state<PurchaseDraftValues>({
+  instrument: 'purchase-order',
+  tax: '0.00',
+  scope: 'Deliver design services',
+  inclusions: 'Two review rounds',
+  exclusions: 'Printing',
+  reason: 'Agreed scope',
+  allocations: [
+    {
+      id: 'allocation-a',
+      label: 'Design services',
+      amount: '1200.00',
+      retained: true,
+      sourceMinor: 120000,
+      minimumMinor: 0,
+      maximumMinor: 120000,
+    },
+  ],
+});
+let review = $state<PurchaseReviewSnapshot | undefined>();
+let message = $state('');
+let sequence = 1;
+let source = $state({
+  id: 'source-1',
+  label: 'Quotation Q-104',
+  vendor: 'North Studio',
+});
+// Demo-only CAD endpoint parser. Real callers validate using their owning money contract.
+function demoCadMinor(value: string): number | null {
+  if (!/^\d+(?:\.\d{1,2})?$/.test(value)) return null;
+  const [whole, fraction = ''] = value.split('.');
+  const minor = BigInt(whole) * 100n + BigInt(fraction.padEnd(2, '0'));
+  return minor <= BigInt(Number.MAX_SAFE_INTEGER) ? Number(minor) : null;
+}
+function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
+  event.preventDefault();
+  const data = new FormData(event.currentTarget, event.submitter);
+  const text = (name: string) => String(data.get(name) ?? '');
+  values = {
+    instrument: text('instrument'),
+    tax: text('tax'),
+    scope: text('scope'),
+    inclusions: text('inclusions'),
+    exclusions: text('exclusions'),
+    reason: text('reason'),
+    allocations: data.getAll('allocationId').map((id, index) => ({
+      ...values.allocations.find((row) => row.id === id)!,
+      amount: String(data.getAll('allocationAmount')[index] ?? ''),
+    })),
+  };
+  const intent = text('intent');
+  if (intent === 'addAllocation') {
+    values.allocations = [
+      ...values.allocations,
+      {
+        id: `new-${++sequence}`,
+        label: t(P['commerce.purchase.demo_additional'], { number: sequence }),
+        amount: '',
+      },
+    ];
+    review = undefined;
+    message = t(P['commerce.purchase.demo_added']);
+  } else if (intent.startsWith('removeAllocation:')) {
+    values.allocations = values.allocations.filter(
+      (row) => row.id !== intent.slice('removeAllocation:'.length),
+    );
+    review = undefined;
+    message = t(P['commerce.purchase.demo_removed']);
+  } else if (intent === 'review') {
+    const amounts = values.allocations.map((row) => demoCadMinor(row.amount));
+    const taxMinor = demoCadMinor(values.tax);
+    const sum = amounts.reduce<bigint>(
+      (total, amount) => total + BigInt(amount ?? 0),
+      0n,
+    );
+    if (
+      amounts.some((amount) => amount === null) ||
+      taxMinor === null ||
+      sum > BigInt(Number.MAX_SAFE_INTEGER) ||
+      BigInt(taxMinor) > sum
+    ) {
+      review = undefined;
+      message = t(P['commerce.purchase.demo_invalid']);
+      return;
+    }
+    review = {
+      fingerprint: 'demo-review',
+      sourceLabel: `${source.vendor} / ${source.label}`,
+      total: { currency: 'CAD', minorUnitDigits: 2, amountMinor: Number(sum) },
+      taxMinor,
+      scope: values.scope,
+      notices: [t(P['commerce.purchase.demo_authority'])],
+    };
+    message = t(P['commerce.purchase.demo_review']);
+  } else if (intent === 'edit') {
+    review = undefined;
+    message = t(P['commerce.purchase.demo_edit']);
+  } else {
+    message = t(P['commerce.purchase.demo_uncertain']);
+  }
+}
+function selectSource(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
+  event.preventDefault();
+  const id = String(new FormData(event.currentTarget).get('source') ?? '');
+  source =
+    id === 'source-2'
+      ? { id, label: 'Quotation Q-105', vendor: 'South Studio' }
+      : { id: 'source-1', label: 'Quotation Q-104', vendor: 'North Studio' };
+  review = undefined;
+  message = t(P['commerce.purchase.demo_source']);
+}
+</script>
+<p>{t(P['commerce.purchase.demo_notice'])}</p>
+<Button variant="secondary" onclick={()=>{reduction=!reduction;review=undefined;}}>{reduction?t(P['commerce.purchase.demo_amendment']):t(P['commerce.purchase.demo_reduction'])}</Button>
+<PurchaseSourceSelector disabled={reduction} action="" value={source.id} sources={[{id:'source-1',label:'Quotation Q-104',vendor:'North Studio'},{id:'source-2',label:'Quotation Q-105',vendor:'South Studio'},{id:'source-old',label:'Quotation Q-099',vendor:'Prior Vendor',disabled:true,notice:t(P['commerce.purchase.demo_unavailable'])}]} onsubmit={selectSource}/>
+<PurchaseOrderEditor operation={reduction?'reduce':'amend'} {source} currency="CAD" minorUnitDigits={2} {values} instruments={[{value:'purchase-order',label:t(P['commerce.purchase.demo_order'])},{value:'agreement',label:t(P['commerce.purchase.demo_agreement'])}]} action="" {review} {message} hiddenFields={[{name:'requestId',value:'demo-purchase-request'},{name:'sourceId',value:source.id},{name:'predecessorId',value:'order-previous'}]} rowActions={{add:'addAllocation',removePrefix:'removeAllocation:'}} onsubmit={submit}/>

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

@@ -0,0 +1,9 @@
+/** Interactive purchasing form demo; no record is written. */
+export interface Props {
+    /** Show the explicit retained-allocation reduction workflow. */
+    reduction?: boolean;
+}
+declare const PurchasingPlayground: import("svelte").Component<Props, {}, "">;
+type PurchasingPlayground = ReturnType<typeof PurchasingPlayground>;
+export default PurchasingPlayground;
+//# sourceMappingURL=PurchasingPlayground.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PurchasingPlayground.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PurchasingPlayground.svelte.ts"],"names":[],"mappings":"AAaA,8DAA8D;AAC9D,MAAM,WAAW,KAAK;IACpB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAkID,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/QuoteEditor.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+import type { CodeSelectOption } from '@happyvertical/smrt-ui/forms';
+import {
+  CurrencySelect,
+  Form,
+  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 type { Attachment } from 'svelte/attachments';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { Q } from '../quote-i18n.js';
+import {
+  type QuoteDocumentKind,
+  type QuoteDraftValues,
+  type QuoteFieldNames,
+  quoteFieldNames,
+} from '../quote-types.js';
+
+/** Narrow native attributes and Svelte attachment keys; avoids recursive HTML prop unions. */
+export interface QuoteFormAttributes {
+  /** Native form identity and encoding. */
+  id?: string;
+  /** Optional multipart encoding for file controls composed through extensions. */
+  enctype?: HTMLFormAttributes['enctype'];
+  /** Native autocomplete setting. */
+  autocomplete?: HTMLFormAttributes['autocomplete'];
+  /** Svelte attachments, including caller-owned form-retry attachment. */
+  [key: symbol]: Attachment<HTMLFormElement>;
+}
+
+/** Native quotation/estimate editor; caller retains data, authority and retry identity. */
+export interface Props {
+  /** Explicit domain of the document. */
+  kind: QuoteDocumentKind;
+  /** Server-rendered values, including rejected input strings. */
+  values: QuoteDraftValues;
+  /** Available authorized counterparties. */
+  counterparties: { id: string; label: string }[];
+  /** Native form destination; no routes are supplied by Commerce. */
+  action: string;
+  /** Native method (POST by default). */
+  method?: 'post' | 'get';
+  /** Caller-owned repeated hidden values, such as tenant/request/predecessor IDs. */
+  hiddenFields?: { name: string; value: string }[];
+  /** Override payload field names for existing endpoints. */
+  names?: Partial<QuoteFieldNames>;
+  /** Field errors keyed by canonical names or line ID plus field (e.g. a.description). */
+  errors?: Record<string, string>;
+  /** Server failure/uncertain outcome explanation; never clears the form. */
+  message?: string;
+  /** Presentation capability only; the server must enforce authorization. */
+  readonly?: boolean;
+  /** Disable writes while the caller handles a request. */
+  busy?: boolean;
+  /** Native submitter name and action values. Removal appends the stable line ID. */
+  intents?: { name: string; save: string; add: string; removePrefix: string };
+  /** Text overrides, including Client terminology. */
+  labels?: { title?: string; counterparty?: string; save?: string };
+  /** Caller-restricted currency choices; omitted uses the shared ISO defaults. */
+  currencyOptions?: readonly CodeSelectOption[];
+  /** Optional navigation destination. */
+  cancelHref?: string;
+  /** Caller form enhancement; native submission remains enabled unless handler prevents it. */
+  onsubmit?: HTMLFormAttributes['onsubmit'];
+  /** Caller-controlled form attributes/attachments (e.g. createAttachmentKey for form-retry). */
+  formAttributes?: QuoteFormAttributes;
+  /** Domain-specific fields, such as allocation or source-selection controls. */
+  extensions?: Snippet;
+  /** Authorized attachment composition; this component never loads private files. */
+  attachments?: Snippet;
+}
+let {
+  kind,
+  values,
+  counterparties,
+  action,
+  method = 'post',
+  hiddenFields = [],
+  names = {},
+  errors = {},
+  message,
+  readonly = false,
+  busy = false,
+  intents = {
+    name: 'intent',
+    save: 'save',
+    add: 'addLine',
+    removePrefix: 'removeLine:',
+  },
+  labels = {},
+  currencyOptions,
+  cancelHref,
+  onsubmit,
+  formAttributes = {},
+  extensions,
+  attachments,
+}: Props = $props();
+const i18n = useI18n();
+const { t } = i18n;
+const fields = $derived({ ...quoteFieldNames, ...names });
+const title = $derived(
+  labels.title ??
+    t(
+      Q[
+        kind === 'vendor-quotation'
+          ? 'commerce.quote.vendor'
+          : 'commerce.quote.estimate'
+      ],
+    ),
+);
+</script>
+
+<section class="quote-editor" aria-label={title}>
+  <h2>{title}</h2>
+  <p>{t(Q[kind === 'vendor-quotation' ? 'commerce.quote.vendor_hint' : 'commerce.quote.estimate_hint'])}</p>
+  {#if readonly}<p>{t(Q['commerce.quote.readonly'])}</p>{/if}
+  {#if message}<p role="alert">{message}</p>{/if}
+  <Form {...formAttributes} {action} {method} {onsubmit} preventDefault={false}>
+    {#each hiddenFields as field}<Input type="hidden" name={field.name} value={field.value} />{/each}
+    <fieldset disabled={readonly || busy}>
+      <legend>{title}</legend>
+      {#if !readonly}<div class="actions"><Button type="submit" name={intents.name} value={intents.save} density="touch">{labels.save ?? t(Q['commerce.quote.save'])}</Button></div>{/if}
+      <FormGroup label={labels.counterparty ?? t(Q[kind === 'vendor-quotation' ? 'commerce.quote.vendor_party' : 'commerce.quote.customer_party'])} error={errors.counterpartyId} required>
+        <Select name={fields.counterpartyId} value={values.counterpartyId} required density="touch">
+          <option value="">{t(Q['commerce.quote.choose'])}</option>
+          {#if values.counterpartyId && !counterparties.some(party => party.id === values.counterpartyId)}<option value={values.counterpartyId}>{values.counterpartyId}</option>{/if}
+          {#each counterparties as party}<option value={party.id}>{party.label}</option>{/each}
+        </Select>
+      </FormGroup>
+      {#each [{key:'reference',label:'commerce.quote.reference'}, {key:'date',label:'commerce.quote.date'}, {key:'validUntil',label:'commerce.quote.expiry'}, {key:'currency',label:'commerce.quote.currency'}, {key:'total',label:'commerce.quote.total'}, {key:'tax',label:'commerce.quote.tax'}] as field}
+        <FormGroup label={t(Q[field.label as keyof typeof Q])} error={errors[field.key]}>
+          {#if field.key === 'currency'}
+            <CurrencySelect name={fields.currency} value={values.currency} options={currencyOptions} locale={i18n.locale} readOnly={readonly} disabled={busy} density="touch" />
+          {:else}
+            <Input name={fields[field.key as keyof QuoteFieldNames]} value={values[field.key as 'reference']} inputmode={field.key === 'total' || field.key === 'tax' ? 'decimal' : undefined} density="touch" />
+          {/if}
+        </FormGroup>
+      {/each}
+      {#each [{key:'scope',label:'commerce.quote.scope'}, {key:'inclusions',label:'commerce.quote.inclusions'}, {key:'exclusions',label:'commerce.quote.exclusions'}, {key:'reason',label:'commerce.quote.reason'}] as field}
+        <FormGroup label={t(Q[field.label as keyof typeof Q])} error={errors[field.key]}>
+          <Textarea name={fields[field.key as keyof QuoteFieldNames]} value={values[field.key as 'scope']} />
+        </FormGroup>
+      {/each}
+      <h3>{t(Q['commerce.quote.lines'])}</h3>
+      {#each values.lines as line, index (line.id)}
+        <fieldset>
+          <legend>{t(Q['commerce.quote.line'], {number: index + 1})}</legend>
+          <Input type="hidden" name={fields.lineId} value={line.id} />
+          <FormGroup label={t(Q['commerce.quote.description'])} error={errors[`${line.id}.description`]}><Input name={fields.lineDescription} value={line.description} density="touch" /></FormGroup>
+          <FormGroup label={t(Q['commerce.quote.quantity'])} error={errors[`${line.id}.quantity`]}><Input name={fields.lineQuantity} value={line.quantity} inputmode="decimal" density="touch" /></FormGroup>
+          <FormGroup label={t(Q['commerce.quote.rate'])} error={errors[`${line.id}.unitRate`]}><Input name={fields.lineUnitRate} value={line.unitRate} inputmode="decimal" density="touch" /></FormGroup>
+          {#if !readonly}<Button type="submit" name={intents.name} value={`${intents.removePrefix}${line.id}`} formnovalidate variant="secondary" density="touch">{t(Q['commerce.quote.remove'], {number: index + 1})}</Button>{/if}
+        </fieldset>
+      {:else}<p>{t(Q['commerce.quote.empty_lines'])}</p>{/each}
+      {#if !readonly}<Button type="submit" name={intents.name} value={intents.add} formnovalidate variant="secondary" density="touch">{t(Q['commerce.quote.add'])}</Button>{/if}
+      {@render extensions?.()}
+    </fieldset>
+    {#if cancelHref}<Button href={cancelHref} variant="secondary" density="touch">{t(Q['commerce.quote.cancel'])}</Button>{/if}
+  </Form>
+  {#if attachments}
+    <fieldset class="editor-attachments" disabled={readonly || busy}>
+      {@render attachments()}
+    </fieldset>
+  {/if}
+</section>
+
+<style>
+.editor-attachments { min-width: 0; margin: 0; padding: 0; border: 0; }
+.quote-editor { max-width: 48rem; min-width: 0; color: var(--smrt-color-on-surface); overflow-wrap: anywhere; }
+fieldset { min-width: 0; margin-block: var(--smrt-spacing-4, 1rem); padding: var(--smrt-spacing-4, 1rem); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md, 0.5rem); }
+.actions { margin-top: var(--smrt-spacing-4, 1rem); }
+</style>

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

@@ -0,0 +1,76 @@
+import type { CodeSelectOption } from '@happyvertical/smrt-ui/forms';
+import type { Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { HTMLFormAttributes } from 'svelte/elements';
+import { type QuoteDocumentKind, type QuoteDraftValues, type QuoteFieldNames } from '../quote-types.js';
+/** Narrow native attributes and Svelte attachment keys; avoids recursive HTML prop unions. */
+export interface QuoteFormAttributes {
+    /** Native form identity and encoding. */
+    id?: string;
+    /** Optional multipart encoding for file controls composed through extensions. */
+    enctype?: HTMLFormAttributes['enctype'];
+    /** Native autocomplete setting. */
+    autocomplete?: HTMLFormAttributes['autocomplete'];
+    /** Svelte attachments, including caller-owned form-retry attachment. */
+    [key: symbol]: Attachment<HTMLFormElement>;
+}
+/** Native quotation/estimate editor; caller retains data, authority and retry identity. */
+export interface Props {
+    /** Explicit domain of the document. */
+    kind: QuoteDocumentKind;
+    /** Server-rendered values, including rejected input strings. */
+    values: QuoteDraftValues;
+    /** Available authorized counterparties. */
+    counterparties: {
+        id: string;
+        label: string;
+    }[];
+    /** Native form destination; no routes are supplied by Commerce. */
+    action: string;
+    /** Native method (POST by default). */
+    method?: 'post' | 'get';
+    /** Caller-owned repeated hidden values, such as tenant/request/predecessor IDs. */
+    hiddenFields?: {
+        name: string;
+        value: string;
+    }[];
+    /** Override payload field names for existing endpoints. */
+    names?: Partial<QuoteFieldNames>;
+    /** Field errors keyed by canonical names or line ID plus field (e.g. a.description). */
+    errors?: Record<string, string>;
+    /** Server failure/uncertain outcome explanation; never clears the form. */
+    message?: string;
+    /** Presentation capability only; the server must enforce authorization. */
+    readonly?: boolean;
+    /** Disable writes while the caller handles a request. */
+    busy?: boolean;
+    /** Native submitter name and action values. Removal appends the stable line ID. */
+    intents?: {
+        name: string;
+        save: string;
+        add: string;
+        removePrefix: string;
+    };
+    /** Text overrides, including Client terminology. */
+    labels?: {
+        title?: string;
+        counterparty?: string;
+        save?: string;
+    };
+    /** Caller-restricted currency choices; omitted uses the shared ISO defaults. */
+    currencyOptions?: readonly CodeSelectOption[];
+    /** Optional navigation destination. */
+    cancelHref?: string;
+    /** Caller form enhancement; native submission remains enabled unless handler prevents it. */
+    onsubmit?: HTMLFormAttributes['onsubmit'];
+    /** Caller-controlled form attributes/attachments (e.g. createAttachmentKey for form-retry). */
+    formAttributes?: QuoteFormAttributes;
+    /** Domain-specific fields, such as allocation or source-selection controls. */
+    extensions?: Snippet;
+    /** Authorized attachment composition; this component never loads private files. */
+    attachments?: Snippet;
+}
+declare const QuoteEditor: import("svelte").Component<Props, {}, "">;
+type QuoteEditor = ReturnType<typeof QuoteEditor>;
+export default QuoteEditor;
+//# sourceMappingURL=QuoteEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuoteEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/QuoteEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAWrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EAErB,MAAM,mBAAmB,CAAC;AAG3B,8FAA8F;AAC9F,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,mCAAmC;IACnC,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,wEAAwE;IACxE,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;CAC5C;AAED,2FAA2F;AAC3F,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,gEAAgE;IAChE,MAAM,EAAE,gBAAgB,CAAC;IACzB,2CAA2C;IAC3C,cAAc,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAChD,mEAAmE;IACnE,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACxB,mFAAmF;IACnF,YAAY,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACjD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjC,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mFAAmF;IACnF,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5E,oDAAoD;IACpD,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClE,gFAAgF;IAChF,eAAe,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC9C,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,+FAA+F;IAC/F,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAgHD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/QuotePlayground.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { Q } from '../quote-i18n.js';
+import type {
+  QuoteDocumentKind,
+  QuoteDraftValues,
+  QuoteRevision,
+} from '../quote-types.js';
+import QuoteEditor from './QuoteEditor.svelte';
+import QuoteRevisionComparison from './QuoteRevisionComparison.svelte';
+/** Interactive presentation demo; all outcomes are local and no financial record is written. */
+export interface Props {
+  /** Start with a vendor quotation or customer estimate. */
+  kind?: QuoteDocumentKind;
+}
+let { kind = 'vendor-quotation' }: Props = $props();
+const { t } = useI18n();
+let values = $state<QuoteDraftValues>({
+  counterpartyId: 'party-1',
+  reference: 'Q-104',
+  date: '2026-10-03',
+  validUntil: '',
+  currency: 'CAD',
+  total: '1200.00',
+  tax: '60.00',
+  scope: 'Supply design services',
+  inclusions: 'Two revisions',
+  exclusions: 'Printing',
+  reason: 'Updated scope',
+  lines: [
+    {
+      id: 'line-1',
+      description: 'Design services',
+      quantity: '10',
+      unitRate: '114.00',
+    },
+  ],
+});
+let message = $state('');
+let readonly = $state(false);
+let row = 1;
+let errors = $state<Record<string, string>>({});
+const previous = $derived<QuoteRevision>({
+  id: 'revision-1',
+  kind,
+  label: 'Revision 1',
+  status: 'Superseded',
+  counterparty: 'North Studio',
+  total: { currency: 'CAD', minorUnitDigits: 2, amountMinor: 100000 },
+  scope: 'Original design scope',
+});
+const current = $derived<QuoteRevision>({
+  ...previous,
+  id: 'revision-2',
+  label: 'Revision 2',
+  status: 'Draft',
+  total: { currency: 'CAD', minorUnitDigits: 2, amountMinor: 120000 },
+  scope: 'Design and two revisions',
+  reason: 'Updated scope',
+});
+function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
+  event.preventDefault();
+  const data = new FormData(event.currentTarget, event.submitter);
+  const text = (name: string) => String(data.get(name) ?? '');
+  const strings = (name: string) => data.getAll(name).map(String);
+  const ids = strings('lineId');
+  values = {
+    counterpartyId: text('counterpartyId'),
+    reference: text('reference'),
+    date: text('date'),
+    validUntil: text('validUntil'),
+    currency: text('currency'),
+    total: text('total'),
+    tax: text('tax'),
+    scope: text('scope'),
+    inclusions: text('inclusions'),
+    exclusions: text('exclusions'),
+    reason: text('reason'),
+    lines: ids.map((id, index) => ({
+      id,
+      description: strings('lineDescription')[index] ?? '',
+      quantity: strings('lineQuantity')[index] ?? '',
+      unitRate: strings('lineUnitRate')[index] ?? '',
+    })),
+  };
+  const intent = text('intent');
+  if (intent === 'addLine') {
+    values.lines = [
+      ...values.lines,
+      { id: `line-${++row}`, description: '', quantity: '', unitRate: '' },
+    ];
+    message = t(Q['commerce.quote.demo_added']);
+  } else if (intent.startsWith('removeLine:')) {
+    values.lines = values.lines.filter(
+      (line) => line.id !== intent.slice('removeLine:'.length),
+    );
+    message = t(Q['commerce.quote.demo_removed']);
+  } else {
+    errors = { total: t(Q['commerce.quote.demo_error']) };
+    message = t(Q['commerce.quote.demo_rejected']);
+  }
+}
+</script>
+<p>{t(Q['commerce.quote.demo_notice'])}</p>
+<Button variant="secondary" onclick={() => {readonly=!readonly;}}>{t(Q[readonly ? 'commerce.quote.demo_enable' : 'commerce.quote.demo_readonly'])}</Button>
+<QuoteEditor {kind} {values} counterparties={[{id:'party-1',label:'North Studio'}]} action="" {errors} {message} {readonly} hiddenFields={[{name:'requestId',value:'demo-request-1'},{name:'expectedTenantId',value:'demo-tenant'}]} onsubmit={submit} />
+<QuoteRevisionComparison {previous} {current} />

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

@@ -0,0 +1,10 @@
+import type { QuoteDocumentKind } from '../quote-types.js';
+/** Interactive presentation demo; all outcomes are local and no financial record is written. */
+export interface Props {
+    /** Start with a vendor quotation or customer estimate. */
+    kind?: QuoteDocumentKind;
+}
+declare const QuotePlayground: import("svelte").Component<Props, {}, "">;
+type QuotePlayground = ReturnType<typeof QuotePlayground>;
+export default QuotePlayground;
+//# sourceMappingURL=QuotePlayground.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuotePlayground.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/QuotePlayground.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EAGlB,MAAM,mBAAmB,CAAC;AAI3B,gGAAgG;AAChG,MAAM,WAAW,KAAK;IACpB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAwGD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/QuoteRevisionComparison.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Q } from '../quote-i18n.js';
+import {
+  type QuoteRevision,
+  quoteMinorText,
+  quoteRevisionDelta,
+} from '../quote-types.js';
+import QuoteRevisionHistory from './QuoteRevisionHistory.svelte';
+/** Compare retained versions without selecting prices, accepting estimates or awarding work. */
+export interface Props {
+  /** Earlier retained version. */
+  previous: QuoteRevision;
+  /** Later retained version. */
+  current: QuoteRevision;
+  /** Optional localized heading. */
+  title?: string;
+}
+let { previous, current, title }: Props = $props();
+const { t } = useI18n();
+const delta = $derived.by(() => {
+  try {
+    const money = quoteRevisionDelta(previous, current);
+    return money ? { money, text: quoteMinorText(money) } : null;
+  } catch (error) {
+    if (error instanceof RangeError) return undefined;
+    throw error;
+  }
+});
+</script>
+<section class="quote-comparison" aria-label={title ?? t(Q['commerce.quote.compare'])}>
+  <h2>{title ?? t(Q['commerce.quote.compare'])}</h2>
+  <div class="versions">
+    <QuoteRevisionHistory revisions={[previous]} title={t(Q['commerce.quote.before'])} />
+    <QuoteRevisionHistory revisions={[current]} title={t(Q['commerce.quote.after'])} />
+  </div>
+  {#if delta}<p>{t(Q['commerce.quote.delta'])}: {delta.text} {delta.money.currency}</p>
+  {:else if delta === undefined}<p>{t(Q['commerce.quote.unavailable'])}</p>
+  {:else}<p>{t(Q['commerce.quote.incomparable'])}</p>{/if}
+</section>
+<style>
+.quote-comparison { min-width: 0; color: var(--smrt-color-on-surface); overflow-wrap: anywhere; }
+.versions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--smrt-spacing-4, 1rem); }
+</style>

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

@@ -0,0 +1,14 @@
+import { type QuoteRevision } from '../quote-types.js';
+/** Compare retained versions without selecting prices, accepting estimates or awarding work. */
+export interface Props {
+    /** Earlier retained version. */
+    previous: QuoteRevision;
+    /** Later retained version. */
+    current: QuoteRevision;
+    /** Optional localized heading. */
+    title?: string;
+}
+declare const QuoteRevisionComparison: import("svelte").Component<Props, {}, "">;
+type QuoteRevisionComparison = ReturnType<typeof QuoteRevisionComparison>;
+export default QuoteRevisionComparison;
+//# sourceMappingURL=QuoteRevisionComparison.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuoteRevisionComparison.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/QuoteRevisionComparison.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,aAAa,EAGnB,MAAM,mBAAmB,CAAC;AAG3B,gGAAgG;AAChG,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,QAAQ,EAAE,aAAa,CAAC;IACxB,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;IACvB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiCD,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/QuoteRevisionHistory.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import type { Snippet } from 'svelte';
+import { Q } from '../quote-i18n.js';
+import {
+  type QuoteMoneyMinor,
+  type QuoteRevision,
+  quoteMinorText,
+} 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]>;
+}
+let { revisions, title, evidence }: Props = $props();
+const { t } = useI18n();
+function amount(money: QuoteMoneyMinor): string {
+  try {
+    return quoteMinorText(money) ?? t(Q['commerce.quote.unknown']);
+  } catch (error) {
+    if (error instanceof RangeError) return t(Q['commerce.quote.unavailable']);
+    throw error;
+  }
+}
+</script>
+<section class="quote-history" aria-label={title ?? t(Q['commerce.quote.history'])}>
+  <h2>{title ?? t(Q['commerce.quote.history'])}</h2>
+  <ol>
+    {#each revisions as revision (revision.id)}
+      <li>
+        <article>
+          <h3>{revision.label}</h3>
+          <p>{t(Q[revision.kind === 'vendor-quotation' ? 'commerce.quote.vendor' : 'commerce.quote.estimate'])} · {revision.counterparty}</p>
+          <p>{revision.status}{#if revision.recordedAt} · {revision.recordedAt}{/if}</p>
+          <p>{amount(revision.total)} {revision.total.currency}</p>
+          {#if revision.reason}<p>{revision.reason}</p>{/if}
+          {#if revision.scope}<p>{revision.scope}</p>{/if}
+          {@render evidence?.(revision)}
+          {#if revision.href}<Button href={revision.href} variant="secondary" density="touch">{t(Q['commerce.quote.view'])}</Button>{/if}
+        </article>
+      </li>
+    {:else}<li>{t(Q['commerce.quote.empty_history'])}</li>{/each}
+  </ol>
+</section>
+<style>
+.quote-history { min-width: 0; color: var(--smrt-color-on-surface); overflow-wrap: anywhere; }
+ol { padding-inline-start: var(--smrt-spacing-6, 1.5rem); }
+li { margin-block: var(--smrt-spacing-4, 1rem); }
+article { padding: var(--smrt-spacing-4, 1rem); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md, 0.5rem); }
+</style>