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

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

Install

pnpm add @signature.digital/catalog

Quick Start

import '@signature.digital/catalog';

Render the product workspace:

<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark"></sdig-workspace>

Render a standalone signature box:

<sdig-signbox></sdig-signbox>

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.

<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

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:

<sdig-signbox></sdig-signbox>

const signbox = document.querySelector('sdig-signbox');

signbox?.addEventListener('signature', (event) => {
  const { signature } = (event as CustomEvent<{ signature: unknown[] }>).detail;
  console.log(signature);
});

The signature event detail contains the signature_pad stroke data returned by sdig-signpad.toData().

Signature Pad

Use sdig-signpad directly when you need lower-level control over the canvas:

<sdig-signpad></sdig-signpad>

const signpad = document.querySelector('sdig-signpad');

const strokes = await signpad?.toData();
const svg = await signpad?.toSVG();

await signpad?.undo();
await signpad?.clear();

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

Demo Data Boundary

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.

Development

pnpm install
pnpm run build
pnpm test
pnpm run watch

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 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.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

readme.md

@signature.digital/catalog