@design.estate/wcctools 5.1.0

package/dist_ts_web/wcctools.interfaces.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Configuration for a section in the WCC Tools sidebar
+ */
+export interface IWccSection {
+    /** Display name for the section header */
+    name: string;
+    /** How items in this section are rendered - 'elements' show demos, 'pages' render directly */
+    type: 'elements' | 'pages';
+    /** The items in this section - either element classes or page factory functions */
+    items: Record<string, any>;
+    /** Optional filter function to include/exclude items */
+    filter?: (name: string, item: any) => boolean;
+    /** Optional sort function for ordering items */
+    sort?: (a: [string, any], b: [string, any]) => number;
+    /** Optional Material icon name for the section header */
+    icon?: string;
+    /** Whether this section should start collapsed (default: false) */
+    collapsed?: boolean;
+}
+/**
+ * Configuration object for setupWccTools
+ */
+export interface IWccConfig {
+    sections: IWccSection[];
+}
+/**
+ * Type for element selection types - now section-based
+ */
+export type TElementType = 'element' | 'page';

package/dist_ts_web/wcctools.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjdG9vbHMuaW50ZXJmYWNlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzX3dlYi93Y2N0b29scy5pbnRlcmZhY2VzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

package/dist_ts_web/wcctools.plugins.d.ts

@@ -0,0 +1,2 @@
+import * as deesDomtools from '@design.estate/dees-domtools';
+export { deesDomtools };

package/dist_ts_web/wcctools.plugins.js

@@ -0,0 +1,3 @@
+import * as deesDomtools from '@design.estate/dees-domtools';
+export { deesDomtools };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjdG9vbHMucGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzX3dlYi93Y2N0b29scy5wbHVnaW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxZQUFZLE1BQU0sOEJBQThCLENBQUM7QUFFN0QsT0FBTyxFQUNMLFlBQVksRUFDYixDQUFDIn0=

package/license.md

@@ -0,0 +1,19 @@
+Copyright (c) 2020 Task Venture Capital GmbH (hello@task.vc)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@design.estate/wcctools",
+  "version": "5.1.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": {
+    ".": "./dist_ts_web/index.js"
+  },
+  "type": "module",
+  "author": "Lossless GmbH",
+  "license": "MIT",
+  "dependencies": {
+    "@design.estate/dees-domtools": "^5.0.0",
+    "@design.estate/dees-element": "^4.0.0",
+    "lit": "^3.3.2",
+    "mediabunny": "^1.40.1"
+  },
+  "devDependencies": {
+    "@api.global/typedserver": "^8.4.7",
+    "@git.zone/tsbuild": "^5.1.2",
+    "@git.zone/tsbundle": "^3.1.3",
+    "@git.zone/tsdoc": "^3.0.2",
+    "@git.zone/tsrun": "^3.0.2",
+    "@git.zone/tstest": "^7.1.0",
+    "@git.zone/tswatch": "^6.0.1",
+    "@push.rocks/projectinfo": "^5.1.0",
+    "@types/node": "^26.6.3"
+  },
+  "files": [
+    "ts/**/*",
+    "ts_web/**/*",
+    "dist/**/*",
+    "dist_*/**/*",
+    "dist_ts/**/*",
+    "dist_ts_web/**/*",
+    "assets/**/*",
+    "cli.js",
+    ".smartconfig.json",
+    "readme.md",
+    "changelog.md",
+    "license.md"
+  ],
+  "browserslist": [
+    "last 1 Chrome versions"
+  ],
+  "keywords": [
+    "web components",
+    "element catalogues",
+    "custom elements",
+    "documentation",
+    "typescript",
+    "lit",
+    "component development",
+    "design system",
+    "element testing",
+    "page development"
+  ],
+  "scripts": {
+    "test": "pnpm run build && tstest \"test/test.*.*.ts\" --verbose --logfile",
+    "build": "(tsbuild tsfolders --allowimplicitany && tsbundle)",
+    "watch": "tswatch",
+    "buildDocs": "tsdoc"
+  }
+}

package/readme.md

@@ -0,0 +1,568 @@
+# @design.estate/wcctools
+
+🛠️ **Web Component Development Tools** — A powerful framework for building, testing, documenting, and recording web components
+
+## Overview
+
+`@design.estate/wcctools` provides a comprehensive development environment for web components, featuring:
+
+- 🎨 **Interactive Component Catalogue** — Live preview with customizable sidebar sections
+- 🔧 **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, trimming, and MP4/WebM export
+- 🧪 **Advanced Demo Tools** — Post-render hooks for interactive testing
+- 📂 **Section-based Organization** — Group components into custom sections with filtering and sorting
+- 🚀 **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 pnpm (recommended)
+pnpm add -D @design.estate/wcctools
+
+# Using npm
+npm install @design.estate/wcctools --save-dev
+```
+
+### Migrating from `@design.estate/dees-wcctools`
+
+`@design.estate/dees-wcctools` is now published as `@design.estate/wcctools`. Versions continue from 5.0.0 and the API is the same: swap the dependency and the import specifier.
+
+```bash
+pnpm remove @design.estate/dees-wcctools
+pnpm add -D @design.estate/wcctools
+```
+
+```typescript
+// before: import { setupWccTools } from '@design.estate/dees-wcctools';
+import { setupWccTools } from '@design.estate/wcctools';
+```
+
+A catalogue still on a 4.x or older release also follows the 5.0.0 changes: [`setupWccTools()` takes only the config object](#migration-from-setupwcctoolselements-pages) and [`DeesDemoWrapper` moved to `@design.estate/dees-element/demotools`](#-demo-tools).
+
+## Quick Start
+
+### 1. Create Your Component
+
+```typescript
+import { DeesElement, customElement, html, css, property } from '@design.estate/dees-element';
+
+@customElement('my-button')
+export class MyButton extends DeesElement {
+  // Define a demo for the catalogue
+  public static demo = () => html`
+    <my-button .label=${'Click me!'} .variant=${'primary'}></my-button>
+  `;
+
+  @property({ type: String })
+  accessor label: string = 'Button';
+
+  @property({ type: String })
+  accessor variant: 'primary' | 'secondary' = 'primary';
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      button {
+        padding: 8px 16px;
+        border-radius: 4px;
+        border: none;
+        cursor: pointer;
+      }
+      button.primary {
+        background: #3b82f6;
+        color: white;
+      }
+      button.secondary {
+        background: #6b7280;
+        color: white;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <button class="${this.variant}">${this.label}</button>
+    `;
+  }
+}
+```
+
+### 2. Set Up Your Catalogue
+
+```typescript
+// catalogue.ts
+import { setupWccTools } from '@design.estate/wcctools';
+import { html } from 'lit';
+
+// Import your components
+import * as elements from './components/index.js';
+import * as views from './views/index.js';
+import * as pages from './pages/index.js';
+
+// Initialize with sections-based configuration
+setupWccTools({
+  sections: [
+    {
+      name: 'Pages',
+      type: 'pages',
+      items: pages,
+    },
+    {
+      name: 'Views',
+      type: 'elements',
+      items: views,
+      icon: 'web',
+    },
+    {
+      name: 'Elements',
+      type: 'elements',
+      items: elements,
+      sort: ([a], [b]) => a.localeCompare(b),
+    },
+  ],
+});
+```
+
+### 3. Create an HTML Entry Point
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Component Catalogue</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body style="margin: 0; padding: 0;">
+  <script type="module" src="./catalogue.js"></script>
+</body>
+</html>
+```
+
+## 📂 Sections Configuration
+
+The sections-based API gives you full control over how components are organized in the sidebar.
+
+### Section Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `name` | `string` | Display name for the section header |
+| `type` | `'elements' \| 'pages'` | How items render (`elements` show demos, `pages` render directly) |
+| `items` | `Record<string, any>` | Element classes or page factories — a whole module namespace (`import * as elements`) is fine, see [What the sidebar lists](#what-the-sidebar-lists) |
+| `filter` | `(name, item) => boolean` | Optional filter function to include/exclude items |
+| `sort` | `([a, itemA], [b, itemB]) => number` | Optional sort function for ordering items |
+| `icon` | `string` | Optional Material Symbols icon name |
+| `collapsed` | `boolean` | Start section collapsed (default: `false`) |
+
+### Advanced Example
+
+```typescript
+import { setupWccTools } from '@design.estate/wcctools';
+import * as allElements from './elements/index.js';
+import * as pages from './pages/index.js';
+
+setupWccTools({
+  sections: [
+    {
+      name: 'Pages',
+      type: 'pages',
+      items: pages,
+    },
+    {
+      name: 'Form Controls',
+      type: 'elements',
+      items: allElements,
+      icon: 'edit_note',
+      filter: (name) => name.startsWith('form-') || name.includes('input'),
+      sort: ([a], [b]) => a.localeCompare(b),
+    },
+    {
+      name: 'Layout',
+      type: 'elements',
+      items: allElements,
+      icon: 'dashboard',
+      filter: (name) => name.startsWith('layout-') || name.startsWith('grid-'),
+    },
+    {
+      name: 'Legacy',
+      type: 'elements',
+      items: allElements,
+      filter: (name) => name.startsWith('legacy-'),
+      collapsed: true,  // Start collapsed
+    },
+  ],
+});
+```
+
+### What the sidebar lists
+
+Catalogue barrels usually export more than components: helpers, constants, styles, abstract base classes. wcctools classifies every entry of an `elements` section itself, before your `filter` and `sort` run, so no curated list is needed:
+
+| Entry | Sidebar |
+|-------|---------|
+| A class extending `HTMLElement` with a static `demo` (a template factory, or a non-empty array of them) | Listed and navigable |
+| A registered custom element (`customElements.getName(ctor)` is set) without a usable `demo` | Listed under **Without demo** |
+| Anything else — functions, objects, strings, numbers, unregistered base classes | Not listed |
+
+- **Without demo** is a collapsed, muted group at the bottom of each `elements` section. Its entries are not clickable (`aria-disabled`, no route); they keep demo coverage visible. A search opens the group while it has matches, and matches names, tag names and demo groups like any other entry.
+- A `pages` section lists only template factories (functions).
+- A route or pin that points at an entry that is not listed clears the preview and shows an explanation in the frame ("… has no demo", "… cannot be previewed", "… was not found") instead of a blank or stale preview.
+
+### Migration from `setupWccTools(elements, pages)`
+
+The two-argument form is removed in 5.0.0. Pass the same maps as sections; a whole module namespace still works as `items`:
+
+```typescript
+setupWccTools({
+  sections: [
+    { name: 'Pages', type: 'pages', items: pages },
+    { name: 'Elements', type: 'elements', items: elements },
+  ],
+});
+```
+
+## Features
+
+### 🎯 Live Property Editing
+
+The properties panel finds the nearest matching demo instance through light DOM
+and open shadow roots, without imposing a nesting-depth limit. Composed examples
+can place their controls inside theme providers, panels, and layout wrappers.
+
+The properties panel automatically detects and allows editing of:
+
+| Property Type | Editor |
+|--------------|--------|
+| **String** | Text input |
+| **Number** | Number input |
+| **Boolean** | Checkbox |
+| **Enum** | Select dropdown |
+| **Object/Array** | JSON editor modal |
+
+WCC only creates editors for public reactive properties with supported runtime metadata. Bare `@property()` declarations use Lit's default string metadata; internal `@state()` fields and properties with unsupported or unavailable metadata are skipped because TypeScript types are not available at runtime. Use `@property({ type: Object, attribute: false })` or `@property({ type: Array, attribute: false })` when a complex property should be editable.
+
+### 📱 Viewport Testing
+
+Test your components across different screen sizes:
+
+- **Phone** — 400px width
+- **Phablet** — 600px width
+- **Tablet** — 1024px width
+- **Desktop** — Available preview width
+
+On browser viewports up to 600px wide, the catalogue sidebar moves above the preview and the property controls wrap into a compact bottom toolbar. Selecting phone, phablet, or tablet still gives the preview container its exact target width; wider targets scroll inside the frame instead of widening the document.
+
+### 🌓 Theme Support
+
+Components automatically adapt to light/dark themes. Use CSS custom properties with the theme manager:
+
+```typescript
+import { cssManager } from '@design.estate/dees-element';
+
+public static styles = [
+  css`
+    :host {
+      color: ${cssManager.bdTheme('#1a1a1a', '#e5e5e5')};
+      background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+    }
+  `
+];
+```
+
+### 🎬 Screen Recording
+
+Record component demos directly from the catalogue with full export control:
+
+- **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 a visual timeline
+- **60fps Capture** — Smooth, high-bitrate recording at up to 60 frames per second
+- **MP4 Export** — Universal H.264/AAC format via [mediabunny](https://mediabunny.dev) WebCodecs conversion (plays everywhere: WhatsApp, iMessage, Slack, etc.)
+- **WebM Export** — Native VP9 output for maximum quality
+
+Click the red record button in the bottom toolbar, choose your format (MP4 or WebM), and start recording.
+
+### 🧪 Demo Tools
+
+`DeesDemoWrapper` lives in `@design.estate/dees-element/demotools`; import it from there. The `@design.estate/dees-wcctools/demotools` re-export is removed in 5.0.0:
+
+```typescript
+import '@design.estate/dees-element/demotools';
+
+@customElement('my-component')
+export class MyComponent extends DeesElement {
+  public static demo = () => html`
+    <dees-demowrapper .runAfterRender=${async (wrapper) => {
+      // Find elements using standard DOM APIs
+      const myComponent = wrapper.querySelector('my-component');
+
+      // Simulate user interactions
+      myComponent.value = 'Test value';
+      await myComponent.updateComplete;
+
+      // Work with multiple elements
+      wrapper.querySelectorAll('.item').forEach((el, i) => {
+        console.log(`Item ${i}:`, el.textContent);
+      });
+    }}>
+      <my-component></my-component>
+      <div class="item">Item 1</div>
+      <div class="item">Item 2</div>
+    </dees-demowrapper>
+  `;
+}
+```
+
+### 🎭 Multiple Demos
+
+Components can expose multiple demo variations:
+
+```typescript
+@customElement('my-button')
+export class MyButton extends DeesElement {
+  public static demo = [
+    () => html`<my-button variant="primary">Primary</my-button>`,
+    () => html`<my-button variant="secondary">Secondary</my-button>`,
+    () => html`<my-button variant="danger">Danger</my-button>`,
+  ];
+}
+```
+
+Each demo appears as a numbered item in an expandable folder in the sidebar.
+
+### 🗂️ Demo Groups
+
+Organize elements into groups within a section for better discoverability:
+
+```typescript
+@customElement('my-input')
+export class MyInput extends DeesElement {
+  // Single group
+  public static demoGroups = 'Form Controls';
+
+  // Or multiple groups — element appears in each
+  public static demoGroups = ['Form Controls', 'Inputs'];
+
+  public static demo = () => html`<my-input></my-input>`;
+}
+```
+
+Groups appear as collapsible headers in the sidebar, sorted alphabetically. Searching matches group names too — searching "Form Controls" shows all elements in that group.
+
+### ⏳ Async Demos
+
+Return a `Promise` from `demo` for async setup:
+
+```typescript
+public static demo = async () => {
+  const data = await fetchSomeData();
+  return html`<my-component .data=${data}></my-component>`;
+};
+```
+
+### 🎯 Container Queries
+
+Components can respond to their container size using the `wccToolsViewport` container:
+
+```typescript
+public static styles = [
+  css`
+    @container wccToolsViewport (min-width: 768px) {
+      :host {
+        flex-direction: row;
+      }
+    }
+
+    @container wccToolsViewport (max-width: 767px) {
+      :host {
+        flex-direction: column;
+      }
+    }
+  `
+];
+```
+
+## Component Guidelines
+
+### Required for Catalogue Display
+
+1. Components must expose a static `demo` property returning a Lit template (or a non-empty array of template factories); registered elements without one appear under **Without demo**
+2. Use `@property()` or `@property({ type: ... })` 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 (single or array)
+  public static demo = () => html`
+    <best-practice-component
+      .complexProp=${{ key: 'value' }}
+      simpleAttribute="test"
+    ></best-practice-component>
+  `;
+
+  // ✅ Typed properties with defaults (TC39 decorators)
+  @property({ type: String })
+  accessor title: string = 'Default Title';
+
+  // ✅ Complex property without attribute
+  @property({ type: Object, attribute: false })
+  accessor complexProp: { key: string } = { key: 'default' };
+
+  // ✅ String editor with a compile-time union
+  @property({ type: String })
+  accessor variant: 'small' | 'medium' | 'large' = 'medium';
+}
+```
+
+## Keyboard Use
+
+The sidebar is an ARIA tree with a single tab stop (the selected entry, or the last focused one):
+
+| Key | Action |
+|-----|--------|
+| `Tab` / `Shift+Tab` | Move between the search field, the tree, the resize handle and the toolbar |
+| `↓` in the search field | Enter the tree |
+| `Esc` in the search field | Clear the search |
+| `↑` / `↓` | Previous / next visible entry |
+| `Home` / `End` | First / last visible entry |
+| `→` | Expand a section, demo folder or **Without demo**; on an expanded one, move to its first child |
+| `←` | Collapse; on a collapsed or leaf entry, move to its parent |
+| `Enter` / `Space` | Open the entry (or toggle a header) |
+| `ContextMenu` / `Shift+F10` | Open the entry's context menu (pin, show in group) at the entry; `↑` / `↓` / `Home` / `End` move, `Enter` / `Space` act, `Esc` / `Tab` close — focus returns to the entry |
+
+The sidebar resize handle is a focusable separator: `←` / `→` resize by 10 px (`Shift` for 50 px), `Home` / `End` jump to the minimum / maximum width. Theme and viewport controls are toggle buttons (`aria-pressed`), and `Esc` leaves the native viewport.
+
+Rendered demos keep their state while you search, pin, resize the sidebar, or switch theme or viewport; only selecting another entry or demo renders a new one.
+
+## URL Routing
+
+The catalogue uses URL routing for deep linking:
+
+```
+/wcctools-route/:sectionName/:itemName/:demoIndex/:viewport/:theme
+
+Examples:
+/wcctools-route/Elements/my-button/0/desktop/dark
+/wcctools-route/Views/view-dashboard/0/tablet/bright
+/wcctools-route/Pages/home/0/desktop/dark
+```
+
+## API Reference
+
+### `setupWccTools(config)`
+
+Initialize the WCC Tools dashboard with sections configuration.
+
+```typescript
+interface IWccSection {
+  name: string;
+  type: 'elements' | 'pages';
+  items: Record<string, any>;
+  filter?: (name: string, item: any) => boolean;
+  sort?: (a: [string, any], b: [string, any]) => number;
+  icon?: string;
+  collapsed?: boolean;
+}
+
+interface IWccConfig {
+  sections: IWccSection[];
+}
+
+setupWccTools(config: IWccConfig): void;
+```
+
+### `DeesDemoWrapper`
+
+Component for wrapping demos with post-render logic, imported from `@design.estate/dees-element/demotools`.
+
+| 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, type TOutputFormat } from '@design.estate/wcctools';
+
+const recorder = new RecorderService({
+  onDurationUpdate: (duration) => console.log(`${duration}s`),
+  onRecordingComplete: (blob) => console.log('Recording done!', blob),
+  onAudioLevelUpdate: (level) => console.log(`Audio: ${level}%`),
+});
+
+// Record (always captures as WebM internally)
+await recorder.startRecording({ mode: 'viewport' });
+// ... later
+recorder.stopRecording();
+
+// Convert to MP4 for universal playback (H.264 + AAC via WebCodecs)
+const mp4Blob = await recorder.convertToMp4(recorder.recordedBlob);
+```
+
+## Project Structure
+
+```
+my-component-library/
+├── src/
+│   ├── elements/          # UI components
+│   │   ├── my-button.ts
+│   │   ├── my-card.ts
+│   │   └── index.ts
+│   ├── views/             # Full-page layouts
+│   │   ├── view-dashboard.ts
+│   │   └── index.ts
+│   ├── pages/             # Documentation pages
+│   │   ├── home.ts
+│   │   └── index.ts
+│   └── catalogue.ts       # WCC Tools setup
+├── html/
+│   └── index.html
+└── package.json
+```
+
+## Browser Support
+
+- ✅ Chrome/Edge (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest)
+- ✅ Mobile browsers with Web Components support
+
+## 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.md) 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.
+
+### Company Information
+
+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.
+
+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.