kritzel-stencil 0.1.1 → 0.1.2

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BeKMS-Zt.js');
+var index = require('./index-Bj0n7fQQ.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["kritzel-color_22.cjs",[[512,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}]}],[513,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"canScrollLeft":[32],"canScrollRight":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}]}],[513,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[513,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":[{"handleToolChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-color",{"value":[1],"size":[2]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return index.bootstrapLazy([["kritzel-color_24.cjs",[[512,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}]}],[513,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"canScrollLeft":[32],"canScrollRight":[32],"displayValues":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]]],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"triggerSelectionChange":[64],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}]}],[513,"kritzel-tool-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"config":[32],"palette":[32],"currentOpacity":[32],"updateTrigger":[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{"tool":[{"handleToolChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"],"opacity":[2]}],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[513,"kritzel-line-endings",{"styles":[16],"value":[1040],"strokeColor":[1,"stroke-color"]}],[513,"kritzel-opacity-slider",{"value":[1026],"min":[2],"max":[2],"step":[2],"previewColor":[1,"preview-color"]}],[513,"kritzel-shape-fill",{"value":[1025]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[513,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/stencil.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BeKMS-Zt.js');
+var index = require('./index-Bj0n7fQQ.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.40.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.41.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["kritzel-color_22.cjs",[[512,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}]}],[513,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"canScrollLeft":[32],"canScrollRight":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"]]],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}]}],[513,"kritzel-control-text-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"]}],[513,"kritzel-control-brush-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"palette":[32]},null,{"tool":[{"handleToolChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-color",{"value":[1],"size":[2]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return index.bootstrapLazy([["kritzel-color_24.cjs",[[512,"kritzel-editor",{"scaleMax":[2,"scale-max"],"scaleMin":[2,"scale-min"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}]}],[513,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"canScrollLeft":[32],"canScrollRight":[32],"displayValues":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]]],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"forceUpdate":[32],"triggerSelectionChange":[64],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"getCopiedObjects":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[0,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}]}],[513,"kritzel-tool-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"config":[32],"palette":[32],"currentOpacity":[32],"updateTrigger":[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{"tool":[{"handleToolChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[9,"resize","handleWindowResize"]]],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1025,"selected-color"],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"],"opacity":[2]}],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[513,"kritzel-line-endings",{"styles":[16],"value":[1040],"strokeColor":[1,"stroke-color"]}],[513,"kritzel-opacity-slider",{"value":[1026],"min":[2],"max":[2],"step":[2],"previewColor":[1,"preview-color"]}],[513,"kritzel-shape-fill",{"value":[1025]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[513,"kritzel-color",{"value":[1],"size":[2]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/classes/core/core.class.js

@@ -217,11 +217,13 @@ export class KritzelCore {
         this.removeSelectionGroup();
         this.removeSelectionBox();
         this._store.state.objects.insert(selectionGroup);
+        this._kritzelEngine.triggerSelectionChange();
     }
     removeSelectionGroup() {
         const selectionGroup = this._store.selectionGroup;
         if (selectionGroup) {
             this._store.state.objects.remove(object => object.id === selectionGroup.id);
+            this._kritzelEngine.triggerSelectionChange();
         }
     }
     removeSelectionBox() {

package/dist/collection/classes/core/viewport.class.js

@@ -4,6 +4,11 @@ export class KritzelViewport {
     _core;
     _debounceUpdate;
     _debounceEndScaling;
+    _velocityX = 0;
+    _velocityY = 0;
+    _panRafId = null;
+    _friction = 0.92;
+    _minVelocity = 0.5;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
@@ -187,11 +192,46 @@ export class KritzelViewport {
         this._debounceEndScaling();
     }
     handlePan(event) {
+        // Normalize delta for trackpad vs mouse wheel
+        // WheelEvent.deltaMode: 0=pixels, 1=lines, 2=pages
+        let deltaX = event.deltaX;
+        let deltaY = event.deltaY;
+        if (event.deltaMode === 1) {
+            deltaX *= 16;
+            deltaY *= 16;
+        }
+        else if (event.deltaMode === 2) {
+            deltaX *= window.innerWidth;
+            deltaY *= window.innerHeight;
+        }
         const panSpeed = 0.8;
-        this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
-        this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
+        // Add to velocity for momentum effect
+        this._velocityX = -deltaX * panSpeed;
+        this._velocityY = -deltaY * panSpeed;
+        // Start animation loop if not already running
+        if (this._panRafId === null) {
+            this._animatePan();
+        }
+    }
+    _animatePan() {
+        // Apply current velocity
+        this._core.store.state.translateX += this._velocityX;
+        this._core.store.state.translateY += this._velocityY;
         this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
-        this._debounceUpdate();
+        // Apply friction to slow down
+        this._velocityX *= this._friction;
+        this._velocityY *= this._friction;
+        // Continue animation if velocity is still significant
+        if (Math.abs(this._velocityX) > this._minVelocity || Math.abs(this._velocityY) > this._minVelocity) {
+            this._panRafId = requestAnimationFrame(() => this._animatePan());
+        }
+        else {
+            // Stop animation and finalize
+            this._velocityX = 0;
+            this._velocityY = 0;
+            this._panRafId = null;
+            this._debounceUpdate();
+        }
     }
 }

package/dist/collection/classes/objects/line.class.js

@@ -68,6 +68,7 @@ export class KritzelLine extends KritzelBaseObject {
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 4;
         object.stroke = options?.stroke ?? '#000000';
+        object.opacity = options?.opacity ?? 1;
         object.startAnchor = options?.startAnchor;
         object.endAnchor = options?.endAnchor;
         object.arrows = options?.arrows;

package/dist/collection/classes/objects/path.class.js

@@ -47,6 +47,7 @@ export class KritzelPath extends KritzelBaseObject {
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 8;
         object.fill = options?.fill ?? '#000000';
+        object.opacity = options?.opacity ?? 1;
         object.zIndex = core.store.currentZIndex;
         object.d = object.generateSvgPath();
         object.updateDimensions();

package/dist/collection/classes/objects/shape.class.js

@@ -86,6 +86,7 @@ export class KritzelShape extends KritzelBaseObject {
         object.fillColor = config?.fillColor ?? 'transparent';
         object.strokeColor = config?.strokeColor ?? '#000000';
         object.strokeWidth = config?.strokeWidth ?? 4;
+        object.opacity = config?.opacity ?? 1;
         object.fontSize = config?.fontSize ?? 16;
         object.fontFamily = config?.fontFamily ?? 'Arial';
         object.fontColor = config?.fontColor ?? '#000000';

package/dist/collection/classes/objects/text.class.js

@@ -78,13 +78,14 @@ export class KritzelText extends KritzelBaseObject {
         if (element === null || this.isInViewport() === false) {
             return;
         }
+        element.style.fontFamily = this.fontFamily;
+        element.style.fontSize = `${this.fontSize}pt`;
+        element.style.color = this.fontColor;
         if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
+            requestAnimationFrame(() => this.adjustSizeOnInput());
             return;
         }
         this.elementRef = element;
-        this.elementRef.style.fontFamily = this.fontFamily;
-        this.elementRef.style.fontSize = `${this.fontSize}pt`;
-        this.elementRef.style.color = this.fontColor;
         this.elementRef.style.whiteSpace = 'pre-wrap';
         this.elementRef.style.wordWrap = 'break-word';
         this.elementRef.innerHTML = '';

package/dist/collection/classes/providers/indexeddb-sync-provider.class.js

@@ -8,7 +8,6 @@ export class IndexedDBSyncProvider {
     constructor(docName, doc, options) {
         const dbName = options?.name || docName;
         this.provider = new IndexeddbPersistence(dbName, doc);
-        console.info(`IndexedDB Persistence initialized: ${dbName}`);
     }
     async connect() {
         if (this.isConnected) {

package/dist/collection/classes/tools/brush-tool.class.js

@@ -5,6 +5,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
     type = 'pen';
     color = '#000000';
     size = 6;
+    opacity = 1;
     palettes = {
         pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#800080'],
         highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
@@ -29,6 +30,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                 });
                 path.isCompleted = false;
                 this._currentPathId = path.id;
@@ -48,6 +50,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     fill: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                 });
                 path.isCompleted = false;
                 this._currentPathId = path.id;
@@ -73,6 +76,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                         scale: this._core.store.state.scale,
                         fill: this.color,
                         strokeWidth: this.size,
+                        opacity: this.opacity,
                     });
                     updatedPath.id = currentPath.id;
                     updatedPath.workspaceId = currentPath.workspaceId;
@@ -98,6 +102,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
                             scale: this._core.store.state.scale,
                             fill: this.color,
                             strokeWidth: this.size,
+                            opacity: this.opacity,
                         });
                         updatedPath.id = currentPath.id;
                         updatedPath.workspaceId = currentPath.workspaceId;

package/dist/collection/classes/tools/line-tool.class.js

@@ -6,7 +6,33 @@ import { KritzelSelectionGroup } from "../objects/selection-group.class";
 export class KritzelLineTool extends KritzelBaseTool {
     color = '#000000';
     size = 4;
-    palettes = ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'];
+    opacity = 1;
+    palette = [
+        '#000000',
+        '#ff5252',
+        '#ffbc00',
+        '#00c853',
+        '#0000FF',
+        '#d500f9',
+        '#fafafa',
+        '#a52714',
+        '#ee8100',
+        '#558b2f',
+        '#01579b',
+        '#8e24aa',
+        '#90a4ae',
+        '#ff4081',
+        '#ff6e40',
+        '#aeea00',
+        '#304ffe',
+        '#7c4dff',
+        '#cfd8dc',
+        '#f8bbd0',
+        '#ffccbc',
+        '#f0f4c3',
+        '#9fa8da',
+        '#d1c4e9',
+    ];
     /** Arrow head configuration for lines created with this tool */
     arrows;
     _startX = 0;
@@ -35,6 +61,7 @@ export class KritzelLineTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     stroke: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                     arrows: this.arrows,
                 });
                 line.isCompleted = false;
@@ -59,6 +86,7 @@ export class KritzelLineTool extends KritzelBaseTool {
                     scale: this._core.store.state.scale,
                     stroke: this.color,
                     strokeWidth: this.size,
+                    opacity: this.opacity,
                     arrows: this.arrows,
                 });
                 line.isCompleted = false;
@@ -86,6 +114,7 @@ export class KritzelLineTool extends KritzelBaseTool {
                         scale: this._core.store.state.scale,
                         stroke: this.color,
                         strokeWidth: this.size,
+                        opacity: this.opacity,
                         arrows: this.arrows,
                     });
                     updatedLine.id = currentLine.id;
@@ -113,6 +142,7 @@ export class KritzelLineTool extends KritzelBaseTool {
                         scale: this._core.store.state.scale,
                         stroke: this.color,
                         strokeWidth: this.size,
+                        opacity: this.opacity,
                         arrows: this.arrows,
                     });
                     updatedLine.id = currentLine.id;

package/dist/collection/classes/tools/selection-tool.class.js

@@ -4,9 +4,15 @@ import { KritzelResizeHandler } from "../handlers/resize.handler";
 import { KritzelRotationHandler } from "../handlers/rotation.handler";
 import { KritzelSelectionHandler } from "../handlers/selection.handler";
 import { KritzelSelectionGroup } from "../objects/selection-group.class";
+import { KritzelGroup } from "../objects/group.class";
 import { KritzelBaseTool } from "./base-tool.class";
 import { KritzelHoverHandler } from "../handlers/hover.handler";
 import { KritzelLineHandleHandler } from "../handlers/line-handle.handler";
+import { KritzelPath } from "../objects/path.class";
+import { KritzelLine } from "../objects/line.class";
+import { KritzelShape } from "../objects/shape.class";
+import { KritzelText } from "../objects/text.class";
+import { DEFAULT_COLOR_PALETTE } from "../../constants/color-palette.constants";
 export class KritzelSelectionTool extends KritzelBaseTool {
     selectionHandler;
     moveHandler;
@@ -14,6 +20,193 @@ export class KritzelSelectionTool extends KritzelBaseTool {
     resizeHandler;
     rotationHandler;
     lineHandleHandler;
+    palette = [...DEFAULT_COLOR_PALETTE];
+    /** Returns true if there are objects in the selection group */
+    hasSelection() {
+        return !!this._core.store.selectionGroup && this._core.store.selectionGroup.objects.length > 0;
+    }
+    /** Returns the selected objects or empty array */
+    getSelectedObjects() {
+        return this._core.store.selectionGroup?.objects ?? [];
+    }
+    flattenObjects(objects) {
+        let result = [];
+        for (const obj of objects) {
+            if (obj instanceof KritzelGroup) {
+                result = result.concat(this.flattenObjects(obj.children));
+            }
+            else {
+                result.push(obj);
+            }
+        }
+        return result;
+    }
+    get color() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return '#000000';
+        for (const obj of objects) {
+            if (obj instanceof KritzelPath)
+                return obj.fill;
+            if (obj instanceof KritzelLine)
+                return obj.stroke;
+            if (obj instanceof KritzelText)
+                return obj.fontColor;
+            if (obj instanceof KritzelShape)
+                return obj.strokeColor;
+        }
+        return '#000000';
+    }
+    set color(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelPath)
+                this._core.updateObject(obj, { fill: value });
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { stroke: value });
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontColor: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { strokeColor: value });
+        });
+        this._core.rerender();
+    }
+    get opacity() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return 1;
+        return objects[0].opacity;
+    }
+    set opacity(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => this._core.updateObject(obj, { opacity: value }));
+        this._core.rerender();
+    }
+    get size() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        if (objects.length === 0)
+            return 1;
+        for (const obj of objects) {
+            if (obj instanceof KritzelPath)
+                return obj.strokeWidth;
+            if (obj instanceof KritzelLine)
+                return obj.strokeWidth;
+            if (obj instanceof KritzelText)
+                return obj.fontSize;
+            if (obj instanceof KritzelShape)
+                return obj.strokeWidth;
+        }
+        return 1;
+    }
+    set size(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelPath)
+                this._core.updateObject(obj, { strokeWidth: value });
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { strokeWidth: value });
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontSize: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { strokeWidth: value });
+        });
+        this._core.rerender();
+    }
+    get fillColor() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelShape)
+                return obj.fillColor;
+        }
+        return 'transparent';
+    }
+    set fillColor(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelShape) {
+                this._core.updateObject(obj, { fillColor: value });
+                // When switching to fill mode, also update stroke color to match
+                if (value !== 'transparent') {
+                    this._core.updateObject(obj, { strokeColor: value });
+                }
+            }
+        });
+        this._core.rerender();
+    }
+    get fontFamily() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelText)
+                return obj.fontFamily;
+            if (obj instanceof KritzelShape)
+                return obj.fontFamily;
+        }
+        return 'Arial';
+    }
+    set fontFamily(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelText)
+                this._core.updateObject(obj, { fontFamily: value });
+            if (obj instanceof KritzelShape)
+                this._core.updateObject(obj, { fontFamily: value });
+        });
+        this._core.rerender();
+    }
+    get arrows() {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        for (const obj of objects) {
+            if (obj instanceof KritzelLine)
+                return obj.arrows;
+        }
+        return { start: { enabled: false }, end: { enabled: false } };
+    }
+    set arrows(value) {
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        objects.forEach(obj => {
+            if (obj instanceof KritzelLine)
+                this._core.updateObject(obj, { arrows: value });
+        });
+        this._core.rerender();
+    }
+    /** Returns the tool config for selected objects, or null if no selection */
+    getToolConfig() {
+        if (!this.hasSelection())
+            return null;
+        const objects = this.flattenObjects(this.getSelectedObjects());
+        const controls = [];
+        const hasShape = objects.some(o => o instanceof KritzelShape);
+        const hasText = objects.some(o => o instanceof KritzelText);
+        const hasLine = objects.some(o => o instanceof KritzelLine);
+        const hasStroke = objects.some(o => o instanceof KritzelPath || o instanceof KritzelLine || o instanceof KritzelShape);
+        if (hasText && !hasStroke) {
+            controls.push({ type: 'font-size', propertyName: 'size' });
+            controls.push({ type: 'font-family', propertyName: 'fontFamily' });
+        }
+        else if (hasStroke && !hasText) {
+            controls.push({ type: 'stroke-size', propertyName: 'size' });
+        }
+        else {
+            if (hasStroke)
+                controls.push({ type: 'stroke-size', propertyName: 'size' });
+            if (hasText)
+                controls.push({ type: 'font-family', propertyName: 'fontFamily' });
+        }
+        if (hasLine) {
+            controls.push({ type: 'line-endings', propertyName: 'arrows' });
+        }
+        if (hasShape) {
+            controls.push({ type: 'shape-fill', propertyName: 'fillColor' });
+        }
+        return {
+            type: 'selection',
+            colorProperty: 'color',
+            sizeProperty: 'size',
+            opacityProperty: 'opacity',
+            paletteSource: 'palette',
+            controls,
+        };
+    }
     constructor(core) {
         super(core);
         this.selectionHandler = new KritzelSelectionHandler(this._core);

package/dist/collection/classes/tools/shape-tool.class.js

@@ -8,6 +8,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
     fillColor = 'transparent';
     strokeColor = '#000000';
     strokeWidth = 4;
+    opacity = 1;
     fontFamily = 'Arial';
     fontSize = 16;
     fontColor = '#000000';
@@ -143,6 +144,7 @@ export class KritzelShapeTool extends KritzelBaseTool {
             fillColor: this.fillColor,
             strokeColor: this.strokeColor,
             strokeWidth: this.strokeWidth,
+            opacity: this.opacity,
             fontSize: this.fontSize,
             fontFamily: this.fontFamily,
             fontColor: this.fontColor,

package/dist/collection/classes/tools/text-tool.class.js

@@ -6,6 +6,7 @@ export class KritzelTextTool extends KritzelBaseTool {
     fontFamily = 'Arial';
     fontSize = 16;
     fontColor = '#000000';
+    opacity = 1;
     palette = [
         '#000000',
         '#FFFFFF',
@@ -56,6 +57,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             const clientY = event.clientY - this._core.store.offsetY;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
@@ -90,6 +92,7 @@ export class KritzelTextTool extends KritzelBaseTool {
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
             text.fontColor = this.fontColor;
+            text.opacity = this.opacity;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "components/core/kritzel-engine/kritzel-engine.js",
     "components/ui/kritzel-context-menu/kritzel-context-menu.js",
     "components/shared/kritzel-font-family/kritzel-font-family.js",
+    "components/shared/kritzel-shape-fill/kritzel-shape-fill.js",
     "components/core/kritzel-cursor-trail/kritzel-cursor-trail.js",
     "components/core/kritzel-editor/kritzel-editor.js",
     "components/shared/kritzel-color/kritzel-color.js",
@@ -12,21 +13,22 @@
     "components/shared/kritzel-font/kritzel-font.js",
     "components/shared/kritzel-font-size/kritzel-font-size.js",
     "components/shared/kritzel-icon/kritzel-icon.js",
+    "components/shared/kritzel-line-endings/kritzel-line-endings.js",
     "components/shared/kritzel-menu/kritzel-menu.js",
     "components/shared/kritzel-menu-item/kritzel-menu-item.js",
+    "components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js",
     "components/shared/kritzel-portal/kritzel-portal.js",
     "components/shared/kritzel-split-button/kritzel-split-button.js",
     "components/shared/kritzel-stroke-size/kritzel-stroke-size.js",
     "components/shared/kritzel-tooltip/kritzel-tooltip.js",
-    "components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js",
-    "components/ui/kritzel-control-text-config/kritzel-control-text-config.js",
     "components/ui/kritzel-controls/kritzel-controls.js",
+    "components/ui/kritzel-tool-config/kritzel-tool-config.js",
     "components/ui/kritzel-utility-panel/kritzel-utility-panel.js",
     "components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.40.1",
+    "version": "4.41.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],