kritzel-stencil 0.1.0 → 0.1.2

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -1,7 +1,12 @@
 import { h, Host } from "@stencil/core";
 import { KritzelBrushTool } from "../../../classes/tools/brush-tool.class";
+import { KritzelLineTool } from "../../../classes/tools/line-tool.class";
+import { KritzelShapeTool } from "../../../classes/tools/shape-tool.class";
 import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
+import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
+import { KritzelToolConfigHelper } from "../../../helpers/tool-config.helper";
+import { KritzelColorHelper } from "../../../helpers/color.helper";
 export class KritzelControls {
     host;
     controls = [];
@@ -14,9 +19,23 @@ export class KritzelControls {
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
     selectedSubOptions = new Map();
     openSubMenuControl = null;
+    canScrollLeft = false;
+    canScrollRight = false;
+    displayValues = null;
     handleDocumentClick(event) {
-        const element = event.target;
-        if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
+        if (!this.kritzelEngine) {
+            return;
+        }
+        // Use composedPath to check if click is inside tooltip (works across shadow DOM boundaries)
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => {
+            const element = el;
+            if (element.tagName) {
+                return element.tagName.toLowerCase() === 'kritzel-tooltip' || element.classList?.contains('kritzel-tooltip');
+            }
+            return false;
+        });
+        if (isInsideTooltip) {
             return;
         }
         this.isTooltipVisible = false;
@@ -31,23 +50,87 @@ export class KritzelControls {
     }
     async handleActiveToolChange(event) {
         this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        if (this.activeControl?.tool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
+    }
+    handleSelectionChange() {
+        if (this.activeControl?.tool instanceof KritzelSelectionTool) {
+            this.updateDisplayValues(this.activeControl.tool);
+        }
     }
     async closeTooltip() {
         this.isTooltipVisible = false;
     }
     kritzelEngine = null;
     tooltipRef = null;
+    toolsScrollRef = 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),
+            size,
+        };
+        if (tool instanceof KritzelTextTool) {
+            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.isControlsReady.emit();
     }
+    componentDidLoad() {
+        this.updateScrollIndicators();
+    }
+    updateScrollIndicators() {
+        if (!this.toolsScrollRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
+        const threshold = 2; // Small threshold to account for rounding
+        this.canScrollLeft = scrollLeft > threshold;
+        this.canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
+    }
+    handleToolsScroll = () => {
+        this.updateScrollIndicators();
+    };
     async initializeEngine() {
         await customElements.whenDefined('kritzel-engine');
         this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
@@ -63,6 +146,7 @@ export class KritzelControls {
             if (c.type === 'tool' && c.isDefault && c.tool) {
                 await this.kritzelEngine.changeActiveTool(c.tool);
                 this.activeControl = c;
+                this.updateDisplayValues(c.tool);
             }
             if (c.type === 'config') {
                 if (this.firstConfig === null) {
@@ -77,6 +161,7 @@ export class KritzelControls {
     async handleControlClick(control) {
         this.activeControl = control;
         if (this.activeControl.type === 'tool') {
+            this.updateDisplayValues(this.activeControl.tool);
             await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
         }
     }
@@ -141,56 +226,62 @@ export class KritzelControls {
     }
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
-            this.activeControl?.tool instanceof KritzelTextTool;
-        return (h(Host, { key: 'ed5816cbeb8fe8b91e14b23bf61df4753fb0da0f', class: {
+            this.activeControl?.tool instanceof KritzelTextTool ||
+            this.activeControl?.tool instanceof KritzelLineTool ||
+            this.activeControl?.tool instanceof KritzelShapeTool ||
+            (this.activeControl?.tool instanceof KritzelSelectionTool && this.activeControl.tool.hasSelection());
+        // Separate tool controls from config control
+        const toolControls = this.controls.filter(c => c.type === 'tool');
+        const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
+        return (h(Host, { key: 'db2a043a2a32d10d7f27c01123da63115781941c', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7218fff9c89f525baf655eea46aec1698a28babd', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '09104351c9f178b8d0dbc0636cf9cc230b2bca53', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1dc0fa7b02a953474aae9c7822c651d5006e89e5', class: "kritzel-controls" }, this.controls.map(control => {
-            if (control.type === 'tool') {
-                // 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 isSubMenuOpen = this.openSubMenuControl?.name === control.name;
-                    return (h("div", { class: {
-                            'kritzel-control-split': true,
-                            'selected': isActive,
-                        }, key: control.name, ref: el => {
-                            if (el)
-                                control._anchorRef = el;
-                        } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
-                            'kritzel-control-dropdown': true,
-                            'visible': isActive,
-                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, 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, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
-                }
-                // Regular tool control (no sub-options)
-                return (h("button", { class: {
-                        'kritzel-control': true,
-                        'selected': this.activeControl?.name === control?.name,
-                    }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
-            }
-            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '22f95249dddcf05a75425f96ab5381fe8a4824d4', class: "kritzel-controls" }, h("div", { key: 'fcca99e2a56f401b28205b8806497c46b7f9a94b', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '145802334aa83b0190a70dd2a3aca4389cb8b88c', class: "kritzel-tools-scroll", ref: el => {
+                this.toolsScrollRef = el;
+                // Update indicators when ref is set
+                if (el)
+                    this.updateScrollIndicators();
+            }, 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 isSubMenuOpen = this.openSubMenuControl?.name === control.name;
                 return (h("div", { class: {
-                        'kritzel-config-container': true,
-                        'visible': hasConfigUI,
-                    }, key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
-                        if (event.key === 'Enter') {
-                            this.handleConfigClick?.(event);
-                        }
-                    }, style: {
-                        cursor: 'pointer',
-                    } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
-                        borderRadius: '50%',
-                        border: 'none',
-                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))))));
+                        'kritzel-control-split': true,
+                        'selected': isActive,
+                    }, key: control.name, ref: el => {
+                        if (el)
+                            control._anchorRef = el;
+                    } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                        'kritzel-control-dropdown': true,
+                        'visible': isActive,
+                    }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, 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, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
             }
-        }))));
+            // Regular tool control (no sub-options)
+            return (h("button", { class: {
+                    'kritzel-control': true,
+                    'selected': this.activeControl?.name === control?.name,
+                }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
+        })), h("div", { key: '43e7811998855f57097b743998363fd6866bfb29', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight } }), configControl && this.activeControl && (h("div", { class: {
+                'kritzel-config-container': true,
+                'visible': hasConfigUI,
+            }, key: configControl.name }, h("div", { key: 'c1ff98f16c41d45666915b96931f23e0cf12ed6f', class: "config-gradient-left" }), h("kritzel-tooltip", { key: 'eac68125daa371d751b65ac561e33848cad3bd69', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '83ed025386d9d1b3ec8b52e99930645c4c35b20a', tool: this.activeControl.tool, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'cf18abb832c10826685fb41794a42b8b6a6a7486', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.handleConfigClick?.(event);
+                }
+            }, style: {
+                cursor: 'pointer',
+            } }, this.activeControl.tool instanceof KritzelTextTool && this.displayValues ? (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.displayValues.fontFamily, size: this.displayValues.size, color: this.displayValues.color }))) : this.displayValues && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.displayValues.color, size: this.displayValues.size, style: {
+                borderRadius: '50%',
+                border: 'none',
+            } })))))))));
     }
     static get is() { return "kritzel-controls"; }
     static get encapsulation() { return "shadow"; }
@@ -217,7 +308,8 @@ export class KritzelControls {
                         "KritzelToolbarControl": {
                             "location": "import",
                             "path": "../../../interfaces/toolbar-control.interface",
-                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl"
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl",
+                            "referenceLocation": "KritzelToolbarControl"
                         }
                     }
                 },
@@ -241,7 +333,8 @@ export class KritzelControls {
                         "KritzelToolbarControl": {
                             "location": "import",
                             "path": "../../../interfaces/toolbar-control.interface",
-                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl"
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelToolbarControl",
+                            "referenceLocation": "KritzelToolbarControl"
                         }
                     }
                 },
@@ -285,7 +378,8 @@ export class KritzelControls {
                         "KritzelUndoState": {
                             "location": "import",
                             "path": "../../../interfaces/undo-state.interface",
-                            "id": "src/interfaces/undo-state.interface.ts::KritzelUndoState"
+                            "id": "src/interfaces/undo-state.interface.ts::KritzelUndoState",
+                            "referenceLocation": "KritzelUndoState"
                         }
                     }
                 },
@@ -307,7 +401,10 @@ export class KritzelControls {
             "isTooltipVisible": {},
             "isTouchDevice": {},
             "selectedSubOptions": {},
-            "openSubMenuControl": {}
+            "openSubMenuControl": {},
+            "canScrollLeft": {},
+            "canScrollRight": {},
+            "displayValues": {}
         };
     }
     static get events() {
@@ -369,6 +466,12 @@ export class KritzelControls {
                 "target": "document",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "objectsSelectionChange",
+                "method": "handleSelectionChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css

@@ -0,0 +1,38 @@
+.expand-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--kritzel-icon-color, currentColor);
+  transition: transform 0.2s ease;
+}
+
+.expand-toggle:hover {
+  opacity: 0.7;
+}
+
+.expand-toggle:focus {
+  outline: none;
+}
+
+.expand-toggle:focus-visible {
+  outline: 2px solid var(--kritzel-focus-color, #007acc);
+  outline-offset: 2px;
+}
+
+.expand-toggle:active {
+  transform: scale(0.95);
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--kritzel-divider-color, #e0e0e0);
+  margin: 4px 0;
+  width: 100%;
+}

package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js

@@ -0,0 +1,321 @@
+import { Host, h } from "@stencil/core";
+import { KritzelToolConfigHelper } from "../../../helpers/tool-config.helper";
+import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
+import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
+import { KritzelColorHelper } from "../../../helpers/color.helper";
+export class KritzelToolConfig {
+    tool;
+    handleToolChange(newTool, oldTool) {
+        const newConfig = KritzelToolConfigHelper.getToolConfig(newTool);
+        // Maintain settings when switching between shape tools
+        if (oldTool && newTool && newConfig?.type === 'shape') {
+            const oldConfig = KritzelToolConfigHelper.getToolConfig(oldTool);
+            if (oldConfig?.type === 'shape') {
+                // Copy properties that should persist
+                const propsToCopy = [
+                    newConfig.colorProperty, // strokeColor
+                    newConfig.sizeProperty, // strokeWidth
+                    newConfig.opacityProperty, // opacity
+                    'fillColor' // shape specific
+                ];
+                propsToCopy.forEach(prop => {
+                    if (prop && oldTool[prop] !== undefined) {
+                        newTool[prop] = oldTool[prop];
+                    }
+                });
+            }
+        }
+        this.config = newConfig;
+        if (this.config) {
+            this.updatePalette();
+            this.currentOpacity = newTool[this.config.opacityProperty] ?? 1;
+            // Emit the values since they might have been updated from the old tool
+            this.emitDisplayValues();
+        }
+    }
+    isExpanded = false;
+    toolChange;
+    displayValuesChange;
+    config;
+    palette = [];
+    currentOpacity = 1;
+    updateTrigger = 0;
+    handleSelectionChange() {
+        if (this.tool instanceof KritzelSelectionTool) {
+            this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+            if (this.config) {
+                this.updatePalette();
+                this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+                this.emitDisplayValues();
+            }
+        }
+    }
+    componentWillLoad() {
+        this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+        if (this.config) {
+            this.updatePalette();
+            this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+            this.emitDisplayValues();
+        }
+    }
+    emitDisplayValues() {
+        if (!this.config)
+            return;
+        const color = this.tool[this.config.colorProperty];
+        const opacity = this.currentOpacity;
+        const size = this.tool[this.config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity),
+            size,
+        };
+        if (this.tool instanceof KritzelTextTool) {
+            displayValues.fontFamily = this.tool.fontFamily;
+        }
+        this.displayValuesChange.emit(displayValues);
+    }
+    updatePalette() {
+        if (!this.config)
+            return;
+        if (this.config.paletteSource === 'palettes') {
+            // Brush tool has palettes[type]
+            const brushTool = this.tool;
+            this.palette = brushTool.palettes[brushTool.type] || [];
+        }
+        else if (this.config.paletteSource === 'palette') {
+            // Line, Shape, Text tools have palette
+            this.palette = this.tool.palette || [];
+        }
+    }
+    handleToggleExpand = () => {
+        this.isExpanded = !this.isExpanded;
+    };
+    handleColorChange = (event) => {
+        this.tool[this.config.colorProperty] = event.detail;
+        // Special handling for shape fill: when color (stroke) changes, update fill color if it's currently filled
+        if (this.config.type === 'shape' || this.config.type === 'selection') {
+            const tool = this.tool;
+            if (tool.fillColor !== 'transparent') {
+                tool.fillColor = event.detail;
+            }
+        }
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleSizeChange = (event) => {
+        this.tool[this.config.sizeProperty] = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleOpacityChange = (event) => {
+        this.tool[this.config.opacityProperty] = event.detail;
+        this.currentOpacity = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+    };
+    handlePropertyChange = (propertyName, value) => {
+        // Special handling for shape fill
+        if ((this.config.type === 'shape' || this.config.type === 'selection') && propertyName === 'fillColor') {
+            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : 'transparent';
+            this.tool.fillColor = newFillColor;
+            // When switching to fill mode, also update stroke color to match
+            if (value === 'filled') {
+                this.tool[this.config.colorProperty] = newFillColor;
+            }
+        }
+        // Special handling for brush type change
+        else if (this.config.type === 'brush' && propertyName === 'type') {
+            const brushTool = this.tool;
+            brushTool.type = value;
+            this.palette = brushTool.palettes[value];
+            brushTool.color = this.palette[0];
+            this.emitDisplayValues();
+        }
+        else {
+            this.tool[propertyName] = value;
+            // Emit display values for font family changes
+            if (propertyName === 'fontFamily') {
+                this.emitDisplayValues();
+            }
+        }
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    getShapeFillValue() {
+        const fillColor = this.tool.fillColor;
+        return fillColor === 'transparent' ? 'transparent' : 'filled';
+    }
+    renderControl(control) {
+        const value = this.tool[control.propertyName];
+        switch (control.type) {
+            case 'stroke-size':
+                return (h("kritzel-stroke-size", { key: control.type, selectedSize: value, onSizeChange: this.handleSizeChange }));
+            case 'font-size':
+                return (h("kritzel-font-size", { key: control.type, selectedSize: value, fontFamily: this.tool.fontFamily, onSizeChange: this.handleSizeChange }));
+            case 'line-endings':
+                return (h("kritzel-line-endings", { key: control.type, value: value, strokeColor: this.tool[this.config.colorProperty], onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'shape-fill':
+                return (h("kritzel-shape-fill", { key: control.type, value: this.getShapeFillValue(), onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'font-family':
+                return (h("kritzel-font-family", { key: control.type, selectedFontFamily: value, onFontFamilyChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            default:
+                return null;
+        }
+    }
+    render() {
+        if (!this.config)
+            return null;
+        const shouldShowExpandButton = this.palette.length > 6 || this.config.type === 'text';
+        // Separate size control from other controls
+        const sizeControl = this.config.controls.find(c => c.type === 'stroke-size' || c.type === 'font-size');
+        const otherControls = this.config.controls.filter(c => c.type !== 'stroke-size' && c.type !== 'font-size');
+        return (h(Host, null, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                gap: '8px',
+                width: '100%',
+            } }, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                flex: '1',
+            } }, h("kritzel-color-palette", { colors: this.palette, selectedColor: this.tool[this.config.colorProperty], isExpanded: this.isExpanded, isOpaque: true, opacity: this.currentOpacity, onColorChange: this.handleColorChange }), sizeControl && this.renderControl(sizeControl), h("kritzel-opacity-slider", { value: this.tool[this.config.opacityProperty], previewColor: this.tool[this.config.colorProperty], onValueChange: this.handleOpacityChange }), otherControls.map((control) => [
+            h("div", { class: "divider" }),
+            this.renderControl(control),
+        ])), shouldShowExpandButton && (h("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-start',
+            } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
+    }
+    static get is() { return "kritzel-tool-config"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-tool-config.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-tool-config.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tool": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ConfigurableTool",
+                    "resolved": "KritzelBrushTool | KritzelLineTool | KritzelSelectionTool | KritzelShapeTool | KritzelTextTool",
+                    "references": {
+                        "ConfigurableTool": {
+                            "location": "import",
+                            "path": "../../../interfaces/tool-config.interface",
+                            "id": "src/interfaces/tool-config.interface.ts::ConfigurableTool",
+                            "referenceLocation": "ConfigurableTool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expanded",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "config": {},
+            "palette": {},
+            "currentOpacity": {},
+            "updateTrigger": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toolChange",
+                "name": "toolChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ConfigurableTool",
+                    "resolved": "KritzelBrushTool | KritzelLineTool | KritzelSelectionTool | KritzelShapeTool | KritzelTextTool",
+                    "references": {
+                        "ConfigurableTool": {
+                            "location": "import",
+                            "path": "../../../interfaces/tool-config.interface",
+                            "id": "src/interfaces/tool-config.interface.ts::ConfigurableTool",
+                            "referenceLocation": "ConfigurableTool"
+                        }
+                    }
+                }
+            }, {
+                "method": "displayValuesChange",
+                "name": "displayValuesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ToolDisplayValues",
+                    "resolved": "ToolDisplayValues",
+                    "references": {
+                        "ToolDisplayValues": {
+                            "location": "import",
+                            "path": "../../../interfaces/tool-config.interface",
+                            "id": "src/interfaces/tool-config.interface.ts::ToolDisplayValues",
+                            "referenceLocation": "ToolDisplayValues"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "tool",
+                "methodName": "handleToolChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "objectsSelectionChange",
+                "method": "handleSelectionChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}