@signature.digital/catalog 1.7.0 → 1.9.0

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

@@ -20,10 +20,10 @@ export class SdigWorkspaceInbox extends DeesElement {
 
   public static styles = [workspaceBaseStyles, css`
     .filterbar { padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; }
-    .searchbox { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 32px; width: 280px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
+    .searchbox { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 32px; width: 280px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; }
     .searchbox input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 12px; }
-    .segmented { display: flex; gap: 2px; padding: 2px; background: var(--bg-el); border-radius: 6px; border: 1px solid var(--border-subtle); }
-    .segmented button { padding: 4px 10px; font-size: 11px; font-weight: 500; border-radius: 4px; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
+    .segmented { display: flex; gap: 2px; padding: 2px; background: var(--bg-el); border-radius: 8px; border: 1px solid var(--border-subtle); }
+    .segmented button { padding: 4px 10px; font-size: 11.5px; font-weight: 510; border-radius: 6px; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
     .segmented button.active { background: var(--bg-card); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
     .doc-table { min-width: 880px; }
     .doc-head, .doc-row { display: grid; grid-template-columns: 32px minmax(220px,2.4fr) 150px 160px 90px 60px 32px; align-items: center; gap: 14px; padding: 0 16px; }
@@ -32,7 +32,7 @@ export class SdigWorkspaceInbox extends DeesElement {
     .doc-row.compact { height: 48px; }
     .doc-row:last-child { border-bottom: 0; }
     .doc-row:hover { background: var(--row-hover); }
-    .doc-icon { width: 28px; height: 32px; border-radius: 4px; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
+    .doc-icon { width: 28px; height: 32px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
     .doc-title { font-size: 13px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .doc-meta { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
     .recipient-stack { display: flex; align-items: center; }
@@ -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 {
@@ -84,10 +85,10 @@ export class SdigWorkspaceInbox extends DeesElement {
 
     return html`
       ${topBar({
-        breadcrumb: ['signature.digital', 'Lossless GmbH', 'Inbox'],
+        breadcrumb: ['signature.digital', 'Example workspace', 'Inbox'],
         title: 'Inbox',
         subtitle: pill(`${attentionCount} need attention`, 'info'),
-        actions: html`${actionButton('Import', 'outline', 'upload')}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`,
+        actions: html`${actionButton('Import', 'outline', 'upload', () => this.dispatchEvent(new CustomEvent('import-request', { bubbles: true, composed: true })))}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`,
       })}
       <div class="filterbar">
         <div class="searchbox">${icon('search', 13)}<input .value=${this.search} @input=${(event: Event) => this.search = (event.target as HTMLInputElement).value} placeholder="Search documents, recipients, IDs..." /><span class="mono" style="font-size: 10px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;">⌘K</span></div>
@@ -113,11 +114,11 @@ export class SdigWorkspaceInbox extends DeesElement {
         </div>
         <div class="stats-grid">
           ${[
-            { label: 'Sent this month', value: '127', delta: '+24%', icon: 'send' },
-            { label: 'Avg time to sign', value: '4.2h', delta: '-18%', icon: 'clock' },
-            { label: 'Completion rate', value: '94.1%', delta: '+2.1%', icon: 'check' },
-            { label: 'API signatures', value: '2,481', delta: '+312', icon: 'code' },
-          ].map((metric) => html`<div class="card metric-card"><div style="display: flex; justify-content: space-between; margin-bottom: 12px;">${icon(metric.icon, 14)}<span class="mono" style="font-size: 10px; color: var(--success);">${metric.delta}</span></div><div class="metric-value">${metric.value}</div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${metric.label}</div></div>`)}
+            { label: 'Documents', value: documents.length, icon: 'file' },
+            { label: 'Awaiting signatures', value: attentionCount, icon: 'clock' },
+            { label: 'Completed', value: documents.filter((document) => document.status === 'signed').length, icon: 'check' },
+            { label: 'Drafts', value: documents.filter((document) => document.status === 'draft').length, icon: 'code' },
+          ].map((metric) => html`<div class="card metric-card"><div style="display: flex; justify-content: space-between; margin-bottom: 12px;">${icon(metric.icon, 14)}<span class="mono" style="font-size: 10px; color: var(--text-muted);">current</span></div><div class="metric-value">${metric.value}</div><div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">${metric.label}</div></div>`)}
         </div>
       </div>
     `;

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

@@ -29,7 +29,13 @@ export class SdigWorkspaceSign extends DeesElement {
   `];
 
   private get signFields() {
-    return this.fields.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 {
@@ -39,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">
@@ -70,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

@@ -59,7 +59,7 @@ export const demoDocuments: IDocumentRow[] = [
 export const demoRecipients: IRecipient[] = [
   { id: 0, name: 'Sarah Chen', email: 'sarah@acme.com', color: '#60a5fa', order: 1, role: 'signer' },
   { id: 1, name: 'David Park', email: 'd.park@acme.com', color: '#fbbf24', order: 2, role: 'signer' },
-  { id: 2, name: 'Philipp K.', email: 'philipp@lossless.com', color: '#3b82f6', order: 3, role: 'updates' },
+  { id: 2, name: 'Alex Example', email: 'alex@example.test', color: '#007aff', order: 3, role: 'copy' },
 ];
 
 export const demoFields: IFieldPlacement[] = [
@@ -77,13 +77,14 @@ export const workspaceBaseStyles = css`
     min-height: 0;
     color: var(--text);
     background: var(--bg);
-    font-family: Geist, Inter, Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
     font-feature-settings: 'cv11', 'tnum', 'cv05' 1;
   }
 
   * { 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 {
@@ -99,7 +100,8 @@ export const workspaceBaseStyles = css`
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid var(--border-subtle);
-    background: var(--bg);
+    background: color-mix(in srgb, var(--bg) 72%, transparent);
+    backdrop-filter: saturate(180%) blur(20px);
     gap: 12px;
   }
 
@@ -122,10 +124,10 @@ export const workspaceBaseStyles = css`
   }
 
   .top-title > span:first-child {
-    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
-    font-size: 18px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
+    font-size: 19px;
+    font-weight: 640;
+    letter-spacing: -0.022em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -141,7 +143,7 @@ export const workspaceBaseStyles = css`
   .btn {
     height: 34px;
     padding: 0 14px;
-    border-radius: 6px;
+    border-radius: 7px;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: -0.01em;
@@ -216,7 +218,7 @@ export const workspaceBaseStyles = css`
   .card {
     background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: 12px;
     overflow: hidden;
   }
 
@@ -341,23 +343,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>`;
+  return html`<dees-icon .icon=${iconMap[name] || iconMap.file} .iconSize=${size}></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:Github', 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 {
@@ -374,9 +377,9 @@ export function topBar(config: { breadcrumb: string[]; title: string; subtitle?:
   `;
 }
 
-export function workspaceDemoFrame(content: TemplateResult, theme: TWorkspaceTheme = 'dark'): TemplateResult {
+export function workspaceDemoFrame(content: TemplateResult, theme: TWorkspaceTheme = 'light'): TemplateResult {
   const darkVars = `
-    --accent: #3b82f6;
+    --accent: #007aff;
     --bg: hsl(0 0% 3.9%);
     --bg-el: hsl(0 0% 6%);
     --bg-card: hsl(0 0% 7%);
@@ -396,39 +399,39 @@ export function workspaceDemoFrame(content: TemplateResult, theme: TWorkspaceThe
     --error: #ef4444;
   `;
   const lightVars = `
-    --accent: #3b82f6;
-    --bg: hsl(0 0% 99%);
-    --bg-el: hsl(0 0% 97%);
+    --accent: #007aff;
+    --bg: hsl(0 0% 100%);
+    --bg-el: hsl(240 9% 96.5%);
     --bg-card: hsl(0 0% 100%);
-    --bg-input: hsl(0 0% 98%);
-    --border: hsl(0 0% 90%);
-    --border-subtle: hsl(0 0% 93%);
-    --border-strong: hsl(0 0% 80%);
-    --text: hsl(0 0% 9%);
-    --text-sec: hsl(0 0% 32%);
-    --text-muted: hsl(0 0% 45%);
-    --text-dim: hsl(0 0% 62%);
-    --hover: rgba(0,0,0,0.04);
-    --hover-subtle: rgba(0,0,0,0.02);
-    --row-hover: rgba(0,0,0,0.02);
-    --success: #16a34a;
-    --warning: #d97706;
-    --error: #dc2626;
+    --bg-input: hsl(0 0% 100%);
+    --border: hsl(240 6% 89%);
+    --border-subtle: hsl(240 6% 92.5%);
+    --border-strong: hsl(240 6% 80%);
+    --text: hsl(240 6% 11%);
+    --text-sec: hsl(240 4% 34%);
+    --text-muted: hsl(240 3% 52%);
+    --text-dim: hsl(240 3% 66%);
+    --hover: rgba(0,0,0,0.05);
+    --hover-subtle: rgba(0,0,0,0.028);
+    --row-hover: rgba(0,0,0,0.028);
+    --success: #34c759;
+    --warning: #ff9500;
+    --error: #ff3b30;
   `;
 
-  return html`<div style="${theme === 'dark' ? darkVars : lightVars} height: 720px; min-height: 720px; background: var(--bg); color: var(--text); overflow: hidden; font-family: Geist, Inter, Roboto, -apple-system, BlinkMacSystemFont, sans-serif;">${content}</div>`;
+  return html`<div style="${theme === 'dark' ? darkVars : lightVars} height: 720px; min-height: 720px; background: var(--bg); color: var(--text); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;">${content}</div>`;
 }
 
 export function fakeDocument(): TemplateResult {
   return html`
     <div class="fake-document">
       <div class="fake-title">Master Services Agreement</div>
-      <div class="mono" style="font-size: 10px; color: hsl(0 0% 45%); margin-bottom: 24px;">Effective: May 2, 2026 · Acme Corp ↔ Lossless GmbH</div>
+      <div class="mono" style="font-size: 10px; color: hsl(0 0% 45%); margin-bottom: 24px;">Effective: May 2, 2026 · Acme Corp ↔ Example Company</div>
       ${Array.from({ length: 18 }).map((_, index) => html`<div class="fake-line ${index % 5 === 0 ? 'heavy' : ''} ${index % 4 === 3 ? 'short' : ''}"></div>`)}
       <div style="height: 16px;"></div>
       ${Array.from({ length: 8 }).map((_, index) => html`<div class="fake-line ${index % 3 === 2 ? 'short' : ''}"></div>`)}
       <div style="margin-top: 60px; font-size: 10px; font-weight: 600; color: hsl(0 0% 35%);">SIGNED ON BEHALF OF ACME CORP</div>
-      <div style="margin-top: 70px; font-size: 10px; font-weight: 600; color: hsl(0 0% 35%);">SIGNED ON BEHALF OF LOSSLESS GMBH</div>
+      <div style="margin-top: 70px; font-size: 10px; font-weight: 600; color: hsl(0 0% 35%);">SIGNED ON BEHALF OF EXAMPLE COMPANY</div>
     </div>
   `;
 }

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

@@ -15,7 +15,7 @@ declare global {
 
 @customElement('sdig-workspace')
 export class SdigWorkspace extends DeesElement {
-  public static demo = () => html`<sdig-workspace></sdig-workspace>`;
+  public static demo = () => html`<sdig-workspace theme="light" accent="#007aff"></sdig-workspace>`;
   public static demoGroups = ['Signature Digital Workspace'];
 
   @property({ type: String }) public accessor accent: string = '#3b82f6';
@@ -69,29 +69,29 @@ export class SdigWorkspace extends DeesElement {
     }
 
     :host([theme='light']) {
-      --bg: hsl(0 0% 99%);
-      --bg-el: hsl(0 0% 97%);
+      --bg: hsl(0 0% 100%);
+      --bg-el: hsl(240 9% 96.5%);
       --bg-card: hsl(0 0% 100%);
-      --bg-input: hsl(0 0% 98%);
-      --border: hsl(0 0% 90%);
-      --border-subtle: hsl(0 0% 93%);
-      --border-strong: hsl(0 0% 80%);
-      --text: hsl(0 0% 9%);
-      --text-sec: hsl(0 0% 32%);
-      --text-muted: hsl(0 0% 45%);
-      --text-dim: hsl(0 0% 62%);
-      --hover: rgba(0,0,0,0.04);
-      --hover-subtle: rgba(0,0,0,0.02);
-      --row-hover: rgba(0,0,0,0.02);
-      --success: #16a34a;
-      --warning: #d97706;
-      --error: #dc2626;
+      --bg-input: hsl(0 0% 100%);
+      --border: hsl(240 6% 89%);
+      --border-subtle: hsl(240 6% 92.5%);
+      --border-strong: hsl(240 6% 80%);
+      --text: hsl(240 6% 11%);
+      --text-sec: hsl(240 4% 34%);
+      --text-muted: hsl(240 3% 52%);
+      --text-dim: hsl(240 3% 66%);
+      --hover: rgba(0,0,0,0.05);
+      --hover-subtle: rgba(0,0,0,0.028);
+      --row-hover: rgba(0,0,0,0.028);
+      --success: #34c759;
+      --warning: #ff9500;
+      --error: #ff3b30;
     }
 
     * { box-sizing: border-box; }
     button { font: inherit; border: 0; cursor: pointer; }
     .workspace { display: flex; height: 100%; min-height: 720px; background: var(--bg); color: var(--text); overflow: hidden; }
-    .sidebar { width: 220px; background: var(--bg); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; flex-shrink: 0; height: 100%; }
+    .sidebar { width: 224px; background: color-mix(in srgb, var(--bg-el) 94%, transparent); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; flex-shrink: 0; height: 100%; backdrop-filter: saturate(180%) blur(20px); }
     .brand { padding: 14px 16px 12px; display: flex; align-items: center; gap: 8px; }
     .logomark { width: 26px; height: 26px; border-radius: 6px; background: var(--bg-el); border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 13px; font-weight: 700; position: relative; }
     .logomark::after, .wordmark::after { content: ''; display: inline-block; border-radius: 50%; background: var(--accent); }
@@ -99,18 +99,18 @@ export class SdigWorkspace extends DeesElement {
     .wordmark { font-size: 13px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
     .wordmark .dot { color: var(--text-muted); }
     .wordmark::after { width: 4px; height: 4px; margin-left: 3px; transform: translateY(-1px); }
-    .workspace-card { margin: 0 12px 8px; padding: 7px 10px; background: var(--bg-el); border: 1px solid var(--border-subtle); border-radius: 6px; display: flex; align-items: center; gap: 8px; }
+    .workspace-card { margin: 0 12px 8px; padding: 7px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: center; gap: 8px; }
     .workspace-badge { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, var(--accent), hsl(280 70% 60%)); color: white; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
     .workspace-name { font-size: 12px; font-weight: 500; line-height: 1.2; }
     .workspace-plan { font-size: 10px; color: var(--text-muted); }
     .nav-block { padding: 4px 0; }
-    .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 8px; border-radius: 6px; color: var(--text-muted); background: transparent; transition: all 0.1s ease; font-size: 13px; position: relative; width: calc(100% - 16px); text-align: left; }
+    .nav-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; margin: 1px 9px; border-radius: 7px; color: var(--text-sec); background: transparent; transition: all 0.1s ease; font-size: 13px; position: relative; width: calc(100% - 18px); text-align: left; }
     .compact .nav-item { padding: 5px 10px; }
     .nav-item:hover { background: var(--hover-subtle); color: var(--text-sec); }
-    .nav-item.active { background: var(--hover); color: var(--text); font-weight: 500; }
-    .nav-item.active::before { content: ''; position: absolute; left: -8px; width: 2px; height: 14px; border-radius: 2px; background: var(--accent); }
+    .nav-item.active { background: var(--accent); color: white; font-weight: 510; box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 42%, transparent); }
+    .nav-item.active::before { display: none; }
     .nav-count { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--bg-el); color: var(--text-muted); font-size: 10px; text-align: center; }
-    .github-card { margin: 8px 12px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-el); }
+    .github-card { margin: 8px 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
     .sparkline { margin-top: 8px; display: flex; gap: 2px; align-items: flex-end; height: 18px; }
     .sparkline span { flex: 1; background: var(--border-strong); border-radius: 1px; }
     .sparkline span:nth-last-child(-n+4) { background: var(--accent); }
@@ -151,12 +151,12 @@ export class SdigWorkspace extends DeesElement {
     return html`
       <aside class="sidebar">
         <div class="brand"><span class="logomark">s</span><span class="wordmark">signature<span class="dot">.</span>digital</span></div>
-        <div class="workspace-card"><span class="workspace-badge">L</span><div style="flex: 1; min-width: 0;"><div class="workspace-name">Lossless GmbH</div><div class="workspace-plan">Cloud · Pro</div></div>${icon('chevronDown', 12)}</div>
+        <div class="workspace-card"><span class="workspace-badge">E</span><div style="flex: 1; min-width: 0;"><div class="workspace-name">Example workspace</div><div class="workspace-plan">Component preview</div></div></div>
         <div class="nav-block">${navItems.map((item) => this.navButton(item))}</div>
         <div style="flex: 1;"></div>
-        <div class="github-card"><div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; color: var(--text-sec); font-family: 'Intel One Mono', ui-monospace;">${icon('github', 13)} signature-digital/core</div><div style="display: flex; gap: 12px; font-size: 11px; color: var(--text-muted);"><span>${icon('star', 11)} 8.2k</span><span>${icon('git', 11)} 248</span></div><div class="sparkline">${[3, 5, 2, 7, 4, 6, 8, 5, 9, 6, 4, 8, 7, 10].map((height) => html`<span style="height: ${height * 10}%"></span>`)}</div></div>
+        <div class="github-card"><div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; color: var(--text-sec); font-family: 'Intel One Mono', ui-monospace;">${icon('code', 13)} host controlled</div><div style="font-size: 10px; line-height: 1.45; color: var(--text-muted);">Demo data is replaceable through component properties and intent events.</div></div>
         <div class="nav-block" style="border-top: 1px solid var(--border-subtle); padding-top: 8px;">${lowerItems.map((item) => this.navButton(item))}</div>
-        <div class="user-card"><span class="avatar">PK</span><div style="flex: 1; min-width: 0;"><div style="font-size: 12px; font-weight: 500;">Philipp K.</div><div style="font-family: 'Intel One Mono', ui-monospace; font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;">philipp@lossless.com</div></div>${icon('more', 14)}</div>
+        <div class="user-card"><span class="avatar">DE</span><div style="flex: 1; min-width: 0;"><div style="font-size: 12px; font-weight: 500;">Demo owner</div><div style="font-family: 'Intel One Mono', ui-monospace; font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;">owner@example.test</div></div>${icon('more', 14)}</div>
       </aside>
     `;
   }
@@ -177,6 +177,6 @@ export class SdigWorkspace extends DeesElement {
   }
 
   public render(): TemplateResult {
-    return html`<div class="workspace ${this.density === 'compact' ? 'compact' : ''}" style="--accent: ${this.accent};" data-screen-label=${this.view}>${this.renderSidebar()}<main class="main">${this.renderView()}<div class="statusbar"><span style="display: inline-flex; align-items: center; gap: 5px;"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--success);"></span>api.signature.digital</span><span>eu-central-1</span><span>4 sigs queued</span><div style="flex: 1;"></div><span style="color: var(--accent);">Open Source · MIT</span><span>v0.42.1</span><span>${icon('git', 11)} main</span></div></main></div>`;
+    return html`<div class="workspace ${this.density === 'compact' ? 'compact' : ''}" style="--accent: ${this.accent};" data-screen-label=${this.view}>${this.renderSidebar()}<main class="main">${this.renderView()}<div class="statusbar"><span style="display: inline-flex; align-items: center; gap: 5px;"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--success);"></span>component preview</span><span>${this.documents.length} documents</span><div style="flex: 1;"></div><span style="color: var(--accent);">Open Source · MIT</span><span>host controlled</span></div></main></div>`;
   }
 }

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,
 }

package/.smartconfig.json

@@ -1,82 +0,0 @@
-{
-  "@git.zone/cli": {
-    "projectType": "wcc",
-    "module": {
-      "githost": "gitlab.com",
-      "gitscope": "signature.digital",
-      "gitrepo": "catalog",
-      "description": "A comprehensive catalog of customizable web components designed for building and managing e-signature applications.",
-      "npmPackagename": "@signature.digital/catalog",
-      "license": "MIT",
-      "projectDomain": "signature.digital",
-      "keywords": [
-        "e-signature",
-        "web components",
-        "digital signature",
-        "signature capture",
-        "ECMAScript Modules",
-        "typescript",
-        "component library",
-        "contract management",
-        "frontend development",
-        "signature pad",
-        "custom elements",
-        "electronic signing",
-        "npm package"
-      ]
-    },
-    "release": {
-      "registries": [
-        "https://verdaccio.lossless.digital",
-        "https://registry.npmjs.org"
-      ],
-      "accessLevel": "public"
-    }
-  },
-  "@git.zone/tsbundle": {
-    "bundles": [
-      {
-        "from": "./html/index.ts",
-        "to": "./dist_bundle/bundle.js",
-        "outputMode": "bundle",
-        "bundler": "esbuild",
-        "production": true,
-        "includeFiles": [
-          "./html/index.html"
-        ]
-      }
-    ]
-  },
-  "@git.zone/tswatch": {
-    "server": {
-      "enabled": true,
-      "port": 3002,
-      "serveDir": "./dist_watch/",
-      "liveReload": true
-    },
-    "bundles": [
-      {
-        "name": "element-bundle",
-        "from": "./html/index.ts",
-        "to": "./dist_watch/bundle.js",
-        "watchPatterns": [
-          "./ts_web/**/*",
-          "./html/index.ts"
-        ],
-        "triggerReload": true,
-        "bundler": "esbuild",
-        "production": false
-      },
-      {
-        "name": "html",
-        "from": "./html/index.html",
-        "to": "./dist_watch/index.html",
-        "watchPatterns": [
-          "./html/**/*"
-        ],
-        "triggerReload": true
-      }
-    ]
-  },
-  "@ship.zone/szci": {}
-}