@kritzel/editor 0.4.31

package/dist/components/p-Ckqh1tqY.js

@@ -0,0 +1,468 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { KritzelDevicesHelper, KritzelToolConfigHelper, KritzelColorHelper } from '@kritzel/engine';
+import { d as defineCustomElement$e } from './p-DVv8ChhE.js';
+import { d as defineCustomElement$d } from './p-GbCxpbQ6.js';
+import { d as defineCustomElement$c } from './p-R1D8Sr0l.js';
+import { d as defineCustomElement$b } from './p-BDjRSoAc.js';
+import { d as defineCustomElement$a } from './p-ClfOtiNp.js';
+import { d as defineCustomElement$9 } from './p-BfMlwIcG.js';
+import { d as defineCustomElement$8 } from './p-BGmTmdLe.js';
+import { d as defineCustomElement$7 } from './p-CoNexfpB.js';
+import { d as defineCustomElement$6 } from './p-h_uh_Njf.js';
+import { d as defineCustomElement$5 } from './p-BvG3JO85.js';
+import { d as defineCustomElement$4 } from './p-DXuf225S.js';
+import { d as defineCustomElement$3 } from './p-CzUeIini.js';
+import { d as defineCustomElement$2 } from './p-DJxgPPfs.js';
+import { d as defineCustomElement$1 } from './p-BjFrt1q0.js';
+
+const kritzelToolbarCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-toolbar-control-hover-background-color:transparent;--kritzel-toolbar-control-active-background-color:transparent}.kritzel-toolbar{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-toolbar-gap, 8px);height:100%;padding:var(--kritzel-toolbar-padding, 8px);background-color:var(--kritzel-toolbar-background-color, #ffffff);border-radius:var(--kritzel-toolbar-border-radius, 16px);box-shadow:var(--kritzel-toolbar-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-toolbar-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-toolbar-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-toolbar-background-color, #ffffff), transparent);border-radius:var(--kritzel-toolbar-border-radius, 16px) 0 0 var(--kritzel-toolbar-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-toolbar-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-toolbar-border-radius, 16px) var(--kritzel-toolbar-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-toolbar-control-color, #000000);border-radius:var(--kritzel-toolbar-control-border-radius, 12px);padding:var(--kritzel-toolbar-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-toolbar-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-toolbar-control-selected-background-color, #007AFF) !important;color:var(--kritzel-toolbar-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-toolbar-control-selected-background-color, #007bffe3) !important}.kritzel-control:disabled,.kritzel-control.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-toolbar-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-toolbar-control-border-radius, 12px);color:var(--kritzel-toolbar-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-toolbar-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-toolbar-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-toolbar-control-border-radius, 12px) 0 0 var(--kritzel-toolbar-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-toolbar-control-border-radius, 12px) var(--kritzel-toolbar-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-toolbar-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-toolbar-control-selected-background-color, #007AFF) !important;color:var(--kritzel-toolbar-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-control-split .kritzel-control-main:disabled,.kritzel-control-split .kritzel-control-main.disabled,.kritzel-control-split .kritzel-control-dropdown:disabled,.kritzel-control-split .kritzel-control-dropdown.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-toolbar-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-toolbar-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-toolbar-control-selected-background-color, #007AFF);color:var(--kritzel-toolbar-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-toolbar-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-toolbar-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-toolbar-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
+
+const KritzelToolbar = /*@__PURE__*/ proxyCustomElement(class KritzelToolbar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.isToolbarReady = createEvent(this, "isToolbarReady");
+    }
+    get host() { return this; }
+    visible = true;
+    toolbarItems = [];
+    activeControl = null;
+    isUtilityPanelVisible = true;
+    undoState = null;
+    theme = 'light';
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    isToolbarReady;
+    firstConfig = null;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    selectedSubOptions = new Map();
+    canScrollLeft = false;
+    canScrollRight = false;
+    needsScrolling = false;
+    displayValues = null;
+    internalToolbar = [];
+    resolvedDisabled = new Map();
+    handleActiveToolChangeBound = this.handleActiveToolChange.bind(this);
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            this.kritzelEngine?.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        this.activeControl = this.internalToolbar.find(control => control.tool === event.detail) || null;
+        if (this.activeControl?.tool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
+        this.closeTooltip();
+    }
+    handleSelectionChange() {
+        const tool = this.activeControl?.tool;
+        if (tool && typeof tool !== 'function' && tool.toolType === 'selection') {
+            this.updateDisplayValues(tool);
+        }
+    }
+    async onToolbarItemsChange() {
+        if (this.kritzelEngine) {
+            await this.initializeTools();
+        }
+    }
+    onThemeChange() {
+        if (this.activeControl?.tool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
+    }
+    async closeTooltip() {
+        document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll'));
+    }
+    kritzelEngine = null;
+    toolsScrollRef = null;
+    configTriggerRef = null;
+    get activeToolAsTextTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsBrushTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsLineTool() {
+        return this.activeControl?.tool;
+    }
+    get activeToolAsShapeTool() {
+        return this.activeControl?.tool;
+    }
+    handleDisplayValuesChange = (event) => {
+        const newVal = event.detail;
+        if (this.displayValues && this.displayValues.color === newVal.color && this.displayValues.size === newVal.size && this.displayValues.fontFamily === newVal.fontFamily) {
+            return;
+        }
+        this.displayValues = newVal;
+    };
+    updateDisplayValues(tool) {
+        const config = KritzelToolConfigHelper.getToolConfig(tool);
+        if (!config) {
+            this.displayValues = null;
+            return;
+        }
+        const color = tool[config.colorProperty];
+        const opacity = tool[config.opacityProperty] ?? 1;
+        const size = tool[config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity, this.theme),
+            size,
+        };
+        if (tool.toolType === 'text') {
+            displayValues.fontFamily = tool.fontFamily;
+        }
+        // Check for equality implementation to prevent unnecessary re-renders
+        if (this.displayValues &&
+            this.displayValues.color === displayValues.color &&
+            this.displayValues.size === displayValues.size &&
+            this.displayValues.fontFamily === displayValues.fontFamily) {
+            return;
+        }
+        this.displayValues = displayValues;
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        await this.initializeTools();
+        this.isToolbarReady.emit();
+    }
+    componentDidLoad() {
+        this.updateScrollIndicators();
+    }
+    componentDidRender() {
+        this.updateScrollIndicators();
+    }
+    disconnectedCallback() {
+        if (this.kritzelEngine) {
+            this.kritzelEngine.removeEventListener('activeToolChange', this.handleActiveToolChangeBound);
+            this.kritzelEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    updateScrollIndicators() {
+        if (!this.toolsScrollRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
+        const threshold = 2; // Small threshold to account for rounding
+        const canScrollLeft = scrollLeft > threshold;
+        const canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
+        const needsScrolling = scrollWidth > clientWidth;
+        if (this.canScrollLeft !== canScrollLeft)
+            this.canScrollLeft = canScrollLeft;
+        if (this.canScrollRight !== canScrollRight)
+            this.canScrollRight = canScrollRight;
+        if (this.needsScrolling !== needsScrolling)
+            this.needsScrolling = needsScrolling;
+    }
+    handleToolsScroll = () => {
+        this.updateScrollIndicators();
+    };
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+        this.kritzelEngine.addEventListener('activeToolChange', this.handleActiveToolChangeBound);
+        this.kritzelEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+    }
+    async initializeTools() {
+        let hasDefault = false;
+        const newToolbar = this.toolbarItems.map(c => ({ ...c }));
+        await this.resolveDisabledStates(newToolbar);
+        for (const c of newToolbar) {
+            if (c.type === 'tool' && c.tool) {
+                let toolConstructor = c.tool;
+                if (typeof toolConstructor !== 'function') {
+                    toolConstructor = toolConstructor.constructor;
+                }
+                const registered = await this.kritzelEngine.registerTool(c.name, toolConstructor, c.config);
+                if (registered) {
+                    c.tool = registered;
+                }
+            }
+            if (c.type === 'tool' && c.isDefault && !this.isControlDisabled(c) && c.tool) {
+                await this.kritzelEngine.changeActiveTool(c.name);
+                this.activeControl = c;
+                this.updateDisplayValues(c.tool);
+                hasDefault = true;
+            }
+            if (c.type === 'config') {
+                if (this.firstConfig === null) {
+                    this.firstConfig = c;
+                }
+                else {
+                    console.warn('Only one config control is allowed. The first one will be used.');
+                }
+            }
+        }
+        this.internalToolbar = newToolbar;
+        // If no tool is marked as default, activate the first tool control
+        if (!hasDefault) {
+            const firstTool = this.internalToolbar.find(c => c.type === 'tool' && c.tool && !this.isControlDisabled(c));
+            if (firstTool) {
+                await this.kritzelEngine.changeActiveTool(firstTool.name);
+                this.activeControl = firstTool;
+                this.updateDisplayValues(firstTool.tool);
+            }
+        }
+    }
+    /**
+     * Resolves each tool's `isDisabled` (boolean or sync/async function) into `resolvedDisabled`.
+     */
+    async resolveDisabledStates(items) {
+        const entries = await Promise.all(items
+            .filter(item => item.type === 'tool')
+            .map(async (item) => [item.name, await this.evaluateDisabled(item.isDisabled)]));
+        this.resolvedDisabled = new Map(entries);
+    }
+    async evaluateDisabled(value) {
+        if (typeof value === 'function') {
+            try {
+                return !!(await value());
+            }
+            catch {
+                return false;
+            }
+        }
+        return !!value;
+    }
+    isControlDisabled(control) {
+        return this.resolvedDisabled.get(control.name) ?? false;
+    }
+    async handleControlClick(control) {
+        if (this.isControlDisabled(control)) {
+            return;
+        }
+        this.activeControl = control;
+        if (this.activeControl.type === 'tool') {
+            this.updateDisplayValues(this.activeControl.tool);
+            await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+        }
+    }
+    async handleToolChange(event) {
+        this.activeControl = { ...this.activeControl, tool: event.detail };
+        await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+    }
+    /**
+     * Get the currently selected sub-option for a control.
+     * Returns the first sub-option as default if none is selected.
+     */
+    getSelectedSubOption(control) {
+        if (!control.subOptions?.length)
+            return undefined;
+        return this.selectedSubOptions.get(control.name) || control.subOptions[0];
+    }
+    /**
+     * Select a sub-option and update the tool property
+     */
+    async selectSubOption(control, option) {
+        if (this.isControlDisabled(control)) {
+            return;
+        }
+        // Update the selected sub-options map (create new Map for reactivity)
+        const newMap = new Map(this.selectedSubOptions);
+        newMap.set(control.name, option);
+        this.selectedSubOptions = newMap;
+        // Update the tool property if the tool is instantiated
+        if (control.tool && typeof control.tool !== 'function') {
+            control.tool[option.toolProperty] = option.value;
+        }
+        // Close the submenu
+        this.closeTooltip();
+        // Activate this control
+        await this.handleControlClick(control);
+    }
+    render() {
+        const activeToolConfig = this.activeControl?.tool
+            ? KritzelToolConfigHelper.getToolConfig(this.activeControl.tool)
+            : null;
+        const hasConfigUI = activeToolConfig !== null;
+        // Separate tool controls from config control
+        const toolControls = this.internalToolbar.filter(c => c.type === 'tool' || c.type === 'separator');
+        const configControl = this.internalToolbar.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
+        return (h(Host, { key: '138b1071841d6d8de85379e953f5f597216569d3', style: { display: this.visible ? '' : 'none' }, class: {
+                mobile: this.isTouchDevice,
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '566c48a8ebe036f2bd5972b25e1f937cab45e34b', style: {
+                position: 'absolute',
+                bottom: '56px',
+                left: '12px',
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'eda49dc67a1e4da92e4b47e5a97366810464d998', class: "kritzel-toolbar" }, h("div", { key: '018b3062a233b92424a9c64002fe69bb48d6a2d3', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '8afc779f4137ad4410765e7c37fe49e32fe94624', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            // Check if this control has sub-options (split-button)
+            if (control.subOptions?.length) {
+                const selectedSubOption = this.getSelectedSubOption(control);
+                const isActive = this.activeControl?.name === control.name;
+                const isDisabled = this.isControlDisabled(control);
+                return (h("div", { class: {
+                        'kritzel-control-split': true,
+                        'selected': isActive,
+                    }, key: control.name, "data-testid": `tool-${control.name}`, ref: el => {
+                        if (el)
+                            control._anchorRef = el;
+                    } }, h("button", { class: {
+                        'kritzel-control-main': true,
+                        'disabled': isDisabled,
+                    }, disabled: isDisabled, onClick: () => this.handleControlClick(control), "aria-label": selectedSubOption?.label, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-main` }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                        'kritzel-control-dropdown': true,
+                        'visible': isActive,
+                        'disabled': isDisabled,
+                    }, disabled: isDisabled, ref: el => {
+                        if (el)
+                            control._triggerRef = el;
+                    }, "aria-label": `Select ${control.name} options`, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-dropdown`, tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                        'kritzel-submenu-item': true,
+                        'active': option.id === selectedSubOption?.id,
+                    }, key: option.id, "data-testid": `suboption-${option.id}`, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
+            }
+            if (control.type === 'separator') {
+                return h("div", { class: "kritzel-control-separator", key: control.name });
+            }
+            // Regular tool control (no sub-options)
+            return (h("button", { class: {
+                    'kritzel-control': true,
+                    'selected': this.activeControl?.name === control?.name,
+                    'disabled': this.isControlDisabled(control),
+                }, disabled: this.isControlDisabled(control), key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1), "aria-disabled": this.isControlDisabled(control) }, h("kritzel-icon", { name: control.icon })));
+        })), h("div", { key: '08de74d08ced9a4d34d61740729f317fee7724e0', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+                'kritzel-config-container': true,
+                'visible': hasConfigUI,
+            }, key: configControl.name }, h("div", { key: 'c453af061cbf23f83c2418fe5db315008550afeb', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '9818cdc44e0da2f5bbae24697a22add9499aaa9b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'f957bba0e15a7771856c4f04346ada370f0730c8', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '49657d004467ae5f6ec97f70c3d88cfc48e6e3d8', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+                if (el)
+                    this.configTriggerRef = el;
+            }, onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    event.target.click();
+                }
+            }, style: {
+                cursor: 'pointer',
+            } }, this.displayValues && (h("div", { key: '6a8f4f549919b7e87a3338145347597f6e41019c', class: "color-container" }, h("kritzel-color", { key: 'c050efb35a31ac668fcb25fec3cd036f871d6a8f', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+                borderRadius: '50%',
+                border: 'none',
+            } })))))))));
+    }
+    static get assetsDirs() { return ["../assets"]; }
+    static get watchers() { return {
+        "toolbarItems": [{
+                "onToolbarItemsChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }]
+    }; }
+    static get style() { return kritzelToolbarCss(); }
+}, [513, "kritzel-toolbar", {
+        "visible": [4],
+        "toolbarItems": [16],
+        "activeControl": [1040],
+        "isUtilityPanelVisible": [4, "is-utility-panel-visible"],
+        "undoState": [16],
+        "theme": [1],
+        "terms": [16],
+        "firstConfig": [32],
+        "isTouchDevice": [32],
+        "selectedSubOptions": [32],
+        "canScrollLeft": [32],
+        "canScrollRight": [32],
+        "needsScrolling": [32],
+        "displayValues": [32],
+        "internalToolbar": [32],
+        "resolvedDisabled": [32],
+        "closeTooltip": [64]
+    }, [[8, "keydown", "handleKeyDown"]], {
+        "toolbarItems": [{
+                "onToolbarItemsChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-toolbar", "kritzel-color", "kritzel-color-palette", "kritzel-dropdown", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-line-endings", "kritzel-opacity-slider", "kritzel-shape-fill", "kritzel-stroke-size", "kritzel-tool-config", "kritzel-tooltip", "kritzel-utility-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-toolbar":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelToolbar);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$e();
+            }
+            break;
+        case "kritzel-color-palette":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$d();
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$c();
+            }
+            break;
+        case "kritzel-font":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "kritzel-font-family":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "kritzel-font-size":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "kritzel-line-endings":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "kritzel-opacity-slider":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kritzel-shape-fill":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kritzel-stroke-size":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-tool-config":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-utility-panel":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelToolbar as K, defineCustomElement as d };

package/dist/components/p-ClfOtiNp.js

@@ -0,0 +1,84 @@
+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-R1D8Sr0l.js';
+
+const kritzelFontFamilyCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}`;
+
+const KritzelFontFamily = /*@__PURE__*/ proxyCustomElement(class KritzelFontFamily extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.fontFamilyChange = createEvent(this, "fontFamilyChange");
+    }
+    fontOptions = [];
+    selectedFontFamily;
+    fontFamilyChange;
+    handleFontOptionsChange() {
+        this.ensureValidSelectedFont(this.resolveFontOptions());
+    }
+    componentWillLoad() {
+        this.ensureValidSelectedFont(this.resolveFontOptions());
+    }
+    handleDropdownValueChange = (event) => {
+        this.fontFamilyChange.emit(event.detail);
+    };
+    ensureValidSelectedFont(options) {
+        if (options.length === 0) {
+            return;
+        }
+        const normalizedSelected = this.selectedFontFamily?.trim().toLocaleLowerCase();
+        const isValidCurrentFont = options.some(opt => opt.value.trim().toLocaleLowerCase() === normalizedSelected);
+        if (!normalizedSelected || !isValidCurrentFont) {
+            this.selectedFontFamily = options[0].value;
+        }
+    }
+    resolveFontOptions() {
+        return this.fontOptions;
+    }
+    render() {
+        const fontOptions = this.resolveFontOptions();
+        const selectedOption = fontOptions.find(option => option.value === this.selectedFontFamily);
+        const selectedFontFamily = selectedOption?.cssFontFamily ?? this.selectedFontFamily;
+        const dropdownOptions = fontOptions.map(option => ({
+            value: option.value,
+            label: option.label,
+            style: { fontFamily: option.cssFontFamily ?? option.value },
+        }));
+        return (h(Host, { key: '42b2805b1d2df47a1b2336dffac32ee50740809e' }, h("kritzel-dropdown", { key: '3e1f019b2ecacea061f687c93f4fdd6a384b93b7', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
+    }
+    static get watchers() { return {
+        "fontOptions": [{
+                "handleFontOptionsChange": 0
+            }]
+    }; }
+    static get style() { return kritzelFontFamilyCss(); }
+}, [513, "kritzel-font-family", {
+        "fontOptions": [16],
+        "selectedFontFamily": [1025, "selected-font-family"]
+    }, undefined, {
+        "fontOptions": [{
+                "handleFontOptionsChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-font-family", "kritzel-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-font-family":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelFontFamily);
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelFontFamily as K, defineCustomElement as d };