@signature.digital/catalog 1.8.0 → 1.9.0

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

@@ -24,16 +24,16 @@ export class SdigWorkspaceAudit extends DeesElement {
     const document = this.document || demoDocuments[1];
     const events = [
       ['2026-05-02 14:32:18 UTC', 'Sarah Chen', 'Document signed', '81.221.4.18 · Brussels, BE', '0x4a7b…f29c', 'success'],
-      ['2026-05-02 14:31:54 UTC', 'Sarah Chen', 'Signature adopted (typed)', '81.221.4.18 · Brussels, BE', '0x4a7b…f29c', 'info'],
+      ['2026-05-02 14:31:54 UTC', 'Sarah Chen', 'Signature strokes captured', 'recipient session', '0x4a7b…f29c', 'info'],
       ['2026-05-02 14:28:02 UTC', 'Sarah Chen', 'Document opened', '81.221.4.18 · Brussels, BE', '', 'default'],
       ['2026-05-02 11:02:11 UTC', 'Philipp K.', 'Document sent for signature', '92.42.114.7 · Berlin, DE', '0x1c8a…3b6f', 'info'],
       ['2026-05-02 10:54:22 UTC', 'Philipp K.', 'Document created', '92.42.114.7 · Berlin, DE', '0x1c8a…3b6f', 'default'],
     ];
     return html`
-      ${topBar({ breadcrumb: ['signature.digital', 'Inbox', document.id, 'Audit Trail'], title: `Audit Trail · ${document.title}`, subtitle: pill(`${document.status} · cryptographically sealed`, document.status === 'declined' ? 'error' : document.status === 'signed' ? 'success' : 'info', true), actions: html`${actionButton('Certificate (PDF)', 'outline', 'download')}${actionButton('Verify on chain', 'outline', 'hash')}` })}
+      ${topBar({ breadcrumb: ['signature.digital', 'Inbox', document.id, 'Audit Trail'], title: `Audit Trail · ${document.title}`, subtitle: pill(`${document.status} · demo application hash chain`, document.status === 'declined' ? 'error' : document.status === 'signed' ? 'success' : 'info', true), actions: html`${actionButton('Evidence export', 'outline', 'download')}` })}
       <div class="content-scroll audit-grid">
-        <div class="card"><div style="height: 36px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between;"><span style="font-size: 12px; font-weight: 600;">Event log</span><span class="mono" style="font-size: 10px; color: var(--text-muted);">${events.length} events · immutable</span></div>${events.map((event) => html`<div class="event-row"><div><span style="display: block; width: 8px; height: 8px; border-radius: 50%; background: ${event[5] === 'success' ? 'var(--success)' : event[5] === 'info' ? 'var(--accent)' : 'var(--text-dim)'};"></span></div><div class="mono hide-mobile" style="font-size: 11px; color: var(--text-muted);">${event[0]}</div><div><div style="font-size: 12px; font-weight: 500;">${event[2]}</div><div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">by ${event[1]} ${event[4] ? html`<span class="mono" style="color: var(--accent); margin-left: 8px;">${event[4]}</span>` : ''}</div></div><div class="mono hide-mobile" style="font-size: 10px; color: var(--text-muted); text-align: right;">${event[3]}</div></div>`)}</div>
-        <div style="display: flex; flex-direction: column; gap: 16px;"><div class="card" style="padding: 16px;"><div class="label-upper">Document hash</div><div class="mono" style="font-size: 11px; color: var(--accent); word-break: break-all; line-height: 1.5; padding: 10px; background: var(--bg-el); border-radius: 4px; border: 1px solid var(--border-subtle);">0x4a7b8f29c91e3d2a5b6c8e0f1d3c5a7b9d2e4f6a8c1e3d5f7b9c1e3a5b7d9f0e</div></div><div class="card" style="padding: 16px;"><div class="label-upper">Signers</div>${demoRecipients.map((recipient) => html`<div class="recipient-line"><span class="avatar" style="background: ${recipient.color};">${recipient.name.split(' ').map((part) => part[0]).slice(0, 2).join('')}</span><div style="flex: 1;"><div style="font-size: 12px;">${recipient.name}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${recipient.email}</div></div>${icon('check', 12)}</div>`)}</div><div class="card" style="padding: 16px; border-color: rgba(34,197,94,0.2);"><div style="display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--success); margin-bottom: 6px;">${icon('shield', 13)} eIDAS Qualified · ESIGN Act compliant</div><div style="font-size: 11px; color: var(--text-muted); line-height: 1.55;">Open-source verifier available. Anyone can independently validate this signature against the public ledger.</div></div></div>
+        <div class="card"><div style="height: 36px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between;"><span style="font-size: 12px; font-weight: 600;">Demo event log</span><span class="mono" style="font-size: 10px; color: var(--text-muted);">${events.length} local demo events</span></div>${events.map((event) => html`<div class="event-row"><div><span style="display: block; width: 8px; height: 8px; border-radius: 50%; background: ${event[5] === 'success' ? 'var(--success)' : event[5] === 'info' ? 'var(--accent)' : 'var(--text-dim)'};"></span></div><div class="mono hide-mobile" style="font-size: 11px; color: var(--text-muted);">${event[0]}</div><div><div style="font-size: 12px; font-weight: 500;">${event[2]}</div><div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">by ${event[1]} ${event[4] ? html`<span class="mono" style="color: var(--accent); margin-left: 8px;">${event[4]}</span>` : ''}</div></div><div class="mono hide-mobile" style="font-size: 10px; color: var(--text-muted); text-align: right;">${event[3]}</div></div>`)}</div>
+        <div style="display: flex; flex-direction: column; gap: 16px;"><div class="card" style="padding: 16px;"><div class="label-upper">Demo document hash</div><div class="mono" style="font-size: 11px; color: var(--accent); word-break: break-all; line-height: 1.5; padding: 10px; background: var(--bg-el); border-radius: 8px; border: 1px solid var(--border-subtle);">4a7b8f29c91e3d2a5b6c8e0f1d3c5a7b9d2e4f6a8c1e3d5f7b9c1e3a5b7d9f0e</div></div><div class="card" style="padding: 16px;"><div class="label-upper">Demo recipients</div>${demoRecipients.map((recipient) => html`<div class="recipient-line"><span class="avatar" style="background: ${recipient.color};">${recipient.name.split(' ').map((part) => part[0]).slice(0, 2).join('')}</span><div style="flex: 1;"><div style="font-size: 12px;">${recipient.name}</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">${recipient.email}</div></div>${recipient.role === 'signer' ? icon('check', 12) : ''}</div>`)}</div><div class="card" style="padding: 16px; border-color: rgba(0,122,255,0.2);"><div style="display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--accent); margin-bottom: 6px;">${icon('shield', 13)} Application evidence preview</div><div style="font-size: 11px; color: var(--text-muted); line-height: 1.55;">The host application supplies recorded events and SHA-256 values. This demo component does not assert identity, trusted timestamps, blockchain anchoring, or legal signature level.</div></div></div>
       </div>
     `;
   }

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

@@ -60,7 +60,7 @@ const resizeHandles: TResizeHandle[] = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'n
 const recipientRoleDefinitions: Array<{ role: TRecipientRole; label: string; shortLabel: string; description: string }> = [
   { role: 'signer', label: 'Needs signature', shortLabel: 'Signer', description: 'Can receive fields and must sign in order.' },
   { role: 'copy', label: 'Final copy only', shortLabel: 'Copy', description: 'Receives the completed document after signing.' },
-  { role: 'updates', label: 'Every step update', shortLabel: 'Updates', description: 'Receives notifications for every routing step.' },
+  { role: 'updates', label: 'Host-defined update', shortLabel: 'Updates', description: 'Emits an update-role intent for the host application.' },
 ];
 
 @customElement('sdig-workspace-compose')
@@ -626,7 +626,7 @@ export class SdigWorkspaceCompose extends DeesElement {
     const selectedField = this.fields.find((field) => field.id === this.selectedFieldId);
 
     return html`
-      ${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')}` })}
+      ${topBar({ breadcrumb: ['signature.digital', 'Inbox', 'Compose'], title: document.title, subtitle: pill('Draft · host controlled'), actions: html`${actionButton('Save draft', 'ghost')}${actionButton('Preview', 'outline', 'eye')}${actionButton('Send for signature', 'primary', 'send')}` })}
       ${this.renderStepper()}
       <div class="compose-workspace">
         ${this.renderRecipientContextMenu()}
@@ -647,7 +647,7 @@ export class SdigWorkspaceCompose extends DeesElement {
         </div>
         <div class="right-panel">
           <div class="label-upper">Routing order · drag to reorder</div>
-          <div class="role-hint">Choose who signs, who gets the completed copy, and who is notified at every step.</div>
+          <div class="role-hint">Choose visual routing roles. Delivery and notifications remain the host application's responsibility.</div>
           ${this.renderSigningOrder()}
           ${selectedField ? this.renderFieldEditor(selectedField) : ''}
         </div>

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

@@ -1,5 +1,5 @@
 import { DeesElement, html, customElement, type TemplateResult, css } from '@design.estate/dees-element';
-import { actionButton, icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';
+import { icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,23 +23,21 @@ export class SdigWorkspaceDevelopers extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      ${topBar({ breadcrumb: ['signature.digital', 'Developers'], title: 'Developers', subtitle: pill('API · v0.42', 'info', true), actions: html`${actionButton('View on GitHub', 'outline', 'github')}${actionButton('New API key', 'primary', 'plus')}` })}
+      ${topBar({ breadcrumb: ['signature.digital', 'Developers'], title: 'Developers', subtitle: pill('foss.global · typed end to end', 'info', true) })}
       <div class="content-scroll developer-grid">
         <div style="display: flex; flex-direction: column; gap: 16px;">
-          <div class="card" style="padding: 20px;"><div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;"><span style="font-size: 14px; font-weight: 600;">Send a document in 8 lines</span><span class="pill">node</span></div><pre class="code mono">import { Signature } from '@signature.digital/sdk';
-
-const sig = new Signature(process.env.SIGD_KEY);
-
-await sig.documents.send({
-  file: './msa.pdf',
-  recipients: [{ name: 'Sarah Chen', email: 'sarah@acme.com' }],
-  fields: 'auto',
-});</pre></div>
-          <div class="stats-grid">${[['Requests this month', '14,892', '+8.2%'], ['P95 latency', '142ms', '-12ms'], ['Error rate', '0.04%', '✓']].map((metric) => html`<div class="card metric-card"><div class="metric-value">${metric[1]}</div><div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">${metric[0]}</div><div class="mono" style="font-size: 10px; color: var(--success); margin-top: 6px;">${metric[2]}</div></div>`)}</div>
+          <div class="card" style="padding: 20px;"><div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;"><span style="font-size: 14px; font-weight: 600;">Production application boundary</span><span class="pill">TypeScript</span></div><pre class="code mono">const stack = {
+  ui: 'Lit + design.estate',
+  api: 'TypedRequest + TypedServer',
+  state: 'SmartData + MongoDB',
+  blobs: 'SmartBucket + S3',
+  pdf: 'pdf-lib + PDF.js',
+} as const;</pre></div>
+          <div class="stats-grid">${[['Typed boundary', 'TypedRequest', 'request/response'], ['Persistence', 'SmartData', 'MongoDB'], ['Artifacts', 'SmartBucket', 'S3-compatible']].map((metric) => html`<div class="card metric-card"><div class="metric-value" style="font-size:15px">${metric[1]}</div><div style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">${metric[0]}</div><div class="mono" style="font-size: 10px; color: var(--accent); margin-top: 6px;">${metric[2]}</div></div>`)}</div>
         </div>
         <div style="display: flex; flex-direction: column; gap: 16px;">
-          <div class="card" style="padding: 16px;"><div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">${icon('github', 14)}<span style="font-size: 12px; font-weight: 600;">signature-digital/core</span></div><div style="font-size: 11px; color: var(--text-muted); line-height: 1.5;">MIT-licensed. Self-host on your own infra, or use signature.digital cloud.</div></div>
-          <div class="card" style="padding: 16px;"><div class="label-upper">Self-host status</div>${[['Docker image', 'ghcr.io/signature-digital'], ['Helm chart', 'v0.42.1'], ['Postgres ≥ 14', 'required'], ['S3-compatible', 'optional']].map((row) => html`<div style="display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px;"><span style="color: var(--text-muted);">${row[0]}</span><span class="mono" style="color: var(--text-sec);">${row[1]}</span></div>`)}</div>
+          <div class="card" style="padding: 16px;"><div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px;">${icon('code', 14)}<span style="font-size: 12px; font-weight: 600;">Controlled component contract</span></div><div style="font-size: 11px; color: var(--text-muted); line-height: 1.5;">Hosts inject workspace data and own authentication, routing, persistence, and delivery. Catalog components emit bubbling, composed intent events.</div></div>
+          <div class="card" style="padding: 16px;"><div class="label-upper">Self-hosted application</div>${[['Runtime', 'Node + TypeScript'], ['State', 'MongoDB'], ['Artifacts', 'S3-compatible'], ['License', 'MIT core']].map((row) => html`<div style="display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px;"><span style="color: var(--text-muted);">${row[0]}</span><span class="mono" style="color: var(--text-sec);">${row[1]}</span></div>`)}</div>
         </div>
       </div>
     `;

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; }
@@ -85,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>
@@ -114,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.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,7 +77,7 @@ 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;
   }
 
@@ -100,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;
   }
 
@@ -123,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;
@@ -142,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;
@@ -217,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;
   }
 
@@ -342,7 +343,7 @@ export const workspaceBaseStyles = css`
 `;
 
 export function icon(name: string, size = 14): TemplateResult {
-  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> = {
@@ -350,7 +351,7 @@ const iconMap: Record<string, string> = {
   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',
+  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',
 };
 
@@ -376,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%);
@@ -398,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/.smartconfig.json

@@ -1,95 +0,0 @@
-{
-  "@git.zone/cli": {
-    "schemaVersion": 2,
-    "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": {
-      "targets": {
-        "git": {
-          "enabled": true,
-          "remote": "origin",
-          "pushBranch": true,
-          "pushTags": true
-        },
-        "npm": {
-          "enabled": true,
-          "registries": [
-            "https://verdaccio.lossless.digital",
-            "https://registry.npmjs.org"
-          ],
-          "accessLevel": "public",
-          "alreadyPublished": "success"
-        }
-      }
-    }
-  },
-  "@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": {}
-}