@design.estate/wcctools 5.1.0 → 6.1.0

package/dist_ts_shell/elements/wcc-shell.js

@@ -0,0 +1,524 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, property, state, html, customElement } from '@design.estate/dees-element';
+import * as plugins from '../plugins.js';
+import { WccPreviewConnection } from '../previewconnection.js';
+import './wcc-preview-frame.js';
+import './wcc-sidebar.js';
+import './wcc-properties.js';
+const viewports = ['native', 'desktop', 'tablet', 'phablet', 'phone'];
+const defaultSidebarWidth = 200;
+const selectionKey = (selectionArg) => selectionArg ? `${selectionArg.sectionName}::${selectionArg.itemName}::${selectionArg.demoIndex}` : null;
+/**
+ * The wcctools UI: catalog sidebar, properties and preview controls, and the preview frame
+ * that shows the catalog's own document. The shell owns the `/wcctools-route/...` URL and
+ * drives the preview through its bridge; a reloaded preview reconnects without the shell
+ * reloading.
+ */
+let WccShell = (() => {
+    let _classDecorators = [customElement('wcc-shell')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _previewPath_decorators;
+    let _previewPath_initializers = [];
+    let _previewPath_extraInitializers = [];
+    let _selection_decorators;
+    let _selection_initializers = [];
+    let _selection_extraInitializers = [];
+    let _selectedViewport_decorators;
+    let _selectedViewport_initializers = [];
+    let _selectedViewport_extraInitializers = [];
+    let _selectedTheme_decorators;
+    let _selectedTheme_initializers = [];
+    let _selectedTheme_extraInitializers = [];
+    let _searchQuery_decorators;
+    let _searchQuery_initializers = [];
+    let _searchQuery_extraInitializers = [];
+    let _pinnedItems_decorators;
+    let _pinnedItems_initializers = [];
+    let _pinnedItems_extraInitializers = [];
+    let _sidebarWidth_decorators;
+    let _sidebarWidth_initializers = [];
+    let _sidebarWidth_extraInitializers = [];
+    let _manifest_decorators;
+    let _manifest_initializers = [];
+    let _manifest_extraInitializers = [];
+    let _bridge_decorators;
+    let _bridge_initializers = [];
+    let _bridge_extraInitializers = [];
+    let _renderCount_decorators;
+    let _renderCount_initializers = [];
+    let _renderCount_extraInitializers = [];
+    let _previewSrc_decorators;
+    let _previewSrc_initializers = [];
+    let _previewSrc_extraInitializers = [];
+    let _advancedEditorOpen_decorators;
+    let _advancedEditorOpen_initializers = [];
+    let _advancedEditorOpen_extraInitializers = [];
+    let _isResizing_decorators;
+    let _isResizing_initializers = [];
+    let _isResizing_extraInitializers = [];
+    let _captureTarget_decorators;
+    let _captureTarget_initializers = [];
+    let _captureTarget_extraInitializers = [];
+    var WccShell = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _previewPath_decorators = [property({ attribute: 'preview-path' })];
+            _selection_decorators = [property({ attribute: false })];
+            _selectedViewport_decorators = [property()];
+            _selectedTheme_decorators = [property()];
+            _searchQuery_decorators = [property()];
+            _pinnedItems_decorators = [property({ attribute: false })];
+            _sidebarWidth_decorators = [property({ type: Number })];
+            _manifest_decorators = [state()];
+            _bridge_decorators = [state()];
+            _renderCount_decorators = [state()];
+            _previewSrc_decorators = [state()];
+            _advancedEditorOpen_decorators = [state()];
+            _isResizing_decorators = [state()];
+            _captureTarget_decorators = [state()];
+            __esDecorate(this, null, _previewPath_decorators, { kind: "accessor", name: "previewPath", static: false, private: false, access: { has: obj => "previewPath" in obj, get: obj => obj.previewPath, set: (obj, value) => { obj.previewPath = value; } }, metadata: _metadata }, _previewPath_initializers, _previewPath_extraInitializers);
+            __esDecorate(this, null, _selection_decorators, { kind: "accessor", name: "selection", static: false, private: false, access: { has: obj => "selection" in obj, get: obj => obj.selection, set: (obj, value) => { obj.selection = value; } }, metadata: _metadata }, _selection_initializers, _selection_extraInitializers);
+            __esDecorate(this, null, _selectedViewport_decorators, { kind: "accessor", name: "selectedViewport", static: false, private: false, access: { has: obj => "selectedViewport" in obj, get: obj => obj.selectedViewport, set: (obj, value) => { obj.selectedViewport = value; } }, metadata: _metadata }, _selectedViewport_initializers, _selectedViewport_extraInitializers);
+            __esDecorate(this, null, _selectedTheme_decorators, { kind: "accessor", name: "selectedTheme", static: false, private: false, access: { has: obj => "selectedTheme" in obj, get: obj => obj.selectedTheme, set: (obj, value) => { obj.selectedTheme = value; } }, metadata: _metadata }, _selectedTheme_initializers, _selectedTheme_extraInitializers);
+            __esDecorate(this, null, _searchQuery_decorators, { kind: "accessor", name: "searchQuery", static: false, private: false, access: { has: obj => "searchQuery" in obj, get: obj => obj.searchQuery, set: (obj, value) => { obj.searchQuery = value; } }, metadata: _metadata }, _searchQuery_initializers, _searchQuery_extraInitializers);
+            __esDecorate(this, null, _pinnedItems_decorators, { kind: "accessor", name: "pinnedItems", static: false, private: false, access: { has: obj => "pinnedItems" in obj, get: obj => obj.pinnedItems, set: (obj, value) => { obj.pinnedItems = value; } }, metadata: _metadata }, _pinnedItems_initializers, _pinnedItems_extraInitializers);
+            __esDecorate(this, null, _sidebarWidth_decorators, { kind: "accessor", name: "sidebarWidth", static: false, private: false, access: { has: obj => "sidebarWidth" in obj, get: obj => obj.sidebarWidth, set: (obj, value) => { obj.sidebarWidth = value; } }, metadata: _metadata }, _sidebarWidth_initializers, _sidebarWidth_extraInitializers);
+            __esDecorate(this, null, _manifest_decorators, { kind: "accessor", name: "manifest", static: false, private: false, access: { has: obj => "manifest" in obj, get: obj => obj.manifest, set: (obj, value) => { obj.manifest = value; } }, metadata: _metadata }, _manifest_initializers, _manifest_extraInitializers);
+            __esDecorate(this, null, _bridge_decorators, { kind: "accessor", name: "bridge", static: false, private: false, access: { has: obj => "bridge" in obj, get: obj => obj.bridge, set: (obj, value) => { obj.bridge = value; } }, metadata: _metadata }, _bridge_initializers, _bridge_extraInitializers);
+            __esDecorate(this, null, _renderCount_decorators, { kind: "accessor", name: "renderCount", static: false, private: false, access: { has: obj => "renderCount" in obj, get: obj => obj.renderCount, set: (obj, value) => { obj.renderCount = value; } }, metadata: _metadata }, _renderCount_initializers, _renderCount_extraInitializers);
+            __esDecorate(this, null, _previewSrc_decorators, { kind: "accessor", name: "previewSrc", static: false, private: false, access: { has: obj => "previewSrc" in obj, get: obj => obj.previewSrc, set: (obj, value) => { obj.previewSrc = value; } }, metadata: _metadata }, _previewSrc_initializers, _previewSrc_extraInitializers);
+            __esDecorate(this, null, _advancedEditorOpen_decorators, { kind: "accessor", name: "advancedEditorOpen", static: false, private: false, access: { has: obj => "advancedEditorOpen" in obj, get: obj => obj.advancedEditorOpen, set: (obj, value) => { obj.advancedEditorOpen = value; } }, metadata: _metadata }, _advancedEditorOpen_initializers, _advancedEditorOpen_extraInitializers);
+            __esDecorate(this, null, _isResizing_decorators, { kind: "accessor", name: "isResizing", static: false, private: false, access: { has: obj => "isResizing" in obj, get: obj => obj.isResizing, set: (obj, value) => { obj.isResizing = value; } }, metadata: _metadata }, _isResizing_initializers, _isResizing_extraInitializers);
+            __esDecorate(this, null, _captureTarget_decorators, { kind: "accessor", name: "captureTarget", static: false, private: false, access: { has: obj => "captureTarget" in obj, get: obj => obj.captureTarget, set: (obj, value) => { obj.captureTarget = value; } }, metadata: _metadata }, _captureTarget_initializers, _captureTarget_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            WccShell = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #previewPath_accessor_storage = __runInitializers(this, _previewPath_initializers, plugins.shared.previewRoutePath);
+        /** The path the server serves the preview document on. */
+        get previewPath() { return this.#previewPath_accessor_storage; }
+        set previewPath(value) { this.#previewPath_accessor_storage = value; }
+        #selection_accessor_storage = (__runInitializers(this, _previewPath_extraInitializers), __runInitializers(this, _selection_initializers, null));
+        get selection() { return this.#selection_accessor_storage; }
+        set selection(value) { this.#selection_accessor_storage = value; }
+        #selectedViewport_accessor_storage = (__runInitializers(this, _selection_extraInitializers), __runInitializers(this, _selectedViewport_initializers, 'desktop'));
+        get selectedViewport() { return this.#selectedViewport_accessor_storage; }
+        set selectedViewport(value) { this.#selectedViewport_accessor_storage = value; }
+        #selectedTheme_accessor_storage = (__runInitializers(this, _selectedViewport_extraInitializers), __runInitializers(this, _selectedTheme_initializers, 'dark'));
+        get selectedTheme() { return this.#selectedTheme_accessor_storage; }
+        set selectedTheme(value) { this.#selectedTheme_accessor_storage = value; }
+        #searchQuery_accessor_storage = (__runInitializers(this, _selectedTheme_extraInitializers), __runInitializers(this, _searchQuery_initializers, ''));
+        get searchQuery() { return this.#searchQuery_accessor_storage; }
+        set searchQuery(value) { this.#searchQuery_accessor_storage = value; }
+        #pinnedItems_accessor_storage = (__runInitializers(this, _searchQuery_extraInitializers), __runInitializers(this, _pinnedItems_initializers, new Set()));
+        // Pinned items as Set of "sectionName::itemName"
+        get pinnedItems() { return this.#pinnedItems_accessor_storage; }
+        set pinnedItems(value) { this.#pinnedItems_accessor_storage = value; }
+        #sidebarWidth_accessor_storage = (__runInitializers(this, _pinnedItems_extraInitializers), __runInitializers(this, _sidebarWidth_initializers, defaultSidebarWidth));
+        get sidebarWidth() { return this.#sidebarWidth_accessor_storage; }
+        set sidebarWidth(value) { this.#sidebarWidth_accessor_storage = value; }
+        #manifest_accessor_storage = (__runInitializers(this, _sidebarWidth_extraInitializers), __runInitializers(this, _manifest_initializers, null));
+        /** The catalog as the connected preview describes it; kept while the preview reloads. */
+        get manifest() { return this.#manifest_accessor_storage; }
+        set manifest(value) { this.#manifest_accessor_storage = value; }
+        #bridge_accessor_storage = (__runInitializers(this, _manifest_extraInitializers), __runInitializers(this, _bridge_initializers, null));
+        /** The connected preview's bridge; null while the preview loads. */
+        get bridge() { return this.#bridge_accessor_storage; }
+        set bridge(value) { this.#bridge_accessor_storage = value; }
+        #renderCount_accessor_storage = (__runInitializers(this, _bridge_extraInitializers), __runInitializers(this, _renderCount_initializers, 0));
+        /** Counts the renders of the preview, so the properties panel reads them. */
+        get renderCount() { return this.#renderCount_accessor_storage; }
+        set renderCount(value) { this.#renderCount_accessor_storage = value; }
+        #previewSrc_accessor_storage = (__runInitializers(this, _renderCount_extraInitializers), __runInitializers(this, _previewSrc_initializers, ''));
+        get previewSrc() { return this.#previewSrc_accessor_storage; }
+        set previewSrc(value) { this.#previewSrc_accessor_storage = value; }
+        #advancedEditorOpen_accessor_storage = (__runInitializers(this, _previewSrc_extraInitializers), __runInitializers(this, _advancedEditorOpen_initializers, false));
+        get advancedEditorOpen() { return this.#advancedEditorOpen_accessor_storage; }
+        set advancedEditorOpen(value) { this.#advancedEditorOpen_accessor_storage = value; }
+        #isResizing_accessor_storage = (__runInitializers(this, _advancedEditorOpen_extraInitializers), __runInitializers(this, _isResizing_initializers, false));
+        get isResizing() { return this.#isResizing_accessor_storage; }
+        set isResizing(value) { this.#isResizing_accessor_storage = value; }
+        #captureTarget_accessor_storage = (__runInitializers(this, _isResizing_extraInitializers), __runInitializers(this, _captureTarget_initializers, null));
+        get captureTarget() { return this.#captureTarget_accessor_storage; }
+        set captureTarget(value) { this.#captureTarget_accessor_storage = value; }
+        get isNative() {
+            return this.selectedViewport === 'native';
+        }
+        frameScrollY = (__runInitializers(this, _captureTarget_extraInitializers), 0);
+        sidebarScrollY = 0;
+        scrollPositionsRestored = false;
+        /** The selection the preview shows, as far as the shell asked it to. */
+        previewSelectionKey = null;
+        connection = new WccPreviewConnection(() => this.shadowRoot?.querySelector('wcc-preview-frame')?.iframe ?? null, {
+            onReady: (bridgeArg) => {
+                this.handlePreviewReady(bridgeArg).catch((error) => {
+                    console.error('wcctools: connecting the preview failed', error);
+                });
+            },
+            onDisconnect: () => {
+                this.bridge = null;
+            },
+            onEscape: () => this.leaveNative(),
+            onScroll: (scrollYArg) => {
+                this.frameScrollY = scrollYArg;
+                this.debouncedScrollUpdate();
+            },
+        });
+        routeDisposers = [];
+        scrollDisposers = [];
+        scrollUpdateTimeout;
+        render() {
+            return html `
+      <style>
+        :host {
+          background: #fcfcfc;
+          display: block;
+          box-sizing: border-box;
+          position: fixed;
+          inset: 0;
+          min-width: 0;
+          overflow: hidden;
+          container-type: inline-size;
+          container-name: wccShell;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <wcc-sidebar
+        .manifest=${this.manifest}
+        .selection=${this.selection}
+        .searchQuery=${this.searchQuery}
+        .pinnedItems=${this.pinnedItems}
+        .sidebarWidth=${this.sidebarWidth}
+        .isNative=${this.isNative}
+        @selectionChanged=${(eventArg) => {
+                this.selection = eventArg.detail;
+                this.buildUrl();
+            }}
+        @searchChanged=${(eventArg) => {
+                this.searchQuery = eventArg.detail;
+                this.updateUrlWithScrollState();
+            }}
+        @pinnedChanged=${(eventArg) => {
+                this.pinnedItems = eventArg.detail;
+                this.updateUrlWithScrollState();
+            }}
+        @widthChanged=${(eventArg) => {
+                this.sidebarWidth = eventArg.detail;
+            }}
+        @widthCommitted=${() => this.updateUrlWithScrollState()}
+        @resizingChanged=${(eventArg) => {
+                this.isResizing = eventArg.detail;
+            }}
+      ></wcc-sidebar>
+      <wcc-properties
+        role="region"
+        aria-label="Properties and preview controls"
+        .bridge=${this.bridge}
+        .renderCount=${this.renderCount}
+        .captureTarget=${this.captureTarget}
+        .selectedViewport=${this.selectedViewport}
+        .selectedTheme=${this.selectedTheme}
+        .isNative=${this.isNative}
+        .sidebarWidth=${this.sidebarWidth}
+        @selectedViewport=${(eventArg) => {
+                this.selectedViewport = eventArg.detail;
+                this.buildUrl();
+            }}
+        @selectedTheme=${(eventArg) => {
+                this.selectedTheme = eventArg.detail;
+                this.buildUrl();
+            }}
+        @editorStateChanged=${(eventArg) => {
+                this.advancedEditorOpen = eventArg.detail.isOpen;
+            }}
+      ></wcc-properties>
+      <wcc-preview-frame
+        role="main"
+        aria-label="Preview"
+        .viewport=${this.selectedViewport}
+        .previewSrc=${this.previewSrc}
+        .isNative=${this.isNative}
+        .sidebarWidth=${this.sidebarWidth}
+        .advancedEditorOpen=${this.advancedEditorOpen}
+        .isResizing=${this.isResizing}
+      ></wcc-preview-frame>
+    `;
+        }
+        leaveNative() {
+            if (this.isNative) {
+                this.selectedViewport = 'desktop';
+                this.buildUrl();
+            }
+        }
+        handleDocumentKeydown = (event) => {
+            if (event.key === 'Escape') {
+                this.leaveNative();
+            }
+        };
+        async connectedCallback() {
+            const connected = super.connectedCallback();
+            document.addEventListener('keydown', this.handleDocumentKeydown);
+            this.connection.start();
+            if (this.hasUpdated) {
+                await this.setupSidebarScrollListener();
+            }
+            await this.connectRoutes();
+            return connected;
+        }
+        async disconnectedCallback() {
+            const disconnected = super.disconnectedCallback();
+            document.removeEventListener('keydown', this.handleDocumentKeydown);
+            this.connection.dispose();
+            this.bridge = null;
+            for (const dispose of this.routeDisposers) {
+                dispose();
+            }
+            this.routeDisposers = [];
+            this.releaseScrollListeners();
+            clearTimeout(this.scrollUpdateTimeout);
+            return disconnected;
+        }
+        async firstUpdated() {
+            await this.setupSidebarScrollListener();
+        }
+        async connectRoutes() {
+            const domtools = await this.domtoolsPromise;
+            if (!this.isConnected || this.routeDisposers.length > 0) {
+                return;
+            }
+            this.domtools = domtools;
+            const handleRoute = async (routeInfo) => {
+                const { sectionName, itemName, demoIndex, viewport, theme } = routeInfo.params;
+                this.applyRoute({ sectionName, itemName, demoIndex, viewport, theme }, routeInfo.queryParams);
+            };
+            this.routeDisposers = [
+                domtools.router.on('/wcctools-route/:sectionName/:itemName/:demoIndex/:viewport/:theme', handleRoute),
+                // Route without demo index (kept for existing links)
+                domtools.router.on('/wcctools-route/:sectionName/:itemName/:viewport/:theme', handleRoute),
+            ];
+            await domtools.router._handleRouteState();
+            if (this.isConnected && !this.previewSrc) {
+                // Loaded once: later selections render through the bridge without reloading the preview
+                this.previewSrc = `${this.previewPath}${plugins.shared.formatPreviewQuery({ selection: this.selection, theme: this.selectedTheme })}`;
+            }
+        }
+        /**
+         * Apply a `/wcctools-route/...` location to the shell state.
+         */
+        applyRoute(routeArg, queryParamsArg = {}) {
+            this.selection = {
+                sectionName: decodeURIComponent(routeArg.sectionName),
+                itemName: routeArg.itemName,
+                demoIndex: parseInt(routeArg.demoIndex ?? '0', 10) || 0,
+            };
+            this.selectedViewport = viewports.includes(routeArg.viewport)
+                ? routeArg.viewport
+                : 'desktop';
+            this.selectedTheme = routeArg.theme === 'bright' ? 'bright' : 'dark';
+            // Restore state from query parameters
+            this.searchQuery = queryParamsArg.search || '';
+            if (queryParamsArg.frameScrollY) {
+                this.frameScrollY = parseInt(queryParamsArg.frameScrollY, 10);
+            }
+            if (queryParamsArg.sidebarScrollY) {
+                this.sidebarScrollY = parseInt(queryParamsArg.sidebarScrollY, 10);
+            }
+            if (queryParamsArg.pinned) {
+                const newPinned = new Set(queryParamsArg.pinned.split(',').filter(Boolean));
+                // Only update if actually different to avoid update loops
+                if (this.pinnedItems.size !== newPinned.size ||
+                    ![...newPinned].every(k => this.pinnedItems.has(k))) {
+                    this.pinnedItems = newPinned;
+                }
+            }
+            else if (this.pinnedItems.size > 0) {
+                this.pinnedItems = new Set();
+            }
+            this.sidebarWidth = queryParamsArg.sidebarWidth
+                ? parseInt(queryParamsArg.sidebarWidth, 10)
+                : defaultSidebarWidth;
+        }
+        async updated(changedPropertiesArg) {
+            super.updated(changedPropertiesArg);
+            if (changedPropertiesArg.has('selection') && this.selection) {
+                document.title = this.selection.itemName;
+            }
+            if (changedPropertiesArg.has('selectedTheme')) {
+                await this.applyTheme();
+            }
+            if (changedPropertiesArg.has('selection')) {
+                await this.renderSelectionInPreview();
+            }
+        }
+        /** The shell's own elements and the preview follow the selected theme. */
+        async applyTheme() {
+            const theme = this.selectedTheme;
+            const domtools = await plugins.deesDomtools.elementBasic.setup();
+            theme === 'bright' ? domtools.themeManager.goBright() : domtools.themeManager.goDark();
+            if (this.bridge && this.bridge.getTheme() !== theme) {
+                await this.bridge.setTheme(theme);
+            }
+        }
+        /**
+         * Render the selection in the preview. Only a change of the selected entry or demo
+         * re-renders; theme, viewport, search, pins and sidebar width leave the rendered demo
+         * (and its internal state) untouched.
+         */
+        async renderSelectionInPreview() {
+            const bridge = this.bridge;
+            const key = selectionKey(this.selection);
+            if (!bridge || !this.selection || key === this.previewSelectionKey) {
+                return;
+            }
+            this.previewSelectionKey = key;
+            await bridge.render(this.selection);
+            if (this.bridge === bridge) {
+                this.renderCount++;
+            }
+        }
+        /** A preview document is ready: read its catalog and bring it to the shell's state. */
+        async handlePreviewReady(bridgeArg) {
+            this.bridge = bridgeArg;
+            this.manifest = bridgeArg.getManifest();
+            this.captureTarget = this.shadowRoot?.querySelector('wcc-preview-frame')?.iframe ?? null;
+            if (bridgeArg.getTheme() !== this.selectedTheme) {
+                await bridgeArg.setTheme(this.selectedTheme);
+            }
+            // A reloaded preview restores what it showed from its own URL
+            this.previewSelectionKey = selectionKey(bridgeArg.getSelection());
+            await this.renderSelectionInPreview();
+            if (this.bridge !== bridgeArg) {
+                return;
+            }
+            this.renderCount++;
+            await this.restoreScrollPositions();
+        }
+        /** Scroll the sidebar and the preview to the positions of the loaded URL, once. */
+        async restoreScrollPositions() {
+            if (this.scrollPositionsRestored) {
+                return;
+            }
+            this.scrollPositionsRestored = true;
+            const sidebar = this.shadowRoot?.querySelector('wcc-sidebar');
+            await this.updateComplete;
+            await sidebar?.updateComplete;
+            if (sidebar?.scrollableContainer && this.sidebarScrollY > 0) {
+                sidebar.scrollableContainer.scrollTop = this.sidebarScrollY;
+            }
+            if (this.frameScrollY > 0) {
+                this.connection.scrollPreviewTo(this.frameScrollY);
+            }
+        }
+        getRouteUrl() {
+            if (!this.selection) {
+                return null;
+            }
+            const sectionName = encodeURIComponent(this.selection.sectionName);
+            const baseUrl = `/wcctools-route/${sectionName}/${this.selection.itemName}/${this.selection.demoIndex}/${this.selectedViewport}/${this.selectedTheme}`;
+            const queryParams = new URLSearchParams();
+            if (this.searchQuery) {
+                queryParams.set('search', this.searchQuery);
+            }
+            if (this.frameScrollY > 0) {
+                queryParams.set('frameScrollY', this.frameScrollY.toString());
+            }
+            if (this.sidebarScrollY > 0) {
+                queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
+            }
+            if (this.pinnedItems.size > 0) {
+                queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
+            }
+            if (this.sidebarWidth !== defaultSidebarWidth) {
+                queryParams.set('sidebarWidth', this.sidebarWidth.toString());
+            }
+            const queryString = queryParams.toString();
+            return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+        }
+        /** Push the current state as a new history entry; without a selection there is no route to push. */
+        buildUrl() {
+            const url = this.getRouteUrl();
+            if (url && this.domtools) {
+                this.domtools.router.pushUrl(url);
+            }
+        }
+        updateUrlWithScrollState() {
+            const url = this.getRouteUrl();
+            if (url) {
+                // Use replaceState to update URL without navigation
+                window.history.replaceState(null, '', url);
+            }
+        }
+        handleSidebarScroll = (event) => {
+            this.sidebarScrollY = event.currentTarget.scrollTop;
+            this.debouncedScrollUpdate();
+        };
+        async setupSidebarScrollListener() {
+            const sidebar = this.shadowRoot?.querySelector('wcc-sidebar');
+            await sidebar?.updateComplete;
+            // Prevent duplicate listeners and listeners on a removed shell
+            if (!this.isConnected || this.scrollDisposers.length > 0) {
+                return;
+            }
+            const scrollContainer = sidebar?.scrollableContainer;
+            if (scrollContainer) {
+                scrollContainer.addEventListener('scroll', this.handleSidebarScroll);
+                this.scrollDisposers.push(() => scrollContainer.removeEventListener('scroll', this.handleSidebarScroll));
+            }
+        }
+        releaseScrollListeners() {
+            for (const dispose of this.scrollDisposers) {
+                dispose();
+            }
+            this.scrollDisposers = [];
+        }
+        debouncedScrollUpdate() {
+            clearTimeout(this.scrollUpdateTimeout);
+            this.scrollUpdateTimeout = setTimeout(() => {
+                this.updateUrlWithScrollState();
+            }, 300);
+        }
+    };
+    return WccShell = _classThis;
+})();
+export { WccShell };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXNoZWxsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vdHNfc2hlbGwvZWxlbWVudHMvd2NjLXNoZWxsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUNySCxPQUFPLEtBQUssT0FBTyxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUcvRCxPQUFPLHdCQUF3QixDQUFDO0FBQ2hDLE9BQU8sa0JBQWtCLENBQUM7QUFDMUIsT0FBTyxxQkFBcUIsQ0FBQztBQVc3QixNQUFNLFNBQVMsR0FBbUIsQ0FBQyxRQUFRLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsT0FBTyxDQUFDLENBQUM7QUFDdEYsTUFBTSxtQkFBbUIsR0FBRyxHQUFHLENBQUM7QUFFaEMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxZQUFxRCxFQUFpQixFQUFFLENBQzVGLFlBQVksQ0FBQyxDQUFDLENBQUMsR0FBRyxZQUFZLENBQUMsV0FBVyxLQUFLLFlBQVksQ0FBQyxRQUFRLEtBQUssWUFBWSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7QUFRM0c7Ozs7O0dBS0c7SUFFVSxRQUFROzRCQURwQixhQUFhLENBQUMsV0FBVyxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7d0JBQW5CLFNBQVEsV0FBVzs7Ozt1Q0FFdEMsUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLGNBQWMsRUFBRSxDQUFDO3FDQUd2QyxRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7NENBRzlCLFFB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

package/{dist_ts_web → dist_ts_shell}/elements/wcc-sidebar.d.ts

@@ -1,11 +1,8 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
-import { WccDashboard } from './wcc-dashboard.js';
-import type { TTemplateFactory } from './wcctools.helpers.js';
-import type { IWccSection, TElementType } from '../wcctools.interfaces.js';
+import * as plugins from '../plugins.js';
 export declare class WccSidebar extends DeesElement {
-    accessor selectedItem: DeesElement | TTemplateFactory;
-    accessor selectedType: TElementType;
-    accessor dashboardRef: WccDashboard;
+    accessor manifest: plugins.interfaces.IWccCatalogManifest | null;
+    accessor selection: plugins.interfaces.IWccSelection | null;
     accessor isNative: boolean;
     accessor expandedElements: Set<string>;
     accessor collapsedSections: Set<string>;
@@ -16,12 +13,14 @@ export declare class WccSidebar extends DeesElement {
     accessor isResizing: boolean;
     accessor isHidden: boolean;
     accessor isMenuScrolled: boolean;
-    private sectionsInitialized;
+    /** Section names whose configured initial collapse state was applied. */
+    private initializedSections;
     /** data-key of the tree item that holds the roving tab stop */
     private focusedKey;
     private hideTimeout;
     private highlightedGroup;
     private groupHighlightTimeout;
+    private endResize;
     disconnectedCallback(): Promise<void>;
     /**
      * Returns the scrollable container element (.menu) for external scroll management
@@ -31,9 +30,11 @@ export declare class WccSidebar extends DeesElement {
     private getSectionKey;
     private getItemKey;
     /**
-     * Initialize collapsed sections from section config
+     * Apply each section's configured initial collapse state once, also to sections a reload adds
      */
     private initCollapsedSections;
+    private findEntry;
+    private isSelected;
     private getPinKey;
     private isPinned;
     private togglePin;
@@ -82,10 +83,11 @@ export declare class WccSidebar extends DeesElement {
     private focusTreeItem;
     private handleTreeFocusin;
     private handleTreeKeydown;
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
     protected updated(changedProperties: Map<string, unknown>): void;
-    /** Apply a sidebar width to the sidebar, frame and properties panel. */
+    /** Apply a sidebar width; the shell sizes the frame and properties panel from the event. */
     private applyWidth;
     private handleResizeKeydown;
     private startResize;
-    selectItem(typeArg: TElementType, itemNameArg: string, itemArg: TTemplateFactory | DeesElement, demoIndex?: number, section?: IWccSection): void;
+    selectItem(sectionNameArg: string, itemNameArg: string, demoIndexArg?: number): void;
 }