@design.estate/wcctools 5.1.0 → 6.0.0

package/dist_ts_web/index.d.ts

@@ -1,10 +1,7 @@
 import type { IWccConfig } from './wcctools.interfaces.js';
-export { RecorderService, type IRecorderEvents, type IRecordingOptions, type TOutputFormat } from './services/recorder.service.js';
-export { WccRecordButton } from './elements/wcc-record-button.js';
-export { WccRecordingPanel } from './elements/wcc-recording-panel.js';
 export type { IWccConfig, IWccSection } from './wcctools.interfaces.js';
 /**
- * Set up the WCC Tools dashboard:
+ * Set up the catalog's preview document:
  * ```typescript
  * setupWccTools({
  *   sections: [
@@ -14,5 +11,5 @@ export type { IWccConfig, IWccSection } from './wcctools.interfaces.js';
  * });
  * ```
  */
-declare const setupWccTools: (config: IWccConfig) => void;
+declare const setupWccTools: (configArg: IWccConfig) => void;
 export { setupWccTools };

package/dist_ts_web/index.js

@@ -1,10 +1,30 @@
-import { WccDashboard } from './elements/wcc-dashboard.js';
-// Export recording components and service
-export { RecorderService } from './services/recorder.service.js';
-export { WccRecordButton } from './elements/wcc-record-button.js';
-export { WccRecordingPanel } from './elements/wcc-recording-panel.js';
+import * as plugins from './wcctools.plugins.js';
+import { WccCatalog } from './catalog.js';
+import { WccPreview } from './elements/wcc-preview.js';
+import { WccStandaloneNotice } from './elements/wcc-standalone-notice.js';
+import { WccPreviewBridge } from './previewbridge.js';
 /**
- * Set up the WCC Tools dashboard:
+ * Start the preview document of a catalog. `wcctools dev` loads this document into the shell's
+ * preview frame; opened on the preview route it renders the one demo the route names.
+ * Opened anywhere else it shows how to start the catalog.
+ */
+const startPreview = async (configArg) => {
+    const isFramed = window.parent !== window;
+    if (!isFramed && window.location.pathname !== plugins.shared.previewRoutePath) {
+        document.body.append(new WccStandaloneNotice());
+        return;
+    }
+    const preview = new WccPreview();
+    document.body.append(preview);
+    const bridge = new WccPreviewBridge(new WccCatalog(configArg), preview);
+    await bridge.renderRoute(plugins.shared.parsePreviewQuery(window.location.search));
+    window.wccPreview = bridge;
+    if (isFramed) {
+        window.parent.postMessage(plugins.shared.previewReadyMessage, window.location.origin);
+    }
+};
+/**
+ * Set up the catalog's preview document:
  * ```typescript
  * setupWccTools({
  *   sections: [
@@ -14,17 +34,18 @@ export { WccRecordingPanel } from './elements/wcc-recording-panel.js';
  * });
  * ```
  */
-const setupWccTools = (config) => {
-    let hasRun = false;
-    const runWccToolsSetup = async () => {
-        if (document.readyState === 'complete' && !hasRun) {
-            hasRun = true;
-            const wccTools = new WccDashboard(config);
-            document.querySelector('body').append(wccTools);
-        }
+const setupWccTools = (configArg) => {
+    const start = () => {
+        startPreview(configArg).catch((error) => {
+            console.error('wcctools: the preview failed to start', error);
+        });
     };
-    document.addEventListener('readystatechange', runWccToolsSetup);
-    runWccToolsSetup();
+    if (document.readyState === 'complete') {
+        start();
+    }
+    else {
+        window.addEventListener('load', start, { once: true });
+    }
 };
 export { setupWccTools };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90c193ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRzNELDBDQUEwQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFvRSxNQUFNLGdDQUFnQyxDQUFDO0FBQ25JLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNsRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUt0RTs7Ozs7Ozs7OztHQVVHO0FBQ0gsTUFBTSxhQUFhLEdBQUcsQ0FBQyxNQUFrQixFQUFFLEVBQUU7SUFDM0MsSUFBSSxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ25CLE1BQU0sZ0JBQWdCLEdBQUcsS0FBSyxJQUFJLEVBQUU7UUFDbEMsSUFBSSxRQUFRLENBQUMsVUFBVSxLQUFLLFVBQVUsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQ2xELE1BQU0sR0FBRyxJQUFJLENBQUM7WUFDZCxNQUFNLFFBQVEsR0FBRyxJQUFJLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUMxQyxRQUFRLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNsRCxDQUFDO0lBQ0gsQ0FBQyxDQUFDO0lBQ0YsUUFBUSxDQUFDLGdCQUFnQixDQUFDLGtCQUFrQixFQUFFLGdCQUFnQixDQUFDLENBQUM7SUFDaEUsZ0JBQWdCLEVBQUUsQ0FBQztBQUNyQixDQUFDLENBQUM7QUFFRixPQUFPLEVBQ0wsYUFBYSxFQUNkLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSx1QkFBdUIsQ0FBQztBQUNqRCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQzFDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUt0RDs7OztHQUlHO0FBQ0gsTUFBTSxZQUFZLEdBQUcsS0FBSyxFQUFFLFNBQXFCLEVBQUUsRUFBRTtJQUNuRCxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsTUFBTSxLQUFLLE1BQU0sQ0FBQztJQUMxQyxJQUFJLENBQUMsUUFBUSxJQUFJLE1BQU0sQ0FBQyxRQUFRLENBQUMsUUFBUSxLQUFLLE9BQU8sQ0FBQyxNQUFNLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztRQUM5RSxRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLG1CQUFtQixFQUFFLENBQUMsQ0FBQztRQUNoRCxPQUFPO0lBQ1QsQ0FBQztJQUNELE1BQU0sT0FBTyxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7SUFDakMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDOUIsTUFBTSxNQUFNLEdBQUcsSUFBSSxnQkFBZ0IsQ0FBQyxJQUFJLFVBQVUsQ0FBQyxTQUFTLENBQUMsRUFBRSxPQUFPLENBQUMsQ0FBQztJQUN4RSxNQUFNLE1BQU0sQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7SUFDbkYsTUFBTSxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUM7SUFDM0IsSUFBSSxRQUFRLEVBQUUsQ0FBQztRQUNiLE1BQU0sQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsbUJBQW1CLEVBQUUsTUFBTSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN4RixDQUFDO0FBQ0gsQ0FBQyxDQUFDO0FBRUY7Ozs7Ozs7Ozs7R0FVRztBQUNILE1BQU0sYUFBYSxHQUFHLENBQUMsU0FBcUIsRUFBRSxFQUFFO0lBQzlDLE1BQU0sS0FBSyxHQUFHLEdBQUcsRUFBRTtRQUNqQixZQUFZLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDdEMsT0FBTyxDQUFDLEtBQUssQ0FBQyx1Q0FBdUMsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUNoRSxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQztJQUNGLElBQUksUUFBUSxDQUFDLFVBQVUsS0FBSyxVQUFVLEVBQUUsQ0FBQztRQUN2QyxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7U0FBTSxDQUFDO1FBQ04sTUFBTSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztJQUN6RCxDQUFDO0FBQ0gsQ0FBQyxDQUFDO0FBRUYsT0FBTyxFQUNMLGFBQWEsRUFDZCxDQUFDIn0=

package/dist_ts_web/previewbridge.d.ts

@@ -0,0 +1,39 @@
+import * as plugins from './wcctools.plugins.js';
+import type { WccCatalog } from './catalog.js';
+import type { WccPreview } from './elements/wcc-preview.js';
+type TPreviewEvent = plugins.interfaces.TWccPreviewEvent;
+/**
+ * The preview document's side of the shell bridge: renders the catalog's demos and pages into
+ * the preview surface, switches its theme and reads and edits the rendered element's properties.
+ */
+export declare class WccPreviewBridge implements plugins.interfaces.IWccPreviewBridge {
+    private readonly catalog;
+    private readonly preview;
+    private readonly listeners;
+    private theme;
+    private rendered;
+    private renderGeneration;
+    /** Settles when the latest render, including its elements' first updates, has finished. */
+    private renderPromise;
+    constructor(catalog: WccCatalog, preview: WccPreview);
+    getManifest(): plugins.interfaces.IWccCatalogManifest;
+    getSelection(): plugins.interfaces.IWccSelection | null;
+    getTheme(): plugins.interfaces.TWccTheme;
+    /** Render the preview route the document was loaded with. */
+    renderRoute(routeArg: plugins.shared.IWccPreviewRoute): Promise<void>;
+    render(selectionArg: plugins.interfaces.IWccSelection): Promise<plugins.interfaces.TWccRenderOutcome>;
+    setTheme(themeArg: plugins.interfaces.TWccTheme): Promise<void>;
+    getProperties(): Promise<plugins.interfaces.TWccPropertyListing>;
+    setProperty(nameArg: string, valueArg: plugins.interfaces.TWccPropertyScalar): plugins.interfaces.TWccPropertyEditResult;
+    setPropertyJson(nameArg: string, jsonArg: string): plugins.interfaces.TWccPropertyEditResult;
+    findRenderedInstance(): HTMLElement | null;
+    subscribe(listenerArg: (eventArg: TPreviewEvent) => void): () => void;
+    private getRenderedProperties;
+    private renderSelection;
+    private renderTarget;
+    private showEmptyState;
+    /** Keep the document's URL on what it shows, so a live reload comes back to it. */
+    private writeRoute;
+    private emit;
+}
+export {};

package/dist_ts_web/previewbridge.js

@@ -0,0 +1,153 @@
+import { html, render } from '@design.estate/dees-element';
+import * as plugins from './wcctools.plugins.js';
+import { WccElementProperties } from './elementproperties.js';
+import { findElementInstance, resolveTemplateFactory } from './elements/wcctools.helpers.js';
+import { waitForRenderedTree } from './renderedtree.js';
+/**
+ * The preview document's side of the shell bridge: renders the catalog's demos and pages into
+ * the preview surface, switches its theme and reads and edits the rendered element's properties.
+ */
+export class WccPreviewBridge {
+    catalog;
+    preview;
+    listeners = new Set();
+    theme = 'dark';
+    rendered = null;
+    renderGeneration = 0;
+    /** Settles when the latest render, including its elements' first updates, has finished. */
+    renderPromise = Promise.resolve();
+    constructor(catalog, preview) {
+        this.catalog = catalog;
+        this.preview = preview;
+    }
+    getManifest() {
+        return this.catalog.getManifest();
+    }
+    getSelection() {
+        return this.rendered?.selection ? { ...this.rendered.selection } : null;
+    }
+    getTheme() {
+        return this.theme;
+    }
+    /** Render the preview route the document was loaded with. */
+    async renderRoute(routeArg) {
+        await this.setTheme(routeArg.theme);
+        await this.renderSelection(routeArg.selection);
+    }
+    async render(selectionArg) {
+        const { sectionName, itemName, demoIndex } = selectionArg;
+        return this.renderSelection({ sectionName, itemName, demoIndex });
+    }
+    async setTheme(themeArg) {
+        this.theme = themeArg === 'bright' ? 'bright' : 'dark';
+        const domtools = await plugins.deesDomtools.elementBasic.setup();
+        this.theme === 'bright' ? domtools.themeManager.goBright() : domtools.themeManager.goDark();
+        this.writeRoute();
+    }
+    async getProperties() {
+        await this.renderPromise;
+        const rendered = this.rendered;
+        if (!rendered?.selection || rendered.outcome.kind !== 'rendered') {
+            return { kind: 'unavailable', reason: 'Nothing is rendered.' };
+        }
+        if (rendered.outcome.type === 'page') {
+            return { kind: 'unavailable', reason: 'You selected a page.' };
+        }
+        const instance = this.findRenderedInstance();
+        if (!instance) {
+            return { kind: 'unavailable', reason: `The demo of ${rendered.selection.itemName} renders no <${customElements.getName(rendered.elementClass) ?? rendered.selection.itemName}> instance.` };
+        }
+        const properties = new WccElementProperties(rendered.elementClass, instance).describe();
+        if (!properties) {
+            return { kind: 'unavailable', reason: `${rendered.selection.itemName} does not expose element properties.` };
+        }
+        return { kind: 'properties', elementName: rendered.selection.itemName, properties };
+    }
+    setProperty(nameArg, valueArg) {
+        const properties = this.getRenderedProperties();
+        return properties ? properties.set(nameArg, valueArg) : { ok: false, error: 'No element is rendered.' };
+    }
+    setPropertyJson(nameArg, jsonArg) {
+        const properties = this.getRenderedProperties();
+        return properties ? properties.setJson(nameArg, jsonArg) : { ok: false, error: 'No element is rendered.' };
+    }
+    findRenderedInstance() {
+        const elementClass = this.rendered?.elementClass;
+        const viewport = this.preview.shadowRoot?.querySelector('.viewport');
+        if (!elementClass || !viewport) {
+            return null;
+        }
+        return findElementInstance(viewport, elementClass);
+    }
+    subscribe(listenerArg) {
+        this.listeners.add(listenerArg);
+        return () => {
+            this.listeners.delete(listenerArg);
+        };
+    }
+    getRenderedProperties() {
+        const instance = this.findRenderedInstance();
+        return instance ? new WccElementProperties(this.rendered.elementClass, instance) : null;
+    }
+    async renderSelection(selectionArg) {
+        const generation = ++this.renderGeneration;
+        const target = this.catalog.resolve(selectionArg);
+        const renderPromise = this.renderTarget(target, selectionArg?.itemName ?? '', generation);
+        this.renderPromise = renderPromise.catch(() => undefined);
+        const outcome = await renderPromise;
+        if (generation === this.renderGeneration) {
+            this.rendered = {
+                selection: selectionArg ? { ...selectionArg } : null,
+                elementClass: target.kind === 'element' ? target.elementClass : null,
+                outcome,
+            };
+            this.writeRoute();
+            this.emit({ type: 'rendered', selection: this.getSelection(), outcome });
+        }
+        return outcome;
+    }
+    async renderTarget(targetArg, itemNameArg, generationArg) {
+        const viewport = await this.preview.getViewportElement();
+        if (targetArg.kind === 'empty') {
+            this.showEmptyState(viewport, targetArg.emptyState, generationArg);
+            return { kind: 'empty', reason: targetArg.reason, emptyState: targetArg.emptyState };
+        }
+        try {
+            const template = await resolveTemplateFactory(targetArg.factory);
+            if (generationArg !== this.renderGeneration) {
+                return { kind: 'rendered', type: targetArg.kind };
+            }
+            render(template, viewport);
+            this.preview.emptyState = null;
+            await waitForRenderedTree(viewport);
+            return { kind: 'rendered', type: targetArg.kind };
+        }
+        catch (error) {
+            console.error(`wcctools: rendering "${itemNameArg}" failed`, error);
+            const emptyState = {
+                title: `${itemNameArg} failed to render`,
+                detail: error instanceof Error ? error.message : String(error),
+            };
+            this.showEmptyState(viewport, emptyState, generationArg);
+            return { kind: 'empty', reason: 'failed', emptyState };
+        }
+    }
+    showEmptyState(viewportArg, emptyStateArg, generationArg) {
+        if (generationArg !== this.renderGeneration) {
+            return;
+        }
+        render(html ``, viewportArg);
+        this.preview.emptyState = emptyStateArg;
+    }
+    /** Keep the document's URL on what it shows, so a live reload comes back to it. */
+    writeRoute() {
+        const query = plugins.shared.formatPreviewQuery({ selection: this.rendered?.selection ?? null, theme: this.theme });
+        window.history.replaceState(window.history.state, '', `${window.location.pathname}${query}`);
+    }
+    emit(eventArg) {
+        for (const listener of this.listeners) {
+            listener(eventArg);
+        }
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJldmlld2JyaWRnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9wcmV2aWV3YnJpZGdlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDM0QsT0FBTyxLQUFLLE9BQU8sTUFBTSx1QkFBdUIsQ0FBQztBQUVqRCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM5RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsc0JBQXNCLEVBQW1DLE1BQU0sZ0NBQWdDLENBQUM7QUFFOUgsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFXeEQ7OztHQUdHO0FBQ0gsTUFBTSxPQUFPLGdCQUFnQjtJQVNSO0lBQ0E7SUFURixTQUFTLEdBQUcsSUFBSSxHQUFHLEVBQXFDLENBQUM7SUFDbEUsS0FBSyxHQUFpQyxNQUFNLENBQUM7SUFDN0MsUUFBUSxHQUEwQixJQUFJLENBQUM7SUFDdkMsZ0JBQWdCLEdBQUcsQ0FBQyxDQUFDO0lBQzdCLDJGQUEyRjtJQUNuRixhQUFhLEdBQXFCLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUU1RCxZQUNtQixPQUFtQixFQUNuQixPQUFtQjtRQURuQixZQUFPLEdBQVAsT0FBTyxDQUFZO1FBQ25CLFlBQU8sR0FBUCxPQUFPLENBQVk7SUFDbkMsQ0FBQztJQUVHLFdBQVc7UUFDaEIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3BDLENBQUM7SUFFTSxZQUFZO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLFFBQVEsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDMUUsQ0FBQztJQUVNLFFBQVE7UUFDYixPQUFPLElBQUks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

package/dist_ts_web/renderedtree.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Resolves once every Lit element below the root, including the ones their updates create,
+ * has completed its pending update.
+ */
+export declare const waitForRenderedTree: (rootArg: Element | ShadowRoot) => Promise<void>;

package/dist_ts_web/renderedtree.js

@@ -0,0 +1,37 @@
+const isUpdatingElement = (elementArg) => {
+    const updateComplete = elementArg.updateComplete;
+    return typeof updateComplete?.then === 'function';
+};
+const collectUpdatingElements = (rootArg) => {
+    const result = [];
+    const pending = Array.from(rootArg.children);
+    for (let index = 0; index < pending.length; index++) {
+        const element = pending[index];
+        if (isUpdatingElement(element)) {
+            result.push(element);
+        }
+        pending.push(...element.children);
+        if (element.shadowRoot) {
+            pending.push(...element.shadowRoot.children);
+        }
+    }
+    return result;
+};
+/**
+ * Resolves once every Lit element below the root, including the ones their updates create,
+ * has completed its pending update.
+ */
+export const waitForRenderedTree = async (rootArg) => {
+    const settled = new Set();
+    for (;;) {
+        const pending = collectUpdatingElements(rootArg).filter((elementArg) => !settled.has(elementArg));
+        if (pending.length === 0) {
+            return;
+        }
+        await Promise.all(pending.map((elementArg) => elementArg.updateComplete));
+        for (const element of pending) {
+            settled.add(element);
+        }
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVuZGVyZWR0cmVlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL3JlbmRlcmVkdHJlZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQSxNQUFNLGlCQUFpQixHQUFHLENBQUMsVUFBbUIsRUFBa0MsRUFBRTtJQUNoRixNQUFNLGNBQWMsR0FBSSxVQUF3QyxDQUFDLGNBQWMsQ0FBQztJQUNoRixPQUFPLE9BQU8sY0FBYyxFQUFFLElBQUksS0FBSyxVQUFVLENBQUM7QUFDcEQsQ0FBQyxDQUFDO0FBRUYsTUFBTSx1QkFBdUIsR0FBRyxDQUFDLE9BQTZCLEVBQXNCLEVBQUU7SUFDcEYsTUFBTSxNQUFNLEdBQXVCLEVBQUUsQ0FBQztJQUN0QyxNQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUM3QyxLQUFLLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxLQUFLLEdBQUcsT0FBTyxDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDO1FBQ3BELE1BQU0sT0FBTyxHQUFHLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMvQixJQUFJLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUM7WUFDL0IsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUN2QixDQUFDO1FBQ0QsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNsQyxJQUFJLE9BQU8sQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUN2QixPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsT0FBTyxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUMvQyxDQUFDO0lBQ0gsQ0FBQztJQUNELE9BQU8sTUFBTSxDQUFDO0FBQ2hCLENBQUMsQ0FBQztBQUVGOzs7R0FHRztBQUNILE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLEtBQUssRUFBRSxPQUE2QixFQUFpQixFQUFFO0lBQ3hGLE1BQU0sT0FBTyxHQUFHLElBQUksR0FBRyxFQUFXLENBQUM7SUFDbkMsU0FBUyxDQUFDO1FBQ1IsTUFBTSxPQUFPLEdBQUcsdUJBQXVCLENBQUMsT0FBTyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsVUFBVSxFQUFFLEVBQUUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQztRQUNsRyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDekIsT0FBTztRQUNULENBQUM7UUFDRCxNQUFNLE9BQU8sQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUMsVUFBVSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7UUFDMUUsS0FBSyxNQUFNLE9BQU8sSUFBSSxPQUFPLEVBQUUsQ0FBQztZQUM5QixPQUFPLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3ZCLENBQUM7SUFDSCxDQUFDO0FBQ0gsQ0FBQyxDQUFDIn0=

package/dist_ts_web/wcctools.interfaces.d.ts

@@ -1,11 +1,12 @@
+import type { TWccSectionType } from '../dist_ts_interfaces/index.js';
 /**
- * Configuration for a section in the WCC Tools sidebar
+ * Configuration for a section of the catalog
  */
 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';
+    type: TWccSectionType;
     /** The items in this section - either element classes or page factory functions */
     items: Record<string, any>;
     /** Optional filter function to include/exclude items */
@@ -23,7 +24,3 @@ export interface IWccSection {
 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

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

package/dist_ts_web/wcctools.plugins.d.ts

@@ -1,2 +1,4 @@
 import * as deesDomtools from '@design.estate/dees-domtools';
-export { deesDomtools };
+import * as interfaces from '../dist_ts_interfaces/index.js';
+import * as shared from '../dist_ts_shared/index.js';
+export { deesDomtools, interfaces, shared, };

package/dist_ts_web/wcctools.plugins.js

@@ -1,3 +1,5 @@
 import * as deesDomtools from '@design.estate/dees-domtools';
-export { deesDomtools };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjdG9vbHMucGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzX3dlYi93Y2N0b29scy5wbHVnaW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxZQUFZLE1BQU0sOEJBQThCLENBQUM7QUFFN0QsT0FBTyxFQUNMLFlBQVksRUFDYixDQUFDIn0=
+import * as interfaces from '../dist_ts_interfaces/index.js';
+import * as shared from '../dist_ts_shared/index.js';
+export { deesDomtools, interfaces, shared, };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjdG9vbHMucGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi93Y2N0b29scy5wbHVnaW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxZQUFZLE1BQU0sOEJBQThCLENBQUM7QUFFN0QsT0FBTyxLQUFLLFVBQVUsTUFBTSwyQkFBMkIsQ0FBQztBQUN4RCxPQUFPLEtBQUssTUFBTSxNQUFNLHVCQUF1QixDQUFDO0FBRWhELE9BQU8sRUFDTCxZQUFZLEVBQ1osVUFBVSxFQUNWLE1BQU0sR0FDUCxDQUFDIn0=

package/package.json

@@ -1,30 +1,38 @@
 {
   "name": "@design.estate/wcctools",
-  "version": "5.1.0",
+  "version": "6.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.",
+  "bin": {
+    "wcctools": "./cli.js"
+  },
   "exports": {
-    ".": "./dist_ts_web/index.js"
+    ".": "./dist_ts_web/index.js",
+    "./interfaces": "./dist_ts_interfaces/index.js"
   },
   "type": "module",
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
+    "@api.global/typedrequest": "^8.2.0",
+    "@api.global/typedrequest-interfaces": "^7.1.0",
+    "@api.global/typedserver": "^14.2.1",
     "@design.estate/dees-domtools": "^5.0.0",
     "@design.estate/dees-element": "^4.0.0",
-    "lit": "^3.3.2",
-    "mediabunny": "^1.40.1"
+    "@git.zone/tswatch": "^6.0.1",
+    "@push.rocks/smartconsole": "^2.1.0",
+    "@push.rocks/smartexit": "^2.2.0",
+    "lit": "^3.3.2"
   },
   "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"
+    "@types/node": "^26.6.3",
+    "mediabunny": "^1.40.1"
   },
   "files": [
     "ts/**/*",
@@ -58,7 +66,7 @@
   "scripts": {
     "test": "pnpm run build && tstest \"test/test.*.*.ts\" --verbose --logfile",
     "build": "(tsbuild tsfolders --allowimplicitany && tsbundle)",
-    "watch": "tswatch",
+    "watch": "pnpm run build && node ./cli.ts.js dev",
     "buildDocs": "tsdoc"
   }
 }

package/readme.md

@@ -6,10 +6,11 @@
 
 `@design.estate/wcctools` provides a comprehensive development environment for web components, featuring:
 
+- 🖥️ **`wcctools dev`** — One command bundles your catalogue with live reload and serves it in the wcctools shell
 - 🎨 **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
+- 📱 **Responsive Viewport Testing** — Phone, phablet, tablet, and desktop views in a frame of the exact width, so width media queries respond
 - 🎬 **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
@@ -45,6 +46,16 @@ 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).
 
+### Migrating to 6.0.0
+
+6.0.0 splits the catalogue into two documents. The **shell** (sidebar, properties panel, recorder) is prebuilt into the package and served by the new `wcctools dev` command; your catalogue bundle runs as the **preview** document in a same-origin iframe that is exactly as wide as the selected viewport. Your `html/index.ts` and `html/index.html` stay as they are.
+
+1. Keep `@design.estate/wcctools` as a devDependency at `^6.0.0`.
+2. Replace the `watch` script: `"watch": "wcctools dev"` (it reads the same `@git.zone/tswatch` configuration from `.smartconfig.json`, or uses tswatch's `element` preset).
+3. Open the address `wcctools dev` prints (`http://localhost:<port>/wcctools/`).
+
+Opened outside `wcctools dev` (for example from plain `tswatch`), the catalogue bundle shows a notice that names the command instead of the catalogue UI. `RecorderService`, `WccRecordButton` and `WccRecordingPanel` are no longer exported: recording lives in the shell.
+
 ## Quick Start
 
 ### 1. Create Your Component
@@ -98,9 +109,8 @@ export class MyButton extends DeesElement {
 ### 2. Set Up Your Catalogue
 
 ```typescript
-// catalogue.ts
+// html/index.ts
 import { setupWccTools } from '@design.estate/wcctools';
-import { html } from 'lit';
 
 // Import your components
 import * as elements from './components/index.js';
@@ -133,19 +143,30 @@ setupWccTools({
 
 ### 3. Create an HTML Entry Point
 
+`wcctools dev` bundles `html/index.ts` to `dist_watch/bundle.js` and serves `html/index.html` as the preview document:
+
 ```html
 <!DOCTYPE html>
 <html>
 <head>
   <title>Component Catalogue</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module" src="/bundle.js"></script>
 </head>
 <body style="margin: 0; padding: 0;">
-  <script type="module" src="./catalogue.js"></script>
 </body>
 </html>
 ```
 
+### 4. Run the Catalogue
+
+```bash
+pnpm exec wcctools dev            # port from the tswatch configuration, else 3002
+pnpm exec wcctools dev --port 0   # any free port
+```
+
+It prints the shell's address, for example `wcctools dev: http://localhost:3002/wcctools/`. Saving a source file rebuilds the bundle and reloads only the preview frame; the shell keeps its state. `Ctrl+C` stops the server and the watchers.
+
 ## 📂 Sections Configuration
 
 The sections-based API gives you full control over how components are organized in the sidebar.
@@ -258,7 +279,9 @@ Test your components across different screen sizes:
 - **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.
+The preview document runs in an iframe of the selected width, so both width `@media` queries and `wccToolsViewport` container queries respond to it.
+
+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 frame its exact target width; wider targets scroll inside the frame instead of widening the document.
 
 ### 🌓 Theme Support
 
@@ -371,7 +394,7 @@ public static demo = async () => {
 
 ### 🎯 Container Queries
 
-Components can respond to their container size using the `wccToolsViewport` container:
+Components can respond to their container size using the `wccToolsViewport` container, which wraps every rendered demo in the preview document:
 
 ```typescript
 public static styles = [
@@ -442,13 +465,13 @@ The sidebar is an ARIA tree with a single tab stop (the selected entry, or the l
 | `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.
+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, also while the focus is inside the preview.
 
 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:
+The shell uses URL routing for deep linking:
 
 ```
 /wcctools-route/:sectionName/:itemName/:demoIndex/:viewport/:theme
@@ -459,11 +482,30 @@ Examples:
 /wcctools-route/Pages/home/0/desktop/dark
 ```
 
+The preview document alone renders one demo from its own route, for tools that capture a single element:
+
+```
+/wcctools-preview?section=Elements&item=my-button&demo=0&theme=dark
+```
+
 ## API Reference
 
+### `wcctools dev [--port <port>]`
+
+Bundles and watches the catalogue as the project's `@git.zone/tswatch` configuration describes (or tswatch's `element` preset) and serves on one port:
+
+| Path | Serves |
+|------|--------|
+| `/` | Redirects to `/wcctools/` |
+| `/wcctools/`, `/wcctools-route/...` | The shell |
+| `/wcctools/typedrequest` | The shell's typed API |
+| every other path | The catalogue's serve directory (default `dist_watch/`), with live reload for the preview document |
+
+`--port` overrides the configured port; `0` picks a free port.
+
 ### `setupWccTools(config)`
 
-Initialize the WCC Tools dashboard with sections configuration.
+Sets up the catalogue's preview document with sections configuration. The shell reads a data-only description of the sections from it; element classes and template factories never leave the preview document.
 
 ```typescript
 interface IWccSection {
@@ -496,26 +538,16 @@ The wrapper provides full DOM API access:
 - `wrapper.querySelectorAll()` — Find multiple elements
 - `wrapper.children` — Access child elements directly
 
-### Recording Components (Advanced)
+### `@design.estate/wcctools/interfaces`
 
-For custom recording integrations:
+The contracts between the shell, the preview document and the dev server, for tools that drive a preview: the catalogue manifest (`IWccCatalogManifest`), the preview bridge the preview document installs as `window.wccPreview` (`IWccPreviewBridge`: render a demo, switch the theme, read and edit the rendered element's properties) and the dev server's typed requests.
 
 ```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();
+import type { IWccPreviewBridge } from '@design.estate/wcctools/interfaces';
 
-// Convert to MP4 for universal playback (H.264 + AAC via WebCodecs)
-const mp4Blob = await recorder.convertToMp4(recorder.recordedBlob);
+const bridge: IWccPreviewBridge = previewFrame.contentWindow.wccPreview;
+await bridge.render({ sectionName: 'Elements', itemName: 'MyButton', demoIndex: 0 });
+const properties = await bridge.getProperties();
 ```
 
 ## Project Structure
@@ -533,10 +565,10 @@ my-component-library/
 │   ├── pages/             # Documentation pages
 │   │   ├── home.ts
 │   │   └── index.ts
-│   └── catalogue.ts       # WCC Tools setup
 ├── html/
-│   └── index.html
-└── package.json
+│   ├── index.ts           # setupWccTools: the catalogue
+│   └── index.html         # the preview document
+└── package.json           # "watch": "wcctools dev"
 ```
 
 ## Browser Support

package/ts/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @push.rocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/wcctools',
+  version: '6.0.0',
+  description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
+}