@signature.digital/catalog 1.3.0

package/dist_ts_web/elements/sdig-workspace/sdig-workspace-inbox.js

@@ -0,0 +1,181 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, property, state, html, customElement, css } from '@design.estate/dees-element';
+import { actionButton, demoDocuments, icon, pill, requestWorkspaceView, topBar, workspaceBaseStyles } from './sdig-workspace.shared.js';
+import { workspaceDemoFrame } from './sdig-workspace.shared.js';
+let SdigWorkspaceInbox = (() => {
+    let _classDecorators = [customElement('sdig-workspace-inbox')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _density_decorators;
+    let _density_initializers = [];
+    let _density_extraInitializers = [];
+    let _filter_decorators;
+    let _filter_initializers = [];
+    let _filter_extraInitializers = [];
+    let _search_decorators;
+    let _search_initializers = [];
+    let _search_extraInitializers = [];
+    var SdigWorkspaceInbox = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _density_decorators = [property({ type: String })];
+            _filter_decorators = [state()];
+            _search_decorators = [state()];
+            __esDecorate(this, null, _density_decorators, { kind: "accessor", name: "density", static: false, private: false, access: { has: obj => "density" in obj, get: obj => obj.density, set: (obj, value) => { obj.density = value; } }, metadata: _metadata }, _density_initializers, _density_extraInitializers);
+            __esDecorate(this, null, _filter_decorators, { kind: "accessor", name: "filter", static: false, private: false, access: { has: obj => "filter" in obj, get: obj => obj.filter, set: (obj, value) => { obj.filter = value; } }, metadata: _metadata }, _filter_initializers, _filter_extraInitializers);
+            __esDecorate(this, null, _search_decorators, { kind: "accessor", name: "search", static: false, private: false, access: { has: obj => "search" in obj, get: obj => obj.search, set: (obj, value) => { obj.search = value; } }, metadata: _metadata }, _search_initializers, _search_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SdigWorkspaceInbox = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => workspaceDemoFrame(html `<sdig-workspace-inbox></sdig-workspace-inbox>`);
+        static demoGroups = ['Signature Digital Workspace'];
+        #density_accessor_storage = __runInitializers(this, _density_initializers, 'comfortable');
+        get density() { return this.#density_accessor_storage; }
+        set density(value) { this.#density_accessor_storage = value; }
+        #filter_accessor_storage = (__runInitializers(this, _density_extraInitializers), __runInitializers(this, _filter_initializers, 'all'));
+        get filter() { return this.#filter_accessor_storage; }
+        set filter(value) { this.#filter_accessor_storage = value; }
+        #search_accessor_storage = (__runInitializers(this, _filter_extraInitializers), __runInitializers(this, _search_initializers, ''));
+        get search() { return this.#search_accessor_storage; }
+        set search(value) { this.#search_accessor_storage = value; }
+        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 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 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; }
+    .doc-head { height: 36px; border-bottom: 1px solid var(--border-subtle); color: var(--text-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
+    .doc-row { height: 60px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.1s ease; }
+    .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-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; }
+    .recipient-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-input); border: 1.5px solid var(--border); margin-left: -6px; font-size: 9px; font-weight: 600; color: var(--text-sec); display: flex; align-items: center; justify-content: center; }
+    .recipient-dot:first-child { margin-left: 0; }
+    .recipient-dot.signed { border-color: var(--success); color: var(--success); background: var(--bg-el); }
+    .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
+    .metric-card { padding: 16px; }
+    .metric-value { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
+    @media (max-width: 920px) { .filterbar { padding: 12px 16px; display: block; } .searchbox { width: 100%; margin-bottom: 10px; } .stats-grid { grid-template-columns: 1fr; } }
+  `];
+        get filteredDocuments() {
+            return demoDocuments
+                .filter((doc) => this.filter === 'all' || doc.status === this.filter)
+                .filter((doc) => !this.search || doc.title.toLowerCase().includes(this.search.toLowerCase()));
+        }
+        statusPill(status) {
+            const map = {
+                awaiting: ['warning', 'awaiting signature'],
+                signed: ['success', 'completed'],
+                draft: ['default', 'draft'],
+                declined: ['error', 'declined'],
+            };
+            const [tone, label] = map[status];
+            return pill(label, tone, true);
+        }
+        openDocument(doc) {
+            requestWorkspaceView(this, doc.status === 'signed' ? 'audit' : 'sign');
+        }
+        render() {
+            const filters = [
+                { id: 'all', label: 'All', count: demoDocuments.length },
+                { id: 'awaiting', label: 'Awaiting', count: demoDocuments.filter((doc) => doc.status === 'awaiting').length },
+                { id: 'signed', label: 'Completed', count: demoDocuments.filter((doc) => doc.status === 'signed').length },
+                { id: 'draft', label: 'Drafts', count: demoDocuments.filter((doc) => doc.status === 'draft').length },
+                { id: 'declined', label: 'Declined', count: demoDocuments.filter((doc) => doc.status === 'declined').length },
+            ];
+            return html `
+      ${topBar({
+                breadcrumb: ['signature.digital', 'Lossless GmbH', 'Inbox'],
+                title: 'Inbox',
+                subtitle: pill(`${demoDocuments.filter((doc) => doc.status === 'awaiting').length} need attention`, 'info'),
+                actions: html `${actionButton('Import', 'outline', 'upload')}${actionButton('New document', 'primary', 'plus', () => requestWorkspaceView(this, 'compose'))}`,
+            })}
+      <div class="filterbar">
+        <div class="searchbox">${icon('search', 13)}<input .value=${this.search} @input=${(event) => this.search = event.target.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>
+        <div style="flex: 1;"></div>
+        <div class="segmented">${filters.map((filter) => html `<button class=${this.filter === filter.id ? 'active' : ''} @click=${() => this.filter = filter.id}>${filter.label}<span class="mono" style="color: var(--text-dim);">${filter.count}</span></button>`)}</div>
+      </div>
+      <div class="content-scroll">
+        <div class="card" style="overflow-x: auto;">
+          <div class="doc-table">
+            <div class="doc-head"><span></span><span>Document</span><span>Status</span><span>Recipients</span><span>Deadline</span><span style="text-align: right;">Pages</span><span></span></div>
+            ${this.filteredDocuments.map((doc) => html `
+              <div class="doc-row ${this.density === 'compact' ? 'compact' : ''}" @click=${() => this.openDocument(doc)}>
+                <div class="doc-icon">${icon('file', 14)}</div>
+                <div style="min-width: 0;"><div class="doc-title">${doc.title}</div><div class="doc-meta mono">${doc.id} · ${doc.sender} · ${doc.updated}</div></div>
+                <div>${this.statusPill(doc.status)}</div>
+                <div style="display: flex; align-items: center; gap: 8px;"><div class="recipient-stack">${doc.recipients.slice(0, 4).map((recipient) => html `<span class="recipient-dot ${recipient.signed ? 'signed' : ''}" title=${recipient.name}>${recipient.initials}</span>`)}</div><span style="font-size: 11px; color: var(--text-muted);">${doc.recipients.filter((recipient) => recipient.signed).length}/${doc.recipients.length}</span></div>
+                <div class="mono" style="font-size: 11px; color: ${doc.deadline && doc.status === 'awaiting' ? 'var(--warning)' : 'var(--text-dim)'};">${doc.deadline ? html `${icon('clock', 11)} ${doc.deadline}` : '—'}</div>
+                <div class="mono" style="font-size: 11px; color: var(--text-muted); text-align: right;">${doc.pages}</div>
+                <div>${icon('more', 14)}</div>
+              </div>
+            `)}
+          </div>
+        </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>`)}
+        </div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _search_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SdigWorkspaceInbox = _classThis;
+})();
+export { SdigWorkspaceInbox };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RpZy13b3Jrc3BhY2UtaW5ib3guanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvc2RpZy13b3Jrc3BhY2Uvc2RpZy13b3Jrc3BhY2UtaW5ib3gudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMxSCxPQUFPLEVBQUUsWUFBWSxFQUFFLGFBQWEsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLG9CQUFvQixFQUFFLE1BQU0sRUFBRSxtQkFBbUIsRUFBb0MsTUFBTSw0QkFBNEIsQ0FBQztBQUMxSyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztJQVNuRCxrQkFBa0I7NEJBRDlCLGFBQWEsQ0FBQyxzQkFBc0IsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7O2tDQUFuQixTQUFRLFdBQVc7Ozs7bUNBSWhELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztrQ0FDMUIsS0FBSyxFQUFFO2tDQUNQLEtBQUssRUFBRTtZQUZvQiwwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUEyQjtZQUNyRSx1S0FBaUIsTUFBTSw2QkFBTixNQUFNLHVGQUFpQjtZQUN4Qyx1S0FBaUIsTUFBTSw2QkFBTixNQUFNLHVGQUFjO1lBTmhELDZLQXlHQzs7OztRQXhHUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQSwrQ0FBK0MsQ0FBQyxDQUFDO1FBQzVGLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyw2QkFBNkIsQ0FBQyxDQUFDO1FBRS9CLDJFQUFvQyxhQUFhLEVBQUM7UUFBbEQsSUFBZ0IsT0FBTyw2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

package/dist_ts_web/elements/sdig-workspace/sdig-workspace-placeholder.d.ts

@@ -0,0 +1,14 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sdig-workspace-placeholder': SdigWorkspacePlaceholder;
+    }
+}
+export declare class SdigWorkspacePlaceholder extends DeesElement {
+    static demo: () => TemplateResult;
+    static demoGroups: string[];
+    accessor label: string;
+    accessor subtitle: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sdig-workspace/sdig-workspace-placeholder.js

@@ -0,0 +1,84 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, property, html, customElement } from '@design.estate/dees-element';
+import { icon, pill, topBar, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';
+let SdigWorkspacePlaceholder = (() => {
+    let _classDecorators = [customElement('sdig-workspace-placeholder')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _subtitle_decorators;
+    let _subtitle_initializers = [];
+    let _subtitle_extraInitializers = [];
+    var SdigWorkspacePlaceholder = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property({ type: String })];
+            _subtitle_decorators = [property({ type: String })];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _subtitle_decorators, { kind: "accessor", name: "subtitle", static: false, private: false, access: { has: obj => "subtitle" in obj, get: obj => obj.subtitle, set: (obj, value) => { obj.subtitle = value; } }, metadata: _metadata }, _subtitle_initializers, _subtitle_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SdigWorkspacePlaceholder = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => workspaceDemoFrame(html `<sdig-workspace-placeholder label="Templates" subtitle="Reusable agreement templates"></sdig-workspace-placeholder>`);
+        static demoGroups = ['Signature Digital Workspace'];
+        #label_accessor_storage = __runInitializers(this, _label_initializers, 'Section');
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #subtitle_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _subtitle_initializers, 'Coming soon'));
+        get subtitle() { return this.#subtitle_accessor_storage; }
+        set subtitle(value) { this.#subtitle_accessor_storage = value; }
+        static styles = [workspaceBaseStyles];
+        render() {
+            return html `${topBar({ breadcrumb: ['signature.digital', this.label], title: this.label, subtitle: pill('coming soon') })}<div class="content-scroll" style="display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--text-muted); gap: 8px;">${icon('folder', 32)}<div style="font-size: 13px; color: var(--text-sec);">${this.label}</div><div style="font-size: 11px;">${this.subtitle}</div></div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _subtitle_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SdigWorkspacePlaceholder = _classThis;
+})();
+export { SdigWorkspacePlaceholder };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RpZy13b3Jrc3BhY2UtcGxhY2Vob2xkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvc2RpZy13b3Jrc3BhY2Uvc2RpZy13b3Jrc3BhY2UtcGxhY2Vob2xkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxhQUFhLEVBQXVCLE1BQU0sNkJBQTZCLENBQUM7QUFDOUcsT0FBTyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLG1CQUFtQixFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7SUFTNUYsd0JBQXdCOzRCQURwQyxhQUFhLENBQUMsNEJBQTRCLENBQUM7Ozs7c0JBQ0UsV0FBVzs7Ozs7Ozt3Q0FBbkIsU0FBUSxXQUFXOzs7O2lDQUl0RCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7b0NBQzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQURDLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQXFCO1lBQzFDLDZLQUFnQixRQUFRLDZCQUFSLFFBQVEsMkZBQXlCO1lBTC9FLDZLQVdDOzs7O1FBVlEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUEscUhBQXFILENBQUMsQ0FBQztRQUNsSyxNQUFNLENBQUMsVUFBVSxHQUFHLENBQUMsNkJBQTZCLENBQUMsQ0FBQztRQUUvQix1RUFBZ0MsU0FBUyxFQUFDO1FBQTFDLElBQWdCLEtBQUssMkNBQXFCO1FBQTFDLElBQWdCLEtBQUssaURBQXFCO1FBQzFDLGlJQUFtQyxhQUFhLEdBQUM7UUFBakQsSUFBZ0IsUUFBUSw4Q0FBeUI7UUFBakQsSUFBZ0IsUUFBUSxvREFBeUI7UUFDdEUsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFFdEMsTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBLEdBQUcsTUFBTSxDQUFDLEVBQUUsVUFBVSxFQUFFLENBQUMsbUJBQW1CLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLEVBQUUsQ0FBQyxnS0FBZ0ssSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMseURBQXlELElBQUksQ0FBQyxLQUFLLHVDQUF1QyxJQUFJLENBQUMsUUFBUSxjQUFjLENBQUM7UUFDbmIsQ0FBQzs7Ozs7O1lBVlUsdURBQXdCOzs7OztTQUF4Qix3QkFBd0IifQ==

package/dist_ts_web/elements/sdig-workspace/sdig-workspace-sign.d.ts

@@ -0,0 +1,18 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sdig-workspace-sign': SdigWorkspaceSign;
+    }
+}
+export declare class SdigWorkspaceSign extends DeesElement {
+    static demo: () => TemplateResult;
+    static demoGroups: string[];
+    private accessor activeFieldId;
+    private accessor signedFieldIds;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private get signFields();
+    private fieldIcon;
+    private signField;
+    private renderSignedValue;
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sdig-workspace/sdig-workspace-sign.js

@@ -0,0 +1,152 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, state, html, customElement, css } from '@design.estate/dees-element';
+import { actionButton, demoFields, fakeDocument, icon, pill, workspaceBaseStyles, workspaceDemoFrame } from './sdig-workspace.shared.js';
+let SdigWorkspaceSign = (() => {
+    let _classDecorators = [customElement('sdig-workspace-sign')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _activeFieldId_decorators;
+    let _activeFieldId_initializers = [];
+    let _activeFieldId_extraInitializers = [];
+    let _signedFieldIds_decorators;
+    let _signedFieldIds_initializers = [];
+    let _signedFieldIds_extraInitializers = [];
+    var SdigWorkspaceSign = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _activeFieldId_decorators = [state()];
+            _signedFieldIds_decorators = [state()];
+            __esDecorate(this, null, _activeFieldId_decorators, { kind: "accessor", name: "activeFieldId", static: false, private: false, access: { has: obj => "activeFieldId" in obj, get: obj => obj.activeFieldId, set: (obj, value) => { obj.activeFieldId = value; } }, metadata: _metadata }, _activeFieldId_initializers, _activeFieldId_extraInitializers);
+            __esDecorate(this, null, _signedFieldIds_decorators, { kind: "accessor", name: "signedFieldIds", static: false, private: false, access: { has: obj => "signedFieldIds" in obj, get: obj => obj.signedFieldIds, set: (obj, value) => { obj.signedFieldIds = value; } }, metadata: _metadata }, _signedFieldIds_initializers, _signedFieldIds_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SdigWorkspaceSign = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => workspaceDemoFrame(html `<sdig-workspace-sign></sdig-workspace-sign>`);
+        static demoGroups = ['Signature Digital Workspace'];
+        #activeFieldId_accessor_storage = __runInitializers(this, _activeFieldId_initializers, 'f1');
+        get activeFieldId() { return this.#activeFieldId_accessor_storage; }
+        set activeFieldId(value) { this.#activeFieldId_accessor_storage = value; }
+        #signedFieldIds_accessor_storage = (__runInitializers(this, _activeFieldId_extraInitializers), __runInitializers(this, _signedFieldIds_initializers, []));
+        get signedFieldIds() { return this.#signedFieldIds_accessor_storage; }
+        set signedFieldIds(value) { this.#signedFieldIds_accessor_storage = value; }
+        static styles = [workspaceBaseStyles, css `
+    .recipient-header { height: 56px; flex-shrink: 0; padding: 0 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
+    .logomark { width: 28px; height: 28px; 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-weight: 700; position: relative; }
+    .logomark::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
+    .sign-layout { flex: 1; display: flex; overflow: hidden; background: hsl(0 0% 96%); color: hsl(0 0% 10%); }
+    :host-context(sdig-workspace[theme='dark']) .sign-layout { background: hsl(0 0% 6%); color: hsl(0 0% 95%); }
+    .sign-body { flex: 1; overflow: auto; padding: 32px 32px 80px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
+    .sign-panel { width: 320px; border-left: 1px solid var(--border); background: var(--bg-card); padding: 20px; overflow: auto; flex-shrink: 0; }
+    @media (max-width: 920px) { .recipient-header .actions { display: none; } .sign-layout { flex-direction: column; overflow: auto; } .sign-panel { width: 100%; border-left: 0; border-top: 1px solid var(--border); } .document-page { width: 560px; } }
+  `];
+        get signFields() {
+            return demoFields.slice(0, 3);
+        }
+        fieldIcon(type) {
+            if (type === 'signature')
+                return 'sign';
+            if (type === 'date')
+                return 'calendar';
+            return 'type';
+        }
+        signField(fieldId) {
+            if (!this.signedFieldIds.includes(fieldId)) {
+                this.signedFieldIds = [...this.signedFieldIds, fieldId];
+            }
+            const next = this.signFields.find((field) => !this.signedFieldIds.includes(field.id) && field.id !== fieldId);
+            if (next)
+                this.activeFieldId = next.id;
+        }
+        renderSignedValue(field) {
+            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>`;
+        }
+        render() {
+            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];
+            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;">Master Services Agreement</div><div class="mono" style="font-size: 10px; color: var(--text-muted);">From Lossless GmbH · doc_8mK3pL · 14 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>
+      <div class="progress-track"><div class="progress-fill" style="width: ${progress}%"></div></div>
+      <div class="sign-layout">
+        <div class="sign-body">
+          <div class="document-page" style="width: 620px; min-height: 820px;">
+            ${fakeDocument()}
+            ${this.signFields.map((field) => {
+                const filled = this.signedFieldIds.includes(field.id);
+                const active = this.activeFieldId === 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 14</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="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;
+                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>
+        </div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _signedFieldIds_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SdigWorkspaceSign = _classThis;
+})();
+export { SdigWorkspaceSign };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2RpZy13b3Jrc3BhY2Utc2lnbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy9zZGlnLXdvcmtzcGFjZS9zZGlnLXdvcmtzcGFjZS1zaWduLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNoSCxPQUFPLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxtQkFBbUIsRUFBRSxrQkFBa0IsRUFBd0IsTUFBTSw0QkFBNEIsQ0FBQztJQVNsSixpQkFBaUI7NEJBRDdCLGFBQWEsQ0FBQyxxQkFBcUIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7O2lDQUFuQixTQUFRLFdBQVc7Ozs7eUNBSS9DLEtBQUssRUFBRTswQ0FDUCxLQUFLLEVBQUU7WUFEQyw0TEFBaUIsYUFBYSw2QkFBYixhQUFhLHFHQUFnQjtZQUM5QywrTEFBaUIsY0FBYyw2QkFBZCxjQUFjLHVHQUFnQjtZQUwxRCw2S0FnRkM7Ozs7UUEvRVEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUEsNkNBQTZDLENBQUMsQ0FBQztRQUMxRixNQUFNLENBQUMsVUFBVSxHQUFHLENBQUMsNkJBQTZCLENBQUMsQ0FBQztRQUVsRCx1RkFBeUMsSUFBSSxFQUFDO1FBQTlDLElBQWlCLGFBQWEsbURBQWdCO1FBQTlDLElBQWlCLGFBQWEseURBQWdCO1FBQzlDLHFKQUE0QyxFQUFFLEdBQUM7UUFBL0MsSUFBaUIsY0FBYyxvREFBZ0I7UUFBL0MsSUFBaUIsY0FBYywwREFBZ0I7UUFFakQsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLG1CQUFtQixFQUFF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

package/dist_ts_web/elements/sdig-workspace/sdig-workspace.d.ts

@@ -0,0 +1,31 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import { 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';
+import './sdig-workspace-audit.js';
+import './sdig-workspace-developers.js';
+import './sdig-workspace-placeholder.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sdig-workspace': SdigWorkspace;
+    }
+}
+export declare class SdigWorkspace extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor accent: string;
+    accessor density: TDensity;
+    accessor theme: TWorkspaceTheme;
+    accessor initialView: TWorkspaceView;
+    private accessor view;
+    connectedCallback: () => Promise<void>;
+    disconnectedCallback: () => Promise<void>;
+    static styles: import("@design.estate/dees-element").CSSResult;
+    private handleViewRequest;
+    private setView;
+    private navButton;
+    private renderSidebar;
+    private renderView;
+    render(): TemplateResult;
+}