signature.digital/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspace): introduce a responsive signature workspace demo and remove legacy contract editor components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-05-02 18:37:48 +00:00
parent 90836f1c72
commit 57cbb739d2
48 changed files with 4387 additions and 13348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
readme.md
+107 -111
View File
@@ -1,6 +1,8 @@
# @signature.digital/catalog
A comprehensive catalog of customizable web components designed for building and managing e-signature applications. Built with modern web technologies using LitElement and TypeScript.
Reusable web components for signature.digital product surfaces. The package ships signature capture primitives, a complete signature box, and a responsive workspace shell built with Lit and `@design.estate/dees-element`.
Use it when you need browser-native custom elements for signing flows without pulling product-specific authentication, persistence, routing, or API behavior into the component layer.
## Issue Reporting and Security
@@ -9,154 +11,148 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
## Install
```shell
npm install @signature.digital/catalog
# or
pnpm install @signature.digital/catalog
pnpm add @signature.digital/catalog
```
## 🎯 Overview
## Quick Start
This package provides three main components for e-signature workflows:
| Component | Tag | Description |
|-----------|-----|-------------|
| **SignPad** | `<sdig-signpad>` | Canvas-based signature capture pad |
| **SignBox** | `<sdig-signbox>` | Complete signing interface with controls |
| **ContractEditor** | `<sdig-contracteditor>` | Contract document management component |
## 📦 Usage
### Basic Import
Register all elements once in your browser bundle:
```typescript
import '@signature.digital/catalog';
```
This registers all custom elements and makes them available for use in your HTML.
### SignPad Component
The `<sdig-signpad>` is a canvas-based signature capture component that allows users to draw their signatures directly in the browser.
Render the product workspace:
```html
<sdig-signpad></sdig-signpad>
<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark"></sdig-workspace>
```
**API Methods:**
```typescript
const signpad = document.querySelector('sdig-signpad');
// Get signature data as point arrays
const data = await signpad.toData();
// Load signature from data
await signpad.fromData(data);
// Export signature as SVG string
const svg = await signpad.toSVG();
// Undo last stroke
await signpad.undo();
// Clear the signature pad
await signpad.clear();
```
### SignBox Component
The `<sdig-signbox>` wraps `SignPad` with a complete UI including Clear, Undo, and Submit buttons.
Render a standalone signature box:
```html
<sdig-signbox></sdig-signbox>
```
**Events:**
## Components
| Component | Tag | Purpose |
|-----------|-----|---------|
| `SdigWorkspace` | `<sdig-workspace>` | Product workspace shell with inbox, compose, signing, audit, developer, template, team, and settings views |
| `SignBox` | `<sdig-signbox>` | Complete signature capture UI with clear, undo, and submit actions |
| `SignPad` | `<sdig-signpad>` | Canvas-based signature capture primitive backed by `signature_pad` |
## Workspace Shell
`sdig-workspace` is the full product surface. It is responsive, supports dark/light themes, compact/comfortable density, an accent color, and a configurable initial view.
```html
<sdig-workspace
accent="#7c3aed"
density="compact"
theme="light"
initialView="compose"
></sdig-workspace>
```
### Workspace Properties
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `accent` | `string` | `#3b82f6` | Accent color used for active navigation and highlights |
| `density` | `'compact' \| 'comfortable'` | `comfortable` | Controls spacing density |
| `theme` | `'dark' \| 'light'` | `dark` | Reflected to the host and used for design tokens |
| `initialView` | `TWorkspaceView` | `inbox` | First view displayed after connection |
### Workspace Views
| View | Notes |
|------|-------|
| `inbox` | Demo document inbox with status, recipients, sender, page count, and deadlines |
| `compose` | Document preparation surface with recipients and draggable-style field placements |
| `sign` | Signing flow surface for reviewing and completing assigned fields |
| `audit` | Audit trail surface for signature and document events |
| `developers` | Developer-facing integration and API concept surface |
| `templates` | Placeholder for reusable agreement templates |
| `team` | Placeholder for workspace members and roles |
| `settings` | Placeholder for workspace, billing, and security settings |
### Workspace Events
```typescript
const workspace = document.querySelector('sdig-workspace');
workspace?.addEventListener('view-change', (event) => {
const { view } = (event as CustomEvent<{ view: string }>).detail;
console.log(view);
});
```
Child views can request navigation by dispatching `workspace-view-request` with `{ view }` in `detail`. The event bubbles and crosses the shadow boundary.
## Signature Box
Use `sdig-signbox` when you want the default capture UI with a heading, a signature pad, and built-in action controls:
```html
<sdig-signbox></sdig-signbox>
```
```typescript
const signbox = document.querySelector('sdig-signbox');
signbox.addEventListener('signature', (event) => {
const signatureData = event.detail.signature;
console.log('Signature captured:', signatureData);
signbox?.addEventListener('signature', (event) => {
const { signature } = (event as CustomEvent<{ signature: unknown[] }>).detail;
console.log(signature);
});
```
### ContractEditor Component
The `signature` event detail contains the `signature_pad` stroke data returned by `sdig-signpad.toData()`.
The `<sdig-contracteditor>` provides contract viewing and editing capabilities using the `IPortableContract` interface from `@signature.digital/tools`.
## Signature Pad
Use `sdig-signpad` directly when you need lower-level control over the canvas:
```html
<sdig-signpad></sdig-signpad>
```
```typescript
import '@signature.digital/catalog';
import { IPortableContract } from '@signature.digital/tools/interfaces';
import { demoContract } from '@signature.digital/tools/demodata';
const signpad = document.querySelector('sdig-signpad');
const editor = document.querySelector('sdig-contracteditor');
editor.contract = demoContract;
const strokes = await signpad?.toData();
const svg = await signpad?.toSVG();
await signpad?.undo();
await signpad?.clear();
```
## 🔧 Integration Example
| Method | Description |
|--------|-------------|
| `toData()` | Returns `signature_pad` stroke data |
| `fromData(data)` | Restores `signature_pad` stroke data |
| `toSVG()` | Returns an SVG representation without a background color |
| `undo()` | Removes the latest stroke |
| `clear()` | Clears the canvas |
Here's a complete example showing all components working together:
## Demo Data Boundary
```typescript
import '@signature.digital/catalog';
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
The workspace currently renders local demo UI data from `sdig-workspace.shared.ts`. Real accounts, server persistence, document import/export, notification delivery, authentication, and legal signing workflow state belong in `@signature.digital/app` or backend services, not in this component catalog.
@customElement('my-signature-app')
class MySignatureApp extends LitElement {
static styles = css`
:host {
display: block;
max-width: 800px;
margin: 0 auto;
}
`;
## Development
render() {
return html`
<h2>Please sign below</h2>
<sdig-signbox @signature=${this.handleSignature}></sdig-signbox>
`;
}
private handleSignature(e: CustomEvent) {
console.log('Signature submitted:', e.detail.signature);
// Process or store the signature
}
}
```shell
pnpm install
pnpm run build
pnpm test
pnpm run watch
```
## 🎨 Theming
Components support automatic light/dark theme detection and can be customized using CSS custom properties:
```css
sdig-signpad, sdig-signbox {
--main-background-color: #ffffff;
--line-color: #000000;
--button-color: #007bff;
}
```
The components use `cssManager.bdTheme()` for automatic theme switching based on system preferences.
## 📋 Requirements
- Modern browser with Custom Elements V1 support
- ECMAScript Modules (ESM) compatible environment
- TypeScript 5.0+ (for development)
## 🔗 Dependencies
- `@design.estate/dees-element` - LitElement-based component framework
- `@signature.digital/tools` - Contract interfaces and demo data
- `signature_pad` - Canvas signature capture library
The build compiles `ts_web/` into `dist_ts_web/` and bundles the component catalog demo from `html/index.ts` into `dist_bundle/`. Watch mode serves `dist_watch/` using the `.smartconfig.json` `@git.zone/tswatch` configuration.
## License and Legal Information
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](./license) file.
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
@@ -168,7 +164,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
### Company Information
Task Venture Capital GmbH
Task Venture Capital GmbH
Registered at District Court Bremen HRB 35230 HB, Germany
For any legal inquiries or further information, please contact us via email at hello@task.vc.