@kritzel/editor 0.4.31

package/dist/components/p-BZ_KnHdR.js

@@ -0,0 +1,222 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { KritzelDevicesHelper } from '@kritzel/engine';
+import { d as defineCustomElement$4 } from './p-BGmTmdLe.js';
+import { d as defineCustomElement$3 } from './p-DqOC_Yck.js';
+import { d as defineCustomElement$2 } from './p-BN8VWPlq.js';
+import { d as defineCustomElement$1 } from './p-CS3YZVYE.js';
+
+const kritzelMoreMenuCss = () => `:host{display:inline-flex;z-index:1}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
+
+const KritzelMoreMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMoreMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.itemSelect = createEvent(this, "itemSelect");
+    }
+    get host() { return this; }
+    /**
+     * Whether the menu button is visible
+     */
+    visible = false;
+    /**
+     * The menu items to display in the dropdown.
+     * Items with `isVisible` set to `false` will be filtered out.
+     * Items with an `action` will have that action invoked on selection.
+     */
+    items = [];
+    /**
+     * The icon to display on the button
+     */
+    icon = 'ellipsis-vertical';
+    /**
+     * The size of the icon
+     */
+    iconSize = 24;
+    /**
+     * Offset Y for the portal positioning
+     */
+    offsetY = 4;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    /**
+     * Emitted when a menu item is selected
+     */
+    itemSelect;
+    menuAnchor = null;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    visibleItems = [];
+    visibilityResolveVersion = 0;
+    onItemsChange() {
+        void this.resolveVisibleItems();
+    }
+    async open() {
+        if (!this.visible || this.menuAnchor) {
+            return;
+        }
+        window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
+        this.menuAnchor = this.host;
+        this.visibleItems = this.filterVisibleItemsSync(this.items ?? []);
+        await this.resolveVisibleItems();
+    }
+    async close() {
+        this.closeMenu();
+    }
+    componentWillLoad() {
+        void this.resolveVisibleItems();
+    }
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        if (this.menuAnchor) {
+            this.closeMenu();
+        }
+        else {
+            void this.open();
+        }
+    };
+    closeMenu = () => {
+        this.menuAnchor = null;
+    };
+    async evaluateVisibility(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                return (await visibility()) !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    evaluateVisibilitySync(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                const result = visibility();
+                return result instanceof Promise ? null : result !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    filterVisibleItemsSync(items) {
+        return items.reduce((visibleItems, item) => {
+            const isVisible = this.evaluateVisibilitySync(item.isVisible);
+            if (isVisible === null || !isVisible) {
+                return visibleItems;
+            }
+            if (!item.children?.length) {
+                visibleItems.push(item);
+                return visibleItems;
+            }
+            visibleItems.push({
+                ...item,
+                children: this.filterVisibleItemsSync(item.children),
+            });
+            return visibleItems;
+        }, []);
+    }
+    async filterVisibleItems(items) {
+        const resolved = await Promise.all(items.map(async (item) => {
+            const isVisible = await this.evaluateVisibility(item.isVisible);
+            if (!isVisible) {
+                return null;
+            }
+            if (!item.children?.length) {
+                return item;
+            }
+            return {
+                ...item,
+                children: await this.filterVisibleItems(item.children),
+            };
+        }));
+        return resolved.filter((item) => !!item);
+    }
+    async resolveVisibleItems() {
+        const version = ++this.visibilityResolveVersion;
+        const items = this.items ?? [];
+        const resolvedItems = await this.filterVisibleItems(items);
+        if (version !== this.visibilityResolveVersion) {
+            return;
+        }
+        this.visibleItems = resolvedItems;
+    }
+    resolveMenuLabels(items) {
+        return items.map(item => ({
+            ...item,
+            label: this.terms[item.label] ?? item.label,
+            children: item.children ? this.resolveMenuLabels(item.children) : undefined,
+        }));
+    }
+    handleMenuItemSelect = (event) => {
+        const { item, parent } = event.detail;
+        if (item.action) {
+            item.action(item, parent);
+        }
+        this.itemSelect.emit(event.detail);
+        this.closeMenu();
+    };
+    render() {
+        return (h(Host, { key: '841c9097f30d0fd9e73741ec13541b5183f3a84d', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'ac494e6a6f7e7a5155fc3ceac25517000ed41068', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '0d7edc5a525e692dc3692b616af0e198758ca95e', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'cc87018d0816f3c21be992bccc9feda460c98a32', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'abb10d21c437c660de25af6313081a9064ac2cac', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '3411f1403393845c098243d309cdb5e52c0eede8', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
+    }
+    static get watchers() { return {
+        "items": [{
+                "onItemsChange": 0
+            }]
+    }; }
+    static get style() { return kritzelMoreMenuCss(); }
+}, [513, "kritzel-more-menu", {
+        "visible": [4],
+        "items": [16],
+        "icon": [1],
+        "iconSize": [2, "icon-size"],
+        "offsetY": [2, "offset-y"],
+        "terms": [16],
+        "menuAnchor": [32],
+        "isTouchDevice": [32],
+        "visibleItems": [32],
+        "open": [64],
+        "close": [64]
+    }, undefined, {
+        "items": [{
+                "onItemsChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-more-menu", "kritzel-icon", "kritzel-menu", "kritzel-menu-item", "kritzel-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-more-menu":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelMoreMenu);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-menu":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-menu-item":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelMoreMenu as K, defineCustomElement as d };

package/dist/components/p-B_gT0lCn.js

@@ -0,0 +1,94 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+
+const kritzelPillTabsCss = () => `:host{display:block;max-width:100%}.pill-tabs-container{display:inline-flex;align-items:center;gap:4px;padding:4px;max-width:100%;border-radius:var(--kritzel-pill-tabs-border-radius, 10px);background:var(--kritzel-pill-tabs-background, #f0f0f0);box-sizing:border-box}.pill-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%;padding:8px 16px;border:none;border-radius:var(--kritzel-pill-tabs-tab-border-radius, 8px);background:var(--kritzel-pill-tabs-tab-background, transparent);color:var(--kritzel-pill-tabs-tab-text-color, #666666);font-family:inherit;font-size:14px;font-weight:500;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;white-space:nowrap}.pill-tab:hover:not(.selected){background:var(--kritzel-pill-tabs-tab-background-hover, rgba(0, 0, 0, 0.05))}.pill-tab.selected{background:var(--kritzel-pill-tabs-tab-background-selected, #ffffff);color:var(--kritzel-pill-tabs-tab-text-color-selected, #000000);box-shadow:var(--kritzel-pill-tabs-tab-shadow-selected, 0 1px 3px rgba(0, 0, 0, 0.1))}.pill-tab:focus{outline:none}.pill-tab:focus-visible{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.pill-tab-label{display:block;min-width:0;max-width:var(--kritzel-pill-tabs-tab-label-max-width, 10rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pill-tab kritzel-icon{flex-shrink:0}`;
+
+const KritzelPillTabs = /*@__PURE__*/ proxyCustomElement(class KritzelPillTabs extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /**
+     * Array of tab definitions to render
+     */
+    tabs = [];
+    /**
+     * Currently selected tab ID
+     */
+    value;
+    /**
+     * Emitted when the selected tab changes
+     */
+    valueChange;
+    handleTabClick(tabId) {
+        if (this.value !== tabId) {
+            this.value = tabId;
+            this.valueChange.emit(tabId);
+        }
+    }
+    handleKeyDown(event, index) {
+        const tabButtons = this.tabs;
+        let newIndex = index;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = index > 0 ? index - 1 : tabButtons.length - 1;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = index < tabButtons.length - 1 ? index + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = tabButtons.length - 1;
+                break;
+            default:
+                return;
+        }
+        const newTab = tabButtons[newIndex];
+        this.handleTabClick(newTab.id);
+        // Focus the new tab button
+        const container = event.currentTarget;
+        const parent = container.parentElement;
+        const buttons = parent?.querySelectorAll('button');
+        buttons?.[newIndex]?.focus();
+    }
+    render() {
+        return (h(Host, { key: '16fce447fb7db0539ba115ef19771ac78f30a302' }, h("div", { key: '95487da922621b18c1ec422eb0d464131dbc28d3', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
+                'pill-tab': true,
+                'selected': this.value === tab.id,
+            }, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index) }, tab.icon && h("kritzel-icon", { name: tab.icon, size: 16 }), h("span", { class: "pill-tab-label" }, tab.label)))))));
+    }
+    static get style() { return kritzelPillTabsCss(); }
+}, [513, "kritzel-pill-tabs", {
+        "tabs": [16],
+        "value": [1025]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-pill-tabs", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-pill-tabs":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelPillTabs);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelPillTabs as K, defineCustomElement as d };

package/dist/components/p-BfMlwIcG.js

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-BDjRSoAc.js';
+
+const kritzelFontSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}`;
+
+const KritzelFontSize = /*@__PURE__*/ proxyCustomElement(class KritzelFontSize extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.sizeChange = createEvent(this, "sizeChange");
+    }
+    sizes = [8, 10, 12, 16, 20, 24];
+    selectedSize = null;
+    fontFamily = 'Arial';
+    sizeChange;
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    handleKeyDown(event, size) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSizeClick(size);
+        }
+    }
+    render() {
+        const color = 'var(--kritzel-global-text-primary)';
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: 'c9c651548fe820f1703e8d560bde2ed0be368fab' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
+    }
+    static get style() { return kritzelFontSizeCss(); }
+}, [513, "kritzel-font-size", {
+        "sizes": [16],
+        "selectedSize": [1026, "selected-size"],
+        "fontFamily": [1, "font-family"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-font-size", "kritzel-font"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-font-size":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelFontSize);
+            }
+            break;
+        case "kritzel-font":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelFontSize as K, defineCustomElement as d };

package/dist/components/p-BjFrt1q0.js

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+
+const kritzelUtilityPanelCss = () => `:host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:1}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}`;
+
+const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilityPanel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.undo = createEvent(this, "undo");
+        this.redo = createEvent(this, "redo");
+        this.delete = createEvent(this, "delete");
+    }
+    undoState = null;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    undo;
+    redo;
+    delete;
+    handleUndo(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.undo.emit();
+        }
+    }
+    handleRedo(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.redo.emit();
+    }
+    render() {
+        return (h(Host, { key: '716bf600bb8ef3e1c7663183c2b4d2927e554faf' }, h("button", { key: '64b300d1d10c30d623fce76a919610e7b553c504', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '86c0711e5a61f837bf279600e27d896a81ae1d5c', name: "undo" })), h("button", { key: '9052c2023254caca5109364b1c82d42e0900d54b', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '03060f21b1551bcdae724b4de03010127647c036', name: "redo" })), h("div", { key: '5ac88e76663bb2d5c90f16b76021123fe64d898a', class: "utility-separator" }), h("button", { key: '7cbbc765c1c4b642d8371a25348d1d886b9b5440', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'a8f6c8e8a8783e45d781b50aa7aec51b3f29dd5c', name: "delete" }))));
+    }
+    static get style() { return kritzelUtilityPanelCss(); }
+}, [513, "kritzel-utility-panel", {
+        "undoState": [16],
+        "terms": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-utility-panel", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-utility-panel":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelUtilityPanel);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelUtilityPanel as K, defineCustomElement as d };