kritzel-stencil 0.1.19 → 0.1.21

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -510,13 +510,23 @@ export class KritzelEngine {
         return (h(Host, { key: '26d2ef50f28fb809d046b60dff6e977dec53fc8c' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'bbacc63967672c6934d1c90913139f1f96e532cb', class: "debug-panel" }, h("div", { key: '59d46ef1a1a8dffe7b1bd97b0df3c77fdd095d97' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'd6bc9b3c6076540ccfec4fd2ef3b3e2edf08d524' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '12e229d893933a01bbfdd038e1bd14eee198b34e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '9caf69c342d545a478bb4945aa7b2c37ea77561f' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '123f6b17777475f4de32872b940abd3b7ffe6d78' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '463c70e208dad8572317bbde0df0f4b149674a7d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '82deb6d97ae66c86431b32582114f81bcd83e5ae' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'be32ffe65da2fc92f556ac037afa5b50c27cedd2' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '53029e75a8972f670ef0fa427549415fd8be7986' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '27517882d278f0df7df59858a9219d356e5bbd8d' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '616611f9ad570741c9be3eabd0c78dc978c16c4f' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '318a17d0b0d7eb2a58233c76063cc72e87782f1b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '45c92f5cc524338b5c0cab5f5123faf0296e7484' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '4b295ddaf8eb9e49547430c839a9ba50daacd42e' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'eef9039260d0f1ffa23102aee0f18ebd90111738' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1a22a4a93ddab249532fe40640f1fa7bbb485d76' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '094daef63fffab66051e1c65392baac58d8f3eca' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'dae17ba3dec0ededdfb873eda4081fb51cea0c52' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '11b4c3fb7fef201e6a98a58f586e1c717f255af4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'ac7b98f441747b90f047069b9e7eac2ac5194eec' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'eb2285428d88835319c68ff26cb99e1e631cba82' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'd32cb23e569a84b16a50b98d2e3d778c6462c88c' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '0b4fafde05bb83d4046b103015a4f008c5b268d8' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '0083eb1e81cd1d0552e0fa2d6cca147e14e0bd86' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '232f452fd89d22db9e4aaf8e6d3b672f934422a5' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '66a0d3a6ac62153acf6ed1b7c57b3ae77daa3c5e', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
-            return (h("div", { key: object.id, style: {
+            return (h("div", { key: object.id, id: object.id, class: "object", style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
-                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                     zIndex: object.zIndex.toString(),
+                    pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.totalHeight + 'px',
+                    width: object?.totalWidth + 'px',
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -526,25 +536,91 @@ export class KritzelEngine {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` })))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
-                    minHeight: '0',
-                    minWidth: '0',
+                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined })))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", { style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: object.totalWidth + 'px',
+                    height: object.totalHeight + 'px',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                    display: KritzelClassHelper.isInstanceOf(object, 'KritzelLine') || KritzelClassHelper.isInstanceOf(object, 'KritzelPath')
-                        ? 'none'
-                        : 'block',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                } }, h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: object.totalWidth + 'px',
+                    height: object.totalHeight + 'px',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
+                    borderWidth: object.borderWidth + 'px',
+                    borderStyle: 'solid',
+                    padding: object.padding + 'px',
+                    overflow: 'visible',
+                } }, h("div", { ref: el => object.mount(el), style: {
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    overflow: 'hidden',
+                    display: 'block',
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: object.totalWidth + 'px',
+                    height: object.totalHeight + 'px',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, h("div", { ref: el => object.mount(el), style: {
+                    width: '100%',
+                    height: '100%',
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: object.totalWidth + 'px',
+                    height: object.totalHeight + 'px',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
+                    borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
+                    borderWidth: object.borderWidth + 'px',
+                    borderStyle: 'solid',
+                } }, h("div", { ref: el => object.mount(el), style: {
+                    width: '100%',
+                    height: '100%',
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: object.totalWidth + 'px',
+                    height: object.totalHeight + 'px',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
                     minHeight: object.initialHeight + 'px',
                     maxWidth: '500px',
@@ -555,7 +631,17 @@ export class KritzelEngine {
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                     textRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'optimizeSpeed' : 'auto',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: object.totalWidth + 'px',
+                    height: object.totalHeight + 'px',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     width: '100%',
                     height: '100%',
                     position: 'relative',
@@ -580,29 +666,13 @@ export class KritzelEngine {
                     textAlign: 'center',
                     overflow: 'hidden',
                     pointerEvents: object.isEditing ? 'auto' : 'none',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                    pointerEvents: 'auto',
-                    overflow: 'hidden',
-                    display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor: KritzelDevicesHelper.isFirefox() ? KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme) : 'transparent',
-                    borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
-                    borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
-                    borderColor: KritzelDevicesHelper.isFirefox() ? KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) : 'transparent',
                 } })))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
                     pointerEvents: 'none',
                     position: 'absolute',
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     zIndex: (object.zIndex + 1).toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
@@ -709,7 +779,7 @@ export class KritzelEngine {
                 } }), h("circle", { class: "selection-line-handle-overlay end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                } }))))))));
+                } })))))))));
         }), (() => {
             const data = this.core.anchorManager.getAnchorLinesRenderData();
             if (!data)
@@ -783,7 +853,7 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '1e1cd8f60b4621c2045c863965f00808fb6945cc', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'b9171dfffeb4a88bc4ad9a7b0196a18f5427183f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -794,7 +864,7 @@ export class KritzelEngine {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'f76c7695d997e395cc588760515d730d88947401', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'd3ce01397575891a78449128020a212345332d06', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js

@@ -18,6 +18,17 @@ export class KritzelTooltip {
             this.tooltipClosed.emit();
         }
     }
+    handleOutsidePointerDown(event) {
+        if (!this.isVisible)
+            return;
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        if (!isInsideTooltip) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.tooltipClosed.emit();
+        }
+    }
     handleWindowResize() {
         this.calculateAdjustedPosition();
     }
@@ -64,14 +75,14 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'de8f3f78ac1b73eecfb373a3234278835efc64db', style: {
+        return (h(Host, { key: 'd23199ba12acd84fe7fb7a3e133a6605b175bcec', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: 'bb3e9eb13abb987f19f39741564af72f1e3c9086', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '28f0e5e18dde3d285e86ca0af6415f83b90cc10b' }))));
+            } }, h("div", { key: '030ca8a36358b78ba726f7406e76cea16a4e75e9', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '148ed867ee7962487d38f82e6d37b8599a7158af' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -204,6 +215,12 @@ export class KritzelTooltip {
                 "target": "document",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handleOutsidePointerDown",
+                "target": "document",
+                "capture": true,
+                "passive": true
             }, {
                 "name": "resize",
                 "method": "handleWindowResize",

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

@@ -55,6 +55,8 @@ export class KritzelControls {
         if (this.activeControl?.tool) {
             this.updateDisplayValues(this.activeControl.tool);
         }
+        this.isTooltipVisible = false;
+        this.openSubMenuControl = null;
     }
     handleSelectionChange() {
         if (this.activeControl?.tool instanceof KritzelSelectionTool) {
@@ -234,13 +236,13 @@ export class KritzelControls {
         // 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: '5e705ca420a7e8e39fef6bea470475b8fbfdf98e', class: {
+        return (h(Host, { key: 'cb713bc59241300837519145031c1d15109e28c3', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'cc691824975b806042463787667fa363d4b466db', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '62cb00da2676739aa472d69e8e453501bd78e408', 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: '31a8251e03ee1489fc205a5507b39e9b8492a011', class: "kritzel-controls" }, h("div", { key: 'b1fe826567c334e1698edfaa856edc567f2cafb3', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'c9879d0f1ce5556f925789359a3a760c8c034ff6', class: "kritzel-tools-scroll", ref: el => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '0376615eb976d961cb17ba02aab36f4127343899', class: "kritzel-controls" }, h("div", { key: 'c72373afc1eb04fb39868d107cb0a35c846097fe', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '1aa1ece36dda200a4c62529c08f1787d8bd4b534', class: "kritzel-tools-scroll", ref: el => {
                 this.toolsScrollRef = el;
                 // Update indicators when ref is set
                 if (el)
@@ -270,10 +272,10 @@ export class KritzelControls {
                     '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: '42741ef8d2b0dd90bc2193998d1d2d103928d934', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: 'a3129881a9c992b6fbd94b66a6325d46072dba60', 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: '4b1f2eafd575056ef74cad7eeda54d84a0ca7c71', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'b051c4cbc98f310f1ee06fb2eeb2e343fe7e6411', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '91696acc8f93a8accf0c0db0ae0f1e3207c246d0', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'bd9acd2bfd178e73942bf7ac79182b05df22be08', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+            }, key: configControl.name }, h("div", { key: '57de6641291894b0e507e90987ea94a9103c25ca', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '182317753d162abe9c804a4757ed19505bb3b487', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '13ecc34147d44b2bb12eb0008eec179db55f5840', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'bc4053cf9feb69c2962fe5a86cd7cf811b03e971', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
                 if (event.key === 'Enter') {
                     this.handleConfigClick?.(event);
                 }

package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js

@@ -33,14 +33,13 @@ export class KritzelMoreMenu {
      */
     itemSelect;
     menuAnchor = null;
-    buttonRef;
     toggleMenu = (event) => {
         event.stopPropagation();
         if (this.menuAnchor) {
             this.closeMenu();
         }
         else {
-            this.menuAnchor = this.buttonRef;
+            this.menuAnchor = this.host;
         }
     };
     closeMenu = () => {
@@ -55,7 +54,7 @@ export class KritzelMoreMenu {
         this.closeMenu();
     };
     render() {
-        return (h(Host, { key: '461bb5cc1a4806529bb7eef05e69c40b69e746b0' }, h("button", { key: 'a61d549f859adedc92425fbcb5082ab827238dc1', ref: el => (this.buttonRef = el), class: "more-menu-button", onClick: this.toggleMenu }, h("kritzel-icon", { key: 'e57df2f59bcf988d363ed0c14ab634cc1cd766ca', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '6dc78dc95ae139ce48489c7cf7429d66812b4c2b', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'de0f7d5e50f69083b7214d9d6efcd72efc4a6562', items: this.items, onItemSelect: this.handleMenuItemSelect }))));
+        return (h(Host, { key: 'f0abb11c73dbfe1667871c56324eb51e1467ba4f' }, h("button", { key: 'a4f6962edb04886743644c2a46cbbe5757a063a0', class: "more-menu-button", onClick: this.toggleMenu }, h("kritzel-icon", { key: '72ed48828a9612de3c33d0452dea4f44f452a5a1', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'cb43b77e4f867b535410380afa29fe1135cab405', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '3555d2e7b263a5dc649a679da9bcc9a027f3648e', items: this.items, onItemSelect: this.handleMenuItemSelect }))));
     }
     static get is() { return "kritzel-more-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.1.19';
+export const KRITZEL_VERSION = '0.1.21';

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-Cj-I2_Og.js";export{e as KritzelBrushTool,d as KritzelGroup,b as KritzelImage,c as KritzelLine,f as KritzelLineTool,a as KritzelPath,h as KritzelSelectionTool,K as KritzelText,g as KritzelTextTool}from"./p-Fa2zws3M.js";import{w as t,a as i,t as o,r as n,b as u,e as m,c as p,d as z,f as C,g as k,s as x,h as y,i as S,v as j,j as w,o as T,k as v,l as M,m as P,O as B,n as W,p as U,q as H,u as A,x as L,y as O,z as N,A as _,B as $,C as R,H as X,D as Y}from"./p-C1vhH4-F.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-C1vhH4-F.js";export{K as KritzelWorkspace}from"./p-n789Y3S-.js";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{K as KritzelThemeManager,d as darkTheme,l as lightTheme}from"./p-BX4JyoOd.js";export{KritzelBackToContent,defineCustomElement as defineCustomElementKritzelBackToContent}from"./kritzel-back-to-content.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelColor,defineCustomElement as defineCustomElementKritzelColor}from"./kritzel-color.js";export{KritzelColorPalette,defineCustomElement as defineCustomElementKritzelColorPalette}from"./kritzel-color-palette.js";export{KritzelContextMenu,defineCustomElement as defineCustomElementKritzelContextMenu}from"./kritzel-context-menu.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDialog,defineCustomElement as defineCustomElementKritzelDialog}from"./kritzel-dialog.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.js";export{KritzelExport,defineCustomElement as defineCustomElementKritzelExport}from"./kritzel-export.js";export{KritzelFont,defineCustomElement as defineCustomElementKritzelFont}from"./kritzel-font.js";export{KritzelFontFamily,defineCustomElement as defineCustomElementKritzelFontFamily}from"./kritzel-font-family.js";export{KritzelFontSize,defineCustomElement as defineCustomElementKritzelFontSize}from"./kritzel-font-size.js";export{KritzelIcon,defineCustomElement as defineCustomElementKritzelIcon}from"./kritzel-icon.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelMasterDetail,defineCustomElement as defineCustomElementKritzelMasterDetail}from"./kritzel-master-detail.js";export{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelMoreMenu,defineCustomElement as defineCustomElementKritzelMoreMenu}from"./kritzel-more-menu.js";export{KritzelNumericInput,defineCustomElement as defineCustomElementKritzelNumericInput}from"./kritzel-numeric-input.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelSettings,defineCustomElement as defineCustomElementKritzelSettings}from"./kritzel-settings.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.js";export{KritzelSlideToggle,defineCustomElement as defineCustomElementKritzelSlideToggle}from"./kritzel-slide-toggle.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.js";export{KritzelToolConfig,defineCustomElement as defineCustomElementKritzelToolConfig}from"./kritzel-tool-config.js";export{KritzelTooltip,defineCustomElement as defineCustomElementKritzelTooltip}from"./kritzel-tooltip.js";export{KritzelUtilityPanel,defineCustomElement as defineCustomElementKritzelUtilityPanel}from"./kritzel-utility-panel.js";export{KritzelWorkspaceManager,defineCustomElement as defineCustomElementKritzelWorkspaceManager}from"./kritzel-workspace-manager.js";class q{doc;channel;_synced=!1;constructor(e,t,s){this.doc=t,this.channel=new BroadcastChannel(e),this.channel.onmessage=e=>{this.handleMessage(e.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+e)}handleDocUpdate=(e,s)=>{if(s!==this){const s=C();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=k(new Uint8Array(e));switch(n(s)){case 0:const e=u(s);p(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=u(s),r=m(this.doc,n);if(r.length>0){const e=C();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=C();t(e,2),i(e,z(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((e=>{const t=()=>{this._synced?e():setTimeout(t,50)};t()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const Q=new Map,V="undefined"==typeof BroadcastChannel?class{constructor(e){this.room=e,this.onmessage=null,this._onChange=t=>t.key===e&&null!==this.onmessage&&this.onmessage({data:S(t.newValue||"")}),T(this._onChange)}postMessage(e){j.setItem(this.room,w(v(e)))}close(){M(this._onChange)}}:BroadcastChannel,Z=e=>x(Q,e,(()=>{const t=y(),s=new V(e);return s.onmessage=e=>t.forEach((t=>t(e.data,"broadcastchannel"))),{bc:s,subs:t}})),ee=(e,t,s=null)=>{const i=Z(e);i.bc.postMessage(t),i.subs.forEach((e=>e(t,s)))},te=(e,s)=>{t(e,0);const o=z(s);i(e,o)},se=(e,s,o)=>{t(e,1),i(e,m(s,o))},ie=(e,t,s,i)=>{try{p(t,u(e),s)}catch(e){null!=i&&i(e),console.error("Caught error while handling a Yjs update",e)}},oe=ie;class ne extends B{constructor(e){super(),this.doc=e,this.clientID=e.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const e=U();null!==this.getLocalState()&&15e3<=e-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const t=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=e-s.lastUpdated&&this.states.has(i)&&t.push(i)})),t.length>0&&re(this,t,"timeout")}),W(3e3)),e.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(e){const t=this.clientID,s=this.meta.get(t),i=void 0===s?0:s.clock+1,o=this.states.get(t);null===e?this.states.delete(t):this.states.set(t,e),this.meta.set(t,{clock:i,lastUpdated:U()});const n=[],r=[],l=[],a=[];null===e?a.push(t):null==o?null!=e&&n.push(t):(r.push(t),H(o,e)||l.push(t)),(n.length>0||l.length>0||a.length>0)&&this.emit("change",[{added:n,updated:l,removed:a},"local"]),this.emit("update",[{added:n,updated:r,removed:a},"local"])}setLocalStateField(e,t){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[e]:t})}getStates(){return this.states}}const re=(e,t,s)=>{const i=[];for(let s=0;s<t.length;s++){const o=t[s];if(e.states.has(o)){if(e.states.delete(o),o===e.clientID){const t=e.meta.get(o);e.meta.set(o,{clock:t.clock+1,lastUpdated:U()})}i.push(o)}}i.length>0&&(e.emit("change",[{added:[],updated:[],removed:i},s]),e.emit("update",[{added:[],updated:[],removed:i},s]))},le=(e,s,i=e.states)=>{const n=s.length,r=C();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,a=e.meta.get(n).clock;t(r,n),t(r,a),A(r,JSON.stringify(l))}return o(r)},ae=[];ae[0]=(e,s,i,o)=>{t(e,0);const r=((e,t,s,i,o)=>{const r=n(e);switch(r){case 0:((e,t,s)=>{se(t,s,u(e))})(e,t,s);break;case 1:ie(e,s,i,o);break;case 2:oe(e,s,i,o);break;default:throw Error("Unknown message type")}return r})(s,e,i.doc,i);o&&1===r&&!i.synced&&(i.synced=!0)},ae[3]=(e,s,o)=>{t(e,1),i(e,le(o.awareness,Array.from(o.awareness.getStates().keys())))},ae[1]=(e,t,s)=>{((e,t,s)=>{const i=k(t),o=U(),r=[],l=[],a=[],c=[],h=n(i);for(let t=0;t<h;t++){const t=n(i);let s=n(i);const h=JSON.parse(P(i)),d=e.meta.get(t),u=e.states.get(t),m=void 0===d?0:d.clock;(m<s||m===s&&null===h&&e.states.has(t))&&(null===h?t===e.clientID&&null!=e.getLocalState()?s++:e.states.delete(t):e.states.set(t,h),e.meta.set(t,{clock:s,lastUpdated:o}),void 0===d&&null!==h?r.push(t):void 0!==d&&null===h?c.push(t):null!==h&&(H(h,u)||a.push(t),l.push(t)))}(r.length>0||a.length>0||c.length>0)&&e.emit("change",[{added:r,updated:a,removed:c},s]),(r.length>0||l.length>0||c.length>0)&&e.emit("update",[{added:r,updated:l,removed:c},s])})(s.awareness,u(t),s)},ae[2]=(e,t,s)=>{((e,t,s)=>{0===n(e)&&s(0,P(e))})(t,0,((e,t)=>ce(s,t)))};const ce=(e,t)=>console.warn(`Permission denied to access ${e.url}.\n${t}`),he=(e,t,s)=>{const i=k(t),o=C(),r=n(i),l=e.messageHandlers[r];return l?l(o,i,e,s,r):console.error("Unable to compute message"),o},de=(e,t,s)=>{t===e.ws&&(e.emit("connection-close",[s,e]),e.ws=null,t.close(),e.wsconnecting=!1,e.wsconnected?(e.wsconnected=!1,e.synced=!1,re(e.awareness,Array.from(e.awareness.getStates().keys()).filter((t=>t!==e.doc.clientID)),e),e.emit("status",[{status:"disconnected"}])):e.wsUnsuccessfulReconnects++,setTimeout(ue,$(100*R(2,e.wsUnsuccessfulReconnects),e.maxBackoffTime),e))},ue=e=>{if(e.shouldConnect&&null===e.ws){const s=new e._WS(e.url,e.protocols);s.binaryType="arraybuffer",e.ws=s,e.wsconnecting=!0,e.wsconnected=!1,e.synced=!1,s.onmessage=t=>{e.wsLastMessageReceived=U();const i=he(e,new Uint8Array(t.data),!0);N(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{de(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=U(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=C();if(t(n,0),te(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=C();t(n,1),i(n,le(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},me=(e,t)=>{const s=e.ws;e.wsconnected&&s&&s.readyState===s.OPEN&&s.send(t),e.bcconnected&&ee(e.bcChannel,t,e)};class fe extends O{constructor(e,s,n,{connect:r=!0,awareness:l=new ne(n),params:a={},protocols:c=[],WebSocketPolyfill:h=WebSocket,resyncInterval:d=-1,maxBackoffTime:u=2500,disableBc:m=!1}={}){for(super();"/"===e[e.length-1];)e=e.slice(0,e.length-1);this.serverUrl=e,this.bcChannel=e+"/"+s,this.maxBackoffTime=u,this.params=a,this.protocols=c,this.roomname=s,this.doc=n,this._WS=h,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ae.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,d>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=C();t(e,0),te(e,n),this.ws.send(o(e))}}),d)),this._bcSubscriber=(e,t)=>{if(t!==this){const t=he(this,new Uint8Array(e),!1);N(t)>1&&ee(this.bcChannel,o(t),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=C();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),me(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),a=C();t(a,1),i(a,le(l,r)),me(this,o(a))},this._exitHandler=()=>{re(this.awareness,[n.clientID],"app closed")},_&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<U()-this.wsLastMessageReceived&&de(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const e=(()=>L(this.params,((e,t)=>`${encodeURIComponent(t)}=${encodeURIComponent(e)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===e.length?"":"?"+e)}get synced(){return this._synced}set synced(e){this._synced!==e&&(this._synced=e,this.emit("synced",[e]),this.emit("sync",[e]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),_&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;this.bcconnected||(((e,t)=>{Z(this.bcChannel).subs.add(t)})(0,this._bcSubscriber),this.bcconnected=!0);const e=C();t(e,0),te(e,this.doc),ee(this.bcChannel,o(e),this);const s=C();t(s,0),se(s,this.doc),ee(this.bcChannel,o(s),this);const n=C();t(n,3),ee(this.bcChannel,o(n),this);const r=C();t(r,1),i(r,le(this.awareness,[this.doc.clientID])),ee(this.bcChannel,o(r),this)}disconnectBc(){const e=C();t(e,1),i(e,le(this.awareness,[this.doc.clientID],new Map)),me(this,o(e)),this.bcconnected&&(((e,t)=>{const s=Z(e);s.subs.delete(t)&&0===s.subs.size&&(s.bc.close(),Q.delete(e))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&de(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(ue(this),this.connectBc())}}class pe{provider;isConnected=!1;constructor(e,t,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||e;this.provider=new fe(i,o,t,{params:s?.params,protocols:s?.protocols,WebSocketPolyfill:s?.WebSocketPolyfill,awareness:s?.awareness,maxBackoffTime:s?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${o}`)}static with(e){return{create:(t,s)=>new pe(t,s,e)}}setupEventListeners(){this.provider.on("status",(({status:e})=>{"connected"===e?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===e&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(e=>{e&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("WebSocket connection timeout"))}),1e4),i=({status:t})=>{"connected"===t&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ze{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(e,t,s){const i=s?.name||e,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ze.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const e={websocketProvider:n,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),this.provider=new X(e),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const e={url:o,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),s?.WebSocketPolyfill&&(e.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new X(e),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(e){if(ze.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ze.sharedWebSocketProvider;const t={url:e.url};return e.WebSocketPolyfill&&(t.WebSocketPolyfill=e.WebSocketPolyfill),e.onConnect&&(t.onConnect=e.onConnect),e.onDisconnect&&(t.onDisconnect=e.onDisconnect),e.onStatus&&(t.onStatus=e.onStatus),ze.sharedWebSocketProvider=new Y(t),console.info("Shared Hocuspocus WebSocket created: "+e.url),ze.sharedWebSocketProvider}static destroySharedWebSocket(){ze.sharedWebSocketProvider&&(ze.sharedWebSocketProvider.destroy(),ze.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ze.sharedWebSocketProvider}static with(e){return{create:(t,s)=>new ze(t,s,e)}}async connect(){if(!this.isSynced)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),e()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void e();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{q as BroadcastSyncProvider,ze as HocuspocusSyncProvider,pe as WebSocketSyncProvider}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-Cj-I2_Og.js";export{e as KritzelBrushTool,d as KritzelGroup,b as KritzelImage,c as KritzelLine,f as KritzelLineTool,a as KritzelPath,h as KritzelSelectionTool,K as KritzelText,g as KritzelTextTool}from"./p-Dmy0R-7y.js";import{w as t,a as i,t as o,r as n,b as u,e as m,c as p,d as z,f as C,g as k,s as y,h as x,i as S,v as j,j as T,o as w,k as v,l as B,m as M,O as P,n as W,p as U,q as H,u as L,x as A,y as O,z as N,A as _,B as $,C as R,H as X,D as Y}from"./p-BbHELXEC.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-BbHELXEC.js";export{K as KritzelWorkspace}from"./p-n789Y3S-.js";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{K as KritzelThemeManager,d as darkTheme,l as lightTheme}from"./p-BX4JyoOd.js";export{KritzelBackToContent,defineCustomElement as defineCustomElementKritzelBackToContent}from"./kritzel-back-to-content.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelColor,defineCustomElement as defineCustomElementKritzelColor}from"./kritzel-color.js";export{KritzelColorPalette,defineCustomElement as defineCustomElementKritzelColorPalette}from"./kritzel-color-palette.js";export{KritzelContextMenu,defineCustomElement as defineCustomElementKritzelContextMenu}from"./kritzel-context-menu.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDialog,defineCustomElement as defineCustomElementKritzelDialog}from"./kritzel-dialog.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.js";export{KritzelExport,defineCustomElement as defineCustomElementKritzelExport}from"./kritzel-export.js";export{KritzelFont,defineCustomElement as defineCustomElementKritzelFont}from"./kritzel-font.js";export{KritzelFontFamily,defineCustomElement as defineCustomElementKritzelFontFamily}from"./kritzel-font-family.js";export{KritzelFontSize,defineCustomElement as defineCustomElementKritzelFontSize}from"./kritzel-font-size.js";export{KritzelIcon,defineCustomElement as defineCustomElementKritzelIcon}from"./kritzel-icon.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelMasterDetail,defineCustomElement as defineCustomElementKritzelMasterDetail}from"./kritzel-master-detail.js";export{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelMoreMenu,defineCustomElement as defineCustomElementKritzelMoreMenu}from"./kritzel-more-menu.js";export{KritzelNumericInput,defineCustomElement as defineCustomElementKritzelNumericInput}from"./kritzel-numeric-input.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelSettings,defineCustomElement as defineCustomElementKritzelSettings}from"./kritzel-settings.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.js";export{KritzelSlideToggle,defineCustomElement as defineCustomElementKritzelSlideToggle}from"./kritzel-slide-toggle.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.js";export{KritzelToolConfig,defineCustomElement as defineCustomElementKritzelToolConfig}from"./kritzel-tool-config.js";export{KritzelTooltip,defineCustomElement as defineCustomElementKritzelTooltip}from"./kritzel-tooltip.js";export{KritzelUtilityPanel,defineCustomElement as defineCustomElementKritzelUtilityPanel}from"./kritzel-utility-panel.js";export{KritzelWorkspaceManager,defineCustomElement as defineCustomElementKritzelWorkspaceManager}from"./kritzel-workspace-manager.js";class q{doc;channel;_synced=!1;constructor(e,t,s){this.doc=t,this.channel=new BroadcastChannel(e),this.channel.onmessage=e=>{this.handleMessage(e.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+e)}handleDocUpdate=(e,s)=>{if(s!==this){const s=C();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=k(new Uint8Array(e));switch(n(s)){case 0:const e=u(s);p(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=u(s),r=m(this.doc,n);if(r.length>0){const e=C();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=C();t(e,2),i(e,z(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((e=>{const t=()=>{this._synced?e():setTimeout(t,50)};t()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const Q=new Map,V="undefined"==typeof BroadcastChannel?class{constructor(e){this.room=e,this.onmessage=null,this._onChange=t=>t.key===e&&null!==this.onmessage&&this.onmessage({data:S(t.newValue||"")}),w(this._onChange)}postMessage(e){j.setItem(this.room,T(v(e)))}close(){B(this._onChange)}}:BroadcastChannel,Z=e=>y(Q,e,(()=>{const t=x(),s=new V(e);return s.onmessage=e=>t.forEach((t=>t(e.data,"broadcastchannel"))),{bc:s,subs:t}})),ee=(e,t,s=null)=>{const i=Z(e);i.bc.postMessage(t),i.subs.forEach((e=>e(t,s)))},te=(e,s)=>{t(e,0);const o=z(s);i(e,o)},se=(e,s,o)=>{t(e,1),i(e,m(s,o))},ie=(e,t,s,i)=>{try{p(t,u(e),s)}catch(e){null!=i&&i(e),console.error("Caught error while handling a Yjs update",e)}},oe=ie;class ne extends P{constructor(e){super(),this.doc=e,this.clientID=e.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const e=U();null!==this.getLocalState()&&15e3<=e-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const t=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=e-s.lastUpdated&&this.states.has(i)&&t.push(i)})),t.length>0&&re(this,t,"timeout")}),W(3e3)),e.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(e){const t=this.clientID,s=this.meta.get(t),i=void 0===s?0:s.clock+1,o=this.states.get(t);null===e?this.states.delete(t):this.states.set(t,e),this.meta.set(t,{clock:i,lastUpdated:U()});const n=[],r=[],l=[],a=[];null===e?a.push(t):null==o?null!=e&&n.push(t):(r.push(t),H(o,e)||l.push(t)),(n.length>0||l.length>0||a.length>0)&&this.emit("change",[{added:n,updated:l,removed:a},"local"]),this.emit("update",[{added:n,updated:r,removed:a},"local"])}setLocalStateField(e,t){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[e]:t})}getStates(){return this.states}}const re=(e,t,s)=>{const i=[];for(let s=0;s<t.length;s++){const o=t[s];if(e.states.has(o)){if(e.states.delete(o),o===e.clientID){const t=e.meta.get(o);e.meta.set(o,{clock:t.clock+1,lastUpdated:U()})}i.push(o)}}i.length>0&&(e.emit("change",[{added:[],updated:[],removed:i},s]),e.emit("update",[{added:[],updated:[],removed:i},s]))},le=(e,s,i=e.states)=>{const n=s.length,r=C();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,a=e.meta.get(n).clock;t(r,n),t(r,a),L(r,JSON.stringify(l))}return o(r)},ae=[];ae[0]=(e,s,i,o)=>{t(e,0);const r=((e,t,s,i,o)=>{const r=n(e);switch(r){case 0:((e,t,s)=>{se(t,s,u(e))})(e,t,s);break;case 1:ie(e,s,i,o);break;case 2:oe(e,s,i,o);break;default:throw Error("Unknown message type")}return r})(s,e,i.doc,i);o&&1===r&&!i.synced&&(i.synced=!0)},ae[3]=(e,s,o)=>{t(e,1),i(e,le(o.awareness,Array.from(o.awareness.getStates().keys())))},ae[1]=(e,t,s)=>{((e,t,s)=>{const i=k(t),o=U(),r=[],l=[],a=[],c=[],d=n(i);for(let t=0;t<d;t++){const t=n(i);let s=n(i);const d=JSON.parse(M(i)),h=e.meta.get(t),u=e.states.get(t),m=void 0===h?0:h.clock;(m<s||m===s&&null===d&&e.states.has(t))&&(null===d?t===e.clientID&&null!=e.getLocalState()?s++:e.states.delete(t):e.states.set(t,d),e.meta.set(t,{clock:s,lastUpdated:o}),void 0===h&&null!==d?r.push(t):void 0!==h&&null===d?c.push(t):null!==d&&(H(d,u)||a.push(t),l.push(t)))}(r.length>0||a.length>0||c.length>0)&&e.emit("change",[{added:r,updated:a,removed:c},s]),(r.length>0||l.length>0||c.length>0)&&e.emit("update",[{added:r,updated:l,removed:c},s])})(s.awareness,u(t),s)},ae[2]=(e,t,s)=>{((e,t,s)=>{0===n(e)&&s(0,M(e))})(t,0,((e,t)=>ce(s,t)))};const ce=(e,t)=>console.warn(`Permission denied to access ${e.url}.\n${t}`),de=(e,t,s)=>{const i=k(t),o=C(),r=n(i),l=e.messageHandlers[r];return l?l(o,i,e,s,r):console.error("Unable to compute message"),o},he=(e,t,s)=>{t===e.ws&&(e.emit("connection-close",[s,e]),e.ws=null,t.close(),e.wsconnecting=!1,e.wsconnected?(e.wsconnected=!1,e.synced=!1,re(e.awareness,Array.from(e.awareness.getStates().keys()).filter((t=>t!==e.doc.clientID)),e),e.emit("status",[{status:"disconnected"}])):e.wsUnsuccessfulReconnects++,setTimeout(ue,$(100*R(2,e.wsUnsuccessfulReconnects),e.maxBackoffTime),e))},ue=e=>{if(e.shouldConnect&&null===e.ws){const s=new e._WS(e.url,e.protocols);s.binaryType="arraybuffer",e.ws=s,e.wsconnecting=!0,e.wsconnected=!1,e.synced=!1,s.onmessage=t=>{e.wsLastMessageReceived=U();const i=de(e,new Uint8Array(t.data),!0);N(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{he(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=U(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=C();if(t(n,0),te(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=C();t(n,1),i(n,le(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},me=(e,t)=>{const s=e.ws;e.wsconnected&&s&&s.readyState===s.OPEN&&s.send(t),e.bcconnected&&ee(e.bcChannel,t,e)};class fe extends O{constructor(e,s,n,{connect:r=!0,awareness:l=new ne(n),params:a={},protocols:c=[],WebSocketPolyfill:d=WebSocket,resyncInterval:h=-1,maxBackoffTime:u=2500,disableBc:m=!1}={}){for(super();"/"===e[e.length-1];)e=e.slice(0,e.length-1);this.serverUrl=e,this.bcChannel=e+"/"+s,this.maxBackoffTime=u,this.params=a,this.protocols=c,this.roomname=s,this.doc=n,this._WS=d,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ae.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,h>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=C();t(e,0),te(e,n),this.ws.send(o(e))}}),h)),this._bcSubscriber=(e,t)=>{if(t!==this){const t=de(this,new Uint8Array(e),!1);N(t)>1&&ee(this.bcChannel,o(t),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=C();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),me(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),a=C();t(a,1),i(a,le(l,r)),me(this,o(a))},this._exitHandler=()=>{re(this.awareness,[n.clientID],"app closed")},_&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<U()-this.wsLastMessageReceived&&he(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const e=(()=>A(this.params,((e,t)=>`${encodeURIComponent(t)}=${encodeURIComponent(e)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===e.length?"":"?"+e)}get synced(){return this._synced}set synced(e){this._synced!==e&&(this._synced=e,this.emit("synced",[e]),this.emit("sync",[e]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),_&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;this.bcconnected||(((e,t)=>{Z(this.bcChannel).subs.add(t)})(0,this._bcSubscriber),this.bcconnected=!0);const e=C();t(e,0),te(e,this.doc),ee(this.bcChannel,o(e),this);const s=C();t(s,0),se(s,this.doc),ee(this.bcChannel,o(s),this);const n=C();t(n,3),ee(this.bcChannel,o(n),this);const r=C();t(r,1),i(r,le(this.awareness,[this.doc.clientID])),ee(this.bcChannel,o(r),this)}disconnectBc(){const e=C();t(e,1),i(e,le(this.awareness,[this.doc.clientID],new Map)),me(this,o(e)),this.bcconnected&&(((e,t)=>{const s=Z(e);s.subs.delete(t)&&0===s.subs.size&&(s.bc.close(),Q.delete(e))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&he(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(ue(this),this.connectBc())}}class pe{provider;isConnected=!1;constructor(e,t,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||e;this.provider=new fe(i,o,t,{params:s?.params,protocols:s?.protocols,WebSocketPolyfill:s?.WebSocketPolyfill,awareness:s?.awareness,maxBackoffTime:s?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${o}`)}static with(e){return{create:(t,s)=>new pe(t,s,e)}}setupEventListeners(){this.provider.on("status",(({status:e})=>{"connected"===e?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===e&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(e=>{e&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("WebSocket connection timeout"))}),1e4),i=({status:t})=>{"connected"===t&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ze{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(e,t,s){const i=s?.name||e,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ze.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const e={websocketProvider:n,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),this.provider=new X(e),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const e={url:o,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),s?.WebSocketPolyfill&&(e.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new X(e),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(e){if(ze.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ze.sharedWebSocketProvider;const t={url:e.url};return e.WebSocketPolyfill&&(t.WebSocketPolyfill=e.WebSocketPolyfill),e.onConnect&&(t.onConnect=e.onConnect),e.onDisconnect&&(t.onDisconnect=e.onDisconnect),e.onStatus&&(t.onStatus=e.onStatus),ze.sharedWebSocketProvider=new Y(t),console.info("Shared Hocuspocus WebSocket created: "+e.url),ze.sharedWebSocketProvider}static destroySharedWebSocket(){ze.sharedWebSocketProvider&&(ze.sharedWebSocketProvider.destroy(),ze.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ze.sharedWebSocketProvider}static with(e){return{create:(t,s)=>new ze(t,s,e)}}async connect(){if(!this.isSynced)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),e()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void e();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{q as BroadcastSyncProvider,ze as HocuspocusSyncProvider,pe as WebSocketSyncProvider}

package/dist/components/kritzel-controls.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-BYNKXfwA.js";const p=o,r=s;export{p as KritzelControls,r as defineCustomElement}
+import{K as s,d as o}from"./p-DqtvAhfs.js";const t=s,p=o;export{t as KritzelControls,p as defineCustomElement}

package/dist/components/kritzel-editor.js

@@ -1 +1 @@
-import{p as e,H as t,c as s,h as o,d as i,t as r}from"./p-Cj-I2_Og.js";import{K as a,d as n}from"./p-Cpb-fnoO.js";import{S as l,h as c,e as p,f as m,g as k,i as h,j as d}from"./p-Fa2zws3M.js";import{L as b,M as u,K as f,E as g,N as z}from"./p-C1vhH4-F.js";import{D as y}from"./p-BX4JyoOd.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as x}from"./p-yWjTje8m.js";import{d as w}from"./p-BxK5ew4S.js";import{d as E}from"./p-WnxGQWr6.js";import{d as S}from"./p-BGwkUUZk.js";import{d as v}from"./p-BYNKXfwA.js";import{d as I}from"./p-JdxbP-1P.js";import{d as R}from"./p-CTQmvTXG.js";import{d as W}from"./p-DKDoQ9nc.js";import{d as O}from"./p-DoE6WkDw.js";import{d as T}from"./p-BNYfuHT_.js";import{d as D}from"./p-CwP7yBQP.js";import{d as M}from"./p-6USF_L1F.js";import{d as B}from"./p-DnB4Srvo.js";import{d as V}from"./p-DKNtjoqf.js";import{d as K,a as P}from"./p-CbRaWk0G.js";import{d as U}from"./p-Dmfmb5xr.js";import{d as F}from"./p-n0XDtwWP.js";import{d as A}from"./p-8uzm1dKV.js";import{d as G}from"./p-CDZUyTsg.js";import{d as N}from"./p-DG7kxVDc.js";import{d as Y}from"./p-CJTKpwmi.js";import{d as Q}from"./p-RU06uu0S.js";import{d as X}from"./p-BBx_5XKc.js";import{d as _}from"./p-D_gY5jie.js";import{d as J}from"./p-DGpuS101.js";import{d as L}from"./p-Mre0ZWEc.js";import{d as Z}from"./p-GeVIjnFi.js";import{d as H}from"./p-rBxQNDS2.js";const q={type:"pen",color:y[0],size:16,palettes:{pen:[...y]}},$={color:y[0],size:8,fontFamily:"Arial",palette:[...y]},ee={color:y[0],size:4,palette:[...y],arrows:{end:{enabled:!0,style:"triangle"}}},te={shapeType:l.Rectangle,fillColor:{light:"transparent",dark:"transparent"},strokeColor:y[0],strokeWidth:4,fontColor:y[0],fontSize:16,fontFamily:"Arial",palette:[...y]},se=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange"),this.themeChange=s(this,"themeChange")}get host(){return this}scaleMax=b;scaleMin=u;lockDrawingScale=!0;controls=[{name:"selection",type:"tool",isDefault:!0,tool:c,icon:"cursor"},{name:"brush",type:"tool",tool:p,icon:"pen",config:q},{name:"line",type:"tool",tool:m,icon:"arrow",config:ee},{name:"eraser",type:"tool",tool:f,icon:"eraser"},{name:"text",type:"tool",tool:k,icon:"type",config:$},{name:"shape",type:"tool",tool:h,icon:"shape-rectangle",config:te,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:l.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:l.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:l.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:g,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((e=>"KritzelGroup"===e.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;themeChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;isBackToContentButtonVisible=!1;currentTheme="light";onIsEngineReady(e){e&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(e){e&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(e){if(this.activeWorkspace){const t=e.find((e=>e.id===this.activeWorkspace.id));t&&t!==this.activeWorkspace&&(this.activeWorkspace=t)}}onCurrentThemeChange(){setTimeout((()=>this.setOsSpecificCssVariables()),0)}onTouchStart(e){e.cancelable&&e.preventDefault()}async getObjectById(e){return this.engineRef.getObjectById(e)}async addObject(e){return this.engineRef.addObject(e)}async updateObject(e,t){return this.engineRef.updateObject(e,t)}async removeObject(e){return this.engineRef.removeObject(e)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(e){return this.engineRef.selectObjects(e)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(e){return this.engineRef.centerObjectInViewport(e)}async backToContent(){return this.engineRef.backToContent()}async createWorkspace(e,t){const s=new j("workspace-"+Date.now(),e,t);return this.engineRef.createWorkspace(s)}async updateWorkspace(e){return this.engineRef.updateWorkspace(e)}async deleteWorkspace(e){return this.engineRef.deleteWorkspace(e)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;settingsRef;exportRef;splitButtonRef;componentWillLoad(){this.loadSettingsFromStorage()}componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}loadSettingsFromStorage(){const e=localStorage.getItem("kritzel-settings");if(e)try{const t=JSON.parse(e);"number"==typeof t.scaleMin&&(this.scaleMin=t.scaleMin),"number"==typeof t.scaleMax&&(this.scaleMax=t.scaleMax),"boolean"==typeof t.lockDrawingScale&&(this.lockDrawingScale=t.lockDrawingScale),"light"!==t.theme&&"dark"!==t.theme||(this.currentTheme=t.theme)}catch{}}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(e){this.isEngineReady=!0,this.activeWorkspace=e.detail.activeWorkspace,this.workspaces=e.detail.workspaces}handleWorkspacesChange(e){this.workspaces=e.detail}handleObjectsChange(e){this.objectsChange.emit(e.detail)}handleUndoStateChange(e){this.undoStateChange.emit(e.detail),this.undoState=e.detail}handleObjectsInViewportChange(e){this.isBackToContentButtonVisible=!(e.detail.length>0)}handleSettingsChange(e){this.scaleMin=e.detail.scaleMin,this.scaleMax=e.detail.scaleMax,this.lockDrawingScale=e.detail.lockDrawingScale,this.currentTheme=e.detail.theme,this.themeChange.emit(e.detail.theme)}async handleMoreMenuItemSelect(e){const{item:t}=e.detail;if("settings"===t.id&&this.settingsRef.open(),"export"===t.id){const e=await this.engineRef.getScreenshot("png");this.exportRef.open(e)}}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))a.register(e,t)}listenForMobileKeyboard(){d.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"8abd16c01cedfeb14a955c035527de9c888674b9"},o("div",{key:"6bef3409a2b41de3aaf09c993662ba956578bc6a",class:"top-left-buttons"},o("kritzel-workspace-manager",{key:"ab4bcb8af52faa2b91380ea1591ecd5e59e3e18e",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-back-to-content",{key:"953502a6f1e6e8dd8478d57e3613c97e138aae63",visible:this.isBackToContentButtonVisible,onBackToContent:()=>this.backToContent()})),o("kritzel-engine",{key:"fcea81bc67cdb078a9ebbfa63211e34766512ef0",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,scaleMin:this.scaleMin,theme:this.currentTheme,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:e=>this.onEngineReady(e),onWorkspacesChange:e=>this.handleWorkspacesChange(e),onObjectsChange:e=>this.handleObjectsChange(e),onUndoStateChange:e=>this.handleUndoStateChange(e),onObjectsInViewportChange:e=>this.handleObjectsInViewportChange(e)}),o("kritzel-controls",{key:"da63adcab7cbd5a349f7ad6027789b3efffed9ac",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:e=>this.controlsRef=e,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,theme:this.currentTheme,onIsControlsReady:()=>this.isControlsReady=!0}),o("div",{key:"baf7dedb8f514dba4aac7bcc44c0ba5c02cc0cf8",class:"top-right-buttons"},o("kritzel-settings",{key:"8f283f3a7138a4f84a2ca8165beb4310cedb939c",ref:e=>this.settingsRef=e,onSettingsChange:e=>this.handleSettingsChange(e)}),o("kritzel-export",{key:"8f89c247b842f5d56ef3754e17330edfe1a6e3c2",ref:e=>this.exportRef=e,onExportPng:()=>this.engineRef.exportViewportAsPng(),onExportSvg:()=>this.engineRef.exportViewportAsSvg()}),o("kritzel-more-menu",{key:"053e9de589cad9a05ead53c2cbcbdd8a15527a9c",onItemSelect:e=>this.handleMoreMenuItemSelect(e)})))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}}static get style(){return"kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}"}},[512,"kritzel-editor",{scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],lockDrawingScale:[1028,"lock-drawing-scale"],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],isBackToContentButtonVisible:[32],currentTheme:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}]),oe=se,ie=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-back-to-content","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dialog","kritzel-dropdown","kritzel-engine","kritzel-export","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-master-detail","kritzel-menu","kritzel-menu-item","kritzel-more-menu","kritzel-numeric-input","kritzel-opacity-slider","kritzel-portal","kritzel-settings","kritzel-shape-fill","kritzel-slide-toggle","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(r(e))||customElements.define(r(e),se);break;case"kritzel-back-to-content":customElements.get(r(e))||x();break;case"kritzel-color":customElements.get(r(e))||w();break;case"kritzel-color-palette":customElements.get(r(e))||E();break;case"kritzel-context-menu":customElements.get(r(e))||S();break;case"kritzel-controls":customElements.get(r(e))||v();break;case"kritzel-cursor-trail":customElements.get(r(e))||I();break;case"kritzel-dialog":customElements.get(r(e))||R();break;case"kritzel-dropdown":customElements.get(r(e))||W();break;case"kritzel-engine":customElements.get(r(e))||z();break;case"kritzel-export":customElements.get(r(e))||O();break;case"kritzel-font":customElements.get(r(e))||T();break;case"kritzel-font-family":customElements.get(r(e))||D();break;case"kritzel-font-size":customElements.get(r(e))||M();break;case"kritzel-icon":customElements.get(r(e))||n();break;case"kritzel-line-endings":customElements.get(r(e))||B();break;case"kritzel-master-detail":customElements.get(r(e))||V();break;case"kritzel-menu":customElements.get(r(e))||P();break;case"kritzel-menu-item":customElements.get(r(e))||K();break;case"kritzel-more-menu":customElements.get(r(e))||U();break;case"kritzel-numeric-input":customElements.get(r(e))||F();break;case"kritzel-opacity-slider":customElements.get(r(e))||A();break;case"kritzel-portal":customElements.get(r(e))||G();break;case"kritzel-settings":customElements.get(r(e))||N();break;case"kritzel-shape-fill":customElements.get(r(e))||Y();break;case"kritzel-slide-toggle":customElements.get(r(e))||Q();break;case"kritzel-split-button":customElements.get(r(e))||X();break;case"kritzel-stroke-size":customElements.get(r(e))||_();break;case"kritzel-tool-config":customElements.get(r(e))||J();break;case"kritzel-tooltip":customElements.get(r(e))||L();break;case"kritzel-utility-panel":customElements.get(r(e))||Z();break;case"kritzel-workspace-manager":customElements.get(r(e))||H()}}))};export{q as D,oe as KritzelEditor,$ as a,ee as b,ie as defineCustomElement}
+import{p as e,H as t,c as s,h as o,d as i,t as r}from"./p-Cj-I2_Og.js";import{K as a,d as n}from"./p-Cpb-fnoO.js";import{S as l,h as c,e as p,f as m,g as k,i as h,j as d}from"./p-Dmy0R-7y.js";import{L as b,M as u,K as f,E as g,N as z}from"./p-BbHELXEC.js";import{D as y}from"./p-BX4JyoOd.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as x}from"./p-yWjTje8m.js";import{d as E}from"./p-BxK5ew4S.js";import{d as w}from"./p-WnxGQWr6.js";import{d as v}from"./p-BGwkUUZk.js";import{d as S}from"./p-DqtvAhfs.js";import{d as R}from"./p-JdxbP-1P.js";import{d as I}from"./p-CTQmvTXG.js";import{d as O}from"./p-DKDoQ9nc.js";import{d as W}from"./p-DoE6WkDw.js";import{d as T}from"./p-BNYfuHT_.js";import{d as B}from"./p-CwP7yBQP.js";import{d as D}from"./p-6USF_L1F.js";import{d as M}from"./p-DnB4Srvo.js";import{d as V}from"./p-DKNtjoqf.js";import{d as K,a as P}from"./p-CbRaWk0G.js";import{d as U}from"./p-CBs9GnLk.js";import{d as A}from"./p-n0XDtwWP.js";import{d as F}from"./p-8uzm1dKV.js";import{d as G}from"./p-CDZUyTsg.js";import{d as N}from"./p-BsvZ2juR.js";import{d as L}from"./p-CJTKpwmi.js";import{d as X}from"./p-RU06uu0S.js";import{d as Y}from"./p-BBx_5XKc.js";import{d as Q}from"./p-D_gY5jie.js";import{d as _}from"./p-CYX7RMRZ.js";import{d as J}from"./p-BNT9uvII.js";import{d as Z}from"./p-GeVIjnFi.js";import{d as q}from"./p-rBxQNDS2.js";const H={type:"pen",color:y[0],size:16,palettes:{pen:[...y]}},$={color:y[0],size:8,fontFamily:"Arial",palette:[...y]},ee={color:y[0],size:4,palette:[...y],arrows:{end:{enabled:!0,style:"triangle"}}},te={shapeType:l.Rectangle,fillColor:{light:"transparent",dark:"transparent"},strokeColor:y[0],strokeWidth:4,fontColor:y[0],fontSize:16,fontFamily:"Arial",palette:[...y]},se=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange"),this.themeChange=s(this,"themeChange")}get host(){return this}scaleMax=b;scaleMin=u;lockDrawingScale=!0;controls=[{name:"selection",type:"tool",isDefault:!0,tool:c,icon:"cursor"},{name:"brush",type:"tool",tool:p,icon:"pen",config:H},{name:"line",type:"tool",tool:m,icon:"arrow",config:ee},{name:"eraser",type:"tool",tool:f,icon:"eraser"},{name:"text",type:"tool",tool:k,icon:"type",config:$},{name:"shape",type:"tool",tool:h,icon:"shape-rectangle",config:te,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:l.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:l.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:l.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:g,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((e=>"KritzelGroup"===e.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;themeChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;isBackToContentButtonVisible=!1;currentTheme="light";onIsEngineReady(e){e&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(e){e&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(e){if(this.activeWorkspace){const t=e.find((e=>e.id===this.activeWorkspace.id));t&&t!==this.activeWorkspace&&(this.activeWorkspace=t)}}onCurrentThemeChange(){setTimeout((()=>this.setOsSpecificCssVariables()),0)}onTouchStart(e){e.cancelable&&e.preventDefault()}async getObjectById(e){return this.engineRef.getObjectById(e)}async addObject(e){return this.engineRef.addObject(e)}async updateObject(e,t){return this.engineRef.updateObject(e,t)}async removeObject(e){return this.engineRef.removeObject(e)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(e){return this.engineRef.selectObjects(e)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(e){return this.engineRef.centerObjectInViewport(e)}async backToContent(){return this.engineRef.backToContent()}async createWorkspace(e,t){const s=new j("workspace-"+Date.now(),e,t);return this.engineRef.createWorkspace(s)}async updateWorkspace(e){return this.engineRef.updateWorkspace(e)}async deleteWorkspace(e){return this.engineRef.deleteWorkspace(e)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;settingsRef;exportRef;splitButtonRef;componentWillLoad(){this.loadSettingsFromStorage()}componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}loadSettingsFromStorage(){const e=localStorage.getItem("kritzel-settings");if(e)try{const t=JSON.parse(e);"number"==typeof t.scaleMin&&(this.scaleMin=t.scaleMin),"number"==typeof t.scaleMax&&(this.scaleMax=t.scaleMax),"boolean"==typeof t.lockDrawingScale&&(this.lockDrawingScale=t.lockDrawingScale),"light"!==t.theme&&"dark"!==t.theme||(this.currentTheme=t.theme)}catch{}}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(e){this.isEngineReady=!0,this.activeWorkspace=e.detail.activeWorkspace,this.workspaces=e.detail.workspaces}handleWorkspacesChange(e){this.workspaces=e.detail}handleObjectsChange(e){this.objectsChange.emit(e.detail)}handleUndoStateChange(e){this.undoStateChange.emit(e.detail),this.undoState=e.detail}handleObjectsInViewportChange(e){this.isBackToContentButtonVisible=!(e.detail.length>0)}handleSettingsChange(e){this.scaleMin=e.detail.scaleMin,this.scaleMax=e.detail.scaleMax,this.lockDrawingScale=e.detail.lockDrawingScale,this.currentTheme=e.detail.theme,this.themeChange.emit(e.detail.theme)}async handleMoreMenuItemSelect(e){const{item:t}=e.detail;if("settings"===t.id&&this.settingsRef.open(),"export"===t.id){const e=await this.engineRef.getScreenshot("png");this.exportRef.open(e)}}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))a.register(e,t)}listenForMobileKeyboard(){d.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"8abd16c01cedfeb14a955c035527de9c888674b9"},o("div",{key:"6bef3409a2b41de3aaf09c993662ba956578bc6a",class:"top-left-buttons"},o("kritzel-workspace-manager",{key:"ab4bcb8af52faa2b91380ea1591ecd5e59e3e18e",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-back-to-content",{key:"953502a6f1e6e8dd8478d57e3613c97e138aae63",visible:this.isBackToContentButtonVisible,onBackToContent:()=>this.backToContent()})),o("kritzel-engine",{key:"fcea81bc67cdb078a9ebbfa63211e34766512ef0",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,scaleMin:this.scaleMin,theme:this.currentTheme,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:e=>this.onEngineReady(e),onWorkspacesChange:e=>this.handleWorkspacesChange(e),onObjectsChange:e=>this.handleObjectsChange(e),onUndoStateChange:e=>this.handleUndoStateChange(e),onObjectsInViewportChange:e=>this.handleObjectsInViewportChange(e)}),o("kritzel-controls",{key:"da63adcab7cbd5a349f7ad6027789b3efffed9ac",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:e=>this.controlsRef=e,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,theme:this.currentTheme,onIsControlsReady:()=>this.isControlsReady=!0}),o("div",{key:"baf7dedb8f514dba4aac7bcc44c0ba5c02cc0cf8",class:"top-right-buttons"},o("kritzel-settings",{key:"8f283f3a7138a4f84a2ca8165beb4310cedb939c",ref:e=>this.settingsRef=e,onSettingsChange:e=>this.handleSettingsChange(e)}),o("kritzel-export",{key:"8f89c247b842f5d56ef3754e17330edfe1a6e3c2",ref:e=>this.exportRef=e,onExportPng:()=>this.engineRef.exportViewportAsPng(),onExportSvg:()=>this.engineRef.exportViewportAsSvg()}),o("kritzel-more-menu",{key:"053e9de589cad9a05ead53c2cbcbdd8a15527a9c",onItemSelect:e=>this.handleMoreMenuItemSelect(e)})))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}}static get style(){return"kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}"}},[512,"kritzel-editor",{scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],lockDrawingScale:[1028,"lock-drawing-scale"],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],isBackToContentButtonVisible:[32],currentTheme:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}]),oe=se,ie=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-back-to-content","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dialog","kritzel-dropdown","kritzel-engine","kritzel-export","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-master-detail","kritzel-menu","kritzel-menu-item","kritzel-more-menu","kritzel-numeric-input","kritzel-opacity-slider","kritzel-portal","kritzel-settings","kritzel-shape-fill","kritzel-slide-toggle","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(r(e))||customElements.define(r(e),se);break;case"kritzel-back-to-content":customElements.get(r(e))||x();break;case"kritzel-color":customElements.get(r(e))||E();break;case"kritzel-color-palette":customElements.get(r(e))||w();break;case"kritzel-context-menu":customElements.get(r(e))||v();break;case"kritzel-controls":customElements.get(r(e))||S();break;case"kritzel-cursor-trail":customElements.get(r(e))||R();break;case"kritzel-dialog":customElements.get(r(e))||I();break;case"kritzel-dropdown":customElements.get(r(e))||O();break;case"kritzel-engine":customElements.get(r(e))||z();break;case"kritzel-export":customElements.get(r(e))||W();break;case"kritzel-font":customElements.get(r(e))||T();break;case"kritzel-font-family":customElements.get(r(e))||B();break;case"kritzel-font-size":customElements.get(r(e))||D();break;case"kritzel-icon":customElements.get(r(e))||n();break;case"kritzel-line-endings":customElements.get(r(e))||M();break;case"kritzel-master-detail":customElements.get(r(e))||V();break;case"kritzel-menu":customElements.get(r(e))||P();break;case"kritzel-menu-item":customElements.get(r(e))||K();break;case"kritzel-more-menu":customElements.get(r(e))||U();break;case"kritzel-numeric-input":customElements.get(r(e))||A();break;case"kritzel-opacity-slider":customElements.get(r(e))||F();break;case"kritzel-portal":customElements.get(r(e))||G();break;case"kritzel-settings":customElements.get(r(e))||N();break;case"kritzel-shape-fill":customElements.get(r(e))||L();break;case"kritzel-slide-toggle":customElements.get(r(e))||X();break;case"kritzel-split-button":customElements.get(r(e))||Y();break;case"kritzel-stroke-size":customElements.get(r(e))||Q();break;case"kritzel-tool-config":customElements.get(r(e))||_();break;case"kritzel-tooltip":customElements.get(r(e))||J();break;case"kritzel-utility-panel":customElements.get(r(e))||Z();break;case"kritzel-workspace-manager":customElements.get(r(e))||q()}}))};export{H as D,oe as KritzelEditor,$ as a,ee as b,ie as defineCustomElement}

package/dist/components/kritzel-engine.js

@@ -1 +1 @@
-import{P as o,N as s}from"./p-C1vhH4-F.js";const p=o,r=s;export{p as KritzelEngine,r as defineCustomElement}
+import{P as o,N as s}from"./p-BbHELXEC.js";const p=o,r=s;export{p as KritzelEngine,r as defineCustomElement}

package/dist/components/kritzel-more-menu.js

@@ -1 +1 @@
-import{K as m,d as o}from"./p-Dmfmb5xr.js";const r=m,s=o;export{r as KritzelMoreMenu,s as defineCustomElement}
+import{K as s,d as o}from"./p-CBs9GnLk.js";const p=s,r=o;export{p as KritzelMoreMenu,r as defineCustomElement}

package/dist/components/kritzel-settings.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-DG7kxVDc.js";const p=o,r=s;export{p as KritzelSettings,r as defineCustomElement}
+import{K as s,d as o}from"./p-BsvZ2juR.js";const p=s,r=o;export{p as KritzelSettings,r as defineCustomElement}

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

@@ -1 +1 @@
-import{a as o,d as p}from"./p-DGpuS101.js";const s=o,a=p;export{s as KritzelToolConfig,a as defineCustomElement}
+import{a as o,d as s}from"./p-CYX7RMRZ.js";const a=o,p=s;export{a as KritzelToolConfig,p as defineCustomElement}

package/dist/components/kritzel-tooltip.js

@@ -1 +1 @@
-import{K as o,d as r}from"./p-Mre0ZWEc.js";const s=o,p=r;export{s as KritzelTooltip,p as defineCustomElement}
+import{K as o,d as s}from"./p-BNT9uvII.js";const p=o,r=s;export{p as KritzelTooltip,r as defineCustomElement}

package/dist/components/p-BNT9uvII.js

@@ -0,0 +1 @@
+import{p as t,H as o,c as i,h as e,d as s,t as n}from"./p-Cj-I2_Og.js";import{K as l}from"./p-BML28BJR.js";const a=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=i(this,"tooltipClosed")}get host(){return this}isVisible=!1;anchorElement;offsetY=24;tooltipClosed;positionX=0;positionY=0;handleOutsideClick(t){this.isVisible&&(t.composedPath().some((t=>t===this.host))||this.tooltipClosed.emit())}handleOutsidePointerDown(t){this.isVisible&&(t.composedPath().some((t=>t===this.host))||(t.stopPropagation(),t.preventDefault(),this.tooltipClosed.emit()))}handleWindowResize(){this.calculateAdjustedPosition()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}componentDidLoad(){this.focusSlottedContent()}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}focusSlottedContent(){const t=this.host.shadowRoot?.querySelector("slot"),o=t?.assignedElements()||[];o.length>0&&o[0].focus()}calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),o=this.host.shadowRoot?.querySelector(".tooltip-content"),i=o?.getBoundingClientRect(),e=i?.width||0,s=12,n=window.innerWidth-e-s;this.positionX=Math.max(s,Math.min(t.left+t.width/2-e/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return e(s,{key:"d23199ba12acd84fe7fb7a3e133a6605b175bcec",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:`${this.positionX}px`,bottom:`${this.positionY}px`}},e("div",{key:"030ca8a36358b78ba726f7406e76cea16a4e75e9",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},e("slot",{key:"148ed867ee7962487d38f82e6d37b8599a7158af"})))}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],focusContent:[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[9,"resize","handleWindowResize"]]]);function r(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),a))}))}export{a as K,r as d}