feat: add async demo support and enhance template resolution

- Introduced async demo functionality in the README, allowing for asynchronous data preparation before rendering components.
- Updated WccDashboard, WccProperties, and WccSidebar to support Promise-based template factories.
- Implemented resolveTemplateFactory to handle both synchronous and asynchronous template results.
- Added tests for resolveTemplateFactory to ensure correct behavior for both sync and async templates.
- Updated pnpm workspace configuration.

ts_web/elements/wcc-dashboard.ts

@@ -1,4 +1,6 @@
 import { DeesElement, property, html, customElement, type TemplateResult, queryAsync, render, domtools } from '@design.estate/dees-element';
+import { resolveTemplateFactory } from './wcctools.helpers.js';
+import type { TTemplateFactory } from './wcctools.helpers.js';
 
 import * as plugins from '../wcctools.plugins.js';
 
@@ -21,7 +23,7 @@ export class WccDashboard extends DeesElement {
   public selectedItemName: string;
 
   @property()
-  public selectedItem: (() => TemplateResult) | DeesElement;
+  public selectedItem: TTemplateFactory | DeesElement;
 
   @property()
   public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@@ -33,7 +35,7 @@ export class WccDashboard extends DeesElement {
   public isFullscreen: boolean = false;
 
   @property()
-  public pages: { [key: string]: () => TemplateResult } = {};
+  public pages: Record<string, TTemplateFactory> = {};
 
   @property()
   public elements: { [key: string]: DeesElement } = {};
@@ -50,7 +52,7 @@ export class WccDashboard extends DeesElement {
 
   constructor(
     elementsArg?: { [key: string]: DeesElement },
-    pagesArg?: { [key: string]: () => TemplateResult }
+    pagesArg?: Record<string, TTemplateFactory>
   ) {
     super();
     if (elementsArg) {
@@ -201,7 +203,9 @@ export class WccDashboard extends DeesElement {
       if (typeof this.selectedItem === 'function') {
         console.log('slotting page.');
         const viewport = await wccFrame.getViewportElement();
-        render(this.selectedItem(), viewport);
+        const pageFactory = this.selectedItem as TTemplateFactory;
+        const pageTemplate = await resolveTemplateFactory(pageFactory);
+        render(pageTemplate, viewport);
         console.log('rendered page.');
       } else {
         console.error('The selected item looks strange:');
@@ -222,7 +226,8 @@ export class WccDashboard extends DeesElement {
       }
       this.setWarning(null);
       const viewport = await wccFrame.getViewportElement();
-      render(anonItem.demo(), viewport);;
+      const demoTemplate = await resolveTemplateFactory(() => anonItem.demo());
+      render(demoTemplate, viewport);
     }
   }