@design.estate/wcctools 5.1.0

package/dist_ts_web/00_commitinfo_data.d.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @push.rocks/commitinfo
+ */
+export declare const commitinfo: {
+    name: string;
+    version: string;
+    description: string;
+};

package/dist_ts_web/00_commitinfo_data.js

@@ -0,0 +1,9 @@
+/**
+ * autocreated commitinfo by @push.rocks/commitinfo
+ */
+export const commitinfo = {
+    name: '@design.estate/wcctools',
+    version: '5.1.0',
+    description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUseUJBQXlCO0lBQy9CLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSxtSkFBbUo7Q0FDakssQ0FBQSJ9

package/dist_ts_web/elements/wcc-contextmenu.d.ts

@@ -0,0 +1,41 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export interface IContextMenuItem {
+    name: string;
+    iconName?: string;
+    action: () => void | Promise<void>;
+    disabled?: boolean;
+}
+export interface IContextMenuOptions {
+    /** The element the menu belongs to: focus returns to it when the menu closes */
+    ownerElement?: HTMLElement;
+}
+export declare class WccContextmenu extends DeesElement {
+    /**
+     * Show a context menu at the event's position. The menu takes focus (its first item),
+     * is operated with the arrow keys, Home/End, Enter/Space and Escape/Tab, and returns
+     * focus to `ownerElement` when it closes from the keyboard or after an action.
+     */
+    static show(event: MouseEvent, menuItems: IContextMenuItem[], options?: IContextMenuOptions): Promise<void>;
+    /** Focus returns here when the menu closes from the keyboard or after an action */
+    private ownerElement;
+    private closing;
+    accessor menuItems: IContextMenuItem[];
+    accessor x: number;
+    accessor y: number;
+    accessor visible: boolean;
+    private boundHandleOutsideClick;
+    private boundHandleKeydown;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    private adjustPosition;
+    private handleOutsideClick;
+    private handleKeydown;
+    private getEnabledItems;
+    /** Focus an enabled item by index (wrapping); the menu itself if there is none */
+    private focusItem;
+    private handleMenuKeydown;
+    private handleItemClick;
+    private close;
+}

package/dist_ts_web/elements/wcc-contextmenu.js

@@ -0,0 +1,329 @@
+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, html, customElement, state, css, cssManager } from '@design.estate/dees-element';
+let WccContextmenu = (() => {
+    let _classDecorators = [customElement('wcc-contextmenu')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _menuItems_decorators;
+    let _menuItems_initializers = [];
+    let _menuItems_extraInitializers = [];
+    let _x_decorators;
+    let _x_initializers = [];
+    let _x_extraInitializers = [];
+    let _y_decorators;
+    let _y_initializers = [];
+    let _y_extraInitializers = [];
+    let _visible_decorators;
+    let _visible_initializers = [];
+    let _visible_extraInitializers = [];
+    var WccContextmenu = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _menuItems_decorators = [property({ type: Array })];
+            _x_decorators = [property({ type: Number })];
+            _y_decorators = [property({ type: Number })];
+            _visible_decorators = [state()];
+            __esDecorate(this, null, _menuItems_decorators, { kind: "accessor", name: "menuItems", static: false, private: false, access: { has: obj => "menuItems" in obj, get: obj => obj.menuItems, set: (obj, value) => { obj.menuItems = value; } }, metadata: _metadata }, _menuItems_initializers, _menuItems_extraInitializers);
+            __esDecorate(this, null, _x_decorators, { kind: "accessor", name: "x", static: false, private: false, access: { has: obj => "x" in obj, get: obj => obj.x, set: (obj, value) => { obj.x = value; } }, metadata: _metadata }, _x_initializers, _x_extraInitializers);
+            __esDecorate(this, null, _y_decorators, { kind: "accessor", name: "y", static: false, private: false, access: { has: obj => "y" in obj, get: obj => obj.y, set: (obj, value) => { obj.y = value; } }, metadata: _metadata }, _y_initializers, _y_extraInitializers);
+            __esDecorate(this, null, _visible_decorators, { kind: "accessor", name: "visible", static: false, private: false, access: { has: obj => "visible" in obj, get: obj => obj.visible, set: (obj, value) => { obj.visible = value; } }, metadata: _metadata }, _visible_initializers, _visible_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            WccContextmenu = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        /**
+         * Show a context menu at the event's position. The menu takes focus (its first item),
+         * is operated with the arrow keys, Home/End, Enter/Space and Escape/Tab, and returns
+         * focus to `ownerElement` when it closes from the keyboard or after an action.
+         */
+        static async show(event, menuItems, options = {}) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Remove any existing context menu
+            const existing = document.querySelector('wcc-contextmenu');
+            if (existing) {
+                existing.remove();
+            }
+            const menu = new WccContextmenu();
+            menu.menuItems = menuItems;
+            menu.x = event.clientX;
+            menu.y = event.clientY;
+            menu.ownerElement = options.ownerElement ?? null;
+            document.body.appendChild(menu);
+            // Wait for render then adjust position if needed
+            await menu.updateComplete;
+            menu.adjustPosition();
+            menu.focusItem(0);
+        }
+        /** Focus returns here when the menu closes from the keyboard or after an action */
+        ownerElement = null;
+        closing = false;
+        #menuItems_accessor_storage = __runInitializers(this, _menuItems_initializers, []);
+        get menuItems() { return this.#menuItems_accessor_storage; }
+        set menuItems(value) { this.#menuItems_accessor_storage = value; }
+        #x_accessor_storage = (__runInitializers(this, _menuItems_extraInitializers), __runInitializers(this, _x_initializers, 0));
+        get x() { return this.#x_accessor_storage; }
+        set x(value) { this.#x_accessor_storage = value; }
+        #y_accessor_storage = (__runInitializers(this, _x_extraInitializers), __runInitializers(this, _y_initializers, 0));
+        get y() { return this.#y_accessor_storage; }
+        set y(value) { this.#y_accessor_storage = value; }
+        #visible_accessor_storage = (__runInitializers(this, _y_extraInitializers), __runInitializers(this, _visible_initializers, false));
+        get visible() { return this.#visible_accessor_storage; }
+        set visible(value) { this.#visible_accessor_storage = value; }
+        boundHandleOutsideClick = (__runInitializers(this, _visible_extraInitializers), this.handleOutsideClick.bind(this));
+        boundHandleKeydown = this.handleKeydown.bind(this);
+        static styles = [
+            css `
+      :host {
+        position: fixed;
+        z-index: 10000;
+        opacity: 0;
+        transform: scale(0.95) translateY(-5px);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        pointer-events: none;
+      }
+
+      :host(.visible) {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        pointer-events: auto;
+      }
+
+      .menu {
+        min-width: 160px;
+        background: #0f0f0f;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+        padding: 4px 0;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-size: 12px;
+      }
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        color: #ccc;
+        cursor: pointer;
+        transition: background 0.1s ease;
+        user-select: none;
+      }
+
+      .menu {
+        outline: none;
+      }
+
+      .menu-item:hover,
+      .menu-item:focus {
+        background: rgba(59, 130, 246, 0.15);
+        color: #fff;
+        outline: none;
+      }
+
+      .menu-item:focus-visible {
+        box-shadow: inset 0 0 0 2px #3b82f6;
+      }
+
+      .menu-item.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .menu-item .icon {
+        font-family: 'Material Symbols Outlined';
+        font-size: 16px;
+        font-weight: normal;
+        font-style: normal;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        opacity: 0.7;
+      }
+
+      .menu-item:hover .icon {
+        opacity: 1;
+      }
+
+      .menu-item .label {
+        flex: 1;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <div class="menu" role="menu" tabindex="-1" @keydown=${this.handleMenuKeydown}>
+        ${this.menuItems.map(item => html `
+          <div
+            class="menu-item ${item.disabled ? 'disabled' : ''}"
+            role="menuitem"
+            tabindex="-1"
+            aria-disabled=${item.disabled ? 'true' : 'false'}
+            @click=${() => this.handleItemClick(item)}
+          >
+            ${item.iconName ? html `<span class="icon" aria-hidden="true">${item.iconName}</span>` : null}
+            <span class="label">${item.name}</span>
+          </div>
+        `)}
+      </div>
+    `;
+        }
+        async connectedCallback() {
+            await super.connectedCallback();
+            // Delay adding listeners to avoid immediate close
+            requestAnimationFrame(() => {
+                document.addEventListener('click', this.boundHandleOutsideClick);
+                document.addEventListener('contextmenu', this.boundHandleOutsideClick);
+                document.addEventListener('keydown', this.boundHandleKeydown);
+                this.classList.add('visible');
+            });
+        }
+        async disconnectedCallback() {
+            await super.disconnectedCallback();
+            document.removeEventListener('click', this.boundHandleOutsideClick);
+            document.removeEventListener('contextmenu', this.boundHandleOutsideClick);
+            document.removeEventListener('keydown', this.boundHandleKeydown);
+        }
+        adjustPosition() {
+            const rect = this.getBoundingClientRect();
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            let x = this.x;
+            let y = this.y;
+            // Adjust if menu goes off right edge
+            if (x + rect.width > windowWidth - 10) {
+                x = windowWidth - rect.width - 10;
+            }
+            // Adjust if menu goes off bottom edge
+            if (y + rect.height > windowHeight - 10) {
+                y = windowHeight - rect.height - 10;
+            }
+            // Ensure not off left or top
+            if (x < 10)
+                x = 10;
+            if (y < 10)
+                y = 10;
+            this.style.left = `${x}px`;
+            this.style.top = `${y}px`;
+        }
+        handleOutsideClick(e) {
+            const path = e.composedPath();
+            if (!path.includes(this)) {
+                this.close();
+            }
+        }
+        handleKeydown(e) {
+            if (e.key === 'Escape') {
+                this.close(true);
+            }
+        }
+        getEnabledItems() {
+            return Array.from(this.shadowRoot?.querySelectorAll('.menu-item:not(.disabled)') ?? []);
+        }
+        /** Focus an enabled item by index (wrapping); the menu itself if there is none */
+        focusItem(indexArg) {
+            const items = this.getEnabledItems();
+            if (items.length === 0) {
+                this.shadowRoot?.querySelector('.menu')?.focus({ preventScroll: true });
+                return;
+            }
+            const index = ((indexArg % items.length) + items.length) % items.length;
+            items[index].focus({ preventScroll: true });
+        }
+        handleMenuKeydown = (e) => {
+            const items = this.getEnabledItems();
+            const current = items.indexOf(this.shadowRoot?.activeElement);
+            switch (e.key) {
+                case 'ArrowDown':
+                    this.focusItem(current + 1);
+                    break;
+                case 'ArrowUp':
+                    this.focusItem(current < 0 ? -1 : current - 1);
+                    break;
+                case 'Home':
+                    this.focusItem(0);
+                    break;
+                case 'End':
+                    this.focusItem(-1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (current >= 0)
+                        items[current].click();
+                    break;
+                case 'Escape':
+                case 'Tab':
+                    this.close(true);
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        async handleItemClick(item) {
+            if (item.disabled)
+                return;
+            await item.action();
+            this.close(true);
+        }
+        close(returnFocus = false) {
+            if (this.closing)
+                return;
+            this.closing = true;
+            if (returnFocus && this.ownerElement?.isConnected) {
+                this.ownerElement.focus({ preventScroll: true });
+            }
+            this.classList.remove('visible');
+            setTimeout(() => this.remove(), 150);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return WccContextmenu = _classThis;
+})();
+export { WccContextmenu };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLWNvbnRleHRtZW51LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3djYy1jb250ZXh0bWVudS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsS0FBSyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztJQWV6SCxjQUFjOzRCQUQxQixhQUFhLENBQUMsaUJBQWlCLENBQUM7Ozs7c0JBQ0csV0FBVzs7Ozs7Ozs7Ozs7Ozs4QkFBbkIsU0FBUSxXQUFXOzs7O3FDQXNDNUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDOzZCQUd6QixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7NkJBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzttQ0FHMUIsS0FBSyxFQUFFO1lBUlIsZ0xBQVMsU0FBUyw2QkFBVCxTQUFTLDZGQUEwQjtZQUc1Qyx3SkFBUyxDQUFDLDZCQUFELENBQUMsNkVBQWE7WUFHdkIsd0pBQVMsQ0FBQyw2QkFBRCxDQUFDLDZFQUFhO1lBR3ZCLDBLQUFTLE9BQU8sNkJBQVAsT0FBTyx5RkFBa0I7WUFoRHBDLDZLQW1SQzs7OztRQWxSQzs7OztXQUlHO1FBQ0ksTUFBTSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQ3RCLEtBQWlCLEVBQ2pCLFNBQTZCLEVBQzdCLFVBQStCLEVBQUU7WUFFakMsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUV4QixtQ0FBbUM7WUFDbkMsTUFBTSxRQUFRLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1lBQzNELElBQUks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

package/dist_ts_web/elements/wcc-dashboard.d.ts

@@ -0,0 +1,119 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import type { TTemplateFactory } from './wcctools.helpers.js';
+import type { IWccConfig, IWccSection, TElementType } from '../wcctools.interfaces.js';
+import * as plugins from '../wcctools.plugins.js';
+import './wcc-frame.js';
+import './wcc-sidebar.js';
+import './wcc-properties.js';
+import { type TTheme } from './wcc-properties.js';
+import { WccFrame, type IWccEmptyState } from './wcc-frame.js';
+type TSectionEntry = [string, any];
+/**
+ * The navigable entries of a section, after classification and the section's own filter and sort.
+ * Elements sections keep only custom element classes with a usable static `demo`;
+ * pages sections keep only template factories.
+ */
+export declare const getSectionItems: (section: IWccSection) => TSectionEntry[];
+/**
+ * Registered custom elements of an elements section that have no usable demo.
+ * They are listed (not navigable) in the sidebar's "Without demo" group.
+ */
+export declare const getSectionItemsWithoutDemo: (section: IWccSection) => TSectionEntry[];
+/** An addressed entry the dashboard cannot preview. */
+export interface IWccUnavailableEntry {
+    kind: 'no-demo' | 'ignored' | 'missing';
+    sectionName: string;
+    itemName: string;
+}
+/** Parameters of a `/wcctools-route/...` URL. */
+export interface IWccRouteParams {
+    sectionName: string;
+    itemName: string;
+    demoIndex?: string;
+    viewport: string;
+    theme: string;
+}
+type TResolvedEntry = {
+    kind: 'listed';
+    section: IWccSection;
+    item: unknown;
+} | {
+    kind: IWccUnavailableEntry['kind'];
+    section: IWccSection | null;
+};
+export declare class WccDashboard extends DeesElement {
+    accessor sections: IWccSection[];
+    accessor selectedSection: IWccSection | null;
+    accessor selectedType: TElementType;
+    accessor selectedItemName: string;
+    accessor selectedItem: TTemplateFactory | DeesElement | null;
+    accessor selectedDemoIndex: number;
+    accessor selectedViewport: plugins.deesDomtools.breakpoints.TViewport;
+    accessor selectedTheme: TTheme;
+    accessor searchQuery: string;
+    accessor pinnedItems: Set<string>;
+    accessor sidebarWidth: number;
+    /** Set when the route addresses an entry that cannot be previewed. */
+    accessor unavailableEntry: IWccUnavailableEntry | null;
+    /** What the frame shows instead of a demo, if anything. */
+    accessor emptyState: IWccEmptyState | null;
+    get isNative(): boolean;
+    private frameScrollY;
+    private sidebarScrollY;
+    private scrollPositionsApplied;
+    private renderedSelection;
+    private renderGeneration;
+    private routeDisposers;
+    private scrollDisposers;
+    private scrollSetupTimeout;
+    private routeSettleTimeout;
+    private scrollUpdateTimeout;
+    accessor wccFrame: Promise<WccFrame>;
+    constructor(config?: IWccConfig);
+    /**
+     * Find a listed item by name across all sections, returns the item and its section
+     */
+    findItemByName(name: string): {
+        item: any;
+        section: IWccSection;
+    } | null;
+    /**
+     * Find a section by name (URL-decoded)
+     */
+    findSectionByName(name: string): IWccSection | null;
+    render(): TemplateResult;
+    toggleNative(): void;
+    private handleDocumentKeydown;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    private connectRoutes;
+    firstUpdated(): Promise<void>;
+    private scheduleScrollListeners;
+    /**
+     * Resolve a section/item pair to a listed entry, or to the reason it cannot be previewed.
+     * The legacy section names `element` and `page` search every section.
+     */
+    resolveEntry(sectionNameArg: string, itemNameArg: string): TResolvedEntry;
+    /**
+     * Apply a `/wcctools-route/...` location to the dashboard state.
+     */
+    applyRoute(routeArg: IWccRouteParams, queryParamsArg?: Record<string, string>): Promise<void>;
+    updated(changedPropertiesArg: Map<string, any>): Promise<void>;
+    /**
+     * Render the selected demo or page into the frame. Only a change of the selected item,
+     * demo index, type or unavailable entry re-renders; theme, viewport, search, pins and
+     * sidebar width leave the rendered demo (and its internal state) untouched.
+     */
+    private renderSelection;
+    private resolveRenderTarget;
+    private getUnavailableEmptyState;
+    private getRouteUrl;
+    buildUrl(): void;
+    private handleFrameScroll;
+    private handleSidebarScroll;
+    setupScrollListeners(): Promise<void>;
+    private debouncedScrollUpdate;
+    private updateUrlWithScrollState;
+    applyScrollPositions(): Promise<void>;
+}
+export {};