feat(workspace): support configurable inbox documents and emit document-open events

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-05-02 - 1.6.0 - feat(workspace)
+support configurable inbox documents and emit document-open events
+
+- Adds a documents property to the workspace and inbox components so document lists, counts, filters, and attention metrics use injected data instead of demo data.
+- Passes documents from the workspace container into the inbox view for consistent sidebar and inbox counts.
+- Emits a bubbling document-open event when an inbox item is opened to enable parent integrations and external handling.
+
 ## 2026-05-02 - 1.5.1 - fix(sdig-workspace)
 make workspace view externally controllable and preserve explicit initial state
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@signature.digital/catalog',
-  version: '1.5.1',
+  version: '1.6.0',
   description: 'A comprehensive catalog of customizable web components designed for building and managing e-signature applications.'
 }

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

@@ -14,6 +14,7 @@ export class SdigWorkspaceInbox extends DeesElement {
   public static demoGroups = ['Signature Digital Workspace'];
 
   @property({ type: String }) public accessor density: TDensity = 'comfortable';
+  @property({ attribute: false }) public accessor documents: IDocumentRow[] = demoDocuments;
   @state() private accessor filter: string = 'all';
   @state() private accessor search: string = '';
 
@@ -45,7 +46,7 @@ export class SdigWorkspaceInbox extends DeesElement {
   `];
 
   private get filteredDocuments(): IDocumentRow[] {
-    return demoDocuments
+    return this.documents
       .filter((doc) => this.filter === 'all' || doc.status === this.filter)
       .filter((doc) => !this.search || doc.title.toLowerCase().includes(this.search.toLowerCase()));
   }
@@ -62,23 +63,30 @@ export class SdigWorkspaceInbox extends DeesElement {
   }
 
   private openDocument(doc: IDocumentRow) {
+    this.dispatchEvent(new CustomEvent('document-open', {
+      detail: { document: doc },
+      bubbles: true,
+      composed: true,
+    }));
     requestWorkspaceView(this, doc.status === 'signed' ? 'audit' : 'sign');
   }
 
   public render(): TemplateResult {
+    const documents = this.documents;
     const filters = [
-      { id: 'all', label: 'All', count: demoDocuments.length },
+      { id: 'all', label: 'All', count: documents.length },
-      { id: 'awaiting', label: 'Awaiting', count: demoDocuments.filter((doc) => doc.status === 'awaiting').length },
+      { id: 'awaiting', label: 'Awaiting', count: documents.filter((doc) => doc.status === 'awaiting').length },
-      { id: 'signed', label: 'Completed', count: demoDocuments.filter((doc) => doc.status === 'signed').length },
+      { id: 'signed', label: 'Completed', count: documents.filter((doc) => doc.status === 'signed').length },
-      { id: 'draft', label: 'Drafts', count: demoDocuments.filter((doc) => doc.status === 'draft').length },
+      { id: 'draft', label: 'Drafts', count: documents.filter((doc) => doc.status === 'draft').length },
-      { id: 'declined', label: 'Declined', count: demoDocuments.filter((doc) => doc.status === 'declined').length },
+      { id: 'declined', label: 'Declined', count: documents.filter((doc) => doc.status === 'declined').length },
     ];
+    const attentionCount = documents.filter((doc) => doc.status === 'awaiting').length;
 
     return html`
       ${topBar({
         breadcrumb: ['signature.digital', 'Lossless GmbH', 'Inbox'],
         title: 'Inbox',
-        subtitle: pill(`${demoDocuments.filter((doc) => doc.status === 'awaiting').length} need attention`, 'info'),
+        subtitle: pill(`${attentionCount} need attention`, 'info'),
         actions: html`${actionButton('Import', 'outline', 'upload')}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`,
       })}
       <div class="filterbar">

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 { icon, type TDensity, type TWorkspaceTheme, type TWorkspaceView } from './sdig-workspace.shared.js';
+import { demoDocuments, icon, type IDocumentRow, 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';
@@ -23,6 +23,7 @@ export class SdigWorkspace extends DeesElement {
   @property({ type: String, reflect: true }) public accessor theme: TWorkspaceTheme = 'dark';
   @property({ type: String }) public accessor initialView: TWorkspaceView = 'inbox';
   @property({ type: String, reflect: true }) public accessor view: TWorkspaceView = 'inbox';
+  @property({ attribute: false }) public accessor documents: IDocumentRow[] = demoDocuments;
 
   public connectedCallback = async () => {
     await super.connectedCallback();
@@ -133,7 +134,7 @@ export class SdigWorkspace extends DeesElement {
 
   private renderSidebar(): TemplateResult {
     const navItems = [
-      { id: 'inbox', label: 'Inbox', icon: 'inbox', count: 4 },
+      { id: 'inbox', label: 'Inbox', icon: 'inbox', count: this.documents.length },
       { id: 'compose', label: 'Compose', icon: 'plus' },
       { id: 'templates', label: 'Templates', icon: 'folder', count: 12 },
       { id: 'audit', label: 'Audit Trail', icon: 'shield' },
@@ -159,7 +160,7 @@ export class SdigWorkspace extends DeesElement {
 
   private renderView(): TemplateResult {
     switch (this.view) {
-      case 'inbox': return html`<sdig-workspace-inbox class="view-host" .density=${this.density}></sdig-workspace-inbox>`;
+      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"></sdig-workspace-sign>`;
       case 'audit': return html`<sdig-workspace-audit class="view-host"></sdig-workspace-audit>`;
@@ -167,7 +168,7 @@ export class SdigWorkspace extends DeesElement {
       case 'templates': return html`<sdig-workspace-placeholder class="view-host" label="Templates" subtitle="Reusable agreement templates"></sdig-workspace-placeholder>`;
       case 'team': return html`<sdig-workspace-placeholder class="view-host" label="Team" subtitle="Workspace members & roles"></sdig-workspace-placeholder>`;
       case 'settings': return html`<sdig-workspace-placeholder class="view-host" label="Settings" subtitle="Workspace, billing, security"></sdig-workspace-placeholder>`;
-      default: return html`<sdig-workspace-inbox class="view-host" .density=${this.density}></sdig-workspace-inbox>`;
+      default: return html`<sdig-workspace-inbox class="view-host" .density=${this.density} .documents=${this.documents}></sdig-workspace-inbox>`;
     }
   }