@signature.digital/catalog 1.6.1 → 1.8.0

package/ts_web/elements/sdig-workspace/sdig-workspace-compose.ts

@@ -1,5 +1,5 @@
-import { DeesElement, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
-import { actionButton, demoFields, demoRecipients, fakeDocument, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame, type IFieldPlacement, type IRecipient, type TRecipientRole } from './sdig-workspace.shared.js';
+import { DeesElement, property, state, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
+import { actionButton, demoDocuments, demoFields, demoRecipients, fakeDocument, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame, type IDocumentRow, type IFieldPlacement, type IRecipient, type TRecipientRole } from './sdig-workspace.shared.js';
 import '../sdig-contextmenu/index.js';
 import { type ISdigContextMenuAction, type ISdigContextMenuActionEventDetail } from '../sdig-contextmenu/index.js';
 
@@ -71,8 +71,9 @@ export class SdigWorkspaceCompose extends DeesElement {
   @state() private accessor step: number = 2;
   @state() private accessor activeRecipient: number = 0;
   @state() private accessor selectedFieldId: string | null = null;
-  @state() private accessor recipients: IRecipient[] = [...demoRecipients];
-  @state() private accessor fields: IFieldPlacement[] = [...demoFields];
+  @property({ attribute: false }) public accessor document: IDocumentRow = demoDocuments[0];
+  @property({ attribute: false }) public accessor recipients: IRecipient[] = [...demoRecipients];
+  @property({ attribute: false }) public accessor fields: IFieldPlacement[] = [...demoFields];
   @state() private accessor signingOrderDrag: TSigningOrderDrag | null = null;
   @state() private accessor recipientContextMenu: TRecipientContextMenu | null = null;
   private draggedFieldDefinition: TFieldDefinition | null = null;
@@ -169,8 +170,46 @@ export class SdigWorkspaceCompose extends DeesElement {
     return Math.max(min, Math.min(max, value));
   }
 
+  private parseDragOffset(rawOffset: string | undefined, fallback: { x: number; y: number }): { x: number; y: number } {
+    if (!rawOffset) return fallback;
+    try {
+      const parsed = JSON.parse(rawOffset) as Partial<{ x: number; y: number }>;
+      return Number.isFinite(parsed.x) && Number.isFinite(parsed.y) ? { x: parsed.x!, y: parsed.y! } : fallback;
+    } catch {
+      return fallback;
+    }
+  }
+
+  private emitFieldsChange() {
+    this.dispatchEvent(new CustomEvent('fields-change', {
+      detail: { fields: this.fields },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private emitRecipientsChange() {
+    this.dispatchEvent(new CustomEvent('recipients-change', {
+      detail: { recipients: this.recipients },
+      bubbles: true,
+      composed: true,
+    }));
+    this.dispatchEvent(new CustomEvent('routing-change', {
+      detail: { recipients: this.recipients },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
   private updateField(fieldId: string, patch: Partial<IFieldPlacement>) {
     this.fields = this.fields.map((field) => field.id === fieldId ? { ...field, ...patch } : field);
+    const field = this.fields.find((currentField) => currentField.id === fieldId);
+    this.dispatchEvent(new CustomEvent('field-update', {
+      detail: { fieldId, field, patch, fields: this.fields },
+      bubbles: true,
+      composed: true,
+    }));
+    this.emitFieldsChange();
   }
 
   private updateSelectedField(patch: Partial<IFieldPlacement>) {
@@ -192,8 +231,15 @@ export class SdigWorkspaceCompose extends DeesElement {
 
   private removeSelectedField() {
     if (!this.selectedFieldId) return;
+    const field = this.fields.find((currentField) => currentField.id === this.selectedFieldId);
     this.fields = this.fields.filter((field) => field.id !== this.selectedFieldId);
+    this.dispatchEvent(new CustomEvent('field-delete', {
+      detail: { fieldId: this.selectedFieldId, field, fields: this.fields },
+      bubbles: true,
+      composed: true,
+    }));
     this.selectedFieldId = null;
+    this.emitFieldsChange();
   }
 
   private updateRecipientRole(recipientId: number, role: TRecipientRole) {
@@ -220,6 +266,7 @@ export class SdigWorkspaceCompose extends DeesElement {
     targetMembers.splice(insertIndex, 0, { ...recipient, role: nextRole });
     nextByRole.set(nextRole, targetMembers);
     this.recipients = recipientRoleDefinitions.flatMap((roleDefinition) => nextByRole.get(roleDefinition.role) || []).map((currentRecipient, index) => ({ ...currentRecipient, order: index + 1 }));
+    this.emitRecipientsChange();
 
     const nextSigners = this.recipients.filter((currentRecipient) => currentRecipient.role === 'signer');
     const fallbackSigner = nextSigners[0];
@@ -229,6 +276,7 @@ export class SdigWorkspaceCompose extends DeesElement {
       if (this.activeRecipient === recipientId) {
         this.activeRecipient = fallbackSigner.id;
       }
+      this.emitFieldsChange();
     }
   }
 
@@ -435,12 +483,13 @@ export class SdigWorkspaceCompose extends DeesElement {
     if (!this.draggedFieldDefinition && !transferredType) return;
     const definition = this.draggedFieldDefinition || this.fieldDefinition(transferredType);
     const transferredOffset = event.dataTransfer?.getData('application/x-signature-field-offset');
-    const offset = this.draggedFieldGrabOffset || (transferredOffset ? JSON.parse(transferredOffset) as { x: number; y: number } : { x: definition.w / 2, y: definition.h / 2 });
+    const fallbackOffset = { x: definition.w / 2, y: definition.h / 2 };
+    const offset = this.draggedFieldGrabOffset || this.parseDragOffset(transferredOffset, fallbackOffset);
     const rect = page.getBoundingClientRect();
     const x = Math.round(event.clientX - rect.left - offset.x);
     const y = Math.round(event.clientY - rect.top - offset.y);
     const nextField: IFieldPlacement = {
-      id: `field_${Date.now()}`,
+      id: globalThis.crypto?.randomUUID?.() || `field_${Date.now()}_${Math.random().toString(36).slice(2)}`,
       type: definition.type,
       x: Math.max(0, Math.min(Math.max(0, rect.width - definition.w), x)),
       y: Math.max(0, Math.min(Math.max(0, rect.height - definition.h), y)),
@@ -454,6 +503,12 @@ export class SdigWorkspaceCompose extends DeesElement {
     this.selectedFieldId = nextField.id;
     this.draggedFieldDefinition = null;
     this.draggedFieldGrabOffset = null;
+    this.dispatchEvent(new CustomEvent('field-create', {
+      detail: { field: nextField, fields: this.fields },
+      bubbles: true,
+      composed: true,
+    }));
+    this.emitFieldsChange();
   }
 
   private startFieldToolDrag(event: DragEvent, fieldType: TFieldDefinition) {
@@ -567,10 +622,11 @@ export class SdigWorkspaceCompose extends DeesElement {
   }
 
   public render(): TemplateResult {
+    const document = this.document || demoDocuments[0];
     const selectedField = this.fields.find((field) => field.id === this.selectedFieldId);
 
     return html`
-      ${topBar({ breadcrumb: ['signature.digital', 'Inbox', 'Compose'], title: 'Master Services Agreement', subtitle: pill('Draft · auto-saved'), actions: html`${actionButton('Save draft', 'ghost')}${actionButton('Preview', 'outline', 'eye')}${actionButton('Send for signature', 'primary', 'send')}` })}
+      ${topBar({ breadcrumb: ['signature.digital', 'Inbox', 'Compose'], title: document.title, subtitle: pill('Draft · auto-saved'), actions: html`${actionButton('Save draft', 'ghost')}${actionButton('Preview', 'outline', 'eye')}${actionButton('Send for signature', 'primary', 'send')}` })}
       ${this.renderStepper()}
       <div class="compose-workspace">
         ${this.renderRecipientContextMenu()}
@@ -585,9 +641,9 @@ export class SdigWorkspaceCompose extends DeesElement {
           <div class="document-page page-drop-target" @click=${this.handleDocumentClick} @dragover=${(event: DragEvent) => { event.preventDefault(); if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'; (event.currentTarget as HTMLElement).classList.add('drag-over'); }} @dragleave=${(event: DragEvent) => (event.currentTarget as HTMLElement).classList.remove('drag-over')} @drop=${(event: DragEvent) => this.addFieldFromDrop(event)}>
             ${fakeDocument()}
             ${this.fields.map((field) => html`<div class="field-box ${this.selectedFieldId === field.id ? 'selected' : ''}" style="--x: ${field.x}px; --y: ${field.y}px; --w: ${field.w}px; --h: ${field.h}px; --field-color: ${this.recipientColor(field.recipient)};" @click=${() => this.selectedFieldId = field.id} @pointerdown=${(event: PointerEvent) => this.startFieldMove(event, field)}><div class="field-content">${icon(this.fieldIcon(field.type), 12)}<span>${field.label}</span></div>${this.selectedFieldId === field.id ? this.renderResizeHandles(field) : ''}</div>`)}
-            <div class="mono" style="position: absolute; bottom: 12px; right: 16px; font-size: 9px; color: hsl(0 0% 60%);">Page 1 of 14</div>
+            <div class="mono" style="position: absolute; bottom: 12px; right: 16px; font-size: 9px; color: hsl(0 0% 60%);">Page 1 of ${document.pages}</div>
           </div>
-          <div style="display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted);">${actionButton('Prev', 'outline')}${html`<span class="mono">1 / 14</span>`}${actionButton('Next', 'outline')}</div>
+          <div style="display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted);">${actionButton('Prev', 'outline')}${html`<span class="mono">1 / ${document.pages}</span>`}${actionButton('Next', 'outline')}</div>
         </div>
         <div class="right-panel">
           <div class="label-upper">Routing order · drag to reorder</div>

package/ts_web/elements/sdig-workspace/sdig-workspace-inbox.ts

@@ -68,7 +68,8 @@ export class SdigWorkspaceInbox extends DeesElement {
       bubbles: true,
       composed: true,
     }));
-    requestWorkspaceView(this, doc.status === 'signed' ? 'audit' : 'sign');
+    const view = doc.status === 'draft' ? 'compose' : doc.status === 'signed' || doc.status === 'declined' ? 'audit' : 'sign';
+    requestWorkspaceView(this, view);
   }
 
   public render(): TemplateResult {

package/ts_web/elements/sdig-workspace/sdig-workspace-sign.ts

@@ -13,6 +13,7 @@ export class SdigWorkspaceSign extends DeesElement {
   public static demoGroups = ['Signature Digital Workspace'];
 
   @property({ attribute: false }) public accessor document: IDocumentRow = demoDocuments[0];
+  @property({ attribute: false }) public accessor fields: IFieldPlacement[] = demoFields;
   @state() private accessor activeFieldId: string = 'f1';
   @state() private accessor signedFieldIds: string[] = [];
 
@@ -28,7 +29,13 @@ export class SdigWorkspaceSign extends DeesElement {
   `];
 
   private get signFields() {
-    return demoFields.slice(0, 3);
+    return this.fields;
+  }
+
+  private get activeField(): IFieldPlacement | undefined {
+    return this.signFields.find((field) => field.id === this.activeFieldId && !this.signedFieldIds.includes(field.id))
+      || this.signFields.find((field) => !this.signedFieldIds.includes(field.id))
+      || this.signFields[0];
   }
 
   private fieldIcon(type: IFieldPlacement['type']): string {
@@ -38,29 +45,59 @@ export class SdigWorkspaceSign extends DeesElement {
   }
 
   private signField(fieldId: string) {
-    if (!this.signedFieldIds.includes(fieldId)) {
-      this.signedFieldIds = [...this.signedFieldIds, fieldId];
-    }
-    const next = this.signFields.find((field) => !this.signedFieldIds.includes(field.id) && field.id !== fieldId);
+    const field = this.signFields.find((currentField) => currentField.id === fieldId);
+    if (!field || this.signedFieldIds.includes(fieldId)) return;
+    this.signedFieldIds = [...this.signedFieldIds, fieldId];
+    this.dispatchEvent(new CustomEvent('field-signed', {
+      detail: { document: this.document, field, signedFieldIds: this.signedFieldIds },
+      bubbles: true,
+      composed: true,
+    }));
+    const next = this.signFields.find((currentField) => !this.signedFieldIds.includes(currentField.id));
     if (next) this.activeFieldId = next.id;
   }
 
+  private emitSigningComplete() {
+    if (this.signedFieldIds.length !== this.signFields.length) return;
+    this.dispatchEvent(new CustomEvent('signing-complete', {
+      detail: {
+        document: this.document,
+        fields: this.signFields,
+        signedFieldIds: this.signedFieldIds,
+        completedAt: Date.now(),
+      },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private handlePrimaryAction() {
+    if (!this.signFields.length) return;
+    if (this.signedFieldIds.length === this.signFields.length) {
+      this.emitSigningComplete();
+      return;
+    }
+    const activeField = this.activeField;
+    if (activeField) this.signField(activeField.id);
+  }
+
   private renderSignedValue(field: IFieldPlacement): TemplateResult {
-    if (field.type === 'signature') return html`<span style="font-family: 'Plus Jakarta Sans', cursive; font-size: 22px; font-weight: 600; font-style: italic; color: hsl(220 50% 30%);">Sarah Chen</span>`;
-    if (field.type === 'date') return html`<span class="mono" style="font-size: 12px; color: hsl(0 0% 18%);">2026-05-02</span>`;
-    return html`<span style="font-size: 12px; color: hsl(0 0% 18%);">Sarah Chen</span>`;
+    if (field.type === 'signature') return html`<span style="font-size: 12px; font-weight: 600; color: hsl(220 50% 30%);">Signature captured</span>`;
+    if (field.type === 'date') return html`<span class="mono" style="font-size: 12px; color: hsl(0 0% 18%);">Date captured</span>`;
+    return html`<span style="font-size: 12px; color: hsl(0 0% 18%);">Completed</span>`;
   }
 
   public render(): TemplateResult {
     const document = this.document || demoDocuments[0];
     const completed = this.signedFieldIds.length;
-    const progress = Math.round((completed / this.signFields.length) * 100);
-    const activeField = this.signFields.find((field) => field.id === this.activeFieldId) || this.signFields[0];
+    const total = this.signFields.length;
+    const progress = total ? Math.round((completed / total) * 100) : 0;
+    const activeField = this.activeField;
 
     return html`
       <div class="recipient-header">
         <div style="display: flex; align-items: center; gap: 12px;"><span class="logomark">s</span><div><div style="font-size: 12px; font-weight: 600;">${document.title}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">From ${document.sender} · ${document.id} · ${document.pages} pages</div></div></div>
-        <div class="actions"><span class="pill success">${icon('shield', 12)} Verified sender · DKIM ✓</span>${actionButton('Decline', 'outline')}${actionButton('PDF', 'outline', 'download')}</div>
+        <div class="actions"><span class="pill info">${icon('shield', 12)} Sender details supplied by host</span>${actionButton('Decline', 'outline')}${actionButton('PDF', 'outline', 'download')}</div>
       </div>
       <div class="progress-track"><div class="progress-fill" style="width: ${progress}%"></div></div>
       <div class="sign-layout">
@@ -69,23 +106,23 @@ export class SdigWorkspaceSign extends DeesElement {
             ${fakeDocument()}
             ${this.signFields.map((field) => {
               const filled = this.signedFieldIds.includes(field.id);
-              const active = this.activeFieldId === field.id && !filled;
+              const active = activeField?.id === field.id && !filled;
               return html`<div class="field-box ${active ? 'selected' : ''}" style="--x: ${field.x}px; --y: ${field.y}px; --w: ${field.w}px; --h: ${field.h}px; --field-color: ${filled ? 'transparent' : 'var(--accent)'}; color: ${filled ? 'hsl(220 50% 30%)' : 'var(--accent)'}; background: ${filled ? 'transparent' : 'color-mix(in srgb, var(--accent) 12%, transparent)'};" @click=${() => !filled ? this.signField(field.id) : undefined}>${filled ? this.renderSignedValue(field) : html`${icon(this.fieldIcon(field.type), 12)}<span>${active ? html`<span style="display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s infinite;"></span>` : ''}${field.label}</span>`}</div>`;
             })}
             <div class="mono" style="position: absolute; bottom: 14px; right: 18px; font-size: 9px; color: hsl(0 0% 60%);">Page 1 of ${document.pages}</div>
           </div>
         </div>
         <div class="sign-panel">
-          <div style="display: flex; align-items: center; gap: 8px;"><span class="avatar" style="background: #60a5fa;">SC</span><div><div style="font-size: 13px; font-weight: 600;">Hi, Sarah</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">sarah@acme.com</div></div></div>
-          <div class="card" style="padding: 14px; margin-top: 16px;"><div class="label-upper">Your progress</div><div style="font-size: 24px; font-weight: 700;">${completed} <span style="color: var(--text-muted); font-weight: 400;">/ ${this.signFields.length}</span></div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${this.signFields.length - completed === 0 ? 'All fields complete' : `${this.signFields.length - completed} fields remaining`}</div><div class="progress-track" style="margin-top: 12px;"><div class="progress-fill" style="width: ${progress}%"></div></div></div>
+          <div style="display: flex; align-items: center; gap: 8px;"><span class="avatar" style="background: #60a5fa;">SG</span><div><div style="font-size: 13px; font-weight: 600;">Signing session</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${document.id}</div></div></div>
+          <div class="card" style="padding: 14px; margin-top: 16px;"><div class="label-upper">Your progress</div><div style="font-size: 24px; font-weight: 700;">${completed} <span style="color: var(--text-muted); font-weight: 400;">/ ${total}</span></div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${total === 0 ? 'No fields assigned' : total - completed === 0 ? 'All fields complete' : `${total - completed} fields remaining`}</div><div class="progress-track" style="margin-top: 12px;"><div class="progress-fill" style="width: ${progress}%"></div></div></div>
           <div style="margin-top: 20px;" class="label-upper">Step by step</div>
           ${this.signFields.map((field, index) => {
             const filled = this.signedFieldIds.includes(field.id);
-            const active = this.activeFieldId === field.id && !filled;
+            const active = activeField?.id === field.id && !filled;
             return html`<div class="recipient-line ${active ? 'active' : ''}" @click=${() => !filled ? this.activeFieldId = field.id : undefined}><span class="avatar" style="width: 22px; height: 22px; background: ${filled ? 'var(--success)' : active ? 'var(--accent)' : 'var(--bg-input)'}; color: ${filled || active ? 'white' : 'var(--text-muted)'};">${filled ? '✓' : index + 1}</span><div style="flex: 1;"><div style="font-size: 12px; font-weight: 500; text-decoration: ${filled ? 'line-through' : 'none'};">${field.label}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${field.type} · page ${field.page}</div></div>${active ? icon('chevronRight', 12) : ''}</div>`;
           })}
-          <button class="btn primary" style="width: 100%; height: 44px; margin-top: 20px;" @click=${() => this.signField(activeField.id)}>${completed === this.signFields.length ? 'Finish & submit' : `Continue - ${activeField.label}`}</button>
-          <div style="margin-top: 12px; padding: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5; text-align: center; border-radius: 6px; background: var(--bg-el);">By signing, you agree to the ESIGN Act & eIDAS terms.<br /><span class="mono">IP 81.221.4.18 · Brussels, BE</span></div>
+          <button class="btn primary" style="width: 100%; height: 44px; margin-top: 20px;" ?disabled=${total === 0} @click=${() => this.handlePrimaryAction()}>${total === 0 ? 'No fields to sign' : completed === total ? 'Finish & submit' : `Continue - ${activeField?.label || 'next field'}`}</button>
+          <div style="margin-top: 12px; padding: 10px; font-size: 10px; color: var(--text-muted); line-height: 1.5; text-align: center; border-radius: 6px; background: var(--bg-el);">Field completion is captured locally until the host application submits it through a signing API.</div>
         </div>
       </div>
     `;

package/ts_web/elements/sdig-workspace/sdig-workspace.shared.ts

@@ -84,6 +84,7 @@ export const workspaceBaseStyles = css`
   * { box-sizing: border-box; }
   button, input, textarea { font: inherit; }
   button { border: 0; cursor: pointer; }
+  button:disabled { cursor: not-allowed; opacity: 0.52; }
   dees-icon { flex-shrink: 0; }
 
   .mono {
@@ -341,23 +342,24 @@ export const workspaceBaseStyles = css`
 `;
 
 export function icon(name: string, size = 14): TemplateResult {
-  const iconMap: Record<string, string> = {
-    inbox: 'lucide:Inbox', plus: 'lucide:Plus', folder: 'lucide:Folder', shield: 'lucide:Shield', code: 'lucide:Code2',
-    user: 'lucide:User', settings: 'lucide:Settings', upload: 'lucide:Upload', file: 'lucide:FileText', sign: 'lucide:PenTool',
-    clock: 'lucide:Clock', search: 'lucide:Search', more: 'lucide:MoreHorizontal', send: 'lucide:Send', check: 'lucide:Check',
-    eye: 'lucide:Eye', calendar: 'lucide:Calendar', type: 'lucide:Type', download: 'lucide:Download', hash: 'lucide:Hash',
-    github: 'lucide:GitBranch', git: 'lucide:GitBranch', server: 'lucide:Server', star: 'lucide:Star', sparkle: 'lucide:Sparkles',
-    chevronRight: 'lucide:ChevronRight', chevronDown: 'lucide:ChevronDown', x: 'lucide:X', activity: 'lucide:Activity',
-  };
   return html`<dees-icon .icon=${iconMap[name] || iconMap.file} style="font-size: ${size}px;"></dees-icon>`;
 }
 
+const iconMap: Record<string, string> = {
+  inbox: 'lucide:Inbox', plus: 'lucide:Plus', folder: 'lucide:Folder', shield: 'lucide:Shield', code: 'lucide:Code2',
+  user: 'lucide:User', settings: 'lucide:Settings', upload: 'lucide:Upload', file: 'lucide:FileText', sign: 'lucide:PenTool',
+  clock: 'lucide:Clock', search: 'lucide:Search', more: 'lucide:MoreHorizontal', send: 'lucide:Send', check: 'lucide:Check',
+  eye: 'lucide:Eye', calendar: 'lucide:Calendar', type: 'lucide:Type', download: 'lucide:Download', hash: 'lucide:Hash',
+  github: 'lucide:GitBranch', git: 'lucide:GitBranch', server: 'lucide:Server', star: 'lucide:Star', sparkle: 'lucide:Sparkles',
+  chevronRight: 'lucide:ChevronRight', chevronDown: 'lucide:ChevronDown', x: 'lucide:X', activity: 'lucide:Activity',
+};
+
 export function pill(label: string, tone: 'default' | 'success' | 'warning' | 'error' | 'info' = 'default', dot = false): TemplateResult {
   return html`<span class="pill ${tone} ${dot ? 'dot' : ''}">${label}</span>`;
 }
 
 export function actionButton(label: string, variant: 'primary' | 'outline' | 'ghost' = 'outline', iconName?: string, onClick?: () => void): TemplateResult {
-  return html`<button class="btn ${variant}" @click=${onClick || (() => undefined)}>${iconName ? icon(iconName, 13) : ''}${label}</button>`;
+  return html`<button class="btn ${variant}" ?disabled=${!onClick} title=${onClick ? '' : 'This action must be wired by the host application.'} @click=${onClick}>${iconName ? icon(iconName, 13) : ''}${label}</button>`;
 }
 
 export function topBar(config: { breadcrumb: string[]; title: string; subtitle?: TemplateResult; actions?: TemplateResult }): TemplateResult {

package/ts_web/elements/sdig-workspace/sdig-workspace.ts

@@ -1,5 +1,5 @@
 import { DeesElement, property, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
-import { demoDocuments, icon, type IDocumentRow, type TDensity, type TWorkspaceTheme, type TWorkspaceView } from './sdig-workspace.shared.js';
+import { demoDocuments, demoFields, demoRecipients, icon, type IDocumentRow, type IFieldPlacement, type IRecipient, type TDensity, type TWorkspaceTheme, type TWorkspaceView } from './sdig-workspace.shared.js';
 import './sdig-workspace-inbox.js';
 import './sdig-workspace-compose.js';
 import './sdig-workspace-sign.js';
@@ -25,6 +25,8 @@ export class SdigWorkspace extends DeesElement {
   @property({ type: String, reflect: true }) public accessor view: TWorkspaceView = 'inbox';
   @property({ attribute: false }) public accessor documents: IDocumentRow[] = demoDocuments;
   @property({ type: String }) public accessor activeDocumentId: string = '';
+  @property({ attribute: false }) public accessor recipients: IRecipient[] = demoRecipients;
+  @property({ attribute: false }) public accessor fields: IFieldPlacement[] = demoFields;
 
   public connectedCallback = async () => {
     await super.connectedCallback();
@@ -163,8 +165,8 @@ export class SdigWorkspace extends DeesElement {
     const activeDocument = this.documents.find((document) => document.id === this.activeDocumentId) || this.documents[0] || demoDocuments[0];
     switch (this.view) {
       case 'inbox': return html`<sdig-workspace-inbox class="view-host" .density=${this.density} .documents=${this.documents}></sdig-workspace-inbox>`;
-      case 'compose': return html`<sdig-workspace-compose class="view-host"></sdig-workspace-compose>`;
-      case 'sign': return html`<sdig-workspace-sign class="view-host" .document=${activeDocument}></sdig-workspace-sign>`;
+      case 'compose': return html`<sdig-workspace-compose class="view-host" .document=${activeDocument} .recipients=${this.recipients} .fields=${this.fields}></sdig-workspace-compose>`;
+      case 'sign': return html`<sdig-workspace-sign class="view-host" .document=${activeDocument} .fields=${this.fields}></sdig-workspace-sign>`;
       case 'audit': return html`<sdig-workspace-audit class="view-host" .document=${activeDocument}></sdig-workspace-audit>`;
       case 'developers': return html`<sdig-workspace-developers class="view-host"></sdig-workspace-developers>`;
       case 'templates': return html`<sdig-workspace-placeholder class="view-host" label="Templates" subtitle="Reusable agreement templates"></sdig-workspace-placeholder>`;

package/ts_web/plugins.ts

@@ -1,8 +1,7 @@
 // third party
-import signaturePadMod from 'signature_pad';
-type signaturePadType = (typeof import('signature_pad'))['default'];
-const signaturePad = signaturePadMod as any as signaturePadType;
+import SignaturePad from 'signature_pad';
+export type { PointGroup as TSignaturePadPointGroup } from 'signature_pad';
 
 export {
-  signaturePad,
+  SignaturePad as signaturePad,
 }