@design.estate/dees-wcctools 1.2.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {
@@ -17,14 +17,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@api.global/typedserver": "^3.0.79",
-    "@git.zone/tsbuild": "^2.7.1",
-    "@git.zone/tsbundle": "^2.5.1",
-    "@git.zone/tsrun": "^1.6.2",
-    "@git.zone/tstest": "^2.7.0",
-    "@git.zone/tswatch": "^2.2.1",
+    "@api.global/typedserver": "^7.11.1",
+    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tsrun": "^2.0.0",
+    "@git.zone/tstest": "^3.1.3",
+    "@git.zone/tswatch": "^2.3.11",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^22.18.6"
+    "@types/node": "^25.0.0"
   },
   "files": [
     "ts/**/*",

package/readme.md

@@ -1,23 +1,31 @@
 # @design.estate/dees-wcctools
-Web Component Development Tools - A powerful framework for building, testing, and documenting web components
+
+🛠️ **Web Component Development Tools** — A powerful framework for building, testing, documenting, and recording web components
 
 ## Overview
+
 `@design.estate/dees-wcctools` provides a comprehensive development environment for web components, featuring:
-- 🎨 Interactive component catalogue with live preview
-- 🔧 Real-time property editing
-- 🌓 Theme switching (light/dark modes)
-- 📱 Responsive viewport testing
-- 🧪 Advanced demo tools for component testing
-- 🚀 Zero-config setup with TypeScript and Lit support
+
+- 🎨 **Interactive Component Catalogue** — Live preview with sidebar navigation
+- 🔧 **Real-time Property Editing** — Modify component props on the fly with auto-detected editors
+- 🌓 **Theme Switching** — Test light/dark modes instantly
+- 📱 **Responsive Viewport Testing** — Phone, phablet, tablet, and desktop views
+- 🎬 **Screen Recording** — Record component demos with audio support and video trimming
+- 🧪 **Advanced Demo Tools** — Post-render hooks for interactive testing
+- 🚀 **Zero-config Setup** — TypeScript and Lit support out of the box
+
+## Issue Reporting and Security
+
+For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://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/](https://code.foss.global/) account to submit Pull Requests directly.
 
 ## Installation
 
 ```bash
-# Using npm
-npm install @design.estate/dees-wcctools --save-dev
-
 # Using pnpm (recommended)
 pnpm add -D @design.estate/dees-wcctools
+
+# Using npm
+npm install @design.estate/dees-wcctools --save-dev
 ```
 
 ## Quick Start
@@ -35,10 +43,10 @@ export class MyButton extends DeesElement {
   `;
 
   @property({ type: String })
-  public label: string = 'Button';
+  accessor label: string = 'Button';
 
   @property({ type: String })
-  public variant: 'primary' | 'secondary' = 'primary';
+  accessor variant: 'primary' | 'secondary' = 'primary';
 
   public static styles = [
     css`
@@ -85,8 +93,8 @@ import { setupWccTools } from '@design.estate/dees-wcctools';
 import { html } from 'lit';
 
 // Import your components
-import './components/my-button.js';
-import './components/my-card.js';
+import { MyButton } from './components/my-button.js';
+import { MyCard } from './components/my-card.js';
 
 // Define elements for the catalogue
 const elements = {
@@ -132,21 +140,28 @@ setupWccTools(elements, pages);
 ## Features
 
 ### 🎯 Live Property Editing
+
 The properties panel automatically detects and allows editing of:
-- **String** properties with text inputs
-- **Number** properties with number inputs
-- **Boolean** properties with checkboxes
-- **Enum** properties with select dropdowns
-- **Object** and **Array** properties (read-only display)
+
+| Property Type | Editor |
+|--------------|--------|
+| **String** | Text input |
+| **Number** | Number input |
+| **Boolean** | Checkbox |
+| **Enum** | Select dropdown |
+| **Object/Array** | JSON editor modal |
 
 ### 📱 Viewport Testing
+
 Test your components across different screen sizes:
-- **Phone** (320px width)
-- **Phablet** (600px width)
-- **Tablet** (768px width)
-- **Desktop** (full width)
+
+- **Phone** — 320px width
+- **Phablet** — 600px width
+- **Tablet** — 768px width
+- **Desktop** — Full width (native)
 
 ### 🌓 Theme Support
+
 Components automatically adapt to light/dark themes using the `goBright` property:
 
 ```typescript
@@ -159,7 +174,8 @@ public render() {
 }
 ```
 
-Or use CSS custom properties:
+Or use CSS custom properties with the theme manager:
+
 ```typescript
 import { cssManager } from '@design.estate/dees-element';
 
@@ -173,39 +189,44 @@ public static styles = [
 ];
 ```
 
-### 🧪 Advanced Demo Tools
+### 🎬 Screen Recording
+
+Record component demos directly from the catalogue! The built-in recorder supports:
 
-The demo tools provide enhanced testing capabilities:
+- **Viewport Recording** — Record just the component viewport
+- **Full Screen Recording** — Capture the entire screen
+- **Audio Support** — Add microphone commentary with live level monitoring
+- **Video Trimming** — Trim start/end before export with visual timeline
+- **WebM Export** — High-quality video output
+
+Click the red record button in the bottom toolbar to start.
+
+### 🧪 Demo Tools
+
+The demotools module provides enhanced testing capabilities with `dees-demowrapper`:
 
 ```typescript
-import * as demoTools from '@design.estate/dees-wcctools/demotools';
+import '@design.estate/dees-wcctools/demotools';
 
 @customElement('my-component')
 export class MyComponent extends DeesElement {
   public static demo = () => html`
     <dees-demowrapper .runAfterRender=${async (wrapper) => {
-      // Use querySelector to find specific elements
-      const myComponent = wrapper.querySelector('my-component') as MyComponent;
-      console.log('Component found:', myComponent);
-      
-      // Access all children via wrapper.children
-      console.log('Total children:', wrapper.children.length);
-      
-      // Use querySelectorAll for multiple elements
-      const allDivs = wrapper.querySelectorAll('div');
-      console.log('Found divs:', allDivs.length);
-      
+      // Find elements using standard DOM APIs
+      const myComponent = wrapper.querySelector('my-component');
+
       // Simulate user interactions
       myComponent.value = 'Test value';
       await myComponent.updateComplete;
-      
-      // Work with all children
-      Array.from(wrapper.children).forEach((child, index) => {
-        console.log(`Child ${index}:`, child.tagName);
+
+      // Work with multiple elements
+      wrapper.querySelectorAll('.item').forEach((el, i) => {
+        console.log(`Item ${i}:`, el.textContent);
       });
     }}>
       <my-component></my-component>
-      <div>Additional content</div>
+      <div class="item">Item 1</div>
+      <div class="item">Item 2</div>
     </dees-demowrapper>
   `;
 }
@@ -213,20 +234,18 @@ export class MyComponent extends DeesElement {
 
 ### ⏳ Async Demos
 
-If your catalogue needs additional setup before rendering, return a `Promise` from the `demo` function. The dashboard waits for the result before inserting it into the viewport:
+Return a `Promise` from `demo` for async setup. The dashboard waits for resolution:
 
 ```typescript
 public static demo = async () => {
-  await Promise.resolve(); // e.g. fetch data, load fixtures, or await wrappers
-  return html`<my-component .value=${'Loaded asynchronously'}></my-component>`;
+  const data = await fetchSomeData();
+  return html`<my-component .data=${data}></my-component>`;
 };
 ```
 
-The same pattern works for page factories you pass into `setupWccTools`, enabling asynchronous data preparation across the entire demo surface.
+### 🎭 Container Queries
 
-### 🎭 Container Queries Support
-
-Components can respond to their container size:
+Components can respond to their container size using the `wccToolsViewport` container:
 
 ```typescript
 public static styles = [
@@ -236,7 +255,7 @@ public static styles = [
         flex-direction: row;
       }
     }
-    
+
     @container wccToolsViewport (max-width: 767px) {
       :host {
         flex-direction: column;
@@ -249,61 +268,94 @@ public static styles = [
 ## Component Guidelines
 
 ### Required for Catalogue Display
+
 1. Components must expose a static `demo` property returning a Lit template
-2. Use `@property()` decorators for properties you want to be editable
+2. Use `@property()` decorators with the `accessor` keyword for editable properties
 3. Export component classes for proper detection
 
 ### Best Practices
+
 ```typescript
 @customElement('best-practice-component')
 export class BestPracticeComponent extends DeesElement {
   // ✅ Static demo property
   public static demo = () => html`
-    <best-practice-component 
+    <best-practice-component
       .complexProp=${{ key: 'value' }}
       simpleAttribute="test"
     ></best-practice-component>
   `;
 
-  // ✅ Typed properties with defaults
+  // ✅ Typed properties with defaults (TC39 decorators)
   @property({ type: String })
-  public title: string = 'Default Title';
+  accessor title: string = 'Default Title';
 
   // ✅ Complex property without attribute
   @property({ attribute: false })
-  public complexProp: { key: string } = { key: 'default' };
+  accessor complexProp: { key: string } = { key: 'default' };
 
   // ✅ Enum with proper typing
   @property({ type: String })
-  public variant: 'small' | 'medium' | 'large' = 'medium';
+  accessor variant: 'small' | 'medium' | 'large' = 'medium';
 }
 ```
 
 ## URL Routing
 
 The catalogue uses URL routing for deep linking:
+
 ```
 /wcctools-route/:type/:name/:viewport/:theme
 
-Example:
+Examples:
 /wcctools-route/element/my-button/desktop/dark
 /wcctools-route/page/home/tablet/bright
 ```
 
-## Development Workflow
+## API Reference
 
-### Build and Watch
-```json
-{
-  "scripts": {
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element",
-    "watch": "tswatch element",
-    "serve": "http-server ./dist"
-  }
-}
+### `setupWccTools(elements, pages?)`
+
+Initialize the WCC Tools dashboard.
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `elements` | `Record<string, typeof LitElement>` | Map of element names to classes |
+| `pages` | `Record<string, TTemplateFactory>` | Optional map of page names to template functions |
+
+### `DeesDemoWrapper`
+
+Component for wrapping demos with post-render logic.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `runAfterRender` | `(wrapper) => void \| Promise<void>` | Callback after wrapped elements render |
+
+The wrapper provides full DOM API access:
+- `wrapper.querySelector()` — Find single element
+- `wrapper.querySelectorAll()` — Find multiple elements
+- `wrapper.children` — Access child elements directly
+
+### Recording Components (Advanced)
+
+For custom recording integrations:
+
+```typescript
+import { RecorderService } from '@design.estate/dees-wcctools';
+
+const recorder = new RecorderService({
+  onDurationUpdate: (duration) => console.log(`${duration}s`),
+  onRecordingComplete: (blob) => console.log('Recording done!', blob),
+  onAudioLevelUpdate: (level) => console.log(`Audio: ${level}%`),
+});
+
+await recorder.startRecording({ mode: 'viewport' });
+// ... later
+recorder.stopRecording();
 ```
 
-### Project Structure
+## Project Structure
+
 ```
 my-components/
 ├── src/
@@ -316,90 +368,30 @@ my-components/
 └── package.json
 ```
 
-## Advanced Features
-
-### Custom Property Handlers
-For complex property types, implement custom logic in your demo:
-
-```typescript
-public static demo = () => html`
-  <dees-demowrapper .runAfterRender=${(wrapper) => {
-    // Use querySelector to target specific elements
-    const component = wrapper.querySelector('my-component');
-    if (component) {
-      component.addEventListener('property-change', (e) => {
-        console.log('Property changed:', e.detail);
-      });
-    }
-    
-    // Or handle all elements of a type
-    wrapper.querySelectorAll('my-component').forEach(el => {
-      el.addEventListener('click', () => console.log('Clicked!'));
-    });
-  }}>
-    <my-component></my-component>
-  </dees-demowrapper>
-`;
-```
-
-### Responsive Testing Helpers
-```typescript
-import * as domtools from '@design.estate/dees-domtools';
-
-public static styles = [
-  // Media query helpers
-  domtools.breakpoints.cssForPhone(css`
-    :host { font-size: 14px; }
-  `),
-  
-  domtools.breakpoints.cssForTablet(css`
-    :host { font-size: 16px; }
-  `),
-  
-  domtools.breakpoints.cssForDesktop(css`
-    :host { font-size: 18px; }
-  `)
-];
-```
-
-## API Reference
-
-### setupWccTools(elements, pages?)
-Initialize the WCC Tools dashboard.
-
-- `elements`: Object mapping element names to element classes
-- `pages`: Optional object mapping page names to template functions
-
-### DeesDemoWrapper
-Component for wrapping demos with post-render logic.
-
-- `runAfterRender`: Function called after the wrapped elements render
-- Receives the wrapper element itself, providing full DOM API access
-- Use `wrapper.querySelector()` and `wrapper.querySelectorAll()` for element selection
-- Access children via `wrapper.children` property
-- Supports async operations
-
 ## Browser Support
-- Chrome/Edge (latest)
-- Firefox (latest)
-- Safari (latest)
-- Mobile browsers with Web Components support
+
+- ✅ Chrome/Edge (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest)
+- ✅ Mobile browsers with Web Components support
 
 ## License and Legal Information
 
-This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. 
+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.
 
 ### 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 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, and any usage must be approved in writing by Task Venture Capital GmbH.
+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.
 
 ### Company Information
 
-Task Venture Capital GmbH  
-Registered at District court Bremen HRB 35230 HB, Germany
+Task Venture Capital GmbH
+Registered at District Court Bremen HRB 35230 HB, Germany
 
-For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
+For any legal inquiries or further information, please contact us via email at hello@task.vc.
 
 By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '1.2.1',
+  version: '2.0.0',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }