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

ts_web/elements/sdig-signbox/sdig-signbox.ts

@@ -1,5 +1,4 @@
-import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
-import * as plugins from '../../plugins.js';
+import { DeesElement, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -12,6 +11,7 @@ export class SignBox extends DeesElement {
   public static demo = () => html`
     <sdig-signbox></sdig-signbox>
   `;
+  public static demoGroups = ['Signature Digital Primitives'];
 
   constructor() {
     super();
@@ -80,17 +80,19 @@ export class SignBox extends DeesElement {
         <sdig-signpad></sdig-signpad>
         <div class="actions">
           <div class="button" @click=${async () => {
-            await this.shadowRoot.querySelector('sdig-signpad').clear();
+            await this.shadowRoot?.querySelector('sdig-signpad')?.clear();
           }}>
             Clear
           </div>
           <div class="button" @click=${async () => {
-            await this.shadowRoot.querySelector('sdig-signpad').undo();
+            await this.shadowRoot?.querySelector('sdig-signpad')?.undo();
           }}>
             Undo
           </div>
           <div class="button" @click=${async () => {
-            const signature = await this.shadowRoot.querySelector('sdig-signpad').toData();
+            const signaturePad = this.shadowRoot?.querySelector('sdig-signpad');
+            if (!signaturePad) return;
+            const signature = await signaturePad.toData();
             this.dispatchEvent(new CustomEvent('signature', {
               detail: {
                 signature,
@@ -104,4 +106,4 @@ export class SignBox extends DeesElement {
       </div>
     `;
   }
-}
+}